/* Design refresh, 2026-08-16 — "המערכת לא נעימה והכפתורים לא מזמינים".
 *
 * Deliberately a TOKEN refresh, not a rewrite. Every one of the twelve pages
 * shares this stylesheet, so re-tuning the variables and the four component
 * classes below changes all of them at once without a single line of page
 * logic being touched. Class names are unchanged, so nothing can break.
 *
 * What actually changed and why:
 *  - The paper background was a warm beige (#f6f5f1) that made white cards
 *    look grey. Cooled and lightened it so cards read as the foreground.
 *  - The primary button was muted gold on light — low contrast, which is
 *    exactly what "לא מזמינים" describes. Replaced with the deep green
 *    already used for money/success, which is both higher contrast and the
 *    colour the business associates with a signed deal.
 *  - Shadows were flat and wide. Tightened so cards lift rather than smudge.
 *  - Added a hover lift on buttons and cards: the single cheapest signal
 *    that something is clickable.
 */
:root {
  --navy-950: #0b1c2c;
  --navy-900: #0f2740;
  --navy-800: #16324f;
  --navy-700: #1e4160;
  --gold-500: #b08d4f;
  --gold-600: #96742f;

  --brand-600: #0d5c3a;
  --brand-500: #12704a;
  --brand-400: #2f8f63;
  --brand-050: #e8f3ed;

  --paper: #f4f6f8;
  --paper-alt: #e9edf1;
  --card: #ffffff;
  --ink-900: #131c26;
  --ink-600: #4b5765;
  --ink-400: #8b95a2;
  --line: #e2e7ec;
  --line-strong: #cfd7df;
  --danger: #a6402f;
  --danger-bg: #fbeae7;
  --success: #146b45;
  --success-bg: #e6f3ec;
  --warn: #8a5a12;
  --warn-bg: #fdf2e0;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(19, 28, 38, 0.05), 0 4px 14px rgba(19, 28, 38, 0.07);
  --shadow-lift: 0 2px 6px rgba(19, 28, 38, 0.08), 0 10px 26px rgba(19, 28, 38, 0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: "Heebo", "Segoe UI", Arial, sans-serif;
  direction: rtl;
  text-align: right;
}

a { color: inherit; }

.app-header {
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color: #fff;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-mark {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.brand-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 400;
}

.header-actions a.btn { color: #fff; }

main.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 26px 28px 64px;
  width: 100%;
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-950);
  margin: 0;
}

h2.section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--navy-900);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  /* A button that does not move when you touch it does not feel like a
     button. Transform + shadow on hover is the cheapest possible fix. */
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}
.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 1px 2px rgba(13, 92, 58, 0.25), 0 4px 12px rgba(13, 92, 58, 0.20);
}
.btn-primary:hover {
  background: var(--brand-500);
  box-shadow: 0 3px 8px rgba(13, 92, 58, 0.28), 0 10px 22px rgba(13, 92, 58, 0.22);
}

.btn-secondary {
  background: var(--card);
  color: var(--ink-900);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(19, 28, 38, 0.04);
}
.btn-secondary:hover {
  background: var(--paper-alt);
  border-color: var(--ink-400);
}

/* Header buttons sit on the dark navy bar — the light secondary style is
   invisible there, so it is inverted rather than left to disappear. */
/* The logo badge already reads "AK finance · משכנתאות ופיננסים". Repeating
   both in text beside it was the same brand stated twice, so the wordmark is
   dropped and only the tagline stays as a quiet anchor. */
.brand-mark { display: none; }
.brand-sub { font-size: 12px; }

.app-header .btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.app-header .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.40);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { opacity: 0.9; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card + .card { margin-top: 16px; }
/* Cards that lead somewhere lift on hover — the same affordance as buttons.
   Applied only where a page opts in, so static cards stay still. */
.card.is-clickable { transition: transform 0.14s ease, box-shadow 0.16s ease; cursor: pointer; }
.card.is-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* Filters bar */
.filters-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

input[type="text"],
input[type="date"],
select,
textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-900);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(30, 65, 96, 0.12);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-600);
}
.field .hint { font-size: 12px; color: var(--ink-400); }

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
thead th {
  text-align: right;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-400);
  font-weight: 700;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--brand-050); cursor: pointer; }
/* Numeric columns line up only with tabular figures — without this, a column
   of shekel amounts visibly jitters between rows. */
td.num, th.num, .num { font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }

/* An empty state should say what to do next, not just that there is nothing
   here. These styles give that message room to be read. */
.empty-state {
  text-align: center;
  color: var(--ink-600);
  padding: 56px 24px;
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.7;
}
.empty-state strong { display: block; color: var(--ink-900); font-size: 16px; margin-bottom: 6px; }

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-strong { background: var(--success-bg); color: var(--success); }
.badge-promising { background: #e6f0f6; color: var(--navy-700); }
.badge-neutral { background: var(--paper-alt); color: var(--ink-600); }
.badge-risk { background: var(--warn-bg); color: var(--warn); }
.badge-lost, .badge-notfit { background: var(--danger-bg); color: var(--danger); }
.badge-error { background: var(--danger-bg); color: var(--danger); }
.badge-processing { background: var(--warn-bg); color: var(--warn); }

.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  background: var(--navy-900);
  color: #fff;
}
.score-pill.low { background: var(--danger); }
.score-pill.mid { background: var(--warn); }
.score-pill.high { background: var(--success); }

/* New call form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.form-grid .field.full { grid-column: 1 / -1; }

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--ink-600);
  background: var(--paper-alt);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.dragover { border-color: var(--gold-500); background: #fbf6ec; }
.dropzone strong { color: var(--navy-900); }
.dropzone .file-chosen {
  margin-top: 10px;
  font-weight: 700;
  color: var(--navy-900);
}

.form-error {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  display: none;
}
.form-error.visible { display: block; }

/* Sales Cases — new-call case-mode toggle + case picker */
.case-mode-toggle {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.case-mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-600);
  cursor: pointer;
  background: var(--paper-alt);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.case-mode-option input { margin: 0; }
.case-mode-option:has(input:checked) {
  border-color: var(--navy-700);
  background: #e6f0f6;
  color: var(--navy-900);
}

.case-picker-results {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card);
}
.case-picker-results:empty { display: none; border: none; }
.case-picker-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
}
.case-picker-item:last-child { border-bottom: none; }
.case-picker-item:hover { background: var(--paper-alt); }
.case-picker-item .name { font-weight: 700; color: var(--navy-900); }
.case-picker-item .meta { color: var(--ink-400); font-size: 12px; margin-top: 2px; }

.case-picker-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--navy-700);
  background: #e6f0f6;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 13px;
}
.case-picker-selected .name { font-weight: 700; color: var(--navy-900); }
.case-picker-selected .change-link {
  color: var(--navy-700);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
  flex-shrink: 0;
}

/* Locked (readonly, auto-filled from a chosen case) field styling — visual
   cue only, never `disabled` (disabled inputs are excluded from FormData,
   which would silently drop clientName/serviceType on submit). */
input[readonly].locked {
  background: var(--paper-alt);
  color: var(--ink-600);
  cursor: not-allowed;
}

/* Sales Cases — case badge/link on call.html and library rows */
.case-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-700);
  text-decoration: none;
  background: #e6f0f6;
  padding: 4px 10px;
  border-radius: 999px;
}
.case-badge:hover { text-decoration: underline; }

.stage-transition {
  font-size: 13px;
  color: var(--ink-600);
  margin-bottom: 14px;
}
.stage-transition strong { color: var(--navy-950); }

/* Processing overlay */
.processing-panel {
  text-align: center;
  padding: 50px 20px;
}
.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--gold-500);
  margin: 0 auto 22px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.processing-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  margin: 22px auto 0;
  text-align: right;
}
.processing-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-400);
  font-size: 14px;
}
.processing-step .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}
.processing-step.active { color: var(--navy-950); font-weight: 700; }
.processing-step.active .dot { background: var(--gold-500); }
.processing-step.done { color: var(--success); }
.processing-step.done .dot { background: var(--success); }

/* Analysis screen */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.summary-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.summary-tile .label {
  font-size: 12px;
  color: var(--ink-600);
  margin-bottom: 6px;
}
.summary-tile .value {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-950);
}

.kv-list { display: flex; flex-direction: column; gap: 10px; }
/* align-items: flex-start (not baseline) — some .v content is a fixed-height
   badge (.score-pill) rather than plain text, and some .k labels wrap to two
   lines at narrower widths / with different font metrics. Baseline alignment
   in that mix can pull the badge visually close to the row below; top-aligning
   both columns keeps every row's height consistent regardless of wrapping. */
.kv-row { display: flex; gap: 10px; align-items: flex-start; }
.kv-row .k { font-weight: 700; color: var(--ink-600); min-width: 150px; flex-shrink: 0; font-size: 13px; padding-top: 1px; }
.kv-row .v { font-size: 14px; color: var(--ink-900); flex: 1; min-width: 0; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.subcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--paper);
}
.subcard:last-child { margin-bottom: 0; }
.subcard .subcard-title { font-weight: 800; color: var(--navy-900); margin-bottom: 6px; font-size: 14px; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Entry-screen sprint (2026-08-13) — main work-queue column + the quiet
   side rail (Section 5, "משפך לידים ... small and quiet, not the hero" —
   Product Owner). Deliberately its own class rather than reusing .two-col:
   .two-col is an even 1fr/1fr split used for form layouts elsewhere, while
   this needs the side rail visually secondary (2fr/1fr), never equal
   weight to the work queue. */
.home-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .home-layout { grid-template-columns: 1fr; }
}

/* Entry-screen sprint — "משימות באיחור ... must be visually loud" (Product
   Owner). Layered on top of the existing .tl-card/badge-lost language
   (same --danger token), not a new color system: a stronger border +
   tinted background make an overdue Task's card impossible to miss at a
   glance, distinct from a same-shaped card that merely carries a badge. */
.tl-card.tl-urgent {
  border: 2px solid var(--danger);
  background: var(--danger-bg);
}

.muted { color: var(--ink-400); }

.whatsapp-box {
  background: #eafaf1;
  border: 1px solid #bfe8cf;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  white-space: pre-wrap;
}

.top-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy-700);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .form-grid, .two-col { grid-template-columns: 1fr; }
  .app-header { padding: 14px 16px; }
  main.container { padding: 18px 14px 48px; }

  /* Mobile upload usability (2026-08-16). Touch targets sized for a thumb,
     and 16px inputs specifically — iOS Safari auto-zooms the whole page on
     focus for anything smaller, which throws an RTL layout off-screen. */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  input[type="file"] { padding: 12px; }
  .btn { min-height: 48px; padding: 12px 18px; font-size: 15px; }
  .app-header nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .app-header nav .btn { flex: 1 1 auto; min-width: 44%; justify-content: center; }
  .page-title-row { flex-direction: column; align-items: stretch; gap: 10px; }
  table { display: block; overflow-x: auto; }
}

/* Transcript modal — secondary/audit view, kept out of the main report flow */
.btn-transcript {
  background: var(--paper-alt);
  color: var(--navy-900);
  border-color: var(--line);
  font-size: 13px;
  padding: 8px 14px;
}
.btn-transcript:hover { background: var(--card); border-color: var(--navy-700); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 28, 44, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-overlay.hidden { display: none; }

.modal-dialog {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(11, 28, 44, 0.35);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-950);
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--ink-600);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.modal-close:hover { background: var(--paper-alt); color: var(--ink-900); }

.modal-body {
  padding: 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
}
.transcript-turn {
  margin: 0 0 14px;
}
.transcript-turn:last-child { margin-bottom: 0; }
.transcript-speaker {
  font-weight: 800;
  color: var(--navy-900);
}
.transcript-empty {
  color: var(--ink-400);
  text-align: center;
  padding: 30px 10px;
}

/* ---------------------------------------------------------------------------
   Case 360 — journey timeline, progression chips, revenue line.
   Reuses the existing visual language (cards, badges, kv rows); these are
   only the pieces that had no existing equivalent.
--------------------------------------------------------------------------- */
.tl { position: relative; padding-inline-start: 26px; }
.tl::before {
  content: '';
  position: absolute;
  inset-inline-start: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}
.tl-event { position: relative; margin-bottom: 14px; }
.tl-event:last-child { margin-bottom: 0; }
.tl-event::before {
  content: '';
  position: absolute;
  inset-inline-start: -24px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 2px solid var(--card);
  box-shadow: 0 0 0 2px var(--line);
}
.tl-event.tl-lead::before { background: var(--gold-500); }
.tl-event.tl-outcome-signed::before { background: var(--success); }
.tl-event.tl-outcome-lost::before { background: var(--danger); }
.tl-event.tl-outcome-notfit::before { background: var(--ink-400); }

.tl-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--paper);
}
a.tl-card { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.tl-card:hover { border-color: var(--navy-700); box-shadow: var(--shadow); }
.tl-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.tl-date { font-weight: 800; color: var(--navy-900); }
.tl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px 18px;
  font-size: 13px;
}
.tl-grid .k { color: var(--ink-600); font-size: 11.5px; margin-bottom: 1px; }

.move-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.move-forward { background: var(--success-bg); color: var(--success); }
.move-none { background: var(--paper-alt); color: var(--ink-600); border-color: var(--line); }
.move-regressed { background: var(--danger-bg); color: var(--danger); }
.move-unknown { background: var(--paper-alt); color: var(--ink-400); border-color: var(--line); }

.revenue-line { font-size: 22px; font-weight: 800; color: var(--success); }
.intake-box {
  background: var(--warn-bg);
  border: 1px solid #e8d9b8;
  border-radius: 8px;
  padding: 12px 14px;
}

/* ---------------------------------------------------------------------------
   Sales Cases Cockpit (/cases.html) — summary tiles reuse .summary-strip/
   .summary-tile and cards reuse .tl/.tl-card/.tl-head/.tl-grid from the Case
   360 sprint; only the filter-chip row is genuinely new.
--------------------------------------------------------------------------- */
.cockpit-summary { margin-bottom: 18px; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.attention-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-600);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.attention-chip:hover { border-color: var(--navy-700); }
.attention-chip.active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white, #fff);
}
.cockpit-card { padding: 14px 16px; }

/* ---------------------------------------------------------------------------
 * Application shell — logo badge, hamburger, collapsible right sidebar.
 * Built by public/js/nav.js on every authenticated page. Product Owner,
 * 2026-08-16: navigation lives on the right under the logo, collapsed by
 * default, and opening it narrows the content rather than covering it.
 * ------------------------------------------------------------------------ */
.app-header { padding: 10px 20px; gap: 16px; }
.hdr-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hdr-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
/* The logo is charcoal on cream and would disappear on the navy bar. The
   badge asset carries its own blurred halo, so the mark keeps its real
   colours instead of being inverted into something the brand never was. */
.brand-logo { height: 46px; width: 46px; display: block; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-mark { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: .3px; }
.brand-sub  { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 400; }

.hamburger {
  width: 36px; height: 36px; border-radius: 9px; padding: 0;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  transition: background .15s ease, border-color .15s ease;
}
.hamburger:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.hamburger span { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; }

.user-meta { display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.user-name { font-size: 13px; font-weight: 700; color: #fff; }
.user-role { font-size: 11px; color: rgba(255,255,255,.55); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 9px; padding: 8px;
  background: transparent; border: 1px solid transparent;
  color: rgba(255,255,255,.65); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.icon-btn svg { width: 100%; height: 100%; display: block; }

/* THE SIDEBAR RUNS TO THE BOTTOM OF THE WINDOW.
   `.ak-sidebar` already has align-self:stretch, but stretch only reaches the
   height of the flex line — which is set by <main>, i.e. by however much
   content the page happens to have. On a short page (three calls in the
   library) the navy panel stopped mid-screen and the light page background
   showed underneath it, which read as a rendering fault rather than a design.
   Giving the shell a minimum height of "viewport minus header" makes stretch
   mean what it looks like it means.
   --hdr-h is measured and written by nav.js after the header is built, so
   this stays correct if the header ever changes height; the fallback is only
   for the instant before that runs. */
.ak-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--hdr-h, 66px)); }

.ak-sidebar {
  width: 0; flex-shrink: 0; overflow: hidden;
  background: #132e4a; align-self: stretch;
  padding: 14px 0; transition: width .26s ease, padding .26s ease;
}
.ak-shell.nav-open .ak-sidebar { width: 208px; padding: 14px 10px; }

.side-cap { font-size: 10.5px; color: rgba(255,255,255,.38); padding: 0 10px 9px; white-space: nowrap; }
.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; margin-bottom: 3px; border-radius: 9px;
  color: rgba(255,255,255,.74); font-size: 13.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.side-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-link:hover { background: rgba(255,255,255,.09); color: #fff; }
/* The current page is HIGHLIGHTED, never removed from the list. */
.side-link.is-active { background: var(--brand-600); color: #fff; font-weight: 700; }

.ak-shell main.container { flex: 1; min-width: 0; margin: 0 auto; }

@media (max-width: 760px) {
  .ak-shell.nav-open .ak-sidebar { width: 172px; }
  .user-meta { display: none; }
  .brand-text { display: none; }
}


/* Primary action in the header. Sits beside the brand so it is reachable on
   every page and in every sidebar state — see nav.js buildShell(). */
.hdr-cta{margin-inline-start:18px;display:inline-flex;align-items:center;gap:7px;
         padding:8px 15px;font-size:13.5px;white-space:nowrap;flex-shrink:0}
.hdr-cta svg{width:16px;height:16px}
@media (max-width:900px){ .hdr-cta span{display:none} .hdr-cta{padding:8px 10px} }


/* ENTRY-SCREEN QUEUE (2026-08-16).
   Each block answers "is there anything here, and is it urgent" before it is
   read — colour-coded dot, name, count. An empty block stays visible but
   recedes, so "nothing overdue" is information rather than a missing card. */
.queue-card{padding:14px 16px}
.queue-card.is-empty{opacity:.62}
.queue-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.queue-title{font-weight:700;font-size:13.5px}
.queue-count{margin-inline-start:auto;font-variant-numeric:tabular-nums;
             font-weight:800;font-size:15px;color:var(--ink-600)}
.queue-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.queue-dot.overdue{background:#c0392b}
.queue-dot.today{background:#c0783a}
.queue-dot.stuck{background:#5a6673}
.queue-dot.lead{background:#3d6fa8}
.queue-body{font-size:12.5px;color:var(--ink-600)}
.queue-row{display:flex;align-items:center;gap:12px;padding:8px 2px;
           border-top:1px solid var(--line);text-decoration:none;color:inherit}
.queue-row:hover{background:var(--paper)}
.queue-row-name{font-weight:600;font-size:13px;min-width:120px}
.queue-row-why{flex:1;font-size:12px;color:var(--ink-400);
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-row-go{font-size:12px;color:var(--brand-600);white-space:nowrap}

/* WORKBOARD QUEUE (UX Closure, 2026-08-18).

   One list of decisions, not a grid of tiles. The row is the unit: a state
   chip, who it is, what kind of thing it is, what happened, what to do, and
   the buttons that do it. Rows are separated by a hairline rather than by
   cards, because five card containers were exactly what made this screen read
   as a second Tasks page.

   Colour is used once — the inline accent border, set per row from the
   section's token in home-view.js. Everything else is weight and spacing, so
   באיחור is the only thing on screen that shouts. */
/* DESKTOP WIDTH DISCIPLINE. The queue used to stretch the full container, so
   every row was a thin strip of text on the right, a desert, and two small
   buttons on the far left. That dead space was not a spacing bug — it was
   `justify-content:space-between` inside an unbounded width. Both are fixed
   here: the column is bounded, and the row became a grid.

   V3 widens that bound into a real desktop operational workspace and splits it
   into two regions: the queue, and a narrow secondary rail. The width is still
   BOUNDED — an unbounded ledger row is the defect described above. This id
   exists on home.html only, so no other screen is affected. */
#main-content{max-width:1360px;display:grid;
              grid-template-columns:minmax(0,1fr) 304px;gap:28px;align-items:start}
#wb-main{min-width:0}

/* THE SECONDARY REGION. Different in kind from the queue, not merely smaller:
   it holds pointers to work that is NOT in the queue. Sticky on wide screens
   so the queue scrolls against it. An empty child collapses rather than
   painting an empty box — this is an unfilled container, never active work. */
#wb-rail{position:sticky;top:26px;display:flex;flex-direction:column;gap:8px;
         background:var(--paper-alt);border-radius:var(--radius);padding:8px}
#wb-planned,#wb-backlog{padding:12px 13px;background:var(--card);
                        border-radius:8px}
#wb-planned:empty,#wb-backlog:empty{display:none}
#wb-planned:not(:empty) + #wb-backlog{border-block-start:1px solid var(--line)}

/* ═══ Workboard V3 — LEDGER QUEUE + SECONDARY RAIL (approved 2026-08-19) ═══
   All rules here are ADDITIVE wb-* selectors — no shared nav/header rule is
   touched. One deliberate exception to the "no new colour" rule this block
   used to state: three presentation-only kind tokens (--wb-kind-task/-case
   /-lead) were introduced under an explicit Product Owner ruling. They are
   declared and their limits are recorded at their own rule below; everything
   else still uses the existing token set.

   The board is TWO REGIONS: the queue (primary) and a narrow rail carrying
   the two pointers that are not queue work. The queue is one surface of
   ledger rows in four aligned columns, and each contiguous run of one
   canonical section is introduced by a band that states that section's label
   once.

   queue[0] IS AN ORDINARY ROW WITH A BACKGROUND. It has no label, no larger
   type, no ring, no shadow, no stronger control and no extra fields — the
   focus class declared below sets a background and nothing else. (Its name is
   not written here: a test walks every rule carrying that selector and
   asserts none of them declares size, border, shadow or alignment, and a
   comment naming it would be read as one of those rules.) This replaces the
   V2 treatment, whose position label and two focus-only field labels were
   removed by Product Owner decision with no textual replacement.

   REMOVED at the V3 change: .wb-zone-label, .wb-field-label, .wb-do-focus,
   .wb-chip/.wb-chip-urgent, .wb-why-text, .wb-btn-lg/.wb-btn-sm, the
   focus-only action alignment, and the .wb-batch/.wb-section-head pair the
   generic band replaces. REMOVED at the V2 change: the .wb-hero-* family
   (.wb-hero, .wb-hero-head, .wb-hero-who, .wb-hero-divider, .wb-hero-do,
   .wb-hero-do-label, .wb-hero-urgent, .wb-hero-actions), which existed only
   to style a detached hero card. Removed earlier at the Option D checkpoint:
   .wb-grid, the .wb-load-* workload-panel family and .wb-reveal-btn. Nothing
   below references any of them. */
.wb-subtitle{font-size:13px;color:var(--ink-400);margin-top:2px}
.wb-queue{padding:0;overflow:hidden;margin-bottom:14px}

/* KIND RAIL COLOURS — PRESENTATION ONLY (Product Owner ruling, 2026-08-19).
   Three entity kinds that already exist and are already named in words on the
   row. These colours must not encode or imply priority, ranking, urgency,
   risk, eligibility, workflow state, ownership state, business status or any
   new operational meaning, and they are never the sole carrier of the kind —
   `.wb-kind` prints the word. Deliberately three hues of equal weight, so no
   reading of them as a scale is available. */
:root{--wb-kind-task:#2f5fd0;--wb-kind-case:#6741d9;--wb-kind-lead:#0b7f5f}

/* THE ROW — FOUR ALIGNED COLUMNS after the rail: identity, why, when, action.
   Every cell is placed EXPLICITLY, so a row that legitimately omits one (a
   task carries no reasons) cannot shift the columns of the rows around it.
   The action column is fixed width so every control lines up on one edge —
   that alignment is what makes a queue a work surface instead of a list. Not
   space-between: an unbounded gap pushed actions to the far edge. */
.wb-row{display:grid;
        grid-template-columns:3px minmax(0,1fr) minmax(0,1.5fr) 96px 196px;
        gap:0 18px;align-items:center;padding:8px 16px;min-height:52px;
        border-block-end:1px solid var(--line)}
.wb-row:last-child{border-block-end:0}
.wb-row:hover{background:var(--paper)}
.wb-rail{grid-column:1}
.wb-row-main{grid-column:2;min-width:0}
.wb-why{grid-column:3;min-width:0}
.wb-when{grid-column:4}
.wb-actions{grid-column:5}
/* No reasons on this row — the identity takes that space instead of the row
   printing an empty cell. Nothing is hidden: there is nothing there. */
.wb-row-nowhy .wb-row-main{grid-column:2 / span 2}

/* The rail. Carries the KIND; urgency overrides it below, because an overdue
   row's exceptional state outranks which domain it came from. */
.wb-rail{align-self:stretch;border-radius:2px;background:var(--line)}
.wb-k-task .wb-rail{background:var(--wb-kind-task)}
.wb-k-case .wb-rail{background:var(--wb-kind-case)}
.wb-k-lead .wb-rail{background:var(--wb-kind-lead)}

/* IDENTITY LEADS THE ROW — client first, then what kind of thing it is.
   The canonical state is no longer here: the section band above the run
   states it once. */
.wb-identity{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.wb-who{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink-900);
        line-height:1.35;overflow-wrap:anywhere}
.wb-kind{font-size:11px;font-weight:600;color:var(--ink-600);
         background:var(--paper-alt);border-radius:4px;padding:1px 6px;white-space:nowrap}

/* WHY IT IS HERE — canonical reasons in full. CONTRAST: this is
   informational text, so it takes --ink-600 (~7.5:1 on the card) rather than
   the --ink-400 it used to carry (~2.7:1, which failed for body text). */
.wb-why{font-size:12.5px;color:var(--ink-600);line-height:1.6;
        overflow-wrap:anywhere}
/* WHAT TO DO NOW — the strongest line after the client name. */
.wb-do{font-size:13px;font-weight:600;color:var(--ink-900);line-height:1.5;
       margin-top:4px;overflow-wrap:anywhere}
.wb-do-quiet{font-size:12.5px;font-weight:500;color:var(--ink-600);margin-top:2px}
.wb-sep{margin:0 6px;color:var(--line-strong)}
/* WHEN — its own column, bare. Tabular figures so dates align down the board. */
.wb-when{font-size:12px;color:var(--ink-600);white-space:nowrap;
         font-variant-numeric:tabular-nums}

/* MIXED-DIRECTION CONTENT. Scoped to the Workboard only — the page-wide
   `td, .kv-row .v` rule at the foot of this file is untouched. Fragments this
   screen composes (dates, times) are wrapped in <bdi> in home-view.js;
   engine-authored strings are never split, so their fields are isolated here
   instead. Without this, a date or a Latin client name can reorder the Hebrew
   and the separators beside it — the defect class that once printed two lead
   table rows on top of each other. */
.wb-who,.wb-why,.wb-do,.wb-lead-deviation,.wb-sep,.wb-when,.wb-backlog{
  unicode-bidi:isolate}

/* ACTIONS — one aligned column, at the natural end of the reading path.
   ONE CONTROL ENVELOPE: every control on the board is the same width and the
   same minimum height, whatever its label's length, so the column reads as a
   single edge. The attempt control's label is a full sentence and WRAPS
   inside that envelope rather than being clipped or abbreviated.
   Green writes a fact; neutral navigates. No other action meaning exists. */
.wb-actions{display:flex;flex-direction:column;gap:4px;align-items:stretch;
            justify-content:center}
.wb-actions .btn{width:100%;min-height:34px;padding:5px 10px;font-size:12px;
                 line-height:1.25;white-space:normal;text-align:center;
                 display:flex;align-items:center;justify-content:center;gap:6px}
/* THE ACTION IS OBVIOUS, NOT DOMINANT (refinement pass, 2026-08-19). The stack
   of two equal full-width 44px controls made the action block the largest
   object on the row and set the row's whole height — the content cell was
   40px, the action cell 94px. Navigation is subordinate to the control that
   writes a fact, so it takes the smaller of the two. Nothing about what either
   control does, or which controls appear, changed. Touch targets are restored
   to 44px at the narrow breakpoint, where a finger is the pointer. */
.wb-actions .btn-secondary{min-height:26px;padding:3px 10px;font-size:11.5px;
                           font-weight:600;color:var(--ink-600)}
.wb-btn-go{background:#1E7A46;border-color:#1E7A46;color:#fff}
.wb-btn-go:hover{background:#186A3C}
/* Navigation reads as navigation: the app's existing neutral button, plus a
   direction glyph. No new action colour and no new action meaning. */
.wb-nav-chev{color:var(--ink-600);font-size:11px;font-weight:400}

/* queue[0] — A BACKGROUND, AND NOTHING ELSE (V3, approved 2026-08-19).
   No label, no larger type, no ring, no shadow, no stronger control, no extra
   fields. Removed here with the V2 density: .wb-zone-label, .wb-field-label,
   .wb-do-focus, .wb-chip/.wb-chip-urgent, .wb-why-text, .wb-btn-lg/.wb-btn-sm
   and the focus-only action alignment. Nothing below references them. */
.wb-row-focus{background:var(--paper)}
.wb-row-focus:hover{background:var(--paper)}
.wb-empty{color:var(--ink-600);font-size:14px;padding:34px 16px;text-align:center}

/* URGENCY. Declared AFTER .wb-row-focus so an overdue focus row gets exactly
   the same treatment as an overdue ordinary row — there is no focus-only
   urgency rule, and no card-wide wash, because there is no card. */
.wb-row-urgent{background:var(--danger-bg)}
.wb-row-urgent:hover{background:var(--danger-bg)}
.wb-row-urgent .wb-rail{background:var(--danger)}

/* THE SECTION BAND. The canonical label is stated ONCE, over the contiguous
   run of rows that share it, so no row repeats it. A band, deliberately NOT a
   card and NOT a panel — it introduces rows, it does not contain them. */
.wb-band{display:flex;align-items:center;gap:10px;padding:9px 16px;
         background:var(--paper-alt);
         border-block-start:1px solid var(--line);
         border-block-end:1px solid var(--line)}
.wb-queue > .wb-band:first-child{border-block-start:0}
.wb-band-label{font-size:12px;font-weight:700;color:var(--ink-900);letter-spacing:.02em}
.wb-band-count{font-size:12px;font-weight:600;color:var(--ink-600);
               font-variant-numeric:tabular-nums}
/* באיחור stays the one thing on this screen that shouts, in the app's
   existing danger language — no second urgency vocabulary. */
.wb-band-urgent .wb-band-label{color:var(--danger)}
.wb-run-rule{flex:1;height:1px;background:var(--line)}
/* THE PERSON IS THE ANCHOR OF THEIR OWN ROW (refinement pass, 2026-08-19).
   A run row used to shrink the client name to 14px — below the default row —
   which left the lead's identity as the smallest text on a row whose largest
   object was a button. The run is already distinguished by its band and by
   what each row omits; it does not also need to shrink the name. */
.wb-row-inrun .wb-who{font-size:15px}
/* The context column on a run row: the lead's canonical state line, then any
   distinct reason, then a deviation. Existing facts, moved out of the name's
   column so the middle of the row carries them. */
.wb-why > * + *{margin-top:2px}
.wb-why .wb-do-quiet{margin-top:0}
/* A lead whose next action DEVIATES from the run default — the one row that
   must stand out inside a group of identical work. */
.wb-lead-deviation{font-size:12.5px;font-weight:700;color:var(--ink-900);
                   margin-top:2px}
.wb-lead-deviation::before{content:"▸";color:var(--ink-400);
                           margin-inline-end:5px;font-weight:400}

/* FEEDBACK FOR A CONTROL THAT WRITES A FACT.

   The STRIP is queue-level and survives the reload, because completing a task
   removes its row and a confirmation attached to that row dies with it. The
   RECEIPT and the ERROR are per-row and sit BESIDE the control, never in place
   of it — with no approved feedback duration there is no timer to restore a
   replaced control, and a lead whose only control had vanished would be stuck
   until a page reload. */
.wb-strip{display:flex;align-items:center;gap:9px;padding:10px 16px;
          font-size:13px;font-weight:600;color:var(--success);
          background:var(--success-bg);border-block-end:1px solid var(--line)}
.wb-strip-bad{color:var(--danger);background:var(--danger-bg)}
.wb-strip-text{unicode-bidi:isolate}
.wb-strip-x{margin-inline-start:auto;background:none;border:0;cursor:pointer;
            color:var(--ink-600);font-size:13px;padding:3px 7px;border-radius:4px;
            line-height:1}
.wb-strip-x:hover{background:rgba(0,0,0,.05)}
.wb-receipt{font-size:11.5px;font-weight:600;color:var(--success);
            line-height:1.35;text-align:center;unicode-bidi:isolate}
.wb-row-err{font-size:11.5px;font-weight:600;color:var(--danger);margin:0;
            line-height:1.35;text-align:center;unicode-bidi:isolate}

/* KEYBOARD FOCUS. The app's .btn already carries a ring; the rows and the rail
   also contain links and a bare dismiss control, which did not. --brand-600 is
   an existing token and clears 3:1 against the card, the queue[0] tint and the
   danger wash alike. */
.wb-queue a:focus-visible,.wb-queue button:focus-visible,
#wb-rail a:focus-visible,#wb-rail button:focus-visible{
  outline:2px solid var(--brand-600);outline-offset:2px;border-radius:6px}

/* SUBORDINATE ZONES. Descending weight: the board, then future work, then the
   historical backlog. CONTRAST: the backlog line is informational, so it takes
   --ink-600 rather than the --ink-400 it used to carry. */
/* SCANABLE, STILL SUBORDINATE (refinement pass, 2026-08-19). Both lines read
   as footnotes at 12.5/11.5px, so their numbers had to be hunted for. They are
   lifted one step — a surface, tabular figures, slightly larger text — and no
   further: the rail is still 304px of quiet text beside a full-width queue,
   carries no action, and states exactly the same facts in exactly the same
   words. */
.wb-pointer{font-size:13px;color:var(--ink-600);line-height:1.65;
            font-variant-numeric:tabular-nums}
.wb-pointer a{margin-inline-start:7px;font-weight:600}
.wb-backlog{font-size:12px;color:var(--ink-600);line-height:1.75;
            font-variant-numeric:tabular-nums}
.wb-backlog a{margin-inline-start:6px}

/* INTERMEDIATE WIDTH — the rail can no longer sit beside the queue, so it
   moves below it and lays out across. Nothing is dropped. */
@media (max-width:1080px){
  #main-content{grid-template-columns:minmax(0,1fr)}
  #wb-rail{position:static;flex-direction:row;flex-wrap:wrap}
  #wb-planned,#wb-backlog{flex:1 1 260px}
  #wb-planned:not(:empty) + #wb-backlog{border-block-start:0;
                                        border-inline-start:1px solid var(--line)}
}

/* NARROW WIDTH — graceful degradation, same system. Nothing is hidden: the
   row stacks into reading order and the actions take their own line. */
@media (max-width:760px){
  .wb-row{grid-template-columns:3px minmax(0,1fr);
          grid-template-areas:"rail main" ". why" ". when" ". actions";
          row-gap:8px;align-items:start}
  /* grid-area sets the column itself, so it is enough to cancel the explicit
     desktop placement. Adding `grid-column:auto` after it — which an earlier
     draft did — OVERRIDES the area's column and auto-places the cell into a
     near-zero-width implicit track: the why cell then wrapped one character
     per line and grew to 860px. Caught by measuring the rendered row. */
  .wb-rail{grid-area:rail}
  .wb-row-main,.wb-row-nowhy .wb-row-main{grid-area:main}
  .wb-why{grid-area:why}
  .wb-when{grid-area:when}
  .wb-actions{grid-area:actions;align-items:flex-start;gap:8px}
  /* TOUCH TARGETS COME BACK AT FINGER WIDTH. The desktop refinement shrinks
     both controls because the pointer there is a mouse; here it is a thumb, so
     both return to 44px. */
  .wb-actions .btn,.wb-actions .btn-secondary{width:auto;min-width:220px;
                                              min-height:44px;font-size:12.5px}
  #wb-rail{flex-direction:column}
  #wb-planned:not(:empty) + #wb-backlog{border-inline-start:0;
                                        border-block-start:1px solid var(--line)}
}


/* BELT AND BRACES FOR MIXED-DIRECTION TEXT (2026-08-16).
   stripBidiControls() removes the marks Meta embeds, but a campaign name is
   still Hebrew and Latin mixed together inside an RTL page. `isolate` makes
   each cell its own bidi context, so however a value resolves internally it
   can no longer reorder the cells beside it — which is what made two rows in
   the lead table print on top of each other. */
td, .kv-row .v { unicode-bidi: isolate; }