/* Motion Vault — shared shell. Neutral on purpose: judging the move, not the design around it. */
/* Ploni (aaa), calibrated: factor 1.19 on sizes, λ 0.8 on line-heights (design-dna font-calibration) */
@font-face{font-family:"Ploni";src:url("fonts/ploni-regular-aaa.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ploni";src:url("fonts/ploni-medium-aaa.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Ploni";src:url("fonts/ploni-demibold-aaa.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Ploni";src:url("fonts/ploni-bold-aaa.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Ploni";src:url("fonts/ploni-ultralight-aaa.woff2") format("woff2");font-weight:100;font-display:swap}
:root{
  --gutter: clamp(24px, 5vw, 96px);
  --fs-h1: clamp(26px, 1.6vw + 0.5rem, 40px);
  --fs-h2: clamp(28px, 1.9vw + 0.5rem, 52px);
  --fs-demo: clamp(36px, 3vw + 0.5rem, 76px);
  --fs-body: clamp(17px, 0.6vw + 0.7rem, 22px);
  --sec: clamp(120px, 12vw, 260px);
  --gap: clamp(16px, 1.6vw, 36px);
  --ink:#16182b; --muted:#6a6d85; --bg:#f7f7fa; --line:#e4e4ee; --accent:#4a3aff;
  --card:#fff; --r:14px;
  --accent-ink:#fff; /* צבע הטקסט על משטח accent. accent בהיר מגדיר כאן כהה (מטריצת העורות, 8.9.2026) */
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;font-family:"Ploni","Heebo",system-ui,sans-serif;font-size:var(--fs-body);line-height:1.35;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
h1{font-size:var(--fs-h1);margin:0}
h2{font-size:var(--fs-h2);margin:0}

/* topbar */
.vtop{position:sticky;top:0;z-index:60;background:rgba(247,247,250,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.vtop-in{display:flex;align-items:center;gap:14px;padding:14px var(--gutter);flex-wrap:wrap}
.vback{font-size:14px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:#fff;transition:color .18s,border-color .18s}
.vback:hover{color:var(--accent);border-color:var(--accent)}
.vtop h1{font-weight:700}
.vid{font-weight:800;color:var(--accent)}
.chip{font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;background:#ececf4;color:#4b4e66;white-space:nowrap}
.chip.cat-gsap{background:#e8f6ee;color:#0a7d4f}
.chip.cat-react{background:#e6f2fb;color:#0b5f9e}
.chip.cat-behavior{background:#f3ecfa;color:#6d3ab0}
.chip.cat-css{background:#fdf0e6;color:#984e0f}
.chip.cat-lm{background:#faecec;color:#b02525}
.chip.cat-misc{background:#ececf4;color:#4b4e66}
.chip.st-approved{background:#e4f6ee;color:#0a7d4f}
.chip.st-pending{background:#fff4dd;color:#7f5800}

/* page intro */
.vintro{padding:clamp(28px,3vw,56px) var(--gutter) 0;max-width:900px}
.vintro p{color:var(--muted);margin:8px 0 0;max-width:75ch}
.vintro .when b{color:var(--ink);font-weight:500}

/* demo area */
.runway{height:38vh;display:flex;align-items:center;justify-content:center;color:#66697a;font-size:14px}
.stage{padding:var(--sec) var(--gutter);position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.demo-note{font-size:13px;color:var(--muted);padding:10px var(--gutter) 28px}

/* generic placeholders */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-f{background:linear-gradient(160deg,#c92a2a,#ff8787)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,1.8vw,32px)}
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:28px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit}
.center{text-align:center}

/* index: כותרת דקה עם קישור מהיר לסקירה, בלי טקסט הסבר (זה לסוכן, לא ללקוח). מקום פנוי לפולד הראשון */
.vhead{padding:clamp(28px,3.4vw,56px) var(--gutter);display:flex;align-items:center;gap:20px}
.vhead h2{margin:0}
.vhead-review{font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 16px;
  background:var(--card);transition:color .18s,border-color .18s}
.vhead-review:hover{color:var(--accent);border-color:var(--accent)}
/* מגדל הכלים: שורה קבועה למעלה, שתי שורות ראשונות תמיד גלויות, השלישית (סינון מתקדם) נפתחת לפי בקשה */
.vtoolbar{position:sticky;top:0;z-index:50;background:rgba(247,247,250,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:14px var(--gutter) 12px;display:flex;flex-direction:column;gap:10px}
.vtoolbar-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* קטגוריה: לוח כפתורים אחד עם רקע משותף, במקום שורת פילים נפרדים */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px}
.seg .fbtn{border:0;background:none}
.fbtn{font-family:inherit;font-size:13.5px;font-weight:500;padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .18s}
.fbtn:hover{color:var(--accent)}
.seg .fbtn:not(.on):hover{background:#f1f1f7}
.fbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fbtn.on:hover{background:#0d0f1c;border-color:#0d0f1c;color:#fff}
.fsearch{font-family:inherit;font-size:14.5px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;min-width:min(260px,55vw);margin-inline-start:auto}
.fsearch:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.fcount{font-size:13px;color:var(--muted);white-space:nowrap}
/* סוג פרויקט: הציר החדש והחשוב, לכן הכפתורים גדולים וברורים משאר הסינונים */
.fit-row{gap:8px}
.fitbtn{font-family:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:all .18s;
  display:inline-flex;align-items:center;gap:7px}
.fitbtn:hover{border-color:#7f5800}
.fitbtn .fn{font-variant-numeric:tabular-nums;font-weight:700;opacity:.55;font-size:12.5px}
.fitbtn.on{background:#fff4dd;border-color:#c98a00;color:#7a5300}
.fitbtn.on .fn{opacity:.8}
/* סינון מתקדם: מתחיל מקופל, כך שבביקור ראשון רואים רק קטגוריה + סוג פרויקט + חיפוש */
.adv-toggle{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13.5px;font-weight:500;
  padding:8px 14px;border-radius:999px;border:1px dashed var(--line);background:none;color:var(--muted);cursor:pointer;transition:all .18s}
.adv-toggle:hover{border-color:var(--ink);color:var(--ink)}
.adv-toggle.active{border-style:solid;color:var(--accent);border-color:var(--accent)}
.adv-badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;
  min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.adv-chev{transition:transform .25s;flex:none}
.adv-toggle[aria-expanded="true"] .adv-chev{transform:rotate(180deg)}
/* פתיחה/סגירה ב-hidden בלבד, בלי אנימציית גובה: בבדיקה כאן טריקי ה-grid-rows/max-height
   שעובדים בכל שאר המאגר נתקעו על גובה שגוי גם במקרה מבודד לגמרי, כנראה מגבלת סביבת התצוגה.
   ויתור מודע על האנימציה לטובת ודאות שהפאנל נפתח. */
.adv-panel{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.adv-panel[hidden]{display:none}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--gap);padding:clamp(24px,2.5vw,48px) var(--gutter) clamp(80px,8vw,160px)}
.vcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:10px;transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s,border-color .3s}
.vcard:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(22,24,43,.09);border-color:#cfd0e0}
.vcard .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vcard h3{margin:0;font-size:17px;line-height:1.3}
.vcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
.vcard .vid{font-size:13px}
.vcard[hidden]{display:none}

/* copy-ID button */
.mvid{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;
  background:var(--ink);color:#fff;border:0;border-radius:999px;padding:8px 18px;cursor:pointer;
  transition:background .2s,transform .2s}
.mvid:hover{background:var(--accent)}
.mvid.copied{background:#0a7d4f;transform:scale(1.04)}
.mvid code{font-family:inherit;direction:ltr}

/* uses chips + advanced filter groups (בתוך .adv-panel) */
.chip.use{background:#eef3ff;color:#2b4bcc}
.ubtn{font-family:inherit;font-size:12.5px;font-weight:500;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .18s}
.ubtn:hover{border-color:#2b4bcc;color:#2b4bcc}
.ubtn.on{background:#2b4bcc;border-color:#2b4bcc;color:#fff}
/* שורת רכיבי UI: אותה מכניקה, צבע אחר, כדי שהעין תפריד בין שתי השאלות */
.ebtn{font-family:inherit;font-size:12.5px;font-weight:500;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .18s}
.ebtn:hover{border-color:#0b7285;color:#0b7285}
.ebtn.on{background:#0b7285;border-color:#0b7285;color:#fff}
.chip.elem{background:#e6f7fa;color:#0b7285}
.clr-btn{font-family:inherit;font-size:13px;padding:6px 14px;border-radius:999px;border:1px dashed var(--line);background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
.clr-btn:hover{border-color:var(--ink);color:var(--ink)}
.clr-btn[hidden]{display:none}
/* קבוצת סינון: הכותרת והכפתורים שלה נשארים יחד גם כשהשורה נשברת */
.fgroup{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.fgroup>.flabel{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.fgroup.status{gap:8px}
.fgroup.status .report-btn{margin-inline-start:auto}
.sbtn .sn{font-variant-numeric:tabular-nums;opacity:.65;margin-inline-start:5px;font-weight:600}
.sbtn.on .sn{opacity:.85}

/* inherit-note on demo pages */
.inherit-note{font-size:13.5px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:10px 16px;margin-top:14px;max-width:75ch}

/* approval widget (per page, rendered by status.js MV.panel) */
.mvpanel{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;max-width:640px}
.mvp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mvp-q{font-weight:600;font-size:15px}
.stbtn{font-family:inherit;font-size:14px;font-weight:600;padding:8px 20px;border-radius:999px;cursor:pointer;border:1px solid var(--line);background:#fff;transition:all .2s}
.stbtn.ok:hover{border-color:#0a7d4f;color:#0a7d4f}
.stbtn.no:hover{border-color:#c92a2a;color:#c92a2a}
.stbtn.ok.on{background:#0a7d4f;border-color:#0a7d4f;color:#fff}
.stbtn.no.on{background:#c92a2a;border-color:#c92a2a;color:#fff}
.mvp-hint{font-size:12px;color:#b9bbd4}
.mvp-note{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.mvp-note label{font-size:13px;font-weight:500;color:#c92a2a}
.mvp-ta{font-family:inherit;font-size:14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;resize:vertical}
.mvp-ta:focus{outline:2px solid #c92a2a33;border-color:#c92a2a}
.mvp-saved{font-size:12px;color:#0a7d4f;min-height:16px}

/* status chips + status filter + report button */
.chip.st-ok{background:#e4f6ee;color:#0a7d4f}
.chip.st-no{background:#fdeaea;color:#c92a2a}
.sbtn{font-family:inherit;font-size:13px;font-weight:500;padding:6px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .18s}
.sbtn:hover{border-color:var(--ink);color:var(--ink)}
.sbtn.on{background:#16182b;border-color:#16182b;color:#fff}
.report-btn{font-family:inherit;font-size:13px;font-weight:600;padding:7px 18px;border-radius:999px;border:0;background:var(--accent);color:#fff;cursor:pointer;transition:background .2s;margin-inline-start:auto}
.report-btn:hover{background:#372aca}
.report-btn.copied{background:#0a7d4f}

/* approval panel + status chips */
.chip.st-ok{background:#e4f6ee;color:#0a7d4f}
.chip.st-no{background:#fdecec;color:#c02626}
.chip.st-pending{background:#fff4dd;color:#7f5800}
.mvpanel{margin:18px 0 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;max-width:640px}
.mvp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mvp-q{font-weight:600;font-size:15px}
.stbtn{font-family:inherit;font-size:14px;font-weight:600;padding:8px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:all .18s;color:var(--muted)}
.stbtn.ok:hover,.stbtn.ok.on{background:#0a7d4f;border-color:#0a7d4f;color:#fff}
.stbtn.no:hover,.stbtn.no.on{background:#c02626;border-color:#c02626;color:#fff}
.mvp-hint{font-size:12px;color:#b0b2c4}
.mvp-note{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.mvp-note label{font-size:13.5px;font-weight:600;color:#c02626}
.mvp-ta{font-family:inherit;font-size:15px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;resize:vertical;min-height:64px}
.mvp-ta:focus{outline:2px solid #c02626;outline-offset:1px;border-color:transparent}
.mvp-saved{font-size:12px;color:#0a7d4f;min-height:16px}

/* index: status on cards + report button + status filter */
.vcard .stchip{margin-inline-start:auto}
.report-btn{font-family:inherit;font-size:14px;font-weight:600;padding:8px 20px;border-radius:999px;border:0;background:var(--ink);color:#fff;cursor:pointer;transition:background .2s}
.report-btn:hover{background:var(--accent)}
.report-btn.copied{background:#0a7d4f}
.sbtn{font-family:inherit;font-size:13px;font-weight:500;padding:6px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .18s}
.sbtn:hover{border-color:#7f5800;color:#7f5800}
.sbtn.on{background:#16182b;border-color:#16182b;color:#fff}

/* ===== קוד להדבקה בעמוד הדמו ===== */
.mvcode{padding:clamp(28px,3vw,52px) var(--gutter) clamp(40px,5vw,90px);border-top:1px solid var(--line);margin-top:clamp(30px,4vw,70px)}
.mvcode h2{font-size:clamp(20px,1.6vw,26px);margin:0 0 8px}
.mvcode-lead{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 18px;max-width:78ch}
.mvcode-lead code{background:#eceaff;color:#3a2ecc;border-radius:5px;padding:1px 6px;font-size:13px}
.mvcode-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mvcode .cp{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:9px 16px;cursor:pointer;text-decoration:none;line-height:1.2;
  transition:border-color .18s,background .18s,color .18s}
.mvcode .cp:hover{border-color:var(--accent);color:var(--accent)}
.mvcode .cp-main{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.mvcode .cp-main:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.mvcode .cp.copied{background:#e4f6ee;border-color:#0a7d4f;color:#0a7d4f}
.mvcode-see{margin-top:20px}
.mvcode-see summary{cursor:pointer;color:var(--muted);font-size:14px;width:max-content}
.mvcode-see h3{font-size:13px;letter-spacing:.1em;color:var(--muted);margin:20px 0 6px;font-weight:600}
.mvcode-see pre{margin:0;background:#14162a;color:#dfe2f5;border-radius:12px;padding:16px 18px;
  overflow-x:auto;direction:ltr;text-align:left;font-size:12.5px;line-height:1.65;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}


/* ===== תורה: קומפוזיציות ומקצבי עמוד (6.9.2026) ===== */
.chip.cat-comp{background:#eef0ff;color:#2b3a99}
.chip.cat-rhythm{background:#eef7ea;color:#2f6b2a}
.chip.cat-style{background:#fdf0e6;color:#9a4a12}
.chip.cat-anti{background:#fde8ec;color:#a0233a}
.chip.cat-arch{background:#e6f4f6;color:#155e6b}
/* בורר האזור: השאלה הראשונה בעמוד, ולכן גדול ומודגש יותר מהקטגוריות */
.area-seg .abtn{font-family:inherit;font-size:14.5px;font-weight:700;padding:9px 20px;border-radius:999px;border:0;background:none;color:var(--muted);cursor:pointer;transition:all .18s}
.area-seg .abtn:hover{background:#f1f1f7;color:var(--ink)}
.area-seg .abtn.on{background:var(--accent);color:#fff}
.fbtn[hidden]{display:none}
/* מתג הרוחב בעמודי התורה */
.bpbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:18px var(--gutter) 0}
.bpbtn{font-family:inherit;font-size:13px;font-weight:600;padding:7px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .18s}
.bpbtn:hover{border-color:var(--ink);color:var(--ink)}
.bpbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* בלי מעבר: max-width היא תכונת layout, והחלפת ברייקפוינט היא פעולה שהמשתמש יזם ולא צריכה 350ms של thrash */
.bpwrap{width:100%;margin-inline:auto}
.bpwrap[data-bp="tablet"]{max-width:768px}
.bpwrap[data-bp="mobile"]{max-width:375px}
.bpwrap:not([data-bp="desktop"]){outline:1px dashed #c3c5d6;outline-offset:10px;border-radius:12px}

/* כותרת נסתרת לקוראי מסך. קיימת כדי שסדר הכותרות בעמוד הדמו לא ידלג מ-h1 ל-h3
   שיושב בתוך הרכיב עצמו. אסור לתקן את הדילוג במארקאפ של הרכיב, כי זה הקוד שמיוצא. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}