:root { --ink: #111; --paper: #fff; --muted: #444; --line: #bbb; --accent: #0b5cad; --accent-ink: #fff; --ok: #1b6e3a; --warn: #8a5a00; --bad: #a32d2d; --tint: #f3f6fa; }
* { box-sizing: border-box; }
html { font-size: 20px; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5; }
.top { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.page { max-width: 640px; margin: 0 auto; padding: 16px; }
.foot { max-width: 640px; margin: 32px auto 0; padding: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 8px 0 16px; }
h2 { font-size: 1.25rem; margin: 24px 0 8px; }
.lead { font-size: 1.1rem; }
.big { font-size: 1.35rem; line-height: 1.4; }
.stack { display: grid; gap: 16px; }
label { font-weight: 600; }
input, select, textarea { font: inherit; width: 100%; min-height: 56px; padding: 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.btn { display: block; width: 100%; min-height: 56px; padding: 14px 18px; font: inherit; font-weight: 700; text-align: center; text-decoration: none; color: var(--ink); background: var(--tint); border: 2px solid var(--accent); border-radius: 12px; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.quiet { border-color: var(--line); background: var(--paper); }
.btn.danger { border-color: var(--bad); color: var(--bad); background: var(--paper); }
.choices { display: grid; gap: 12px; }
.choices .btn { text-align: left; }
.card { border: 2px solid var(--line); border-radius: 12px; padding: 16px; margin: 16px 0; background: var(--tint); }
.status-free { border-color: var(--ok); }
.status-discount, .status-assistance { border-color: var(--accent); }
.status-not_eligible, .status-unknown, .status-needs_info { border-color: var(--warn); }
.quote { border-left: 4px solid var(--accent); margin: 8px 0; padding: 4px 12px; color: var(--muted); font-style: italic; }
.muted { color: var(--muted); }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
a { color: var(--accent); }
.visually-hidden { position: absolute; left: -9999px; }
/* The hidden attribute must win over .btn and .card, which set display themselves. */
[hidden] { display: none !important; }
/* A label styled as the big button: it opens the camera for the file input before it. */
label.btn { cursor: pointer; box-sizing: border-box; }
.visually-hidden:focus + label.btn { outline: 3px solid var(--accent); outline-offset: 3px; }
/* A button that opens what is folded under it ("Fix something"); no script needed. */
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
details { margin: 16px 0; }
details[open] > summary.btn { margin-bottom: 16px; }
/* Case bar (Phase 9): under every page the full link opens. The link is shown as text that one
   tap selects whole, for when the copy button cannot reach the clipboard. */
.casebar { display: grid; gap: 12px; margin-top: 40px; padding-top: 8px; border-top: 2px solid var(--line); }
.casebar h2, .casebar p, .casebar details { margin: 0; }
.casebar details[open] > summary.btn { margin-bottom: 12px; }
.link { margin: 0; padding: 10px 12px; border: 2px dashed var(--line); border-radius: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
/* "Your cases" (Phase 9): one card per case, its button under the words. */
.cases { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.cases .card { margin: 0; display: grid; gap: 8px; }
.cases p { margin: 0; }
/* Metrics page (task 7.7) */
.coverage { width: 100%; border-collapse: collapse; font-size: 18px; margin-bottom: 24px; }
.coverage th, .coverage td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.bar { display: inline-block; height: 14px; background: var(--ok); vertical-align: middle; margin-right: 8px; }
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2f2; --paper: #121212; --muted: #c8c8c8; --line: #555; --tint: #1e2530; --accent: #7fb6ff; --accent-ink: #061a33; } }