/* ========================================================================== Swim School Progress Tracker — shared stylesheet Design system: "Accessible & Ethical" — brand palette: dominant Midnight Blue (#0F414A) + Light Blue (#96C0CE) accents, Maroon (#7F0303) for danger, Tan (#D8BA98) for warnings, on an Alabaster (#EFE8DF) background. A deep forest green (#1F6E45) is scoped strictly to success/confirmation/done/active states — nowhere else. Noto Sans Hebrew, high contrast, 44px touch targets. RTL-first, mobile-first. Order: tokens -> reset -> base -> layout -> components -> pages. ========================================================================== */ :root { /* ---- primitives — derived ONLY from the 5-hue brand palette: Midnight Blue #0F414A · Light Blue #96C0CE · Maroon #7F0303 · Tan #D8BA98 · Alabaster #EFE8DF. (names kept from the previous theme; values are now tints/shades of these 5 hues only) ---- */ /* teal/blue ramp (Midnight → Light Blue — one hue, the dominant brand color) */ --blue-900: #0F414A; /* Midnight Blue — primary / brand */ --blue-800: #0A2E34; /* darker Midnight — hover / headings */ --blue-500: #2C6B77; /* mid teal — secondary / links / progress fill */ --blue-100: #CFE3E8; /* light teal tint — soft surfaces (always dark text on top) */ --violet-600: #96C0CE; /* Light Blue — accent / CTA (dark text on top) */ /* warm neutrals (Alabaster + Tan shades) */ --slate-50: #EFE8DF; /* Alabaster — page background */ --slate-100: #E7DCCC; /* warm muted surface */ --slate-200: #D6C8B4; /* warm border */ --slate-500: #5F5A50; /* soft text */ --slate-700: #3B372F; /* strong soft text — unused ramp step since v1.1.14 repointed .pill--role at its own token; kept so the ramp reads intact */ --slate-900: #241F19; /* body text (warm near-black) */ --white: #FFFFFF; /* Maroon ramp (danger / critical) */ --red-600: #7F0303; /* Maroon */ --red-50: #F6E3E3; /* light Maroon tint — danger surface */ /* Tan ramp (warn — Tan surface, dark text) */ --amber-600: #5A3E22; /* deep Tan/brown — warn text */ --amber-50: #ECDBC3; /* Tan tint — warn surface */ /* forest green — scoped ONLY to success / confirmation / done / active meaning */ --green-700: #1F6E45; /* deep forest green — ok text / border / icon / toast */ --green-300: #A5C5B5; /* 40/60 mix of --green-700 with white — the ONLY tone of "done" green that survives on the dark --purple-600 private-lesson fill (3.99:1 there, 5.10:1 on its hover shade, where --green-700 itself is 1.20:1 and effectively invisible). Sole consumer: .cal-block--private .cal-block--done. Still unmistakably green, so the calendars' written "מסגרת ירוקה" legend stays true. */ --green-50: #DCEFE2; /* pale green tint — ok surface */ /* ---- v1.1.21: a deliberate SIXTH hue, scoped STRICTLY to "this is a private lesson" ---- NOT part of the 5-hue locked brand palette above (Midnight/Light Blue/Maroon/Tan/Alabaster). This is the user's own explicit, final choice (offered Midnight/mid-teal/Tan; chose purple) — do NOT extend this hue to any other meaning, and do NOT read its presence as the palette having drifted by accident. Deliberately muted/dusty (HSL ~257°, 30% sat) so it sits beside the Alabaster page ground and the teal ramp instead of shouting over them. Measured, not assumed: white text 7.45:1 on --purple-600 and 9.52:1 on its hover shade; 6.13:1 against the Alabaster page background and 5.61:1 against the default --blue-100 calendar block fill, so a private block reads as a deliberate object, never a wash. */ --purple-600: #5B4B8A; /* muted/dusty private-lesson fill — white text 7.45:1 */ --purple-50: #E6E1F0; /* pale tint — NO consumer yet (kept so the ramp reads intact, and for a soft private surface if one is ever needed; body text on it = 12.8:1) */ /* ---- v1.21: a SEVENTH hue, --indigo-600/--indigo-50, scoped STRICTLY to "this is a solo_plus קבוצה" — declared NOT here but in its own :root block immediately above its only consumer, body[data-portal="solo"] .cal-block--team, at the foot of this file. That placement is a requirement of this repo's stylesheet gate, not a preference: test/cssdiff.py holds every rule present at the last release byte-identical, and appending a declaration to THIS :root block changes it. Search for "--indigo-600" for the full measured contrast/dE2000 record. */ /* ---- semantic ---- */ --color-primary: var(--blue-900); --color-on-primary: var(--white); --color-secondary: var(--blue-500); --color-accent: var(--violet-600); /* Repointed Midnight -> darker Midnight when .btn--nav became this pair's first CSS consumer: on the Light Blue accent, --blue-800 gives 7.38:1 where --blue-900 gave 5.72:1. Safe to repoint — it had no CSS consumer before, only theme.js's onAccent override, so no other rule's contrast moved. */ --color-on-accent: var(--blue-800); --color-bg: var(--slate-50); --color-surface: var(--white); --color-muted: var(--slate-100); --color-border: var(--slate-200); --color-text: var(--slate-900); --color-text-soft: var(--slate-500); --color-heading: var(--blue-800); --color-danger: var(--red-600); --color-danger-bg: var(--red-50); --color-warn: var(--amber-600); --color-warn-bg: var(--amber-50); --color-ok: var(--green-700); --color-ok-bg: var(--green-50); /* private lessons only — see the --purple-600 note above before reusing this anywhere else */ --color-private: var(--purple-600); --color-ring: var(--blue-900); /* ---- pill fills — component-scoped, used by .pill--* ONLY ---- Every pill carries WHITE text (user decision), so every fill is a DARK tone: the five dark-text mid-tones gave white only 2.2–2.7:1 (the sixth, .pill--role, already carried white at 4.66:1). These give white 4.58–11.2:1 (re-measured after the v1.1.18 recolour below — the low end is the new orange, was 4.7) and measure ΔE2000 33–67 against all six real pill grounds (white card #FFFFFF, page Alabaster #EFE8DF, muted card head #E7DCCC, picker-selected #CFE3E8, over-capacity row #F6E3E3, over-capacity + selected #EDC5C5) — up from 12–49 for the mid-tone set, itself up from 4–7 for the original creams. They are deliberately NOT the shared --color-*-bg tokens: those still drive .status--*, .cal-block--cover, .group-option--full, .tabs, .staged-kid, .kid-block__head and .progress, none of which change here. .pill--role is Midnight (--blue-900), NOT the mid-teal its depth would otherwise suggest: at white-text depth that teal (#3D7D8C) measured ΔE2000 1.2 from the #3F7C8D data fill — side by side the two pills would have been indistinguishable. v1.1.18, by user request: flag moved bronze #8A6224 -> ORANGE #B85C1E, and muted moved grey #6B655B -> RED #C22E22. Re-measured after the change, not carried over: white text is 4.58:1 on the orange and 5.66:1 on the red (both AA; the orange is now the TIGHTEST pair in this file, so it must not drift lighter), and both stay ΔE2000 ≥ 34 from all six grounds above and ≥ 40 from data/role/ok. The CLOSEST SURVIVING PAIR is no longer flag vs muted (ΔE 17.2 before, 14.6 now) but **muted vs danger at ΔE 10.6** — see the note on .pill--muted below, where that collision is visible in a real screen. Orange vs danger is 19.3. */ --pill-data-bg: #3F7C8D; --pill-data-text: #FFFFFF; /* facts & counts — teal */ --pill-role-bg: var(--blue-900); --pill-role-text: #FFFFFF; /* role — Midnight, see above */ --pill-flag-bg: #B85C1E; --pill-flag-text: #FFFFFF; /* attention — orange, 4.58:1 */ --pill-muted-bg: #C22E22; --pill-muted-text: #FFFFFF; /* archived / absent — red, 5.66:1 */ --pill-ok-bg: #347A56; --pill-ok-text: #FFFFFF; /* level & success — green */ --pill-danger-bg: #9E4444; --pill-danger-text: #FFFFFF; /* danger — maroon */ /* ---- spacing / type / shape ---- */ --space-xs: .25rem; --space-s: .5rem; --space-m: 1rem; --space-l: clamp(1.5rem, 1rem + 2vw, 2.5rem); --space-xl: clamp(2rem, 1.4rem + 3vw, 4rem); --text-body: 1rem; --text-sm: .875rem; --text-lg: clamp(1.125rem, 1rem + .5vw, 1.375rem); --text-section: clamp(1.6rem, 1.25rem + 1.8vw, 2.5rem); /* 1.5x the previous scale — clamp(2.5rem, 1.9rem + 3vw, 4rem) — on an owner ruling, applied at the TOKEN so every page's

grows together across all four portals rather than page by page. Each of the three terms is scaled by exactly 1.5, so the curve's shape is unchanged. ONE consumer is deliberately pinned at the OLD value and does not follow: .auth-brand h1, the login/signup wordmark — see the note there for the measurement. */ --text-title: clamp(3.75rem, 2.85rem + 4.5vw, 6rem); /* One shared measure for a two-column row (content + actions) and for the controls that sit directly above such rows, so the two never form a ragged edge — see .list-item and .lookup. */ --measure-row: 46rem; --radius: .75rem; --radius-sm: .5rem; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 65, 74, .10), 0 1px 3px rgba(15, 65, 74, .12); --shadow-md: 0 4px 12px rgba(15, 65, 74, .16); --transition: 200ms ease; --tap: 44px; --wrap: 60rem; /* Both faces come from Google Fonts on every page and both carry FULL Hebrew, Latin and digit coverage — that is the property the previous display face (self-hosted Horev CLM Heavy) did not have, and the reason several rules used to opt out of --font-display by hand. FREDOKA IS LOADED AT 500 AND 600 ONLY. Anything that renders it must state weight 600 explicitly; a heading left at the UA's default 700 would be SYNTHESISED (fake) bold. */ --font: 'Heebo', 'Noto Sans Hebrew', 'Segoe UI', system-ui, 'Arial Hebrew', sans-serif; --font-display: 'Fredoka', 'Heebo', 'Noto Sans Hebrew', sans-serif; } /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } body { min-height: 100svh; line-height: 1.55; font-family: var(--font); font-size: var(--text-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } input, button, textarea, select { font: inherit; color: inherit; } /* native controls follow the brand instead of the browser's default blue */ input[type="checkbox"], input[type="radio"], progress { accent-color: var(--color-primary); } button { cursor: pointer; } /* font-weight: 600 is not a style tweak — Fredoka ships here at 500/600 only, so without it every heading would inherit the UA's `bold` (700) and be faux-bolded. No class rule in this sheet sets a weight on an h1/h2/h3 (grepped: the bold classes all land on span/a/summary/legend/div), so this element-level declaration is the single place that decides heading weight. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--color-heading); line-height: 1.2; text-wrap: balance; } p { text-wrap: pretty; overflow-wrap: break-word; } a { color: var(--color-primary); } /* ---- accessibility base ---- */ /* THE RING IS TWO BANDS, and this rule declares only the outer one. --color-ring and --color-primary both resolve to --blue-900, so on any surface FILLED with --color-primary this outline alone is 1.00:1 — invisible (the defect this comment used to merely record). The inner band that fixes it is declared at the FOOT of this file, in --color-on-primary, and it has to live there rather than here: at equal (0,1,0) specificity a later component rule such as .card/.kid-block/.tabs would otherwise win the box-shadow back. See that block for the measured figures — do not "tidy" the two halves back together. */ :focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; inset-inline-start: var(--space-s); inset-block-start: var(--space-s); z-index: 100; padding: var(--space-s) var(--space-m); background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-sm); translate: 0 -200%; } .skip-link:focus { translate: 0 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---- layout ---- */ .wrapper { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--space-m); } .page { padding-block: var(--space-l) var(--space-xl); } .flow > * + * { margin-block-start: var(--space-m); } .stack-s > * + * { margin-block-start: var(--space-s); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; } .grid-cards { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .between { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; justify-content: space-between; } /* ---- app header / nav ---- */ .app-header { position: sticky; inset-block-start: 0; z-index: 20; background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-md); } .app-header .wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); padding-block: var(--space-s); } .brand { display: inline-flex; align-items: center; gap: var(--space-s); font-weight: 700; color: var(--color-on-primary); text-decoration: none; } .brand svg { width: 1.75rem; height: 1.75rem; } .shell-logo { max-height: 1.75rem; width: auto; object-fit: contain; } /* font-weight: 600 overrides the 700 inherited from .brand above — Fredoka has no 700 cut here. */ .brand span { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); } .main-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-inline-start: auto; } .main-nav a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap); padding: var(--space-xs) var(--space-m); border-radius: var(--radius-pill); color: var(--color-on-primary); text-decoration: none; font-weight: 500; /* subtle darker-than-bar fill so each item reads as a distinct pill, not a flat brick. A black overlay over --color-primary only deepens the blue, so the white label keeps well above AA contrast; states step darker to stay clearly ordered. */ background: rgba(0, 0, 0, .16); transition: background var(--transition); } .nav-icon { inline-size: 1.15em; block-size: 1.15em; flex: none; } .main-nav a:hover { background: rgba(0, 0, 0, .28); } .main-nav a[aria-current="page"] { background: rgba(0, 0, 0, .38); font-weight: 700; } /* attention-count badge on the "החלפות" nav item — light ring so it reads on the dark header */ .nav-badge { display: inline-grid; place-items: center; min-inline-size: 1.3rem; block-size: 1.3rem; padding-inline: .35em; border-radius: var(--radius-pill); background: var(--color-danger); color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); font-size: .72rem; font-weight: 700; line-height: 1; } .nav-badge[hidden] { display: none; } /* mobile: exactly TWO rows. Row 1 = brand + .shell-account (logout), a normal NON-scrolling wrapping flex row. Row 2 = .main-nav alone, full width, a single-line HORIZONTALLY SCROLLING strip. This supersedes the older "never a horizontal scroller" rule here: that rule's real bug was that ONE sliding row carried the nav AND the logout button, so logout could be scrolled off-screen with nothing hinting it was reachable. Keeping the two in separate rows fixes that by construction — only nav items can ever be out of view, and a partially-cut pill at the inline-end edge is what says so (an edge fade shipped here first and was removed at the user's request — see the note inside .main-nav). Wrapping was what made the header three rows tall (measured 375px: nav 2 lines = 92px, header 152px; at 320px it wrapped to 3 lines / 200px). The nav is now one 60px line at every width. Row 1 can still wrap, though: .shell-logo has no max-inline-size, so a wide school logo (a 10:1 image renders ~280px at 375px) pushes .shell-account onto a line of its own and the header is three rows again — pre-existing, not fixed here, and the reason nothing below assumes a fixed header height. */ @media (max-width: 40rem) { .app-header .wrapper { flex-wrap: wrap; padding-block: 6px; row-gap: var(--space-xs); } .brand span { display: none; } /* keep the logo mark, drop the wordmark */ .shell-school { display: none; } /* school context is non-essential on the narrow bar */ .shell-account .who { display: none; } /* drop "שלום, [שם]" greeting, keep the logout button */ .brand { flex: none; } .shell-account { flex: none; margin-inline-start: auto; } /* logout pinned to the row-1 end */ .main-nav { order: 3; flex: 1 0 100%; /* full-width second row */ margin-inline-start: 0; gap: var(--space-xs); flex-wrap: nowrap; /* one line, always — it scrolls instead of wrapping */ overflow-x: auto; overscroll-behavior-x: contain; /* a horizontal swipe here must not trigger iOS Safari's back-navigation gesture */ scrollbar-width: none; /* scrollbar hidden — the edge fade is the affordance */ -webkit-overflow-scrolling: touch; /* same legacy momentum hint .cal-scroll already uses */ /* NOT cosmetic: overflow-x on a box whose overflow-y is visible forces overflow-y to compute to auto too (the same trap that broke .cal-scroll's sticky day-head), so this box now clips on BOTH axes. :focus-visible paints 3px outline + 2px offset = 5px OUTSIDE a link's border box, which would be sliced off top and bottom without headroom. 8px > 5px, measured. */ padding-block: var(--space-s); /* NO edge fade. v1.1.22 shipped one here — the four-layer "scroll shadow" (two background-attachment: local covers in --color-primary + two fixed dark gradients) — and the user asked for it to be REMOVED because they disliked the shadow. Deleted deliberately; do not re-add it as a missing affordance. Its background-color was part of the same recipe and went with it: .app-header already paints --color-primary behind this row, so the strip looks identical without it, and mobile now matches desktop in having no background here. Scrollability is now signalled ONLY by item-peek — the pill at the inline-end edge being cut mid-shape. That signal is real but NOT guaranteed: it falls out of text metrics, so it varies by role, viewport width AND which font has loaded. THE MATRIX BELOW IS STALE AND IS KEPT ONLY AS THE SHAPE OF THE PROBLEM: it was measured in Assistant, the body face this app used before the Heebo/Fredoka swap, and nav pills are body text, so every figure moved with the metrics. Measured at the initial scroll position, in ASSISTANT: manager peeked 72.7px @320, 42.3 @375, 57.3 @390, 12.8 @430 — but front-desk @320 ended FLUSH (three whole pills + 2.2px of empty bar, nothing cut, two items hidden), and instructor @375 peeked 0.7px on the FALLBACK font, i.e. during the font swap. What survives the face change is the CONCLUSION, not the numbers: the peek can legitimately reach zero for some role/width pair, so nothing may be built on it. Re-measure the whole matrix in Heebo before changing any nav label, padding, gap or icon. */ } .main-nav::-webkit-scrollbar { display: none; } /* WebKit/Blink half of the hidden scrollbar */ /* flex: none is required, not tidiness: on a nowrap row the default flex-shrink: 1 would squeeze all six pills to fit instead of overflowing, so nothing would ever scroll — it would just get cramped and illegible. */ .main-nav a { padding-inline: var(--space-s); white-space: nowrap; flex: none; } } .shell-account { display: inline-flex; align-items: center; gap: var(--space-s); } .shell-account .who { font-size: var(--text-sm); opacity: .9; } /* BODY FACE, DELIBERATELY — this used to read var(--font-display) and is the one display-font consumer that rendered at --text-sm (14px). The display face is for big titles and the brand only: a rounded display cut at 14px inside a dark header loses its letterforms and reads as a different, muddier font rather than as the brand. Weight is unchanged. */ .shell-school { font-family: var(--font); font-size: var(--text-sm); font-weight: 700; color: var(--color-on-primary); opacity: .92; padding-inline-start: var(--space-s); margin-inline-start: var(--space-xs); border-inline-start: 1px solid rgba(255, 255, 255, .3); } .shell-school:empty { display: none; } .auth-school { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-primary); } .auth-school:empty { display: none; } .logout-btn { min-height: var(--tap); padding: var(--space-xs) var(--space-m); background: rgba(255, 255, 255, .16); color: var(--color-on-primary); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-pill); font-weight: 600; transition: background var(--transition); } .logout-btn:hover { background: rgba(255, 255, 255, .28); } /* ---- headings ---- */ .page-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); margin-block-end: var(--space-xs); } /* SIX consumers, verified by grep (v1.1.21 — the previous "only three" was wrong and, being normative, invited a future cleanup of text that must not be touched). All six are one-clause LEGENDS for a colour-coded signal, in three pairs: · "פס אדום — …" the behind-average bar frontdesk/dashboard.html · manager/index.html · "מסגרת ירוקה — …" the .cal-block--done border instructor/calendar.html · manager/calendar.html · "רקע ירקרק — …" the .cal-cell--open tint instructor/calendar.html · manager/calendar.html The four calendar ones are LOAD-BEARING and explicitly protected: each is the ONLY sighted-user explanation of its colour anywhere (the per-cell text for the tint lives in a .visually-hidden span, i.e. screen readers only), so removing one would leave that colour carrying meaning alone. Descriptive page blurbs were removed everywhere else — don't reintroduce them, and don't "clean up" the six above. */ .page-lead { color: var(--color-text-soft); max-inline-size: 46ch; } .section-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-section); margin-block-end: var(--space-s); } /* ---- card ---- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-m); transition: transform var(--transition), box-shadow var(--transition); } .card--pad-l { padding: var(--space-l); } /* v1.1.21 BUG-05 — `align-items: baseline` became `flex-start`. Baseline aligned the TEXT baselines of three children with different font sizes and paddings, which measured as the title sitting 7px ABOVE its own pills (title top 643, meta top 650) — read as a misalignment, not as a typographic nicety. It also fought .card__head-action's `align-self: center` (removed below), so the three children resolved to three different vertical rules. flex-start aligns all three to the top of the row, so the pills line up with the FIRST line of the title block and stay lined up however many lines that block grows to. */ .card__head { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: flex-start; justify-content: space-between; } /* Three-child head (title block · meta pills · action). The auto margin sits on the META, not the action: an auto margin eats ALL free space before space-between distributes any, so putting it on the action would drag the pills over to hug the title and merge them visually with the title's own pills. Here the free space lands before the meta, so title / meta+action keep their original trailing arrangement — and the action, still the LAST child, is pinned to the container's trailing edge, so its position no longer depends on pill widths (a 55px vs 68px level pill used to shift it ~12px between adjacent cards). */ .card__head-meta { margin-inline-start: auto; } /* v1.1.21 — `flex: none` became `0 1 auto` + min-inline-size:0. History, because the motivating measurement no longer applies and the rule should not read as dead: task 6 first put a TEXT button in this column, taking it to ~233px of max-content against the ~197px content box of a leaf card three folders deep at 375px; flex-shrink:0 meant it could not shrink below max-content, so .cluster's flex-wrap never engaged and the card overflowed. Browser QA then found that the resulting WRAP put the irreversible delete directly under the add button (BUG-02), so that button moved out to the card's .btn-row and this column is back to two 49x36 icons (~106px), which fits everywhere. The shrinkable value is KEPT as the correct general behaviour — a column that cannot shrink overflows its card instead of wrapping — not as an active fix. Its END-EDGE PINNING never came from `flex: none` anyway: that is .card__head-meta's auto margin above. */ .card__head-action { flex: 0 1 auto; min-inline-size: 0; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--tap); padding: var(--space-s) var(--space-l); border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; text-align: center; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .btn:active { transform: translateY(1px); } /* [hidden] must beat .btn's own display (same fix as .nav-badge[hidden]/.status[hidden]) — otherwise a JS `btn.hidden = true` is a silent no-op, e.g. the calendar's today button. */ .btn[hidden] { display: none; } /* THE SAME DEFECT ONE LEVEL UP, and it shipped: the UA's [hidden]{display:none} loses to ANY author `display`, so .btn-row's own `display:flex` (declared below) made `hidden` on a button ROW a silent no-op. Home's פרטיים|קבוצות tabs ship `hidden` and are unhidden only for a solo_plus tenant — without this companion they rendered on every tier, and on a plain solo tenant they were also permanently dead, because page-home.js wires their click handler only when teams are on. Declared here beside .btn[hidden] rather than beside .btn-row, so the two halves of one rule sit together and the next component with its own `display` has the precedent in view. */ .btn-row[hidden] { display: none; } .btn-icon { flex: none; inline-size: 1.1em; block-size: 1.1em; } /* hover lift — composited (transform/opacity only), hover-capable devices only so phones don't get a stuck hover state; :active still wins for the press-down. */ @media (hover: hover) { .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:hover:not(:active) { transform: translateY(-2px); } } .btn--primary { background: var(--color-primary); color: var(--color-on-primary); } .btn--primary:hover { background: var(--blue-800); } .btn--accent { background: var(--color-ok); color: var(--color-on-primary); } .btn--accent:hover { background: #17532F; } .btn--ghost { background: var(--color-secondary); color: var(--color-on-primary); border-color: var(--color-secondary); } .btn--ghost:hover { background: #1F4E57; } .btn--danger { background: var(--color-danger); color: var(--color-on-primary); border-color: var(--color-danger); } .btn--danger:hover { background: #5A0202; } /* secondary NAVIGATION action — a link-button that just goes somewhere and implies nothing is wrong. Sole consumer: the manager dashboard's "לוח שבועי" link (manager.js). Was .btn--warn in the app's bronze caution tone, which lent a navigation link a meaning it does not have; the name went with the colour so nothing still reads "warn". Uses the --color-accent / --color-on-accent PAIR (Light Blue #96C0CE on Midnight #0A2E34 = 7.38:1) rather than literals, so a per-school brand override in theme.js repaints both halves together. Measured dE2000 vs its real neighbours: 50 from the Midnight open/close pill, 23 from the #3F7C8D count pill, 21 from the white card — distinct from all three. The bronze now means ONLY caution again: --color-warn / --color-warn-bg are untouched here and still drive .cal-block--cover and .progress__bar--low. */ .btn--nav { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } .btn--nav:hover { background: #6FA7B9; border-color: #6FA7B9; } /* 5.44:1, dE2000 8.1 from rest */ /* neutral / quiet action — REVERSIBLE, non-destructive operations (archive, restore). Red (.btn--danger) is reserved for irreversible deletes, so the louder button is never the safer one. */ .btn--neutral { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border); } .btn--neutral:hover { background: var(--color-muted); border-color: var(--color-secondary); } .btn--icon-only { padding-inline: var(--space-xs); min-width: 36px; } .btn--sm { position: relative; min-height: 36px; padding: var(--space-xs) var(--space-m); font-size: var(--text-sm); } /* small buttons stay 36px tall visually (the density these dense rows need) but carry a transparent 44px-tall hit area, so touch targets meet the 44px minimum without bulk. */ .btn--sm::after { content: ''; position: absolute; inset-block: -4px; inset-inline: 0; } /* Measured, not assumed: .btn--sm's `padding` shorthand above is later at equal specificity, so it beats .btn--icon-only's `padding-inline` and every .btn--sm.btn--icon-only in the app is really a 49x36 glyph button (not 36x36). The -4px inset still takes it to 57x44, so the 44px minimum holds — only the old "36×36 → 44×44" note was wrong. Declarations unchanged: narrowing them here would resize 9 buttons across the swaps/front-desk/manager screens. */ .btn--sm.btn--icon-only::after { inset: -4px; } .btn--block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); } /* .btn-label is the text sibling of .btn-icon above — a hook so a button's WORDS can be hidden independently of its glyph. Mobile-first: .btn--nav.btn--sm collapses to icon-only below 40rem and gets its words back at 40rem, the same boundary the header uses to switch to its mobile layout, so the app has ONE definition of "narrow" rather than two. Why: the dashboard's instructor row (name + count pill + this link + the open/close pill) used to drop the button to a second row once the instructor's name got long, so card height and button position tracked name length. Collapsing the button frees ~69px. Every rule below is gated on .btn--nav.btn--sm — the label collapse AND the geometry that compensates for it, deliberately together. Gating only the geometry would let a future full-size .btn--nav lose its words below 40rem while keeping .btn's var(--space-l) inline padding, i.e. a ~2.5rem-wide "icon-only" button with a lot of dead space. The geometry is spelled out rather than reusing .btn--icon-only because that class is a measured no-op in this combination: its `padding-inline` loses to .btn--sm's later `padding` shorthand at equal specificity, so .btn--sm.btn--icon-only is really 49x36. .btn--nav.btn--sm is (0,2,0) so these actually win, and the `inset: -4px` hit-area trick is the same one .btn--sm.btn--icon-only::after uses above — 36x36 glyph, full 44x44 target. Nothing here touches .btn--icon-only, so the 9 existing icon buttons on the swaps/front-desk/manager screens are byte-for-byte unaffected. The accessible name does NOT collapse: manager.js sets aria-label "לוח שבועי של ", which keeps the visible words verbatim as a prefix, so WCAG 2.5.3 Label in Name still holds at >=40rem where those words are on screen. */ .btn--nav.btn--sm .btn-label { display: none; } .btn--nav.btn--sm { padding-inline: var(--space-xs); min-width: 36px; } .btn--nav.btn--sm::after { inset: -4px; } @media (min-width: 40rem) { .btn--nav.btn--sm .btn-label { display: inline; } .btn--nav.btn--sm { padding-inline: var(--space-m); min-width: 0; } .btn--nav.btn--sm::after { inset-block: -4px; inset-inline: 0; } } /* ---- forms ---- */ .field { display: block; } /* [hidden] must beat .field's own display, same as .nav-badge[hidden]/.btn[hidden]/.status[hidden] above: an author `display` rule outranks the UA `[hidden]{display:none}`, so a `hidden` .field stayed fully visible. The email-migration dialog's conditional password field relies on this. */ .field[hidden] { display: none; } .field > label, .field-label { display: block; font-weight: 600; margin-block-end: var(--space-xs); } .field .hint { color: var(--color-text-soft); font-size: var(--text-sm); font-weight: 400; } .input, .field input, .field select, .field textarea { width: 100%; min-height: var(--tap); padding: var(--space-s) var(--space-m); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } .field textarea { min-height: 4.5rem; resize: vertical; line-height: 1.5; } /* same solid 3px ring every other control uses — the old 25%-opacity glow was the weakest focus indicator in the app and failed the 3:1 non-text contrast minimum on Alabaster. */ .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); outline: 3px solid var(--color-ring); outline-offset: 2px; } .field input:user-invalid, .field select:user-invalid { border-color: var(--color-danger); } fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-m); } legend { font-weight: 700; padding-inline: var(--space-xs); color: var(--color-heading); } .form-grid { display: grid; gap: var(--space-m); } @media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } } /* standalone checkbox + label row (e.g. "הצגת קבוצות בארכיון"). The LABEL is the touch target — a 20px box alone is far under the 44px minimum, so the whole row carries it. */ .check-row { display: inline-flex; align-items: center; gap: var(--space-s); min-block-size: var(--tap); padding-inline: var(--space-xs); cursor: pointer; } .check-row input { inline-size: 1.25rem; block-size: 1.25rem; flex: none; margin: 0; cursor: pointer; } /* ---- day-of-week picker (group schedule) ---- */ .days-picker { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .day-toggle { position: relative; } .day-toggle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .day-toggle span { display: grid; place-items: center; min-inline-size: var(--tap); min-block-size: var(--tap); padding-inline: var(--space-s); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 700; color: var(--color-text-soft); background: var(--color-surface); transition: background var(--transition), color var(--transition), border-color var(--transition); } .day-toggle input:checked + span { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .day-toggle input:focus-visible + span { outline: 3px solid var(--color-ring); outline-offset: 2px; } /* ---- kid-search filter row (front desk חיפוש) ---- */ .search-filters { display: flex; flex-wrap: wrap; gap: var(--space-m); } .search-filters .field { flex: 1 1 10rem; min-inline-size: 8rem; } /* "waiting for placement" counters — students with no group, or whose group was archived. Each count is a button that applies the matching filter, so the count is also the route. */ .placement { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); } .placement[hidden] { display: none; } .placement__label { font-weight: 600; color: var(--color-heading); } /* ---- group picker (radio "cards" replacing the kid's group cannot carry the per-option "full group" red outline this needs. */ /* The container itself no longer scrolls: only .group-picker__scroll does, so the pinned "ללא קבוצה" choice sits OUTSIDE the scroller and can never start scrolled out of view. */ .group-picker { display: grid; gap: var(--space-s); padding: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius); } .group-picker__scroll { display: grid; gap: var(--space-s); max-block-size: 14rem; overflow-y: auto; } .group-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-block-size: var(--tap); padding: var(--space-s) var(--space-m); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; } .group-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .group-option:has(input:checked) { border-color: var(--color-primary); background: var(--blue-100); } .group-option:has(input:focus-visible) { outline: 3px solid var(--color-ring); outline-offset: 2px; } /* the pinned "ללא קבוצה" choice — dashed edge marks it as "no group", not a group */ .group-option--none { border-style: dashed; color: var(--color-text-soft); } .group-option--full { border-color: var(--color-danger); background: var(--color-danger-bg); } .group-option--full:has(input:checked) { background: #EDC5C5; } .group-option__name { font-weight: 600; overflow-wrap: break-word; min-inline-size: 0; } /* the fit-sort key, made visible: level + birth year of each option (why this order?) */ .group-option__meta { flex: 0 1 auto; justify-content: flex-end; } /* ---- kid picker (group-side "+ הוספת תלמידים" dialog) ---- */ .kid-picker-list { display: grid; gap: var(--space-xs); max-block-size: 14rem; overflow-y: auto; padding: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius); } .kid-option { display: flex; align-items: center; gap: var(--space-s); min-block-size: var(--tap); padding: var(--space-xs) var(--space-s); border-radius: var(--radius-sm); cursor: pointer; } .kid-option input { inline-size: 1.25rem; block-size: 1.25rem; flex: none; } .kid-option:has(input:checked) { background: var(--blue-100); } .kid-option__name { font-weight: 600; } /* staged (not yet written) kids on the create-group form — removable chips */ .staged-kids { display: flex; flex-wrap: wrap; gap: var(--space-s); } .staged-kid { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-s); background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--text-sm); } .staged-kid__remove { position: relative; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--color-danger); font-size: var(--text-sm); cursor: pointer; } /* 28px glyph, 44px hit area (chips must stay chip-sized) */ .staged-kid__remove::after { content: ''; position: absolute; inset: -8px; } .staged-kid__remove:hover { background: var(--color-danger-bg); } /* ---- expandable section (dashboard by instructor, My Groups) ---- */ .instructor-group { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; } .instructor-group + .instructor-group { margin-block-start: var(--space-m); } /* ---- dashboard instructor block: the disclosure and its calendar link as SIBLINGS ---- WHY A WRAPPER AT ALL. The "לוח שבועי" link may not live inside (that is nested-interactive, WCAG 4.1.2 — is itself the disclosure's button) and it may not live anywhere else inside
either: a collapsed
hides its content with `content-visibility: hidden` on ::details-content, so a link in the reveal panel is invisible, unfocusable and unclickable in the DEFAULT collapsed state while still returning a getBoundingClientRect(). Sibling-of-
is the only placement that is both. The wrapper therefore takes over the CARD CHROME so the pair still reads as one card. SCOPED BY THE CHILD COMBINATOR ON PURPOSE. .instructor-group is shared — js/group-tree.js puts it on the folder rows of five other screens, and the nested/level3 folders INSIDE this very card also carry it — so the chrome is stripped only from the block's own direct child, never from the class itself. Nothing outside .instructor-block can match these rules. */ .instructor-block { display: flex; align-items: flex-start; gap: var(--space-s); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; } .instructor-block + .instructor-block { margin-block-start: var(--space-m); } .instructor-block > .instructor-group { flex: 1 1 auto; min-inline-size: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* THE NARROW-WIDTH BUDGET, restored to exactly what it was before the link moved out of the summary — measured, not estimated. At 375 the card is 328px wide and the summary needs 145px for "name + count pill"; moving the link out cost it 24px (a 16px wrapper gap instead of the 8px the summary-main used, plus the link's own 16px end margin) and left -main at 134px, so the count pill wrapped to a second line and the card grew 64 -> 88px. Two levers, both principled, give it back: an 8px gap below 40rem (the same mobile-first halving .instructor-group__summary-main already does, so the app keeps ONE definition of "narrow"), and dropping the summary's own inline-END padding, which is now dead space — the gap to the link supplies that gutter instead. Measured result: -main 134 -> 158px, which is the identical figure the pre-move layout gave it. The :has() guard matters: front desk renders no calendar link and neither does the "no instructor" bucket, and there the summary IS the card's inline-end, so it must keep its padding or the open/close pill would sit flush against the border. */ .instructor-block:has(> .instructor-block__link) > .instructor-group > .instructor-group__summary { padding-inline-end: 0; } /* `margin-block-start: var(--space-m)` is NOT a nudge — it is the summary's OWN block padding token, so the link's top edge and the instructor name's top edge sit on the same line at every viewport width and every font size. A computed-height offset ((summaryHeight - 36) / 2) would have been wrong at one of the two breakpoints, because --text-lg is a clamp() and the summary's height is therefore fluid. `flex: none` keeps the button at its natural size so the name column absorbs all the narrowing; the var(--space-m) gap above leaves 12px of clear space between this link's 44px hit area (::after inset:-4px) and the summary's, over the 8px minimum. */ .instructor-block__link { flex: none; margin-block-start: var(--space-m); margin-inline-end: var(--space-m); } /* Breakpoint override at the FOOT of this component block, where a reader looks for it — a @media has no specificity, so placed above the base rule it would be silently dead. Longhand after the base rule's `gap` shorthand, which is the direction that wins at equal specificity. */ @media (min-width: 40rem) { .instructor-block { column-gap: var(--space-m); } } .instructor-group__summary { display: flex; align-items: center; gap: var(--space-s) var(--space-m); flex-wrap: wrap; min-block-size: var(--tap); padding: var(--space-m); cursor: pointer; font-weight: 700; color: var(--color-heading); list-style: none; } /* Dashboard's outer instructor summary only (3 real children + the ::after pill): the row itself never wraps, so the "פתיחה"/"סגירה" pill can't be pushed onto its own line — the name/count/ calendar-link block absorbs any overflow instead and the pill stays centered beside it. That internal wrap used to fire on a phone once a name got long, which made card height and button position depend on name length; .btn--nav going icon-only below 40rem frees ~69px, which clears every current instructor name at phone widths with room to spare, so the flex-wrap below is a fallback rather than the normal narrow-screen path. */ .instructor-group__summary--wide { flex-wrap: nowrap; } /* Mobile-first: 8px between the three children below 40rem, 16px from 40rem up. The two 16px column gaps were the only slack left that isn't the name itself, and halving them adds ~16px on top of the ~69px the button collapse frees — enough headroom that even a name well past the longest one currently in the data stays on one line at 360px. 8px is --space-s (on the scale, not a magic number) and still meets the 8px minimum spacing between adjacent touch targets. Treat that headroom as approximate, not a budget: these figures come from desktop Chromium, where `scrollbar-gutter: stable` (see html, above) reserves ~15px that a phone's overlay scrollbars do not, so an emulated width behaves like ~15px less page. Re-measure on a real device before spending the margin — e.g. before restoring 16px gaps here. */ .instructor-group__summary-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); flex: 1 1 auto; min-inline-size: 0; } @media (min-width: 40rem) { .instructor-group__summary-main { column-gap: var(--space-m); } } .instructor-group__summary::-webkit-details-marker { display: none; } .instructor-group__name { font-size: var(--text-lg); margin: 0; } .instructor-group__summary::after { content: 'פתיחה'; margin-inline-start: auto; padding: var(--space-xs) var(--space-m); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-on-primary); background: var(--color-primary); transition: background var(--transition); } .instructor-group[open] > .instructor-group__summary::after { content: 'סגירה'; } .instructor-group__summary:hover::after { background: var(--blue-800); } .instructor-group__summary:focus-visible { outline: 3px solid var(--color-ring); outline-offset: -3px; } /* smooth expand/collapse: grid-rows 0fr->1fr on the reveal wrapper, inner clips overflow. Neutralised by the global prefers-reduced-motion block (transition-duration:.01ms). */ .instructor-group__reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition); } .instructor-group[open] > .instructor-group__reveal { grid-template-rows: 1fr; } .instructor-group__body { overflow: hidden; min-block-size: 0; padding: var(--space-m); border-block-start: 1px solid var(--color-border); background: var(--color-surface); } /* nested (group-level) disclosure inside an instructor section — lighter, compact */ .instructor-group--nested { box-shadow: none; background: var(--color-surface); } .instructor-group--nested > .instructor-group__summary { min-block-size: 40px; padding: var(--space-s) var(--space-m); } /* var(--font) is load-bearing here, not inherited-by-accident. renderGroupTree() emits a HEADING at depth 0 (js/group-tree.js:174), so when a page passes a single-level stack the top folder is both `--nested`-free and `--level3`, and this class can therefore sit on an h2/h3 that the `h1, h2, h3` rule has already put in the display face — at 16px (and 14px on --level3 below), well under the ~17px floor the display face is reserved for. Stating the body face on both variants makes the size tier decide the family, whatever element the renderer chose. */ .instructor-group--nested .instructor-group__name { font-family: var(--font); font-size: var(--text-body); } .instructor-group--nested > .instructor-group__reveal > .instructor-group__body { background: var(--color-surface); padding-block-start: var(--space-s); } /* v1.1.21 — the INNERMOST non-leaf folder of whatever level stack a page passes to renderGroupTree(): the hour folder on the groups/history trees and on "הקבוצות שלי", the student folder on both פרטיים trees. The name says "innermost visual tier", NOT a literal position: the instructor's own פרטיים tree is only TWO levels deep, so there it lands on level index 1. Logical properties only, so the indent mirrors correctly in RTL. Three stacked visual tiers (bold bordered card → flat mid row → slim indented innermost row → leaf card) still read clearly at 375px in the existing single-column tree; no new breakpoint needed. */ .instructor-group--level3 { border-inline-start: 3px solid var(--color-border); margin-inline-start: var(--space-s); } .instructor-group--level3 > .instructor-group__summary { min-block-size: 36px; padding: var(--space-xs) var(--space-s); } .instructor-group--level3 .instructor-group__name { font-family: var(--font); font-size: var(--text-sm); font-weight: 600; } /* ---- weekly calendar (instructor) — hour × day time grid ---- */ /* NOT sticky — evaluated for v1.1.21 task 11 and rejected on measurement, recorded here so it is not re-proposed. Making the week-nav row sticky so the anchor-scroll can never carry it away would need a coordinated offset stack, and this page has none: .app-header is ALREADY `position: sticky; inset-block-start: 0; z-index: 20`, and .cal-dayhead below ALSO sticks at 0 — i.e. the day-head row is already occluded by the header today (pre-existing, out of scope here, but proof there is no offset system to slot into). Re-measured at 375x667 after v1.1.22 made the mobile nav a one-line scrolling strip: the header is 120px — 12px wrapper padding + a 44px brand/logout row + 4px row-gap + a 60px nav row (44px pill + 2x8px focus-ring headroom). That replaces the ~144px this comment used to claim, which was stale twice over: while the nav still wrapped the header actually measured 152px. A sticky week-nav would still add 80px (re-measured; its two buttons and the label wrap to three rows at that width) and the day-head ~51px: ~251px, 38% of the viewport, permanently. v1.1.22 narrows ONE clause of the old rationale — at <=40rem the header measured 120px at every width from 320px up, and the NAV no longer varies with role, school name or font, because it no longer wraps. It does NOT change the conclusion, and the height is still not fixed: row 1 wraps to a third row behind a wide school logo (.shell-logo has no max-inline-size — see the note by the mobile header block), and above 40rem the header still varies with wrapping (measured 197.75px at 641px, 112px at 1440px). This page is used at all those widths, so the offsets still could not be written honestly in CSS — it would take either a magic number that is wrong at several widths or JS re-measuring into a custom property on every resize. Both are far more machinery, and more risk at 375px, than the scroll behaviour they would protect. The trade-off is handled in js/auth-guard.js instead, gated on :focus-visible so it costs pointer/touch users nothing. */ .week-nav { gap: var(--space-s); } .cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .cal-grid { display: grid; gap: 1px; min-inline-size: 46rem; grid-auto-rows: minmax(2rem, auto); background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); } .cal-grid > * { background: var(--color-surface); } .cal-corner { background: var(--color-muted); } .cal-dayhead { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-s) var(--space-xs); background: var(--color-muted); font-weight: 700; color: var(--color-heading); text-align: center; position: sticky; inset-block-start: 0; } .cal-dayhead--today { background: var(--blue-100); } .cal-dayhead__date { font-weight: 500; font-size: var(--text-sm); color: var(--color-text-soft); } .cal-time { padding: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-soft); text-align: center; white-space: nowrap; } /* NO `opacity` HERE. It used to carry `opacity: .6`, which composited --color-text-soft (#5F5A50) toward the white cell (.cal-grid > *, :650) to rgb(159,156,150) and measured 2.74:1 — a 1.4.3 failure on every :30 gutter label of the manager and instructor calendars. The token alone on that same white measures 6.85:1, so the smaller type is the whole de-emphasis and it is enough. Group opacity never preserves a text/ground ratio; carry "quieter" on size or weight instead. */ .cal-time--half { font-size: .72rem; } .cal-cell { display: grid; gap: 2px; align-content: start; padding: 2px; min-block-size: 2rem; } .cal-cell--today { background: color-mix(in srgb, var(--blue-100) 35%, var(--color-surface)); } /* v1.1.19 item 3 — a genuinely EMPTY slot the instructor has DECLARED themselves available for. Reuses the existing --color-ok token (no new colour): it is a dark forest green, so a 12% mix into white still lands a clearly visible mint (~rgb(227,238,232)) rather than a wash. Declared more informative than "today", so it deliberately sits AFTER .cal-cell--today and wins where a cell is both. Never colour-only: renderWeeklyCalendar() puts a .visually-hidden "פנוי, יום X בשעה Y" line inside each tinted cell. Booked cells are never tinted — the rule only ever reaches the empty branch. */ .cal-cell--open { background: color-mix(in srgb, var(--color-ok) 12%, var(--color-surface)); } /* a duration block fills the height of the slots it spans, communicating length visually */ .cal-cell--span { align-content: stretch; } .cal-cell--span .cal-block { block-size: 100%; } .cal-block { display: block; padding: var(--space-xs) var(--space-s); border-radius: var(--radius-sm); border: 2px solid transparent; background: var(--blue-100); color: var(--blue-900); text-decoration: none; font-weight: 600; font-size: var(--text-sm); line-height: 1.25; transition: background var(--transition), border-color var(--transition); } .cal-block:hover { background: var(--color-secondary); color: var(--color-on-primary); } .cal-block--done { border-color: var(--color-ok); } /* covered-away: this group's own lesson is being covered by another instructor (swap) */ .cal-block--covered { border-style: dashed; border-color: var(--color-warn); } /* a lesson the viewer is covering for someone else (approved swap) — read-only (not their group, so no link). Yellow/warn OUTLINE + faint warn fill: distinct from the green "done" border and the blue accent blocks, and solid (not dashed) so it reads apart from the dashed "covered-away" marker above. */ .cal-block--cover { background: var(--color-warn-bg); border-style: solid; border-color: var(--color-warn); color: var(--color-heading); cursor: default; } .cal-block--cover:hover { background: var(--color-warn-bg); color: var(--color-heading); } /* v1.1.21 task 9 — a PRIVATE lesson (blockFor() adds this only for groups whose kind is 'private'). Colour is a reinforcement, never the only signal: the block's own .cal-block__lvl line already ends in " · פרטי" and its aria-label carries the same words. .cal-block--cover can never co-occur with this: --cover is applied only by extraBlockFor() (someone else's lesson the viewer is covering, read-only) and --private only by blockFor() (the viewer's OWN groups) — two structurally separate render functions, so there is no precedence conflict to resolve. */ .cal-block--private { background: var(--color-private); color: var(--color-on-primary); border-color: transparent; } /* MEASURED, and the reason this override exists at all: --color-ok (#1F6E45) on the purple fill is 1.20:1 — invisible, and a straight WCAG 1.4.11 failure for the one border that carries "this lesson is already recorded". --green-300 is that same green lightened 40/60 toward white: still unmistakably GREEN (so both calendars' "מסגרת ירוקה" legend stays true), and 3.99:1 on the resting fill / 5.10:1 on the hover fill. Do not darken it back toward --color-ok. */ .cal-block--private.cal-block--done { border-color: var(--green-300); } /* --covered's dashed border is --color-warn (deep Tan/brown) — 1.31:1 on this fill, so it lightens here, mirroring the exact rgba(255,255,255,…) treatment .cal-block:hover already uses for the same "dark fill needs a light overlay" reason. 5.92:1. Being LATER and equal-specificity (0,2,0) to the --done rule above, it also wins when a block is both done AND covered — the same precedence the two base modifiers already have. */ .cal-block--private.cal-block--covered { border-color: rgba(255, 255, 255, .85); } .cal-block--private .cal-block__lvl { color: rgba(255, 255, 255, .85); } /* 5.92:1 */ .cal-block--private .cal-block__note { color: rgba(255, 255, 255, .95); } /* 6.92:1 */ /* Its own hover, staying recognisably purple rather than flipping to the shared teal --color-secondary like every other block does. */ .cal-block--private:hover { background: color-mix(in srgb, var(--color-private) 82%, black); color: var(--color-on-primary); } /* An UNTAKEN slot — real time on the owner's own week, but NOT a lesson (solo tier only; renderWeeklyCalendar() emits this exclusively for a blockKindFn(g) === true block, which no school-portal caller passes). Faint + dashed so it reads as "space" rather than as content, and NEVER colour-only: the block's single line literally says "זמן פנוי". Additive — every rule ABOVE this point is untouched, so each existing block class renders identically. That is a standing requirement, not a nicety: the school portals hover-style .cal-block--private right above, and dropping that one rule silently made a private 1:1 hover identical to an ordinary group block on instructor/calendar.html and manager's instructor week. RECOMPUTED, not transcribed: --color-text-soft #5F5A50 is 6.85:1 on --color-surface (white) and 6.21:1 on the lightest cell tint (.cal-cell--today, a 35% --blue-100 mix), both well past AA. The DASHED border measures 2.05:1 — deliberately below 3:1, because this is a static
, not a UI control, so 1.4.11 does not bind it, and the border only reinforces text that already carries the whole meaning. The :hover neutraliser is load-bearing, not tidiness — .cal-block:hover flips the fill to --color-secondary, which would advertise a hover affordance on a block that cannot be clicked. */ .cal-block--available { background: transparent; border: 2px dashed color-mix(in srgb, var(--color-text-soft) 45%, var(--color-surface)); color: var(--color-text-soft); font-weight: 500; cursor: default; } .cal-block--available:hover { background: transparent; color: var(--color-text-soft); } .cal-block__name { display: block; overflow-wrap: break-word; } .cal-block__lvl { display: block; font-weight: 400; font-size: .78rem; color: var(--color-text-soft); } .cal-block__note { display: block; margin-block-start: 2px; font-weight: 600; font-size: .72rem; color: var(--color-warn); } .cal-block--cover .cal-block__note { color: var(--color-warn); } .cal-block:hover .cal-block__lvl { color: rgba(255, 255, 255, .85); } .cal-block:hover .cal-block__note { color: rgba(255, 255, 255, .9); } .cal-block--cover:hover .cal-block__note { color: var(--color-warn); } .cal-untimed { margin-block-start: var(--space-m); } .day-chip { display: block; padding: var(--space-s) var(--space-m); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-heading); font-weight: 600; text-decoration: none; transition: background var(--transition), border-color var(--transition); } .day-chip:hover { background: var(--blue-100); border-color: var(--color-secondary); } /* ---- pills / badges ---- */ .pill { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 2px var(--space-s); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; line-height: 1.6; /* an unclassed pill inherits the fill of .pill--muted so it still reads as intentional — since v1.1.18 that is RED, so an unclassed pill is now visually loud: give every new pill an explicit modifier rather than relying on this default. */ background: var(--pill-muted-bg); color: var(--pill-muted-text); } /* .pill--data carries factual, neutral information: birth years, N/capacity counts, averages, group/day/skill counts, lesson labels. .pill--muted is reserved for the ABSENCE of something — archived, unknown level, "טרם", an unfilled swap — so it never competes with live data. */ .pill--data { background: var(--pill-data-bg); color: var(--pill-data-text); } /* Level pills are green by product decision. NOTE: this is deliberately the same pair as .pill--ok, so a level and a success/approved state are visually identical where they co-occur (swaps card). An UNKNOWN level ('—') still renders .pill--muted, set at the render sites, so "no level" never reads as a success state. */ .pill--level { background: var(--pill-ok-bg); color: var(--pill-ok-text); } .pill--role { background: var(--pill-role-bg); color: var(--pill-role-text); } .pill--ok { background: var(--pill-ok-bg); color: var(--pill-ok-text); } .pill--flag { background: var(--pill-flag-bg); color: var(--pill-flag-text); } .pill--danger { background: var(--pill-danger-bg); color: var(--pill-danger-text); } /* KNOWN COLLISION, shipped deliberately (v1.1.18, user-requested red). --pill-muted-bg #C22E22 sits only ΔE2000 10.6 from .pill--danger's #9E4444 — the closest pair in the file, tighter than the flag/muted 17.2 it replaced — and the two DO co-occur: buildGroupPicker() (js/auth-guard.js) renders "מלאה" as .pill--danger in the same row where an archived group renders "בארכיון" as .pill--muted, so "archived" and "full" read as near-identical there. Recorded the same way as the .pill--level/.pill--ok pair above rather than silently absorbed. Both keep their own TEXT, so meaning is never carried by colour alone; if the two ever need to be told apart at a glance, move .pill--muted rather than .pill--danger (danger's maroon is load-bearing for destructive controls elsewhere). */ .pill--muted { background: var(--pill-muted-bg); color: var(--pill-muted-text); } /* equal-width digits: counts, years and times stop shifting the controls beside them */ .pill, .list-item__meta, .cal-time, .cal-dayhead__date, .staged-kid, bdi, .progress-num { font-variant-numeric: tabular-nums; } /* ---- lists ---- */ .list { list-style: none; padding: 0; display: grid; gap: var(--space-s); } /* v1.1.21 task 14 — BOUND THE FLEX CONTAINER, not one of its children. History: this row is `display:flex; justify-content:space-between` with exactly two children (.list-item__main, .list-item__actions). Unbounded inside the 60rem .wrapper, space-between stranded the actions ~700px from the name they belong to, so v1.1.19 capped the CHILD (.list-item__main { max-inline-size: 30rem }) and switched the row to flex-start from 40rem up. That traded one symptom for another: on a wide viewport the capped content column plus the actions huddled near the start with a large dead gap running to the row's true end edge, because flex-start distributes no free space at all. Two patches, one real cause — an unbounded box. So: the 30rem child cap AND the 40rem override are both gone, plain space-between is live again at EVERY width, and the ROW ITSELF carries the reading-width bound. 46rem is not an invented number — it is this stylesheet's own existing wide-content measure (.cal-grid's min-inline-size), and it is the same reasoning the 30rem cap was written with: ~30rem of content column plus an actions column plus the row's own 2rem of padding. The cap is on .list-item and NOT on .list on purpose: .list also holds the tree's leaf CARDS (li.card), which must keep filling their folder body. Bounding a box can only pull its two ends closer together, never push them apart, so no other .list-item consumer can regress in the direction that caused the original bug. The measure is a TOKEN because the controls sitting above these rows must share it — see .lookup below; browser QA measured a 192px ragged edge when only the rows were capped. */ .list-item { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); align-items: center; justify-content: space-between; padding: var(--space-m); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); max-inline-size: var(--measure-row); } /* BUG-04 — the kid-lookup screen's own controls share the result rows' measure. Without this the search field and filter row spanned the full 58rem wrapper while every row below capped at 46rem, leaving a 192px ragged edge down the start side of the screen. Scoped to the section (.lookup on frontdesk/index.html) rather than applied to .field/.check-row globally, which are used by every form in the app. The h1 and the primary button are deliberately NOT capped — headings and a lone button read fine spanning the wrapper, and it is the CONTROL EDGES that have to line up with the rows. */ .lookup > .field, .lookup > .search-filters, .lookup > .check-row, .lookup > .placement { max-inline-size: var(--measure-row); } .list-item__main { min-inline-size: 0; } .list-item__title { font-weight: 700; color: var(--color-heading); } .list-item__meta { color: var(--color-text-soft); font-size: var(--text-sm); } .list-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); } /* ---- progress ---- */ .progress { position: relative; height: 12px; background: var(--color-muted); border-radius: var(--radius-pill); overflow: hidden; } .progress__bar { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--pct, 0%); background: var(--color-secondary); border-radius: inherit; transition: width var(--transition); } .progress__bar--low { background: var(--color-warn); } .progress__bar--full { background: var(--color-ok); } .progress__bar--behind { background: var(--color-danger); } /* ---- skill checkboxes (instructor poolside flow — fastest tap) ---- */ .kid-block { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; } .kid-block__head { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: space-between; padding: var(--space-m); background: var(--color-muted); border-block-end: 1px solid var(--color-border); } /* Absent kid: red strikethrough over the name (paired with the toggle button text + aria-pressed, so meaning is never color-only). */ .kid-name--absent { text-decoration: line-through; text-decoration-color: var(--color-danger); text-decoration-thickness: 2px; } .kid-block__progress { display: grid; gap: var(--space-xs); padding: var(--space-s) var(--space-m); border-block-end: 1px solid var(--color-border); } .skills { list-style: none; padding: 0; margin: 0; } .skill-check { display: flex; align-items: center; gap: var(--space-m); min-height: 56px; padding: var(--space-s) var(--space-m); border-block-start: 1px solid var(--color-border); cursor: pointer; } .skill-check:first-child { border-block-start: 0; } .skill-check input[type="checkbox"] { inline-size: 28px; block-size: 28px; flex: none; margin: 0; accent-color: var(--color-ok); cursor: pointer; } .skill-check__text { display: flex; flex-direction: column; } .skill-check__name { font-weight: 600; } .skill-check input:checked ~ .skill-check__text .skill-check__name { color: var(--color-ok); text-decoration: line-through; } .skill-check__notes { color: var(--color-text-soft); font-size: var(--text-sm); } @media (hover: hover) { .skill-check:hover { background: var(--color-bg); } } /* keep focused checkboxes clear of the sticky "finish lesson" bar (WCAG 2.2 Focus Not Obscured) */ body[data-page="group"] { scroll-padding-block-end: 5.5rem; } body[data-page="group"] #kids { padding-block-end: 5.5rem; } /* ---- toast ---- */ .toast { position: fixed; inset-block-end: var(--space-l); inset-inline: var(--space-m); margin-inline: auto; max-inline-size: 30rem; z-index: 60; padding: var(--space-s) var(--space-m); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-weight: 600; text-align: center; opacity: 0; translate: 0 1rem; pointer-events: none; transition: opacity var(--transition), translate var(--transition); background: var(--slate-900); color: var(--white); } .toast.is-visible { opacity: 1; translate: 0 0; } .toast--error { background: var(--color-danger); } .toast--ok { background: var(--color-ok); } .toast--info { background: var(--color-primary); } /* ---- inline status (forms / router) ---- */ .status { padding: var(--space-s) var(--space-m); border-radius: var(--radius-sm); font-weight: 600; } .status[hidden] { display: none; } .status--error { background: var(--color-danger-bg); color: var(--color-danger); } .status--ok { background: var(--color-ok-bg); color: var(--color-ok); } .status--info { background: var(--color-muted); color: var(--color-heading); } /* ---- empty / loading ---- */ .empty { text-align: center; color: var(--color-text-soft); padding: var(--space-xl) var(--space-m); } .loading { color: var(--color-text-soft); padding: var(--space-l); text-align: center; animation: loading-pulse 1.5s ease-in-out infinite; } /* opacity-only pulse (composited); global prefers-reduced-motion sets animation-duration:.01ms */ @keyframes loading-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } /* ---- dialog ---- */ dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: none; border-radius: var(--radius); box-shadow: 0 20px 50px rgba(15, 65, 74, .35); background: var(--color-surface); color: var(--color-text); } dialog::backdrop { background: rgba(15, 65, 74, .55); } dialog { overflow: auto; overscroll-behavior: contain; } /* The dialog is the scroll container, and .dialog__actions below is sticky to its bottom edge — so a focus()/scrollIntoView() that lands a field at the "bottom" parks it BEHIND that band (WCAG 2.4.11 Focus Not Obscured). This reserves the band's height for every scroll-into-view inside a dialog, including the browser's own focus scrolling. MEASURED, not guessed: the band is 128px at 375px and 144px at 1440px (it grows because both .btn's inline padding and .dialog__actions' padding-block read var(--space-l), which is a clamp on vw), on #group-create-dialog / #group-dialog — the two-row worst case. 10rem = 160px covers 144px. The 16px over is slack for a longer button label, NOT a budget to spend: re-measure with band-height tooling before relying on it. */ dialog { scroll-padding-block-end: 10rem; } .dialog__body { padding: var(--space-l); } /* A tall dialog (the kid editor is taller than a 375px viewport) must never hide its own שמירה/ביטול row behind an inner scroller: the action row sticks to the dialog's bottom. The negative block-end margin lets it reach the body's padding edge. */ .dialog__actions { position: sticky; inset-block-end: 0; z-index: 1; margin-block-end: calc(var(--space-l) * -1); padding-block: var(--space-s) var(--space-l); background: var(--color-surface); box-shadow: 0 -.5rem .75rem -.75rem rgba(15, 65, 74, .45); } .dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); margin-block-end: var(--space-m); } .dialog__head h2 { font-size: var(--text-lg); } .dialog-close { min-height: var(--tap); min-width: var(--tap); border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); } /* ---- login / auth page ---- */ .auth-shell { min-height: 100svh; display: grid; place-items: center; padding: var(--space-l) var(--space-m); } .auth-card { width: min(28rem, 100%); } /* signup.html's card carries a two-step form (a 2-column name/email grid and seven day / from / to rows), which 28rem cramps at desktop widths. Declared AFTER .auth-card and at the SAME specificity (0,1,0), so plain document order wins it — no !important, and every other .auth-card consumer (index.html) is untouched. min() keeps the mobile width identical at 375px. */ .signup-card { width: min(38rem, 100%); } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); text-align: center; margin-block-end: var(--space-l); color: var(--color-primary); } .auth-brand svg { width: 3rem; height: 3rem; } .auth-logo { max-height: 3rem; width: auto; object-fit: contain; margin-block-end: var(--space-s); } /* PINNED AT THE PRE-1.5x --text-title VALUE, DELIBERATELY NOT THE TOKEN. This h1 is not a page title — it is the LapKeeping wordmark (.brand-lockup), which carries `white-space: nowrap` because a wordmark may not break — inside .auth-card, a fixed min(28rem, 100%) box. It is the one consumer of --text-title that cannot absorb the owner's 1.5x, and the failure is horizontal page scroll on the entry screen rather than a wrap. MEASURED at a real 375px viewport, where the card's usable inner width is 295px (343px card - 2x24px --space-l padding) — IN THE PRE-SWAP FACES, which is why the widths are named. The wordmark used to render in Assistant (it was forced onto var(--font) because the old display face had no Latin glyphs); it now renders in FREDOKA 600 via --font-display, a wider rounded face, so the pinned column below is the one that has to be re-measured — the 1.5x column only gets worse and its verdict is safe in the conservative direction: 1.5x (62.475px): Assistant 323.53 Segoe UI 338.55 Noto Sans Hebrew 351.25 -> OVERFLOWS by 28.53 / 43.55 / 56.25px, in every font, including the swap-period fallback pinned (41.65px): Assistant 215.72 Segoe UI 225.72 Noto Sans Hebrew 234.20 -> 60-79px slack Those 60-79px of slack are the budget Fredoka now spends against; the fallbacks are unchanged. The literal is the old token verbatim; if --text-title is ever re-tuned, this is an independent decision and should be re-measured, not silently re-linked. */ .auth-brand h1 { font-size: clamp(2.5rem, 1.9rem + 3vw, 4rem); } .tabs { display: flex; gap: var(--space-xs); background: var(--color-muted); padding: var(--space-xs); border-radius: var(--radius-pill); margin-block-end: var(--space-l); } .tabs button { flex: 1; min-height: var(--tap); border: none; background: transparent; border-radius: var(--radius-pill); font-weight: 600; color: var(--color-text-soft); transition: background var(--transition), color var(--transition); } .tabs button[aria-selected="true"] { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); } /* The .tabs LINK twins, for signup.html's הרשמה / כניסה pair. Those two are real cross-document navigation, so they are and NOT role="tab" buttons — ARIA tabs are reserved for switching a same-page panel, which is exactly what the