/* 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;
}

/* ---- THE SET PIECE: the rate stack -------------------------------------
   Money UP, time DOWN. Identity B: hairline, mono keys, tabular numerals. */
.rs { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.rs-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 6px;
}
.rs-line--2 { margin-top: 16px; }
.rs-lk {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.rs-lv {
  font-family: var(--mono); font-weight: 700; font-size: .92rem; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.rs-bar {
  display: flex; width: 100%; height: 26px; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.rs-seg { min-width: 0; transition: width var(--t-fast) var(--ease-out); }
/* One accent, four weights — the segments are parts of ONE quantity, so they
   share a hue rather than becoming a four-colour chart. */
.rs-salary { background: var(--accent); }
.rs-over   { background: color-mix(in srgb, var(--accent) 62%, var(--surface)); }
.rs-acc    { background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.rs-profit { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
/* Time bar: the billable part is solid, the rest is visibly NOT money. */
.rs-bar--time { position: relative; }
.rs-billable { background: var(--accent); transition: width var(--t-fast) var(--ease-out); }
.rs-bar--time::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(45deg, var(--line) 0 3px, transparent 3px 7px);
}
.rs-keys {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px;
  font-size: .74rem; color: var(--muted);
}
.rs-key { display: inline-flex; align-items: center; gap: 5px; }
.rs-key b {
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums; font-weight: 700;
}
.rs-sw { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.rs-billable-sw { background: var(--accent); }
.rs-nonbill-sw {
  border: 1px solid var(--line-2);
  background: repeating-linear-gradient(45deg, var(--muted) 0 2px, transparent 2px 4px);
}
.rs-cap { margin-top: 12px; font-size: .82rem; color: var(--muted); line-height: 1.55; }
.rs-cap b { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 560px) {
  .rs-bar { height: 22px; }
  .rs-line { flex-wrap: wrap; gap: 2px 10px; }
  .rs-keys { font-size: .7rem; gap: 3px 10px; }
}