/* Components — depends on tokens.css. Prefix-free, name-agnostic class names. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Inter-Variable.woff2') format('woff2'),local('Inter');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/Newsreader-Variable.woff2') format('woff2'),local('Newsreader');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url('fonts/Newsreader-Italic-Variable.woff2') format('woff2'),local('Newsreader Italic'),local('Newsreader');}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-family-body);font-size:var(--fs-md);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-family-display);font-weight:500;line-height:var(--lh-tight);margin:0 0 var(--sp-2);letter-spacing:-.01em}
h1{font-size:var(--fs-3xl)}h2{font-size:var(--fs-2xl)}h3{font-size:var(--fs-xl)}
p{margin:0 0 var(--sp-3)}
.t-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3)}
.t-meta{font-size:var(--fs-sm);color:var(--c-ink-3)}
.t-secondary{color:var(--c-ink-2)}
.icon{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

/* Sample-data label (required on every mock using sample data) */
.sample-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;color:var(--c-info);background:var(--c-info-soft);border:1px dashed var(--c-info);border-radius:var(--r-pill);padding:2px 8px}

/* Buttons */
.btn{--_bg:var(--c-accent);--_fg:var(--c-on-accent);--_bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--target-min);min-width:var(--target-min);padding:0 var(--sp-5);border-radius:var(--r-md);border:1.5px solid var(--_bd);background:var(--_bg);color:var(--_fg);font:600 var(--fs-md)/1 var(--font-family-body);cursor:pointer;text-decoration:none;transition:background var(--motion-duration-fast) var(--motion-ease-standard),transform var(--motion-duration-fast)}
.btn:hover,.btn.is-hover{--_bg:var(--c-accent-hover)}
.btn:active,.btn.is-active{--_bg:var(--c-accent-active);transform:translateY(1px)}
.btn.is-focus{outline:2px solid var(--c-focus);outline-offset:2px}
.btn--block{width:100%}
.btn--secondary{--_bg:var(--c-surface);--_fg:var(--c-accent);--_bd:var(--c-accent)}
.btn--secondary:hover,.btn--secondary.is-hover{--_bg:var(--c-accent-soft)}
.btn--secondary:active,.btn--secondary.is-active{--_bg:var(--c-accent-soft);--_fg:var(--c-on-accent-soft)}
.btn--ghost{--_bg:transparent;--_fg:var(--c-accent)}
.btn--ghost:hover,.btn--ghost.is-hover,.btn--ghost:active,.btn--ghost.is-active{--_bg:var(--c-accent-soft);--_fg:var(--c-on-accent-soft)}
.btn--destructive{--_bg:var(--c-error);--_fg:var(--c-on-error)}
.btn--destructive:hover,.btn--destructive.is-hover,.btn--destructive:active,.btn--destructive.is-active{--_bg:var(--c-error);filter:brightness(.9)}
.btn:disabled,.btn[aria-disabled="true"]{--_bg:var(--c-disabled-bg);--_fg:var(--c-disabled-ink);--_bd:transparent;cursor:not-allowed;transform:none;filter:none}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn--icon{padding:0;width:var(--target-min)}

/* Inputs */
.field{display:grid;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.field label{font-weight:600;font-size:var(--fs-sm)}
.field .hint{font-size:var(--fs-sm);color:var(--c-ink-3)}
.input,.textarea{width:100%;min-height:var(--target-min);padding:10px var(--sp-3);border:1.5px solid var(--c-border-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);font:inherit}
.textarea{min-height:120px;resize:vertical;line-height:var(--lh-relaxed)}
.input:focus-visible,.textarea:focus-visible{border-color:var(--c-focus);outline:2px solid var(--c-focus);outline-offset:0}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--c-error)}
.field .error{font-size:var(--fs-sm);color:var(--c-error);display:flex;gap:6px;align-items:center}
.counter{font-size:var(--fs-xs);color:var(--c-ink-3);text-align:right}

/* Segmented scale 1–5 (difficulty/usefulness) */
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2);border:0;padding:0;margin:0 0 var(--sp-4)}
.scale legend{font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--sp-2)}
.scale input{position:absolute;opacity:0}
.scale label{display:flex;align-items:center;justify-content:center;min-height:var(--target-min);border:1.5px solid var(--c-border-strong);border-radius:var(--r-md);font-weight:600;cursor:pointer;background:var(--c-surface)}
.scale input:checked+label{background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent)}
.scale input:focus-visible+label{outline:2px solid var(--c-focus);outline-offset:2px}
.scale-ends{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--c-ink-3);grid-column:1/-1}

/* Choice cards (radio semantics) */
.choice{position:relative;display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border:1.5px solid var(--c-border-strong);border-radius:var(--r-lg);background:var(--c-surface);cursor:pointer;min-height:var(--target-min);margin-bottom:var(--sp-3)}
.choice input{position:absolute;opacity:0}
.choice .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--c-border-strong);flex:none;margin-top:2px;display:grid;place-items:center}
.choice-title{font-weight:600;display:block}
.choice-desc{font-size:var(--fs-sm);color:var(--c-ink-2);display:block;margin-top:2px}
.choice:has(input:checked){border-color:var(--c-accent);background:var(--c-accent-soft);box-shadow:inset 0 0 0 1px var(--c-accent)}
.choice:has(input:checked) .radio{border-color:var(--c-accent);background:radial-gradient(circle,var(--c-accent) 0 5px,transparent 6px)}
.choice:has(input:focus-visible){outline:2px solid var(--c-focus);outline-offset:2px}
.choice:has(input:disabled){opacity:.6;cursor:not-allowed}

/* Progress: bar */
.progress{display:grid;gap:6px}
.progress-head{display:flex;justify-content:space-between;font-size:var(--fs-sm)}
.progress-bar{height:8px;border-radius:var(--r-pill);background:var(--c-track);overflow:hidden}
.progress-bar>span{display:block;height:100%;width:var(--value,0%);background:var(--c-progress);border-radius:inherit;transition:width var(--motion-duration-slow) var(--motion-ease-standard)}
.progress-bar[data-value="0"]>span{width:0}
/* ring: set --value as 0..100 */
.ring{--size:96px;width:var(--size);height:var(--size);position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .track{stroke:var(--c-track)}.ring .fill{stroke:var(--c-progress);stroke-linecap:round;transition:stroke-dashoffset var(--motion-duration-slow) var(--motion-ease-standard)}
.ring-label{text-align:center;line-height:1.1}
.ring-label strong{display:block;font-size:var(--fs-xl);font-family:var(--font-family-display)}
.ring-label span{font-size:var(--fs-xs);color:var(--c-ink-3)}
/* steps */
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:0}
.steps li{flex:1;height:6px;border-radius:var(--r-pill);background:var(--c-track)}
.steps li[data-state="done"]{background:var(--c-progress)}
.steps li[data-state="current"]{background:var(--c-progress);opacity:1;box-shadow:inset 0 0 0 999px rgba(255,255,255,.0);background:repeating-linear-gradient(90deg,var(--c-progress) 0 50%,var(--c-track) 50% 100%)}

/* Roadmap milestone nodes */
.roadmap{list-style:none;margin:0;padding:0;position:relative}
.node{display:grid;grid-template-columns:40px 1fr;gap:var(--sp-3);position:relative;padding-bottom:var(--sp-5)}
.node::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--c-border)}
.node:last-child::before{display:none}
.node-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--c-border-strong);background:var(--c-surface);color:var(--c-ink-3)}
.node[data-state="done"] .node-dot{background:var(--c-success);border-color:var(--c-success);color:var(--c-surface)}
.node[data-state="current"] .node-dot{border-color:var(--c-accent);color:var(--c-accent);box-shadow:0 0 0 4px var(--c-accent-soft)}
.node[data-state="done"]::before{background:var(--c-success)}
.node-body{padding-top:6px}
.node-title{font-weight:600;display:block}
.node[data-state="locked"] .node-title{color:var(--c-ink-2)}
.node-meta{font-size:var(--fs-sm);color:var(--c-ink-3)}
.node a.node-link{display:block;border-radius:var(--r-md);text-decoration:none;color:inherit;min-height:var(--target-min)}

/* Cards */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--elev-1)}
.mission-card .principle{font-family:var(--font-family-display);font-style:italic;font-size:var(--fs-lg);color:var(--c-ink-2);border-left:3px solid var(--c-accent);padding-left:var(--sp-3);margin:var(--sp-3) 0}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);padding:4px 10px;border-radius:var(--r-pill);background:var(--c-surface-2);color:var(--c-ink-2)}
.check-step{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-2) 0;min-height:var(--target-min)}
.check-step input{width:22px;height:22px;accent-color:var(--c-accent);margin-top:2px;flex:none}
.done-when{background:var(--c-accent-soft);color:var(--c-on-accent-soft);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-sm)}
.actions{display:grid;gap:var(--sp-2)}
.actions-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* Focus mode */
.focus{background:var(--c-bg);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);padding:var(--sp-6)}
.timer{font-family:var(--font-family-display);font-size:var(--fs-timer);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.timer-controls{display:flex;gap:var(--sp-4);align-items:center;justify-content:center}
.timer-controls .btn--round{width:64px;height:64px;border-radius:50%;padding:0}

/* Stat tiles */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.stat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-4)}
.stat-value{font-family:var(--font-family-display);font-size:var(--fs-2xl);line-height:1.1;display:block}
.stat-label{font-size:var(--fs-sm);color:var(--c-ink-2)}
.stat[data-empty="true"] .stat-value{color:var(--c-ink-3)}

/* Toasts */
.toast{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--c-info-soft);color:var(--c-info);font-size:var(--fs-sm);box-shadow:var(--elev-2);border:1px solid currentColor}
.toast p{margin:0;color:var(--c-ink)}
.toast--success{background:var(--c-success-soft);color:var(--c-success)}
.toast--warning{background:var(--c-warning-soft);color:var(--c-warning)}
.toast--error{background:var(--c-error-soft);color:var(--c-error)}
.toast .btn{min-height:var(--target-min);margin-left:auto}

/* Sheet / modal */
.scrim{position:absolute;inset:0;background:var(--c-scrim)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--c-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-4) var(--sp-5) var(--sp-6);box-shadow:var(--elev-3);animation:sheet-in var(--motion-duration-slow) var(--motion-ease-standard)}
.sheet-handle{width:40px;height:4px;border-radius:2px;background:var(--c-border-strong);margin:0 auto var(--sp-4)}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}.btn[aria-busy="true"]::before{animation-duration:2.4s}.skeleton{animation:none!important}}

/* Tab bar */
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--c-surface);border-top:1px solid var(--c-border);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;font-size:var(--fs-xs);font-weight:500;color:var(--c-ink-3);text-decoration:none}
.tabbar a[aria-current="page"]{color:var(--c-accent);font-weight:600}
.tabbar a[aria-current="page"] .icon{stroke-width:2.25}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--c-skeleton) 0 40%,var(--c-skeleton-hi) 50%,var(--c-skeleton) 60% 100%);background-size:300% 100%;border-radius:var(--r-sm);animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.sk-line{height:12px;margin-bottom:10px}.sk-title{height:24px;width:60%;margin-bottom:14px}.sk-card{height:96px;border-radius:var(--r-lg);margin-bottom:12px}

/* State blocks */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);padding:var(--sp-8) var(--sp-5)}
.state .icon{width:32px;height:32px;color:var(--c-ink-3)}
.state--error .icon{color:var(--c-error)}

/* Support banner (guardrail) */
.support{border:1.5px solid var(--c-info);background:var(--c-info-soft);border-radius:var(--r-lg);padding:var(--sp-4)}
.support p{color:var(--c-ink)}

/* Placeholder lockup */
.lockup{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-family-display);font-size:var(--fs-xl);font-weight:500}
.lockup-mark{width:28px;height:28px;color:var(--c-accent)}

/* Phone frame for docs/mocks only */
.phone{width:390px;height:844px;position:relative;overflow:hidden;background:var(--c-bg);display:flex;flex-direction:column}
.screen-body{flex:1;overflow:hidden;padding:var(--sp-5)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);min-height:56px}