/* PK2 Finance & Strategy · The Draw Decision (/tools/draw-decision/)
   The one per-tool layer, loaded after tokens.css, foundation.css and
   tool-page.css. It holds only what belongs to this tool: the claim rows, the
   allocation bands, and the two ruled tables. No hex value anywhere: every
   colour reads a token. */

/* ------------------------------------------------------------- inputs -- */

/* The sample line is the shared .tool-sample in css/tool-page.css. */

/* The live summary. The answer is announced; the worksheet under it is not. */
.draw-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------- the claims -- */

/* Three claims and their total, ruled rather than boxed: the same hairline
   language as the tables below and the fields above. */
.draw-rows {
  margin-top: 26px;
  border-top: 1px solid var(--hairline);
}

.draw-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.draw-row-amount {
  font-size: 22px;
  color: var(--ink);
  text-align: right;
}

.draw-row-note {
  grid-column: 1 / -1;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.draw-row-total .draw-row-label { color: var(--ink); }

/* ------------------------------------------------------- the bands -- */

/* One drawn object, and it is decoration: the svg is aria-hidden and every
   band is repeated as real text in the legend under it. */
.draw-alloc { margin: 30px 0 0; }

.draw-bar {
  display: block;
  width: 100%;
  height: 28px;
}

.draw-seg-tax { fill: var(--text-muted); }
.draw-seg-ops { fill: var(--ink-2); }
.draw-seg-growth { fill: var(--fog); }
.draw-seg-draw { fill: var(--gold); }
.draw-seg-short { fill: var(--error); }

.draw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 14px;
}

/* With no claims and no draw there are no bands to divide, so the strip does
   not stand there empty: the bar collapses and the legend says in one line what
   the bands would have said. The caption under it still reports the balance. */
.draw-alloc--empty .draw-bar { display: none; }
.draw-alloc--empty .draw-legend { margin-top: 0; }

.draw-empty {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.draw-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.draw-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.draw-key-tax .draw-swatch { background: var(--text-muted); }
.draw-key-ops .draw-swatch { background: var(--ink-2); }
.draw-key-growth .draw-swatch { background: var(--fog); }
.draw-key-draw .draw-swatch { background: var(--gold); }
.draw-key-short .draw-swatch { background: var(--error); }

.draw-key .num-data {
  font-size: 13px;
  color: var(--ink);
}

.draw-caption {
  display: block;
  margin-top: 14px;
  max-width: 62ch;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ------------------------------------------------------ the tables -- */

.draw-tables {
  display: grid;
  gap: 30px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

.draw-table-title { display: block; }

.draw-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
}

.draw-table th,
.draw-table td {
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}

.draw-table thead th {
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.draw-table td { color: var(--text); }
.draw-table .draw-basis { color: var(--text-muted); }

.draw-table .draw-num {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}

.draw-table .draw-total td {
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  color: var(--ink);
}

/* --------------------------------------------------------- the note -- */

.draw-note {
  margin-top: 28px;
  padding-top: 18px;
  max-width: var(--measure);
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* -------------------------------------------------------- narrow -- */

@media (max-width: 640px) {
  .draw-row-amount { font-size: 20px; }
  .draw-legend { gap: 10px 16px; }
  .draw-bar { height: 24px; }
  .draw-table { font-size: 12.5px; }

  /* Both tables carry .tool-table--stack, so at this width each row is a stack
     rather than three columns. The padding and the rule move from the cell to
     the row, and the claim itself leads the stack in ink. This file loads after
     css/tool-page.css, so the cell rules above have to be undone here. */
  .draw-table td {
    padding: 3px 0;
    border-bottom: 0;
  }
  .draw-table td:first-child { color: var(--ink); }
  .draw-table .draw-total { border-top: 1px solid var(--ink); }
  .draw-table .draw-total td { border-top: 0; }
}