/* LOOK-008 (spec 008) - the HardLine Ops app's look on the website.
   Contract: specs\008-website-app-look\contracts\look-css.md. Everything is scoped under html[data-look="app"], which
   look-core.js writes before the first paint; the colour roles (--hl-*) come from look-core.js (HlColors.resolve). This
   file loads after app.css and fit.css and wins by specificity: the prefix below carries an id-strength :not(#hl-x), so
   the Night Desk and APPEARANCE layers are overridden without new !important (only where Night Desk itself used it).
   Old variable names are aliases of the app roles until every page group has moved (clean-up removes them).
   @media print is not touched; the buyer preview (.pv) and scan frames are left out of every component rule.

   pairs: fg on bg (checked by look-gate.mjs in all 72 combinations; "large" = 3:1, "ui" = 3:1 control/edge)
     ink on bg; ink on surface; ink on surface2; muted on bg; muted on surface; muted on surface2;
     primary on surface; primary on surface2; primary on bg (ui); onPrimary on primary; onSignal on signal;
     success on surface; warning on surface; danger on surface; danger on surface2;
     onSuccessContainer on successContainer; onWarningContainer on warningContainer; onDangerContainer on dangerContainer;
     outline on surface (ui); ink on surface2 (ui); live on surface (ui); surface on ink;
     role-approve-text on role-approve; role-end-text on role-end; role-view-text on role-view; role-edit-text on role-edit;
     role-capture-text on role-capture; role-keep-text on role-keep; ink on primarySoft; muted on primarySoft
   end pairs
   Status words sit on cards and tables (surface), never straight on the page background. Channel colours are marks
   (stripes, chart series), never text: 3:1 against surface and surface2. The card Line's signal colour is the app's
   own (light Manifest adds a 1 px ink edge); its state is always also a word, so it is not a text pair. */

/* ============================== 1. faces ============================== */
/* The faces come from Google Fonts for now (index.html): the console's content security policy allows fonts only from
   fonts.gstatic.com, so the app's own WOFF2 files (staged in _staging\look-008\public\fonts) wait for the planned
   server step (T089). A local fallback with close metrics keeps text from jumping while the face loads. */
@font-face { font-family: "Hl Plex Fallback"; src: local("Segoe UI"), local("Tahoma"), local("Arial"); size-adjust: 101%; ascent-override: 102%; descent-override: 36%; line-gap-override: 0%; }

/* ============================== 2. tokens ============================== */
html[data-look="app"] {
  --hl-font: "IBM Plex Sans Arabic", "Hl Plex Fallback", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --hl-display: "Alexandria", "IBM Plex Sans Arabic", "Hl Plex Fallback", system-ui, sans-serif;
  --hl-sp: calc(1px * var(--hl-text-mult, 1));
  /* type scale (research A.2): size / line in sp, weight */
  --hl-t-counter: 600 calc(64 * var(--hl-sp)) / calc(68 * var(--hl-sp)) var(--hl-display);
  --hl-t-display: 600 calc(40 * var(--hl-sp)) / calc(48 * var(--hl-sp)) var(--hl-display);
  --hl-t-headline: 600 calc(28 * var(--hl-sp)) / calc(36 * var(--hl-sp)) var(--hl-display);
  --hl-t-title: 600 calc(21 * var(--hl-sp)) / calc(30 * var(--hl-sp)) var(--hl-font);
  --hl-t-title-sm: 600 calc(18 * var(--hl-sp)) / calc(26 * var(--hl-sp)) var(--hl-font);
  --hl-t-body: 400 calc(17 * var(--hl-sp)) / calc(26 * var(--hl-sp)) var(--hl-font);
  --hl-t-body-strong: 600 calc(17 * var(--hl-sp)) / calc(26 * var(--hl-sp)) var(--hl-font);
  --hl-t-body-sm: 400 calc(15 * var(--hl-sp)) / calc(22 * var(--hl-sp)) var(--hl-font);
  --hl-t-label: 600 calc(16 * var(--hl-sp)) / calc(20 * var(--hl-sp)) var(--hl-font);
  --hl-t-code: 500 calc(16 * var(--hl-sp)) / calc(22 * var(--hl-sp)) var(--hl-font);
  --hl-t-caption: 500 calc(13 * var(--hl-sp)) / calc(18 * var(--hl-sp)) var(--hl-font);
  --hl-fs-body: calc(17 * var(--hl-sp)); --hl-fs-body-sm: calc(15 * var(--hl-sp)); --hl-fs-label: calc(16 * var(--hl-sp)); --hl-fs-caption: calc(13 * var(--hl-sp));
  /* spacing scale */
  --hl-s-0: 0; --hl-s-xxs: 2px; --hl-s-xs: 4px; --hl-s-s: 8px; --hl-s-m: 12px; --hl-s-l: 16px; --hl-s-xl: 20px; --hl-s-xxl: 24px;
  --hl-s-x3l: 32px; --hl-s-x4l: 40px; --hl-s-x5l: 56px; --hl-s-x6l: 72px;
  /* density: comfortable (default) */
  --hl-gutter: 16px; --hl-card-pad: 16px; --hl-row-min: 64px; --hl-card-gap: 12px; --hl-btn-h: 60px; --hl-table-row: 48px; --hl-desk-btn: 40px;
  /* radii */
  --hl-r-xs: 4px; --hl-r-sm: 8px; --hl-r-md: 14px; --hl-r-lg: 20px; --hl-r-xl: 28px; --hl-r-full: 999px;
  /* motion (HlMotion.kt) */
  --hl-press: 90ms; --hl-state: 150ms; --hl-enter: 220ms; --hl-exit: 160ms; --hl-screen: 300ms; --hl-fade: 120ms;
  --hl-ease-standard: cubic-bezier(.2, 0, 0, 1); --hl-ease-decel: cubic-bezier(.05, .7, .1, 1); --hl-ease-accel: cubic-bezier(.3, 0, .8, .15);
  --hl-primary-soft: color-mix(in srgb, var(--hl-primary) 12%, var(--hl-surface));
  --hl-shadow-float: 0 8px 24px rgba(0, 0, 0, .12);
}
html[data-look="app"][data-hl-dark] { --hl-shadow-float: none; }
html[data-look="app"][data-hl-density="compact"] { --hl-gutter: 12px; --hl-card-pad: 12px; --hl-row-min: 56px; --hl-card-gap: 8px; --hl-btn-h: 56px; --hl-table-row: 40px; --hl-desk-btn: 36px; }
html[data-look="app"][data-hl-density="spacious"] { --hl-gutter: 20px; --hl-card-pad: 20px; --hl-row-min: 76px; --hl-card-gap: 16px; --hl-btn-h: 72px; --hl-table-row: 56px; --hl-desk-btn: 44px; }
html[data-look="app"][data-hl-motion="reduce"] { --hl-press: 0ms; --hl-state: 0ms; --hl-enter: 0ms; --hl-exit: 0ms; --hl-screen: 0ms; }

/* the old names point at the app roles while pages move (data-model section 4) */
html[data-look="app"]:not(#hl-x) {
  --nd-bg: var(--hl-bg); --nd-pane: var(--hl-surface); --nd-pane-2: var(--hl-surface2); --nd-grid: var(--hl-hairline); --nd-grid-2: var(--hl-outline);
  --nd-fg: var(--hl-ink); --nd-fg-2: var(--hl-muted); --nd-fg-3: var(--hl-muted);
  --bg: var(--hl-bg); --surface: var(--hl-surface); --surface-2: var(--hl-surface2); --sunken: var(--hl-surface2);
  --line: var(--hl-hairline); --line-strong: var(--hl-outline); --row-line: var(--hl-hairline); --field-line: var(--hl-outline);
  --text: var(--hl-ink); --text-2: var(--hl-muted); --text-3: var(--hl-muted);
  --accent: var(--hl-primary); --cyan: var(--hl-primary); --accent-ink: var(--hl-on-primary); --accent-text: var(--hl-primary);
  --accent-soft: var(--hl-primary-soft); --row-sel: var(--hl-primary-soft); --row-hover: var(--hl-surface2);
  --good: var(--hl-success); --lime: var(--hl-success); --warn: var(--hl-warning); --amber: var(--hl-warning); --crit: var(--hl-danger); --red: var(--hl-danger);
  --good-text: var(--hl-success); --warn-text: var(--hl-warning); --crit-text: var(--hl-danger);
  --good-bg: var(--hl-success-container); --warn-bg: var(--hl-warning-container); --crit-bg: var(--hl-danger-container);
  --amber-ink: var(--hl-on-warning-container); --amber-soft: var(--hl-warning-container); --amber-line: var(--hl-warning); --amber-text: var(--hl-on-warning-container);
  --violet: var(--hl-role-capture);
  --radius: 0px; --radius-lg: 20px; --shadow: none;
  --card-surface: var(--hl-surface2); --card-bg: var(--card-surface); --card-line: var(--hl-hairline);
  --mono: var(--hl-font); --sans: var(--hl-font); --font: var(--hl-font); --font-head: var(--hl-font);
  color-scheme: light;
  background: var(--hl-bg);
}
html[data-look="app"][data-hl-dark]:not(#hl-x) { color-scheme: dark; }

/* ============================== 3. base ============================== */
html[data-look="app"] body { background: var(--hl-bg); color: var(--hl-ink); font: var(--hl-t-body); letter-spacing: 0; zoom: 1; -webkit-font-smoothing: antialiased; }
/* no uppercase and no letter spacing anywhere (the buyer preview keeps its own marketplace look) */
html[data-look="app"] :is(#app, #login, #pwchange, #drawer, #more, #qs, #tip, #toast, .qs, .lab-rev) :not(.pv, .pv *),
html[data-look="app"] :is(#app, #login, #pwchange, #drawer, #more, #qs) { text-transform: none; letter-spacing: 0; }
html[data-look="app"] :is(h1, h2, h3):not(.pv *) { font-family: var(--hl-font); }
html[data-look="app"] :is(p, textarea, .sub, .a-role, .t-sum, .t-name, .brief, .tk-title, .issue p, .empty, .h-text, .metric span, .d-head p, .rs-name, .t-role):not(.pv *) { font-family: var(--hl-font); }
html[data-look="app"] :is(code, kbd, .mono, .log, .log-path, .set-who, pre):not(.pv *) { font-family: var(--hl-font); font-feature-settings: "zero", "tnum"; }
html[data-look="app"] :is(td, th, .num, .n, .t-value, .big, .facts dd, .metric b, input[type="number"]) { font-variant-numeric: tabular-nums; }
html[data-look="app"] :focus-visible { outline: 2px solid var(--hl-ink); outline-offset: 2px; }
html[data-look="app"] ::placeholder { color: var(--hl-muted); opacity: 1; }
html[data-look="app"] a:not(.btn, .nav a, .more-grid a, .brand, .qs-it, .plk):not(.pv *) { color: var(--hl-primary); }
html[data-look="app"][data-hl-palette="manifest"]:not([data-hl-dark]) a:not(.btn):not(.pv *) { text-decoration-thickness: 1px; }
html[data-look="app"] :is(h2, .section-title h2, .d-head h2, .composer h2) { font: var(--hl-t-title-sm); }
html[data-look="app"] .section-title span, html[data-look="app"] .eyebrow, html[data-look="app"] .d-sec { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"] .d-sec a { font: var(--hl-t-caption); }
html[data-look="app"] small { font-size: var(--hl-fs-caption); }
/* Night Desk forces every corner through var(--radius) with !important; each component sets its own value */
html[data-look="app"] :is(#app, #login, #pwchange, #drawer, #more, .qs, .lab-rev, .rs-lightbox) * { --radius: 0px; }
html[data-look="app"] .hl-theming, html[data-look="app"] .hl-theming * { transition: background-color 250ms var(--hl-ease-standard), border-color 250ms var(--hl-ease-standard), color 250ms var(--hl-ease-standard); }

/* ============================== 4. cards and tiles ============================== */
html[data-look="app"]:not(#hl-x) :is(.card, .tile, .agent, .metric, .inv-card, .facts, .d-list, .d-status, .host, .ov-strip, .ov-health, .wh-hero, .log, .tk-brief, .asked, .login-card, .set-card, .pk-elig):not(.pv *) {
  --radius: var(--hl-r-md); background: var(--hl-surface); border: 1px solid var(--hl-hairline); box-shadow: none;
}
html[data-look="app"]:not(#hl-x) :is(.d-status, .metric, .facts div, .tk-brief, .asked, .log) { background: var(--hl-surface2); }
html[data-look="app"]:not(#hl-x) .wh-hero { border-inline-start: 1px solid var(--hl-hairline); }
/* panels no longer butt together with 1px gaps: the app spaces cards by the card gap */
html[data-look="app"]:not(#hl-x) :is(.tiles, .metrics, .agents) { gap: var(--hl-card-gap); background: transparent; border: 0; }
html[data-look="app"]:not(#hl-x) .tiles { margin-top: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) :is(.tile, .agent, .metric) { border: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) .tile { padding: var(--hl-card-pad); }
html[data-look="app"]:not(#hl-x) .t-label { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .t-value { font: var(--hl-t-headline); font-variant-numeric: tabular-nums; }
html[data-look="app"]:not(#hl-x) .t-foot { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .big { font-family: var(--hl-display); font-weight: 600; letter-spacing: 0; }
html[data-look="app"]:not(#hl-x) .facts { gap: 1px; background: var(--hl-hairline); overflow: hidden; }
html[data-look="app"]:not(#hl-x) .facts div { background: var(--hl-surface); }
html[data-look="app"]:not(#hl-x) .facts dt, html[data-look="app"]:not(#hl-x) .metric span { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .facts dd { font: var(--hl-t-body-strong); }
html[data-look="app"]:not(#hl-x) .metric b { font: var(--hl-t-title); }
html[data-look="app"]:not(#hl-x) .section-title { margin: var(--hl-s-xxl) 0 var(--hl-s-m); }
html[data-look="app"]:not(#hl-x) #view > .card + .card, html[data-look="app"]:not(#hl-x) .view > section + section { margin-top: var(--hl-card-gap); }
@media (hover: hover) { html[data-look="app"]:not(#hl-x) :is(a.card, .tile-btn, .agent, .lab-card):hover { background: var(--hl-surface2); } }

/* ============================== 5. buttons (HlButton) ============================== */
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn):not(.pv *) {
  --radius: var(--hl-r-sm); --b: var(--hl-role-edit); --b-ink: var(--hl-role-edit-text);
  height: auto; min-height: var(--hl-desk-btn); padding: var(--hl-s-s) var(--hl-s-m); gap: var(--hl-s-s);
  font: var(--hl-t-label); background: var(--b); color: var(--b-ink); border: 1px solid var(--b); box-shadow: none; filter: none;
  transition: transform var(--hl-press) var(--hl-ease-standard); /* colours change at once: pages redraw buttons often */
}
html[data-look="app"]:not(#hl-x) .icon-btn { min-width: var(--hl-desk-btn); padding: var(--hl-s-s); justify-content: center; }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn) svg { width: 18px; height: 18px; }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn):not(:disabled):active { transform: scale(.97); }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn)[data-role="good"] { --b: var(--hl-role-approve); --b-ink: var(--hl-role-approve-text); }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn)[data-role="crit"] { --b: var(--hl-role-end); --b-ink: var(--hl-role-end-text); }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn)[data-role="nav"] { --b: var(--hl-role-view); --b-ink: var(--hl-role-view-text); }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn)[data-role="capture"] { --b: var(--hl-role-capture); --b-ink: var(--hl-role-capture-text); }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn)[data-role="keep"] { --b: var(--hl-role-keep); --b-ink: var(--hl-role-keep-text); }
html[data-look="app"]:not(#hl-x) :is(.btn.primary, .btn.danger-solid, .btn[data-role="primary"]) { --b: var(--hl-primary); --b-ink: var(--hl-on-primary); }
html[data-look="app"]:not(#hl-x) .btn.danger-solid { --b: var(--hl-role-end); --b-ink: var(--hl-role-end-text); }
/* quiet controls (ghost buttons, the product-link buttons, icon buttons) stay outlined, as the app's secondary actions */
html[data-look="app"]:not(#hl-x) :is(.btn.ghost, .btn.plk, .icon-btn:not([data-role="crit"]), .qs-close, .lang-link):not(.primary) { background: transparent; color: var(--hl-ink); border-color: var(--hl-outline); }
html[data-look="app"]:not(#hl-x) .btn.ghost:not(.primary) { border-color: transparent; }
/* Standard: the prominent button filled, every other button outlined; End keeps its danger text */
html[data-look="app"][data-hl-buttons="standard"]:not(#hl-x) :is(.btn, .icon-btn):not(.primary):not(.danger-solid):not([data-role="primary"]) { background: transparent; color: var(--hl-ink); border-color: var(--hl-outline); }
html[data-look="app"][data-hl-buttons="standard"]:not(#hl-x) :is(.btn, .icon-btn)[data-role="crit"]:not(.primary):not(.danger-solid) { color: var(--hl-danger); }
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn):is(:disabled, [disabled]) { background: var(--hl-surface2); color: var(--hl-muted); border-color: var(--hl-hairline); opacity: 1; filter: none; }
@media (hover: hover) { html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn):not(:disabled):hover { filter: brightness(1.06); color: var(--b-ink); border-color: var(--b); } html[data-look="app"]:not(#hl-x) :is(.btn.ghost, .btn.plk, .icon-btn:not([data-role="crit"])):not(:disabled):hover { background: var(--hl-surface2); color: var(--hl-ink); filter: none; border-color: var(--hl-outline); } }
html[data-look="app"]:not(#hl-x) .btn.big { min-height: var(--hl-btn-h); padding-inline: var(--hl-s-xl); }
html[data-look="app"]:not(#hl-x) :is(.btn.small, .btn.sm) { min-height: 32px; padding: var(--hl-s-xs) var(--hl-s-s); font: var(--hl-t-caption); font-weight: 600; }
html[data-look="app"]:not(#hl-x) .plk-row .plk { min-height: 32px; padding: var(--hl-s-xxs) var(--hl-s-s); font: var(--hl-t-caption); }
html[data-look="app"].touch:not(#hl-x) :is(.btn, .icon-btn):not(.pv *) { min-height: 48px; }
html[data-look="app"].touch:not(#hl-x) .icon-btn { min-width: 48px; }
html[data-look="app"].touch:not(#hl-x) .plk-row .plk { min-height: 48px; font: var(--hl-t-body-sm); }
html[data-look="app"].touch:not(#hl-x) :is(.login .btn, .btn.big, .qs-sheet-go) { min-height: var(--hl-btn-h); }
html[data-look="app"]:not(#hl-x) .spin svg { animation-duration: .9s; }

/* ============================== 6. chips and segments (HlChip) ============================== */
html[data-look="app"]:not(#hl-x) .seg { --radius: 0px; display: inline-flex; flex-wrap: wrap; gap: var(--hl-s-s); padding: 0; background: transparent; border: 0; box-shadow: none; }
html[data-look="app"]:not(#hl-x) :is(.seg button, .chip, .filters > button:not(.btn)) {
  --radius: var(--hl-r-full); height: auto; min-height: 40px; padding: var(--hl-s-s) var(--hl-s-l); gap: var(--hl-s-xs);
  font: var(--hl-t-label); font-size: var(--hl-fs-body-sm); background: var(--hl-surface2); color: var(--hl-ink); border: 1px solid var(--hl-outline); box-shadow: none;
  transition: background-color var(--hl-state) var(--hl-ease-standard), color var(--hl-state) var(--hl-ease-standard);
}
html[data-look="app"]:not(#hl-x) :is(.seg button.on, .seg button[aria-selected="true"], .seg button[aria-pressed="true"], .chip.on, .chip[aria-pressed="true"]) { background: var(--hl-primary); color: var(--hl-on-primary); border-color: var(--hl-primary); }
html[data-look="app"]:not(#hl-x) .seg button.on::after { display: none; }
html[data-look="app"].touch:not(#hl-x) :is(.seg button, .chip) { min-height: 48px; }
html[data-look="app"]:not(#hl-x) :is(.claim-pill, .nav-badge, .lab-revn) { --radius: var(--hl-r-full); font: var(--hl-t-caption); padding: 0 var(--hl-s-s); border: 1px solid var(--hl-outline); background: var(--hl-surface2); color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .claim-pill.ok { background: var(--hl-success-container); color: var(--hl-on-success-container); border-color: transparent; }
html[data-look="app"]:not(#hl-x) .claim-pill.warn { background: var(--hl-warning-container); color: var(--hl-on-warning-container); border-color: transparent; }
html[data-look="app"]:not(#hl-x) :is(.claim-pill.fail, .nav-badge.hot) { background: var(--hl-danger-container); color: var(--hl-on-danger-container); border-color: transparent; }
html[data-look="app"]:not(#hl-x) .nav-badge { background: var(--hl-primary); color: var(--hl-on-primary); border-color: var(--hl-primary); min-width: 20px; text-align: center; }

/* ============================== 7. status words (the word first, a small mark beside it, no glow) ============================== */
html[data-look="app"]:not(#hl-x) .pill { height: auto; min-height: 24px; padding: 0; gap: var(--hl-s-s); background: transparent; font: var(--hl-t-caption); color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .pill::before { width: 8px; height: 8px; box-shadow: none; animation: none; background: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .pill.ok { color: var(--hl-success); } html[data-look="app"]:not(#hl-x) .pill.ok::before { background: var(--hl-success); }
html[data-look="app"]:not(#hl-x) .pill.warn { color: var(--hl-warning); } html[data-look="app"]:not(#hl-x) .pill.warn::before { background: var(--hl-warning); }
html[data-look="app"]:not(#hl-x) .pill.fail { color: var(--hl-danger); } html[data-look="app"]:not(#hl-x) .pill.fail::before { background: var(--hl-danger); }
html[data-look="app"]:not(#hl-x) .pill.run { color: var(--hl-ink); } html[data-look="app"]:not(#hl-x) .pill.run::before { background: var(--hl-signal); }
html[data-look="app"][data-hl-signal-edge]:not(#hl-x) .pill.run::before { box-shadow: 0 0 0 1px var(--hl-ink); }
html[data-look="app"]:not(#hl-x) :is(.ok-t, .good-t) { color: var(--hl-success); } html[data-look="app"]:not(#hl-x) .warn-t { color: var(--hl-warning); } html[data-look="app"]:not(#hl-x) :is(.fail-t, .bad-t, .crit-t) { color: var(--hl-danger); }
html[data-look="app"]:not(#hl-x) .issue.ok svg { color: var(--hl-success); } html[data-look="app"]:not(#hl-x) .issue.warn svg { color: var(--hl-warning); } html[data-look="app"]:not(#hl-x) .issue.fail svg { color: var(--hl-danger); }

/* ============================== 8. fields (HlTextField) ============================== */
html[data-look="app"]:not(#hl-x) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea, .rs-search, .rs-in):not(.pv *) {
  --radius: var(--hl-r-sm); min-height: 40px; padding: var(--hl-s-s) var(--hl-s-m); background: var(--hl-surface2); color: var(--hl-ink);
  border: 1px solid var(--hl-outline); box-shadow: none; font: var(--hl-t-body-sm); letter-spacing: 0;
}
html[data-look="app"]:not(#hl-x) textarea { min-height: 88px; }
html[data-look="app"]:not(#hl-x) :is(input, select, textarea, .rs-search, .rs-in):focus { outline: 2px solid var(--hl-ink); outline-offset: 0; border-color: var(--hl-ink); box-shadow: none; }
html[data-look="app"].touch:not(#hl-x) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select) { min-height: 48px; font-size: max(16px, var(--hl-fs-body-sm)); }
html[data-look="app"]:not(#hl-x) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--hl-primary); width: 20px; height: 20px; }
html[data-look="app"]:not(#hl-x) .field { gap: var(--hl-s-xs); margin-bottom: var(--hl-s-l); }
html[data-look="app"]:not(#hl-x) .field > span { font: var(--hl-t-label); color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .field input { height: auto; min-height: 56px; font: var(--hl-t-body); }
html[data-look="app"]:not(#hl-x) .err { font: var(--hl-t-caption); color: var(--hl-danger); }

/* ============================== 9. tables ============================== */
html[data-look="app"]:not(#hl-x) table:not(.pv *) { font: var(--hl-t-body-sm); }
html[data-look="app"]:not(#hl-x) :is(th, .table-wrap thead th):not(.pv *) { font: var(--hl-t-caption); color: var(--hl-muted); background: var(--hl-surface); padding: var(--hl-s-s) var(--hl-s-m); border-bottom: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) table:not(.fit-cards) td:not(.pv *) { height: var(--hl-table-row); }
html[data-look="app"]:not(#hl-x) td:not(.pv *) { padding: var(--hl-s-s) var(--hl-s-m); border-bottom: 1px solid var(--hl-hairline); line-height: calc(22 * var(--hl-sp)); }
html[data-look="app"]:not(#hl-x) tbody tr:is(.on, .sel, [aria-selected="true"]) td { background: var(--hl-surface2); }
html[data-look="app"]:not(#hl-x) tbody tr:is(.on, .sel, [aria-selected="true"]) td:first-child { box-shadow: inset 4px 0 0 var(--hl-primary); }
html[data-look="app"][dir="rtl"]:not(#hl-x) tbody tr:is(.on, .sel, [aria-selected="true"]) td:first-child { box-shadow: inset -4px 0 0 var(--hl-primary); }
@media (hover: hover) { html[data-look="app"]:not(#hl-x) tbody tr:not(.static):hover td { background: var(--hl-surface2); } }
html[data-look="app"]:not(#hl-x) :is(.card, section).table-wrap { overflow: auto; }
html[data-look="app"]:not(#hl-x) table.fit-cards > tbody > tr, html[data-look="app"]:not(#hl-x) table.fit-cards > tfoot > tr { --radius: var(--hl-r-md); background: var(--hl-surface); border: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) table.fit-cards > tbody > tr > td[data-label]::before { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) table.fit-cards > thead > tr > th.fit-sort button { --radius: var(--hl-r-full); background: var(--hl-surface2); border-color: var(--hl-outline); color: var(--hl-ink); font: var(--hl-t-caption); }
html[data-look="app"]:not(#hl-x) table.fit-cards > thead > tr > th.fit-sort.on button { background: var(--hl-primary); color: var(--hl-on-primary); border-color: var(--hl-primary); }

/* ============================== 10. empty, error, loading ============================== */
html[data-look="app"]:not(#hl-x) .empty { padding: var(--hl-s-x3l); font: var(--hl-t-body-sm); color: var(--hl-muted); text-align: center; }
html[data-look="app"]:not(#hl-x) .empty::before { content: ""; display: block; width: 25%; max-width: 120px; height: 4px; margin: 0 auto var(--hl-s-l); border-radius: 4px; background: var(--hl-outline); }
html[data-look="app"]:not(#hl-x) :is(td, li) > .empty::before, html[data-look="app"]:not(#hl-x) .qs-list .empty::before { display: none; }
html[data-look="app"]:not(#hl-x) .empty svg { color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .skel { padding: var(--hl-card-pad); gap: var(--hl-card-gap); background: var(--hl-surface); }
html[data-look="app"]:not(#hl-x) .skel i { --radius: var(--hl-r-sm); height: 14px; background: var(--hl-surface2); background-image: none; animation: hl-pulse 900ms ease-in-out infinite alternate; }
@keyframes hl-pulse { from { opacity: 1; } to { opacity: .55; } }
html[data-look="app"][data-hl-motion="reduce"]:not(#hl-x) .skel i { animation: none; }

/* ============================== 11. the shell (markup unchanged: aside.side, #nav, header.top) ============================== */
/* phones (< 600): the bottom bar keeps four tabs + More, drawn as the app's */
@media (max-width: 599px) {
  html[data-look="app"]:not(#hl-x) .side { background: var(--hl-surface); backdrop-filter: none; border-top: 1px solid var(--hl-hairline); padding-block: 0 var(--sa-b, 0px); }
  html[data-look="app"]:not(#hl-x) .nav { gap: 0; align-items: stretch; }
  html[data-look="app"]:not(#hl-x) :is(.nav a, .nav-more) { --radius: 0px; position: relative; min-height: 64px; min-width: 0; flex: 1 1 0; justify-content: center; gap: var(--hl-s-xs); padding: var(--hl-s-s) var(--hl-s-xxs); color: var(--hl-muted); font: var(--hl-t-caption); background: transparent; text-align: center; overflow-wrap: anywhere; }
  html[data-look="app"]:not(#hl-x) :is(.nav a.on, .nav-more.on) { color: var(--hl-ink); background: transparent; }
  html[data-look="app"]:not(#hl-x) :is(.nav a.on, .nav-more.on)::before { content: ""; display: block; position: absolute; inset: 0 25% auto; top: 0; height: 4px; width: auto; background: var(--hl-primary); border-radius: 0 0 4px 4px; }
  html[data-look="app"]:not(#hl-x) :is(.nav a, .nav-more) svg { width: 24px; height: 24px; }
  html[data-look="app"]:not(#hl-x) .main { padding: 0 0 calc(96px + var(--sa-b, 0px)); }
  html[data-look="app"]:not(#hl-x) .view { padding: 0 var(--hl-gutter); }
}
/* from 600: the side rail (120 wide, labels under the icons), from 1100 widened to 240 with labels beside them */
@media (min-width: 600px) {
  html[data-look="app"]:not(#hl-x) .app { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: none; min-height: 100vh; }
  html[data-look="app"]:not(#hl-x) .side {
    position: sticky; top: 0; inset: auto; z-index: 40; height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--hl-s-s); grid-template-areas: none;
    padding: calc(var(--sa-t, 0px) + var(--hl-s-m)) 0 calc(var(--sa-b, 0px) + var(--hl-s-m)); background: var(--hl-surface);
    border: 0; border-inline-end: 1px solid var(--hl-hairline); backdrop-filter: none; scrollbar-width: thin;
  }
  html[data-look="app"]:not(#hl-x) .brand { display: flex; justify-content: center; height: auto; padding: var(--hl-s-s); background: transparent; border: 0; }
  html[data-look="app"]:not(#hl-x) .brand-name { display: none; }
  html[data-look="app"]:not(#hl-x) .cmdslot { display: none; }
  html[data-look="app"]:not(#hl-x) .nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--hl-s-xxs); min-height: 0; background: transparent; flex: 1 0 auto; justify-content: flex-start; }
  html[data-look="app"]:not(#hl-x) .nav a {
    --radius: 0px; position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: var(--hl-s-xs);
    min-height: 64px; min-width: 0; padding: var(--hl-s-s) var(--hl-s-s); border: 0; background: transparent; color: var(--hl-muted); font: var(--hl-t-caption);
    white-space: normal; text-align: center; overflow-wrap: anywhere; box-shadow: none;
  }
  html[data-look="app"]:not(#hl-x) .nav a svg { width: 24px; height: 24px; }
  html[data-look="app"]:not(#hl-x) .nav a.on { color: var(--hl-ink); background: transparent; box-shadow: none; font-weight: 600; }
  html[data-look="app"]:not(#hl-x) .nav a.on::before { content: ""; display: block; position: absolute; inset-inline-start: 0; inset-inline-end: auto; left: auto; top: 50%; bottom: auto; width: 4px; height: 48px; margin-top: -24px; background: var(--hl-primary); border-radius: 0 4px 4px 0; }
  html[data-look="app"][dir="rtl"]:not(#hl-x) .nav a.on::before { border-radius: 4px 0 0 4px; }
  @media (hover: hover) { html[data-look="app"]:not(#hl-x) .nav a:hover { background: var(--hl-surface2); color: var(--hl-ink); } }
  html[data-look="app"]:not(#hl-x) .nav-more { display: none !important; }
  html[data-look="app"]:not(#hl-x) .nav-badge { position: absolute; top: 6px; inset-inline-end: 18px; margin: 0; }
  html[data-look="app"]:not(#hl-x) .side-foot { display: flex; flex-direction: column; align-items: center; gap: var(--hl-s-s); margin: 0; height: auto; padding: var(--hl-s-s) 0 0; background: transparent; border: 0; }
  html[data-look="app"]:not(#hl-x) .side-foot .set-btn { display: inline-flex; }
  html[data-look="app"]:not(#hl-x) .main { min-width: 0; max-width: none; padding: 0 0 var(--hl-s-x3l); }
  html[data-look="app"]:not(#hl-x) .view { padding: 0 var(--hl-gutter) var(--hl-s-x3l); }
}
@media (min-width: 1100px) {
  html[data-look="app"]:not(#hl-x) .app { grid-template-columns: 240px minmax(0, 1fr); }
  html[data-look="app"]:not(#hl-x) .brand { justify-content: flex-start; padding: var(--hl-s-s) var(--hl-s-l); }
  html[data-look="app"]:not(#hl-x) .brand-name { display: inline; font: var(--hl-t-title-sm); font-family: var(--hl-display); color: var(--hl-ink); }
  html[data-look="app"]:not(#hl-x) .brand-name b { color: var(--hl-muted); font-weight: 400; }
  html[data-look="app"]:not(#hl-x) .nav { padding: 0 var(--hl-s-s); }
  html[data-look="app"]:not(#hl-x) .nav a { --radius: var(--hl-r-sm); flex-direction: row; justify-content: flex-start; min-height: 48px; padding: var(--hl-s-s) var(--hl-s-m); gap: var(--hl-s-m); font: var(--hl-t-body-sm); text-align: start; }
  html[data-look="app"]:not(#hl-x) .nav a.on { background: var(--hl-primary-soft); font-weight: 600; }
  html[data-look="app"]:not(#hl-x) .nav a.on::before { inset-inline-start: calc(-1 * var(--hl-s-s)); height: 32px; margin-top: -16px; }
  html[data-look="app"]:not(#hl-x) .nav-badge { position: static; margin-inline-start: auto; }
  html[data-look="app"]:not(#hl-x) .side-foot { flex-direction: row; justify-content: flex-start; padding: var(--hl-s-s) var(--hl-s-l) 0; }
}
/* the top bar: surface, at least 56 tall, the page title and its line, Find and Refresh; it wraps instead of truncating */
html[data-look="app"]:not(#hl-x) header.top {
  position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hl-s-s) var(--hl-s-m);
  min-height: 56px; margin: 0 0 var(--hl-gutter); padding: calc(var(--sa-t, 0px) + var(--hl-s-s)) var(--hl-gutter) var(--hl-s-s);
  background: var(--hl-surface); border-bottom: 1px solid var(--hl-hairline);
}
html[data-look="app"].in-app:not(#hl-x) .main { padding-top: 0; }
html[data-look="app"]:not(#hl-x) header.top h1 { font: var(--hl-t-title); margin: 0; color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) header.top .sub { font: var(--hl-t-body-sm); color: var(--hl-muted); margin: var(--hl-s-xxs) 0 0; }
html[data-look="app"]:not(#hl-x) .top-actions { display: flex; flex-wrap: wrap; gap: var(--hl-s-s); align-items: center; }
html[data-look="app"]:not(#hl-x) .qs-btn { --radius: var(--hl-r-sm); flex: 0 1 auto; max-width: none; height: auto; min-height: var(--hl-desk-btn); background: var(--hl-surface2); color: var(--hl-muted); border: 1px solid var(--hl-outline); font: var(--hl-t-body-sm); }
html[data-look="app"]:not(#hl-x) .qs-btn kbd { font: var(--hl-t-caption); padding: 0 var(--hl-s-xs); border: 1px solid var(--hl-hairline); background: var(--hl-surface); color: var(--hl-muted); --radius: var(--hl-r-xs); }
html[data-look="app"].touch:not(#hl-x) .qs-btn { display: none; }
/* the status Line: 3 px, full width, directly under the top bar (look-kit.js statusLine) */
html[data-look="app"] .hl-status-line { position: absolute; inset-inline: 0; bottom: -3px; height: 3px; z-index: 1; pointer-events: none; background: var(--hl-live); }
html[data-look="app"] .hl-status-line[data-state="waiting"] { background: repeating-linear-gradient(90deg, var(--hl-muted) 0 8px, transparent 8px 14px); background-size: 14px 3px; animation: hl-march 1.2s linear infinite; }
html[data-look="app"][dir="rtl"] .hl-status-line[data-state="waiting"] { animation-direction: reverse; }
html[data-look="app"] .hl-status-line[data-state="syncing"] { background: repeating-linear-gradient(90deg, var(--hl-live) 0 8px, transparent 8px 14px); animation: hl-join 400ms var(--hl-ease-standard) forwards; }
html[data-look="app"] .hl-status-line[data-state="refused"] { background: linear-gradient(90deg, var(--hl-danger) 0 16px, transparent 16px 26px, var(--hl-danger) 26px); }
html[data-look="app"][dir="rtl"] .hl-status-line[data-state="refused"] { background: linear-gradient(270deg, var(--hl-danger) 0 16px, transparent 16px 26px, var(--hl-danger) 26px); }
html[data-look="app"] .hl-status-tap { position: absolute; inset-inline: 0; bottom: -12px; height: 12px; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; }
html[data-look="app"] .hl-status-tap[hidden] { display: none; }
@keyframes hl-march { to { background-position: 14px 0; } }
@keyframes hl-join { from { background-size: 14px 3px; opacity: .6; } to { background-size: 14px 3px; opacity: 1; } }
html[data-look="app"][data-hl-motion="reduce"] .hl-status-line { animation: none !important; }
html[data-look="app"] .hl-notlive { display: flex; align-items: center; gap: var(--hl-s-s); margin: 0 var(--hl-gutter) var(--hl-s-m); padding: var(--hl-s-s) var(--hl-s-m); border-radius: var(--hl-r-sm); background: var(--hl-warning-container); color: var(--hl-on-warning-container); font: var(--hl-t-body-sm); }
html[data-look="app"] .hl-notlive[hidden] { display: none; }
html[data-look="app"] .hl-notlive button { margin-inline-start: auto; }
/* the old connection pill stays in the page for anything that reads it, never shown */
html[data-look="app"]:not(#hl-x) .live { display: none; }
/* the Night Desk footer strip: the keyboard hints move into the Find sheet, the server facts stay as a quiet line */
html[data-look="app"]:not(#hl-x) .nd-foot { position: static; display: flex; flex-wrap: wrap; gap: var(--hl-s-s) var(--hl-s-l); min-height: 0; margin: var(--hl-s-x3l) var(--hl-gutter) 0; padding: var(--hl-s-m) 0; background: transparent; border-top: 1px solid var(--hl-hairline); color: var(--hl-muted); font: var(--hl-t-caption); }
html[data-look="app"]:not(#hl-x) .nd-foot > span { display: none; }
html[data-look="app"]:not(#hl-x) .nd-foot .host { display: flex; flex-wrap: wrap; gap: var(--hl-s-s) var(--hl-s-l); margin: 0; padding: 0; border: 0; background: transparent; font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .nd-foot .host b { color: var(--hl-ink); font-weight: 500; }
html[data-look="app"]:not(#hl-x) .nd-foot .host b.ok-t { color: var(--hl-success); } html[data-look="app"]:not(#hl-x) .nd-foot .host b.fail-t { color: var(--hl-danger); }
@media (max-width: 599px) { html[data-look="app"]:not(#hl-x) .nd-foot { display: none; } }
/* the usage-limit bar reserves its line (look-kit reserve()) and is the app's warning container, not the accent */
html[data-look="app"]:not(#hl-x) #limitbar { --radius: var(--hl-r-sm); margin: 0 var(--hl-gutter) var(--hl-s-m); padding: var(--hl-s-s) var(--hl-s-m); border: 0; border-inline-start: 4px solid var(--hl-warning); background: var(--hl-warning-container); color: var(--hl-on-warning-container); font: var(--hl-t-body-sm); }
html[data-look="app"]:not(#hl-x) #limitbar b { color: var(--hl-on-warning-container); }
html[data-look="app"]:not(#hl-x) #limitbar .said { color: var(--hl-on-warning-container); font-family: var(--hl-font); font-size: var(--hl-fs-caption); }
/* the logo keeps its shapes in ink and signal */
html[data-look="app"]:not(#hl-x) :is(.mark, .mark-lg, .more-mark) { --radius: var(--hl-r-sm); background: var(--hl-surface2); box-shadow: inset 0 0 0 1px var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) .mark svg rect[fill="#ECE8E1"], html[data-look="app"]:not(#hl-x) .mark-lg svg rect[fill="#ECE8E1"], html[data-look="app"]:not(#hl-x) .more-mark svg rect[fill="#ECE8E1"] { fill: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .mark svg rect[fill="#FFB000"], html[data-look="app"]:not(#hl-x) .mark-lg svg rect[fill="#FFB000"], html[data-look="app"]:not(#hl-x) .more-mark svg rect[fill="#FFB000"] { fill: var(--hl-signal); stroke: var(--hl-ink); stroke-width: 0; }
html[data-look="app"][data-hl-signal-edge]:not(#hl-x) :is(.mark, .mark-lg, .more-mark) svg rect[fill="#FFB000"] { stroke-width: 1px; }
/* Find on touch: the app's floating action button */
html[data-look="app"].touch:not(#hl-x) #app:not([hidden]) .findfab { --radius: 16px; background: var(--hl-primary); color: var(--hl-on-primary); font: var(--hl-t-label); min-height: 56px; box-shadow: var(--hl-shadow-float); padding: 0 var(--hl-s-xl) 0 var(--hl-s-l); }
html[data-look="app"][data-hl-dark].touch:not(#hl-x) #app:not([hidden]) .findfab { box-shadow: 0 0 0 1px var(--hl-outline); }

/* ============================== 12. sheets, drawer, overlays, messages ============================== */
html[data-look="app"]:not(#hl-x) :is(.drawer-back, .more-back, .qs-back, .hl-scrim) { background: var(--hl-scrim); backdrop-filter: none; }
html[data-look="app"]:not(#hl-x) .drawer-panel { background: var(--hl-surface); border: 0; box-shadow: var(--hl-shadow-float); padding: calc(var(--hl-s-xxl) + var(--sa-t, 0px)) var(--hl-gutter) calc(var(--hl-s-x4l) + var(--sa-b, 0px)); }
@media (min-width: 600px) {
  html[data-look="app"]:not(#hl-x) .drawer-panel { border-radius: 20px 0 0 20px !important; border-inline-start: 1px solid var(--hl-hairline); animation: hl-side-in var(--hl-enter) var(--hl-ease-decel); }
  html[data-look="app"][dir="rtl"]:not(#hl-x) .drawer-panel { border-radius: 0 20px 20px 0 !important; animation-name: hl-side-in-rtl; }
}
@media (max-width: 599px) {
  html[data-look="app"]:not(#hl-x) .drawer-panel { top: auto; bottom: 0; inset-inline: 0; left: 0; right: 0; width: 100%; height: auto; max-height: calc(100dvh - var(--sa-t, 0px) - 24px); border-radius: 20px 20px 0 0 !important; border-top: 1px solid var(--hl-hairline); animation: hl-sheet-in var(--hl-enter) var(--hl-ease-decel); }
}
@keyframes hl-side-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes hl-side-in-rtl { from { transform: translateX(-24px); opacity: 0; } }
@keyframes hl-sheet-in { from { transform: translateY(32px); opacity: 0; } }
html[data-look="app"]:not(#hl-x) .d-head h2 { font: var(--hl-t-title); }
html[data-look="app"]:not(#hl-x) .d-head p { font: var(--hl-t-body-sm); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .more-panel { border-radius: 20px 20px 0 0 !important; background: var(--hl-surface); border: 0; border-top: 1px solid var(--hl-hairline); box-shadow: var(--hl-shadow-float); padding: 0 var(--hl-gutter) calc(var(--hl-s-l) + var(--sa-b, 0px)); animation: hl-sheet-in var(--hl-enter) var(--hl-ease-decel); }
html[data-look="app"]:not(#hl-x) .more-grip { display: block; width: 32px; height: 4px; margin: 22px auto 22px; background: var(--hl-outline); border-radius: 4px !important; }
html[data-look="app"]:not(#hl-x) .more-grid { gap: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) .more-grid a { --radius: var(--hl-r-md); min-height: 88px; padding: var(--hl-s-m) var(--hl-s-xs); background: var(--hl-surface2); border: 1px solid var(--hl-hairline); color: var(--hl-ink); font: var(--hl-t-caption); font-weight: 600; }
html[data-look="app"]:not(#hl-x) .more-grid a svg { color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .more-grid a.on { background: var(--hl-primary-soft); border: 2px solid var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .more-grid a.on svg { color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .more-acts { border-top: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) :is(.more-acts button, .more-acts a) { --radius: var(--hl-r-sm); min-height: 56px; font: var(--hl-t-body); color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .qs-panel { --radius: var(--hl-r-lg); background: var(--hl-surface); border: 1px solid var(--hl-hairline); box-shadow: var(--hl-shadow-float); }
html[data-look="app"].touch:not(#hl-x) .qs-panel { border-radius: 20px 20px 0 0 !important; }
html[data-look="app"]:not(#hl-x) .qs-head { border-bottom: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) .qs-head b { font: var(--hl-t-title-sm); }
html[data-look="app"]:not(#hl-x) .qs-head b svg { color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .qs-in input { font: var(--hl-t-body); }
html[data-look="app"]:not(#hl-x) :is(.qs-it.on, .qs-it:hover) { background: var(--hl-surface2); box-shadow: inset 4px 0 0 var(--hl-primary); }
html[data-look="app"][dir="rtl"]:not(#hl-x) :is(.qs-it.on, .qs-it:hover) { box-shadow: inset -4px 0 0 var(--hl-primary); }
html[data-look="app"]:not(#hl-x) .qs-ic { --radius: var(--hl-r-sm); background: var(--hl-surface2); border: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) .qs-t b { font: var(--hl-t-body-strong); } html[data-look="app"]:not(#hl-x) .qs-t small, html[data-look="app"]:not(#hl-x) .qs-k { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"] .hl-qs-foot { display: flex; flex-wrap: wrap; gap: var(--hl-s-l); padding: var(--hl-s-s) var(--hl-s-l); border-top: 1px solid var(--hl-hairline); color: var(--hl-muted); font: var(--hl-t-caption); }
html[data-look="app"] .hl-qs-foot kbd { font: var(--hl-t-caption); padding: 0 var(--hl-s-xs); border: 1px solid var(--hl-hairline); border-radius: var(--hl-r-xs); background: var(--hl-surface2); color: var(--hl-ink); }
html[data-look="app"].touch .hl-qs-foot { display: none; }
html[data-look="app"]:not(#hl-x) .tip { --radius: var(--hl-r-sm); background: var(--hl-ink); color: var(--hl-surface); border: 0; font: var(--hl-t-caption); box-shadow: var(--hl-shadow-float); }
/* the message bar (HlSnackbar): ink panel in the thumb zone; the old #toast element is the same bar */
html[data-look="app"]:not(#hl-x) :is(.toast, .hl-snackbar) {
  --radius: var(--hl-r-md); display: flex; align-items: center; gap: var(--hl-s-m); max-width: min(560px, calc(100vw - 2 * var(--hl-gutter)));
  padding: var(--hl-s-m) var(--hl-s-l); background: var(--hl-ink); color: var(--hl-surface); border: 0; font: var(--hl-t-body-sm); box-shadow: var(--hl-shadow-float);
  bottom: calc(var(--hl-gutter) + max(var(--bottombar, 0px), var(--sa-b, 0px))); animation: hl-sheet-in var(--hl-enter) var(--hl-ease-decel);
}
html[data-look="app"]:not(#hl-x) .toast button { --radius: var(--hl-r-full); min-height: 40px; padding: 0 var(--hl-s-l); border: 0; background: var(--hl-surface); color: var(--hl-ink); font: var(--hl-t-label); cursor: pointer; }
/* confirm sheet (look-kit confirmSheet): bottom sheet below 600, centred dialog from 600 */
html[data-look="app"] .hl-sheet-host { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; justify-content: center; }
html[data-look="app"] .hl-sheet-host .hl-scrim { position: absolute; inset: 0; }
html[data-look="app"] .hl-sheet { position: relative; width: 100%; max-height: calc(100dvh - 48px); overflow: auto; background: var(--hl-surface); color: var(--hl-ink); border-radius: 20px 20px 0 0; border-top: 1px solid var(--hl-hairline); box-shadow: var(--hl-shadow-float); padding: 0 var(--hl-gutter) calc(var(--hl-gutter) + var(--sa-b, 0px)); animation: hl-sheet-in var(--hl-enter) var(--hl-ease-decel); }
html[data-look="app"] .hl-sheet-handle { display: block; width: 48px; height: 48px; margin: 0 auto; border: 0; background: transparent; cursor: pointer; position: relative; }
html[data-look="app"] .hl-sheet-handle::after { content: ""; position: absolute; left: 8px; right: 8px; top: 22px; height: 4px; border-radius: 4px; background: var(--hl-outline); }
html[data-look="app"] .hl-sheet h2 { font: var(--hl-t-title); margin: 0 0 var(--hl-s-s); }
html[data-look="app"] .hl-sheet p { font: var(--hl-t-body); color: var(--hl-ink); margin: 0 0 var(--hl-s-l); white-space: pre-line; }
html[data-look="app"] .hl-sheet-acts { display: flex; flex-wrap: wrap; gap: var(--hl-s-s); justify-content: flex-end; }
html[data-look="app"] .hl-sheet-acts .btn { min-height: var(--hl-btn-h); flex: 1 1 160px; justify-content: center; }
@media (min-width: 600px) {
  html[data-look="app"] .hl-sheet-host { align-items: center; }
  html[data-look="app"] .hl-sheet { width: min(480px, calc(100vw - 48px)); border-radius: 20px; border: 1px solid var(--hl-hairline); padding-top: var(--hl-s-xxl); }
  html[data-look="app"] .hl-sheet-handle { display: none; }
  html[data-look="app"] .hl-sheet-acts .btn { min-height: 48px; flex: 0 0 auto; }
}
html[data-look="app"][data-hl-motion="reduce"] :is(.hl-sheet, .drawer-panel, .more-panel, .toast, .hl-snackbar) { animation: none !important; }

/* ============================== 13. login and password change ============================== */
html[data-look="app"]:not(#hl-x) .login { background: var(--hl-bg); }
html[data-look="app"]:not(#hl-x) .login-card { --radius: var(--hl-r-md); padding: var(--hl-s-x3l) var(--hl-s-xxl) var(--hl-s-xxl); width: min(420px, 100%); }
html[data-look="app"]:not(#hl-x) .login-card h1 { font: var(--hl-t-headline); margin: 0 0 var(--hl-s-xs); }
html[data-look="app"]:not(#hl-x) .login-card > p { font: var(--hl-t-body); color: var(--hl-muted); margin: 0 0 var(--hl-s-xxl); }
html[data-look="app"]:not(#hl-x) .login .btn { width: 100%; justify-content: center; }
html[data-look="app"]:not(#hl-x) .login-card, html[data-look="app"]:not(#hl-x) .login-card .field { min-width: 0; max-width: 100%; }
html[data-look="app"]:not(#hl-x) .login-card .field input { width: 100%; min-width: 0; }
html[data-look="app"]:not(#hl-x) .login-card .lang-link { max-width: 100%; white-space: normal; }
html[data-look="app"]:not(#hl-x) .lang-link { --radius: var(--hl-r-full); min-height: 40px; font: var(--hl-t-caption); font-weight: 600; }

/* ============================== 14. settings ============================== */
html[data-look="app"]:not(#hl-x) .set-page { gap: var(--hl-card-gap); max-width: 720px; }
html[data-look="app"]:not(#hl-x) .set-card { padding: 0; overflow: hidden; }
html[data-look="app"]:not(#hl-x) .set-h { font: var(--hl-t-title-sm); color: var(--hl-ink); padding: var(--hl-card-pad); border-bottom: 1px solid var(--hl-hairline); margin: 0; }
html[data-look="app"]:not(#hl-x) .set-row { padding: var(--hl-s-m) var(--hl-card-pad); border-bottom: 1px solid var(--hl-hairline); min-height: var(--hl-row-min); }
html[data-look="app"]:not(#hl-x) .set-row:last-child { border-bottom: 0; }
html[data-look="app"]:not(#hl-x) .set-row b { font: var(--hl-t-body-strong); }
html[data-look="app"]:not(#hl-x) .set-row small, html[data-look="app"]:not(#hl-x) .set-note { font: var(--hl-t-body-sm); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .set-who { color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .ap-lock { font: var(--hl-t-caption); color: var(--hl-muted); }
/* the Appearance card (appearance.js, in the order of the app's AppearanceScreen) */
html[data-look="app"] .hl-ap-preview { margin: var(--hl-card-pad); padding: var(--hl-card-pad); border-radius: var(--hl-r-xl); background: var(--hl-bg); border: 1px solid var(--hl-hairline); display: grid; gap: var(--hl-s-m); }
html[data-look="app"] .hl-ap-mini { position: relative; display: grid; gap: var(--hl-s-xs); padding: var(--hl-card-pad); padding-inline-start: calc(var(--hl-card-pad) + 8px); border-radius: var(--hl-r-md); background: var(--hl-surface); border: 1px solid var(--hl-hairline); overflow: hidden; }
html[data-look="app"] .hl-ap-mini::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--hl-signal); }
html[data-look="app"][data-hl-signal-edge] .hl-ap-mini::before { box-shadow: 1px 0 0 var(--hl-ink); }
html[data-look="app"] .hl-ap-mini b { font: var(--hl-t-body-strong); } html[data-look="app"] .hl-ap-mini small { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"] .hl-ap-line { height: 3px; border-radius: 2px; background: var(--hl-live); }
html[data-look="app"] .hl-ap-btns { display: flex; flex-wrap: wrap; gap: var(--hl-s-s); }
html[data-look="app"] .hl-ap-group { padding: var(--hl-s-m) var(--hl-card-pad); border-top: 1px solid var(--hl-hairline); display: grid; gap: var(--hl-s-s); }
html[data-look="app"] .hl-ap-group > b { font: var(--hl-t-body-strong); }
html[data-look="app"] .hl-ap-group > small { font: var(--hl-t-body-sm); color: var(--hl-muted); }
html[data-look="app"] .hl-ap-chips { display: flex; flex-wrap: wrap; gap: var(--hl-s-s); }
html[data-look="app"] .hl-ap-chips button { display: inline-flex; align-items: center; gap: var(--hl-s-s); min-height: 48px; padding: var(--hl-s-s) var(--hl-s-l); border-radius: var(--hl-r-full); border: 1px solid var(--hl-outline); background: var(--hl-surface2); color: var(--hl-ink); font: var(--hl-t-label); font-size: var(--hl-fs-body-sm); cursor: pointer; }
html[data-look="app"] .hl-ap-chips button[aria-pressed="true"] { background: var(--hl-primary); color: var(--hl-on-primary); border-color: var(--hl-primary); }
html[data-look="app"] .hl-ap-chips button:disabled { cursor: not-allowed; background: var(--hl-surface2); color: var(--hl-muted); border-color: var(--hl-hairline); }
html[data-look="app"] .hl-sw { display: inline-grid; grid-template-columns: 1fr 1fr; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--hl-outline); flex: none; }
html[data-look="app"] .hl-sw i { display: block; }
html[data-look="app"] .hl-ap-key { display: flex; flex-wrap: wrap; gap: var(--hl-s-s); }
html[data-look="app"] .hl-ap-key span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--hl-s-m); border-radius: var(--hl-r-sm); font: var(--hl-t-caption); font-weight: 600; }
html[data-look="app"] .hl-ap-aa { margin: 0; padding: var(--hl-s-m) var(--hl-card-pad); border-top: 1px solid var(--hl-hairline); font: var(--hl-t-body-sm); color: var(--hl-muted); }
html[data-look="app"] .hl-ap-msg { font: var(--hl-t-body-sm); color: var(--hl-danger); margin: 0; padding: 0 var(--hl-card-pad) var(--hl-s-m); }
html[data-look="app"] .hl-ap-msg:empty { display: none; }

/* ============================== 15. app components for moved pages (.hl-*) ============================== */
html[data-look="app"] .hl-card { position: relative; background: var(--hl-surface); border: 1px solid var(--hl-hairline); border-radius: var(--hl-r-md); padding: var(--hl-card-pad); }
html[data-look="app"] .hl-card.is-selected { border: 2px solid var(--hl-ink); }
html[data-look="app"] .hl-card[data-line] { padding-inline-start: calc(var(--hl-card-pad) + 4px); overflow: hidden; }
html[data-look="app"] .hl-card[data-line]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; }
html[data-look="app"] .hl-card[data-line="todo"]::before { background: var(--hl-outline); }
html[data-look="app"] .hl-card[data-line="warn"]::before { background: var(--hl-warning); }
html[data-look="app"] .hl-card[data-line="done"]::before { background: var(--hl-signal); }
html[data-look="app"][data-hl-signal-edge] .hl-card[data-line="done"]::before { box-shadow: 1px 0 0 var(--hl-ink); }
html[data-look="app"][dir="rtl"][data-hl-signal-edge] .hl-card[data-line="done"]::before { box-shadow: -1px 0 0 var(--hl-ink); }
html[data-look="app"] .hl-card[data-line="sync"]::before { background: repeating-linear-gradient(180deg, var(--hl-signal) 0 6px, transparent 6px 10px); }
html[data-look="app"] .hl-card[data-line="fail"]::before { background: linear-gradient(180deg, var(--hl-danger) 0 35%, transparent 35% calc(35% + 8px), var(--hl-danger) calc(35% + 8px)); }
html[data-look="app"] .hl-skeleton { display: grid; gap: var(--hl-card-gap); }
html[data-look="app"] .hl-skeleton > i { display: block; min-height: var(--hl-row-min); border-radius: var(--hl-r-md); background: var(--hl-surface2); animation: hl-pulse 900ms ease-in-out infinite alternate; }
html[data-look="app"][data-hl-motion="reduce"] .hl-skeleton > i { animation: none; }
html[data-look="app"] :is(.hl-empty, .hl-error) { display: grid; justify-items: center; gap: var(--hl-s-s); padding: var(--hl-s-x3l); text-align: center; }
html[data-look="app"] :is(.hl-empty, .hl-error)::before { content: ""; width: 25%; max-width: 120px; height: 4px; border-radius: 4px; background: var(--hl-outline); margin-bottom: var(--hl-s-s); }
html[data-look="app"] :is(.hl-empty, .hl-error) b { font: var(--hl-t-title-sm); }
html[data-look="app"] .hl-empty p { font: var(--hl-t-body-sm); color: var(--hl-muted); margin: 0; }
html[data-look="app"] .hl-error p { font: var(--hl-t-body-sm); color: var(--hl-danger); margin: 0; }
html[data-look="app"] .hl-new-pill { position: sticky; top: 64px; z-index: 5; display: block; margin: 0 auto var(--hl-s-s); min-height: 40px; padding: 0 var(--hl-s-l); border: 0; border-radius: var(--hl-r-full); background: var(--hl-signal); color: var(--hl-on-signal); font: var(--hl-t-label); cursor: pointer; }
html[data-look="app"][data-hl-signal-edge] .hl-new-pill { box-shadow: 0 0 0 1px var(--hl-ink); }
html[data-look="app"] .hl-changed { animation: hl-changed 1.2s var(--hl-ease-standard); }
@keyframes hl-changed { from { background-color: var(--hl-surface2); } to { background-color: transparent; } }
html[data-look="app"][data-hl-motion="reduce"] .hl-changed { animation: none; }
html[data-look="app"] .hl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the page swap (look-kit swapView): the old page stays over the new one until it is ready */
html[data-look="app"] .hl-ghost { position: absolute; z-index: 2; pointer-events: none; }
html[data-look="app"] #view.hl-under { visibility: hidden; }

/* ============================== 16. print is left as it was ============================== */
@media print { html[data-look="app"] .hl-status-line, html[data-look="app"] .hl-notlive, html[data-look="app"] .hl-ghost { display: none !important; } }
/* the guide button's place is kept from the first paint, so nothing in the top bar moves when it arrives (J8) */
html[data-look="app"] .top-actions .hl-slot { display: inline-block; width: var(--hl-desk-btn); height: var(--hl-desk-btn); flex: none; }
html[data-look="app"].touch .top-actions .hl-slot { width: 48px; height: 48px; }
/* Night Desk forces every corner inside the page through var(--radius) with !important: the app components say theirs */
html[data-look="app"]:not(#hl-x) :is(.hl-card, .hl-ap-mini, .hl-skeleton > i, .toast, .hl-snackbar) { --radius: var(--hl-r-md); }
html[data-look="app"]:not(#hl-x) :is(.hl-ap-chips button, .hl-sw, .hl-new-pill, .toast button) { --radius: var(--hl-r-full); }
html[data-look="app"]:not(#hl-x) .hl-ap-preview { --radius: var(--hl-r-xl); }
html[data-look="app"]:not(#hl-x) :is(.hl-ap-key span, .hl-notlive, .top-actions .hl-slot) { --radius: var(--hl-r-sm); }
html[data-look="app"]:not(#hl-x) .hl-ap-line { --radius: 2px; }

/* LOOK-008: the owner's "Old look / New look" switch (app.js lookSwitchHtml). It lives in both looks, so the base rules
   are not scoped to the app look. Where it shows: old look - the top bar from 861, the More sheet below; app look - the
   top bar from 1100, the rail's foot from 600 to 1099, the More sheet below 600. Every choice is at least 48 tall. */
.look-sw { display: inline-flex; flex-wrap: nowrap; gap: 4px; }
.look-sw button { min-height: 48px; min-width: 48px; padding: 0 14px; cursor: pointer; }
.more-acts :is(.look-sw, .nav-sw) { display: flex; width: 100%; margin-top: 8px; }
.more-acts :is(.look-sw, .nav-sw) button { flex: 1 1 0; justify-content: center; }
html:not([data-look="app"]) .side-foot .look-sw { display: none; }
@media (max-width: 860px) { html:not([data-look="app"]) .top-actions .look-sw { display: none; } }
@media (max-width: 1099px) { html[data-look="app"]:not(#hl-x) .top-actions .look-sw { display: none; } }
@media (min-width: 1100px), (max-width: 599px) { html[data-look="app"]:not(#hl-x) .side-foot .look-sw { display: none; } }
html[data-look="app"]:not(#hl-x) .side-foot .look-sw { flex-direction: column; width: 100%; padding: 0 var(--hl-s-s); }
html[data-look="app"]:not(#hl-x) .side-foot .look-sw button { width: 100%; padding: var(--hl-s-xs); font-size: var(--hl-fs-caption); white-space: normal; justify-content: center; }
/* labels wrap rather than run off a narrow screen (the app wraps, it never cuts a label) */
html[data-look="app"]:not(#hl-x) :is(.btn, .icon-btn):not(.pv *) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* the top bar keeps Find, Refresh and the switch on its first row whatever the page's line says (a longer purpose line
   wraps inside its own block instead of pushing the buttons down: nothing moves when the page changes) */
html[data-look="app"]:not(#hl-x) header.top { flex-wrap: nowrap; align-items: flex-start; }
html[data-look="app"]:not(#hl-x) header.top > div:first-child { flex: 1 1 auto; min-width: 0; }
html[data-look="app"]:not(#hl-x) header.top .top-actions { flex: 0 0 auto; flex-wrap: nowrap; }
@media (max-width: 599px) { html[data-look="app"]:not(#hl-x) header.top { flex-wrap: wrap; } html[data-look="app"]:not(#hl-x) header.top .top-actions { flex-wrap: wrap; } }
/* while a page is being swapped the server line under the pages waits out of sight (it would jump with the height) */
html[data-look="app"] .main.hl-swapping .nd-foot { visibility: hidden; }
/* without the app look the Find sheet keeps its old footer-less form, and the guide button has no reserved slot */
html:not([data-look="app"]) .hl-qs-foot, html:not([data-look="app"]) .top-actions .hl-slot { display: none; }
/* a table shown as cards never keeps the desktop minimum width its page gave it (Promotions at 1024 with the largest text) */
html[data-look="app"]:not(#hl-x) table.fit-cards { min-width: 0; }

/* ============================== 17. US3 G1: the card Line on rows and list items that carry a state ============================== */
/* A problem row inside a card, and a table row with a state, show the same Line as a card, on the inline-start edge;
   the state word stays beside it (a Line is never the only sign). */
html[data-look="app"]:not(#hl-x) .issue[data-line] { position: relative; padding-inline-start: calc(var(--hl-s-m) + 4px); }
html[data-look="app"]:not(#hl-x) :is(.issue[data-line], tr[data-line] > td:first-child)::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; width: 4px; border-radius: 2px; }
html[data-look="app"]:not(#hl-x) tr[data-line] > td:first-child { position: relative; padding-inline-start: calc(var(--hl-s-m) + 4px); }
html[data-look="app"]:not(#hl-x) :is(.issue, tr > td:first-child)[data-line="todo"]::before, html[data-look="app"]:not(#hl-x) tr[data-line="todo"] > td:first-child::before { background: var(--hl-outline); }
html[data-look="app"]:not(#hl-x) .issue[data-line="warn"]::before, html[data-look="app"]:not(#hl-x) tr[data-line="warn"] > td:first-child::before { background: var(--hl-warning); }
html[data-look="app"]:not(#hl-x) .issue[data-line="done"]::before, html[data-look="app"]:not(#hl-x) tr[data-line="done"] > td:first-child::before { background: var(--hl-signal); }
html[data-look="app"][data-hl-signal-edge]:not(#hl-x) :is(.issue[data-line="done"], tr[data-line="done"] > td:first-child)::before { box-shadow: 0 0 0 1px var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .issue[data-line="sync"]::before, html[data-look="app"]:not(#hl-x) tr[data-line="sync"] > td:first-child::before { background: repeating-linear-gradient(180deg, var(--hl-signal) 0 6px, transparent 6px 10px); }
html[data-look="app"]:not(#hl-x) .issue[data-line="fail"]::before, html[data-look="app"]:not(#hl-x) tr[data-line="fail"] > td:first-child::before { background: linear-gradient(180deg, var(--hl-danger) 0 35%, transparent 35% calc(35% + 8px), var(--hl-danger) calc(35% + 8px)); }
/* cards in the owner overview: tiles, agents and strips are app cards; the old 1 px butting is gone */
html[data-look="app"]:not(#hl-x) .agent.hl-card { display: flex; flex-direction: column; gap: var(--hl-s-xs); }
html[data-look="app"]:not(#hl-x) .agent .a-name { font: var(--hl-t-body-strong); }
html[data-look="app"]:not(#hl-x) :is(.agent .a-role, .agent .a-head) { font: var(--hl-t-body-sm); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .agent .a-foot { font: var(--hl-t-caption); color: var(--hl-muted); border-top: 1px solid var(--hl-hairline); padding-top: var(--hl-s-s); }
html[data-look="app"]:not(#hl-x) .ov-strip { gap: var(--hl-s-m); padding: var(--hl-card-pad); margin-top: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) .ov-strip .ov-ic { --radius: var(--hl-r-sm); background: var(--hl-surface2); border: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) :is(.ov-t b, .ov-h-t b) { font: var(--hl-t-body-strong); }
html[data-look="app"]:not(#hl-x) :is(.ov-t small, .ov-h-t) { font: var(--hl-t-body-sm); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .issue b { font: var(--hl-t-body-strong); } html[data-look="app"]:not(#hl-x) .issue p { font: var(--hl-t-body-sm); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .strip i { --radius: 2px; }
/* alerts and status: the module's state tags in the app's containers */
html[data-look="app"]:not(#hl-x) :is(.w3-badge, .d3-h) { --radius: var(--hl-r-full); font: var(--hl-t-caption); font-weight: 600; }
html[data-look="app"]:not(#hl-x) :is(.w3-badge.out, .d3-h.fail, .d3-h.missing, .d3-h.attention) { background: var(--hl-danger-container); color: var(--hl-on-danger-container); }
html[data-look="app"]:not(#hl-x) :is(.w3-badge.critical, .w3-badge.low, .d3-h.warn, .d3-h.partial, .d3-h.stale) { background: var(--hl-warning-container); color: var(--hl-on-warning-container); }
html[data-look="app"]:not(#hl-x) :is(.w3-badge.ok, .d3-h.ok) { background: var(--hl-success-container); color: var(--hl-on-success-container); }
html[data-look="app"]:not(#hl-x) .d3-h.running { background: var(--hl-primary-soft); color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .d3-h.off { background: var(--hl-surface2); color: var(--hl-muted); opacity: 1; }
html[data-look="app"]:not(#hl-x) .w3-item { gap: var(--hl-s-m); padding: var(--hl-card-pad); }
html[data-look="app"]:not(#hl-x) .w3-list { gap: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) .w3-t { font: var(--hl-t-body-strong); } html[data-look="app"]:not(#hl-x) .w3-s { font: var(--hl-t-body-sm); color: var(--hl-muted); opacity: 1; }
html[data-look="app"]:not(#hl-x) .d3-sec { padding: var(--hl-card-pad); margin-top: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) .d3-sec h3 { font: var(--hl-t-title-sm); }
html[data-look="app"]:not(#hl-x) :is(.d3-table th, .d3-table td) { font: var(--hl-t-body-sm); } html[data-look="app"]:not(#hl-x) .d3-table th { font: var(--hl-t-caption); color: var(--hl-muted); opacity: 1; }
html[data-look="app"]:not(#hl-x) .w3-tl li::before { border-color: var(--hl-primary); background: var(--hl-surface); }
html[data-look="app"]:not(#hl-x) :is(.w3-tl li.closed, .w3-tl li.received)::before { border-color: var(--hl-success); }
html[data-look="app"]:not(#hl-x) :is(.w3-tl li.qc, .w3-tl li.case)::before { border-color: var(--hl-warning); }
html[data-look="app"]:not(#hl-x) :is(.w3-tl li.claim, .w3-tl li.investigation)::before { border-color: var(--hl-danger); }

/* ============================== 18. US3 G2: money pages ============================== */
/* state tags on a tinted container use the container's own text colour (AA), never the plain state colour */
html[data-look="app"]:not(#hl-x) .s2-status { --radius: var(--hl-r-full); font: var(--hl-t-caption); font-weight: 600; }
html[data-look="app"]:not(#hl-x) .s2-status.critical { background: var(--hl-danger-container); color: var(--hl-on-danger-container); }
html[data-look="app"]:not(#hl-x) .s2-status.low { background: var(--hl-warning-container); color: var(--hl-on-warning-container); }
html[data-look="app"]:not(#hl-x) .s2-status.ok { background: var(--hl-success-container); color: var(--hl-on-success-container); }
html[data-look="app"]:not(#hl-x) .s2-status.idle { background: var(--hl-surface2); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) :is(.pr-st, .stm-st) { font: var(--hl-t-body-sm); font-weight: 600; }
html[data-look="app"]:not(#hl-x) :is(.pr-strip, .stm-strip, .dl-strip) { gap: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) :is(.s2-card-h h3, .stm-t caption, #kordia-map h3) { font: var(--hl-t-title-sm); }
html[data-look="app"]:not(#hl-x) :is(.s2-num, .stm-t td, .pr-t td) { font-variant-numeric: tabular-nums; }
html[data-look="app"]:not(#hl-x) :is(.pr-name, .s2-prod b) { font: var(--hl-t-body-strong); }
html[data-look="app"]:not(#hl-x) :is(.pr-sku, .pr-sub, .pr-int) { font: var(--hl-t-caption); color: var(--hl-muted); }

/* ============================== 19. US3 G4: work and claims ============================== */
html[data-look="app"]:not(#hl-x) .s3-state { --radius: var(--hl-r-full); font: var(--hl-t-caption); font-weight: 600; }
html[data-look="app"]:not(#hl-x) .s3-state.needs-reply { background: var(--hl-danger-container); color: var(--hl-on-danger-container); }
html[data-look="app"]:not(#hl-x) .s3-state.waiting { background: var(--hl-primary-soft); color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .s3-state.review { background: var(--hl-warning-container); color: var(--hl-on-warning-container); }
html[data-look="app"]:not(#hl-x) .s3-state.done { background: var(--hl-success-container); color: var(--hl-on-success-container); }
html[data-look="app"]:not(#hl-x) .s3-case { padding: var(--hl-card-pad); }
html[data-look="app"]:not(#hl-x) .s3-list { gap: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) .s3-title { font: var(--hl-t-body-strong); } html[data-look="app"]:not(#hl-x) :is(.s3-meta, .s3-note) { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .s3-money { font-variant-numeric: tabular-nums; font-weight: 600; }
html[data-look="app"]:not(#hl-x) :is(.wk, .cl) .card { padding: var(--hl-card-pad); }

/* ============================== 20. US3 G3: stock and warehouse ============================== */
/* the warehouse keeps big touch whatever the density: buttons at the spacious height on phones, fields at least 56,
   quantity steppers 64; scan frames and printed sheets are not touched */
@media (max-width: 599px) {
  html[data-look="app"].touch:not(#hl-x) :is(.wp, .rt) :is(.btn, .icon-btn):not(.small):not(.plk) { min-height: 72px; }
  html[data-look="app"].touch:not(#hl-x) :is(.wp, .rt) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) { min-height: 56px; font-size: max(17px, var(--hl-fs-body)); }
}
html[data-look="app"]:not(#hl-x) :is(.wp-card, .rt-card) { --radius: var(--hl-r-md); background: var(--hl-surface); border: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) :is(.inv-card) { --radius: var(--hl-r-md); }
html[data-look="app"]:not(#hl-x) :is(.inv-card img, .rs-img img, .rs-thumb, .w3-img, .d3-row img) { --radius: var(--hl-r-sm); }
html[data-look="app"]:not(#hl-x) :is(.hl-scanwrap, .hl-scanwrap *, .wh-scan, .sc-target, .scan-target, .hl-scan, .hl-scan *, video) { --radius: 0px; }
html[data-look="app"]:not(#hl-x) .cv-pill { --radius: var(--hl-r-full); font: var(--hl-t-caption); font-weight: 600; }
html[data-look="app"]:not(#hl-x) :is(.cv-pill.cv-out, .cv-pill.cv-critical) { background: var(--hl-danger-container); color: var(--hl-on-danger-container); }
html[data-look="app"]:not(#hl-x) .cv-pill.cv-low { background: var(--hl-warning-container); color: var(--hl-on-warning-container); }
html[data-look="app"]:not(#hl-x) .cv-pill.cv-ok { background: var(--hl-success-container); color: var(--hl-on-success-container); }
html[data-look="app"]:not(#hl-x) :is(.cv-pill.cv-overstock, .cv-pill.cv-still, .cv-pill.cv-idle) { background: var(--hl-surface2); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .rs-sug { display: grid; gap: var(--hl-card-gap); }
html[data-look="app"]:not(#hl-x) .rs-sug-act { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--hl-s-s) var(--hl-s-m); margin-top: var(--hl-s-m); }
html[data-look="app"]:not(#hl-x) .rs-sug-act label { display: grid; gap: var(--hl-s-xxs); font: var(--hl-t-caption); color: var(--hl-muted); }

/* ============================== 21. US3 G5: admin and the guide ============================== */
/* the guide's step card: the app's sheet look, at most 380 wide (GUIDE_CARD_MAX_WIDTH), primary button on primary */
html[data-look="app"]:not(#hl-x) .hlg-card { max-width: min(380px, calc(100vw - 2 * var(--hl-gutter))); background: var(--hl-surface); color: var(--hl-ink); border: 1px solid var(--hl-hairline); border-radius: var(--hl-r-lg); box-shadow: var(--hl-shadow-float); font: var(--hl-t-body-sm); }
html[data-look="app"]:not(#hl-x) .hlg-hole { border-radius: var(--hl-r-md); box-shadow: 0 0 0 2px var(--hl-ink), 0 0 0 200vmax var(--hl-scrim); }
html[data-look="app"]:not(#hl-x) .hlg-title { font: var(--hl-t-label); color: var(--hl-ink); letter-spacing: 0; }
html[data-look="app"]:not(#hl-x) .hlg-count { font: var(--hl-t-caption); color: var(--hl-muted); }
html[data-look="app"]:not(#hl-x) .hlg-dots i { background: var(--hl-hairline); } html[data-look="app"]:not(#hl-x) .hlg-dots i.on { background: var(--hl-primary); } html[data-look="app"]:not(#hl-x) .hlg-dots i.past { background: var(--hl-outline); }
html[data-look="app"]:not(#hl-x) .hlg-next { background: var(--hl-primary); color: var(--hl-on-primary); border-radius: var(--hl-r-sm); min-height: 48px; font: var(--hl-t-label); }
html[data-look="app"]:not(#hl-x) :is(.hlg-prev, .hlg-show) { background: transparent; color: var(--hl-ink); border: 1px solid var(--hl-outline); border-radius: var(--hl-r-sm); min-height: 48px; font: var(--hl-t-label); }
/* team, logs, creation and the lab: app tables, cards and the dialog */
html[data-look="app"]:not(#hl-x) .tm-av { --radius: 999px; }
html[data-look="app"]:not(#hl-x) :is(.cq-item, .lab-card) { --radius: var(--hl-r-md); background: var(--hl-surface); border: 1px solid var(--hl-hairline); }
html[data-look="app"]:not(#hl-x) .lab-rev { background: var(--hl-bg); color: var(--hl-ink); }
html[data-look="app"]:not(#hl-x) .log { font: var(--hl-t-code); font-size: var(--hl-fs-caption); }