/* PK2 Finance & Strategy · Seller Numbers Stress Test.
   The one tool's own layer, loaded after css/tool-page.css. It holds what only
   this tool has: eighteen inputs read as seven ruled groups, the verdict word,
   the rebuilt-earnings table and the flag list. Everything else comes from the
   shared layers. No hex value anywhere: every colour reads a token. */

/* ------------------------------------------------------- 1 the inputs -- */

/* Seven groups, separated the way the rest of the site separates things: a
   hairline and air, not a box. The mono step label names the group. */
.sst-group + .sst-group {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

/* Stacked at 640px, a group label and a field label are the same mono line, so
   the group takes ink and the fields keep the muted grey. That is the only
   difference between them, and it is enough to read the seven groups as
   groups on a phone. */
.sst-group > .tool-step {
  margin-bottom: 4px;
  color: var(--ink);
}

/* Some of these labels run to two lines and their neighbours do not. The label
   takes the slack so every input rule in a row sits on the same line. */
.sst-group .field-label { flex: 1 0 auto; }

.sst-hint {
  margin-top: 16px;
  max-width: var(--measure);
}

/* The three worked deals. Secondary weight, under their own label, so the run
   button stays the one primary action in the instrument. */
.sst-samples-label {
  display: block;
  margin-top: 30px;
}

.sst-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

/* Eighteen fields under seven headings is the longest question any tool here
   asks, so at desktop the rules between the groups take the tightest air that
   still reads as a break, and each group's fields run across the columns the
   shared grid gives them. No type size moves. This tool does not reach one
   viewport at 1440 and cannot: eight rows of fields, seven headings and six
   rules have a floor well above it. The rhythm below is that floor. */
@media (min-width: 1025px) {
  .sst-group + .sst-group { margin-top: 18px; padding-top: 14px; }
  .sst-hint { margin-top: 8px; }
  .sst-samples-label { margin-top: 22px; }
  .sst-samples { margin-top: 10px; }
}

/* Two-up. Eighteen fields under seven headings will not fit a screen in one
   column at any honest type size, so at the widest desktop the groups run two
   across: four rows of two rather than seven stacked. Auto-placement is
   row-major and the source order is the group order, so reading order, tab
   order and screen reader order are the same walk, left to right then down.
   Each group takes two field columns inside its own half. */
@media (min-width: 1200px) {
  .sst-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 14px;
    align-items: start;
  }

  /* A grid row is as tall as its taller group, so what is left of the budget is
     taken out of the rhythm rather than out of the type. */
  .tool-inputs > .tool-sample:first-child { margin-bottom: 14px; }
  .sst-groups .tool-fields { margin-top: 8px; }
  .sst-hint { margin-top: 6px; }

  /* The rule between groups belonged to the stack. In a grid the pairs sit
     side by side, so each group carries its own rule and the two in the first
     row carry none. */
  .sst-groups .sst-group + .sst-group { margin-top: 0; }
  .sst-groups .sst-group {
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
  }
  .sst-groups .sst-group:nth-child(-n + 2) {
    padding-top: 0;
    border-top: 0;
  }

  /* Half the width takes a column out of the shared grid rather than shrinking
     the labels, which are already at the 12px mono floor. */
  .sst-groups .tool-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------ 2 the results -- */

/* The summary a screen reader hears on every run. The same sentence is on the
   screen as the verdict word and the reserved-voice line, so this is a second
   route to it, not the only one. */
.sst-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;
}

.sst-note {
  margin-top: 12px;
  max-width: var(--measure);
  color: var(--text-muted);
}

/* The decision, stated once. Mono, at size, in ink: the gold on this screen is
   the rule above the sentence and the figure below it. */
.sst-verdict-word {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.sst-verdict .tool-verdict { margin-top: 20px; }

/* The back-solved price, when there is one. */
.sst-cap { margin-top: 34px; }

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

/* ------------------------------------------------------- 3 the table -- */

/* Hairline rules, mono figures, one rule under each subtotal. The same ruled
   language as the rest of the instrument. */
.sst-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  text-align: left;
}

.sst-table caption {
  margin-bottom: 12px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

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

.sst-table th {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  padding-right: 18px;
}

.sst-table .sst-n {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}

.sst-table .sst-quiet th,
.sst-table .sst-quiet .sst-n { color: var(--text-muted); }

.sst-table .sst-total th { font-weight: 700; color: var(--ink); }
.sst-table .sst-total .sst-n { color: var(--ink); }

/* The one failure colour, on the two lines that can come back short. */
.sst-table .sst-short .sst-n { color: var(--error); }

/* ------------------------------------------------------- 4 the flags -- */

/* A ruled list with a mono status word. No coloured boxes: the word says which
   kind of finding it is, and the rule does the grouping. */
.sst-flags {
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.sst-flag {
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.sst-flag:first-child { padding-top: 4px; }
.sst-flag:last-child { border-bottom: 0; padding-bottom: 0; }

.sst-flag-head {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}

.sst-flag-body {
  margin-top: 6px;
  max-width: var(--measure);
  color: var(--text-muted);
}

/* --------------------------------------------------------- 5 the ask -- */

.sst-ask ol {
  margin-top: 14px;
  padding-left: 20px;
  max-width: var(--measure);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--text);
}
.sst-ask li { margin-top: 8px; }

.sst-caveat { margin-top: 30px; }

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

@media (max-width: 640px) {
  .sst-group + .sst-group { margin-top: 26px; padding-top: 22px; }
  .sst-samples .btn-secondary { width: 100%; justify-content: center; }
  .sst-verdict-word { font-size: 26px; }
  .sst-cap .num-display { font-size: clamp(40px, 13vw, 64px); }
  .sst-table th { font-size: 15px; padding-right: 12px; }
  .sst-table .sst-n { font-size: 15px; }
}