/* Kube_Habait Daily Forms — mobile-first RTL styles.
   No external fonts, no CDN, no CSS framework. Targets 360px width and up.
   Interactive controls are never smaller than 48px tall. */

:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --ink: #16202e;
  --muted: #5a6b80;
  --line: #d8dfe8;
  --brand: #1f6f54;
  --brand-dark: #17553f;
  --warn-bg: #fdf2d6;
  --warn-ink: #7a5a10;
  --danger-bg: #fdecec;
  --danger-ink: #a12020;
  /* 7.4.29: operational BATCH IDENTITY — the dark brown of the Kube Habait
     logo family. Means "which batch is this", never warning/status. */
  --batch-ink: #5d3a1f;
  /* 7.4.30: FIXED product identity colors mirroring the real product-bag
     families — visually faithful, accessible-on-white web colors, keyed by
     filling_type_code only. Presentation, never stored in the DB. */
  --product-habait-siska: #166534;   /* green bag */
  --product-habait-ground: #9a3412;  /* orange-red bag */
  --product-habait-veg: #4a1d6e;     /* dark-purple vegetarian bag */
  --product-ruby-siska: #1d4ed8;     /* blue bag */
  --product-ruby-ground: #6d28d9;    /* violet bag — clearly lighter/bluer
                                        than the vegetarian dark purple */
  --radius: 12px;
  --tap: 48px;

  /* Package 7.4.9 — the ONE vertical spacing scale. Every margin, padding and
     gap in this file comes from here, so "how much air does the app have" is a
     single decision instead of forty hand-picked numbers. */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 18px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-md) var(--sp-md) var(--sp-lg);
}

/* ---------- header ---------- */

.site-head {
  text-align: center;
  margin-bottom:var(--sp-lg);
}

.site-head h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.site-head .sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.today {
  margin: var(--sp-sm) 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
}

.card h2 {
  margin: 0 0 var(--sp-xs);
  font-size: 19px;
  font-weight: 700;
}

.card p {
  margin: 0 0 var(--sp-sm);
  color: var(--muted);
  font-size: 15px;
}

.badge {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom:var(--sp-sm);
}

/* ---------- controls ---------- */

.btn {
  display: block;
  width: 100%;
  /* the touch target is protected by min-height; only the padding shrinks */
  min-height: var(--tap);
  padding: var(--sp-sm) var(--sp-md);
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  line-height: 24px;
  cursor: pointer;
}

.btn:active { background: var(--brand-dark); }

.btn-secondary {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}

.field { margin-bottom: var(--sp-md); }

/* 7.4.9: a form label must read as a LABEL, never as a line of body text that
   happens to sit above a control. It is the same size as the value it labels
   but heavier and darker, with a small deliberate gap beneath it.

   7.4.12 makes it the ONE field-heading standard of the system: brand green
   with a thin green rule on the right (RTL), a little larger than body text
   but never oversized. Every field a worker fills — performer, raw material,
   product, importer, manufacturer, delivery note, expiry, quantity, and the
   two CCP measurements — is announced by exactly this. Read-only manager
   tables keep the quieter label/value row instead; a detail table is not a
   form. */
.field label,
.field-label,
.field-heading {
  display: block;
  margin: 0 0 var(--sp-xs);
  padding-right: var(--sp-sm);
  border-right: 3px solid var(--brand);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-dark, var(--brand));
  letter-spacing: 0.1px;
}

.field input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 19px;
  font-family: inherit;
  /* normal text spacing: names like "אמיר" must never render with stretched
     letters (the 4px spacing below is for the numeric PIN field only) */
  text-align: right;
  letter-spacing: normal;
}

/* the numeric login PIN keeps the wide, centered digits */
.field input[type="password"] {
  text-align: center;
  letter-spacing: 4px;
}

.field input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.error {
  background: var(--danger-bg);
  color: var(--danger-ink);
  border: 1px solid #f2c4c4;
  border-radius: 10px;
  padding: var(--sp-sm) 14px;
  margin-bottom:var(--sp-md);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* ---------- admin stats ---------- */

.stats { margin: 0 0 4px; }

.stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--line);
}

.stat:last-child { border-bottom: 0; }

.stat .label { color: var(--muted); font-size: 16px; }

.stat .value { font-size: 24px; font-weight: 700; }

/* ---------- footer ---------- */

.foot {
  margin-top:var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap:var(--sp-sm);
}

.foot form { margin: 0; }

.note {
  margin-top:var(--sp-md);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.login-wrap { padding-top:var(--sp-lg); }

/* ---------- form controls ---------- */

.field select,
.field textarea,
.field input[type="time"] {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-family: inherit;
}

.field textarea {
  min-height: 96px;
  text-align: right;
  line-height: 1.5;
  resize: vertical;
}

.field select:focus,
.field textarea:focus,
.field input[type="time"]:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.readonly-value {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #f7f9fb;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
}

/* radio group styled as large tap targets; the input itself stays in the DOM
   for keyboard/screen-reader users but is visually hidden */
.choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.choice-btn {
  display: block;
  min-height: var(--tap);
  margin-bottom: 10px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}

/* 7.4.21: the two result cards. Nested inside .result-cards, so the checked
   state travels input ~ .result-cards descendant. Green family for תקין,
   warn family for תקלה — never alarm red on the unselected card. */
#result_ok:checked ~ .result-cards .result-card-ok {
  border-color: var(--brand);
  background: #e8f3ee;
  color: var(--brand-dark);
}
#result_ok:checked ~ .result-cards .result-card-ok .result-mark {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

#result_issue:checked ~ .result-cards .result-card-issue {
  border-color: #c9821a;
  background: var(--warn-bg);
  color: var(--warn-ink);
}
#result_issue:checked ~ .result-cards .result-card-issue .result-mark {
  border-color: #c9821a;
  background: #c9821a;
  color: #fff;
}

#result_ok:focus-visible ~ .result-cards .result-card-ok,
#result_issue:focus-visible ~ .result-cards .result-card-issue {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* the issue description only appears once "with a problem" is selected */
.issue-field { display: none; margin-top: 4px; }
#result_issue:checked ~ .issue-field { display: block; }

.issue-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
}

.issue-field textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 17px;
  font-family: inherit;
  text-align: right;
  resize: vertical;
}

.btn-disabled {
  background: #e9edf2;
  color: var(--muted);
  cursor: default;
}

.btn-small {
  display: inline-block;
  width: auto;
  min-height: 44px;
  margin: 4px 0 0 6px;
  padding: 10px 12px;
  font-size: 15px;
}

/* ---------- badges / pills / banners ---------- */

.badge-active { background: #e8f3ee; color: var(--brand-dark); }
.badge-done { background: #e9edf2; color: var(--muted); }

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 600;
}

.pill-ok { background: #e8f3ee; color: var(--brand-dark); }
.pill-issue { background: var(--warn-bg); color: var(--warn-ink); }

.ok-banner,
.closed-banner,
.pending-banner {
  border-radius: 10px;
  padding: var(--sp-sm) 14px;
  margin-bottom:var(--sp-md);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.ok-banner { background: #e8f3ee; color: var(--brand-dark); }
.closed-banner { background: #e9edf2; color: var(--muted); }
/* CCP awaiting-verification: amber, clearly NOT a closure banner */
.pending-banner { background: #fdf3e1; color: #8a5a12; }
/* 7.4.13: the old `.pending-banner .check-ar` reduction is gone — no banner
   carries a .check-ar span any more (banners are built with the canonical
   .bilingual component, which enforces parity by inheritance). */

/* CCP breach block: revealed (by the tiny toggle script, or on a server
   re-render) only when the temperature is below the critical limit. */
.ccp-breach {
  border: 1px solid #e6c9a0;
  background: #fdf7ee;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 12px;
}
.checklist-hint.check-issue { color: #a33; font-weight: 600; }
/* CCP form: readable performer + numeric inputs stay LTR */
#worker_display { background: #f4f5f4; }

.value-text { font-size: 16px; font-weight: 600; text-align: left; }

/* ---------- admin sections ---------- */

/* Package 7.4.8 — the canonical section rubric.
   Legible at a glance as a heading, but deliberately quiet: a soft accent rule
   on the RIGHT (this is an RTL interface), the faintest possible tint, and no
   loud colour anywhere. */
/* 7.4.9: the 7.4.8 rubric was correct but too quiet and too tall. It is now a
   touch more present — a heavier weight, a slightly firmer tint and a hairline
   underline — while occupying LESS vertical space than before. Still no loud
   colour and still not a banner. */
.section-head {
  display: flex;
  align-items: center;
  margin: var(--sp-md) 0 var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md) var(--sp-xs) var(--sp-sm);
  min-height: 34px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: #eef3f1;
  border-right: 4px solid var(--brand);
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
}
.section-head:first-child { margin-top: 0; }

.section-hygiene { border-right-color: #c62828; }
.section-device { border-right-color: #1565c0; }

.card-hygiene { border-right: 5px solid #c62828; }
.card-device { border-right: 5px solid #1565c0; }

.row {
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--line);
}

.row:last-child { border-bottom: 0; }
.row-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.row-line { font-size: 15px; color: var(--muted); margin-bottom: 2px; }

.row-line code {
  background: #eef2f6;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 14px;
}

.resolve-form { margin-top: 8px; }
.empty { margin: 0; color: var(--muted); font-size: 15px; }

/* --- Execution checklist (package 6.2) ----------------------------------- */
.checklist-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
/* 7.4.13: worker bilingual parity — the Arabic checklist heading is the SAME
   size, weight and colour as the Hebrew one, never a muted subtitle. */
.checklist-title { font-size: 18px; font-weight: 700; }
.checklist-title-ar { font-size: 18px; font-weight: 700; }
.checklist-hint { margin: 4px 0 var(--sp-sm); font-size: 15px; color: var(--muted); }

/* One big tappable card per item: the whole label is the touch target. */
.check-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; box-sizing: border-box;
  min-height: 56px; padding: 12px 14px; margin-bottom: 10px;
  border: 2px solid #c9d4cf; border-radius: 12px;
  background: #fbfdfc; cursor: pointer;
}
.check-item input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.check-mark {
  flex: 0 0 34px; height: 34px; width: 34px;
  border: 2px solid #8fa39a; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; color: transparent;
}
.check-item-on { border-color: var(--brand-dark); background: #eef7f2; }
.check-item input[type="checkbox"]:checked + .check-mark {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
}
.check-item input[type="checkbox"]:checked + .check-mark::after { content: "✓"; }
.check-item:has(input:focus-visible) {
  outline: 3px solid #1565c0; outline-offset: 2px;
}
.check-labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 7.4.13: Hebrew top, Arabic below — SAME size, weight and colour. The old
   15px/#4a5a54 Arabic line was exactly the "Arabic is secondary" treatment
   the bilingual standard forbids. */
.check-he { font-size: 17px; font-weight: 600; }
.check-ar { font-size: 17px; font-weight: 600; direction: rtl; }

/* Summary + admin rendering of answers */
.check-result {
  display: flex; align-items: center; gap:var(--sp-sm);
  padding: 8px 0; border-bottom: 1px solid #e4ebe7;
}
.check-result:last-of-type { border-bottom: none; }
.check-result-mark { flex-shrink: 0; }
.check-ok-mark {
  color: #1b7a43; font-size: 22px; font-weight: 700;
  width: 28px; text-align: center;
}
.check-missing-mark {
  color: #a33; font-size: 13px; font-weight: 700;
  background: #fdecec; border-radius: 6px; padding: 3px 8px;
}
.check-result-missing .check-he, .check-result-missing .check-ar { color: #a33; }
.checklist-count { margin: var(--sp-sm) 0 0; font-size: 15px; font-weight: 600; }
.checklist-historical { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.admin-check-count { font-weight: 600; }
.admin-check-missing { color: #a33; font-weight: 600; }
.pill-missing { background: #fdecec; color: #a33; }

/* --- 24-hour time control (no native type=time, no AM/PM ever) ----------- */
.time-24h {
  display: flex; align-items: center; gap: 8px;
  direction: ltr; /* only the numeric area is LTR */
}
.time-24h select {
  min-height: 48px; min-width: 84px; font-size: 20px;
  text-align: center; padding: 8px;
}
.time-colon { font-size: 22px; font-weight: 700; }

/* ======================================================================== */
/* Package 7 — worker shell vs manager shell, real responsive layout        */
/* ======================================================================== */

/* Worker shell stays narrow and focused on every screen. */
.wrap { max-width: 720px; }

/* Manager shell uses the desktop. One backend, one markup — CSS only. */
body.manager .wrap-manager { max-width: 1360px; margin: 0 auto; padding: 0 16px; }

/* Manager navigation */
.mnav {
  display: flex; flex-wrap: wrap; gap:8px; align-items: center;
  margin: var(--sp-sm) 0 var(--sp-md);
}
.mnav-link {
  display: inline-block; padding: 10px 16px; min-height: 44px;
  border-radius: 10px; background: #eef2f0; color: inherit;
  text-decoration: none; font-weight: 600;
}
.mnav-active { background: var(--brand-dark); color: #fff; }
.mnav-out { margin-inline-start: auto; }

/* Summary cards: 4-up on desktop, stacked on phones */
.stats-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* Status pills */
.pill-wait { background: #eef2f0; color: #445; }
.pill-late { background: #fff3cd; color: #7a5200; }

/* Filters: multi-column on desktop, stacked on mobile */
.filters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.filters .field { margin: 0; }
.filters .field-submit { align-self: end; }

/* Manager table: real table on wide screens, cards on phones.
   Same markup, same data — only the CSS changes. */
.mtbl { width: 100%; }
.mtbl-head, .mtbl-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 0.9fr 1.2fr 0.6fr 0.8fr 0.6fr 0.6fr 0.6fr 0.9fr;
  gap:8px; align-items: center;
}
.mtbl-history .mtbl-head, .mtbl-history .mtbl-row {
  grid-template-columns: 1fr 1.4fr 1fr 0.9fr 1.2fr 0.7fr 0.7fr 0.8fr;
}
.mtbl-head { font-weight: 700; border-bottom: 2px solid #c9d4cf; padding: 8px 0; }
.mtbl-row { border-bottom: 1px solid #e4ebe7; padding: var(--sp-sm) 0; }
.mtbl .cell { min-width: 0; overflow-wrap: anywhere; }
.cell-act { text-align: left; }
.mtbl .cell::before { content: none; }

/* Task detail: two columns on desktop */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap:var(--sp-md); }

.pagination {
  display: flex; gap:var(--sp-sm); align-items: center; justify-content: center;
  margin: var(--sp-md) 0;
}
.page-ind { color: var(--muted); }
.admin-entry { margin-inline-start: auto; }

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1099px) {
  .stats-4 { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: repeat(3, 1fr); }
}

/* --- Mobile: tables become labelled cards; nothing scrolls sideways ----- */
@media (max-width: 767px) {
  .stats-4 { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .mnav-out { margin-inline-start: 0; width: 100%; }

  .mtbl-head { display: none; }
  .mtbl-row, .mtbl-history .mtbl-row {
    display: block;
    border: 1px solid #dbe4df; border-radius: 12px;
    padding: 12px; margin-bottom:var(--sp-sm); background: #fbfdfc;
  }
  .mtbl .cell { display: flex; gap: 8px; padding: 3px 0; }
  .mtbl .cell::before {
    content: attr(data-l); font-weight: 700; min-width: 96px; flex-shrink: 0;
  }
  .mtbl .cell[data-l=""]::before { content: none; }
  .cell-act { text-align: right; }
  .cell-act .btn { width: 100%; min-height: 48px; }
}

/* --- Package 7.1: compact form header + tighter checklist rows ----------- */
.opened-line {
  margin: 2px 0 10px; font-size: 16px; font-weight: 600; color: #2c3a34;
}
.opened-sep { color: var(--muted); padding: 0 2px; }
.opened-time { font-variant-numeric: tabular-nums; }

/* Tighter cards: checkbox on the right, one aligned row, text block left. */
.check-item {
  min-height: 56px; padding: 8px 12px; margin-bottom: 8px; gap: 12px;
  align-items: center;
}
.check-mark { flex: 0 0 30px; height: 30px; width: 30px; font-size: 21px; }
.check-labels { flex: 1 1 auto; min-width: 0; text-align: right; gap: 1px; }
/* compact rows keep parity too (7.4.13): both languages shrink together */
.check-he { font-size: 16px; }
.check-ar { font-size: 16px; }

/* ======================================================================== */
/* Package 7.1.1 — checklist row alignment fix                              */
/* ROOT CAUSE: `.field label` (specificity 0,1,1) forces display:block onto */
/* the card, which is `<label class="check-item">` inside `.field` — so the */
/* earlier `.check-item{display:flex}` (0,1,0) lost the cascade and the     */
/* text block dropped BELOW the checkbox. These selectors (0,2,1 / 0,3,1)   */
/* outrank `.field label` and lock the one-row layout everywhere.           */
/* ======================================================================== */
.field label.check-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;          /* the text may wrap INSIDE its block, the row never breaks */
  direction: rtl;             /* checkbox first in DOM = physically on the RIGHT */
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  min-height: 56px;
}
.field label.check-item .check-mark {
  flex: 0 0 30px;             /* never shrinks, never wraps */
  margin: 0;
}
.field label.check-item .check-labels {
  flex: 1 1 auto;
  min-width: 0;               /* long text wraps inside the block, not under the box */
  width: auto;                /* defend against any width:100% leaking in */
  display: flex;
  flex-direction: column;
  text-align: right;
}

/* Result buttons: both stay neutral until the worker actively picks one    */
/* (no rule ever styles a button as selected without a real :checked input) */

/* ======================================================================== */
/* Package 7.3 — manual-entry area (worker screen) + origin badges.         */
/* Package 7.4.31 (Block L, Part A): the tile grid became full-width        */
/* compact ROWS — one per form, CCP first (renderer-side order).            */
/* ======================================================================== */
.manual-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfb;
  text-decoration: none;
  color: inherit;
}
a.manual-row:active { background: #eef5f1; }
.manual-row .badge { flex: 0 0 auto; }
.manual-row .check-labels { flex: 1 1 auto; min-width: 0; }
.manual-row-disabled {
  opacity: 0.55;
  background: #f4f5f4;
  pointer-events: none;
}
/* origin marker on manager rows: operational origin, never an authenticity flag */
.origin-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 13px;   /* 7.4.18 */
  background: #eef2f7;
  color: #4a5a70;
  vertical-align: middle;
}

/* ======================================================================== */
/* Package 7.4.1 — canonical bilingual worker-UI component                  */
/* Hebrew top line, Arabic below, SAME size/weight/color. inline only for   */
/* very short text, with >=1rem gap that wraps on narrow screens.           */
/* Scoped: only worker renderers emit .bilingual; manager screens never do. */
/* ======================================================================== */
.bilingual {
  display: flex;
  min-width: 0;
}
.bilingual--stacked {
  flex-direction: column;
  /* 7.4.9: the two languages sit closer together, and the line-height is
     tightened. Parity is untouched — identical size, weight and colour; only
     the empty space between the lines shrinks. */
  gap: 0;
  line-height: 1.3;
  text-align: right;
}
.bilingual--inline {
  flex-direction: row;
  flex-wrap: wrap;          /* breaks to stacked when there is no room */
  align-items: baseline;
  gap: 4px 1rem;            /* >=1rem horizontal gap between the languages */
}
.bilingual__he,
.bilingual__ar {
  font-size: inherit;       /* identical size ... */
  font-weight: inherit;     /* ... weight ... */
  color: inherit;           /* ... and color: Arabic is never secondary */
  min-width: 0;
  overflow-wrap: break-word;
}

/* Buttons: two readable lines, touch-friendly, no clipping */
.btn .bilingual {
  width: 100%;
  align-items: center;
  text-align: center;
}
.btn .bilingual--stacked { gap: 2px; }
.btn:has(.bilingual--stacked) {
  min-height: calc(var(--tap) + 14px);
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.25;
}
/* fallback for engines without :has() — same effect via a marker class */
.btn-bl {
  min-height: calc(var(--tap) + 14px);
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.25;
}
.btn-bl .bilingual { width: 100%; align-items: center; text-align: center; }

/* field labels and stat labels hosting a bilingual block */
.field label .bilingual--stacked { margin-bottom: 2px; }
.stat .label .bilingual--stacked { text-align: right; }

/* bilingual page header line (date etc.) */
.today-bl { margin: 2px 0 0; }
.today-bl .bilingual--stacked { gap: 1px; }

/* CCP performer display: a plain readable block, never an input */
.performer-display {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f4f5f4;
  padding: 10px 14px;
}

/* bilingual field-label hints + card badge row (7.4.1).
   7.4.13: the later `.field-label` block that lived here is gone — it silently
   overrode the canonical field-heading standard (16px/700/brand, green rule)
   back down to 600. `.field-label` is styled ONCE, in the field-heading rule
   near the top of this file. */
.field-hint {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;   /* 7.4.18: helper text one readable step up */
  line-height: 1.4;
}
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap:8px;
  margin-bottom:var(--sp-sm);
}
.card-badges .badge { margin-bottom:0; }
/* a badge hosting a stacked bilingual block keeps its pill look */
.badge .bilingual--stacked { gap:1px; text-align: center; }
/* pills with two lines stay compact and centered */
.pill .bilingual--stacked { gap: 1px; text-align: center; }
/* error banner hosting a bilingual block stays centered */
.error .bilingual--stacked { align-items: center; text-align: center; }

/* ======================================================================== */
/* Package 7.4.3 — actions dashboard: logo, top-left manager entry,         */
/* and the "נסגרו היום" strip. Every rule here is scoped to the main        */
/* worker screen; no other page uses .site-head--actions or .closed-today.  */
/* ======================================================================== */

/* 7.4.4 replaced the 7.4.3 top bar: the manager button is no longer above the
   logo. See the "Package 7.4.4 — actions header" block at the end of this file. */

/* The logo keeps its source aspect ratio (width/height attributes + auto
   height) and is capped so it can never push the tasks off a phone screen. */
.site-logo {
  display: block;
  margin: 0 auto 8px;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 110px;
}

.site-head--actions { margin-bottom:var(--sp-md); }

/* ---------- closed today ---------- */

.section-closed { border-right-color: var(--brand); }

.closed-today .closed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:var(--sp-sm);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--line);
}
.closed-today .closed-row:first-child { padding-top:0; }
.closed-today .closed-row:last-child { padding-bottom:0; border-bottom: 0; }

/* the text block takes the free space; the view button keeps a tappable size.
   width:auto overrides the base .btn width:100%, which would otherwise force
   the button onto its own line on every screen size. */
.closed-row .btn {
  flex: 0 1 auto;
  width: auto;
  min-width: 128px;
  margin: 0;
  padding-left: 14px;
  padding-right: 14px;
}
.closed-main { flex: 1 1 190px; min-width: 0; }

.closed-name { font-weight: 600; }
.closed-today .card-badges { margin: 6px 0 0; }
.closed-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}
.closed-time { font-variant-numeric: tabular-nums; }

.badge-issue { background: var(--danger-bg); color: var(--danger-ink); }

.empty-bl { margin: 0; color: var(--muted); font-size: 15px; }

/* very narrow phones: the view button drops to its own full-width line
   rather than squeezing the record text */
@media (max-width: 359px) {
  .closed-row .btn { flex: 1 1 100%; }
  .site-logo { max-width: 160px; max-height: 92px; }
}

/* ======================================================================== */
/* Package 7.4.4 — actions header, custom pickers, calendar, quick choices  */
/* ======================================================================== */

/* ---------- actions header ---------- */
/* The brand block is centred and NOTHING sits above it, so the manager button
   can never appear over the logo. The info row below has two sides: in RTL,
   space-between puts .head-info at the right and .head-admin at the left. */
.head-brand { text-align: center; }

.head-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap:8px var(--sp-sm);
  margin-top:var(--sp-sm);
  text-align: right;
}
.head-info { flex: 1 1 auto; min-width: 0; }
.head-info .sub { margin: 0; }
.head-admin { flex: 0 0 auto; }
.head-admin .admin-entry { margin: 0; }

/* narrow phones: the button drops to its own line but stays in the header,
   directly under the date block — never back down at the bottom of the page */
@media (max-width: 400px) {
  .head-row { flex-direction: column; align-items: stretch; }
  .head-admin { align-self: flex-end; }
}

/* ---------- shared custom picker ---------- */

.picker, .datepick { position: relative; }

.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 18px;
  text-align: right;
  cursor: pointer;
}
.picker-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.picker-current { flex: 1 1 auto; min-width: 0; }
.picker-current[data-empty] { color: var(--muted); }
.picker-caret { flex: 0 0 auto; color: var(--muted); font-size: 15px; }

/* The panel is in normal flow on phones (never a floating layer that could be
   clipped or run off-screen); on wider screens it overlays the trigger. */
.picker-panel, .datepick-panel {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 32, 46, 0.12);
  padding: 6px;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.picker-panel[hidden], .datepick-panel[hidden] { display: none; }

.picker-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  margin: 0 0 6px;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfb;
  color: inherit;
  font-family: inherit;
  font-size: 17px;
  text-align: right;
  cursor: pointer;
}
.picker-option:last-child { margin-bottom:0; }
.picker-option:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.picker-option.is-selected { border-color: var(--brand); background: #e8f3ee; }

.picker-bullet { flex: 0 0 auto; color: var(--brand); font-size: 20px; line-height: 1.2; }
/* long product names wrap inside their own block instead of widening the row */
.picker-labels { flex: 1 1 auto; min-width: 0; }
.picker-labels .bilingual--stacked { gap: 2px; }
.picker-check { flex: 0 0 auto; color: var(--brand); font-weight: 700; visibility: hidden; }
.picker-option.is-selected .picker-check { visibility: visible; }

/* ---------- custom calendar ---------- */

.datepick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.datepick-title { font-weight: 700; }
.datepick-nav {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 20px;
  font-family: inherit;
  cursor: pointer;
}
.datepick-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.datepick-dow, .datepick-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.datepick-dow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.datepick-day {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fbfcfb;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}
.datepick-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.datepick-day.is-today { border-color: var(--brand); }
.datepick-day.is-selected { background: var(--brand); color: #fff; font-weight: 700; }
.datepick-pad { min-height: 40px; }

.datepick-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.datepick-actions .btn { margin: 0; flex: 1 1 0; }

/* ---------- quick numeric choices ---------- */

.quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.quick-btn {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.quick-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.quick-btn.is-selected {
  border-color: var(--brand);
  background: #e8f3ee;
  color: var(--brand-dark);
}

.quick-manual { display: flex; align-items: center; gap: 8px; }
.quick-manual input { flex: 1 1 auto; text-align: left; }
.quick-unit { flex: 0 0 auto; color: var(--muted); font-weight: 600; }

/* ======================================================================== */
/* Package 7.4.5 — CCP records awaiting verification + the verify screen     */
/* Scoped to .ccp-pending / .verify-hint / .btn-verify; nothing else on any  */
/* existing screen is affected.                                             */
/* ======================================================================== */

/* amber, like the pending banner: clearly "not finished yet", and visually
   distinct from the green "נסגרו היום" strip below it */
.section-pending { border-right-color: #d8a33a; }

.ccp-pending .pending-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:var(--sp-sm);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--line);
}
.ccp-pending .pending-row:first-child { padding-top:0; }
.ccp-pending .pending-row:last-child { padding-bottom:0; border-bottom: 0; }

.pending-main { flex: 1 1 190px; min-width: 0; }
.ccp-pending .card-badges { margin: 6px 0 0; }

.pending-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}
.pending-when { font-variant-numeric: tabular-nums; }

.pending-fact { margin-top: 4px; font-size: 15px; }

/* the action button is Hebrew-only and manager-toned, so it must not read as
   one of the green worker buttons */
.btn-verify {
  flex: 0 1 auto;
  width: auto;
  min-width: 128px;
  margin: 0;
  padding-left: 14px;
  padding-right: 14px;
  background: #8a5a12;
  border-color: #8a5a12;
  color: #fff;
}
.btn-verify:active { background: #6f4a10; }

@media (max-width: 359px) {
  .ccp-pending .btn-verify { flex: 1 1 100%; }
}

/* the mandatory-manager-decision hint on the verification screen */
.verify-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdf3e1;
  color: #8a5a12;
  font-weight: 600;
}

/* ======================================================================== */
/* Package 7.4.6 — visible choice buttons, the CCP 2 cooling window and the  */
/* manager's CCP value screen. Every rule is scoped to a 7.4.6 class; no     */
/* existing selector is modified, so no existing screen can shift.          */
/* ======================================================================== */

/* ---------- choice buttons ---------- */
/* The 7.4.4 picker fixed the iOS wheel but still had to be opened. These are
   always visible: every option is a tappable card, so a phone never opens a
   pop-up to choose a supplier or a raw material. */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

/* 7.4.7: a compact grid rather than one wide card per option. Three per row
   where the width allows, two on a narrow phone — a short option like
   "שומן בקר" must never occupy a whole line on its own. */
.choice-btn {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 132px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
}
.choice-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.choice-btn.is-selected {
  border-color: var(--brand);
  border-width: 2px;
  background: #e8f3ee;
  color: var(--brand-dark);
}

.choice-labels { flex: 1 1 auto; min-width: 0; }
.choice-check { flex: 0 0 auto; opacity: 0; font-weight: 700; }
.choice-btn.is-selected .choice-check { opacity: 1; }

/* the manual box revealed by "אחר" */
.choice-other { margin-top:var(--sp-sm); }

/* Narrow phones: two per row, which keeps both languages readable. Only a
   genuinely long option (the mushroom-and-lentil filling) is allowed to take a
   full line rather than being squeezed. */
@media (max-width: 420px) {
  .choice-btn { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .choice-btn.choice-btn--wide { flex: 1 1 100%; }
}
@media (max-width: 320px) {
  .choice-btn { flex: 1 1 100%; }
}

/* the compact grid squeezes the labels a little; keep both lines legible.
   7.4.9: the two languages are the SAME size here. The 7.4.7 rule gave Arabic
   13px against Hebrew's 15px, which is precisely the "Arabic is secondary"
   treatment the rest of this stylesheet forbids. */
.choice-btn .bilingual__he,
.choice-btn .bilingual__ar { font-size: 14px; }
.choice-btn { padding: 8px 10px; gap:4px; }

/* ---------- CCP 2 cooling window ---------- */
.cooling-block {
  border: 1px solid #cfe0ea;
  background: #f5fafd;
  border-radius: 10px;
  padding: var(--sp-sm) 12px;
  margin: 4px 0 var(--sp-sm);
}
.cooling-duration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:var(--sp-sm);
  padding-top:6px;
  border-top: 1px solid var(--line);
}

/* the provisional-definition note: visible, but never styled as an error */
.provisional-note {
  border-radius: 10px;
  padding: var(--sp-sm) 12px;
  margin-bottom:var(--sp-sm);
  background: #fdf3e1;
  color: #8a5a12;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- manager: CCP values ---------- */
.mnav-badge {
  display: inline-block;
  margin-right: 6px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger-bg, #fdecea);
  color: var(--danger-ink, #a33);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap:var(--sp-sm); }
.catalog-row .row-title { flex: 1 1 180px; }
.catalog-row .resolve-form { flex: 0 0 auto; margin: 0; }

.catalog-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap:var(--sp-sm);
  margin-top:var(--sp-sm);
  padding-top:var(--sp-sm);
  border-top: 1px solid var(--line);
}
.catalog-add .field { flex: 1 1 220px; margin: 0; }
.catalog-add .btn { flex: 0 0 auto; width: auto; margin: 0; }

/* ======================================================================== */
/* Package 7.4.7 — process screens, metric cards and exception follow-up     */
/* ======================================================================== */

/* ---------- the CCP process screen ---------- */
.proc-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.proc-count { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* verification is reported SEPARATELY from progress: a pending verification is
   not an incomplete measurement, and the layout must not suggest it is. */
.proc-verif { margin: 8px 0 4px; }
.proc-vline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:var(--sp-sm);
  padding: 3px 0;
}
.proc-vname { font-weight: 600; }

.proc-facts { margin: 8px 0; }
.proc-fact { padding: 3px 0; font-size: 15px; }

.proc-elapsed {
  margin: 8px 0 var(--sp-sm);
  padding: 8px 10px;
  border-radius: 10px;
  background: #f5fafd;
  font-weight: 600;
}

/* the single CCP 2 input: big, because it is the only thing on the screen */
.single-measure {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
}

/* ---------- manager metric cards ---------- */
/* Each metric is its own card and carries BOTH its title and its number, so a
   number can never appear to belong to a neighbouring card. */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:var(--sp-sm);
  margin-bottom:var(--sp-md);
}
.metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:6px;
  padding: var(--sp-md) 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.metric-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.metric-value { font-size: 30px; font-weight: 700; line-height: 1; }

.metric-ok .metric-value { color: var(--brand-dark); }
.metric-exception .metric-value { color: var(--danger-ink, #a33); }
.metric-pending .metric-value { color: #8a5a12; }

@media (max-width: 760px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  .metric-grid { grid-template-columns: 1fr; }
}

/* ======================================================================== */
/* Package 7.4.8 — UI clarity: label/value rows and the RTL process stepper  */
/* ======================================================================== */

/* ---------- detail rows: a field NAME is never mistaken for its VALUE ---- */
/* 7.4.9: on a wide enough screen the field list becomes two columns, which
   halves the height of every summary without shrinking anything. */
.detail-grid { margin: var(--sp-xs) 0; }

@media (min-width: 560px) {
  .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-lg);
  }
  .detail-grid .detail-row--wide { grid-column: 1 / -1; }
}

.detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.detail-row:last-child { border-bottom: 0; }

/* the label is smaller and muted; the value is larger, darker and heavier.
   Both languages of the label keep the SAME size and weight — the Arabic is
   never weakened relative to the Hebrew. */
.detail-label {
  flex: 0 1 auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.detail-value {
  flex: 1 1 auto;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #222);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* on a phone the value drops to its own line instead of being squeezed */
@media (max-width: 420px) {
  .detail-row { flex-direction: column; align-items: stretch; gap: 2px; }
  .detail-value { text-align: right; }
}

/* ---------- RTL process stepper ---------- */
/* A Hebrew/Arabic process runs RIGHT TO LEFT: the first step is the RIGHT-most
   one. row-reverse on an RTL page would flip it back to the left, so the list
   is laid out in normal source order inside a dir="rtl" document and the
   connector is drawn on the LEFT of each node — pointing the way it runs. */
.stepper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin: 4px 0 14px;
  padding: 0;
  list-style: none;
}

.step {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap:8px;
  padding: var(--sp-sm) 10px var(--sp-sm) 18px;
  min-width: 0;
}

/* the arrow between nodes: drawn, never typed, so it cannot point the wrong
   way and is invisible to a screen reader */
.step + .step::before {
  content: "";
  position: absolute;
  right: -7px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: rotate(45deg);
}

.step-mark {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
}
.step-body { min-width: 0; }
.step-number { display: block; font-size: 13px; color: var(--muted); font-weight: 700; }
.step-title { display: block; font-weight: 600; font-size: 15px; }
.step-status { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
/* verification is a SECOND dimension of the node, never a stage of its own */
.step-verify {
  display: block;
  font-size: 13px;
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
}

.step--todo .step-title { color: var(--muted); }
.step--progress .step-mark { border-color: #d8a33a; background: #fdf3e1; }
.step--progress .step-title { color: #8a5a12; }
.step--done .step-mark { border-color: var(--brand); background: #e8f3ee; }
.step--verified .step-mark { border-color: var(--brand); background: var(--brand); }
.step--verified .step-verify { color: var(--brand-dark); font-weight: 600; }

/* narrow screens: the same markup becomes a vertical chain with downward
   arrows. Never a horizontal scroll. */
@media (max-width: 560px) {
  .stepper { flex-direction: column; }
  .step { flex: 1 1 auto; padding: 8px 10px 8px 10px; }
  .step + .step::before {
    right: 15px;
    top: -6px;
    transform: rotate(-45deg);
  }
}

/* ======================================================================== */
/* Package 7.4.9 — global compaction: the CCP process, the boards and the   */
/* manager, all brought onto the shared spacing scale.                      */
/* ======================================================================== */

/* ---------- the form-field standard ---------- */
/* A field is LABEL over CONTROL, always in that order and always visibly
   separated. The control group carries the surface, not the label. */
.form-field { margin-bottom: var(--sp-md); }
.form-field > .field-label { margin-bottom: var(--sp-xs); }

/* a light grouping band inside a form: several related fields read as one
   block without each one becoming a card of its own */
.form-group { margin-bottom: var(--sp-md); }
.form-group-head {
  margin: 0 0 var(--sp-sm);
  padding-right: var(--sp-sm);
  border-right: 3px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* ---------- the process card ---------- */
.proc-progress {
  padding-bottom: var(--sp-xs);
  gap: var(--sp-sm);
}
.proc-count { font-size: 18px; }
.proc-verif { margin: var(--sp-xs) 0 0; }
.proc-vline { padding: 1px 0; }
.proc-elapsed {
  margin: var(--sp-sm) 0;
  padding: var(--sp-xs) var(--sp-sm);
  font-size: 15px;
}

/* the monitoring counter as a compact badge beside the title, not a block */
.proc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 2px var(--sp-sm);
  border-radius: 999px;
  background: #eef3f1;
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 700;
}
.proc-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
/* the banner sits inline with the badge instead of owning a whole row */
.proc-title-row > .ok-banner,
.proc-title-row > .pending-banner,
.proc-title-row > .closed-banner {
  flex: 1 1 auto;
  margin-bottom:0;
  text-align: right;
}
.proc-title-row > .proc-badge { flex: 0 0 auto; }

/* ---------- the stepper: shorter, better connected ---------- */
.stepper { margin: var(--sp-xs) 0 var(--sp-sm); }
.step { padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-md); gap:var(--sp-sm); }
.step-title { font-size: 14px; }
.step-status, .step-verify { font-size: 13px; }
.step-verify { margin-top: 1px; padding-top: 1px; }
.step-number { font-size: 13px; }

/* a hairline rail joins the nodes so the chain reads as one process rather
   than three loose boxes */
.stepper { position: relative; }
.step::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.step:first-child::after { right: 50%; }
.step:last-child::after { left: 50%; }
.step-mark { position: relative; z-index: 1; margin-top: 4px; }
.step + .step::before { top: 11px; }

@media (max-width: 560px) {
  .step::after { display: none; }
  .step { padding: var(--sp-xs) var(--sp-sm); }
}

/* ---------- compact cards on the boards ---------- */
.pending-row, .closed-today .closed-row, .ccp-pending .pending-row {
  padding: var(--sp-sm) 0;
  gap:var(--sp-sm);
}
.pending-meta, .closed-meta { margin-top: 2px; font-size: 14px; }  /* 7.4.18 */
.pending-fact { margin-top: 2px; }
.card-badges { gap:var(--sp-xs); }
.ccp-pending .card-badges, .closed-today .card-badges { margin: var(--sp-xs) 0 0; }

/* ---------- manager ---------- */
.metric-grid { gap:var(--sp-sm); margin-bottom:var(--sp-md); }
.metric-card { padding: var(--sp-sm) var(--sp-sm); gap:var(--sp-xs); }
.metric-value { font-size: 26px; }
.metric-label { font-size: 14px; }  /* 7.4.18: manager metadata labels */
.row { padding: var(--sp-sm) 0; }
.row-line { font-size: 14px; }
.catalog-add { margin-top:var(--sp-sm); padding-top:var(--sp-sm); }

/* ---------- choice buttons: a touch tighter, still touch-safe ---------- */
.choice-row { gap: var(--sp-xs); }
.choice-btn { min-height: 46px; padding: var(--sp-xs) var(--sp-sm); }
.quick-row { gap: var(--sp-xs); }

/* ---------- misc ---------- */
.foot { margin-top:var(--sp-md); }
.ok-banner, .closed-banner, .pending-banner {
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom:var(--sp-sm);
  font-size: 16px;
}
.provisional-note { padding: var(--sp-sm) var(--sp-md); margin-bottom:var(--sp-sm); }
.checklist-hint { margin-bottom:var(--sp-sm); }

/* ---------- manager entry on the worker's process page (7.4.11) ----------
   The worker's next action owns this screen. This is a way IN for Ziv, not a
   competing call to action: secondary colours, a lighter weight, and it sits
   below the worker's action rather than beside it. */
.manager-entry { margin: var(--sp-md) 0 0; }
.btn-manager-verify {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  font-weight: 600;
}
.manager-entry-which {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.75;
}

/* ---------- the four-stage tracker (7.4.12) --------------------------------
   The work is four steps, not two CCPs and a closure. The tracker draws them
   as numbered nodes joined by a hairline rail — no arrow glyphs, because an
   arrow drawn as text lands on top of the label beside it in RTL, which is
   exactly what the old stepper did. */
.tracker {
  display: flex;
  flex-direction: row;
  gap: 0;
  margin: 0 0 var(--sp-sm);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.tracker-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--sp-xs);
  text-align: center;
}
/* the rail: drawn BETWEEN nodes, never across a label */
.tracker-node + .tracker-node::before {
  content: "";
  position: absolute;
  top: 13px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.tracker-node--done + .tracker-node::before,
.tracker-node--current + .tracker-node::before { background: var(--brand); }
.tracker-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.tracker-node--done .tracker-num {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.tracker-node--current .tracker-num,
.tracker-node--next .tracker-num {
  border-color: var(--brand);
  color: var(--brand);
}
.tracker-node--current .tracker-num { box-shadow: 0 0 0 3px #e8f2ec; }
/* 7.4.13: completion is a SEPARATE ✓ badge on the corner of the number —
   the number itself is the stage's identity and is never replaced. */
.tracker-check {
  position: absolute;
  top: -5px;
  left: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
/* the node's text block: name, subtitle, state — one column under the number
   on desktop, beside it on a phone */
.tracker-text {
  display: block;
  min-width: 0;
  margin-top: var(--sp-xs);
}
/* 7.4.18: microcopy readability — the stage name reads at 14px and its
   subtitle/state a half-step below, so the hierarchy survives the bump.
   Numbers and the ✓ badge are deliberately untouched. */
.tracker-label {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* the PROCESS_STAGES subtitle, compactly under the stage name (7.4.13) */
.tracker-sub {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.tracker-node--done .tracker-label,
.tracker-node--current .tracker-label { color: var(--ink); font-weight: 600; }
.tracker-state {
  display: block;
  /* 7.4.18: raised above the old 13px floor — read at a glance, in a
     factory; stays half a step under the stage name. */
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}

@media (max-width: 430px) {
  /* a phone stacks the chain instead of squeezing four labels onto one line */
  .tracker { flex-direction: column; gap: var(--sp-xs); }
  .tracker-node {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    text-align: right;
    padding: 0;
  }
  .tracker-node + .tracker-node::before {
    top: -4px; right: 12px; width: 2px; height: 8px;
  }
  .tracker-text { margin-top: 0; flex: 1 1 auto; }
}

/* the manager-verification strip: a separate layer, never a fifth step */
.verif-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  margin: 0;
  padding: var(--sp-sm) 0 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.verif-strip dt { color: var(--muted); }
.verif-strip dd { margin: 0 var(--sp-xs) 0 0; font-weight: 700; }
.verif-ok { color: var(--brand-dark, var(--brand)); }
.verif-wait { color: #a06000; }

/* the product a raw material yields, when it is derived rather than chosen */
.derived-product {
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6faf8;
  font-weight: 700;
}

/* the control point announces itself before the field it asks for (7.4.12 §25) */
.ccp-identity {
  margin: 0 0 var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border-right: 4px solid var(--brand);
  border-radius: 6px;
  background: #eef3f1;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

/* ======================================================================== */
/* Package 7.4.14 — process control: fact grid, material grid, disabled     */
/* products, portioning note. Every rule is scoped to a 7.4.14 class.       */
/* ======================================================================== */

/* ---------- the canonical process-facts grid ---------- */
/* Each fact is ONE semantic unit: its label (Hebrew over Arabic, parity)
   with its value directly beneath — never two unrelated label/value pairs
   fighting over one text line. Two cells per row when the width allows,
   one per row on a phone. */
.fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm) var(--sp-lg);
  margin: var(--sp-xs) 0;
}
.fact {
  min-width: 0;
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--line);
}
.fact-label {
  display: block;
  color: var(--muted);
  /* 7.4.18: the label reads at 14px; the value keeps its own size — the
     hierarchy is weight/colour, not squinting. */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.fact-label .bilingual--stacked { gap: 0; }
.fact-value {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .fact-grid { grid-template-columns: 1fr; gap: var(--sp-xs); }
}

/* ---------- raw-material cards: one equal grid ---------- */
/* Five materials, same size, canonical order — no oversized special row. */
.choice-row--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--sp-xs);
}
.choice-row--grid .choice-btn {
  flex: none;
  min-width: 0;
  width: 100%;
}

/* ---------- illegal products: disabled, never hidden ---------- */
/* The worker sees the whole catalogue with the impossible options visibly
   locked; a list whose entries silently vanish looks broken. */
.choice-btn--disabled,
.choice-btn[disabled] {
  opacity: 0.45;
  background: #f0f2f1;
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- the post-CCP1 portioning note ---------- */
/* A STATE of the work between stages 2 and 3 — instruction-level presence,
   never a fifth tracker node. */
.stage-note {
  border-radius: 10px;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  background: #eef3f1;
  border-right: 4px solid var(--brand);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

/* ======================================================================== */
/* Package 7.4.15 — compact past-only date picker + disabled future days.   */
/* ======================================================================== */

/* The popover is a small tool, not a second form: limited width, compact
   header and day cells. Touch targets stay finger-sized. */
.datepick-panel--compact {
  max-width: 312px;
  padding: var(--sp-xs) var(--sp-sm) var(--sp-sm);
}
.datepick-panel--compact .datepick-head {
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xs);
}
.datepick-panel--compact .datepick-nav {
  min-width: 40px;
  min-height: 40px;
  font-size: 18px;
}
.datepick-panel--compact .datepick-day {
  min-height: 38px;
  font-size: 15px;
  border-radius: 6px;
}
.datepick-panel--compact .datepick-pad { min-height: 38px; }
.datepick-panel--compact .datepick-dow { font-size: 13px; }  /* 7.4.18 */
.datepick-panel--compact .datepick-actions { margin-top: var(--sp-xs); }
.datepick-panel--compact .datepick-actions .btn {
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* the fast month jump: current month + the previous 12 in one compact select */
.datepick-jump {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* a future day cannot be a production date: visibly dead, not tappable */
.datepick-day--disabled,
.datepick-day[disabled] {
  opacity: 0.35;
  background: #f0f2f1;
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* the next-month arrow parked at the current month */
.datepick-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ======================================================================== */
/* Package 7.4.16 — state colours, prominent pending-verify, compact verify */
/* ======================================================================== */

/* ---------- chilling is BLUE ---------- */
/* Amber means "a person is being waited on"; the blast chiller is a machine
   doing its work — cold, calm, blue. Banner, next-action card and the
   in-progress tracker node all agree. */
.chill-banner {
  border-radius: 10px;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  background: #e3f0fa;
  color: #155d8f;
}
.proc-title-row > .chill-banner {
  flex: 1 1 auto;
  margin-bottom: 0;
  text-align: right;
}
.card--chill {
  border-color: #b9d8ee;
  background: #f7fbfe;
}
.tracker-node--chill .tracker-num {
  border-color: #2a7fb8;
  color: #155d8f;
  box-shadow: 0 0 0 3px #e3f0fa;
}
.tracker-node--chill .tracker-label { color: #155d8f; }

/* ---------- awaiting manager verification: unmistakable ---------- */
/* Bold, warm and bordered — the batch is NOT finished; it awaits review. */
.verify-banner {
  border-radius: 10px;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  background: #fbe2c4;
  color: #8a3c00;
  border: 2px solid #e79a3c;
}
.proc-title-row > .verify-banner {
  flex: 1 1 auto;
  margin-bottom: 0;
  text-align: right;
}

/* ---------- the compact manager verification screen ---------- */
.verify-compact .card { padding: var(--sp-sm); margin-bottom: var(--sp-xs); }
.verify-compact .section-head {
  margin: var(--sp-sm) 0 var(--sp-xs);
  min-height: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 15px;
}
.verify-compact .stat { padding: 2px 0; }
.verify-compact .stat .label { font-size: 14.5px; }  /* 7.4.18: half-step under the 15px value */
.verify-compact .value-text { font-size: 15px; }
.verify-compact .fact-grid { gap: var(--sp-xs) var(--sp-md); margin: 0; }
.verify-compact .fact { padding: 2px 0; }
.verify-compact .fact-value { font-size: 15px; margin-top: 0; }
.verify-compact .tracker { margin-bottom: var(--sp-xs); }
.verify-compact .verif-strip { padding-top: var(--sp-xs); }
.verify-compact .verify-hint {
  margin: 0 0 var(--sp-xs);
  padding: 4px 10px;
  font-size: 14px;
}
.verify-compact .site-head { margin-bottom: var(--sp-sm); }
.verify-compact .foot { margin-top: var(--sp-sm); }
.verify-compact .empty { font-size: 14px; }

/* one row per verification action: note beside its button, no giant gaps */
.verify-row {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}
.verify-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  text-align: right;
}
.verify-row input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
.verify-row .btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 42px;
  margin: 0;
  padding: 6px 14px;
  font-size: 15px;
}
@media (max-width: 430px) {
  /* a phone stacks the row rather than squeezing the button label */
  .verify-row { flex-wrap: wrap; }
  .verify-row .btn { flex: 1 1 100%; }
}

/* ======================================================================== */
/* Package 7.4.17 (block 2) — ONE semantic state-colour system.             */
/* amber = cooking active · blue = blast chill active · soft red = worker   */
/* done, manager verification still required · green = valid/verified ·     */
/* grey = future/inactive. One family, reused — never one-off inline colours.*/
/* ======================================================================== */

:root {
  --state-cook-bg: #fdf3e1;
  --state-cook-ink: #8a5a12;
  --state-cook-line: #e8c88a;
  --state-chill-bg: #e3f0fa;
  --state-chill-ink: #155d8f;
  --state-chill-line: #b9d8ee;
  --state-verify-bg: #fdeeee;
  --state-verify-ink: #9b2c2c;
  --state-verify-line: #e8b4b4;
  --state-ok-bg: #e8f3ee;
  --state-ok-ink: var(--brand-dark);
}

/* ---------- the canonical state banner ---------- */
/* Full-width, centred, one modifier per phase. Replaces the per-package
   one-off banners (chill-banner / verify-banner stay only as legacy CSS). */
.state-banner {
  border-radius: 10px;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.state-banner--cook { background: var(--state-cook-bg); color: var(--state-cook-ink); }
.state-banner--chill { background: var(--state-chill-bg); color: var(--state-chill-ink); }
.state-banner--verify {
  background: var(--state-verify-bg);
  color: var(--state-verify-ink);
  border: 2px solid var(--state-verify-line);
}
.state-banner--done { background: var(--state-ok-bg); color: var(--state-ok-ink); }

/* ---------- tracker phase colours ---------- */
/* completed = green (existing --done rules) · future = neutral (existing
   default) · the ACTIVE node wears its phase colour: */
.tracker-node--cook .tracker-num {
  border-color: #c9821a;
  color: var(--state-cook-ink);
  box-shadow: 0 0 0 3px var(--state-cook-bg);
}
.tracker-node--cook .tracker-label { color: var(--state-cook-ink); font-weight: 600; }
/* (tracker-node--chill blue rules exist since 7.4.16 and stay canonical) */

/* ---------- green "תקין" everywhere the result chip appears ---------- */
.badge-ok { background: var(--state-ok-bg); color: var(--state-ok-ink); }
/* .pill-ok already carries the same green family — unchanged. */

/* ---------- worker action hierarchy: the heading leads ---------- */
.ccp-identity { font-size: 18px; }

/* ======================================================================== */
/* Package 7.4.17 (block 3) — pending-verification card + manager entry.    */
/* The soft-red "manager action required" language (block 2) now connects   */
/* the worker-board pending card to the manager verification page.          */
/* ======================================================================== */

/* one pending batch awaiting Ziv: soft red accent, never an alarm */
.pending-row--verify {
  border-right: 4px solid var(--state-verify-line);
  background: var(--state-verify-bg);
  border-radius: 10px;
  padding-right: var(--sp-sm);
  padding-left: var(--sp-sm);
}
.ccp-pending .pending-row--verify {
  border-bottom: 0;
  margin-bottom: var(--sp-xs);
}

/* metadata as an intentional vertical unit: date, the time directly under
   it, then performer — label and value together on each line */
.pending-meta-block { margin: var(--sp-xs) 0; }
.pending-meta-line {
  padding: 1px 0;
  font-size: 15px;
}
.pending-meta-line .bilingual--inline { font-weight: 600; }

/* the manager-only button joins the verify family (was leftover brown) */
.btn-verify {
  background: var(--state-verify-ink);
  border-color: var(--state-verify-ink);
}
.btn-verify:active { background: #7c2222; }

/* ======================================================================== */
/* Package 7.4.19 — daily temperature control.                              */
/* One screen, all cooling units; each card states the rule it is judged   */
/* by, the live chip mirrors the SERVER's inclusive classification, and    */
/* the description field opens only when a reading is out of range.        */
/* ======================================================================== */

.temp-units { display: grid; gap: var(--sp-sm); }

.temp-unit {
  border: 1px solid var(--line, #dfe3e0);
  border-radius: 10px;
  padding: var(--sp-sm);
  background: #fff;
}

.temp-unit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
}
.temp-unit-head .check-he { font-weight: 700; }

.temp-type { white-space: nowrap; }

/* the rule line follows the 7.4.18 microcopy standard: 14px, breathing */
.temp-rule {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted-ink, #5c6660);
  margin: 4px 0 var(--sp-xs);
}
.temp-rule-sep { opacity: .6; padding: 0 2px; }

.temp-measure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-sm);
}
.temp-measure .temp-label { margin: 0; }

.temp-input {
  width: 7.5rem;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  direction: ltr;
}

/* the live judgement chip: empty until a parseable number exists */
.temp-chip {
  display: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.temp-chip-ok {
  display: inline-block;
  background: var(--state-ok-bg, #e8f3ee);
  color: var(--state-ok-ink, #1e6b47);
}
.temp-chip-out {
  display: inline-block;
  background: var(--danger-bg, #fdecec);
  color: var(--danger-ink, #a12020);
}

/* the description field: hidden until a reading is out of range (or the
   worker already typed a note that must survive a validation re-render) */
.temp-note { display: none; margin-top: var(--sp-xs); }
.temp-note.temp-note-open { display: block; }
.temp-note label {
  font-size: 14px;
  line-height: 1.4;
}

/* read-only record rows (worker summary + manager detail) */
.temp-read {
  border-bottom: 1px solid var(--line, #eceeec);
  padding: var(--sp-xs) 0;
}
.temp-read:last-child { border-bottom: 0; }
.temp-read .temp-chip { display: inline-block; }
.temp-read-vals {
  font-size: 15px;
  line-height: 1.45;
  margin-top: 2px;
}
.temp-read-note {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted-ink, #5c6660);
  margin-top: 2px;
}


/* ======================================================================== */
/* Package 7.4.21 — main-board heading alignment + restroom result cards.   */
/* ======================================================================== */

/* the canonical section rubric is now visually balanced: content centered,
   the tone accent stays on the right-hand rule (RTL) exactly as before */
.section-head {
  justify-content: center;
  text-align: center;
}

/* worker page identity (form title under the Kube Habait header) is
   centered. Scoped: manager pages (body.manager) and the /actions header
   (its own .head-brand/.head-row layout) are untouched. */
body:not(.manager) .site-head:not(.site-head--actions) {
  text-align: center;
}

/* the two mutually-exclusive result cards: horizontal on wide screens,
   stacked on narrow — the same tap-target family as the checklist items */
.choice-result .result-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.result-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.result-card .check-labels { flex: 1 1 auto; min-width: 0; }

/* the round single-select mark: empty until chosen, filled ✓ when chosen */
.result-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: transparent;
}
.result-mark::after { content: "\2713"; }

@media (max-width: 480px) {
  .choice-result .result-cards { flex-direction: column; }
}


/* ======================================================================== */
/* Block C — compact temperature worker cards (ships with Block D deploy).  */
/* Quick buttons reuse the shared .quick-row/.quick-btn family; green on a  */
/* button means SELECTED (same as CCP), the neutral filled accent means     */
/* only "a measurement was entered" — range semantics stay off this screen. */
/* ======================================================================== */

.temp-unit { padding: 10px 12px; }

.temp-quick { margin: 8px 0 6px; }

.temp-measure { gap: 8px; }
.temp-measure .temp-label {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.temp-input { width: 6.5rem; font-size: 20px; }

/* filled/unfilled at a glance — NEUTRAL accent (not the ok-green family) */
.temp-done {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: transparent;
  background: #fff;
}
.temp-unit.temp-filled {
  border-color: #7f8c99;
  background: #f5f7f9;
}
.temp-unit.temp-filled .temp-done {
  border-color: #7f8c99;
  background: #7f8c99;
  color: #fff;
}

/* the compact orientation line — one small muted row, never a panel */
.temp-progress {
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 var(--sp-xs);
}
.temp-progress .temp-count { font-weight: 700; }

/* wide screens: two unit cards per row, quick rows stay readable */
@media (min-width: 720px) {
  .temp-units { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .temp-units.temp-units-summary { grid-template-columns: 1fr; }
}


/* ======================================================================== */
/* Package 7.4.23 — worker-form visual hierarchy.                           */
/*                                                                          */
/* ONE canonical language for every worker form (SSOP will reuse it):       */
/*   form title    = centered under the brand (the 7.4.21 site-head rule);  */
/*   field heading = the 7.4.12 green rubric (.field label / .field-label   */
/*                   / .field-heading) — "what this field IS";              */
/*   value/option  = normal ink — "what the worker SELECTS/ENTERS".         */
/* The rules below CARVE CONTROL LABELS OUT of the green heading rule: a    */
/* label the worker taps as a choice is content, not a heading. Status      */
/* colors (pills, selected surfaces, state accents) stay semantic.          */
/* ======================================================================== */

/* control labels are values, not headings: normal ink, no heading accent */
.field label.check-item,
.field label.result-card,
.temp-measure .temp-label {
  color: var(--ink);
  letter-spacing: normal;
}
/* only the plain-text action label loses the accent this way; CARD controls
   own a complete border of their own (see Package 7.4.27) */
.temp-measure .temp-label {
  border-right: 0;
  padding-right: 0;
}
.field label.result-card { font-size: 17px; }
/* "הזנה ידנית" is an ACTION the worker can take, never a field heading */
.temp-measure .temp-label { font-weight: 600; }

/* the checklist section heading joins the canonical green rubric —
   HE and AR with identical treatment (worker parity rule) */
.checklist-title,
.checklist-title-ar {
  color: var(--brand-dark, var(--brand));
}

/* unit/section heading INSIDE a card (temperature units today, SSOP
   sections tomorrow): compact green heading, both languages equal — the
   card border stays neutral, the accent never dominates */
.unit-title .check-he,
.unit-title .check-ar {
  color: var(--brand-dark, var(--brand));
  font-weight: 700;
}

/* ======================================================================== */
/* Package 7.4.24 — worker form title: geometric centering.                 */
/* Root cause: .bilingual--stacked declares text-align:right on itself,     */
/* which beats the INHERITED center from the 7.4.21 site-head rule, and as  */
/* a block-level flex column its stretched children hug the right edge.     */
/* Fixed once at the shared primitive: inside a worker form's site-head     */
/* subtitle, the title block centers itself and both language lines. No     */
/* absolute positioning, no pixel offsets; /actions and manager pages are   */
/* outside the selector exactly as in 7.4.21.                               */
/* ======================================================================== */
body:not(.manager) .site-head:not(.site-head--actions) .sub .bilingual--stacked {
  text-align: center;
  align-items: center;
}

/* ======================================================================== */
/* Package 7.4.25 — SSOP daily sanitation checklist.                        */
/* A mobile checklist, never the paper's wide table: green section          */
/* headings (the canonical rubric), black item text and cleaning            */
/* instructions, and a deficiency field that appears only on a failed row   */
/* of an issue submission.                                                  */
/* ======================================================================== */

.ssop-section { margin-bottom: var(--sp-md); }
.ssop-section .checklist-head { margin-bottom: var(--sp-xs); }

/* the cleaning instruction: content, not a heading — normal ink, compact */
.ssop-instruction {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted-ink, #5c6660);
}
.ssop-instruction .bilingual--stacked { gap: 0; }

.ssop-item { margin-bottom: 10px; }
.ssop-item .check-item { margin-bottom: 0; }

/* a failed row of an issue submission: soft warn accent, never alarm red */
.ssop-item-failed .check-item {
  border-color: #c9821a;
  background: var(--warn-bg);
}

/* the paper's per-row "תיאור הליקוי" */
.ssop-defect {
  display: none;
  margin: var(--sp-xs) 0 0;
  padding-right: var(--sp-sm);
  border-right: 3px solid #c9821a;
}
.ssop-defect.ssop-defect-open { display: block; }
.ssop-defect label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}
.ssop-defect textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 17px;
  font-family: inherit;
  text-align: right;
  resize: vertical;
}

/* read-only record rows (worker summary + manager detail) */
.ssop-read {
  border-bottom: 1px solid var(--line, #eceeec);
  padding: var(--sp-xs) 0;
}
.ssop-read:last-child { border-bottom: 0; }
.ssop-read-defect {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted-ink, #5c6660);
  margin-top: 2px;
}

/* ======================================================================== */
/* Package 7.4.26 — mobile form polish (shared control-card corrections).   */
/*                                                                          */
/* Two cascade defects, fixed once at the shared primitives:                */
/* 1. The 7.4.23 control-label carve-out zeroed padding-right on tappable   */
/*    cards to strip the heading accent — but that also erased the cards'   */
/*    OWN right padding, so in RTL the control hugged the right border      */
/*    ("clipped" cards). Each control restores its own symmetric padding.   */
/* 2. `.field label` (display:block, specificity 0,1,1) silently beat      */
/*    `.result-card` (display:flex, 0,1,0), stacking the mark above the     */
/*    text. The result card now declares its row layout at carve-out        */
/*    specificity — [control] [HE+AR text block] on ONE visual row, the     */
/*    same structure as a checklist card.                                   */
/* ======================================================================== */

.field label.check-item { padding: 12px 14px; }

.field label.result-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0;
}

/* the two result rows: side-by-side where comfortable, and the gap doubles
   as the spacing between them when they stack on phones */
.choice-result .result-cards {
  gap: 10px;
  margin-bottom: var(--sp-md);   /* clear separation before סיום ושליחה */
}

/* ======================================================================== */
/* Package 7.4.26 — professional SSOP form identity.                        */
/* The small English expansion line under the bilingual title; centered by  */
/* the same worker site-head rules, LTR because it is English.              */
/* ======================================================================== */
.site-head .sub-en {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  direction: ltr;
}


/* ======================================================================== */
/* Package 7.4.27 — card controls own a COMPLETE border.                    */
/*                                                                          */
/* FINAL root cause of the "right edge swallowed" screenshots: the 7.4.23   */
/* carve-out zeroed border-right on .check-item/.result-card to strip the   */
/* green heading accent of `.field label` — but those controls are CARDS    */
/* with their own full border, so the rule deleted the card's real right    */
/* border while left/top/bottom and the radius survived. Block G restored   */
/* padding and layout but not the border. Here each card re-declares its    */
/* OWN full border at carve-out specificity, and every state re-asserts     */
/* its color at equal-or-higher specificity AFTER these rules, so the       */
/* border closes on BOTH sides in every state. No pseudo-element and no     */
/* accent replaces the closing border.                                      */
/* ======================================================================== */

.field label.check-item { border: 2px solid #c9d4cf; }
.field label.check-item.check-item-on {
  border-color: var(--brand-dark);
}
.field label.result-card { border: 2px solid var(--line); }
/* the SSOP defect state (amber) re-asserted after the full-border rule */
.ssop-item-failed label.check-item {
  border-color: #c9821a;
  background: var(--warn-bg);
}
/* the :checked result states (specificity 1,2,1) already outrank these. */

/* ======================================================================== */
/* Package 7.4.27 — SSOP defect-first rows.                                 */
/* Three states: neutral (undecided — defect area OPEN, calm), satisfactory */
/* (checked — defect area collapsed), defect (unchecked + text — amber).    */
/* The defect area is NOT alarming while merely undecided.                  */
/* ======================================================================== */

/* neutral defect area: quiet rubric, no warning color until a defect exists */
.ssop-defect {
  border-right-color: var(--line);
}
.ssop-item-failed .ssop-defect {
  border-right-color: #c9821a;
}

/* the per-row "cannot mark satisfactory while a defect is recorded" note */
.ssop-keep-note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--warn-ink);
}
.ssop-keep-note[hidden] { display: none; }

/* ======================================================================== */
/* Package 7.4.27 — compact /actions board cards (status + next action).    */
/* ======================================================================== */

/* the mini four-stage tracker: 1✓ 2✓ 3● 4○ + the current stage name */
.mini-tracker { margin: var(--sp-xs) 0; }
.mini-steps {
  display: flex;
  gap: 12px;
  direction: rtl;               /* stage 1 right-most, like the full tracker */
  align-items: center;
}
.mini-step {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.mini-step--done { color: var(--brand-dark); }
.mini-step--current { color: var(--brand-dark); }
.mini-step--current.mini-step--chill { color: #1565c0; }
.mini-step--cook { color: var(--warn-ink); }
.mini-current {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
}

/* compact pending-verification row: one line of context + a small button */
.pending-row--verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-sm);
}
.pending-row--verify .pending-main { flex: 1 1 240px; min-width: 0; }
.pending-compact-meta {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 2px;
}
.btn-verify--compact {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 15px;
}

/* ======================================================================== */
/* Package 7.4.28 — CCP daily batch identity + SSOP mark-all convenience.   */
/* ======================================================================== */

/* 7.4.29: THE batch title. Once a CCP process starts, its final-filling
   identity + daily number IS the primary operational name of that batch —
   dark brand-brown, bold, clearly distinct from the green field-heading
   language and from every state color. HE/AR equal hierarchy (the color
   and weight inherit into both bilingual lines). Scoped: only the batch
   component wears it — no generic heading turns brown. */
.process-batch-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--batch-ink);
  margin: 2px 0 4px;
}
.process-batch-title--manager {
  text-align: center;
  font-size: 18px;
  margin: 0 0 var(--sp-sm);
}
/* on the full process page the title rides the centered .sub line — the
   batch color and weight still win over the muted subtitle style */
.site-head .sub.process-batch-title {
  color: var(--batch-ink);
  font-weight: 700;
  font-size: 17px;
}

/* the SSOP bulk-confirm convenience: secondary, never louder than submit */
.ssop-mark-all-wrap { margin: var(--sp-sm) 0 var(--sp-md); }
.ssop-mark-all { width: 100%; }


/* ======================================================================== */
/* Package 7.4.30 — product-color batch identity.                           */
/* The modifier colors ONLY the batch title component; status pills,        */
/* tracker stages and every other heading keep their own semantics.         */
/* ======================================================================== */
.process-batch-title.batch-product--habait-siska { color: var(--product-habait-siska); }
.process-batch-title.batch-product--habait-ground { color: var(--product-habait-ground); }
.process-batch-title.batch-product--habait-veg { color: var(--product-habait-veg); }
.process-batch-title.batch-product--ruby-siska { color: var(--product-ruby-siska); }
.process-batch-title.batch-product--ruby-ground { color: var(--product-ruby-ground); }
/* the process page's .sub variant must win over the muted subtitle color */
.site-head .sub.process-batch-title.batch-product--habait-siska { color: var(--product-habait-siska); }
.site-head .sub.process-batch-title.batch-product--habait-ground { color: var(--product-habait-ground); }
.site-head .sub.process-batch-title.batch-product--habait-veg { color: var(--product-habait-veg); }
.site-head .sub.process-batch-title.batch-product--ruby-siska { color: var(--product-ruby-siska); }
.site-head .sub.process-batch-title.batch-product--ruby-ground { color: var(--product-ruby-ground); }

/* ======================================================================== */
/* Package 7.4.31 (Block L) — gastronorm allocation (worker process page).  */
/* The yes/no options reuse the .result-card control family, so the 7.4.23  */
/* carve-out (ink color) and the 7.4.27 full-border rule apply unchanged;   */
/* only the checked state is new, scoped to .gastro-choices.                */
/* ======================================================================== */
.gastro-choices {
  display: flex;
  gap: 10px;
}
.gastro-choices .result-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.gastro-choices .result-card:has(input:checked) {
  border-color: var(--brand-dark);
  background: #eef7f2;
}
.gastro-choices .result-card:has(input:checked) .result-mark {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}
.gastro-choices .result-card:has(input:focus-visible) {
  outline: 3px solid #9fc5b5;
  outline-offset: 2px;
}
/* JS hides the last-container questions; a display rule on .field must     */
/* never resurrect a [hidden] block (the 7.4.26 cascade lesson)             */
.gastro-form [hidden] { display: none !important; }
.gastro-summary .gastro-summary-line {
  font-weight: 600;
  margin: 6px 0 10px;
}
.gastro-summary .gastro-edit { width: auto; }