/* Copyright (c) 2026. All rights reserved. See LICENSE.
   The analysis report (report.js), in the studio's Analysis window: the page defines the colour
   tokens. */
.report { overflow-y: auto; background: var(--paper); border-left: 1px solid var(--rule-strong); }
.report section { padding: 16px 20px 18px; border-bottom: 1px solid var(--rule); }
.report h3 { margin: 0 0 8px; font-size: 18px; font-weight: 650; font-stretch: 78%; }
.report .note { margin: 0 0 10px; color: var(--lead); font-size: 13px; }
.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.issues li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; }
.issues small { display: block; color: var(--lead); font-size: 12px; }
.issues .warn .msg { color: var(--graphite); }
.delta { width: 26px; height: 23px; position: relative; display: grid; place-items: end center; color: var(--red); font-size: 11px; font-weight: 700; padding-bottom: 2px; }
.delta svg { position: absolute; inset: 0; }
.delta b { position: relative; }
.pass { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 0; }

.bars { display: grid; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 132px 1fr 44px; align-items: center; gap: 8px; font-size: 13px; }
.bar-row .name { color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .name em { font-style: normal; color: var(--lead); font-size: 11px; margin-left: 4px; }
.bar-row .track { height: 12px; border-bottom: 1px solid var(--rule); position: relative; }
.bar-row .fill { position: absolute; left: 0; bottom: 0; height: 10px; background: var(--ink); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--lead); }

.spark { width: 100%; height: 92px; display: block; overflow: visible; }
.spark .grid { stroke: var(--rule); stroke-width: 1; }
.spark .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--ink); opacity: .1; }
.spark .cross { stroke: var(--lead); stroke-width: 1; }
.spark .dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.spark text { font-size: 11px; fill: var(--lead); font-variant-numeric: tabular-nums; }

.schedule { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.schedule th { text-align: left; font-weight: 500; font-stretch: 75%; color: var(--lead); font-size: 12px; padding: 3px 6px 3px 0; border-bottom: 1px solid var(--rule); }
.schedule td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.schedule td:nth-child(3) { text-align: right; white-space: nowrap; }
.schedule tr.floor td { font-weight: 600; padding-top: 10px; border-bottom-color: var(--rule-strong); }
.schedule.rooms td:nth-child(4) { padding-left: 10px; }
.schedule.rooms select { font: inherit; color: inherit; border: 0; border-bottom: 1px dotted var(--lead); background: none; padding: 0; cursor: pointer; }
.front td:not(:first-child), .front th:not(:first-child) { text-align: right; }
.front td small { display: block; color: var(--lead); font-size: 11px; }
.front td.best { font-weight: 600; }
.front tr[aria-current] td { background: var(--film); }
.rules { margin: 0; padding-left: 18px; font-size: 13px; color: var(--graphite); display: grid; gap: 4px; }

.circuits summary { cursor: pointer; font-size: 13px; color: var(--lead); margin: 10px 0 6px; }
.circuits .schedule td:nth-child(3) { text-align: left; }

.finance td:last-child, .alts td:nth-child(n+3) { text-align: right; white-space: nowrap; }
.alts tr.chosen td { font-weight: 600; }
.schedule tr.fail td { color: var(--red); }
.systems td:first-child { width: 42%; color: var(--lead); }

.front-range { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--lead); }
.front-range input { flex: 1; accent-color: var(--ink); }

.tip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 280px;
  background: var(--graphite); color: var(--paper); font-size: 13px; padding: 6px 9px; border-radius: 3px;
}