/* ══════════════════════════════════════════════════════════════ JT-NF-TOKENS-001 · שכבת העיצוב של הדייר מקור: clastop40 · L0 מותג → L1 גלובלי → L2 סמנטי נטען חי ב-/asset/design/nf-tokens.css — שינוי כאן משנה את המערכת. ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ JT-NF-TOKENS-001 · שלוש שכבות מ-clastop40 L0 מותג (--c-*) → L1 גלובלי → L2 סמנטי. מקור: /asset/design/nf-tokens.css ══════════════════════════════════════════════════════════════ */ @layer tokens{ :root{ /* L0 · מותג NewsForce */ --c-bg:oklch(99.05% .001 250); --c-surface:oklch(100% 0 0); --c-elevated:oklch(99.3% .001 250); --c-recessed:oklch(96.2% .003 250); --c-pearl:oklch(98.8% .002 250); --c-rail:oklch(99.55% .001 250); --c-glass:oklch(100% 0 0/.72); --c-text:oklch(16% .004 250); --c-muted:oklch(42% .008 250); --c-text-inv:oklch(99% 0 0); --c-text-rail:oklch(22% .004 250); --c-border:oklch(91.5% .003 250); --c-border-rail:oklch(93.5% .002 250); --c-accent:oklch(45.8% .178 26.4); /* #ae0610 */ /* L1 · motion */ --ease-out:cubic-bezier(.32,.72,0,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --t-fast:.15s; --t-base:.25s; --t-slow:.4s; --motion-enter:fade-rise .4s var(--ease-out) both; --motion-pulse:jr-pulse 2.4s var(--ease-out) infinite; --motion-hover-lift:translateY(-3px); --motion-reveal:fade-rise .5s var(--ease-out) both; --motion-level:1; --motion-attention:jr-pulse 1.6s ease infinite; /* L1 · radius */ --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px; --r-glass:20px; --r-recessed:12px; /* L1 · spacing */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --section-gap:clamp(28px,5vw,56px); --card-padding:clamp(18px,3vw,28px); --drawer-padding:clamp(20px,4vw,28px); --field-gap:7px; --rail-width:clamp(280px,24vw,340px); --content-max:1100px; --gutter:clamp(16px,4vw,40px); /* L1 · typography */ --font-display:'Frank Ruhl Libre',serif; --font-body:'Heebo',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; --text-display:clamp(2rem,5vw,3.2rem); --text-title:clamp(1.3rem,3vw,1.9rem); --text-h2:clamp(1.15rem,2.4vw,1.45rem); --text-body:clamp(.95rem,1.6vw,1.05rem); --text-small:.875rem; --text-micro:.75rem; --ls-display:-.02em; --ls-body:0; --lh-display:1.08; --lh-body:1.6; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:900; /* L1 · z-index */ --z-base:1; --z-rail:5; --z-sticky:9; --z-drawer:20; --z-overlay:30; --z-dialog:40; --z-toast:50; --z-lab:100; /* L1 · L2 border */ --border-subtle:var(--c-border); --border-active:var(--c-accent); --border-rail:var(--c-border-rail); /* L1 · L2 density */ --row-height-compact:40px; --row-height-comfortable:52px; --cell-padding:13px 12px; --table-header-height:44px; --admin-density:comfortable; --table-min-width:460px; /* L1 · L2 direction */ --direction:rtl; --rail-side:inline-end; --drawer-side:inline-start; --text-align-primary:start; --table-flow:start; --reading-flow:start; --rail-order:2; --main-order:1; /* L1 · L2 focus */ --focus-ring:0 0 0 3px color-mix(in oklab,var(--c-accent) 40%,transparent); --focus-ring-soft:0 0 0 3px color-mix(in oklab,var(--c-accent) 18%,transparent); /* L1 · L2 glass */ --glass-bg:color-mix(in oklab,var(--c-surface) 70%,transparent); --glass-border:var(--c-border); --glass-blur:20px; --glass-saturation:1.4; --glass-shadow:0 12px 48px oklch(0% 0 0/.2); --glass-highlight:inset 0 1px 0 oklch(100% 0 0/.08); /* L1 · L2 recessed */ --recessed-bg:color-mix(in oklab,var(--c-bg) 96%,black); --recessed-shadow-inner:inset 0 2px 6px oklch(0% 0 0/.25); --recessed-highlight:inset 0 -1px 0 oklch(100% 0 0/.04); --recessed-depth:2px; /* L1 · L2 state */ --state-success:oklch(68% 0.13 150); --state-warning:oklch(75% 0.13 75); --state-danger:oklch(58% 0.19 25); --state-info:oklch(70% 0.10 230); /* L1 · L2 surface */ --surface-page:var(--c-bg); --surface-card:var(--c-surface); --surface-elevated:var(--c-elevated); --surface-glass:var(--c-glass); --surface-recessed:var(--c-recessed); --surface-pearl:var(--c-pearl); --surface-rail:var(--c-rail); /* L1 · L2 text */ --text-primary:var(--c-text); --text-muted:var(--c-muted); --text-inverse:var(--c-text-inv); --text-on-rail:var(--c-text-rail); } [data-mode="dark"],[data-dark],[data-theme="night"],[data-theme="dark"]{ --c-bg:oklch(17% .004 60); --c-surface:oklch(21% .004 60); --c-elevated:oklch(25% .005 60);--c-recessed:oklch(14.5% .004 60); --c-rail:oklch(19% .004 60); --c-glass:oklch(21% .004 60/.72); --c-text:oklch(95% .002 60); --c-muted:oklch(72% .005 60); --c-text-inv:oklch(98.5% 0 0); --c-text-rail:oklch(92% .002 60); --c-border:oklch(30% .005 60); --c-border-rail:oklch(28% .005 60); --c-accent:oklch(62% .195 25.8); } } @layer tokens{ :root{ /* גישור — הטוקנים המקומיים נשענים על clastop40 */ --bg:var(--surface-page); --surface:var(--surface-card); --panel:var(--surface-elevated);--fill:var(--surface-recessed); --ink:var(--text-primary); --ink2:var(--text-muted); --ink3:color-mix(in oklab,var(--text-muted) 92%,transparent); --line:var(--border-subtle); --brand:var(--c-accent); --onbrand:var(--text-inverse); --ease:var(--ease-out); --r:var(--r-sm); --r-xl:var(--r-lg); --r-2xl:var(--r-xl); } } /* ── L0b · שוחרר מהקוד. הערכים זהים — המראה לא זז. ── */ @layer tokens{ :root{ --c-white:#fff; --c-black:#000; --wave-idle:#3c6f8f; --wave-speech:#5aa2c9; --fs-display:34px; --fs-title:28px; --fs-h2:25px; --fs-h3:22px; --fs-h4:19px; --fs-lg:17px; --fs-body:15px; --fs-sm:14px; --fs-xs:12.5px; --fs-2xs:11px; --fs-3xs:10px; } .edwrap{ --e-bg:#141414; --e-panel:#1b1b1b; --e-sunken:#1e1e1e; --e-fill:#232323; --e-hover:#262626; --e-line:#2b2b2b; --e-line2:#2a2a2a; --e-raised:#333; --e-ink:#f2f0ed; --e-ink2:#8f8a84; --e-ink3:#6d6862; --e-ink-soft:#cfcac4; --e-ghost:#3a3a3a; } } /* ══ מצב כהה · הממשק מציב data-theme="night" ══ */ [data-theme="night"],[data-theme="dark"],[data-mode="dark"],[data-dark], html[data-theme="night"],body[data-theme="night"]{ --c-bg:oklch(17% .004 60); --c-surface:oklch(21% .004 60); --c-elevated:oklch(25% .005 60); --c-recessed:oklch(14.5% .004 60); --c-rail:oklch(19% .004 60); --c-glass:oklch(21% .004 60/.72); --c-pearl:oklch(23% .004 60); --c-text:oklch(95% .002 60); --c-muted:oklch(72% .005 60); --c-text-inv:oklch(98.5% 0 0); --c-text-rail:oklch(92% .002 60); --c-border:oklch(30% .005 60); --c-border-rail:oklch(28% .005 60); --c-accent:oklch(62% .195 25.8); --state-success:oklch(76% .13 150); --state-warning:oklch(81% .12 80); --state-danger:oklch(68% .19 25); --state-info:oklch(78% .09 230); } /* המשטחים חייבים לקרוא מהטוקן — אחרת המצב הכהה לא נראה */ [data-theme="night"] body,[data-theme="dark"] body{ background:var(--c-bg);color:var(--c-text)} [data-theme="night"] .side,[data-theme="night"] .rail{ background:var(--c-rail);border-color:var(--c-border-rail);color:var(--c-text-rail)} [data-theme="night"] .top,[data-theme="night"] .topbar,[data-theme="night"] header{ background:color-mix(in oklab,var(--c-surface) 86%,transparent); border-color:var(--c-border)} [data-theme="night"] .guide,[data-theme="night"] .card,[data-theme="night"] .panel, [data-theme="night"] .vrow,[data-theme="night"] .act{ background:var(--c-surface);border-color:var(--c-border);color:var(--c-text)} [data-theme="night"] .tr:hover{background:var(--c-elevated)} [data-theme="night"] .rowbtn{background:color-mix(in oklab,var(--c-accent) 26%,transparent); color:oklch(97% 0 0);border:1px solid color-mix(in oklab,var(--c-accent) 55%,transparent)} [data-theme="night"] .rowbtn:hover{background:var(--c-accent);color:var(--c-text-inv)} [data-theme="night"] .chip,[data-theme="night"] .fgrp{background:var(--c-recessed);color:var(--c-muted)} [data-theme="night"] .fld,[data-theme="night"] input,[data-theme="night"] select, [data-theme="night"] textarea{background:var(--c-recessed);color:var(--c-text);border-color:var(--c-border)} /* ══════════════════════════════════════════════════════════════ L6 · מקורות וצוות · JC-ADMIN-SOURCES-001 אפס ערך קשיח. הכל --sp-* · --r-* · --fs-* · L2 סמנטי. ══════════════════════════════════════════════════════════════ */ @layer components{ /* מדדים — מספר אחד גדול, דפוס Stripe */ .admetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-3);margin-block-end:var(--sp-5)} .admet{background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5); box-shadow:var(--card-shadow,0 1px 2px oklch(0% 0 0/.04))} .admet b{display:block;font:700 clamp(24px,3cqi + 16px,32px)/1 var(--font); color:var(--text-primary);letter-spacing:-.03em} .admet b em{font:600 var(--fs-lg)/1 var(--font);color:var(--text-muted);font-style:normal} .admet span{display:block;font:700 var(--fs-3xs) var(--mono);letter-spacing:.14em; color:var(--text-muted);margin-block-start:var(--sp-2);text-transform:uppercase} /* פאנל — זכוכית */ .adpanel{background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation)); border:1px solid var(--glass-border);border-radius:var(--r-lg); padding:var(--sp-5);margin-block-end:var(--sp-4); box-shadow:var(--glass-shadow),var(--glass-highlight)} .adpanel header{margin-block-end:var(--sp-4)} .adpanel header b{display:block;font:700 var(--fs-h4)/1.2 var(--font);letter-spacing:-.02em} .adpanel header small{display:block;font-size:var(--fs-sm);color:var(--text-muted); margin-block-start:var(--sp-1)} /* טופס — שקע */ .adform{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center} .adform .fld{background:var(--recessed-bg); box-shadow:var(--recessed-shadow-inner),var(--recessed-highlight); border:1px solid var(--border-subtle);border-radius:var(--r-recessed); padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--text-primary); transition:box-shadow var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)} .adform #ad-q,.adform #ad-rn{flex:1;min-inline-size:min(100%,220px)} .adform .fld:focus{outline:none;border-color:var(--border-active); box-shadow:var(--focus-ring-soft),var(--recessed-shadow-inner)} /* תוצאת בדיקה */ .adresult{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap; margin-block-start:var(--sp-4);padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);background:var(--recessed-bg); border-inline-start:3px solid var(--state-danger)} .adresult[data-ok=true]{border-inline-start-color:var(--state-success)} .adresult b{font:700 var(--fs-h4) var(--mono);color:var(--text-primary)} .adresult span{font-size:var(--fs-sm);color:var(--text-muted)} .adresult i{flex-basis:100%;font:400 var(--fs-xs)/1.5 var(--font);font-style:normal; color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* רשת הכרטיסים */ .adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:var(--sp-3)} .adcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:var(--sp-3);padding:var(--sp-4);position:relative; background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--r-lg); transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease-out)} .adcard::before{content:"";position:absolute;inset-block:var(--sp-4);inset-inline-start:0; inline-size:3px;border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--border-subtle);transition:background var(--t-fast) var(--ease-out)} .adcard[data-live=true]::before{background:var(--c-accent)} .adcard:hover{transform:var(--motion-hover-lift); box-shadow:0 var(--sp-3) var(--sp-6) calc(var(--sp-3) * -1) oklch(0% 0 0/.16); border-color:var(--border-active)} .adcard[data-live=false]{opacity:.55} .adbody{min-inline-size:0} .adbody b{display:block;font:600 var(--fs-body)/1.3 var(--font); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adbody p{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--text-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adtags{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:center; margin-block-start:var(--sp-2)} .adcount{font:700 var(--fs-3xs) var(--mono);color:var(--text-muted); letter-spacing:.08em;margin-inline-start:auto} /* מתג */ .adtgl{inline-size:38px;block-size:22px;border-radius:var(--r-pill);flex:none; background:var(--border-subtle);position:relative;border:none;cursor:pointer; transition:background var(--t-base) var(--ease-out)} .adtgl i{position:absolute;inset-block-start:3px;inset-inline-start:3px; inline-size:16px;block-size:16px;border-radius:var(--r-pill); background:var(--surface-card);box-shadow:0 1px 3px oklch(0% 0 0/.3); transition:inset-inline-start var(--t-base) var(--ease-out)} .adtgl[aria-pressed=true]{background:var(--c-accent)} .adtgl[aria-pressed=true] i{inset-inline-start:19px} .adtgl:focus-visible{outline:none;box-shadow:var(--focus-ring)} .adrm{inline-size:28px;block-size:28px;border-radius:var(--r-pill);border:none; background:transparent;color:var(--text-muted);font-size:var(--fs-lg);line-height:1; cursor:pointer;opacity:0;transition:opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)} .adcard:hover .adrm,.adrm:focus-visible{opacity:1} .adrm:hover{background:color-mix(in oklab,var(--state-danger) 12%,transparent); color:var(--state-danger)} .adav{inline-size:34px;block-size:34px;border-radius:var(--r-pill);flex:none; display:grid;place-items:center;background:var(--c-accent);color:var(--text-inverse); font:700 var(--fs-sm) var(--font)} @container pane (max-width:640px){ .adform{flex-direction:column;align-items:stretch} .adform .fld,.adform .btn{inline-size:100%} .adgrid{grid-template-columns:1fr} .adrm{opacity:1} } } /* ══════════════════════════════════════════════════════════════ L2b · טוקני-דשבורד · מה שחסר כדי להגיע לרמת הרפרנס נגזרים מ---c-accent ומ---state-* — אפס ערך עצמאי, אפס hex. ══════════════════════════════════════════════════════════════ */ @layer tokens{ :root{ /* מדרג רך לכל סמנטי — הרקע מאחורי "+2.87%" */ --success-soft:color-mix(in oklab,var(--state-success) 14%,transparent); --warn-soft:color-mix(in oklab,var(--state-warning) 15%,transparent); --danger-soft:color-mix(in oklab,var(--state-danger) 12%,transparent); --info-soft:color-mix(in oklab,var(--state-info) 14%,transparent); --accent-soft:color-mix(in oklab,var(--c-accent) 12%,transparent); /* כרטיס-מבטא צבעוני */ --tint-bg:var(--c-accent); --on-tint:var(--text-inverse); --tint-2:oklch(62% .17 232); /* כחול */ --tint-3:oklch(72% .16 75); /* כתום */ --tint-4:oklch(66% .16 152); /* ירוק */ --tint-5:oklch(60% .19 300); /* סגול */ /* סולם גרפים — שישה גוונים בהירות אחידה */ --chart-1:var(--c-accent); --chart-2:oklch(62% .17 232); --chart-3:oklch(72% .15 75); --chart-4:oklch(66% .16 152); --chart-5:oklch(60% .19 300); --chart-6:oklch(70% .12 195); --chart-grid:color-mix(in oklab,var(--border-subtle) 70%,transparent); --chart-track:var(--recessed-bg); /* תג-שינוי */ --delta-up-fg:var(--state-success); --delta-up-bg:var(--success-soft); --delta-down-fg:var(--state-danger); --delta-down-bg:var(--danger-soft); /* פס-התקדמות ואווטאר */ --progress-track:var(--recessed-bg); --progress-fill:var(--c-accent); --progress-h:6px; --avatar-sm:28px; --avatar-md:36px; --avatar-lg:48px; --avatar-bg:var(--c-accent); --avatar-fg:var(--text-inverse); } [data-theme="night"],[data-theme="dark"]{ --tint-2:oklch(66% .16 232); --tint-3:oklch(76% .14 75); --tint-4:oklch(70% .15 152); --tint-5:oklch(66% .17 300); --chart-grid:color-mix(in oklab,var(--border-subtle) 55%,transparent); } } /* ── רכיבי-דשבורד · נשענים על הטוקנים בלבד ── */ @layer components{ .delta{display:inline-flex;align-items:center;gap:var(--sp-1); padding:2px var(--sp-2);border-radius:var(--r-pill); font:700 var(--fs-3xs) var(--mono);letter-spacing:.04em} .delta[data-dir=up]{color:var(--delta-up-fg);background:var(--delta-up-bg)} .delta[data-dir=down]{color:var(--delta-down-fg);background:var(--delta-down-bg)} .tintcard{background:var(--tint-bg);color:var(--on-tint); border-radius:var(--r-lg);padding:var(--sp-5);border:none; box-shadow:0 var(--sp-3) var(--sp-6) calc(var(--sp-4) * -1) color-mix(in oklab,var(--tint-bg) 55%,transparent)} .tintcard[data-tint="2"]{--tint-bg:var(--tint-2)} .tintcard[data-tint="3"]{--tint-bg:var(--tint-3)} .tintcard[data-tint="4"]{--tint-bg:var(--tint-4)} .tintcard[data-tint="5"]{--tint-bg:var(--tint-5)} .tintcard b{display:block;font:700 clamp(22px,3cqi + 14px,30px)/1 var(--font);letter-spacing:-.03em} .tintcard span{display:block;font-size:var(--fs-xs);opacity:.86;margin-block-start:var(--sp-2)} .progress{block-size:var(--progress-h);border-radius:var(--r-pill); background:var(--progress-track);overflow:hidden} .progress i{display:block;block-size:100%;border-radius:var(--r-pill); background:var(--progress-fill);transition:inline-size var(--t-slow) var(--ease-out)} .avatar{inline-size:var(--avatar-md);block-size:var(--avatar-md);border-radius:var(--r-pill); display:grid;place-items:center;background:var(--avatar-bg);color:var(--avatar-fg); font:700 var(--fs-sm) var(--font);flex:none;overflow:hidden} .avatar img{inline-size:100%;block-size:100%;object-fit:cover} .avatar[data-size=sm]{inline-size:var(--avatar-sm);block-size:var(--avatar-sm);font-size:var(--fs-3xs)} .avatar[data-size=lg]{inline-size:var(--avatar-lg);block-size:var(--avatar-lg);font-size:var(--fs-body)} /* גרף עמודות — CSS טהור, אפס ספרייה */ .bars{display:flex;align-items:flex-end;gap:var(--sp-2);block-size:140px; padding-block-end:var(--sp-4);position:relative} .bars::before{content:"";position:absolute;inset-inline:0;inset-block-end:var(--sp-4); block-size:1px;background:var(--chart-grid)} .bars i{flex:1;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--chart-2); min-block-size:4px;transition:block-size var(--t-slow) var(--ease-out)} .bars i:hover{background:var(--chart-1)} .bars i[data-c="1"]{background:var(--chart-1)} .bars i[data-c="3"]{background:var(--chart-3)} .bars i[data-c="4"]{background:var(--chart-4)} /* דונאט — conic-gradient מהטוקנים */ .donut{inline-size:132px;block-size:132px;border-radius:var(--r-pill); background:conic-gradient(var(--chart-1) 0 var(--p1,25%), var(--chart-2) 0 var(--p2,50%),var(--chart-3) 0 var(--p3,75%),var(--chart-4) 0 100%); position:relative;flex:none} .donut::after{content:"";position:absolute;inset:26%;border-radius:var(--r-pill); background:var(--surface-card)} } /* ══════════════════════════════════════════════════════════════ L2c · מה שהרפרנס דורש ואין — גרף-קו · מחוון · sparkline · כרטיס-רך ══════════════════════════════════════════════════════════════ */ @layer tokens{ :root{ --soft-1:color-mix(in oklab,var(--tint-2) 10%,var(--surface-card)); --soft-2:color-mix(in oklab,var(--tint-3) 12%,var(--surface-card)); --soft-3:color-mix(in oklab,var(--tint-4) 10%,var(--surface-card)); --soft-4:color-mix(in oklab,var(--tint-5) 10%,var(--surface-card)); --area-fade:color-mix(in oklab,var(--chart-2) 18%,transparent); --gauge-track:var(--recessed-bg); --nav-w-side:244px; }} @layer components{ /* כרטיס-רך · הרקע הפסטלי של הרפרנס */ .softcard{background:var(--soft-1);border-radius:var(--r-lg);padding:var(--sp-5); border:1px solid color-mix(in oklab,var(--border-subtle) 60%,transparent)} .softcard[data-s="2"]{background:var(--soft-2)} .softcard[data-s="3"]{background:var(--soft-3)} .softcard[data-s="4"]{background:var(--soft-4)} .softcard b{display:block;font:700 clamp(20px,2.6cqi + 12px,28px)/1 var(--font);letter-spacing:-.03em} .softcard small{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-block-start:var(--sp-1)} /* עיגול-אייקון צבעוני */ .ico{inline-size:44px;block-size:44px;border-radius:var(--r-pill);flex:none; display:grid;place-items:center;font-size:var(--fs-lg); background:var(--c-accent);color:var(--text-inverse)} .ico[data-c="2"]{background:var(--tint-2)} .ico[data-c="3"]{background:var(--tint-3)} .ico[data-c="4"]{background:var(--tint-4)} .ico[data-c="5"]{background:var(--tint-5)} /* גרף-קו עם שטח — SVG טהור מהטוקנים */ .line{inline-size:100%;block-size:150px;display:block} .line .grid{stroke:var(--chart-grid);stroke-width:1} .line .area{fill:var(--area-fade)} .line .path{fill:none;stroke:var(--chart-2);stroke-width:2.5; stroke-linecap:round;stroke-linejoin:round} .line .dot{fill:var(--surface-card);stroke:var(--chart-2);stroke-width:2.5} /* sparkline */ .spark{inline-size:100%;block-size:44px;display:block} .spark path{fill:none;stroke:var(--chart-4);stroke-width:2;stroke-linecap:round} /* מחוון חצי-עגול */ .gauge{inline-size:96px;block-size:52px;position:relative;overflow:hidden;flex:none} .gauge::before{content:"";position:absolute;inset:0;border-radius:96px 96px 0 0; background:conic-gradient(from 270deg,var(--chart-3) 0 var(--g,50%),var(--gauge-track) 0 50%,transparent 0)} .gauge::after{content:"";position:absolute;inset-inline:18px;inset-block-start:18px;block-size:100%; border-radius:96px 96px 0 0;background:var(--surface-card)} /* סיידבר-דייר */ .tsell{display:grid;grid-template-columns:var(--nav-w-side) minmax(0,1fr);min-block-size:100dvh} @container (max-width:900px){.tsell{grid-template-columns:1fr}} .tside{background:var(--surface-rail);border-inline-end:1px solid var(--border-rail); padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)} .tside .brand{display:flex;align-items:center;gap:var(--sp-3);margin-block-end:var(--sp-6)} .tside .brand b{font:700 var(--fs-h4) var(--font);letter-spacing:-.02em} .tside .grp{font:700 var(--fs-3xs) var(--mono);letter-spacing:.14em;color:var(--text-muted); margin-block:var(--sp-5) var(--sp-2);text-transform:uppercase} .tside a{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3); border-radius:var(--r-md);color:var(--text-primary);text-decoration:none; font-size:var(--fs-sm);position:relative; transition:background var(--t-fast) var(--ease-out)} .tside a:hover{background:var(--accent-soft)} .tside a[aria-current]{background:var(--accent-soft);color:var(--c-accent);font-weight:600} .tside a[aria-current]::before{content:"";position:absolute;inset-block:6px;inset-inline-start:0; inline-size:3px;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--c-accent)} } /* ══════════════════════════════════════════════════════════════ L2d · צללים וגרדיאנטים · מקור: Minimal v7.3.0 theme/core/custom-shadows.ts z1 0 1px 2px 0 α.16 · z8 0 8px 16px 0 α.16 z16 0 16px 32px -4px α.16 · z24 0 24px 48px 0 α.16 card 0 0 2px α.2 + 0 12px 24px -4px α.12 dropdown 0 0 2px α.24 + -20px 20px 40px -4px α.24 dialog -40px 40px 80px -8px black α.24 צל-צבעוני createShadowColor = 0 8px 16px 0 α.24 ══════════════════════════════════════════════════════════════ */ @layer tokens{ :root{ --sh-ch:oklch(20% .02 265); /* ערוץ-הצל, ניתן לדריסה בדייר */ --z1:0 1px 2px 0 color-mix(in oklab,var(--sh-ch) 16%,transparent); --z8:0 8px 16px 0 color-mix(in oklab,var(--sh-ch) 16%,transparent); --z12:0 12px 24px -4px color-mix(in oklab,var(--sh-ch) 16%,transparent); --z16:0 16px 32px -4px color-mix(in oklab,var(--sh-ch) 16%,transparent); --z20:0 20px 40px -4px color-mix(in oklab,var(--sh-ch) 16%,transparent); --z24:0 24px 48px 0 color-mix(in oklab,var(--sh-ch) 16%,transparent); --sh-card:0 0 2px 0 color-mix(in oklab,var(--sh-ch) 20%,transparent), 0 12px 24px -4px color-mix(in oklab,var(--sh-ch) 12%,transparent); --sh-dropdown:0 0 2px 0 color-mix(in oklab,var(--sh-ch) 24%,transparent), -20px 20px 40px -4px color-mix(in oklab,var(--sh-ch) 24%,transparent); --sh-dialog:-40px 40px 80px -8px oklch(0% 0 0/.24); /* צל צבעוני — createShadowColor(0.24) */ --sh-accent:0 8px 16px 0 color-mix(in oklab,var(--c-accent) 24%,transparent); --sh-2:0 8px 16px 0 color-mix(in oklab,var(--tint-2) 24%,transparent); --sh-3:0 8px 16px 0 color-mix(in oklab,var(--tint-3) 24%,transparent); --sh-4:0 8px 16px 0 color-mix(in oklab,var(--tint-4) 24%,transparent); --sh-5:0 8px 16px 0 color-mix(in oklab,var(--tint-5) 24%,transparent); --sh-success:0 8px 16px 0 color-mix(in oklab,var(--state-success) 24%,transparent); --sh-danger:0 8px 16px 0 color-mix(in oklab,var(--state-danger) 24%,transparent); /* גרדיאנטים · mixins/background.ts */ --grad-accent:linear-gradient(135deg,var(--c-accent),color-mix(in oklab,var(--c-accent) 62%,var(--tint-5))); --grad-2:linear-gradient(135deg,var(--tint-2),color-mix(in oklab,var(--tint-2) 55%,var(--tint-5))); --grad-3:linear-gradient(135deg,var(--tint-3),color-mix(in oklab,var(--tint-3) 60%,var(--c-accent))); --grad-4:linear-gradient(135deg,var(--tint-4),color-mix(in oklab,var(--tint-4) 60%,var(--tint-2))); --grad-hero:linear-gradient(135deg,var(--tint-5),var(--tint-2)); --grad-fade:linear-gradient(180deg,transparent,var(--surface-page)); } [data-theme="night"]{--sh-ch:oklch(0% 0 0)} } @layer components{ .elev-1{box-shadow:var(--z1)} .elev-8{box-shadow:var(--z8)} .elev-16{box-shadow:var(--z16)} .elev-24{box-shadow:var(--z24)} .panel,.card,.admet{box-shadow:var(--sh-card)} .adpanel,.menu,[role=menu]{box-shadow:var(--sh-dropdown)} [role=dialog]{box-shadow:var(--sh-dialog)} /* כרטיס-מבטא מקבל את הצל הצבעוני שלו */ .tintcard{box-shadow:var(--sh-accent)} .tintcard[data-tint="2"]{box-shadow:var(--sh-2)} .tintcard[data-tint="3"]{box-shadow:var(--sh-3)} .tintcard[data-tint="4"]{box-shadow:var(--sh-4)} .tintcard[data-tint="5"]{box-shadow:var(--sh-5)} .ico{box-shadow:var(--sh-accent)} .ico[data-c="2"]{box-shadow:var(--sh-2)} .ico[data-c="3"]{box-shadow:var(--sh-3)} .ico[data-c="4"]{box-shadow:var(--sh-4)} .ico[data-c="5"]{box-shadow:var(--sh-5)} /* גרדיאנט */ .hero{background:var(--grad-hero);color:var(--text-inverse); border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-5)} .gradtext{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} } /* ══════════════════════════════════════════════════════════════ L3-SEM · שכבה סמנטית מעל המידות הקומה שחסרה בפירמידה: --sp-* ו---r-* היו ערכי-קצה. עכשיו יש מעליהם רעיונות — "צפיפות", "מקצב", "היררכיה". שינוי רעיון אחד מזיז עשרות מקומות. ══════════════════════════════════════════════════════════════ */ @layer tokens{ :root{ /* ── מקצב · rhythm ── */ --rhythm:1; /* חוגה אחת לכל הצפיפות */ --gap-tight:calc(var(--sp-2) * var(--rhythm)); --gap-snug:calc(var(--sp-3) * var(--rhythm)); --gap-base:calc(var(--sp-4) * var(--rhythm)); --gap-loose:calc(var(--sp-6) * var(--rhythm)); --gap-section:calc(var(--sp-10) * var(--rhythm)); /* ── ריפוד לפי תפקיד ── */ --pad-chip:var(--sp-1) var(--sp-2); --pad-control:var(--sp-3) var(--sp-4); --pad-card:calc(var(--sp-5) * var(--rhythm)); --pad-panel:calc(var(--sp-6) * var(--rhythm)); --pad-shell:var(--sp-6); /* ── רדיוס לפי תפקיד ── */ --radius-chip:var(--r-pill); --radius-control:var(--r-md); --radius-card:var(--r-lg); --radius-panel:var(--r-xl); --radius-sunken:var(--r-recessed); /* ── היררכיית טיפוגרפיה ── */ --type-page:var(--fs-title); --type-page-w:var(--fw-bold,700); --type-section:var(--fs-h4); --type-section-w:700; --type-card:var(--fs-body); --type-card-w:600; --type-body:var(--fs-sm); --type-body-w:400; --type-meta:var(--fs-xs); --type-meta-w:400; --type-label:var(--fs-3xs); --type-label-w:700; --type-track-tight:-.03em; --type-track-label:.14em; /* ── מהירות לפי כוונה ── */ --speed-hover:var(--t-fast); --speed-state:var(--t-base); --speed-enter:var(--t-slow); --curve:var(--ease-out); /* ── רוממות לפי תפקיד ── */ --lift-flat:var(--z1); --lift-card:var(--sh-card); --lift-float:var(--z8); --lift-overlay:var(--sh-dropdown); --lift-modal:var(--sh-dialog); /* ── מסגרת ── */ --edge:1px solid var(--border-subtle); --edge-strong:1px solid var(--border-active); --edge-soft:1px solid color-mix(in oklab,var(--border-subtle) 55%,transparent); /* ── מידה ── */ --measure-tight:52ch; --measure-base:68ch; --measure-wide:80ch; } /* שלוש חוגות-צפיפות — רעיון אחד מזיז את כל המערכת */ [data-density=compact]{--rhythm:.72} [data-density=comfortable]{--rhythm:1} [data-density=spacious]{--rhythm:1.35} } @layer components{ /* הרכיבים נשענים על הרעיונות, לא על המידות */ .card,.kpi,.admet{padding:var(--pad-card);border-radius:var(--radius-card); box-shadow:var(--lift-card);border:var(--edge-soft)} .adpanel{padding:var(--pad-panel);border-radius:var(--radius-panel);box-shadow:var(--lift-overlay)} .chip{padding:var(--pad-chip);border-radius:var(--radius-chip)} .fld,input,select,textarea{padding:var(--pad-control);border-radius:var(--radius-sunken)} .board,.adgrid,.g4,.g3{gap:var(--gap-snug)} .canvas{padding-inline:var(--pad-shell)} .h2{font-size:var(--type-section);font-weight:var(--type-section-w); letter-spacing:var(--type-track-tight)} .sb,.vmeta .sm{font-size:var(--type-meta)} .grp,.lbl2,.adcount{font-size:var(--type-label);font-weight:var(--type-label-w); letter-spacing:var(--type-track-label)} .btn,.nv,.tool,.item,.vrow,.chip,.adcard{ transition:background var(--speed-hover) var(--curve), border-color var(--speed-hover) var(--curve), transform var(--speed-hover) var(--curve), box-shadow var(--speed-state) var(--curve)} [role=dialog]{box-shadow:var(--lift-modal)} .guide,.sb{max-inline-size:var(--measure-base)} } /* ── L4-REC · מתכונים · הקומה הרביעית ── רכיב לא קורא מידה ולא רעיון — הוא קורא מתכון. מתכון = צירוף של רעיונות. זו הקומה שהופכת ערמה לפירמידה. */ @layer tokens{ :root{ --rec-card-gap:var(--gap-base); --rec-card-pad:var(--pad-card); --rec-card-edge:var(--edge-soft); --rec-card-lift:var(--lift-card); --rec-card-radius:var(--radius-card); --rec-grid-gap:var(--gap-snug); --rec-row-gap:var(--gap-tight); --rec-stack-gap:var(--gap-loose); --rec-section-gap:var(--gap-section); --rec-control-pad:var(--pad-control); --rec-control-radius:var(--radius-control); --rec-title:var(--type-section); --rec-title-track:var(--type-track-tight); --rec-meta:var(--type-meta); --rec-motion:var(--speed-hover) var(--curve); }} @layer components{ .card,.kpi,.admet,.panel,.adcard{ gap:var(--rec-card-gap); padding:var(--rec-card-pad); border:var(--rec-card-edge); border-radius:var(--rec-card-radius); box-shadow:var(--rec-card-lift)} .board,.adgrid,.g4,.g3,.g2{gap:var(--rec-grid-gap)} .frow,.adtags,.tags{gap:var(--rec-row-gap)} .hd2,.adpanel header{margin-block-end:var(--rec-stack-gap)} .fld,input,select,textarea{padding:var(--rec-control-pad);border-radius:var(--rec-control-radius)} .h2{font-size:var(--rec-title);letter-spacing:var(--rec-title-track)} .sb,.vmeta .sm,.adbody p{font-size:var(--rec-meta)} .btn,.nv,.tool,.item,.vrow,.adcard,.chip{transition: background var(--rec-motion),border-color var(--rec-motion), transform var(--rec-motion),box-shadow var(--rec-motion)} } /* ══════════════════════════════════════════════════════════════ L6-PEEK · הצצה בריחוף · JC-STORY-PEEK-001 העורך רואה מה הסיפור אומר בלי ללחוץ ובלי לעזוב את הרשימה. ══════════════════════════════════════════════════════════════ */ @layer components{ @keyframes peekIn{from{opacity:0;transform:translateY(4px) scale(.985)}to{opacity:1;transform:none}} .peek header b{display:block;font-size:var(--type-card);font-weight:600;line-height:1.35; letter-spacing:-.015em;margin-block-end:var(--gap-snug)} .peek .tags{display:flex;gap:var(--rec-row-gap);flex-wrap:wrap;margin-block-end:var(--gap-base)} .peek .lbl{display:block;font-size:var(--type-label);font-weight:var(--type-label-w); letter-spacing:var(--type-track-label);color:var(--text-muted); text-transform:uppercase;margin-block-end:var(--gap-tight)} /* ציון — כמה שווה לכסות */ .peek .score{block-size:4px;border-radius:var(--r-pill);background:var(--progress-track); position:relative;margin-block-end:var(--gap-base)} .peek .score i{display:block;block-size:100%;border-radius:var(--r-pill);background:var(--c-accent)} .peek .score em{position:absolute;inset-block-start:var(--sp-2);inset-inline-start:0; font:600 var(--fs-3xs) var(--mono);color:var(--text-muted);font-style:normal;white-space:nowrap} /* ציר הזמן — מי דיווח ומי הצטרף */ .peek .tl{margin-block:var(--gap-loose) var(--gap-base)} .peek .pubs{display:flex;gap:var(--rec-row-gap);flex-wrap:wrap} .peek .pubs span{font-size:var(--fs-3xs);font-family:var(--mono);color:var(--text-muted); padding:2px var(--sp-2);border-radius:var(--r-sm);background:var(--recessed-bg); white-space:nowrap;position:relative} .peek .pubs span:first-child{color:var(--c-accent); background:var(--accent-soft);font-weight:700} /* זוויות — איך אחרים מסגרו */ .peek .ang p{margin:0 0 var(--gap-tight);font-size:var(--fs-xs);line-height:1.45; color:var(--text-muted); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .peek .ang p b{color:var(--text-primary);font-weight:600;margin-inline-end:var(--sp-2)} /* מובייל — אין ריחוף, אין כרטיס */ } /* ══════════════════════════════════════════════════════════════ L7-TABLE · טבלת מינימל · מקור: 188 · minimal-source/theme/core/components/table.tsx + minimal_style_tokens (25 חוקי המרה MUI→טוקן, מטבלת מעריב) MuiTableCell.root borderBottomStyle: dashed MuiTableCell.head 14px · text.secondary · semibold · background.neutral MuiTableRow.selected primary.darkChannel α.04 · hover α.08 &:last-of-type border: 0 paddingCheckbox spacing(1) ══════════════════════════════════════════════════════════════ */ @layer components{ /* גבול מקווקו — חתימת מינימל */ .tr:last-of-type{border-block-end:0!important} /* נבחר — לא צבע מלא, אלא 4% מהמותג */ .tr[data-sel],.tr[aria-selected=true]{ background:color-mix(in oklab,var(--c-accent) 4%,transparent)!important} .tr[data-sel]:hover,.tr[aria-selected=true]:hover{ background:color-mix(in oklab,var(--c-accent) 8%,transparent)!important} .tr:hover{background:var(--surface-recessed)} /* כותרת — רקע ניטרלי, לא לבן */ /* ── פרטים נפתחים בתוך השורה · דפוס order-table-row ── מינימל לא מציב כרטיס צף מעל התוכן — הוא פותח Collapse מתחתיו. */ .trx{background:var(--recessed-bg); display:grid;grid-template-rows:0fr; transition:grid-template-rows var(--speed-state) var(--curve)} .tr[data-open] + .trx{grid-template-rows:1fr} .trx > div{overflow:hidden} .trx .inner{margin:var(--sp-3);padding:var(--pad-card); background:var(--surface-card);border-radius:var(--radius-card); box-shadow:var(--lift-card)} .trx .src{display:flex;align-items:center;gap:var(--gap-snug); padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3)} .trx .src:not(:last-of-type){border-block-end:2px solid var(--recessed-bg)} .trx .src b{font-size:var(--fs-sm);font-weight:600} .trx .src small{display:block;color:var(--text-muted);font-size:var(--fs-2xs)} } /* ── תוכן לועזי בממשק עברי · חוק ניטרליות-כיוון ── */ @layer components{ [dir=rtl] .ltr,[dir=rtl] .peek .ang p,[dir=rtl] .peek header b, [dir=rtl] .peek .pubs{direction:ltr;text-align:start} .peek .ang p b{margin-inline-end:var(--sp-2)} .peek .ang p b::after{content:" ·"} } /* ── typo.14 · גשר גופנים · minimal_style_tokens ── */ @layer tokens{ :root{ --font:var(--font-body,'Assistant',system-ui,-apple-system,sans-serif); --mono:var(--font-mono,'JetBrains Mono',ui-monospace,monospace); --display:var(--font-display,'Frank Ruhl Libre',Georgia,serif); }} /* ── arch.24 · מה שהיה inline עובר לשכבה ── */ @layer components{ .emptybox{padding:var(--pad-panel)} .emptybox b{font-size:var(--fs-lg);font-weight:700;color:var(--text-primary); margin-block-end:var(--sp-2);display:block} .emptybox p{font-size:var(--fs-sm);line-height:2;color:var(--text-muted)} .lbl2,.grp{font:var(--type-label-w) var(--type-label) var(--mono); letter-spacing:var(--type-track-label);color:var(--text-muted)} .fld{padding:var(--rec-control-pad);border:var(--edge); border-radius:var(--rec-control-radius);background:var(--surface-card); color:var(--text-primary);font-size:var(--fs-xs)} [data-focus]{border-color:var(--c-accent)} } /* ══════════════════════════════════════════════════════════════ L8-NAV · הניווט נראה כמו מוצר · דפוס Minimal nav-vertical היה: מספרים 1-9 במקום אייקונים, חור אצל admin, 2 מונים מתוך 10. ══════════════════════════════════════════════════════════════ */ @layer components{ .nv{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%; padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-control); min-block-size:44px;position:relative;text-align:start; color:var(--text-muted);font-size:var(--fs-sm);font-weight:500; transition:background var(--speed-hover) var(--curve),color var(--speed-hover) var(--curve)} .nv:hover{background:var(--accent-soft);color:var(--text-primary)} .nv[data-on]{background:var(--accent-soft);color:var(--c-accent);font-weight:600} .nv[data-on]::before{content:"";position:absolute;inset-block:8px;inset-inline-start:0; inline-size:3px;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--c-accent)} /* אייקון — מרובע קבוע, לא מספר */ .nv .ic{inline-size:22px;block-size:22px;flex:none;display:grid;place-items:center; font-size:15px;line-height:1;opacity:.75;transition:opacity var(--speed-hover) var(--curve)} .nv[data-on] .ic{opacity:1} .nv:hover .ic{opacity:1} .nv .lb{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* מונה — גלולה עדינה, לא בלוק */ .nv .cnt{flex:none;font:700 var(--fs-3xs) var(--mono); padding:2px var(--sp-2);border-radius:var(--r-pill); background:var(--recessed-bg);color:var(--text-muted);min-inline-size:22px;text-align:center} .nv[data-on] .cnt{background:color-mix(in oklab,var(--c-accent) 14%,transparent);color:var(--c-accent)} .nv .lk{flex:none;font-size:11px;opacity:.4} .nv[data-lock]{opacity:.45;pointer-events:none} /* כותרת קבוצה */ .grp{font:700 var(--fs-3xs) var(--mono);letter-spacing:.13em;color:var(--text-muted); text-transform:uppercase;padding-inline:var(--sp-3); margin-block:var(--sp-5) var(--sp-2);opacity:.7} .grp small{display:block;font-size:9px;font-weight:400;opacity:.7; letter-spacing:.06em;margin-block-start:2px} .grp:first-child{margin-block-start:var(--sp-2)} /* מקופל — אייקון ממורכז */ body[data-collapsed] .nv{justify-content:center;padding-inline:0} body[data-collapsed] .nv .ic{opacity:1;font-size:17px} body[data-collapsed] .nv .cnt{position:absolute;inset-block-start:4px;inset-inline-end:10px; min-inline-size:0;inline-size:7px;block-size:7px;padding:0;font-size:0; background:var(--c-accent);border-radius:var(--r-pill)} } /* ── L8b · אייקוני SVG · JT-NF-ICONS-001 · solar (הסט של מינימל) ── */ @layer components{ .nv .ic svg, .ic svg { inline-size:20px; block-size:20px; display:block; fill:currentColor; color:inherit } .nv .ic { color:var(--text-muted) } .nv:hover .ic, .nv[data-on] .ic { color:var(--c-accent) } body[data-collapsed] .nv .ic svg { inline-size:22px; block-size:22px } } /* ── L9 · טען עוד · דפוס מינימל TablePagination toolbar 64px ── */ @layer components{ .morebar .btn[disabled]{opacity:.5;pointer-events:none} } @layer posture{ /* התנוחה — נשמרת כשכבה גם כשריקה, הקנון דורש שלוש */ } /* ══════════════════════════════════════════════════════════════ L-FLUID · CSS 2025 · הממשק מתאים את עצמו לרוחב, לא לנקודת-שבירה ───────────────────────────────────────────────────────────── החוק: אין @media לרוחב. container queries + clamp + מתמטיקה. כל בלוק מודד את המכל שלו ומחליט — לא את המסך. מאחד: .tr · .ck · .frow · .peek · שהיו מוגדרים 3-4 פעמים כל אחד. ══════════════════════════════════════════════════════════════ */ @layer components{ /* ── מכלי-מדידה ── */ .canvas,.board,.main,.view{container-type:inline-size;container-name:pane} .side{container-type:inline-size;container-name:rail} /* ── שורת-הזרם · בלוק אחד, אפס important ── grid שמתכווץ מעצמו: העמודות המשניות נעלמות כשאין מקום. */ /* שיוך מפורש — בלי זה ילד רחב דוחף את כל השאר עמודה */ .tr:hover{background:var(--surface-recessed)} .tr[data-sel],.tr[aria-selected=true]{ background:color-mix(in oklab,var(--c-accent) 4%,transparent)} .tr[data-sel]:hover{background:color-mix(in oklab,var(--c-accent) 8%,transparent)} .th{background:var(--recessed-bg);color:var(--text-muted);font-weight:600} /* המטא נכנס רק כשיש רוחב — container, לא media */ /* ── תיבת-סימון · בלוק יחיד ── */ /* אזור-מגע 44 בלי לשנות את הגודל הנראה */ .tr{position:relative} /* ── כותרת · מספר שורות לפי הרוחב ── */ /* מטא נסתר כשהעמודה 0 — בלי media */ /* ── שורת המסננים · בלוק אחד ── */ .frow{display:flex;align-items:center;gap:clamp(6px,.9cqi,12px); flex-wrap:wrap;max-inline-size:100%} @container pane (max-width:760px){ .frow{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;padding-block:var(--sp-2); -webkit-mask-image:linear-gradient(to left,transparent,var(--c-black) 24px); mask-image:linear-gradient(to left,transparent,var(--c-black) 24px)} .frow::-webkit-scrollbar{display:none} .frow>*{flex:none} } /* ── כפתורים · יעד-מגע לפי מכשיר, לא לפי רוחב ── */ @media (pointer:coarse){ button:not(.ck),a[href],select,input:not([type=checkbox]),.btn,.tool,.nv,.lay,.item{ min-block-size:44px} .fld,input,select,textarea{font-size:max(16px,var(--fs-sm))} } /* ── הצצה · בלוק אחד, מוסתרת ללא ריחוף ── */ .peek{position:fixed;z-index:var(--z-dialog,80); inline-size:clamp(300px,32cqi,400px); background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation)); border:var(--edge);border-radius:var(--radius-card); box-shadow:var(--lift-overlay);padding:var(--pad-card); pointer-events:none;animation:peekIn 160ms var(--curve) both} @media (hover:none){ .peek{display:none} } @media (prefers-reduced-motion:reduce){ .peek{animation:none} } /* ── מגירה · לפי מכל, לא לפי מסך ── */ @container (max-width:900px){ .side{--layout-nav-current-w:min(300px,86vw)} } body[data-open]{overflow:hidden} body[data-open] .top,body[data-open] header{z-index:1} body[data-open] #scrim,body[data-open] .scrim{ z-index:var(--z-scrim,40); background:color-mix(in oklab,oklch(0% 0 0) 52%,transparent); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} body[data-open] .side{z-index:var(--z-drawer-panel,50)} body[data-open] .canvas,body[data-open] .board{pointer-events:none} /* ── טען עוד ── */ .morebar{display:flex;justify-content:center; padding-block:var(--sp-5) var(--sp-4); border-block-start:1px dashed var(--border-subtle)} .morebar .btn{min-inline-size:min(240px,60cqi);min-block-size:44px; border-radius:var(--r-pill);font-weight:600} } /* ══════════════════════════════════════════════════════════════ L-RTL-FIX · נמדד על 412px בעברית · שלושה דגלים מהצילומים 1. קבוצות-המסננים ברחו ל-left:-686 — mask ו-scroll הפוכים ב-RTL 2. גבהים לא אחידים — .fgrp 54 מול .drop 44 3. שורה 72px — הכפתור בעמודה משלו דחק את הכותרת ל-161 ══════════════════════════════════════════════════════════════ */ @layer components{ /* ── 1+2 · שורת המסננים · גובה אחיד, גלילה נכונה בשני הכיוונים ── */ .frow{align-items:stretch} .frow > .fgrp, .frow > .drop{ block-size:44px; min-block-size:44px; display:flex; align-items:center; border-radius:var(--r-md); flex:none} .frow .fgrp button, .frow .drop > *{block-size:36px; display:inline-flex; align-items:center} @container pane (max-width:760px){ /* המסכה הפוכה ב-RTL — אחרת הדהייה בצד הלא-נכון */ .frow{ -webkit-mask-image:linear-gradient(to var(--fade-dir,left), transparent, var(--c-black) 24px); mask-image:linear-gradient(to var(--fade-dir,left), transparent, var(--c-black) 24px); scroll-snap-type:x proximity; overscroll-behavior-x:contain } .frow > *{scroll-snap-align:start} } [dir=rtl]{--fade-dir:right} /* ── 3 · השורה · הכותרת מקבלת את המקום, הפעולה נצמדת ── */ /* ── הסיידבר לא נחשב חריגה כשהוא מחוץ למסך ── */ .side[aria-hidden=true], body:not([data-open]) .side{contain:layout paint} } /* ══════════════════════════════════════════════════════════════ L-MENU-FIX · התפריט נחתך על ידי מכל-הגלילה נקרא מהקוד: .menu{position:absolute;z-index:70} בתוך .frow{overflow-x:auto} — overflow חותך absolute ללא קשר ל-z-index. הפתרון: anchor positioning כשנתמך, ו-fixed כשלא. ══════════════════════════════════════════════════════════════ */ @layer components{ @container pane (max-width:760px){ /* המכל מפסיק לחתוך כשתפריט פתוח */ .frow:has(.drop[data-open]){overflow:visible; -webkit-mask-image:none;mask-image:none} /* התפריט יוצא מזרימת-המכל */ .drop[data-open] > .menu, .drop[data-open] > [role=menu]{ position:fixed; inset-block-start:auto; inset-inline:var(--sp-4) var(--sp-4); max-inline-size:none; max-block-size:min(52vh,420px); block-size:auto; overflow-y:auto; z-index:calc(var(--z-dialog,80) + 5); background:var(--surface-card); border:var(--edge); box-shadow:var(--lift-overlay); border-radius:var(--radius-card)} } /* גם בדסקטופ — לא להיחתך על ידי אב עם overflow */ .drop > .menu,.drop > [role=menu]{z-index:var(--z-dialog,80)} } /* ══════════════════════════════════════════════════════════════ L-DEPTH · עומק ותנועה · נמדד: 1% מהאלמנטים עם צל, אפס אנימציה כל ערך מטוקן קיים. אפס hex, אפס מספר חדש. ══════════════════════════════════════════════════════════════ */ @layer tokens{ :root{ /* מדרג-רוממות · מי מרחף מעל מי */ --lift-rest:var(--z1); --lift-raised:var(--sh-card); --lift-hover:var(--z8); --lift-active:var(--z16); /* תנועה · שלוש מהירויות בלבד */ --in-fast:120ms; --in-base:200ms; --in-slow:340ms; --stagger:28ms; }} @keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes pulseSoft{0%,100%{opacity:1}50%{opacity:.55}} @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}} @layer components{ /* ── עומק · כל משטח מקבל את הרוממות שלו ── */ .card,.kpi,.admet,.panel,.adcard,.vrow,.act,.guide,.softcard,.tintcard{ box-shadow:var(--lift-raised); transition:box-shadow var(--in-base) var(--curve), transform var(--in-fast) var(--curve), border-color var(--in-fast) var(--curve)} .card:hover,.adcard:hover,.vrow:hover,.softcard:hover{ box-shadow:var(--lift-hover);transform:var(--motion-hover-lift)} .adpanel,.menu,[role=menu],.peek{box-shadow:var(--lift-overlay)} [role=dialog],.sheet{box-shadow:var(--lift-modal)} .top,header{box-shadow:var(--lift-rest)} .side{box-shadow:var(--lift-rest)} /* השורה מתרוממת מעט בריחוף — סימן שהיא לחיצה */ .tr{transition:background var(--in-fast) var(--curve), box-shadow var(--in-base) var(--curve)} .tr:hover{box-shadow:var(--lift-rest)} /* ── תנועה · כניסה מדורגת ── */ @media (prefers-reduced-motion:no-preference){ .board > *, .adgrid > *, .g4 > *, .g3 > *{ animation:riseIn var(--in-base) var(--curve) both; animation-delay:calc(var(--i,0) * var(--stagger))} .tr{animation:fadeIn var(--in-fast) var(--curve) both} .view > *{animation:riseIn var(--in-slow) var(--curve) both} .peek{animation:riseIn var(--in-fast) var(--curve) both} /* מצב חי — פועם */ .st[data-s=live],.onair .ic,[data-live=true] .dot{ animation:pulseSoft 2.2s var(--curve) infinite} /* טעינה — שלד נוצץ במקום ריק */ .skel,[data-loading]{ background:linear-gradient(90deg, var(--recessed-bg) 25%, color-mix(in oklab,var(--c-accent) 6%,var(--recessed-bg)) 50%, var(--recessed-bg) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:var(--radius-control);color:transparent} } /* ── מעברים ממוקדים · לא "all" ── */ .btn,.nv,.tool,.chip,.rowbtn,.ck,.adtgl,.fld,input,select,textarea{ transition:background var(--in-fast) var(--curve), border-color var(--in-fast) var(--curve), color var(--in-fast) var(--curve), box-shadow var(--in-base) var(--curve), transform var(--in-fast) var(--curve)} .btn:active,.tool:active, /* ── מדרג-רדיוס · לא הכל 8px ── */ .chip,.delta,.badge,.cnt{border-radius:var(--radius-chip)} .fld,input,select,textarea,.btn,.rowbtn{border-radius:var(--radius-control)} .card,.kpi,.adcard,.vrow,.softcard,.tintcard{border-radius:var(--radius-card)} .adpanel,.peek,[role=dialog],.sheet{border-radius:var(--radius-panel)} } /* ══════════════════════════════════════════════════════════════ L-DEPTH-2 · תיקון · המחלקות האמיתיות בממשק נמדד: .tbl .guide .frow .fgrp .drop .menu .side .tr .rowbtn .nv (הכתיבה הקודמת פנתה ל-.card/.kpi/.panel שאינם קיימים) ══════════════════════════════════════════════════════════════ */ @layer components{ /* המכל של הטבלה — זה ה"כרטיס" האמיתי */ .tbl{background:var(--surface-card); border-radius:var(--radius-card); box-shadow:var(--lift-raised); border:var(--edge-soft); overflow:clip} .guide{box-shadow:var(--lift-raised);border-radius:var(--radius-card)} .fgrp,.drop{box-shadow:var(--lift-rest)} .drop > .menu,.drop > [role=menu]{box-shadow:var(--lift-overlay)} .side{box-shadow:var(--lift-rest)} .nv[data-on]{box-shadow:var(--lift-rest)} /* כניסה מדורגת לשורות — 12 הראשונות, השאר מיד */ @media (prefers-reduced-motion:no-preference){ .tbl .tr:nth-child(-n+12){ animation:riseIn var(--in-base) var(--curve) both; animation-delay:calc((var(--i,0)) * var(--stagger))} .tbl .tr:nth-child(1){--i:0} .tbl .tr:nth-child(2){--i:1} .tbl .tr:nth-child(3){--i:2} .tbl .tr:nth-child(4){--i:3} .tbl .tr:nth-child(5){--i:4} .tbl .tr:nth-child(6){--i:5} .tbl .tr:nth-child(7){--i:6} .tbl .tr:nth-child(8){--i:7} .tbl .tr:nth-child(9){--i:8} .tbl .tr:nth-child(10){--i:9} .tbl .tr:nth-child(11){--i:10} .tbl .tr:nth-child(12){--i:11} .guide,.frow{animation:riseIn var(--in-base) var(--curve) both} } /* מדרג-רדיוס אמיתי */ .tag,.cnt,.n,.lk{border-radius:var(--radius-chip)} .rowbtn,.fgrp button,.drop > button{border-radius:var(--radius-control)} .tbl,.guide,.menu{border-radius:var(--radius-card)} /* עמודת התאוצה — הפס מקבל חיים */ .vel .track{border-radius:var(--r-pill);overflow:clip; background:var(--progress-track)} .vel .track > i{border-radius:var(--r-pill); transition:inline-size var(--in-slow) var(--curve)} } /* ══════════════════════════════════════════════════════════════ L-POPOVER · תפריט נפתח source_ref: production-mirror/clastop-ui/src/components/ custom-popover/{custom-popover,styles}.tsx ציטוט, לא המצאה. הערכים המקוריים: DEFAULT_ARROW_SIZE 14 DEFAULT_PAPER_OFFSET [8, 2] ARROW_TRANSLATE 48% arrow clipPath polygon(0% 0%, 100% 100%, 0% 100%) arrow radius size/4 · הפוך ב-RTL (noRtlFlip) arrow border grey.500Channel α.12 listClasses.root minWidth 140 menuItemClasses.root gap: 2 → 16px (חוק spacing.22) ══════════════════════════════════════════════════════════════ */ @layer tokens{ :root{ --pop-arrow:14px; --pop-offset-x:8px; --pop-offset-y:2px; --pop-min-w:140px; --pop-item-gap:var(--sp-4); /* MUI gap:2 → 2*8=16px */ --pop-border:color-mix(in oklab,var(--text-muted) 12%,transparent); }} @layer components{ /* ── ה-Paper · המרה של CustomPopover.paperStyles ── */ .drop > .menu,.drop > [role=menu],.menu{ background:var(--surface-card); border:1px solid var(--pop-border); border-radius:var(--radius-card); box-shadow:var(--sh-dropdown); min-inline-size:var(--pop-min-w); /* getPaperOffsetStyles · top-right · isRtl הופך את הציר */ translate:var(--pop-tx,var(--pop-offset-x)) var(--pop-offset-y); padding:var(--sp-2)} [dir=rtl] .drop > .menu,[dir=rtl] .menu{--pop-tx:calc(var(--pop-offset-x) * -1)} /* ── פריט · menuItemClasses.root gap:2 ── */ .menu button,.menu [role=menuitem]{ display:flex;align-items:center;gap:var(--pop-item-gap); inline-size:100%;min-block-size:38px; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-control); font-size:var(--fs-xs);font-weight:500; transition:background var(--in-fast) var(--curve)} .menu button:hover{background:var(--recessed-bg)} .menu button[data-on]{ background:color-mix(in oklab,var(--c-accent) 9%,transparent); color:var(--c-accent);font-weight:700} .menu button .n{margin-inline-start:auto; font:600 var(--fs-3xs) var(--mono);color:var(--text-muted)} /* ── החץ · Arrow styled · clipPath ו-translate 48% ── */ .drop[data-open] > .menu::before{ content:"";position:absolute; inline-size:var(--pop-arrow);block-size:var(--pop-arrow); inset-block-start:0; inset-inline-end:calc(var(--pop-arrow) * 1.2); translate:0 -48%; rotate:135deg; clip-path:polygon(0% 0%, 100% 100%, 0% 100%); background:var(--surface-card); border:1px solid var(--pop-border); border-end-start-radius:calc(var(--pop-arrow) / 4)} [dir=rtl] .drop[data-open] > .menu::before{ border-end-start-radius:0; border-end-end-radius:calc(var(--pop-arrow) / 4)} .drop{position:relative} /* ── חוק Popover: תפריט אחד בכל רגע ── ב-MUI זה onClose; ב-CSS: אח פתוח סוגר אחים. */ .frow:has(.drop[data-open]) .drop:not([data-open]) > .menu{display:none} } /* ── L-POPOVER-2 · position-try · המרה של getPopoverOrigin MUI מחשב anchorOrigin/transformOrigin ומתהפך כשאין מקום. ב-CSS: fixed + position-try, ובדפדפן ישן — קיצוץ לגבולות. ── */ @layer components{ .drop > .menu,.drop > [role=menu]{ max-block-size:min(52vh,420px);overflow-y:auto; z-index:calc(var(--z-dialog,80) + 5)} @supports (position-area: bottom){ .drop{anchor-name:--dropAnchor} .drop > .menu,.drop > [role=menu]{ position:fixed;position-anchor:--dropAnchor; position-area:block-end span-inline-start; position-try-fallbacks:block-start span-inline-start, block-end span-inline-end, flip-block; margin-block-start:var(--pop-offset-y)} } @supports not (position-area: bottom){ .drop > .menu,.drop > [role=menu]{ position:absolute;inset-block-start:calc(100% + var(--sp-2)); inset-inline-start:auto;inset-inline-end:0; max-inline-size:min(92vw,340px)} } } /* ── L-POPOVER-3 · מובייל · מגירה תחתונה MUI: Popover צר → useMediaQuery → Drawer. אותו עיקרון. ── */ @layer components{ } /* ── L-POPOVER-4 · במובייל מבטלים את העוגן לגמרי position-area מ-L-POPOVER-2 גבר על inset-inline וקבע l:340 על מסך 412. ── */ @layer components{ } /* ══════════════════════════════════════════════════════════════ L-TABLE-MIN · טבלת מינימל source_ref: production-mirror/clastop-ui/src/components/table/ table-head-custom.tsx + sections/user/user-table-row.tsx ציטוט. הערכים המקוריים: TableCell.root borderBottomStyle dashed TableCell.head 14px · text.secondary · semibold · background.neutral TableRow.selected primary.darkChannel α.04 · hover α.08 &:last-of-type border 0 paddingCheckbox spacing(1) Avatar+Stack gap 2 → 16px · body2 · secondary text.disabled Label variant=soft color לפי status ══════════════════════════════════════════════════════════════ */ @layer components{ .tbl{background:var(--surface-card);border-radius:var(--radius-card); box-shadow:var(--sh-card);border:var(--edge-soft);overflow:clip} .tbl-h{display:flex;align-items:center;justify-content:space-between; padding:var(--sp-5) var(--sp-5) var(--sp-4);gap:var(--sp-3)} .tbl-h b{font-size:var(--type-section);font-weight:700;letter-spacing:-.02em} .tbl-n{font:700 var(--fs-3xs) var(--mono);color:var(--text-muted);letter-spacing:.1em} .tbl-scroll{overflow-x:auto;scrollbar-width:thin} .tbl table{inline-size:100%;border-collapse:collapse;font-size:var(--fs-sm)} /* head · background.neutral · semibold · 14px */ .tbl thead th{background:var(--recessed-bg);color:var(--text-muted); font-weight:600;font-size:var(--fs-sm);text-align:start;white-space:nowrap; padding:var(--sp-3) var(--sp-4);border-block-end:1px dashed var(--border-subtle)} .sortlbl{background:none;border:none;color:inherit;font:inherit;cursor:pointer; display:inline-flex;align-items:center;gap:var(--sp-1);padding:0; text-transform:capitalize;transition:color var(--in-fast) var(--curve)} .sortlbl:hover{color:var(--text-primary)} .sortlbl[data-on]::after{content:"▾";font-size:9px} /* cells · dashed · last border 0 */ .tbl td{padding:var(--sp-3) var(--sp-4); border-block-end:1px dashed var(--border-subtle);vertical-align:middle} .tbl tbody tr:last-of-type td{border-block-end:0} .cell-ck{inline-size:52px;padding-inline-start:var(--sp-2)!important} .cell-act{inline-size:92px;white-space:nowrap;text-align:end} .cell{white-space:nowrap;color:var(--text-muted)} .cell-main{min-inline-size:220px} /* row · hover · selected α.04/.08 */ .tbl tbody tr{transition:background var(--in-fast) var(--curve)} .tbl tbody tr:hover{background:var(--surface-recessed)} .tbl tbody tr[data-sel]{background:color-mix(in oklab,var(--c-accent) 4%,transparent)} .tbl tbody tr[data-sel]:hover{background:color-mix(in oklab,var(--c-accent) 8%,transparent)} /* Avatar + Stack · gap 2 → 16px · secondary = text.disabled */ .who{display:flex;align-items:center;gap:var(--sp-4)} .who-t{display:flex;flex-direction:column;align-items:flex-start;min-inline-size:0} .who-t b{font-weight:400;font-size:var(--fs-sm);color:var(--text-primary); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:26ch} .who-t small{color:color-mix(in oklab,var(--text-muted) 72%,transparent); font-size:var(--fs-xs)} .tbl .avatar{inline-size:40px;block-size:40px;border-radius:var(--r-pill);flex:none; display:grid;place-items:center;background:var(--recessed-bg); color:var(--text-muted);font:600 var(--fs-sm) var(--font)} /* Label variant=soft */ .label{display:inline-flex;align-items:center;padding:0 var(--sp-2); min-block-size:24px;border-radius:var(--r-sm); font:700 var(--fs-2xs) var(--font);text-transform:capitalize; background:var(--recessed-bg);color:var(--text-muted)} .label[data-tone=success]{background:var(--success-soft);color:var(--state-success)} .label[data-tone=warning]{background:var(--warn-soft);color:var(--state-warning)} .label[data-tone=error]{background:var(--danger-soft);color:var(--state-danger)} .label[data-tone=info]{background:var(--info-soft);color:var(--state-info)} /* IconButton */ .iconbtn{inline-size:36px;block-size:36px;border-radius:var(--r-pill);border:none; background:none;color:var(--text-muted);cursor:pointer; display:inline-grid;place-items:center; transition:background var(--in-fast) var(--curve),color var(--in-fast) var(--curve)} .iconbtn:hover{background:var(--recessed-bg);color:var(--text-primary)} .iconbtn svg{inline-size:18px;block-size:18px;fill:currentColor} /* checkbox · paddingCheckbox spacing(1) */ } /* ══════════════════════════════════════════════════════════════ L-STREAM-TABLE · טבלת הזרם · אותן עמודות לכותרת ולשורה source_ref: clastop-ui/src/components/table/table-head-custom.tsx clastop-ui/src/sections/user/user-table-row.tsx נמדד לפני: כותרת 646px מול שורה 535px · 7 עמודות מול 8 שני .tag לאותו ממד · "5 sources·The Independent" בתא אחד "2 d·Approve" בתא אחד ══════════════════════════════════════════════════════════════ */ @layer components{ /* ── רשת אחת · הכותרת והשורה חולקות אותו טוקן ── */ .tbl{--grid: 22px 44px minmax(0,1fr) var(--c-tag,0px) var(--c-src,0px) var(--c-when,0px) var(--c-act,auto)} .th,.tr{display:grid;grid-template-columns:var(--grid); align-items:center;gap:clamp(8px,1.1cqi,16px); padding-inline:var(--sp-4);padding-block:var(--sp-3)} .th>*,.tr>*{grid-row:1;min-inline-size:0} @container pane (min-width:700px){ .tbl{--c-tag:132px;--c-when:56px;--c-act:104px} } @container pane (min-width:920px){ .tbl{--c-src:128px} } /* ── כותרת · table-head-custom ── */ .th{background:var(--recessed-bg);color:var(--text-muted); font-weight:600;font-size:var(--fs-xs);letter-spacing:.06em; text-transform:uppercase;white-space:nowrap; border-block-end:1px dashed var(--border-subtle)} .th .h-when,.th .h-act{text-align:end} /* ── תאים ── */ .tr .vel{display:flex;flex-direction:column;align-items:flex-start;gap:3px} .tr .vel b{font:700 var(--fs-body)/1 var(--mono);color:var(--c-accent); font-variant-numeric:tabular-nums} .tr .vel .track{inline-size:100%;block-size:3px;border-radius:var(--r-pill); background:var(--progress-track);overflow:clip} .tr .vel .track i{display:block;block-size:100%;background:var(--c-accent)} .tr .ttl{display:flex;flex-direction:column;gap:2px} .tr .ttl b{font-weight:400;font-size:var(--fs-sm);line-height:1.4;color:var(--text-primary); display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .tr .ttl small{color:color-mix(in oklab,var(--text-muted) 72%,transparent); font-size:var(--fs-xs); display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} /* תג אחד · Label soft · והדסק כמשני מתחתיו */ .tr .tagcell{display:flex;flex-direction:column;align-items:flex-start;gap:3px;overflow:hidden} .tr .tagcell .sub{font-style:normal;font-size:var(--fs-3xs); color:color-mix(in oklab,var(--text-muted) 66%,transparent); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%} /* מקור · מספר בולט, מפרסם משני */ .tr .src{display:flex;flex-direction:column;align-items:flex-start;gap:2px;overflow:hidden} .tr .src b{font:700 var(--fs-sm) var(--mono);color:var(--text-primary)} .tr .src em{font-style:normal;font-size:var(--fs-3xs); color:color-mix(in oklab,var(--text-muted) 66%,transparent); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%} .tr .when{font:600 var(--fs-2xs) var(--mono);color:var(--text-muted); text-align:end;white-space:nowrap} .tr .act{display:flex;justify-content:flex-end} /* מובייל · שלוש עמודות */ @container pane (max-width:699px){ .th{display:none} .tr{--grid:22px minmax(0,1fr) auto;padding-block:var(--sp-3)} /* המהירות בשורת-הכותרת, לא absolute — absolute ב-RTL קפץ לצד השני */ .tr .vel{grid-column:2;grid-row:1;justify-self:start;align-self:start; flex-direction:row;align-items:baseline;gap:var(--sp-2); font:700 var(--fs-sm) var(--mono);color:var(--c-accent)} .tr .ttl{grid-column:2;grid-row:1;padding-block-start:22px;padding-inline:0} .tr .vel .track{display:none} .tr{position:relative} .tr .ttl b{-webkit-line-clamp:2} .tr .tagcell,.tr .src,.tr .when{display:none} .tr .act{grid-column:3} } } /* ══════════════════════════════════════════════════════════════ L-CHECK · תיבת-סימון וכפתור-אישור · הגדרה אחת בלבד source_ref: clastop-ui/src/sections/user/user-table-row.tsx ·