holds four `.view` sections and exactly one wears `.is-active`; app.js moves that class from `location.hash`. `.shell__main` is untouched and stays the flex column it was: a view is a flex ITEM, and `display: none` takes a flex item out of layout gap and all, so the inactive three cost no space and no stray `gap`. The active one is a flex column of its own, which is what re-creates the panel stack the old single-page shell had — same spacing, same measure, one screen's worth. */ .view { display: none; flex-direction: column; gap: var(--sp-4); min-width: 0; } .view.is-active { display: flex; } /* ── the menu ──────────────────────────────────────────────────────────── */ /* Fixed rail from 900px up, off-canvas drawer below it — the pattern the owner pointed at by name (`trips/italy-2026`), reproduced rather than redesigned. The page is ALWAYS dir="rtl", so `inset-inline-start: 0` puts the rail on the right; the drawer therefore has to slide out to the right, and `translateX` is physical, not logical — hence the positive 100%. Flip the page to LTR and this one value is what needs revisiting. Nothing here uses a fixed colour. The rail is `--surface` on `--line` like every panel, so it follows the dark block with no rule of its own. */ :root { --nav-w: 224px; } .nav { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--nav-w); z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-inline-end: 1px solid var(--line); } .nav__bar { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-3); } .nav__brand { font-size: var(--fs-lg); font-weight: 650; padding: 0 var(--sp-3); margin-bottom: var(--sp-3); } /* `min-height: var(--tap)` is the whole reason these are comfortable on a phone: this dashboard is read one-handed standing next to a charger. */ .nav__link { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); color: var(--fg); text-decoration: none; font-size: var(--fs-md); font-weight: 550; } .nav__link:hover { background: var(--surface-2); } /* aria-current is the styling hook AND the announcement — one source of truth, so what is highlighted and what a screen reader calls current cannot drift. */ .nav__link[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 650; } .navtoggle, .navscrim { display: none; } @media (min-width: 900px) { /* The gutter goes on `.shell`, not on , so that the sibling selector below can take it back when app.js hides the rail on a signed-out page — no `:has()`, no class on . `.navscrim` sits between the two, so the general sibling combinator is the one that reaches. */ .shell { padding-inline-start: var(--nav-w); } .nav[hidden] ~ .shell { padding-inline-start: 0; } } @media (max-width: 899.98px) { .nav { width: min(var(--nav-w), 78vw); transform: translateX(100%); transition: transform .2s ease; box-shadow: var(--shadow); } .nav.is-open { transform: none; } /* Inside the header rather than floating over the page: the header is sticky, so the menu is reachable from the bottom of a long history table without scrolling back up, and nothing has to reserve a corner for it. */ .navtoggle { display: inline-flex; order: -1; } .nav.is-open ~ .navscrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(16, 24, 32, .45); } } /* `.btn` and `.navtoggle` are both one class deep, and the button carries both. Two classes beat the UA's `[hidden]`, so state the hiding explicitly. */ .nav[hidden], .navtoggle[hidden] { display: none; } /* The rail scrolls with nothing; the header must not scroll away either, or the ☰ leaves the screen on the one view that is taller than a phone. */ .shell__header { position: sticky; top: 0; z-index: 40; } @media (prefers-reduced-motion: reduce) { .nav { transition: none; } } /* ── Hebrew / RTL typography ───────────────────────────────────────────── */ /* Layout needs nothing here: the sheet is 100% logical properties, so the box model mirrors on its own. What does NOT mirror on its own is Latin typographic habit applied to a script that has none of the same features. Scoped to [dir="rtl"], so the LTR page is untouched. CONTRACT: dir="rtl" goes on . These are descendant selectors; putting the attribute deeper (on , on a panel) silently drops the whole block. */ /* Hebrew has no ascenders or descenders: the letters fill the x-height band almost solidly, so identical leading reads noticeably denser than Latin. */ [dir="rtl"] body { line-height: 1.65; } /* Negative tracking is a Latin display trick. Hebrew tells ב/כ, ד/ר and ה/ח apart by small gaps, and tightening is exactly what closes them. */ [dir="rtl"] .shell__title, [dir="rtl"] .stat__value { letter-spacing: normal; } /* Hebrew has no capitals, so `uppercase` is a no-op on the Hebrew half of a header — but not on the Latin half: it turns the unit symbols "kWh" and "kW" into "KWH"/"KW", which are wrong, not merely loud. Positive tracking has the same legibility cost as negative here. Both go; the size, weight and muted colour still separate the header row from the body. */ [dir="rtl"] .table thead th { text-transform: none; letter-spacing: normal; } /* The one place a PHYSICAL value is the right answer, and the reason is worth the four lines. Table cells are `unicode-bidi: plaintext` so their glyph runs cannot scramble; the cost is that `text-align: start/end` then resolves against each CELL's own content direction. Measured at dir="rtl": the Hebrew date column aligned right and the Latin duration column aligned left, in the same table — a column edge that moves with the row's content is not a column. Inside a block that is already scoped to one direction, `right` is not an un-migrated physical property; it is the only value plaintext cannot reinterpret. Every column, numeric or not, meets the same edge. */ [dir="rtl"] .table th, [dir="rtl"] .table td, [dir="rtl"] .table th.num, [dir="rtl"] .table td.num { text-align: right; } /* ── desktop ───────────────────────────────────────────────────────────── */ @media (min-width: 900px) { .shell__main { padding: var(--sp-5) var(--sp-4); gap: var(--sp-5); } .shell__header { padding: var(--sp-4) var(--sp-5); } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .table { min-width: 0; } .comment { grid-template-columns: 1fr auto; } } /* ── print: the history table, nothing else ────────────────────────────── */ @media print { .shell__header, .shell__footer, .btn, .comment-form { display: none; } .panel { border: 0; box-shadow: none; } /* The menu is chrome, and its desktop gutter would print as a blank margin. The ACTIVE view is what prints — printing the history table means being on the history view, which is the only reason anyone prints this page. */ .nav, .navtoggle, .navscrim { display: none; } .shell { padding-inline-start: 0; } }