/* ============================================================
   SurgX v3 look: the components of the approved-direction supplies redesign
   (design, 2026-09-25; prototype https://claude.ai/artifact/FBpWG6pHaEsgdkYxg4pxQu v3).

   Loaded ONLY when SX_V3_LOOK is on (app.py _inject_v3_look). Every rule is scoped
   under .sxv3-look, a root NO existing screen uses (today's screens render inside .sxv3, the
   shared token root of surgx-pdp-v3.css, so that name is off limits; ada #3946 r1). Component
   classes are sxl-*, tokens --sxl-*; a test pins that no other stylesheet or HTML shell uses them.
   A screen opts in by rendering inside <div class="sxv3-look">. Component contract for
   the door screens (vera, PR-1): docs/surgx/v3-look-components.md.

   Tokens come from surgx-pdp-v3.css (already on /supplies); the fallbacks are the
   same SurgX values, so a screen outside that stylesheet still reads correctly.
   Colour carries status only (green = live, amber = proposed / held for review),
   always with a word.
   ============================================================ */
.sxv3-look {
  --sxl-bg: var(--bg, #EEF1F4);
  --sxl-surface: var(--surface, #FFFFFF);
  --sxl-ink: var(--ink-900, #0C1722);
  --sxl-ink-2: var(--ink-600, #43525F);
  /* AA (ada #3946 r1): the site --ink-500 #647483 is 4.24:1 on the page ground; #5B6B7A is 4.84 / 5.48 on white */
  --sxl-ink-3: #5B6B7A;
  --sxl-line: var(--line, #E2E8ED);
  --sxl-accent: var(--accent-600, #0B4A72);
  --sxl-tint: var(--accent-50, #EAF2F7);
  --sxl-bar-track: var(--line, #E2E8ED);
  /* AA: --verified #1E8E6A on the live pill ground is 3.60:1; #177255 is 5.17:1 (5.87 on white) */
  --sxl-live: #177255;
  --sxl-live-bg: #E4F4EE;
  --sxl-prop: #8A5A18;
  --sxl-prop-bg: #FBF3E4;
  --sxl-prop-line: #E9D3A8;
  --sxl-shadow: 0 1px 2px rgba(12,23,34,.06), 0 4px 14px rgba(12,23,34,.05);
  --sxl-display: var(--font-display, "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif);
  --sxl-ui: var(--font-ui, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);
  --sxl-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  color: var(--sxl-ink);
  font: 15px/1.5 var(--sxl-ui);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
  margin-inline: auto;
}
[data-theme="dark"] .sxv3-look {
  --sxl-bg: #0E141A; --sxl-surface: #16202A; --sxl-ink: #E6EDF3; --sxl-ink-2: #AAB7C3; --sxl-ink-3: #8494A3;
  --sxl-line: #253241; --sxl-accent: #7DBDE8; --sxl-tint: #132A3C; --sxl-bar-track: #253241;
  --sxl-live: #4CC39A; --sxl-live-bg: #12302A; --sxl-prop: #E3B462; --sxl-prop-bg: #2B2314; --sxl-prop-line: #4A3A1C;
  --sxl-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.sxv3-look *, .sxv3-look *::before, .sxv3-look *::after { box-sizing: border-box; }
.sxv3-look :focus-visible { outline: 3px solid var(--sxl-accent); outline-offset: 2px; }

/* ---- screen head: title, then the Live/Proposed label always in the same place, then the lede ---- */
.sxv3-look .sxl-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sxv3-look .sxl-head h1 { font: 800 26px/1.15 var(--sxl-display); letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.sxv3-look .sxl-lede { margin: 0; color: var(--sxl-ink-2); max-width: 60ch; }

/* ---- status label: colour + dot + word, never colour alone ---- */
.sxv3-look .sxl-status { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--sxl-ui); letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.sxv3-look .sxl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sxv3-look .sxl-status.is-live { color: var(--sxl-live); background: var(--sxl-live-bg); }
.sxv3-look .sxl-status.is-prop { color: var(--sxl-prop); background: var(--sxl-prop-bg); }

/* ---- breadcrumb: 44px tap targets (the repo convention, minHeight: 44), compact text; the screen folds the middle into "…" under 560px ---- */
.sxv3-look .sxl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; color: var(--sxl-ink-3); }
.sxv3-look .sxl-crumbs button, .sxv3-look .sxl-crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; background: none; border: 0; padding: 2px 0; color: var(--sxl-accent); font: 600 13px var(--sxl-ui); cursor: pointer; text-decoration: none; }
.sxv3-look .sxl-crumbs .is-here { display: inline-flex; align-items: center; min-height: 44px; color: var(--sxl-ink-2); font-weight: 600; }

/* ---- list of tiles (≤7, then .sxl-more "Show all N") ---- */
.sxv3-look .sxl-list { display: flex; flex-direction: column; gap: 10px; }
.sxv3-look .sxl-tile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; text-align: left; background: var(--sxl-surface); border: 1px solid var(--sxl-line); border-radius: 14px; padding: 12px 14px; color: var(--sxl-ink); font: inherit; cursor: pointer; box-shadow: var(--sxl-shadow); text-decoration: none; transition: transform .08s ease, background-color .12s ease, border-color .12s ease; }
.sxv3-look .sxl-tile:hover { border-color: var(--sxl-accent); }
.sxv3-look .sxl-tile:active { transform: scale(.985); background: var(--sxl-tint); }
.sxv3-look .sxl-tile.is-prop { border-style: dashed; border-color: var(--sxl-prop-line); box-shadow: none; }
.sxv3-look .sxl-tile.is-prop:hover { border-color: var(--sxl-prop); }
.sxv3-look .sxl-tile.is-static { cursor: default; box-shadow: none; }
.sxv3-look .sxl-tile.is-static:hover { border-color: var(--sxl-line); }
.sxv3-look .sxl-tile.is-static:active { transform: none; background: var(--sxl-surface); }
.sxv3-look .sxl-tile.is-held { background: var(--sxl-bg); box-shadow: none; }
.sxv3-look .sxl-tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sxv3-look .sxl-tile__name { font: 700 15.5px/1.25 var(--sxl-ui); overflow-wrap: anywhere; }
.sxv3-look .sxl-tile__sub { font-size: 13px; color: var(--sxl-ink-2); overflow-wrap: anywhere; }
.sxv3-look .sxl-count { font: 500 13px/1 var(--sxl-mono); background: var(--sxl-tint); color: var(--sxl-accent); border-radius: 999px; padding: 6px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* icon: ONLY a real drawing. No stand-in icon; in a list where siblings have one, use .is-blank to keep names aligned */
.sxv3-look .sxl-glyph { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--sxl-tint); color: var(--sxl-accent); display: grid; place-items: center; }
.sxv3-look .sxl-glyph svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sxv3-look .sxl-glyph.is-review { background: var(--sxl-prop-bg); color: var(--sxl-prop); }
.sxv3-look .sxl-glyph.is-blank { background: transparent; }

/* share bar: this item's share of the list's largest (a measure, not a loader). <span class="sxl-bar"><i style="width:NN%"></i></span> */
.sxv3-look .sxl-bar { display: block; height: 4px; border-radius: 99px; background: var(--sxl-bar-track); overflow: hidden; margin-top: 7px; }
.sxv3-look .sxl-bar > i { display: block; height: 100%; background: var(--sxl-accent); opacity: .55; border-radius: 99px; }

.sxv3-look .sxl-more { align-self: flex-start; background: none; border: 1px solid var(--sxl-line); border-radius: 999px; padding: 10px 16px; min-height: 44px; color: var(--sxl-accent); font: 700 13.5px var(--sxl-ui); cursor: pointer; }

/* ---- section label (+ optional status) and caption ---- */
.sxv3-look .sxl-section { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 11.5px/1 var(--sxl-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sxl-ink-3); margin-top: 6px; }
.sxv3-look .sxl-caption { font-size: 12.5px; color: var(--sxl-ink-3); margin: 0; }

/* ---- legend (home): status label + its meaning ---- */
.sxv3-look .sxl-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12.5px; color: var(--sxl-ink-2); }
.sxv3-look .sxl-legend > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ---- family spec card (item D's spec header) ---- */
.sxv3-look .sxl-spec { background: var(--sxl-surface); border: 1px solid var(--sxl-line); border-radius: 14px; overflow: hidden; }
.sxv3-look .sxl-spec__head { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.sxv3-look .sxl-spec__head .sxl-glyph { width: 52px; height: 52px; }
.sxv3-look .sxl-spec__k { font: 700 10.5px/1 var(--sxl-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sxl-ink-3); margin-bottom: 6px; }
.sxv3-look .sxl-spec__t { font: 800 19px/1.2 var(--sxl-display); overflow-wrap: anywhere; }
.sxv3-look .sxl-spec__m { font-size: 13.5px; color: var(--sxl-ink-2); margin-top: 4px; }
.sxv3-look .sxl-spec dl { margin: 0; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--sxl-line); }
.sxv3-look .sxl-spec dt, .sxv3-look .sxl-spec dd { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--sxl-line); font-size: 13.5px; }
.sxv3-look .sxl-spec dt { color: var(--sxl-ink-3); font-weight: 600; white-space: nowrap; }
.sxv3-look .sxl-spec dd { color: var(--sxl-ink); overflow-wrap: anywhere; }
.sxv3-look .sxl-spec dd.is-num { font: 500 14px var(--sxl-mono); font-variant-numeric: tabular-nums; }
.sxv3-look .sxl-codes { width: 100%; border-collapse: collapse; font: 500 13px var(--sxl-mono); }
.sxv3-look .sxl-codes th { font: 700 11px var(--sxl-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--sxl-ink-3); text-align: left; padding: 8px 16px; }
.sxv3-look .sxl-codes td { padding: 8px 16px; border-top: 1px solid var(--sxl-line); overflow-wrap: anywhere; }
.sxv3-look .sxl-vendor { padding: 0 16px 14px; font-size: 13px; color: var(--sxl-ink-2); }
/* 44px from padding + line-height; display stays list-item so the disclosure triangle is kept (Qwen #3953) */
.sxv3-look .sxl-vendor summary { cursor: pointer; color: var(--sxl-accent); font-weight: 600; padding: 12px 0; line-height: 20px; min-height: 44px; }

/* ---- chips: sub-group chips (count), filter chips, segmented control ---- */
.sxv3-look .sxl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sxv3-look .sxl-chip { background: var(--sxl-surface); border: 1px solid var(--sxl-line); border-radius: 999px; padding: 7px 12px; font: 600 13px var(--sxl-ui); color: var(--sxl-ink-2); }
.sxv3-look .sxl-chip b { font: 500 12.5px var(--sxl-mono); color: var(--sxl-ink-3); margin-left: 4px; }
.sxv3-look .sxl-chip-filter { background: var(--sxl-tint); color: var(--sxl-accent); border-radius: 999px; padding: 8px 12px; font: 600 13px var(--sxl-ui); }
.sxv3-look .sxl-chip-filter b { font-family: var(--sxl-mono); font-weight: 500; }
.sxv3-look .sxl-seg { align-self: flex-start; display: inline-flex; background: var(--sxl-surface); border: 1px solid var(--sxl-line); border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.sxv3-look .sxl-seg button { border: 0; background: none; border-radius: 999px; padding: 9px 14px; min-height: 44px; font: 700 13px var(--sxl-ui); color: var(--sxl-ink-2); cursor: pointer; }
.sxv3-look .sxl-seg button[aria-pressed="true"] { background: var(--sxl-accent); color: var(--sxl-surface); }

/* ---- search door: one box, "Try" chips ---- */
.sxv3-look .sxl-search { display: flex; align-items: center; gap: 10px; background: var(--sxl-surface); border: 1px solid var(--sxl-line); border-radius: 14px; padding: 0 14px; min-height: 52px; }
.sxv3-look .sxl-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--sxl-ink-3); stroke-width: 1.8; stroke-linecap: round; }
.sxv3-look .sxl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--sxl-ui); color: var(--sxl-ink); min-height: 48px; }
.sxv3-look .sxl-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sxv3-look .sxl-try__lab { font: 600 12.5px var(--sxl-ui); color: var(--sxl-ink-3); margin-right: 2px; }
.sxv3-look .sxl-try button { background: var(--sxl-surface); color: var(--sxl-accent); border: 1px solid var(--sxl-line); border-radius: 999px; padding: 8px 14px; min-height: 44px; font: 600 13px var(--sxl-ui); cursor: pointer; }
.sxv3-look .sxl-try button:hover { border-color: var(--sxl-accent); }

/* ---- design note: a margin annotation (prototype only; production screens normally omit it) ---- */
.sxv3-look .sxl-note { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sxl-ink-2); border-left: 3px solid var(--sxl-bar-track); padding: 4px 0 4px 12px; }

@media (prefers-reduced-motion: reduce) { .sxv3-look .sxl-tile { transition: none; } .sxv3-look .sxl-tile:active { transform: none; } }