/* page-labs.css: Labs v2 (#labs), spec/page-labs.md v2 and screens/labs.SCREEN.md. Page rules only, scoped under
   .lf (the page) and #drawer.lf-pane (the lab pane, the filter sheet), because every stylesheet loads on every route.
   Tokens and shared components (tabs, buttons, inputs, menu, badges, props, the detail frame, empty block, toast)
   live in dibs.css. */

/* skeleton: title, one scope line, tabs, then the list column. The pane sits beside it at 1280 and wider
   (dibs.css body.pane-open .shell margin), as Discover's detail does. */
.lf { padding-bottom: var(--s-4); }
.lf .lf-head { min-height: 32px; margin-bottom: 0; }
.lf .lf-qual { margin: var(--s-1) 0 0; max-width: 720px; font: var(--t-meta); color: var(--muted); }
.lf .lf-tabs { max-width: 880px; margin-top: var(--s-4); }
.lf .lf-tab-n { margin-left: 6px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.lf .lf-col { max-width: 880px; }
.lf--free .lf-col { max-width: 720px; margin-top: var(--s-6); }
.lf h2, .lf h3 { margin: 0; }

/* ---------- free surface (signed out, no pass) ---------- */
.lf .lf-offer { padding: var(--s-4) var(--s-6) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.lf .lf-offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.lf .lf-offer-t h2 { font: var(--t-h2); color: var(--ink); }
.lf .lf-offer-t p { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.lf .lf-offer-act { flex: none; display: flex; gap: var(--s-2); padding-top: 2px; }
.lf .lf-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; list-style: none; border-top: 1px solid var(--line); }
.lf .lf-checks li { display: flex; align-items: flex-start; gap: var(--s-2); font: var(--t-meta); color: var(--ink); }
.lf .lf-checks .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.lf .lf-offer-note { max-width: 600px; margin: var(--s-4) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.lf .lf-sec { margin-top: var(--s-8); }
.lf .lf-sec > h2 { font: var(--t-h2); color: var(--ink); }
.lf .lf-ways { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-2); margin: var(--s-3) 0 0; }
.lf .lf-ways dt { font: var(--t-meta); font-weight: 600; color: var(--ink); }
.lf .lf-ways dd { margin: 0; font: var(--t-meta); color: var(--ink-2); }

/* ---------- pass and allowance (P271, P217: label left, value right, where it is spent) ---------- */
.lf .lf-pass { margin-top: var(--s-6); padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.lf .lf-pass-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.lf .lf-pass-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0; min-width: 0; }
.lf .lf-pass-name { font: var(--t-control); font-weight: 600; color: var(--ink); }
.lf .lf-pass-sub { font: var(--t-meta); color: var(--muted); }
.lf .lf-pass-head .text-btn { flex: none; }
.lf .lf-use { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-8); margin: var(--s-2) var(--s-2) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--line); }
.lf .lf-use > div { display: flex; align-items: center; gap: var(--s-3); font: var(--t-meta); }
.lf .lf-use dt { color: var(--muted); }
.lf .lf-use dd { display: flex; align-items: center; gap: var(--s-2); margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.lf .lf-meter { display: inline-block; width: 64px; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--line-strong); }
.lf .lf-meter > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.lf .lf-use-note { margin: var(--s-2) var(--s-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* ---------- the brief (form; then a one-box summary with Edit brief) ---------- */
.lf .lf-form { margin-top: var(--s-6); max-width: 720px; }
/* W12: with no brief the form is all the list column holds, under one line that says the labs come next */
.lf .lf-brief-first { margin: var(--s-6) 0 0; max-width: 720px; font: var(--t-body); color: var(--ink-2); }
.lf .lf-brief-first + .lf-form { margin-top: var(--s-4); }
.lf .lf-form-h { margin-bottom: var(--s-4); font: var(--t-h2); color: var(--ink); }
.lf .lf-form-h:focus { outline: none; }
.lf .lf-f + .lf-f, .lf .lf-f-row { margin-top: var(--s-4); }
.lf .lf-f .field-help { margin: 2px 0 6px; }
.lf .lf-f input:not([type=checkbox]):not([type=radio]), .lf .lf-f textarea { width: 100%; }
.lf .lf-f input.lf-hours { width: 120px; }
.lf .lf-f-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4) var(--s-8); }
.lf .lf-f-row > .lf-f { margin-top: 0; }
.lf .lf-open { margin: 0; padding: 0; border: 0; min-width: 0; }
.lf .lf-open legend { padding: 0; margin-bottom: var(--s-2); font: var(--t-control); font-weight: 600; color: var(--ink); }
.lf .lf-open .lf-chk { display: inline-flex; margin-right: var(--s-4); }
/* research experience (LabBrief experience_level): a one-choice row under the experience field */
.lf .lf-level { margin-top: var(--s-4); }
.lf .lf-level .field-error { margin-top: var(--s-2); }
.lf .lf-chk, #drawer.lf-pane .lf-chk { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; font: var(--t-body); font-weight: 400; color: var(--ink); cursor: pointer; }
.lf .lf-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-6); }
.lf .lf-fine { max-width: 600px; margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.lf .lf-sum { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.lf .lf-sum-t { min-width: 0; }
.lf .lf-sum-int { margin: 0; font: var(--t-body); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.lf .lf-sum-meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); }
.lf .lf-sum-exp { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.lf .lf-sum .text-btn { flex: none; margin-top: -4px; }
.lf .lf-alert { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--warning-subtle); border: 1px solid var(--line); border-radius: var(--r-panel); }
.lf .lf-alert > .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warning); }
.lf .lf-alert p { margin: 0; font: var(--t-meta); color: var(--ink); }
.lf .lf-marks { margin-top: var(--s-6); }

/* ---------- toolbar (P315: chips left, one sort pill right; applied chip fills) ---------- */
.lf .lf-results { margin-top: var(--s-6); }
.lf .lf-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.lf .lf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.lf .lf-chipwrap { position: relative; display: inline-flex; max-width: 100%; }
.lf .lf-chip { gap: 6px; min-height: 32px; max-width: 100%; padding: 5px 10px 5px 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: var(--t-control); white-space: nowrap; }
.lf .lf-chip-t { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.lf .lf-chip .icon { flex: none; width: 14px; height: 14px; color: var(--muted); }
.lf .lf-chip:hover { background: var(--surface-2); }
.lf .lf-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.lf .lf-chip.is-on .icon { color: var(--surface); }
.lf .lf-chip.is-on:hover { background: var(--ink-2); border-color: var(--ink-2); }
.lf .lf-chip[aria-expanded="true"]:not(.is-on) { background: var(--surface-2); border-color: var(--ink-2); }
.lf .lf-clear { margin: 0; }
.lf .lf-filters-btn { display: none; }
.lf .lf-sortwrap { flex: none; }
.lf .lf-sortwrap .lf-chip-t { max-width: 220px; }
.lf .lf-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: max-content; min-width: 200px; max-width: min(320px, calc(100vw - 32px)); }
.lf .lf-sortwrap .lf-menu, .lf .lf-menu.is-right { left: auto; right: 0; }
.lf .lf-menu .menu-item { min-height: 32px; font: var(--t-meta); color: var(--ink); white-space: normal; }
.lf .lf-menu .menu-item[aria-checked="true"] { font-weight: 600; }
.lf .lf-menu .menu-item:disabled { color: var(--muted); background: transparent; }
.lf .lf-mi-check { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--accent); }
.lf .lf-mi-check .icon { width: 16px; height: 16px; color: var(--accent); }
.lf .lf-mi-h, #drawer.lf-pane .lf-mi-h { margin: 0; padding: var(--s-2) var(--s-2) var(--s-1); font: var(--t-label); color: var(--muted); }
.lf .lf-menu--dept { width: 300px; }
.lf .lf-mi-filter { padding: 0 0 var(--s-1); margin-bottom: var(--s-1); border-bottom: 1px solid var(--line); }
.lf .lf-mi-filter input { display: block; width: 100%; border-color: transparent; background: transparent; }
.lf .lf-mi-filter input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-color: transparent; }
.lf .lf-mi-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.lf .lf-mi-t { min-width: 0; }
.lf .lf-mi-none { margin: 0; padding: var(--s-2); font: var(--t-meta); color: var(--muted); }
.lf .lf-count { margin: var(--s-3) 0 0; max-width: 760px; font: var(--t-meta); color: var(--muted); }
.lf .lf-count:focus { outline: none; }
.lf .lf-count:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- list rows (sys 9.5 rule-split container; ST428 selected row; whole row opens the pane) ---------- */
.lf .lf-list { margin: var(--s-3) 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.lf .lf-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--s-4); min-height: 64px; padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4); }
.lf .lf-row + .lf-row { border-top: 1px solid var(--line); }
.lf .lf-row:hover { background: var(--bg); }
.lf .lf-row.is-selected { background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent); }
.lf .lf-row:has(.lf-row-main:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus); }
.lf .lf-row-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; text-align: left; font: inherit; }
.lf .lf-row-main:hover { background: none; }
.lf .lf-row-main:focus-visible { outline: none; }
.lf .lf-row-main::after { content: ''; position: absolute; inset: 0; }
.lf .lf-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); max-width: 100%; min-width: 0; }
.lf .lf-name { font: var(--t-item); color: var(--ink); overflow-wrap: anywhere; }
.lf .lf-kind { font: var(--t-meta); color: var(--muted); }
.lf .lf-l2 { display: flex; align-items: center; gap: var(--s-2); max-width: 100%; min-width: 0; }
.lf .lf-sig { flex: none; }
.lf .lf-fitline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-meta); color: var(--ink-2); }
.lf .lf-clash { display: inline-flex; flex: none; align-items: center; gap: 4px; font: var(--t-label); color: var(--warning); white-space: nowrap; }
.lf .lf-clash .icon { width: 14px; height: 14px; color: var(--warning); }
.lf .lf-row-r { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 128px; pointer-events: none; }
.lf .lf-route { display: inline-flex; align-items: center; gap: 6px; font: var(--t-meta); color: var(--ink); white-space: nowrap; }
.lf .lf-route .icon { width: 16px; height: 16px; color: var(--muted); }
.lf .lf-fund { font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lf .lf-row-s { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); min-width: 32px; }
.lf .lf-st { font: var(--t-label); font-weight: 400; color: var(--muted); white-space: nowrap; pointer-events: none; }
.lf .lf-star .lf-star-ico, #drawer.lf-pane .lf-star .lf-star-ico { width: 16px; height: 16px; }
.lf .lf-star.is-saved, .lf .lf-star.is-saved:hover, #drawer.lf-pane .lf-star.is-saved, #drawer.lf-pane .lf-star.is-saved:hover { color: var(--accent); }
.lf .lf-star.is-saved .lf-star-ico, #drawer.lf-pane .lf-star.is-saved .lf-star-ico { fill: currentColor; }
.lf .lf-row--gone { grid-template-columns: minmax(0, 1fr); }
.lf .lf-row--gone .lf-name { color: var(--ink-2); }
.lf .lf-row--gone .lf-row-main::after { display: none; }
.lf .lf-row--gone:hover { background: none; }
.lf .lf-more { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.lf .lf-more-n { font: var(--t-label); font-weight: 400; color: var(--muted); }
.lf .lf-list--empty .empty { padding: var(--s-12) var(--s-6); }

/* ---------- the lab pane (ST428 facts then sections; SB208 close X; SE291 one-sentence check; V344 revealed value) ---------- */
#drawer.lf-pane .lf-db > * + * { margin-top: var(--s-6); }
#drawer.lf-pane .lf-dh .dh-nav { gap: var(--s-1); }
#drawer.lf-pane .lf-dh .dh-nav .close { margin-left: 0; }
#drawer.lf-pane .dsec h3:focus { outline: none; }
#drawer.lf-pane .dsec h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#drawer.lf-pane .lf-p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
#drawer.lf-pane .lf-p + .lf-p, #drawer.lf-pane .lf-p + .lf-props, #drawer.lf-pane .lf-props + .lf-p { margin-top: var(--s-2); }
#drawer.lf-pane .lf-muted { color: var(--muted); }
#drawer.lf-pane .lf-warn { display: flex; align-items: flex-start; gap: var(--s-2); }
#drawer.lf-pane .lf-warn .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warning); }
#drawer.lf-pane .lf-topics { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-3); }
#drawer.lf-pane .lf-props { grid-template-columns: 104px minmax(0, 1fr); margin-top: var(--s-3); }
#drawer.lf-pane .lf-props dd { overflow-wrap: anywhere; }
#drawer.lf-pane .lf-ext { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; overflow-wrap: anywhere; }
#drawer.lf-pane .lf-ext .icon { flex: none; width: 12px; height: 12px; color: currentColor; }
#drawer.lf-pane .lf-quote { margin: var(--s-2) 0 0; padding: var(--s-2) 0 var(--s-2) var(--s-3); border-left: 2px solid var(--line-strong); font: var(--t-meta); color: var(--ink); }
#drawer.lf-pane .lf-quote-src { display: block; margin-top: var(--s-1); font: var(--t-label); font-weight: 400; color: var(--muted); }
#drawer.lf-pane .lf-route-line { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink); }
#drawer.lf-pane .lf-route-line .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
#drawer.lf-pane .lf-inline-alert { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--warning-subtle); }
#drawer.lf-pane .lf-inline-alert .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warning); }
#drawer.lf-pane .lf-inline-alert p { margin: 0; font: var(--t-meta); color: var(--ink); }
#drawer.lf-pane .lf-inline-alert + .lf-p { margin-top: var(--s-2); }
/* the check: a 300 by 65 box where the Turnstile widget renders in the live app (compact size fits a 300 column) */
#drawer.lf-pane .lf-ts { margin-top: var(--s-3); }
#drawer.lf-pane .lf-ts-box { display: flex; align-items: center; gap: var(--s-3); width: 300px; max-width: 100%; height: 65px; padding: 0 var(--s-3) 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface-2); }
#drawer.lf-pane .lf-ts-chk { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font: var(--t-body); font-weight: 400; color: var(--ink); cursor: pointer; }
#drawer.lf-pane .lf-ts-chk input { width: 22px; height: 22px; }
#drawer.lf-pane .lf-ts-t { font: var(--t-body); color: var(--ink); }
#drawer.lf-pane .lf-ts-t:focus { outline: none; }
#drawer.lf-pane .lf-ts-brand { display: inline-flex; margin-left: auto; color: var(--muted); }
#drawer.lf-pane .lf-ts-brand .icon { width: 20px; height: 20px; }
#drawer.lf-pane .lf-ts-note { margin: var(--s-2) 0 0; max-width: 420px; font: var(--t-label); font-weight: 400; color: var(--muted); }
/* off the preview: Cloudflare Turnstile renders its own 300 by 65 widget into the mount */
#drawer.lf-pane .lf-ts-mount { min-height: 65px; }
#drawer.lf-pane .lf-secret-btn a.btn { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
#drawer.lf-pane .lf-secret-btn a.btn .icon { width: 14px; height: 14px; }
#drawer.lf-pane .lf-field-l { margin: 0 0 6px; font: var(--t-control); font-weight: 600; color: var(--ink); }
#drawer.lf-pane .lf-secret { position: relative; display: flex; align-items: center; }
#drawer.lf-pane .lf-secret input { flex: 1; min-height: 44px; padding-right: 48px; background: var(--surface-2); font: var(--t-body); }
#drawer.lf-pane .lf-secret .lf-copy { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
#drawer.lf-pane .lf-secret + .lf-p, #drawer.lf-pane .lf-secret-btn + .lf-p { margin-top: var(--s-2); }
#drawer.lf-pane .lf-secret-btn button .icon { width: 14px; height: 14px; }
#drawer.lf-pane .lf-sub-h { margin: var(--s-4) 0 var(--s-1); font: var(--t-label); color: var(--ink); }
#drawer.lf-pane .lf-bul { margin: 0; padding-left: 18px; font: var(--t-meta); color: var(--ink-2); }
#drawer.lf-pane .lf-bul li + li { margin-top: var(--s-1); }
/* next step: choose before any spend (CG042), steps while it runs, the result with what the check changed (LI027) */
#drawer.lf-pane .lf-opts { margin: 0; padding: 0; border: 0; min-width: 0; }
#drawer.lf-pane .lf-opt { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); font-weight: 400; cursor: pointer; }
#drawer.lf-pane .lf-opt + .lf-opt { margin-top: var(--s-2); }
#drawer.lf-pane .lf-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
#drawer.lf-pane .lf-opt input { margin-top: 3px; }
#drawer.lf-pane .lf-opt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#drawer.lf-pane .lf-opt-name { font: var(--t-control); font-weight: 600; color: var(--ink); }
#drawer.lf-pane .lf-opt-d { font: var(--t-meta); color: var(--ink-2); }
#drawer.lf-pane .lf-opt-tag { font: var(--t-label); font-weight: 400; color: var(--muted); }
#drawer.lf-pane .lf-next .lf-f { margin-top: var(--s-4); }
#drawer.lf-pane .lf-f + .lf-f { margin-top: var(--s-3); }
#drawer.lf-pane .lf-f label { margin-bottom: 4px; }
#drawer.lf-pane .lf-f .field-help { margin: 0 0 6px; }
#drawer.lf-pane .lf-f input:not([type=checkbox]):not([type=radio]), #drawer.lf-pane .lf-f textarea { width: 100%; }
#drawer.lf-pane .lf-f textarea { resize: vertical; }
#drawer.lf-pane .lf-cost { margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--ink); }
#drawer.lf-pane .lf-steps { margin: 0; padding: 0; list-style: none; }
#drawer.lf-pane .lf-steps li { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; font: var(--t-meta); color: var(--muted); }
#drawer.lf-pane .lf-steps li.is-now, #drawer.lf-pane .lf-steps li.is-done { color: var(--ink); }
#drawer.lf-pane .lf-steps .icon { width: 18px; height: 18px; color: var(--muted); }
#drawer.lf-pane .lf-steps li.is-done .icon { color: var(--positive); }
#drawer.lf-pane .lf-steps .spinner { width: 18px; height: 18px; }
#drawer.lf-pane .lf-steps + .lf-p { margin-top: var(--s-3); }
#drawer.lf-pane .lf-res-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
#drawer.lf-pane .lf-res-t { margin: 0; font: var(--t-control); font-weight: 600; color: var(--ink); }
#drawer.lf-pane .lf-res-t:focus { outline: none; }
#drawer.lf-pane .lf-points { margin: 0; padding-left: 20px; font: var(--t-body); color: var(--ink); }
#drawer.lf-pane .lf-points li + li { margin-top: var(--s-2); }
#drawer.lf-pane .lf-points + .lf-p { margin-top: var(--s-3); }
#drawer.lf-pane .lf-changes { margin-top: var(--s-3); }
#drawer.lf-pane .lf-changes > summary { min-height: 32px; font: var(--t-control); color: var(--ink); }
#drawer.lf-pane .lf-changes .lf-bul { margin-top: var(--s-1); }
#drawer.lf-pane .lf-changes + .lf-p { margin-top: var(--s-3); }
#drawer.lf-pane .lf-inline-alert + .lf-f, #drawer.lf-pane .lf-inline-alert + .lf-points { margin-top: var(--s-3); }
#drawer.lf-pane .lf-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
#drawer.lf-pane .lf-revise { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); }
#drawer.lf-pane .lf-revise .lf-f { margin-top: 0; }
#drawer.lf-pane .lf-src > summary { min-height: 32px; font: var(--t-control); color: var(--ink-2); }
#drawer.lf-pane .lf-src ul { margin: var(--s-1) 0 0; padding-left: 18px; font: var(--t-meta); }
#drawer.lf-pane .lf-src li + li { margin-top: var(--s-1); }
#drawer.lf-pane .lf-src .lf-p { margin-top: var(--s-2); }
#drawer.lf-pane .lf-df .df-r { margin-left: auto; }
#drawer.lf-pane .lf-df > .text-btn:first-child { margin-left: calc(-1 * var(--s-2)); }
/* the filter sheet (sys 10): fieldsets of radios and checkboxes, "Show n labs" in the sticky foot */
#drawer.lf-fsheet .lf-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
#drawer.lf-fsheet .lf-fs + .lf-fs { margin-top: var(--s-6); }
#drawer.lf-fsheet .lf-fs legend { padding: 0; margin-bottom: var(--s-2); font: var(--t-item); color: var(--ink); }
#drawer.lf-fsheet .lf-sheet-b > * + * { margin-top: 0; }
#drawer.lf-fsheet .lf-mi-h { padding-left: 0; }
#drawer.lf-fsheet .dh-nav { gap: var(--s-2); }

/* ---------- widths ---------- */
/* under 1024: the chips collapse into one Filters button; Sort stays (spec 7.2) */
@media (max-width: 1023px) {
  .lf .lf-chips { display: none; }
  .lf .lf-filters-btn { display: inline-flex; }
  .lf .lf-toolbar { align-items: center; }
}
/* the pane beside the list leaves 496 to 560 for it at 1280 to 1439: the right column narrows */
@media (min-width: 1280px) and (max-width: 1439px) {
  body.pane-open .lf .lf-row-r { width: 112px; }
}
@media (max-width: 599px) {
  .lf .lf-offer { padding: var(--s-4); }
  .lf .lf-offer-head { flex-direction: column; gap: var(--s-3); }
  .lf .lf-checks { grid-template-columns: minmax(0, 1fr); }
  .lf .lf-ways { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .lf .lf-ways dd + dt { margin-top: var(--s-3); }
  .lf .lf-sum { flex-wrap: wrap; }
  .lf .lf-pass-head { align-items: flex-start; }
  .lf .lf-pass-t { flex-direction: column; }
  .lf .lf-use { flex-direction: column; }
  .lf .lf-use > div { justify-content: space-between; }
  .lf .lf-f-row { flex-direction: column; gap: var(--s-4); }
  /* rows: name and kind, then signal and fit, then route and award on their own line (spec 11) */
  .lf .lf-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: var(--s-1); padding-right: var(--s-1); }
  .lf .lf-row-main { grid-column: 1; grid-row: 1; }
  .lf .lf-row-s { grid-column: 2; grid-row: 1 / span 2; align-self: start; flex-direction: column; align-items: flex-end; gap: 0; }
  .lf .lf-row-r { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); width: auto; }
  .lf .lf-l2 { flex-wrap: wrap; row-gap: 2px; }
  .lf .lf-fitline { white-space: normal; }
  .lf .lf-chip-t { max-width: 180px; }
  .lf .lf-sortwrap .lf-chip-t { max-width: 170px; }
  #drawer.lf-pane .lf-props { grid-template-columns: minmax(0, 1fr); }
  #drawer.lf-pane .lf-props dt { padding-bottom: 0; }
  #drawer.lf-pane .lf-props dd { padding-top: 0; min-height: 0; }
  #drawer.lf-pane .lf-actions > button { flex: 1 1 auto; }
}
@media (max-width: 359px) {
  .lf .lf-sortwrap .lf-chip-t { max-width: 120px; }
  .lf .lf-filters-btn .lf-chip-t { max-width: 90px; }
}
/* touch and phones: 44 targets (sys 9.1, 10) */
@media (pointer: coarse), (max-width: 599px) {
  .lf .lf-chip, .lf .lf-menu .menu-item, #drawer.lf-pane .lf-chk, .lf .lf-chk { min-height: 44px; }
  .lf .lf-star.icon-btn { position: relative; }
  #drawer.lf-pane .lf-changes > summary, #drawer.lf-pane .lf-src > summary { min-height: 44px; }
  #drawer.lf-pane .lf-ext { min-height: 44px; }
  #drawer.lf-pane .lf-opt { min-height: 44px; }
}