/* CareChart โ€” designed for a 60-year-old with reading glasses on a โ‚น8,000 phone. Big targets, high contrast, nothing decorative that costs a repaint. */ :root { --bg: #f4f6f8; --surface: #ffffff; --ink: #16202a; --ink-soft: #4a5866; --line: #d4dbe2; /* Table gridlines are their own token, deliberately much darker than --line. --line is for panel edges and input outlines, where a faint rule is right; a report needs a rule you can actually follow across a wide row. */ --grid: #55636f; --brand: #0b6b5e; --brand-dark: #085246; --brand-tint: #e6f2f0; --danger: #b3261e; --danger-tint: #fdecea; --warn: #8a5a00; --warn-tint: #fff4e0; --good: #1b5e20; --good-tint: #e7f3e8; --radius: 14px; --tap: 56px; --fs: 17px; } /* ยง18 large-text mode โ€” one class on , everything scales from --fs */ html.large-text { --fs: 21px; --tap: 64px; } html.high-contrast { --bg: #ffffff; --surface: #ffffff; --ink: #000000; --ink-soft: #1a1a1a; --line: #000000; --grid: #000000; --brand: #00473f; --brand-tint: #ffffff; } * { box-sizing: border-box; } /* ๐Ÿ”ด An AUTHOR rule beats the browser's own [hidden]{display:none} regardless of specificity, so the `button{display:inline-flex}` below silently un-hid every button that carried the hidden attribute. Two separate screens shipped a local workaround before this was fixed centrally. Keep this ABOVE the button rules. */ [hidden] { display: none !important; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif; font-size: var(--fs); line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; } .app { max-width: 720px; margin: 0 auto; padding: 0 0 96px; } header.topbar { position: sticky; top: 0; z-index: 20; background: var(--brand); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; } header.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 600; flex: 1; } header.topbar button { background: rgba(255,255,255,.16); color: #fff; border: 0; } main { padding: 16px; } h2 { font-size: 1.25rem; margin: 0 0 4px; } h3 { font-size: 1.05rem; margin: 20px 0 8px; } p.sub { color: var(--ink-soft); margin: 0 0 20px; } /* โ”€โ”€ buttons โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ button, .btn { font: inherit; font-weight: 600; min-height: var(--tap); padding: 12px 18px; border-radius: var(--radius); border: 2px solid transparent; background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #1668c1; outline-offset: 2px; } .btn-primary { background: var(--brand); color: #fff; width: 100%; } .btn-primary:disabled { background: #9fb3b0; cursor: not-allowed; } .btn-ghost { background: transparent; border-color: var(--line); } .btn-danger { background: var(--danger); color: #fff; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } .btn-row > * { flex: 1; min-width: 130px; } /* โ”€โ”€ the dashboard grid (ยง3) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; } .tile { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px 12px; min-height: 104px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--ink); } .tile .ico { font-size: 30px; line-height: 1; } .tile[aria-current="true"], .tile.armed { border-color: var(--brand); background: var(--brand-tint); } /* โ”€โ”€ cards โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .card h4 { margin: 0 0 6px; font-size: 1rem; } .card .meta { color: var(--ink-soft); font-size: .9em; } .stat { display: flex; gap: 12px; } .stat .card { flex: 1; text-align: center; } .stat .big { font-size: 1.6rem; font-weight: 700; display: block; } /* โ”€โ”€ forms โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ label { display: block; font-weight: 600; margin: 16px 0 6px; } label .hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .9em; } input, select, textarea { font: inherit; width: 100%; padding: 13px 14px; min-height: var(--tap); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); } textarea { min-height: 110px; resize: vertical; } input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 24px; } .chiprow { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 10px 14px; min-height: 48px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; } .chip[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); } .chip.armed { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } /* Where the caret is, as distinct from what is armed โ€” the two coincide while you arrow along a row, and part company as soon as you Tab away. */ .chip:focus { outline: 3px solid var(--brand); outline-offset: 2px; } .scale { display: flex; gap: 6px; } .scale button { flex: 1; min-width: 0; padding: 12px 0; border: 2px solid var(--line); } .scale button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); } /* โ”€โ”€ doubt indicators (ยง5.5) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .doubt { border-left: 6px solid var(--line); padding-left: 12px; } .doubt-high_confidence { border-left-color: var(--good); } .doubt-needs_review { border-left-color: var(--warn); } .doubt-unreadable { border-left-color: var(--danger); } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .82em; font-weight: 700; white-space: nowrap; } .badge-high_confidence { background: var(--good-tint); color: var(--good); } .badge-needs_review { background: var(--warn-tint); color: var(--warn); } .badge-unreadable { background: var(--danger-tint); color: var(--danger); } .reasons { color: var(--ink-soft); font-size: .92em; margin: 6px 0 0; padding-left: 18px; } /* โ”€โ”€ prescription review: image beside the reading (ยง22.8) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .review-split { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 820px) { .review-split { grid-template-columns: 1fr 1fr; align-items: start; } } .rx-image { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #000; } .rx-image img { width: 100%; display: block; border-radius: var(--radius); } .sticky-img { position: sticky; top: 72px; } /* โ”€โ”€ banners โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .banner { padding: 14px 16px; border-radius: var(--radius); margin: 12px 0; border: 2px solid; } .banner-danger { background: var(--danger-tint); border-color: var(--danger); color: #6d1710; font-weight: 600; } .banner-warn { background: var(--warn-tint); border-color: #d79a2b; color: #5d3d00; } .banner-info { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); } .banner-good { background: var(--good-tint); border-color: var(--good); color: var(--good); } /* medical-safety disclaimer โ€” always visible, never dismissible */ .disclaimer { font-size: .88em; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 20px 0 0; } /* โ”€โ”€ modal โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .modal-back { position: fixed; inset: 0; background: rgba(10,20,26,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 100; padding: 0; } @media (min-width: 640px) { .modal-back { align-items: center; padding: 20px; } } .modal { background: var(--surface); border-radius: 20px 20px 0 0; padding: 20px; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; } @media (min-width: 640px) { .modal { border-radius: 20px; } } /* โ”€โ”€ sync status (ยง17) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .syncbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px; font-size: .9em; font-weight: 600; text-align: center; } .syncbar-offline { background: #4a5866; color: #fff; } .syncbar-pending { background: var(--warn-tint); color: var(--warn); border-top: 2px solid #d79a2b; } .syncbar-synced { background: var(--good-tint); color: var(--good); border-top: 2px solid var(--good); } .syncbar-failed { background: var(--danger-tint); color: var(--danger); border-top: 2px solid var(--danger); } .keyhint { font-size: .85em; color: var(--ink-soft); margin-top: 10px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .empty { text-align: center; color: var(--ink-soft); padding: 32px 16px; } ul.plain { list-style: none; padding: 0; margin: 0; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .spin { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: sp .8s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spin { animation: none; } } /* โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• DESKTOP SHELL (ยง added 15-08-2026) The phone layout above is the product's real target and is NOT touched here. Everything in this block is either neutral on a phone or gated behind min-width:1024px, so a โ‚น8,000 phone renders exactly what it rendered before. โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• */ .topbar-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .topbar-sub { font-size: .8rem; opacity: .85; line-height: 1.2; } header.topbar button.topbar-btn { min-width: 44px; min-height: 44px; padding: 8px 12px; } /* The sidebar is desktop-only. Below 1024px it does not exist at all. */ .sidebar { display: none; } .dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .dash-head h2 { margin: 0; } .dash-when { color: var(--ink-soft); font-size: .95em; } /* โ”€โ”€ panels: a titled group of related rows โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 16px; overflow: hidden; } .panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfd; } html.high-contrast .panel > header { background: var(--surface); } .panel > header h3 { margin: 0; font-size: 1rem; } .panel > header .panel-link { font-size: .9rem; font-weight: 600; color: var(--brand); } .panel-body { padding: 14px 16px; } .panel-body > :first-child { margin-top: 0; } .panel-body .card:last-child { margin-bottom: 0; } /* โ”€โ”€ vitals: a value and WHEN it was recorded. Never a verdict. โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .vital { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface); text-align: left; } .vital .vital-label { color: var(--ink-soft); font-size: .88em; font-weight: 600; display: block; } .vital .vital-value { font-size: 1.7rem; font-weight: 700; display: block; line-height: 1.2; margin: 4px 0 2px; } .vital .vital-when { color: var(--ink-soft); font-size: .85em; } /* โ”€โ”€ "when was this taken" โ€” on every measurement form โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .measured-at { border: 2px solid var(--brand-tint); border-radius: var(--radius); padding: 10px 14px 12px; margin: 0 0 12px; } .measured-at legend { font-weight: 700; font-size: .92rem; padding: 0 6px; color: var(--brand-dark); } .measured-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .measured-row label { margin-top: 6px; } .measured-at .hint { color: var(--ink-soft); font-size: .85em; margin: 8px 0 0; } .suggest-row { margin: 6px 0 8px; } .suggest-row .hint { color: var(--ink-soft); font-size: .88em; margin: 0 0 6px; } .suggest-row .chip { min-height: 44px; padding: 8px 14px; } .suggest-row .chip[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); } /* โ”€โ”€ dashboard quick-add: sugar and BP entered SEPARATELY, on the front โ”€โ”€โ”€โ”€ */ .quick-entry { display: grid; grid-template-columns: 1fr; gap: 20px; } .quick-entry > div > h4 { margin: 0 0 4px; font-size: .95rem; color: var(--brand-dark); border-bottom: 2px solid var(--brand-tint); padding-bottom: 6px; } .quick-entry label:first-of-type { margin-top: 10px; } @media (min-width: 640px) { .quick-entry { grid-template-columns: 1fr 1fr; gap: 24px; } } /* โ”€โ”€ date-wise record โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .tl-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .tl-controls .field { flex: 0 0 auto; } .tl-controls label { margin: 0 0 4px; font-size: .88em; } .tl-controls input[type="date"] { width: auto; min-width: 165px; } .tl-summary { color: var(--ink-soft); font-size: .9em; margin: 12px 0 0; } .tl-day { margin: 0 0 18px; } .tl-date { position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: var(--bg); padding: 8px 0 6px; margin: 0 0 8px; border-bottom: 2px solid var(--brand); } .tl-date .tl-date-main { font-size: 1.05rem; font-weight: 700; } .tl-date .tl-date-rel { color: var(--brand); font-weight: 700; font-size: .85em; } .tl-date .tl-date-count { color: var(--ink-soft); font-size: .85em; margin-left: auto; } /* โ”€โ”€ whose record is open โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ /* Sticky and loud on purpose. Entering a reading against the wrong person is a clinical error, so this must be impossible to scroll past or mistake for decoration. Amber for view, brand for edit โ€” the louder state is the one where the next tap changes someone else's record. */ .viewing-bar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--warn-tint); color: #5d3d00; border-bottom: 3px solid #d79a2b; font-weight: 600; } .viewing-bar.can-edit { background: var(--brand-tint); color: var(--brand-dark); border-bottom-color: var(--brand); } .viewing-bar .vb-note { font-weight: 400; font-size: .9em; } .viewing-bar button { margin-left: auto; min-height: 40px; padding: 6px 14px; background: var(--surface); border: 2px solid currentColor; border-radius: var(--radius); font-weight: 700; color: inherit; } @media (min-width: 1024px) { .viewing-bar { padding: 10px 28px; } } @media print { .viewing-bar { position: static; } } /* โ”€โ”€ the record as a spreadsheet โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .sheet { font-variant-numeric: tabular-nums; } .sheet tbody tr:nth-child(even) td { background: #fafbfc; } html.high-contrast .sheet tbody tr:nth-child(even) td { background: var(--surface); } .sheet tbody tr[data-tl-id] { cursor: pointer; } .sheet tbody tr[data-tl-id]:hover td { background: var(--brand-tint); } .sheet tbody tr[data-tl-id]:focus-visible { outline: 3px solid #1668c1; outline-offset: -3px; } /* A rule where the date changes. Against a dark grid this needs to be both heavier AND a different hue, or it reads as just another gridline. */ .sheet tr.sheet-daybreak td { border-top: 3px solid var(--brand); } /* A box the camera filled, not the patient. The tint is a reminder to look at it; it clears the moment the value is touched. */ input.from-scan { background: var(--brand-tint); border-color: var(--brand); } /* โ”€โ”€ dd-mm-yyyy date entry โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ /* The native input stays in the DOM and keeps holding the ISO value every caller reads; it is just not the thing you look at or type into. */ .dmy { display: flex; gap: 8px; align-items: stretch; } .dmy .dmy-text { flex: 1; min-width: 0; } .dmy .dmy-text.bad { border-color: var(--danger); } .dmy .dmy-pick { flex: 0 0 auto; min-width: var(--tap); min-height: var(--tap); border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 1.1rem; padding: 0 12px; } .dmy .dmy-native { /* Reachable by the picker button, never focusable by tabbing past the text box โ€” two date controls in the tab order would be a trap. */ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* โ”€โ”€ the pivot: one row per date, one column per reading type โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ /* Cells wrap, because a day can hold two readings of the same kind and both have to be visible โ€” a "โ€ฆ" would hide a measurement. */ .sheet.pivot td { white-space: normal; vertical-align: top; min-width: 96px; } .sheet.pivot .sheet-date { min-width: 130px; } .sheet.pivot .sheet-empty { color: #9aa7b1; text-align: center; } .cell-entry { display: block; padding: 2px 0; } .cell-entry + .cell-entry { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); } .cell-entry .cell-time { display: block; font-size: .78em; color: var(--ink-soft); } .cell-entry .cell-detail { display: block; font-size: .78em; color: var(--ink-soft); } .cell-entry.can-open { cursor: pointer; border-radius: 4px; } .cell-entry.can-open:hover { background: var(--brand-tint); } .cell-entry.can-open:focus-visible { outline: 3px solid #1668c1; outline-offset: 1px; } .sheet .sheet-date { white-space: nowrap; font-weight: 600; } .sheet .tl-date-rel { font-size: .78em; } .sheet .tl-ico { font-size: 15px; margin-right: 4px; } .sheet td { white-space: normal; } .tl-entry { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; } .tl-entry .tl-ico { font-size: 22px; line-height: 1.2; flex: 0 0 auto; } .tl-entry .tl-body { min-width: 0; flex: 1; } .tl-entry .tl-kind { display: inline-block; font-size: .74em; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; } .tl-entry .tl-title { font-weight: 600; overflow-wrap: anywhere; } @media (min-width: 1024px) { .shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; } body.has-nav .sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--brand-dark); color: #fff; padding: 16px 12px; } html.high-contrast body.has-nav .sidebar { background: #000; } .sidebar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; padding: 6px 10px 14px; } .sidebar-brand img { border-radius: 8px; } .sidenav { display: flex; flex-direction: column; gap: 2px; } .sidenav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 9px 12px; border-radius: 10px; color: #eaf3f1; text-decoration: none; font-weight: 600; font-size: .95rem; } .sidenav a .ico { font-size: 19px; width: 24px; text-align: center; flex: 0 0 auto; } .sidenav a:hover { background: rgba(255, 255, 255, .10); } .sidenav a[aria-current="page"] { background: rgba(255, 255, 255, .18); color: #fff; } .sidenav a:focus-visible { outline: 3px solid #8ecbff; outline-offset: 2px; } .sidebar-foot { margin-top: auto; padding: 12px 10px 4px; font-size: .82rem; color: #b8d4cf; } .sidebar-foot strong { color: #fff; display: block; font-size: .95rem; } /* The content column stops pretending to be a phone. */ .app { max-width: none; margin: 0; padding: 0 0 72px; } main { padding: 22px 28px; max-width: 1180px; } /* On desktop the back button is redundant -- the sidebar is always there. */ body.has-nav #backBtn { display: none; } header.topbar { padding: 14px 28px; } .dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; } /* Quick actions become a compact toolbar, not nine giant phone tiles. */ .quick .tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; } .quick .tile { min-height: 84px; padding: 12px 8px; font-size: .92rem; } .quick .tile .ico { font-size: 24px; } .tl-date { top: 0; } } /* Large-text mode keeps the sidebar readable rather than clipping it. */ html.large-text .sidenav a { font-size: 1rem; min-height: 52px; } /* โ”€โ”€ data tables (the Excel-like daily view) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ /* Wide tables scroll INSIDE their own box; the page never scrolls sideways. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; } /* โญ Every cell is ruled on all four sides, like a spreadsheet. A grid is what makes a wide report readable across a row โ€” with only horizontal rules the eye loses which column it is in halfway along. */ .data-table th, .data-table td { text-align: left; padding: 10px 12px; white-space: nowrap; border: 1px solid var(--grid); } /* The outer edge and the header underline are heavier still, so the block reads as one table rather than a field of equal boxes. */ .data-table { border: 2px solid var(--grid); } .data-table thead th { border-bottom-width: 2px; } .data-table th { color: var(--ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; background: #eef2f5; position: sticky; top: 0; } html.high-contrast .data-table th { background: var(--surface); } .data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .data-table tr[data-edit] { cursor: pointer; } .data-table tr[data-edit]:hover td { background: var(--brand-tint); } .data-table tr[data-edit]:focus-visible { outline: 3px solid #1668c1; outline-offset: -3px; } /* โ”€โ”€ reporting โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .report-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; } .report-head h2 { margin: 0; } .chart-wrap { position: relative; } .chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; } .chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; max-width: 90%; } .chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 10px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); } .chart-key { display: inline-flex; align-items: center; gap: 7px; } .chart-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .chart-table { margin-top: 12px; } .chart-table summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--brand); min-height: 44px; display: flex; align-items: center; } .chart-table table { width: 100%; border-collapse: collapse; font-size: .9rem; } .chart-table table { border: 2px solid var(--grid); } .chart-table th, .chart-table td { text-align: left; padding: 7px 10px; border: 1px solid var(--grid); } .chart-table th { color: var(--ink-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; } /* Bars: ONE measure across categories, so one hue โ€” never a rainbow. */ .barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .barlist li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 12px; } .bar-label { font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; } .bar-track { background: var(--brand-tint); border-radius: 4px; height: 18px; } .bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 0 4px 4px 0; } .bar-value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; } @media print { /* A printed report is the record, not the app around it. */ .sidebar, header.topbar, .syncbar, .no-print, .chart-table summary { display: none !important; } .chart-table[open] table, .chart-table table { display: table !important; } .app, main { max-width: none; padding: 0; } .panel { break-inside: avoid; border-color: #999; } .dash-grid { display: block; } body { background: #fff; } /* The grid must survive printing โ€” a printed report without cell rules is unreadable across a wide row, and printers drop faint colours. */ .data-table th, .data-table td, .chart-table th, .chart-table td { border: 1px solid #000 !important; } .data-table, .chart-table table { border: 2px solid #000 !important; } .data-table th { background: #e6e6e6 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sheet tbody tr:nth-child(even) td { background: #fff !important; } thead { display: table-header-group; } /* repeat the header on every page */ .data-table tr { break-inside: avoid; } }