:root{--bg:#f4f8f8;--card:#fff;--bar:#fff;--ink:#12262c;--mute:#566b72;--line:#d3dfe1;--acc:#0b6e7a;--accink:#fff;--c2:#b86e00;--pill:#cde8eb;--hover:#e6f1f2;--ring:#7d9297;--danger:#b3261e;--dangerink:#fff;--ok:#15803d;--band:rgba(11,110,122,.14);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1a1d;--card:#162529;--bar:#162529;--ink:#e6f0f1;--mute:#93aab0;--line:#2a3d42;--acc:#4cc3d0;--accink:#04262b;--c2:#f0b43c;--pill:#1f4a50;--hover:#1d3236;--ring:#627c82;--danger:#ffb4ab;--dangerink:#410002;--ok:#4ade80;--band:rgba(76,195,208,.16);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1a1d;--card:#162529;--bar:#162529;--ink:#e6f0f1;--mute:#93aab0;--line:#2a3d42;--acc:#4cc3d0;--accink:#04262b;--c2:#f0b43c;--pill:#1f4a50;--hover:#1d3236;--ring:#627c82;--danger:#ffb4ab;--dangerink:#410002;--ok:#4ade80;--band:rgba(76,195,208,.16);color-scheme:dark}
/* The font is served from this site (vendor/, see README.txt), so Google never sees who opens the app. */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/atkinson-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/atkinson-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/atkinson-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/atkinson-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
*{-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font:17px/1.45 'Atkinson Hyperlegible',system-ui,sans-serif}
/* App shell: header, scrolling content, tab bar. Only #main scrolls. */
.shell{height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "main" "tabs"}
.top{grid-area:top;display:flex;align-items:center;gap:2px;min-height:56px;box-sizing:border-box;padding:env(safe-area-inset-top,0px) max(6px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));background:var(--bar);border-bottom:1px solid var(--line)}
/* A long page title wraps onto a second line rather than ending in "…" (above all at Extra large); a single long word breaks only
   when it has to. */
.top h1{flex:1;min-width:0;font-size:20px;line-height:1.2;margin:0;padding:4px 0;overflow-wrap:anywhere;hyphens:auto}
#main{grid-area:main;overflow-y:auto;overscroll-behavior:contain}
.wrap{max-width:600px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.tabs{grid-area:tabs;display:flex;background:var(--bar);border-top:1px solid var(--line);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
body.gated .tabs,body.kb .tabs{display:none}
.top,.tabs,button,a.btn,label{-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
h2{font-size:18px;margin:0 0 8px}
button,select,input,textarea{font:inherit;color:inherit}
button{min-height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);padding:0 14px;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.6;cursor:default}
button.p{background:var(--acc);color:var(--accink);border-color:var(--acc);font-weight:700}
button:active:not(:disabled),a.btn:active{filter:brightness(.92)}
@media (hover:hover){button:not(.p):not(.tab):not(.danger):not(.lnk):hover,a.btn:hover{background:var(--hover)}}
.ib{width:48px;min-width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;display:inline-grid;place-items:center;color:var(--ink)}
.lb{min-width:48px;padding:0 10px;border:0;border-radius:24px;background:transparent;font-weight:700}
.ic{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Sync status icon: one SVG per state, the matching one is shown */
#syncb svg{display:none}
#syncb[data-s="ok"] .s-ok,#syncb[data-s="syncing"] .s-syncing,#syncb[data-s="offline"] .s-offline,#syncb[data-s="error"] .s-error,#syncb[data-s="locked"] .s-locked{display:block}
#syncb[data-s="ok"]{color:var(--acc)}#syncb[data-s="offline"]{color:var(--mute)}#syncb[data-s="error"]{color:var(--danger)}
#syncb[data-s="syncing"] svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tab{flex:1;min-width:0;height:56px;min-height:56px;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 2px;font-size:14px;line-height:1.2;color:var(--mute)}
.tab .pill{width:56px;height:28px;border-radius:14px;display:grid;place-items:center}
.tab .ic{width:22px;height:22px}
.tab span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.tab:hover .pill{background:var(--hover)}}
.tab[aria-current="page"]{color:var(--ink);font-weight:700}
.tab[aria-current="page"] .pill{background:var(--pill);color:var(--acc)}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
label{display:block;font-size:15px;color:var(--mute);margin-bottom:3px}
input,select,textarea{width:100%;box-sizing:border-box;min-height:48px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--ring);background:var(--bg);font-size:18px}
/* Fields: a border of at least 3:1 (WCAG 1.4.11; --ring is 3.3:1 light, 3.6:1 dark) and placeholders (Top, Bottom) at 4.5:1. No spin
   arrows on number fields: with a mouse they changed a value by 1 at a slip; the wheel no longer does either (app.js). */
::placeholder{color:var(--mute);opacity:1}input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
textarea{min-height:150px;font-size:15px;line-height:1.4}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.tab:focus-visible{outline-offset:-3px}
/* 1.88: round icon buttons (Back, the sync icon, Dismiss) draw the ring inside their circle, so it never covers the title beside
   them or is cut off at the screen's edge. */
.ib:focus-visible{outline-offset:-3px}.top #back{margin-right:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0;border-color:var(--acc)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.span{grid-column:1/-1}
label.chk{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:17px;min-height:48px;cursor:pointer}
.chk input{width:24px;min-height:24px;height:24px;flex:none;accent-color:var(--acc)}
.mt{margin-top:12px}.mute{color:var(--mute);font-size:15px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}.row small{display:block;color:var(--mute)}
.row button{flex:none;font-size:15px}
button.del{color:var(--danger);border-color:transparent;background:transparent}
/* Recent readings: date and time with Edit and Delete (full-size touch targets), then the values in two columns; the row being edited is marked. */
button.edit{color:var(--acc);border-color:transparent;background:transparent;font-weight:700}
.row.rd{display:block;padding:10px 0 12px}
.rdh{display:flex;align-items:center;gap:4px}.rdh strong{flex:1;min-width:0}.rdh .nb{white-space:nowrap}.rdh button{padding:0 10px}
.rdv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px;margin-top:2px}
.rdv span{display:block;font-size:14px;line-height:1.25;color:var(--mute)}
.rdv b{font-size:19px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rdv i{font-style:normal;font-size:14px;color:var(--mute);white-space:nowrap}
/* Live H/L in the form: the field outlined red, the line under it in red (with H or L, never colour alone). */
#fields input.tgout{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}.tgv{color:var(--danger);font-weight:700;margin:6px 0 0;font-size:16px}
/* The Today card: today's values (History's layout), the medication line, Send Today. Not while a reading is edited. */
#today .rdv{margin:6px 0 4px}.hacts{display:grid;gap:10px;margin:0 0 16px}#hadd{color:var(--acc);border-color:var(--acc);font-weight:700}.tdm{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.tdm p{margin:0;min-width:0}.tdm small{display:block;font-size:15px}/* Send Today and the two other formats on one row. The card's own width decides, not the window's (two columns make the card
   narrow on a wide screen): the two show their names only when the whole row, Send Today's label too, fits on one line, which
   needs 425 px of card content in English and 520 px in Dutch (measured, plus a margin for font differences); otherwise they are
   48 px icons, named for screen readers and in a tooltip. Send Today drops its own icon when its label would not fit beside them on one line. */
.btns.tdb{flex-wrap:nowrap}#tdsend{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.2}.tdx{flex:0 0 auto}
#tdsend .ic{flex:none}
#today{container:td cd/inline-size}
@container td (max-width:439.98px){.tdx{width:48px;padding:0}.tdx .tdxl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@container td (max-width:539.98px){:lang(nl) .tdx{width:48px;padding:0}:lang(nl) .tdx .tdxl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@container td (max-width:349.98px){#tdsend .ic{display:none}}
@container td (max-width:444.98px){:lang(nl) #tdsend .ic{display:none}}
.tdp{margin:8px 0 0;font-size:15px}
.row.rd small.rdn{margin-top:6px;font-size:15px}
/* Daily values outside your target (Setup › Measurements): red value, an H or L badge after the number, and the words. */
.rdv .out b{color:var(--danger)}.rdv .hl{display:inline-block;margin-left:2px;padding:0 6px;border-radius:6px;background:var(--danger);color:var(--dangerink);font-size:14px;line-height:20px;vertical-align:2px}
.rdv small.tgw{display:block;font-size:14px;line-height:1.25;color:var(--danger)}
/* Your target, folded under its measurement in Setup › Measurements. */
.srow details.stg{grid-column:1/-1;margin:-2px 0 2px}.stg summary{cursor:pointer;color:var(--acc);min-height:48px;display:flex;align-items:center;font-size:15px}
.stg p{margin:4px 0 8px}.stg .stgl{margin:10px 0 2px;font-weight:700;color:var(--ink)}.stg .warn{margin:4px 0 0}
.row.on{background:var(--hover);margin:0 -8px;padding:8px;border-radius:10px}
button.more{width:100%;margin-top:8px}
p.editing{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--hover);border-left:4px solid var(--acc);font-weight:700}
.card.editing{box-shadow:0 0 0 2px var(--acc)}
/* Quick SpO₂ + pulse: two big number fields side by side; gone while a reading is being edited. */
/* Log › New reading: the offer to add to a reading from the last 15 minutes, in the form. */
.near{margin-bottom:0;padding:10px 12px;border-radius:12px;background:var(--pill);color:var(--ink);font-size:15px}
#rform .btns button{flex:1 1 160px}
.srow{display:grid;grid-template-columns:1fr 78px auto;gap:6px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.srow:first-of-type{border-top:0}.srow input{font-size:16px}
.srow label.chk{margin:0;justify-content:center;min-width:48px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
a.btn.p{background:var(--acc);color:var(--accink);border-color:var(--acc);font-weight:700}
a.btn{display:inline-flex;align-items:center;min-height:48px;box-sizing:border-box;padding:0 14px;border-radius:12px;border:1.5px solid var(--line);color:inherit;text-decoration:none;background:var(--card)}
.msg{display:none}
/* Share buttons: large, side by side when there is room, stacked on narrow phones */
.shb button{flex:1 1 160px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:18px}
.shb .ic{flex:none}
[hidden]{display:none!important}
#chart svg,#lchart svg{display:block;max-width:100%}
#sstat{margin:0 0 8px}
#gate{max-width:520px;margin:0 auto}
/* Sign in (1.66): Google's button in its light style (white, grey border, the four-colour G) in both themes, then email. */
.glead{font-size:17px;margin:4px 0 18px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;background:#fff;color:#1f1f1f;border-color:#747775;font-weight:700;font-size:17px}
.gbtn svg{width:20px;height:20px;flex:none}
.gor{display:flex;align-items:center;gap:12px;margin:20px 0 8px;color:var(--mute);font-size:15px}.gor::before,.gor::after{content:"";flex:1;border-top:1px solid var(--line)}
.gfine{font-size:15px;margin:16px 0 0}[data-g="signin"] .btns button{flex:1 1 auto}
code.rk{display:block;font:700 19px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.04em;word-spacing:.3em;padding:10px;border-radius:8px;background:var(--bg);border:1.5px solid var(--line);margin:8px 0;word-break:break-word;-webkit-user-select:all;user-select:all}
section.enter{animation:in .16s ease-out}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
/* Toast */
.toast{position:fixed;z-index:20;left:50%;bottom:calc(56px + env(safe-area-inset-bottom,0px) + 12px);transform:translate(-50%,12px);box-sizing:border-box;width:max-content;max-width:min(560px,calc(100vw - 32px));padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:16px;box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;cursor:pointer}
body.gated .toast,body.kb .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
/* Confirm sheet: bottom sheet on phones, centred dialog on wide screens */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:85dvh;box-sizing:border-box;background:var(--card);color:var(--ink);border-radius:20px 20px 0 0}
dialog.sheet[open]{animation:up .2s ease-out}
dialog.sheet::backdrop{background:rgba(0,0,0,.45)}
@keyframes up{from{transform:translateY(100%)}}
.sheet-in{padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px))}
.grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 16px}
.sheet-in h2{font-size:20px}
.sh-b{display:flex;flex-direction:column;gap:8px;margin-top:16px}
button.danger{background:var(--danger);color:var(--dangerink);border-color:var(--danger);font-weight:700}
/* Wide screens: navigation rail on the left, centred content */
@media (min-width:900px){
.shell{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" "tabs main"}
body.gated .shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main"}
.tabs{flex-direction:column;gap:8px;padding:16px 0;border-top:0;border-right:1px solid var(--line)}
.tab{flex:none;height:68px}
.wrap{max-width:1080px;padding:24px 32px 48px}
section{max-width:720px;margin:0 auto}
/* Trends uses the width, so its chart (drawn at the card's width) gets room. */
#trends{max-width:none}
/* Today: the card and its buttons on the left, Share always in view on the right (or Appointments while open); no link needed. */
#home{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
#home>.homel{grid-column:1;grid-row:1;display:block}#home>.scr{grid-column:2;grid-row:1}#home:not(.deep)>#scr-share[hidden]{display:block!important}#home .shmore{display:none}
/* Log: the form next to History. Labs: the overview next to its trend. Setup: the list next to the open screen. */
#log{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:20px;align-items:start}
#log .seg,#labs .seg button[data-p="trends"]{display:none}#log .pane{display:block}
/* Medication tops the right column, above History, apart from the reading form. */
#log .pane[data-pane="new"]{grid-column:1;grid-row:1/span 2}#log .pane[data-pane="meds"]{grid-column:2;grid-row:1}#log .pane[data-pane="hist"]{grid-column:2;grid-row:2}#log .pane[data-pane="meds"][hidden]+.pane[data-pane="hist"]{grid-row:1/span 2}
#labs[data-p="overview"] .pane[data-pane="trends"]{display:block}
#setup.deep{max-width:none;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start}#setup.deep>#srows{display:block}#setup.deep .card{margin-top:0}
/* Setup: the menu on the left and the chosen page on the right, under its name. */
#setup.two{max-width:none;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 20px;align-items:start}
#setup.two>#srows{grid-column:1;grid-row:1/span 2}#setup.two>.phd{display:block;grid-column:2;grid-row:1;margin:6px 0 14px;font-size:22px}#setup.two>.scr{grid-column:2;grid-row:2}
.toast{left:calc(50% + 48px);bottom:24px}
body.gated .toast{left:50%;bottom:24px}
dialog.sheet{margin:auto;max-width:440px;border-radius:16px}
dialog.sheet[open]{animation:pop .16s ease-out}
.grab{display:none}
.sheet-in{padding:24px}
.sh-b{flex-direction:row-reverse}
}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
/* Installed on desktop with the title bar hidden: the header becomes the title bar */
@media (display-mode:window-controls-overlay){
.top{-webkit-app-region:drag;app-region:drag;min-height:max(48px,env(titlebar-area-height,0px));padding-top:0;padding-left:calc(env(titlebar-area-x,0px) + 16px);padding-right:calc(100vw - env(titlebar-area-x,0px) - env(titlebar-area-width,100vw) + 8px)}
.top button{-webkit-app-region:no-drag;app-region:no-drag}
.top .ib{width:40px;min-width:40px;height:40px;min-height:40px}.top .lb{min-height:40px;height:40px}
.top h1{font-size:17px;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Launch screen (cold start only; app.js fades it out and removes it). The icon matches icons/icon-512.png. */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:var(--bg);color:var(--ink);transition:opacity .2s ease-out}
.splash.out{opacity:0;pointer-events:none}
.spl-in,.spl-t{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.spl-ic{width:96px;height:96px;margin-bottom:16px}.spl-ic rect{fill:#0b6e7a}.spl-ic circle{fill:#fff}
.spl-ic path{fill:none;stroke:#fff;stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.spl-n{margin:0;font-size:24px;font-weight:700}
.spl-v{margin:0;min-height:1.45em;color:var(--mute);font-size:15px}
/* Installed on a phone: carries on from Android's own launch screen (Android 12+), which shows the maskable icon at 240 dp cut to
   its middle 160 dp by the device's icon shape (a circle on most phones), at the centre of the screen, on the manifest's background.
   That middle part is the "any" icon's artwork on a full circle, so the icon becomes a 160 px circle at the centre, and the name and
   version go below it without moving it. */
@media (display-mode:standalone) and (pointer:coarse){
.spl-in{display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;gap:0;align-self:stretch}
.spl-ic{grid-row:2;width:160px;height:160px;margin:0}.spl-ic rect{rx:50%}
.spl-t{grid-row:3;align-self:start;margin-top:24px}
}
@media (prefers-reduced-motion:reduce){*,::backdrop{animation:none!important;transition:none!important}}
#rst{min-height:80px}
.k1{color:var(--acc)}.k2{color:var(--c2)}.kt{display:inline-block;width:16px;height:10px;border-radius:2px;background:var(--band);box-shadow:inset 0 0 0 1px var(--acc);vertical-align:middle}
/* Trends: averages per time of day and meal tag under the chart. */
.tga{margin:6px 0 0}.tga b{color:var(--ink)}
.kf{display:inline-block;width:18px;border-top:2px dashed var(--acc);vertical-align:middle}.kx{color:var(--danger)}
/* Share: options of a report section sit under its checkbox */
.sub{padding-left:36px}
/* Labs tab */
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.lrow{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;text-align:left;color:inherit}
.lrow:first-child{border-top:0}
.lrow .nm{flex:1;min-width:0}.lrow small{display:block;color:var(--mute);font-size:14px}
.lrow .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.lrow .val small{font-weight:400}
/* Lab values: an empty ring when nothing needs attention (3:1 against the card in both themes), a solid red dot,
   red value and H/L badge when outside the entered range. */
.dot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--ring)}.dot.bad{background:var(--danger);box-shadow:none}
.lrow .hl,.lpo .hl{display:inline-block;margin-left:6px;padding:0 7px;border-radius:6px;background:var(--danger);color:var(--dangerink);font-size:14px;line-height:22px;vertical-align:2px}
.lrow.out .val>span:first-child,.lrow.out .nm small{color:var(--danger)}
.ltest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"n n d" "c1 c2 c3" "u lo hi" "g g g";gap:6px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.ltest:first-child{border-top:0}.ltest input{font-size:16px}
.ltest .ln{grid-area:n}.ltest .lu{grid-area:u}.ltest .del{grid-area:d}.ltest .llo{grid-area:lo}.ltest .lhi{grid-area:hi}.ltest .lg{grid-area:g;font-size:16px}
@media (min-width:520px){.ltest{grid-template-columns:minmax(0,1fr) 96px 84px 84px auto;grid-template-areas:"n u lo hi d" "g g g g g"}}
@media (min-width:900px){.ltest{grid-template-columns:minmax(0,1fr) 96px 84px 84px 190px auto;grid-template-areas:"n u lo hi g d"}}
/* Lab groups: section headings in the lists, the visit form, My tests and Share */
.lgh{font-size:15px;color:var(--mute);text-transform:none;margin:16px 0 2px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.lgh:first-child{margin-top:0}.lgh+.lrow,.lgh+.ltest{border-top:0}.fgrid .lgh{margin:10px 0 0}
/* My tests: Unit, Low and High are named above each test's boxes on a phone, and once per group when a test fits on one row. */
.ltc{font-size:13px;line-height:1.2;color:var(--mute);margin-bottom:-2px}.ltest .c1{grid-area:c1}.ltest .c2{grid-area:c2}.ltest .c3{grid-area:c3}
.lthead{display:none}.lthead+.ltest{border-top:0}
@media (min-width:520px){.ltc{display:none}.lthead{display:grid;grid-template-columns:minmax(0,1fr) 96px 84px 84px auto;gap:6px;font-size:14px;color:var(--mute);margin-top:6px}.lthead span:first-child{grid-column:2}}
@media (min-width:900px){.lthead{grid-template-columns:minmax(0,1fr) 96px 84px 84px 190px auto}}
.vdet{margin:-4px 0 6px}.vdet summary{cursor:pointer;color:var(--acc);min-height:48px;display:flex;align-items:center}.vdet h4{font-size:15px;margin:8px 0 2px;color:var(--mute)}.vdet ul{margin:0;padding-left:20px}
/* PC: trend chart on the left, grouped latest values on the right, as in the lab tracker */
@media (min-width:900px){#labs{max-width:none}.lcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-bottom:16px}.lcols .card{margin:0}}
.imp h3{font-size:16px;margin:14px 0 4px}.imp ul{margin:4px 0;padding-left:22px}.imp li{margin:3px 0}.imp p{margin:0 0 8px}
.pdfp{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}.pdfp>input[type=date]{margin-bottom:4px}
.warn{color:var(--danger)}.imp summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center;gap:8px;list-style:none}.imp summary::-webkit-details-marker{display:none}
.imp summary::before{content:'▸';width:1em;color:var(--acc)}.imp details[open]>summary::before{content:'▾'}
/* App name and version at the bottom of Setup. */
.ver{text-align:center;margin:8px 0 0;touch-action:manipulation}
.sc-self{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--band);font-weight:700}
.btout{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.45 ui-monospace,Consolas,monospace;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px;margin:12px 0 0;-webkit-user-select:text;user-select:text}
/* Header: a back arrow and the screen's name while a sub-screen is open. */
#back{margin-left:-12px}body.gated #back{display:none}
/* Top tabs of Log and Labs: under the header, staying in view while the screen scrolls. */
.seg{position:sticky;top:0;z-index:2;display:flex;margin:-16px -16px 16px;padding:0 8px;background:var(--bar);border-bottom:1px solid var(--line)}
.seg button{flex:1;min-width:0;min-height:48px;padding:0 6px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--mute);font-size:16px}
.seg button[aria-current]{color:var(--acc);font-weight:700;border-bottom-color:var(--acc)}
.seg button:focus-visible{outline-offset:-3px}
.pane:not(.on){display:none}
#log.editing .seg{display:none}
/* A sub-screen shows alone. */
section.deep>:not(.scr){display:none}
/* Setup: rows that open its screens */
.card.nav{padding:0;overflow:hidden}
.nrow{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:8px 12px 8px 16px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;text-align:left}
.nrow:first-child{border-top:0}
.nic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--pill);color:var(--acc)}
.ntx{flex:1;min-width:0}.ntx strong{display:block}.ntx small{display:block;color:var(--mute);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{flex:none;width:20px;height:20px;color:var(--mute)}
/* Setup's groups of rows; the row whose page is shown beside the menu on a wide screen; that page's name (wide screens only). */
#srows .card.nav{margin-bottom:12px}.nrow[aria-current]{background:var(--band)}.nrow[aria-current] .chev{color:var(--acc)}.phd{display:none}
/* Setup › Labs: its two top tabs sit in the page, not at the top of the screen. */
.seg.sseg{position:static;margin:0 0 16px;padding:0 4px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
/* A link to a Setup page inside a message. */
button.lnk{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--acc);font:inherit;text-decoration:underline;text-underline-offset:2px}
fieldset.radios{border:0;margin:0;padding:0;min-width:0}
.radios label.chk{min-height:56px}.radios small{display:block;color:var(--mute);font-size:15px}
/* Buttons with an icon; the OMRON import button spans the card */
.ibtn,button.wide{display:inline-flex;align-items:center;justify-content:center;gap:8px}
button.wide{width:100%}.btns.tight{margin-top:0}.mb{margin-bottom:16px}
/* Labs overview: the status line, then groups that fold under their heading */
.lsum{font-weight:700;margin:0 0 8px}
.lgh .lgb{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;text-align:left;font-size:16px;font-weight:700;color:var(--ink)}
.lgb small{flex:1;text-align:right;font-weight:400;font-size:14px;color:var(--mute)}.lgb.bad small{color:var(--danger);font-weight:700}
.lgb[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lgh{padding-bottom:0}.lgv .lrow:first-child{border-top:0}
/* Labs: the test picker (the current test, with previous and next beside it). It opens a bottom sheet on a phone and a popover
   under the button on a wide screen (placed by labs.js), with a search box and the groups as in All values. */
.lbl{display:block;font-size:15px;color:var(--mute);margin-bottom:3px}
.lpk{display:flex;align-items:center;gap:4px}.lpk .ib:disabled{opacity:.3}
button.lsel{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 12px;border-radius:10px;background:var(--bg);text-align:left}
.lsel .gn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:700}
.lsel small{flex:1;white-space:nowrap;color:var(--mute);font-size:15px}.lsel[aria-expanded="true"] .chev{transform:rotate(180deg)}
dialog.lpd{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:85dvh;box-sizing:border-box;overflow:hidden;background:var(--card);color:var(--ink);border-radius:20px 20px 0 0}
dialog.lpd[open]{display:flex;flex-direction:column;animation:up .2s ease-out}
dialog.lpd::backdrop{background:rgba(0,0,0,.45)}
.lpd .grab{flex:none;margin:8px auto 4px}
.lpd-h{display:flex;align-items:center;gap:8px;padding:0 8px 0 20px}.lpd-h h2{flex:1;margin:0;font-size:20px}
#lpq{flex:none;margin:4px 20px 8px;width:calc(100% - 40px)}
.lpd-l{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px calc(16px + env(safe-area-inset-bottom,0px))}
.lpd-l .lgh:first-child{margin-top:4px}.lpd-l .lgb:not(button){display:flex;align-items:center;gap:8px;min-height:40px;font-size:16px;font-weight:700;color:var(--ink)}
.lpo{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 10px;margin:0 -10px;border-radius:10px;cursor:pointer}
.lpo .nm{flex:1;min-width:0}.lpo small{display:block;color:var(--mute);font-size:14px}
.lpo:hover{background:var(--hover)}.lpo[aria-selected="true"]{background:var(--pill);font-weight:700}
.lpo:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}.lpo.out small{color:var(--danger)}
.lpd-l>p{margin:12px 0}
/* Collapse all / Expand all and Outside range: in the All values header and under the picker's search box */
.chd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-bottom:8px}.chd h2{margin:0}
.lgt{display:flex;flex-wrap:wrap;gap:8px}.lgt[hidden]{display:none}.lgt button{padding:0 12px;font-size:15px;font-weight:700;color:var(--acc)}
.lgt button.sm{font-size:14px;font-weight:400;color:var(--ink)}.lgt button[aria-pressed="true"]{background:var(--pill);border-color:var(--acc)}
#lpt{flex:none;margin:0 20px 8px}
@media (min-width:900px){
dialog.lpd{position:fixed;inset:auto;margin:0;max-width:none;border:1.5px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.25)}
dialog.lpd[open]{animation:pop .12s ease-out}
dialog.lpd::backdrop{background:transparent}
.lpd .grab,.lpd-h{display:none}#lpq{margin-top:12px}.lpd-l{padding-bottom:12px}
}
/* Share: the text of the report, folded */
details.fold>summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;list-style:none;font-weight:700;color:var(--acc)}
details.fold>summary::-webkit-details-marker{display:none}details.fold>summary::before{content:'▸';width:1em}details.fold[open]>summary::before{content:'▾'}
@media (min-width:900px){.seg{position:static;margin:0 0 20px;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}}
/* OMRON import: a row that is probably already entered, with what to do with it and what that adds */
.omn{border:1.5px solid var(--line);border-radius:12px;margin:10px 0;padding:6px 12px 10px;min-width:0}.omn legend{font-weight:700;padding:0 4px}
.omn label.chk{min-height:48px}.imp p.omw{margin:4px 0 0;font-weight:700}
/* CSV import: the mapping screen (one row per column), its live preview, and Setup › Import profiles. */
.cir{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:6px}.imp .cir p{margin:0}
.cih{display:flex;align-items:baseline;gap:8px}.cih strong{flex:1;min-width:0;overflow-wrap:anywhere}.cih span{font-size:13px;flex:none}
.imp .g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* Lab report matching: a unit choice that is still needed is outlined in red (and says so in words). */
.omn.need{border-color:var(--danger)}.omn select+select{margin-top:8px}.omn>p.mute{margin:6px 0 0}
.ciw{display:flex;align-items:center;gap:10px}.ciw input{width:110px}
.imp ul.cipv{list-style:none;padding:0;margin:0 0 8px}.cipv li{margin:0 0 8px;font-size:15px;overflow-wrap:anywhere}.imp ul.cie{margin:8px 0}
button.lk{min-height:44px;padding:0;margin-bottom:4px}.ipx{min-width:0;overflow-wrap:anywhere}.ipb{display:flex;flex:none}
/* Appointments (Share): the row at the top, the checklist per kind with a tick box per item (struck through once ticked). */
#aprows{margin-bottom:16px}
.aph{font-size:15px;color:var(--mute);margin:14px 0 2px;padding-bottom:4px;border-bottom:1px solid var(--line)}.aph:first-child{margin-top:4px}
.apit{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line)}.aph+.apit{border-top:0}
.apit label.chk{flex:1;min-width:0;padding:4px 0}.apit label.chk span{overflow-wrap:anywhere}
.apit.done label.chk span{text-decoration:line-through;color:var(--mute)}
.apit button.del{flex:none;padding:0 10px}
.apnew{margin-top:12px;padding-top:12px;border-top:1.5px solid var(--line)}
#apout{min-height:110px;font-size:17px}
/* Medication: Today's doses on Log (the time, the medication, a tick; once ticked, the time it was taken), the times in the form. */
/* Today's medication: checkbox and time on the first line of the name, however many lines the name takes. */
label.chk.mdd{align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding:10px 0;margin:0}.mdd:first-child{border-top:0}
.mdd .mdt{flex:none;min-width:3.2em;font-weight:700;font-variant-numeric:tabular-nums;line-height:24px}
.mdd .mdn{flex:1;min-width:0;overflow-wrap:break-word;line-height:24px}.mdd .mdn small{display:block;color:var(--mute);font-size:14px;line-height:1.4;margin-top:2px}
.mdd.done .mdn small{color:var(--ok)}
#mdsum{margin:8px 0 0}
.mdtimes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 12px}
/* Passphrase fields: the eye button (show / hide what was typed) sits inside the field's right end. */
.pw{position:relative}.pw input{padding-right:52px}.pw .eye{position:absolute;top:0;right:0;color:var(--mute)}
.eye[aria-pressed="false"] .eye-x{display:none}
/* Scan a device screen (scanui.js): a full-screen dialog with how to copy with Google Lens and Paste from Lens, then the numbers
   taken from the text as chips in a row and the values to check. */
/* Add from device: one button at the top of the form, opening a bottom sheet with Paste from Lens, Read from meter (where the browser
   has Web Bluetooth) and Import file (CSV), each with its help behind an info toggle. */
#addbtn{width:100%;color:var(--acc);border-color:var(--acc);font-weight:700}#rform.editing #addw{display:none}
.ad-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}.ad-h h2{flex:1;margin:0}
.ad-o{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line);padding:4px 0}
.ad-go{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:64px;padding:6px 4px;border:0;background:transparent;text-align:left}
.ad-go strong{display:block}.ad-go small{display:block;font-size:15px;line-height:1.3;color:var(--mute)}
.ad-ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--pill);color:var(--acc);display:grid;place-items:center}
.ad-i{color:var(--acc)}.ad-i[aria-expanded="true"]{background:var(--pill)}
.ad-more{margin:0 0 8px 56px;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:15px}.ad-more p{margin:0}.ad-more .sc-how{margin:0;padding:0 0 0 20px;background:none}
dialog.scan{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;box-sizing:border-box;background:var(--bg);color:var(--ink)}
dialog.scan[open]{display:flex;flex-direction:column}dialog.scan::backdrop{background:rgba(0,0,0,.6)}
.sc-in{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;max-width:640px;margin:0 auto}
.sc-h{display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 0 16px}.sc-h h2{flex:1;margin:0;font-size:20px}
.sc-b{flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.sc-how{margin:12px 0 0;padding:10px 12px 10px 32px;border-radius:12px;background:var(--pill);color:var(--ink)}.sc-how li+li{margin-top:4px}
.sc-tl{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.sc-chip{box-sizing:border-box;min-width:44px;min-height:48px;padding:4px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
border:2.5px solid var(--acc);border-radius:8px;background:var(--card);color:var(--ink);font-weight:700;font-size:15px}
.sc-chip small{font-size:12px;font-weight:700;line-height:1.1}
.sc-chip.on{background:var(--pill)}.sc-chip.sel{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--acc)}
.sc-bar{border:1.5px solid var(--acc);border-radius:12px;padding:8px 12px;margin:8px 0}.sc-bar .btns{margin-top:4px}.sc-bt{margin:0;font-weight:700}
.sc-bar button[aria-pressed="true"]{background:var(--pill);border-color:var(--acc)}
.sc-f{margin-top:10px}.sc-f input{font-size:24px;font-weight:700;min-height:56px;font-variant-numeric:tabular-nums}.sc-nt p{margin:4px 0 0}
/* 1.82 Display & accessibility (display.js; per device). Text size zooms the whole app, so text, spacing and touch targets grow
   together and the layout reflows; the phone's own font size comes on top. Heights in viewport units are divided by the zoom,
   or the app would be taller than the screen (the tab bar pushed off it). */
html.ts-l{--z:1.15}html.ts-xl{--z:1.3}body{zoom:var(--z,1)}
.shell{height:calc(100dvh / var(--z,1))}dialog.sheet,dialog.lpd{max-height:calc(85dvh / var(--z,1))}
/* A narrow card (large text on a phone): one column, so values, labels and selects are never cut; a blood pressure's two fields stay
   side by side. Summaries under Setup rows and names in the Labs picker wrap instead of ending in "…". */
.card{container:cd/inline-size}
@container cd (max-width:259.98px){.fgrid,.g2,.g3,.rdv{grid-template-columns:minmax(0,1fr)}.span>.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.btns.tdb{flex-wrap:wrap}#tdsend{flex-basis:100%}.srow{grid-template-columns:minmax(0,1fr) auto}.srow>input:nth-child(2){grid-column:1}}
html.ts-l .ntx small,html.ts-xl .ntx small,html.ts-l .lsel .gn,html.ts-xl .lsel .gn{white-space:normal;overflow:visible}
/* H and L carry ▲ and ▼ as well as colour; the symbol is hidden from screen readers, which hear "high" or "low". */
.hl .hs{margin-right:2px}
.say{min-height:44px;font-size:15px;padding:0 12px}.say[aria-pressed="true"]{background:var(--pill);border-color:var(--acc)}.saymsg:empty{display:none}
/* High contrast: black on white, or white on black in dark mode; text 7:1 or more (AAA), lines and borders 3:1 or more, 2 px. */
html.hc{--bg:#fff;--card:#fff;--bar:#fff;--ink:#000;--mute:#2b3b40;--line:#4b5f64;--acc:#004f59;--accink:#fff;--c2:#7a4200;--pill:#cfe6e9;--hover:#e3eef0;--ring:#4b5f64;--danger:#8b1a14;--dangerink:#fff;--ok:#0b5d2a;--band:rgba(0,79,89,.16)}
@media (prefers-color-scheme:dark){html.hc:not([data-theme="light"]){--bg:#000;--card:#0a0f10;--bar:#0a0f10;--ink:#fff;--mute:#d6e2e4;--line:#9fb4b9;--acc:#8ae8f2;--accink:#00242a;--c2:#ffd27a;--pill:#16444b;--hover:#14262a;--ring:#9fb4b9;--danger:#ffc9c3;--dangerink:#3a0000;--ok:#8af0b0;--band:rgba(138,232,242,.18)}}
html.hc[data-theme="dark"]{--bg:#000;--card:#0a0f10;--bar:#0a0f10;--ink:#fff;--mute:#d6e2e4;--line:#9fb4b9;--acc:#8ae8f2;--accink:#00242a;--c2:#ffd27a;--pill:#16444b;--hover:#14262a;--ring:#9fb4b9;--danger:#ffc9c3;--dangerink:#3a0000;--ok:#8af0b0;--band:rgba(138,232,242,.18)}
html.hc .card,html.hc button,html.hc a.btn,html.hc input,html.hc select,html.hc textarea,html.hc dialog.lpd{border-width:2px}
html.hc .tab,html.hc .seg button,html.hc button.lnk,html.hc .lgh .lgb,html.hc button.del,html.hc button.edit{border-width:0}
html.hc #fields input.tgout{border-width:3px;box-shadow:none}
/* Bold text: everything bold. */
html.bold body,html.bold body *{font-weight:700}
/* Larger buttons: every control at least 56 px high, with more space between. */
html.big button:not(.lnk),html.big a.btn,html.big input:not([type=checkbox]):not([type=radio]),html.big select,html.big label.chk,html.big summary,html.big .lpo{min-height:56px}
html.big .btns{gap:12px}html.big .fgrid{gap:14px}html.big .chd{gap:8px 12px}html.big input[type=checkbox],html.big input[type=radio]{width:28px;height:28px}
#scr-disp label.chk small{display:block;font-size:15px}
/* 1.83: the badge's own spans (▲ H, and "high" for screen readers) keep its white on red; ".rdv span" (a value's name in History and
   on Today) made them grey and block. */
.hl span{display:inline;color:inherit;font-size:inherit;line-height:inherit}
/* 1.84 Symptoms (symptoms.js). The chips: one chosen at a time, filled when chosen; your own ones dashed. */
.sychips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.sychip{border-radius:24px;padding:0 16px;font-size:16px}
.sychip[aria-pressed="true"]{background:var(--acc);color:var(--accink);border-color:var(--acc);font-weight:700}.sychip.own{border-style:dashed}
.syseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.syseg button{padding:0 6px}
.syseg button[aria-pressed="true"]{background:var(--pill);border-color:var(--acc);font-weight:700}
#scr-sym h2 .opt{font-weight:400}
/* The one fixed line for chest discomfort, numbness or weakness and blurred vision, with the call button when a number is set. */
.sysos{margin-top:12px;padding:10px 12px;border-radius:10px;border:2px solid var(--danger)}.sysos p{margin:0;color:var(--danger);font-weight:700;font-size:16px}
.sysos .sycall{margin-top:10px;border-color:var(--danger);color:var(--danger);font-weight:700}
/* Today and History: a symptom like a value (its name in bold, how bad after it); "No readings yet today." across the whole width. */
.rdv>p{grid-column:1/-1;margin:0}.rdv .syv{grid-column:1/-1}.rdv .syv b,.rdv .syt b{font-size:19px}
/* Trends: the symptoms' diamonds on the time axis, and their names under the chart. */
.syk .kd{color:var(--c2)}
.srow2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.syrow{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line)}.syrow:first-child{border-top:0}.syrow .chk{flex:1}
/* 1.86 The appointment summary: its period, and the report's text as a preview. */
.asper{font-weight:700;margin:10px 0 0}.asprev{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.45}
#asinc small{font-size:15px}
/* 1.87 Pattern alerts on Today: facts, so amber rather than red; each with its Dismiss (48 px). */
.tdal{display:grid;gap:8px;margin:4px 0 10px}.paal{display:flex;gap:6px;align-items:flex-start;border:1.5px solid var(--line);border-left:6px solid var(--c2);border-radius:12px;padding:6px 0 6px 12px}
.paal p{flex:1;min-width:0;margin:6px 0;font-size:16px;line-height:1.35}.paal small{display:block;color:var(--mute);font-size:14px;margin-top:2px}.paal .ib{flex:none}
#palist .pan{margin-top:6px}#palist .pan input{max-width:140px}#palist .pat{margin-top:10px}#palist label.chk small{display:block;font-size:15px}
/* Consent and whose records (1.91): the step label, the links in the text, the reasons indented under "Someone else's". */
p.stp{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
a.lnk{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
#g-abx{margin-left:36px}
ul.dll{margin:8px 0;padding-left:22px}ul.dll li{margin:4px 0}
/* The recovery key (1.92): 13 numbered groups of 4, the number small above each. */
code.rk{display:flex;flex-wrap:wrap;gap:6px 16px;word-spacing:0}
code.rk span{position:relative;padding-top:16px}
code.rk span::before{content:attr(data-n);position:absolute;top:0;left:0;font:700 12px/1 system-ui,sans-serif;letter-spacing:0;color:var(--mute)}
/* Demo mode (1.92): the app with sample data, in memory. What needs a device, a camera, a file, a backup or an account is hidden (also by script, sync.js). */
.demobar{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:0 0 8px;padding:8px 12px;border-radius:0 0 12px 12px;background:var(--acc);color:var(--accink);font-weight:700}
.demobar .lnk{color:inherit;text-decoration:underline;font-weight:700;min-height:40px}
body.demo #hadd,body.demo #addw,body.demo #lpdf,body.demo #s-delcard,body.demo #syncb{display:none!important}