/* Amana design system, components (ux/design-system.md section 3). Colours, spacing, radii, type and motion come from tokens.css (generated from
   web/design/tokens.json). Logical properties only (UX-070); no external requests; no inline styles are needed by any component. */
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--surface-2);color:var(--ink);font:400 var(--t-body)/1.7 var(--font-sans)}
html[lang=en] body{line-height:1.6}
.mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
h1:focus{outline:none}
a{color:var(--brand);text-decoration:underline}
.skip{position:absolute;inset-inline-start:var(--s-4);inset-block-start:-100px;background:var(--brand);color:var(--on-brand);padding:var(--s-3) var(--s-4);border-radius:var(--r-1)}
.skip:focus{inset-block-start:var(--s-2)}
.page{max-inline-size:720px;margin-inline:auto;padding:var(--s-4) var(--s-4) var(--s-7)}
@media (min-width:600px){.page{padding-inline:var(--s-5)}}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-2) var(--s-4)}
.brand{font-weight:700;font-size:var(--t-h2)}
h1{font-size:var(--t-h1);line-height:1.4;margin:0 0 var(--s-4)}
h2{font-size:var(--t-h2);line-height:1.4;margin:var(--s-6) 0 var(--s-3)}
h1.q{font-size:var(--t-display);line-height:1.35}
.lede,.trust{color:var(--ink-2);max-inline-size:60ch}
.small{font-size:var(--t-small);color:var(--ink-2)}
svg.i{inline-size:1.25em;block-size:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .mirror{transform:scaleX(-1)}

/* Status banner: the one filled surface of a screen. Rows are ordered information, so they are separated by hairlines. */
.banner{background:var(--info-bg);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s-4) var(--s-5);display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);margin-block-end:var(--s-5)}
.banner.action{background:var(--warn-bg)}
.banner.success{background:var(--ok-bg)}
.banner.blocked{background:var(--danger-bg)}
.banner .art{inline-size:64px;block-size:64px}
.banner>div:only-child{grid-column:1/-1}
.banner .row{padding-block:var(--s-3);border-block-end:1px solid var(--rule)}
.banner .row:first-child{padding-block-start:0}
.banner .row:last-child{border-block-end:0;padding-block-end:0}
.lab{display:block;font-size:var(--t-small);color:var(--ink-2)}
.val{display:block;font-weight:600}
.banner .btn{margin-block-start:var(--s-3)}
@media (max-width:420px){.banner{grid-template-columns:1fr;padding-inline:var(--s-4)}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-block-size:56px;min-inline-size:160px;padding-inline:var(--s-5);border-radius:var(--r-2);
  border:2px solid var(--brand);background:var(--brand);color:var(--on-brand);font:600 var(--t-body) var(--font-sans);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.sec{background:transparent;color:var(--brand)}
.btn.sec:hover{background:var(--info-bg)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
.btn[aria-busy=true]{cursor:progress}
.btn[aria-disabled=true]{background:var(--surface-2);border-color:var(--border);color:var(--ink-2);cursor:not-allowed}
.btn.full{inline-size:100%}
@media (min-width:600px){.btn.full{inline-size:auto}}
.link{display:inline-flex;align-items:center;min-block-size:48px;color:var(--brand);text-decoration:underline;font:500 var(--t-small) var(--font-sans);background:none;border:0;padding:0;cursor:pointer}
.spin{inline-size:1.1em;block-size:1.1em;border:3px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Chips: icon + word, never colour alone (UX-061) */
.chip{display:inline-flex;align-items:center;gap:var(--s-2);font:500 var(--t-micro)/1 var(--font-sans);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);color:var(--ink)}
.chip.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.chip.info{background:var(--info-bg);border-color:var(--brand);color:var(--ink)}
.chip.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.chip.danger{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}

/* Rows instead of a grid of identical cards */
.list{border-block-start:1px solid var(--rule);margin-block-end:var(--s-5)}
.item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4);padding-block:var(--s-4);border-block-end:1px solid var(--rule)}
.item small{display:block;font-size:var(--t-small);color:var(--ink-2)}

/* Wizard step */
.progress{font-size:var(--t-small);color:var(--ink-2);margin-block-end:var(--s-2)}
fieldset{border:0;padding:0;margin:0;min-inline-size:0}
.choices{display:grid;gap:var(--s-3);margin-block:var(--s-5)}
.choice{display:flex;gap:var(--s-4);align-items:center;min-block-size:72px;padding:var(--s-3) var(--s-4);background:var(--surface);border:2px solid var(--border);border-radius:var(--r-2);cursor:pointer}
.choice:has(input:checked){border-color:var(--brand);background:var(--info-bg)}
.choice:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}
.choice input{inline-size:24px;block-size:24px;accent-color:var(--brand);flex:none}
.choice b{display:block}
.choice .d{display:block;font-size:var(--t-small);color:var(--ink-2)}
.nav{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-5)}
.foot{margin-block-start:var(--s-3)}

/* Explain bubble: a disclosure, inline, no hover-only content */
details.explain{margin-block:var(--s-3)}
details.explain summary{display:inline-flex;align-items:center;gap:var(--s-2);min-block-size:48px;color:var(--brand);text-decoration:underline;font:500 var(--t-small) var(--font-sans);cursor:pointer;list-style:none}
details.explain summary::-webkit-details-marker{display:none}
details.explain .box{margin-block-start:var(--s-2);padding:var(--s-4);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-1);max-inline-size:60ch}

/* Fields and errors */
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin-block:var(--s-4)}
.field label{font-weight:600}
.field input{inline-size:100%;min-block-size:56px;padding-inline:var(--s-4);font:400 var(--t-body) var(--font-sans);color:var(--ink);background:var(--surface);border:2px solid var(--border);border-radius:var(--r-1)}
.field input[aria-invalid=true]{border-color:var(--danger)}
.field .err{display:flex;gap:var(--s-2);align-items:flex-start;color:var(--danger);font-weight:600}
.state{display:grid;justify-items:start;gap:var(--s-3);padding:var(--s-5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-2);margin-block:var(--s-4)}
.state h2,.state h3{font-size:var(--t-h2);margin:0}
.state p{margin:0;max-inline-size:60ch}
.state .art{inline-size:96px;block-size:96px}
.ref{font-size:var(--t-micro);color:var(--ink-2)}

/* Gallery chrome */
.toolbar{display:flex;gap:var(--s-2);flex-wrap:wrap}
.tool{display:inline-flex;align-items:center;min-block-size:48px;min-inline-size:48px;padding-inline:var(--s-4);border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface);color:var(--ink);font:500 var(--t-small) var(--font-sans);text-decoration:none}
.tool[aria-current=page]{background:var(--info-bg);border-color:var(--brand);color:var(--brand)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3);padding:0;list-style:none}
.swatches li{border:1px solid var(--border);border-radius:var(--r-1);overflow:hidden;background:var(--surface)}
.swatches .c{display:block;block-size:40px;border-block-end:1px solid var(--border)}
.swatches .n{display:block;padding:var(--s-2) var(--s-3);font-size:var(--t-micro);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
@media print{body{background:none;color:#000}.banner,.chip,.state{background:none!important}.skip,.toolbar{display:none}}
/* Own illustrations: colours come from tokens so they follow the theme */
.art .a1{fill:var(--brand)}
.art .a2{fill:var(--brand-hover)}
.art .a3{fill:var(--info-bg)}
.art .l{fill:none;stroke:var(--ink-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6 6}
.art .s{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;inline-size:0;block-size:0;overflow:hidden}
[hidden]{display:none!important}
.state[data-kind=ok]{border-color:var(--ok)}
.state[data-kind=problem]{border-color:var(--danger)}