/* Drashta app — the practitioner's side, on the site's ground (design spec of 30.9, dark closed 30.9): the same
   tokens as drashta.css, Rubik for Hebrew and English alike, one amber for Drashta and the primary action, green
   for "in the pose". One radius for containers (18) and one for chips (8). No uppercase labels. Layout is
   written in logical properties so the Hebrew page mirrors without a second stylesheet. */
:root {
  --bg:#121816; --surface:#1B2420; --surface-2:#222D28; --ink:#ECE7DC; --muted:#9AA69E; --line:#2A3530;
  --sage:#222D28; --sage-2:#1B2420; --green:#5DA57F; --green-t:#7FBF9C; --amber:#D89E3C; --amber-ink:#1A1408;
  --studio:#121816; --studio-2:#1B2420; --studio-ink:#ECE7DC; --studio-muted:#9AA69E;
  --r:18px; --r-chip:8px; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100dvh; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; text-wrap: balance; font-weight: 500; }
p { margin: 0; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.coach { font-weight: 300; }   /* Drashta's line: light weight, the site's .says */

/* every screen is a phone-width column; on a laptop it sits centred on the same ground */
.screen { min-height: 100dvh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
.screen.wide { max-width: 720px; }
.grow { flex: 1; }

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.brand svg { width: 22px; height: 22px; }
.stepno { font-size: 13px; color: var(--muted); font-weight: 500; }
.iconbtn { width: 44px; height: 44px; border-radius: 22px; background: var(--sage); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.iconbtn svg { width: 20px; height: 20px; }
.textbtn { font-size: 14px; color: var(--muted); font-weight: 500; padding: 10px 4px; }

.lead { margin-top: 44px; display: flex; flex-direction: column; gap: 12px; }
.lead h1 { font-size: 28px; line-height: 1.15; font-weight: 500; }
.lead p { font-size: 16px; color: var(--muted); }

.cards { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { min-height: 116px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; font-size: 17px; font-weight: 500; transition: transform .12s; }
.card svg { width: 24px; height: 24px; }
.card[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.card:active { transform: scale(.98); }

.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.btn { height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 500; width: 100%; text-decoration: none; }
.btn.primary { background: var(--amber); color: var(--amber-ink); }
.btn.primary:disabled { background: var(--line); color: var(--muted); cursor: default; }
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn.quiet { height: 48px; color: var(--muted); font-weight: 500; font-size: 15px; }
.fine { text-align: center; font-size: 13px; color: var(--muted); line-height: 1.5; }
.btn svg { width: 20px; height: 20px; }

.disc { width: 72px; height: 72px; border-radius: 36px; background: var(--sage); display: flex; align-items: center; justify-content: center; }
.disc svg { width: 32px; height: 32px; }
.disc.amber { background: var(--amber); }
.centered { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.centered h1 { font-size: 28px; line-height: 1.15; font-weight: 500; }
.centered p { font-size: 16px; color: var(--muted); }
.note { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px; border-inline-start: 2px solid var(--line); background: none; border-top: 0; border-bottom: 0; border-inline-end: 0; border-radius: 0; --x: var(--line); }
.note div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--muted); }
.note svg { width: 20px; height: 20px; flex: none; color: var(--green-t); }
.steps { display: flex; flex-direction: column; gap: 14px; }
.steps div { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.steps i { width: 26px; height: 26px; border-radius: 13px; background: var(--sage); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; font-weight: 500; flex: none; }
.steps b { font-weight: 500; }

/* sign in */
.form { display: flex; gap: 8px; }
.form input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.form button { height: 52px; padding: 0 16px; border-radius: 14px; background: var(--sage); font-weight: 500; }
.status { min-height: 22px; font-size: 14px; color: var(--muted); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* library */
.lib-head { display: flex; align-items: center; justify-content: space-between; }
.lib-head h1 { font-size: 26px; font-weight: 500; }
.chips { margin-top: 18px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 36px; padding: 0 14px; border-radius: var(--r-chip); background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 500; white-space: nowrap; flex: none; }
.chip[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.continue { margin-top: 22px; position: relative; height: 168px; border-radius: var(--r); overflow: hidden; background: var(--studio-2); color: var(--studio-ink); display: block; width: 100%; text-align: start; }
.continue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.continue::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,27,0.05) 30%, rgba(20,32,27,0.82) 100%); }
.continue .body { position: absolute; inset-inline: 16px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; z-index: 1; }
.continue .k { font-size: 12px; color: #C9D2CB; font-weight: 500; }
.continue .t { font-size: 19px; font-weight: 500; line-height: 1.2; }
.continue .s { font-size: 13px; color: #C9D2CB; }
.continue .bar { margin-top: 6px; width: 200px; max-width: 100%; height: 4px; border-radius: 2px; background: rgba(236,231,220,0.25); overflow: hidden; }
.continue .bar i { display: block; height: 100%; background: var(--studio-ink); }
.continue .play { width: 48px; height: 48px; border-radius: 24px; background: var(--studio-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.continue .play svg { width: 18px; height: 18px; fill: var(--studio); }
.sect { margin-top: 20px; font-size: 16px; font-weight: 500; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: start; }
.row:last-child { border-bottom: 0; }
.thumb { width: 112px; height: 72px; border-radius: var(--r-chip); overflow: hidden; flex: none; position: relative; background: var(--studio-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .dur { position: absolute; inset-inline-end: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(20,32,27,0.75); color: var(--studio-ink); font-size: 11px; font-weight: 500; }
.row .t { font-size: 16px; font-weight: 500; line-height: 1.25; }
.row .s { font-size: 13px; color: var(--muted); margin-top: 4px; }
.empty { margin-top: 22px; padding: 22px; border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.empty h3 { font-size: 18px; font-weight: 500; }
.empty p { color: var(--muted); font-size: 15px; }
.tabs { position: sticky; bottom: 0; margin: 24px -24px calc(-1 * max(24px, env(safe-area-inset-bottom))); padding: 12px 8px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); display: flex; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 500; text-decoration: none; padding: 2px 0; }
.tab[aria-current="page"] { color: var(--amber); }
.tab svg { width: 22px; height: 22px; }

/* teacher page */
.hero { position: relative; height: 320px; background: var(--studio-2); margin: calc(-1 * max(24px, env(safe-area-inset-top))) -24px 0; flex: none; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,27,0.35) 0%, rgba(20,32,27,0) 30%, rgba(20,32,27,0.9) 100%); }
.hero .back { position: absolute; inset-inline-start: 24px; top: max(24px, env(safe-area-inset-top)); z-index: 1; background: rgba(20,32,27,0.55); color: var(--studio-ink); }
.hero .name { position: absolute; inset-inline: 24px; bottom: 18px; z-index: 1; color: var(--studio-ink); display: flex; flex-direction: column; gap: 4px; }
.hero .name b { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.hero .name span { font-size: 14px; color: #C9D2CB; }
.tbody { padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.tbody .bio { font-size: 15px; color: var(--muted); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { height: 28px; padding: 0 10px; border-radius: var(--r-chip); background: var(--sage); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.price span { font-size: 13px; color: var(--muted); }
.bio { text-align: start; }

/* camera setup */
.setup { max-width: none; padding: 0; background: var(--studio); color: var(--studio-ink); position: relative; overflow: hidden; }
.setup .stage { position: absolute; inset: 0; background: linear-gradient(180deg, #1B2A24 0%, #223229 55%, #2A3A31 100%); }
.setup video, .setup canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.setup .outline { position: absolute; left: 50%; top: calc(max(20px, env(safe-area-inset-top)) + 104px); height: var(--outline-h, 50%); transform: translateX(-50%); opacity: .55; pointer-events: none; }
.setup .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(20,32,27,0) 0%, rgba(20,32,27,0.55) 40%, rgba(20,32,27,0.94) 100%); pointer-events: none; }
.setup .top { position: absolute; left: 24px; right: 24px; top: max(20px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; z-index: 4; }
.setup .top .iconbtn { background: rgba(236,231,220,0.12); color: var(--studio-ink); }
.setup .top span:not(:empty) { font-size: 14px; color: var(--studio-ink); font-weight: 500; padding: 7px 14px; border-radius: 999px; background: rgba(20,32,27,0.62); }
.hint { position: absolute; left: 50%; top: calc(max(20px, env(safe-area-inset-top)) + 56px); transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); min-height: 40px; padding: 8px 16px; border-radius: 12px; background: var(--amber); color: var(--amber-ink); color: #1F2D27; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; z-index: 2; }   /* a second line rather than an ellipsis: the person reading it is three steps away */
.hint.calm { background: rgba(236,231,220,0.14); color: var(--studio-ink); }
.hint svg { width: 14px; height: 14px; flex: none; }
.setup .bottom { position: absolute; left: 24px; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; z-index: 4; }
.setup .bottom h2 { font-size: 20px; font-weight: 500; line-height: 1.2; }
.setup .bottom p { font-size: 13.5px; color: rgba(236,231,220,0.78); line-height: 1.4; margin-top: 4px; }
/* the three framing checks as chips in one row: the video stays the screen */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 6px 11px 6px 9px; border-radius: 999px; border: 1px solid rgba(236,231,220,0.3); background: rgba(20,32,27,0.5); }
.check[data-ok="true"] { border-color: var(--green); }
.check i { width: 16px; height: 16px; border-radius: 8px; border: 1.5px solid var(--amber); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.check[data-ok="true"] i { background: var(--green); border-color: var(--green); }
.check svg { width: 9px; height: 9px; display: none; }
.check[data-ok="true"] svg { display: block; }
.setup .btn.primary { background: rgba(236,231,220,0.14); color: var(--studio-muted); }
.setup .btn.primary.on { background: var(--amber); color: var(--amber-ink); }
@media (min-width: 700px) { .setup .bottom { max-width: 480px; left: 50%; transform: translateX(-50%); } }

/* debug trace, phones have no console */
#dbglog { position: fixed; left: 8px; bottom: 8px; max-width: 46vw; max-height: 40vh; overflow: hidden; background: rgba(0,0,0,.8); color: #9f9; font: 11px/1.3 ui-monospace, monospace; padding: 8px; white-space: pre-wrap; z-index: 99; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* level, health, check-in */
.cards.one { grid-template-columns: 1fr; }
.cards.one .card { min-height: 0; gap: 4px; }
.cards.one .card b { font-size: 17px; font-weight: 500; }
.cards.one .card span { font-size: 14px; font-weight: 400; color: var(--muted); }
.cards.one .card[aria-pressed="true"] span { color: rgba(26,20,8,0.75); }
.row2 { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.field select { height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; padding: 0 12px; }
.regions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.region { height: 40px; padding: 0 14px; border-radius: var(--r-chip); background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.region[data-status="old"], .region[data-status="mild"], .region[aria-pressed="true"] { background: rgba(93,165,127,0.22); border-color: var(--green); color: var(--green-t); }   /* sage on surface was a whisper; a tap has to show */
.region[data-status="current"], .region[data-status="strong"] { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.legend { margin-top: 10px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.legend i.old { background: rgba(93,165,127,0.22); border-color: var(--green); } .legend i.cur { background: var(--amber); border-color: var(--amber); }
.ta { margin-top: 12px; width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; padding: 10px 12px; resize: vertical; }
.consent { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--muted); padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--amber); }
.energy { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.energy button { height: 52px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 18px; font-weight: 500; }
.energy button[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }

/* ---- mat calibration ---- */
/* Above the picture so the corners can be grabbed, below the panel so the buttons still work. The first
   version left it at the stage's own level, underneath a panel tall enough to cover the lower half of the
   screen — which hid the mat and swallowed every drag at once. */
.setup #cal-quad { touch-action: none; z-index: 3; }
/* Once the frame is frozen the explaining is done; the panel shrinks to a line and two buttons so the
   photo underneath it is actually visible. */
.setup.tight .bottom { gap: 12px; }
.setup.tight .bottom h2 { font-size: 18px; }
#setup-recal.warn, #cal-note.warn { color: var(--amber); }
#setup-recal.warn { font-weight: 500; }
.note { font-size: 13.5px; line-height: 1.5; color: rgba(236,231,220,0.72); margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }

/* the Hebrew page mirrors: the back arrow points the way back, the form keeps its reading order */
[dir="rtl"] .iconbtn svg:has(use[href="#i-back"]) { transform: scaleX(-1); }
[dir="rtl"] .setup video, [dir="rtl"] .setup canvas { transform: scaleX(-1); }   /* the mirror is a mirror in both languages */
.lang { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; min-width: 44px; }

/* ---------- S3 practice, K1 meter (20.10) ---------- */
.practice .top .clock { font-size: 15px; color: var(--studio-ink); font-weight: 500; min-width: 44px; text-align: end; }
.practice .top span#pr-title, .practice .top span#mt-title { flex: 0 1 auto; max-width: 60%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: rgba(20,32,27,0.62); color: var(--studio-ink); font-size: 15px; }
.practice .band { position: absolute; left: 50%; top: calc(max(20px, env(safe-area-inset-top)) + 64px); transform: translateX(-50%); max-width: calc(100% - 48px); padding: 10px 18px; border-radius: 14px; background: var(--amber); color: #1F2D27; font-size: 18px; line-height: 1.35; text-align: center; z-index: 3; }
.practice .bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.now { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(236,231,220,0.10); border: 1px solid rgba(236,231,220,0.14); color: var(--studio-ink); }
.now b { font-size: 20px; font-weight: 500; line-height: 1.2; }
.now span { font-size: 14px; color: var(--studio-muted); }
.now.line { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; background: none; border: 0; }
.now.line b { font-size: 18px; }
.now.line span { font-size: 13px; color: rgba(236,231,220,0.75); }
.now.line[data-kind="in"] b { color: var(--green-t); }
.now.line[data-kind="lost"] b, .now.line[data-kind="wait"] b { color: var(--amber); }
.track { height: 3px; border-radius: 2px; background: rgba(236,231,220,0.2); overflow: hidden; margin: -6px 14px 0; }
.track i { display: block; height: 100%; width: 0; background: var(--green-t); transition: width .3s linear; }
.ctl { display: flex; gap: 8px; align-items: center; }
.ctl .num { min-width: 46px; text-align: center; font-size: 13px; color: var(--studio-muted); }
.ctlbtn { flex: 1; height: 40px; border-radius: 10px; background: rgba(236,231,220,0.1); border: 1px solid rgba(236,231,220,0.14); color: var(--studio-ink); font-size: 13.5px; font-weight: 500; }
.ctlbtn.end { flex: 1.3; }
/* the test bench: every line of the dossier, its value, its threshold, whether it holds */
.lines { font-size: 12.5px; max-height: 32vh; overflow-y: auto; border-top: 1px solid rgba(236,231,220,0.14); }
.lines div { display: grid; grid-template-columns: 1fr 52px 58px 14px; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(236,231,220,0.08); font-variant-numeric: tabular-nums; }
.lines div span:nth-child(n+2) { direction: ltr; text-align: end; color: var(--studio-muted); }
.lines div.bad { color: #F0B98B; } .lines div.bad span { color: #F0B98B; }
.lines div.hd { color: var(--studio-muted); font-size: 11px; border-bottom: 0; }
.now[data-kind="in"] { border-color: rgba(122,182,154,0.7); background: rgba(122,182,154,0.16); }
.now[data-kind="lost"], .now[data-kind="wait"] { border-color: rgba(216,158,60,0.6); }
.now[data-kind="teacher"], .now[data-kind="between"] { opacity: .85; }
.nudge { display: flex; align-items: center; gap: 10px; }
.nudge .btn { height: 44px; flex: 1; }
.nudge .num { min-width: 52px; text-align: center; color: var(--studio-muted); }
.meter-row { display: flex; align-items: center; gap: 12px; }
.meter-row .meter { flex: 1; }
.meter-row .num { min-width: 44px; text-align: end; font-size: 15px; color: var(--studio-ink); }
.nudge span { text-align: center; color: var(--studio-muted); font-size: 14px; }
.meter { height: 14px; border-radius: 7px; background: rgba(236,231,220,0.14); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), #7AB69A); transition: width .25s ease-out; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.tile { background: var(--surface); border-radius: var(--r); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.tile b { font-size: 26px; font-weight: 500; line-height: 1; }
.tile span { font-size: 13px; color: var(--muted); }
.res-list .res-row { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.res-h { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.res-h .num { color: var(--muted); font-size: 13px; min-width: 44px; }
.res-h .muted { margin-inline-start: auto; font-size: 13px; }
.res-ev { font-size: 15px; padding: 4px 12px; border-inline-start: 2px solid var(--amber); }
.chart { position: relative; --plot: 0.82; margin-bottom: 18px; }
.chart .aim { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(236,231,220,0.35); pointer-events: none; }
.chart .aim span { position: absolute; inset-inline-end: 0; top: -18px; font-size: 11px; color: var(--muted); }
.bars { display: flex; gap: 6px; align-items: flex-end; height: 120px; padding: 8px 0 0; border-bottom: 1px solid var(--line); }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bar-col i { display: block; width: 100%; max-width: 28px; border-radius: 6px 6px 0 0; background: var(--amber); min-height: 2px; position: relative; }
.bar-col i[data-n]:not([data-n="0"])::after { content: attr(data-n); position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--ink); }
.bar-col i[data-n="0"] { background: var(--line); }
.bar-col span { font-size: 11px; color: var(--muted); height: 14px; white-space: nowrap; }
.res-lead { font-size: 18px; line-height: 1.4; margin: 6px 0 12px; }
.res-open { margin-top: 12px; }
a.row, a.textbtn, .lib-head a.textbtn { color: inherit; text-decoration: none; }
a.row .t { color: var(--ink); } a.row .s { color: var(--muted); }