/* ══ THE LETTERHEAD ══════════════════════════════════════════════════════
   The family chrome, ported from Jobs webapp/app/globals.css (.lh, .lhL,
   .brandhit, .lh-rules, .lh-pop and the lhp-grow/lhp-finish loader) with the
   values Jobs resolves under its signage theme written in. js/letterhead.js
   says what is Purchasing's own and why.

   The tokens are scoped to .chrome, not :root, so nothing on the screens below
   changes: this file can only reach the letterhead and its popup. */
.chrome {
  --charcoal: #171614;
  --red: #eb161e;          /* SHAPES only — the stub, the dot, focus rings */
  --red-text: #cd1219;     /* WORDS — PURCHASING, the web address */
  --ink-decorative: #98948c;
  --text: #171614;
  --text-muted: #5f5c56;
  --border: #cfccc4;
  --border-soft: #e3e1db;
  --surface: #ffffff;
  --surface-sunken: #f4f3ef;
  --radius: 6px;
  --radius-sm: 4px;
  --e-out: cubic-bezier(.4,0,1,1);
  --lh-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative; z-index: 30; flex-shrink: 0;
}
.lh {
  --dbp-paper-0: #fbfaf8;
  --dbp-paper-1: #fbfaf8;
  --dbp-paper-2: #f4f3ef;
  --dbp-rule: #cfccc4;
  --dbp-hair: #e3e1db;
  position: relative; isolation: isolate; overflow: clip; contain: paint;
  padding: 1.15rem 1.5rem .9rem;
  background:
    radial-gradient(125% 240% at 8% -70% in oklab,
      oklch(100% 0 0 / .96) 0%, oklch(99% .002 82 / .45) 34%, oklch(99% .002 82 / 0) 66%),
    radial-gradient(112% 195% at 102% 155% in oklab,
      oklch(95.6% .0055 78 / .85) 0%, oklch(95.6% .0055 78 / 0) 62%),
    linear-gradient(176deg in oklab, var(--dbp-paper-0) 4%, var(--dbp-paper-1) 62%, var(--dbp-paper-2));
  border-bottom: 1px solid var(--dbp-hair);
  font-family: var(--lh-font); color: var(--text);
}
.lh-light {
  position: absolute; z-index: 0; top: -70%; bottom: -70%; left: 0; width: 34%;
  background: radial-gradient(closest-side in oklab, oklch(100% 0 0 / .9), oklch(100% 0 0 / 0) 74%);
  filter: blur(24px); will-change: transform; pointer-events: none;
  animation: lh-light 367s linear infinite -70s;
}
@keyframes lh-light { from { transform: translate3d(-110%, 0, 0) } to { transform: translate3d(400%, 0, 0) } }
.lh-wm {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  color: color-mix(in oklab, var(--charcoal) 34%, transparent);
  opacity: .30; pointer-events: none;
  mask-image:
    linear-gradient(90deg, rgba(0,0,0,0), #000 22%, #000 78%, rgba(0,0,0,0)),
    radial-gradient(120% 220% at 10% -60%, #000 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,0) 80%);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}
.lh-row { display: flex; align-items: stretch; gap: 1.25rem; position: relative; z-index: 2; }
.lh-rule-v {
  width: 1px; flex: 0 0 auto; margin: .35rem 0 .45rem;
  background: linear-gradient(to bottom in oklab,
    color-mix(in oklab, var(--charcoal) 3%, transparent),
    color-mix(in oklab, var(--charcoal) 28%, transparent) 48%,
    color-mix(in oklab, var(--charcoal) 3%, transparent));
}
.lh-name { flex: 0 0 auto; min-width: 0; align-self: flex-end; padding-bottom: 3px; }
.lh-sub {
  margin-top: 0; font-family: var(--lh-font); font-size: 9.5px; font-weight: 600;
  letter-spacing: .215em; margin-right: -.215em; text-transform: uppercase;
  color: var(--ink-decorative); line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-synthesis-small-caps: none;
}
.lh-gap { flex: 1 1 0; min-width: 1rem; }
.lh-addr { flex: 0 0 auto; align-self: flex-end; text-align: right; font-family: var(--lh-font); line-height: 1; }
.lh-addr-1 { font-size: 11px; font-weight: 700; letter-spacing: .075em;
  color: color-mix(in oklab, var(--charcoal) 88%, var(--dbp-paper-2)); }
.lh-addr-2 { margin-top: .52rem; font-size: 11px; font-weight: 600; letter-spacing: .075em;
  color: color-mix(in oklab, var(--charcoal) 80%, var(--dbp-paper-2)); }
.lh-addr-2 i { font-style: normal; color: var(--red-text); padding: 0 .18em; }
.lh-addr-3 { margin-top: .52rem; font-size: 11px; font-weight: 700; letter-spacing: .075em; color: var(--red-text); }
.lh-acts { flex: 0 0 auto; align-self: flex-end; margin-left: 1.25rem; }
.lh-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: color-mix(in oklab, var(--dbp-paper-0) 70%, transparent);
  color: var(--text); border: 1px solid var(--dbp-rule); border-radius: var(--radius);
  padding: .32rem .78rem; font: inherit; font-size: .875rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  backdrop-filter: saturate(1.3); -webkit-backdrop-filter: saturate(1.3);
  transition: background 130ms var(--e-out);
}
.lh-btn:hover { background: color-mix(in oklab, var(--charcoal) 6%, var(--dbp-paper-0)); }
.lh-rules { position: relative; z-index: 2; margin-top: .95rem; height: 6px; }
.lh-rules i { position: absolute; left: 0; right: 0; display: block; }
.lh-rules i:nth-child(1) { top: 0; height: 2.5px;
  background: linear-gradient(90deg in oklab,
    color-mix(in oklab, var(--charcoal) 62%, transparent),
    color-mix(in oklab, var(--charcoal) 46%, transparent) 58%,
    color-mix(in oklab, var(--charcoal) 24%, transparent)); }
.lh-rules i:nth-child(2) { top: 0; height: 2.5px; right: auto; width: var(--lhp-home); background: var(--red); }

/* ── the light chrome (.lhL) ── */
.lh.lhL { padding: .95rem 1.5rem .8rem; border-bottom: 0; }
.lhL .lh-row { align-items: flex-end; gap: 1.1rem; }
.lhL .lh-rule-v { margin: .2rem 0 .25rem; }
.lhL .lh-addr-2, .lhL .lh-addr-3 { margin-top: .42rem; }
.lhL .lh-rules { margin-top: .75rem; height: 2.5px; }
.lhL .lh-acts { display: flex; align-items: center; gap: .45rem; }

/* ── the lockup: mark | ESCARPITA over PURCHASING ──
   Set as Accounting's own-nav lockup (.jlock-*): Jobs' ESCARPITA crop at
   14px, the app's word at 10px. */
.plock-mark { height: 52px; width: auto; display: block; }
.plock-st { display: grid; gap: 6px; justify-items: start; }
.plock-word { height: 14px; width: auto; display: block; }
.plock-app { height: 10px; width: auto; display: block; fill: var(--red-text); }
.brandhit { display: flex; align-items: stretch; flex: 0 0 auto; }
.brandhit-m, .brandhit-b {
  display: flex; align-items: center;
  background: none; border: 0;
  font: inherit; color: inherit; text-decoration: none; cursor: pointer;
}
.brandhit-m { padding: 3px .3rem 3px 3px; margin-left: -3px; border-radius: var(--radius) 0 0 var(--radius); }
.brandhit-b { gap: .15rem; padding: 3px 7px 3px .3rem; border-radius: 0 var(--radius) var(--radius) 0; }
.brandhit-m:hover, .brandhit-b:hover { background: color-mix(in oklab, var(--charcoal) 4%, transparent); }
.brandhit.no-apps:hover .brandhit-m, .brandhit.no-apps:hover .brandhit-b { background: color-mix(in oklab, var(--charcoal) 4%, transparent); }
.brandhit-m:focus-visible, .brandhit-b:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.brandhit .cv { color: var(--ink-decorative); font-size: 11px; margin-left: .15rem; }
/* No switcher for this seat: no chevron, and the words go home like the mark. */
.brandhit.no-apps .cv, body.driver-mode .brandhit .cv { display: none; }

/* Sign out lives in the app switcher for every seat that has one, as in
   Accounting; a seat without a switcher (shop) keeps the button, because a
   seat with nowhere else to go still has to be able to leave. Drivers have
   no switcher either, so theirs shows here, with the name under it, as Jobs
   does (2026-11-09, mocks/driver-ui-v3.html). The extra .lhL is load-bearing:
   the old driver-mode show rule lost to the hide rule on specificity, since
   drivers never get .no-apps, and nobody could sign out (2026-11-02). */
.brandhit:not(.no-apps) ~ .lh-acts #lh-out { display: none; }
body.driver-mode .lhL .lh-acts { align-self: flex-start; }
body.driver-mode .lhL .lh-acts #lh-out {
  display: inline-flex; align-items: center; position: relative; height: 32px; padding: 0 11px;
  border: 1px solid #cfccc4; border-radius: 6px; background: rgba(255,255,255,.6);
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #171614;
}
/* 32 to look at, 44 to hit. */
body.driver-mode .lhL .lh-acts #lh-out::after { content: ''; position: absolute; inset: -6px -8px; }
body.driver-mode .lhL .lh-acts #lh-out .lh-out-i { display: none; }
.lh-who { display: none; }
body.driver-mode .lh-name { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; min-width: 0; }
body.driver-mode .lh-who { display: block; flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; line-height: 1; color: #5f5c56; }
.lh-btn-out { gap: .4rem; font-weight: 550; padding: .36rem .66rem; color: var(--text-muted); }
.lh-btn-out:hover { color: var(--text); }
.lh-out-i { flex: none; }

/* ── the app switcher popup ──
   A SIBLING of the sheet, not a child: .lh is overflow:clip + contain:paint,
   so a menu inside it would be cut off at its edge (the first thing that bit
   in Jobs). #app-switch sits in .chrome and main.js positions the menu. */
.app-switch { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.app-switch-veil { position: fixed; inset: 0; z-index: 2000; }
.lh-pop {
  position: absolute; z-index: 2001; min-width: 208px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px color-mix(in oklab, var(--charcoal) 17%, transparent),
              0 1px 2px color-mix(in oklab, var(--charcoal) 10%, transparent);
  padding: 5px; display: grid; gap: 1px; font-family: var(--lh-font);
}
.lh-pop-apps { min-width: 196px; }
.lh-pop-i {
  display: flex; align-items: center; gap: .55rem; padding: .42rem .62rem;
  border-radius: var(--radius-sm); font: inherit; font-size: .875rem;
  font-weight: 600; color: var(--text); white-space: nowrap;
  text-decoration: none; text-align: left; background: none; border: 0;
  cursor: pointer; width: 100%;
}
.lh-pop-i:hover, .lh-pop-i:focus-visible { background: var(--surface-sunken); text-decoration: none; }
.lh-pop-i.is-here { color: var(--red-text); box-shadow: inset 2px 0 0 var(--red); background: var(--surface-sunken); cursor: default; }
.lh-pop-k { margin-left: auto; font-size: .75rem; color: var(--ink-decorative); font-weight: 500; }
.lh-pop hr { border: 0; border-top: 1px solid var(--border-soft); margin: 4px 2px; }
.lh-pop-hd {
  padding: .3rem .62rem .18rem; font-size: 9.5px;
  font-weight: 700; line-height: 1.2; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-decorative);
}

/* ── the loader: the red stub grows, parks at 72%, completes, retracts ── */
:root { --lhp-home: 118px; }
@keyframes lhp-grow {
  0%     { width: var(--lhp-home); }
  11.5%  { width: 26%; }
  32.6%  { width: 46%; }
  63.5%  { width: 60%; }
  100%   { width: 72%; }
}
@keyframes lhp-finish {
  0%   { width: var(--lhp-from, 72%); }
  30%  { width: 100%; }
  45%  { width: 100%; }
  100% { width: var(--lhp-home); }
}
html[data-route-loading="grow"] .lhL .lh-rules i:nth-child(2) { animation: lhp-grow 5128ms linear forwards; }
html[data-route-loading="finish"] .lhL .lh-rules i:nth-child(2) { animation: lhp-finish 600ms linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .lh-light { animation: none; }
  html[data-route-loading] .lhL .lh-rules i:nth-child(2) { animation: none; }
}

@media (max-width: 860px) {
  :root { --lhp-home: 82px; }
  .lh.lhL { padding: .65rem .85rem .6rem; }
  .lhL .lh-row { flex-wrap: wrap; align-items: center; gap: .5rem; }
  .lh-name { order: 5; flex: 1 1 100%; align-self: center; padding-bottom: 0; }
  .lh-rule-v, .lh-gap, .lh-addr { display: none; }
  .lh-sub { font-size: 8px; letter-spacing: .15em; margin-right: -.15em; text-overflow: clip; }
  .lh-sub-y { display: none; }
  .lh-acts { order: 4; margin-left: auto; }
  .lhL .lh-rules { margin-top: .6rem; }
  .brandhit { min-height: 44px; }
  .brandhit-m { padding-right: .225rem; }
  .brandhit-b { padding-left: .225rem; }
  .plock-mark { height: 34px; }
  .plock-st { gap: 4px; }
  .plock-word { height: 10px; }
  .plock-app { height: 7.5px; }
  .lh-btn-out { padding: .34rem .52rem; }
  .lh-out-i { display: none; }
  .lh-pop { min-width: 184px; }
}
/* The driver PWA runs under the phone's status bar. */
body.driver-mode .lh.lhL { padding-top: calc(.65rem + env(safe-area-inset-top)); }

/* ── the tab row, on the letterhead's stock ──
   Accounting's module bar (escarpita-accounting 679d991 globals.css .modbar):
   the sheet carried one row further, a hairline under it instead of the old
   2px ink rule, Overpass 15/600, and the active tab 800 with a 2.5px red
   underline. Selectors outweigh the signage block in purchasing.html; the
   buttons, their order and setMainTab are untouched. */
body[data-theme="signage"] #app > .main-tab-row {
  height: 48px; padding: 0 1.5rem; gap: 2px; align-items: stretch;
  background: var(--sig-bg); border-bottom: 1px solid var(--sig-hair2);
}
body[data-theme="signage"] #app > .main-tab-row .mtab {
  display: flex; align-items: center; padding: 0 .95rem;
  font-family: var(--sig-disp); font-size: 15px; font-weight: 600; color: var(--sig-ink2);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
body[data-theme="signage"] #app > .main-tab-row .mtab:first-child { padding-left: 0; }
body[data-theme="signage"] #app > .main-tab-row .mtab:hover { color: var(--sig-ink); }
body[data-theme="signage"] #app > .main-tab-row .mtab.active {
  color: var(--sig-ink); font-weight: 800; border-bottom-color: #eb161e;
}
@media (max-width: 1400px) {
  body[data-theme="signage"] #app > .main-tab-row .mtab { padding: 0 .7rem; }
}
@media (max-width: 860px) {
  body[data-theme="signage"] #app > .main-tab-row { padding: 0 .85rem; }
}

/* ── the calmer row (mocks/purchasing-nav-calm-v1.html, Justus 2026-10-27) ──
   ③ a tab's count is grey type, not a red pill — red is the active underline
   and nothing else. ④ "N late" on the Shop tab is the one red word, shown only
   when N > 0 (js/shop.js shopTabLate). ⑤ at phone width the row is one button,
   the page you are on, ▾ opens the rest (js/main.js pageMenu). The shop
   computer's own seat keeps its three glove-sized tabs at every width. */
.mtab-c { margin-left: 7px; font: 600 13px -apple-system, system-ui, 'Segoe UI', sans-serif;
  color: #8a867e; font-variant-numeric: tabular-nums; }
.mtab-late { margin-left: 7px; font: 700 13px -apple-system, system-ui, 'Segoe UI', sans-serif;
  color: #cd1219; font-variant-numeric: tabular-nums; }
.mtab-late[hidden] { display: none; }
#app > .main-tab-row > .mtab-page { display: none !important; }
.mtab-chev { font-size: 11px; color: var(--sig-ink2, #5f5c56); margin-left: 6px; }
.page-pop .lh-pop-k { font-size: 13px; font-weight: 600; color: #8a867e; }
.page-pop .lh-pop-k.late { color: #cd1219; font-weight: 700; }
@media (max-width: 640px) {
  body:not(.shop-seat) #app > .main-tab-row { overflow: visible; }
  body:not(.shop-seat) #app > .main-tab-row > .mtab { display: none !important; }
  body:not(.shop-seat) #app > .main-tab-row > .mtab.mtab-page { display: flex !important; padding-left: 0; }
  .page-pop { min-width: 240px; }
}