/* Vazir v16.1.0 (Saber Rastikerdar) — bundled locally, license: fonts/VAZIR-LICENSE.txt. No external font requests. */
@font-face { font-family: "Vazir"; src: url("/fonts/Vazir.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazir"; src: url("/fonts/Vazir-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --bg: #f4f2ed; --surface: #ffffff; --surface-2: #f8f7f3; --ink: #1d2327; --ink-2: #4b5560; --ink-3: #737d87;
  --line: #e2ded5; --accent: #1f4e5f; --accent-ink: #ffffff; --focus: #2b7a99;
  --ok: #2e6b45; --ok-bg: #e5f1e8; --warn: #8a5a00; --warn-bg: #fbf0d9; --bad: #9b2c2c; --bad-bg: #f8e3e1;
  --info: #24527a; --info-bg: #e3edf6; --mute-bg: #eceae4; --prod: #3b3a8f; --prod-bg: #e7e6f7;
  --radius: 10px; --shadow: 0 1px 2px rgba(20,25,30,.06), 0 2px 8px rgba(20,25,30,.04);
  --font: "Vazir", "Vazirmatn", "Segoe UI", Tahoma, "DejaVu Sans", "Noto Sans Arabic", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15191c; --surface: #1d2226; --surface-2: #232a2f; --ink: #e9ecee; --ink-2: #b9c1c8; --ink-3: #8c969f;
    --line: #2f373d; --accent: #5fa8c2; --accent-ink: #0d1417; --focus: #7cc3dd;
    --ok: #8fd0a4; --ok-bg: #1f3428; --warn: #f0c56b; --warn-bg: #3a2f17; --bad: #f1a29b; --bad-bg: #3d2220;
    --info: #9cc4e8; --info-bg: #1d2c3b; --mute-bg: #2a3136; --prod: #b9b6f5; --prod-bg: #2a2950;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.7; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.boot { padding: 2rem; text-align: center; color: var(--ink-3); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 48px; }
.topbar { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; cursor: pointer; background: none; border: 0; padding: 0; }
.brand img { width: 26px; height: 26px; }
.spacer { flex: 1; }
.who { color: var(--ink-3); font-size: .85rem; }
.btn { border: 1px solid var(--line); background: var(--surface); padding: 6px 14px; border-radius: 8px; cursor: pointer; min-height: 38px; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.small { padding: 2px 10px; min-height: 30px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
h1 { font-size: 1.35rem; margin: 20px 0 6px; }
h2 { font-size: 1.1rem; margin: 22px 0 10px; }
h3 { font-size: 1rem; margin: 14px 0 6px; }
.muted { color: var(--ink-3); }
.small { font-size: .85rem; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.card h3 { margin-top: 0; }
.card.click { cursor: pointer; }
.card.click:hover { border-color: var(--accent); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .9rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 10px; font-size: .8rem; border: 1px solid transparent; white-space: nowrap; background: var(--mute-bg); color: var(--ink-2); }
button.chip { cursor: pointer; }
button.chip:hover { border-color: currentColor; }
.s-planned { background: var(--mute-bg); color: var(--ink-2); }
.s-in_progress { background: var(--info-bg); color: var(--info); }
.s-delivered_candidate, .s-awaiting_review { background: var(--warn-bg); color: var(--warn); }
.s-changes_requested, .s-blocked { background: var(--bad-bg); color: var(--bad); }
.s-accepted, .s-deployed_staging { background: var(--ok-bg); color: var(--ok); }
.s-deployed_production { background: var(--prod-bg); color: var(--prod); }
.chip.nr { background: transparent; border: 1px dashed var(--warn); color: var(--warn); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.banner { border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; border: 1px solid var(--line); background: var(--surface-2); font-size: .9rem; }
.banner.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.banner.bad { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.banner.info { background: var(--info-bg); border-color: transparent; color: var(--info); }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 12px 0 14px; scrollbar-width: thin; }
.tabs button { background: none; border: 0; padding: 8px 12px; cursor: pointer; white-space: nowrap; color: var(--ink-2); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat .n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--ink-3); font-size: .85rem; }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.item .t { font-weight: 600; overflow-wrap: anywhere; }
.item .meta { color: var(--ink-3); font-size: .82rem; display: flex; gap: 10px; flex-wrap: wrap; }
.mono { font-family: ui-monospace, "DejaVu Sans Mono", Consolas, monospace; font-size: .82rem; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.filters { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 12px; }
label.f { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--ink-3); }
input, select, textarea { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; min-height: 38px; width: 100%; }
textarea { min-height: 80px; }
form.stack { display: flex; flex-direction: column; gap: 10px; }
.login { max-width: 380px; margin: 10vh auto; }
.drawer-back { position: fixed; inset: 0; background: rgba(10,14,18,.45); z-index: 20; display: flex; justify-content: flex-start; }
.drawer { background: var(--bg); width: min(640px, 100%); height: 100%; overflow-y: auto; padding: 0 16px 40px; box-shadow: -4px 0 24px rgba(0,0,0,.2); }
.drawer header { position: sticky; top: 0; background: var(--bg); padding: 12px 0; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); z-index: 1; }
.chain { display: flex; flex-direction: column; gap: 0; border-inline-start: 2px solid var(--line); padding-inline-start: 12px; margin: 8px 0; }
.chain > div { position: relative; padding: 4px 0; font-size: .9rem; }
.chain > div::before { content: ""; position: absolute; inset-inline-start: -18px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.chain > div.on::before { background: var(--ok); }
.chain > div.claim::before { background: var(--warn); }
.chain b { color: var(--ink-3); font-weight: 500; margin-inline-end: 6px; }
.phase { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }
.phase .code { font-weight: 700; color: var(--accent); direction: ltr; text-align: start; }
.bar { height: 6px; background: var(--mute-bg); border-radius: 4px; overflow: hidden; display: flex; }
.bar span { display: block; height: 100%; }
.toast { position: fixed; bottom: 16px; inset-inline: 16px; margin: 0 auto; max-width: 520px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; z-index: 40; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.dot.on { background: var(--ok); }
table.simple { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.simple th, table.simple td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.scroll-x { overflow-x: auto; }
.empty { padding: 18px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--radius); }
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .grid { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; gap: 2px; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 4px; }
}
/* Long unbroken tokens (paths, package names, hashes) must never widen the page on mobile. */
main, .drawer { overflow-wrap: anywhere; }
.drawer header strong { min-width: 0; }
/* Phones: tables become stacked label/value cards instead of letter-wrapped columns. */
table.simple td, table.simple th { overflow-wrap: normal; word-break: normal; }
@media (max-width: 560px) {
  table.simple thead { display: none; }
  table.simple, table.simple tbody, table.simple tr, table.simple td { display: block; width: 100%; }
  table.simple tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 8px; }
  table.simple td { border: 0; padding: 2px 0; display: flex; gap: 10px; justify-content: space-between; overflow-wrap: anywhere; }
  table.simple td::before { content: attr(data-label); color: var(--ink-3); flex: 0 0 auto; font-size: .82rem; }
  table.simple td:first-child { font-weight: 600; display: block; }
  table.simple td:first-child::before { content: none; }
}

/* ====================== Round 4: management dashboard ====================== */
:root { --okc: #4f8a62; --shadow-2: 0 1px 2px rgba(20,25,30,.05), 0 6px 18px rgba(20,25,30,.06); --r2: 14px; }
@media (prefers-color-scheme: dark) { :root { --okc: #7fb894; --shadow-2: 0 1px 2px rgba(0,0,0,.3); } }
.wrap { max-width: 1320px; }
.ico { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.ico.big { width: 40px; height: 40px; color: var(--ink-3); }
.t-ok { color: var(--ok); } .t-okc { color: var(--okc); } .t-warn { color: var(--warn); } .t-bad { color: var(--bad); }
.t-info { color: var(--info); } .t-prod { color: var(--prod); } .t-mute { color: var(--ink-3); } .t-accent { color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 10px; font-size: .8rem; background: var(--mute-bg); white-space: nowrap; }
.pill.t-ok { background: var(--ok-bg); } .pill.t-warn { background: var(--warn-bg); } .pill.t-bad { background: var(--bad-bg); }
.pill.t-info { background: var(--info-bg); } .pill.t-prod { background: var(--prod-bg); }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: .82rem; padding: 2px 4px; }
.link:hover { text-decoration: underline; }
button.chip .ico { width: 13px; height: 13px; }

/* header */
.dash-head { display: grid; gap: 8px; padding: 14px 0 10px; }
.dh-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proj-switch { width: auto; min-width: 0; max-width: 100%; font-size: 1.2rem; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 2px 6px; border-radius: 10px; cursor: pointer; }
.proj-switch:hover, .proj-switch:focus { border-color: var(--line); background: var(--surface); }
.dh-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--ink-3); }
.meta-i { display: inline-flex; align-items: center; gap: 5px; }
.meta-i.flash { color: var(--ok); font-weight: 600; }
.dh-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.tool { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 3px 11px; font-size: .8rem; cursor: pointer; min-height: 30px; }
.tool:hover { border-color: var(--accent); color: var(--accent); }

/* grid */
.dash { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; padding-bottom: 12px; }
.dcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px 16px; box-shadow: var(--shadow-2); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dcard > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dcard > header h2 { font-size: .95rem; margin: 0; color: var(--ink-2); font-weight: 600; }
/* explicit areas: no holes regardless of card heights */
.dash { grid-template-areas:
  "pct pct pct pct stat stat stat stat stat env env env"
  "sec sec sec sec sec sec sec road road road road road"
  "sec sec sec sec sec sec sec next next next next next"
  "blk blk blk blk dec dec dec dec trd trd trd trd"; align-items: start; }
.c-pct { grid-area: pct; } .c-status { grid-area: stat; } .c-env { grid-area: env; } .c-sec { grid-area: sec; } .c-road { grid-area: road; }
.c-next { grid-area: next; } .c-block { grid-area: blk; } .c-dec { grid-area: dec; } .c-trend { grid-area: trd; }
.c-pct, .c-status, .c-env { align-self: stretch; }
@media (max-width: 1100px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pct stat" "env road" "next blk" "dec trd" "sec sec"; } }
/* phone: same priority — percent, status, environments, next actions, blockers, decisions, sections, roadmap, trend */
@media (max-width: 720px) {
  .dash { grid-template-columns: minmax(0, 1fr); gap: 10px; grid-template-areas: "pct" "stat" "env" "next" "blk" "dec" "sec" "road" "trd"; }
  .dh-tools:not(.open) .tool:not(.tools-more):nth-child(n+5) { display: none; }
  .ring-m { width: 96px !important; height: 96px !important; }
}
.tools-more { display: none; }
@media (max-width: 720px) { .tools-more { display: inline-flex; } }
.proposal { white-space: normal; } .proposal .tag { white-space: nowrap; }

/* percent */
.pct-body { display: flex; align-items: center; gap: 16px; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; color: inherit; width: 100%; }
div.pct-body { cursor: default; }
.ring { position: relative; flex: 0 0 auto; }
.ring svg { display: block; }
.ring-track { fill: none; stroke: var(--mute-bg); }
.ring-track.none { stroke-dasharray: 4 6; stroke: var(--line); }
.ring-val { fill: none; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.ring-val.t-accent { stroke: var(--accent); } .ring-val.dashed { stroke-dasharray: 3 5; }
.ring-center { position: absolute; inset: 0; display: grid; place-items: center; }
.ring-num { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pcard .ring-num { font-size: 1.05rem; }
.pct-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pct-cap { font-size: .86rem; color: var(--ink-2); font-weight: 600; }
.pct-split { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: .82rem; }
.pct-split dt { color: var(--ink-3); } .pct-split dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.proposal { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--warn); background: transparent; color: var(--warn); border-radius: 10px; padding: 4px 10px; font-size: .8rem; cursor: pointer; text-align: start; }
.proposal .tag { background: var(--warn-bg); border-radius: 6px; padding: 0 6px; font-weight: 600; }
.btn .ico { margin-inline-end: 4px; }

/* status tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat-tile { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i n" "l l" "s s"; align-items: center; gap: 2px 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: start; color: inherit; min-width: 0; }
.stat-tile:hover { border-color: currentColor; }
.st-ico { grid-area: i; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface); }
.stat-tile.t-info .st-ico { background: var(--info-bg); } .stat-tile.t-warn .st-ico { background: var(--warn-bg); } .stat-tile.t-bad .st-ico { background: var(--bad-bg); } .stat-tile.t-ok .st-ico { background: var(--ok-bg); }
.st-n { grid-area: n; font-size: 1.45rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: end; }
.st-l { grid-area: l; font-size: .8rem; color: var(--ink-2); }
.st-sub { grid-area: s; font-size: .72rem; color: var(--ink-3); }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* environments */
.envs { display: grid; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: start; }
.env { display: flex; gap: 10px; align-items: center; }
.env.t-ok .st-ico { background: var(--ok-bg); } .env.t-prod .st-ico { background: var(--prod-bg); }
.env-n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.env-l { font-size: .8rem; color: var(--ink-2); }

/* section bars */
.bars { display: flex; flex-direction: column; gap: 4px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(70px, 2fr) 3.4em 6.6em; align-items: center; gap: 8px; padding: 4px 6px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: inherit; text-align: start; font-size: .82rem; }
.bar-row:hover { background: var(--surface-2); }
.br-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.br-track { display: flex; height: 10px; border-radius: 6px; background: var(--mute-bg); overflow: hidden; }
.br-acc { background: var(--accent); } .br-del { background: repeating-linear-gradient(-45deg, var(--info) 0 2px, var(--info-bg) 2px 5px); opacity: .75; }
.br-none { font-size: .72rem; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 6px; padding: 0 6px; text-align: center; }
.br-v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.br-w { font-size: .72rem; color: var(--ink-3); text-align: end; white-space: nowrap; }
.br-w.prop { color: var(--warn); }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg-acc { background: var(--accent); } .lg-del { background: repeating-linear-gradient(-45deg, var(--info), var(--info) 2px, transparent 2px, transparent 4px); } .lg-prod { background: var(--prod); }
@media (max-width: 720px) { .bar-row { grid-template-columns: minmax(0, 1fr) auto 3em; grid-template-areas: "l w v" "t t t"; row-gap: 3px; padding: 3px 4px; } .br-l { grid-area: l; } .br-v { grid-area: v; } .br-track, .br-none { grid-area: t; } .br-w { grid-area: w; } }

/* roadmap */
.road-sum { display: flex; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.road { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.step { display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; padding: 3px 8px; font-size: .76rem; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: inherit; direction: ltr; }
.step.t-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.step.t-okc { border: 1px dashed var(--okc); color: var(--okc); background: transparent; }
.step.t-info { background: var(--info-bg); border-color: var(--info); color: var(--info); font-weight: 600; }
.step.t-bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); font-weight: 600; }
.step.t-mute { color: var(--ink-3); }
.step-code { font-variant-numeric: tabular-nums; }

/* mini lists */
.minis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mini { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2); text-align: start; cursor: pointer; color: inherit; }
.mini:hover { border-color: var(--line); }
.mi-ico { display: grid; place-items: center; margin-top: 2px; }
.mi-body { display: flex; flex-direction: column; min-width: 0; }
.mi-t { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-m { font-size: .72rem; color: var(--ink-3); direction: ltr; text-align: end; unicode-bidi: plaintext; }
.empty.small { padding: 10px; font-size: .82rem; display: flex; gap: 6px; align-items: center; justify-content: center; }
.empty.ok { color: var(--ok); border-style: solid; border-color: var(--ok-bg); }
.empty-state { text-align: center; padding: 36px 16px; display: grid; justify-items: center; gap: 8px; }

/* trend */
.trend { width: 100%; height: 130px; }
.trend .grid-l { stroke: var(--line); stroke-width: 1; }
.tl-acc { stroke: var(--accent); stroke-width: 2.5; } .tl-prod { stroke: var(--prod); stroke-width: 2; stroke-dasharray: 5 4; }
.tl-dot { fill: var(--accent); }
.trend-x { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-3); }

/* portfolio cards */
.pcard { display: flex; flex-direction: column; gap: 10px; }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-head h3 { margin: 0; }
.pc-body { display: flex; align-items: center; gap: 14px; }
.pc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; font-size: .8rem; flex: 1; }
.pc-stats div { display: flex; flex-direction: column; } .pc-stats b { font-size: 1.1rem; font-variant-numeric: tabular-nums; } .pc-stats span { color: var(--ink-3); }
.pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-3); }

/* weights panel / formula */
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em; align-items: center; gap: 10px; font-size: .86rem; }
.split4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.drawer .upd-slot:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .ring-val { transition: none; } }

/* numbers with % keep the same visual order everywhere (isolated LTR run) */
.num, .ring-num, .pct-split dd, .br-v, .split4 .n { direction: ltr; unicode-bidi: isolate; }