/* PK2 AI Advisors · the calculator
   Layout for /tools/whats-slipping/. Nothing here is a new component. The
   fields are the tool page's fields from tools.css, the total is the gold
   block and the breakdown is the cream card from report-sample.css, and the
   math sits in an FAQ row from faq.css. This sheet only places them.

   No hex value appears in this file. Every value resolves through tokens.css.

   Load order: tokens.css, site.css, week-grid.css, tools.css,
   report-sample.css, faq.css, then calculator.css.
*/

/* Same rule assessment.css carries; this page doesn't load that sheet. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Inputs on the left, results on the right, the results column narrow enough
   that the total reads as one object rather than a banner. */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--measure) * 0.62));
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-6);
}

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

.calc-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Each group is ruled off from the one above it, the same hairline the FAQ
   rows and the week grid use. */
.calc-group + .calc-group {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--hair) solid var(--hairline);
}

/* A legend normally sits on the fieldset's border. Floated full width, it
   drops into the flow below the hairline like any other heading. */
.calc-legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.calc-legend + * { clear: both; }

/* A number field is short. The unit sits beside it so the field never has to
   say what it is counting. */
.calc-unit-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.calc-input {
  max-width: calc(var(--space-7) * 2.5);
  font-variant-numeric: lining-nums tabular-nums;
}

.calc-select { max-width: calc(var(--measure) * 0.55); }

.calc-unit { color: var(--text-muted); }

/* The checkbox takes the ink colour so it doesn't bring the browser's blue. */
.calc-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  cursor: pointer;
}
.calc-toggle input {
  width: var(--space-3);
  height: var(--space-3);
  margin: 0;
  accent-color: var(--ink);
}

/* The field the toggle opens. .tool-field sets display, which would otherwise
   beat the browser's own rule for the hidden attribute. */
.calc-own-value { margin-top: var(--space-3); }
.calc-own-value[hidden] { display: none; }

/* The disclosure opens under the last group, a full step down. */
.calc-math { margin-top: var(--space-6); }
.calc-math .faq-q { padding-block: var(--space-3); }
.calc-math-body > * + * { margin-top: var(--space-2); }
.calc-math-body strong { color: var(--ink); }
.calc-math-plain { color: var(--ink); }

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

/* On a wide screen the results stay in view while you scroll the fields. */
.calc-results {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.calc-results > * + * { margin-top: var(--space-4); }

/* "About" sits on its own line above the figure, in body type, so the figure
   itself keeps the size the report gives it. */
.calc-figure-about {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--size-body-lg);
  font-weight: 500;
  letter-spacing: 0;
}

.calc-specs { font-size: var(--size-small); }

.calc-fix { color: var(--ink); }

.calc-action { margin-top: var(--space-5); }

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

@media (max-width: 1024px) {
  .calc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .calc-results { position: static; }
}

@media (max-width: 640px) {
  .calc-action > .btn-primary {
    width: 100%;
    justify-content: space-between;
  }
}