/* ============================================================
   SERO — account: sign in + the panel
   Same tokens as the site: bone/paper surfaces, squared buttons,
   range bars and chips as the data language.
   ============================================================ */

/* ---------- shared form bits ---------- */
.fld{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.fld > span:first-child{ font-size:.82rem; font-weight:550; color:var(--ink-2); }
.fld input,.fld select{
  width:100%; min-height:52px; padding:.8rem 1rem;
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.fld select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.6rem; }
.fld input:focus,.fld select:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(47,122,74,.14); }
.fld input:disabled{ background:var(--bone-2); color:var(--ink-3); }
.fld input::placeholder{ color:var(--ink-4); }
.fld.sm input{ min-height:44px; padding:.55rem .75rem; font-size:.95rem; }
.fld.sm > span:first-child{ font-size:.76rem; }
.in-u{ position:relative; display:block; }
.in-u::after{ content:attr(data-u); position:absolute; right:.75rem; top:50%; translate:0 -50%; font-style:normal; font-family:var(--mono); font-size:.66rem; color:var(--ink-4); pointer-events:none; }
.in-u input{ padding-right:4.6rem; }

.check{ display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; line-height:1.45; color:var(--ink-2); cursor:pointer; }
.check input{ width:20px; height:20px; margin:.05rem 0 0; flex:none; accent-color:var(--ember); }
.check a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

.form-err,.form-ok{ margin:0; padding:.75rem 1rem; border-radius:var(--r-s); font-size:.88rem; }
.form-err{ background:var(--high-soft); color:var(--high); }
.form-ok{ background:var(--good-soft); color:var(--good); }

.linkish{ background:none; border:0; padding:.35rem 0; font:inherit; font-size:.88rem; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; align-self:flex-start; }
.linkish:hover{ color:var(--ember); }
.linkish.danger{ color:var(--high); margin-top:1.5rem; }

/* ============================================================
   SIGN IN
   ============================================================ */
.auth-body{ background:var(--bone); }
.auth{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100svh; }
.auth-art{ position:relative; overflow:hidden; background:var(--void); margin:12px; border-radius:var(--r-xl); }
.auth-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.auth-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,11,10,0) 45%, rgba(12,11,10,.72)); }
.auth-art-copy{ position:absolute; z-index:1; left:clamp(1.5rem,4vw,3rem); right:clamp(1.5rem,4vw,3rem); bottom:clamp(1.5rem,4vw,3rem); color:var(--on-void); }
.auth-art-copy .mono{ color:var(--ember-3); }
.auth-art-copy .d3{ margin:.6rem 0 0; max-width:18ch; }
.auth-art-copy .fade{ color:rgba(243,239,232,.62); }

.auth-main{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; padding:3rem var(--pad); }
.auth-main > .logo{ align-self:center; }
.auth-card{ width:100%; max-width:440px; display:flex; flex-direction:column; gap:1rem; }
.auth-card h1{ margin:.6rem 0 0; }
.auth-card > .small{ margin:0 0 .5rem; }
.auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--bone-2); border-radius:var(--r-s); }
.auth-tabs button{ min-height:44px; border:0; border-radius:var(--r-xs); background:transparent; font:inherit; font-size:.9rem; font-weight:550; color:var(--ink-2); cursor:pointer; }
.auth-tabs button[aria-selected="true"]{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-s); }
.auth-form{ display:flex; flex-direction:column; gap:1rem; }
.preview-note{ margin:.5rem 0 0; padding:1rem 1.1rem; border:1px dashed rgba(47,122,74,.4); border-radius:var(--r-s); background:rgba(246,229,218,.5); font-size:.84rem; line-height:1.5; color:var(--ink-2); }
.preview-note b{ color:var(--ember); }
.auth-foot{ margin:0; text-align:center; }
.auth-foot a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:860px){
  .auth{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .auth-art{ height:220px; margin:10px 10px 0; border-radius:var(--r-l); }
  .auth-art-copy .d3{ font-size:1.35rem; }
  .auth-main{ justify-content:flex-start; padding-top:2rem; }
}

/* ============================================================
   THE PANEL
   One spacing scale throughout:
   --in   24px inside every card
   --gap  16px between cards
   --sec  40px between sections
   ============================================================ */
.acct-body{ background:var(--bone); --in:24px; --gap:16px; --sect:40px; }
.acct-top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  height:64px; padding:0 var(--pad);
  background:rgba(241,237,230,.86); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.preview-tag{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); border:1px solid rgba(47,122,74,.4); padding:4px 8px; border-radius:var(--r-xs); }
.acct-who{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:700; font-size:1rem; }

.acct{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; max-width:1240px; margin:0 auto; padding:32px var(--pad) 64px; }
.acct-nav{ position:sticky; top:96px; align-self:start; display:flex; flex-direction:column; gap:4px; }
.acct-nav a{ display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:var(--r-s); font-size:.95rem; font-weight:500; color:var(--ink-2); transition:background .2s var(--ease), color .2s var(--ease); }
.acct-nav a:hover{ background:rgba(20,17,13,.05); color:var(--ink); }
.acct-nav a[aria-current]{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-s); }
.acct-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.acct-nav a[aria-current] svg{ stroke:var(--ember); }

.acct-main{ min-width:0; display:flex; flex-direction:column; gap:var(--gap); }
.acct-main > .block,.acct-main > .vh,.acct-main > .ov-top,.acct-main > .duo,.acct-main > .back{ margin-top:calc(var(--sect) - var(--gap)); }
.acct-main > :first-child{ margin-top:0; }
.acct-loading{ display:flex; align-items:center; gap:12px; color:var(--ink-3); padding:64px 0; }
.spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--ember); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.acct-legal{ max-width:1240px; margin:0 auto; padding:0 var(--pad) 48px; text-align:center; }

.vh{ display:flex; flex-direction:column; gap:12px; }
.vh h1{ margin:0; }
.back{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.9rem; color:var(--ink-2); align-self:flex-start; }
.back:hover{ color:var(--ember); }

/* cards: one padding, one radius, one shadow */
:root .acct-main .card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-l); padding:var(--in); box-shadow:var(--shadow-s); gap:12px; }
.card h2,.card h3,.card p{ margin:0; }
:root .acct-main .card > :last-child:is(a,button,.btn){ margin-block-start:0; }
:root .acct-main > section.block{ padding:0; }

.banner{ padding:16px 20px; border-radius:var(--r-m); background:var(--watch-soft); color:var(--watch); font-size:.92rem; }
.banner.ok{ background:var(--good-soft); color:var(--good); }
.row-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* status chips */
.st{ display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:var(--r-xs); font-size:.74rem; font-weight:600; white-space:nowrap; flex:none; }
.st-optimal{ background:var(--good-soft); color:var(--good); }
.st-mid{ background:var(--watch-soft); color:var(--watch); }
.st-low,.st-high{ background:var(--high-soft); color:var(--high); }

/* ---------- overview ---------- */
.ov-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.ov-top .mono{ color:var(--ink); }
.sum{ display:flex; flex-direction:column; }
.sum-k{ font-weight:600; font-size:1rem; }
.sum-h{ font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.hl{ background:var(--good-soft); color:var(--good); padding:0 .2em; border-radius:var(--r-s); }
.hl-mid{ background:var(--watch-soft); color:var(--watch); }

/* biological age */
:root .acct-main .bage{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:center; background:var(--void); color:var(--on-void); border-color:var(--void); padding:32px; }
.bage .mono{ color:var(--ember-3); }
.bage-l{ display:flex; flex-direction:column; gap:8px; }
.bage-n{ display:flex; align-items:baseline; gap:8px; }
.bage-n b{ font-family:var(--display); font-size:clamp(3.2rem,6vw,4.4rem); font-weight:700; line-height:1; letter-spacing:-.04em; }
.bage-n small{ font-size:1rem; color:var(--on-void-2); }
.bage-gap{ font-weight:600; }
.bage-gap.good{ color:var(--good-2); } .bage-gap.warn{ color:var(--watch-2); }
.bage .tiny{ color:var(--on-void-2); }
.bage-r{ display:flex; flex-direction:column; gap:20px; }
.bage-axis{ position:relative; height:84px; }
.ba-line{ position:absolute; left:0; right:0; top:48px; height:2px; background:linear-gradient(90deg,var(--good-2),var(--watch-2) 60%,var(--high-2)); border-radius:2px; opacity:.8; }
.ba-ends{ position:absolute; left:0; right:0; top:60px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem; color:var(--on-void-3); }
.ba-mk{ position:absolute; top:0; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ba-mk em{ order:-1; font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; white-space:nowrap; color:var(--on-void-2); }
.ba-mk i{ width:14px; height:14px; border-radius:50%; margin-top:22px; background:var(--void); border:2px solid var(--on-void-2); }
.ba-bio em{ color:var(--on-void); }
.ba-bio i{ background:var(--ember-2); border-color:var(--ember-2); box-shadow:0 0 0 5px rgba(185,217,74,.25); }
.ba-age{ top:auto; bottom:-4px; }
.ba-age em{ order:1; }
.ba-age i{ margin:0 0 0; }
.bage-empty{ background:var(--paper); }

/* ageing marker tiles */
.tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); align-items:stretch; }
.tile{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:20px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-l); box-shadow:var(--shadow-s); transition:transform .25s var(--ease-out), box-shadow .25s var(--ease); }
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.tl-n{ font-weight:600; font-size:.92rem; }
.tl-v{ display:flex; align-items:baseline; gap:6px; }
.tl-v b{ font-family:var(--display); font-size:1.75rem; font-weight:700; letter-spacing:-.03em; line-height:1; }
.tl-v small,.mc-v small,.mr-v small{ font-family:var(--mono); font-size:.68rem; color:var(--ink-3); }

/* doctor's note */
.note{ display:flex; flex-direction:column; }
.note-who{ display:flex; align-items:center; gap:12px; }
.note-who b{ display:block; font-size:.95rem; }
.doc{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--ember-soft); color:var(--ember); font-family:var(--display); font-weight:700; flex:none; }
.note > p{ font-size:1.02rem; line-height:1.6; max-width:70ch; }

/* next panel + lab report */
.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); align-items:stretch; }
.next{ display:flex; flex-direction:column; align-items:flex-start; }
.next .btn{ margin-top:auto; }
:root .acct-main .card.next > .btn:last-child{ margin-block-start:auto; }
.lab{ display:flex; flex-direction:column; }
.lab-open{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:0; border:0; background:none; font:inherit; color:var(--ink); cursor:pointer; text-align:left; }
.lab-open .d4{ font-family:var(--display); font-weight:700; }
.plus{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); font-size:1.2rem; line-height:1; transition:transform .3s var(--ease-out); flex:none; }
.lab-open[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.lab-form{ display:flex; flex-direction:column; gap:16px; padding-top:8px; }
.lab-form .btn{ align-self:flex-start; }
.fld textarea{ width:100%; padding:12px 16px; font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-s); resize:vertical; }
.fld textarea:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(47,122,74,.14); }
.lab-found{ display:flex; flex-direction:column; gap:8px; }
.lab-found:empty{ display:none; }
.found{ display:flex; flex-wrap:wrap; gap:8px; }

/* marker cards */
.mcards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); align-items:start; }
.mcard{ display:flex; flex-direction:column; }
.mc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mc-head h3{ font-size:1.05rem; font-weight:600; font-family:var(--sans); letter-spacing:-.01em; }
.mc-v{ display:flex; align-items:baseline; gap:6px; }
.mc-v b{ font-family:var(--display); font-size:2.2rem; font-weight:700; letter-spacing:-.035em; line-height:1; }
.mc-say{ color:var(--ink-2); }
.mc-more{ display:flex; flex-direction:column; gap:8px; padding:16px; background:var(--paper); border-radius:var(--r-m); }
.mc-more b{ color:var(--ink); }
.mc-act{ display:flex; align-items:center; gap:16px; padding-top:4px; }

/* the zone bar */
.zb{ position:relative; padding:32px 0 22px; }
.zb-track{ display:flex; gap:3px; height:6px; }
.zb-track i{ display:block; height:100%; border-radius:3px; min-width:3px; }
.z-r{ background:#E5675A; } .z-a{ background:#EFA35C; } .z-g{ background:#2C8A5E; }
.zb-pin{ position:absolute; top:0; left:calc(var(--x) * 1%); translate:-50% 0; display:flex; flex-direction:column; align-items:center; }
.zb-pin b{ display:block; padding:3px 7px; border-radius:6px; background:var(--ink); color:var(--paper); font-size:.72rem; font-weight:600; line-height:1.2; white-space:nowrap; }
.zb-pin::after{ content:""; width:12px; height:12px; margin-top:6px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px var(--card); }
.zb-ticks{ position:absolute; left:0; right:0; bottom:0; height:14px; }
.zb-ticks span{ position:absolute; translate:-50% 0; font-family:var(--mono); font-size:.64rem; color:var(--ink-3); }

/* tracker */
.track-card{ display:flex; flex-direction:column; }
:root .acct-main .track-card{ gap:24px; }
.tc-head,.ord-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.tc-head h2,.ord-head h2{ margin-top:4px; }
.track{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); position:relative; }
.track::before,.track::after{ content:""; position:absolute; top:7px; left:calc(50% / var(--n)); height:2px; border-radius:2px; }
.track::before{ right:calc(50% / var(--n)); background:var(--bone-2); }
.track::after{ width:calc((100% - 100% / var(--n)) * var(--at) / (var(--n) - 1)); background:var(--ember); }
.track li{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:.78rem; color:var(--ink-3); }
.track li i{ width:16px; height:16px; border-radius:50%; background:var(--card); border:2px solid var(--bone-2); }
.track li.done i{ background:var(--ember); border-color:var(--ember); }
.track li.now i{ border-color:var(--ember); box-shadow:0 0 0 5px rgba(47,122,74,.16); }
.track li.now{ color:var(--ink); font-weight:600; }
.track li.done{ color:var(--ink-2); }

/* empty state */
.empty{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:center; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:32px; }
.empty-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.empty-copy h2,.empty-copy p{ margin:0; }
.empty-copy p{ max-width:52ch; }
.empty-art{ margin:0; border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/3; background:var(--bone-2); }
.empty-art img{ width:100%; height:100%; object-fit:cover; }

/* blocks + result rows */
.block{ display:flex; flex-direction:column; gap:var(--gap); }
.block-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; }
.block-head h2{ margin:0; }
.more{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.9rem; font-weight:600; color:var(--ember); white-space:nowrap; }
.more .arw{ transition:transform .3s var(--ease-out); }
.more:hover .arw{ transform:translateX(3px); }

.mk-list{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-s); }
.mrow{ display:grid; grid-template-columns:minmax(0,1fr) 128px minmax(0,1.3fr) 104px; gap:24px; align-items:center; padding:12px var(--in); border-top:1px solid var(--line-2); transition:background .2s var(--ease); }
.mrow:first-child{ border-top:0; }
.mrow:hover{ background:var(--paper); }
.mr-n{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mr-n b{ font-weight:600; font-size:.98rem; }
.mr-v{ display:flex; align-items:baseline; gap:6px; }
.mr-v b{ font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.03em; }
.mr-s{ display:flex; justify-content:flex-end; }
.mr-z .zb{ padding:28px 0 18px; }

/* results */
.test-pick{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.test-pick a{ display:flex; flex-direction:column; flex:none; min-height:56px; justify-content:center; padding:8px 16px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--paper); font-size:.9rem; font-weight:550; }
.test-pick a small{ font-weight:400; font-size:.74rem; color:var(--ink-3); }
.test-pick a[aria-selected="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.test-pick a[aria-selected="true"] small{ color:var(--on-void-2); }

:root .acct-main .md-now{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:40px; align-items:center; }
.md-now > div:first-child{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.md-r{ display:flex; flex-direction:column; gap:4px; }
.md-why{ display:flex; flex-direction:column; }
.chart-card{ display:flex; flex-direction:column; }
.chart{ width:100%; height:auto; overflow:visible; }
.ch-band{ fill:var(--good-soft); }
.ch-rule{ stroke:var(--good-2); stroke-dasharray:3 4; }
.ch-ax{ font-family:var(--mono); font-size:11px; fill:var(--ink-3); }
.ch-line{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; }
.ch-pt circle{ fill:var(--good); stroke:var(--card); stroke-width:3; }
.ch-pt.mid circle{ fill:var(--watch); } .ch-pt.low circle,.ch-pt.high circle{ fill:var(--high); }
.ch-pt text:not(.ch-ax){ font-family:var(--sans); font-weight:600; font-size:13px; fill:var(--ink); }

.tbl{ width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-s); font-size:.92rem; }
.tbl th{ text-align:left; font-family:var(--mono); font-weight:450; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:12px var(--in); background:var(--paper); }
.tbl td{ padding:14px var(--in); border-top:1px solid var(--line-2); }

/* log */
.log-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--gap); align-items:start; }
:root .log-grid{ align-items:start; }
.form{ display:flex; flex-direction:column; }
:root .acct-main .form{ gap:16px; }
.form > .mono{ color:var(--ember); }
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mk-in{ border:1px solid var(--line-2); border-radius:var(--r-m); padding:0 16px; }
.mk-in summary{ cursor:pointer; min-height:48px; font-weight:600; font-size:.95rem; display:flex; gap:8px; align-items:center; }
.mk-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; padding-bottom:16px; }

/* orders */
.ord-list{ display:flex; flex-direction:column; gap:var(--gap); }
.ord{ display:flex; flex-direction:column; }
:root .acct-main .ord{ gap:20px; }
.ord-meta{ display:flex; flex-wrap:wrap; gap:8px 24px; }
:root .acct-main .cta-card,:root .acct-main .danger-card{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:24px; }
.cta-card > div,.danger-card > div{ display:flex; flex-direction:column; gap:8px; max-width:56ch; }
:root .acct-main .cta-card{ background:var(--ember-soft); border-color:rgba(47,122,74,.2); }
.prof .btn{ align-self:flex-start; }

/* checkbox: 44px hit area, 20px drawn box */
:root .check input{
  -webkit-appearance:none; appearance:none; cursor:pointer; flex:none;
  width:44px; height:44px; min-width:44px; margin:-12px -6px -12px -12px; padding:0; border:0; border-radius:var(--r-xs);
  background:
    center/18px 18px no-repeat linear-gradient(var(--card),var(--card)),
    center/20px 20px no-repeat linear-gradient(var(--ink-4),var(--ink-4));
}
:root .check input:checked{
  background:
    center/12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    center/20px 20px no-repeat linear-gradient(var(--ember),var(--ember));
}
:root .check input:focus-visible{ outline:2px solid var(--ember); outline-offset:-10px; }

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .acct{ grid-template-columns:200px minmax(0,1fr); gap:32px; }
  :root .acct-main .bage{ grid-template-columns:1fr; gap:24px; }
  .mrow{ grid-template-columns:minmax(0,1fr) 112px minmax(0,1.2fr) 96px; gap:16px; }
  .log-grid{ grid-template-columns:1fr; }
}

/* ---------- phone: the nav becomes a bottom tab bar ---------- */
@media (max-width:860px){
  .acct-body{ --in:20px; --gap:12px; --sect:32px; }
  .acct{ grid-template-columns:1fr; padding-top:24px; padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .acct-nav{
    position:fixed; top:auto; left:0; right:0; bottom:0; z-index:60;
    flex-direction:row; justify-content:space-around; gap:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(251,249,245,.94); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
  }
  .acct-nav a{ flex:1; flex-direction:column; gap:4px; min-height:52px; padding:4px 0; justify-content:center; font-size:.68rem; }
  .acct-nav a[aria-current]{ background:transparent; box-shadow:none; color:var(--ember); }
  .acct-legal{ display:none; }
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile{ padding:16px; }
  .duo,.mcards{ grid-template-columns:1fr; }
  :root .acct-main .bage{ padding:24px; }
  .empty{ grid-template-columns:1fr; padding:24px; }
  .empty-art{ order:-1; aspect-ratio:16/9; }
  .mrow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"n s" "v v" "z z"; gap:4px 12px; padding:16px var(--in); }
  .mr-n{ grid-area:n; } .mr-s{ grid-area:s; } .mr-v{ grid-area:v; } .mr-z{ grid-area:z; }
  .mr-n .tiny{ display:none; }
  :root .acct-main .md-now{ grid-template-columns:1fr; gap:16px; }
  .two,.mk-grid{ grid-template-columns:1fr; }
  :root .acct-main .cta-card,:root .acct-main .danger-card{ flex-direction:column; align-items:flex-start; }
  .track li span{ font-size:.66rem; }
  .tbl th:nth-child(4),.tbl td:nth-child(4){ display:none; }
  .tc-head{ flex-direction:column; }
  .ov-top{ flex-direction:column; gap:4px; }
}
@media (max-width:480px){
  .acct-who .btn{ padding:6px 12px; }
  .track li span{ display:none; }
  .track li.now span{ display:block; position:absolute; top:26px; white-space:nowrap; }
  .track li:first-child.now span{ left:0; } .track li:last-child.now span{ right:0; }
  .track{ padding-bottom:24px; }
}
/* restate grids whose names contain "card" over the defence's column rule */
:root .acct-main .mcards{ display:grid; }
:root .lab-open{ min-height:44px; flex-wrap:nowrap; white-space:nowrap; }
.card-top{ display:flex; align-items:center; min-height:44px; }
.vh .lede{ margin:0; max-width:52ch; }
@media (max-width:860px){ :root .acct-main .mcards{ grid-template-columns:1fr; } }
.plus{ position:relative; }
.plus::before,.plus::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:currentColor; translate:-50% -50%; }
.plus::after{ rotate:90deg; }