/* ---------- fonts: self-hosted (latin subset, variable) ----------
     Downloaded from Google Fonts (both OFL-licensed) so they ship with the app —
     no CDN round-trip, works offline, and (with the <link rel=preload> in index.html)
     they're ready before first paint, so text no longer swaps from a fallback font. */
  @font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-latin.woff2') format('woff2');
    font-weight:500 700; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Inter'; src:url('../fonts/inter-latin.woff2') format('woff2');
    font-weight:400 700; font-style:normal; font-display:swap; }

  /* ---------- design tokens (facelift 2026-07 — see DESIGN-BRIEF.md) ----------
     Layered: raw palette → semantic roles → component aliases (legacy names kept
     so existing selectors keep working while components migrate). */
  :root{
    /* palette + semantic roles */
    --bg:#f5efe4; --card:#fffdf8; --surface-2:#faf4e8;
    --ink:#2b2118; --muted:#6d5e47; --faint:#736446; /* muted+faint tuned for WCAG AA on bg/card/surface-2/accent-soft; muted darker than faint keeps the secondary>tertiary hierarchy */
    --accent:#b05f2e; --accent-dark:#8a4a24; --accent-soft:#f3e4d4;
    /* non-text accent INDICATOR (focus ring, unread bar/dot, selection outline). NOTE: this
       previously claimed theme.js derives it to >=3:1 on custom surfaces. It does not - theme.js
       leaves the whole accent family stock on purpose (see its DERIVED list and the note there).
       It is safe on the page surfaces, which are the only ones it is used on; the header
       overrides the ring to --on-deep because the banner is user-coloured. Fills keep --accent. */
    --focus:var(--accent);
    --deep1:#3a2817; --deep2:#5c3a1d; --gold:#b57e1a;
    /* Foreground for the --deep1/--deep2 banner surface (header, header buttons, toast).
       A custom banner colour is applied verbatim, so this MUST be derived from it rather
       than hardcoded — theme.js re-derives it through _ensureContrast. */
    --on-deep:#f6ecdc;
    /* The toast surface is deliberately NOT --deep1/--deep2: those follow the user's banner
       colour, and a toast themed to a pale banner turned into a near-white box floating on a
       cream page. It is a fixed espresso overlay in both themes, so its contrast is a constant. */
    --toast-bg1:#3a2817; --toast-bg2:#5c3a1d; --toast-fg:#f6ecdc; --toast-edge:transparent;
    --light:#6f8f5a; --medium:#c98d24; --serious:#a04b4b;
    --line:#e7dcc9; --line-strong:#d9cbb2;

    /* elevation: warm-tinted, 3 levels (rest / raised / floating) */
    --e1:0 1px 4px rgba(58,40,23,.06);
    --e2:0 3px 12px rgba(58,40,23,.10);
    --e3:0 12px 32px rgba(58,40,23,.18);
    --shadow:var(--e2); /* legacy alias */

    /* radii: 3 steps — controls / cards / sheets */
    --r-ctrl:10px; --r-card:14px; --r-sheet:22px;

    /* spacing scale (4px base) */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;

    /* type scale — one source of truth (mobile-tuned) */
    --fs-display:32px;  /* celebration / hero numbers */
    --fs-title:26px;    /* stat headline */
    --fs-h1:23px;       /* app title, primary sheet title */
    --fs-h2:21px;       /* section headers */
    --fs-h3:18px;       /* card & sheet titles */
    --fs-lg:15px;       /* emphasized body / result meta */
    --fs-body:14px;     /* body, inputs, controls */
    --fs-small:12.5px;  /* secondary text, chips */
    --fs-caption:11px;  /* labels, captions */
    --fs-nav:9.5px;     /* bottom-nav labels */
    /* line-height companions: tight for headings, body for prose */
    --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.5;

    /* motion (see brief §3: micro fast, sheets slower, frequent actions instant) */
    --ease-out:cubic-bezier(.25,1,.35,1);
    --ease-swift:cubic-bezier(.55,0,.1,1);
    --dur-micro:150ms; --dur-enter:220ms; --dur-sheet:280ms;

    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
    font-size:var(--fs-body); line-height:var(--lh-body);
    font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    background-image:radial-gradient(rgba(58,40,23,.025) 1px, transparent 1px);
    background-size:22px 22px;}

  header{position:sticky; top:0; z-index:10;
    background:linear-gradient(135deg,var(--deep1) 0%,var(--deep2) 100%);
    color:var(--on-deep); padding:calc(16px + env(safe-area-inset-top)) 20px 14px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 2px 14px rgba(58,40,23,.28);}
  header h1{margin:0; font-family:var(--serif); font-weight:700; font-size:var(--fs-h1); letter-spacing:.3px;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  header h1 .em{margin-right:8px;}
  .hdr-btns{display:flex; flex-wrap:nowrap; flex-shrink:0; justify-content:flex-end; gap:5px;}
  .hdr-btns button{background:rgba(255,255,255,.1); border:1px solid rgba(246,236,220,.35);
    /* second declaration is progressive: browsers without color-mix keep the fallback above */
    border-color:color-mix(in srgb, var(--on-deep) 35%, transparent);
    border-radius:9px; padding:5px 9px; font-size:12px; color:var(--on-deep);
    cursor:pointer; font-family:var(--sans); font-weight:500; white-space:nowrap;}
  @media (max-width:420px){ header h1{font-size:19px;} .hdr-btns button{padding:5px 7px; font-size:11px;} }

  main{padding:var(--s5) var(--s4) var(--s5); max-width:640px; margin:0 auto;}

  /* bottom nav */
  nav{position:fixed; bottom:0; left:0; right:0; z-index:20; background:var(--card);
    border-top:1px solid var(--line); display:flex; padding:6px 8px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(58,40,23,.08);}
  nav button{flex:1; background:none; border:none; padding:8px 0 6px; font-size:var(--fs-nav);
    color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center;
    gap:3px; font-family:var(--sans); font-weight:500; border-radius:12px; margin:0 3px;
    transition:background .15s;}
  nav button .ico{line-height:0; display:flex; align-items:center; justify-content:center;}
  nav button.active{color:var(--accent-dark); background:var(--accent-soft); font-weight:700;}

  /* line-icon set (icons.js) — inherits color via currentColor, size via em/px */
  svg.lucide{display:inline-block; width:1em; height:1em; flex:none; vertical-align:-0.14em;}
  nav button .ico svg.lucide{width:23px; height:23px; vertical-align:0;}
  .hdr-btns button{display:inline-flex; align-items:center; gap:5px;}
  .hdr-ico{display:inline-flex; align-items:center; line-height:0;}
  .hdr-ico svg.lucide{width:17px; height:17px; vertical-align:0;}
  /* section-header icons: inherit heading color/size, sit on the text baseline */
  .hd-ico{display:inline-flex; align-items:center; margin-right:7px; line-height:0; vertical-align:-0.12em;}
  .hd-ico svg.lucide{width:1em; height:1em; vertical-align:0;}

  .tab{display:none;} .tab.active{display:block; animation:fade .2s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
  h2{font-family:var(--serif); font-weight:700; font-size:var(--fs-h2); line-height:var(--lh-tight); margin:4px 2px 4px;}
  .sub{color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-snug); margin:2px 2px 14px;}

  .toolbar{display:flex; gap:var(--s2); margin-bottom:var(--s4); flex-wrap:wrap; align-items:center;}
  .toolbar input[type=search]{flex:1; min-width:130px; padding:10px 14px; border:1px solid var(--line);
    border-radius:12px; font-size:14px; background:var(--card); font-family:var(--sans); color:var(--ink);
    box-shadow:var(--shadow);}
  .toolbar select{padding:10px 10px; border:1px solid var(--line); border-radius:12px;
    font-size:13px; background:var(--card); color:var(--ink); font-family:var(--sans); box-shadow:var(--shadow);}
  .autotag{padding:10px 13px; border:none; border-radius:12px; font-size:13px; font-weight:700;
    font-family:var(--sans); cursor:pointer; color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    box-shadow:0 3px 10px rgba(138,74,36,.3);}
  .autotag:disabled{opacity:.55;}
  .rd-head{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase;
    letter-spacing:.7px; margin:6px 2px 10px;}
  .pbar{height:8px; background:#ece1cc; border-radius:4px; overflow:hidden; margin-top:9px;}
  .pbar div{height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:4px;
    position:relative; overflow:hidden;
    animation:growbar 1s cubic-bezier(.25,1,.35,1);
    transition:width .6s cubic-bezier(.25,1,.35,1);}
  @keyframes growbar{from{width:0;}}
  .pbar div::after{content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    animation:shimmer 2.4s ease-in-out infinite;}
  @keyframes shimmer{0%{transform:translateX(-100%);} 60%,100%{transform:translateX(100%);}}
  .ptext{font-size:11.5px; color:var(--muted); margin-top:4px; font-weight:600;}
  .mini-row{display:flex; gap:7px; margin-top:9px;}
  .mini{border:none; background:var(--accent-soft); color:var(--accent-dark); border-radius:9px;
    padding:8px 12px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--sans);}
  .mini.fin{background:#e2ecdb; color:#4c6741;}
  .hist-row{background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:8px 11px; font-size:12.5px; color:var(--muted); margin-bottom:6px; line-height:1.45;}
  .hist-row b{color:var(--ink);}
  input[type=range]{accent-color:var(--accent); width:100%;}
  .cg-row{margin-bottom:12px;}
  .cg-row .cg-top{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;}
  .cg-row .cg-top input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent);}
  .cg-row.done .cg-text{text-decoration:line-through; color:var(--muted);}
  .cg-row .cg-slider{display:flex; align-items:center; gap:9px; margin-top:5px;}
  .cg-row .cg-pct{font-size:12px; color:var(--muted); font-weight:700; min-width:38px; text-align:right;}
  /* dopamine layer: celebration, anticipation, goal-gradient glow */
  .confetti{position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden;}
  .confetti i{position:absolute; top:-14px; width:8px; height:13px; border-radius:2px;
    animation:cfall linear forwards;}
  @keyframes cfall{to{transform:translateY(108vh) rotate(560deg);}}
  .pbar.hot{animation:hotpulse 1.1s ease-in-out infinite alternate;}
  @keyframes hotpulse{from{box-shadow:0 0 3px rgba(217,154,43,.25);} to{box-shadow:0 0 12px rgba(217,154,43,.75);}}
  .star-input span{transition:transform .12s;}
  .star-input span:active{transform:scale(1.3);}
  .mini:active,.pick-grid button:active,.btn:active{transform:scale(.95);}
  .streak{color:var(--accent-dark); font-weight:700;}
  /* loading: flipping book + skeleton shimmer */
  .bookload{display:flex; justify-content:center; padding:16px 0 6px;}
  .bookload .bk{position:relative; width:52px; height:34px; perspective:140px;}
  .bookload .bk::before,.bookload .bk::after{content:""; position:absolute; top:0; width:26px; height:34px;
    background:linear-gradient(160deg,#c9a06a,#a8794a); border:1px solid #96683c;}
  .bookload .bk::before{left:0; border-radius:4px 1px 1px 4px; transform:rotateY(4deg);}
  .bookload .bk::after{right:0; border-radius:1px 4px 4px 1px; transform:rotateY(-4deg);}
  .bookload .pg{position:absolute; left:26px; top:2px; width:23px; height:30px; background:#fdf8ee;
    border:1px solid #e8dcc4; border-radius:0 3px 3px 0; transform-origin:left center; z-index:2;
    animation:pgflip 1.15s cubic-bezier(.4,.1,.5,1) infinite;}
  .bookload .pg:nth-child(2){animation-delay:.18s; background:#f8f1e2;}
  .bookload .pg:nth-child(3){animation-delay:.36s; background:#f3ebd9;}
  @keyframes pgflip{0%{transform:rotateY(0); opacity:1;} 70%{transform:rotateY(-170deg); opacity:1;}
    85%{opacity:0;} 100%{transform:rotateY(-180deg); opacity:0;}}
  .skel{display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line);
    border-radius:11px; padding:8px 10px; margin-top:8px;}
  .skel .sc{width:34px; height:50px; border-radius:4px; flex:none;}
  .skel .sb{flex:1;}
  .skel .sl{height:11px; border-radius:6px; margin:5px 0;}
  .skel .sl.short{width:55%;}
  .shimmer{background:linear-gradient(90deg,#ece2d0 25%,#f8f1e3 37%,#ece2d0 63%);
    background-size:400% 100%; animation:shim 1.2s infinite;}
  @keyframes shim{0%{background-position:100% 0;} 100%{background-position:0 0;}}


  /* ---------- backdrops (item 11: all authored locally, zero external assets) ---------- */
  body[data-backdrop="paper"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:140px 140px;}
  body[data-backdrop="linen"]{background-image:
    repeating-linear-gradient(0deg, rgba(58,40,23,.016) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(58,40,23,.016) 0 1px, transparent 1px 7px);
    background-size:auto;}
  body[data-backdrop="stripes"]{background-image:
    repeating-linear-gradient(90deg, rgba(58,40,23,.03) 0 48px, transparent 48px 96px);
    background-size:auto;}
  body[data-backdrop="stars"]{background-image:
    radial-gradient(rgba(224,165,49,.5) 1px, transparent 1.6px),
    radial-gradient(rgba(224,165,49,.28) 1px, transparent 1.4px);
    background-size:170px 170px, 90px 90px;
    background-position:0 0, 45px 60px;}
  body.dark[data-backdrop="stars"]{background-image:
    radial-gradient(rgba(255,223,150,.6) 1px, transparent 1.6px),
    radial-gradient(rgba(240,230,212,.3) 1px, transparent 1.4px);
    background-size:170px 170px, 90px 90px;
    background-position:0 0, 45px 60px;}
  body[data-backdrop="rain"], body[data-backdrop="fireflies"], body[data-backdrop="leaves"]{background-image:none;}

  /* the dynamic layer: fixed, non-interactive, painted behind ALL content
     (z-index:-1 — never touch other elements' positioning for stacking) */
  #backdropFx{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
  .fx-rain{position:absolute; top:-12%; width:1.5px; height:11vh; border-radius:1px;
    background:linear-gradient(rgba(79,142,178,0), rgba(79,142,178,.35) 55%, rgba(79,142,178,.18));
    animation:fxRain linear infinite;}
  body.dark .fx-rain{background:linear-gradient(rgba(160,190,215,0), rgba(160,190,215,.3) 55%, rgba(160,190,215,.14));}
  @keyframes fxRain{to{transform:translateY(125vh);}}
  .fx-fly{position:absolute; width:5px; height:5px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,223,112,.95), rgba(255,223,112,0) 72%);
    box-shadow:0 0 8px 2px rgba(255,223,112,.35);
    animation:fxFly ease-in-out infinite; opacity:0;}
  @keyframes fxFly{
    0%,100%{transform:translate(0,0); opacity:0;}
    12%{opacity:.9;}
    35%{transform:translate(26px,-32px); opacity:.5;}
    58%{transform:translate(-14px,-58px); opacity:.85;}
    82%{transform:translate(20px,-84px); opacity:.25;}}
  .fx-leaf{position:absolute; top:-8%; font-size:17px; animation:fxLeaf linear infinite; opacity:0;}
  @keyframes fxLeaf{
    0%{transform:translate(0,0) rotate(0deg); opacity:0;}
    8%{opacity:.85;}
    50%{transform:translate(-34px,55vh) rotate(160deg); opacity:.8;}
    100%{transform:translate(22px,115vh) rotate(340deg); opacity:0;}}
  @media (prefers-reduced-motion: reduce){ #backdropFx{display:none;} }
  /* baseline-ui: numeric data aligns in columns */
  .stars, .meta, .rev-meta, .ptext, .pr-note, .feed-when{font-variant-numeric:tabular-nums;}