/* ============================================================================
   Vitals — design system
   Clinical instrument vernacular: teal instrument-glass accent on cyan-biased
   neutrals. Severity colours (green/amber/red) are reserved strictly for BP
   category and macro state so status never competes with the accent hue.
   Type: Instrument Serif for readings, IBM Plex Sans for UI, IBM Plex Mono for
   units, timestamps and micro-labels.
   ========================================================================== */

:root{
  --bg:#EEF2F3; --surface:#FFFFFF; --surface-2:#E4EAEC; --surface-3:#F5F8F8;
  --line:#D3DCDF; --line-soft:#E3EAEC; --line-strong:#B4C2C6;
  --text:#0F191C; --text-2:#4B5D62; --text-3:#7C8E93;
  --accent:#0E7C86; --accent-ink:#08585F; --accent-soft:#D6EBED; --accent-line:#9CCBCF;
  --on-accent:#FFFFFF;
  --good:#2E7D5B; --good-soft:#DCEFE5;
  --warn:#A9721A; --warn-soft:#F4E9D2;
  --high:#BC4530; --high-soft:#F7E0DB;
  --crit:#8E1D14; --crit-soft:#F3D8D4;
  --violet:#5F53A0; --clay:#B0713F;
  --shadow-1:0 1px 2px rgba(15,25,28,.07);
  --shadow-2:0 2px 6px rgba(15,25,28,.07), 0 18px 40px -22px rgba(15,25,28,.34);
  --r:7px; --r-lg:12px;
  --tabbar:60px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1114; --surface:#111C20; --surface-2:#17262B; --surface-3:#0E181B;
    --line:#21343A; --line-soft:#1A2B30; --line-strong:#33484F;
    --text:#E7EFF0; --text-2:#A2B4B8; --text-3:#71868C;
    --accent:#3FB6C0; --accent-ink:#8FE0E6; --accent-soft:#123239; --accent-line:#2A606A;
    --on-accent:#06181B;
    --good:#4FA97F; --good-soft:#122C22;
    --warn:#D19A45; --warn-soft:#2E2416;
    --high:#E0745D; --high-soft:#33201C;
    --crit:#F0857A; --crit-soft:#3A1D1A;
    --violet:#8C7DD6; --clay:#D2955F;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1114; --surface:#111C20; --surface-2:#17262B; --surface-3:#0E181B;
  --line:#21343A; --line-soft:#1A2B30; --line-strong:#33484F;
  --text:#E7EFF0; --text-2:#A2B4B8; --text-3:#71868C;
  --accent:#3FB6C0; --accent-ink:#8FE0E6; --accent-soft:#123239; --accent-line:#2A606A;
  --on-accent:#06181B;
  --good:#4FA97F; --good-soft:#122C22;
  --warn:#D19A45; --warn-soft:#2E2416;
  --high:#E0745D; --high-soft:#33201C;
  --crit:#F0857A; --crit-soft:#3A1D1A;
  --violet:#8C7DD6; --clay:#D2955F;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- reset --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; height:100%}
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Standalone PWA: never rubber-band the whole document, only scroll regions. */
  overscroll-behavior-y:none;
  padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom,0px));
}
/* Stop iOS double-tap zoom on controls without disabling pinch-zoom on content. */
button,.tab,.tile,.item{touch-action:manipulation}
img{max-width:100%}

#app{max-width:560px; margin:0 auto; position:relative}

/* ----------------------------------------------------------- primitives --- */
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.serif{font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-weight:400}
.num{font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-3);
}
.muted{color:var(--text-2)}
.tiny{font-size:12px}
.hide{display:none !important}
.row{display:flex; align-items:center; gap:8px}
.between{display:flex; align-items:center; justify-content:space-between; gap:10px}
.grow{flex:1; min-width:0}
.trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* --------------------------------------------------------------- header --- */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  padding-top:env(safe-area-inset-top,0px);
}
.hbar{display:flex; align-items:center; gap:10px; padding:12px 16px 10px}
.brand{display:flex; align-items:baseline; gap:7px; flex:1; min-width:0}
.brand b{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:21px; letter-spacing:.01em}
.brand span{
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-3); font-family:"IBM Plex Mono",monospace;
}
.sync{
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:20px;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.05em; white-space:nowrap;
}
.sync .dot{width:6px; height:6px; border-radius:50%; background:var(--text-3); flex:none}
.sync[data-s="ok"]   .dot{background:var(--good)}
.sync[data-s="busy"] .dot{background:var(--accent); animation:pulse 1.1s ease-in-out infinite}
.sync[data-s="queue"] .dot{background:var(--warn)}
.sync[data-s="err"]  .dot{background:var(--high)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.sync[data-s="busy"] .dot{animation:none}}

.iconbtn{
  width:32px; height:32px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  border-radius:var(--r); cursor:pointer; padding:0;
}
.iconbtn:hover{color:var(--text); border-color:var(--line-strong)}
.iconbtn svg{width:16px; height:16px}

/* --------------------------------------------------------------- layout --- */
main{padding:16px 16px 24px; display:flex; flex-direction:column; gap:16px}
.sec{display:flex; flex-direction:column; gap:9px}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
h2.serif{margin:0; font-size:24px; line-height:1.15; letter-spacing:.01em; text-wrap:balance}
h3{margin:0; font-size:13.5px; font-weight:600; letter-spacing:.005em}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
}
.card-p{padding:14px}
.card-t{
  padding:12px 14px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}

/* ---------------------------------------------------------- stat tiles --- */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px 13px 13px; display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden; text-align:left; width:100%;
  cursor:pointer; color:inherit; font:inherit; box-shadow:var(--shadow-1);
}
.tile:hover{border-color:var(--line-strong)}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--bar,var(--line-strong))}
.tile .big{
  font-family:"Instrument Serif",Georgia,serif; font-size:33px; line-height:.95;
  letter-spacing:.005em; font-variant-numeric:tabular-nums;
}
.tile .unit{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--text-3); letter-spacing:.04em}
.tile .sub{font-size:11.5px; color:var(--text-2); display:flex; align-items:center; gap:5px; min-height:16px}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:20px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent;
}
.chip.good{background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb,var(--good) 26%,transparent)}
.chip.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.chip.high{background:var(--high-soft); color:var(--high); border-color:color-mix(in srgb,var(--high) 26%,transparent)}
.chip.crit{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.chip.neu{background:var(--surface-2); color:var(--text-2); border-color:var(--line)}
.chip.acc{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line)}

/* -------------------------------------------------------------- buttons --- */
button{font:inherit}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 14px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer;
  font-size:13.5px; font-weight:500; line-height:1.2; white-space:nowrap;
}
.btn:hover{border-color:var(--line-strong); background:var(--surface-3)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.pri{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--text-2); padding:6px 8px}
.btn.ghost:hover{background:var(--surface-2); color:var(--text)}
.btn.danger{color:var(--high); border-color:color-mix(in srgb,var(--high) 32%,transparent)}
.btn.danger:hover{background:var(--high-soft)}
.btn.sm{padding:6px 10px; font-size:12.5px}
.btn.block{width:100%}
.btn svg{width:15px; height:15px; flex:none}

.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.quick .btn{flex-direction:column; gap:6px; padding:12px 4px; font-size:11.5px}
.quick .btn svg{width:18px; height:18px; color:var(--accent)}

/* ---------------------------------------------------------------- lists --- */
.list{display:flex; flex-direction:column}
.item{
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  border-bottom:1px solid var(--line-soft); text-align:left; width:100%;
  background:none; border-left:0; border-right:0; border-top:0;
  color:inherit; font:inherit; cursor:pointer;
}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface-3)}
.item .lead{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--text-3);
  width:52px; flex:none; letter-spacing:.02em;
}
.item .val{font-family:"Instrument Serif",Georgia,serif; font-size:19px; font-variant-numeric:tabular-nums; line-height:1}
.daygroup{padding:9px 14px 6px; background:var(--surface-3); border-bottom:1px solid var(--line-soft)}
.empty{padding:26px 16px; text-align:center; color:var(--text-3); font-size:13px}
.empty svg{width:22px; height:22px; margin-bottom:8px; opacity:.5}

/* ---------------------------------------------------------------- forms --- */
label.f{display:flex; flex-direction:column; gap:5px}
label.f > span{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
input,select,textarea{
  width:100%; padding:10px 11px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface-3); color:var(--text); font:inherit;
  font-size:16px; /* 16px minimum stops iOS zooming the viewport on focus */
}
textarea{resize:vertical; min-height:62px}
input:focus,select:focus,textarea:focus{outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,.item:focus-visible,.tile:focus-visible,.tab:focus-visible,.iconbtn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
input.big{
  font-family:"Instrument Serif",Georgia,serif; font-size:30px; text-align:center;
  padding:8px; font-variant-numeric:tabular-nums;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.bpin{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center}
.bpin .slash{font-family:"Instrument Serif",Georgia,serif; font-size:27px; color:var(--text-3); padding-bottom:4px}
.seg{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface-3)}
.seg button{
  flex:1; padding:8px 4px; border:0; background:transparent; color:var(--text-2);
  font-size:12.5px; cursor:pointer; border-right:1px solid var(--line);
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}

/* ---------------------------------------------------------------- sheet --- */
.scrim{position:fixed; inset:0; background:rgba(8,16,18,.5); z-index:40; opacity:0; animation:fade .16s ease forwards}
@keyframes fade{to{opacity:1}}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41; max-width:560px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line); border-bottom:0;
  border-radius:16px 16px 0 0; box-shadow:var(--shadow-2);
  max-height:92dvh; display:flex; flex-direction:column;
  transform:translateY(14px); opacity:0; animation:rise .2s cubic-bezier(.32,.72,0,1) forwards;
}
@keyframes rise{to{transform:translateY(0); opacity:1}}
@media (prefers-reduced-motion:reduce){
  .scrim,.sheet{animation:none; opacity:1; transform:none}
}
.sheet-h{display:flex; align-items:center; gap:10px; padding:13px 15px 11px; border-bottom:1px solid var(--line-soft); flex:none}
.sheet-h h3{flex:1; font-size:15px}
.sheet-b{padding:15px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.sheet-f{
  padding:12px 15px calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-soft); display:flex; gap:9px; flex:none; background:var(--surface);
}
.grab{width:34px; height:4px; border-radius:3px; background:var(--line-strong); margin:7px auto 0; flex:none}

/* ----------------------------------------------------------------- tabs --- */
nav.tabs{
  position:fixed; bottom:0; left:0; right:0; z-index:30; max-width:560px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 7px;
  border:0; background:none; color:var(--text-3); cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; position:relative;
}
.tab svg{width:19px; height:19px}
.tab[aria-selected="true"]{color:var(--accent)}
.tab[aria-selected="true"]::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2px; background:var(--accent); border-radius:0 0 2px 2px;
}

/* --------------------------------------------------------------- charts --- */
.chart{width:100%; display:block; overflow:visible}
.chart-wrap{padding:10px 6px 4px}
.legend{display:flex; flex-wrap:wrap; gap:12px; padding:0 14px 12px}
.legend i{width:9px; height:9px; border-radius:2px; display:inline-block; flex:none}

/* --------------------------------------------------------------- photos --- */
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px}
.pcell{
  position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2); cursor:pointer; padding:0;
}
.pcell img{width:100%; height:100%; object-fit:cover; display:block}
.pcell .cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px 6px 4px;
  background:linear-gradient(transparent,rgba(6,14,16,.82));
  color:#fff; font-family:"IBM Plex Mono",monospace; font-size:10px; text-align:left;
}
.shot{
  border:1px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--surface-3);
  padding:22px 14px; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; color:var(--text-2); width:100%; text-align:center;
}
.shot:hover{border-color:var(--accent); color:var(--accent)}
.shot svg{width:26px; height:26px}
.preview{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line)}
.preview img{width:100%; display:block; max-height:240px; object-fit:cover}
.preview .x{
  position:absolute; top:8px; right:8px; background:rgba(8,16,18,.72); color:#fff;
  border:0; border-radius:50%; width:28px; height:28px; cursor:pointer; display:grid; place-items:center;
}

/* AI estimation panel */
.estimating{display:flex; align-items:center; gap:10px; padding:13px; background:var(--accent-soft); border-radius:var(--r-lg); color:var(--accent-ink); font-size:13px}
.spinner{
  width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

/* ----------------------------------------------------------------- misc --- */
.meter{height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden; display:flex}
.meter i{display:block; height:100%}
.bars{display:flex; align-items:flex-end; gap:3px; height:44px}
.bars .b{flex:1; background:var(--accent-soft); border-radius:2px 2px 0 0; min-height:2px}
.bars .b.over{background:color-mix(in srgb,var(--warn) 40%,transparent)}
.kv{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
.kv:last-child{border-bottom:0}
.kv b{font-weight:500; font-variant-numeric:tabular-nums}
.note{
  border-left:2px solid var(--accent-line); background:var(--accent-soft);
  padding:10px 12px; border-radius:0 var(--r) var(--r) 0; font-size:12.5px; color:var(--accent-ink);
}
.warnbox{
  border-left:2px solid var(--warn); background:var(--warn-soft);
  padding:10px 12px; border-radius:0 var(--r) var(--r) 0; font-size:12.5px; color:var(--warn);
}
.setrow{display:grid; grid-template-columns:28px 1fr 1fr 34px; gap:7px; align-items:center}
.setrow .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--text-3); text-align:center}
.setrow input{padding:8px; text-align:center}
.timer{font-family:"Instrument Serif",Georgia,serif; font-size:40px; text-align:center; font-variant-numeric:tabular-nums; line-height:1}
.foodrow{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line-soft);
  cursor:pointer; width:100%; background:none; border-left:0; border-right:0; border-top:0;
  color:inherit; font:inherit; text-align:left;
}
.foodrow:hover{background:var(--surface-3)}
.pill{
  padding:5px 10px; border-radius:20px; border:1px solid var(--line); background:var(--surface-3);
  font-size:12px; cursor:pointer; color:var(--text-2); white-space:nowrap;
}
.pill:hover{border-color:var(--accent-line); color:var(--accent-ink)}
.scrollx{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch}
.scrollx::-webkit-scrollbar{height:0}
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar) + 14px + env(safe-area-inset-bottom,0px));
  z-index:60; background:var(--text); color:var(--bg); padding:9px 15px; border-radius:20px;
  font-size:13px; box-shadow:var(--shadow-2); max-width:88vw; text-align:center;
}

/* ---------------------------------------------------------------- login --- */
.login{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:24px; max-width:360px; margin:0 auto; text-align:center;
}
.login .mark{width:64px; height:64px; border-radius:16px}
.login form{display:flex; flex-direction:column; gap:11px; width:100%}
.login .err{color:var(--high); font-size:13px; min-height:18px}

/* Update banner when a new service worker is waiting */
.update{
  position:fixed; left:12px; right:12px; z-index:70;
  bottom:calc(var(--tabbar) + 14px + env(safe-area-inset-bottom,0px));
  max-width:536px; margin:0 auto;
  background:var(--text); color:var(--bg); border-radius:var(--r-lg);
  padding:11px 14px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-2); font-size:13px;
}
.update button{
  border:1px solid color-mix(in srgb,var(--bg) 40%,transparent); background:transparent;
  color:var(--bg); border-radius:20px; padding:5px 12px; font-size:12.5px; cursor:pointer;
}

/* ---------------------------------------------------------- activity pick --- */
.actgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
.actcell{
  padding:13px 9px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface-3); color:var(--text); font:inherit; font-size:13px;
  cursor:pointer; text-align:center; line-height:1.25; min-height:52px;
}
.actcell:hover{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-ink)}

/* -------------------------------------------------------------- camera mode --
   Full-bleed and deliberately single-theme: a viewfinder is black regardless of
   what the rest of the app is doing. */
.camera{
  position:fixed; inset:0; z-index:80; background:#000; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
#camvideo, .cam-review{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
#camvideo.mirror{transform:scaleX(-1)}     /* front camera previews mirrored */

/* Framing guide. The model judges portion size from what else is in frame, so
   the guide nudges towards a square-ish, filled composition. */
.cam-guide{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(78vw,78vh); aspect-ratio:1; pointer-events:none;
  border:1.5px solid rgba(255,255,255,.4); border-radius:18px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.28);
}
.cam-hint{
  position:absolute; left:16px; right:16px;
  top:calc(18px + env(safe-area-inset-top,0px));
  color:rgba(255,255,255,.92); font-size:12.5px; line-height:1.4; text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.7); pointer-events:none;
}
.cam-bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 22px calc(24px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(transparent, rgba(0,0,0,.72));
}
.cam-btn{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.4); color:#fff; cursor:pointer; padding:0;
}
.cam-btn svg{width:20px; height:20px}
.cam-btn[aria-pressed="true"]{background:#fff; color:#000}
.cam-shutter{
  width:74px; height:74px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:0; background:none; color:#fff; cursor:pointer; padding:0;
}
.cam-shutter svg{width:70px; height:70px}
.cam-shutter:active svg{opacity:.6}
.cam-torch{
  position:absolute; right:18px; top:calc(18px + env(safe-area-inset-top,0px));
}
.cam-native{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(104px + env(safe-area-inset-bottom,0px));
  background:none; border:0; color:rgba(255,255,255,.75);
  font:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:6px;
}
.camera .cam-bar .btn{flex:none}
.camera .cam-bar .btn.grow{flex:1}

/* --------------------------------------------------------------- segment bar --
   Proportional split with a legend. Answers "what did the time go on" better
   than a pie at this width, and stays legible at 2% slices. */
.segbar{
  display:flex; height:14px; border-radius:4px; overflow:hidden;
  background:var(--surface-2); margin-bottom:11px;
}
.segbar i{display:block; height:100%; min-width:2px}
.seglegend{display:flex; flex-direction:column; gap:6px}
.seglegend > span{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2)}
.seglegend i{width:9px; height:9px; border-radius:2px; flex:none; display:inline-block}
.seglegend .trunc{flex:1; min-width:0}
.seglegend b{font-weight:500; color:var(--text); font-variant-numeric:tabular-nums}

/* A fifth tile would otherwise leave a hole in the two-column grid. */
.tile.wide{grid-column:1 / -1}