/* ==========================================================================
   Civix — foundation
   Palette and type hierarchy are Civix's (docs/brand.md). The graphic system
   from the identity guide (graph-paper grid, snapped rectangles, corner +
   marks) is deliberately not used — see docs/decisions.md D11.
   ========================================================================== */

:root{
  /* --- Civix palette, exact values from the identity guide --------------- */
  --green:#00FF82;
  --ivory:#FCFCE8;
  --ink:#1F1F1F;
  --white:#FCFCFC;
  --gray:#808080;

  /* --- neutrals derived from ink/ivory. Solid, not alpha, so measured
         contrast is exact regardless of what sits behind them ------------- */
  --ground:#F3F3EC;   /* app ground: ivory pulled toward warm gray */
  --ink-2:#57574F;    /* secondary text — 7.1:1 on white */
  --ink-3:#66665C;    /* helper text    — 5.7:1 on white, 5.2:1 on ground */
  --line:#D8D8C9;     /* card + panel hairlines */
  --line-2:#C2C2B2;   /* interior hairlines, tag edges */
  --line-3:#8F8F86;   /* interactive control edges */

  /* --- status. The only two hues beyond the brand; both warm and
         desaturated so they sit with ivory rather than fight it ----------- */
  --warm-bg:#FBF0D9; --warm-fg:#7A5106;   /* ממתינה לאישור — 6.1:1 */
  --neg-bg:#FCEAE7;  --neg-fg:#9A2B1C;    /* נדחתה — 6.6:1 */

  /* --- type. Swap these three when Civix licences the real faces (D7) ---- */
  --font-head:"Heebo","Arial Hebrew",system-ui,sans-serif;  /* Narkiss Block Bold */
  --font-sub:"Rubik","Arial Hebrew",system-ui,sans-serif;   /* Sunday Medium */
  --font-body:"Heebo","Arial Hebrew",system-ui,sans-serif;  /* Narkiss Block Regular */

  --r-card:14px;
  --r-ctl:10px;
  --r-sm:8px;
  --pad:clamp(16px,4vw,44px);
  --card-pad:clamp(16px,3.4vw,22px);
  --tap:44px;   /* every product control clears this at mobile widths */
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 15px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,p,dl,dd,dt,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
fieldset{ margin:0; padding:0; border:0; min-inline-size:0; }
svg{ display:block; }

/* Focus must be loud — there are no shadows in this system to lean on. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* Numerals. Isolate only — never set `direction` here: on an element that also
   does layout, `direction:ltr` silently flips how margin-inline-* resolves.
   Two earlier mockups shipped that bug. Keep this class on leaf spans. */
.num{ unicode-bidi:isolate; font-variant-numeric:tabular-nums lining-nums; }

/* ==========================================================================
   Typography
   ========================================================================== */
.h1{ font:800 clamp(24px,4.4vw,32px)/1.2 var(--font-head); letter-spacing:-.01em; }
.h2{ font:700 clamp(18px,2.6vw,21px)/1.3 var(--font-head); }
.h3{ font:700 16px/1.35 var(--font-head); }
.eyebrow{
  font:600 12.5px/1.4 var(--font-sub);
  letter-spacing:.02em; color:var(--ink-3);
}
.help{ font:400 13px/1.5 var(--font-body); color:var(--ink-3); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-block-size:var(--tap); padding-inline:18px;
  border-radius:var(--r-ctl); border:1px solid transparent;
  font:600 14.5px/1 var(--font-sub); text-decoration:none;
  transition:background-color .12s ease, border-color .12s ease;
}
.btn--primary{
  /* Ink on green measures 12.3:1. The hairline keeps the green fill visible
     against a light ground, where #00FF82 is otherwise almost invisible. */
  background:var(--green); color:var(--ink); border-color:var(--ink);
}
.btn--primary:hover{ background:#00E576; }
.btn--secondary{ background:var(--white); color:var(--ink); border-color:var(--line-3); }
.btn--secondary:hover{ background:var(--ivory); }
.btn--ghost{ color:var(--ink-2); }
.btn--ghost:hover{ background:var(--ivory); color:var(--ink); }
.btn--full{ inline-size:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field{ display:block; margin-block-end:18px; }
.field__label{
  display:block; margin-block-end:6px;
  font:600 13.5px/1.4 var(--font-sub);
}
.field__req{ color:var(--neg-fg); }
.input,.select,.textarea{
  inline-size:100%; min-block-size:var(--tap);
  padding:10px 14px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line-3); border-radius:var(--r-ctl);
  transition:border-color .12s ease;
}
.textarea{ min-block-size:88px; padding-block:12px; resize:vertical; }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--ink-3); }
.input::placeholder,.textarea::placeholder{ color:var(--ink-3); opacity:1; }
.input[aria-invalid="true"]{ border-color:var(--neg-fg); }
.field__error{
  display:block; margin-block-start:6px;
  font:500 13px/1.45 var(--font-body); color:var(--neg-fg);
}
.field__help{ display:block; margin-block-start:6px; }

/* ==========================================================================
   Cards, panels
   ========================================================================== */
.card{
  background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-card);
}
.card__body{ padding:var(--card-pad); }
.card__foot{
  padding:12px var(--card-pad);
  background:var(--ivory);
  border-block-start:1px solid var(--line);
  border-end-start-radius:var(--r-card); border-end-end-radius:var(--r-card);
}

/* A card whose heading link stands for the whole card. The title alone is a
   25px target; stretching it keeps the type scale and gives the full card. */
.card--linked{ position:relative; }
.card--linked .init__name a::after{
  content:""; position:absolute; inset:0;
  border-radius:var(--r-card);
}
.card--linked:hover{ border-color:var(--line-3); }
/* Controls in the foot must stay above the stretched link. */
.card--linked .card__foot{ position:relative; z-index:1; }

/* ==========================================================================
   Flash messages
   ========================================================================== */
.flashes{ display:grid; gap:10px; margin-block-end:20px; }
.flash{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:var(--r-ctl);
  border:1px solid var(--line-2); background:var(--white);
  font:500 14px/1.5 var(--font-body);
}
.flash--success{ background:#EAF9F0; border-color:#A8DCBE; color:#12492C; }
.flash--warning{ background:var(--warm-bg); border-color:#E3C98F; color:var(--warm-fg); }
.flash--error{ background:var(--neg-bg); border-color:#E8B4AB; color:var(--neg-fg); }

/* ==========================================================================
   Auth pages — a centred single card, no app shell
   ========================================================================== */
.auth{
  min-block-size:100vh;
  display:grid; place-items:center;
  padding:var(--pad);
  background:var(--ground);
}
.auth__inner{ inline-size:min(100%,420px); }
.auth__brand{
  display:flex; justify-content:center;
  margin-block-end:22px;
}
.auth__logo{
  display:grid; place-items:center;
  padding:14px 22px;
  background:var(--green); border:1px solid var(--ink); border-radius:var(--r-ctl);
}
.auth__logo svg{ inline-size:88px; block-size:auto; }
.auth__title{ margin-block-end:4px; text-align:center; }
.auth__sub{ margin-block-end:24px; text-align:center; color:var(--ink-3); }
.auth__divider{
  display:flex; align-items:center; gap:12px;
  margin-block:20px; color:var(--ink-3);
  font:500 12.5px/1 var(--font-sub);
}
.auth__divider::before,.auth__divider::after{
  content:""; block-size:1px; flex:1; background:var(--line-2);
}
.auth__foot{
  margin-block-start:18px; text-align:center;
  font:400 13.5px/1.5 var(--font-body);
}
.auth__foot a{ color:var(--ink); text-underline-offset:3px; }

/* Google button: white with a real border, per Google's branding rules. */
.btn--google{
  background:var(--white); color:var(--ink); border-color:var(--line-3);
}
.btn--google:hover{ background:#F1F1EA; }
.btn--google svg{ inline-size:18px; block-size:18px; }

/* ==========================================================================
   App shell
   ========================================================================== */
.app{ display:grid; grid-template-columns:minmax(0,1fr); min-block-size:100vh; }
@media (min-width:1024px){ .app{ grid-template-columns:264px minmax(0,1fr); } }

.sidebar{ display:none; }
@media (min-width:1024px){
  .sidebar{
    display:flex; flex-direction:column; gap:8px;
    padding:20px 16px;
    background:var(--white);
    border-inline-start:1px solid var(--line);   /* RTL: sidebar sits at the start edge */
    position:sticky; inset-block-start:0; block-size:100vh;
  }
}
.sidebar__logo{
  display:grid; place-items:center;
  padding:12px 16px; margin-block-end:18px;
  background:var(--green); border:1px solid var(--ink); border-radius:var(--r-ctl);
}
.sidebar__logo svg{ inline-size:74px; block-size:auto; }

.nav{ display:grid; gap:4px; }
.nav__item{
  display:flex; align-items:center; gap:10px;
  min-block-size:var(--tap); padding-inline:12px;
  border-radius:var(--r-ctl); text-decoration:none;
  font:600 14.5px/1 var(--font-sub); color:var(--ink-2);
}
.nav__item:hover{ background:var(--ivory); color:var(--ink); }
.nav__item[aria-current="page"]{ background:var(--ivory); color:var(--ink); }
.nav__item[aria-current="page"] .nav__dot{ background:var(--green); border-color:var(--ink); }
.nav__dot{
  inline-size:10px; block-size:10px; flex:none; border-radius:50%;
  background:transparent; border:1px solid var(--line-2);
}

.sidebar__user{
  margin-block-start:auto; padding:12px;
  border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--ivory);
  display:flex; align-items:center; gap:10px;
}
.avatar{
  inline-size:34px; block-size:34px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--ink); color:var(--ivory);
  font:700 13px/1 var(--font-sub);
}
.sidebar__user .who{ min-inline-size:0; }
.sidebar__user .who b{ display:block; font:700 13.5px/1.3 var(--font-head); }
.sidebar__user .who span{ display:block; font:400 12.5px/1.3 var(--font-body); color:var(--ink-3); }

/* mobile top bar + bottom nav */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--pad);
  background:var(--white); border-block-end:1px solid var(--line);
  position:sticky; inset-block-start:0; z-index:20;
}
.topbar__logo{
  display:grid; place-items:center; padding:7px 12px;
  background:var(--green); border:1px solid var(--ink); border-radius:var(--r-sm);
}
.topbar__logo svg{ inline-size:56px; block-size:auto; }
@media (min-width:1024px){ .topbar{ display:none; } }
/* The bar is sticky and 55px tall, so a section reached by an in-page anchor
   (the dashboard's "קישור הרשמה" -> #links) would open underneath it. */
:target{ scroll-margin-block-start:72px; }

.tabbar{
  position:sticky; inset-block-end:0; z-index:20;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--white); border-block-start:1px solid var(--line);
}
.tabbar a{
  display:grid; place-items:center; gap:2px;
  min-block-size:56px; padding:6px;
  font:600 11.5px/1.2 var(--font-sub); color:var(--ink-3); text-decoration:none;
}
.tabbar a:hover{ color:var(--ink); background:var(--ivory); }
.tabbar a[aria-current="page"]{ color:var(--ink); background:var(--ivory); }
@media (min-width:1024px){ .tabbar{ display:none; } }

.main{ min-inline-size:0; padding:var(--pad); padding-block-end:32px; }

/* ==========================================================================
   Page header
   ========================================================================== */
.page{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  margin-block-end:22px;
}
.page__titles{ flex:1 1 240px; min-inline-size:0; }
.page__deck{ margin-block-start:4px; }

/* ==========================================================================
   Budget
   ========================================================================== */
.pots{ display:grid; gap:14px; margin-block-end:26px; }
@media (min-width:700px){ .pots{ grid-template-columns:1fr 1fr; } }

.pot__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pot__name{ font:600 13.5px/1.3 var(--font-sub); }
.pot__left{ font:800 26px/1.1 var(--font-head); margin-block:8px 2px; }
.pot__of{ font:400 13px/1.4 var(--font-body); color:var(--ink-3); }
.bar{
  block-size:10px; margin-block-start:12px;
  background:var(--ivory); border:1px solid var(--line-2); border-radius:999px;
  overflow:hidden;
}
.bar__fill{
  block-size:100%;
  /* The ink hairline keeps the green readable on a light track -- #00FF82 is
     luminance .73 and otherwise nearly invisible here. */
  background:var(--green); border-inline-end:1px solid var(--ink);
}

/* ==========================================================================
   Initiative cards
   ========================================================================== */
.cards{ display:grid; gap:16px; }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); } }

.init__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.init__name{ font:700 17px/1.3 var(--font-head); }
.init__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-block-start:10px; }
.chip{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  background:var(--ivory); border:1px solid var(--line-2);
  font:500 12.5px/1.5 var(--font-body);
}
.facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  margin-block-start:14px; padding-block-start:14px;
  border-block-start:1px solid var(--line);
}
.facts dt{ font:600 12px/1.3 var(--font-sub); color:var(--ink-3); }
.facts dd{ font:700 15px/1.3 var(--font-head); margin-block-start:3px; }

.badge{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:5px 11px; border-radius:999px;
  font:600 12.5px/1 var(--font-sub); border:1px solid transparent;
}
.badge::before{ content:""; inline-size:7px; block-size:7px; border-radius:50%; background:currentColor; }
.badge--approved{ background:var(--green); color:var(--ink); border-color:var(--ink); }
.badge--active  { background:var(--white); color:var(--ink); border-color:var(--ink); }
.badge--pending { background:var(--warm-bg); color:var(--warm-fg); border-color:#E3C98F; }
.badge--rejected{ background:var(--neg-bg); color:var(--neg-fg); border-color:#E8B4AB; }
.badge--draft   { background:var(--ivory); color:var(--ink-2); border-color:var(--line-2); }
.badge--done    { background:var(--ivory); color:var(--ink-2); border-color:var(--line-2); }

.rowacts{ display:flex; flex-wrap:wrap; gap:8px; }
.rowacts .btn{ min-block-size:var(--tap); padding-inline:14px; font-size:13.5px; }

.empty{
  padding:36px var(--card-pad); text-align:center;
  border:1px dashed var(--line-2); border-radius:var(--r-card); background:var(--white);
}

/* The forgot-password link is a real tap target on a phone, not decoration.
   WCAG 2.2 AA wants 24px minimum for pointer targets; give it the full 44. */
.auth__foot a{
  display:inline-flex; align-items:center;
  min-block-size:var(--tap); padding-inline:8px;
}

/* ==========================================================================
   Editable list rows (Settings)
   ========================================================================== */
.rows{ display:grid; }
.row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px var(--card-pad);
  border-block-start:1px solid var(--line);
}
.row:first-child{ border-block-start:0; }
.row--off{ background:var(--ivory); }
.row--off .row__label{ color:var(--ink-3); text-decoration:line-through; }
.row__label{ flex:1 1 180px; min-inline-size:0; font:500 15px/1.4 var(--font-body); }
.row__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row__acts{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.row__acts form{ display:contents; }

/* Icon-sized controls still need a real 44px hit area. */
.iconbtn{
  display:inline-grid; place-items:center;
  inline-size:var(--tap); block-size:var(--tap);
  border:1px solid var(--line-3); border-radius:var(--r-sm);
  background:var(--white); font:600 15px/1 var(--font-sub);
}
.iconbtn:hover:not([disabled]){ background:var(--ivory); }
.iconbtn--danger:hover:not([disabled]){ background:var(--neg-bg); color:var(--neg-fg); border-color:#E8B4AB; }
/* No pointer-events:none — a native [disabled] button already ignores clicks
   and cannot be focused, and suppressing pointer events also suppresses the
   title tooltip that explains *why* it is disabled ("בשימוש — אפשר להשבית"). */
.iconbtn[disabled]{ opacity:.35; cursor:default; }

.row__edit{ display:flex; gap:8px; flex:1 1 240px; }
.row__edit .input{ min-block-size:var(--tap); }

.tag{
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  font:600 11.5px/1.5 var(--font-sub);
  background:var(--ivory); border:1px solid var(--line-2); color:var(--ink-2);
}
.tag--locked{ background:transparent; }
/* A tag that is a link must not look identical to one that is only a label —
   "צפייה בחשבונית" sits next to "ללא חשבונית" in the same column. */
a.tag{
  min-block-size:28px; color:var(--ink); border-color:var(--line-3);
  text-decoration:underline; text-underline-offset:2px;
  transition:background-color .12s ease, border-color .12s ease;
}
a.tag:hover{ background:var(--white); border-color:var(--ink); }

.addbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  padding:var(--card-pad);
  border-block-start:1px solid var(--line); background:var(--ivory);
  border-end-start-radius:var(--r-card); border-end-end-radius:var(--r-card);
}
.addbar .field{ flex:1 1 220px; margin:0; }

.backlink{
  display:inline-flex; align-items:center; gap:6px;
  min-block-size:var(--tap);
  font:600 13.5px/1 var(--font-sub); color:var(--ink-2); text-decoration:none;
}
.backlink:hover{ color:var(--ink); }

/* Screen-reader-only label. Visible to assistive tech, invisible on screen. */
.visually-hidden{
  position:absolute; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ==========================================================================
   Choice chips — real radios/checkboxes underneath, so keyboard and screen
   readers get proper semantics and the browser handles grouping for us.
   ========================================================================== */
.chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.chipset input{
  position:absolute; inline-size:1px; block-size:1px;
  opacity:0; pointer-events:none;
}
.chipset label{
  display:inline-flex; align-items:center; gap:7px;
  min-block-size:var(--tap); padding-inline:15px;
  border:1px solid var(--line-3); border-radius:999px;
  background:var(--white); cursor:pointer;
  font:500 14.5px/1 var(--font-body);
  transition:background-color .12s ease, border-color .12s ease;
}
.chipset label::before{
  content:""; inline-size:9px; block-size:9px; flex:none;
  border-radius:50%; border:1px solid var(--line-3); background:transparent;
}
/* A round marker on a checkbox reads as "pick one of these". Square it so a
   multi-select group looks like one to a visitor with no training. */
.chipset input[type="checkbox"] + label::before{ border-radius:3px; }
.chipset label:hover{ background:var(--ivory); border-color:var(--ink-3); }
.chipset input:checked + label{
  background:var(--ivory); border-color:var(--ink); font-weight:600;
}
.chipset input:checked + label::before{
  background:var(--green); border-color:var(--ink);
}
.chipset input:focus-visible + label{ outline:2px solid var(--ink); outline-offset:2px; }

/* Radio groups rendered as a segmented control */
.seg{ display:inline-flex; flex-wrap:wrap; gap:0; }
.seg input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.seg label{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:var(--tap); padding-inline:18px;
  border:1px solid var(--line-3); cursor:pointer;
  font:500 14.5px/1 var(--font-body); background:var(--white);
}
.seg label:first-of-type{
  border-start-start-radius:var(--r-ctl); border-end-start-radius:var(--r-ctl);
}
.seg label:last-of-type{
  border-start-end-radius:var(--r-ctl); border-end-end-radius:var(--r-ctl);
}
.seg label + input + label{ margin-inline-start:-1px; }
/* Hover, like every other control in the system. The z-index keeps the hovered
   segment's darker edge above its neighbour's, which the -1px overlap hides. */
.seg label:hover{ background:var(--ivory); border-color:var(--ink-3); position:relative; z-index:1; }
.seg input:checked + label{
  background:var(--ink); color:var(--ivory); border-color:var(--ink); font-weight:600;
}
/* The chosen segment still needs a hover, just a quieter one: ivory on ink-2
   measures 7.0:1, so the label stays readable while the fill visibly lifts. */
.seg input:checked + label:hover{ background:var(--ink-2); border-color:var(--ink-2); }
.seg input:focus-visible + label{ outline:2px solid var(--ink); outline-offset:2px; }

/* Form sections */
.fieldset{
  padding:var(--card-pad);
  border-block-start:1px solid var(--line);
}
.fieldset:first-child{ border-block-start:0; }
.fieldset__legend{
  display:block; margin-block-end:12px;
  font:700 15px/1.3 var(--font-head);
}
.inline{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.inline > *{ flex:1 1 180px; }
.inline > .grow-0{ flex:0 0 auto; }

.affix{ position:relative; }
.affix .input{ padding-inline-start:34px; }
.affix__sign{
  position:absolute; inset-inline-start:12px; inset-block-start:50%;
  transform:translateY(-50%); color:var(--ink-3); pointer-events:none;
  font:600 15px/1 var(--font-sub);
}

/* Repeatable "+ add" rows */
.needs{ display:grid; gap:10px; }
.need{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:10px; border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--white);
}
.need select{ flex:0 1 190px; }
.need input{ flex:1 1 200px; }
.addneed{
  display:flex; align-items:center; justify-content:center; gap:8px;
  inline-size:100%; min-block-size:var(--tap);
  border:1px dashed var(--line-3); border-radius:var(--r-ctl);
  background:transparent; font:600 14px/1 var(--font-sub); color:var(--ink-2);
}
.addneed:hover{ background:var(--ivory); border-color:var(--ink-3); color:var(--ink); }

.formfoot{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;
  padding:var(--card-pad);
  border-block-start:1px solid var(--line); background:var(--ivory);
  border-end-start-radius:var(--r-card); border-end-end-radius:var(--r-card);
}
.notechip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:var(--ivory); border:1px solid var(--line-2);
  font:500 12px/1.5 var(--font-body); color:var(--ink-2);
}

/* ==========================================================================
   Kanban board
   ========================================================================== */
.board{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start;
}
.col{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  min-inline-size:0;
}
.col__head{
  display:flex; align-items:center; gap:8px;
  padding:12px var(--card-pad);
  border-block-end:1px solid var(--line);
  background:var(--ivory);
  border-start-start-radius:var(--r-card); border-start-end-radius:var(--r-card);
}
.col__title{ font:700 14.5px/1.3 var(--font-head); }
.col__count{
  margin-inline-start:auto;
  display:inline-grid; place-items:center;
  min-inline-size:24px; block-size:24px; padding-inline:7px;
  border-radius:999px; border:1px solid var(--line-2); background:var(--white);
  font:600 12.5px/1 var(--font-sub);
}
.col__body{ display:grid; gap:10px; padding:var(--card-pad); }
.col__empty{ padding:18px var(--card-pad); text-align:center; }

.kcard{
  position:relative;   /* anchors the stretched title link below */
  display:block; padding:12px;
  border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--white); text-decoration:none; color:inherit;
}
.kcard:hover{ border-color:var(--ink-3); background:var(--ivory); }
.kcard__name{ font:700 15px/1.35 var(--font-head); }
/* The title is the only route into the initiative, and as a bare text link it
   is a 22px target. Stretch it over the whole card — which already hovers as
   one object — instead of padding the heading out of its type scale. */
.kcard__name::after{
  content:""; position:absolute; inset:0;
  border-radius:var(--r-ctl);
}
.kcard__meta{
  display:flex; flex-wrap:wrap; gap:6px 10px;
  margin-block-start:8px;
  font:400 12.5px/1.4 var(--font-body); color:var(--ink-3);
}
/* Above the stretched link, so approve/reject stay clickable. */
.kcard__acts{ position:relative; z-index:1; display:flex; gap:8px; margin-block-start:10px; }
/* The approve button is wrapped in its own <form>; without this the form is the
   flex item and `flex:1` never reaches the button, so approve rendered at 55px
   against a 220px reject. Same trick as .row__acts form. */
.kcard__acts form{ display:contents; }
.kcard__acts .btn{ flex:1; min-block-size:var(--tap); padding-inline:10px; font-size:13.5px; }
.waiting{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; margin-block-start:8px; border-radius:999px;
  background:var(--warm-bg); border:1px solid #E3C98F; color:var(--warm-fg);
  font:600 11.5px/1.5 var(--font-sub);
}

dialog.modal{
  inline-size:min(92vw,440px); padding:0;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--white); color:var(--ink);
}
dialog.modal::backdrop{ background:rgba(31,31,31,.45); }
.modal__body{ padding:var(--card-pad); }
.modal__foot{
  display:flex; gap:8px; justify-content:flex-end;
  padding:var(--card-pad); background:var(--ivory);
  border-block-start:1px solid var(--line);
  border-end-start-radius:var(--r-card); border-end-end-radius:var(--r-card);
}

/* ==========================================================================
   Satisfaction scale — real radios, big targets, works without JS
   ========================================================================== */
/* Five equal columns, never wrapped. As flex with a 92px basis the row broke
   into 3 + 2 at 375px, and the two survivors on the second row rendered half
   as wide again as the first three -- a 1-5 scale that reads as two unequal
   groups. A 5-track grid keeps the run intact: 55px per option at 375px,
   still clear of the 44px tap minimum. */
.scale{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.scale input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.scale label{
  display:grid; place-items:center; gap:2px;
  min-block-size:64px; padding:8px 4px;
  border:1px solid var(--line-3); border-radius:var(--r-ctl);
  background:var(--white); cursor:pointer; text-align:center;
  font:500 13px/1.3 var(--font-body);
}
.scale label b{ font:800 19px/1 var(--font-head); }
.scale label:hover{ background:var(--ivory); border-color:var(--ink-3); }
.scale input:checked + label{
  background:var(--green); border-color:var(--ink); font-weight:700;
}
.scale input:focus-visible + label{ outline:2px solid var(--ink); outline-offset:2px; }

/* Media grid */
.gallery{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.gallery figure{ margin:0; border:1px solid var(--line); border-radius:var(--r-ctl); overflow:hidden; background:var(--white); }
.gallery img, .gallery video{ inline-size:100%; block-size:130px; object-fit:cover; display:block; }
.gallery figcaption{ padding:8px 10px; font:400 12.5px/1.4 var(--font-body); color:var(--ink-3); }
.gallery form{ padding:0 10px 10px; }

/* Calendar */
/* A month is seven columns or it is not a month, so the grid cannot reflow.
   At 375px that left each cell 48px wide and every event chip clipped to about
   four characters. Give the grid a floor and let it scroll inside its own box —
   the page itself still has zero horizontal overflow. */
.cal__scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; min-inline-size:620px; }
.cal__dow{ background:var(--ivory); padding:8px 6px; text-align:center; font:600 12px/1 var(--font-sub); color:var(--ink-2); }
.cal__day{ background:var(--white); min-block-size:96px; padding:6px; }
.cal__day--out{ background:var(--ground); }
.cal__num{ font:600 12px/1 var(--font-sub); color:var(--ink-3); }
.cal__ev{
  display:flex; align-items:center; inline-size:100%; margin-block-start:4px; padding:4px 6px;
  border-radius:var(--r-sm); border:1px solid var(--ink);
  font:600 11.5px/1.3 var(--font-sub); text-align:start;
  overflow:hidden; white-space:nowrap; cursor:pointer;
  transition:filter .12s ease;
}
/* The chip is a flex box so the label can centre against the 44px touch height,
   but text-overflow cannot ellipsise an anonymous flex item — and flex strips
   the space between the time and the name, so it read "18:00ערב קהילתי".
   Truncation belongs on a real inline child. */
.cal__ev__txt{
  min-inline-size:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* It opens a modal, so it has to read as a control and not a coloured label.
   `filter` rather than a background override: the fill is the settlement's
   colour, set inline, and there is no token to swap it for. */
.cal__ev:hover{ filter:brightness(.94); }
/* Wherever the phone shell is up, the chip is a touch target like any other. */
@media (max-width:1023px){ .cal__ev{ min-block-size:var(--tap); } }
.cal__legend{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:14px; }
.cal__key{ display:inline-flex; align-items:center; gap:6px; font:500 12.5px/1 var(--font-body); }
.cal__swatch{ inline-size:12px; block-size:12px; border-radius:3px; border:1px solid var(--ink); }

/* BI stat tiles */
.stats{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-block-end:22px; }
.stat{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; }
.stat__k{ font:600 12.5px/1.3 var(--font-sub); color:var(--ink-3); }
.stat__v{ font:800 28px/1.1 var(--font-head); margin-block-start:6px; }
.stat__sub{ font:400 12.5px/1.4 var(--font-body); color:var(--ink-3); margin-block-start:4px; }

.hbar{ display:grid; gap:8px; }
.hbar__row{ display:grid; grid-template-columns:minmax(80px,140px) 1fr auto; gap:10px; align-items:center; }
.hbar__label{ font:500 13.5px/1.3 var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Track and fill are <span>s in the markup. The track is blockified by the grid,
   but the fill is not — leave it inline and `inline-size:<pct>` is ignored, so
   every bar renders empty. Block them both explicitly. */
.hbar__track{ display:block; block-size:14px; background:var(--ivory); border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.hbar__fill{ display:block; block-size:100%; max-inline-size:100%; background:var(--green); border-inline-end:1px solid var(--ink); }
.hbar__val{ font:700 13.5px/1 var(--font-head); min-inline-size:44px; text-align:end; }