/* Hourly Rate Calculator — site-local skin on top of the shared Identity B base.
   AAA+++ STUDIO PREMIUM (_plans/AAA-PLUS-STUDIO-PREMIUM.md §3.2, §4).

   This file used to be the GST calculator's skin, copied across and never
   re-read: 20px card radius, 14px pill inputs on --surface-2, and a `.handoff`
   rule that turned the sticky-loop block back into a row of buttons. All three
   fought the shared AAA+++ layer, and because tool.css loads AFTER styles.css
   the site-local version won. Everything below now either defers to the shared
   tokens or is genuinely local to this tool. */

/* ---- the ONE floating object (§3.2) ---------------------------------------
   Radius and shadow both come from the tokens now, so the Phase 0 value diff
   actually reaches this page instead of being overridden here. */
.calc-card {
  max-width: 760px;
  margin: 26px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
}
.calc-top { padding: 24px 24px 20px; }

/* ---- the deductions, as lines the reader can see and change ---------------
   The whole argument of this tool is that a sole trader's rate is NOT their old
   salary over 2,080 hours. Every deduction that makes that true is a labelled,
   editable field here — a rate calculator that hides its assumptions produces a
   number the reader cannot defend to a client. */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
  line-height: 1.35;
}
.field .field-note {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--muted);
  margin-top: 5px;
}
/* Sunken well. The 48px min-height and the inset hairline come from the shared
   layer via `.field input`; only the unit affordance is local. */
.unit-field { position: relative; display: block; }
.unit-field .cur {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .82rem; letter-spacing: .06em;
  color: var(--muted); pointer-events: none;
}
.unit-field input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  font: inherit;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.unit-field--suffix .cur { left: auto; right: 14px; }
.unit-field--suffix input { padding: 12px 46px 12px 14px; }

/* The working-year figure is DERIVED from the fields above it, not asserted.
   Labelled as an assumption because that is what it is — there is no statutory
   "hours in a working year". */
.assume {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.assume .k {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-2);
}
.assume .t { font-size: .86rem; color: var(--ink-2); }
.assume b { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }

/* ---- the result ----------------------------------------------------------
   Numerals tabular (.result-v, shared), unit in mono (.result-u, shared).
   Semantic colour appears on the gap figure ONLY — it is a result, never
   chrome. */
.out {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding: 22px 24px 24px;
}
.out-main { margin-bottom: 18px; }
.out-main .k {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.out-main .result-u { margin-left: 6px; }
.out-main .hint { font-size: .84rem; color: var(--muted); margin-top: 6px; }

.out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .out-grid { grid-template-columns: 1fr; } }
.out-cell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.out-cell .k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.out-cell .v { font-size: 1.06rem; font-weight: 650; font-variant-numeric: tabular-nums lining-nums; }
.out-cell .v.neg { color: var(--neg); }
.out-cell .v.pos { color: var(--pos); }

.gst-note { font-size: .86rem; color: var(--ink-2); margin-top: 14px; }
.gst-note b { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }

/* ---- the sticky loop stays a block ---------------------------------------
   NET_CSS is inlined in a <style> after this file, and its older `.handoff`
   rule (display:flex + a ::before reading "Next step") would otherwise beat the
   shared block anatomy on source order. `a.handoff` outranks `.handoff` on
   specificity, so the block wins regardless of order. */
a.handoff {
  display: block;
  justify-content: initial;
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius);
  text-align: left;
}
a.handoff::before { content: none; }

/* ---- breadcrumb (§6.2) --------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  margin-bottom: 18px; text-transform: uppercase;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--line-2); margin: 0 .35em; }
.crumbs [aria-current] { color: var(--ink-2); }
.hero .crumbs { justify-content: center; }

/* ---- the bridge card keeps its "different family" edge (§6.1.4) ---------- */
.rel-card.bridge { border-style: dashed; border-top-style: solid; }

/* The shared layer scopes .formula to .method; /how-it-works publishes the same
   block inside .prose, so the base rule lives here. */
.prose .formula {
  font-family: var(--mono);
  font-size: .875rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0 0;
  overflow-x: auto;
  white-space: pre;
  color: var(--ink-2);
}

/* ---- the rate-sensitivity table ----------------------------------------- */
.tbl-wrap tr.self td { background: var(--accent-soft); font-weight: 650; }
.tbl-wrap td.n, .tbl-wrap th.n { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.tbl-cap {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  margin-top: 12px;
}