/* ============================================================
   CSS VARIABLES — "The Quiet Library"
   ============================================================ */
:root,:root[data-theme="dark"]{
  --bg-deepest:#13161c;--bg-deep:#181c24;--bg-panel:#1e2330;--bg-surface:#252b39;--bg-hover:#2b3245;
  --bg-input:#151921;--border:#282f40;--border-light:#353e54;
  --text-primary:#d8d3c8;--text-secondary:#9ba1aa;--text-muted:#5c6370;
  --accent:#6aab8e;--accent-dim:#5a9479;--accent-soft:rgba(106,171,142,.08);--accent-glow:rgba(106,171,142,.15);
  --accent-warm:#b8a472;--danger:#c07070;--success:#6aab8e;
  --primary-src:#8b6e47;--secondary-src:#5a7f9b;
  --canvas-grid:rgba(106,171,142,.04);--canvas-line:rgba(106,171,142,.35);
  --highlight:rgba(201,168,76,.25);--tag-bg:rgba(106,171,142,.06);
}
:root[data-theme="light"]{
  --bg-deepest:#edeae3;--bg-deep:#e3e0d7;--bg-panel:#f6f5f1;--bg-surface:#fff;--bg-hover:#ebe8e0;
  --bg-input:#fff;--border:#cdc7b8;--border-light:#b0a998;
  --text-primary:#2c2f33;--text-secondary:#4d5258;--text-muted:#7a8088;
  --accent:#3d7a5f;--accent-dim:#4a8a6e;--accent-soft:rgba(61,122,95,.08);--accent-glow:rgba(61,122,95,.15);
  --accent-warm:#8a7440;--danger:#a84242;--success:#3d7a5f;
  --primary-src:#8b6e47;--secondary-src:#4a6f8a;
  --canvas-grid:rgba(61,122,95,.06);--canvas-line:rgba(61,122,95,.4);
  --highlight:rgba(160,134,54,.2);--tag-bg:rgba(61,122,95,.06);
}
:root{
  --display:'Cormorant Garamond','Georgia',serif;--serif:'Times New Roman',Times,serif;
  --sans:system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Consolas','Monaco',monospace;
  --radius:4px;--radius-lg:8px;--transition:.2s ease;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 2px 8px rgba(0,0,0,.08);--shadow-lg:0 4px 20px rgba(0,0,0,.12);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg-deepest);color:var(--text-primary);font-family:var(--sans);font-size:14px;line-height:1.6;overflow:hidden;transition:background-color .3s,color .3s}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--text-primary)}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;outline:none;transition:all var(--transition)}
input:focus,textarea:focus,select:focus{border-color:var(--accent-dim);box-shadow:0 0 0 2px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.7}
textarea{resize:vertical;min-height:60px}
select:not(.ql-toolbar select){cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6370' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}



button{cursor:pointer;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 18px;color:var(--text-secondary);white-space:nowrap;letter-spacing:.2px;transition:all var(--transition)}
button:hover{background:var(--bg-hover);border-color:var(--border-light);color:var(--text-primary)}
button.primary{background:var(--accent-dim);border-color:var(--accent);color:#fff;font-weight:500}
button.primary:hover{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
button.danger{border-color:#7a4444;color:var(--danger)}
button.sm{padding:5px 12px;font-size:12px}
button.ghost{background:none;border:none;color:var(--text-muted);padding:4px 8px}
button.ghost:hover{color:var(--accent);background:var(--accent-soft)}

/* ============================================================
   UTILITIES
   ============================================================ */
.spinner{width:14px;height:14px;border:2px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;display:inline-block;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .2s ease}
.save-indicator{position:fixed;bottom:14px;right:14px;font-size:11px;color:var(--accent);font-family:var(--sans);padding:5px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);opacity:0;transition:opacity .3s;z-index:500;pointer-events:none}
.save-indicator.visible{opacity:1}

/* Local-folder backup pill — sits to the LEFT of the Save indicator
   (which lives at right:14px). Always visible once configured, with
   colour-coded state. */
.wf-backup-pill{
  position:fixed;
  bottom:14px;
  right:80px;
  font-size:11px;
  font-family:var(--sans);
  padding:5px 12px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  z-index:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .2s,border-color .2s,background .2s;
}
.wf-backup-pill.wf-backup-ok{color:var(--accent);border-color:var(--accent-dim)}
.wf-backup-pill.wf-backup-stale{color:var(--accent-warm);border-color:rgba(196,138,82,.35)}
.wf-backup-pill.wf-backup-pending{color:var(--text-muted)}
.wf-backup-pill.wf-backup-err{color:var(--danger);border-color:rgba(192,112,112,.45);cursor:pointer}

/* Tablet: keep the backup pill from colliding with the save indicator
   on smaller viewports. Above 1024px there's plenty of room. */
@media (max-width: 1024px){
  .wf-backup-pill{bottom:50px}
}
.wf-toast{position:fixed;bottom:44px;right:14px;font-size:12px;font-family:var(--sans);padding:8px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);z-index:5000;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;max-width:320px}
.wf-toast.wf-toast-visible{opacity:1;transform:translateY(0)}
.wf-toast.wf-toast-danger{border-color:var(--danger);color:var(--danger)}
.wf-toast.wf-toast-success{border-color:var(--accent);color:var(--accent)}
/* Action toast (Undo). The plain toast is pointer-events:none so it can never
   swallow a click meant for the page; this one has a button, so it opts back in. */
/* Sits one row above the plain toasts: an Undo lingers for 9s, long enough to
   collide with an ordinary 3.5s toast fired right after it. */
.wf-toast.wf-toast-action{pointer-events:auto;display:flex;align-items:center;gap:12px;bottom:84px}
.wf-toast-btn{flex-shrink:0;padding:3px 10px;font-family:var(--sans);font-size:11px;font-weight:500;color:var(--accent);background:none;border:1px solid var(--accent-dim);border-radius:var(--radius);cursor:pointer}
.wf-toast-btn:hover{background:var(--accent-soft)}