/*
  Brava web: the Emilio Capital family layer.
  The app itself is a compiled React bundle (inline in index.html, with its original CSS).
  This file loads after it and turns it into a family app: paper and ink, DM Sans for words,
  IBM Plex Mono for every number, 3px corners, no shadows, glass only for what floats.
  The family base (colours, corners, type stacks) comes from familia.css, loaded first.

  Brava's one accent: lime (--bv-accent). Always a fill with ink on top (the hero, a done
  series, a done check, the end of a rest), never a thin line or text on paper, where it disappears.
  Bars, charts and progress are ink.
*/

/* Fonts: bundled, no outside requests. DM Sans Display is the cut used from 26px up. */
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans Display"; src: url("fonts/DMSans-Display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans Display"; src: url("fonts/DMSans-DisplaySemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Light.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: block; }

/* ===== Tokens: the app's own variables now point at the family's ===== */
:root {
  --bv-accent: #C8FF2E;       /* the one accent, always under ink */
  --bv-on-accent: #1A1A1A;    /* ink that stays ink in both themes */
  --bv-pending: #A9720B;      /* family pending-text: partial, notes, changed days */
  --bv-pending-bg: #FBF1DC;
  --bv-faint: #C4C4C4;        /* a step past muted: rest days, future cells */
  --bv-mu2: #8A8A8A;

  --bg: var(--ec-bg);
  --s1: var(--ec-soft);       /* grey panels, no outline */
  --s2: var(--ec-bg);         /* paper inside a grey panel */
  --s3: var(--ec-softer);
  --s4: var(--bv-faint);
  --tx: var(--ec-ink);
  --mu: var(--ec-muted);
  --mu2: var(--bv-mu2);
  --ac: var(--bv-accent);
  --ink: var(--bv-on-accent);
  --warn: var(--ec-danger);
  --amber: var(--bv-pending);
  --mono: var(--ec-mono);
  --disp: var(--ec-display);
  --ac-grad: var(--bv-accent);
  --ac-grad-h: var(--ec-ink);
  --glow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bv-pending: #E5AD3A; --bv-pending-bg: #35290F; --bv-faint: #3A3A3A; --bv-mu2: #7A7A7A; }
}
:root[data-theme="dark"] { --bv-pending: #E5AD3A; --bv-pending-bg: #35290F; --bv-faint: #3A3A3A; --bv-mu2: #7A7A7A; }

/* ===== Base ===== */
html, body { background: var(--ec-bg); color: var(--ec-ink); }
body { font: 400 15px/1.3 var(--ec-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: 2px solid var(--ec-ink); outline-offset: 2px; }
.app { background: var(--ec-bg); }
@media (width >= 520px) { .app { box-shadow: 0 0 0 1px var(--ec-hairline); } }

/* 3px corners on everything; pieces that touch stay square and the corner goes on the set */
/* low specificity on purpose (1,1,0), so the square exceptions below win */
#root :not(.ec-seal, .ec-seal *) { border-radius: var(--ec-radius); }
#root .seg button, #root .scroller, #root .screen, #root .sheet-root, #root .scrim, #root .sheet-body,
#root .sheet-foot, #root .tshell.full, #root .t-full, #root .t-mini { border-radius: 0; }

/* Pressing dims to 60%; nothing shrinks */
.btn:active, .check:active, .serie:active { transform: none; }
#root button:active:not(:disabled) { opacity: .6; }
.tshell.mini, .app.timer-min .tshell { box-shadow: none; }

/* ===== Type ===== */
.disp, .page-title, .hero-title, .plan-name, .det-title, .empty-title, .t-label, .name-input {
  font-family: var(--ec-display); font-weight: 400; font-stretch: normal; text-transform: none;
}
.page-title { font-size: 42px; letter-spacing: -.5px; line-height: 1; }
.hero-title { font-size: 44px; letter-spacing: -.55px; line-height: .98; }
.hero.dark .hero-title { font-size: 34px; letter-spacing: .1px; }
.plan-name { font-size: 32px; letter-spacing: .05px; line-height: 1.05; }
.det-title { font-size: 30px; letter-spacing: .1px; line-height: 1.1; }
.empty-title { font-size: 30px; letter-spacing: .1px; }
.t-label { font-size: 28px; letter-spacing: .2px; line-height: 1.1; }
.name-input { font-size: 30px; letter-spacing: .1px; line-height: 1.1; }
.wk-name .name-input { font-size: 26px; }

.section-title { margin: 38px 0 14px; color: var(--ec-ink); font: 600 22px/1.15 var(--ec-display); letter-spacing: 0; }
.section-title em { background: var(--ec-soft); color: var(--ec-muted); font: 500 12px/1.4 var(--ec-mono); padding: 1px 7px; }
.screen { padding-left: var(--ec-gutter); padding-right: var(--ec-gutter); }
.topbar { padding-left: 0; padding-right: 0; }
.topbar-date { color: var(--ec-muted); font-size: 17px; }
.topbar-date b { color: var(--ec-ink); font-weight: 600; }

/* Labels: small, bold, in capitals; the value under them is bigger and in ink */
.adj-label, .field > span, .stepper-label, .eq-title {
  color: var(--ec-muted); font: 700 12px/1.2 var(--ec-sans); letter-spacing: .6px; text-transform: uppercase;
}
.tile-k, .foot-item span, .stat span, .prog-nums span, .t-round small { color: var(--ec-muted); }
.row-title { font-weight: 600; }
.xc-name { font-weight: 600; }
.row-sub, .xc-sub, .row-meta { color: var(--ec-muted); }

/* Numbers: IBM Plex Mono everywhere */
.hero-count b { font: 300 76px/.8 var(--ec-mono); letter-spacing: -.05em; }
.hero-count i { font: 300 28px/1 var(--ec-mono); letter-spacing: -.02em; opacity: .5; }
.hero-count span { font-weight: 600; opacity: .7; }
.rep-big b { background: none; color: var(--ec-ink); font: 300 80px/.85 var(--ec-mono); letter-spacing: -.05em; }
.stat b { font: 400 30px/1 var(--ec-mono); letter-spacing: -.03em; }
.stat small { font-family: var(--ec-sans); }
.date-blk b { font: 400 22px/1 var(--ec-mono); }
.rep-pct { font-weight: 400; }
.tile-v, .serie-n, .stepper-val, .wstep b, .xc-sets, .fld.v, .timer-clock, .hero-stats b, .prog-nums b, .pcard-stats b, .det-right, .wd-d { font-weight: 500; }
.t-clock { font: 300 clamp(68px, 23vw, 96px)/1 var(--ec-mono); letter-spacing: -.05em; }
.badge, .sd-b, .wd-dot { font-family: var(--ec-sans); font-stretch: normal; font-weight: 700; }
.ax { font-family: var(--ec-mono); fill: var(--ec-muted); }

/* ===== Buttons: ink blocks, words in capitals ===== */
.btn { height: 52px; padding: 0 20px; font: var(--ec-btn-font); letter-spacing: .6px; text-transform: uppercase; gap: 8px; }
.btn.primary { background: var(--ec-ink); color: var(--ec-on-ink); }
.btn.primary:disabled { background: var(--ec-softer); color: var(--ec-muted); }
.btn.soft { background: var(--ec-soft); color: var(--ec-ink); }
.btn.outline { background: none; color: var(--ec-ink); border: 1px solid var(--ec-ink); }
.btn.ghost { color: var(--ec-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.btn.sm { height: 40px; font: var(--ec-btn-font-sm); letter-spacing: .5px; }
.icon-btn { width: 40px; height: 40px; background: none; color: var(--ec-ink); border: 1px solid var(--ec-ink); }
.icon-btn.sm { width: 36px; height: 36px; border: 0; color: var(--ec-muted); }
.icon-btn.danger { color: var(--ec-danger); border-color: var(--ec-danger); }
.icon-btn.sm.danger { border: 0; }
.sheet-head .icon-btn { border: 0; }
.wk-label { height: 32px; display: grid; place-items: center; padding: 0 10px; background: none; border: 1px solid var(--ec-ink);
  color: var(--ec-ink); font: var(--ec-btn-font-sm); letter-spacing: .5px; text-transform: uppercase; }

/* Segmented control: framed, the chosen one an ink block */
.seg { background: none; padding: 0; gap: 0; border: 1px solid var(--ec-ink); overflow: hidden; }
.seg button { padding: 0; height: 38px; color: var(--ec-ink); font: 600 13px/1 var(--ec-sans); letter-spacing: .4px; text-align: center; }
.seg button.on { background: var(--ec-ink); color: var(--ec-on-ink); }
.seg button + button { border-left: 1px solid var(--ec-ink); }

/* Chips: framed, on is ink */
.chip { background: none; color: var(--ec-ink); border: 1px solid var(--ec-ink); padding: 8px 13px; font-size: 14px; font-weight: 500; }
.chip.on { background: var(--ec-ink); color: var(--ec-on-ink); }
.chip.skip { background: none; color: var(--ec-danger); border-color: var(--ec-danger); }

/* Switch */
.sw { background: var(--ec-softer); }
.sw i { background: var(--ec-bg); }
.sw.on { background: var(--ec-ink); }
.sw.on i { background: var(--ec-on-ink); }

/* ===== The tab bar: glass, words only, the open one underlined ===== */
.nav {
  left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); height: 64px; padding: 0 4px;
  align-items: center; background: var(--ec-glass); border: 1px solid var(--ec-glass-edge);
  -webkit-backdrop-filter: blur(6px) saturate(180%); backdrop-filter: blur(6px) saturate(180%);
}
.nav-ic { display: none; }
.nav button { height: 100%; justify-content: center; color: var(--ec-muted); font: 700 12.5px/1 var(--ec-sans); letter-spacing: .6px; text-transform: uppercase; }
.nav button.on { color: var(--ec-ink); }
.nav button.on span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.scroller { padding-bottom: 128px; }

/* ===== Today ===== */
/* The hero: the one lime block, ink on top in both themes */
.hero { background: var(--bv-accent); color: var(--bv-on-accent); }
.hero:after { display: none; }
.hero-btn { background: var(--bv-on-accent); color: var(--bv-accent); }
.hero .pill-sm { background: rgba(26, 26, 26, .1); }
.pill-sm.btn-like { background: var(--bv-on-accent); color: var(--bv-accent); }
.hero-stats > div { background: rgba(26, 26, 26, .08); }
.segbar i { background: rgba(26, 26, 26, .16); }
.segbar i.on { background: var(--bv-on-accent); }
.segbar i.half { background: linear-gradient(90deg, var(--bv-on-accent) 50%, rgba(26, 26, 26, .16) 50%); }
.hero.dark { background: var(--ec-soft); color: var(--ec-ink); }
.hero.dark .pill-sm { background: var(--ec-bg); }
.hero.dark .hero-p { color: var(--ec-muted); }
.hero-stats.flat > div { background: var(--ec-soft); }
/* The stamp is the family seal: ink, with the totals in white and the minutes in lime */
.stamp svg { fill: #1A1A1A; }
.stamp-txt b { font-weight: 500; }
.stamp-txt small { color: #A3A3A3; }
.stamp-txt div:first-child b { background: none; color: var(--bv-accent); }

/* The week: today is an ink block */
.wd { color: var(--ec-muted); }
.wd-d { color: var(--ec-ink); }
.wd.today { background: var(--ec-ink); color: var(--ec-on-ink); }
.wd.today .wd-d { background: none; color: var(--ec-on-ink); }
.wd-dot { color: var(--bv-mu2); }
.wd-dot.sched { box-shadow: inset 0 0 0 1.5px var(--bv-faint); color: var(--ec-ink); }
.wd-dot.done { background: var(--c, var(--bv-accent)); color: var(--bv-on-accent); box-shadow: none; }
.wd-dot.part { background: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); color: var(--ec-ink); }
.wd-dot.miss { color: var(--ec-danger); box-shadow: inset 0 0 0 1.5px var(--ec-danger); }
.wd.today .wd-dot.sched { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ec-on-ink) 45%, transparent); color: var(--ec-on-ink); }
.wd.today .wd-dot.part { color: var(--ec-on-ink); }
.wd-adj { background: var(--bv-pending); }
.banner { background: var(--bv-pending-bg); color: var(--bv-pending); }
.note { background: var(--bv-pending-bg); color: var(--bv-pending); }
.note-line { color: var(--bv-pending); }

/* Exercises: grey panels; the next one framed in ink */
.xc { background: var(--ec-soft); }
.xc.is-next { background: var(--ec-soft); border: 1.5px solid var(--ec-ink); }
.check { background: var(--ec-bg); color: var(--ec-muted); font-weight: 500; }
.check.on { background: var(--bv-accent); color: var(--bv-on-accent); }
.is-done .xc-name, .is-done .xc-sets { color: var(--ec-muted); }
.tile { background: var(--ec-bg); }
.serie { background: var(--ec-bg); }
.serie.cur { background: var(--ec-bg); border: 1.5px solid var(--ec-ink); }
.serie.on { background: var(--bv-accent); color: var(--bv-on-accent); border: 0; }
.serie.on small { color: rgba(26, 26, 26, .6); }
.wstep { background: var(--ec-bg); }
.wstep button { background: var(--ec-soft); }
.foot-btn { background: var(--ec-bg); }
.foot-btn svg { color: var(--ec-ink); }
.foot-btn span { color: var(--ec-muted); }

/* ===== Plan, archive ===== */
.wcard, .scard, .pcard, .plan-card, .card, .stat, .rep-hero, .plan-ex, .det-ex, .adj-ex, .ex-row, .eq-card, .stepper, .opt, .wk-opt, .sd { background: var(--ec-soft); }
.weeks i { background: var(--ec-softer); }
.weeks i.past { background: var(--ec-ink); }
.weeks i.now { background: var(--ec-softer); }
.weeks i.now:after { background: var(--ec-ink); }
.plan-meta b, .pcard-stats b { color: var(--ec-ink); }
.sd-b.rest { background: var(--ec-bg); color: var(--bv-mu2); }
.badge.rest, .row-icon { background: var(--ec-bg); color: var(--ec-ink); }
.row-icon.danger { color: var(--ec-danger); }
.accent-row .row-title { color: var(--ec-ink); }
.accent-row .row-icon { background: var(--bv-accent); color: var(--bv-on-accent); }
.tag { background: var(--ec-bg); color: var(--ec-muted); font-weight: 600; }
.tag.live { background: var(--bv-accent); color: var(--bv-on-accent); }
.status.ok { background: var(--bv-accent); color: var(--bv-on-accent); }
.status.part { background: var(--bv-pending-bg); color: var(--bv-pending); }
.mini-check { background: var(--ec-bg); }
.mini-check.on { background: var(--bv-accent); color: var(--bv-on-accent); }
.date-blk span { color: var(--ec-muted); }
.ex-idx { color: var(--bv-mu2); }
.ex-move button { color: var(--ec-muted); }
.opt.on, .wk-opt.on { background: var(--ec-soft); border: 1.5px solid var(--ec-ink); }
.wk-opt { border: 1.5px solid transparent; }
.adj-ex.off .row-title { color: var(--ec-muted); text-decoration-color: var(--bv-mu2); }
.row:active { background: var(--ec-soft); }
.empty-mark span { background: var(--ec-softer); }
.empty-mark span:nth-child(2) { background: var(--ec-ink); }

/* ===== Progress ===== */
.rep-bar i { background: var(--ec-softer); }
.rep-bar i.on { background: var(--ec-ink); }
.rep-cmp { color: var(--ec-muted); }
.delta { font-weight: 500; }
.delta.up { background: var(--bv-accent); color: var(--bv-on-accent); }
.delta.down { background: color-mix(in srgb, var(--ec-danger) 10%, transparent); color: var(--ec-danger); }
.delta.flat { background: var(--ec-bg); color: var(--ec-muted); }
.prog-nums > div { background: var(--ec-bg); }
.prog-nums b.up { color: var(--ec-ink); }
.prog-nums b.down { color: var(--ec-danger); }
.mbar > div { background: var(--ec-bg); }
.mbar i { background: var(--ec-ink); }
.mbar b { color: var(--ec-muted); }
.heat-days { color: var(--ec-muted); }
.h-done { background: var(--ec-ink); }
.h-part { background: color-mix(in srgb, var(--ec-ink) 35%, transparent); }
.h-miss { box-shadow: inset 0 0 0 1.5px var(--ec-danger) !important; }
.h-none { background: var(--ec-bg); }
.h-future { background: color-mix(in srgb, var(--ec-bg) 45%, transparent); }
.h-due { box-shadow: inset 0 0 0 1.5px var(--bv-faint) !important; }
.legend { color: var(--ec-muted); }
/* Charts: past bars grey, this one ink; the line in ink over a faint wash */
.chart stop { stop-color: var(--ec-ink); }
#lg stop { stop-opacity: .07; }
#lg stop:last-child { stop-opacity: 0; }
.chart circle { stroke: var(--ec-ink); fill: var(--s1); }
.chart circle:last-of-type { fill: var(--ec-ink); }
.chart rect[fill^="var"] { fill: var(--ec-softer); }

/* ===== Sheets: paper, the scrim from the family ===== */
.scrim { background: var(--ec-scrim); }
.sheet { background: var(--ec-bg); border-radius: var(--ec-radius) var(--ec-radius) 0 0 !important; border-top: 1px solid var(--ec-glass-edge); }
.sheet-title { font: 600 17px/1.2 var(--ec-sans); }
.sheet-foot { background: linear-gradient(color-mix(in srgb, var(--ec-bg) 0%, transparent), var(--ec-bg) 25%); }
.mode-text, .muted-line, .hint { color: var(--ec-muted); }

/* Fields: written on a rule, the rule gets thicker on focus (square, so it never bends) */
#root .field input, #root .field textarea, #root .fld {
  background: none; border: 0; border-bottom: 1.5px solid var(--ec-ink); border-radius: 0; padding: 12px 0 11px; outline: 0;
}
#root .fld { height: 46px; padding: 0; }
#root .fld.v { padding-right: 34px; }
#root .unit { right: 2px; }
#root .field input:focus, #root .field textarea:focus, #root .fld:focus { box-shadow: none; border-bottom-width: 3px; padding-bottom: 9.5px; }
#root .fld:focus { padding-bottom: 0; }
.field input::placeholder, .field textarea::placeholder, .fld::placeholder { color: var(--bv-mu2); }
.eq-card .fld { background: none; }
.search { background: none; border: 1px solid var(--ec-ink); color: var(--ec-muted); }
.search input { color: var(--ec-ink); }
.stepper-row button { background: var(--ec-bg); }

/* ===== Floating bars: glass, content in ink ===== */
.offer, .timer, .tshell.mini {
  background: var(--ec-glass); color: var(--ec-ink); border: 1px solid var(--ec-glass-edge);
  -webkit-backdrop-filter: blur(6px) saturate(180%); backdrop-filter: blur(6px) saturate(180%);
}
.offer { bottom: 92px; }
.offer .icon-btn.sm { color: var(--ec-ink); }
.offer .btn.primary { height: 40px; padding: 0 14px; }
.offer-title { font-weight: 700; }
.offer-sub, .timer-label { color: var(--ec-muted); opacity: 1; }
.timer.ready { background: var(--bv-accent); color: var(--bv-on-accent); border-color: transparent; }
.timer-btn { background: var(--ec-soft); }
.timer-btn.solid { background: var(--ec-ink); color: var(--ec-on-ink); }
.tr-bg2 { stroke: var(--ec-softer); }
.tr-fg2 { stroke: var(--ec-ink); }

/* The rest timer, full: paper, an ink ring */
.tshell { background: var(--ec-bg); }
.tshell.full { background: var(--ec-bg); }
.grab { background: var(--ec-softer); }
.t-sub { color: var(--ec-muted); }
.t-hint { color: var(--ec-muted); }
.t-ring svg { filter: none; }
.tr-bg { stroke: var(--ec-soft); }
.tr-fg { stroke: var(--ec-ink); }
.t-round { background: var(--ec-soft); }
.t-play { background: var(--ec-ink); color: var(--ec-on-ink); }
.tshell.over .t-clock { background: none; color: var(--bv-on-accent); }
/* Rest over: the whole timer turns lime, the signal to go. Ink stays ink in both themes. */
.tshell.over {
  --ec-ink: #1A1A1A; --ec-on-ink: #FFFFFF; --ec-muted: rgba(26, 26, 26, .62); --ec-soft: rgba(26, 26, 26, .08); --ec-softer: rgba(26, 26, 26, .14);
  --tx: #1A1A1A; --mu: rgba(26, 26, 26, .62); --mu2: rgba(26, 26, 26, .5); --s1: rgba(26, 26, 26, .08); --s2: rgba(26, 26, 26, .08); --s3: rgba(26, 26, 26, .14);
  background: var(--bv-accent) !important; color: #1A1A1A; border-color: transparent;
}

/* ===== Footer of Settings: the family line, version, feedback and the test seal ===== */
.bv-foot { display: flex; align-items: flex-end; gap: 12px; margin: 34px 0 4px; }
.bv-foot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bv-foot p { margin: 0; color: var(--ec-muted); font: 500 12.5px/1.5 var(--ec-sans); }
.bv-foot a { color: var(--ec-ink); text-underline-offset: 3px; }
.bv-foot .mono { font-family: var(--ec-mono); font-size: 12px; letter-spacing: .02em; }
.bv-seal-spot { position: relative; flex: none; width: 104px; height: 100px; }
.bv-seal-spot .ec-seal.is-stamp { top: 0; right: 0; }
/* The seal only lives in Settings: a phone app has no free corner for it */
.ec-seal:not(.is-stamp) { display: none; }

/* Menus that scroll sideways: the family arrows sit over grey panels */
.card .ec-arrow { --ec-arrow-bg: var(--ec-soft); }

@media (prefers-reduced-motion: reduce) {
  .sheet, .scrim, .tshell, .offer, .timer, .xc-body { transition: none !important; animation: none !important; }
}

/* ===== Account (top of Settings): the Emilio Capital account, code by email, no password ===== */
.bv-acct { display: flex; flex-direction: column; margin-bottom: 30px; }
.bv-acct > .adj-label { margin-top: 6px; }
.bv-acct .field { margin-top: 18px; }
.bv-title { font: 600 22px/1.15 var(--ec-display); color: var(--ec-ink); }
.bv-note { margin: 8px 0 0; color: var(--ec-muted); font: 400 14px/1.4 var(--ec-sans); }
.bv-note b { color: var(--ec-ink); font-weight: 600; }
.bv-go { margin-top: 22px; }
.bv-code { font-family: var(--ec-mono) !important; font-size: 20px !important; letter-spacing: .12em; }
.bv-err { margin: 12px 0 0; color: var(--ec-danger); font: 500 14px/1.35 var(--ec-sans); }
.bv-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.bv-links button { color: var(--ec-ink); font: 600 13px/1.2 var(--ec-sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.bv-links button:disabled { color: var(--ec-muted); text-decoration: none; }
.bv-card { background: var(--ec-soft); padding: 18px; display: flex; flex-direction: column; }
.bv-mail { font: 600 16px/1.25 var(--ec-sans); color: var(--ec-ink); overflow-wrap: anywhere; }
.bv-status { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 0; color: var(--ec-muted); font: 400 13.5px/1.4 var(--ec-sans); }
.bv-card .bv-go { margin-top: 16px; }
.bv-actions { display: flex; gap: 8px; margin-top: 16px; }
.bv-actions .btn { flex: 1; }
/* the sync square: ink when synced, outlined while syncing, grey offline, red when it failed, amber on the sample */
.bv-sq { flex: none; width: 9px; height: 9px; transform: translateY(1px); border: 1.5px solid var(--ec-ink); }
#root .bv-sq { border-radius: 0; }
.bv-sq.is-synced { background: var(--ec-ink); }
.bv-sq.is-offline { border-color: var(--ec-muted); }
.bv-sq.is-error { border-color: var(--ec-danger); background: var(--ec-danger); }
.bv-sq.is-sample { border-color: var(--bv-pending); background: var(--bv-pending); }

/* The test seal: lines of the same length ("Every bit / of input / counts"), never one word alone */
.ec-seal strong { text-wrap: balance; }

/* The hero, heavier (4/11/2026): title in Display SemiBold, the count in Plex Mono Medium,
   "exercises" tucked under the number, and the stamp's totals bigger and tighter */
.hero-title { font-weight: 600; letter-spacing: -.3px; }
.hero-count b { font-weight: 500; }
.hero-count i { font-weight: 400; }
.hero-count span { margin-top: 2px; }
.hero-bottom { bottom: 56px; }
.stamp-txt { gap: 1px; }
.stamp-txt div { line-height: 1; gap: 4px; }
.stamp-txt b { font-size: 21px; line-height: 1.05; }
.stamp-txt small { font-size: 13px; }

/* The test seal in Settings, a bit bigger, with "Every bit of / input counts" on two lines */
.bv-seal-spot { width: 128px; height: 124px; }
.bv-seal-spot .ec-seal.is-stamp { width: 128px; height: 124px; }
.bv-seal-spot .ec-seal-in { padding: 0 16px; gap: 4px; }
.bv-seal-spot .ec-seal small { font-size: 8.5px; }
.bv-seal-spot .ec-seal strong { font-size: 13px; line-height: 1.08; text-wrap: balance; margin: 4px 0; }
.bv-seal-spot .ec-seal em { font-size: 9px; }

/* An open exercise with one machine: the subtitle already names it, so the label over the tiles goes.
   With two or more machines, each group keeps its label. */
.xc-body:not(:has(.eq-block ~ .eq-block)) .eq-title { display: none; }

/* Today's weight lives in the Weight tile (4/11/2026): tap it and − and + open inside it.
   The old stepper under the series is gone. */
.xc-foot .wstep { display: none; }
.bv-wtile { text-align: left; width: 100%; }
.bv-pm { margin-left: 6px; color: var(--ec-ink); font-weight: 600; }
.bv-wopen { grid-column: 1 / -1; display: grid; grid-template-columns: 52px 1fr 52px; align-items: stretch; gap: 8px; padding: 8px; border: 1.5px solid var(--ec-ink); }
.bv-wbtn { display: grid; place-items: center; background: var(--ec-soft); color: var(--ec-ink); min-height: 52px; }
.bv-wmid { text-align: center; padding: 6px 0; }