/* ==========================================================================
   PRIDE — visual spec v1 (2026-10-25), final layer for every screen.
   「努力が、紋章と記録として残る。光は、獲得したものにだけ当たる。」
   「紋章は華やかに、操作は静かに、記録は正確に。」
   Loaded last. Approved masters keep priority: onboarding welcome / explain /
   basic (.o2-welcome / .o2-explain / .o2-basic), ResultReveal (.rr-*), and the
   crest / ring / ceremony artwork are never targeted here.
   The bulk of the old layers was already rewritten at source by tools/css_v1.py
   (weights ≤600, no italics, no text glow, no outer glows on non-floating
   parts, teal only for gains). This file holds the tokens and the unified parts.
   ========================================================================== */

/* ---- 1. tokens ---------------------------------------------------------- */
:root {
  --bg: #070D09; --bg-ceremony: #030504;
  --surface-1: #101813; --surface-2: #16201A; --card: #101813; --raise: #16201A;
  --line: #2B3B30; --line-gold: rgba(214,179,105,.35);
  --ink: #F3F1E9; --ink-2: #A4ADA6; --ink-3: #6F7A72;
  --gold: #D6B369; --gold-hi: #F4DFA0; --gold-lo: #6C4B20; --gold-text: #F7E7B6;
  --gain: #36D6A4; --acc: #36D6A4;
  --err-ink: #FFC2B5; --err-line: rgba(255,140,120,.5); --err-bg: rgba(60,10,8,.6);
  /* numbers: Noto Sans JP tabular (Saira retired). Hero numbers use Cormorant via .num-hero */
  --f-num: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --r-card: 16px; --r-btn: 12px; --r-sheet: 20px; --r-photo: 12px;
  --gut: 20px; --gap: 24px; --pad: 16px;
  --ease-ui: cubic-bezier(.22,1,.36,1);
}
body { background-color: var(--bg); font-synthesis: none; }
/* every number in working UI is tabular (Saira's condensed look is gone) */
.app, .sheet, .tm, .onb2 .o2-form { font-variant-numeric: tabular-nums; }

/* ---- 2. light & shadow: cards are flat ---------------------------------- */
.card, .v30-card, .v31-card, .rc-card, .v47-card, .bt-card, .rc-daycard, .pe-card, .id-card,
.v30-asset, .id-asset, .v31-me, .v30-me, .rk2-me, .v47-past, .v47-handoff, .v31-fin-gain, .body-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* achievement cards: thin gold line, deep-green fill kept, no outer glow */
.v30-asset, .id-asset, .v31-me, .v30-me, .rk2-me, .v31-fin-gain, .v47-handoff {
  border: 1px solid var(--line-gold) !important;
  --green-frame: none;
}
.v30-asset::before, .v30-asset::after, .v31-me::before, .v31-me::after, .id-asset::before, .id-asset::after { box-shadow: none !important; }

/* ---- 3. teal only on increases ------------------------------------------ */
.v46-gain-up, .v46-gain-up .money, .up, .v47-gain, .v47-plus, .pos { color: var(--gain) !important; }
/* rank numbers and labels inside achievement cards are gold, not teal */
.v30-asset .rk, .v30-asset b, .v31-me .rm-r b, .id-asset .rk { color: var(--gold); }
/* asset history bars and sparklines: gold, not teal */
.ad-b { background: linear-gradient(180deg, var(--gold), var(--gold-lo)) !important; }
.ia-spark polyline, .v30-asset polyline { stroke: var(--gold) !important; }
/* body weight is private and not a score: its 30-day change is neutral, never red or green */
.body-card em.down, .body-card em.up, .body-card em { color: var(--ink-2) !important; background: var(--surface-2) !important; border-color: var(--line) !important; }
/* list "me" row */
.v30-list li.me button, .rk2-list li.me button { background: rgba(217,189,124,.08) !important; box-shadow: inset 3px 0 0 var(--gold) !important; }
/* calendar / week dots and bars: gold */
.rc-d i, .rc-dots i.on { background: var(--gold) !important; border-color: var(--gold) !important; box-shadow: none !important; }
.rc-bar i { background: var(--gold) !important; box-shadow: none !important; }
.rc-week b { color: var(--gold) !important; }

/* ---- 4. type: one hero number per screen --------------------------------- */
/* MY ID: BIG3 TOTAL is the hero; the asset amount steps down to working type */
.v30-asset .money, .id-asset .money, .v30-asset .md, .v30-asset [class*="money"] {
  font-family: var(--f-num) !important; font-weight: 600 !important; font-size: 24px !important; letter-spacing: 0 !important;
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ink) !important;
}
/* RANKING self card: the rank number is the hero; the value is working type */
.v31-me .money, .v30-me .money, .v31-me .rm-v, .v30-me .rm-v { font-family: var(--f-num) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
/* units are 55% and secondary */
.u, .unit, .qty-u { font-size: .55em; color: var(--ink-2); font-weight: 500; }

/* ---- 5. one selection component (chips & segmented) ---------------------- */
.seg, .v30-tabs, .rk2-seg, .mi-tabs, .pe-tabs, .chips-x, .v46-chips, .v47-reps-chips, .h-pills {
  display: flex; gap: 8px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
}
.seg > button, .rk2-seg > button, .mi-tabs > button, .pe-tabs > button, .chips-x > button, .v46-chips > button, .v47-reps-chips > button, .v47-chip, .gchip, .h-pills > button, .v30-tabs > button {
  flex: 1 1 0; min-height: 36px; padding: 0 14px; border-radius: 18px !important;
  border: 1px solid rgba(241,236,221,.18) !important; background: transparent !important; box-shadow: none !important;
  color: var(--ink-2); font: 500 13px/1 var(--f-jp) !important; letter-spacing: .02em; position: relative;
}
.seg > button::after, .rk2-seg > button::after, .v47-chip::after { content: ""; position: absolute; inset: -4px 0; } /* 44px touch */
.seg > button.on, .seg > button[aria-checked="true"], .seg > button[aria-pressed="true"],
.rk2-seg > button.on, .mi-tabs > button.on, .pe-tabs > button.on, .chips-x > button.on, .v46-chips > button.on,
.v47-reps-chips > button.on, .v47-chip.on, .gchip.on, .h-pills > button.on, .v30-tabs > button.on, .v30-tabs > button[aria-selected="true"] {
  background: rgba(217,189,124,.14) !important; border-color: rgba(217,189,124,.6) !important; color: var(--gold-text) !important; font-weight: 600 !important;
}
/* the RANKING view switch (BIG3 | 資産価値 | 身体年収): same part, 44px tall, full width */
.v30-seg { display: flex; gap: 8px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.v30-seg > button { flex: 1 1 0; min-height: 44px; border-radius: 22px !important; border: 1px solid rgba(241,236,221,.18) !important; background: transparent !important; box-shadow: none !important; color: var(--ink-2); font: 500 15px/1 var(--f-jp) !important; }
.v30-seg > button.on { background: rgba(217,189,124,.14) !important; border-color: rgba(217,189,124,.6) !important; color: var(--gold-text) !important; font-weight: 600 !important; }
/* approved onboarding progress dashes are not chips */
.o2-seg { display: grid !important; }

/* ---- 6. buttons --------------------------------------------------------- */
.btn-primary { border-radius: var(--r-btn) !important; min-height: 48px; box-shadow: none !important; }
.btn-primary:active:not(:disabled), .btn-primary.pressed:not(:disabled) { transform: scale(.97) !important; filter: none !important; }
.btn-ghost, .v31-btn-sub { border-radius: var(--r-btn) !important; min-height: 44px; background: transparent !important; border: 1px solid rgba(241,236,221,.28) !important; box-shadow: none !important; color: var(--ink) !important; }
.btn-ghost:active, .btn-ghost.pressed { background: var(--surface-2) !important; transform: none !important; }

/* ---- 7. cards, sheets, rows: radius & spacing ---------------------------- */
.card, .v30-card, .v31-card, .rc-card, .v47-card, .body-card, .v47-past, .v47-handoff { border-radius: var(--r-card) !important; }
.sheet { border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important; box-shadow: 0 -8px 24px rgba(0,0,0,.5) !important; }

/* ---- 8. provenance marks: ≈ estimate / plain self-report / gold ✓ VERIFIED */
.v46-tag, .v47-tag, .v47-myid-prov, .prov-tag {
  background: none !important; border: 0 !important; padding: 0 !important; margin-left: 6px;
  color: var(--ink-3) !important; font: 500 11px/1.2 var(--f-jp) !important; letter-spacing: .02em;
}
.v47-myid-prov { display: block; margin: 2px 0 0; }
.prov-ver { color: var(--gold) !important; font-family: "PRIDE Cinzel", var(--f-rank, serif) !important; font-weight: 600 !important; }

/* ---- 9. ladder: rank colours stay inside the crest ----------------------- */
.lad button, .lad .lad-in { background: var(--surface-1) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.lad.cur button, .lad.cur .lad-in { border-color: var(--gold) !important; background: rgba(217,189,124,.08) !important; box-shadow: none !important; }
.lad.next button, .lad.next .lad-in { border-color: var(--line-gold) !important; }
.lad-name b { color: var(--ink) !important; }
.lad.cur .lad-name b { color: var(--gold-text) !important; }

/* ---- 10. AI coach: quiet bubbles, small portrait -------------------------- */
.co-msg.u p { background: var(--surface-2) !important; border: 1px solid var(--line-gold) !important; box-shadow: none !important; color: var(--ink) !important; }
.co-msg.a p, .co-msg.c p { background: var(--surface-1) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.co-send { background: linear-gradient(180deg, #EBD291, #D6B369 55%, #C6A157) !important; color: #19140B !important; box-shadow: none !important; }
.co-msg .coach-face, .co-msg img.cf { width: 24px !important; height: 24px !important; }

/* ---- 11. recording: the set button lives in the thumb zone ---------------- */
.ee .ee-add { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 4; min-height: 64px; border-radius: 14px !important; }
.ee .ee-undo { position: sticky; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 4; }

/* ---- 12. empty states ---------------------------------------------------- */
.v47-empty, .empty-v1 { display: grid; justify-items: center; gap: 12px; padding: 32px 20px; text-align: center; }
.v47-empty svg, .empty-v1 svg { width: 72px; height: 72px; color: var(--gold-lo); stroke-width: 1.5; }
.v47-empty p, .empty-v1 p { font: 400 15px/1.6 var(--f-jp); color: var(--ink); margin: 0; }

/* ---- 13. tab bar: opaque enough that nothing ghosts through --------------- */
.tabbar { background: rgba(7,13,9,.94) !important; }
.tabbar .tab.on, .tabbar .tab[aria-current="page"] { color: var(--gold) !important; text-shadow: none !important; filter: none !important; }
.tabbar .tab.on svg, .tabbar .tab[aria-current="page"] svg { filter: none !important; }

/* ---- 14. motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .ee .ee-add, .seg > button, .v30-seg > button { transition: none !important; } }

/* ---- 15. v0.48 parts ------------------------------------------------------ */
.v48-src { margin: 6px 0 0; font: 400 11px/1.4 var(--f-jp); color: var(--ink-3); letter-spacing: .02em; }
.v48-src:empty { display: none; }
.v48-sub { display: block; font: 400 11px/1.3 var(--f-jp); color: var(--ink-3); margin-top: 2px; }
.v48-scorevis { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.v48-scorevis > b { font: 600 15px var(--f-jp); color: var(--ink); }
.v48-scorevis .fine { margin: 0; }
.prov-tag { display: inline-block; vertical-align: middle; }
/* horizontal scrolling chip rows keep their natural width */
.chips-x > button, .h-pills > button { flex: 0 0 auto !important; white-space: nowrap; }
/* self card: values never clip */
.v31-me .money, .v30-me .money { font-size: clamp(18px, 5.6vw, 24px) !important; white-space: nowrap; }
.v31-me .v30-me-r, .v30-me .v30-me-r, .v31-me > span:last-child { min-width: 0; overflow: hidden; }
.v48-psc { margin: 10px 0 0; display: flex; align-items: baseline; gap: 8px; font: 500 15px var(--f-jp); color: var(--ink-2); }
.v48-psc b { font: 600 18px var(--f-num); color: var(--ink); }
.v48-psc small { font: 400 11px var(--f-jp); color: var(--ink-3); }
/* record-style cards outside onboarding: the one selection look (gold tint), not white */
.rs-opt.on, .rs-opt[aria-checked="true"] { background: rgba(217,189,124,.14) !important; border-color: rgba(217,189,124,.6) !important; color: var(--gold-text) !important; }
.rs-opt.on small { color: rgba(247,231,182,.8) !important; }
/* sticky tab rows inside sheets keep an opaque ground (nothing shows through) */
.pe-tabs { background: var(--card, #101813) !important; padding: 8px 0 !important; z-index: 3; }
.v48-from { margin: 4px 20px 0; font: 500 12px var(--f-jp); color: var(--gold); letter-spacing: .02em; }
.v48-ach { margin: 16px 0 0; padding: 16px; display: grid; gap: 8px; }
.v48-ach-t { margin: 0; font: 600 15px var(--f-jp); color: var(--ink); }
.v48-ach ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.v48-ach li { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font: 400 15px/1.4 var(--f-jp); color: var(--ink); }
.v48-ach li:first-child { border-top: 0; }
.v48-ach li time { font: 500 12px/1.6 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.v48-ach li.rank span:first-child, .v48-ach li.rank > span { color: var(--gold-text); }
.v48-ach .btn-text { justify-self: start; }