/* ==========================================================================
   Hammerworth UI system  (site/hw-ui.css)
   "The catalogue, not the dashboard."  Load right after /hw-env.js:
     <link rel="stylesheet" href="/hw-ui.css">   (Google Fonts <link> stays in the HTML)
   Everything is opt-in via the hw- class prefix. Bare elements are untouched
   except for the minimal reset on .hw-scope / .hw-shell (add either to <body>).

   TOKEN MAPPING (white-label keeps working)
   The theme bootstrap (app/index.html applyLive, login/index.html, GET /v1/theme)
   already sets these custom properties on <html>. hw-ui reads them; it never
   renames them. New --hw-* names are aliases or additions beside them:
     bootstrap --bg          -> --hw-paper     page surface        (tokens.paper)
     bootstrap --on-surface  -> --hw-ink       text                (tokens.ink)
     bootstrap --on-variant  -> --hw-ink-2     secondary text      (tokens.secondary)
     bootstrap --gold        -> --hw-accent    navy: links, focus, accent buttons
     bootstrap --gold-d      -> --hw-accent-d  pressed accent
     bootstrap --on-gold     -> --hw-accent-ink text on accent
     bootstrap --ink         -> --hw-surface-dark  dark surfaces (toast, kbd on dark)
     bootstrap --green/--amber/--red/--blue/--violet -> --hw-ok/--hw-warn/--hw-danger/--hw-info/--hw-violet
   New (no bootstrap equivalent): --hw-ledger, --hw-rule, --hw-camel, --hw-camel-text,
   --hw-shadow-float, --hw-focus, type/space/radius scales, layout sizes.
   Hex values appear ONLY in the :root block below. Component rules use var().

   USAGE (one-liners; see /hw-ui.html for every state)
     Shell    <body class="hw-shell"><nav class="hw-rail">..</nav><div class="hw-main"><header class="hw-topbar">..</header><main class="hw-page">..</main></div>
     Rail     <a class="hw-rail__item is-active" href=".." aria-current="page"><svg class="hw-rail__icon">..</svg><span class="hw-rail__label">Auctions</span></a>
     Buttons  .hw-btn + --primary | --secondary | --quiet | --danger | --accent ; .is-loading ; [disabled]
     Lot no.  <span class="hw-lotno">214<span class="hw-lotno__suffix">A</span></span>
     Table    <div class="hw-ledger hw-table-wrap"><table class="hw-table">..<td class="hw-num">
     Chip     <span class="hw-chip hw-chip--ok">Ready</span>
     Empty    <div class="hw-empty"><p class="hw-empty__title">..</p><p class="hw-empty__body">..</p></div>
   ========================================================================== */

:root {
  /* brand defaults; the theme bootstrap overrides the bootstrap names below */
  --bg: #faf7ef;
  --on-surface: #1b2029;
  --on-variant: #585c62;
  --ink: #1b2029;
  --gold: #26364e;
  --gold-d: #1c2a3e;
  --on-gold: #faf7ef;
  --green: #556249;
  --amber: #77643f;
  --red: #7e4437;
  --blue: #41506a;
  --violet: #5c5470;

  /* aliases (read-through, so inline overrides on <html> flow here) */
  --hw-paper: var(--bg);
  --hw-ink: var(--on-surface);
  --hw-ink-2: var(--on-variant);
  --hw-accent: var(--gold);
  --hw-accent-d: var(--gold-d);
  --hw-accent-ink: var(--on-gold);
  --hw-surface-dark: var(--ink);
  --hw-ok: var(--green);
  --hw-warn: var(--amber);
  --hw-danger: var(--red);
  --hw-info: var(--blue);
  --hw-violet: var(--violet);

  /* additions */
  --hw-ledger: #f3eee2;
  --hw-camel: #8c7351;
  --hw-camel-text: #6e5a3f;
  --hw-rule: color-mix(in srgb, var(--hw-ink) 14%, transparent);
  --hw-rule-strong: color-mix(in srgb, var(--hw-ink) 28%, transparent);
  --hw-hover: color-mix(in srgb, var(--hw-ink) 5%, transparent);
  --hw-press: color-mix(in srgb, var(--hw-ink) 9%, transparent);
  --hw-scrim: color-mix(in srgb, var(--hw-ink) 38%, transparent);
  --hw-shadow-float: 0 12px 32px -12px color-mix(in srgb, var(--hw-ink) 28%, transparent);
  --hw-focus: 0 0 0 3px color-mix(in srgb, var(--hw-accent) 35%, transparent);

  /* type */
  --hw-font-display: 'Jost', 'Inter', system-ui, sans-serif;
  --hw-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hw-fs-12: 12px; --hw-fs-13: 13px; --hw-fs-14: 14px; --hw-fs-16: 16px;
  --hw-fs-20: 20px; --hw-fs-28: 28px; --hw-fs-40: 40px;
  --hw-lh: 1.45;

  /* space 4/8/12/16/20/24/32/48 */
  --hw-sp-1: 4px; --hw-sp-2: 8px; --hw-sp-3: 12px; --hw-sp-4: 16px;
  --hw-sp-5: 20px; --hw-sp-6: 24px; --hw-sp-7: 32px; --hw-sp-8: 48px;

  /* radii */
  --hw-r-ctl: 4px; --hw-r-panel: 8px; --hw-r-pill: 999px;

  /* layout */
  --hw-rail-w: 72px;
  --hw-topbar-h: 56px;
  --hw-row-h: 40px;
  --hw-touch: 44px;
  --hw-bar-h: 60px;

  /* motion (only in response to action) */
  --hw-t-drawer: 180ms; --hw-t-toast: 160ms; --hw-t-settle: 120ms;
}

/* ---- reset (scoped: opt in with .hw-scope or .hw-shell on <body>) ---- */
.hw-scope, .hw-shell { margin: 0; background: var(--hw-paper); color: var(--hw-ink); font: 400 var(--hw-fs-14)/var(--hw-lh) var(--hw-font-body); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
.hw-scope *, .hw-scope *::before, .hw-scope *::after,
.hw-shell *, .hw-shell *::before, .hw-shell *::after { box-sizing: border-box; }
.hw-scope :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd), .hw-shell :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; }
.hw-scope :where(ul, ol)[role="list"], .hw-shell :where(ul, ol)[role="list"] { list-style: none; padding: 0; }
.hw-scope :where(img, svg, video, canvas), .hw-shell :where(img, svg, video, canvas) { display: block; max-width: 100%; }
.hw-scope :where(button, input, select, textarea), .hw-shell :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
.hw-scope :where(button), .hw-shell :where(button) { cursor: pointer; }
.hw-scope :where(a), .hw-shell :where(a) { color: var(--hw-accent); text-underline-offset: 2px; }
.hw-scope :where(table), .hw-shell :where(table) { border-collapse: collapse; border-spacing: 0; }

/* ---- accessibility helpers ---- */
.hw-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hw-skip { position: absolute; left: var(--hw-sp-4); top: -64px; z-index: 100; padding: var(--hw-sp-2) var(--hw-sp-4); background: var(--hw-surface-dark); color: var(--hw-paper); border-radius: var(--hw-r-ctl); text-decoration: none; font-weight: 600; }
.hw-skip:focus { top: var(--hw-sp-2); box-shadow: var(--hw-focus); outline: none; }
.hw-focusable:focus-visible { outline: none; box-shadow: var(--hw-focus); }

/* ---- type ---- */
.hw-display { font-family: var(--hw-font-display); font-weight: 500; letter-spacing: 0; }
.hw-h1 { font: 500 var(--hw-fs-28)/1.2 var(--hw-font-display); letter-spacing: 0; }
.hw-h2 { font: 500 var(--hw-fs-20)/1.3 var(--hw-font-display); letter-spacing: 0; }
.hw-h3 { font: 600 var(--hw-fs-16)/1.35 var(--hw-font-body); }
.hw-hero { font: 500 var(--hw-fs-40)/1.1 var(--hw-font-display); }
.hw-section-title { font: 600 var(--hw-fs-13)/1.3 var(--hw-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hw-ink-2); }
.hw-wordmark { font: 500 var(--hw-fs-16)/1 var(--hw-font-display); letter-spacing: .24em; text-transform: uppercase; }
.hw-text-12 { font-size: var(--hw-fs-12); } .hw-text-13 { font-size: var(--hw-fs-13); }
.hw-text-14 { font-size: var(--hw-fs-14); } .hw-text-16 { font-size: var(--hw-fs-16); }
.hw-muted { color: var(--hw-ink-2); }
.hw-camel-text { color: var(--hw-camel-text); font-weight: 600; }
.hw-strong { font-weight: 600; }
.hw-tnum { font-variant-numeric: tabular-nums; }
.hw-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hw-money { font-family: var(--hw-font-display); font-weight: 500; font-variant-numeric: tabular-nums; }
.hw-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- lot number: the hero of every lot appearance ---- */
.hw-lotno { font-family: var(--hw-font-display); font-weight: 600; font-size: 1.4em; line-height: 1.1; color: var(--hw-ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.hw-lotno__suffix { font-weight: 400; color: var(--hw-ink-2); margin-left: 1px; }
.hw-lotno--camel { color: var(--hw-camel-text); }
.hw-lotno--lg { font-size: var(--hw-fs-28); }
.hw-lot-head { display: flex; align-items: baseline; gap: var(--hw-sp-3); min-width: 0; }
.hw-lot-head__title { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- layout primitives ---- */
.hw-shell { min-height: 100vh; display: grid; grid-template-columns: var(--hw-rail-w) minmax(0, 1fr); }
.hw-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.hw-page { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--hw-sp-6) var(--hw-sp-6) var(--hw-sp-8); flex: 1 1 auto; }
.hw-page--wide { max-width: none; }
.hw-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hw-sp-4); flex-wrap: wrap; padding-bottom: var(--hw-sp-4); margin-bottom: var(--hw-sp-5); border-bottom: 1px solid var(--hw-rule); }
.hw-page__actions { display: flex; gap: var(--hw-sp-2); flex-wrap: wrap; }
.hw-section { padding: var(--hw-sp-6) 0; border-top: 1px solid var(--hw-rule); }
.hw-section:first-child { border-top: 0; }
.hw-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hw-sp-4); margin-bottom: var(--hw-sp-4); }
.hw-ledger { background: var(--hw-ledger); border-radius: var(--hw-r-panel); }
.hw-panel { background: var(--hw-ledger); border-radius: var(--hw-r-panel); padding: var(--hw-sp-5); }
.hw-panel--ruled { background: transparent; border: 1px solid var(--hw-rule); }
.hw-row { display: flex; align-items: center; gap: var(--hw-sp-3); min-height: var(--hw-row-h); padding: 0 var(--hw-sp-5); border-bottom: 1px solid var(--hw-rule); }
.hw-row:last-child { border-bottom: 0; }
.hw-row--link { cursor: pointer; }
.hw-row--link:hover { background: var(--hw-hover); }
.hw-row__grow { flex: 1 1 auto; min-width: 0; }
.hw-stack { display: flex; flex-direction: column; gap: var(--hw-sp-3); }
.hw-stack--lg { gap: var(--hw-sp-5); }
.hw-cluster { display: flex; align-items: center; gap: var(--hw-sp-2); flex-wrap: wrap; }
.hw-spacer { flex: 1 1 auto; }
.hw-grid { display: grid; gap: var(--hw-sp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-rule { border: 0; border-top: 1px solid var(--hw-rule); margin: 0; }
.hw-stat { display: flex; flex-direction: column; gap: var(--hw-sp-1); }
.hw-stat__n { font: 500 var(--hw-fs-28)/1.1 var(--hw-font-display); font-variant-numeric: tabular-nums; }
.hw-stat__l { font-size: var(--hw-fs-13); color: var(--hw-ink-2); }
.hw-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--hw-sp-2) var(--hw-sp-5); font-size: var(--hw-fs-14); }
.hw-dl dt { color: var(--hw-ink-2); }
.hw-dl dd { margin: 0; }

/* ---- rail (left) ---- */
.hw-rail { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; gap: var(--hw-sp-1); padding: var(--hw-sp-3) var(--hw-sp-2); border-right: 1px solid var(--hw-rule); background: var(--hw-paper); overflow-y: auto; }
.hw-rail__brand { display: flex; align-items: center; gap: var(--hw-sp-3); min-height: 48px; padding: 0 var(--hw-sp-2); margin-bottom: var(--hw-sp-3); color: var(--hw-ink); text-decoration: none; }
.hw-rail__mark { flex: 0 0 auto; width: 32px; height: 32px; }
.hw-rail__house { display: none; min-width: 0; font: 500 var(--hw-fs-14)/1.2 var(--hw-font-display); letter-spacing: .12em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-rail__nav { display: flex; flex-direction: column; gap: 2px; }
.hw-rail__item { position: relative; display: flex; align-items: center; gap: var(--hw-sp-3); min-height: 44px; padding: 0 var(--hw-sp-3); border: 0; border-radius: var(--hw-r-ctl); background: transparent; color: var(--hw-ink-2); font: 500 var(--hw-fs-14)/1 var(--hw-font-body); text-decoration: none; text-align: left; justify-content: center; width: 100%; }
.hw-rail__icon { flex: 0 0 auto; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hw-rail__label { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-rail__badge { display: none; margin-left: auto; font-size: var(--hw-fs-12); font-variant-numeric: tabular-nums; color: var(--hw-ink-2); }
.hw-rail__item:hover { background: var(--hw-hover); color: var(--hw-ink); }
.hw-rail__item:active { background: var(--hw-press); }
.hw-rail__item:focus-visible { outline: none; box-shadow: var(--hw-focus); }
.hw-rail__item.is-active { color: var(--hw-ink); font-weight: 600; background: var(--hw-ledger); }
.hw-rail__item.is-active::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hw-camel); }
.hw-rail__item[disabled], .hw-rail__item[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.hw-rail__foot { margin-top: auto; padding-top: var(--hw-sp-3); border-top: 1px solid var(--hw-rule); }
.hw-rail__item--more { display: none; }
@media (min-width: 1280px) {
  .hw-shell { --hw-rail-w: 224px; }
  .hw-rail { padding: var(--hw-sp-3) var(--hw-sp-3); }
  .hw-rail__house, .hw-rail__label, .hw-rail__badge { display: block; }
  .hw-rail__item { justify-content: flex-start; }
  .hw-rail__item.is-active::before { left: -12px; }
}

/* ---- topbar ---- */
.hw-topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: var(--hw-sp-4); min-height: var(--hw-topbar-h); padding: 0 var(--hw-sp-6); background: var(--hw-paper); border-bottom: 1px solid var(--hw-rule); }
.hw-topbar__title { font: 500 var(--hw-fs-20)/1.2 var(--hw-font-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--hw-sp-3); }
.hw-search { position: relative; flex: 0 1 360px; min-width: 0; }
.hw-search .hw-input { padding-right: 36px; width: 100%; }
.hw-search .hw-kbd { position: absolute; right: var(--hw-sp-2); top: 50%; transform: translateY(-50%); pointer-events: none; }
.hw-viewas { display: inline-flex; align-items: center; gap: var(--hw-sp-2); min-height: 28px; padding: 0 var(--hw-sp-3); border-radius: var(--hw-r-pill); border: 1px solid var(--hw-camel); color: var(--hw-camel-text); background: transparent; font: 600 var(--hw-fs-12)/1 var(--hw-font-body); }
.hw-viewas::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hw-camel); }
button.hw-viewas:hover { background: var(--hw-hover); }
button.hw-viewas:focus-visible { outline: none; box-shadow: var(--hw-focus); }
/* View as bar (hw-viewas.js, fixed top-right). The script adds body.hw-viewas-active while the bar shows and
   body.hw-viewas-masq while masquerading; the topbar reserves --hw-viewas-h above its content so nothing overlaps.
   While masquerading the bar is the one camel element: everything else that would be camel turns navy. */
body.hw-viewas-active { --hw-viewas-h: 22px; }
body.hw-viewas-active .hw-topbar { padding-top: var(--hw-viewas-h); min-height: calc(var(--hw-topbar-h) + var(--hw-viewas-h)); }
body.hw-viewas-masq { --hw-camel: var(--hw-accent); --hw-camel-text: var(--hw-accent); }
@media (max-width: 1023px) { body.hw-viewas-active { --hw-viewas-h: 36px; } }

/* ---- bottom tab bar (<1024px): same markup as the rail ---- */
@media (max-width: 1023px) {
  .hw-shell { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--hw-bar-h); }
  .hw-rail { position: fixed; inset: auto 0 0 0; top: auto; height: var(--hw-bar-h); flex-direction: row; align-items: stretch; gap: 0; padding: 0 var(--hw-sp-1); border-right: 0; border-top: 1px solid var(--hw-rule); overflow: visible; z-index: 30; }
  .hw-rail__brand, .hw-rail__foot, .hw-rail__item--secondary { display: none; }
  .hw-rail__nav { flex-direction: row; flex: 1 1 auto; gap: 0; }
  .hw-rail__item { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-height: var(--hw-bar-h); padding: 0 2px; border-radius: 0; font-size: 11px; width: auto; }
  .hw-rail__label { display: block; max-width: 100%; }
  .hw-rail__item--more { display: flex; }
  .hw-rail__item.is-active::before { left: 25%; right: 25%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .hw-topbar { padding: 0 var(--hw-sp-4); }
  .hw-page { padding: var(--hw-sp-4) var(--hw-sp-4) var(--hw-sp-7); }
  .hw-search { display: none; }
  .hw-grid--2, .hw-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- buttons ---- */
.hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--hw-sp-2); min-height: 36px; padding: 0 var(--hw-sp-4); border: 1px solid transparent; border-radius: var(--hw-r-ctl); font: 600 var(--hw-fs-14)/1 var(--hw-font-body); text-decoration: none; white-space: nowrap; background: transparent; color: var(--hw-ink); transition: background-color .12s, border-color .12s, color .12s; position: relative; user-select: none; }
.hw-btn:focus-visible { outline: none; box-shadow: var(--hw-focus); }
.hw-btn--primary { background: var(--hw-camel-text); color: var(--hw-paper); }
.hw-btn--primary:hover { background: color-mix(in srgb, var(--hw-camel-text) 88%, var(--hw-ink)); }
.hw-btn--primary:active { background: color-mix(in srgb, var(--hw-camel-text) 76%, var(--hw-ink)); }
.hw-btn--accent { background: var(--hw-accent); color: var(--hw-accent-ink); }
.hw-btn--accent:hover { background: color-mix(in srgb, var(--hw-accent) 88%, var(--hw-ink)); }
.hw-btn--accent:active { background: var(--hw-accent-d); }
.hw-btn--secondary { background: transparent; color: var(--hw-ink); border-color: var(--hw-rule-strong); }
.hw-btn--secondary:hover { background: var(--hw-hover); border-color: var(--hw-ink-2); }
.hw-btn--secondary:active { background: var(--hw-press); }
.hw-btn--quiet { color: var(--hw-accent); padding: 0 var(--hw-sp-3); }
.hw-btn--quiet:hover { background: var(--hw-hover); }
.hw-btn--quiet:active { background: var(--hw-press); }
.hw-btn--danger { background: transparent; color: var(--hw-danger); border-color: color-mix(in srgb, var(--hw-danger) 45%, transparent); }
.hw-btn--danger:hover { background: color-mix(in srgb, var(--hw-danger) 9%, transparent); border-color: var(--hw-danger); }
.hw-btn--danger:active { background: color-mix(in srgb, var(--hw-danger) 16%, transparent); }
.hw-btn--danger-solid { background: var(--hw-danger); color: var(--hw-paper); }
.hw-btn--danger-solid:hover { background: color-mix(in srgb, var(--hw-danger) 88%, var(--hw-ink)); }
.hw-btn--sm { min-height: 28px; padding: 0 var(--hw-sp-3); font-size: var(--hw-fs-13); }
.hw-btn--lg { min-height: 44px; padding: 0 var(--hw-sp-5); font-size: var(--hw-fs-16); }
.hw-btn--block { display: flex; width: 100%; }
.hw-btn--icon { width: 36px; padding: 0; }
.hw-btn[disabled], .hw-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.hw-btn.is-loading { color: transparent; pointer-events: none; }
.hw-btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hw-paper); border-right-color: transparent; animation: hw-spin .7s linear infinite; }
.hw-btn--secondary.is-loading::after, .hw-btn--quiet.is-loading::after, .hw-btn--danger.is-loading::after { border-color: var(--hw-ink-2); border-right-color: transparent; }
@keyframes hw-spin { to { transform: rotate(360deg); } }
.hw-btn-group { display: inline-flex; gap: var(--hw-sp-2); flex-wrap: wrap; }

/* ---- form controls ---- */
.hw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hw-label { font-size: var(--hw-fs-13); font-weight: 600; color: var(--hw-ink); }
.hw-hint { font-size: var(--hw-fs-12); color: var(--hw-ink-2); }
.hw-error { font-size: var(--hw-fs-12); color: var(--hw-danger); font-weight: 500; }
.hw-input, .hw-select, .hw-textarea { width: 100%; min-height: 36px; padding: 0 var(--hw-sp-3); border: 1px solid var(--hw-rule-strong); border-radius: var(--hw-r-ctl); background: var(--hw-paper); color: var(--hw-ink); font: 400 var(--hw-fs-14)/1.3 var(--hw-font-body); transition: border-color .12s, box-shadow .12s; }
.hw-textarea { padding: var(--hw-sp-2) var(--hw-sp-3); min-height: 88px; resize: vertical; line-height: var(--hw-lh); }
.hw-select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--hw-ink-2) 50%), linear-gradient(135deg, var(--hw-ink-2) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.hw-input::placeholder, .hw-textarea::placeholder { color: var(--hw-ink-2); opacity: .8; }
.hw-input:hover, .hw-select:hover, .hw-textarea:hover { border-color: var(--hw-ink-2); }
.hw-input:focus-visible, .hw-select:focus-visible, .hw-textarea:focus-visible { outline: none; border-color: var(--hw-accent); box-shadow: var(--hw-focus); }
.hw-input[disabled], .hw-select[disabled], .hw-textarea[disabled] { background: var(--hw-ledger); color: var(--hw-ink-2); cursor: not-allowed; border-color: var(--hw-rule); }
.hw-input[readonly] { background: var(--hw-ledger); }
.hw-input.is-invalid, .hw-select.is-invalid, .hw-textarea.is-invalid, .hw-input[aria-invalid="true"], .hw-select[aria-invalid="true"], .hw-textarea[aria-invalid="true"] { border-color: var(--hw-danger); }
.hw-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.hw-check { display: inline-flex; align-items: center; gap: var(--hw-sp-2); min-height: 28px; cursor: pointer; font-size: var(--hw-fs-14); }
.hw-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--hw-accent); }
.hw-check input:focus-visible { outline: none; box-shadow: var(--hw-focus); }
.hw-form-row { display: grid; gap: var(--hw-sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hw-form-actions { display: flex; gap: var(--hw-sp-2); justify-content: flex-end; padding-top: var(--hw-sp-4); border-top: 1px solid var(--hw-rule); }
@media (pointer: coarse) {
  .hw-btn, .hw-input, .hw-select { min-height: var(--hw-touch); }
  .hw-btn--icon { width: var(--hw-touch); }
  .hw-check { min-height: var(--hw-touch); }
}

/* ---- chips (status colours stay muted) ---- */
.hw-chip { --c: var(--hw-ink-2); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--hw-sp-3); border-radius: var(--hw-r-pill); background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); font: 600 var(--hw-fs-12)/1 var(--hw-font-body); white-space: nowrap; }
.hw-chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hw-chip--neutral { --c: var(--hw-ink-2); }
.hw-chip--ok, .hw-chip--ready { --c: var(--hw-ok); }
.hw-chip--warn, .hw-chip--review { --c: var(--hw-warn); }
.hw-chip--danger, .hw-chip--blocked { --c: var(--hw-danger); }
.hw-chip--info { --c: var(--hw-info); }
.hw-chip--violet { --c: var(--hw-violet); }
.hw-chip--camel { --c: var(--hw-camel-text); }
.hw-chip--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--hw-rule-strong); }
.hw-chip--btn { cursor: pointer; border: 0; }
.hw-chip--btn:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.hw-chip--btn:focus-visible { outline: none; box-shadow: var(--hw-focus); }
.hw-chip--btn[aria-pressed="true"], .hw-chip--btn.is-on { background: var(--hw-accent); color: var(--hw-accent-ink); }
.hw-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--hw-r-ctl); border: 1px solid var(--hw-rule-strong); background: var(--hw-paper); color: var(--hw-ink-2); font: 500 var(--hw-fs-12)/1 var(--hw-font-body); }

/* ---- table: 40px rows, sticky header, rules not zebra ---- */
.hw-table-wrap { overflow: auto; max-width: 100%; position: relative; }
.hw-table { width: 100%; font-size: var(--hw-fs-14); }
.hw-table th, .hw-table td { height: var(--hw-row-h); padding: 0 var(--hw-sp-5); border-bottom: 1px solid var(--hw-rule); text-align: left; vertical-align: middle; white-space: nowrap; }
.hw-table th:first-child, .hw-table td:first-child { padding-left: var(--hw-sp-6); }
.hw-table th:last-child, .hw-table td:last-child { padding-right: var(--hw-sp-6); }
.hw-table thead th { position: sticky; top: var(--hw-sticky-top, 0); z-index: 2; background: var(--hw-ledger); font-size: var(--hw-fs-12); font-weight: 600; color: var(--hw-ink-2); border-bottom-color: var(--hw-rule-strong); }
.hw-table th.hw-num, .hw-table td.hw-num { text-align: right; }
.hw-table tbody tr:last-child td { border-bottom: 0; }
.hw-table tbody tr:hover { background: var(--hw-hover); }
.hw-table tbody tr[tabindex], .hw-table tbody tr[data-href], .hw-table tbody tr.hw-row--link { cursor: pointer; }
.hw-table tbody tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--hw-accent); }
.hw-table tbody tr.is-selected { background: color-mix(in srgb, var(--hw-accent) 9%, transparent); }
.hw-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--hw-accent); }
.hw-table tbody tr.is-disabled { opacity: .5; }
.hw-table td.hw-cell-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.hw-table td.hw-cell-wrap { white-space: normal; }
.hw-table th[aria-sort] { cursor: pointer; }
.hw-table th[aria-sort="ascending"]::after { content: " \2191"; }
.hw-table th[aria-sort="descending"]::after { content: " \2193"; }
.hw-table--compact th, .hw-table--compact td { padding: 0 var(--hw-sp-3); }
.hw-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-sp-4); min-height: var(--hw-row-h); padding: 0 var(--hw-sp-6); border-top: 1px solid var(--hw-rule); font-size: var(--hw-fs-13); color: var(--hw-ink-2); }
.hw-thumb { width: 28px; height: 28px; border-radius: var(--hw-r-ctl); background: var(--hw-ledger); object-fit: cover; box-shadow: inset 0 0 0 1px var(--hw-rule); }

/* ---- card / board (flat; the only elevation is on things that float) ---- */
.hw-card { display: flex; flex-direction: column; gap: var(--hw-sp-2); padding: var(--hw-sp-3) var(--hw-sp-4); background: var(--hw-paper); border: 1px solid var(--hw-rule); border-radius: var(--hw-r-panel); text-align: left; color: inherit; transition: border-color .12s, background-color .12s; }
.hw-card--link { cursor: pointer; }
.hw-card:hover { border-color: var(--hw-rule-strong); background: var(--hw-hover); }
.hw-card:focus-visible { outline: none; box-shadow: var(--hw-focus); border-color: var(--hw-accent); }
.hw-card.is-selected { border-color: var(--hw-accent); box-shadow: inset 0 0 0 1px var(--hw-accent); }
.hw-card.is-settling { animation: hw-settle var(--hw-t-settle) ease-out; }
.hw-card--drag { box-shadow: var(--hw-shadow-float); background: var(--hw-paper); cursor: grabbing; transform: rotate(1deg); }
.hw-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-sp-2); font-size: var(--hw-fs-13); color: var(--hw-ink-2); }
.hw-card__est { font: 500 var(--hw-fs-14)/1 var(--hw-font-display); font-variant-numeric: tabular-nums; color: var(--hw-ink); }
.hw-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--hw-sp-4); overflow-x: auto; align-items: start; padding-bottom: var(--hw-sp-3); }
.hw-board__col { display: flex; flex-direction: column; gap: var(--hw-sp-2); min-width: 0; padding: var(--hw-sp-3); background: var(--hw-ledger); border-radius: var(--hw-r-panel); }
.hw-board__col.is-over { box-shadow: inset 0 0 0 2px var(--hw-accent); }
.hw-board__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--hw-sp-1) var(--hw-sp-2); border-bottom: 1px solid var(--hw-rule); font-size: var(--hw-fs-13); font-weight: 600; }
.hw-board__count { color: var(--hw-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
@keyframes hw-settle { from { transform: translateY(-3px) scale(1.01); } to { transform: none; } }

/* ---- tabs (camel marker on the active one) ---- */
.hw-tabs { display: flex; gap: var(--hw-sp-5); border-bottom: 1px solid var(--hw-rule); overflow-x: auto; }
.hw-tab { position: relative; min-height: 40px; padding: 0 2px; border: 0; background: transparent; color: var(--hw-ink-2); font: 500 var(--hw-fs-14)/1 var(--hw-font-body); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.hw-tab:hover { color: var(--hw-ink); }
.hw-tab:focus-visible { outline: none; box-shadow: var(--hw-focus); border-radius: var(--hw-r-ctl); }
.hw-tab.is-active, .hw-tab[aria-selected="true"] { color: var(--hw-ink); font-weight: 600; }
.hw-tab.is-active::after, .hw-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hw-camel); }
.hw-tab[disabled] { opacity: .45; pointer-events: none; }
.hw-seg { display: inline-flex; border: 1px solid var(--hw-rule-strong); border-radius: var(--hw-r-ctl); overflow: hidden; }
.hw-seg__btn { min-height: 32px; padding: 0 var(--hw-sp-4); border: 0; border-left: 1px solid var(--hw-rule); background: transparent; color: var(--hw-ink-2); font: 500 var(--hw-fs-13)/1 var(--hw-font-body); }
.hw-seg__btn:first-child { border-left: 0; }
.hw-seg__btn:hover { background: var(--hw-hover); color: var(--hw-ink); }
.hw-seg__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--hw-accent); }
.hw-seg__btn.is-active, .hw-seg__btn[aria-pressed="true"] { background: var(--hw-accent); color: var(--hw-accent-ink); }

/* ---- menu (floats) ---- */
.hw-menu { min-width: 200px; padding: var(--hw-sp-1); background: var(--hw-paper); border: 1px solid var(--hw-rule); border-radius: var(--hw-r-panel); box-shadow: var(--hw-shadow-float); z-index: 60; }
.hw-menu__item { display: flex; align-items: center; gap: var(--hw-sp-2); width: 100%; min-height: 32px; padding: 0 var(--hw-sp-3); border: 0; border-radius: var(--hw-r-ctl); background: transparent; color: var(--hw-ink); font: 400 var(--hw-fs-14)/1 var(--hw-font-body); text-align: left; text-decoration: none; }
.hw-menu__item:hover, .hw-menu__item:focus-visible { background: var(--hw-hover); outline: none; }
.hw-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--hw-accent); }
.hw-menu__item--danger { color: var(--hw-danger); }
.hw-menu__item[disabled] { opacity: .45; pointer-events: none; }
.hw-menu__sep { height: 1px; margin: var(--hw-sp-1) 0; background: var(--hw-rule); border: 0; }

/* ---- scrim, drawer (slides 180ms), dialog ---- */
.hw-scrim { position: fixed; inset: 0; z-index: 70; background: var(--hw-scrim); opacity: 0; visibility: hidden; transition: opacity var(--hw-t-drawer), visibility 0s linear var(--hw-t-drawer); }
.hw-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.hw-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; display: flex; flex-direction: column; width: min(520px, 100vw); background: var(--hw-ledger); border-left: 1px solid var(--hw-rule); box-shadow: var(--hw-shadow-float); transform: translateX(100%); visibility: hidden; transition: transform var(--hw-t-drawer) ease-out, visibility 0s linear var(--hw-t-drawer); }
.hw-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.hw-drawer--wide { width: min(720px, 100vw); }
.hw-drawer--static { position: static; transform: none; visibility: visible; }
.hw-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hw-sp-4); padding: var(--hw-sp-5) var(--hw-sp-6); border-bottom: 1px solid var(--hw-rule); }
.hw-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--hw-sp-5) var(--hw-sp-6); display: flex; flex-direction: column; gap: var(--hw-sp-5); }
.hw-drawer__foot { display: flex; justify-content: flex-end; gap: var(--hw-sp-2); padding: var(--hw-sp-4) var(--hw-sp-6); border-top: 1px solid var(--hw-rule); background: var(--hw-ledger); }
.hw-dialog { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); background: var(--hw-paper); color: var(--hw-ink); border: 1px solid var(--hw-rule); border-radius: var(--hw-r-panel); box-shadow: var(--hw-shadow-float); padding: 0; }
.hw-dialog.is-open, .hw-dialog[open] { display: flex; animation: hw-rise var(--hw-t-toast) ease-out; }
.hw-dialog::backdrop { background: var(--hw-scrim); }
.hw-dialog--static { position: static; transform: none; display: flex; animation: none; }
.hw-dialog__head { padding: var(--hw-sp-5) var(--hw-sp-6) var(--hw-sp-2); }
.hw-dialog__title { font: 500 var(--hw-fs-20)/1.3 var(--hw-font-display); }
.hw-dialog__body { padding: var(--hw-sp-2) var(--hw-sp-6) var(--hw-sp-5); overflow-y: auto; color: var(--hw-ink-2); }
.hw-dialog__foot { display: flex; justify-content: flex-end; gap: var(--hw-sp-2); padding: var(--hw-sp-4) var(--hw-sp-6); border-top: 1px solid var(--hw-rule); }
@media (max-width: 639px) {
  .hw-drawer { width: 100vw; border-left: 0; }
  .hw-dialog { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; max-height: 90vh; border-radius: var(--hw-r-panel) var(--hw-r-panel) 0 0; }
}

/* ---- toast (rises 160ms) ---- */
.hw-toasts { position: fixed; z-index: 90; right: var(--hw-sp-6); bottom: var(--hw-sp-6); display: flex; flex-direction: column; gap: var(--hw-sp-2); align-items: flex-end; pointer-events: none; }
.hw-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--hw-sp-3); max-width: min(420px, calc(100vw - 32px)); padding: var(--hw-sp-3) var(--hw-sp-4); background: var(--hw-surface-dark); color: var(--hw-paper); border-radius: var(--hw-r-panel); box-shadow: var(--hw-shadow-float); font-size: var(--hw-fs-14); animation: hw-rise var(--hw-t-toast) ease-out; }
.hw-toast--ok { box-shadow: inset 3px 0 0 var(--hw-ok), var(--hw-shadow-float); }
.hw-toast--warn { box-shadow: inset 3px 0 0 var(--hw-warn), var(--hw-shadow-float); }
.hw-toast--err { box-shadow: inset 3px 0 0 var(--hw-danger), var(--hw-shadow-float); }
.hw-toast__action { margin-left: var(--hw-sp-2); border: 0; background: transparent; color: var(--hw-paper); font: 600 var(--hw-fs-13)/1 var(--hw-font-body); text-decoration: underline; padding: var(--hw-sp-1); border-radius: var(--hw-r-ctl); }
.hw-toast__action:focus-visible { outline: none; box-shadow: var(--hw-focus); }
@keyframes hw-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) { .hw-toasts { right: var(--hw-sp-4); left: var(--hw-sp-4); bottom: calc(var(--hw-bar-h) + var(--hw-sp-4)); align-items: stretch; } }

/* ---- banner / inline alert ---- */
.hw-banner { --c: var(--hw-info); display: flex; gap: var(--hw-sp-3); align-items: flex-start; padding: var(--hw-sp-3) var(--hw-sp-4); border-radius: var(--hw-r-panel); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 3px 0 0 var(--c); font-size: var(--hw-fs-14); }
.hw-banner--ok { --c: var(--hw-ok); } .hw-banner--warn { --c: var(--hw-warn); } .hw-banner--danger { --c: var(--hw-danger); }
.hw-banner__title { font-weight: 600; }

/* ---- skeleton (paper to ledger shimmer) ---- */
.hw-skeleton { display: block; height: 12px; border-radius: var(--hw-r-ctl); background: linear-gradient(90deg, var(--hw-ledger) 0%, var(--hw-paper) 50%, var(--hw-ledger) 100%); background-size: 200% 100%; animation: hw-shimmer 1.4s ease-in-out infinite; }
.hw-skeleton--short { width: 40%; } .hw-skeleton--mid { width: 65%; } .hw-skeleton--tall { height: 88px; }
.hw-skeleton-row { display: flex; align-items: center; gap: var(--hw-sp-5); height: var(--hw-row-h); padding: 0 var(--hw-sp-6); border-bottom: 1px solid var(--hw-rule); }
.hw-skeleton-row .hw-skeleton { flex: 1 1 auto; }
.hw-skeleton-row .hw-skeleton:first-child { flex: 0 0 56px; }
@keyframes hw-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- empty / error state (written as direction) ---- */
.hw-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hw-sp-2); max-width: 520px; padding: var(--hw-sp-8) var(--hw-sp-6); }
.hw-empty--center { align-items: center; text-align: center; margin: 0 auto; }
.hw-empty__title { font: 500 var(--hw-fs-20)/1.3 var(--hw-font-display); }
.hw-empty__body { color: var(--hw-ink-2); }
.hw-empty__actions { display: flex; gap: var(--hw-sp-2); flex-wrap: wrap; margin-top: var(--hw-sp-3); }
.hw-empty--error .hw-empty__title { color: var(--hw-danger); }

/* ---- progress ---- */
.hw-progress { height: 4px; border-radius: var(--hw-r-pill); background: var(--hw-rule); overflow: hidden; }
.hw-progress > span { display: block; height: 100%; width: var(--hw-progress, 0%); background: var(--hw-accent); }

/* ---- reduced motion: nothing animates ---- */
@media (prefers-reduced-motion: reduce) {
  .hw-btn, .hw-input, .hw-select, .hw-textarea, .hw-card, .hw-scrim, .hw-drawer { transition: none; }
  .hw-skeleton, .hw-toast, .hw-dialog.is-open, .hw-dialog[open], .hw-card.is-settling { animation: none; }
  .hw-btn.is-loading::after { animation: none; border-right-color: var(--hw-paper); opacity: .7; }
}

/* ---- print: catalogue / appraisal PDF preview ---- */
.hw-print-only { display: none; }
.hw-sheet { width: 100%; max-width: 816px; margin: 0 auto; padding: var(--hw-sp-8); background: var(--hw-paper); border: 1px solid var(--hw-rule); }
.hw-sheet__lot { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--hw-sp-4); padding: var(--hw-sp-4) 0; border-bottom: 1px solid var(--hw-rule); break-inside: avoid; }
@media print {
  @page { margin: 16mm; }
  .hw-scope, .hw-shell { background: white !important; color: black !important; display: block !important; padding: 0 !important; }
  .hw-rail, .hw-topbar, .hw-toasts, .hw-scrim, .hw-drawer, .hw-dialog, .hw-skip, .hw-no-print, .hw-btn, .hw-search { display: none !important; }
  .hw-print-only { display: block !important; }
  .hw-main, .hw-page { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .hw-ledger, .hw-panel, .hw-card, .hw-board__col { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
  .hw-sheet { border: 0 !important; padding: 0 !important; max-width: none !important; }
  .hw-table-wrap { overflow: visible !important; }
  .hw-table thead { display: table-header-group !important; }
  .hw-table thead th { position: static !important; background: transparent !important; color: black !important; }
  .hw-table tr, .hw-sheet__lot, .hw-card { break-inside: avoid !important; page-break-inside: avoid !important; }
  .hw-chip { background: transparent !important; box-shadow: inset 0 0 0 1px currentColor !important; }
  .hw-lotno, .hw-lotno__suffix, .hw-muted { color: black !important; }
  .hw-print-break { break-before: page !important; }
  a { color: inherit !important; text-decoration: none !important; }
}