/* Scale: spacing 4 8 12 16 24 32 48 64 · radius 6 10 16 999 · text 12 14 16 20 24 32 40, plus display sizes 56 80 104 for the big scores · motion 150 250 400ms */
@font-face { font-family:Archivo; src:url(/fonts/archivo.woff2) format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
:root {
  --ink:#0b0b0b; --paper:#fff; --soft:#f4f4f1; --line:#0b0b0b; --muted:#55554f;
  --cobalt:#1b3fd8; --yellow:#ffd60a; --tomato:#ff5a36; --mint:#b8f2d0; --lilac:#d9ccff;
  --good:#0f5a39; --good-bg:#c9f5da; --warn:#8a2c05; --warn-bg:#ffd9cc; --due:#5c4500; --due-bg:#fff0a8; --bad:#7f1d1d; --bad-bg:#ffd6d6;
  --shadow-raised:4px 4px 0 var(--ink); --shadow-overlaid:8px 8px 0 var(--ink);
  color-scheme:light;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:500 16px/1.45 Archivo,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1 { font-size:32px; line-height:1.1; font-weight:900; font-stretch:80%; margin:0; overflow-wrap:anywhere; }
h2 { font-size:24px; line-height:1.15; font-weight:900; font-stretch:80%; text-transform:uppercase; margin:0 0 12px; }
h2 small { font-weight:600; opacity:.7; }
p { margin:8px 0; }
ul,ol { margin:0; padding:0; list-style:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:focus-visible { outline:3px solid var(--cobalt); outline-offset:2px; }
.icon { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }
.eyebrow { font-size:14px; font-weight:800; font-stretch:85%; letter-spacing:.02em; text-transform:uppercase; margin:0 0 4px; }
.muted { color:var(--muted); font-size:14px; }
.meta { font-size:14px; margin:8px 0 0; }
.warn { color:var(--warn); font-weight:800; }
.good { color:var(--good); font-weight:800; }
.pre { white-space:pre-wrap; overflow-wrap:anywhere; }

/* Top bar */
.top { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding:12px 24px; border-bottom:3px solid var(--ink); background:var(--paper); }
.brand { display:inline-flex; align-items:center; gap:8px; font-size:24px; font-weight:900; font-stretch:75%; text-transform:uppercase; text-decoration:none; color:var(--ink); }
.brand-mark,.empty-mark { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:2; }
.brand-mark .dot,.empty-mark .dot { fill:var(--tomato); stroke:none; }
.top nav { display:flex; flex-wrap:wrap; gap:4px; }
.top nav a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; font-weight:800; font-stretch:85%; text-transform:uppercase; text-decoration:none; transition:background-color 150ms ease-out,color 150ms ease-out; }
.top nav a:hover { background:var(--soft); }
.top nav a[aria-current=page] { background:var(--ink); color:var(--paper); }
.count { min-width:24px; padding:0 4px; border-radius:999px; background:var(--tomato); color:var(--ink); font-size:14px; line-height:24px; text-align:center; }
.tools { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:14px; }
.tools form { margin:0; }
.who { font-weight:700; }
.xp-chip { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:2px solid var(--ink); border-radius:999px; background:var(--yellow); font-weight:800; text-decoration:none; font-variant-numeric:tabular-nums; transition:transform 150ms ease-out; }
.xp-chip:hover { transform:translateY(-2px); }
.xp-mini { width:48px; height:8px; border-radius:999px; background:var(--paper); border:1px solid var(--ink); overflow:hidden; }
.xp-mini i { display:block; height:100%; background:var(--ink); }
.w-0 { width:0; } .w-5 { width:5%; } .w-10 { width:10%; } .w-15 { width:15%; } .w-20 { width:20%; } .w-25 { width:25%; } .w-30 { width:30%; } .w-35 { width:35%; } .w-40 { width:40%; } .w-45 { width:45%; } .w-50 { width:50%; } .w-55 { width:55%; } .w-60 { width:60%; } .w-65 { width:65%; } .w-70 { width:70%; } .w-75 { width:75%; } .w-80 { width:80%; } .w-85 { width:85%; } .w-90 { width:90%; } .w-95 { width:95%; } .w-100 { width:100%; }
main { max-width:1360px; margin:0 auto; padding:24px; }
.narrow { max-width:720px; margin:0 auto; }
.crumb { margin:0 0 12px; font-size:14px; font-weight:700; }
.crumb a { display:inline-flex; align-items:center; gap:4px; text-decoration:none; }
.heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.heading p { margin:4px 0 0; }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 24px; background:var(--ink); color:var(--paper); border:2px solid var(--ink); border-radius:999px; font:inherit; font-weight:800; font-stretch:85%; text-transform:uppercase; text-align:center; text-decoration:none; cursor:pointer; box-shadow:var(--shadow-raised); transition:transform 150ms ease-out,box-shadow 150ms ease-out,background-color 150ms ease-out; }
.button:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-overlaid); }
.button:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.button.quiet { background:var(--paper); color:var(--ink); }
.button.sm { min-height:44px; padding:4px 16px; font-size:14px; }
.button.block { display:flex; width:100%; }
.button.on-dark { background:var(--ink); color:var(--paper); }
.button[aria-busy=true] { opacity:.6; cursor:progress; }
.link { background:none; border:0; padding:0; color:inherit; font:inherit; text-decoration:underline; cursor:pointer; min-height:44px; }

/* Scoreboard */
.scoreboard { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:12px; margin-bottom:32px; }
.overview,.score-tile { border:3px solid var(--ink); border-radius:16px; padding:24px; box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); min-width:0; }
.overview { background:var(--yellow); display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.shout { margin:0; font-size:56px; line-height:1; font-weight:900; font-stretch:70%; text-transform:uppercase; letter-spacing:-.01em; }
.shout strong { font-size:104px; line-height:.9; font-weight:900; }
.big { margin:0 0 8px; }
.big strong { font-weight:900; font-variant-numeric:tabular-nums; }
.next { margin:0; font-weight:700; }
.score-tile { display:flex; flex-direction:column; gap:8px; text-decoration:none; font-weight:800; font-stretch:90%; overflow-wrap:anywhere; }
.score-tile small { font-size:14px; font-weight:600; font-stretch:100%; }
.tile-num { font-size:40px; line-height:1; font-weight:900; font-stretch:70%; text-transform:uppercase; }
.tile-level { background:var(--cobalt); color:var(--paper); transition:transform 150ms ease-out,box-shadow 150ms ease-out; }
.tile-level:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-overlaid); }
.tile-level .bar-track { fill:rgb(255 255 255 / .3); } .tile-level .bar-fill { fill:var(--yellow); }
.tile-streak { background:var(--ink); color:var(--paper); }
.tile-streak .icon { color:var(--tomato); }

/* Board */
.board { display:grid; gap:32px; }
.lane-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:12px; }
.lane-head h2 { margin:0; }
.lane-head p { margin:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px; }
.card { position:relative; display:flex; flex-direction:column; gap:12px; padding:16px; min-width:0; border:3px solid var(--ink); border-radius:16px; background:var(--bg,var(--soft)); color:var(--fg,var(--ink)); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); transition:transform 150ms ease-out,box-shadow 150ms ease-out; }
.card:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-overlaid); }
.h-short { --bg:var(--mint); } .h-mid { --bg:var(--lilac); } .h-long { --bg:var(--cobalt); --fg:#fff; }
.card.is-overdue { --bg:var(--tomato); --fg:var(--ink); }
.card header { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.card header a { font-size:20px; line-height:1.15; font-weight:800; font-stretch:90%; text-decoration:none; overflow-wrap:anywhere; }
.card header a strong { font-weight:800; }
.card header a::after { content:""; position:absolute; inset:0; border-radius:16px; }
.card footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin-top:auto; }
.card footer .meta { margin:0; flex:1 1 140px; font-size:12px; }
.card footer .button { position:relative; z-index:1; background:var(--paper); color:var(--ink); }
.card-body { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bignum { font-size:80px; line-height:.95; font-weight:900; font-stretch:70%; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.bignum.word { font-size:40px; text-transform:uppercase; letter-spacing:0; }
.figure { margin:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; font-size:14px; }
.figure strong { font-weight:800; font-size:16px; }
.figure.hero strong { font-size:40px; font-weight:900; font-stretch:70%; }
.closed-goals { margin-top:32px; }
.closed-cards .card { --bg:var(--soft); --fg:var(--ink); }
.lane-empty { display:flex; align-items:center; justify-content:center; gap:8px; min-height:96px; padding:16px; text-align:center; border:3px dashed var(--ink); border-radius:16px; font-weight:700; text-decoration:none; transition:background-color 150ms ease-out; }
.lane-empty:hover { background:var(--soft); }
.supports { display:flex; align-items:center; gap:4px; margin:0; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.supports .icon { width:12px; height:12px; }
.supports a { position:relative; }

/* Marks */
.bar { display:block; width:100%; height:12px; border-radius:999px; overflow:hidden; }
.bar-track { fill:var(--soft); }
.bar-fill { fill:var(--ink); transform-origin:left; transform-box:fill-box; animation:grow 400ms cubic-bezier(.4,0,.2,1); }
.spark { flex:0 0 88px; width:88px; height:40px; overflow:visible; }
.spark polyline { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.spark-area { fill:currentColor; opacity:.15; }
.spark circle { fill:currentColor; }
.rhythm { display:flex; flex-wrap:wrap; gap:4px; }
.rhythm li { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; font-size:12px; font-weight:900; line-height:1; color:transparent; }
.r-before { box-shadow:inset 0 0 0 1px currentColor; opacity:.3; color:inherit !important; }
.r-before span { visibility:hidden; }
.r-on_track { background:var(--ink); color:#fff !important; }
.h-long .r-on_track { background:#fff; color:var(--ink) !important; }
.r-at_risk { background:var(--yellow); color:var(--ink) !important; box-shadow:inset 0 0 0 2px var(--ink); }
.r-off_track { background:var(--tomato); color:var(--ink) !important; box-shadow:inset 0 0 0 2px var(--ink); }
.r-missed { background:#fff; color:var(--warn) !important; box-shadow:inset 0 0 0 2px var(--warn); }
.r-open { box-shadow:inset 0 0 0 3px currentColor; color:inherit; animation:pulse 400ms cubic-bezier(.4,0,.2,1); }
.r-open span { visibility:hidden; }
.badge { display:inline-block; flex:none; white-space:nowrap; font-size:12px; font-weight:800; line-height:1.4; padding:4px 8px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); color:var(--ink); }
.s-due { background:var(--yellow); }
.s-overdue { background:var(--ink); color:var(--paper); }
.s-checked,.c-on_track { background:var(--good-bg); color:var(--good); }
.c-at_risk { background:var(--due-bg); color:var(--due); }
.c-off_track { background:var(--bad-bg); color:var(--bad); }
.chips { display:flex; flex-wrap:wrap; gap:4px 8px; position:relative; }
.chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; line-height:1.4; padding:4px 8px; border-radius:999px; background:rgb(255 255 255 / .85); color:var(--ink); font-variant-numeric:tabular-nums; }
.chip.streak .icon { width:12px; height:12px; color:#c23c00; }
.pace-behind > span:first-child,.chip.down > span { color:var(--warn); }
.pace-ahead > span:first-child,.pace-on_pace > span:first-child,.chip.up > span { color:var(--good); }

/* Panels */
.panel { padding:24px; margin-bottom:16px; border:3px solid var(--ink); border-radius:16px; background:var(--paper); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.notice,.error,.success { padding:12px 16px; border:2px solid var(--ink); border-radius:10px; margin:0 0 16px; font-weight:600; animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.notice { background:var(--soft); font-size:14px; }
.error { background:var(--bad-bg); color:var(--bad); }
.success { background:var(--mint); }
.reached { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:24px; margin-bottom:16px; border:3px solid var(--ink); border-radius:16px; background:var(--yellow); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.reached h2,.reached p,.reached form { margin:0; }
.empty { max-width:560px; margin:0 auto; padding:64px 16px; text-align:center; }
.empty h2 { margin:16px 0 8px; }
.empty-mark { width:64px; height:64px; }
.empty .button { margin-top:16px; }

/* Forms */
.form { display:grid; gap:16px; }
.form label,.quest-form label,.setup label { display:block; font-weight:800; font-size:14px; }
input:not([type=radio]),textarea,select { display:block; width:100%; margin-top:4px; padding:12px; min-height:44px; font:inherit; font-weight:500; color:var(--ink); background:var(--paper); border:2px solid var(--ink); border-radius:10px; transition:box-shadow 150ms ease-out; }
input:not([type=radio]):focus,textarea:focus,select:focus { outline:none; box-shadow:var(--shadow-raised); }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { font-weight:800; font-size:14px; padding:0; margin-bottom:8px; }
.choices { display:flex; flex-wrap:wrap; gap:8px; }
.choice { position:relative; display:block; flex:1 1 112px; font-weight:600; font-size:14px; }
.choice input { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.choice > span { display:block; height:100%; padding:12px; text-align:center; background:var(--paper); border:2px solid var(--ink); border-radius:10px; transition:background-color 150ms ease-out,box-shadow 150ms ease-out,transform 150ms ease-out; }
.choice b { display:block; font-weight:800; }
.choice small { display:block; font-size:12px; font-weight:500; }
.choice:hover > span { transform:translate(-2px,-2px); box-shadow:var(--shadow-raised); }
.choice input:focus-visible + span { outline:3px solid var(--cobalt); outline-offset:2px; }
.choice input:checked + span { background:var(--ink); color:var(--paper); }
.tone-on_track input:checked + span { background:var(--good-bg); color:var(--good); box-shadow:inset 0 0 0 2px var(--good); }
.tone-at_risk input:checked + span { background:var(--yellow); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.tone-off_track input:checked + span { background:var(--tomato); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.hint { margin:8px 0; font-size:14px; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px; margin-top:8px; }
fieldset:has(input[value=none]:checked) .row,fieldset:has(input[value=none]:checked) .hint { display:none; }
.form-section { display:grid; gap:16px; }
.form-section h2 { margin:0; }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.actions form { margin:0; }

/* Goal page */
.goal-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.goal-side { position:sticky; top:16px; min-width:0; }
.summary-top { display:flex; align-items:center; gap:24px; }
.summary-text { min-width:0; flex:1; }
.ring { position:relative; flex:none; width:64px; height:64px; display:grid; place-items:center; }
.ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:9; }
.ring-track { stroke:var(--soft); }
.ring-fill { stroke:var(--cobalt); animation:sweep 400ms cubic-bezier(.4,0,.2,1); }
.ring-label { position:relative; font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.ring-large { width:128px; height:128px; }
.ring-large .ring-label { font-size:32px; font-stretch:70%; }
.status-ring { border-radius:999px; font-size:32px; font-weight:900; }
.mini-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px; margin-top:16px; }
.mini-stat { display:grid; grid-template-columns:auto 1fr; gap:0 8px; align-items:center; padding:12px; border:2px solid var(--ink); border-radius:10px; font-size:12px; font-weight:700; min-width:0; }
.mini-stat strong { grid-column:1 / -1; margin-top:4px; font-size:16px; font-weight:900; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.mini-stat small { display:block; font-size:12px; font-weight:500; }
.pace-text { display:block; }
.pace-text.pace-ahead,.pace-text.pace-on_pace { color:var(--good); }
.pace-text.pace-behind { color:var(--warn); }
.rhythm-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:16px; }
.big-link { margin-top:16px; font-size:14px; }
.chart { display:block; width:100%; height:auto; overflow:visible; }
.chart-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.chart-key { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 8px; font-size:12px; font-weight:600; }
.chart-key li { display:flex; align-items:center; gap:4px; }
.key-target,.key-start,.key-plan { width:16px; height:0; border-top:2px dashed var(--ink); }
.key-start { border-top:1px solid var(--muted); }
.key-plan { border-top:3px dotted var(--tomato); }
.chart .line { fill:none; stroke:var(--cobalt); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.area-top { stop-color:var(--cobalt); stop-opacity:.25; }
.area-bottom { stop-color:var(--cobalt); stop-opacity:0; }
.chart .grid { stroke:#c9c9c4; stroke-width:1; stroke-dasharray:2 4; }
.chart .ref { stroke:var(--muted); stroke-width:1; }
.chart .target { stroke:var(--ink); stroke-width:2; stroke-dasharray:6 4; }
.chart .plan { stroke:var(--tomato); stroke-width:3; stroke-dasharray:2 7; stroke-linecap:round; }
.chart .mark { fill:var(--cobalt); stroke:var(--paper); stroke-width:2; pointer-events:none; transition:r 150ms ease-out; }
.chart .p-at_risk .mark { fill:var(--yellow); stroke:var(--ink); }
.chart .p-off_track .mark { fill:var(--tomato); stroke:var(--ink); }
.chart .hit { fill:transparent; }
.chart .point:hover .mark { r:8px; }
.chart text { font-family:inherit; font-size:12px; font-weight:600; fill:var(--muted); font-variant-numeric:tabular-nums; }
.chart .strong { font-weight:800; fill:var(--ink); }
.chart .value { font-size:16px; font-weight:900; fill:var(--ink); }
.empty-chart { display:grid; justify-items:center; gap:8px; padding:32px 16px; text-align:center; border:3px dashed var(--ink); border-radius:10px; }
.empty-chart .icon { width:32px; height:32px; }
.check-panel { scroll-margin-top:16px; }
.check-panel:target { box-shadow:var(--shadow-overlaid); }
.history li,.person li { padding:12px 0; border-top:2px solid var(--soft); overflow-wrap:anywhere; }
.history li:first-child,.person li:first-child { border-top:0; padding-top:0; }
.history li:last-child,.person li:last-child { padding-bottom:0; }
.history-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.history-row .meta { margin:0; flex:1 1 120px; }
.history-row strong { font-weight:900; font-variant-numeric:tabular-nums; }
.note { margin:8px 0 0; padding:8px 12px; border-radius:6px; background:var(--soft); font-size:14px; }
.manage { padding:16px 0; }
.manage h2 { font-size:14px; }
.children li { display:grid; grid-template-columns:minmax(0,1fr) auto 144px; align-items:center; gap:4px 12px; padding:12px 0; border-top:2px solid var(--soft); overflow-wrap:anywhere; }
.children li:first-child { border-top:0; padding-top:0; }
.children a { font-weight:800; text-decoration:none; }
.children a:hover { text-decoration:underline; }

/* Week and month */
.period-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:16px; align-items:start; margin-bottom:24px; }
.period-score { padding:24px; border:3px solid var(--ink); border-radius:16px; box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); min-width:0; }
.is-week .period-score { background:var(--cobalt); color:#fff; }
.is-month .period-score { background:var(--tomato); }
.score-num { margin:16px 0 0; font-size:56px; line-height:.9; font-weight:900; font-stretch:70%; font-variant-numeric:tabular-nums; }
.score-num strong { font-size:104px; font-weight:900; }
.score-word { margin:4px 0 16px; font-weight:800; font-stretch:85%; text-transform:uppercase; }
.period-nav { display:flex; flex-wrap:wrap; gap:8px; }
.period-nav .button { color:var(--ink); }
.quests { display:grid; gap:8px; margin-bottom:16px; }
.quest { position:relative; display:flex; align-items:stretch; gap:8px; animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.quest form:first-child { flex:1; min-width:0; }
.quest-hit { display:flex; align-items:center; gap:16px; width:100%; height:100%; min-height:64px; padding:8px 16px; text-align:left; background:var(--soft); color:var(--ink); border:2px solid var(--ink); border-radius:10px; font:inherit; cursor:pointer; transition:transform 150ms ease-out,box-shadow 150ms ease-out,background-color 150ms ease-out; }
.quest-hit:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:var(--shadow-raised); }
.quest-hit:active:not(:disabled) { transform:translate(2px,2px); box-shadow:none; }
.quest-hit:disabled { cursor:default; }
.is-done .quest-hit { background:var(--mint); }
.quest-count { flex:none; display:grid; place-items:center; min-width:64px; height:48px; padding:0 8px; border:2px solid var(--ink); border-radius:6px; background:var(--paper); font-size:24px; font-weight:900; font-stretch:70%; font-variant-numeric:tabular-nums; }
.is-done .quest-count { background:var(--ink); color:var(--paper); }
.quest-text { min-width:0; overflow-wrap:anywhere; }
.quest-text strong { display:block; font-size:16px; font-weight:800; line-height:1.2; }
.quest-text small { display:block; font-size:12px; font-weight:600; }
.quest form:last-child { display:flex; }
.quest-remove { width:44px; background:none; border:0; border-radius:6px; font:inherit; font-weight:900; cursor:pointer; transition:background-color 150ms ease-out; }
.quest-remove:hover { background:var(--bad-bg); }
.quest-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; padding-top:16px; border-top:3px solid var(--ink); }
.quest-form .grow { flex:1 1 240px; }
.quest-form .short { flex:0 1 112px; }
.period-checks { margin-bottom:24px; }
.check-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:8px; }
.check-list a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; height:100%; padding:8px 16px; border:2px solid var(--ink); border-radius:10px; background:var(--yellow); font-weight:700; text-decoration:none; overflow-wrap:anywhere; transition:transform 150ms ease-out,box-shadow 150ms ease-out; }
.check-list a:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-raised); }
.check-list .is-done a { background:var(--paper); }
.check-list b { flex:none; font-weight:900; font-stretch:85%; text-transform:uppercase; font-size:14px; }

/* Trophies */
.level-hero { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; align-items:center; padding:32px; margin-bottom:16px; border:3px solid var(--ink); border-radius:16px; background:var(--cobalt); color:#fff; box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.level-hero h1 { font-size:80px; line-height:.95; font-stretch:70%; text-transform:uppercase; }
.level-xp { margin:8px 0 12px; font-size:24px; font-weight:800; }
.level-xp strong { font-size:40px; font-weight:900; font-stretch:70%; font-variant-numeric:tabular-nums; }
.level-hero .bar-track { fill:rgb(255 255 255 / .3); } .level-hero .bar-fill { fill:var(--yellow); }
.level-stats { display:grid; gap:8px; margin:0; }
.level-stats div { display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:10px; background:rgb(255 255 255 / .14); }
.level-stats dt { font-size:14px; font-weight:700; }
.level-stats dd { margin:0; font-weight:900; font-variant-numeric:tabular-nums; }
.badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:12px; margin-bottom:32px; }
.badges li { display:grid; justify-items:center; gap:4px; padding:16px; text-align:center; border:3px solid var(--ink); border-radius:16px; animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.badges strong { font-size:16px; font-weight:900; font-stretch:85%; line-height:1.15; }
.badges small { font-size:12px; font-weight:500; }
.badge-mark { display:grid; place-items:center; width:64px; height:64px; border:3px solid var(--ink); border-radius:999px; font-size:32px; font-weight:900; }
.is-earned { background:var(--yellow); box-shadow:var(--shadow-raised); }
.is-earned .badge-mark { background:var(--paper); }
.is-locked { background:var(--soft); border-style:dashed !important; color:var(--muted); }
.is-locked .badge-mark { border-style:dashed; }
.earn-list { display:grid; gap:4px; max-width:640px; }
.earn-list li { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:2px solid var(--soft); font-weight:600; }
.earn-list b { flex:none; font-weight:900; font-variant-numeric:tabular-nums; }

/* Guided setup */
.setup { display:flex; flex-direction:column; gap:24px; min-height:560px; padding:32px; border:3px solid var(--ink); border-radius:16px; box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.step-1 { background:var(--yellow); } .step-2 { background:var(--mint); } .step-3 { background:var(--tomato); } .step-4 { background:var(--lilac); } .step-5 { background:var(--yellow); }
.setup-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.setup-head .eyebrow { margin:0; }
.setup-dots { display:flex; gap:4px; }
.setup-dots li { width:32px; height:12px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); transition:background-color 250ms ease-out; }
.setup-dots .is-on { background:var(--ink); }
.setup-body { display:grid; gap:24px; max-width:880px; width:100%; }
.big-question,.setup label.big-question { display:block; margin:0; font-size:56px; line-height:1; font-weight:900; font-stretch:70%; overflow-wrap:anywhere; }
.big-question input { margin-top:16px; min-height:64px; padding:12px 16px; font-size:24px; font-weight:700; font-stretch:100%; }
.big-choices .choice { flex:1 1 240px; }
.big-choices .choice > span { padding:24px; font-size:32px; font-stretch:70%; text-transform:uppercase; }
.summary-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; }
.summary-tiles li { padding:12px 16px; background:var(--paper); border:2px solid var(--ink); border-radius:10px; overflow-wrap:anywhere; }
.summary-tiles span { display:block; font-size:12px; font-weight:800; text-transform:uppercase; }
.summary-tiles b { font-weight:800; }
.setup-actions { display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:auto; }

/* Check-in session */
.review-head { margin-bottom:16px; }
.heading.compact { margin-bottom:16px; }
.review-now { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.card-figures { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; }
.review .rhythm { margin-bottom:12px; }
.review-skip { margin:12px 0 0; text-align:center; font-size:14px; font-weight:700; }
.review-done { padding:48px 32px; text-align:center; border:3px solid var(--ink); border-radius:16px; background:var(--yellow); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.review-done h1 { font-size:56px; font-stretch:70%; text-transform:uppercase; }
.done-check { width:64px; height:64px; padding:12px; margin-bottom:16px; border-radius:999px; background:var(--ink); fill:none; stroke:var(--yellow); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.done-streaks { display:grid; gap:8px; max-width:480px; margin:24px auto 0; text-align:left; }
.done-streaks li { display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:10px; background:var(--paper); border:2px solid var(--ink); }
.done-streaks span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:14px; }
.done-streaks .icon { color:#c23c00; }

/* Team */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px; margin-bottom:24px; }
.stat { padding:16px 24px; border:3px solid var(--ink); border-radius:16px; background:var(--soft); }
.stat strong { display:block; font-size:56px; line-height:1; font-weight:900; font-stretch:70%; font-variant-numeric:tabular-nums; }
.stat span { font-size:14px; font-weight:700; }
.warn-stat { background:var(--tomato); }
.avatar { flex:none; display:grid; place-items:center; width:40px; height:40px; border:2px solid var(--ink); border-radius:999px; background:var(--yellow); font-size:14px; font-weight:900; }
.person { position:relative; }
.person.is-overdue { background:var(--warn-bg); }
.person header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.person header h2 { margin:0; font-size:20px; text-transform:none; overflow-wrap:anywhere; }
.person header .meta { display:block; margin:0; }
.person-row { display:grid; grid-template-columns:minmax(160px,1fr) 144px auto 96px; align-items:center; gap:8px 16px; }
.person-goal { display:grid; min-width:0; }
.person-goal a { font-weight:800; text-decoration:none; }
.person-goal a:hover { text-decoration:underline; }
.person-goal .muted { font-size:12px; }
.person-progress { display:flex; align-items:center; gap:8px; font-size:14px; font-variant-numeric:tabular-nums; }
.person-progress .bar-track { fill:#e4e4df; }
.person-state { justify-self:end; }

/* Sign-in */
.public { min-height:100vh; display:flex; flex-direction:column; background:var(--paper); }
.public-top { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.public-top .lang { font-size:14px; font-weight:700; }
.public main { flex:1; display:grid; place-items:center; width:100%; }
.login { width:100%; max-width:960px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); border:3px solid var(--ink); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-overlaid); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.login-art { padding:48px; background:var(--yellow); }
.login-mark { width:64px; height:64px; fill:none; stroke:var(--ink); stroke-width:2; }
.login-mark .dot { fill:var(--tomato); stroke:none; }
.login h1 { margin:16px 0 24px; font-size:56px; line-height:1; font-stretch:70%; text-transform:uppercase; }
.points { display:grid; gap:12px; font-weight:700; }
.points li { display:flex; gap:12px; align-items:center; }
.points .icon { width:20px; height:20px; }
.login-box { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:48px 32px; }
.dev-logins { display:grid; gap:12px; margin-top:8px; }

/* Celebration: each piece stays within the 400ms limit, and the staggered delays make the burst. */
.celebrate { position:fixed; inset:0 0 auto; z-index:10; display:flex; justify-content:center; padding-top:16px; pointer-events:none; animation:leave 250ms ease-in 3000ms forwards; }
.celebrate-card { position:relative; display:grid; justify-items:center; gap:4px; padding:12px 32px; border:3px solid var(--ink); border-radius:16px; background:var(--yellow); box-shadow:var(--shadow-overlaid); animation:pop 400ms cubic-bezier(.16,1,.3,1); }
.celebrate-card.is-level { padding:24px 48px; background:var(--tomato); }
.xp-pop { font-size:40px; line-height:1; font-weight:900; font-stretch:70%; font-variant-numeric:tabular-nums; }
.level-pop { font-size:32px; line-height:1; font-weight:900; font-stretch:70%; text-transform:uppercase; text-align:center; }
.badge-pop { font-size:14px; font-weight:800; }
.confetti { position:absolute; top:0; left:50%; width:0; height:0; }
.confetti i { position:absolute; top:48px; left:0; width:12px; height:12px; opacity:0; border:2px solid var(--ink); animation:burst 400ms cubic-bezier(.16,1,.3,1) forwards; }
.confetti i:nth-child(4n+1) { background:var(--yellow); }
.confetti i:nth-child(4n+2) { background:var(--tomato); border-radius:999px; }
.confetti i:nth-child(4n+3) { background:var(--cobalt); }
.confetti i:nth-child(4n) { background:var(--mint); border-radius:999px; }
.confetti i:nth-child(1) { --x:-260px; --y:40px; animation-delay:0ms; } .confetti i:nth-child(2) { --x:-200px; --y:120px; animation-delay:40ms; } .confetti i:nth-child(3) { --x:-150px; --y:30px; animation-delay:80ms; } .confetti i:nth-child(4) { --x:-110px; --y:150px; animation-delay:20ms; }
.confetti i:nth-child(5) { --x:-70px; --y:90px; animation-delay:60ms; } .confetti i:nth-child(6) { --x:-30px; --y:170px; animation-delay:100ms; } .confetti i:nth-child(7) { --x:10px; --y:130px; animation-delay:30ms; } .confetti i:nth-child(8) { --x:50px; --y:180px; animation-delay:70ms; }
.confetti i:nth-child(9) { --x:90px; --y:100px; animation-delay:10ms; } .confetti i:nth-child(10) { --x:130px; --y:160px; animation-delay:50ms; } .confetti i:nth-child(11) { --x:170px; --y:50px; animation-delay:90ms; } .confetti i:nth-child(12) { --x:210px; --y:130px; animation-delay:20ms; }
.confetti i:nth-child(13) { --x:250px; --y:60px; animation-delay:60ms; } .confetti i:nth-child(14) { --x:-230px; --y:170px; animation-delay:110ms; } .confetti i:nth-child(15) { --x:230px; --y:180px; animation-delay:120ms; } .confetti i:nth-child(16) { --x:-180px; --y:80px; animation-delay:130ms; }

@keyframes enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes sweep { from { stroke-dasharray:0 100; } }
@keyframes pulse { from { opacity:.3; } to { opacity:1; } }
@keyframes pop { from { transform:scale(.6) rotate(-3deg); opacity:0; } to { transform:none; opacity:1; } }
@keyframes leave { to { opacity:0; visibility:hidden; } }
@keyframes burst { 0% { opacity:1; transform:translate(0,0) rotate(0); } 100% { opacity:1; transform:translate(var(--x),var(--y)) rotate(200deg); } }

@media (max-width:1100px) {
  .goal-layout,.period-layout,.level-hero { grid-template-columns:minmax(0,1fr); }
  .goal-side { position:static; }
  .person-row { grid-template-columns:minmax(0,1fr) auto; }
  .person-progress { grid-column:1; }
  .person-state { grid-column:2; grid-row:1; }
  .scoreboard { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .top { padding:12px 16px; }
  .top nav { order:3; width:100%; }
  .top nav a { padding:0 12px; font-size:14px; }
  .who { display:none; }
  main { padding:16px; }
  .scoreboard { grid-template-columns:minmax(0,1fr); }
  .shout { font-size:40px; }
  .shout strong { font-size:80px; }
  .tile-num { font-size:32px; }
  .bignum { font-size:56px; }
  .big-question,.setup label.big-question { font-size:40px; }
  .setup { padding:16px; min-height:480px; }
  .level-hero { padding:24px 16px; }
  .level-hero h1 { font-size:56px; }
  .login { grid-template-columns:minmax(0,1fr); }
  .login-art { padding:24px; }
  .login-box { padding:24px; }
  .login h1 { font-size:40px; }
  .panel { padding:16px; }
  .ring-large { width:80px; height:80px; }
  .ring-large .ring-label { font-size:20px; }
  .summary-top { align-items:flex-start; gap:16px; }
  .chart text { font-size:20px; }
  .chart .value { font-size:24px; }
  .chart .x-mid { display:none; }
  .children li { grid-template-columns:minmax(0,1fr) auto; }
  .children .person-progress { grid-column:1 / -1; }
  .confetti i:nth-child(odd) { --x:-140px; }
  .confetti i:nth-child(even) { --x:140px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; animation-delay:0ms !important; transition-duration:0.01ms !important; }
  .confetti { display:none; }
  .celebrate { animation-delay:3000ms !important; }
}

/* Company view and questions */
.site-note { max-width:1360px; margin:0 auto; padding:16px 24px 32px; font-size:12px; font-weight:600; color:var(--muted); }
.answer-banner { display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%; margin-bottom:16px; padding:12px 16px; border:3px solid var(--ink); border-radius:999px; background:var(--tomato); font-weight:800; font-stretch:90%; text-decoration:none; box-shadow:var(--shadow-raised); transition:transform 150ms ease-out,box-shadow 150ms ease-out; }
.answer-banner:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-overlaid); }
.company-section { margin-bottom:32px; scroll-margin-top:16px; }
.company-people { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:12px; }
.company-person { padding:16px; border:3px solid var(--ink); border-radius:16px; background:var(--paper); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.company-person.is-overdue { background:var(--warn-bg); }
.company-person header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.company-person h3 { margin:0; font-size:20px; line-height:1.15; font-weight:900; font-stretch:85%; overflow-wrap:anywhere; }
.company-person .meta { display:block; margin:0; font-size:12px; font-weight:700; }
.person-numbers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin:0; }
.person-numbers div { padding:8px 4px; border-radius:6px; background:rgb(0 0 0 / .06); text-align:center; }
.person-numbers dt { font-size:12px; font-weight:600; }
.person-numbers dd { margin:0; font-size:20px; font-weight:900; font-stretch:75%; font-variant-numeric:tabular-nums; }
.company-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:12px; }
.period-mini { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.period-mini h2 { margin:0; }
.period-mini .button { box-shadow:none; }
.quest-view { padding:8px 12px; border:2px solid var(--ink); border-radius:10px; background:var(--soft); }
.quest-view.is-done { background:var(--mint); }
.quest-line { display:flex; align-items:center; gap:12px; }
.ask { margin-top:8px; font-size:14px; }
.ask summary { display:inline-flex; align-items:center; min-height:44px; font-weight:800; cursor:pointer; text-decoration:underline; }
.ask .form { gap:8px; justify-items:start; }
.question { padding:16px; margin-bottom:8px; border:2px solid var(--ink); border-radius:10px; background:var(--paper); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.question.is-open { background:var(--due-bg); }
.question header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.question .eyebrow { margin:0; text-transform:none; overflow-wrap:anywhere; }
.question .form { margin-top:12px; gap:8px; justify-items:start; }
.q-body { margin:8px 0 0; font-weight:700; overflow-wrap:anywhere; }
.q-body small { font-size:12px; font-weight:600; }
.q-answer { margin:8px 0 0; padding:8px 12px; border-left:4px solid var(--ink); background:var(--soft); overflow-wrap:anywhere; }
.question-group { margin-top:24px; }
.answer-panel { background:var(--tomato); }
@media (max-width:640px) { .site-note { padding:16px; } .person-numbers dd { font-size:16px; } }

.q-context { margin:8px 0 0; padding:8px 12px; border-radius:6px; background:rgb(0 0 0 / .06); font-size:14px; overflow-wrap:anywhere; }
.q-context small { font-size:12px; font-weight:800; }
.q-earlier { margin-top:8px; font-size:14px; }
.q-earlier summary { min-height:44px; display:flex; align-items:center; font-weight:800; color:var(--warn); cursor:pointer; }
.q-earlier li { padding:4px 0; text-decoration:line-through; overflow-wrap:anywhere; }
.earned-list { display:flex; flex-wrap:wrap; gap:8px; }
.earned-list li { padding:4px 12px; border:2px solid var(--ink); border-radius:999px; background:var(--yellow); font-size:14px; font-weight:800; }
.site-note { font-size:14px; color:var(--ink); }

/* Updates */
.updates-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-bottom:16px; }
.segmented { display:inline-flex; padding:4px; border:3px solid var(--ink); border-radius:999px; }
.segmented a { display:inline-flex; align-items:center; min-height:44px; padding:0 24px; border-radius:999px; font-weight:800; font-stretch:85%; text-transform:uppercase; text-decoration:none; transition:background-color 150ms ease-out,color 150ms ease-out; }
.segmented a[aria-current=page] { background:var(--ink); color:var(--paper); }
.updates-period { display:flex; align-items:center; gap:12px; text-align:center; }
.updates-period .eyebrow { margin:0; font-size:12px; }
.updates-period strong { font-size:20px; font-weight:900; font-stretch:80%; white-space:nowrap; }
.updates-period .button { box-shadow:none; }
.update-person header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.update-person h2 { margin:0; font-size:20px; text-transform:none; overflow-wrap:anywhere; }
.update-quests { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 12px; font-size:14px; }
.update-quests .chip { background:var(--soft); overflow-wrap:anywhere; }
.updates { display:grid; gap:8px; }
.update { padding:12px 16px; border:2px solid var(--ink); border-radius:10px; animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.update.is-missed { background:var(--warn-bg); }
.update.is-waiting { background:var(--due-bg); }
.update-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px; }
.update-head a { font-weight:800; text-decoration:none; overflow-wrap:anywhere; min-width:0; flex:1 1 200px; }
.update-head a:hover { text-decoration:underline; }
.update-figures { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:4px; font-variant-numeric:tabular-nums; }
.update-figures strong { font-size:20px; font-weight:900; font-stretch:80%; }
.update-percent { font-weight:900; }
.update-figures .chip { background:var(--soft); }

/* Time away */
.heading-actions { display:flex; flex-wrap:wrap; gap:8px; }
.s-away { background:var(--lilac); }
.r-away { background:var(--lilac); color:var(--ink) !important; box-shadow:inset 0 0 0 1px var(--ink); }
.r-away span { visibility:hidden; }
.update.is-away { background:var(--soft); }

/* If-then plan */
.if-then { display:grid; gap:4px; margin:8px 0; padding:8px 12px; border:2px solid var(--ink); border-radius:10px; background:var(--lilac); font-size:14px; overflow-wrap:anywhere; }
.if-then b { font-size:12px; font-weight:800; text-transform:uppercase; }
.if-then em { font-style:normal; font-weight:900; }
.summary-tiles .wide { grid-column:1 / -1; }

/* Blockers and help */
.check-help { display:flex !important; align-items:center; gap:8px; min-height:44px; font-size:16px !important; }
.check-help input { display:inline-block; width:24px; height:24px; min-height:0; margin:0; padding:0; accent-color:var(--ink); }
.blocker { margin:8px 0 0; padding:8px 12px; border-left:4px solid var(--tomato); background:var(--soft); font-size:14px; overflow-wrap:anywhere; }
.help-section h2 { color:var(--ink); }
.help-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)); gap:8px; }
.help-card { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px; padding:16px; border:3px solid var(--ink); border-radius:16px; background:var(--tomato); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.help-card > div { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
.help-card .eyebrow { margin:0; }
.help-card a { text-decoration:none; }
.help-card p { margin:4px 0 0; font-size:14px; }
.help-card form { margin:0; }
.help-card .button { background:var(--paper); color:var(--ink); }
.help-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:24px; margin-bottom:16px; border:3px solid var(--ink); border-radius:16px; background:var(--tomato); box-shadow:var(--shadow-raised); }
.help-banner h2 { margin:0; }
.help-banner p { margin:4px 0 0; overflow-wrap:anywhere; }
.help-banner form { margin:0; }

/* Company goals */
.company-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 16px; margin-bottom:16px; border:3px solid var(--ink); border-radius:16px; background:var(--soft); }
.strip-title { display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:14px; font-weight:800; font-stretch:85%; text-transform:uppercase; text-decoration:none; }
.strip-goals { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.strip-goals a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:4px 16px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); font-size:14px; font-weight:700; text-decoration:none; overflow-wrap:anywhere; transition:transform 150ms ease-out; }
.strip-goals a:hover { transform:translateY(-2px); }
.strip-goals b { font-weight:900; font-variant-numeric:tabular-nums; }
.company-goals { display:grid; gap:16px; }
.company-goal { display:grid; gap:12px; padding:24px; border:3px solid var(--ink); border-radius:16px; background:var(--paper); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.company-goal > header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; }
.company-goal > header > div { flex:1 1 280px; min-width:0; }
.company-goal h2 { margin:0; font-size:32px; line-height:1.1; text-transform:none; overflow-wrap:anywhere; }
.company-goal h2 a { text-decoration:none; }
.company-goal h3 { margin:0 0 8px; font-size:16px; font-weight:900; font-stretch:85%; text-transform:uppercase; }
.rollup { display:grid; grid-template-columns:repeat(auto-fit,minmax(144px,1fr)); gap:8px; margin:0; }
.rollup div { padding:12px; border-radius:10px; background:var(--soft); }
.rollup dt { font-size:12px; font-weight:700; }
.rollup dd { margin:0; font-size:24px; font-weight:900; font-stretch:75%; font-variant-numeric:tabular-nums; }
.rollup .warn { background:var(--warn-bg); }
.supporting li { display:grid; grid-template-columns:minmax(0,1fr) auto 144px; align-items:center; gap:4px 12px; padding:8px 0; border-top:2px solid var(--soft); overflow-wrap:anywhere; }
.supporting li:first-child { border-top:0; }
.supporting a { font-weight:800; text-decoration:none; }
.supporting a:hover { text-decoration:underline; }
@media (max-width:640px) { .supporting li { grid-template-columns:minmax(0,1fr) auto; } .supporting .person-progress { grid-column:1 / -1; } .company-goal { padding:16px; } .company-goal h2 { font-size:24px; } }
.person-progress strong { white-space:nowrap; }
.company-goal > .muted { margin:0; font-size:12px; }

/* Seasons, shared quests, way back */
.tile-season { margin-top:auto; padding-top:8px; font-weight:800 !important; }
.season-card { display:flex; flex-wrap:wrap; gap:24px 48px; padding:24px 32px; margin-bottom:16px; border:3px solid var(--ink); border-radius:16px; background:var(--soft); box-shadow:var(--shadow-raised); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.season-card > div { flex:1 1 320px; min-width:0; }
.tier-bronze { background:#f2d5b8; } .tier-silver { background:#dfe3e8; } .tier-gold { background:var(--yellow); }
.season-score { margin:4px 0 8px; font-size:24px; font-weight:800; }
.season-score strong { font-size:56px; line-height:1; font-weight:900; font-stretch:70%; font-variant-numeric:tabular-nums; }
.tier-name { margin-left:8px; padding:4px 12px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); font-size:14px; }
.season-card .bar-track { fill:rgb(0 0 0 / .12); }
.muted-on { font-size:12px; font-weight:600; }
.past-seasons h2 { font-size:16px; margin-bottom:8px; }
.past-seasons li { display:grid; grid-template-columns:1fr auto 72px; gap:12px; padding:4px 0; font-size:14px; font-variant-numeric:tabular-nums; }
.way-back { position:relative; z-index:1; display:flex; align-items:center; gap:8px; min-height:44px; margin:0 0 12px; padding:8px 12px; border:2px solid var(--ink); border-radius:10px; background:var(--yellow); color:var(--ink); font-size:14px; font-weight:800; text-decoration:none; overflow-wrap:anywhere; transition:transform 150ms ease-out; }
a.way-back:hover { transform:translateY(-2px); }
.card .way-back { margin:0; }
.way-back.quiet { background:rgb(255 255 255 / .85); font-weight:700; }
.shared-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)); gap:8px; margin-bottom:16px; }
.shared-quest { display:grid; gap:8px; padding:16px; border:3px solid var(--ink); border-radius:16px; background:var(--lilac); animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.shared-quest.is-done { background:var(--mint); }
.shared-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; overflow-wrap:anywhere; }
.shared-head strong { font-weight:800; min-width:0; flex:1 1 180px; }
.shared-score { font-size:20px; font-weight:900; font-stretch:75%; font-variant-numeric:tabular-nums; }
.shared-quest .meta { margin:0; font-size:12px; overflow-wrap:anywhere; }
.shared-quest .bar-track { fill:rgb(255 255 255 / .7); }

/* Reminders and monthly summary */
.page-links { display:flex; flex-wrap:wrap; gap:0 16px; margin:0 0 16px; font-size:14px; font-weight:700; }
.page-links a { display:inline-flex; align-items:center; min-height:44px; }
.reminder-headline,.summary-headline { margin:0 0 24px; font-size:24px; font-weight:800; line-height:1.3; overflow-wrap:anywhere; animation:enter 250ms cubic-bezier(.16,1,.3,1); }
.reminder-section { margin-bottom:24px; }
.reminder-section h2 { margin:0 0 8px; }
.reminder-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.reminder-list > li { display:grid; gap:8px; padding:12px 16px; border:2px solid var(--ink); border-radius:10px; background:var(--paper); }
.reminder-list a:not(.way-back) { display:grid; gap:4px; min-height:24px; text-decoration:none; overflow-wrap:anywhere; }
.reminder-list a:hover strong { text-decoration:underline; }
.reminder-list .muted { font-size:14px; }
.reminder-list .way-back { margin:0; }
.reminder-count { display:flex; align-items:center; gap:12px; margin:0; }
.reminder-count strong { font-size:32px; font-weight:900; font-variant-numeric:tabular-nums; }
.table-wrap { overflow-x:auto; }
.summary-table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.summary-table th,.summary-table td { padding:8px 12px; border-bottom:2px solid var(--soft); text-align:right; white-space:nowrap; }
.summary-table th:first-child { text-align:left; white-space:normal; overflow-wrap:break-word; min-width:96px; }
.summary-table thead th { font-size:12px; white-space:normal; border-bottom:3px solid var(--ink); }
.summary-table a { display:inline-flex; align-items:center; min-height:24px; }
.summary-rule { font-size:12px; }

/* Figures from other systems */
.figure-hint { margin:0; padding:8px 12px; border-left:4px solid var(--ink); background:var(--yellow); font-size:14px; overflow-wrap:anywhere; }
.import-section p { overflow-wrap:anywhere; }
.import-token { display:block; margin:8px 0; padding:8px 12px; border:2px solid var(--ink); border-radius:6px; background:var(--paper); font-size:14px; overflow-wrap:anywhere; user-select:all; }
.import-example { margin:8px 0 0; padding:8px 12px; border-radius:6px; background:var(--paper); font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.import-form { margin-top:12px; }

/* Optional game */
.game-optional { margin-top:32px; padding-top:16px; border-top:2px solid var(--soft); }
.game-optional p { margin:0 0 12px; }

/* AI quest drafts */
.ai-form { margin-top:12px; padding-top:12px; border-top:2px solid var(--soft); }
.ai-form select { width:100%; min-width:0; }
.ai-note { flex:1 1 100%; margin:0; font-size:12px; }
.ai-drafted { margin:12px 0 0; }

/* Season recap */
.season-banner { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-height:44px; margin-bottom:16px; padding:12px 16px; border:3px solid var(--ink); border-radius:16px; background:var(--yellow); color:var(--ink); font-weight:700; text-decoration:none; overflow-wrap:anywhere; animation:enter 250ms cubic-bezier(.16,1,.3,1); transition:transform 150ms ease-out; }
.season-banner:hover { transform:translateY(-2px); }
.past-seasons a { display:inline-flex; align-items:center; min-height:24px; }
.recap-next > .muted { margin:0 0 12px; }
.recap-goal { grid-template-columns:minmax(0,1fr) auto !important; align-items:center; gap:8px 12px; }
.recap-goal > div:first-child { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
.recap-goal .muted { font-size:14px; }
.recap-new { margin:16px 0 0; }
@media (max-width:640px) { .recap-goal { grid-template-columns:minmax(0,1fr) !important; } }

/* Japanese line breaks: keep words whole where the browser can. */
html[lang="ja"] :is(h1, h2, h3, strong, .card a, .shout, .reminder-headline, .summary-headline) { word-break:auto-phrase; }

/* Replies on check-ins */
.replies { display:grid; gap:8px; margin-top:8px; font-size:14px; }
.cheers { margin:0; font-weight:700; overflow-wrap:anywhere; }
.reply-list { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.reply-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:8px 12px; border-radius:10px; background:var(--soft); overflow-wrap:anywhere; }
.reply-list form { margin:0 0 0 auto; }
.reply-actions { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.reply-cheer { margin:0; }
.reply-form { display:flex; flex:1 1 280px; flex-wrap:wrap; align-items:flex-end; gap:8px; margin:0; min-width:0; }
.reply-form label { flex:1 1 200px; min-width:0; font-size:12px; font-weight:700; }
.reply-form textarea { width:100%; min-height:44px; font-size:14px; }
.reply-note { flex:1 1 100%; margin:0; font-size:12px; }

/* One-screen check-in */
.checkin-list { display:grid; gap:12px; margin:0 0 16px; padding:0; list-style:none; }
.checkin-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:8px 16px; padding:16px; border:3px solid var(--ink); border-radius:16px; background:var(--paper); }
.checkin-goal { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
.checkin-goal a { text-decoration:none; }
.checkin-goal a:hover strong { text-decoration:underline; }
.checkin-goal .muted { font-size:14px; }
.checkin-status { min-width:0; margin:0; padding:0; border:0; }
.checkin-status .choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.checkin-row .figure-hint,.checkin-value,.checkin-note { grid-column:2; font-size:14px; font-weight:700; }
.checkin-value input,.checkin-note textarea { width:100%; min-height:44px; }
.checkin-more { grid-column:2; display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.checkin-submit { position:sticky; bottom:0; padding:12px 0; background:var(--paper); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:640px) { .checkin-row { grid-template-columns:minmax(0,1fr); } .checkin-row .figure-hint,.checkin-value,.checkin-note,.checkin-more { grid-column:1; } }
.checkin-status .choices { grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); }
.checkin-skip span { font-weight:500; }
/* Keep rows short: value and note side by side, one line each. */
.checkin-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); padding:12px 16px; }
.checkin-goal,.checkin-more { grid-column:1; }
.checkin-goal { grid-row:1; }
.checkin-status { grid-column:2 / -1; grid-row:1; }
.checkin-row .figure-hint { grid-column:2 / -1; }
.checkin-value { grid-column:2; }
.checkin-note { grid-column:3; }
.checkin-value:not(:has(+ .checkin-note)) + .checkin-note { grid-column:3; }
.checkin-note:not(.checkin-value + .checkin-note) { grid-column:2 / -1; }
.checkin-more { align-self:end; }
@media (max-width:640px) { .checkin-row { grid-template-columns:minmax(0,1fr); } .checkin-goal,.checkin-status,.checkin-row .figure-hint,.checkin-value,.checkin-note,.checkin-more,.checkin-note:not(.checkin-value + .checkin-note) { grid-column:1; grid-row:auto; } }
/* The default "not now" stays quiet, so the real choices stand out. */
.checkin-skip input:checked + span { background:var(--soft); color:var(--ink); border-color:var(--muted); box-shadow:none; }
.checkin-skip span { white-space:nowrap; }
.checkin-more { grid-row:2; }
@media (max-width:640px) { .checkin-status .choices { grid-template-columns:repeat(3,minmax(0,1fr)); } .checkin-skip { grid-column:1 / -1; } .checkin-more { grid-row:auto; } }

/* AI advice */
.ai-section form { margin:8px 0; }
.ai-answer { display:grid; gap:4px; margin:0 0 12px; padding:12px 16px; border:2px solid var(--ink); border-radius:10px; background:var(--soft); overflow-wrap:anywhere; }
.ai-answer p { margin:0; }
.ai-answer .button { justify-self:start; }
.ai-steps { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ai-steps li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.ai-steps span { flex:1 1 180px; min-width:0; }

/* Goal templates */
.template-box { margin-bottom:24px; padding:16px; border-radius:16px; background:var(--soft); }
.template-box h2 { margin:0 0 4px; }
.template-box > .muted { margin:0 0 12px; }
.template-roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; }
.template-role h3 { margin:0 0 4px; font-size:14px; }
.template-role ul { margin:0; padding:0; list-style:none; }
.template-role a { display:flex; align-items:center; min-height:44px; font-size:14px; overflow-wrap:anywhere; }

/* Company goals that need attention */
.gap-list { margin-bottom:24px; padding:16px; border:3px solid var(--ink); border-radius:16px; background:var(--warn-bg); }
.gap-list h2 { margin:0 0 8px; }
.gap-list ul { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.gap-list a { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; min-height:44px; padding:4px 0; text-decoration:none; overflow-wrap:anywhere; }
.gap-list a span { font-size:14px; }
.gap-list a:hover strong { text-decoration:underline; }
.story-form { margin:0 0 24px; }
.story { margin-bottom:24px; }
.wins { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
.win { padding:16px 20px; border:3px solid var(--ink); border-radius:16px; background:var(--paper); overflow-wrap:anywhere; }
.win h2 { margin:4px 0 8px; font-size:20px; }
.win h2 a { color:inherit; }
.win-who { margin:0 0 8px; }
.win-note { margin:0 0 12px; padding:8px 12px; border-left:4px solid var(--ink); background:var(--soft); }
.win-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
.win-cheers { margin:0; }
.win-form textarea { width:100%; }
.win-panel form + form { margin-top:8px; }
.partner-list { display:grid; gap:4px; margin:0 0 12px; padding:0; list-style:none; }
.partner-list li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; min-height:44px; overflow-wrap:anywhere; }
.partner-form select { width:100%; min-height:44px; }
.partner-note { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
.partner-note p { margin:0; }
.watching { margin:32px 0; }
.watch-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.watch-list li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-height:44px; padding:8px 16px; border:3px solid var(--ink); border-radius:12px; background:var(--paper); overflow-wrap:anywhere; }
.welcome { margin:0 0 24px; padding:20px 24px; border:3px solid var(--ink); border-radius:16px; background:var(--mint); }
.welcome h2 { margin:0 0 8px; }
.welcome p { margin:0 0 16px; }
.number-hint .actions { flex-wrap:wrap; }
.check-row { display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-weight:600; }
.check-row input { width:20px; height:20px; min-height:0; margin:2px 0 0; flex:none; }
.check-row b { display:block; font-weight:800; }
.check-row small { display:block; font-weight:500; }