/* WHAT: Semantic defaults, inputs and reusable controls. WHY: Every route needs usable keyboard focus and legible states. HOW: Establishes shared typography, component spacing and explicit hidden behaviour. */
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 15px/1.6 var(--font); color: var(--ink); background: var(--bg); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
input, select, textarea { width: 100%; padding: 11px 13px; background: #10191c; border: 1px solid #43565b; border-radius: var(--small-radius); color: var(--ink); min-height: 44px; }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--mint); }
input[type="range"] { padding: 0; accent-color: var(--mint); }
textarea { min-height: 108px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 650; color: #d2dddd; }
label input, label select, label textarea { margin-top: 7px; }
label.check { display: flex; gap: 10px; align-items: center; }
label.check input { margin-top: 0; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.035em; }
h1 { font-size: clamp(34px, 4.4vw, 66px); margin-bottom: 20px; font-weight: 700; }
h2 { font-size: clamp(23px, 2.1vw, 32px); margin-bottom: 16px; }
h3 { font-size: 20px; margin-bottom: 12px; }
p { color: var(--muted); margin-bottom: 16px; }
small, .small-text { font-size: 12px; }
strong { font-weight: 650; }
code { font-family: var(--mono); overflow-wrap: anywhere; color: var(--mint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
/* WHAT: Shared actions and compact metadata. WHY: Primary, secondary and unavailable actions need distinguishable visual weight. HOW: Uses consistent minimum target sizes and real disabled attributes. */
.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid transparent; padding: 11px 18px; border-radius: 9px; min-height: 44px; font-weight: 650; font-size: 13px; color: #092d2a; background: var(--mint); transition: transform .15s, background .15s; }
.button:hover:not(:disabled) { transform: translateY(-1px); background: #88eddd; }
.button.quiet { color: var(--ink); border-color: #405155; background: #ffffff04; }
.button.quiet:hover:not(:disabled) { background: var(--surface-up); }
.button.coral { background: var(--coral); color: #38211c; }
.button.small { min-height: 38px; padding: 7px 12px; font-size: 12px; }
.button.danger { background: #3a2023; color: #ffd2cc; border-color: #945958; }
.text-button { background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muted { color: var(--muted); }.mint { color: var(--mint); }.coral-text { color: var(--coral); }
.eyebrow { color: var(--mint); font: 11px/1.5 var(--mono); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 16px; }
.tag, .status-tag { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; color: var(--muted); font: 10px/1.5 var(--mono); letter-spacing: .02em; }
.tag.ready { border-color: #3d756b; color: #8ce8d9; background: #5de4d108; }.tag.planned { border-color: #71623d; color: var(--yellow); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 100%; background: var(--mint); }
/* WHAT: Reusable panels and feedback. WHY: Loading, empty and error states must be visible rather than decorative placeholders. HOW: Distinct bordered treatments reserve real content space and announce actions through a live region. */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 25px; }
.panel-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.panel-heading h2, .panel-heading h3, .section-heading h2 { margin-bottom: 0; }
.notice { padding: 14px 18px; border: 1px solid #5a6546; background: #272d22; border-radius: 10px; color: #e4ddba; font-size: 13px; margin-bottom: 20px; }
.notice.info { border-color: #355d58; background: #19312e; color: #b7e7dd; }
.error { color: var(--danger); font-size: 13px; min-height: 20px; margin: 10px 0 0; }
.empty-state, .loading-state { padding: 32px 24px; text-align: center; color: var(--muted); }
.empty-state h3 { color: var(--ink); }.empty-state p { max-width: 520px; margin-inline: auto; }
.form-grid { display: grid; gap: 18px; }.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-inline { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }.form-inline label { flex: 1; min-width: 170px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: min(430px, calc(100vw - 32px)); padding: 16px 22px; border: 1px solid #547b73; border-radius: 12px; background: #233b35; color: #e5fff5; box-shadow: var(--shadow); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--mint); color: #122521; padding: 12px; border-radius: 8px; }.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width: 700px) { .two-column { grid-template-columns: 1fr; }.panel { padding: 20px; }.section-heading { align-items: flex-start; } }
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }