/* ============================================================================
   GroupiApp — design-v2.css  ·  «נועז» (v2)  ·  W-135  ·  22.10.2026
   design-system-manager · G4: ראיות ב-Reports/evidence/2026-10-22-v2-system/

   מה זה: שכבת הרכיבים המשותפת של כיוון v2 (הקומפים ב-Reports/design/2026-10-22-impeccable/v2-bolder/).
   תוסף, לא החלפה: **כל מחלקה כאן מתחילה ב-v2-**, ואף כלל לא נוגע באלמנט חשוף או במחלקה
   קיימת. דף שלא טוען את הקובץ הזה לא משתנה בפיקסל. דף שטוען אותו מקבל רק את מה שביקש.

   איך טוענים (שורה אחת בכל דף, אחרי style.css ולפני ה-CSS של הדף):
     <link rel="stylesheet" href="/design-v2.css">
   למה קובץ נפרד ולא בלוק ב-style.css: (1) style.css הוא 3,000+ שורות שנטענות בכל עמוד, כולל
   אלה שלא יעברו ל-v2; (2) קובץ נפרד = diff נקי לסוקר G4 ולטסט המבנה; (3) סוכני הדפים לא
   מתנגשים בעריכה של קובץ משותף. המחיר: בקשת רשת אחת לדף, כ-12KB לפני דחיסה.

   כללי ברזל של הקובץ (נאכפים ב-test/design-v2-system.test.js):
     · תכונות לוגיות בלבד — אפס left / right בכל צורה (גם margin-left, text-align:right, to right).
     · אפס צבע גולמי — אין #hex, rgb(), hsl(). הכל טוקן של style.css או color-mix של טוקן.
     · אפס z-index מספרי — רק --z-filter / --z-actionbar / שכבות קיימות.
     · יעד מגע ≥44px (--v2-tap) בכל פקד. פוקוס: הטבעת הגלובלית של style.css, outline ≥3px.
     · hover רק תחת (hover:hover) and (pointer:fine). תנועה רק תחת no-preference.
       **זוויות התצלום אינן תנועה ואינן מתבטלות** (ch07 §7.11.4).
   ========================================================================== */

:root{
  /* טוקני רכיב — שכבה 3. ערכי גיאומטריה בלבד; צבעים תמיד מ-style.css. */
  --v2-tap:44px;
  --v2-row-time-w:72px;
  --v2-row-thumb:64px;
  --v2-stub-w:340px;
  --v2-feature-photo-w:132px;
  /* איפה נתקע סרגל הסינון. ברירת המחדל 0 = הקומפ (הניווט גולל החוצה).
     בדף עם .nav הדביק של style.css: style="--v2-sticky-top:var(--nav-stick)" על ה-.v2-fbar. */
  --v2-sticky-top:0px;
  --v2-bar-offset:0px;                    /* גובה בר אחר שהסרגל התחתון צריך לשבת מעליו */
  --v2-nav-h:60px;                        /* גובה .nav בזרימה (min-block-size של .nav-in); בשימוש .v2-poster--under-nav */
}

/* ===== 0 · אייקונים — ספרייט חיצוני /icons.svg ==============================
   <svg class="v2-ico" aria-hidden="true"><use href="/icons.svg#i-cal"/></svg>
   האייקון יורש צבע מהטקסט (currentColor). אייקון בלי טקסט לידו: כפתור עם aria-label. */
.v2-ico{ display:inline-block; inline-size:20px; block-size:20px; flex:none; vertical-align:middle }
.v2-ico--sm{ inline-size:14px; block-size:14px }
.v2-ico--lg{ inline-size:28px; block-size:28px }
/* אייקונים מכוונים (i-chev, i-arrow) מצוירים ל-RTL. קדימה = לכיוון סוף השורה.
   --dir: קדימה בשני הכיוונים (מתהפך ב-LTR).  --back: אחורה בשני הכיוונים (מתהפך ב-RTL). */
[dir="ltr"] .v2-ico--dir{ transform:scaleX(-1) }
[dir="rtl"] .v2-ico--back{ transform:scaleX(-1) }

/* ===== 1 · כפתורים — משלימים את .btn / .btn-ghost / .btn-sm / .btn-lg הקיימים ===== */
.v2-btn-quiet{
  background-color:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.v2-btn-icon{ inline-size:var(--v2-tap); min-inline-size:var(--v2-tap); padding-inline:0 }
.v2-btn-block{ inline-size:100% }
.v2-btn-quiet[aria-pressed="true"]{ background-color:var(--signal); color:var(--on-signal); box-shadow:none }
/* W-142: style.css pins `a.btn{color:var(--brand-ink)}` (specificity 0,1,1) so a button inside `.prose` keeps its colour. That rule
   also beats the bare `.v2-btn-quiet` above (0,1,0): a quiet ANCHOR button drew light text on a transparent fill (measured on
   «עוד 1 באותו מקום»). Element + two classes (0,2,1) wins; the pressed state is restated because this rule would otherwise win over it.
   `.v2-btn-icon` only sets the size, so an anchor icon button keeps the colour of its variant (ink fill + brand-ink text, or quiet). */
a.btn.v2-btn-quiet{ color:var(--ink) }
a.btn.v2-btn-quiet[aria-pressed="true"]{ color:var(--on-signal) }
@media (hover:hover) and (pointer:fine){
  .v2-btn-quiet:hover{ background-color:var(--band); opacity:1 }
}

/* ===== 2 · תג וצ'יפ ======================================================== */
/* «הבא בתור» ודומיו: גלולה צהובה על משטח כהה-על-בהיר. --signal הוא "הדבר הבא", לעולם לא הפעולה הראשית. */
.v2-tag{
  display:inline-flex; align-items:center; gap:var(--sp-1); justify-self:start;
  padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-pill);
  background:var(--signal); color:var(--on-signal);
  font-family:var(--font-head); font-weight:700; font-size:var(--t-label); line-height:1.4;
}
.v2-tag .v2-ico{ inline-size:14px; block-size:14px }

.v2-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2); flex:none;
  min-block-size:var(--v2-tap); padding-inline:var(--sp-4);
  border-radius:var(--radius-pill); border:1px solid var(--line-strong);
  background:var(--bg-elev); color:var(--ink);
  font:inherit; font-family:var(--font-head); font-weight:500; font-size:15px; line-height:1.2;
  white-space:nowrap; cursor:pointer;
  transition:background-color var(--dur-ui) var(--ease-out);
}
.v2-chip[aria-pressed="true"],.v2-chip[aria-checked="true"]{
  background:var(--signal); color:var(--on-signal); border-color:var(--signal); font-weight:700;
}
.v2-chip:disabled,.v2-chip[aria-disabled="true"]{ opacity:.5; cursor:not-allowed }
@media (hover:hover) and (pointer:fine){
  .v2-chip:not([aria-pressed="true"]):not([aria-checked="true"]):not(:disabled):hover{ background:var(--band) }
}

/* ===== 3 · כרזה צהובה (poster banner) =======================================
   <section class="v2-poster"><div class="wrap v2-poster__in v2-poster__in--split"> … </div></section>
   הקרקע היא --yellow (בכהה: פיח — היפוך תפקיד, ch07 §7.11.4). הכותרת: Secular One בגודל שהוא הקומפוזיציה. */
.v2-poster{
  position:relative; overflow:hidden;
  background:var(--yellow); color:var(--ink);
  padding-block:var(--sp-5) var(--sp-8);
}
.v2-poster__in{ display:grid; gap:var(--sp-6); align-items:end }
@media (min-width:900px){
  .v2-poster__in--split{ grid-template-columns:7fr 5fr; gap:var(--sp-8) }
}
.v2-poster__title{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--t-poster); line-height:.86; letter-spacing:var(--track-display);
}
.v2-poster__lede{ margin:var(--sp-4) 0 0; max-inline-size:40ch; font-size:var(--t-lede); color:var(--ink-2) }
.v2-eyebrow{ margin:0; font-family:var(--font-head); font-size:var(--t-sm); font-weight:700; letter-spacing:.02em; color:var(--ink) }
/* W-142 (was `.v2-acc-poster` in v2-account.css): a poster that slides up under the sticky nav capsule, so the yellow starts at the very top
   of the page. `.nav` is a 60px capsule stuck 16px down; the title starts below it. For a page whose <main> is edge to edge (the work area,
   the organization page). A page whose first section is not a poster, or that keeps the nav in flow, does not use it. */
.v2-poster--under-nav{
  margin-block-start:calc(var(--v2-nav-h) * -1);
  padding-block:calc(var(--v2-nav-h) + var(--sp-4) + var(--sp-7)) var(--sp-7);
}

/* תצלום נטוי (ch07 §7.11.1). הזווית ב---v2-tilt ואינה מתהפכת ב-RTL ואינה מתבטלת תחת reduced-motion.
   <span class="v2-photo"><img src="…" alt="…"></span>  ·  --lg: תצלום-כרזה גדול
   (W-143: .v2-ico--xl, .v2-poster__rule ו-.v2-photo--ccw נמחקו, אין להם שימוש באף עמוד; נטייה הפוכה: מגדירים --v2-tilt על האלמנט.) */
.v2-photo{
  position:relative; display:block; overflow:hidden; aspect-ratio:4/5;
  border:4px solid var(--bg-elev); background:var(--band);
  border-radius:var(--radius-xl); border-end-start-radius:var(--radius-sm);
  box-shadow:var(--shadow); transform:rotate(var(--v2-tilt, var(--tilt-photo)));
}
.v2-photo > img{ inline-size:100%; block-size:100%; object-fit:cover }
.v2-photo--lg{
  border-width:6px; inline-size:min(72%,320px); justify-self:center;
  border-radius:var(--radius-2xl); border-end-start-radius:var(--radius-sm); box-shadow:var(--shadow-3);
}
/* מובייל: התצלום-כרכרה עולה מעל הכותרת, בצד הסוף, ונוגע בכרטיס שמתחתיו. דסקטופ: עמודה שנייה של .v2-poster__in--split. */
@media (max-width:899px){
  .v2-photo--lg{ order:-1; justify-self:end; inline-size:58%; margin-block-end:calc(var(--sp-2) * -1) }
}

/* כרטיס «הבא בתור» על הכרזה: שעה-גיבור, תצלום צף, פעולה ראשית אחת. */
.v2-feature{
  position:relative; display:grid; gap:var(--sp-3);
  background:var(--bg-elev); color:var(--ink); padding:var(--sp-5);
  border-radius:var(--radius-2xl); border-end-start-radius:var(--radius-sm); box-shadow:var(--shadow-3);
}
@media (min-width:900px){ .v2-feature{ margin-block-start:var(--sp-9) } }   /* מקום לתצלום הצף שמעל הכרטיס */
.v2-feature__photo{
  position:absolute; inset-block-start:calc(var(--sp-9) * -1); inset-inline-end:calc(var(--sp-4) * -1);
  inline-size:var(--v2-feature-photo-w);
}
.v2-feature__title{
  margin:0; font-family:var(--font-display); font-weight:400; font-size:var(--t-title-lg); line-height:1;
  padding-inline-end:calc(var(--v2-feature-photo-w) - var(--sp-3));
}
.v2-feature__day{ font-family:var(--font-head); font-weight:600; font-size:16px; color:var(--ink-2) }
.v2-feature__meta{ display:grid; gap:2px; font-size:var(--t-meta); color:var(--ink-2) }
.v2-feature__meta strong{ color:var(--ink) }
.v2-feature__actions{ display:flex; gap:var(--sp-2); align-items:center; margin-block-start:var(--sp-2) }
.v2-feature__actions > :first-child{ flex:1 }

/* ===== 4 · שעה-גיבור + לוח לפי יום ========================================== */
.v2-time{
  font-family:var(--font-display); font-weight:400; font-size:var(--t-time); line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
}
.v2-time--hero{ font-size:var(--t-time-hero); line-height:.9 }

.v2-day{ margin-block-end:var(--sp-7) }
.v2-day__head{
  display:flex; align-items:baseline; gap:var(--sp-3); margin:0; padding-block-end:var(--sp-3);
  font-family:var(--font-display); font-weight:400; font-size:var(--t-h2); line-height:1;
  border-block-end:3px solid var(--ink);
}
.v2-day__sub{ font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--ink-2) }

.v2-rows{ list-style:none; margin:0; padding:0 }
.v2-row{
  position:relative; display:grid; align-items:center; gap:var(--sp-4);
  grid-template-columns:var(--v2-row-time-w) minmax(0,1fr) var(--v2-row-thumb);
  padding-block:var(--sp-4); border-block-end:1px solid var(--line);
}
.v2-row--nothumb{ grid-template-columns:var(--v2-row-time-w) minmax(0,1fr) }
.v2-row__time{ font-family:var(--font-display); font-size:var(--t-time); line-height:1; font-variant-numeric:tabular-nums lining-nums }
.v2-row__info{ display:grid; gap:2px; min-inline-size:0 }
.v2-row__title{ font-family:var(--font-head); font-weight:700; font-size:var(--t-title-row); line-height:1.3; overflow-wrap:anywhere }
.v2-row__title a{ color:inherit; text-decoration:none }
/* כל השורה לחיצה: הקישור נמתח על ה-li. */
.v2-row__title a::after{ content:""; position:absolute; inset:0 }
.v2-row__sub{ font-size:var(--t-meta); color:var(--ink-2); overflow-wrap:anywhere }
.v2-row__spots{ font-family:var(--font-head); font-weight:600; font-size:var(--t-sm); color:var(--ink) }
.v2-row__thumb{
  inline-size:var(--v2-row-thumb); aspect-ratio:1; object-fit:cover; background:var(--band);
  border-radius:var(--radius-lg); border-end-start-radius:var(--radius-sm);
}
@media (hover:hover) and (pointer:fine){
  .v2-row:hover .v2-row__title{ text-decoration:underline; text-underline-offset:4px }
}
/* הקישור הנמתח: הטבעת עוברת לשורה כולה, כדי שלא תיחתך סביב הטקסט בלבד. */
@supports selector(:has(*)){
  .v2-row__title a:focus-visible{ outline:none; box-shadow:none }
  .v2-row:has(.v2-row__title a:focus-visible){
    outline:3px solid var(--focus-ring); outline-offset:3px; box-shadow:0 0 0 3px var(--bg);
    border-radius:var(--radius-sm);
  }
}

/* בלוק סיום — «זה הכל בסביבתך». הצורה עצמה אומרת שיש סוף (ch07 §7.1). */
.v2-end{
  display:grid; gap:var(--sp-3); justify-items:start;
  background:var(--yellow); color:var(--ink); padding:var(--sp-7) var(--sp-6);
  border-radius:var(--radius-2xl); border-end-start-radius:var(--radius-sm);
}
.v2-end__title{ margin:0; font-family:var(--font-display); font-weight:400; font-size:var(--t-h2); line-height:1 }
.v2-end > p{ margin:0; color:var(--ink-2) }

/* ===== 5 · כרטיס כניסה + ספח ================================================
   <div class="wrap v2-ticket-wrap"><article class="v2-ticket"><div class="v2-ticket__main">…</div><div class="v2-stub">…</div></article></div>
   הניקוב: קו מקווקו + שני חריצים בצבע הרקע. לא גרדיאנט. הכרטיס יושב חצי על הכרזה (v2-ticket-wrap). */
.v2-ticket-wrap{ margin-block-start:calc(var(--sp-9) * -1); --v2-punch-top:var(--yellow) }
.v2-ticket{
  position:relative; display:grid; background:var(--bg-elev); color:var(--ink);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-3);
}
@media (min-width:900px){ .v2-ticket{ grid-template-columns:minmax(0,1fr) var(--v2-stub-w) } }
.v2-ticket__main{ display:grid; gap:var(--sp-5); padding:var(--sp-6) }
@media (min-width:900px){ .v2-ticket__main{ padding:var(--sp-7) var(--sp-8) } }
.v2-ticket__date{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-4) }
.v2-ticket__big{ font-family:var(--font-display); font-size:var(--t-date-xl); line-height:.85; font-variant-numeric:tabular-nums lining-nums }
.v2-ticket__day{ font-family:var(--font-head); font-weight:600; font-size:var(--t-title-row) }
.v2-ticket__day small{ display:block; font-weight:500; font-size:var(--t-meta); color:var(--ink-2) }

.v2-kv{ display:grid; gap:var(--sp-4); margin:0 }
@media (min-width:600px){ .v2-kv{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.v2-kv dt{ margin-block-end:var(--sp-1); font-family:var(--font-head); font-size:var(--t-label); font-weight:700; letter-spacing:.02em; color:var(--ink-2) }
.v2-kv dd{ margin:0; font-family:var(--font-head); font-weight:600; font-size:17px; line-height:1.4; overflow-wrap:anywhere }
.v2-kv dd small{ display:block; font-family:var(--font-body); font-weight:400; font-size:var(--t-sm); color:var(--ink-2) }

.v2-stub{
  position:relative; display:grid; gap:var(--sp-3); align-content:center; padding:var(--sp-6);
  border-block-start:2px dashed var(--line-strong);
}
@media (min-width:900px){
  .v2-stub{ border-block-start:0; border-inline-start:2px dashed var(--line-strong); padding:var(--sp-7) }
}
.v2-stub::before,.v2-stub::after{
  content:""; position:absolute; inline-size:28px; block-size:28px; border-radius:50%; background:var(--v2-punch-side, var(--bg));
}
.v2-stub::before{ inset-block-start:-15px; inset-inline-start:-14px }
.v2-stub::after{ inset-block-start:-15px; inset-inline-end:-14px }
@media (min-width:900px){
  .v2-stub::before{ inset-block-start:-14px; inset-inline-start:-15px; background:var(--v2-punch-top, var(--bg)) }
  .v2-stub::after{ inset-block-start:auto; inset-block-end:-14px; inset-inline-start:-15px; inset-inline-end:auto }
}
.v2-stub__count{ font-family:var(--font-display); font-size:var(--t-stat); line-height:.85; font-variant-numeric:tabular-nums lining-nums }
.v2-stub__label{ margin:0; font-family:var(--font-head); font-weight:600; font-size:17px }
.v2-stub__cta{ inline-size:100%; margin-block-start:var(--sp-2) }
.v2-stub__micro{ margin:0; text-align:center; font-size:var(--t-sm); color:var(--ink-2) }

/* מד תפוסה. הרוחב מגיע מ---v2-fill על האלמנט: <span class="v2-meter" style="--v2-fill:36%">. */
.v2-meter{ display:flex; block-size:8px; overflow:hidden; border-radius:var(--radius-pill); background:var(--line) }
.v2-meter::before{ content:""; display:block; block-size:100%; inline-size:var(--v2-fill, 0%); background:var(--ink); border-radius:inherit }

/* ===== 6 · סרגל סינון דביק + segmented + גיליון בחירה ======================= */
.v2-fbar{
  position:sticky; inset-block-start:var(--v2-sticky-top); z-index:var(--z-filter);
  background:var(--bg); border-block-end:1px solid var(--line);
}
.v2-fbar__in{
  display:flex; align-items:center; gap:var(--sp-2); padding-block:var(--sp-3);
  overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
}
.v2-fbar__in::-webkit-scrollbar{ display:none }

/* <div class="v2-seg" role="group" aria-label="מתי"><button class="v2-seg__btn" aria-pressed="true">הכל</button>…</div> */
.v2-seg{
  display:flex; flex:none; gap:2px; padding:3px;
  background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:var(--radius-pill);
}
.v2-seg__btn{
  min-block-size:var(--v2-tap); min-inline-size:var(--v2-tap); padding-inline:var(--sp-3);
  border:0; border-radius:var(--radius-pill); background:transparent; color:var(--ink-2);
  font:inherit; font-family:var(--font-head); font-weight:500; font-size:15px; line-height:1.2; white-space:nowrap; cursor:pointer;
  transition:background-color var(--dur-ui) var(--ease-out);
}
.v2-seg__btn[aria-pressed="true"],.v2-seg__btn[aria-checked="true"],.v2-seg__btn:has(input:checked){
  background:var(--signal); color:var(--on-signal); font-weight:700;
}
.v2-seg__btn:disabled{ opacity:.5; cursor:not-allowed }
.v2-seg__btn:has(input:focus-visible){ outline:3px solid var(--focus-ring); outline-offset:3px }
.v2-seg__btn input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none }
@media (hover:hover) and (pointer:fine){
  .v2-seg__btn:not([aria-pressed="true"]):not([aria-checked="true"]):not(:disabled):hover{ background:var(--band); color:var(--ink) }
}

/* גיליון בחירה: <dialog class="v2-sheet"> עם showModal() — מלכודת פוקוס ו-Escape מגיעים מהדפדפן.
   מובייל: גיליון תחתון. ≥600px: כרטיס ממורכז. */
.v2-sheet{
  inline-size:min(100%,520px); max-inline-size:100vw; max-block-size:min(85dvh,640px);
  margin-block:auto 0; margin-inline:auto; padding:0; border:0; overflow:hidden;
  background:var(--surface-raised); color:var(--ink); box-shadow:var(--shadow-3);
  border-start-start-radius:var(--radius-2xl); border-start-end-radius:var(--radius-2xl);
  border-end-start-radius:0; border-end-end-radius:0;
}
.v2-sheet[open]{ display:flex; flex-direction:column }
.v2-sheet::backdrop{ background:color-mix(in srgb, var(--p-soot-0) 62%, transparent) }
@media (min-width:600px){
  .v2-sheet{ margin-block:auto; border-radius:var(--radius-2xl); border-end-start-radius:var(--radius-sm) }
}
.v2-sheet__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-block-end:1px solid var(--line);
}
.v2-sheet__title{ margin:0; font-family:var(--font-head); font-weight:700; font-size:var(--t-h3); line-height:1.25 }
.v2-sheet__body{ flex:1; overflow-y:auto; overscroll-behavior:contain }
.v2-sheet__foot{
  display:flex; gap:var(--sp-2); padding:var(--sp-3) var(--sp-5);
  padding-block-end:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-block-start:1px solid var(--line); background:var(--surface-raised);
}
.v2-sheet__foot > .btn{ flex:1 }
@media (prefers-reduced-motion:no-preference){
  .v2-sheet[open]{ animation:v2-sheet-rise var(--dur-enter) var(--ease-out) }
  @keyframes v2-sheet-rise{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
}

/* שורת בחירה בתוך גיליון: <label class="v2-choice"><input type="radio" name="…"><span>טקסט</span></label> */
.v2-choice{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  min-block-size:56px; padding:var(--sp-3) var(--sp-5); border-block-end:1px solid var(--line);
  font-family:var(--font-head); font-size:17px; cursor:pointer;
}
.v2-choice input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none }
.v2-choice::after{
  content:""; flex:none; inline-size:20px; block-size:20px; border-radius:50%; border:2px solid var(--line-strong);
}
.v2-choice:has(input:checked){ background:var(--band); font-weight:700 }
.v2-choice:has(input:checked)::after{
  border-color:var(--ink); background:radial-gradient(circle, var(--ink) 0 38%, transparent 42%);
}
.v2-choice:has(input[type="checkbox"])::after{ border-radius:var(--radius-sm) }
.v2-choice:has(input[type="checkbox"]:checked)::after{ background:var(--ink) }
.v2-choice:has(input[type="checkbox"]:checked)::before{
  content:""; position:absolute; inset-inline-end:calc(var(--sp-5) + 3px); inset-block-start:50%; transform:translateY(-50%);
  inline-size:14px; block-size:14px; background:var(--bg-elev); z-index:1;
  -webkit-mask:var(--v2-check-mask) center/contain no-repeat; mask:var(--v2-check-mask) center/contain no-repeat;
}
.v2-choice:has(input:focus-visible){ outline:3px solid var(--focus-ring); outline-offset:-3px }
.v2-choice:has(input:disabled){ opacity:.5; cursor:not-allowed }
@media (hover:hover) and (pointer:fine){ .v2-choice:hover{ background:var(--band) } }

/* ===== 7 · סרגל פעולות תחתון דביק ===========================================
   <div class="v2-actionbar" role="region" aria-label="…"><p class="v2-actionbar__count">…</p><a class="btn btn-lg">…</a></div>
   ובגוף: <body class="v2-has-actionbar">  (ריפוד תחתון כדי שהתוכן האחרון לא יוסתר).
   --mobile: מוצג עד 899px בלבד (ובדסקטופ הפעולה יושבת בעמודה/בספח). --inline: דביק בתוך הטופס, לא קבוע על המסך. */
.v2-actionbar{
  position:fixed; inset-inline:0; inset-block-end:var(--v2-bar-offset); z-index:var(--z-actionbar);
  display:flex; align-items:center; gap:var(--sp-3); min-block-size:var(--sticky-bar-h);
  padding:var(--sp-3) var(--gutter); padding-block-end:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background:var(--bg-elev); border-block-start:1px solid var(--line);
}
.v2-actionbar > .btn{ flex:1 }
.v2-actionbar__count{ margin:0; font-family:var(--font-head); font-size:var(--t-sm); line-height:1.3; color:var(--ink-2) }
.v2-actionbar__count strong{ display:block; font-size:var(--t-title-row); color:var(--ink) }
@media (min-width:900px){ .v2-actionbar--mobile{ display:none } }
.v2-actionbar--inline{
  position:sticky; inset-inline:auto; inset-block-end:0; margin-inline:calc(var(--gutter) * -1);
}
body.v2-has-actionbar{ padding-block-end:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px)) }
@media (max-width:899px){ body.v2-has-actionbar--mobile{ padding-block-end:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px)) } }
/* כשמעטפת האפליקציה דולקת (app-shell.css): הבר התחתון שלה, 60px, בנייד בלבד. הסרגל יושב מעליו. */
@media (max-width:640px){
  body.gapp-shell-on .v2-actionbar{
    inset-block-end:calc(var(--shell-bottombar, 60px) + env(safe-area-inset-bottom, 0px));
    padding-block-end:var(--sp-3);
  }
}
/* ווידג'ט הנגישות (style.css .a11y-root, פינה תחתונה) לא יושב על הסרגל. */
body.v2-has-actionbar .a11y-root,
body.v2-has-actionbar--mobile .a11y-root{
  inset-block-end:calc(var(--sticky-bar-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
}
@media (max-width:640px){
  body.gapp-shell-on.v2-has-actionbar .a11y-root,
  body.gapp-shell-on.v2-has-actionbar--mobile .a11y-root{
    inset-block-end:calc(var(--sticky-bar-h) + var(--shell-bottombar, 60px) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== 8 · כרטיסי רדיו / check-card ==========================================
   <label class="v2-rc"><input class="v2-rc__input" type="radio" name="vis" checked>
     <span class="v2-rc__title">ציבורי</span><span class="v2-rc__hint">כולם באזור יראו</span></label>
   checkbox: אותו דבר עם type="checkbox" + class="v2-rc v2-rc--check".  גם <button role="radio" aria-checked> נתמך. */
.v2-rc-group{ display:grid; gap:var(--sp-2) }
@media (min-width:600px){ .v2-rc-group{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.v2-rc-group--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.v2-rc{
  position:relative; display:grid; gap:2px; align-content:center; text-align:start;
  min-block-size:56px; padding-block:var(--sp-3);
  padding-inline:var(--sp-4) calc(var(--sp-4) + 20px + var(--sp-3));
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:var(--bg); color:var(--ink); font:inherit; cursor:pointer;
}
.v2-rc__input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none }
.v2-rc__title{ font-family:var(--font-head); font-weight:600; font-size:16px; line-height:1.3 }
.v2-rc__hint{ font-size:var(--t-sm); color:var(--ink-2) }
/* סימן הבחירה: עיגול (radio) או ריבוע (check), בצד הסוף. */
.v2-rc::after{
  content:""; position:absolute; inset-inline-end:var(--sp-4); inset-block-start:50%; transform:translateY(-50%);
  inline-size:20px; block-size:20px; border-radius:50%; border:2px solid var(--line-strong); background:transparent;
}
.v2-rc--check::after{ border-radius:var(--radius-sm) }
.v2-rc[aria-checked="true"],.v2-rc:has(.v2-rc__input:checked){
  border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--bg-elev);
}
.v2-rc[aria-checked="true"]::after,.v2-rc:has(.v2-rc__input:checked)::after{
  border-color:var(--ink); background:radial-gradient(circle, var(--ink) 0 38%, transparent 42%);
}
.v2-rc--check[aria-checked="true"]::after,.v2-rc--check:has(.v2-rc__input:checked)::after{ background:var(--ink) }
/* וי בתוך הריבוע — מסכה, לא תמונה צבעונית: הצבע מגיע מ---bg. */
.v2-rc--check[aria-checked="true"]::before,.v2-rc--check:has(.v2-rc__input:checked)::before{
  content:""; position:absolute; inset-inline-end:calc(var(--sp-4) + 3px); inset-block-start:50%; transform:translateY(-50%);
  inline-size:14px; block-size:14px; background:var(--bg-elev); z-index:1;
  -webkit-mask:var(--v2-check-mask) center/contain no-repeat; mask:var(--v2-check-mask) center/contain no-repeat;
}
.v2-rc:has(.v2-rc__input:focus-visible){ outline:3px solid var(--focus-ring); outline-offset:3px }
.v2-rc[aria-disabled="true"],.v2-rc:has(.v2-rc__input:disabled){ opacity:.5; cursor:not-allowed }
@media (hover:hover) and (pointer:fine){
  .v2-rc:not([aria-checked="true"]):not(:has(.v2-rc__input:checked)):hover{ background:var(--bg-elev) }
}
:root{
  /* מסכת וי. מקור אחד ב-style.css (--mask-check, W-142): שחור במסכה = אטום; הצבע בפועל מגיע מהרקע של הרכיב, ולכן אין כאן צבע של מותג. */
  --v2-check-mask:var(--mask-check);
}

/* ===== 9 · אריח תצלום (קטלוג סוגי פעילות) ===================================
   <div class="v2-tiles" role="radiogroup" aria-label="סוג הפעילות">
     <label class="v2-tile"><input class="v2-tile__input" type="radio" name="cat" value="1">
       <img class="v2-tile__img" src="/img/covers/c01-cafe.webp" alt=""><span class="v2-tile__name">קפה ואוכל</span></label> … */
.v2-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3) }
@media (min-width:600px){ .v2-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:1000px){ .v2-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.v2-tile{
  position:relative; display:grid; grid-template-rows:auto 1fr; overflow:hidden; padding:0; border:0;
  background:var(--bg-elev); color:var(--ink); text-align:start; font:inherit; cursor:pointer; box-shadow:var(--shadow);
  border-radius:var(--radius-lg); border-end-start-radius:var(--radius-sm);
}
.v2-tile__input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none }
.v2-tile__img{ inline-size:100%; aspect-ratio:16/10; object-fit:cover; background:var(--band) }
.v2-tile__name{
  display:flex; align-items:center; min-block-size:48px; padding:var(--sp-2) var(--sp-3);
  font-family:var(--font-head); font-weight:600; font-size:15px; line-height:1.25; overflow-wrap:anywhere;
}
.v2-tile[aria-checked="true"],.v2-tile:has(.v2-tile__input:checked){ outline:3px solid var(--ink); outline-offset:0 }
.v2-tile[aria-checked="true"] .v2-tile__name,.v2-tile:has(.v2-tile__input:checked) .v2-tile__name{
  background:var(--ink); color:var(--bg); font-weight:700;
}
.v2-tile[aria-checked="true"]::after,.v2-tile:has(.v2-tile__input:checked)::after{
  content:""; position:absolute; inset-block-start:var(--sp-2); inset-inline-start:var(--sp-2);
  inline-size:28px; block-size:28px; border-radius:50%; background:var(--ink);
}
.v2-tile[aria-checked="true"]::before,.v2-tile:has(.v2-tile__input:checked)::before{
  content:""; position:absolute; inset-block-start:calc(var(--sp-2) + 5px); inset-inline-start:calc(var(--sp-2) + 5px);
  inline-size:18px; block-size:18px; background:var(--bg); z-index:1;
  -webkit-mask:var(--v2-check-mask) center/contain no-repeat; mask:var(--v2-check-mask) center/contain no-repeat;
}
.v2-tile:has(.v2-tile__input:focus-visible){ outline:3px solid var(--focus-ring); outline-offset:3px }
.v2-tile:disabled,.v2-tile[aria-disabled="true"]{ opacity:.5; cursor:not-allowed }
@media (hover:hover) and (pointer:fine){
  .v2-tile:not([aria-checked="true"]):not(:has(.v2-tile__input:checked)):hover{ box-shadow:var(--shadow-3) }
}

/* ===== 10 · תצוגה חיה «כך זה ייראה בפיד» — מבנה בלבד =========================
   אין כאן לוגיקה. מי שמחווט את השדות הוא הדף. המצב «חסר» (.v2-pv__where--missing) מסמן שדה חובה שעוד לא מולא. */
.v2-live{ display:grid; gap:var(--sp-4) }
@media (min-width:1000px){ .v2-live{ position:sticky; inset-block-start:calc(var(--nav-stick) + var(--sp-5)) } }
@media (max-width:999px){ .v2-live{ order:-1 } }
.v2-live__cap{ margin:0; font-family:var(--font-head); font-size:var(--t-label); font-weight:700; letter-spacing:.02em; color:var(--ink-2) }
.v2-live__note{ margin:0; font-size:var(--t-sm); color:var(--ink-2) }
.v2-live__actions{ display:grid; gap:var(--sp-2) }
/* W-142: the actions hide only where the mobile bar shows: `.v2-actionbar--mobile` is hidden from 900px, so these hide up to 899px.
   (1) The breakpoint: it was 999px, one hundred pixels past the bar, which left 900-999px with neither. (2) The ORDER: this media rule used to sit
   above the base `display:grid` below it, same specificity, so the later rule won and the actions were never hidden at all: on a phone they stood
   next to the bar and the primary action was on the screen twice. It sits after the base rule now, and the test resolves the cascade per width. */
@media (max-width:899px){ .v2-live__actions{ display:none } }
.v2-live__actions > .btn{ inline-size:100% }
.v2-stage{
  background:var(--yellow); padding:var(--sp-7) var(--sp-5) var(--sp-6);
  border-radius:var(--radius-2xl); border-end-start-radius:var(--radius-sm);
}
@media (max-width:999px){ .v2-stage{ padding:var(--sp-6) var(--sp-4) var(--sp-4) } }
.v2-pv{
  position:relative; display:grid; gap:var(--sp-2); padding:var(--sp-5);
  background:var(--bg-elev); color:var(--ink); box-shadow:var(--shadow-3);
  border-radius:var(--radius-xl); border-end-start-radius:var(--radius-sm);
}
.v2-pv__img{
  position:absolute; inset-block-start:calc(var(--sp-7) * -1); inset-inline-end:var(--sp-4); inline-size:96px; aspect-ratio:1;
  border-radius:var(--radius-lg); border-end-start-radius:var(--radius-sm); border:4px solid var(--bg-elev);
  object-fit:cover; background:var(--band); transform:rotate(var(--v2-tilt, var(--tilt-photo)));
}
.v2-pv__cat{ font-family:var(--font-head); font-size:var(--t-label); font-weight:700; color:var(--ink-2) }
.v2-pv__title{ font-family:var(--font-display); font-size:30px; line-height:1; padding-inline-end:calc(96px + var(--sp-3)); overflow-wrap:anywhere }
.v2-pv__when{ font-family:var(--font-head); font-weight:600 }
.v2-pv__where,.v2-pv__spots{ font-size:var(--t-meta); color:var(--ink-2) }
.v2-pv__where--missing{ display:inline-flex; align-items:center; gap:var(--sp-1); font-weight:600; color:var(--ink) }

/* ===== 11 · תג סטטוס — .gas-badge ב-activity-status.css (מיושר לשפה שם, לא כאן) ===== */

/* ===== 12 · חלקי טופס ועמוד שמשותפים לקומפים ===============================
   v2-block: בלוק טופס ממוספר · v2-picker: שורת סיכום שפותחת גיליון · v2-note: הערה עם אייקון
   v2-panel: כרטיס צד · v2-area: המחשת "אזור מקורב" · v2-more: שורות מידע עם קו עבה */
.v2-block{
  display:grid; gap:var(--sp-4); margin-block-end:var(--sp-4); padding:var(--sp-6);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-xl);
}
.v2-block__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3) }
.v2-block__title{ display:flex; align-items:baseline; gap:var(--sp-3); margin:0; font-family:var(--font-head); font-weight:700; font-size:var(--t-h3) }
.v2-block__n{ font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1; color:var(--ink-2) }

.v2-picker{
  display:grid; gap:var(--sp-1); min-block-size:96px; padding:var(--sp-4); text-align:start;
  border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--bg); color:var(--ink);
  font:inherit; cursor:pointer;
}
.v2-picker__k{ display:flex; align-items:center; gap:var(--sp-2); font-family:var(--font-head); font-size:var(--t-sm); font-weight:700; color:var(--ink-2) }
.v2-picker__v{ font-family:var(--font-head); font-weight:700; font-size:var(--t-title-row); line-height:1.3; overflow-wrap:anywhere }
/* שדה חובה שעוד לא מולא: מסגרת מקווקו. אחרי ניסיון פרסום: aria-invalid="true" — מסגרת --danger + הודעה בטקסט. */
.v2-picker--missing{ border:2px dashed var(--ink) }
.v2-picker--missing .v2-picker__v{ font-weight:500; color:var(--ink-2) }
.v2-picker[aria-invalid="true"]{ border:2px solid var(--danger) }
@media (hover:hover) and (pointer:fine){ .v2-picker:hover{ background:var(--bg-elev) } }

.v2-note{
  display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-4);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); font-size:var(--t-sm); line-height:1.6;
}
.v2-note strong{ display:block; margin-block-end:var(--sp-1); font-family:var(--font-head); font-size:15px }

.v2-panel{
  display:grid; gap:var(--sp-3); padding:var(--sp-5);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-xl);
}
.v2-panel__title{ display:flex; align-items:center; gap:var(--sp-2); margin:0; font-family:var(--font-head); font-weight:700; font-size:17px }
.v2-panel > p{ margin:0; font-size:var(--t-sm); color:var(--ink-2) }

.v2-area{
  overflow:hidden; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius-2xl); border-end-start-radius:var(--radius-sm);
}
.v2-area__svg{ display:block; inline-size:100%; block-size:auto; color:var(--ink) }
.v2-area__txt{ display:grid; gap:var(--sp-2); padding:var(--sp-5); font-size:var(--t-meta) }
.v2-area__label{ font-family:var(--font-head); font-size:var(--t-label); font-weight:700; color:var(--ink-2) }

.v2-more{ display:grid; border-block-start:3px solid var(--ink) }
.v2-more__row{ display:grid; gap:var(--sp-2); padding-block:var(--sp-6); border-block-end:1px solid var(--line) }
@media (min-width:900px){ .v2-more__row{ grid-template-columns:4fr 8fr; gap:var(--sp-8) } }
.v2-more__title{ margin:0; font-family:var(--font-head); font-weight:700; font-size:var(--t-h3) }
.v2-more__fine{ margin:var(--sp-2) 0 0; font-size:var(--t-sm); line-height:1.6; color:var(--ink-2) }

/* ===== 13 · מצבי תצוגה מיוחדים =============================================== */
@media (forced-colors:active){
  .v2-meter::before{ background:CanvasText; forced-color-adjust:none }
  .v2-rc[aria-checked="true"],.v2-rc:has(.v2-rc__input:checked){ outline:2px solid Highlight }
  /* W-143 (M1, WCAG 1.4.1 / 1.4.11). The selected state of a segment, a chip and a sheet row IS a yellow fill, and forced-colors mode replaces
     every fill with ButtonFace, so «who is selected» disappeared. It was only handled for [aria-pressed] and as a 2px outline. Two things were
     missing: the radio form of the segment (`<label class="v2-seg__btn"><input type="radio">`, the «מתי» picker in the feed) and `aria-checked`.
     The selected one is now drawn with the system selection pair, which forced-colors mode lets an author opt into per element. */
  .v2-seg__btn[aria-pressed="true"],.v2-seg__btn[aria-checked="true"],.v2-seg__btn:has(input:checked),
  .v2-chip[aria-pressed="true"],.v2-chip[aria-checked="true"],.v2-btn-quiet[aria-pressed="true"]{
    forced-color-adjust:none; background:Highlight; color:HighlightText; outline:2px solid Highlight;
  }
  /* A sheet row marks its choice with a ring/dot/check drawn from backgrounds, which this mode drops. The row itself is outlined instead. */
  .v2-choice:has(input:checked){ outline:2px solid Highlight; outline-offset:-2px }
  .v2-tile[aria-checked="true"],.v2-tile:has(.v2-tile__input:checked){ outline:3px solid Highlight }
}
@media (prefers-reduced-motion:reduce){
  .v2-chip,.v2-seg__btn{ transition:none }
}