/* Components, in the order of docs/r2/DESIGN.md §3. Class names are final. Tokens only. */

/* 3.1 Nav bar — level 1 material; the separator shows once content is under it */
.nav{position:sticky;top:0;z-index:30;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2);padding-inline:var(--gutter);background:var(--bg);border-bottom:var(--hairline) solid transparent;transition:border-color var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out)}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav, .cats, .orderbar, .ask-dock{background:var(--material);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
}
.nav.is-stuck{border-bottom-color:var(--separator)}
.nav-left, .nav-right{display:flex;align-items:center;gap:var(--s1);min-width:0}
.nav-right{justify-content:flex-end}
.nav-left > .btn > span{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-left{margin-left:calc(-1 * var(--s2))} .nav-right { margin-right:calc(-1 * var(--s2))}
.wordmark{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--target);padding-inline:var(--s2);font:var(--t-headline);font-weight:700;color:var(--label)}
.wordmark:hover{text-decoration:none}
.wordmark .icon{color:var(--accent)}
.nav-title{font:var(--t-headline);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity var(--dur-state) var(--ease-out)}
.nav.is-past .nav-title{opacity:1}
@media (max-width: 37.49rem) { .nav.is-past .wordmark span { display: none; } }
/* New messages: a count on the avatar, not a line across the page. */
.nav-right .btn-icon{position:relative}
.nav-badge{position:absolute;top:2px;right:0;min-width:1.25rem;height:1.25rem;padding:0 var(--s1);border-radius:var(--r-s);background:var(--accent-fill);color:var(--on-accent-fill);box-shadow:0 0 0 2px var(--bg);font:var(--t-caption);letter-spacing:0;line-height:1.25rem;text-align:center;font-variant-numeric:tabular-nums}
.avatar{width:2rem;height:2rem;border-radius:50%;background:var(--fill);display:grid;place-items:center;overflow:hidden;color:var(--label-2)}

/* 3.2 Conversation field */
.ask{display:flex;align-items:flex-end;gap:var(--s2);min-height:3.25rem;padding:0 var(--s2) 0 var(--s5);background:var(--bg-2);border-radius:var(--r-full)}
.ask:focus-within{background:var(--bg);outline:2px solid var(--accent);outline-offset:0}
.ask textarea{flex:1;min-width:0;max-height:7.5rem;min-height:3.25rem;padding:0.875rem 0;border:0;background:none;resize:none;outline:0;font:var(--t-body)}
.ask textarea::placeholder, .input::placeholder{color:var(--label-3);opacity:1}
.ask-send{flex:none;width:2.25rem;height:2.25rem;margin-block:var(--s2);border:0;border-radius:50%;display:grid;place-items:center;background:var(--accent-fill);color:var(--on-accent-fill);position:relative}
.ask-send::after{content:"";position:absolute;inset:-4px}
.ask-send:disabled{background:var(--fill);color:var(--label-3);cursor:default}
.ask-dock{position:sticky;bottom:0;z-index:20;padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));background:var(--bg)}

/* 3.3 Messages */
.turn + .turn{margin-top:var(--s6)}
.turn-me{margin-left:auto;width:fit-content;max-width:85%;padding:var(--s2) var(--s4);background:var(--fill);border-radius:var(--r-bubble) var(--r-bubble) var(--r-xs) var(--r-bubble);font:var(--t-callout);overflow-wrap:anywhere}
.turn-reply{margin-top:var(--s4)}
.turn-reply > * + *{margin-top:var(--s3)}
.turn-pending{width:var(--s2);height:var(--s2);border-radius:50%;background:var(--label-3);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse { 50% { opacity: 0.3; } }
@media (min-width: 37.5rem) { .turn-me { max-width: 70%; } }

/* 3.4 Result rows — one grouped list, an archetype slot per row */
.rc{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:var(--s1) var(--s3);padding-block:var(--s3);min-height:5.5rem;position:relative}
.rc + .rc{border-top:var(--hairline) solid var(--separator)}
.rc-photo{grid-row:span 3;width:4.5rem;height:4.5rem;object-fit:cover;border-radius:var(--r-m)}
.rc-main{grid-column:-2 / -1;min-width:0}
.rc-name{font:var(--t-headline);color:var(--label)}
.rc-name::after{content:"";position:absolute;inset:0}
.rc-meta, .rc-line{font:var(--t-subhead);color:var(--label-2)}
.rc-line{color:var(--label)}
.rc-far{float:right;margin-left:var(--s2);font:var(--t-footnote);color:var(--label-2)}
.rc-slot{grid-column:-2 / -1;position:relative;z-index:1}
.example{font:var(--t-footnote);font-weight:400;letter-spacing:0;color:var(--warn);margin-left:var(--s1);white-space:nowrap}

/* 3.5 Segmented control — a radio group; works in a form without script */
.seg{display:flex;padding:2px;min-height:2.25rem;background:var(--fill);border-radius:var(--r-m);position:relative}
.seg label{flex:1 1 0;min-width:0;position:relative}
.seg label::before{content:"";position:absolute;inset:-6px 0}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:block;padding:0.375rem var(--s2);border-radius:var(--r-thumb);text-align:center;font:var(--t-subhead);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color var(--dur-state) var(--ease-out)}
.seg input:checked + span{background:var(--bg-elev);box-shadow:var(--shadow-thumb)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}
.seg input:disabled + span{color:var(--label-3)}

/* 3.6 Sheet — a native dialog; every sheet is also a page at its own address */
.sheet{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;padding:0;border:0;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg-elev);color:var(--label);box-shadow:var(--shadow-sheet);overflow:hidden}
.sheet[open]{display:flex;flex-direction:column;animation:sheet-in var(--dur-sheet) var(--ease-sheet)}
.sheet::backdrop{background:var(--scrim);animation:fade-in var(--dur-state) var(--ease-out)}
.sheet[data-detent="medium"]{max-height:60dvh}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
.sheet-head{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:3.25rem;padding:var(--s3) var(--s2) 0 var(--s4);position:relative}
.sheet-head::before{content:"";position:absolute;top:var(--s2);left:50%;width:2.25rem;height:5px;margin-left:-1.125rem;border-radius:var(--r-full);background:var(--separator)}
.sheet-head h2{grid-column:2;font:var(--t-title3);letter-spacing:var(--k-title3);text-align:center}
.sheet-head .btn{grid-column:3;justify-self:end}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s2) var(--s4) var(--s6)}
.sheet-foot{flex:none;padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));border-top:var(--hairline) solid var(--separator);display:flex;gap:var(--s3);align-items:center}
.sheet-foot .btn-primary{flex:1}
/* A sheet whose form wraps the head, the body and the foot: the form is the column, so the body scrolls and the button stays in reach. */
.sheet > form{flex:1;min-height:0;display:flex;flex-direction:column}
.sheet-page{max-width:35rem;margin-inline:auto;padding-bottom:var(--s9)}
.sheet-page .sheet-head::before, .sheet-page .sheet-head [data-close]{display:none}
.sheet-page .sheet-head{padding-inline:var(--gutter)}
.sheet-page .sheet-body{overflow:visible;padding-inline:var(--gutter)}
.sheet-page .sheet-foot{position:sticky;bottom:0;background:var(--bg);padding-inline:var(--gutter)}
@media (min-width: 37.5rem) {
  .sheet{width:32.5rem;margin:auto;border-radius:var(--r-l);max-height:min(92dvh, 46rem)}
  .sheet--wide{width:35rem}
  .sheet[open]{animation-name:fade-in;animation-duration:var(--dur-state)}
  .sheet-head::before{display:none}
}

/* 3.7 Buttons — one rule each; no outlines, no pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--target);padding:0 var(--s4);border:0;border-radius:var(--r-m);background:none;font:var(--t-headline);letter-spacing:var(--k-headline);color:var(--label);text-align:center;cursor:pointer;transition:opacity var(--dur-press), filter var(--dur-press), background-color var(--dur-press);-webkit-tap-highlight-color:transparent}
.btn:hover{text-decoration:none}
.btn-primary{min-height:var(--control-h);min-width:7.5rem;background:var(--accent-fill);color:var(--on-accent-fill)}
.btn-tonal{background:var(--accent-tint);color:var(--accent)}
.btn-quiet{background:var(--fill)}
.btn-plain{padding-inline:var(--s2);color:var(--accent);font-weight:400}
.btn-destructive{padding-inline:var(--s2);color:var(--bad);font-weight:400}
.btn.is-danger{color:var(--bad)}
.btn-icon{flex:none;width:var(--target);padding:0;border-radius:50%;color:var(--label)}
.btn-icon.is-filled{background:var(--fill)}
/* A confirmation: a small sheet with the question and two answers (app.js, Dolphin.confirm). */
.sheet--ask{max-width:100%}
.sheet--ask .sheet-body{padding-top:var(--s6)}
.sheet--ask .sheet-foot{border-top:0;flex-direction:column-reverse;align-items:stretch;gap:var(--s2)}
.sheet--ask .sheet-foot .btn{width:100%;min-height:var(--control-h)}
@media (min-width: 37.5rem) { .sheet--ask{width:24rem} .sheet--ask .sheet-foot{flex-direction:row;justify-content:flex-end} .sheet--ask .sheet-foot .btn{width:auto;min-width:7.5rem;flex:none} }
.btn-block{display:flex;width:100%}
.btn-split{justify-content:space-between}
.btn-primary:active, .btn-tonal:active, .btn-quiet:active, .btn-icon.is-filled:active{filter:brightness(0.92)}
.btn-plain:active, .btn-destructive:active, .btn-icon:active{opacity:0.6}
.btn:disabled, .btn[aria-disabled="true"]{background:var(--fill);color:var(--label-3);cursor:default;pointer-events:none}
.btn-plain:disabled, .btn-destructive:disabled{background:none}
.btn[aria-busy="true"]{pointer-events:none;opacity:0.6}
.btn-row{display:flex;gap:var(--s2);max-width:26rem}
.btn-row > .btn{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;min-height:3.5rem;padding:var(--s2) var(--s1);font:var(--t-footnote);font-weight:600;color:var(--accent)}
.btn-row > .btn > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-line{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn-line > .btn{font:var(--t-subhead);font-weight:600;letter-spacing:var(--k-subhead);padding-inline:var(--s3) var(--s4);color:var(--accent)}

/* 3.8 Lists, rows, facts */
.list{border-radius:var(--r-m)}
.list--group{background:var(--bg-2);padding-inline:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3);min-height:3.5rem;padding-block:var(--s3);color:var(--label);position:relative}
.row + .row, .list > * + *{border-top:var(--hairline) solid var(--separator)}
a.row:hover{text-decoration:none}
.row-main{flex:1;min-width:0}
.row-title{font:var(--t-headline);letter-spacing:var(--k-headline);display:block}
.row-sub{font:var(--t-subhead);color:var(--label-2);display:block}
.row-value{flex:none;max-width:55%;font:var(--t-subhead);font-variant-numeric:tabular-nums;text-align:right;color:var(--label)}
.row-thumb{flex:none;width:2.75rem;height:2.75rem;object-fit:cover;border-radius:var(--r-xs)}
.row .icon{color:var(--label-2)}
.row-chev{color:var(--label-3)}
details > .row .row-chev{transition:transform var(--dur-state) var(--ease-out)}
details[open] > .row .row-chev{transform:rotate(180deg)}
.row-more{padding:0 0 var(--s4);font:var(--t-subhead);color:var(--label-2);max-width:var(--reading-max)}
.row-more > * + *{margin-top:var(--s2)}
.facts{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--s3) 0}
.facts::-webkit-scrollbar, .cats-row::-webkit-scrollbar, .chips::-webkit-scrollbar, .strip::-webkit-scrollbar{display:none}
.fact{min-width:0;padding-inline:var(--s3);border-left:var(--hairline) solid var(--separator);overflow-wrap:anywhere}
.fact:nth-child(odd){padding-left:0;border-left:0}
.fact:only-child{grid-column:1 / -1}
@media (min-width: 37.5rem) {
  .facts{display:flex;gap:0}
  .fact{flex:1 1 0;max-width:15rem}
  .fact:nth-child(odd){padding-left:var(--s3);border-left:var(--hairline) solid var(--separator)}
  .fact:first-child{padding-left:0;border-left:0}
}
.fact-label{display:block;font:var(--t-footnote);color:var(--label-2)}
.fact-value{display:block;font:var(--t-headline);letter-spacing:var(--k-headline)}
.kv{display:grid;grid-template-columns:minmax(5.5rem, 30%) minmax(0, 1fr);gap:0 var(--s4)}
.kv > dt{padding-block:var(--s3);font:var(--t-subhead);color:var(--label-2)}
.kv > dd{padding-block:var(--s3);font:var(--t-callout)}
.kv > dt:not(:first-of-type), .kv > dt:not(:first-of-type) + dd{border-top:var(--hairline) solid var(--separator)}

/* 3.9 Chips — suggestion and filter; nothing else is a chip */
.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:var(--s1) var(--gutter)}
.chip{flex:none;display:inline-flex;align-items:center;gap:var(--s1);min-height:2.25rem;padding:0 var(--s3);border:var(--hairline) solid var(--separator);border-radius:var(--r-s);background:var(--bg);color:var(--label);font:var(--t-subhead);position:relative;cursor:pointer}
.chip::after{content:"";position:absolute;inset:-4px 0}
.chip:hover{text-decoration:none}
.chip-filter{border-color:transparent;background:var(--fill)}
.chip-filter[aria-pressed="true"], .chip-filter[aria-current="true"], .chip-filter:has(input:checked){background:var(--accent-tint);color:var(--accent)}
.chip-filter .icon{display:none}
.chip-filter[aria-pressed="true"] .icon, .chip-filter[aria-current="true"] .icon, .chip-filter:has(input:checked) .icon{display:block}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* 3.10 Photos — hero, strip, grid, gallery */
.photo{display:block;position:relative;overflow:hidden;background:var(--fill)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:var(--fx, 50%) var(--fy, 50%)}
.photo--hero{aspect-ratio:4 / 3}
.photo--wide{aspect-ratio:3 / 2}
.photo--tile{aspect-ratio:16 / 10;border-radius:var(--r-m)}
.photo--square{aspect-ratio:1}
.photo-count{position:absolute;right:var(--s3);bottom:var(--s3);padding:var(--s1) var(--s2);border-radius:var(--r-s);background:var(--photo-capsule);color:var(--on-photo);font:var(--t-footnote);font-variant-numeric:tabular-nums}
.strip{display:flex;gap:var(--s1);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip > *{flex:0 0 100%;scroll-snap-align:start}
.photos{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--s1);border-radius:var(--r-m);overflow:hidden}
.photos .photo{aspect-ratio:1}
.photos--wide .photo{aspect-ratio:3 / 2}
.gallery{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:var(--gallery-bg);color:var(--on-photo)}
.gallery[open]{display:flex;flex-direction:column}
.gallery-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s1) var(--s2) var(--s1) var(--s4);font:var(--t-subhead)}
.gallery-head .btn{color:var(--on-photo)}
.gallery-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery-track figure{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center;min-height:0}
.gallery-track img{max-height:calc(100dvh - 9rem);width:100%;object-fit:contain;background:none}
.gallery-track figcaption{padding:var(--s3) var(--s4);font:var(--t-footnote);text-align:center}
.gallery-track figcaption a{color:inherit;text-decoration:underline}
.fx-0{--fx:0%} .fx-10 { --fx:10%} .fx-20 { --fx:20%} .fx-30 { --fx:30%} .fx-40 { --fx:40%} .fx-60 { --fx:60%} .fx-70 { --fx:70%} .fx-80 { --fx:80%} .fx-90 { --fx:90%} .fx-100 { --fx:100%}
.fy-0{--fy:0%} .fy-10 { --fy:10%} .fy-20 { --fy:20%} .fy-30 { --fy:30%} .fy-40 { --fy:40%} .fy-60 { --fy:60%} .fy-70 { --fy:70%} .fy-80 { --fy:80%} .fy-90 { --fy:90%} .fy-100 { --fy:100%}
@media (min-width: 64rem) { .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 3.11 Sticky order bar */
.orderbar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:var(--s3);margin-top:var(--s7);padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));background:var(--bg);border-top:var(--hairline) solid var(--separator)}
.orderbar .btn-primary{flex:1}
.orderbar-note{flex:1;min-width:0;font:var(--t-subhead);color:var(--label-2)}
.orderbar-note strong{display:block;font:var(--t-headline);color:var(--label)}

/* 3.12 Category bar */
.cats{position:sticky;top:var(--nav-h);z-index:10;margin-inline:calc(-1 * var(--gutter));background:var(--bg);border-bottom:var(--hairline) solid var(--separator)}
.cats-row{display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
@media (min-width: 64rem) { .cats{margin-inline:0} .cats-row{padding-inline:0;scroll-padding-inline:0} }
.cats a{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:var(--target);min-height:var(--target);font:var(--t-subhead);font-weight:600;color:var(--label-2);box-shadow:inset 0 -2px 0 transparent}
.cats a:hover{text-decoration:none;color:var(--label)}
.cats a[aria-current="true"]{color:var(--label);box-shadow:inset 0 -2px 0 var(--label)}

/* 3.13 Form controls */
.field{display:block}
.field + .field{margin-top:var(--s4)}
.field > label:not(.choice), .field > .label, .legend{display:block;margin-bottom:var(--s2);font:var(--t-subhead);font-weight:600}
.input, .field input:not([type=checkbox], [type=radio], [type=file]), .field select, .field textarea{display:block;width:100%;min-height:3.125rem;padding:var(--s3);border:1px solid var(--outline);border-radius:var(--r-m);background:var(--bg);font:var(--t-body);appearance:none}
.field textarea{min-height:5.5rem;resize:vertical}
.field select{background-image:linear-gradient(45deg, transparent 50%, var(--label-2) 50%), linear-gradient(135deg, var(--label-2) 50%, transparent 50%);background-position:calc(100% - 1.2rem) 50%, calc(100% - 0.875rem) 50%;background-size:0.35rem 0.35rem;background-repeat:no-repeat;padding-right:var(--s8)}
.input:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.field-help{margin-top:var(--s2);font:var(--t-footnote);color:var(--label-2)}
.field-error, .errorlist{margin-top:var(--s2);font:var(--t-footnote);color:var(--bad);display:flex;gap:var(--s1);align-items:center}
.field.has-error input, .field.has-error select, .field.has-error textarea, [aria-invalid="true"]{border-color:var(--bad)}
.form-errors{padding-bottom:var(--s4);color:var(--bad);font:var(--t-subhead)}
.form-errors a{color:inherit;text-decoration:underline}
.hp{position:absolute;left:-200vw}
.choice{display:flex;align-items:center;gap:var(--s3);min-height:3rem;padding-block:var(--s2);cursor:pointer}
.choice + .choice{border-top:var(--hairline) solid var(--separator)}
.choice input{flex:none;width:1.375rem;height:1.375rem;margin:0;accent-color:var(--accent)}
.choice-main{flex:1;min-width:0}
.choice-value{font:var(--t-subhead);color:var(--label-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.choice:has(input:disabled){color:var(--label-3);cursor:default}
.stepper{display:inline-flex;align-items:center;background:var(--fill);border-radius:var(--r-m)}
.stepper{flex:none}
.stepper button{flex:none;width:var(--target);height:var(--target);border:0;background:none;border-radius:var(--r-m);display:grid;place-items:center}
.stepper button:active{background:var(--fill-press)}
.stepper input, .field .stepper input, .stepper output{display:block;border:0;width:2.75rem;height:var(--target);line-height:var(--target);min-height:0;padding:0;border:0;background:none;text-align:center;font:var(--t-headline);line-height:var(--target);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button{appearance:none}
.switch{appearance:none;flex:none;width:3.1875rem;height:1.9375rem;margin:0;border-radius:var(--r-full);background:var(--fill-press);position:relative;cursor:pointer;transition:background-color var(--dur-state) var(--ease-out)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:1.6875rem;height:1.6875rem;border-radius:50%;background:var(--bg-elev);box-shadow:var(--shadow-thumb);transition:transform var(--dur-state) var(--ease-out)}
.switch:checked{background:var(--accent-fill)}
.switch:checked::after{transform:translateX(1.25rem)}
.days{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--s4));padding:2px var(--s4)}
.day{flex:none;position:relative}
.day input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.day span{display:grid;place-items:center;min-width:3.5rem;min-height:3.5rem;padding:var(--s1) var(--s2);border-radius:var(--r-m);background:var(--fill);font:var(--t-footnote);color:var(--label-2);text-align:center}
.day b{display:block;font:var(--t-headline);color:var(--label)}
.day input:checked + span{background:var(--accent-tint);color:var(--accent)}
.day input:checked + span b{color:var(--accent)}
.day input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}

/* 3.14 Status line — a dot and words, never a filled badge */
.status{display:inline-flex;align-items:baseline;gap:var(--s2);color:var(--label-2)}
.status::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translateY(-2px)}
.status.is-good{color:var(--good)} .status.is-warn { color:var(--warn)} .status.is-bad { color:var(--bad)}

.steps{display:flex;align-items:center;gap:var(--s2);font:var(--t-footnote);color:var(--label-3)}
.steps li{display:inline-flex;align-items:center;gap:var(--s2)}
.steps li + li::before{content:"";width:var(--s4);height:var(--hairline);background:var(--separator)}
.steps .is-done{color:var(--label-2)}
.steps .is-now{color:var(--label);font-weight:600}

/* 3.15 Checks line */
.checks{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--target);margin-block:calc(-1 * var(--s2));padding:0;border:0;background:none;font:var(--t-footnote);color:var(--label-2);text-align:left}
.checks .icon{color:var(--label-2)}
.message{padding:var(--s3) var(--gutter);font:var(--t-subhead);color:var(--label-2);border-bottom:var(--hairline) solid var(--separator)}
.field input[type=file]{display:block;width:100%;max-width:100%;min-height:var(--target);font:var(--t-subhead);color:var(--label-2)}
.field input[type=file]::file-selector-button{min-height:var(--target);margin-right:var(--s3);padding:0 var(--s4);border:0;border-radius:var(--r-m);background:var(--fill);color:var(--label);font:var(--t-subhead);font-weight:600;cursor:pointer}