/* The application stylesheet — ported from the approved mockup (docs/mockup.html). * Change the mockup and this file together, and tell Yarden (CLAUDE.md §8). * The theme follows the system unless the viewer picks one in the header: data-theme on * is "light" or "dark", and absent for "לפי המערכת" (app.js keeps the choice). */ @font-face { font-family: "Assistant"; font-weight: 300; font-display: swap; src: url("../fonts/assistant-hebrew-300.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Assistant"; font-weight: 400; font-display: swap; src: url("../fonts/assistant-hebrew-400.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Assistant"; font-weight: 600; font-display: swap; src: url("../fonts/assistant-hebrew-600.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Assistant"; font-weight: 300; font-display: swap; src: url("../fonts/assistant-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; } @font-face { font-family: "Assistant"; font-weight: 400; font-display: swap; src: url("../fonts/assistant-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; } @font-face { font-family: "Assistant"; font-weight: 600; font-display: swap; src: url("../fonts/assistant-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; } :root { --bg: #FFFFFF; --bg-sunken: #F7F7F8; --text: #15181C; --text-muted: #6B7178; --rule: #E3E5E8; --rule-strong: #C9CDD2; --accent: #24405C; --flag: #8A6100; --stop: #8C2F2C; /* The danger button keeps its own colour: --stop is a text red, too pale on a dark background to fill a button with (23/09/2026). */ --danger: #8C2F2C; --danger-text: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15181C; --bg-sunken: #1B1F24; --text: #E8EAED; --text-muted: #9AA1A9; --rule: #2A2F36; --rule-strong: #3C434C; --accent: #9DB8D6; --flag: #D3A45E; --stop: #D98A86; --danger: #9E3A36; --danger-text: #FFFFFF; } } :root[data-theme="dark"] { --bg: #15181C; --bg-sunken: #1B1F24; --text: #E8EAED; --text-muted: #9AA1A9; --rule: #2A2F36; --rule-strong: #3C434C; --accent: #9DB8D6; --flag: #D3A45E; --stop: #D98A86; --danger: #9E3A36; --danger-text: #FFFFFF; } body { background: var(--bg); color: var(--text); font-family: "Assistant", "Segoe UI", "Arial Hebrew", Arial, system-ui, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } .app { direction: rtl; } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; text-wrap: balance; } h1 { font-size: 1rem; letter-spacing: -.01em; } h2 { font-size: 1.35rem; letter-spacing: -.015em; } h3 { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); } p { margin: 0; } .num { font-variant-numeric: tabular-nums; } .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } .muted { color: var(--text-muted); } .small { font-size: .85rem; } /* shell -------------------------------------------------------------- */ .head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 12px 24px; background: var(--bg); border-bottom: 1px solid var(--rule); /* Centred on the same 980px column as the screen below it. */ padding-inline: max(24px, calc((100% - 980px) / 2)); } .head .sub { color: var(--text-muted); font-size: .82rem; } /* The tabs run along the top, under the header (Yarden, 27/09/2026 — they were a column on the right). A group heading becomes a thin divider between the groups. */ .layout { display: block; } .rail { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; padding: 0 max(24px, calc((100% - 980px) / 2)); border-bottom: 1px solid var(--rule); background: var(--bg); } @media (max-width: 800px) { .rail { padding: 0 12px; } } .rail a { display: block; font: inherit; font-size: .9rem; text-align: start; text-decoration: none; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 11px 12px 9px; border-bottom: 2px solid transparent; white-space: nowrap; } .rail a[aria-current="page"] { color: var(--text); border-color: var(--accent); font-weight: 600; } .rail a:hover { color: var(--text); } .rail a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .rail .group { font-size: 0; flex: none; width: 1px; margin: 10px 10px; background: var(--rule); } .rail .group:first-child { display: none; } main { padding: 26px 24px 48px; min-width: 0; } .screen { max-width: 980px; margin-inline: auto; display: grid; gap: 28px; } .title { display: grid; gap: 3px; } .title .meta { color: var(--text-muted); font-size: .88rem; } section.block { display: grid; gap: 12px; } section.block > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 6px; } section.block > header .aside { margin-inline-start: auto; color: var(--text-muted); font-size: .82rem; } .split { display: grid; gap: 28px; grid-template-columns: 1.55fr 1fr; align-items: start; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } } .two { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } /* data --------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: .9rem; } .scroll { overflow-x: auto; } th, td { text-align: right; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule); } th { font-size: .78rem; font-weight: 400; color: var(--text-muted); letter-spacing: .03em; } tbody tr:last-child td { border-bottom: none; } td.amount, th.amount { text-align: left; padding-inline: 0 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } tr.sum td { border-top: 1px solid var(--rule-strong); border-bottom: none; font-weight: 600; } dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; font-size: .9rem; margin: 0; } dl.kv dt { color: var(--text-muted); font-weight: 400; } dl.kv dd { margin: 0; } .stat { display: grid; gap: 2px; } .stat .value { font-size: 1.5rem; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat .label { font-size: .82rem; color: var(--text-muted); } ul.plain { list-style: none; margin: 0; padding: 0; display: grid; } ul.plain > li { padding: 11px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 3px; } ul.plain > li:last-child { border-bottom: none; } .row-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .row-top .ref { color: var(--text-muted); font-size: .82rem; margin-inline-start: auto; } .mark { font-size: .78rem; letter-spacing: .04em; color: var(--text-muted); } .mark.stop { color: var(--stop); } .mark.flag { color: var(--flag); } .note { border-inline-start: 2px solid var(--rule-strong); padding: 2px 12px; color: var(--text-muted); font-size: .87rem; } .note.flag { border-color: var(--flag); color: var(--flag); } /* Testing only — moving the local clock forward (app/core/clock.py). Never on a server. */ .time-travel { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; border: 1px dashed var(--flag); color: var(--flag); padding: 6px 12px; margin-bottom: 14px; font-size: .87rem; } .time-travel form { margin: 0; } .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 2px; } button.link { font: inherit; font-size: .88rem; background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; border-bottom: 1px solid transparent; } button.link:hover { border-bottom-color: currentColor; } button.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } button.primary { font: inherit; font-size: .88rem; cursor: pointer; padding: 7px 18px; background: var(--text); color: var(--bg); border: 1px solid var(--text); border-radius: 3px; } button.ghost { font: inherit; font-size: .88rem; cursor: pointer; padding: 7px 18px; background: none; color: var(--text); border: 1px solid var(--rule-strong); border-radius: 3px; } button.danger { font: inherit; font-size: .88rem; cursor: pointer; padding: 7px 18px; background: var(--danger); color: var(--danger-text); border: 1px solid var(--danger); border-radius: 3px; } button.primary:focus-visible, button.ghost:focus-visible, button.danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } label { display: grid; gap: 3px; font-size: .82rem; color: var(--text-muted); } input, textarea, select { font: inherit; font-size: .9rem; color: var(--text); background: var(--bg); border: none; border-bottom: 1px solid var(--rule-strong); border-radius: 0; padding: 5px 0; width: 100%; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); } .fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } td input { font-size: .9rem; } .files { display: flex; gap: 16px; flex-wrap: wrap; font-size: .87rem; color: var(--text-muted); } .files span { border-bottom: 1px dotted var(--rule-strong); padding-bottom: 1px; } .timeline { list-style: none; margin: 0; padding: 0; display: grid; } .timeline li { display: grid; grid-template-columns: 98px 1fr; gap: 14px; padding: 6px 0; font-size: .88rem; border-bottom: 1px solid var(--rule); } .timeline li:last-child { border-bottom: none; } .timeline time { color: var(--text-muted); font-size: .82rem; font-variant-numeric: tabular-nums; } .letter { background: var(--bg-sunken); border: 1px solid var(--rule); padding: 26px 28px; font-family: "David Libre", "David", "Frank Ruehl CLM", Georgia, serif; font-size: .88rem; line-height: 1.75; display: grid; gap: 9px; } .letter .lh { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); padding-bottom: 8px; } .letter .subject { text-align: center; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; } /* segmented choice: one of three modes ------------------------------ */ .modes { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; } .modes label { display: block; position: relative; font-size: .84rem; color: var(--text-muted); cursor: pointer; } .modes label + label { border-inline-start: 1px solid var(--rule-strong); } .modes input { position: absolute; opacity: 0; inset: 0; width: 100%; margin: 0; cursor: pointer; } .modes span { display: block; padding: 4px 12px; } .modes input:checked + span { background: var(--text); color: var(--bg); } .modes input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; } .modes input:disabled + span { color: var(--rule-strong); cursor: not-allowed; text-decoration: line-through; } td.mode { white-space: nowrap; } .signin { max-width: 360px; display: grid; gap: 18px; padding-top: 12px; } .alert-row strong { color: var(--stop); } .reason { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; } .reason label { flex: 1 1 260px; } footer.foot { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 14px; color: var(--text-muted); font-size: .8rem; } /* app-only ------------------------------------------------------------ */ html { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; } .head .who { margin-inline-start: auto; display: flex; gap: 14px; align-items: baseline; font-size: .82rem; color: var(--text-muted); } .head form { margin: 0; } /* The theme switch sits at the far left of the header (mockup). */ .theme { display: flex; gap: 0; align-items: center; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; } .head h1 + .theme { margin-inline-start: auto; } .theme button { font: inherit; font-size: .78rem; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px 10px; } .theme button[aria-pressed="true"] { background: var(--bg-sunken); color: var(--text); font-weight: 600; } .theme button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .error { color: var(--stop); font-size: .88rem; } .empty { color: var(--text-muted); font-size: .9rem; padding: 6px 0; } form.inline { display: inline; margin: 0; } details > summary { display: inline; list-style: none; cursor: pointer; color: var(--accent); font-size: .88rem; border-bottom: 1px solid transparent; } details > summary::-webkit-details-marker { display: none; } details > summary:hover { border-bottom-color: currentColor; } details[open] { flex-basis: 100%; } details[open] > summary { font-weight: 600; } a { color: var(--accent); } /* Hebrew file pickers (app.js) */ label.file { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; } label.file .title { flex-basis: 100%; } label.file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; } label.file .pick { color: var(--accent); font-size: .88rem; border-bottom: 1px solid transparent; } label.file:hover .pick { border-bottom-color: currentColor; } label.file:focus-within .pick { outline: 2px solid var(--accent); outline-offset: 3px; } label.file .chosen { color: var(--text-muted); font-size: .85rem; unicode-bidi: plaintext; } /* The case map (24/09/2026): the process as a tube line, one circle per station, the circle the case stands at lit. RTL, so the line runs down the right and the names sit to its left, mirroring the Jubilee Line sheet the office sent. */ /* The map is a rail down the far left of the case page: it scrolls with the page, scrolls inside itself when the line is longer than the screen, and never makes the page taller (Yarden, 24/09/2026). */ .with-map { display: grid; grid-template-columns: minmax(0, 1fr) 238px; gap: 22px; align-items: start; } .case-rail { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow: auto; } .case-rail .block { margin: 0; } @media (max-width: 980px) { .with-map { grid-template-columns: 1fr; } .case-rail { position: static; max-height: none; overflow: visible; } } .map { display: grid; gap: 0; padding: 4px 0 2px; } .map .zone { font-size: .72rem; letter-spacing: .04em; color: var(--text-muted); padding: 10px 34px 4px 0; border-top: 1px solid var(--rule); margin-top: 6px; } .map .zone:first-child { border-top: 0; margin-top: 0; } .map .stop { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; padding: 3px 30px 3px 0; min-height: 22px; font-size: .9rem; } /* The line: a rule down the right, behind the circles. */ .map .stop::before { content: ""; position: absolute; right: 8px; top: 0; bottom: 0; width: 3px; background: var(--rule-strong); } .map .stop:first-of-type::before { top: 50%; } .map .stop:last-of-type::before { bottom: 50%; } .map .stop::after { content: ""; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 3px solid var(--rule-strong); box-sizing: border-box; } .map .stop.done::before { background: var(--accent); } .map .stop.done::after { background: var(--accent); border-color: var(--accent); } .map .stop.current::after { background: var(--flag); border-color: var(--flag); width: 17px; height: 17px; right: 1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--flag) 25%, transparent); } .map .stop.current .name { font-weight: 700; } .map .stop .name { color: var(--text); } .map .stop.ahead .name { color: var(--text-muted); } .map .stop .when { font-size: .74rem; color: var(--text-muted); white-space: nowrap; } /* A branch hangs off the line: indented, with a stub drawn to it. */ .map .stop.branch { padding-right: 52px; } .map .stop.branch::before { right: 30px; width: 2px; } .map .stop.branch::after { right: 25px; width: 11px; height: 11px; border-width: 2px; } .map .stop.branch .name { font-size: .88rem; } .map .stop.branch .stub { position: absolute; right: 10px; top: 50%; width: 21px; height: 2px; background: var(--rule-strong); } .map .stop.branch.current .stub { background: var(--flag); } /* --- 28/09/2026: pinned header, row hover, badges, sign-in box, fading notices, print --- */ /* The header and the tabs stay on screen together while the page scrolls. */ .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); } .top .head { position: static; } /* A row whose first cell links somewhere opens it from anywhere on the row (app.js). */ tbody tr:hover td { background: var(--bg-sunken); } tbody tr:has(> td:first-child a[href]) { cursor: pointer; } /* Status marks read as soft badges, so they stand out in a long list. */ .mark { display: inline-block; padding: 0 8px; border-radius: 999px; line-height: 1.7; background: var(--bg-sunken); white-space: nowrap; } .mark.stop { background: color-mix(in srgb, var(--stop) 13%, transparent); } .mark.flag { background: color-mix(in srgb, var(--flag) 14%, transparent); } /* Sign-in: one narrow box in the middle of the page. */ .signin-box { max-width: 400px; margin: 7vh auto 0; padding: 28px 28px 24px; border: 1px solid var(--rule); border-radius: 6px; display: grid; gap: 18px; } .signin-box .title { text-align: center; } .signin-box .signin { max-width: none; padding-top: 0; } /* A success message fades after a few seconds (app.js); errors stay. */ .note.flash { transition: opacity .6s ease; } .note.flash.gone { opacity: 0; } /* Printing a screen: the content only, black on white. */ @media print { :root, :root[data-theme="dark"] { --bg: #FFFFFF; --bg-sunken: #FFFFFF; --text: #000000; --text-muted: #333333; --rule: #999999; --rule-strong: #666666; --accent: #000000; --flag: #000000; --stop: #000000; } html { color-scheme: light; } .top, .theme, .time-travel, .actions, form, button, .map { display: none !important; } .with-map { display: block; } main { padding: 0; } .screen { max-width: none; } a { color: inherit; text-decoration: none; } tbody tr:hover td { background: none; } .block, tr { break-inside: avoid; } .mark { border: 1px solid #999; background: none; } } /* --- 28/09/2026: every action looks like a button (Yarden) -------------------------------- Text-only buttons, class-less buttons, action links (a.button) and the "open a form" summaries all share one small outlined button. Links inside a sentence stay links, and so does the header's "יציאה" — this is scoped to the screen's content. */ .screen button.link, .screen button:not([class]), .screen a.button, .screen details > summary { display: inline-block; font: inherit; font-size: .85rem; line-height: 1.4; cursor: pointer; padding: 5px 14px; border-radius: 3px; text-decoration: none; white-space: nowrap; background: var(--bg); color: var(--text); border: 1px solid var(--rule-strong); } .screen button.link:hover, .screen button:not([class]):hover, .screen a.button:hover, .screen details > summary:hover { background: var(--bg-sunken); border-color: var(--text-muted); } .screen button.link:focus-visible, .screen button:not([class]):focus-visible, .screen a.button:focus-visible, .screen details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .screen details[open] > summary { background: var(--bg-sunken); } .screen button[disabled] { opacity: .5; cursor: default; } @media print { a.button { display: none !important; } }