/*
 * THE FREE TOOLS. 0.67.0.
 *
 * Loaded only by the pages that carry a tool (`extraStyles` in their front
 * matter), so every other page's critical path is unchanged. Everything here
 * is drawn from the tokens in main.css; no colour is typed.
 *
 * No inline style anywhere (non-negotiable 7), so the score bars are classes
 * rather than a width set on the element: the script picks the class nearest
 * the score, in steps of five, and the step is never more than half a bar's
 * pixel width on any screen this site supports.
 */

.tool-form { display: grid; gap: var(--s-4); max-width: 40rem; }
.tool-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.tool-row .field { flex: 1 1 16rem; margin: 0; }
.tool-row .btn { flex: 0 0 auto; }
.tool-status { min-height: 1.5em; color: var(--ink-2); }
.tool-status.is-error { color: var(--critical); }
.tool-busy { display: flex; gap: var(--s-3); align-items: center; color: var(--ink-2); }
.tool-busy__dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--accent); animation: tool-pulse 1s ease-in-out infinite alternate; }
@keyframes tool-pulse { from { opacity: 0.25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tool-busy__dot { animation: none; } }

/* ---------- the score ----------------------------------------------------- */
.score-card { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; padding: var(--s-6); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
@media (max-width: 40rem) { .score-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); } }
.score-card__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--ink); }
.score-card__of { display: block; margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); }
.score-card__band { display: inline-block; margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.09em; padding: 0.35rem 0.7rem; border-radius: var(--radius); }
.band--strong { color: var(--good); background: var(--accent-2-bg); }
.band--gaps { color: var(--accent-2); background: var(--accent-2-bg); }
.band--work { color: var(--flag); background: var(--flag-bg); }
.band--urgent { color: var(--critical); background: var(--critical-bg); }
.score-card__host { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere; }

.bars { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.bar__t { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--step--1); }
.bar__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.bar__track { margin-top: var(--s-2); height: 0.5rem; border-radius: 0.25rem; background: var(--paper-2); overflow: hidden; }
.bar__fill { display: block; height: 100%; width: 0; background: var(--accent-2); }
.bar__fill.is-low { background: var(--flag); }
.bar__fill.is-poor { background: var(--critical); }
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; }
.w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; }
.w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; }
.w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }

.score-top { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.score-top__i { padding: var(--s-4); border: 1px solid var(--rule); border-left: 4px solid var(--flag); border-radius: var(--radius); background: var(--surface); }
.score-top__i.is-high { border-left-color: var(--critical); }
.score-top__t { display: block; font-weight: 600; }
.score-top__d { display: block; margin-top: var(--s-1); color: var(--ink-2); font-size: var(--step--1); }
.score-top__fix { display: block; margin-top: var(--s-2); font-size: var(--step--1); }

/* ---------- results that are figures ------------------------------------ */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4); }
.figure-box { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.figure-box__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1; font-variant-numeric: tabular-nums; }
.figure-box__t { display: block; margin-top: var(--s-2); color: var(--ink-2); font-size: var(--step--1); }
.figure-box--accent { border-color: var(--accent); border-width: 2px; }

.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-4) var(--s-5); }
.numbers .field { margin: 0; }
/* 0.68.0: the inputs in one row line up whatever their labels do. Labels of
   one and two lines put the boxes at different heights, which read as a broken
   form (Tony's screenshot of 20 Oct 2026). Each field spans three shared row
   tracks (label, box, hint) through subgrid; without subgrid the label keeps
   two lines of room, which does the same job less exactly. */
.numbers .field > label { min-height: 2.9em; display: flex; align-items: flex-end; }
@supports (grid-template-rows: subgrid) {
  .numbers .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.4rem; }
  .numbers .field > label { min-height: 0; }
}

/* ---------- the gate and what follows it -------------------------------- */
.tool-gate { margin-top: var(--s-6); padding: var(--s-6); border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
@media (max-width: 40rem) { .tool-gate { padding: var(--s-5); } }
.tool-gate .field { max-width: 30rem; }
.tool-done { margin-top: var(--s-6); padding: var(--s-5); border-left: 4px solid var(--good); background: var(--accent-2-bg); border-radius: var(--radius); }
.tool-done:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.tool-next { margin-top: var(--s-6); }

/* ---------- the hub ----------------------------------------------------- */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.tool-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tool-card__k { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); }
.tool-card__t { margin: 0; }
.tool-card__d { color: var(--ink-2); }
.tool-card__go { margin-top: auto; font-weight: 600; color: var(--accent); text-underline-offset: 0.2em; padding: var(--s-2) 0; }
.tool-card__go:hover { color: var(--accent-hov); }

/* ---------- a checklist ------------------------------------------------- */
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.check input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--accent); }
.check__t { font-weight: 600; }
.check__d { display: block; margin-top: var(--s-1); color: var(--ink-2); font-size: var(--step--1); }
.check__who { display: block; margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-2); }
.tally { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-2); }

/* ---------- for sale ---------------------------------------------------- */
.sale { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6) 0; border-top: 1px solid var(--rule); }
.sale:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 52rem) { .sale { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
.sale__img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.sale__mark { display: inline-block; font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.09em; padding: 0.3rem 0.6rem; border-radius: var(--radius); color: var(--on-accent); background: var(--accent); }
/* 0.68.0: the asking price, once, ex GST (work.json `priceExGst`). */
.sale__price { margin: var(--s-4) 0 0; color: var(--ink-2); }
.sale__fig { font-size: var(--step-3); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
@media (min-width: 64rem) { .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sale-asks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sale-asks li { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); align-items: baseline; }
.sale-asks a { font-weight: 600; }
.sale-asks__p { font-variant-numeric: tabular-nums; color: var(--ink-2); }