/* Shared design system - Plainly Productive gold + serif (matches the Stash app + site). */
:root{
  --ink:#15171A; --paper:#F6F1E7; --surface:#FBF7EE; --surface-alt:#F3EEE2;
  --hairline:#E7DFCE; --gold:#C8A872; --gold-text:#856000; --gold-dark:#B8860B;
  --gold-grad:linear-gradient(180deg,#E7CD93 0%,#C8A872 55%,#A9863F 100%); --muted:#6E664F;
  --shadow-soft:0 3px 8px rgba(0,0,0,.08),0 1px 24px rgba(0,0,0,.06);
  --radius-card:14px; --radius-pill:9999px;
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --t:180ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:dark){:root{
  --ink:#EDE8DC; --paper:#1A1810; --surface:#201E15; --surface-alt:#282519;
  --hairline:#332F22; --gold-text:#D4A84B; --muted:#9A9177;
  --shadow-soft:0 3px 8px rgba(0,0,0,.3),0 1px 24px rgba(0,0,0,.2);
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
body{font-family:var(--font-ui);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

.brand{display:flex;align-items:center;gap:9px}
.brand-icon{width:26px;height:26px;border-radius:7px;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-name{font-family:var(--font-serif);font-size:1.18rem;font-weight:500;color:var(--ink)}
.icloud{display:flex;align-items:center;gap:5px;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.gdot{width:6px;height:6px;border-radius:50%;background:#5AC77E}

.btn-gold{background:var(--gold);color:#FBF7EE;border-radius:var(--radius-pill);padding:0 16px;height:36px;font-size:.82rem;font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px;transition:background var(--t),transform var(--t)}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:0 14px;height:36px;font-size:.8rem;font-weight:500;color:var(--muted);transition:border-color var(--t),color var(--t)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-text)}

/* type badges */
.badge{width:36px;height:36px;border-radius:9px;background:var(--surface-alt);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.kicker{font-size:.63rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}

/* tags - flat, gold pills shared by the library cards, tag filter row, and reader */
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:500;letter-spacing:.01em;color:var(--gold-text);background:color-mix(in srgb,var(--gold) 13%,transparent);border:1px solid color-mix(in srgb,var(--gold) 32%,transparent);border-radius:var(--radius-pill);padding:3px 10px;transition:all var(--t);white-space:nowrap}
.tag:hover{background:color-mix(in srgb,var(--gold) 22%,transparent)}
.tag.on{background:var(--gold);color:#FBF7EE;border-color:var(--gold)}
.tag .x{display:flex;align-items:center;justify-content:center;font-size:.92rem;line-height:1;opacity:.55;padding:0 1px}
.tag .x:hover{opacity:1}
.tag-input{font-family:var(--font-ui);font-size:.7rem;border:1px dashed var(--hairline);border-radius:var(--radius-pill);padding:3px 10px;background:transparent;color:var(--ink);outline:none;min-width:96px}
.tag-input:focus{border-color:var(--gold)}

/* highlights - gold marker in the reader; click a mark to remove it */
mark.hl{background:color-mix(in srgb,var(--gold) 36%,transparent);color:inherit;border-radius:3px;padding:.05em 1px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background var(--t)}
mark.hl:hover{background:color-mix(in srgb,var(--gold) 55%,transparent)}
.hlbtn{position:fixed;z-index:60;display:none;align-items:center;gap:6px;background:var(--gold);color:#1A1810;font-family:var(--font-ui);font-size:.74rem;font-weight:700;letter-spacing:.02em;border-radius:9px;padding:7px 12px;box-shadow:var(--shadow-soft);white-space:nowrap}
.hlbtn:hover{background:var(--gold-dark)}

/* Manual theme override (Settings). Auto = no attribute (uses prefers-color-scheme). */
html[data-theme="light"]{--ink:#15171A;--paper:#F6F1E7;--surface:#FBF7EE;--surface-alt:#F3EEE2;--hairline:#E7DFCE;--gold-text:#856000;--muted:#6E664F;--shadow-soft:0 3px 8px rgba(0,0,0,.08),0 1px 24px rgba(0,0,0,.06)}
html[data-theme="dark"]{--ink:#EDE8DC;--paper:#1A1810;--surface:#201E15;--surface-alt:#282519;--hairline:#332F22;--gold-text:#D4A84B;--muted:#9A9177;--shadow-soft:0 3px 8px rgba(0,0,0,.3),0 1px 24px rgba(0,0,0,.2)}