/* PK2 Finance & Strategy · tool pages (v2)
   The layer every tool at /tools/<slug>/ loads on top of tokens.css and
   foundation.css, ahead of any per-tool stylesheet. It holds what all tool
   pages share: the hero above the instrument, the inputs grid inside it, and
   the results block below the inputs. Anything that belongs to one tool only
   (its chart, its bands, its own table) goes in that tool's own file, not
   here. No hex value anywhere: every colour reads a token. */

/* -------------------------------------------------------------- 1 hero -- */

/* Layout A, run short, the same discipline as the tools index: the page's job
   starts at the instrument, so the opening states the decision and gets out of
   the way. One left edge per page, top to bottom. */
.tool-hero {
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (min-width: 1025px) {
  .tool-hero .tool-hero-copy { grid-column: 1 / span 8; }
}

.tool-eyebrow { margin-bottom: 26px; }

.tool-lede {
  margin-top: 26px;
  max-width: 620px;
  color: var(--text-muted);
}

/* -------------------------------------------------- 2 the instrument -- */

/* The tool's own face. Ten of twelve columns, so the object has air on the
   right rather than filling the container edge to edge like an index card. */
.tool-panel { grid-column: 1 / span 10; }

.tool-step { display: block; }

/* ------------------------------------------- 2a the label row controls -- */

/* Clear and Reset sit in the instrument's own label row, beside the Live chip,
   because that row already exists and costs the inputs below it no height. The
   right of the row is one group so the space-between still puts the tool's name
   on the left edge. It wraps rather than crushes at phone width, which is the
   only reason .tool-labels exists as a class of its own: the label row on other
   pages is unchanged. */
.tool-labels { flex-wrap: wrap; row-gap: 10px; }

.tool-label-side {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* The tertiary mono link, not a pill: at the scale of the label row a 52px
   .btn-secondary would be taller than the row it sits in. Same face, same
   letterspacing and same muted grey as the labels either side of it, with the
   gold underline the site's tertiary links carry. */
.tool-label-btn {
  padding: 0;
  border: 0;
  background: none;
  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);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--dur-ui) ease;
}
.tool-label-btn:hover { color: var(--ink); }
.tool-label-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* What the two controls did, for a screen reader. The change is on the screen
   already, so this is a second route to it rather than the only one. */
.tool-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;
}

/* Every tool opens on real numbers, so every tool says so the same way: one
   mono line, in the muted voice the hints use, naming the sample and inviting
   the visitor to replace it. Where the line leads the whole instrument rather
   than one step, it takes the step's own space below it. */
.tool-sample {
  margin-top: 10px;
  max-width: 56ch;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tool-inputs > .tool-sample:first-child {
  margin-top: 0;
  margin-bottom: 30px;
}

/* Inputs. Mono labels over hairline-underline fields, the same ruled language
   as the contact form and the instrument tables, not a boxed web form. The
   field rules mirror .field / .field-label / .field-input in css/contact.css;
   they are repeated here because a tool page does not load that file. */
.tool-inputs { padding-top: 20px; }

.tool-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gutter);
  row-gap: 26px;
  margin-top: 16px;
}

.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }

.field-label {
  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);
}

.field-input {
  width: 100%;
  margin-top: 10px;
  padding: 8px 0 9px;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  /* An empty field is a rule you have to be able to find. --hairline measures
     1.33:1 on the instrument core, which is a decoration rather than an
     affordance, so the resting underline takes --fog and hover goes to ink. */
  border-bottom: 1px solid var(--fog);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--dur-ui) ease;
}
.field-input:hover { border-bottom-color: var(--ink); }

/* Gold underline on focus, and the system's focus ring on top of it, so the
   field is legible as focused with or without colour perception. */
.field-input:focus {
  outline: none;
  border-bottom-color: var(--gold);
  border-bottom-width: 2px;
  padding-bottom: 8px;
}
.field-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}
.field-input[aria-invalid="true"] { border-bottom-color: var(--error); }

/* A figure typed into a tool is read against the figures the tool gives back,
   so it is set in the same tabular mono those are. */
.field-input-num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* Autofill paints its own ground; hold it to the instrument core so the field
   stays a rule. */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 60px var(--instr-core) inset;
}

.tool-actions { margin-top: 30px; }

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

/* A tool is a question you answer in one pass, so at desktop the whole question
   should be on the screen at once: the label row down to the last field, with
   the results waiting immediately below rather than three scrolls down.
   Three columns where there is room for three, two where there is room for two,
   and one step tighter through the vertical rhythm. Nothing here touches the
   type scale: the fields stay 17px, the labels stay 12px mono. DOM order runs
   across the columns, so the tab order reads row by row the way the eye does.

   Everything is scoped to .tool-inputs on purpose. The gate card carries the
   same .field rules and keeps its own looser spacing, and below 1025 this whole
   block is inert. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .tool-fields { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .tool-inputs { padding-top: 14px; }
  .tool-inputs > .tool-sample:first-child { margin-bottom: 22px; }
  .tool-inputs .tool-fields { margin-top: 12px; row-gap: 20px; }
  .tool-inputs .field-input { margin-top: 7px; padding: 7px 0 8px; }
  .tool-inputs .field-input:focus { padding-bottom: 7px; }
  .tool-inputs .field > .form-hint { margin-top: 6px; }
  .tool-inputs .tool-actions { margin-top: 22px; }
}

/* Results. One decisive figure at size, the supporting figures below it in
   tabular mono, and the one reserved-voice line that says what it means. The
   hairline is what separates the answer from the question, not a second card. */
.tool-results {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

.tool-figure { margin-top: 10px; }

.tool-results .instrument-figures { padding: 24px 0 26px; }

.tool-verdict { max-width: var(--measure); }

/* ------------------------------------------------- 3 the email gate -- */

/* The shared gate, mounted by js/tool-gate.js on any region carrying a
   data-gate attribute. Every rule here is inert until that script adds
   .is-gated, so a visitor without JavaScript reads the results in full. The
   gate is results-gated, not entry-gated: the tool runs for everyone.

   Layout: .tool-gate is absolutely positioned inside the region, so the locked
   region is exactly as tall as the unlocked one and nothing jumps on unlock. */
.is-gated { position: relative; }

/* The veil. A flat scrim at 92%, no gradient: the figures behind stay as a
   trace of something real without being readable. The blur is a progressive
   extra, not the mechanism. */
.tool-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--instr-core) 92%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* The card is the instrument core again, one hairline ring, no second shadow.
   The one object on a tool page with depth is the instrument itself. */
.tool-gate-card {
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  overflow: auto;
  padding: 22px 24px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-instr-inner);
  background: var(--instr-core);
}

.tool-gate-label { display: block; }

.tool-gate-line {
  margin-top: 10px;
  max-width: 42ch;
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--text-muted);
}

.tool-gate-card .field { margin-top: 20px; }
.tool-gate-actions { margin-top: 22px; }

.tool-gate-quiet {
  margin-top: 16px;
  font-size: var(--size-small);
  line-height: 1.5;
}

.tool-gate-status:not(:empty) {
  margin-top: 14px;
  font-size: var(--size-small);
  line-height: 1.55;
}
.tool-gate-status--error { color: var(--error); }
.tool-gate-status--error a { color: var(--error); }

/* Field hint and text link, mirroring css/contact.css. They are repeated here
   for the same reason .field is: a tool page does not load that file. */
.form-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.field > .form-hint { margin-top: 8px; }
.form-hint--error { color: var(--error); }

.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-ui) ease;
}
.text-link:hover { color: var(--gold-hover); }
.text-link .arrow {
  display: inline-block;
  transition: transform var(--dur-ui) var(--ease-resolve);
}
.text-link:hover .arrow { transform: translateX(3px); }

/* Honeypot. Off-screen, out of the accessibility tree (aria-hidden on the
   wrapper), out of the tab order (tabindex -1 on the input). */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tool-label-btn,
  .tool-gate,
  .tool-gate .btn-primary,
  .tool-gate .btn-arrow,
  .tool-gate .text-link,
  .tool-gate .text-link .arrow,
  .tool-gate .field-input {
    transition: none;
  }
}

/* ----------------------------------------------------------- 4 close -- */

/* The quiet route back and the one way into the practice, on one line. */
.tool-foot {
  grid-column: 1 / span 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 44px;
}

/* The tertiary arrow leads the label here, and the hover moves it the way the
   link goes: back, not forward. */
.tool-back .btn-tertiary:hover .btn-arrow-glyph { transform: translateX(-3px); }

.tool-foot-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

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

/* The mono control is one 12px line, so on the widths where the site is tapped
   rather than clicked it carries the padding that takes the target past 24px.
   The same rule .btn-tertiary uses, at the same breakpoint. */
@media (max-width: 860px) {
  .tool-label-btn { padding-block: 6px; }
}

@media (max-width: 1024px) {
  .tool-hero { padding-top: 60px; padding-bottom: 60px; }
  .tool-panel { grid-column: 1 / span 8; }
  .tool-foot { grid-column: 1 / span 8; }
  .tool-fields { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .tool-hero { padding-top: 44px; padding-bottom: 48px; }
  .tool-lede { margin-top: 22px; }
  .tool-fields { grid-template-columns: 1fr; row-gap: 24px; }
  .tool-results .instrument-figures { gap: 22px; }
  .tool-foot { align-items: flex-start; margin-top: 36px; }
  .tool-foot-cta { gap: 16px; }
  .tool-gate-card { padding: 18px 18px 16px; }
  .tool-gate .btn-primary { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------- 6 tables at phone width -- */

/* Any table on a tool page that cannot hold its columns at 390 carries
   .tool-table--stack, and every cell that needs its column name carries
   data-label. Below 640 the row becomes a stack: the column name on the left,
   the value on the right, the header row left to the screen reader.

   A cell with no data-label prints no name, which is how the row's own subject
   cell reads as a heading rather than as a labelled value. An empty cell, the
   kind a total row leaves under a middle column, is dropped. */
@media (max-width: 640px) {
  .tool-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .tool-table--stack,
  .tool-table--stack tbody,
  .tool-table--stack tr,
  .tool-table--stack td { display: block; width: auto; }

  .tool-table--stack tbody tr {
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--hairline);
  }
  .tool-table--stack tbody tr:first-child { padding-top: 4px; }

  .tool-table--stack td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    padding: 3px 0;
    border-bottom: 0;
  }
  .tool-table--stack td:empty { display: none; }

  .tool-table--stack td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }

  /* An editable cell takes what is left of the row and may shrink to do it.
     Below 120px it wraps under its label instead, which is what the long
     column names do on the narrowest phones. */
  .tool-table--stack td .field-input {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
  }
}