/* JUJUNA — the LP app's look (LP-3a-iii, Roadmap R24).
 *
 * Every colour is a token below; no rule names a hex. Day = the DayV2 board,
 * night (prefers-color-scheme: dark) = the NightV2 board, on the GP's design
 * canvas "JUJUNA Logo Directions", page "v2 — after critique".
 *
 * Text contrast is >= 4.5:1 on every surface it sits on
 * (app/test/tokens.test.ts computes each pair from this file). Two rules the
 * test also pins:
 *   - --amber (#D9962B) is the LOGO's colour only (2.3:1 on paper). Amber TEXT
 *     and small amber marks use --amber-text (#9F6100, 4.5:1).
 *   - --line is decorative (dividers, card edges); anything a reader must see
 *     to use it (an input, a button's edge) takes --border (3:1).
 * --canvas carries no amber text (4.1:1): it backs the open menu only.
 */
:root {
  --paper: #F6F3EC;        /* page */
  --surface: #FFFDF8;      /* cards (DayV2 phone) */
  --canvas: #EDE9E0;       /* the open menu */
  --ink: #16233A;          /* text */
  --slate: #5A6270;        /* secondary text */
  --line: #E4DED2;         /* decorative edges */
  --border: #918B80;       /* functional edges */
  --amber: #D9962B;        /* the mark only */
  --amber-text: #9F6100;   /* amber text, bullets, the conviction bar */
  --up: #2F5DA8;
  --down: #A85400;
  --link: var(--ink);
  --button-bg: var(--ink);
  --button-fg: var(--paper);
  --pill-bg: #E3E8EF;
  --pill-fg: var(--ink);
  --mark-sun: var(--amber);  /* sun and ears */
  --mark-eye: var(--ink);
  --mark-bar: var(--ink);
  --tile: var(--ink);        /* the icon tile behind a mark on dark ground */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101A2B;      /* Night */
    --surface: #172338;    /* Deep */
    --canvas: #0A111D;
    --ink: #EDEAE2;        /* Mist */
    --slate: #9BA6B8;      /* Dusk */
    --line: #26324A;       /* Edge */
    --border: #6B7890;     /* functional edge, 3.5:1 on Deep (NightV2 names none) */
    --amber: #E3A03A;
    --amber-text: #E3A03A; /* 7:1 on Deep: the logo amber is legible as text at night */
    --up: #70A7FF;
    --down: #FFB35A;
    --link: #E3A03A;
    --button-bg: #E3A03A;
    --button-fg: #101A2B;
    --pill-bg: #26324A;
    --pill-fg: #EDEAE2;
    --mark-sun: #22304A;   /* Head: at night the cat is a dark silhouette */
    --mark-eye: #E3A03A;
    --mark-bar: #EDEAE2;
    --tile: #101A2B;
  }
}

/* Inter, self-hosted (R24f: no third-party request). Latin only; Chinese falls
 * through the unicode-range to PingFang SC / Noto Sans SC. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  font: 400 16px/1.5 "Inter", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB",
        "Microsoft YaHei", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
main { max-width: 42rem; margin: 0 auto; padding: 0 16px 32px; }
h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; margin: 16px 0 8px; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 24px 0 8px; }
h3 { font-size: 1rem; font-weight: 600; margin: 0 0 4px; }
h4 { font-size: .95rem; font-weight: 600; margin: 12px 0 2px; }
p { margin: 0 0 8px; overflow-wrap: anywhere; }
a { color: var(--link); }
strong { font-weight: 600; }

/* ── Controls: every target is at least 44px tall ─────────────────────────── */
button, .button {
  font: inherit; font-weight: 500; min-height: 44px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
button[type="submit"], .button.primary {
  background: var(--button-bg); color: var(--button-fg); border-color: var(--button-bg); font-weight: 600;
}
input, textarea {
  font: inherit; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
label { display: block; margin: 12px 0 4px; font-weight: 500; }
label.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
label.check input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--button-bg); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ── The mark and the wordmark ───────────────────────────────────────────── */
.mark { display: block; flex-shrink: 0; }
.mark .sun { fill: var(--mark-sun); }
.mark .eye { fill: var(--mark-eye); }
.mark .pupil { fill: var(--paper); }
.mark .bar { fill: var(--mark-bar); }
/* Day eyes are the ink ovals; night eyes are round amber with a pupil (NightV2). */
.mark .night { display: none; }
@media (prefers-color-scheme: dark) {
  .mark .day { display: none; }
  .mark .night { display: inline; }
}
.wordmark { font-weight: 600; letter-spacing: .14em; line-height: 1; color: var(--ink); }
.wordmark .u { letter-spacing: .1em; }   /* U kerned toward the J */
.lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
          text-decoration: none; color: var(--ink); }
.lockup .wordmark { font-size: 17px; }

/* ── Header and menu ─────────────────────────────────────────────────────── */
header { max-width: 42rem; margin: 0 auto; padding: 8px 16px; }
header .bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
button.menu { width: 44px; height: 44px; padding: 0; border: 0; }
button.menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
                  stroke-linecap: round; }
.menu-panel { margin: 4px 0 8px; padding: 8px; border-radius: 16px; background: var(--canvas);
              display: flex; flex-direction: column; gap: 2px; }
.menu-panel[hidden] { display: none; }
.menu-panel nav { display: flex; flex-direction: column; }
.menu-panel nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px;
                    border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu-panel nav a[aria-current="page"] { background: var(--surface); font-weight: 600; }
.menu-panel .row { display: flex; gap: 8px; padding: 6px 4px 2px; }
.menu-panel .row button { flex: 1; background: var(--surface); }

/* ── Sign-in and the revoked screen ──────────────────────────────────────── */
.gate { padding-top: 10vh; }
.gate .top { display: flex; align-items: center; justify-content: space-between; }
.gate .lockup .wordmark { font-size: 22px; }
.gate form button[type="submit"] { width: 100%; margin-top: 16px; }

/* ── Home: your themes, your requests ────────────────────────────────────── */
.label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
         color: var(--slate); margin: 20px 0 10px; }
.stack { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.theme-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
              padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.theme-card .meta { margin: 0; }
.theme-card h3 { font-size: 20px; line-height: 1.3; margin: 0; }
.theme-card .view { font-size: 15px; line-height: 1.45; margin: 0; }
.sure { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.sure .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.sure .row span:first-child { color: var(--slate); }
.sure .row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.segments { display: flex; gap: 4px; }
.segments span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.segments span.on { background: var(--amber-text); }
.divider { height: 1px; background: var(--line); }
.theme-card h4 { font-size: 13px; margin: 0; }
.watch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
         font-size: 15px; }
.watch li { display: flex; align-items: baseline; gap: 10px; }
.watch li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
                    background: var(--amber-text); transform: translateY(-1px); }
.watch li[hidden] { display: none; }
button.more { align-self: flex-start; min-height: 44px; border: 0; padding: 10px 0; color: var(--link);
              font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.theme-card .button.primary { min-height: 48px; border-radius: 14px; font-size: 16px; margin-top: 4px; }
.request { background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
           padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
           gap: 12px; }
.request .what { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.request .text { font-size: 15px; font-weight: 600; margin: 0; }
.pill { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; white-space: nowrap;
        background: var(--pill-bg); color: var(--pill-fg); flex-shrink: 0; }
.tagline { text-align: center; font-size: 12px; color: var(--slate); margin-top: 28px; }
.tagline p { margin: 0; }

/* ── Shared text styles ──────────────────────────────────────────────────── */
.date, .kind, .muted, .meta { color: var(--slate); font-size: 12px; }
.muted { font-size: 14px; }

/* ── The card (content and order unchanged; restyled only) ───────────────── */
.card .back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
              font-weight: 500; }
.card > h1 { font-size: 22px; }
.card .headline { font-size: 16px; }
.card > .pill { display: inline-block; margin-bottom: 8px; }
.card .meta { font-size: 13px; }
.card button.detail { margin: 8px 0; }
.card section { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
                padding: 16px; margin: 12px 0; }
.card section ul { margin: 0; padding-left: 1.2em; }
.card section li { margin-bottom: 4px; }
.badge { font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor;
         display: inline-block; }
.verdict-intact { color: var(--up); }
.verdict-revised { color: var(--amber-text); }
.verdict-reversed { color: var(--down); }
.score { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.note { color: var(--slate); font-style: italic; }
footer, .framing { color: var(--slate); font-size: 13px; border-top: 1px solid var(--line);
                   padding-top: 12px; margin-top: 20px; }

/* ── Paper trades ────────────────────────────────────────────────────────── */
.paper .framing { border-top: 0; margin-top: 0; padding: 12px 16px; border-radius: 16px;
                  background: var(--surface); border: 1px solid var(--line); }
.paper .group h3 { font-size: 17px; margin: 20px 0 8px; }
.paper .group h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
           padding: 14px 16px; margin-bottom: 8px; }
.list li p { margin: 4px 0 0; font-size: 15px; }

/* ── Submit, about ───────────────────────────────────────────────────────── */
.submit button[type="submit"] { margin-top: 12px; }
.error { color: var(--down); }
.ok { color: var(--up); }