/* Customer console: additions to the shared design system (style.css). */
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; }
.who b { font: 600 var(--fs-emph) var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { font-size: var(--fs-micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-sub { font-size: var(--fs-micro); color: var(--ink-3); }
.hero-sub.bad { color: var(--crit-ink); } .hero-sub.ok { color: var(--good-ink); }
.chart { width: 100%; height: 80px; display: block; background: var(--surface-2); border-radius: 4px; }
.chart.short { height: 46px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-3); align-items: center; }
.steps li i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2); display: block; }
.steps li.done { color: var(--ink-2); } .steps li.done i { background: var(--s3); border-color: var(--s3); }
.steps li.now { color: var(--ink); } .steps li.now i { border-color: var(--s1); background: rgba(57,135,229,.35); }
.steps li span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps li .st { font: var(--fs-micro) var(--mono); color: var(--ink-3); }

/* control drawer */
.tabs-title { font: 600 var(--fs-micro) var(--sans); letter-spacing: .1em; color: var(--ink); padding: 8px 8px 7px; border-bottom: 2px solid var(--s1); white-space: nowrap; }
.ctl { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding-top: 10px; align-items: start; }
.ctl-req { display: grid; gap: 5px; min-width: 0; }
.ctl-req select { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font: var(--fs-small) var(--sans); width: 100%; }
.tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tasks .btn { height: 26px; padding: 0 4px; letter-spacing: .04em; border-color: rgba(57,135,229,.7); color: var(--ink); min-width: 0; overflow: hidden; }
.tasks .btn:hover { background: rgba(57,135,229,.18); }
.tasks .btn.danger { grid-column: 1 / -1; border-color: rgba(208,59,59,.8); color: var(--crit-ink); }
.tasks .btn:disabled { opacity: .4; cursor: default; }
.verdict { background: var(--surface-2); border-left: 3px solid var(--line-2); border-radius: 4px; padding: 8px 10px; min-width: 0; min-height: 112px; }
.verdict.EXECUTE { border-left-color: var(--good); } .verdict.EXECUTE .dec-final { color: var(--good-ink); }
.verdict.BLOCKED, .verdict.ERROR { border-left-color: var(--crit); } .verdict.BLOCKED .dec-final, .verdict.ERROR .dec-final { color: var(--crit-ink); }
.verdict.ESCALATED, .verdict.HELD { border-left-color: var(--warn); } .verdict.ESCALATED .dec-final, .verdict.HELD .dec-final { color: var(--warn-ink); }
.verdict .dec-final { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verdict .dec-t { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verdict .dec-why { margin-top: 5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v-ack { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: var(--fs-micro); color: var(--warn-ink); white-space: nowrap; overflow: hidden; }
.v-ack .btn { height: 24px; border-color: var(--warn); color: var(--ink); }
.armlive { min-width: 0; }
.al-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); margin-bottom: 6px; white-space: nowrap; overflow: hidden; }
.armlive .meter { margin-bottom: 4px; }
.armlive .meter i { transition: none; }
.al-log { font-size: var(--fs-micro); color: var(--ink-3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* right column */
#panel-right { flex: 1; }
.vials { width: 100%; height: 132px; display: block; background: var(--surface-2); border-radius: 4px; }
.img-note { font-size: var(--fs-micro); color: var(--ink-3); margin-top: 4px; }
.deliveries, .audit { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.deliveries li, .audit li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.deliveries .ft, .audit .ft, .return .ft { font: var(--fs-micro) var(--mono); color: var(--ink-3); padding-top: 2px; }
.audit .chip { margin-right: 6px; padding: 3px 5px; }
.audit .fcmd { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.audit .why { display: block; color: var(--ink-3); margin-top: 2px; }
.audit { margin-top: 8px; }
.note { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 8px; line-height: 1.4; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: j; }
.journey li { counter-increment: j; background: var(--surface-2); border-radius: 4px; padding: 6px 2px; text-align: center; font-size: 9px; letter-spacing: .04em; color: var(--ink-3); border-top: 2px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey li::before { content: counter(j); display: block; font: 600 13px var(--mono); margin-bottom: 2px; }
.journey li.done { color: var(--ink-2); border-top-color: var(--s3); }
.journey li.now { color: var(--ink); border-top-color: var(--s1); background: rgba(57,135,229,.14); }
.return div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; font-size: var(--fs-small); padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.return div.done { color: var(--ink); }

@media (max-width: 1500px) { .ctl { grid-template-columns: 216px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } }
@media (max-width: 1320px) { .who span { display: none; } #panel-sample .panel-h .h-sub { display: none; } .ctl { grid-template-columns: 200px minmax(0, 1fr); } .armlive { grid-column: 1 / -1; display: none; } }
@media (max-width: 1100px) { .ctl { grid-template-columns: 1fr; } .armlive { display: block; } .who { display: none; } }
@media (max-height: 800px) { .chart { height: 66px; } .chart.short { height: 40px; } .vials { height: 112px; } }

/* RadSenRegen: groups table, wells, environment, after-the-flight plan */
.gnd { color: var(--ink-3); }
.gtbl td { padding: 3px 6px 3px 0; vertical-align: top; }
.gtbl td:first-child { color: var(--ink); font-weight: 500; }
.gtbl td.num b { display: block; font: 500 var(--fs-small) var(--mono); color: var(--ink); }
.gtbl td.num small { display: block; font: 9px var(--mono); color: var(--ink-3); margin-top: 1px; }
.gtbl th.num, .gtbl td.num { text-align: right; }
.gtbl .sw { margin-right: 5px; }
#chart-ros { height: 92px; }
#chart-rate { height: 86px; }
.vials { height: 118px; }
#well-legend { margin-top: 6px; }
#well-legend span:first-child { color: var(--ink-3); }
.kv.env { margin-top: 10px; }
#e-rate.warn { color: var(--warn-ink); }
.env-note, .note.compare { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.note.compare b { font-family: var(--sans); font-weight: 600; color: var(--ink); margin-right: 4px; }
.tbl.after td { white-space: normal; vertical-align: top; line-height: 1.35; padding: 4px 8px 4px 0; }
.tbl.after td:first-child { color: var(--ink); width: 46%; }
.steps li.now .st { color: var(--info-ink); }
@media (max-height: 800px) { #chart-ros { height: 80px; } #chart-rate { height: 74px; } .vials { height: 104px; } }

#cust-switch { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font: var(--fs-small) var(--sans); max-width: 240px; }
#topbar .actions { display: flex; gap: 8px; align-items: center; }

/* BRIEF tab: the customer's own answers */
#brief .sub-h:first-child { margin-top: 0; }
.bf-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); align-items: baseline; }
.bf-row > span { font: 600 var(--fs-micro) var(--sans); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.bf-row p { margin: 0; color: var(--ink); line-height: 1.4; }
.bf-row small { display: block; color: var(--ink-3); font-size: var(--fs-micro); margin-top: 2px; }
.bf-row.bk { grid-template-columns: 74px minmax(0, 1fr); }
.bf-row.bk .chip { font-style: normal; padding: 2px 5px; }
.bf-row.bk b { display: block; font: 600 var(--fs-small) var(--sans); color: var(--ink); }
.bf-row.bk p { color: var(--ink-2); }
.ep { display: inline-block; font: 500 var(--fs-micro) var(--mono); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 5px; margin: 0 4px 3px 0; }
.ep.live { color: var(--good-ink); border-color: rgba(12,163,12,.6); }
.bf-key { color: var(--good-ink); }
/* five tabs on the right: tighter at tablet widths */
@media (max-width: 1500px) { #right-tabs { gap: 0; padding: 0 4px; } #right-tabs button { padding: 8px 5px 7px; letter-spacing: .06em; } }
.unit-nc { text-transform: none; letter-spacing: 0; }
.stats.split { margin-top: 8px; }