/*
 * The accent (package C, chosen by David on 18 October 2026). Staff shell only: Layout links this after app.css; the till, the quote page, the error pages, the portal and
 * the public site never do (test/accent-css.test.ts). One hue for marks, rules and indicators: ink stays the colour of every word and every button. Rules: docs/04a-design-system.md.
 * Screen only, so print is exactly what app.css prints.
 */
:root {
  --accent: #4f6469;        /* the banner sage at 36% lightness: rules, marks, focus, icons (6.25:1 on paper) */
  --accent-strong: #334447; /* at 24%: small text and a button's hover fill (10.20:1) */
  --accent-wash: var(--sage-wash);
  --accent-hover: #f1f3f3;  /* a row under the pointer: light enough for --warn text to keep 4.5:1 */
  --accent-wash-2: #e2e8e9; /* a ticked row, a selection */
  --warn-deep: #7a5d1b;     /* --warn text on a ticked row (4.97:1; --warn is 4.07:1 there) */
  --accent-line: #b0b9bc;   /* a pale rule: decoration, never the only signal */
  --stripe: #fafaf9;        /* every other row of a long table */
  --ok-line: #a1bcac; --warn-line: #cabc9a; --danger-line: #d2a09a; --vip-line: #b5a1be; /* a state's own hue, pale: a badge's or a notice's rule */
  --mark-length: 3.5rem; --mark-weight: 3px;
}

@media screen {
  /* The frame: a line above every page, a mark on the rule under a title and on each hub section's. A border, so it survives forced colours. */
  .app-header { border-top: 3px solid var(--accent); }
  .page-header { position: relative; border-bottom-color: var(--accent-line); }
  .settings-group__title { position: relative; border-top-color: var(--accent-line); }
  .page-header::after, .settings-group:not(:first-of-type) .settings-group__title::before {
    content: ''; position: absolute; left: 0; width: var(--mark-length); border-top: var(--mark-weight) solid var(--accent);
  }
  .page-header::after { bottom: -1px; }
  .settings-group:not(:first-of-type) .settings-group__title::before { top: -1px; }
  hr { border-top-color: var(--accent-line); }
  .panel:has(> h2:first-child):not(.panel .panel) { border-top: 2px solid var(--accent); } /* top-level panels only: nested ones do not stack edges */

  /* Links, buttons, the focus ring (before the menu rules, which win on hover by coming after). */
  a:not([class]) { text-decoration-color: var(--accent); }
  a:not([class]):hover { color: var(--accent-strong); text-decoration-color: var(--accent-strong); text-decoration-thickness: 2px; }
  .btn:where(:not(.btn--secondary, .btn--quiet, .btn--danger)):hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn--secondary:hover { background: var(--accent-wash); border-color: var(--accent-strong); }
  .btn--quiet:hover { background: transparent; border-color: var(--accent); }
  :focus-visible, .stat:focus-visible, .section-card:focus-visible, .section-card--split:focus-within, .chip:focus-visible, .sub-nav__links a:focus-visible, .sub-nav__summary:focus-visible,
  .signout button:focus-visible, .report-star__button:focus-visible, .condition-pick:focus-within, .task-chip:focus-visible, .kind-chip input:focus-visible + span,
  .layby-spread__preview:focus, .link-button:focus-visible, .gallery-card:has(.gallery-card__title:focus-visible) { outline-color: var(--accent); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); outline-offset: 0; }
  .field:focus-within > label { color: var(--accent-strong); }
  input[type='checkbox'], input[type='radio'] { accent-color: var(--accent-strong); }
  ::selection { background: var(--accent-wash-2); color: var(--ink); }
  /* Text a person copies (an artist's biography): the pale wash above is 1.1:1 on a table row under the pointer, so a drag looked as if it selected nothing. The accent is 5.6:1 there. */
  .copy-text::selection, .copy-text ::selection { background: var(--accent); color: var(--paper); }

  /* Where you are: the current item is underlined in the accent (a wash behind a tab or a Gallery Management item as well); the others step back. */
  .app-nav a { color: var(--ink-muted); }
  .app-nav a:hover { color: var(--ink); border-bottom-color: var(--accent-line); }
  .app-nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
  .app-menu__link:hover, .app-menu__row:hover { background: var(--accent-wash); } /* the phone menu (app.css): a wash under the pointer, and the current row marked at its left edge */
  .app-menu__link[aria-current='page'] { border-left-color: var(--accent); background: var(--accent-wash); }
  .tabs a:hover { color: var(--ink); border-bottom-color: var(--accent-line); }
  .tabs a[aria-current] { border-bottom-color: var(--accent); background: var(--accent-wash); }
  .sub-nav__summary:hover { background: var(--accent-wash); border-color: var(--accent-strong); }
  .sub-nav__links a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-line); }
  .sub-nav__links a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--accent); background: var(--accent-wash); }
  @media (min-width: 60.01rem) { /* below that app.css lays them out for a thumb */
    .tabs { column-gap: var(--space-2); }
    .tabs a { padding-inline: var(--space-3); }
  }

  /* Dashboard tiles: a top edge that says what the tile counts (money taken green, holds amber, the rest the accent); the label agrees with it. */
  .stat { border-top: 4px solid var(--accent); }
  .stat__label { color: var(--accent-strong); }
  .stat--money { border-top-color: var(--ok); }
  .stat--money .stat__label { color: var(--ok); }
  .stat--hold { border-top-color: var(--warn); }
  .stat--hold .stat__label { color: var(--warn); }

  /* Tables: a tinted head over a 2px accent rule, a wash under the pointer, a ticked row marked, and a faint stripe from twelve rows. --row is what the sticky cells of the Customers list paint. */
  thead th { background: var(--accent-wash); color: var(--accent-strong); border-bottom: 2px solid var(--accent); }
  .table-wrap--sticky thead .col-select, .table-wrap--sticky thead .col-name { background: var(--accent-wash); }
  tbody tr:hover { background: var(--accent-hover); --row: var(--accent-hover); }
  .table--detail tbody tr:hover { background: transparent; }
  table:not(.table--detail) tbody:has(> tr:nth-child(12)) > tr:nth-child(even) { background: var(--stripe); --row: var(--stripe); }
  table:not(.table--detail) tbody:has(> tr:nth-child(12)) > tr:nth-child(even):hover { background: var(--accent-hover); --row: var(--accent-hover); }
  table:not(.table--detail) tbody tr:has(> td:first-child input[type='checkbox']:checked) { background: var(--accent-wash-2); --row: var(--accent-wash-2); }
  table:not(.table--detail) tbody tr:has(> td:first-child input[type='checkbox']:checked) :is(.warn-text, .is-warn) { color: var(--warn-deep); }
  table:not(.table--detail) tbody tr:has(> td:first-child input[type='checkbox']:checked) > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  .table-wrap--sticky tbody tr .col-select, .table-wrap--sticky tbody tr .col-name,
  .table-wrap--sticky tbody tr:hover .col-select, .table-wrap--sticky tbody tr:hover .col-name { background: var(--row, var(--paper)); }
  .table-empty::before { content: ''; display: block; width: 2.25rem; height: 2.75rem; margin: 0 auto var(--space-4); border: 2px solid var(--accent); outline: 1px solid var(--accent-line); outline-offset: -8px; }

  /* Statuses keep their words and glyphs; the rule round them is the state's own hue, pale. Opted in and Set take the accent. */
  .badge--available { border-color: var(--ok-line); }
  .badge--on-hold, .badge--returning, .badge--low-res, .badge--warn { border-color: var(--warn-line); }
  .badge--danger { border-color: var(--danger-line); }
  .badge--vip { border-color: var(--vip-line); }
  .badge--set { border-color: var(--accent); background: var(--accent-wash); }
  .badge--opted { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-wash); }
  .notice { border-left-width: 4px; }
  .notice--ok { border-color: var(--ok-line); border-left-color: var(--ok); }
  .notice--error { border-color: var(--danger-line); border-left-color: var(--danger); }
  .notice--warn { border-color: var(--warn-line); border-left-color: var(--warn); }
  .notice--info { border-color: var(--accent-line); border-left-color: var(--accent); }

  /* Hub cards and chips. */
  .section-card { border-top: 2px solid var(--accent-line); }
  .section-card__icon { color: var(--accent); }
  .section-card:hover { background: var(--accent-wash); border-color: var(--accent); }
  .section-card__count { background: var(--accent-wash); color: var(--accent-strong); border-color: var(--accent-line); }
  a.section-card__count:hover { background: var(--paper); color: var(--ink); }
  .report-star__button[aria-pressed='true'] { color: var(--accent-strong); }
  .chip:hover { border-color: var(--accent); background: var(--accent-wash); }
  .card:hover .card__title { text-decoration-color: var(--accent); }
}

/* Windows high-contrast mode drops box-shadow and backgrounds, and used to underline every menu item and tab; now only the current one is marked. */
@media screen and (forced-colors: active) {
  .app-nav a:not([aria-current='page']) { border-bottom-color: Canvas; }
  .tabs a:not([aria-current]) { border-bottom-style: none; }
  .app-nav a[aria-current='page'], .tabs a[aria-current] { border-bottom-color: Highlight; }
  .app-menu__link[aria-current='page'] { border-left-color: Highlight; }
  .sub-nav__links a[aria-current='page'] { box-shadow: none; border-bottom: 2px solid CanvasText; }
  table:not(.table--detail) tbody tr:has(> td:first-child input[type='checkbox']:checked) { outline: 2px solid Highlight; }
}