/* =============================================================================
   THE LOOK — LD's redesign boards (design_ld/project), two colour sets.
   =============================================================================
   One layout, two token sets, one attribute on <html>:
     <html data-look="green">    the default (index.html carries it)
     <html data-look="orange">   picked in Setup, kept on the business
   public/js/look.js sets it from account.theme.

   The colour values (green, orange, dark) are in theme.css, which loads first;
   this file holds the sizes, the density step and the rules that read them.

   Two kinds of token:
     --lk-*   the look's own names, read by lookshell.css and the screen files.
     the old palette names (--nav-bg, --paper, --ok ...) restated here, so every
     screen that is not one of the six redesigned ones (Products, Setup,
     Salesmen, Drafts, the dialogs) wears the same colours without a rewrite.
     This file loads after tokens.css, at the same specificity, so it wins over
     every palette block there, light, dark and forced.

   One deliberate step away from the boards: a text input's edge. The boards
   draw it #E2DED1, 1.3:1 on white, under the 3:1 a control boundary needs
   (WCAG 1.4.11). Inputs and selects take --lk-input-edge (3.1:1) instead.
   Buttons keep the board's light edge: they are told apart by their fill.
   ============================================================================= */

/* =============================================================================
   DENSITY — the compact step (LD note 12 Oct: "the UI is too zoomed in").
   =============================================================================
   The boards are drawn at 1440 x 900. A laptop at the Windows 150 per cent
   default shows a CSS viewport of 1280 x 529, so the same sizes fill it twice
   over. One number, --lk-s, scales the look's own sizes: every px in look*.css
   (type, padding, gaps, radii, tile and rail widths, control heights) is
   written calc(Npx * var(--lk-s)). 1 = the boards, exactly. The compact step
   on a desktop layout (1000 px and up): 0.85 when narrower than 1440 OR no taller
   than 800; 0.76 when both (a 1920 x 1080 screen at 150 per cent is 1280 x 720); 0.7 when
   no taller than 640. A phone, up to 480 px, takes 0.8: smaller spacing, padding and large
   type, under the floors below and the phone floors in lookphone.css.
   Between 481 and 999 px the boards' sizes (1) apply.

   Floors that do not scale:
     body text   14 px. A font size of 14 px or more is written
                 max(14px, calc(N * --lk-s)), so it never goes under 14. Labels
                 already under 14 on the boards (11 to 13 px) keep their size.
     targets     --lk-tap: 36 px with a mouse at desktop width, 44 px on a touch
                 screen or under 1000 px. lookphone.css reads it and writes no number. A
                 control height or width of 36 px or more on the boards is
                 max(var(--lk-tap), N * --lk-s): it scales down with the page
                 but never under the floor (a mouse never reads it above N, so
                 the boards' 1440 sizes are exact; a touch screen reads 44).
   Borders and strokes of 2 px or less do not scale (a hair line stays one). */
:root[data-look] { --lk-s: 1; --lk-tap: 36px; }
@media (pointer: coarse), (max-width: 999px) {
  :root[data-look] { --lk-tap: 44px; }
}
@media (min-width: 1000px) and (max-width: 1439px), (min-width: 1000px) and (max-height: 800px) {
  :root[data-look] { --lk-s: 0.85; }
}
@media (min-width: 1000px) and (max-width: 1439px) and (max-height: 800px) {
  :root[data-look] { --lk-s: 0.76; }
}
@media (min-width: 1000px) and (max-height: 640px) {
  :root[data-look] { --lk-s: 0.7; }
}
@media (max-width: 480px) {
  :root[data-look] { --lk-s: 0.8; }
}


/* The shared metrics of the look: type, radii, the rail. */
:root[data-look] {
  --lk-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --lk-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --lk-r-card: calc(22px * var(--lk-s));
  --lk-r-panel: calc(24px * var(--lk-s));
  --lk-r-hero: calc(28px * var(--lk-s));
  --lk-r-tile: calc(14px * var(--lk-s));
  --lk-shadow-pill: 0 calc(10px * var(--lk-s)) calc(30px * var(--lk-s)) rgba(17, 19, 21, .25);
  --lk-shadow-fab: 0 calc(8px * var(--lk-s)) calc(22px * var(--lk-s)) rgba(17, 19, 21, .22);
  --lk-rail-w: calc(88px * var(--lk-s));
  --lk-bnav-h: calc(76px * var(--lk-s));

  /* ---- the old palette names, restated in the look's colours ---- */
  --font-latin: var(--lk-font);
  --nav-bg: var(--lk-dark);
  --nav-ink: #FFFFFF;
  --nav-ink-2: var(--lk-dark-ink-2);
  --nav-hover: rgba(255, 255, 255, .10);
  --nav-edge: rgba(255, 255, 255, .16);
  --nav-active-bg: var(--lk-accent);
  --nav-active-top: var(--lk-accent);
  --nav-active-ink: var(--lk-accent-ink);
  --nav-focus: #FFFFFF;
  --nav-mark-green: var(--lk-accent);
  --header-bg: var(--lk-paper);
  --header-edge: var(--lk-edge);
  --ground: var(--lk-ground);
  --paper: var(--lk-paper);
  --hover: var(--lk-soft);
  --selected: var(--lk-line);
  --hairline: var(--lk-line);
  --card-edge: var(--lk-paper);
  --rule: var(--lk-line);
  --control-edge: var(--lk-input-edge);
  --ring: var(--lk-ring);
  --ink: var(--lk-ink);
  --ink-hover: var(--lk-chip-ink);
  --text-2: var(--lk-text-2);
  --text-3: var(--lk-text-3);
  --on-ink: var(--lk-on-ink);
  --pine: var(--lk-link);
  --focus: var(--lk-link);
  --price: var(--lk-ink);
  --gold: var(--lk-accent);
  --gold-bright: var(--lk-accent);
  --ok: var(--lk-ok);
  --ok-bg: var(--lk-ok-bg);
  --warn: var(--lk-warn);
  --warn-bg: var(--lk-warn-bg);
  --stop: var(--lk-stop);
  --stop-bg: var(--lk-stop-bg);
  --muted: var(--lk-muted);
  --muted-bg: var(--lk-muted-bg);
  --edge-overdue: var(--lk-red);
  --track-line: var(--lk-line);
  --track-done: var(--lk-dark);
  --track-done-ink: #FFFFFF;
  --track-now: var(--lk-accent);
  --track-now-edge: var(--lk-warn);
  --track-now-glow: var(--lk-accent-soft);
  --track-future: var(--lk-paper);
  --track-future-edge: var(--lk-ring);
  --btn-primary-bg: var(--lk-accent);
  --btn-primary-top: var(--lk-accent);
  --btn-primary-bottom: var(--lk-accent);
  --btn-primary-ink: var(--lk-accent-ink);
  --btn-primary-edge: var(--lk-accent);
  --btn-primary-hover-top: var(--lk-accent);
  --btn-primary-hover-bottom: var(--lk-accent);
  --ctrl-top: var(--lk-paper);
  --ctrl-bottom: var(--lk-paper);
  --ctrl-hover-top: var(--lk-soft);
  --ctrl-hover-bottom: var(--lk-soft);
  --gloss-top: transparent;
  --gloss-bottom: transparent;
  --ctrl-gloss-top: transparent;
  --ctrl-gloss-bottom: transparent;
  --card-gloss: transparent;
  --sh-btn: none;
  --sh-btn-hover: none;
  --sh-btn-active: none;
  --sh-card: none;
  --sh-overlay: 0 calc(30px * var(--lk-s)) calc(80px * var(--lk-s)) rgba(0, 0, 0, .35);
  --r-12: calc(22px * var(--lk-s));
}

/* ============================================================== base ==== */
[data-look] body {
  background: var(--lk-ground);
  color: var(--lk-ink);
  font-family: var(--lk-font);
}
[data-look] a { color: var(--lk-link); }
[data-look] a:hover { color: var(--lk-link-hover); }

/* Headings on every page take the display face, as the boards do. */
[data-look] .page-title,
[data-look] .card__title,
[data-look] .dialog__title {
  font-family: var(--lk-display);
  letter-spacing: -0.02em;
}
[data-look] .page-title { font-size: max(14px, calc(34px * var(--lk-s))); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
@media (min-width: 1000px) {
  [data-look] .page-title { font-size: max(14px, calc(48px * var(--lk-s))); }
}
[data-look] .card__title { font-weight: 700; }
[data-look] h3.card__title { font-size: max(14px, calc(20px * var(--lk-s))); }

/* ============================================================ buttons ==== */
/* A button on the boards is a pill: white with a light edge, or the accent
   fill for the one primary, or the dark fill for a row action. Flat, no
   gradient. Heights stay the app's, never under 44 px on a touch screen. */
[data-look] .btn {
  border-radius: 999px;
  border: 1px solid var(--lk-edge);
  background: var(--lk-paper);
  background-image: none;
  box-shadow: none;
  color: var(--lk-ink);
  font-family: var(--lk-font);
  font-weight: 700;
  font-size: max(14px, calc(14px * var(--lk-s)));
  padding: 0 calc(18px * var(--lk-s));
  min-height: max(var(--lk-tap), calc(44px * var(--lk-s)));
}
[data-look] .btn:hover { background: var(--lk-soft); border-color: var(--lk-text-4); }
[data-look] .btn.primary,
[data-look] .btn.gold {
  background: var(--lk-accent);
  border-color: var(--lk-accent);
  color: var(--lk-accent-ink);
  font-weight: 800;
}
[data-look] .btn.primary:hover,
[data-look] .btn.gold:hover { background: var(--lk-accent); border-color: var(--lk-ink); color: var(--lk-accent-ink); }
[data-look] .btn.small { min-height: max(var(--lk-tap), calc(40px * var(--lk-s))); padding: 0 calc(14px * var(--lk-s)); border-radius: 999px; font-size: 14px; }
[data-look] .btn[disabled],
[data-look] .btn.primary[disabled] {
  opacity: 1;
  background: var(--lk-disabled);
  border-color: var(--lk-disabled);
  color: var(--lk-disabled-ink);
}
[data-look] .btn.lk-btn--dark {
  background: var(--lk-dark);
  border-color: var(--lk-dark);
  color: #FFFFFF;
}
[data-look] .btn.lk-btn--dark:hover { background: var(--lk-dark); color: #FFFFFF; border-color: var(--lk-ink); }
[data-look] .btn.lk-btn--soft {
  background: var(--lk-ground);
  border-color: var(--lk-ground);
}
[data-look] .btn.lk-btn--soft:hover { border-color: var(--lk-edge); }
[data-look] .btn-row .btn.primary ~ .btn.primary,
[data-look] .order-actions-row .btn.primary ~ .btn.primary {
  background: var(--lk-paper); border-color: var(--lk-edge); color: var(--lk-ink);
}
[data-look] .btn:focus-visible,
[data-look] .row:focus-visible,
[data-look] a:focus-visible {
  outline: 2px solid var(--lk-link);
  outline-offset: 2px;
}

/* ============================================================ controls === */
[data-look] input[type="text"],
[data-look] input[type="search"],
[data-look] input[type="number"],
[data-look] input[type="tel"],
[data-look] input[type="date"],
[data-look] select,
[data-look] textarea {
  border-color: var(--lk-input-edge);
  border-radius: calc(12px * var(--lk-s));
  font-family: var(--lk-font);
}

/* Filter chips: the boards' segmented pill group. */
[data-look] button.chip.chip--filter {
  border-radius: 999px;
  background: var(--lk-paper);
  background-image: none;
  box-shadow: none;
  border: 1px solid var(--lk-edge);
  color: var(--lk-ink);
  font-weight: 600;
  font-size: max(14px, calc(14px * var(--lk-s)));
  min-height: max(var(--lk-tap), calc(40px * var(--lk-s)));
  padding: 0 calc(14px * var(--lk-s));
}
[data-look] button.chip.chip--filter[aria-pressed="true"] {
  background: var(--lk-pick-bg);
  border-color: var(--lk-pick-bg);
  color: var(--lk-pick-ink);
  font-weight: 700;
}

/* ============================================================== cards ==== */
[data-look] .card {
  border: 0;
  border-radius: var(--lk-r-card);
  box-shadow: none;
  padding: calc(22px * var(--lk-s));
}
[data-look] .card:has(.credit.stop)::before { content: none; }
[data-look] .list-rows {
  border: 0;
  border-radius: var(--lk-r-panel);
  box-shadow: none;
}
[data-look] .list-rows--cards .row {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--lk-line);
}
[data-look] .list-rows--cards { gap: 0; background: var(--lk-paper); border-radius: var(--lk-r-panel); overflow: hidden; }
[data-look] .list-rows--cards .row:first-child { border-top: 0; }
[data-look] .banner { border-radius: calc(14px * var(--lk-s)); }

/* ===================================================== the credit pill === */
/* The boards draw a status as a tinted pill with a dot and the word. The word
   is still the answer, so the icon's shape gives way to the dot. */
[data-look] .credit.pill,
[data-look] .credit.compact {
  display: inline-flex; align-items: center; gap: calc(6px * var(--lk-s));
  border: 0; border-radius: 999px;
  padding: calc(4px * var(--lk-s)) calc(10px * var(--lk-s)); min-height: 0;
  font: 700 14px/1.3 var(--lk-font);
  box-shadow: none; background-image: none;
}
[data-look] .credit.pill .icon,
[data-look] .credit.compact .icon { display: none; }
[data-look] .credit.pill::before,
[data-look] .credit.compact::before {
  content: ''; display: block; width: calc(7px * var(--lk-s)); height: calc(7px * var(--lk-s)); border-radius: 50%;
  flex: 0 0 auto; background: currentColor;
}
[data-look] .credit.pill .word,
[data-look] .credit.compact .word { font: 700 14px/1.3 var(--lk-font); overflow: visible; }
[data-look] .credit.ok { background: var(--lk-ok-bg); color: var(--lk-ok); }
[data-look] .credit.warn { background: var(--lk-warn-bg); color: var(--lk-warn); }
[data-look] .credit.stop { background: var(--lk-stop-bg); color: var(--lk-stop); }
[data-look] .credit.muted { background: var(--lk-muted-bg); color: var(--lk-muted); border-style: solid; }
[data-look] .credit.ok.pill::before { background: var(--lk-green); }
[data-look] .credit.warn.pill::before { background: var(--lk-amber); }
[data-look] .credit.stop.pill::before { background: var(--lk-red); }
[data-look] .credit.muted.pill::before { background: var(--lk-text-4); }

/* ============================================================ dialogs ==== */
[data-look] .dialog,
[data-look] .sheet { border-radius: calc(28px * var(--lk-s)); }
[data-look] .dialog__title { font-size: max(14px, calc(26px * var(--lk-s))); font-weight: 800; }
[data-look] .scrim { background: color-mix(in srgb, var(--lk-scrim) 85%, transparent); }

/* The colour picker in Setup and the first run (public/js/look.js). */
.look-preview { position: relative; display: flex; gap: calc(6px * var(--lk-s)); height: calc(64px * var(--lk-s)); border-radius: calc(12px * var(--lk-s)); padding: calc(6px * var(--lk-s)); overflow: hidden; }
.look-preview__rail { width: calc(18px * var(--lk-s)); border-radius: calc(8px * var(--lk-s)); display: flex; justify-content: center; padding-top: calc(6px * var(--lk-s)); }
.look-preview__mark { width: calc(10px * var(--lk-s)); height: calc(10px * var(--lk-s)); border-radius: calc(3px * var(--lk-s)); }
.look-preview__card { flex: 1; border-radius: calc(8px * var(--lk-s)); padding: calc(8px * var(--lk-s)); display: flex; flex-direction: column; gap: calc(5px * var(--lk-s)); }
.look-preview__line { height: calc(5px * var(--lk-s)); border-radius: calc(3px * var(--lk-s)); }
.look-preview__btn { align-self: flex-start; margin-top: auto; font: 800 10px/1 var(--lk-font, sans-serif); padding: calc(4px * var(--lk-s)) calc(8px * var(--lk-s)); border-radius: 999px; }