/* Hab Check linear walk + end screen. Spec: 2026-04-30-hab-check-redesign.md */

main.page { max-width: 720px; }
main.page > h1.serif { font: 700 2rem 'DM Serif Display', serif; color: var(--text-primary); margin: 0 0 0.5rem; }
main.page > p.subtitle { font: 400 1rem 'DM Sans', system-ui, sans-serif; color: var(--text-secondary); margin: 0 0 1rem; }

#hab-check-content { max-width: 540px; margin: 0 auto; padding: 0 1rem; }

.hc-progress { height: 4px; background: var(--border-subtle); border-radius: 2px; margin: 0.6rem 0 0.5rem; overflow: hidden; }
.hc-progress > i { display: block; height: 100%; background: #c4601d; transition: width .3s ease; }
.hc-progress-caption { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 1.1rem; }

.hc-step-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c4601d; font-weight: 500; margin-bottom: 0.5rem; }
.hc-test-q { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.4rem; line-height: 1.25; color: var(--text-primary); margin: 0 0 0.9rem; }
.hc-hint { background: #fdf2e8; border-left: 3px solid #c4601d; padding: 0.75rem 0.9rem; font-size: 0.9rem; color: var(--text-muted); margin: 0 0 1.2rem; border-radius: 0 6px 6px 0; }

.hc-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }
.hc-btn { width: 100%; padding: 0.95rem 1rem; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-elevated); color: var(--text-primary); font-size: 1rem; font-weight: 500; cursor: pointer; }
.hc-btn-primary { background: var(--text-primary); color: var(--bg-app); border-color: var(--text-primary); }
.hc-btn-skip { background: transparent; border-style: dashed; color: var(--text-muted); }
.hc-btn:active { transform: translateY(1px); }

.hc-note-area { margin-top: 0.7rem; padding: 0.8rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); }
.hc-note-area textarea { width: 100%; min-height: 72px; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 0.5rem; font-family: inherit; font-size: 0.95rem; box-sizing: border-box; background: var(--bg-input); color: var(--text-primary); }
.hc-note-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }
.hc-note-row label.photo { color: #c4601d; cursor: pointer; font-size: 0.85rem; text-decoration: underline; }
.hc-note-row label.photo input { display: none; }
.hc-note-row .hc-note-save { margin-left: auto; }

.hc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--border-subtle); font-size: 0.85rem; color: var(--text-muted); }
.hc-foot a, .hc-foot button.linklike { color: #c4601d; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-size: inherit; }

/* Resume card */
.hc-resume { background: #fdf2e8; border: 1px solid #c4601d; border-radius: 12px; padding: 1.1rem 1.2rem; }
.hc-resume h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.25rem; color: var(--text-primary); margin: 0 0 0.4rem; }
.hc-resume p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 0.9rem; }
.hc-resume .hc-actions { flex-direction: row; }

/* End screen */
.hc-end { padding: 0.4rem 0; }
.hc-end-state { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 16px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem; }
.hc-end-state.ok { background: #d4e8d4; color: #1d5e3a; }
.hc-end-state.notes { background: #fdf2e8; color: #c4601d; }
.hc-end-state.attn { background: #f7d4d4; color: #8a2a2a; }
.hc-end h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.6rem; color: var(--text-primary); margin: 0 0 0.4rem; }
.hc-end-lede { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 1.4rem; }

.hc-fail-card { background: var(--bg-elevated); border: 1px solid #f7d4d4; border-left: 4px solid #c4601d; border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 0.7rem; }
.hc-fail-card .label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a2a2a; font-weight: 600; margin-bottom: 0.25rem; }
.hc-fail-card h4 { font-size: 1rem; color: var(--text-primary); margin: 0 0 0.3rem; }
.hc-fail-card .note { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.4rem; font-style: italic; }
.hc-fail-card .trynext { font-size: 0.88rem; color: var(--text-primary); margin: 0 0 0.4rem; }
.hc-fail-card .resolve { font-size: 0.85rem; color: #c4601d; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.hc-skipped { margin-top: 1.6rem; }
.hc-skipped summary { cursor: pointer; font-size: 0.9rem; color: var(--text-muted); padding: 0.6rem 0; }
.hc-skipped summary::marker { color: #c4601d; }
.hc-skipped ul { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.hc-skipped li { padding: 0.5rem 0; border-top: 1px solid var(--border-subtle); font-size: 0.9rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.hc-skipped li button.linklike { color: #c4601d; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-size: inherit; }

.hc-end-actions { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* Setup form + funnel (still rendered by renderSetup / renderFunnel for first-time users without a Van record or imported plan). Kept compact, brand-aligned. */
.card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.card h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.3rem; color: var(--text-primary); margin: 0 0 0.4rem; }
.card .intro { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 1rem; }
.card fieldset { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.85rem 1rem 0.95rem; margin: 0 0 1rem; }
.card legend { font-family: 'DM Sans', sans-serif; font-weight: 600; color: var(--text-primary); padding: 0 0.5rem; font-size: 0.9rem; }
.card fieldset label { display: block; margin: 0.45rem 0; font-size: 0.93rem; color: var(--text-primary); }
.card fieldset input[type="number"], .card fieldset select { margin-left: 0.5rem; padding: 0.35rem 0.55rem; font: inherit; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); }
.card fieldset input[type="checkbox"] { margin-right: 0.5rem; }
.btn-primary { background: var(--text-primary); color: var(--bg-app); border: 1px solid var(--text-primary); padding: 0.85rem 1.1rem; border-radius: 10px; font-size: 1rem; font-weight: 500; cursor: pointer; width: 100%; }
.btn-primary:active { transform: translateY(1px); }

.funnel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.9rem; }
@media (max-width: 700px) { .funnel-row { grid-template-columns: 1fr; } }
.funnel-card { display: block; padding: 1rem 1.1rem; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); text-decoration: none; color: var(--text-primary); }
.funnel-card strong { display: block; font-family: 'DM Serif Display', Georgia, serif; font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--text-primary); }
.funnel-card p { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 0.6rem; }
.funnel-card label { display: block; margin: 0.45rem 0; font-size: 0.93rem; }
.radio-row { border: 0; padding: 0; margin: 0.5rem 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.radio-row legend { font-weight: 500; padding: 0; margin-right: 0.5rem; }
.radio-row label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }