/* ==========================================================================
   Armonia Console — internal business management. RTL Hebrew, desktop-first.

   The one idea: colour means deal state, and nothing else.
   יאיר already reads his calendar by colour — 🟡 בשיחות · 🟢 סגור · 🔴 בוטל.
   Every event row carries that colour as a leading edge, so the table scans
   the way the calendar does. Everything else stays near-monochrome, which is
   what makes the colour readable at a glance.

   Palette is the bar's own: bottle-glass ink, warm paper, brass for anything
   you can click. No colour is decorative.
   ========================================================================== */

:root {
  --ink:        #14181A;   /* bottle glass — sidebar, headings */
  --ink-soft:   #1E2427;   /* raised surface inside the sidebar */
  --paper:      #F7F6F3;   /* the page */
  --surface:    #FFFFFF;   /* tables and cards */
  --rule:       #E2E0DB;   /* hairlines */
  --text:       #14181A;
  --muted:      #6B6F72;   /* secondary text, column headers */
  --brass:      #B08D57;   /* interaction only: links, focus, active nav */
  --brass-soft: #F0E7D9;

  /* deal_state — the owners' calendar language, used verbatim */
  --talks:      #E8A92E;
  --closed:     #2F9E44;
  --cancelled:  #E03131;
  --none:       #C9C6C0;   /* uncoloured in the calendar = not yet marked */

  --nav-w: 232px;
  --pad: 22px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Heebo", -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* columns of numbers must line up */
}

h1, h2, h3 { margin: 0; font-weight: 700; }

/* Screen titles carry a Hebrew serif — the one place the console has a voice. */
.screen-title {
  font-family: "Frank Ruhl Libre", "Heebo", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.01em;
}

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── shell ───────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;   /* RTL: first column sits right */
  min-height: 100vh;
}

.nav {
  background: var(--ink);
  color: #EDEBE7;
  display: flex;
  flex-direction: column;
  padding: 20px 0 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.nav-brand {
  padding: 0 var(--pad) 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-brand .mark {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
}
.nav-brand .sub {
  color: #8A9095;
  font-size: 11.5px;
  letter-spacing: .06em;
  margin-top: 2px;
}

.nav-list { padding: 14px 10px; flex: 1; display: flex; flex-direction: column; gap: 1px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: #C6CACD;
  font-size: 14.5px;
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: start;
  font-family: inherit;
}
.nav-link:hover { background: var(--ink-soft); color: #EDEBE7; text-decoration: none; }
.nav-link[aria-current="page"] {
  background: var(--ink-soft);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--brass);   /* physical right edge in RTL */
}
.nav-link .ico { width: 18px; text-align: center; opacity: .85; }
.nav-link.soon { opacity: .38; cursor: default; }
.nav-link.soon:hover { background: none; color: #C6CACD; }

.nav-foot {
  padding: 12px var(--pad) 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-who { font-size: 13px; color: #C6CACD; min-width: 0; }
.nav-who b { display: block; color: #fff; font-weight: 500; }
.nav-who span { font-size: 11.5px; color: #8A9095; }
.nav-out {
  background: none; border: 1px solid rgba(255, 255, 255, .16);
  color: #C6CACD; border-radius: 6px; padding: 5px 9px;
  font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.nav-out:hover { border-color: var(--brass); color: var(--brass); }

/* ── main ────────────────────────────────────────────────────────────────── */

.main { padding: 26px 30px 60px; min-width: 0; }

.head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.head .count {
  color: var(--muted);
  font-size: 13.5px;
}
.head-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }

.tabs { display: flex; gap: 2px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.tab:hover { background: #EFEDE8; color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

/* ── table ───────────────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: auto;
}

table { width: 100%; border-collapse: separate; border-spacing: 0; }

thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  z-index: 2;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }
thead th .arrow { opacity: 0; margin-inline-start: 4px; font-size: 10px; }
thead th[aria-sort] { color: var(--text); }
thead th[aria-sort] .arrow { opacity: 1; }

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
/* Only rows that represent an event are clickable and carry the edge; the
   season summary is a different shape and gets neither. */
tbody tr[data-deal] { cursor: pointer; }
tbody tr[data-deal]:hover td { background: #FAF9F6; }

/* THE SIGNATURE — deal state as a leading edge, matching the calendar colour.
   In RTL the leading edge is the right one, which is where the eye starts.
   Every override below must carry the same `tbody ... td:first-child` shape:
   a shorter selector scores lower and the grey base silently wins. */
tbody tr[data-deal] td:first-child { border-inline-start: 4px solid var(--none); }
tbody tr[data-deal="in_talking"] td:first-child { border-inline-start-color: var(--talks); }
tbody tr[data-deal="closed"]     td:first-child { border-inline-start-color: var(--closed); }
tbody tr[data-deal="cancelled"]  td:first-child { border-inline-start-color: var(--cancelled); }

.c-date  { font-weight: 500; }
.c-dow   { color: var(--muted); font-weight: 400; margin-inline-end: 5px; }
.c-num   { text-align: start; }
.c-muted { color: var(--muted); }
.c-name  { font-weight: 500; white-space: normal; min-width: 150px; }

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 11px;
  font-size: 12px;
  background: #F1EFEA;
  color: var(--muted);
  white-space: nowrap;
}
.chip.tier { background: var(--brass-soft); color: #7A5F33; }

.warn { color: #C2410C; }

/* ── states ──────────────────────────────────────────────────────────────── */

.empty, .loading, .error {
  padding: 46px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; font-weight: 500; }
.error { color: #B02020; border-color: #EBC9C9; background: #FCF6F6; }

/* ── login ───────────────────────────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--ink);
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 34px 32px 28px;
  width: 100%;
  max-width: 348px;
}
.login-card .mark {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: 27px;
  font-weight: 700;
}
.login-card .sub {
  color: var(--muted);
  font-size: 13px;
  margin: 3px 0 26px;
}
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 5px;
}
.field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.field input:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }

.btn {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
}
.btn:hover { background: #232A2D; }
.btn:disabled { opacity: .5; cursor: default; }

.form-error {
  background: #FCF6F6;
  border: 1px solid #EBC9C9;
  color: #B02020;
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.form-error:empty { display: none; }

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; flex-direction: row; align-items: center;
         flex-wrap: wrap; padding: 12px; gap: 8px; }
  .nav-brand { border: 0; padding: 0 8px; }
  .nav-brand .sub { display: none; }
  .nav-list { flex-direction: row; flex-wrap: wrap; padding: 0; flex: 1; }
  .nav-foot { border: 0; padding: 0; }
  .main { padding: 18px 14px 50px; }
  .screen-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── event card ──────────────────────────────────────────────────────────── */

.back {
  display: inline-block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 14px;
}
.back:hover { color: var(--brass); text-decoration: none; }

.card-head {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
  /* the same leading edge the table rows carry — deal state, calendar colours */
  border-inline-start: 4px solid var(--none);
}
.card-head[data-deal="in_talking"] { border-inline-start-color: var(--talks); }
.card-head[data-deal="closed"]     { border-inline-start-color: var(--closed); }
.card-head[data-deal="cancelled"]  { border-inline-start-color: var(--cancelled); }

.card-head .title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.card-head .where { color: var(--muted); font-size: 14px; margin-top: 6px; }
.card-head .eid {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .03em;
  margin-inline-start: auto;
}

.deal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.deal-tag::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--none);
}
.deal-tag[data-deal="in_talking"]::before { background: var(--talks); }
.deal-tag[data-deal="closed"]::before     { background: var(--closed); }
.deal-tag[data-deal="cancelled"]::before  { background: var(--cancelled); }

.flag {
  background: #FDF6EC;
  border: 1px solid #EBD9BC;
  color: #8A5A12;
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 4px 18px 12px;
}
.panel h2 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 14px 0 8px;
}

.dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.dl dt {
  color: var(--muted);
  font-size: 13.5px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
.dl dd {
  margin: 0;
  padding: 8px 0;
  text-align: end;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.dl dt:first-of-type, .dl dd:first-of-type { border-top: 0; }
.dl dd.big { font-size: 15px; font-weight: 500; }
.dl dd .note { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

.section { margin-bottom: 16px; }
.section h2 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 8px;
}
.section ul { margin: 0; padding: 0; list-style: none; }
.section li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 9px 14px;
  margin-bottom: 6px;
  font-size: 14px;
}
.section li .tag { color: var(--muted); font-size: 12.5px; margin-inline-start: 6px; }

.pending-note { color: var(--muted); font-size: 13px; }

@media (max-width: 860px) {
  .panels { grid-template-columns: 1fr; }
}

/* A cancelled or postponed event, reached by direct link — it is not in any list. */
.dead {
  background: #FCF0F0;
  border: 1px solid #EFC9C9;
  color: #A32020;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* ── inventory ───────────────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.search {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  min-width: 240px;
}
.search:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.result-count { color: var(--muted); font-size: 13px; }

/* facts that head a screen — snapshot date, stock value, window dates */
.meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 18px;
}
.meta b { color: var(--text); font-weight: 500; }

/* stock levels: zero is a hole, low is a number to watch */
.qty-zero { color: #A32020; font-weight: 500; }
.qty-low  { color: #C2410C; font-weight: 500; }

.subhead {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin: 22px 0 8px;
}
.subhead:first-child { margin-top: 0; }
.subhead .n { color: var(--muted); font-weight: 400; }

.note-line {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 12px;
}

.ok-banner {
  background: #F2F8F3;
  border: 1px solid #CDE5D2;
  color: #24632F;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14.5px;
}

/* coverage: one row per eligibility class, short ones marked */
.cov-ok    { color: var(--closed); }
.cov-short { color: #C2410C; font-weight: 500; }

.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.picker a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--text);
}
.picker a:hover { border-color: var(--brass); text-decoration: none; }
.picker .d { color: var(--muted); font-size: 12.5px; }

/* ── editors (מה לטעון · מפתח כמויות) ───────────────────────────────────── */

.editor {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.erow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px auto;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
}
.erow:last-child { border-bottom: 0; }
.erow:hover { background: #FAF9F6; }
.erow .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.erow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erow .t.dim { opacity: .5; text-decoration: line-through; }
.erow .num { color: var(--muted); font-size: 13px; text-align: start; }
.erow .num b { color: var(--text); font-weight: 500; }

/* state marker: edited by hand, or swapped for another brand */
.dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
.dot.ovr { background: var(--brass); }
.dot.sub { background: var(--talks); }

.short-tag { color: #C2410C; font-size: 12.5px; white-space: nowrap; }

.stepper { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
/* Size the ± buttons ONLY. A bare `.stepper button` rule also caught .linkbtn —
   (0,1,1) beats (0,1,0) — and clamped "החלף" to 30px, clipping it to "החל".
   Anything else living in the stepper must not inherit this sizing. */
.stepper .minus, .stepper .plus {
  width: 30px; height: 30px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
  color: var(--text);
  font-size: 17px; line-height: 1; font-weight: 500;
  cursor: pointer; font-family: inherit;
  flex: 0 0 auto;
}
.stepper .minus:hover, .stepper .plus:hover { border-color: var(--brass); color: var(--brass); }
.stepper input {
  width: 62px; height: 30px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
  color: var(--text);
  text-align: center;
  font-size: 14px; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.stepper input:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }

.linkbtn {
  border: 0; background: none; padding: 0 6px;
  color: var(--muted); font-size: 12.5px; font-family: inherit; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
.linkbtn:hover { color: var(--brass); text-decoration: underline; }

/* substitution: the choices open under the row that needs them */
.subs { grid-column: 1 / -1; padding: 2px 0 6px; display: none; }
.subs.open { display: block; }
.subs .opt {
  display: inline-block;
  margin: 4px 0 0 6px;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  font-size: 13px;
  cursor: pointer;
}
.subs .opt:hover { border-color: var(--brass); color: var(--brass); }
.subnote { grid-column: 1 / -1; color: var(--talks); font-size: 12.5px; padding: 0 0 4px 15px; }

.cat-sep { height: 7px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.sechdr {
  padding: 11px 16px 7px;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--muted);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* the read-only lines: ice, cups, garnish — no stock to draw them from */
.prep .erow { grid-template-columns: 1fr auto; }
.prep .q { font-weight: 500; }

.actions {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 6px; flex-wrap: wrap;
}
.btn-primary {
  height: 38px; padding: 0 20px;
  border: 0; border-radius: 7px;
  background: var(--ink); color: #fff;
  font-size: 14.5px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.btn-primary:hover { background: #232A2D; }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-ghost {
  height: 38px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--muted);
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.btn-ghost:hover { border-color: #D6A0A0; color: #A32020; }

.saved-flash { color: var(--closed); font-size: 13px; opacity: 0; transition: opacity .15s; }
.saved-flash.on { opacity: 1; }
.saved-flash.err { color: #A32020; }

/* the key is global: one cell moves every event */
.global-warn {
  background: #FDF6EC;
  border: 1px solid #EBD9BC;
  color: #8A5A12;
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.krow { grid-template-columns: minmax(0, 1fr) auto auto; }
.krow .flags { color: var(--muted); font-size: 12px; }
.perg {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.perg input {
  width: 72px; height: 30px; text-align: center;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums;
}
.wine-add { display: flex; gap: 8px; padding: 12px 16px; }
.wine-add input {
  flex: 1; height: 34px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); color: var(--text);
  font-size: 14px; font-family: inherit;
}

@media (max-width: 860px) {
  .erow { grid-template-columns: 1fr auto; row-gap: 6px; }
  .erow .num { grid-column: 1; }
}

/* ── beta sandbox ────────────────────────────────────────────────────────── */

.beta-note {
  background: #F4F1F8;
  border: 1px solid #DCD3E6;
  color: #4A3A63;
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px 20px 20px;
  max-width: 720px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.f { padding: 12px 0 0; }
.f.wide { grid-column: 1 / -1; }
.f label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.f label .req { color: #C2410C; }
.f input, .f select {
  width: 100%; height: 40px; padding: 0 11px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); color: var(--text);
  font-size: 14.5px; font-family: inherit;
}
.f input:focus, .f select:focus {
  outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent;
}
.f input[type=tel] { direction: ltr; text-align: right; }
.f .hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.f .err { color: #A32020; font-size: 12.5px; margin-top: 4px; }
.f.bad input, .f.bad select { border-color: #D89898; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; }
.chip-toggle {
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--paper); color: var(--text);
  padding: 6px 13px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.chip-toggle[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-toggle .eng { opacity: .65; font-size: 11.5px; margin-inline-start: 4px; }

.beta-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 15px 18px;
  margin-bottom: 10px;
  border-inline-start: 4px solid var(--none);
}
.beta-card[data-deal="in_talking"] { border-inline-start-color: var(--talks); }
.beta-card[data-deal="closed"]     { border-inline-start-color: var(--closed); }
.beta-card[data-deal="cancelled"]  { border-inline-start-color: var(--cancelled); }
.beta-card pre {
  margin: 0 0 10px; font-family: inherit; font-size: 13.5px;
  white-space: pre-wrap; line-height: 1.5;
}
.beta-card .row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.beta-card .row-actions a { font-size: 13px; }

.danger {
  border: 1px solid #EFC9C9; background: #FCF6F6;
  border-radius: 8px; padding: 15px 18px; margin-top: 26px;
}
.danger h2 { font-size: 13px; color: #A32020; margin-bottom: 6px; }
.danger p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.danger .wipe-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.danger input {
  height: 36px; padding: 0 11px; width: 160px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); font-size: 14px; font-family: inherit;
}
.btn-danger {
  height: 36px; padding: 0 16px; border: 0; border-radius: 7px;
  background: #A32020; color: #fff;
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.btn-danger:hover { background: #8A1B1B; }
.btn-danger:disabled { opacity: .45; cursor: default; }

@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }

/* ── per-category upgrades (V056) ─────────────────────────────────────────
   The create form stopped being one column of fields the moment the tier
   became a list of choices. Form on the right (RTL first column), the money
   it adds up to on the left, always in view — the owner quotes from it.
   ───────────────────────────────────────────────────────────────────────── */

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 342px; gap: 18px; align-items: start; }
.layout > aside.rail { position: sticky; top: 22px; }
@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .layout > aside.rail { position: static; }
}

/* the form card no longer stands alone, so it loses its own max-width */
.layout .form { max-width: none; margin-bottom: 16px; }

.section-label {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 500; letter-spacing: .05em;
  color: var(--muted);
  padding: 20px 0 2px;
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}
.section-label:first-child { margin-top: 0; border-top: 0; }

/* The base tier is a stated fact now, not a <select>. */
.base-tier {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--brass-soft); border: 1px solid #E3D5BC;
  border-radius: 7px; padding: 10px 13px; margin-top: 4px;
}
.base-tier .lbl { font-size: 14px; font-weight: 500; color: #7A5F33; }
.base-tier .txt { font-size: 12.5px; color: #8A6F42; }

.upg-group {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; margin-bottom: 14px; overflow: hidden;
}
.upg-group > h2 {
  font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted);
  padding: 12px 18px; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.upg-group > h2 .n { float: left; color: var(--brass); font-weight: 500; }

.upg { border-bottom: 1px solid var(--rule); }
.upg:last-child { border-bottom: 0; }
.upg-head {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center; gap: 11px; padding: 11px 18px; cursor: pointer;
}
.upg-head:hover { background: #FAF9F6; }
.upg[data-on="1"] .upg-head { background: #FBF8F2; }
.upg-name { font-size: 14.5px; font-weight: 500; }
.upg-name .eng { opacity: .65; font-size: 11.5px; margin-inline-start: 5px; }
.upg-price-tag { font-size: 13px; color: var(--muted); white-space: nowrap; }
.upg[data-on="1"] .upg-price-tag { color: var(--text); font-weight: 500; }

/* the switch: green means this couple is taking it */
.sw {
  width: 38px; height: 22px; border-radius: 11px;
  background: #D9D6D0; position: relative; transition: background .14s;
  justify-self: start;
}
.sw::after {
  content: ""; position: absolute; top: 2px; inset-inline-end: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .14s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.upg[data-on="1"] .sw { background: var(--closed); }
/* RTL: the knob travels toward the start edge, which is physically leftward */
.upg[data-on="1"] .sw::after { transform: translateX(-16px); }

.upg-body {
  display: none;
  padding: 2px 18px 16px 66px;
  background: #FBF8F2; border-top: 1px solid #EFE9DC;
}
.upg[data-on="1"] .upg-body { display: block; }
.opt-lbl { font-size: 12px; color: var(--muted); margin: 10px 0 6px; }
.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--surface); color: var(--text);
  padding: 6px 13px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.opt:hover { border-color: var(--brass); color: var(--brass); }
.opt[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt .flag { font-size: 11px; opacity: .9; }
.opt-detail { color: var(--muted); font-size: 12.5px; margin-top: 9px; min-height: 18px; }
.opt-detail b { color: var(--text); font-weight: 500; }

/* «הזנה ידנית» — a real field for the replacement product name */
.manual-row, .note-row {
  display: none; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 11px;
  background: var(--surface); border: 1px solid #E3D5BC;
  border-radius: 7px; padding: 10px 12px;
}
.note-row { display: flex; }
.manual-row label, .note-row label {
  font-size: 12.5px; color: #8A6F42; font-weight: 500; white-space: nowrap;
}
.txtin {
  height: 32px; padding: 0 10px; flex: 1; min-width: 150px;
  border: 1px solid #E3D5BC; border-radius: 7px;
  background: var(--paper); color: var(--text);
  font-size: 13.5px; font-family: inherit;
}
.txtin:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.manual-row .dflt { font-size: 11.5px; color: var(--muted); width: 100%; }

.price-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 12px; border-top: 1px dashed #E5DECF;
}
.price-row label { font-size: 12.5px; color: var(--muted); }
.price-row input {
  width: 88px; height: 32px; padding: 0 10px; text-align: center;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums;
}
.price-row input:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.price-row .unit { font-size: 13px; color: var(--muted); }
.price-row .dflt { font-size: 12px; color: var(--muted); margin-inline-start: auto; }

/* bottles + free rows — typed by hand, empty until «+» is pressed */
.bottles, .free { padding: 12px 18px 16px; }
.bottle-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; padding: 6px 0;
}
.free-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.bottle-row .nm, .free-row .nm {
  height: 34px; padding: 0 11px; width: 100%;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); color: var(--text);
  font-size: 14px; font-family: inherit;
}
.free-row .nm { flex: 1; }
.free-row .pr {
  width: 96px; height: 34px; padding: 0 10px; text-align: center;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); font-size: 14px; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.free-row select {
  height: 34px; padding: 0 8px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); font-size: 13px; font-family: inherit;
}
.bottle-row .nm:focus, .free-row .nm:focus, .free-row .pr:focus {
  outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent;
}
.bottle-row .x, .free-row .x {
  border: 0; background: none; color: var(--muted);
  font-size: 17px; cursor: pointer; padding: 0 6px;
}
.bottle-row .x:hover, .free-row .x:hover { color: #A32020; }
.addrow {
  width: 100%; padding: 8px 14px; margin-top: 4px;
  border: 1px dashed var(--rule); border-radius: 7px;
  background: none; color: var(--muted);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.addrow:hover { border-color: var(--brass); color: var(--brass); }

/* the money rail */
.rail .pane {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; padding: 4px 17px 15px;
}
.rail .pane h2 {
  font-size: 12px; font-weight: 500; letter-spacing: .05em;
  color: var(--muted); padding: 14px 0 8px;
}
.rail .dl dt.tot, .rail .dl dd.tot { border-top: 2px solid var(--ink); padding-top: 9px; }
.rail-note { color: #C2410C; font-size: 12.5px; margin-top: 10px; }
.rail-note:empty { display: none; }

/* ── מבנה בר (V057) ───────────────────────────────────────────────────────
   Source first, bars second — because across the owner's real briefs the
   answer is a named bar only about a third of the time.
   ───────────────────────────────────────────────────────────────────────── */

.barplan { padding: 14px 18px 16px; }
.bar-src { margin-bottom: 4px; }
.bar-src > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

.bar-row {
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); padding: 11px 13px; margin-top: 10px;
}
.bar-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bar-line select {
  height: 34px; padding: 0 10px; min-width: 150px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-family: inherit;
}
.bar-line .m {
  width: 74px; height: 34px; padding: 0 8px; text-align: center;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums;
}
.bar-line select:focus, .bar-line .m:focus {
  outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent;
}
.bar-line .mlab { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bar-line .x {
  margin-inline-start: auto;
  border: 0; background: none; color: var(--muted);
  font-size: 17px; cursor: pointer; padding: 0 6px;
}
.bar-line .x:hover { color: #A32020; }

.bar-desc { color: var(--muted); font-size: 12.5px; margin-top: 7px; }
.bar-desc:empty { display: none; }

.bar-360 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.bar-360 .chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.bar-360 .chk input { width: 15px; height: 15px; accent-color: var(--closed); cursor: pointer; }
.bar-360 .p360 {
  width: 88px; height: 30px; padding: 0 8px; text-align: center;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums;
}
.bar-360 .unit { font-size: 12.5px; color: var(--muted); }
/* A bar that cannot be built as a 360° says so, rather than offering a
   checkbox the server would then refuse. */
.bar-360 .no360 { font-size: 12.5px; color: var(--muted); }

.upg-group > h2 .n { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* colour pickers — one per colour column of «טבלת ברים» */
.bar-colors { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.bar-color { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bar-color > label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bar-color select {
  height: 32px; padding: 0 9px; max-width: 220px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-size: 13.5px; font-family: inherit;
}
.bar-color select:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.bar-color .other { height: 32px; max-width: 170px; flex: 0 1 170px; }
/* A bar with a single listed colour shows it, rather than a dropdown of one. */
.bar-color .one { font-size: 13.5px; color: var(--text); }

/* ── צוות (V059) ──────────────────────────────────────────────────────────
   The team follows the guest count until the owner edits it. The total is
   money the COUPLE brings on the day, not Armonia's — it sits below the rule
   in the rail so it can never read as part of the deal.
   ───────────────────────────────────────────────────────────────────────── */

.staffbox { padding: 14px 18px 16px; }
.staff-auto { font-size: 12.5px; color: var(--muted); margin-bottom: 11px; }
.staff-auto b { color: var(--text); font-weight: 500; }

.staff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.staff-grid label { display: block; font-size: 12px; color: var(--muted); }
.staff-grid input {
  width: 100%; height: 34px; margin-top: 5px; padding: 0 9px; text-align: center;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); color: var(--text);
  font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums;
}
.staff-grid input:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
@media (max-width: 720px) { .staff-grid { grid-template-columns: 1fr 1fr; } }

.staff-total {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 12px; border-top: 1px dashed #E5DECF;
}
.staff-total label { font-size: 12.5px; color: var(--muted); }
.staff-total .tot {
  width: 110px; height: 34px; padding: 0 9px; text-align: center;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 500; font-family: inherit; font-variant-numeric: tabular-nums;
}
.staff-total .tot:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.staff-total .unit { font-size: 13px; color: var(--muted); }

.staff-pay { margin-top: 13px; }
.staff-pay > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

.staff-note {
  margin-top: 12px; padding: 9px 11px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 7px;
  color: var(--muted); font-size: 12.5px;
}

/* the rail: staff money sits apart from the deal it is not part of */
.rail .dl dt.aside, .rail .dl dd.aside {
  border-top: 1px solid var(--rule); margin-top: 6px;
  color: var(--muted); padding-top: 9px;
}
.rail .dl dd.aside { font-weight: 500; }
/* the fixed rates explain the total; they are never fields */
.staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.staff-total .calc { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Links inside the card brief. Long Google URLs must wrap rather than push the
   card sideways — `anywhere` breaks mid-token, which `break-word` will not. */
.beta-card pre { overflow-wrap: anywhere; }
.beta-card pre a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.beta-card pre a:hover { color: #8F6F3E; }

/* הערות נוספות — free text that reaches the calendar description */
.notesbox { padding: 14px 18px 16px; }
.notesbox textarea {
  width: 100%; min-height: 84px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); color: var(--text);
  font-size: 14px; font-family: inherit; line-height: 1.5;
}
.notesbox textarea:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.notesbox .hint { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* what one guest costs, all in — set apart from the running list above it */
.rail .dl dt.perguest, .rail .dl dd.perguest {
  border-top: 1px solid var(--ink); padding-top: 9px; color: var(--text);
}
.rail .dl dd.perguest { font-size: 15px; font-weight: 500; }

/* a validation event sharing the real lists — unmistakable, not decorative */
tbody .sbx { font-size: 12.5px; opacity: .95; }
tbody tr:has(.sbx) { background: #FBF9FD; }

/* ==========================================================================
   Phones — where desktop-first stops being true.

   The console was drawn for a desk, and it still is: nothing below removes a
   number, a control or a colour that the wide layout shows. What changes is
   only how it is arranged once the screen is a hand's width — the nav stops
   eating a third of it, the load list spells its product names out, the events
   table becomes one card per event, and everything you tap is thumb-sized.
   ========================================================================== */

/* ── the nav is a strip, not a stack ─────────────────────────────────────── */

@media (max-width: 860px) {
  /* The sidebar already collapsed to a row here, but `.nav-link { width: 100% }`
     survived the collapse, so four links took four lines — 330px of black
     before the first event on a 844px screen. They sit on one line now and
     scroll sideways if they must; the brand and the signed-in owner keep the
     line above. */
  /* A row of nowrap links has a min-content width of its own — 453px — and both
     the grid track and the flex item would rather widen than let it scroll,
     which drags the whole page 87px past the viewport. Both need permission to
     be narrower than their contents before the scroller can do its job. */
  /* Stacked, the shell's two rows are auto-sized inside a 100vh minimum, so on
     a short screen they split the leftover height between them — which is why
     the nav grew to 325px on the events list and stayed 112px on a long card.
     The rows sit at the top and keep their own height; body already paints the
     paper below them. */
  .shell { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .nav { padding: 10px 12px; gap: 8px 10px; min-width: 0; }
  .nav-brand { flex: 0 0 auto; }
  .nav-foot  { flex: 0 0 auto; margin-inline-start: auto; }

  .nav-list {
    order: 3;             /* below the brand line, whatever the source order */
    flex: 1 0 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0;
    gap: 4px;
    scrollbar-width: none;
  }
  .nav-list::-webkit-scrollbar { display: none; }

  .nav-link {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
    padding: 0 13px;
  }
  /* the brass edge is the bottom of the pill once the nav runs horizontally —
     an inline-start edge on a horizontal strip reads as a divider, not a mark */
  .nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brass); }
}

/* ── touch sizing ────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* iOS Safari zooms the page whenever a focused field is under 16px. On the
     load list that means the screen jumps on every quantity edit, which is the
     one screen most likely to be used standing in the warehouse. 16px here is
     a floor, not a preference. */
  .field input, .search, .stepper input, .perg input, .wine-add input,
  .f input, .f select, .danger input, .price-row input,
  .free-row .pr, .free-row select, .free-row .nm, .bottle-row .nm, .txtin,
  .bar-line select, .bar-line .m, .bar-color select, .bar-color .other,
  .staff-grid input, .staff-total .tot, .notesbox textarea { font-size: 16px; }

  /* Every control below measured 19–36px tall. A thumb needs about 44. */
  .tab { min-height: 44px; padding: 0 14px; }
  .nav-out { min-height: 40px; padding: 0 12px; }
  .back { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 8px; }
  .linkbtn { min-height: 40px; padding: 0 10px; }
  .stepper .minus, .stepper .plus { width: 40px; height: 40px; }
  .stepper input { width: 68px; height: 40px; }
  .f input, .f select { height: 44px; }
  .search, .perg input, .wine-add input, .danger input, .price-row input,
  .free-row .pr, .free-row select, .free-row .nm, .bottle-row .nm, .txtin,
  .bar-line select, .bar-line .m, .bar-color select, .bar-color .other,
  .staff-grid input, .staff-total .tot { height: 40px; }
  .bar-360 .chk input { width: 20px; height: 20px; }
  .subs .opt { padding: 9px 13px; }
  .chip-toggle { padding: 10px 14px; }
  .btn-primary, .btn-ghost, .btn-danger { height: 44px; }
}

/* ── the load list, and the key it is computed from ──────────────────────── */

@media (max-width: 860px) {
  /* The name is the whole point of a load list, so it wraps rather than
     truncating: "ג׳ק…" does not tell anyone which bottle goes on the van. */
  .erow { row-gap: 7px; padding: 11px 14px; }
  .erow .nm { flex-wrap: wrap; align-items: baseline; }
  .erow .t { white-space: normal; overflow: visible; text-overflow: clip; }

  /* …which only helps if there is width to wrap into. A row carrying both
     החלף and אוטומטי makes the controls column ~290px wide, and the name is
     left with what remains — "ג׳ק דניאלס 700" broken over three lines. The
     controls take a line of their own instead, and the name takes the row. */
  .erow .stepper {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-end;   /* controls stay on the far side, as on the desktop */
  }

  /* מפתח כמויות: the name and its flags stack, the field keeps the far side */
  .krow .flags { grid-column: 1; }
  .krow .stepper {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
}

/* ── the events table becomes one card per event ─────────────────────────── */

@media (max-width: 640px) {
  /* Seven columns measure 697px. In a 360px card that hides four of them behind
     a sideways scroll with nothing to say it is there — and the hidden four are
     אורחים · תפריט · עסקה · יתרה, which is most of why anyone opens this on a
     phone. Same markup, same sort, laid out as a card:

         │ ה׳ 14 במאי                    ₪18,500
         │ משפחת כהן ולוי
         │ מגדים אירועים · 320 אורחים · פרימיום · סגור

     Only the events table takes this; עונה is a summary of five short columns
     and still reads as a table. */
  .cards table, .cards tbody, .cards tr, .cards td { display: block; }
  .cards thead { display: none; }

  .cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
  }
  .cards tbody tr:last-child { border-bottom: 0; }
  .cards tbody tr[data-deal]:hover { background: #FAF9F6; }
  .cards td { padding: 0; border: 0; white-space: nowrap; }

  /* The leading edge moves off the first cell and onto the whole card. Both
     halves are needed: the base grey edge is a `td:first-child` rule, and a
     shorter selector would lose to it. */
  .cards tbody tr[data-deal] { border-inline-start: 4px solid var(--none); }
  .cards tbody tr[data-deal="in_talking"] { border-inline-start-color: var(--talks); }
  .cards tbody tr[data-deal="closed"]     { border-inline-start-color: var(--closed); }
  .cards tbody tr[data-deal="cancelled"]  { border-inline-start-color: var(--cancelled); }
  .cards tbody tr[data-deal] td:first-child { border-inline-start: 0; }

  .cards td[data-col="date"]        { order: 1; font-weight: 500; }
  .cards td[data-col="outstanding"] { order: 2; margin-inline-start: auto; }
  .cards td[data-col="couple"]      { order: 3; flex: 1 0 100%; font-size: 15px; white-space: normal; }
  .cards td[data-col="venue"]       { order: 4; }
  .cards td[data-col="guests"]      { order: 5; }
  .cards td[data-col="tier"]        { order: 6; }
  .cards td[data-col="deal_state"]  { order: 7; }
  .cards td[data-col="venue"], .cards td[data-col="guests"],
  .cards td[data-col="deal_state"] { color: var(--muted); font-size: 13px; }

  /* the column header carried the unit; on a card the number has to say it */
  .cards td[data-col="guests"]:not(:empty)::after { content: " אורחים"; }
  .cards td[data-col="guests"]::before,
  .cards td[data-col="tier"]::before,
  .cards td[data-col="deal_state"]::before { content: "· "; color: var(--rule); }

  /* the sandbox tint is on the row, and the row is the card now */
  .cards tbody tr:has(.sbx) { background: #FBF9FD; }
}

/* ── small phones ────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  /* All four labels fit on one line only without their icons, and at this width
     a label the owner can read beats a picture they cannot. The strip still
     scrolls if a fifth screen is ever added. */
  .nav-link .ico { display: none; }
  .nav-link { padding: 0 11px; }
}