/* Brocare Studio phase 4: Reliability, Budget and usage, Reports, Clients, Intelligence, Proof and wins, and brand
   brain editing. Tokens and components from tokens.css and studio.css; blues only, every state carries an icon and a
   word. No inline styles: dynamic values arrive as custom properties set through CSSOM (--w, --h, --sw). */

/* ===== Shared ===== */
.p4-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; }
.p4-grid.wide-left { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); }
.p4-grid .col { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.card.flush > .card-head.pad { padding: var(--space-5) var(--space-5) var(--space-3); margin: 0; }
.card-text.pad { padding: 0 var(--space-5) var(--space-5); }
.v-none { font: 500 var(--fs-small)/1.3 var(--font-body); color: var(--text-dim); }
.month-pick { min-width: 180px; }
span.meter { display: block; }
.stat .meter { margin-top: var(--space-2); }
.wchart-host { display: grid; gap: var(--space-3); }
small.sub { display: block; color: var(--text-dim); font-size: var(--fs-label); margin-top: 2px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-link); font-size: var(--fs-small); text-decoration: none; margin-bottom: var(--space-2); min-height: 32px; }
.back-link .flip { transform: scaleX(-1); }
.back-link:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.check-field { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--text-body); font-size: var(--fs-small); cursor: pointer; }
.check-field input { width: 20px; height: 20px; accent-color: var(--ice-400); }
.stat.dimmed .v { color: var(--text-muted); }
@media (max-width: 1099px) { .p4-grid, .p4-grid.wide-left { grid-template-columns: minmax(0, 1fr); } }

/* ===== Reliability ===== */
.fail-row .t small + small { margin-top: 0; }
.fail-end { display: grid; justify-items: end; gap: var(--space-2); }
.fail-acts { display: flex; gap: var(--space-2); }
.wbars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); align-items: end; height: 200px; padding-top: var(--space-2); }
.wbars[hidden] { display: none; }
.wbar { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; height: 100%; min-width: 0; }
.wbar .wv { color: var(--text-strong); font: 600 var(--fs-label)/1 var(--font-body); }
.wbar .wcol { display: flex; align-items: flex-end; width: min(36px, 100%); height: 100%; border-bottom: 1px solid var(--viz-axis); }
.wbar .wfill { display: block; width: 100%; height: var(--h, 0%); min-height: 0; border-radius: 4px 4px 0 0; background: var(--viz-series); }
.wbar .wk { color: var(--text-dim); font-size: var(--fs-label); white-space: nowrap; font-variant-numeric: tabular-nums; }
.legend.kinds { flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--text-muted); font-size: var(--fs-label); }
.legend.kinds b { color: var(--text-strong); font-weight: 600; }
.stop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.stop-list li { display: grid; gap: 6px; }
.stop-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.stop-top b { color: var(--text-strong); font-weight: 600; font-size: var(--fs-small); }
.stop-top .num { color: var(--text-strong); font: 700 var(--fs-h3)/1 var(--font-display); }
.stop-list small { color: var(--text-dim); font-size: var(--fs-label); overflow-wrap: anywhere; }
table.score th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); color: var(--text-muted); font-weight: 500; }
@media (max-width: 767px) {
  .wbars { height: 160px; gap: 4px; }
  .wbar .wk { font-size: 10px; }
  .fail-end { justify-items: start; }
}

/* ===== Budget ===== */
.ask-card { box-shadow: inset 0 0 0 1px var(--white-a35); }
.ask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.ask .glyph { width: 56px; height: 56px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--state-needs); color: var(--state-needs-text); }
.ask h2 { font-size: var(--fs-h2); }
.ask p { color: var(--text-body); margin-top: 4px; text-wrap: pretty; }
table.cos .use-cell { min-width: 160px; }
table.cos .use-cell .meter { display: inline-block; width: 110px; vertical-align: middle; margin-inline-end: var(--space-2); }
table.cos tr.is-current td { background: var(--surface-hover); }
.clip-big { display: grid; gap: 4px; margin-bottom: var(--space-4); }
.clip-big .v { font: 700 var(--fs-stat)/1 var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.clip-big .s { color: var(--text-dim); font-size: var(--fs-small); }
.clip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 767px) {
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask .glyph { display: none; }
  table.cos thead { display: none; }
  table.cos, table.cos tbody { display: block; width: 100%; }
  table.cos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
  table.t.cos td { border: 0; padding: 0; }
  table.cos td:nth-child(1) { grid-column: 1; }
  table.cos td:nth-child(7) { grid-column: 2; grid-row: 1; }
  table.cos td.use-cell { grid-column: 1 / -1; min-width: 0; }
  table.cos td:nth-child(3), table.cos td:nth-child(4), table.cos td:nth-child(6) { display: none; }
  table.cos td:nth-child(5)::before { content: "Cap "; color: var(--text-dim); font-size: var(--fs-label); }
  table.cos td:nth-child(5) { grid-column: 1 / -1; text-align: start; }
}

/* ===== Clients ===== */
.client-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--space-4); }
.client { display: grid; gap: var(--space-4); align-content: start; }
.client.is-current { box-shadow: inset 0 0 0 1px var(--line-accent); }
.client-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.client-name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; min-width: 0; }
.client-name h3 { font-size: var(--fs-h3); line-height: 1.3; }
.client-name small { display: block; color: var(--text-dim); font-size: var(--fs-small); }
.reasons { list-style: none; margin: 0; padding: var(--space-3); display: grid; gap: var(--space-2); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--white-a22); }
.reasons li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); color: var(--text-strong); font-size: var(--fs-small); line-height: 1.45; }
.reasons .icon { width: 16px; height: 16px; margin-top: 2px; }
.client-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.client-facts dt { color: var(--text-dim); font-size: var(--fs-label); font-weight: 600; }
.client-facts dd { margin: 2px 0 0; color: var(--text-body); font-size: var(--fs-small); line-height: 1.45; }
.client-facts dd b { color: var(--text-strong); font-weight: 600; }
.client-facts .meter { margin-top: 6px; }
.client-foot { display: flex; justify-content: flex-end; }
@media (max-width: 767px) { .client-facts { grid-template-columns: minmax(0, 1fr); } .client-head { flex-direction: column; } }

/* ===== Intelligence ===== */
.intel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.intel-card { display: grid; gap: var(--space-3); }
.intel-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.ratio { display: grid; justify-items: center; min-width: 76px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--line); }
.ratio b { color: var(--text-strong); font: 700 var(--fs-h2)/1 var(--font-display); }
.ratio small { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.ratio.hi { box-shadow: inset 0 0 0 1px var(--ice-400-a55); background: var(--state-live-tint); }
.ratio.hi b { color: var(--ice-400); }
.intel-who b { display: block; color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }
.intel-who small { color: var(--text-dim); font-size: var(--fs-small); }
.intel-text { color: var(--text-body); line-height: 1.5; text-wrap: pretty; }
.made { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.made li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); font-size: var(--fs-small); color: var(--text-strong); }
.made .icon { width: 16px; height: 16px; color: var(--ice-400); }
.intel-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); }
.fine a { overflow-wrap: anywhere; }
@media (max-width: 767px) { .intel-head { grid-template-columns: auto minmax(0, 1fr); } .intel-head > .pill { grid-column: 2; justify-self: start; } }

/* ===== Proof and wins ===== */
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
.proof-card { display: grid; gap: var(--space-3); align-content: start; }
.proof-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.proof-card h3 { font-size: var(--fs-h3); line-height: 1.3; text-wrap: balance; }
.proof-metric { color: var(--ice-400); font: 700 var(--fs-h2)/1.2 var(--font-display); }
.proof-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.sheet textarea.input { min-height: 88px; resize: vertical; line-height: 1.5; padding-block: var(--space-3); }

/* ===== Reports ===== */
.rep-end { gap: var(--space-3); }
.rep-actions { flex-wrap: wrap; align-items: center; }
.rep-switch { display: none; margin-bottom: var(--space-4); }
.rep-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: var(--space-5); align-items: start; }
.rep-side { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); max-height: calc(100dvh - var(--topbar-h) - var(--space-6)); overflow: auto; overscroll-behavior: contain; border-radius: var(--radius-xl); }
.rep-form { display: grid; gap: var(--space-4); }
.rep-form-h { font-size: var(--fs-h3); }
.rep-form textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; padding-block: var(--space-3); }
.rep-form [readonly] { opacity: .75; cursor: default; }
.test-fs { border: 0; margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--ice-400-a25); display: grid; gap: var(--space-3); }
.test-fs legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-1); color: var(--text-strong); font: 600 var(--fs-small)/1.3 var(--font-body); }
.rep-doc { display: grid; gap: var(--space-5); padding: 0 0 var(--space-6); border-radius: var(--radius-xl); background: var(--surface-card-solid); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rep-doc > section, .rep-doc > .rep-strip { margin-inline: var(--space-6); }
.rep-doc h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); padding-inline-start: var(--space-3); box-shadow: inset 3px 0 0 var(--blue-500); }
.rep-doc p { color: var(--text-body); line-height: 1.55; text-wrap: pretty; }
.rep-doc p + p { margin-top: var(--space-2); }
.rep-doc ul { margin: 0; padding-inline-start: 1.2em; color: var(--text-body); display: grid; gap: 4px; }
.rep-band { display: grid; gap: var(--space-2); padding: var(--space-6); background: var(--navy-950); box-shadow: inset 0 -3px 0 var(--ice-400); }
.rep-band img { height: 22px; width: auto; }
.rep-kicker { justify-self: end; margin-top: -30px; color: var(--sky-300); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.rep-band h2 { font-size: var(--fs-title); line-height: 1.15; text-wrap: balance; margin-top: var(--space-3); }
.rep-band p { color: var(--text-muted); font-size: var(--fs-small); }
.rep-star { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-inset); box-shadow: inset 4px 0 0 var(--royal-600); }
.rep-k { display: block; color: var(--text-dim); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 4px; }
.rep-star b { color: var(--text-strong); font-weight: 600; text-wrap: pretty; }
.rep-big { display: grid; justify-items: end; text-align: end; gap: 2px; max-width: 260px; }
.rep-big .num { font: 700 48px/1 var(--font-display); color: var(--ice-400); }
.rep-big small { color: var(--text-muted); font-size: var(--fs-small); }
.rep-strip { border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line-soft); }
.rep-top { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); counter-reset: t; }
.rep-top li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); counter-increment: t; }
.rep-top li::before { content: counter(t); grid-row: 1 / span 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--royal-600-a25); color: var(--ice-400); font: 700 var(--fs-label)/1 var(--font-display); }
.rep-top b { color: var(--text-strong); font-weight: 600; }
.rep-top small { color: var(--text-dim); font-size: var(--fs-label); }
.rep-top span { color: var(--text-body); font-size: var(--fs-small); line-height: 1.5; }
.rep-doc .meter { margin-bottom: var(--space-2); }
.rep-test { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--ice-400-a25); }
@media (max-width: 1099px) {
  .rep-switch { display: inline-flex; }
  .rep-grid { grid-template-columns: minmax(0, 1fr); }
  .rep-grid[data-show="preview"] .rep-side, .rep-grid[data-show="edit"] .rep-preview { display: none; }
  .rep-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 767px) {
  .rep-doc > section, .rep-doc > .rep-strip { margin-inline: var(--space-4); }
  .rep-band { padding: var(--space-5) var(--space-4); }
  .rep-kicker { justify-self: start; margin-top: 0; }
  .rep-star { grid-template-columns: minmax(0, 1fr); }
  .rep-big { justify-items: start; text-align: start; }
  .rep-actions { width: 100%; }
}

/* ===== Brand brain editing ===== */
.doc-sec-head .btn { margin-inline-start: auto; }
.be-sheet .be-form, .be-fields { display: grid; gap: var(--space-4); }
.be-group, .be-item { border: 0; margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--line-soft); display: grid; gap: var(--space-3); }
.be-group legend, .be-item legend { float: left; width: 100%; padding: 0; color: var(--text-strong); font: 600 var(--fs-small)/1.3 var(--font-body); }
.be-item > .btn { justify-self: start; }
.be-list { display: grid; gap: var(--space-3); }
.be-list > .btn { justify-self: start; }
.be-in { display: flex; align-items: center; gap: var(--space-2); }
.be-in .input { flex: 1; min-width: 0; }
.be-sw { flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--sw, transparent); box-shadow: inset 0 0 0 1px var(--white-a22); }
.be-diff th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; }
.be-diff del, .be-gone del { color: var(--text-dim); text-decoration-color: var(--text-dim); }
.be-diff ins, .be-added ins { color: var(--text-strong); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ice-400-a55); }
.be-lines ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 4px; font-size: var(--fs-small); }
.be-lines li { padding: 6px var(--space-3); border-radius: var(--radius-sm); background: var(--surface-inset); overflow-wrap: anywhere; }
.be-errs ul { margin: var(--space-2) 0 0; padding-inline-start: 1.2em; display: grid; gap: 4px; }
.be-errs { display: block; }
.be-errs[hidden] { display: none; }
textarea.mono-ish { font-size: var(--fs-read); line-height: 1.6; min-height: 320px; }