/* Finance & Price Dashboard — see js/views/finance-dashboard.js.
 *
 * Additive, like every screen file. Reused as they are: .proj-card (the floor
 * tiles, with the hover affordances taken back off exactly as .goals-outcome
 * and .oh-summary do — nothing happens when you click a tile), .est-block /
 * .est-table (the comparison, which inherits the <768px stacked-card layout
 * from responsive.css through data-label), .sum-label and .muted-td.
 *
 * TYPE: the three floors are the largest type on the page (40px Delight 700,
 * above the 30px page title), because they are the answer the screen exists to
 * give. Everything else steps down: 26px for the two panel headline figures,
 * 13px for chain lines.
 *
 * COLOUR: one accent. The below-floor badge reads in --accent-text (a11y.css —
 * raw --accent is 3.71:1 on this background, fills and rings only), marked by a
 * 1px accent rule rather than a filled chip, so the row stays legible as text.
 */

.dash-section {
  margin-bottom: 30px;
}

/* A section heading at .sum-label scale but in --text: these name the page's
   parts, and the muted 9px label is reserved for figure captions. */
.dash-h {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text);
  margin: 0 0 12px;
}

/* ── 1. Floors ─────────────────────────────────────────────────────────── */
.dash-floors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dash-floor {
  cursor: default;
}
.dash-floor:hover {
  border-color: var(--border);
}
.dash-floor:hover::after {
  transform: scaleX(0);
}
.dash-floor-value {
  font-family: 'Delight', 'Georgia', serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: 0.01em;
  margin: 4px 0 6px;
}
.dash-floor-value.is-empty,
.dash-big.is-empty,
.dash-line-value.is-empty {
  color: var(--muted);
}
.dash-floor-sub {
  font-size: 11px;
  color: var(--muted);
}

.dash-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 78ch;
}

/* ── Links to owner screens ───────────────────────────────────────────────
   The same rest/hover pair as .goals-link and .pricing-rate-note-link: --text
   and underlined at rest (the accent is under 4.5:1 for text), accent on hover
   and focus. Inherits size and case from wherever it sits, so a panel heading
   stays a heading and a chain label stays a label. */
.dash-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--muted2);
  text-underline-offset: 3px;
  cursor: pointer;
}
.dash-link:hover,
.dash-link:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* ── 2. Comparison ─────────────────────────────────────────────────────── */
.dash-sum-below {
  color: var(--accent-text);
}
/* A button to that row's Mark-Up on the Rate Card (finance-dashboard.js,
   statusCell) — it used to be a <span> drawn like a link that did nothing.
   Button chrome taken off so it still reads as the gap, not as a control
   competing with the figures; the accent rule thickens on hover and focus, as
   the page's links change colour, and the focus ring is a11y.css's. */
.dash-badge {
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent);
  padding: 0 0 1px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--accent-text);
  white-space: nowrap;
  cursor: pointer;
}
.dash-badge:hover,
.dash-badge:focus-visible {
  border-bottom-width: 2px;
  padding-bottom: 0;
}
/* One unit's cell (finance-dashboard.js, unitCell): the price, and under it
   the badge or the "auto" tag, both right-aligned. One wrapper, so the phone
   layout's label/value row (responsive.css, .est-table td) sees one value. */
.dash-unit-val {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.dash-auto {
  font-size: 10.5px;
  color: var(--muted);
}
.dash-table td:first-child {
  color: var(--text);
}
.dash-empty {
  margin: 0;
  padding: 16px;
  font-size: 12px;
  color: var(--muted);
}
.dash-section .est-block {
  margin-bottom: 0;
}

/* ── 3–5. Panels ───────────────────────────────────────────────────────────
   Costs left, capacity right, like the reference spreadsheet; the targets row
   below uses the same two columns so the page keeps one grid. Flat 1px boxes
   on --surface, no radius, matching .proj-card without being a tile. */
.dash-panels,
.dash-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 22px;
}
.dash-panel-h {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text);
  margin: 0 0 14px;
}
.dash-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border-hairline);
  font-size: 13px;
}
.dash-line-label {
  color: var(--muted);
}
.dash-line-label .dash-link {
  color: var(--text);
}
.dash-line-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The result line of each panel: the number the lines above add up to. */
.dash-line-total {
  border-bottom: none;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.dash-line-total .dash-line-label,
.dash-line-total .dash-line-value {
  color: var(--text);
  font-weight: 600;
}
.dash-panel-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.dash-big {
  font-family: 'Delight', 'Georgia', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

/* A block heading with its info control beside it (js/info.js), kept on one
   baseline in the .est-block-head flex row. */
.dash-block-title {
  display: flex;
  align-items: center;
}

/* ── 7. GST mirror ─────────────────────────────────────────────────────────
   .tax-setting as Goals and the Rate Card use it: copy left, controls right,
   stacking to one column below 768px (responsive.css, which also sizes it
   for touch there). The checkbox rows are
   settings.css's .set-check and the registered-off dimming its .set-row-off —
   the modal's own controls, since this edits the modal's own field.

   .tax-setting input { width: 90px } (app.css) and, below 768px,
   { width: 100%; min-height: 44px } (responsive.css) are written for its one
   number field and would stretch a checkbox across the row, so checkboxes are
   put back to their own size here. The label around each one is the target. */
.dash-gst {
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 0;
}
.dash-gst-copy {
  max-width: 62ch;
}
.dash-gst-note {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.dash-gst-note:last-child {
  margin-bottom: 0;
}
.dash-gst-note strong {
  color: var(--text);
  font-weight: 600;
}
.dash-gst-ctl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
.dash-gst-detail {
  display: grid;
  grid-template-columns: auto 90px;
  align-items: center;
  gap: 10px 12px;
}
.dash-gst-detail .set-check {
  grid-column: 1 / -1;
}
.dash-gst-rate {
  font-size: 13px;
  color: var(--text);
}
.dash-gst input[type='checkbox'] {
  width: auto;
  min-height: 0;
  padding: 0;
}
.dash-gst .set-check {
  min-height: 24px;
}
#dash-gst-error {
  display: none;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--err-border);
  background: var(--err-bg);
  color: var(--err-text);
  font-size: 12px;
  line-height: 1.5;
}
#dash-gst-error.show {
  display: block;
}

/* ── 6. Post against capacity ──────────────────────────────────────────────
   The one editable-but-unsaved thing on the page: two .field inputs side by
   side at a fixed width (app.css stretches .field inputs to 100%), then the
   sentence at chain-line size with its figures in --text. An over-full month
   is a warning, not an error: --accent-text with the same 1px accent rule as
   the below-floor badge, never the red error box. */
.dash-post-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 16px;
}
.dash-post-inputs .field {
  width: 190px;
}
.dash-post-sentence {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.dash-post-sentence strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dash-post-sentence.is-empty {
  font-size: 26px;
  line-height: 1.2;
}
.dash-post-sentence.is-over strong:last-child {
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent);
}
.dash-post-detail {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.dash-post-detail strong {
  color: var(--text);
  font-weight: 600;
}