/* PK2 Finance & Strategy · Deposit-Backed Cash
   The one tool-only layer, loaded after css/tool-page.css. It holds what this
   tool has and no other page does: the two editable tables, the hire presets,
   the three band labels, and the two bridge tables in the results. Everything
   else comes from tokens.css, foundation.css and tool-page.css. No hex value:
   every colour reads a token. */

/* ------------------------------------------------------------- shared -- */

/* Visually hidden, still read aloud. Used for the row announcements, the
   results summary, and the parts of a button's name the eye does not need. */
.dbc-sr {
  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 sample line that sits above the first step is the shared .tool-sample in
   css/tool-page.css. */

/* One step of the instrument. The rhythm is the same between a field group
   and a table, so the four steps read as one sequence. */
.dbc-block + .dbc-block,
.dbc-block + .dbc-tables,
.dbc-tables + .dbc-block { margin-top: 40px; }

/* Two fields side by side keep one baseline for their rules, whatever their
   labels do. Without this a two-line label drops its own field half a line
   below its neighbour. */
.dbc-block .tool-fields { align-items: end; }

.dbc-note {
  margin-top: 14px;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

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

/* Ruled, not boxed: the same hairline language as the fields above them. */
.dbc-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
}

.dbc-table th {
  padding: 0 12px 10px 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
  color: var(--text-muted);
  border-bottom: 1px solid var(--hairline);
}

.dbc-table td {
  padding: 4px 12px 4px 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
}

.dbc-table th:last-child,
.dbc-table td:last-child { padding-right: 0; }

.dbc-table .dbc-num { text-align: right; }

/* The cell fields are the page's field rule at table scale: no top margin, a
   shorter box, and the numeric columns right-aligned so the digits stack. */
.dbc-table .field-input {
  margin-top: 0;
  padding: 7px 0 8px;
  font-size: 15px;
}
.dbc-table .field-input:focus { padding-bottom: 7px; }
.dbc-table .dbc-num .field-input { text-align: right; }

.dbc-table td[data-label="Deposit held"],
.dbc-table td[data-label="Per month"] { width: 120px; }
.dbc-table td[data-label="Percent delivered"] { width: 120px; }

.dbc-cell-action { width: 92px; text-align: right; }

/* Remove is a real button with a real name. Mono and quiet at rest so seven
   of them do not shout over the figures they sit beside. */
.dbc-remove {
  border: 0;
  background: none;
  padding: 8px 0 8px 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-ui) ease;
}
.dbc-remove:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.dbc-remove:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.dbc-table-actions { margin-top: 18px; }

/* The add buttons are the secondary pill at the scale of an in-panel action
   rather than a page CTA. */
.dbc-add {
  height: 42px;
  padding: 0 20px;
  font-size: 15px;
}

/* ------------------------------------------------------- hire presets -- */

.dbc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.dbc-preset {
  height: 40px;
  padding: 0 18px;
  font-size: 15px;
  transition: border-color var(--dur-ui) ease, background var(--dur-ui) ease, transform 120ms ease;
}
.dbc-preset[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--gold-soft);
}

/* ------------------------------------------------------------ results -- */

/* The unit rides with the figure but does not compete with it. */
.dbc-unit {
  font-size: 0.32em;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Three mono band labels, the reached one marked by a gold rule rather than
   by a colour swap, so the band survives a screen with no colour. */
.dbc-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 18px;
}

.dbc-band {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Muted, not fog: at 12px these have to clear 4.5:1, and fog measures 3.5:1
     on the instrument core. The reached band is ink with the gold rule under
     it, so the state never rests on colour alone. */
  color: var(--text-muted);
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
}
.dbc-band.is-on {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* An instrument with nothing in it has not reached a band, so it shows neither
   the three nor a gold rule under one of them. It says it is waiting. The chip
   is in the markup rather than written by script so that the state is one class
   away, and it is hidden by default so a page without JavaScript, which always
   ships the worked sample, never shows it. */
.dbc-band-waiting { display: none; }
.dbc-bands.is-waiting .dbc-band { display: none; }
.dbc-bands.is-waiting .dbc-band-waiting { display: inline; }

.tool-results .voice-decision { margin-top: 8px; }

/* The two bridges. Side by side where there is room, stacked where there is
   not, and always the same ruled table as the inputs above. */
.dbc-bridge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}

.dbc-bridge-table th {
  padding: 12px 12px 12px 0;
  font-size: 13px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--text);
  border-bottom: 0;
  border-top: 1px solid var(--hairline);
}
.dbc-bridge-table td {
  padding: 12px 0;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 0;
  border-top: 1px solid var(--hairline);
}
.dbc-bridge-table tr:first-child th,
.dbc-bridge-table tr:first-child td { border-top: 0; }

/* The resolved line of each bridge. The heavier ink rule is the marker: the
   one gold-marked figure on this screen is the runway above. */
.dbc-bridge-table .dbc-total th,
.dbc-bridge-table .dbc-total td {
  border-top: 2px solid var(--ink);
  font-weight: 500;
  color: var(--ink);
}
.dbc-bridge-table .dbc-total td { font-size: 18px; }

/* ------------------------------------------- the inputs on one screen -- */

/* Four steps, two of them tables, is more instrument than a screen holds at the
   shipped rhythm. At desktop the rows lose a little of their padding and the
   two tables, which are the same kind of object asking the same kind of
   question, sit beside each other. Nothing loses a type size: the cell fields
   stay at the 15px they have always been and the labels stay 12px mono. */
@media (min-width: 1025px) {
  .dbc-block + .dbc-block,
  .dbc-block + .dbc-tables,
  .dbc-tables + .dbc-block { margin-top: 22px; }

  .tool-inputs > .tool-sample:first-child { margin-bottom: 16px; }

  .dbc-table { margin-top: 8px; }
  .dbc-table th { padding-bottom: 8px; }
  .dbc-table td { padding-top: 1px; padding-bottom: 1px; }
  .dbc-table .field-input { padding: 4px 0 5px; }
  .dbc-table .field-input:focus { padding-bottom: 4px; }

  .dbc-table-actions { margin-top: 10px; }
  .dbc-add { height: 38px; }

  .dbc-note { margin-top: 8px; }
  .dbc-presets { margin-top: 12px; }
  .dbc-preset { height: 38px; }
}

@media (min-width: 1200px) {
  .dbc-tables {
    display: grid;
    /* The deposits table carries four columns to the costs table's three, so
       the pair is not split down the middle. */
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    column-gap: 40px;
  }
  /* Side by side they are two columns, not a sequence, so the stacked rhythm
     between them comes off. */
  .dbc-tables > .dbc-block + .dbc-block { margin-top: 0; }

  /* At half the width the figure columns give back what they do not use, so the
     booking and cost names still read in full. A deposit is six digits at most
     and a percentage is three. */
  .dbc-tables .dbc-table td[data-label="Deposit held"],
  .dbc-tables .dbc-table td[data-label="Per month"] { width: 86px; }
  .dbc-tables .dbc-table td[data-label="Percent delivered"] { width: 74px; }
  .dbc-tables .dbc-cell-action { width: 72px; }
}

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

@media (max-width: 1024px) {
  .dbc-bridge { gap: 32px; }
}

@media (max-width: 860px) {
  .dbc-bridge {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

/* At phone width a four-column editable table cannot hold its columns, so each
   row becomes a stack: the column name on the left from data-label, the field
   on the right. That treatment is the shared .tool-table--stack in
   css/tool-page.css, carried by both editable tables here. What is left below
   is only what belongs to this tool: the column widths it releases, the remove
   cell, and the cell padding this file has to undo because it loads after the
   shared layer at the same specificity.

   The bridge tables in the results do not carry the class: a label and a figure
   fit at this width, and stacking them would break the arithmetic's reading. */
@media (max-width: 640px) {
  .dbc-table.tool-table--stack td {
    padding: 3px 0;
    border-bottom: 0;
  }

  .dbc-table td[data-label="Deposit held"],
  .dbc-table td[data-label="Per month"],
  .dbc-table td[data-label="Percent delivered"] { width: auto; }

  /* The remove cell has no column name of its own, so it is the one cell in
     the row with a single item in it. It is held to the right edge, where the
     figures are, rather than to the start of the row. */
  .dbc-table.tool-table--stack .dbc-cell-action {
    width: auto;
    justify-content: flex-end;
    padding-top: 2px;
  }
  .dbc-remove { padding-left: 0; }

  .dbc-bridge-table th { font-size: 12.5px; }
  /* The bridge cells drew their padding from the editable table's stacked rule
     while that rule lived in this file and reached every .dbc-table cell. The
     rule is shared now and reaches only the stacked tables, so the value the
     bridge has always rendered at is written here rather than inherited by
     accident. The row's height still comes from its heading cell. */
  .dbc-bridge-table td { font-size: 15px; padding: 3px 0; }
  .dbc-bridge-table .dbc-total td { font-size: 17px; }

  .dbc-bands { gap: 16px; }
  .dbc-band { font-size: 11px; letter-spacing: 0.1em; }
  .dbc-unit { font-size: 0.28em; }

  .dbc-add { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dbc-remove,
  .dbc-preset { transition: none; }
}