/* ==========================================================================
   legacy.css: the shared pre-Eli styles still in use

   Base layout, the old mode toggle, buttons, packs, profile + archive,
   sheets, misc, adding a record, how it works.

   Lifted verbatim from the old <style> block in public/index.html (7174b7e).
   Legacy class names and the legacy token aliases (--bg, --card, --accent...,
   mapped onto Eli's tokens in public/ds/tokens.css). A page builder who
   rebuilds this page deletes what they no longer use.
   ========================================================================== */

html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.55 var(--sans);
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.wrap {
  max-width:600px; margin:0 auto;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
/* Long free-text names are the norm here, so nothing is allowed to push the page wide. */
h1,h2,h3,p,div,span,input,pre { min-width:0; overflow-wrap:anywhere; }

/* ---------- mode toggle ---------- */
.modes { display:flex; gap:4px; background:var(--sunk); border-radius:11px;
         padding:4px; margin:16px 0 12px; border:1px solid var(--line); }
.modes button {
  flex:1; border:0; background:transparent; color:var(--dim); cursor:pointer;
  border-radius:8px; padding:9px 6px 8px; font:inherit; text-align:center;
}
.modes button .mn { display:block; font-weight:650; font-size:14px; }
.modes button .mt { display:block; font-size:10.5px; color:var(--dim); line-height:1.3;
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modes button[aria-pressed="true"] { background:var(--card); color:var(--fg); box-shadow:var(--shadow); }
.modes button[aria-pressed="true"] .mt { color:var(--accent); }

/* ---------- buttons ---------- */
button.big {
  width:100%; padding:15px; font:650 16px/1 var(--sans); cursor:pointer;
  background:var(--fg); color:var(--bg); border:0; border-radius:11px;
}
button.big:disabled { opacity:.35; cursor:default; }
button.big:active:not(:disabled) { transform:scale(.99); }
button.ghost { background:transparent; color:var(--fg); border:1px solid var(--line-2); }
button.accent { background:var(--accent); color:#1a0f0c; }
:root[data-theme="light"] button.accent { color:#fff; }
button.small { width:auto; padding:9px 13px; font-size:14px; border-radius:9px; }
.stack > * + * { margin-top:9px; }
.row { display:flex; gap:9px; flex-wrap:wrap; }
.row > * { flex:1 1 140px; }

.actionbar {
  position:sticky; bottom:0; z-index:20; margin-top:14px;
  padding:0 0 calc(10px + env(safe-area-inset-bottom));
  background:var(--bg);
}
/* The fade has to finish before the controls start, or typed names read through them. */
.actionbar::before {
  content:""; display:block; height:26px; margin:0 -16px -1px;
  background:linear-gradient(to bottom, transparent, var(--bg));
}
.fillcount { text-align:center; font:600 11px/1 var(--mono); letter-spacing:.1em;
             text-transform:uppercase; color:var(--dim); margin-bottom:9px; }

/* ---------- packs ---------- */
.section-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
             margin:30px 0 10px; }
.section-h h3 { font:600 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
                color:var(--dim); margin:0; }
.packs { display:flex; gap:10px; overflow-x:auto; padding:2px 16px 6px; margin:0 -16px;
         scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.packs::-webkit-scrollbar { display:none; }
.pack {
  flex:0 0 212px; scroll-snap-align:start; border:1px solid var(--line); border-radius:13px;
  background:var(--card); padding:13px; box-shadow:var(--shadow); text-align:left;
  cursor:pointer; color:inherit; font:inherit; position:relative;
}
.pack.locked { background:var(--sunk); }
.pack .pn { font-weight:680; font-size:16px; letter-spacing:-.01em; margin-bottom:4px; }
.pack .pb { color:var(--dim); font-size:13px; min-height:38px; }
.pack .pf { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.pack .price { font:700 12px/1 var(--mono); color:var(--gold); }

/* ---------- profile + archive ---------- */
.view-h { margin:18px 0 4px; }
.view-h h2 { font-size:26px; margin-bottom:4px; }
.view-h p { color:var(--dim); font-size:14.5px; margin:0 0 16px; }
.stats { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px; }
.stat { flex:1 1 92px; border:1px solid var(--line); border-radius:12px; background:var(--card);
        padding:11px 12px; }
.stat .sv { font:700 26px/1 var(--mono); letter-spacing:-.03em; }
.stat .sk { font:600 9.5px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase;
            color:var(--dim); margin-top:6px; }
.lg-list { border:1px solid var(--line); border-radius:13px; background:var(--card);
        overflow:hidden; margin-bottom:22px; }
.li { display:flex; gap:11px; align-items:center; padding:12px 13px; border-top:1px solid var(--line);
      width:100%; background:none; border-left:0; border-right:0; border-bottom:0; color:inherit;
      font:inherit; text-align:left; cursor:pointer; }
.li:first-child { border-top:0; }
.li .lmain { flex:1; min-width:0; }
.li .lt { font-weight:650; font-size:15px; }
.li .lsub { color:var(--dim); font-size:12.5px; margin-top:2px; }
.li .lscore { font:700 17px/1 var(--mono); }
.li .ldate { font:600 10px/1 var(--mono); color:var(--dim); letter-spacing:.06em; }
.lg-empty { padding:22px 14px; text-align:center; color:var(--dim); font-size:14px; }
.ach { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.aw { flex:1 1 150px; border:1px solid var(--line); border-radius:12px; background:var(--card);
      padding:11px 12px; display:flex; gap:9px; align-items:flex-start; }
.aw.off { opacity:.4; background:transparent; border-style:dashed; }
.aw .ai { font-size:19px; line-height:1.1; }
.aw .an { font-weight:650; font-size:14px; }
.aw .ad { color:var(--dim); font-size:12px; margin-top:2px; }

.cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; margin-bottom:8px; }
.cal .dow { text-align:center; font:600 9px/1 var(--mono); letter-spacing:.1em;
            text-transform:uppercase; color:var(--dim); padding:4px 0; }
.day { aspect-ratio:1/1; border:1px solid var(--line); border-radius:9px; background:var(--card);
       color:inherit; font:inherit; cursor:pointer; padding:2px; display:flex;
       flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.day .dd { font:600 12px/1 var(--mono); }
.day .dsc { font:700 10px/1 var(--mono); color:var(--good); }
.day.blank { border:0; background:none; cursor:default; }
.day.future { opacity:.28; cursor:default; }
.day.today { border-color:var(--accent); }
.day.here { background:var(--accent); color:#1a0f0c; border-color:transparent; }
:root[data-theme="light"] .day.here { color:#fff; }
.day.here .dsc { color:inherit; }

/* ---------- sheets ---------- */
/* .scrim / .sheet / .grab live in shell.css with the drag (public/sheet.js). */
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.sheet h3 { font-size:21px; letter-spacing:-.015em; margin:0 0 8px; }
.sheet p { color:var(--dim); font-size:15px; margin:0 0 14px; }
.steps { list-style:none; margin:0 0 16px; padding:0; }
.steps li { display:flex; gap:11px; padding:9px 0; border-top:1px solid var(--line); align-items:flex-start; }
.steps li:first-child { border-top:0; }
.steps .n { flex:0 0 24px; height:24px; border-radius:50%; background:var(--fg); color:var(--bg);
            display:grid; place-items:center; font:700 12px/1 var(--mono); margin-top:1px; }
.steps .sh { display:inline-flex; align-items:center; gap:5px; font-weight:650; }
.sq { display:inline-block; width:15px; height:17px; border:1.6px solid currentColor;
      border-radius:3px; position:relative; vertical-align:-3px; }
.sq::before { content:""; position:absolute; left:50%; top:-5px; width:1.6px; height:10px;
              background:currentColor; transform:translateX(-50%); }
.sq::after { content:""; position:absolute; left:50%; top:-5px; width:6px; height:6px;
             border-left:1.6px solid currentColor; border-top:1.6px solid currentColor;
             transform:translateX(-50%) rotate(45deg); }
.pointer { text-align:center; color:var(--accent); font-size:26px; line-height:1;
           animation:nudge 1.3s ease-in-out infinite; margin-top:4px; }
@keyframes nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }

/* ---------- misc ---------- */
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom));
         transform:translateX(-50%); z-index:70; max-width:92vw;
         background:var(--fg); color:var(--bg); padding:11px 15px; border-radius:11px;
         font-size:14px; font-weight:600; box-shadow:var(--shadow); animation:pop .2s both; }
.note { font-size:12.5px; color:var(--dim); }
.banner { display:flex; gap:9px; align-items:flex-start; border:1px dashed var(--line-2);
          border-radius:10px; padding:10px 11px; margin-bottom:16px; font-size:13px; color:var(--dim); }
.banner b { color:var(--fg); font-weight:650; }
.err { color:var(--bad); font-size:14px; margin-top:10px; text-align:center; }
footer { border-top:1px solid var(--line); margin-top:34px;
         padding:18px 0 calc(28px + env(safe-area-inset-bottom));
         display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
         font-size:13px; color:var(--dim); }
footer button { background:none; border:0; color:var(--accent); font:inherit;
                font-weight:600; cursor:pointer; padding:0; }
.skel { border-radius:10px; background:var(--sunk); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- adding a record ---------- */
.field { margin-bottom:12px; }
.field > label { display:block; font:600 10px/1 var(--mono); letter-spacing:.12em;
                 text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.field .hint { font-size:12.5px; color:var(--dim); margin-top:5px; }
.lg-seg { display:flex; gap:4px; background:var(--sunk); border-radius:10px; padding:3px; }
.lg-seg button { flex:1; padding:10px 6px; border:0; border-radius:8px; background:none;
              color:var(--dim); font:620 14px/1.2 var(--sans); cursor:pointer; }
.lg-seg button[aria-pressed="true"] { background:var(--card); color:var(--fg); box-shadow:var(--shadow); }
.receipt { border:1px dashed var(--line-2); border-radius:10px; padding:12px 13px; margin-bottom:12px; }
.receipt .rk { font:600 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
               color:var(--accent); margin-bottom:6px; }
.receipt b { font-weight:660; }

/* ---------- how it works ---------- */
.howc { border-top:1px solid var(--line); padding:12px 0; display:flex; gap:11px; align-items:flex-start; }
.howc:first-of-type { border-top:0; padding-top:4px; }
.howc .g { flex:0 0 30px; height:30px; border-radius:8px; background:var(--sunk);
           display:flex; align-items:center; justify-content:center; }
.howc > div > b { display:block; font-weight:660; font-size:15.5px; margin-bottom:2px; }
.howc p { margin:0; font-size:13.5px; color:var(--dim); }
.howc p b { display:inline; color:var(--fg); font-weight:650; }
.howc .eg { margin-top:6px; font:600 11.5px/1.6 var(--mono); color:var(--accent); }
.howc .eg i { color:var(--dim); font-style:normal; }
.howmore { margin:2px 0 14px; }
.howmore summary { cursor:pointer; font:600 10px/1 var(--mono); letter-spacing:.12em;
                   text-transform:uppercase; color:var(--dim); padding:10px 0; }
.howmore ul { margin:0; padding-left:17px; }
.howmore li { font-size:13.5px; color:var(--dim); margin-bottom:9px; }
.howmore li b { color:var(--fg); font-weight:650; }
/* One question per row, the answer one tap under it. Rows are 44px of target so
   a thumb hits the question and not the row above it. */
.asks-h { font:600 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
          color:var(--dim); padding:14px 0 4px; }
.ask { border-top:1px solid var(--line); }
.ask:last-child { border-bottom:1px solid var(--line); }
.ask > summary { cursor:pointer; list-style:none; padding:12px 26px 12px 0; position:relative;
                 font-size:14.5px; font-weight:600; color:var(--fg); letter-spacing:0;
                 text-transform:none; font-family:inherit; line-height:1.35; }
.ask > summary::-webkit-details-marker { display:none; }
.ask > summary::after { content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
                        font:400 17px/1 var(--mono); color:var(--dim); }
.ask[open] > summary::after { content:'\2212'; }
.ask[open] > summary { color:var(--accent); }
.ask p { margin:0 0 13px; font-size:13.5px; line-height:1.55; color:var(--dim); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
                           transition-duration:.001ms !important; }
}