/* PK2 Finance & Strategy · Referral Fee Model
   The one per-tool layer for /tools/referral-fee-model/, loaded after
   css/tool-page.css. It holds what belongs to this tool only: the comparison
   under the decisive figure, the three supporting figures, the hairline tables,
   and the script block. No hex value anywhere: every colour reads a token. */

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

/* Five of the seven fields carry a hint, at two different lengths, so the rules
   would step up and down across a row. The input is pushed to the foot of its
   cell instead and the label or hint above it holds the minimum gap. */
.tool-inputs .field-label { margin-bottom: 8px; }
.tool-inputs .field > .form-hint { margin-top: 0; margin-bottom: 10px; }
.tool-inputs .field-input { margin-top: auto; }

/* Seven fields, so the note that they are live sits where the shell's run
   button would have been. */
.rfm-run-note {
  margin-top: 26px;
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------- the decisive comparison -- */

/* The figure is the answer; these two rows are what it is an answer to. Mono,
   tabular, right-aligned on a hairline, so the eye reads down the column. */
.rfm-compare {
  margin-top: 18px;
  max-width: 380px;
}

.rfm-compare-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}

.rfm-compare-row .num-data {
  font-size: 18px;
  color: var(--ink);
}

/* The lead is the verdict's mono label. It sits directly over the reserved
   voice line, so it takes ink rather than muted. */
.rfm-lead {
  margin-top: 28px;
  margin-bottom: 14px;
  color: var(--ink);
}

.rfm-verdict-note {
  margin-top: 14px;
  max-width: var(--measure);
}

/* --------------------------------------------------- supporting figures -- */

/* Three of them, in one row on a wide screen and stacked below. Each is a
   label, a tabular figure, and the line that says how it was arrived at. */
.rfm-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gutter);
  row-gap: 26px;
  padding: 30px 0 6px;
}

.rfm-tile { gap: 8px; }
.rfm-tile .num-data { font-size: 24px; color: var(--ink); }

.rfm-tile-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- blocks -- */

.rfm-block {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.rfm-block-title {
  display: block;
  margin-bottom: 14px;
  color: var(--ink);
}

/* Ruled tables, not boxed ones: one hairline under every row, the header row
   in the same mono label as the rest of the instrument, and every figure in
   tabular mono so the columns line up on the decimal. */
.rfm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
}

.rfm-table th,
.rfm-table td {
  padding: 9px 0;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  vertical-align: baseline;
}

.rfm-table th:first-child,
.rfm-table td:first-child {
  padding-right: 16px;
  text-align: left;
}

/* Two figure columns wrap into each other on a narrow screen without a gutter
   between them, so every column after the first carries one. */
.rfm-table th + th,
.rfm-table td + td { padding-left: 12px; }

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

.rfm-table tbody th {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
}

.rfm-table td { white-space: nowrap; }

/* The line the rows add up to. */
.rfm-table .rfm-total th,
.rfm-table .rfm-total td {
  border-bottom-width: 0;
  color: var(--ink);
}
.rfm-table .rfm-total th { font-weight: 500; }
.rfm-table .rfm-total td { font-size: 17px; }

.rfm-note {
  margin-top: 14px;
  max-width: var(--measure);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--text-muted);
}

.rfm-note-lead { margin-top: 0; margin-bottom: 20px; }

.rfm-emph {
  font-size: 15px;
  color: var(--ink);
}

/* The words to use. Roman Fraunces, so it reads as something said out loud
   rather than as another note, marked by a hairline instead of a second gold
   rule: the reserved voice appears once on this page and it is the verdict. */
.rfm-script {
  max-width: var(--measure);
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 480;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
}

.rfm-foot { margin-top: 34px; }

/* -------------------------------------------------------------- gate -- */

/* The shared gate centres its card in the region it veils. This region is the
   full model, several screens tall, so the card is pinned near the top where
   the results begin instead of floating in the middle of the blur. Nothing
   else about the gate changes. */
.rfm-results .tool-gate {
  align-items: flex-start;
  padding-top: 30px;
}
.rfm-results .tool-gate-card { max-height: none; }

/* Announced, never drawn. The same sentence is on screen as the figure and
   the verdict; this is that comparison in one line for a screen reader. */
.rfm-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;
}

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

@media (max-width: 1024px) {
  .rfm-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .rfm-compare { max-width: none; }
  .rfm-tiles { grid-template-columns: 1fr; row-gap: 22px; padding-top: 26px; }
  .rfm-block { margin-top: 28px; }
  .rfm-table { font-size: 14px; }
  .rfm-table th,
  .rfm-table td { padding: 8px 0; }
  .rfm-table th:first-child,
  .rfm-table td:first-child { padding-right: 10px; }
  .rfm-table thead th { letter-spacing: 0.08em; }
  .rfm-script { padding-left: 14px; font-size: 18px; }
  .rfm-results .tool-gate { padding-top: 20px; }
}