/* chimney-services — the screens of the field-sales app. The colours are the office's one palette, in
   the block below (stamped from platform-base/bina-ui/theme-tokens.css, gate G27); everything after it
   names tokens only (G82). English and left to right: the office of a Texas company (D7). */
/* @bina-theme-tokens:start */
/* OLIVE GROVE — the one palette of the office (the owner, 2026-10-07 · DGO-450). Four hues, sampled
   from his mock-up, and the ground they stand on. A screen never writes a colour: it names one of
   these. Each hue is the colour itself (a FILL — a button, a bar, a dot), «-d» for text and thin
   lines on the ground (4.5:1 or more), «-soft» and «-line» for a tint and its hairline, and «-ink»
   for what is written ON the fill. The role names every screen already uses point at them:
   (no backtick in this block: one of its copies lives inside a script's template string)
     olive  the brand and the main action · what is well, what is done
     sky    what is in motion, what only informs · a link
     lime   look here — a warning, something waiting
     plum   a person must act — a failure, a removal, the one final action
   Contrast, measured (WCAG): ink on the ground 13.7 · muted 4.65 · light text on olive 5.51 and on
   plum 9.54 · ink on lime 6.88 · its ink on sky 6.32 · sky-d 4.61 · lime-d 4.70 · violet 5.32 ·
   on the desk: its ink 6.32 (dark: 13.96), and 11.2 where the sky pales (dark: 5.12). */
:root,:root[data-theme="light"]{
  color-scheme:light;
  accent-color:var(--accent);   /* the browser's OWN controls - a checkbox, a radio, a range, a progress bar - on both grounds: said once, here (it was said for eight single controls, and every other one was the browser's blue) */
  --bg:#f3f5f7; --surface:#fff; --surface-2:#f9fafb; --ink:#1f2a17; --muted:#6a7068; --line:#dcdfde;
  --olive:#56693f; --olive-d:#475734; --olive-soft:#e7eae4; --olive-line:#bfc6b6; --olive-ink:#f3f5f7;
  --sky:#7baae3; --sky-d:#2a6fc4; --sky-soft:#edf3fb; --sky-line:#cddff4; --sky-ink:#13263f;
  --lime:#a9b84c; --lime-d:#69732e; --lime-soft:#f3f5e6; --lime-line:#dee4bb; --lime-ink:#1f2a17;
  --plum:#5b3349; --plum-d:#4a303b; --plum-soft:#e8e2e6; --plum-line:#c1b1ba; --plum-ink:#f3f5f7;
  --accent:var(--olive); --accent-d:var(--olive-d); --accent-soft:var(--olive-soft); --accent-ink:var(--olive-ink);
  --blue:var(--sky-d); --amber:var(--lime-d); --red:var(--plum);
  --violet:#7c5c6d;   /* plum, lifted a fifth toward white: someone has to look — nothing has failed */
  --ok:var(--olive); --warn:var(--lime-d); --danger:var(--plum); --info:var(--sky-d);
  --ok-soft:var(--olive-soft); --warn-soft:var(--lime-soft); --danger-soft:var(--plum-soft); --info-soft:var(--sky-soft);
  --red-soft:var(--plum-soft); --amber-soft:var(--lime-soft); --blue-soft:var(--sky-soft); --violet-soft:var(--plum-soft);
  --side:var(--olive); --side-ink:#f3f5f7; --side-mut:#dce1da; --side-line:#788765;
  --desk:var(--sky); --desk-ink:var(--sky-ink);   /* desktop mode's ground is the sky (the owner, DGO-452), and what is written straight on it */
  --scrim:rgba(31,42,23,.5);                      /* what dims a screen behind a pop-up */
  --shadow:0 1px 3px rgba(31,42,23,.08),0 6px 24px rgba(31,42,23,.06);
  --shadow-lg:0 20px 60px rgba(31,42,23,.28);
  /* ONE COLOUR AND ONE ANIMAL PER OFFICE (the owner, 2026-10-09 · flt-002). When offices are linked,
     a person reads WHICH office a thing belongs to without opening it, so each office gets a hue of
     its own. The hue is an IDENTITY and never a health state: an office that stopped answering keeps
     its colour, and the quiet mark is the one that says "not answering". Each is an ALIAS of the
     palette's own hue — no fourth value is invented, and because the ground re-points the hue, the
     office mark follows the ground by itself. Each office's animal (elephant, deer, eagle) is a
     glyph of bina-icons.js. */
  --office-hp:var(--muted);   /* hp · elephant — grey: the heavy laptop at home, in the palette's own grey */
  --office-mac:var(--lime);   /* macbook · deer — yellow: the palette has one yellow and it is lime. A FILL, so what is written ON it is --lime-ink, never this */
  --office-vps:var(--sky-d);  /* vps · eagle — deep sky blue, «the eagle in the clouds». THE OWNER'S OWN CHOICE (2026-10-09, in writing: vps = נשר + כחול-שמיים) — this line is the colour he picked, not a default kept for him */
}

/* ── A LINKED OFFICE'S MARK, BY NAME (flt-004) ───────────────────────────────────────────────
   The link carries a NAME — mark: {color, animal} in the catalog, from the office's own identity
   — and never a value: the office that DRAWS a linked tile owns the pixels, so it paints the name
   with its own palette. These seven rules are that translation, one per family above; a screen sets
   data-office-hue="lime" and paints var(--office-hue).
   A name this file does not know paints nothing, which is why the vocabulary in
   apps/dgo-extend/identity.py may only name families that exist here — and why --red and --ok
   are not among them: they mean «danger» and «it is well» on every screen in the office. */
[data-office-hue="grey"]   { --office-hue:var(--muted); }
[data-office-hue="lime"]   { --office-hue:var(--lime); }
[data-office-hue="sky"]    { --office-hue:var(--sky-d); }
[data-office-hue="olive"]  { --office-hue:var(--olive-d); }
[data-office-hue="plum"]   { --office-hue:var(--plum); }
[data-office-hue="blue"]   { --office-hue:var(--blue); }
[data-office-hue="violet"] { --office-hue:var(--violet); }
/* the dark ground is the same four hues on the palette's own ink, and the SAME legend. Olive on that
   ink is 2.5:1, so its text step there is olive LIFTED — its own hue and saturation, lighter (7.14
   on a card, 4.82 on its own tint) — and the brand, the main action and «it is well» take that step.
   Lime stays «look here» and the sky «in motion», as on the light ground: were lime the accent here
   (it was, for a day), a warning, a selection and «it is well» were one colour. Each «-d» on its
   own «-soft» there, measured: olive 4.82 · sky 4.62 · lime 4.63 · plum 4.71. */
@media (prefers-color-scheme:dark){
  :root{ color-scheme:dark;
         --bg:#141b0f; --surface:#1f2a17; --surface-2:#192213; --ink:#f3f5f7; --muted:#a2a8a2; --line:#414a3b;
         --olive-d:#a5ba8c; --olive-soft:#384629; --olive-line:#56693f;
         --sky-d:#7baae3; --sky-soft:#2e3f38; --sky-line:#4d6a8c;
         --lime-d:#a9b84c; --lime-soft:#3b4622; --lime-line:#69732e;
         --plum-d:#ad99a4; --plum-soft:#402f33; --plum-line:#7c5c6d;
         --accent:var(--olive-d); --accent-ink:var(--surface);
         --red:#ad99a4; --violet:#bdadb6; --danger:#ad99a4; --ok:var(--olive-d); --side:var(--surface);
         --desk:var(--sky-ink); --desk-ink:var(--ink); --scrim:rgba(0,0,0,.6);
         --shadow:0 1px 3px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);
         --shadow-lg:0 20px 60px rgba(0,0,0,.55); }
}
:root[data-theme="midnight"]{
  color-scheme:dark;
  --bg:#141b0f; --surface:#1f2a17; --surface-2:#192213; --ink:#f3f5f7; --muted:#a2a8a2; --line:#414a3b;
  --olive-d:#a5ba8c; --olive-soft:#384629; --olive-line:#56693f;
  --sky-d:#7baae3; --sky-soft:#2e3f38; --sky-line:#4d6a8c;
  --lime-d:#a9b84c; --lime-soft:#3b4622; --lime-line:#69732e;
  --plum-d:#ad99a4; --plum-soft:#402f33; --plum-line:#7c5c6d;
  --accent:var(--olive-d); --accent-ink:var(--surface);
  --red:#ad99a4; --violet:#bdadb6; --danger:#ad99a4; --ok:var(--olive-d); --side:var(--surface);
  --desk:var(--sky-ink); --desk-ink:var(--ink); --scrim:rgba(0,0,0,.6);
  --shadow:0 1px 3px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
}
/* THE KEYBOARD'S RING - what the browser draws around the stop the keyboard is on, in the palette, wherever
   a part draws none of its own. It has no specificity at all (:where), so any rule of a part wins. Two
   screens said this for themselves; on the others nearly every stop wore the browser's ring (DGO-455).
   A field keeps the offset it has - fourteen rules draw a field's own outline and say no offset. An area
   (a scroll box, a table) takes the ring inside, where nothing clips it; a control takes it outside,
   where a filled button does not hide it. */
:where(:focus-visible){outline:2px solid var(--accent)}
:where(:focus-visible:not(a,button,summary,[role=button],input,select,textarea)){outline-offset:-2px}
:where(a,button,summary,[role=button]):focus-visible{outline-offset:2px}
/* HEBREW AT A HEAVY WEIGHT - on Windows, where the first family of --font is installed. "Segoe UI" has its
   Hebrew in Light, Regular, Semibold and Bold. Asked for 800 or 900 the browser takes the family's Black
   face, which has none, and so has every family after it - so the Hebrew of every title at 800 was drawn in
   the system's last-resort serif, thin, beside Latin in Black: «חשבונות ומראות» at 20px is 150px wide at 700
   and 120px at 800 (Chrome 154; the screens ask for 800 in 167 places, the question's title among them).
   These faces give the family's HEBREW RANGE the faces that have it. A family a sheet names is no longer the
   system's for those characters, so every weight and both styles are named, each as the system resolves it:
   measured, only upright 800 and 900 change. Any other character is not theirs and goes on to the next
   family the screen names - system-ui in --font, on Windows the same faces, Black included - which is why
   G27 asks that system-ui follows wherever a screen names this family itself. Where the family is not
   installed nothing here resolves and nothing changes. */
@font-face{font-family:"Segoe UI";src:local("Segoe UI Light");font-weight:100 300;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI");font-weight:400;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Semibold");font-weight:500 600;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Bold");font-weight:700 900;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Light Italic");font-weight:100 300;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Italic");font-weight:400;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Semibold Italic");font-weight:500 600;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Bold Italic");font-weight:700 900;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
/* @bina-theme-tokens:end */

/* ── the app's own: radii, type, and the few components it draws ─────────────────────────────── */
:root{--r:16px;--r-sm:9px;--pill:999px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font);-webkit-text-size-adjust:100%}
a{color:var(--sky-d)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:12px}
.hidden{display:none!important}

.top{position:sticky;top:0;z-index:5;background:var(--olive);color:var(--olive-ink);display:flex;align-items:center;gap:10px;padding:10px 16px}
.top .brand{font-weight:800;font-size:16px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .who{font-size:12px;opacity:.9}
.top button{background:transparent;border:1px solid var(--side-line);color:var(--olive-ink);border-radius:var(--pill);padding:5px 12px;font:inherit;font-size:12px;cursor:pointer;min-height:32px}
.tabs{display:flex;gap:4px;overflow-x:auto;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.tabs a{white-space:nowrap;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:var(--pill);font-size:13px;font-weight:600}
.tabs a[aria-current="page"]{background:var(--olive-soft);color:var(--olive-d)}
main{max-width:980px;margin:0 auto;padding:14px 14px 96px}
h1{font-size:20px;margin:4px 0 12px;font-weight:800}
h2{font-size:16px;margin:0 0 10px;font-weight:800}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--olive);background:var(--olive);color:var(--olive-ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn.ghost{background:var(--surface);color:var(--olive-d);border-color:var(--line)}
.btn.danger{background:var(--surface);color:var(--plum);border-color:var(--plum-line)}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
.btn.block{width:100%}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.grow{flex:1;min-width:0}
.fab{position:fixed;inset-inline-end:16px;bottom:18px;z-index:6;border-radius:var(--pill);box-shadow:var(--shadow-lg);min-height:52px;padding:0 22px}

label.f{display:block;margin:10px 0}
label.f span{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
textarea{min-height:88px;resize:vertical}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.pill{display:inline-block;padding:2px 10px;border-radius:var(--pill);font-size:12px;font-weight:700;white-space:nowrap;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pill.draft{background:var(--surface-2);color:var(--muted)}
.pill.submitted,.pill.awaiting_deposit{background:var(--lime-soft);color:var(--lime-d);border-color:var(--lime-line)}
.pill.approved,.pill.paid,.pill.awaiting_production,.pill.produced,.pill.awaiting_installation{background:var(--sky-soft);color:var(--sky-d);border-color:var(--sky-line)}
.pill.installed,.pill.closed{background:var(--olive-soft);color:var(--olive-d);border-color:var(--olive-line)}
.pill.rejected,.pill.cancelled{background:var(--plum-soft);color:var(--plum-d);border-color:var(--plum-line)}

.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:10px;align-items:center;justify-content:space-between;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-height:56px}
.item .t{font-weight:700}
.item .s{font-size:12px;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--pill);padding:6px 12px;min-height:36px;font:inherit;font-size:13px;cursor:pointer}
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.chip[aria-pressed="true"]{background:var(--olive);color:var(--olive-ink);border-color:var(--olive)}
.chip.full{opacity:.45;cursor:not-allowed}

.steps{display:flex;gap:4px;margin:0 0 12px}
.steps i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.steps i.on{background:var(--olive)}
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.capcard{text-align:start;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px;min-height:72px;font:inherit;color:inherit;cursor:pointer}
.capcard[aria-pressed="true"]{border:2px solid var(--olive);background:var(--olive-soft)}
.diagram{width:100%;max-width:420px;display:block;margin:6px auto 4px}
.diagram .shape{fill:var(--surface-2);stroke:var(--ink);stroke-width:2}
.diagram .dim{stroke:var(--sky-d);stroke-width:1.5}
.diagram text{fill:var(--sky-d);font:600 13px var(--font)}

.price{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px}
.price .total{font-weight:800;font-size:18px;border-top:1px solid var(--line);padding-top:6px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:8px 0}
.facts div{background:var(--surface);padding:8px 10px;min-width:0}
.facts .k{font-size:11px;color:var(--muted);font-weight:600}
.facts .v{font-size:13px;overflow-wrap:anywhere}
.callout{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px;margin:8px 0;font-size:13px}
.callout.warn{background:var(--lime-soft);border-color:var(--lime-line)}
.callout.bad{background:var(--plum-soft);border-color:var(--plum-line)}
.callout.ok{background:var(--olive-soft);border-color:var(--olive-line)}
.thread{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.msg{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font-size:13px}
.msg .by{font-size:11px;color:var(--muted);font-weight:600}
.msg.status{background:var(--sky-soft);border-color:var(--sky-line)}
.msg.internal{background:var(--lime-soft);border-color:var(--lime-line)}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photos img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.board{display:flex;flex-direction:column;gap:8px}
.day{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:10px 12px}
.day .bar{height:8px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;display:flex;margin:6px 0}
.day .bar i{display:block;height:100%}
.day .bar i.c{background:var(--olive)}
.day .bar i.h{background:var(--lime)}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.table th{font-size:11px;color:var(--muted)}
.table input,.table select{min-height:36px;padding:6px 8px;font-size:14px}
/* an editable table keeps its columns readable and scrolls sideways on a phone, never crushes them */
.scroll .table{min-width:600px}
.table input{width:100%;min-width:64px}
.table input[data-f="name"]{min-width:170px}
.table select{min-width:140px}
.scroll{overflow-x:auto}
.toast{position:fixed;inset-inline:16px;bottom:84px;z-index:20;max-width:520px;margin:0 auto;background:var(--ink);color:var(--surface);border-radius:var(--r-sm);padding:12px 14px;box-shadow:var(--shadow-lg)}
.login{max-width:380px;margin:12vh auto 0}
/* a question asked in the page (app.js `ask`), never the browser's own dialog */
.ask{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:var(--scrim)}
.ask-card{width:min(440px,100%);margin:0;outline:0}
.ask-card h2{margin:0 0 8px;font-size:16px}
.ask-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
/* the customer's deposit page (/pay/<token>), rendered by the server into pay.html */
.login dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0}
.login dt{color:var(--muted);font-size:12px;align-self:center}
.login dd{margin:0;font-variant-numeric:tabular-nums}
.login form{margin-top:14px}
.login .btn{width:100%}
.note{background:var(--lime-soft);border:1px solid var(--lime-line);border-radius:var(--r-sm);padding:10px 12px}
@media (max-width:560px){.two{grid-template-columns:1fr}.facts{grid-template-columns:1fr}}