: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}
*{-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)}
.top h1{flex:1;min-width:0;font-size:20px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#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):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}
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. Up to 520 px wide the two are icons (named for screen readers and in a tooltip). */
.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}
@media (max-width:520px){#tdsend .ic{display:none}.tdx{width:48px;padding:0}.tdx .tdxl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}.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{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}
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,340px) minmax(0,1fr);gap:20px;align-items:start}#setup.deep>#srows{display:block}#setup.deep .card{margin-top:0}
.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}
}
/* 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}
.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)}
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}