/*
 * Kaos Korners, the v2 look (docs/look-v2-spec.md): the page shell overlay. Loaded only when
 * <html data-look="v2">, and every rule here is scoped by html[data-look="v2"], so the classic look
 * never reads it. Module screens add their own css/look-v2-<module>.css through ui_look_css().
 *
 * The scope adds weight to every selector, so where a classic rule used to outweigh a declaration
 * this file replaces, that rule is restated here under the scope (marked "restated").
 */

/* ------------------------------------------------------------ tokens */

html[data-look="v2"] {
  /* the header Scan button: a create-green tint of the bar, bar text on it */
  --color-scan-btn-bg: color-mix(in srgb, var(--color-create) 22%, var(--color-topbar-bg));
  --color-scan-btn-border: color-mix(in srgb, var(--color-create) 55%, var(--color-topbar-bg));
  /* the ground page content sits on, and the hairline a panel keeps where its surface equals that
     ground; the dark themes put content on the page tone, so their panels step up with no outline */
  --color-content-bg: var(--color-surface);
  --color-panel-edge: var(--color-border);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html[data-look="v2"] {
    --color-scan-btn-bg: var(--color-nav-hover-bg);
    --color-scan-btn-border: var(--color-topbar-muted);
  }
}

@media screen {
  html[data-look="v2"]:is([data-theme="dark"], [data-theme="dim"], [data-theme="amber"], [data-theme="phosphor"], [data-theme="synthwave"]) {
    --color-content-bg: var(--color-page-bg);
    --color-panel-edge: transparent;
    --color-th-bg: var(--color-content-bg);
  }
  /* The square themes' radii carry a unit, so the corner mark's min() and calc() stay valid. */
  html[data-look="v2"][data-theme="retro"] {
    --radius-badge: 0px;
    --radius-chip: 0px;
    --radius-control: 0px;
    --radius-panel: 0px;
    --radius-menu: 0px;
    --radius-round: 0px;
  }
  html[data-look="v2"][data-theme="hotdog"] {
    --mark-strength: 60%;          /* corner-mark lines on the coloured surface */
    --radius-control: 0px;
    --radius-panel: 0px;
    --radius-badge: 0px;
    --radius-chip: 0px;
    --radius-menu: 0px;
    --radius-round: 0px;
  }
  html[data-look="v2"][data-theme="platinum"] {
    --radius-control: 0px;
    --radius-panel: 0px;
    --radius-menu: 0px;
    --radius-round: 0px;
  }
  html[data-look="v2"]:is([data-theme="amber"], [data-theme="phosphor"]) {
    --radius-control: 0px;
    --radius-panel: 0px;
    --radius-badge: 0px;
    --radius-chip: 0px;
    --radius-menu: 0px;
    --radius-round: 0px;
  }
  html[data-look="v2"][data-theme="pocket"] {
    --mark-strength: 60%;          /* corner-mark lines on the coloured surface */
    --radius-control: 0px;
    --radius-panel: 0px;
    --radius-badge: 0px;
    --radius-chip: 0px;
    --radius-menu: 0px;
    --radius-round: 0px;
    --color-warn-ink: #4a2e00;     /* at least 4.5:1 on the surface, surface-alt and warn tint */
  }
}

/* ------------------------------------------------------------ main nav */

/* A menu with children carries a small chevron after its label. */
html[data-look="v2"] .nav-item.dropdown > .nav-link::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  opacity: .6;
  background: currentColor;
  -webkit-mask: url(../icons/chevron-down.svg) center / 12px no-repeat;
  mask: url(../icons/chevron-down.svg) center / 12px no-repeat;
}
/* The drawer's markup (nav.php .nav-drawer) is for the compact layout only. */
html[data-look="v2"] .nav-drawer { display: none; }

/* A featured entry (the Job Planner) rests on its soft tint with a mark in two opposite corners
   instead of the edge bar. */
html[data-look="v2"] .dropdown-menu > li.nav-featured > a { position: relative; --mark: var(--color-nav-featured-bar); box-shadow: none; }

/* ------------------------------------------------------------ header Scan button (scan-jump.js)

   div.scan-switch > button.scan-btn[data-scan-toggle] + div.scan-pop[role=dialog]. .is-live while a
   scan session runs in any tab ("Scanning · 19/25"). On a phone the popover docks under the bar. */
html[data-look="v2"] .scan-switch { position: relative; display: flex; flex: none; align-items: center; margin-left: auto; }
html[data-look="v2"] .scan-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-3) 0 10px;
  font: inherit;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  color: var(--color-topbar-text);
  background: var(--color-scan-btn-bg);
  border: 1px solid var(--color-scan-btn-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
html[data-look="v2"] .scan-btn:hover { border-color: var(--color-create); }
html[data-look="v2"] .scan-btn .icon { width: 16px; height: 16px; }
html[data-look="v2"] .scan-btn .scan-listen { flex: none; width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--color-create); }
html[data-look="v2"] .scan-btn[aria-expanded="true"] { border-color: var(--color-create); }
html[data-look="v2"] .scan-btn.is-live { color: var(--color-error-ink); background: var(--color-error-bg); border-color: var(--color-error-border); }
html[data-look="v2"] .scan-btn.is-live .icon { display: none; }
html[data-look="v2"] .scan-btn.is-live .scan-listen { order: -1; background: var(--color-danger); animation: scan-pulse 1.2s infinite; }
html[data-look="v2"] .scan-btn .scan-count { font-variant-numeric: tabular-nums; }
@keyframes scan-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html[data-look="v2"] .scan-btn.is-live .scan-listen { animation: none; } }
html[data-look="v2"] .scan-switch + .header-search { margin-left: 0; padding-left: var(--space-3); }
/* Below 1280px the full menu needs the room: the chevrons go, and the button is its icon, or the red
   dot and the count while a session runs (the user name gives way to it). */
@media screen and (min-width: 981px) and (max-width: 1279px) {
  html[data-look="v2"] .nav-item.dropdown > .nav-link::after { display: none; }
  html[data-look="v2"] .scan-btn { justify-content: center; min-width: var(--control-height); padding: 0 9px; }
  html[data-look="v2"] .scan-btn:not(.is-live) .scan-btn-label, html[data-look="v2"] .scan-btn:not(.is-live) .scan-listen,
  html[data-look="v2"] .scan-btn .scan-live-word:not(:only-child) { display: none; }
  html[data-look="v2"] .scan-btn.is-live { gap: 6px; padding: 0 10px; }
}
@media screen and (min-width: 981px) and (max-width: 1100px) {
  html[data-look="v2"] .scan-switch + .header-search { padding-left: var(--space-2); }
}

/* Centred under the button (half its 420px width); a transform would fight the opening animation. */
html[data-look="v2"] .scan-pop {
  position: absolute;
  top: calc(100% + (var(--topbar-height) - var(--control-height)) / 2 + 4px);
  left: calc(50% - 210px);
  z-index: 150;
  width: 420px;
  max-width: calc(100vw - 16px);
  padding: var(--space-3);
  color: var(--color-text);
  background: var(--color-menu-bg);
  border: 1px solid var(--color-menu-border);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-overlay);
  animation: grms-menu-in var(--dur-1) var(--ease-out);
}
html[data-look="v2"] .scan-pop[hidden] { display: none; }
html[data-look="v2"] .scan-pop-body { display: flex; flex-direction: column; gap: 10px; }
html[data-look="v2"] .scan-pop .scan-field > input { height: 44px; font: 500 16px/1 var(--font-mono); font-variant-ligatures: none; border: 2px solid var(--color-focus); }
html[data-look="v2"] .scan-pop .scan-field > .icon { top: 12px; }
html[data-look="v2"] .scan-pop .scan-field > input:focus { outline-offset: 0; }
html[data-look="v2"] .scan-pop .scan-field.is-ok > input { border-color: var(--color-scan-ok); }
html[data-look="v2"] .scan-pop .scan-field.is-fail > input { border-color: var(--color-scan-fail); }
html[data-look="v2"] .scan-pop .scan-field:not(.is-ok, .is-fail) .scan-status::before { content: none; }
html[data-look="v2"] .scan-pop .scan-field:not(.is-ok, .is-fail) .scan-status.is-listening::before { content: ""; width: 6px; height: 6px; background: var(--color-create); border-radius: var(--radius-round); -webkit-mask: none; mask: none; }
html[data-look="v2"] .scan-result { display: flex; flex-direction: column; gap: var(--space-2); padding: 10px var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-control); }
html[data-look="v2"] .scan-result[hidden] { display: none; }
html[data-look="v2"] .scan-result-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-weight: 600; line-height: 20px; color: var(--color-text); }
html[data-look="v2"] .scan-result-title a { color: var(--color-link); }
html[data-look="v2"] .scan-result-sub { font-size: var(--text-sm); line-height: 18px; color: var(--color-text-muted); }
html[data-look="v2"] .scan-result.is-job { position: relative; padding-left: calc(var(--space-3) + var(--bar-width)); }
html[data-look="v2"] .scan-result.is-none .scan-result-title > .icon, html[data-look="v2"] .scan-result.is-ambiguous .scan-result-title > .icon { align-self: center; color: var(--color-text-muted); }
html[data-look="v2"] .scan-result-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
html[data-look="v2"] .scan-result-hint kbd { color: var(--color-text); }
html[data-look="v2"] .scan-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
html[data-look="v2"] .scan-modes .btn { min-height: 44px; padding-left: 4px; padding-right: 4px; }
html[data-look="v2"] .scan-modes .btn[aria-pressed="true"] { color: var(--color-info-ink); background: var(--color-info-bg); border-color: var(--color-primary-strong); }
html[data-look="v2"] .scan-recent { padding: 10px 0 0; border-top: 1px solid var(--color-menu-border); }
html[data-look="v2"] .scan-recent[hidden] { display: none; }
html[data-look="v2"] .scan-recent ul, html[data-look="v2"] .scan-matches { margin: 0; padding: 0; list-style: none; }
html[data-look="v2"] .scan-recent > h3 { margin: 0 0 4px; font-size: var(--text-xs); font-weight: 600; line-height: 16px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
html[data-look="v2"] .scan-recent a, html[data-look="v2"] .scan-matches a {
  display: grid;
  grid-template-columns: 16px minmax(0, 7fr) minmax(0, 9fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
  padding: 0 var(--space-2);
  color: var(--color-text);
  border-radius: var(--radius-control);
}
html[data-look="v2"] .scan-matches a { grid-template-columns: 16px minmax(0, 1fr) auto; margin: 0 calc(-1 * var(--space-2)); }
html[data-look="v2"] .scan-recent a:hover, html[data-look="v2"] .scan-recent a:focus-visible,
html[data-look="v2"] .scan-matches a:hover, html[data-look="v2"] .scan-matches a:focus-visible { color: var(--color-menu-hover-text); background: var(--color-menu-hover-bg); text-decoration: none; }
html[data-look="v2"] .scan-recent .icon, html[data-look="v2"] .scan-matches .icon { color: var(--color-text-muted); }
html[data-look="v2"] .scan-recent a:hover .icon, html[data-look="v2"] .scan-recent a:focus-visible .icon,
html[data-look="v2"] .scan-matches a:hover .icon, html[data-look="v2"] .scan-matches a:focus-visible .icon { color: inherit; }
html[data-look="v2"] .scan-recent-code { overflow: hidden; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; font-variant-ligatures: none; white-space: nowrap; text-overflow: ellipsis; }
html[data-look="v2"] .scan-recent-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-look="v2"] .scan-recent-age { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
html[data-look="v2"] .scan-recent a:hover .scan-recent-age, html[data-look="v2"] .scan-recent a:focus-visible .scan-recent-age,
html[data-look="v2"] .scan-matches a:hover .scan-recent-age, html[data-look="v2"] .scan-matches a:focus-visible .scan-recent-age { color: inherit; }
html[data-look="v2"] .scan-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; padding-top: 10px; border-top: 1px solid var(--color-menu-border); }
html[data-look="v2"] .scan-shortcuts .btn { display: flex; align-items: center; justify-content: center; min-width: 0; padding-left: 8px; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; }
html[data-look="v2"] .scan-camera { position: relative; overflow: hidden; background: var(--color-dark-bg); border-radius: var(--radius-control); }
html[data-look="v2"] .scan-camera[hidden] { display: none; }
html[data-look="v2"] .scan-camera > video { display: block; width: 100%; max-height: 240px; object-fit: cover; }
html[data-look="v2"] .scan-live-note { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-error-ink); background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius-control); }
html[data-look="v2"] .scan-live-note[hidden] { display: none; }
html[data-look="v2"] .scan-live-note a { margin-left: auto; font-weight: 600; color: inherit; text-decoration: underline; }

/* Win3.1 and Platinum: the Scan button is raised like their buttons. */
html[data-look="v2"][data-theme="retro"] .scan-btn, html[data-look="v2"][data-theme="platinum"] .scan-btn {
  box-shadow: inset -1px -1px var(--bevel-dark), inset 1px 1px var(--bevel-light), inset -2px -2px var(--bevel-shade);
}
html[data-look="v2"][data-theme="retro"] .scan-btn:active, html[data-look="v2"][data-theme="platinum"] .scan-btn:active {
  box-shadow: inset 1px 1px var(--bevel-dark), inset -1px -1px var(--bevel-light);
}

/* ------------------------------------------------------------ user block */

/* When the bar runs short the search box gives way first, then the name and the store line (ellipsis),
   never the bar's width. The store line ends 44px short of the cell's end, beside the avatar. */
@media screen and (min-width: 981px) {
  html[data-look="v2"] .user-menu { min-width: 0; grid-template-columns: minmax(0, auto); }
  html[data-look="v2"] .user-menu > .user-toggle { min-width: 0; }
  html[data-look="v2"] .user-menu > .user-store { max-width: min(220px, calc(100% - 44px)); }
}
@media screen and (min-width: 981px) and (max-width: 1100px) {
  html[data-look="v2"] .user-menu > .user-store { max-width: min(100px, calc(100% - 44px)); }
}

/* ------------------------------------------------------------ header Search/Help button (search.css) */

@media (max-width: 1059px) and (min-width: 981px) {
  html[data-look="v2"] .header-search { flex-shrink: 0; }
}
/* Alone on a phone's bar the magnifier is a bare icon, like the menu and user buttons beside it. */
@media (max-width: 600px) {
  html[data-look="v2"] .header-search-box { width: 38px; color: var(--color-nav-text); background: none; border: 0; border-radius: var(--radius-control); }
  html[data-look="v2"] .header-search-box > .icon { width: 20px; height: 20px; color: inherit; }
  html[data-look="v2"] .header-search:hover > .header-search-box, html[data-look="v2"] .header-search[aria-expanded="true"] > .header-search-box { color: var(--color-topbar-text); background: var(--color-nav-hover-bg); }
}

/* ------------------------------------------------------------ page frame, panels, tables */

/* The page, panel and table grounds keep the classic single-class weight (:where adds none), so
   .is-bare .page and the module sheets' own grounds (report print, setup checklist, picker pages,
   the permissions matrix) still win over them. */
:where(html[data-look="v2"]) .page { background: var(--color-content-bg); }
html[data-look="v2"] .page-sidebar { border-left-color: var(--color-panel-edge); }
:where(html[data-look="v2"]) .panel { background: var(--color-content-bg); }
:where(html[data-look="v2"]) :is(.data-table, .items-table) { background: var(--color-content-bg); }
html[data-look="v2"] .form-panel,
html[data-look="v2"] .page:has(> .page-body > .page-content > .form-panel:first-child) > .page-header,
html[data-look="v2"] .dash-panel,
html[data-look="v2"] .login-box,
html[data-look="v2"] .search-box { border-color: var(--color-panel-edge); }

/* Opportunity rows: each .state-* sets --row-state; the corner mark, the four pips and the hover tint read it. */
html[data-look="v2"] .data-table tr[class*="state-"] { --mark: var(--row-state); }
html[data-look="v2"] .data-table tr[class*="state-"] > td:first-child { box-shadow: none; }

/* Search results: the row's tone is its corner mark (li.search-row.corner-mark). */
html[data-look="v2"] .search-row.corner-mark { --mark: var(--tone, var(--color-th-bar)); box-shadow: none; }

/* ------------------------------------------------------------ corner mark

   Colour on a row, tile or menu entry: a small filled corner at the bottom left with a concave inner
   edge, flowing into 2px lines up the left edge and along the bottom that fade with distance (40% of
   the colour, 80% on hover). --mark is the colour; the fillet and the outer corner follow the radius
   tokens, so the square themes draw a plain square corner.
     div, a, li:  class="corner-mark" style="--mark: var(--state-order)"; .is-tile on a panel-sized
                  tile, .is-double for the mirrored second corner (the featured menu entry)
     table rows:  tr.corner-mark (with --mark), tr.state-* or tr.act-row in a .data-table. A row box
                  is not a containing block in every engine, so the first cell draws the corner and the
                  second carries the bottom line on; stacked cards on a phone draw it on the card itself.
                  A marked row draws no module edge bar as well. */
@property --mark-strength { syntax: "<percentage>"; inherits: true; initial-value: 40%; }
html[data-look="v2"] .data-table > tbody > tr.act-row { --mark: var(--act-bar); }
html[data-look="v2"] .data-table > tbody > tr:is(.corner-mark, .act-row) > :is(td, th):first-child { box-shadow: none; }
html[data-look="v2"] :is(.term-table, .sp-num-table) td.is-modified { --mark: var(--color-warning); box-shadow: none; }
html[data-look="v2"] .corner-mark:not(tr), html[data-look="v2"] .dash-tile, html[data-look="v2"] :is(.term-table, .sp-num-table) td.is-modified,
html[data-look="v2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th):first-child,
html[data-look="v2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th):first-child + :is(td, th) { position: relative; }
html[data-look="v2"] .corner-mark:not(tr)::after, html[data-look="v2"] .dash-tile::after, html[data-look="v2"] :is(.term-table, .sp-num-table) td.is-modified::after,
html[data-look="v2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th):first-child::after {
  --r: min(var(--mark-radius, 10px), calc(var(--radius-panel) * 100));
  --b: calc(var(--r) + 2px);
  --fade: color-mix(in srgb, var(--mark) var(--mark-strength, 40%), transparent);
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-bottom-left-radius: var(--radius-panel);
  background-image:
    radial-gradient(circle at 100% 0, transparent var(--r), var(--mark) calc(var(--r) + 0.6px)),
    linear-gradient(to top, var(--mark) 0, var(--fade) 18%, transparent 60%),
    linear-gradient(to right, var(--mark) 0, var(--fade) 18%, transparent 60%);
  background-size: var(--b) var(--b), 2px calc(100% - var(--b) + 0.5px), calc(100% - var(--b) + 0.5px) 2px;
  background-position: left bottom, left top, right bottom;
  background-repeat: no-repeat;
  transition: --mark-strength var(--dur-2) var(--ease-out);
}
html[data-look="v2"] .corner-mark.is-tile, html[data-look="v2"] .dash-tile { --mark-radius: 16px; overflow: hidden; }
/* A row's first cell is narrow (the state cell), so its bottom line holds the faded strength to the
   cell's edge and the next cell fades it out. */
html[data-look="v2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th):first-child::after {
  border-bottom-left-radius: 0;
  background-image:
    radial-gradient(circle at 100% 0, transparent var(--r), var(--mark) calc(var(--r) + 0.6px)),
    linear-gradient(to top, var(--mark) 0, var(--fade) 18%, transparent 60%),
    linear-gradient(to right, var(--mark) 0, var(--fade) 30%);
}
html[data-look="v2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :is(td, th):first-child + :is(td, th)::after {
  --fade: color-mix(in srgb, var(--mark) var(--mark-strength, 40%), transparent);
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 520px);
  height: 2px;
  pointer-events: none;
  background: linear-gradient(to right, var(--fade), transparent);
  transition: --mark-strength var(--dur-2) var(--ease-out);
}
/* Two corners: the mirrored mark at the top right (the featured Job Planner entry). */
html[data-look="v2"] .corner-mark.is-double::after {
  --r: min(8px, calc(var(--radius-control) * 100));
  --fade: color-mix(in srgb, var(--mark) 45%, transparent);
  border-radius: var(--radius-control);
  background-image:
    radial-gradient(circle at 100% 0, transparent var(--r), var(--mark) calc(var(--r) + 0.6px)),
    linear-gradient(to top, var(--mark) 0, var(--fade) 18%, transparent 65%),
    linear-gradient(to right, var(--mark) 0, var(--fade) 18%, transparent 65%),
    radial-gradient(circle at 0 100%, transparent var(--r), var(--mark) calc(var(--r) + 0.6px)),
    linear-gradient(to left, var(--mark) 0, var(--fade) 18%, transparent 65%),
    linear-gradient(to bottom, var(--mark) 0, var(--fade) 18%, transparent 65%);
  background-size: var(--b) var(--b), 2px calc(100% - var(--b) + 0.5px), calc(100% - var(--b) + 0.5px) 2px,
                   var(--b) var(--b), calc(100% - var(--b) + 0.5px) 2px, 2px calc(100% - var(--b) + 0.5px);
  background-position: left bottom, left top, right bottom, right top, left top, right bottom;
}
@media (hover: hover) {
  html[data-look="v2"] .corner-mark:not(tr):hover, html[data-look="v2"] a.dash-tile:hover,
  html[data-look="v2"] .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row):hover { --mark-strength: 80%; }
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html[data-look="v2"] .nav-drawer .drawer-pinned > a.nav-featured-link { --mark: var(--color-topbar-text); }
  html[data-look="v2"] .corner-mark::after, html[data-look="v2"] .dash-tile::after,
  html[data-look="v2"] .data-table > tbody > tr > :is(td, th)::after, html[data-look="v2"] table.card-table > tbody > tr::before { --fade: transparent; }
}

/* ------------------------------------------------------------ dashboard tiles

   A quiet surface (a hairline where it equals the page) with the big number at the left, the
   uppercase label after a dot in the tile's colour, the sub-line under it, and the colour again as a
   corner mark. .dash-tile-n, .dash-tile-label and .dash-tile-sub name the parts; a tile's strong, h2
   and small are read the same way. */
html[data-look="v2"] .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
html[data-look="v2"] .dash-tile {
  --mark: var(--tile-bg, var(--tile-blue));
  display: grid;
  grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
  grid-template-areas: "n label" "n sub";
  align-content: center;
  column-gap: 18px;
  row-gap: 2px;
  min-height: 84px;
  padding: 14px 18px 14px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-panel-edge);
}
html[data-look="v2"] a.dash-tile:hover { background: var(--color-row-hover); }
html[data-look="v2"] .dash-tile strong { margin: 0; }
html[data-look="v2"] .dash-tile > :is(.dash-tile-n, strong), html[data-look="v2"] .dash-tile > .dash-split { grid-area: n; align-self: center; }
html[data-look="v2"] .dash-tile > :is(.dash-tile-n, strong) { font-size: var(--text-display-2); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-text); }
html[data-look="v2"] .dash-tile > :is(.dash-tile-label, h2, h3) {
  grid-area: label;
  align-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}
html[data-look="v2"] .dash-tile > :is(.dash-tile-label, h2, h3)::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--mark); border-radius: var(--radius-round); }
html[data-look="v2"] .dash-tile > :is(.dash-tile-sub, small) { grid-area: sub; align-self: start; font-size: var(--text-sm); line-height: 18px; color: var(--color-label); }

/* ------------------------------------------------------------ docked job scan panel

   On a job page, .page-body.with-sidebar.is-scanning swaps the sidebar for aside.scan-panel in the
   same column; on a phone the panel is a bottom sheet. .scan-progress sits above the items table. */
html[data-look="v2"] .page-body.with-sidebar.is-scanning { grid-template-columns: minmax(0, 1fr) 440px; }
html[data-look="v2"] .page-body.is-scanning > .page-sidebar { display: none; }
html[data-look="v2"] .scan-panel {
  position: sticky;
  top: var(--topbar-height);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  max-height: calc(100vh - var(--topbar-height));
  padding: var(--space-5);
  overflow-y: auto;
  color: var(--color-text);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
}
html[data-look="v2"] .scan-panel[hidden] { display: none; }
html[data-look="v2"] .scan-panel .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 44px; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); }
html[data-look="v2"] .scan-panel .seg > button { min-width: 0; padding: 0 4px; font: inherit; font-weight: 500; color: var(--color-text); background: var(--color-btn-bg); border: 0; cursor: pointer; }
html[data-look="v2"] .scan-panel .seg > button + button { border-left: 1px solid var(--color-border-strong); }
html[data-look="v2"] .scan-panel .seg > button:hover { background: var(--color-row-hover); }
html[data-look="v2"] .scan-panel .seg > button[aria-pressed="true"] { font-weight: 600; color: var(--color-info-ink); background: var(--color-info-bg); }
html[data-look="v2"] .scan-panel .seg > button:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }
html[data-look="v2"] .scan-panel select { width: 100%; height: 44px; }
html[data-look="v2"] .scan-panel .scan-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-content-bg); border-radius: var(--radius-control); }
html[data-look="v2"] .scan-panel .scan-go { min-height: 56px; font-size: var(--text-lg); }
html[data-look="v2"] .scan-progress { height: 6px; overflow: hidden; background: var(--color-border); border-radius: var(--radius-chip); }
html[data-look="v2"] .scan-progress > span { display: block; height: 100%; background: var(--color-create); transition: width var(--dur-2) var(--ease-out); }

/* ------------------------------------------------------------ settings behind a summary line

   A group of rarely changed options collapses into one line ("Antennas 1 2 4 · Sequential · 10 s ·
   Edit"); Edit reveals the existing controls in place. Values in <b>. */
html[data-look="v2"] .settings-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--text-sm); line-height: 20px; color: var(--color-text-muted); }
html[data-look="v2"] .settings-line b { font-weight: 500; color: var(--color-text); }
html[data-look="v2"] .settings-line .icon { color: var(--color-text-muted); }

/* ------------------------------------------------------------ summary line and description (job page)

   .opp-summary replaces the count tiles: counts as links, the total at the right. .opp-desc: the
   description (clamped, "Show more") beside the delivery and customer notes; one panel on a phone. */
html[data-look="v2"] .opp-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding: 10px 0; font-size: var(--text-sm); color: var(--color-text-muted); border-block: 1px solid var(--color-border); }
html[data-look="v2"] .opp-summary a { color: inherit; }
html[data-look="v2"] .opp-summary a:hover { color: var(--color-link-hover); }
html[data-look="v2"] .opp-summary b { font-size: var(--text-md); font-weight: 600; color: var(--color-text); }
html[data-look="v2"] .opp-summary .is-right { margin-left: auto; }
html[data-look="v2"] .opp-desc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); }
html[data-look="v2"] .opp-desc p.is-clamped { display: -webkit-box; max-width: 720px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ------------------------------------------------------------ compact: the folding menu drawer */

@media (max-width: 980px) {
  html[data-look="v2"] .nav-toggle[aria-expanded="true"] > .nav-toggle-closed,
  html[data-look="v2"] .nav-toggle:not([aria-expanded="true"]) > .nav-toggle-open { display: none; }

  /* The drawer (nav.php .nav-drawer): the pinned links, then one folding <details> per menu (only the
     one holding this page starts open), then the user block with the theme button at the bottom. */
  html[data-look="v2"] .main-nav > .nav-list { display: none; }
  html[data-look="v2"] .main-nav.is-sheet-top { height: calc(100vh - var(--topbar-height)); height: calc(var(--vvh, 100dvh) - var(--topbar-height)); }
  html[data-look="v2"] .nav-drawer { display: flex; flex-direction: column; min-height: 100%; }
  html[data-look="v2"] .drawer-pinned { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 4px; }
  html[data-look="v2"] .drawer-pinned > a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-3);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-topbar-text);
    border-radius: var(--radius-control);
  }
  html[data-look="v2"] .drawer-pinned > a::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--nav-color); border-radius: var(--radius-round); }
  html[data-look="v2"] .drawer-pinned > a:hover, html[data-look="v2"] .drawer-pinned > a:active,
  html[data-look="v2"] .drawer-pinned > a[aria-current="page"] { color: var(--color-topbar-text); background: var(--color-nav-hover-bg); text-decoration: none; }
  html[data-look="v2"] .drawer-pinned > a[aria-current="page"] { font-weight: 600; }
  /* The featured entry sits on the bar's own colour, where some themes' primary is the bar itself, so its
     mark is primary lifted toward the bar's text and its tint a step of that mark. */
  html[data-look="v2"] .drawer-pinned > a.nav-featured-link {
    --mark: color-mix(in srgb, var(--color-primary) 55%, var(--color-topbar-text));
    font-weight: 600;
    background: var(--color-nav-hover-bg);
    background: color-mix(in srgb, var(--mark) 20%, var(--color-nav-bg));
  }
  html[data-look="v2"] .drawer-pinned > a.nav-featured-link::before { display: none; }
  html[data-look="v2"] .drawer-rule { height: 1px; margin: 4px 16px; background: var(--color-nav-hover-bg); }
  html[data-look="v2"] .nav-group > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-nav-text);
    list-style: none;
    cursor: pointer;
  }
  html[data-look="v2"] .nav-group > summary::-webkit-details-marker { display: none; }
  html[data-look="v2"] .nav-group > summary::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--nav-color); border-radius: var(--radius-round); }
  html[data-look="v2"] .nav-group > summary::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url(../icons/chevron-down.svg) center / 14px no-repeat;
    mask: url(../icons/chevron-down.svg) center / 14px no-repeat;
  }
  html[data-look="v2"] .nav-group[open] > summary::after { -webkit-mask-image: url(../icons/chevron-up.svg); mask-image: url(../icons/chevron-up.svg); }
  html[data-look="v2"] .nav-group > summary:hover, html[data-look="v2"] .nav-group[open] > summary { color: var(--color-topbar-text); }
  html[data-look="v2"] .nav-group > summary:active { background: var(--color-nav-hover-bg); }
  html[data-look="v2"] .nav-group-count { margin-left: auto; font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; }
  html[data-look="v2"] .nav-group[open] .nav-group-count { visibility: hidden; }
  html[data-look="v2"] .nav-group > ul { margin: 0; padding: 0 0 6px; list-style: none; }
  html[data-look="v2"] .nav-group > ul > li > a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4) 0 30px; font-size: 15px; color: var(--color-topbar-text); }
  html[data-look="v2"] .nav-group > ul > li > a:hover, html[data-look="v2"] .nav-group > ul > li > a:active,
  html[data-look="v2"] .nav-group > ul > li.is-active > a { color: var(--color-topbar-text); background: var(--color-nav-hover-bg); text-decoration: none; }
  html[data-look="v2"] .nav-group > ul > li.is-active > a { font-weight: 600; }
  html[data-look="v2"] .nav-group > ul > li.divider { height: 1px; margin: 4px 16px 4px 30px; background: var(--color-nav-hover-bg); }
  html[data-look="v2"] .drawer-user { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding: var(--space-3); border-top: 1px solid var(--color-nav-hover-bg); }
  html[data-look="v2"] .drawer-user > .avatar { width: 36px; height: 36px; }
  html[data-look="v2"] .drawer-user-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 18px; }
  html[data-look="v2"] .drawer-user-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--color-topbar-text); }
  html[data-look="v2"] .drawer-user-store { overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; color: var(--color-nav-text); }
  html[data-look="v2"] a.drawer-user-store:hover { color: var(--color-topbar-text); }
  html[data-look="v2"] .drawer-user .theme-switch { margin: 0; }
  html[data-look="v2"] .drawer-user .theme-toggle { width: auto; height: 40px; gap: var(--space-2); padding: 0 var(--space-3); font-size: var(--text-base); color: var(--color-topbar-text); border: 1px solid var(--color-search-border); }
  html[data-look="v2"] .drawer-user .theme-menu { position: absolute; top: auto; bottom: calc(100% + 4px); right: 0; left: auto; }
}

/* ------------------------------------------------------------ compact and phone */

@media screen and (max-width: 980px) {
  /* Two tiles to a row leave the label room beside its number. */
  html[data-look="v2"] .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The job scan panel becomes a bottom sheet over the page, which keeps one column. */
  html[data-look="v2"] .page-body.with-sidebar.is-scanning { grid-template-columns: minmax(0, 1fr); }
  html[data-look="v2"] .scan-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sheet);
    max-height: var(--sheet-max-height);
    max-height: min(85dvh, calc(var(--vvh, 100dvh) - 8px));
    padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border-strong);
    border-left: 0;
    border-radius: var(--radius-menu) var(--radius-menu) 0 0;
    box-shadow: 0 -6px 16px var(--color-shadow);
  }
  /* The scan popover docks under the bar as a top sheet (scan-jump.js), so the keyboard never covers it. */
  html[data-look="v2"] .scan-pop.is-sheet-top { width: auto; max-width: none; padding: var(--space-3) var(--gutter) var(--space-4) !important; border: 0; border-bottom: 1px solid var(--color-menu-border); border-radius: 0; animation: grms-sheet-down var(--dur-3) var(--ease-out); }
  /* The pinned name column of the roles table sits on the table's ground. */
  html[data-look="v2"] .sp-roles > tbody > tr:not(:hover) > td:first-child { background: var(--color-content-bg); }
}

@media screen and (max-width: 980px), screen and (pointer: coarse) {
  /* The filter strip's chips fade into the content ground. */
  html[data-look="v2"] .filter-tabs.has-overflow::before { background: linear-gradient(to right, var(--color-content-bg), transparent); }
  html[data-look="v2"] .filter-tabs.has-overflow::after { background: linear-gradient(to left, var(--color-content-bg), transparent); }
}

@media screen and (max-width: 760px) {
  /* A card is a block, so the corner mark is drawn on the card itself instead of its first cell. */
  html[data-look="v2"] table.card-table > thead > tr { box-shadow: none; }
  html[data-look="v2"] table.card-table > tbody > tr[class*="state-"] { box-shadow: none; }
  html[data-look="v2"] table.card-table > tbody > tr.date-band > td { box-shadow: none; }
  html[data-look="v2"] table.card-table > tbody > tr:is([class*="state-"], .corner-mark) { position: relative; }
  html[data-look="v2"] table.data-table.card-table > tbody > tr.corner-mark { box-shadow: none; }
  html[data-look="v2"] table.card-table > tbody > tr:is([class*="state-"], .corner-mark) > :is(td, th):first-child::after,
  html[data-look="v2"] table.card-table > tbody > tr:is([class*="state-"], .corner-mark) > :is(td, th):first-child + :is(td, th)::after { content: none; }
  /* Activity rows are grid cards here (records.css) and take the card's mark. */
  html[data-look="v2"] table.data-table.act-table > tbody > tr.act-row { position: relative; box-shadow: none; }
  html[data-look="v2"] table.data-table.act-table > tbody > tr.act-row > :is(td, th):first-child::after,
  html[data-look="v2"] table.data-table.act-table > tbody > tr.act-row > :is(td, th):first-child + :is(td, th)::after { content: none; }
  html[data-look="v2"] table.card-table > tbody > tr:is([class*="state-"], .corner-mark)::before, html[data-look="v2"] table.data-table.act-table > tbody > tr.act-row::before {
    --r: min(10px, calc(var(--radius-panel) * 100));
    --b: calc(var(--r) + 2px);
    --fade: color-mix(in srgb, var(--mark) var(--mark-strength, 40%), transparent);
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 100% 0, transparent var(--r), var(--mark) calc(var(--r) + 0.6px)),
      linear-gradient(to top, var(--mark) 0, var(--fade) 18%, transparent 60%),
      linear-gradient(to right, var(--mark) 0, var(--fade) 18%, transparent 60%);
    background-size: var(--b) var(--b), 2px calc(100% - var(--b) + 0.5px), calc(100% - var(--b) + 0.5px) 2px;
    background-position: left bottom, left top, right bottom;
    background-repeat: no-repeat;
  }

  /* Dashboard tiles: two to a row, the number over a short label in sentence case; the sub-line and
     the dot go (the corner mark keeps the colour). */
  html[data-look="v2"] .dash-tiles { gap: var(--space-2); }
  html[data-look="v2"] .dash-tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "label"; align-content: start; row-gap: 6px; min-height: 88px; padding: 12px 12px 14px 16px; }
  html[data-look="v2"] .dash-tiles > .dash-tile :is(h2, h3) { min-height: auto; }
  html[data-look="v2"] .dash-tile > :is(.dash-tile-n, strong) { font-size: var(--text-display-1); }
  html[data-look="v2"] .dash-tile > :is(.dash-tile-label, h2, h3) { align-self: start; font-size: var(--text-sm); font-weight: 500; line-height: 18px; letter-spacing: 0; text-transform: none; }
  html[data-look="v2"] .dash-tile > :is(.dash-tile-label, h2, h3)::before, html[data-look="v2"] .dash-tile > :is(.dash-tile-sub, small) { display: none; }

  /* Long forms keep Save in reach on the content ground. */
  html[data-look="v2"] .page-content .form-actions:where(:not(.rfc-card > .form-actions)) { background: var(--color-content-bg); }
  html[data-look="v2"] .page-content .form-panel .form-actions { background: var(--color-surface-alt); }      /* restated */
  html[data-look="v2"] .page-content .add-window .form-actions { background: var(--color-surface-alt); }      /* restated */

  /* The theme button, the name and the store line live in the drawer's user block on a phone. */
  html[data-look="v2"] .topbar > .theme-switch, html[data-look="v2"] .topbar .user-name, html[data-look="v2"] .topbar .user-store { display: none; }
  html[data-look="v2"] .topbar .user-toggle { justify-content: center; min-width: var(--touch-target); }
  /* A phone's drawer fills the width; Close in the bar ends it. */
  html[data-look="v2"] .main-nav.is-sheet-top { width: 100% !important; }
  html[data-look="v2"] .scan-switch { margin-right: var(--space-1); }
  /* A phone shows "Scan", or the count alone while a session runs. */
  html[data-look="v2"] .scan-btn:not(.is-live) .scan-listen, html[data-look="v2"] .scan-btn .scan-live-word:not(:only-child) { display: none; }
  html[data-look="v2"] .opp-desc { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) 14px; background: var(--color-surface); border-radius: var(--radius-panel); }
  html[data-look="v2"] .opp-desc p.is-clamped { -webkit-line-clamp: 3; }
  html[data-look="v2"] .opp-summary { gap: 6px 16px; }
}

@media screen and (max-width: 760px), screen and (pointer: coarse) {
  html[data-look="v2"] .scan-btn { height: var(--touch-control-height); }
  html[data-look="v2"] .drawer-user .theme-toggle { height: var(--touch-control-height); }
  /* Text links in the popover and the drawer: a 44px tall hit area that does not move the line. */
  html[data-look="v2"] .scan-result-title a, html[data-look="v2"] .scan-live-note a, html[data-look="v2"] a.drawer-user-store { display: inline-block; padding: 13px 0; margin: -13px 0; }
  html[data-look="v2"] .scan-recent a, html[data-look="v2"] .scan-matches a { min-height: var(--touch-target); }
  html[data-look="v2"] .scan-shortcuts .btn { min-height: var(--touch-target); }
}