/*
  The Unheld Question — components
  Nav bar, buttons, stat strip, engagement rows, library tiles,
  CTA band, footer. Load tokens.css and base.css before this file.
*/

/* ---- Buttons ---------------------------------------------------------
   Buttons are rectangles. Solid ink or brass fill, or a 1px ink
   outline. Label in 12.5px uppercase Public Sans, tracking 0.12em,
   padding roughly 15×26px. Two per band, maximum. */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-button-size);
  font-weight: 500;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-align: center;
  padding: 15px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}

.btn--ink {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.btn--ink:hover { background: #2A2921; border-color: #2A2921; color: var(--color-paper); }

.btn--brass {
  background: var(--color-brass);
  color: var(--color-card);
  border-color: var(--color-brass);
}
.btn--brass:hover { background: var(--color-brass-hover); border-color: var(--color-brass-hover); color: var(--color-card); }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-paper); }

.band--ink .btn--outline,
.cta-band .btn--outline {
  color: var(--color-ui-on-ink);
  border-color: var(--color-border-on-ink);
}
.band--ink .btn--outline:hover,
.cta-band .btn--outline:hover { background: var(--color-border-on-ink); color: var(--color-paper); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* The small "← Back to the toolkit" link every tool page opens with. */
.back-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
}
.back-link:hover { color: var(--color-brass); }

/* Every tool page opens with the same header.band.band--paper —
   tighter than the generic .band padding, so the exercise itself is
   reachable without scrolling past a full marketing-height header. */
header.band { padding-top: 40px; padding-bottom: 32px; }

/* Momentary post-click state for a "Copy" button — swap to a solid
   ink fill while the "Copied." hint is showing. */
.btn--copied { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* ---- Hero / feature split ----------------------------------------------
   Asymmetric two-column split for a hero or lead-in band: a padded
   text column against a hairline, a full-bleed photo column with no
   padding of its own. */

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero-split__content {
  padding: var(--band-spacing) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-right: 1px solid var(--color-rule);
}
/* No fixed height — a grid row stretches its cells to match the
   tallest one by default, so the photo column naturally matches the
   content column's actual height instead of forcing extra whitespace. */
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__content { border-right: none; border-bottom: 1px solid var(--color-rule); }
  .hero-split__media { min-height: 260px; }
}

/* A narrower fixed photo column beside a content column — used for
   the practitioner / bio pattern. */
.split--photo {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 720px) {
  .split--photo { grid-template-columns: 1fr; }
}

/* ---- Nav bar ----------------------------------------------------------
   Ink ground, wordmark + descriptor left, links right, last link
   (the primary CTA) in brass-on-ink. */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
  background: var(--color-ink);
  color: var(--color-paper);
  flex-wrap: wrap;
}
.nav__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.nav__wordmark {
  font-family: var(--font-serif);
  font-size: 19px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
a.nav__wordmark:hover { color: var(--color-brass-on-ink); }
.nav__descriptor {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #A39C86;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  gap: 30px;
  font-size: 12.5px;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-ui-on-ink);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav__links a { color: inherit; }
.nav__links a:hover { color: var(--color-paper); }
.nav__links .is-primary { color: var(--color-brass-on-ink); }
.nav__links .is-primary:hover { color: #E0C481; }

/* Marks which page you're on — set automatically by nav-active.js
   (via data-section on the link), not by hand. A brass underline
   rather than a color swap, so brass keeps meaning "click me"
   (Enquire, buttons) and never doubles as a location marker. */
.nav__links a.is-current {
  color: var(--color-paper);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-brass-on-ink);
}

/* ---- Stat strip ---------------------------------------------------------
   A row of Caslon numerals over mono labels, dividers only between
   cells, hairline top and bottom. Defaults to four-up; add
   `.stat-strip--3` for three. */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.stat-strip--3 { grid-template-columns: repeat(3, 1fr); }
.stat-strip__item {
  padding: 30px 32px;
  border-right: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-strip__item:last-child { border-right: none; }
.stat-strip__value {
  font-family: var(--font-serif);
  font-size: var(--text-title-size);
  color: var(--color-brass);
}
.stat-strip__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-label);
}
@media (max-width: 720px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__item:nth-child(2) { border-right: none; }
  .stat-strip--3 { grid-template-columns: 1fr; }
  .stat-strip--3 .stat-strip__item { border-right: none; border-bottom: 1px solid var(--color-rule); }
  .stat-strip--3 .stat-strip__item:last-child { border-bottom: none; }
}

/* ---- Engagement list rows ---------------------------------------------
   Numbered rows: mono numeral, item title, description, mono meta,
   in a 4-column grid, separated by hairlines. */

.list-row {
  display: grid;
  grid-template-columns: 60px 300px 1fr 130px;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
}
.list-row__number {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-brass);
}
.list-row__title {
  font-family: var(--font-serif);
  font-size: var(--text-item-size);
  margin: 0;
}
.list-row__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-body);
  margin: 0;
}
.list-row__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-label);
}
@media (max-width: 900px) {
  .list-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Tiles / cards ------------------------------------------------------
   Cards sit on shaded paper or an ink band, separated by 1px gaps
   that let the ground show through as the dividing rule. */

/* Flexbox, not grid: with a variable-length list (a toolkit that
   grows over time) grid pre-allocates cells for a full row and an
   odd trailing item leaves an empty cell that still paints the
   container's rule-colored background — a visible blank block. Flex
   items only ever occupy the space they need. */
.tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--color-rule);
}
.tile-grid--2 .tile,
.tile-grid--2 .tile--soon { flex: 1 1 calc(50% - 1px); }
.tile-grid--3 .tile,
.tile-grid--3 .tile--soon { flex: 1 1 calc(33.333% - 1px); }
.band--ink .tile-grid { background: var(--color-rule-on-ink-strong); }

.tile {
  background: var(--color-card);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tile__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
}
.tile__title {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: 0;
}
.tile__desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: #6A665A;
  margin: 0;
}
/* The concrete output a tool leaves you with — set off by its own
   hairline so it reads as a distinct, load-bearing line, not more
   description. */
.tile__takeaway {
  margin-top: 14px;
}
.tile__takeaway-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label);
  margin-bottom: 6px;
}
.tile__takeaway-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-body);
}
.tile__link {
  font-size: 14px;
  color: var(--color-brass);
}

.tile--on-ink {
  background: var(--color-card-on-ink);
  min-height: 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding: 26px;
  gap: 16px;
}
.tile--on-ink .tile__title { font-size: 18px; }
.tile--on-ink .tile__link { color: var(--color-brass-on-ink); font-family: var(--font-mono); font-size: 11px; }

/* A tool that isn't built yet — same card, quieter. The link slot
   becomes a plain label instead of brass, since there's nowhere to
   go yet. */
.tile--soon { opacity: 0.6; }
.tile--soon .tile__link { color: var(--color-label); }

@media (max-width: 720px) {
  .tile-grid--2 .tile, .tile-grid--2 .tile--soon,
  .tile-grid--3 .tile, .tile-grid--3 .tile--soon { flex-basis: 100%; }
}

/* ---- CTA band ----------------------------------------------------------
   The one place two buttons stack instead of sit side by side —
   a primary brass fill over a secondary outline, on an ink ground. */

.cta-band {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 96px var(--gutter);
  background: var(--color-ink);
  color: var(--color-paper);
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-band__actions .btn { width: 100%; }

/* The band is an ink ground but doesn't carry .band--ink/.on-ink, so
   its body copy would otherwise fall through to the default dark
   .body color and render nearly invisibly. Match the on-ink body
   treatment used elsewhere. */
.cta-band .body,
.cta-band p { color: var(--color-body-on-ink); }
@media (max-width: 720px) {
  .cta-band { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Footer -------------------------------------------------------------- */

.footer {
  background: var(--color-ink);
  border-top: 1px solid var(--color-border-on-ink);
  color: var(--color-label-on-ink);
  padding: 28px var(--gutter);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.footer__links { display: flex; gap: 26px; }
.footer a { color: inherit; }
.footer a:hover { color: var(--color-paper); }

/* ---- Spec tables (for guides / documentation pages) ---------------------- */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.spec-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-label);
  font-weight: 400;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--color-ink);
}
.spec-table td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}
.spec-table .swatch {
  width: 52px;
  height: 22px;
  border: 1px solid var(--color-rule);
}

/* ---- Voice: sounds-like / doesn't --------------------------------------- */

.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-rule);
}
.voice-grid__col {
  background: var(--color-paper-shaded);
  padding: 22px 24px;
}
.voice-grid__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.voice-grid__col--do .voice-grid__label { color: var(--color-brass); }
.voice-grid__col--dont .voice-grid__label { color: var(--color-label); }
.voice-grid__body { font-size: 14.5px; line-height: 1.7; }
.voice-grid__col--do .voice-grid__body { color: var(--color-body); }
.voice-grid__col--dont .voice-grid__body { color: var(--color-label); }
@media (max-width: 640px) {
  .voice-grid { grid-template-columns: 1fr; }
}

/* ---- Callout box ----------------------------------------------------
   A bordered box for a single piece of content that needs to stand
   apart without a filled background — a naming lockup, a live tool
   result. Square corners, hairline border; `.callout--accent` swaps
   the hairline for brass when the content is the point of the page. */

.callout {
  border: 1px solid var(--color-rule);
  padding: 28px 30px;
}
.callout--accent { border-color: var(--color-brass); }

/* ---- Form fields ------------------------------------------------------
   Inputs follow the same discipline as everything else: square
   corners, a hairline border, brass on focus. Public Sans throughout;
   labels are mono eyebrows. */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label);
}
.field__hint {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-label);
  margin: -2px 0 2px;
}
.field__input {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  padding: 12px 14px;
  width: 100%;
}
textarea.field__input { resize: vertical; min-height: 84px; }
.field__input:focus { border-color: var(--color-brass); }
.field__input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 1px; border-color: var(--color-brass); }
.field__input::placeholder { color: #767163; }  /* ~4.5:1 on paper — several placeholders carry format guidance */

/* A single selectable row — radio or checkbox — styled like a list
   row rather than a native control. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-rule);
  cursor: pointer;
}
.choice:last-child { border-bottom: none; }
.choice input { margin-top: 4px; accent-color: var(--color-brass); flex-shrink: 0; }
.choice__body { display: flex; flex-direction: column; gap: 3px; }
.choice__title { font-size: 15px; color: var(--color-ink); }
.choice__preview {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-label);
  font-style: italic;
}

/* ---- Tool steps ---------------------------------------------------------
   A vertical, numbered sequence for a guided exercise — the same
   "number the sections" discipline as .list-row, turned upright for
   a form instead of a table row. */

.tool-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-rule);
}
.tool-step:last-child { border-bottom: none; }
.tool-step__number {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-brass);
}
.tool-step__body { display: flex; flex-direction: column; gap: 16px; }
.tool-step__title {
  font-family: var(--font-serif);
  font-size: var(--text-item-size);
  margin: 0;
}
@media (max-width: 640px) {
  .tool-step { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Row table ------------------------------------------------------
   A repeatable set of rows for exercises with a variable-length list
   (every role you've held, every stakeholder, etc.) — each row a
   little group of labeled fields plus a remove control, divided by
   hairlines. Add rows with a .btn--outline "+ Add another" below. */

/* No top border of its own — in its current usage a .row-table
   always follows a .section-header, whose own bottom rule already
   marks the start; a second rule right under it read as a stray
   double line. */
.row-table { }
.row-table__row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr 28px;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
}
.row-table__remove {
  background: none;
  border: none;
  padding: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--color-label);
  cursor: pointer;
}
.row-table__remove:hover { color: var(--color-brass); }
@media (max-width: 720px) {
  .row-table__row {
    grid-template-columns: 1fr;
    gap: 14px;
    position: relative;
    padding-right: 36px;
  }
  .row-table__remove { position: absolute; top: 20px; right: 0; }
}

/* ---- Tool-page primitives -----------------------------------------------
   Shared across toolkit pages (tools/*.html): a plain result card, a
   "you leave with" hairline intro above it, a dark preformatted
   output block, an inline hint, a closing pull-quote, a small tag,
   and a row of paired fields. Promoted here once a second tool
   needed the identical rule set. */

.tool-card {
  background: var(--color-card);
  border: 1px solid var(--color-rule);
  padding: 24px;
  margin-top: 20px;
}

.leave-with {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
}
.leave-with p { margin-top: 8px; }

.output {
  background: var(--color-ink);
  color: var(--color-ui-on-ink);
  padding: 24px;
  margin-top: 20px;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
}
.output-label { color: var(--color-brass-on-ink); }

.hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
  margin-top: 10px;
  display: inline-block;
}

.closing { padding: 40px 0 20px; }
.closing p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.4;
  color: var(--color-ink);
  max-width: 44ch;
  margin: 0;
}

/* A small bordered mono tag — "optional", "beta", etc. — beside a label. */
.flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
  border: 1px solid var(--color-rule);
  padding: 2px 6px;
  margin-left: 8px;
}

/* A row of paired .field elements — e.g. "next step" beside "by when". */
.field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.field-row > .field { flex: 1; min-width: 220px; }

/* A small mono tag-button — quick-assign choices inside a sortable
   strip (e.g. "Do now" / "Keep" / "Teach"). The class is bare `.small`
   because tool JS creates these with `className = 'small'` directly. */
.small {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 10px;
  cursor: pointer;
}
.small:hover { border-color: var(--color-brass); color: var(--color-brass); }

/* The plain outer wrapper for a list of sortable strips — a 1px
   rule-colored gap between cards, same trick as .tile-grid. */
.strip-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-rule); margin-top: 16px; }

/* ---- Quadrant / category board -------------------------------------
   Sort items into 2–3 labeled piles. Used by any "dump, then sort"
   exercise. .quad-grid holds the columns; .quad is one pile. */
.quad-grid { display: grid; gap: 1px; background: var(--color-rule); margin-top: 20px; }
.quad-grid--2 { grid-template-columns: repeat(2, 1fr); }
.quad-grid--3 { grid-template-columns: repeat(3, 1fr); }
.quad { background: var(--color-card); padding: 16px; min-height: 70px; }
.quad .qhead {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 8px;
  display: block;
}
.quad ul { list-style: none; margin: 0; padding: 0; }
.quad li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-ink);
  padding: 4px 0;
  border-bottom: 1px solid var(--color-rule);
}
.quad li:last-child { border-bottom: none; }
.quad.empty::after { content: "—"; color: var(--color-rule); font-family: var(--font-mono); }
@media (max-width: 600px) {
  .quad-grid--2, .quad-grid--3 { grid-template-columns: 1fr; }
}

/* A conditional insight, shown only when a tool's JS decides the
   answers warrant a second look — a shaded strip with a brass rule,
   hidden by default. Toggle with the .show class. */
.nudge {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-paper-shaded);
  border-left: 2px solid var(--color-brass);
  font-size: 14.5px;
  color: var(--color-ink);
  display: none;
}
.nudge.show { display: block; }

/* ---- Wizard shell -----------------------------------------------------
   Shared scaffold for guided, step-at-a-time tools — a sequential or
   branching exercise shown one screen at a time, rather than the
   single scrolling page the rest of the toolkit uses. First used by
   "The room before the room"; confirmed as a real pattern (not a
   one-off) by a second tool needing the identical shell.

   Structure: `.wizard` on the outer wrapper (alongside `.page`) for
   the sticky-footer flex layout; a `.topbar` with a `.back-link` and
   a `#stepIndicator` `.eyebrow`; a `.progress-track`/`.progress-fill`
   hairline; `main` > `.stage` > one `.panel` per step, toggled with
   `.hidden`; a closing `.ink-band` summary. Each tool's own JS drives
   `.hidden` and the progress width — none of that is here, only the
   shared look. */

.wizard { display: flex; flex-direction: column; min-height: 100vh; }
.wizard main { flex: 1; display: flex; justify-content: center; padding: 64px 32px 96px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--color-rule);
}
.progress-track { height: 1px; background: var(--color-rule); width: 100%; }
.progress-fill { height: 1px; background: var(--color-brass); transition: width 0.4s ease-out; }

.stage { width: 100%; max-width: 560px; }
.hidden { display: none !important; }
.panel { animation: wizard-rise 0.4s ease-out; }
@keyframes wizard-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .progress-fill { transition: none; }
}

.step-label { margin-bottom: 18px; }
.eyebrow.muted { color: var(--color-label); }

/* A step's intro paragraph. */
.lede { font-size: 16px; line-height: 1.7; margin-bottom: 28px; max-width: 62ch; }

/* A wizard question field: mono label + a card-toned input/textarea.
   Named .q-field, not .field — the shared .field (a flex label+input
   group used elsewhere in the toolkit) means something structurally
   different, so this keeps its own name rather than collide with it. */
.field-label {
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  color: var(--color-label);
  margin-bottom: 10px;
}
.q-field { margin-bottom: 28px; }
.q-field.small-gap { margin-bottom: 16px; }
.q-field input[type="text"], .q-field textarea {
  width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-rule);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-ink);
  resize: vertical;
}
.q-field textarea { min-height: 96px; line-height: 1.6; }
.q-field input[type="text"]:focus, .q-field textarea:focus { outline: 2px solid var(--color-brass); outline-offset: -1px; }
.q-field input::placeholder, .q-field textarea::placeholder { color: #767163; }

/* The closing ink-band summary. Each tool sets its own h2 max-width
   (headline lengths differ) and any result-specific content below. */
.ink-band { background: var(--color-ink); color: var(--color-body-on-ink); padding: 72px 32px; }
.ink-band .stage-inner { max-width: 560px; margin: 0 auto; }
.ink-band .eyebrow { color: var(--color-brass-on-ink); }
.ink-band h2 { color: var(--color-paper); font-size: 30px; line-height: 1.25; margin: 18px 0 24px; }
.headline-rule { width: 48px; height: 1px; background: var(--color-brass-on-ink); margin-bottom: 18px; }
.ink-band .btn--outline { border-color: var(--color-brass-on-ink); color: var(--color-brass-on-ink); }
.ink-band .btn--outline:hover { background: rgba(201,169,97,0.1); }

@media (max-width: 600px) {
  .wizard main { padding: 40px 20px 72px; }
  .ink-band { padding: 56px 20px; }
}