/* ════════════════════════════════════════════════════════════════════
   ZGAGI — components added in stage 0 (MASTER.md "Component Specs", doc 2, 3).
   Tokens only, logical properties only (RTL), phone first; 768px = iPad, 1024px = desktop.
   ════════════════════════════════════════════════════════════════════ */

/* ── a11y basics ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: var(--sp-3); top: -60px; z-index: 50; background: var(--zg-navy); color: #fff;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); text-decoration: none; transition: top .15s; }
.skip:focus { top: var(--sp-3); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus); }
a { color: var(--zg-blue-ink); }
a.btn { text-decoration: none; }
.btn { white-space: nowrap; }
/* a phone number or a measurement never breaks across lines */
.num { white-space: nowrap; }
/* focus moved here by the app after navigation (for screen readers) — no ring on the whole page */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.icon { display: inline-flex; flex: none; line-height: 0; }
[dir="rtl"] .icon-dir svg { transform: scaleX(-1); }
.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── buttons (additions) ── */
.btn[disabled] { opacity: .65; cursor: default; }
.btn-danger-solid { background: var(--zg-danger); color: #fff; }
.btn-link { background: none; border: none; color: var(--zg-blue-ink); padding: 0 var(--sp-1); min-height: var(--tap); font-weight: var(--fw-med); }
.icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r-md);
  border: none; background: transparent; color: var(--zg-text-2); cursor: pointer; }
.icon-btn:hover { background: var(--zg-neutral-soft); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ── fields ── */
.field label, .choice legend { font-size: var(--fs-sm); color: var(--zg-text); font-weight: var(--fw-med); }
.field-help { font-size: var(--fs-xs); color: var(--zg-text-2); }
.field-error { font-size: var(--fs-sm); color: var(--zg-danger-ink); min-height: 0; }
.field-error:empty { display: none; }
.has-error .input { border-color: var(--zg-danger); }
.input { width: 100%; }
.input[readonly] { background: var(--zg-neutral-soft); color: var(--zg-text-2); }
.input[dir="ltr"] { text-align: end; }
.input-wrap { position: relative; }
.input-wrap .input { padding-inline-end: calc(var(--tap) + 4px); }
.input-action { position: absolute; inset-inline-end: 0; top: 0; width: var(--tap); height: var(--tap); border: none; background: none;
  color: var(--zg-text-2); cursor: pointer; display: grid; place-items: center; border-radius: var(--r-md); }
.form { display: grid; gap: var(--sp-4); }
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .full { grid-column: 1 / -1; } }

/* choice cards (radio) */
.choice { border: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.choice legend { margin-bottom: var(--sp-2); padding: 0; }
.choice-opt { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--zg-line);
  border-radius: var(--r-md); cursor: pointer; min-height: var(--tap); background: var(--zg-surface); }
.choice-opt:has(input:checked) { border-color: var(--zg-blue); background: var(--zg-ice); }
.choice-opt input { margin-top: 4px; accent-color: var(--zg-blue); width: 18px; height: 18px; flex: none; }
.choice-text { display: grid; gap: 2px; }
.choice-label { font-weight: var(--fw-med); }
.choice-desc { font-size: var(--fs-sm); color: var(--zg-text-2); }

/* switch */
.switch { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; min-height: var(--tap); cursor: pointer; position: relative; }
.switch-text { display: grid; gap: 2px; }
.switch-label { font-weight: var(--fw-med); }
.switch-desc { font-size: var(--fs-sm); color: var(--zg-text-2); }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { flex: none; width: 46px; height: 28px; border-radius: var(--r-pill); background: var(--zg-line); position: relative; transition: background .15s; }
.switch-track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-1); transition: inset-inline-start .15s; }
.switch-input:checked + .switch-track { background: var(--zg-blue); }
.switch-input:checked + .switch-track::after { inset-inline-start: 21px; }
.switch-input:focus-visible + .switch-track { box-shadow: var(--focus); }
.switch-input:disabled + .switch-track { opacity: .5; }

/* one-time code: one input over 6 boxes */
.otp { position: relative; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); direction: ltr; }
.otp-boxes span { height: 52px; border: 1px solid var(--zg-line); border-radius: var(--r-md); background: var(--zg-surface);
  display: grid; place-items: center; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--zg-navy); font-variant-numeric: tabular-nums; }
.otp-boxes span.cur { border-color: var(--zg-blue); box-shadow: var(--focus); }
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; }
.has-error .otp-boxes span { border-color: var(--zg-danger); }

/* ── feedback ── */
.toasts { position: fixed; z-index: 60; inset-inline: 0; bottom: calc(var(--nav-h) + var(--sp-4) + env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: var(--sp-2); pointer-events: none; padding: 0 var(--sp-4); }
.toast { display: flex; align-items: center; gap: var(--sp-2); background: var(--zg-navy); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); font-size: var(--fs-sm); animation: toast-in .2s ease-out; max-width: 480px; }
.toast-error { background: var(--zg-danger-ink); }
.toast.out { opacity: 0; transition: opacity .15s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 768px) { .toasts { bottom: var(--sp-6); } }

.dialog { border: none; padding: 0; background: var(--zg-surface); color: var(--zg-text); width: 100%; max-width: 100%;
  margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 90dvh; box-shadow: var(--shadow-2);
  padding-bottom: env(safe-area-inset-bottom); animation: sheet-in .22s ease-out; }
.dialog::backdrop { background: rgba(15,39,71,.45); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) 0; }
.dialog-title { font-size: var(--fs-lg); }
.dialog-body { padding: var(--sp-4); overflow: auto; max-height: calc(90dvh - 140px); display: grid; gap: var(--sp-4); }
.dialog-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: 0 var(--sp-4) var(--sp-4); flex-wrap: wrap; }
.dialog-actions .btn { flex: 1 1 auto; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 768px) {
  .dialog { margin: auto; width: min(520px, calc(100% - 48px)); border-radius: var(--r-xl); animation: dialog-in .18s ease-out; padding-bottom: 0; }
  .dialog-wide { width: min(720px, calc(100% - 48px)); }
  .dialog-actions .btn { flex: 0 0 auto; }
  @keyframes dialog-in { from { transform: scale(.98); opacity: 0; } }
}

.empty { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--zg-text-2); }
.empty-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--zg-ice); color: var(--zg-blue-ink); }
.skeleton { display: grid; gap: var(--sp-3); padding: var(--sp-2) 0; }
.sk-line { height: 14px; border-radius: var(--r-sm); background: linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 50%, #EEF2F7 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.banner { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--zg-blue-soft); color: var(--zg-blue-ink); font-size: var(--fs-sm); }
.banner-error { background: var(--zg-danger-soft); color: var(--zg-danger-ink); }
.banner-warn { background: var(--zg-warning-soft); color: var(--zg-warning-ink); }
.banner-ok { background: var(--zg-success-soft); color: var(--zg-success-ink); }
.banner-text { flex: 1; }

/* ── lists: table from 768px, cards on phones ── */
.dlist-wrap { width: 100%; }
.dlist { width: 100%; border-collapse: collapse; }
.dlist thead { display: none; }
.dlist tr { display: grid; gap: 2px var(--sp-3); grid-template-columns: 1fr auto; padding: var(--sp-3) 0; border-bottom: 1px solid #EEF2F7; }
.dlist td { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--zg-text-2); min-width: 0; }
.dlist td::before { content: attr(data-label) ':'; color: var(--zg-text-2); flex: none; }
.dlist td.primary { grid-column: 1 / -1; color: var(--zg-text); font-size: var(--fs-md); font-weight: var(--fw-med); }
.dlist td.primary::before { display: none; }
/* actions: a full row of their own in a card, no label */
.dlist td.actions-cell { grid-column: 1 / -1; padding-top: var(--sp-2); }
.dlist td.actions-cell::before { display: none; }
.dlist tr.clickable { cursor: pointer; }
.dlist tr.clickable:hover { background: var(--zg-bg); }
@media (min-width: 768px) {
  .dlist-wrap { overflow-x: auto; }
  .dlist thead { display: table-header-group; }
  .dlist tr { display: table-row; }
  .dlist th { text-align: start; font-size: var(--fs-sm); color: var(--zg-text-2); font-weight: var(--fw-med); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--zg-line); white-space: nowrap; }
  .dlist td { display: table-cell; padding: var(--sp-3); border-bottom: 1px solid #EEF2F7; vertical-align: middle; font-size: var(--fs-sm); color: var(--zg-text); }
  .dlist td::before { display: none; }
  .dlist td.primary { font-size: var(--fs-md); }
}

/* ── pages ── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-xl); }
.back-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); color: var(--zg-text-2); text-decoration: none; font-size: var(--fs-sm); }
.stack { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.section-title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.kv dt { color: var(--zg-text-2); } .kv dd { margin: 0; }
@media (min-width: 768px) { .main { padding-bottom: var(--sp-8); } }

/* settings: list of groups; on desktop the list sits beside the content */
.settings-list { display: grid; gap: 0; padding: 0; }
.settings-list a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-height: 64px; text-decoration: none; color: var(--zg-text); border-bottom: 1px solid #EEF2F7; }
.settings-list a:last-child { border-bottom: none; }
.settings-list .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--zg-ice); color: var(--zg-blue-ink); display: grid; place-items: center; flex: none; }
.settings-list .tx { flex: 1; display: grid; gap: 2px; }
.settings-list .d { font-size: var(--fs-sm); color: var(--zg-text-2); }
.settings-list a.on { background: var(--zg-ice); }
.settings-layout { display: grid; gap: var(--sp-4); }
.settings-layout > .settings-nav { display: none; }
/* side by side from 1200px: at 1024 the app's side menu already takes 240px */
@media (min-width: 1200px) {
  .settings-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .settings-layout > .settings-nav { display: block; position: sticky; top: 80px; }
}

/* sticky primary action on phones (thumb reach) */
.sticky-actions { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--zg-surface) 70%, transparent);
  padding: var(--sp-3) 0; margin-top: var(--sp-2); z-index: 5; }
@media (min-width: 768px) { .sticky-actions { position: static; background: none; padding: 0; } }

/* people */
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--zg-ice); color: var(--zg-navy);
  display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.person { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.person .nm { font-weight: var(--fw-med); color: var(--zg-text); }
.tone-neutral { background: var(--zg-neutral-soft); color: var(--zg-text-2); }
.tone-info { background: var(--zg-blue-soft); color: var(--zg-blue-ink); }
.tone-warn { background: var(--zg-warning-soft); color: var(--zg-warning-ink); }
.tone-ok { background: var(--zg-success-soft); color: var(--zg-success-ink); }
.tone-navy { background: var(--zg-navy-soft); color: var(--zg-navy); }
.tone-danger { background: var(--zg-danger-soft); color: var(--zg-danger-ink); }

/* role table */
.roles-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.roles-table th, .roles-table td { padding: var(--sp-2); border-bottom: 1px solid #EEF2F7; text-align: start; }
.roles-table td.c { text-align: center; width: 72px; }
.roles-table .grp th { background: var(--zg-bg); color: var(--zg-text-2); font-weight: var(--fw-med); }
.yes { color: var(--zg-success-ink); } .no { color: var(--zg-text-2); }
details.card > summary { cursor: pointer; font-weight: var(--fw-med); min-height: var(--tap); display: flex; align-items: center; }

/* ── sign-in screens (pages/auth.md) ── */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; background: var(--zg-bg); }
.auth-brand { display: none; }
.auth-main { display: grid; align-content: start; justify-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.auth-logo { height: 64px; width: auto; max-width: 100%; }
.auth-card { width: 100%; max-width: 420px; display: grid; gap: var(--sp-4); }
.auth-card h1 { font-size: var(--fs-xl); }
.auth-alt { text-align: center; font-size: var(--fs-sm); }
.auth-foot { font-size: var(--fs-xs); color: var(--zg-text-2); text-align: center; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .auth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-main { align-content: center; }
  .auth-brand { display: grid; align-content: center; justify-items: center; gap: var(--sp-5); padding: var(--sp-8);
    background: var(--zg-navy); color: #C9D6E8; position: relative; overflow: hidden; }
  .auth-brand::before { content: ''; position: absolute; inset: -20%; background: var(--zg-grad-main); opacity: .35; transform: rotate(-8deg); }
  .auth-brand > * { position: relative; }
  .auth-brand img { width: min(360px, 80%); height: auto; }
  .auth-brand p { font-size: var(--fs-xl); color: #fff; font-weight: var(--fw-med); }
  .auth-main .auth-logo { display: none; }
}
@media (min-width: 768px) and (orientation: portrait) and (max-width: 1023px) { .auth-main { align-content: center; } }

/* a new version is ready (ui/pwa.js) */
.update-bar { position: fixed; z-index: 70; inset-inline: var(--sp-4); bottom: calc(var(--nav-h) + var(--sp-4) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--zg-navy); color: #fff;
  border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.update-bar span { flex: 1; }
@media (min-width: 768px) { .update-bar { inset-inline: auto var(--sp-6); bottom: var(--sp-6); max-width: 420px; } }

/* dev only: the emulator's SMS code, so a tester needs no phone */
.dev-code, .dev-quick { font-size: var(--fs-sm); background: var(--zg-warning-soft); color: var(--zg-warning-ink); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
.dev-code { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* console */
.console-tag { font-size: var(--fs-xs); color: #C9D6E8; opacity: .8; margin: calc(var(--sp-6) * -1 + var(--sp-2)) var(--sp-2) var(--sp-5); }
.link-box { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--zg-bg); border: 1px dashed var(--zg-line);
  border-radius: var(--r-md); font-size: var(--fs-sm); word-break: break-all; direction: ltr; unicode-bidi: isolate; text-align: start; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }

/* the shell: the content column may shrink below its content's width — wide tables scroll
   inside their card instead of pushing the page sideways (in RTL that overflow is invisible) */
@media (min-width: 768px) { .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: auto 1fr; } }
.main { min-width: 0; }
/* the phone bar's "more" is a button that looks like its links */
.bottom-nav .bn-more { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--zg-text-2); background: none; border: none;
  font: inherit; font-size: 11px; min-height: var(--tap); cursor: pointer; }
.bottom-nav .bn-more.on { color: var(--zg-blue); font-weight: var(--fw-med); }
/* the shell: the bottom bar may have fewer than 5 items */
.bottom-nav { grid-template-columns: repeat(var(--nav-n, 5), 1fr); }
.topbar .user { display: flex; align-items: center; gap: var(--sp-2); }
.topbar h1.tb-title { font-size: var(--fs-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ════════════════ stage 1: orders, customers, search, notifications ════════════════ */
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); position: relative; }
/* a small button still has a 44px touch area */
.btn-sm::after { content: ''; position: absolute; inset: -4px 0; }
.tel { text-decoration: none; font-weight: var(--fw-med); }
.muted { color: var(--zg-text-2); }
.small { font-size: var(--fs-sm); }

/* chips: status tabs and note channels, one row that scrolls sideways inside itself */
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; margin-bottom: var(--sp-3); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--zg-line); background: var(--zg-surface); color: var(--zg-text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--zg-navy); border-color: var(--zg-navy); color: #fff; }
.chip .n { font-size: var(--fs-xs); opacity: .8; }

/* a search field with its icon */
.search-box { position: relative; margin-bottom: var(--sp-3); }
.search-box .input { padding-inline-start: 40px; }
.search-box > .icon { position: absolute; inset-inline-start: 12px; top: 12px; color: var(--zg-text-2); pointer-events: none; }

/* order and customer lists: cards on phones, rows from 768px */
.olist { display: grid; gap: var(--sp-2); }
.ocard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--zg-text);
  background: var(--zg-surface); border: 1px solid #E5EAF1; border-radius: var(--r-lg); box-shadow: var(--shadow-1); min-height: var(--tap); }
.ocard:hover { border-color: var(--zg-blue); }
.ocard .t { font-weight: var(--fw-med); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocard .s { font-size: var(--fs-sm); color: var(--zg-text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocard .e { justify-self: end; align-self: center; display: flex; gap: var(--sp-2); align-items: center; }
.ocard { grid-template-areas: "name st" "no wait" "addr addr"; }
.a-no { grid-area: no; } .a-name { grid-area: name; } .a-addr { grid-area: addr; } .a-wait { grid-area: wait; justify-self: end; } .a-st { grid-area: st; }
.ocard.cust { grid-template-areas: "name st" "no wait"; }
@media (min-width: 768px) {
  .olist { gap: 0; background: var(--zg-surface); border: 1px solid #E5EAF1; border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
  .ocard { border: none; border-bottom: 1px solid #EEF2F7; border-radius: 0; box-shadow: none; align-items: center;
    grid-template-columns: 80px minmax(0, 1.4fr) minmax(0, 1.4fr) 90px 110px; grid-template-areas: "no name addr wait st"; }
  .ocard .a-st { justify-self: start; } .ocard .a-no { color: var(--zg-text); }
  .ocard:last-child { border-bottom: none; }
  .ocard:hover { background: var(--zg-bg); }
  .ocard.cust { grid-template-columns: minmax(0, 1.4fr) 140px minmax(0, 1fr) 120px; grid-template-areas: "name no wait st"; }
}
/* a list in a narrow column (the customer card): the card layout at every width, no name (it is the card's) */
.olist.compact .ocard { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no st" "addr wait"; }
.olist.compact .a-name { display: none; }
/* the main action of a form: full width on phones (thumb reach) */
@media (max-width: 767px) { .sticky-actions .btn { width: 100%; } }

/* number cards on home */
.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 768px) { .counts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.count-card { display: grid; gap: var(--sp-1); text-decoration: none; color: var(--zg-text); min-height: 88px; }
.count-card:hover { border-color: var(--zg-blue); }
.count-card .v { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--zg-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.count-card .l { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--zg-text-2); }
.steps { display: grid; gap: var(--sp-2); counter-reset: step; padding: 0; margin: 0; list-style: none; }
.steps a { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); text-decoration: none; color: var(--zg-text); }
.steps a::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 50%; background: var(--zg-ice); color: var(--zg-blue-ink);
  display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); flex: none; }

/* the order screen */
.order-head { display: grid; gap: var(--sp-3); }
.order-head .top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.order-head h1 { font-size: var(--fs-xl); }
.order-head .who { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.order-head .who .nm { font-size: var(--fs-lg); font-weight: var(--fw-med); }
.status-note { display: grid; gap: 2px; font-size: var(--fs-sm); }
.status-note .next { color: var(--zg-blue-ink); font-weight: var(--fw-med); }
.progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.progress li { display: grid; justify-items: center; gap: 4px; position: relative; font-size: 11px; color: var(--zg-text-2); text-align: center; min-width: 0; }
.progress li::before { content: ''; position: absolute; top: 6px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--zg-line); }
.progress li:last-child::before { display: none; }
.progress li.past::before { background: var(--zg-blue); }
.progress .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--zg-surface); border: 2px solid var(--zg-line); position: relative; }
.progress li.past .dot { background: var(--zg-blue); border-color: var(--zg-blue); }
.progress li.now .dot { border-color: var(--zg-blue); box-shadow: 0 0 0 3px var(--zg-blue-soft); }
.progress li.now { color: var(--zg-navy); font-weight: var(--fw-med); }
.progress .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (min-width: 768px) { .progress li { font-size: var(--fs-xs); } }

/* the action bar: on phones fixed above the bottom menu (one primary + "more"); at the top from 768px */
.order-actions { display: flex; gap: var(--sp-2); align-items: center; }
.order-actions:empty { display: none; }
@media (max-width: 767px) {
  .order-actions { position: fixed; inset-inline: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 9;
    padding: var(--sp-3) var(--sp-4); background: rgba(255,255,255,.96); border-top: 1px solid #E5EAF1; }
  .order-actions .btn { flex: 1 1 auto; }
  .order-actions .btn-primary { flex: 3 1 auto; }
  .has-action-bar { padding-bottom: 76px; }
}
@media (min-width: 768px) { .order-head .order-actions { margin-inline-start: auto; } }
.order-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .order-grid { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } }
.menu-list { display: grid; gap: 0; }
.menu-list button { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-2); border: none; background: none;
  font: inherit; color: var(--zg-text); text-align: start; border-bottom: 1px solid #EEF2F7; cursor: pointer; border-radius: var(--r-sm); }
.menu-list button:last-child { border-bottom: none; }
.menu-list button:hover { background: var(--zg-bg); }
.menu-list button.danger { color: var(--zg-danger-ink); }

/* sub-tabs (notes, log, photos) */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--zg-line); margin-bottom: var(--sp-4); overflow-x: auto; }
.tabs [role="tab"] { min-height: var(--tap); padding: 0 var(--sp-4); border: none; background: none; font: inherit; color: var(--zg-text-2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs [role="tab"][aria-selected="true"] { color: var(--zg-navy); border-bottom-color: var(--zg-blue); font-weight: var(--fw-med); }

/* notes and the log */
.feed { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid #EEF2F7; align-items: start; }
.feed li:last-child { border-bottom: none; }
.feed .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--zg-ice); color: var(--zg-blue-ink); display: grid; place-items: center; }
.feed .body { display: grid; gap: 2px; min-width: 0; }
.feed .meta { font-size: var(--fs-xs); color: var(--zg-text-2); }
.feed .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.composer { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
textarea.input { min-height: 88px; padding: var(--sp-3); resize: vertical; width: 100%; }
.composer .row2 { display: flex; gap: var(--sp-2); align-items: end; flex-wrap: wrap; justify-content: space-between; }
select.input { padding-inline-end: var(--sp-6); }

/* new order: the steps and the duplicate hints */
.wizard { display: grid; gap: var(--sp-4); max-width: 760px; }
.step-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.step-title .n { width: 28px; height: 28px; border-radius: 50%; background: var(--zg-navy); color: #fff; display: grid; place-items: center; font-size: var(--fs-sm); flex: none; }
.pick-list { display: grid; gap: var(--sp-2); }
.pick { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--zg-line); border-radius: var(--r-md); background: var(--zg-surface);
  min-height: var(--tap); cursor: pointer; font: inherit; color: var(--zg-text); text-align: start; width: 100%; }
.pick:hover { border-color: var(--zg-blue); background: var(--zg-ice); }
.pick .tx { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pick .s { font-size: var(--fs-sm); color: var(--zg-text-2); }
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--zg-text-2); font-size: var(--fs-sm); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--zg-line); }

/* the top bar: search and the bell */
.topbar .tools { display: flex; align-items: center; gap: var(--sp-1); }
.bell { position: relative; }
.bell .count { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--zg-danger-ink); color: #fff; font-size: 11px; font-weight: var(--fw-bold); display: grid; place-items: center; line-height: 1; }
.bell .count:empty { display: none; }
.notif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); text-decoration: none; color: var(--zg-text); min-height: var(--tap); }
.notif:hover { background: var(--zg-bg); }
.notif.unread { background: var(--zg-ice); }
/* a notification: the link, and "סמן כנקרא" beside it (never inside it) */
.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.notif-row { display: flex; align-items: center; gap: var(--sp-1); border-radius: var(--r-md); }
.notif-row .notif { flex: 1 1 auto; min-width: 0; }
.notif-row.unread { background: var(--zg-ice); }
.notif-row .notif-read { flex: none; margin-inline-end: var(--sp-1); }
.notif .meta { font-size: var(--fs-xs); color: var(--zg-text-2); }

/* two columns on wide screens (customer card: details + orders) */
.cols { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .cols { grid-template-columns: 360px minmax(0, 1fr); align-items: start; } }

/* photos of an order: a grid of thumbnails; one opens large in a dialog */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.photo-grid.is-empty { display: block; }
/* a photo with "הוסף לגלריה" right under it (Ben's QA, 2026-10-03) */
.photo-cell { display: grid; gap: var(--sp-1); align-content: start; }
.photo-cell .photo-quick { width: 100%; justify-content: center; }
.status-note .next-act { font: inherit; font-weight: var(--fw-bold); }
.photo-tile { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; border: 1px solid #E5EAF1; background: var(--zg-ice);
  display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--zg-blue-ink); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile.pending { cursor: default; }
.photo-tile.pending img { opacity: .6; }
.photo-tile .tag { position: absolute; inset-inline: 4px; bottom: 4px; font-size: 11px; background: rgba(15,39,71,.8); color: #fff; border-radius: var(--r-sm); padding: 2px 4px; text-align: center; }
.composer .row2 .field { flex: 1 1 180px; }

/* ── the sketches of an order (stage 2; doc 3, screen 5) ── */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.section-head .section-title { margin-bottom: 0; }
.sk-list { display: grid; gap: var(--sp-2); }
.sk-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 72px;
  padding: var(--sp-2); border: 1px solid #E5EAF1; border-radius: var(--r-md); color: var(--zg-text); text-decoration: none;
  transition: border-color .15s ease-out; }
.sk-row:hover { border-color: var(--zg-blue); }
.sk-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.sk-thumb { width: 72px; height: 56px; border-radius: var(--r-sm); background: var(--zg-ice); display: grid; place-items: center;
  overflow: hidden; color: var(--zg-navy); }
.sk-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--zg-surface); }
.sk-main { display: grid; gap: 2px; min-width: 0; }
.sk-main .t { font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-main .s { font-size: var(--fs-sm); color: var(--zg-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
@media (min-width: 1024px) { .sk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sk-row-act .sk-main, .sk-row-act .sk-thumb { color: inherit; text-decoration: none; }

/* ── the sketch builder (doc 3, screen 6): the whole screen, a thin bar over the builder ── */
.builder { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; height: 100dvh;
  background: var(--zg-bg); }
.builder-bar { display: flex; align-items: center; gap: var(--sp-2); min-height: 56px;
  padding: calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-3) var(--sp-2); background: var(--zg-surface);
  border-bottom: 1px solid #E5EAF1; box-shadow: var(--shadow-1); }
.builder-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.builder-title .bt-main { font-size: var(--fs-sm); color: var(--zg-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-title .bt-sub { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-state { font-size: var(--fs-sm); color: var(--zg-text-2); }
.builder-body { flex: 1; min-height: 0; display: flex; }
.builder-body > .skeleton, .builder-body > .empty { margin: var(--sp-4); flex: 1; }
.builder-frame { flex: 1; width: 100%; border: 0; background: var(--zg-surface); }
@media (prefers-reduced-motion: reduce) { .sk-row { transition: none; } }

/* ── stage 3: a quantity stepper, the items of an order ── */
.stepper { display: flex; align-items: center; gap: var(--sp-2); }
.stepper-input { width: 72px; text-align: center; }
.stepper-btn { flex: none; border: 1px solid #E5EAF1; border-radius: var(--r-md); }
.item-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 56px;
  padding: var(--sp-2); border: 1px solid #E5EAF1; border-radius: var(--r-md); color: var(--zg-text); }
.item-row .ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--zg-ice); display: grid; place-items: center; color: var(--zg-navy); }
.item-row button.item-main { all: unset; display: grid; gap: 2px; min-width: 0; cursor: pointer; min-height: 44px; align-content: center; }
.item-row button.item-main:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
.item-row .t { font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .s { font-size: var(--fs-sm); color: var(--zg-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .end { display: flex; align-items: center; gap: var(--sp-2); }
.item-row:hover { border-color: var(--zg-blue); }
@media (min-width: 1024px) { .item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item-list { display: grid; gap: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .item-row { transition: none; } }

/* ── an uploaded sketch and its calculator (stage 3; doc 3, screen 8) ── */
.up-files { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.up-file { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; min-height: 56px;
  padding: var(--sp-2); border: 1px solid #E5EAF1; border-radius: var(--r-md); }
.up-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--zg-ice); display: grid; place-items: center; overflow: hidden; color: var(--zg-navy); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-name { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row { border: 1px solid #E5EAF1; border-radius: var(--r-md); padding: var(--sp-3); margin: 0; display: grid; gap: var(--sp-2); justify-items: start; }
.up-row > .form-grid { width: 100%; }
.up-row legend { font-weight: var(--fw-med); padding: 0 var(--sp-1); }
.up-sub { font-size: var(--fs-md); margin-top: var(--sp-2); scroll-margin-top: calc(var(--header-h, 64px) + var(--sp-4)); }
.up-sub:focus { outline: none; }
.up-summary { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--zg-ice); font-weight: var(--fw-med); }
.up-lines { margin: 0; padding-inline-start: var(--sp-5); }
@media (min-width: 768px) { .up-files { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
/* the order's hardware: one list from all its sketches (doc 3, screen 5) */
.hw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hw-list > li { border-bottom: 1px solid #E5EAF1; }
.hw-list > li:last-child { border-bottom: none; }
.hw-row summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; cursor: pointer; list-style: none; }
.hw-row summary::-webkit-details-marker { display: none; }
.hw-row summary:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
.hw-name { flex: 1; min-width: 0; }
.hw-row summary svg { color: var(--zg-text-2); transition: transform 150ms ease-out; }
.hw-row[open] summary svg { transform: rotate(180deg); }
.hw-from { list-style: none; margin: 0 0 var(--sp-2); padding: 0 var(--sp-3); display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.hw-src { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; color: inherit; text-decoration: none; border-radius: var(--r-sm); }
a.hw-src:hover .hw-src-t { text-decoration: underline; }
a.hw-src:focus-visible { box-shadow: var(--focus); }
.hw-src-t { flex: 1; min-width: 0; }
a.hw-src .icon { color: var(--zg-blue-ink); }
@media (prefers-reduced-motion: reduce) { .hw-row summary svg { transition: none; } }
@media (min-width: 1024px) { .hw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } }

/* full-screen viewing: a sketch, an uploaded sketch's files, photos (components/viewer.js) */
.viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--zg-navy); color: var(--zg-surface); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer::backdrop { background: var(--zg-navy); }
.viewer-bar { display: flex; align-items: center; gap: var(--sp-2); min-height: 56px;
  padding: calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-3) var(--sp-2); background: var(--zg-navy); }
.viewer-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.viewer-t { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-name { font-size: var(--fs-sm); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-count { font-size: var(--fs-sm); opacity: .9; }
.viewer .icon-btn.viewer-btn { color: var(--zg-surface); background: rgba(255,255,255,.12); border-radius: 999px; }
.viewer .icon-btn.viewer-btn:disabled { opacity: .35; }
.viewer-stage { display: grid; place-items: center; min-height: 0; padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); }
/* the picture as large as the screen allows (a small scan too — Ben: "large and clear"), on a light ground: sketches are drawn on white */
.viewer-img { width: 100%; height: 100%; object-fit: contain; background: var(--zg-surface); border-radius: var(--r-sm); }
.viewer-pdf { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.viewer-err { opacity: .85; }
.viewer-prev, .viewer-next { position: fixed; top: 50%; transform: translateY(-50%); }
.viewer .icon-btn.viewer-prev, .viewer .icon-btn.viewer-next { background: var(--zg-navy); box-shadow: var(--shadow-md, none); }
.viewer-prev { inset-inline-start: var(--sp-2); }
.viewer-next { inset-inline-end: var(--sp-2); }
.viewer .btn-ghost { color: var(--zg-surface); border-color: rgba(255,255,255,.4); background: transparent; }
@media (prefers-reduced-motion: reduce) { .viewer * { transition: none; } }
/* a sketch's picture is a button: it opens the sketch full screen */
button.sk-thumb { border: 0; padding: 0; font: inherit; cursor: zoom-in; }
button.sk-thumb:disabled { cursor: default; }
button.sk-thumb:focus-visible { box-shadow: var(--focus); }
button.up-thumb { border: 0; padding: 0; cursor: zoom-in; }
/* a save that cannot go (form.js, blockSave / requirement): the place is marked for a moment, and a region
   (a card, not one field) shows its problem around it */
.card.has-error { border-color: var(--zg-danger); }
.attention { animation: attention 1.4s ease-out 1; }
@keyframes attention { 0% { box-shadow: 0 0 0 4px var(--zg-danger); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .attention { animation: none; } }
.field, .card { scroll-margin-block: calc(var(--header-h, 64px) + var(--sp-4)) calc(var(--nav-h, 64px) + 96px); }
.card:focus { outline: none; }
.card:focus-visible { box-shadow: var(--focus); }
/* the price list (screens/pricelist.js): a card per row on a phone, a table-like row from 1024px */
.pl-tools { display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; }
.pl-tools .search-box { flex: 1 1 260px; margin-bottom: 0; }
.pl-list { display: grid; gap: var(--sp-3); }
.pl-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-4); background: var(--zg-surface);
  border: 1px solid var(--zg-line); border-radius: var(--r-md); }
.pl-row.is-off .pl-name .t { color: var(--zg-text-2); }
.pl-name { grid-column: 1 / -1; display: grid; gap: var(--sp-1); min-width: 0; }
.pl-name .t { font-weight: var(--fw-bold); }
.pl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--zg-text-2); }
.pl-sku.tone-warn { background: none; color: var(--zg-warning-ink); }
/* a row with a factory price only: said under its name (Ben's retest, 6) */
.pl-factory-only { display: block; color: var(--zg-warning-ink); margin-top: var(--sp-1); line-height: 1.4; }
.pl-sku.tone-ok { background: none; color: var(--zg-success-ink); }
.pl-field { margin: 0; }
/* the number and its ₪ side by side, never one over the other (Ben's phone round: the input is LTR inside an RTL row, so the
   space kept for an overlaid ₪ was on the other side, and the number ran under it) */
.pl-money { display: flex; align-items: center; gap: var(--sp-2); }
.pl-money .pl-price { flex: 1 1 auto; min-width: 0; text-align: start; }
.pl-cur { flex: 0 0 auto; color: var(--zg-text-2); }
.pl-active { grid-column: 1 / -1; }
.pl-active .switch { min-height: 44px; }
@media (min-width: 1024px) {
  .pl-list { gap: 0; border: 1px solid var(--zg-line); border-radius: var(--r-md); background: var(--zg-surface); }
  .pl-row { grid-template-columns: minmax(0, 2.2fr) minmax(130px, 1fr) minmax(130px, 1fr) 150px; align-items: center;
    border: 0; border-bottom: 1px solid var(--zg-line); border-radius: 0; padding: var(--sp-2) var(--sp-4); }
  .pl-row:last-child { border-bottom: 0; }
  .pl-name, .pl-active { grid-column: auto; }
  .pl-field > label { font-size: var(--fs-xs); color: var(--zg-text-2); }
}
.pl-tab-miss { margin-inline-start: var(--sp-2); padding: 0 6px; border-radius: var(--r-pill); font-size: var(--fs-xs);
  background: var(--zg-warning-soft); color: var(--zg-warning-ink); }
.file-pick { cursor: pointer; user-select: none; -webkit-user-select: none; }
/* the price while working (components/price-preview.js) */
.price-preview { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  background: var(--zg-blue-soft); color: var(--zg-navy); min-height: 44px; }
.price-preview .pp-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.price-preview .pp-main { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.price-preview .pp-sub { font-size: var(--fs-sm); color: var(--zg-text-2); }
.pp-warn { color: var(--zg-warning-ink); font-size: var(--fs-sm); font-weight: var(--fw-med); }
.price-preview.compact { padding: 0 var(--sp-2); background: none; }
.price-preview.compact .pp-main { font-size: var(--fs-md); }
.pp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.pp-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--zg-line); }
.pp-lines li.is-missing .num:last-child { color: var(--zg-warning-ink); }
.pp-sum { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); margin: 0; }
.pp-sum dd { margin: 0; text-align: end; }
/* under the builder's bar: the glass's processing and the price as it is drawn */
.builder-strip { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-1) var(--sp-3);
  background: var(--zg-surface); border-bottom: 1px solid var(--zg-line); }
.builder-strip:empty { display: none; }
.builder-proc { display: flex; align-items: center; }
.builder-proc-field { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.builder-proc-field > label { font-size: var(--fs-sm); white-space: nowrap; }
.builder-proc-field select { min-width: 130px; }
.builder-proc-fixed { font-size: var(--fs-sm); color: var(--zg-text-2); }
.builder-strip .price-preview { flex: 1; min-width: 200px; }
/* money in the order (components/order-money.js) */
.money-items { list-style: none; margin: 0; padding: 0; display: grid; }
.money-item { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--zg-line); }
.money-item .mi-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.money-item .mi-title { font-weight: var(--fw-med); }
.money-item .mi-sum { display: flex; gap: var(--sp-2); align-items: baseline; }
.money-item .mi-note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--zg-text-2); }
.money-item .mi-note.warn { color: var(--zg-warning-ink); }
.money-item .mi-act { grid-column: 1 / -1; justify-self: start; }
.money-item.is-cancelled .mi-title { text-decoration: line-through; color: var(--zg-text-2); }
/* an item's hardware lines, each with its price; "change price" for this order (docs/phase-5/03-hardware-catalog.md, 5) */
.money-item .mi-lines { grid-column: 1 / -1; font-size: var(--fs-sm); }
.money-item .mi-lines summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer; color: var(--zg-text-2); }
.money-item .mi-lines ul { list-style: none; margin: 0; padding: 0; }
.money-item .mi-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 44px; border-top: 1px solid var(--zg-line); }
.money-item .mi-line .ml-name { flex: 1 1 12rem; min-width: 0; }
.money-item .mi-line .ml-price { white-space: nowrap; }
.money-item .mi-line .warn { color: var(--zg-warning-ink); }
/* a line with no price: marked, so it is found at a glance (Ben, 2026-10-02) */
.money-item .mi-line.is-missing { background: var(--zg-warning-soft); border-inline-start: 3px solid var(--zg-warning); padding-inline: var(--sp-2); }
.money-item .mi-line .btn { margin-inline-start: auto; }
/* the way of pricing (docs/phase-4/02-pricing-modes.md): two radio cards, side by side where there is room */
.money-mode { grid-template-columns: 1fr; }
@media (min-width: 560px) { .money-mode { grid-template-columns: 1fr 1fr; } .money-mode legend { grid-column: 1 / -1; } }
/* a product in "מחיר סופי": cost · profit, then its price field and "שמור מחיר" */
.money-item .mi-econ { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: var(--zg-text); }
.money-item .mi-econ .neg { color: var(--zg-danger-ink); }
.money-item .mi-final { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); }
.money-item .mi-final .field { flex: 0 1 22rem; min-width: 0; margin: 0; }
.money-item .mi-final .btn { flex: 0 0 auto; }
.money-item .mi-unsaved { flex: 1 0 100%; margin: 0; font-size: var(--fs-sm); color: var(--zg-warning-ink); }
.money-item .mi-unsaved:empty { display: none; }
.money-item .mi-final.is-dirty .input { border-color: var(--zg-warning); }
.money-idle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.money-idle p { flex: 1 1 16rem; margin: 0; }
.money-sum { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); margin: 0; }
.money-sum dd { margin: 0; text-align: end; }
.money-sum .total { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.money-sum.is-partial .total { color: var(--zg-warning-ink); }
.money-cost { padding-top: var(--sp-2); border-top: 1px dashed var(--zg-line); }
.money-cost .neg { color: var(--zg-danger-ink); font-weight: var(--fw-bold); }
.money-after { font-weight: var(--fw-med); }
.item-cancel { border-top: 1px solid var(--zg-line); padding-top: var(--sp-3); display: grid; gap: var(--sp-2); justify-items: start; }
.btn-danger-text { color: var(--zg-danger-ink); }
.is-cancelled .t, .is-cancelled .sk-main .t { text-decoration: line-through; color: var(--zg-text-2); }
/* focus mode (main.js, route.focus — Ben, round 1, A7): focused work screens only */
.focus-mode .topbar { display: none; }
.focus-mode .bottom-nav .btn-fab { visibility: hidden; pointer-events: none; }
/* the price in sight while working (A6): pinned to the bottom of a dialog's content, above its actions */
.sticky-preview { position: sticky; bottom: calc(-1 * var(--sp-4)); z-index: 2; background: var(--zg-surface); padding: var(--sp-2) 0; margin-top: var(--sp-2); }
.items-added:empty { display: none; }
.items-added { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--zg-success-soft); color: var(--zg-success-ink); font-weight: var(--fw-med); }
/* the upload screen's bottom bar: the price and "save" together, at every width */
.work-bar { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 5; display: grid; gap: var(--sp-2);
  background: var(--zg-surface); padding: var(--sp-2) 0; border-top: 1px solid var(--zg-line); }
@media (min-width: 768px) { .work-bar { bottom: 0; grid-template-columns: 1fr auto; align-items: center; } }

/* ── stage 5: the next steps as actions, what blocks them, documents and sending them ── */
.next-actions { display: grid; gap: var(--sp-2); }
.next-actions .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.next-actions .row .btn { flex: 1 1 auto; }
@media (min-width: 768px) { .next-actions .row .btn { flex: 0 0 auto; } }
.blocked-note { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--zg-warning-soft); color: var(--zg-warning-ink); font-size: var(--fs-sm); }
.blocked-note .lbl { font-weight: var(--fw-med); }
.block-list { margin: 0; padding-inline-start: var(--sp-5); display: grid; gap: 2px; }
/* a blocked action stays visible and focusable (it says why when pressed) — but it does not look ready */
.btn.is-blocked { opacity: .55; box-shadow: none; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.doc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid #E5EAF1; }
.doc-row:last-child { border-bottom: none; }
.doc-row .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--zg-ice); color: var(--zg-blue-ink); }
.doc-row .body { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.doc-row .ttl { font-weight: var(--fw-med); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.doc-row .meta { font-size: var(--fs-xs); color: var(--zg-text-2); }
.doc-preview { position: relative; overflow: hidden; background: var(--zg-surface); border: 1px solid var(--zg-line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.doc-frame { display: block; border: 0; background: var(--zg-surface); transform-origin: top right; position: absolute; top: 0; inset-inline-start: 0; }
.doc-send { max-width: 900px; }
.send-sheet .btn { justify-content: center; }
.msg-preview summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--zg-blue-ink); }
.logo-box { min-height: 72px; display: flex; align-items: center; }
.logo-box img { max-height: 72px; max-width: min(260px, 100%); object-fit: contain; }
.logo-box:empty { display: none; }

/* ── stage 6a: the work day (screens/workday.js; docs/phase-6/00-work-planning.md, 6) ──
   phone: one pane at a time (tabs "board" / "waiting"), one day; iPad: two days; desktop: "waiting" at the side, 2–3 days */
.wd { display: grid; gap: var(--sp-4); align-items: start; }
.wd-pane { min-width: 0; }
.wd-pane.is-off { display: none; }
.wd-waiting { display: grid; gap: var(--sp-3); }
.wd-waiting-head .section-title { margin: 0; }
.wd-board { display: grid; gap: var(--sp-3); min-width: 0; }
.wd-nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wd-nav-title { font-weight: var(--fw-med); font-size: var(--fs-lg); min-width: 0; }
.wd-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: 2px var(--sp-2); scroll-snap-type: x proximity; }
.wd-chip { flex: 0 0 auto; scroll-snap-align: start; min-width: 56px; min-height: var(--tap); display: grid; justify-items: center; gap: 2px;
  padding: var(--sp-2) var(--sp-2); border: 1px solid var(--zg-line); border-radius: var(--r-md); background: var(--zg-surface); color: var(--zg-text);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: border-color .15s ease-out, background-color .15s ease-out; }
.wd-chip:hover { border-color: var(--zg-blue); }
.wd-chip[aria-pressed="true"] { border-color: var(--zg-blue); background: var(--zg-blue-soft); color: var(--zg-blue-ink); font-weight: var(--fw-med); }
.wd-chip-d { color: var(--zg-text-2); }
.wd-chip[aria-pressed="true"] .wd-chip-d { color: inherit; }
.wd-chip-n { min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--zg-navy); color: var(--zg-surface); font-size: var(--fs-xs); text-align: center; }
.wd-chip-n.is-zero { background: var(--zg-neutral-soft); color: var(--zg-text-2); }
.wd-days { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.wd-days > .wd-day:nth-child(n+2) { display: none; }
.wd-day { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.wd-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.wd-day-head .section-title { margin: 0; font-size: var(--fs-md); }
.wd-day-head > .muted { white-space: nowrap; }
.wd-groups { display: grid; gap: var(--sp-3); }
.wd-group { display: grid; gap: var(--sp-2); }
.wd-who { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--zg-text-2); }
.wd-empty { margin: 0; }
.wd-list { display: grid; gap: var(--sp-2); }
.wd-job { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 56px;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--zg-line); border-radius: var(--r-md); background: var(--zg-surface); color: var(--zg-text);
  transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.wd-job:hover { border-color: var(--zg-blue); box-shadow: var(--shadow-1); }
/* the card opens the order; "שנה שיבוץ" beside it changes the scheduling (Ben's QA, 2026-10-03) */
.wd-job-open { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
  min-height: 44px; color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.wd-job-edit { flex: none; white-space: nowrap; }
.wd-job-open:focus-visible, .wd-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wd-job.is-late { border-color: var(--zg-danger); }
.wd-when { font-weight: var(--fw-bold); color: var(--zg-navy); min-width: 3ch; }
.wd-main { display: grid; gap: 2px; min-width: 0; }
.wd-line { display: flex; align-items: baseline; gap: 0 var(--sp-2); min-width: 0; flex-wrap: wrap; }
/* the customer's name in full (up to two lines) — the person scanning a day reads names, not numbers */
.wd-name { font-weight: var(--fw-med); min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wd-sub { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wd-badges:empty { display: none; }
.wd-wait { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; padding-block: var(--sp-2);
  border-bottom: 1px solid var(--zg-line); }
.wd-wait:last-child { border-bottom: none; }
.wd-wait-main { display: grid; gap: 2px; min-width: 0; color: var(--zg-text); text-decoration: none; min-height: var(--tap); align-content: center; }
.wd-wait-main:hover .wd-name { color: var(--zg-blue-ink); }
.wd-filter { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; }
.wd-filter input, .wd-person input { width: 20px; height: 20px; accent-color: var(--zg-blue); }
.wd-late { display: grid; gap: var(--sp-2); border-color: var(--zg-danger); }
.wd-late .section-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--zg-danger-ink); }
.wd-late-row { display: grid; gap: 4px; }
.wd-sheet { display: grid; gap: var(--sp-4); }
.wd-sheet-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.wd-people { border: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.wd-people legend { font-weight: var(--fw-med); margin-bottom: var(--sp-2); }
.wd-people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.wd-person { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--zg-line);
  border-radius: var(--r-md); cursor: pointer; }
.wd-person:has(input:checked) { border-color: var(--zg-blue); background: var(--zg-blue-soft); }
.wd-move { display: grid; gap: var(--sp-2); }
.wd-move .lbl { font-weight: var(--fw-med); }
.wd-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wd-mine-list { display: grid; gap: var(--sp-3); }
.wd-mine { display: grid; gap: var(--sp-3); }
.wd-mine-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.wd-mine-head .wd-line { flex: 1 1 auto; }
.wd-mine-body { display: grid; gap: var(--sp-2); }
.wd-note { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--zg-neutral-soft); }
.wd-ahead { gap: var(--sp-2); }
.my-day-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 64px; padding: var(--sp-4);
  color: var(--zg-text); text-decoration: none; }
.my-day-card .l { display: flex; align-items: center; gap: var(--sp-2); }
.my-day-card:hover { border-color: var(--zg-blue); }
.wd-in-order { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
@media (min-width: 768px) {
  .wd-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-days > .wd-day:nth-child(2) { display: grid; }
}
@media (min-width: 1024px) {
  .wd { grid-template-columns: 300px minmax(0, 1fr); }
  .wd-tabs { display: none; }
  .wd .wd-pane.is-off { display: grid; }
  .wd-waiting { position: sticky; top: var(--sp-4); max-height: calc(100dvh - var(--sp-8)); overflow-y: auto; }
}
@media (min-width: 1440px) {
  .wd-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wd-days > .wd-day:nth-child(3) { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .wd-chip, .wd-job { transition: none; } }

/* ── stage 6b: the field (components/field-job.js), payments (order-money.js, payment-sheet.js) ── */
.wd-field-acts { padding-top: var(--sp-2); border-top: 1px solid var(--zg-line); }
.wd-field-acts .btn-primary { margin-inline-start: auto; }
.wd-what { display: grid; gap: 2px; }
.wd-what .lbl { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--zg-text-2); }
.wd-what ul { margin: 0; padding-inline-start: var(--sp-5); }
.wd-balance { font-weight: var(--fw-med); }
.wd-balance .lbl { color: var(--zg-text-2); font-weight: var(--fw-reg); }
.wd-balance.is-due { color: var(--zg-warning-ink); }
.wd-why { font-size: var(--fs-sm); color: var(--zg-danger-ink); }
.wd-wait.is-return { background: var(--zg-danger-soft); border-radius: var(--r-md); padding-inline: var(--sp-2); border-bottom-color: transparent; }
.wd-return-line { margin: 0; }
.pay-block { border-top: 1px solid var(--zg-line); padding-top: var(--sp-3); }
.pay-block .section-title { margin: 0; font-size: var(--fs-md); }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: var(--tap); }
.pay-row.is-cancelled .pay-amount { text-decoration: line-through; color: var(--zg-text-2); }
.pay-amount { font-weight: var(--fw-med); min-width: 7ch; }

/* the builder while a newer saved version waits to be loaded (screens/builder.js, reconcile): not edited, not saved */
.builder-stale:empty { display: none; }
.builder-body.is-stale .builder-frame { pointer-events: none; opacity: .45; }

/* Ben's phone round (the scheduling sheet ran off the left edge on an iPhone): a grid's child defaults to min-width:auto, so
   the widest native control (iOS draws date/time inputs at their own width) set the column — and the sheet overflowed.
   Every field and input now stays inside its container, on every width; date/time drop the native width (the picker stays). */
.dialog-body > *, .form-grid > *, .field, .stack > * { min-width: 0; }
.input { min-width: 0; max-width: 100%; box-sizing: border-box; }
input.input[type="date"], input.input[type="time"] { -webkit-appearance: none; appearance: none; display: block; text-align: start; line-height: var(--tap); }
input.input[type="date"]::-webkit-date-and-time-value, input.input[type="time"]::-webkit-date-and-time-value { text-align: start; }
.dialog { box-sizing: border-box; overflow-x: hidden; }

/* the order's scheduling, at the top of the order (Ben's phone round — it was only in "details", at the bottom) */
.order-schedule { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); background: var(--zg-blue-soft); color: var(--zg-blue-ink); }
.order-schedule .btn { margin-inline-start: auto; }

/* ── the gallery (stage 7; docs/phase-7/00-plan.md, section 4) ── */
/* an order's photo in the gallery: a mark on its tile */
.photo-tile .tag-gallery { display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--zg-navy); }
/* the viewer's bar: words, not only an icon (add to the gallery, hide, open the order) */
.viewer .viewer-text-btn { min-height: var(--tap); color: var(--zg-surface); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.viewer .viewer-text-btn:hover { background: rgba(255,255,255,.2); }
.viewer .viewer-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--zg-surface); font-size: var(--fs-sm); padding: 0 var(--sp-2); }
.viewer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* the classification sheet */
.gallery-sheet .gs-head { display: flex; justify-content: center; }
.gallery-sheet .gs-photo { max-width: 100%; max-height: 180px; border-radius: var(--r-md); object-fit: contain; background: var(--zg-ice); }
.gallery-sheet .gs-cat { border: 0; margin: 0; padding: 0; min-width: 0; }
.gallery-sheet .gs-cat legend { font-weight: var(--fw-bold); margin-bottom: var(--sp-2); padding: 0; }
.gallery-sheet .gs-cats { flex-wrap: wrap; overflow: visible; margin-bottom: 0; }
.gallery-sheet .gs-from { font-weight: var(--fw-bold); }
.gallery-sheet .gs-missing { color: var(--zg-warning-ink); margin: 0; min-height: 1.5em; }
.gallery-sheet .gs-missing:empty { min-height: 0; }
/* the finish dialog: each photo up, with "add to the gallery" */
.fj-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.fj-photo { display: flex; align-items: center; gap: var(--sp-3); }
.fj-photo img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
/* the gallery screen */
.gal-filter-card .chips { flex-wrap: wrap; overflow: visible; margin-bottom: 0; }
.gal-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); align-items: end; }
.gal-filters .field { margin: 0; min-width: 0; }
.gal-hidden { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.gal-hidden input { width: 20px; height: 20px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.gal-tile { position: relative; display: flex; flex-direction: column; text-align: start; padding: 0; border: 1px solid #E5EAF1; border-radius: var(--r-md);
  overflow: hidden; background: var(--zg-surface); cursor: pointer; min-width: 0; }
.gal-tile:focus-visible { outline: none; box-shadow: var(--focus); }
.gal-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--zg-ice); }
.gal-tile .gal-cap { padding: var(--sp-2); font-size: var(--fs-xs); color: var(--zg-text-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gal-tile.is-hidden img { opacity: .45; }
.gal-tile .tag { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; }
@media (min-width: 1024px) { .gal-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.gal-filters:empty { display: none; }

/* ── hardware stock (stage 8; docs/phase-8/00-plan.md) ── */
/* settings: a location — its kind, its name, in use; one line from 600px, the name on its own line on a phone */
.stock-loc { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; padding-block: var(--sp-2);
  border-block-end: 1px solid var(--zg-line); }
.stock-loc:last-child { border-block-end: 0; }
.stock-loc .field { margin: 0; }
.stock-loc .field-error:empty { display: none; }
.stock-loc.off .input { color: var(--zg-text-2); }
.stock-loc .switch { min-height: var(--tap); }
.stock-kind { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-med); background: var(--zg-blue-soft); color: var(--zg-blue-ink); white-space: nowrap; }
.stock-kind.wh { background: var(--zg-turq-soft); color: var(--zg-turq-ink); }
@media (max-width: 599px) {
  .stock-loc { grid-template-columns: 1fr auto; }
  .stock-loc .field { grid-column: 1 / -1; grid-row: 2; }
}
/* a shortage before it happens: a warning, never a block */
.stock-warn:empty { display: none; }
.stock-short { margin: var(--sp-1) 0; padding-inline-start: var(--sp-5); }
.stock-ok { margin: 0; }
/* the stock screen (מ־17) */
.stock-tools { display: grid; grid-template-columns: 1fr minmax(160px, 220px); gap: var(--sp-3); align-items: end; }
.stock-tools .field { margin: 0; }
@media (max-width: 599px) { .stock-tools { grid-template-columns: 1fr; } }
.stock-alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.stock-alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); background: var(--zg-warning-soft); color: var(--zg-warning-ink); }
.stock-alert.negative { background: var(--zg-danger-soft); color: var(--zg-danger-ink); }
.stock-alert .tx { min-width: 0; }
@media (max-width: 599px) { .stock-alert { grid-template-columns: auto 1fr; } .stock-alert .btn { grid-column: 1 / -1; justify-self: start; } }
.stock-group { padding-block-end: var(--sp-2); }
.stock-rows { list-style: none; margin: 0; padding: 0; }
.stock-rows li + li { border-block-start: 1px solid var(--zg-line); }
.stock-row { width: 100%; min-height: var(--tap); display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) 0; background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.stock-row:hover .nm { color: var(--zg-blue-ink); }
.stock-row:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.stock-row .qs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); justify-content: end; font-size: var(--fs-sm); }
.stock-row .q.low strong { color: var(--zg-danger-ink); }
@media (max-width: 599px) { .stock-row { grid-template-columns: 1fr auto; } .stock-row .qs { grid-column: 1; grid-row: 2; justify-content: start; } .stock-row > .icon { grid-row: 1 / span 2; grid-column: 2; } }
.stock-places { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.stock-places li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-1) 0; border-block-end: 1px solid var(--zg-line); }
.stock-cat { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; display: grid; gap: var(--sp-1); }
.stock-cat:empty { display: none; }
.stock-cat-item { width: 100%; min-height: var(--tap); text-align: start; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--zg-line); border-radius: var(--r-md);
  background: var(--zg-surface); color: inherit; font: inherit; cursor: pointer; }
.stock-cat-item.on { border-color: var(--zg-blue); background: var(--zg-blue-soft); }
.stock-picked:empty { display: none; }
.stock-picked { margin: 0; font-weight: var(--fw-med); }
.stock-tools .search-box { margin: 0; }
.stock-kinds { margin-bottom: 0; flex-wrap: wrap; overflow: visible; }
.stock-kind-desc { margin: 0; }
.stock-pick { display: grid; gap: var(--sp-2); }
.stock-pick-lbl { font-weight: var(--fw-med); }
/* the console's authenticator key (admin/screens.js consoleEnroll): large, grouped by 4, selectable */
.enroll-key { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-lg); font-weight: var(--fw-bold);
  letter-spacing: .06em; text-align: center; padding: var(--sp-3); border: 1px solid var(--zg-line); border-radius: var(--r-md); user-select: all; overflow-wrap: anywhere; }

/* ── the opening after a sign-in (components/splash.js; Ben, 2026-10-07) ──
   The approved logo, five clipped copies of it. The Z's three glass bands drift in softly — from a blur to sharp, a little
   apart and smaller, one after another (0–1 s) — and come together slowly (in place at 1.8 s); a light passes over the glass
   (1.8–2.25 s); "ZGAGI" and the slogan appear (2.0–2.5 s); held; the whole fades over the home screen (no flash: the app's
   own background). Under it, the logo's reflection, faint, as on glass. Only transform, opacity and filter move. A brand
   moment, 3 s (Ben: soft, slower, professional) — longer than the UI's 150–300 ms on purpose (MASTER.md, Motion);
   "reduce motion": the logo fades in and out, nothing moves. */
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--zg-bg); pointer-events: none;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); transition: opacity .3s ease-in; }
.splash.is-leaving { opacity: 0; pointer-events: none; }
.splash-stage { display: grid; justify-items: center; width: min(82vw, 560px); animation: sp-center 2.6s cubic-bezier(.45, 0, .2, 1) both; }
/* the Z forms in the middle of the screen (the logo moved right by the Z's offset from its centre: 50% − 19.6%), then the
   whole logo takes its place as the letters come (1.9–2.3 s) */
@keyframes sp-center { 0%, 73% { transform: translateX(30.4%); } 88%, 100% { transform: none; } }
.splash-logo { position: relative; width: 100%; aspect-ratio: 2400 / 789; }
/* the reflection: the same logo, upside down under it, fading out downwards */
/* right under it (its base is the picture's bottom), softly blurred, fading fast — as glass on a polished floor */
.splash-reflect { margin-top: .5%; transform: scaleY(-1); opacity: .32; pointer-events: none; filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 18%, transparent 42%); mask-image: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 18%, transparent 42%); }
.splash-reflect .splash-part { filter: none !important; }        /* lighter on a phone: the reflection is not blurred */
.splash-part { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none;
  animation-duration: 2.6s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.3, .55, .12, 1); will-change: transform, opacity, filter; }
.sp-top { animation-name: sp-top; }
.sp-mid { animation-name: sp-mid; }
.sp-bot { animation-name: sp-bot; }
.sp-word { animation-name: sp-word; }
.sp-tag { animation-name: sp-tag; }
/* the bands: in from a blur, one after another (the top, the bottom, the diagonal), in place at 1.8 s (69% of 2.6 s) */
@keyframes sp-top { 0% { opacity: 0; filter: blur(10px); transform: translate(-16%, -70%) scale(.94); }
  20% { opacity: 1; filter: blur(0); } 69%, 100% { opacity: 1; filter: none; transform: none; } }
@keyframes sp-bot { 0%, 5% { opacity: 0; filter: blur(10px); transform: translate(-12%, 70%) scale(.94); }
  25% { opacity: 1; filter: blur(0); } 69%, 100% { opacity: 1; filter: none; transform: none; } }
@keyframes sp-mid { 0%, 10% { opacity: 0; filter: blur(10px); transform: translate(18%, 8%) scale(.94); }
  30% { opacity: 1; filter: blur(0); } 69%, 100% { opacity: 1; filter: none; transform: none; } }
/* the letters 2.0–2.35 s, the slogan 2.15–2.5 s — a short slide, a fade */
@keyframes sp-word { 0%, 77% { opacity: 0; transform: translateX(2.5%); } 90%, 100% { opacity: 1; transform: none; } }
@keyframes sp-tag { 0%, 83% { opacity: 0; transform: translateY(6%); } 96%, 100% { opacity: 1; transform: none; } }
/* the light: a soft band crossing the Z once, 1.8–2.25 s */
.splash-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.splash-sheen::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 18%; left: -25%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
  animation: sp-sheen 2.25s linear both; }
@keyframes sp-sheen { 0%, 80% { left: -25%; opacity: 0; } 82% { opacity: 1; } 100% { left: 45%; opacity: 0; } }
/* over the letters, after they arrive: 2.4–2.85 s, across the whole word (the logo itself unchanged) */
.sheen-word::before { width: 12%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
  animation: sp-sheen-word 2.85s linear both; }
@keyframes sp-sheen-word { 0%, 84% { left: 25%; opacity: 0; } 86% { opacity: 1; } 100% { left: 105%; opacity: 0; } }
/* reduce motion: the whole logo, faded in — no part moves, no light */
.splash.is-reduced .splash-part { animation: sp-fade .3s ease-out both; }
.splash.is-reduced .splash-sheen { display: none; }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .splash-part { animation: sp-fade .3s ease-out both !important; }
  .splash-sheen { display: none; }
}
/* the cold start's wait (the session being read): the logo, still — not an empty skeleton */
.boot-logo { min-height: 100dvh; display: grid; place-items: center; background: var(--zg-bg); }
.boot-logo img { width: min(70vw, 420px); height: auto; }