/* =============================================================================
sidur — assets/app.css
The entire visual identity. Design direction: "CLINICAL WARMTH".
A calm, dense, Hebrew-native operations surface. The reference points are a
well-set printed rota and a good clinical chart — not a SaaS landing page and
not a card grid floating on drop shadows. High information density, generous
type, colour used only to carry meaning, nothing decorative.
-----------------------------------------------------------------------------
FOR WHOEVER WRITES index.html / r.html / s.html
-----------------------------------------------------------------------------
1. The document MUST be:
Every rule here is written with logical properties. There is not one
physical margin-left, padding-right, left: or right: in this file. Setting
dir="rtl" is the only thing that makes the app read correctly.
2. Load Heebo in , ABOVE this stylesheet. Weights 400 / 500 / 700 only —
nothing here asks for another weight, and synthesised bold on Hebrew is the
ugliest thing a browser does.
CONTRACT §0 permits exactly this one external request. If the font never
arrives, the fallback stack below is a real Hebrew stack, not a wish:
Heebo, Assistant, Segoe UI, Arial Hebrew, David, system-ui, sans-serif.
(The old styles.css declared Inter and never loaded it, so its intended
design had literally never rendered. That is fixed here.)
3. THEME. Dark mode follows the OS. To let the user override it, set an
attribute on — it wins in BOTH directions:
document.documentElement.dataset.theme = 'dark'; // force dark
document.documentElement.dataset.theme = 'light'; // force light
delete document.documentElement.dataset.theme; // back to the OS
4. COLOUR CARRIES EXACTLY THREE MEANINGS AND NOTHING ELSE.
(1) ROLE — put data-role="Resident|YA|YA-MH|Adjunct|intern|empty" on ANY
element. That one attribute sets --role-fg / --role-tint / --role-rule /
--role-glyph, which every component below consumes. Four genuinely
separate hues (blue / ochre / violet / green), each >= 5:1 against the
ground, and EACH PAIRED WITH A GLYPH (● ▲ ◆ ■ ○) so the mapping survives
greyscale printing and colour blindness.
(2) WEEKEND / HOLIDAY — a tinted column BAND, never a border. Put
class="is-weekend" / "is-holiday" on the
, and
data-band="weekend" / "holiday" on the
.
(3) ATTENTION — one saturated colour, used sparingly: .is-pinned,
.is-conflict, .is-unfilled, .is-below-floor, .issue--error.
There is deliberately NO green "ok" and NO amber "warn" hue. Teal is the
brand and means "interactive / selected / done", never "good"; warnings and
errors are the same attention hue at two different weights (spine only vs.
filled). The legacy kind names (ok / warn / err) are mapped onto that
discipline rather than given three more colours.
The three meanings resolve onto the submission board like this, and the
tokens are the contract — a tile and its legend swatch MUST read the same
custom property, never two that happen to look alike today:
blocked "I cannot work" -> --state-blocked-* (attention)
requested "I want this" -> --state-want-* (brand teal)
committed "this is agreed" -> --state-commit-* (indigo)
Indigo is the one hue added beyond role / band / attention, and it exists
because a YA's committed date (H9/H10) is neither a wish nor a fault. Each
of the three also carries a mark (✕ / ☆ / ●), so none of them depends on
colour alone.
5. Every interactive target is >= 44px; date tiles are >= 48px. The old app's
38px tiles were below the accessibility minimum on exactly the phones the
residents use to fill the form.
6. PRINT is designed, not switched off. The chief prints the rota, pins it up
and photographs it for the department WhatsApp group. See section 22.
-----------------------------------------------------------------------------
CLASS VOCABULARY
-----------------------------------------------------------------------------
This file is the union of two vocabularies, on purpose:
* the canonical one introduced here (.app/.sidebar/.panel/.matrix/.date-tile/
.tier-row/.dialog/.toast/.chip/.issue/…), and
* the vocabulary js/ui/shell.js and js/ui/dialogs.js already emit
(.app-shell, .app-header, .nav-tab, .card, .banner, .modal__head,
.toast__row, .role-glyph--Resident, .tile, .cellbtn, .daycard,
.slotline, .ladder-row, …).
Both are styled, in one identity, so nothing already written breaks. Where the
two overlap the rule is grouped rather than duplicated. New UI code should
prefer the canonical names.
assets/mobile.css reads through to --surface / --fg / --border / --accent /
--danger / --success / --info / --band-weekend / --band-holiday / … ; those
tokens are defined in sections 1b and 1c so the phone pages inherit this
palette instead of falling back to their own.
-----------------------------------------------------------------------------
CONTENTS
-----------------------------------------------------------------------------
1 Design tokens 10 Tables
2 Reset & base 11 Person x day matrix
3 Typography 12 Day-card calendar
4 App shell 13 Person cards & report blocks
5 Panels, cards, banners 14 Tier ladder
6 Buttons 15 Date-tile grid
7 Segmented control 16 Issues, stats, progress, empty states
8 Forms 17 Dialog / modal
9 Chips, badges, roles 18 Toast
19 Utilities
20 Responsive
21 Reduced motion
22 Print
============================================================================= */
/* =============================================================================
1. DESIGN TOKENS
-----------------------------------------------------------------------------
1a PRIMITIVES — raw ramps, theme-independent, defined once.
1b SEMANTIC — what components consume. These flip with the theme.
1c ALIASES — legacy / cross-file names mapped onto the semantic layer.
Components must never reach past the semantic layer into a primitive.
============================================================================= */
:root {
/* --- 1a. PRIMITIVES ------------------------------------------------------ */
/* Warm neutral ground. Paper, not screen-grey: every step carries a little
yellow, so Hebrew sits on it the way ink sits on a printed rota. */
--n-0: #FFFFFF;
--n-25: #FBFAF8; /* the paper */
--n-50: #F5F2ED;
--n-100: #EDE9E2;
--n-200: #DFD9CF;
--n-300: #C9C1B4;
--n-400: #A79E8F;
--n-500: #847B6D;
--n-600: #635C51;
--n-700: #443F38;
--n-800: #2A2723;
--n-900: #1B1917;
--n-950: #141311; /* the dark paper */
/* Deep clinical teal — the ONLY brand accent in the app. */
--teal-50: #E8F3F3;
--teal-100: #C9E5E6;
--teal-200: #9BD0D3;
--teal-300: #63B4BA;
--teal-400: #2F949C;
--teal-500: #0F757C;
--teal-600: #0B6B70;
--teal-700: #085458;
--teal-800: #063E42;
--teal-900: #052A2D;
/* Role hues. Every *-fg is >= 5:1 against the paper (the brief asked for 3:1);
every *-tint sits near 90% lightness so the four pills are distinguishable
at a glance — the old file's four >95% pills read as one grey. */
--role-blue-fg: #33517E; --role-blue-tint: #E4EAF5; --role-blue-rule: #B4C4E0;
--role-ochre-fg: #8A5300; --role-ochre-tint: #F7E9D2; --role-ochre-rule: #DEC397;
--role-violet-fg: #6B3FA0; --role-violet-tint: #EDE3F7; --role-violet-rule: #CCB4E6;
--role-green-fg: #2F6B36; --role-green-tint: #DFEDDF; --role-green-rule: #ABC9AC;
--role-blue-dk: #9CB6EA; --role-blue-tint-dk: #1D2637; --role-blue-rule-dk: #2F3F5E;
--role-ochre-dk: #E2AC5C; --role-ochre-tint-dk: #332614; --role-ochre-rule-dk: #5A4320;
--role-violet-dk: #C4A6EC; --role-violet-tint-dk: #291F38; --role-violet-rule-dk: #453563;
--role-green-dk: #8CC992; --role-green-tint-dk: #182A1B; --role-green-rule-dk: #2C4830;
/* Attention. Exactly one saturated colour for pinned / conflicted / unfilled /
below-floor. If you want a second one, you actually want a glyph.
"Blocked" (I cannot work) is the same meaning — unavailable / stop — so it
is drawn from this family and NOT given a hue of its own. */
--attn-fg: #B4301A;
--attn-strong: #92230F;
--attn-tint: #FBE7E1;
--attn-rule: #E7B7A8;
--attn-fg-dk: #FF9575;
--attn-tint-dk: #38190F;
--attn-rule-dk: #6E3020;
/* Amber — caution, NOT error. See the --warn alias below for why this exists.
Contrast checked against both grounds: #8A5300 on #FBFAF8 = 5.6:1,
#F0B357 on #141311 = 9.1:1. */
--caution-fg: #8A5300;
--caution-tint: #FBF0DC;
--caution-rule: #E2C48A;
--caution-fg-dk: #F0B357;
--caution-tint-dk: #33270F;
--caution-rule-dk: #6B5322;
/* Indigo. The ONE hue added beyond brand + attention + roles, and it exists
for exactly one reason: a YA's committed date (CONTRACT H9/H10) is a hard
pre-assignment, not a wish and not a problem, so it may borrow neither the
brand (which means "wanted / selected") nor attention (which means "stop").
Before this existed, --success and --info both collapsed onto the brand and
"ימים מבוקשים" and "תאריכים שסוכמו" rendered pixel-identical on r.html. */
--indigo-fg: #55349F;
--indigo-strong: #4C2F91;
--indigo-tint: #EBE3FA;
--indigo-rule: #C3B2EE;
--indigo-fg-dk: #C0A9F5;
--indigo-ink-dk: #D3C2FB;
--indigo-tint-dk: #241C3A;
--indigo-rule-dk: #4A3A72;
/* Weekend / holiday band. Warm sand — "a different kind of day", not an alert.
Holiday is the same family, one step deeper. The dark values used to be one
step off the dark surface (1.02:1 against it — invisible), which is why the
published schedule was reaching for the attention tint instead. */
--band-wk: #F3ECE0;
--band-hd: #EDE1CD;
--band-wk-dk: #2C2620;
--band-hd-dk: #37301E;
/* --- Type scale: 6 steps, ratio 1.25, base 1rem ---------------------------
Hebrew has no capitals and no ascender/descender rhythm to lean on, so it
needs more size and more leading than Latin at the same perceived density.
Nothing in this app renders body text below 1rem. */
--fs-100: 0.8rem; /* 12.8px — micro labels, legends, column headers */
--fs-200: 1rem; /* 16px — body, table cells, inputs, buttons */
--fs-300: 1.25rem; /* 20px — card and panel titles */
--fs-400: 1.5625rem; /* 25px — section headings */
--fs-500: 1.9531rem; /* 31.3px — page title */
--fs-600: 2.4414rem; /* 39.1px — display numerals, the one big metric */
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-body: 1.55;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 700;
--font-ui: 'Heebo', 'Assistant', 'Segoe UI', 'Arial Hebrew', 'David',
system-ui, sans-serif;
--font-num: 'Heebo', 'Segoe UI', system-ui, sans-serif;
/* --- Space, radius, density ---------------------------------------------- */
--sp-1: 0.25rem;
--sp-2: 0.375rem;
--sp-3: 0.5rem;
--sp-4: 0.75rem;
--sp-5: 1rem;
--sp-6: 1.5rem;
--sp-7: 2rem;
--sp-8: 3rem;
--r-1: 4px;
--r-2: 8px;
--r-3: 12px;
--r-pill: 999px;
--tap: 2.75rem; /* 44px — minimum interactive target */
--tap-lg: 3rem; /* 48px — date tiles, phone-first targets */
--sidebar-w: 15rem;
--matrix-name-w: 9.5rem;
--matrix-col-w: 2.5rem;
--page-max: 1500px;
/* --- Motion -------------------------------------------------------------- */
--ease: cubic-bezier(0.2, 0, 0.15, 1);
--dur-1: 90ms;
--dur-2: 160ms;
--dur-3: 260ms;
/* --- Role glyphs. Geometric, monochrome, present in every Hebrew font. ----- */
--glyph-resident: '\25CF'; /* ● */
--glyph-ya: '\25B2'; /* ▲ */
--glyph-yamh: '\25C6'; /* ◆ */
--glyph-adjunct: '\25A0'; /* ■ */
--glyph-intern: '\25CB'; /* ○ */
--glyph-empty: '\2014'; /* — */
--glyph-holiday: '\2726'; /* ✦ */
--glyph-low: '\2193'; /* ↓ */
/* Submission-state marks. Colour is never the only cue on a date tile: these
are the same marks js/resident.js already prints on the phone grid, so the
chief's board and the resident's form read identically in greyscale. */
--glyph-blocked: '\2715'; /* ✕ */
--glyph-available: '\2713'; /* ✓ */
--glyph-request: '\2606'; /* ☆ */
--glyph-request-high: '\2605'; /* ★ */
--glyph-commit: '\25CF'; /* ● */
/* --- Icon masks. Inlined SVG painted with currentColor: exact in dark mode,
solid black on a photocopier, no network, no icon font. --------------- */
--icon-lock: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%2010V7a5%205%200%200%201%2010%200v3h1a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2h1zm2%200h6V7a3%203%200%200%200-6%200v3z'/%3E%3C/svg%3E");
--icon-drag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='9'%20cy='5'%20r='1.7'/%3E%3Ccircle%20cx='15'%20cy='5'%20r='1.7'/%3E%3Ccircle%20cx='9'%20cy='12'%20r='1.7'/%3E%3Ccircle%20cx='15'%20cy='12'%20r='1.7'/%3E%3Ccircle%20cx='9'%20cy='19'%20r='1.7'/%3E%3Ccircle%20cx='15'%20cy='19'%20r='1.7'/%3E%3C/svg%3E");
--icon-pin: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a6%206%200%200%200-6%206c0%204.4%206%2013%206%2013s6-8.6%206-13a6%206%200%200%200-6-6zm0%208.3A2.3%202.3%200%201%201%2012%205.7a2.3%202.3%200%200%201%200%204.6z'/%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9.6%2017.2%204.4%2012l1.6-1.6%203.6%203.6L18%205.6%2019.6%207.2z'/%3E%3C/svg%3E");
--icon-chev: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2015.5%205.8%209.3%207.2%207.9%2012%2012.7l4.8-4.8%201.4%201.4z'/%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18.3%207.1%2016.9%205.7%2012%2010.6%207.1%205.7%205.7%207.1%2010.6%2012l-4.9%204.9%201.4%201.4%204.9-4.9%204.9%204.9%201.4-1.4-4.9-4.9z'/%3E%3C/svg%3E");
/* --- 1b. SEMANTIC TOKENS — LIGHT ----------------------------------------- */
color-scheme: light;
--paper: var(--n-25);
--surface: var(--n-0);
--surface-2: var(--n-50);
--surface-3: var(--n-100);
--surface-sunk: var(--n-50);
--ink: var(--n-900);
--ink-2: var(--n-700);
--ink-3: var(--n-500);
--ink-inverse: var(--n-0);
--rule: var(--n-200);
--rule-hair: var(--n-100);
--rule-strong: var(--n-300);
--brand: var(--teal-600);
--brand-ink: var(--teal-700);
--brand-hover: var(--teal-500);
--brand-contrast: #FFFFFF;
--brand-tint: var(--teal-50);
--brand-tint-2: var(--teal-100);
--focus: var(--teal-500);
--attn: var(--attn-fg);
--attn-ink: var(--attn-strong);
--attn-bg: var(--attn-tint);
--caution-ink: var(--caution-fg);
--caution-bg: var(--caution-tint);
--attn-line: var(--attn-rule);
--commit: var(--indigo-fg);
--commit-ink: var(--indigo-strong);
--commit-bg: var(--indigo-tint);
--commit-line: var(--indigo-rule);
/* --- SUBMISSION STATES ----------------------------------------------------
The three things a person can say about a date. Each state owns exactly one
fill / line / ink triple, and BOTH the tile and its legend swatch read the
same three custom properties — that is the only reason they cannot drift.
Never hard-code a colour on a tile or a swatch; add a state here instead.
blocked = "I cannot work" -> attention (unavailable / stop)
want = "I want this" -> brand teal (wanted / selected)
commit = "this is agreed" -> indigo (binding, neither of the above)
--------------------------------------------------------------------------- */
--state-blocked: var(--attn);
--state-blocked-ink: var(--attn-ink);
--state-blocked-bg: var(--attn-bg);
--state-want: var(--brand);
--state-want-ink: var(--brand-ink);
--state-want-bg: var(--brand-tint);
--state-commit: var(--commit);
--state-commit-ink: var(--commit-ink);
--state-commit-bg: var(--commit-bg);
--band-weekend: var(--band-wk);
--band-holiday: var(--band-hd);
--zebra: rgba(27, 25, 23, 0.028);
--hover: rgba(27, 25, 23, 0.05);
--press: rgba(27, 25, 23, 0.09);
/* Elevation is for things that FLOAT — overlays, sticky edges. A panel is a
1px rule and a surface, nothing more. */
--shadow-sticky: 0 1px 0 rgba(27, 25, 23, 0.10);
--shadow-pop: 0 4px 14px rgba(27, 25, 23, 0.10), 0 1px 2px rgba(27, 25, 23, 0.08);
--shadow-modal: 0 24px 64px rgba(27, 25, 23, 0.22), 0 2px 8px rgba(27, 25, 23, 0.12);
/* Default (roleless) values so no component ever renders an empty var(). */
--role-fg: var(--ink-2);
--role-tint: var(--surface-2);
--role-rule: var(--rule);
--role-glyph: '';
}
/* --- 1b (cont.) SEMANTIC TOKENS — DARK ---------------------------------------
Declared twice on purpose. There is no build step, so there is no way to share
one declaration block between a media query and an attribute selector. Both
copies must stay identical. The :not([data-theme='light']) guard lets an
explicit light choice win on a dark OS; the attribute block comes last so an
explicit dark choice wins on a light OS. That is the "wins in both directions"
requirement, without depending on light-dark(), which fails closed (a custom
property holding an unsupported function is invalid at computed-value time and
takes the whole palette down with it on an older tablet).
--------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
color-scheme: dark;
--paper: var(--n-950);
--surface: #1D1B18;
--surface-2: #24211D;
--surface-3: #2C2924;
--surface-sunk: #191714;
--ink: #F2EEE7;
--ink-2: #CFC8BD;
--ink-3: #9C9488;
--ink-inverse: var(--n-950);
--rule: #35312B;
--rule-hair: #292521;
--rule-strong: #4C463D;
--brand: #5BC8CE;
--brand-ink: #7FD8DD;
--brand-hover: #7FD8DD;
--brand-contrast: #04282B;
--brand-tint: #10312F;
--brand-tint-2: #14403F;
--focus: #74D4DA;
--attn: var(--attn-fg-dk);
--attn-ink: #FFB49B;
--attn-bg: var(--attn-tint-dk);
--caution-ink: var(--caution-fg-dk);
--caution-bg: var(--caution-tint-dk);
--attn-line: var(--attn-rule-dk);
--commit: var(--indigo-fg-dk);
--commit-ink: var(--indigo-ink-dk);
--commit-bg: var(--indigo-tint-dk);
--commit-line: var(--indigo-rule-dk);
--band-weekend: var(--band-wk-dk);
--band-holiday: var(--band-hd-dk);
--zebra: rgba(255, 250, 240, 0.032);
--hover: rgba(255, 250, 240, 0.06);
--press: rgba(255, 250, 240, 0.11);
--shadow-sticky: 0 1px 0 rgba(0, 0, 0, 0.55);
--shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.66), 0 2px 8px rgba(0, 0, 0, 0.5);
--role-fg: var(--ink-2);
--role-tint: var(--surface-2);
--role-rule: var(--rule);
}
}
:root[data-theme='dark'] {
color-scheme: dark;
--paper: var(--n-950);
--surface: #1D1B18;
--surface-2: #24211D;
--surface-3: #2C2924;
--surface-sunk: #191714;
--ink: #F2EEE7;
--ink-2: #CFC8BD;
--ink-3: #9C9488;
--ink-inverse: var(--n-950);
--rule: #35312B;
--rule-hair: #292521;
--rule-strong: #4C463D;
--brand: #5BC8CE;
--brand-ink: #7FD8DD;
--brand-hover: #7FD8DD;
--brand-contrast: #04282B;
--brand-tint: #10312F;
--brand-tint-2: #14403F;
--focus: #74D4DA;
--attn: var(--attn-fg-dk);
--attn-ink: #FFB49B;
--attn-bg: var(--attn-tint-dk);
--caution-ink: var(--caution-fg-dk);
--caution-bg: var(--caution-tint-dk);
--attn-line: var(--attn-rule-dk);
--commit: var(--indigo-fg-dk);
--commit-ink: var(--indigo-ink-dk);
--commit-bg: var(--indigo-tint-dk);
--commit-line: var(--indigo-rule-dk);
--band-weekend: var(--band-wk-dk);
--band-holiday: var(--band-hd-dk);
--zebra: rgba(255, 250, 240, 0.032);
--hover: rgba(255, 250, 240, 0.06);
--press: rgba(255, 250, 240, 0.11);
--shadow-sticky: 0 1px 0 rgba(0, 0, 0, 0.55);
--shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.66), 0 2px 8px rgba(0, 0, 0, 0.5);
--role-fg: var(--ink-2);
--role-tint: var(--surface-2);
--role-rule: var(--rule);
}
/* --- 1c. ALIAS TOKENS --------------------------------------------------------
Two other files already read token names that predate this palette:
* assets/mobile.css — --surface / --surface-raised / --fg / --fg-muted /
--border / --border-soft / --accent / --accent-fg /
--accent-soft / --danger / --success / --warn / --info
* an earlier app.css — --bg / --bg-elev / --bg-sunk / --ink-* / --line* /
--ok / --err / --pin / --weekend / --s-* / --shadow-*
Aliasing them here means the phone pages and the existing shell inherit this
design system instead of falling back to a second, unrelated palette.
Note the deliberate flattening: --ok resolves to the BRAND, and
--warn / --err / --danger all resolve to ATTENTION. That is rule (4) above —
three meanings, not six.
The ONE place the flattening was wrong: mobile.css builds three different
meanings out of --danger (blocked), --success (requested) and --info
(committed). Collapsing --success and --info onto the same brand teal made a
YA's wish and a YA's binding commitment render pixel-identical on r.html.
They are now bound to the three SUBMISSION STATE triples above, so the phone
pages get exactly the three distinct hues their layout already assumes.
--------------------------------------------------------------------------- */
:root {
--font: var(--font-ui);
--bg: var(--paper);
--bg-elev: var(--surface);
--bg-sunk: var(--surface-2);
--line: var(--rule);
--line-strong: var(--rule-strong);
--fg: var(--ink);
--fg-muted: var(--ink-3);
--surface-raised: var(--surface);
--border: var(--rule);
--border-soft: var(--rule-hair);
--accent: var(--brand);
--accent-ink: var(--brand-contrast);
--accent-fg: var(--brand-contrast);
--accent-soft: var(--brand-tint);
--ok: var(--brand-ink);
--ok-soft: var(--brand-tint);
/* "requested / wanted" — the brand, which already means wanted + selected. */
--success: var(--state-want-ink);
--success-soft: var(--state-want-bg);
/* "committed" — indigo. A hard pre-assignment is not a wish and not a fault. */
--info: var(--state-commit-ink);
--info-soft: var(--state-commit-bg);
/* "warning" — amber. Distinct from attention on purpose: a soft warning and a
hard error previously resolved to the identical ground, so on r.html a notice
saying "you have fewer weekend groups than usual" was painted exactly like
"this submission is invalid". Amber sits inside the attention FAMILY (warm,
reads as caution) without being the error colour. */
--warn: var(--caution-ink);
--warn-soft: var(--caution-bg);
--err: var(--attn-ink);
--err-soft: var(--attn-bg);
/* "blocked / cannot work" — attention, the same hue as an error, on purpose. */
--danger: var(--state-blocked-ink);
--danger-soft: var(--state-blocked-bg);
--pin: var(--attn);
--pin-soft: var(--attn-bg);
--weekend: var(--band-weekend);
--weekend-line: var(--rule);
--holiday: var(--band-holiday);
--s-1: var(--sp-1);
--s-2: var(--sp-3);
--s-3: var(--sp-4);
--s-4: var(--sp-5);
--s-5: var(--sp-6);
--s-6: var(--sp-7);
--shadow-1: var(--shadow-sticky);
--shadow-2: var(--shadow-modal);
}
/* --- ROLE TOKEN SETS --------------------------------------------------------
data-role on ANY element gives it its own colour and glyph. Every component
below reads --role-fg / --role-tint / --role-rule / --role-glyph, so roles are
added or changed in exactly one place: here.
.role-glyph--X (emitted by shell.js) is treated as a synonym.
--------------------------------------------------------------------------- */
[data-role='Resident'], .role-glyph--Resident, .is-role-Resident {
--role-fg: var(--role-blue-fg);
--role-tint: var(--role-blue-tint);
--role-rule: var(--role-blue-rule);
--role-glyph: var(--glyph-resident);
}
[data-role='YA'], .role-glyph--YA, .is-role-YA {
--role-fg: var(--role-ochre-fg);
--role-tint: var(--role-ochre-tint);
--role-rule: var(--role-ochre-rule);
--role-glyph: var(--glyph-ya);
}
[data-role='YA-MH'], .role-glyph--YA-MH, .is-role-YA-MH {
--role-fg: var(--role-violet-fg);
--role-tint: var(--role-violet-tint);
--role-rule: var(--role-violet-rule);
--role-glyph: var(--glyph-yamh);
}
[data-role='Adjunct'], .role-glyph--Adjunct, .is-role-Adjunct {
--role-fg: var(--role-green-fg);
--role-tint: var(--role-green-tint);
--role-rule: var(--role-green-rule);
--role-glyph: var(--glyph-adjunct);
}
/* The weekday passive-ward placeholder (model.js INTERN). Deliberately
colourless — it is not a person and must never compete with one. */
[data-role='intern'], .is-intern {
--role-fg: var(--ink-3);
--role-tint: transparent;
--role-rule: var(--rule);
--role-glyph: var(--glyph-intern);
}
[data-role='empty'] {
--role-fg: var(--ink-3);
--role-tint: transparent;
--role-rule: var(--rule-hair);
--role-glyph: var(--glyph-empty);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) :is([data-role='Resident'], .role-glyph--Resident, .is-role-Resident) {
--role-fg: var(--role-blue-dk); --role-tint: var(--role-blue-tint-dk); --role-rule: var(--role-blue-rule-dk);
}
:root:not([data-theme='light']) :is([data-role='YA'], .role-glyph--YA, .is-role-YA) {
--role-fg: var(--role-ochre-dk); --role-tint: var(--role-ochre-tint-dk); --role-rule: var(--role-ochre-rule-dk);
}
:root:not([data-theme='light']) :is([data-role='YA-MH'], .role-glyph--YA-MH, .is-role-YA-MH) {
--role-fg: var(--role-violet-dk); --role-tint: var(--role-violet-tint-dk); --role-rule: var(--role-violet-rule-dk);
}
:root:not([data-theme='light']) :is([data-role='Adjunct'], .role-glyph--Adjunct, .is-role-Adjunct) {
--role-fg: var(--role-green-dk); --role-tint: var(--role-green-tint-dk); --role-rule: var(--role-green-rule-dk);
}
}
:root[data-theme='dark'] :is([data-role='Resident'], .role-glyph--Resident, .is-role-Resident) {
--role-fg: var(--role-blue-dk); --role-tint: var(--role-blue-tint-dk); --role-rule: var(--role-blue-rule-dk);
}
:root[data-theme='dark'] :is([data-role='YA'], .role-glyph--YA, .is-role-YA) {
--role-fg: var(--role-ochre-dk); --role-tint: var(--role-ochre-tint-dk); --role-rule: var(--role-ochre-rule-dk);
}
:root[data-theme='dark'] :is([data-role='YA-MH'], .role-glyph--YA-MH, .is-role-YA-MH) {
--role-fg: var(--role-violet-dk); --role-tint: var(--role-violet-tint-dk); --role-rule: var(--role-violet-rule-dk);
}
:root[data-theme='dark'] :is([data-role='Adjunct'], .role-glyph--Adjunct, .is-role-Adjunct) {
--role-fg: var(--role-green-dk); --role-tint: var(--role-green-tint-dk); --role-rule: var(--role-green-rule-dk);
}
/* =============================================================================
2. RESET & BASE
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scrollbar-color: var(--rule-strong) transparent;
}
body {
min-block-size: 100vh;
min-inline-size: 320px;
padding: 0;
background-color: var(--paper);
color: var(--ink);
font-family: var(--font-ui);
font-size: var(--fs-200);
font-weight: var(--fw-normal);
line-height: var(--lh-body);
/* Hebrew must never be letter-spaced. Said once, meant everywhere. */
letter-spacing: normal;
font-variant-numeric: lining-nums;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* The page itself never scrolls sideways at any width. Wide surfaces scroll
inside their own container — see .table-scroll and .matrix-scroll. */
overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
a {
color: var(--brand-ink);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover { color: var(--brand-hover); }
hr, .hr {
border: 0;
block-size: 1px;
background-color: var(--rule);
margin-block: var(--sp-5);
}
[hidden] { display: none !important; }
::selection { background-color: var(--brand-tint-2); color: var(--ink); }
/* One focus treatment for the whole app: two pixels of brand teal, always
outside the box so it is never clipped by a sticky cell's overflow. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.noscript {
padding: var(--sp-6);
text-align: center;
color: var(--ink-2);
}
/* Thin, unobtrusive scrollbars inside the dense surfaces. */
.table-scroll, .matrix-scroll, .scroll-y, .nav, .nav-tabs, .cand-list {
scrollbar-width: thin;
scrollbar-color: var(--rule-strong) transparent;
}
.table-scroll::-webkit-scrollbar,
.matrix-scroll::-webkit-scrollbar,
.scroll-y::-webkit-scrollbar { block-size: 10px; inline-size: 10px; }
.table-scroll::-webkit-scrollbar-thumb,
.matrix-scroll::-webkit-scrollbar-thumb,
.scroll-y::-webkit-scrollbar-thumb {
background-color: var(--rule-strong);
border-radius: var(--r-pill);
border: 3px solid transparent;
background-clip: content-box;
}
/* =============================================================================
3. TYPOGRAPHY
============================================================================= */
h1, h2, h3, h4 {
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: normal;
text-wrap: balance;
color: var(--ink);
}
h1 { font-size: var(--fs-500); }
h2 { font-size: var(--fs-400); }
h3 { font-size: var(--fs-300); }
h4 { font-size: var(--fs-200); }
p { text-wrap: pretty; max-inline-size: 68ch; }
p + p { margin-block-start: var(--sp-4); }
/* Caption / micro-label voice. Hierarchy at this size comes from weight and
colour — never from text-transform (Hebrew has no case) or letter-spacing. */
.caption, .label-micro, .tiny {
font-size: var(--fs-100);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
color: var(--ink-3);
}
.small { font-size: var(--fs-100); line-height: var(--lh-snug); }
.lede {
font-size: var(--fs-300);
line-height: var(--lh-snug);
color: var(--ink-2);
max-inline-size: 60ch;
}
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.strong { font-weight: var(--fw-bold); }
.medium { font-weight: var(--fw-medium); }
/* Every number in this app is a measurement, so every number is tabular.
Wrap standalone numerals in inside RTL prose so they never re-order. */
.num, .tabular, td.num, th.num, .stat-value, time, bdi {
font-family: var(--font-num);
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'tnum' 1;
}
/* Latin fragments (station codes, ids, tokens) inside Hebrew prose. */
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
.mono {
font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, monospace;
font-size: 0.9em;
direction: ltr;
unicode-bidi: isolate;
}
.sr-only {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* A quoted free-text note from a resident, shown verbatim (CONTRACT §2). */
.note-quote, .person-note {
border-inline-start: 3px solid var(--rule-strong);
padding: var(--sp-2) var(--sp-4);
color: var(--ink-2);
background-color: var(--surface-2);
border-start-end-radius: var(--r-2);
border-end-end-radius: var(--r-2);
white-space: pre-wrap;
font-size: var(--fs-100);
line-height: var(--lh-body);
}
/* =============================================================================
4. APP SHELL
-----------------------------------------------------------------------------
Two shells are supported, in one identity.
(a) SIDEBAR SHELL — the canonical chief layout: