/* docs/08-pwa-ux.md §8 — visual direction. Flat, bordered, near-shadowless: an instrument, not a consumer app. Light is the default even when the OS is dark (§8, explicit product decision) — note there is deliberately no `prefers-color-scheme` media query anywhere below. The dark tokens exist so the one-line toggle in app.js (`documentElement.dataset.theme`) has somewhere to point; docs/08's round scope defers the full theme *screen* to Phase 2, so the only UI for it this round is the small icon button in the top bar. */ :root { --bg: #FCFCFB; --surface: #FFFFFF; --surface-sunk: #F4F4F1; --border: #E4E4DF; --ink: #1B1B19; --ink-2: #55554E; --ink-3: #8A8A80; --accent: #2F6F4E; --ok: #2F6F4E; --fossil: #B4342A; --upgrade: #9A6300; --focus: #1F5AA6; --font-ui: Roboto, "Noto Sans", system-ui, sans-serif; --font-en: "Roboto Mono", ui-monospace, SFMono-Regular, monospace; --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-19: 19px; --t-23: 23px; --t-28: 28px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --r-card: 8px; --r-input: 6px; --r-chip: 999px; } /* The explicit toggle (app.js) sets data-theme on ; it never follows the OS. See the note above — this file has no @media (prefers-color-scheme). */ [data-theme="dark"] { --bg: #16161A; --surface: #1E1E23; --surface-sunk: #26262C; --border: #34343C; --ink: #ECECE8; --ink-2: #ADADA6; --ink-3: #74747C; --accent: #6FBF92; --ok: #6FBF92; --fossil: #E8756A; --upgrade: #E0A94A; --focus: #7FB2F0; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-16); line-height: 1.6; -webkit-tap-highlight-color: transparent; } h1, h2, h3, p { margin: 0; } button { font-family: inherit; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; animation-duration: 0ms !important; } } .app { max-width: 560px; margin: 0 auto; /* docs/08 §3.1: track the keyboard with visualViewport, not position:fixed — app.js sets --app-vh from visualViewport.height on Android Chrome; 100dvh is the fallback for browsers with no visualViewport support. */ min-height: var(--app-vh, 100dvh); display: flex; flex-direction: column; padding: 0 var(--s4); } /* ---- top bar --------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) 0; } .topbar-name { font-size: var(--t-14); color: var(--ink-2); letter-spacing: 0.02em; } /* ---- generic bits ------------------------------------------------------ */ .mono { font-family: var(--font-en); } .ink-2 { color: var(--ink-2); } .ink-3 { color: var(--ink-3); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .surface-sunk { background: var(--surface-sunk); border-radius: var(--r-card); padding: var(--s4); } .screen { flex: 1; display: flex; flex-direction: column; } .screen[hidden] { display: none !important; } .btn { min-height: 48px; border-radius: var(--r-input); border: 1px solid transparent; font-size: var(--t-16); font-family: var(--font-ui); cursor: pointer; transition: opacity 140ms ease-out, transform 140ms ease-out; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.4; cursor: default; } .btn-primary { width: 100%; background: var(--accent); color: #fff; font-weight: 600; } .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--ink); } .btn-text { background: transparent; color: var(--ink-2); border: none; text-decoration: underline; } .field-label { font-size: var(--t-14); color: var(--ink-2); display: block; margin-bottom: var(--s2); } .text-input { width: 100%; min-height: 48px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); color: var(--ink); font-size: var(--t-16); } .text-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; } /* ---- S0 · Login --------------------------------------------------------- */ .login-screen { justify-content: center; gap: var(--s5); padding-bottom: var(--s7); } .login-title { font-size: var(--t-23); line-height: 1.3; } .login-error { color: var(--fossil); font-size: var(--t-14); min-height: 1em; } .kb-check { border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4); } .kb-check-task { font-size: var(--t-14); color: var(--ink-2); margin-bottom: var(--s3); } .kb-check-result { font-size: var(--t-14); margin-top: var(--s3); } .kb-check-result.ok { color: var(--ok); } .kb-check-result.fail { color: var(--fossil); } /* ---- S1 · Session ------------------------------------------------------- */ .session-screen { gap: var(--s4); padding-bottom: var(--s5); } .rail { display: flex; gap: var(--s1); height: 6px; } .rail-seg { flex: 1; border-radius: var(--r-chip); background: var(--border); display: block; opacity: 0.5; } .rail-seg.done { opacity: 1; } .rail-seg.current { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; } .rail-seg.tint-fossil { background: var(--fossil); } .rail-seg.tint-upgrade { background: var(--upgrade); } .rail-seg.tint-focus { background: var(--focus); } .rail-seg.tint-accent { background: var(--accent); } .block-header { padding: var(--s2) 0; } .block-title { font-size: var(--t-23); line-height: 1.3; } .block-sub { font-size: var(--t-14); color: var(--ink-2); margin-top: 2px; } .card { display: flex; flex-direction: column; gap: var(--s3); } .evidence-line { font-size: var(--t-14); color: var(--ink-2); } .sentence { font-family: var(--font-en); font-size: var(--t-19); line-height: 1.5; padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); white-space: pre-wrap; word-break: break-word; /* docs/08 §3.1: "the source sentence must never scroll out of view while typing... if content overflows, the explanation area scrolls, the sentence does not" — sticky keeps it pinned at a scroll offset while the reveal's explanation (the tallest, most overflow-prone content) scrolls past it underneath, position:fixed being unreliable here on Android Chrome with the IME open per the same section. */ position: sticky; top: var(--s2); z-index: 1; } .sentence mark.err { background: transparent; color: inherit; text-decoration: underline wavy var(--fossil); text-decoration-thickness: 2px; } .instruction { font-size: var(--t-14); } .instruction .anchor { font-family: var(--font-en); color: var(--ink); } .answer-form { display: flex; flex-direction: column; gap: var(--s3); } .answer-input { font-family: var(--font-en); font-size: var(--t-19); min-height: 56px; } textarea.answer-input { min-height: 84px; padding: var(--s3); resize: vertical; line-height: 1.5; } .paste-toast { font-size: var(--t-12); color: var(--fossil); min-height: 1.4em; } /* ---- reveal (08 §3.4) --------------------------------------------------- */ .reveal { display: flex; flex-direction: column; gap: var(--s4); animation: reveal-in 160ms ease-out; } @keyframes reveal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .reveal-row { display: flex; flex-direction: column; gap: var(--s1); } .reveal-label { font-size: var(--t-14); color: var(--ink-2); } .reveal-value { font-size: var(--t-19); } .reveal-value.ok { color: var(--ok); } del.fossil-mark, ins.ok-mark { text-decoration: none; border-radius: 3px; padding: 0 1px; } del.fossil-mark { background: color-mix(in srgb, var(--fossil) 20%, transparent); color: var(--fossil); } ins.ok-mark { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); } .verdict { font-size: var(--t-16); font-weight: 600; } .verdict-ok { color: var(--ok); } .verdict-no { color: var(--fossil); } /* Open-card feature-gate verdicts (docs/10-fix-plan.md §2.2) — factual statements about the FEATURE, never a judgement of his sentence. --fossil red is reserved for fossil_buster (08 §8.2) and never appears here. */ .reveal-label.ok { color: var(--ok); } .gate-line { font-size: var(--t-14); font-weight: 600; } .gate-ok { color: var(--ok); } .gate-upgrade { color: var(--upgrade); } /* ⑥ Tiếp — un-stickied (docs/10-fix-plan.md §4): part of the reveal's own normal-flow content, not the fixed action bar, so reaching it means scrolling past the explanation rather than skipping it. */ .reveal-next { margin-top: var(--s2); } .explain { font-size: var(--t-16); line-height: 1.6; display: flex; flex-direction: column; gap: var(--s3); } .explain p { margin: 0; } .explain code { font-family: var(--font-en); background: var(--surface-sunk); padding: 0 4px; border-radius: 4px; font-size: 0.92em; } .contrast { font-size: var(--t-14); font-family: var(--font-en); } .evidence { display: flex; flex-direction: column; gap: 2px; } .evidence-label { font-size: var(--t-12); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; } .evidence-value { font-size: var(--t-14); color: var(--ink-2); } /* ---- empty / stale states (08 §4) --------------------------------------- */ .empty-state { border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4); font-size: var(--t-14); color: var(--ink-2); display: flex; flex-direction: column; gap: var(--s1); } .empty-state strong { color: var(--ink); font-weight: 600; } /* ---- sticky action bar --------------------------------------------------- */ .action-bar { position: sticky; bottom: 0; background: var(--bg); padding: var(--s3) 0; border-top: 1px solid var(--border); margin-top: auto; } /* ---- overrun dialog ------------------------------------------------------- */ .dialog-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, #000 40%, transparent); display: flex; align-items: flex-end; justify-content: center; z-index: 10; } .dialog-backdrop[hidden] { display: none !important; } .dialog { width: 100%; max-width: 560px; background: var(--surface); border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); padding: var(--s5) var(--s4) var(--s6); display: flex; flex-direction: column; gap: var(--s4); animation: reveal-in 160ms ease-out; } .dialog-title { font-size: var(--t-19); } .dialog-actions { display: flex; gap: var(--s3); } .dialog-actions .btn { flex: 1; } /* ---- S2 · Done ----------------------------------------------------------- */ .done-screen { justify-content: center; align-items: center; text-align: center; gap: var(--s3); flex: 1; } .done-title { font-size: var(--t-23); } .done-line { font-size: var(--t-16); color: var(--ink-2); } .done-sync { font-size: var(--t-14); color: var(--ink-3); margin-top: var(--s3); } /* ---- offline indicator (08 §6 — only when `pending` is non-empty) ------- */ .sync-banner { font-size: var(--t-12); color: var(--ink-3); text-align: center; padding: var(--s2) 0; } .sync-banner[hidden] { display: none !important; } @media (min-width: 420px) { .app { padding: 0 var(--s5); } } /* Hint (08 §3.2 addendum) — the contrast pair the card already carries, surfaced BEFORE answering. Amber like an upgrade, never --fossil red: asking for help is not an error. */ .btn-hint { margin: 4px 0 0; padding: 6px 0; color: var(--upgrade); font-size: 14px; } .hint-mount:empty { display: none; } .hint-box { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--upgrade); background: color-mix(in srgb, var(--upgrade) 7%, transparent); border-radius: 0 6px 6px 0; } .hint-label { margin: 0 0 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); } .hint-body { margin: 0; font-size: 15px; line-height: 1.55; } .hint-body code { font-size: 14px; }