/* ============================================================
   Meri CRM — ClickUp's light design language on the Meri palette.
   Brand: Visual Identity Guidelines §3 (muted-jewel palette) +
   §4 (Poppins, hierarchy by scale contrast).
   Paradigm (ClickUp): light gray sidebar + white content, solid
   colored group-header pills with white UPPERCASE text + counts,
   clean white rows with leading status circles and pastel tag
   chips, view tabs with an active underline, kanban columns with
   colored top borders, white report cards with soft shadows.
   Meri identity kept: Electric Lime = the action color, Brand
   Gold = identity accents (brand dot, active nav, tab underline).
   Motion: transform/opacity only (compositor-friendly).
   ============================================================ */

:root {
  /* palette — Visual Identity Guidelines §3 */
  --gold:      #a1815e;   /* brand / identity moments */
  --gold-deep: #8f7050;   /* gold deepened one step — carries white text AA */
  --lime:      #f7ff9f;   /* THE action color: primary buttons only */
  --ink:       #112440;   /* Midnight Blue — text */
  --dteal:     #1a3c3d;
  --teal:      #46746b;
  --blue2:     #92b3be;
  --sage:      #98b19d;
  --sand:      #d1ccae;
  /* ClickUp-style light structure */
  --bg:        #fafbfc;              /* content canvas */
  --side:      #f7f8fa;              /* light sidebar panel */
  --surface:   #ffffff;
  --line:      #e8eaed;              /* subtle 1px borders */
  --line-strong: #d6dae0;
  --hover:     #f4f6f8;              /* row / nav hover */
  --ink-soft:  rgba(17, 36, 64, .64);
  --ink-faint: rgba(17, 36, 64, .42);
  --danger:    #b04a4a;              /* functional semantic red (lost/reject) — not a brand color */

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-pill: 4px;                     /* ClickUp statuses are squarish */
  --r-card: 8px;
  --r-panel: 12px;

  --shadow-1: 0 1px 2px rgba(17,36,64,.05), 0 1px 3px rgba(17,36,64,.05);
  --shadow-2: 0 8px 30px rgba(17,36,64,.14);

  --dur: 160ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --tap: 44px;                       /* minimum touch target */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface);
}
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea {
  font: inherit; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 9px 10px; background: var(--surface);
  min-height: 40px; width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: #c2c8d0; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Shell ─────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; }

/* ── Sidebar — ClickUp's light nav panel; gold marks the active board ── */
.sidebar {
  background: var(--side);
  color: var(--ink);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 16px 10px;
  overflow-y: auto;
}
.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold);                       /* identity moment: gold, quiet (§3) */
  flex: none;
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.side-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); padding: 12px 10px 6px;
}
.board-list a, .board-list .soon {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px;
  padding: 0 10px; border-radius: 6px;
  text-decoration: none; font-weight: 500; font-size: 13px;
  color: var(--ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.board-list a:hover { background: var(--hover); color: var(--ink); }
.board-list a[aria-current="page"] {
  background: rgba(161,129,94,.13);              /* gold-tinted active board */
  color: var(--ink); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
}
.b-ico { width: 20px; text-align: center; flex: none; font-size: 14px; }
.nav-badge {
  margin-left: auto;
  background: var(--lime); color: var(--ink);
  border: 1px solid rgba(17,36,64,.12);
  font-size: 11px; font-weight: 700;
  border-radius: 99px; padding: 1px 8px;
}
.side-foot { padding: 12px 10px 2px; border-top: 1px solid var(--line); margin-top: auto; }
.actor-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-soft); font-weight: 500;
}
.actor-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4e7355;                            /* online dot — deep sage */
}

/* ── Topbar ────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.topbar { padding: 18px 28px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#board-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.topbar-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.topbar-row--tabs { margin-top: 8px; }

/* view tabs — ClickUp's List / Board / Calendar strip with active underline */
.view-tabs { display: flex; gap: 4px; }
.view-tab {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 12px;
  font-weight: 500; font-size: 13px; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.view-tab:hover { color: var(--ink); background: var(--hover); }
.view-tab[aria-selected="true"] {
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--gold);
}
.tab-ico { font-size: 12px; opacity: .65; line-height: 1; }
.board-filters { margin-left: auto; display: flex; gap: 8px; align-items: center; padding-bottom: 6px; }
.board-filters select { min-height: 34px; width: auto; padding: 5px 28px 5px 10px; font-size: 12.5px; border-color: var(--line-strong); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border-radius: 6px; font-weight: 600; font-size: 13px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--lime); color: var(--ink);   /* lime = the brightest thing at the decision point (§3) */
  border: 1px solid rgba(17,36,64,.16);         /* definition on white surfaces */
  box-shadow: var(--shadow-1);
}
.btn-primary:hover { box-shadow: 0 3px 10px rgba(17,36,64,.16); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.btn-ghost:hover { border-color: #b9c0c9; background: var(--hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 6px; }

/* ── Board / groups — ClickUp's collapsible status sections ── */
.board { flex: 1; overflow: auto; padding: 20px 28px 60px; background: var(--bg); }
.group { margin-bottom: 28px; }
.group-head {
  display: flex; align-items: center; gap: 8px;
  min-height: 34px; margin-bottom: 8px;
}
/* the signature: a solid colored pill with white UPPERCASE text + count */
.group-head h3 {
  display: inline-flex; align-items: center;
  background: var(--g, #6b7280); color: #fff;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
  padding: 5px 10px; border-radius: 5px;
}
.group-count { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.group-caret {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 6px; color: var(--ink-faint); font-size: 12px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.group-caret:hover { background: rgba(17,36,64,.06); color: var(--ink); }
.group[data-collapsed="true"] .group-caret { transform: rotate(-90deg); }
.group[data-collapsed="true"] .group-body { display: none; }

/* ── Item table — clean white rows, hover highlight, status circles ── */
.tbl-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
  overflow-x: auto;
}
table.items { border-collapse: collapse; width: 100%; min-width: 680px; table-layout: fixed; }
.items th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);                  /* real content — keep it AA on white */
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.items td {
  padding: 6px 12px; border-bottom: 1px solid var(--line);
  font-size: 13px; vertical-align: middle; height: var(--tap);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.items tr:last-child td { border-bottom: 0; }
.items tbody tr { transition: background var(--dur) var(--ease); }
.items tbody tr:hover { background: var(--hover); }
.item-name { font-weight: 500; cursor: pointer; }
.item-name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* leading status circle on the title cell — takes the group color (--g on tbody) */
.items td:first-child .item-name::before {
  content: ""; display: inline-block; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--g, var(--line-strong));
  margin-right: 9px;
}
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-dim { color: var(--ink-soft); font-size: 12.5px; }

/* + Add item — ClickUp's ghost quick-add row at the bottom of each group */
.add-item {
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; width: 100%; padding: 0 14px; margin-top: 2px;
  color: var(--ink-faint); font-size: 12.5px; font-weight: 500;
  border-radius: 6px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.add-item:hover { color: var(--ink); background: rgba(17,36,64,.05); }

/* ── Status pills — ClickUp's solid colored blocks, white uppercase text ── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 108px; max-width: 100%; min-height: 26px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--pc, var(--line)); color: var(--pt, var(--ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.pill { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
button.pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(17,36,64,.22); }
/* pastel tag chips (persona / channel / kind) — soft bg, normal case, small */
.pill--soft {
  min-width: 0; min-height: 22px; font-size: 11px; padding: 2px 9px;
  border-radius: var(--r-pill); font-weight: 600; letter-spacing: .01em;
  text-transform: none;
}

/* the picker popover — colored status rows */
.pick {
  position: fixed; z-index: 60;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-2);
  padding: 8px; width: 224px;
  display: flex; flex-direction: column; gap: 6px;
}
.pick .pill { width: 100%; min-height: 34px; }
.pick-note { font-size: 11.5px; color: var(--ink-soft); padding: 2px 4px; }
.pick input, .pick textarea { min-height: 38px; }

/* ── Kanban — columns with colored top borders, white cards ── */
.kanban { display: flex; gap: 14px; align-items: flex-start; min-height: 60vh; }
.kcol {
  flex: 0 0 240px; background: #f4f5f7;
  border: 1px solid var(--line);
  border-top: 3px solid var(--g, var(--line-strong));
  border-radius: var(--r-card); padding: 10px;
}
.kcol.drag-over { outline: 2px dashed var(--gold); outline-offset: -2px; }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.kcol-head h3 {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
.kcol-head h3::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--g, var(--line-strong)); flex: none;
}
.kcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: var(--shadow-1);
  padding: 10px 12px; margin-bottom: 8px; cursor: grab;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kcard:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(17,36,64,.12); border-color: var(--line-strong); }
.kcard.dragging { opacity: .45; }
.kcard-title { display: flex; align-items: flex-start; font-weight: 600; font-size: 13px; }
.kcard-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--g, var(--line-strong)); flex: none;
  margin: 5px 8px 0 0;                     /* pinned to the first text line */
}
.kcard-sub { color: var(--ink-soft); font-size: 12px; margin: 3px 0 9px; padding-left: 16px; }
.kcard-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Calendar ──────────────────────────────────────────── */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cal-head h3 { font-size: 16px; min-width: 170px; text-align: center; }
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); /* minmax(0,…) — long event labels must not stretch a day column */
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-1);
}
.cal-dow {
  padding: 8px 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.cal-day { min-height: 92px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-daynum { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; }
.cal-day--out { background: var(--bg); }
.cal-day--today .cal-daynum {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  background: var(--gold); color: #fff; border-radius: 50%;
}
.cal-ev {
  display: block; width: 100%; text-align: left;
  background: var(--teal); color: #fff;
  font-size: 11.5px; font-weight: 500;
  border-radius: 4px; padding: 3px 7px; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-ev:hover { opacity: .88; }

/* ── Item detail panel (side panel) ────────────────────── */
.panel-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(17,36,64,.28);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.panel-scrim.open { opacity: 1; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(480px, 96vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transform: translateX(102%);
  transition: transform 220ms var(--ease);
  display: flex; flex-direction: column;
}
.panel.open { transform: translateX(0); }
/* author display values beat the [hidden] UA rule — restore it explicitly */
.panel[hidden], .panel-scrim[hidden] { display: none; }
.panel-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.panel-head .sub { color: var(--ink-soft); font-size: 12.5px; margin-top: 3px; }
.panel-close {
  margin-left: auto; flex: none;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 8px; font-size: 17px; color: var(--ink-soft);
}
.panel-close:hover { background: var(--hover); color: var(--ink); }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 22px 30px; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--line); }

/* field rows — label left, value right */
.frow {
  display: grid; grid-template-columns: 132px 1fr; gap: 10px;
  align-items: center; min-height: 40px;
  border-bottom: 1px solid var(--line); padding: 5px 0;
}
.frow > label, .frow > .flabel { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.fval { font-size: 13.5px; overflow-wrap: anywhere; }
.fval a { color: var(--teal); font-weight: 500; }

.psec { margin-top: 20px; }
.psec > h3 {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold-deep); margin-bottom: 8px;             /* gold = section markers (§3) */
}

/* activity timeline (lead stage history — the authoritative event log) */
.tl { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 16px; display: grid; gap: 12px; }
.tl-item { position: relative; font-size: 12.5px; }
.tl-item::before {
  content: ""; position: absolute; left: -22.5px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--e, var(--blue2)); border: 2px solid var(--surface);
}
.tl-when { color: var(--ink-faint); font-size: 11.5px; }
.tl-note { color: var(--ink-soft); }
.tl-actor { font-weight: 600; }
.tl-actor--service { color: var(--teal); }   /* bot writes visibly attributed (§3.5) */

/* provenance block — Source + memo date + link (§1.1-A / plan §5.3) */
.prov {
  background: rgba(209,204,174,.20);         /* warm sand tint */
  border: 1px solid rgba(161,129,94,.22);
  border-radius: var(--r-card); padding: 10px 12px;
  font-size: 12.5px; display: grid; gap: 3px;
}

/* raw memo text in inbox detail */
.raw {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 12px 14px; font-size: 13px; white-space: pre-wrap;
}

/* ── Forms / dialogs ───────────────────────────────────── */
.dlg-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(17,36,64,.36);
  display: grid; place-items: center; padding: 20px;
}
.dlg {
  background: var(--surface); border-radius: var(--r-panel);
  box-shadow: var(--shadow-2); width: min(480px, 100%);
  max-height: 88vh; overflow-y: auto; padding: 24px;
}
.dlg h2 { font-size: 18px; margin-bottom: 4px; }
.dlg .dlg-sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 16px; }
.dlg form { display: grid; gap: 12px; }
.field { display: grid; gap: 5px; }
.field > label { font-size: 12.5px; font-weight: 600; }
.field .hint { font-size: 11.5px; color: var(--ink-faint); }
.req::after { content: " *"; color: var(--danger); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.form-error { color: var(--danger); font-size: 12.5px; font-weight: 500; min-height: 1em; }

/* ── Reports — clean white cards, soft shadows, clear headers ── */
.report-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); max-width: 1200px; }
.rcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-1); padding: 20px 22px;
}
.rcard > h3 { font-size: 15px; margin-bottom: 2px; }
.rcard > .rsub { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 16px; }
.funnel-row { display: grid; grid-template-columns: 120px 1fr 40px; gap: 10px; align-items: center; min-height: 34px; font-size: 12.5px; }
.funnel-row .fr-label { font-weight: 500; }
.funnel-bar-track { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; height: 22px; overflow: hidden; }
.funnel-bar { height: 100%; background: var(--g, var(--blue2)); border-radius: 3px; transform-origin: left; }
.funnel-row .fr-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rtable td { padding: 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rtable td.num, .rtable th.num { text-align: right; }
.big-number { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.stat-row { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.stat .slabel { font-size: 11.5px; color: var(--ink-soft); font-weight: 500; }

/* ── Empty states & misc ───────────────────────────────── */
.empty {
  padding: 44px 20px; text-align: center; color: var(--ink-soft);
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
}
.empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.loading { padding: 40px; text-align: center; color: var(--ink-faint); }

.toasts { position: fixed; left: 20px; bottom: 20px; z-index: 90; display: grid; gap: 8px; }
.toast {
  background: var(--ink); color: #fff;
  border-radius: 8px; padding: 12px 18px; font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast--err { background: var(--danger); }

/* ── Task Ledger — ledger ids, repo paths, the Harel ask-cards ── */
.task-id {
  color: var(--ink-faint); font-weight: 600; font-size: 11px;
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
  margin-right: 8px;
}
.chip-row { display: inline-flex; gap: 4px; }
/* ledger links are repo paths, not URLs — render as a quiet path token */
.path {
  font-size: 12px; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 7px; overflow-wrap: anywhere;
}
.ask-list { display: grid; gap: 10px; }
.ask-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);            /* gold = the Harel/identity accent (§3) */
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
  padding: 14px 16px; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ask-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(17,36,64,.12); }
.ask-card--muted { border-left-color: var(--line-strong); opacity: .82; }
.ask-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.ask-head h4 { margin: 0; font-size: 13.5px; font-weight: 600; flex: 1; min-width: 220px; }
.ask-text { font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; max-width: 76ch; }
.ask-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-soft); }
.deliv {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.deliv:last-child { border-bottom: 0; }

/* connect / auth-gate screen */
.gate { max-width: 460px; margin: 10vh auto; }
.gate .rcard { padding: 30px; }
.gate h2 { margin-bottom: 8px; }
.gate p { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 14px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 860px) {
  .shell { grid-template-columns: 64px 1fr; }
  .sidebar { padding: 14px 8px; }
  .brand-name, .side-label, .side-foot { display: none; }
  .side-brand { justify-content: center; padding: 4px 0 12px; }
  .board-list a { justify-content: center; padding: 0; font-size: 0; gap: 0; }
  .b-ico { font-size: 16px; }
  .nav-badge { position: absolute; font-size: 10px; margin: 0; transform: translate(14px, -12px); }
  .board-list li { position: relative; }
  .topbar, .board { padding-left: 14px; padding-right: 14px; }
}

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