/* Markup calculator — site-local layer on top of the shared Identity B system.
   AAA+++ STUDIO PREMIUM (_plans/AAA-PLUS-STUDIO-PREMIUM.md §3.2, §3.3, §4).

   RULES THIS FILE OBEYS
   - It never re-declares --shadow, --radius* or a second shadow. The calc card
     is the one floating object; its elevation comes from the shared layer.
   - It never re-adds backdrop-filter to the sticky header.
   - Semantic green/red (--pos/--neg) appear on RESULT VALUES only, never on
     chrome, borders or backgrounds.
   - Nothing here animates layout: no height, margin, width or translate
     transitions. CLS stays 0.00. */

/* ---------------------------------------------------------- the calc card */
/* radius/shadow deliberately absent — .calc-card in styles.css owns both, and
   the old local `border-radius: 20px; box-shadow: var(--shadow)` here was
   fighting the collapsed radius scale. */
.calc-card {
  max-width: 660px;
  margin: 26px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.calc-top { padding: 24px 24px 22px; }
.mode-row { display: flex; justify-content: center; margin-bottom: 20px; }
.mode-row .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mode-row .seg::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------ input wells */
/* Well geometry (sunken ground, inset hairline, 48px min-height) comes from
   the shared layer's `.calc-card input[type="text"]` rule. This block only
   sets the typography and the currency/percent prefix. */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.fig-q {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.amount-field { position: relative; }
.amount-field .cur {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1rem; font-weight: 500;
  color: var(--muted); pointer-events: none;
}
.amount-input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
/* The old rule removed the outline and replaced it with a soft glow — §3.6
   says focus is a 2px accent outline at 2px offset, everywhere, never removed.
   The shared layer provides it; this only keeps the well from going flat. */
.amount-input:focus-visible { background: var(--surface); }

/* --------------------------------------------------------- the result well */
.out {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding: 22px 24px 20px;
}
.out-head {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 460px) { .out-head { grid-template-columns: 1fr; gap: 14px; } }

.out-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fig-k {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.out-fig--lead .result-v { font-size: clamp(2.3rem, 7.5vw, 3.1rem); }
.out-fig .result-u { margin-top: 2px; }

/* ------------------------------------ the disambiguation: markup vs margin */
/* This pair is the whole reason the site exists. Both percentages come from
   the same inputs, sit at the same size and weight so neither reads as the
   "real" one, and each carries its own denominator and its own formula. A
   percentage never appears here without the words "of cost" or "of price". */
.pair-k { margin: 16px 0 10px; }
.out-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.out-pair > .out-fig { padding: 14px 16px 13px; }
.out-pair > .out-fig + .out-fig { border-left: 1px solid var(--line); }
@media (max-width: 460px) {
  .out-pair { grid-template-columns: 1fr; }
  .out-pair > .out-fig + .out-fig { border-left: 0; border-top: 1px solid var(--line); }
}
.fig-n { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.out-pair .result-v { font-size: clamp(1.9rem, 6vw, 2.4rem); }
.fig-eq {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  overflow-x: auto;
}

/* Semantic colour, results only. */
.result-v.pos { color: var(--pos); }
.result-v.neg { color: var(--neg); }

.out .hint {
  font-size: .86rem;
  color: var(--ink-2);
  margin-top: 14px;
  text-align: center;
}
.out .hint b { font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.out .srcline { margin-top: 14px; }

/* ------------------------------------------------------- the sticky handoff */
/* The old local rule turned .handoff into a centred flex row of two buttons,
   which fought the shared block anatomy (kicker / title / reason). Only the
   width and placement are set here; the block itself is shared furniture. */
.handoff {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.handoff-alt {
  max-width: 660px;
  margin: 12px auto 0;
  font-size: .9rem;
  color: var(--ink-2);
}
.handoff-alt .spec { display: block; margin-top: 3px; text-transform: none; letter-spacing: .02em; }

/* ------------------------------------------------- the two formulas in prose */
.pair-def {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}
@media (max-width: 620px) { .pair-def { grid-template-columns: 1fr; } }
.pair-def > div {
  border-top: 2px solid var(--accent);
  padding-top: 14px;
}
.pair-def .kicker { display: block; margin-bottom: 8px; }
.pair-def .formula {
  font-family: var(--mono);
  font-size: .82rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin: 0 0 10px;
  overflow-x: auto;
  white-space: pre;
}
.pair-def p { font-size: .92rem; color: var(--ink-2); margin: 0; }

/* ------------------------------------------------------- conversion table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl-wrap caption {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-2); font-weight: 600;
}
.tbl-wrap caption .vintage { float: right; color: var(--muted); font-weight: 400; }
.tbl-wrap th, .tbl-wrap td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl-wrap thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tbl-wrap td.n { font-variant-numeric: tabular-nums lining-nums; }
.tbl-wrap tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap tr.self td { background: var(--accent-soft); font-weight: 650; }

/* ------------------------------------------------------------- bridge card */
/* §6.1.4: the one card that leaves the cluster keeps a "different family"
   edge. The shared AAA+++ layer ships .rel-card but not .rel-card.bridge yet,
   so the grammar is held here until it lands upstream. */
.rel-card.bridge {
  border-style: dashed;
  border-top-style: solid;
  border-top-color: var(--line-2);
  background: transparent;
}
.rel-card.bridge:hover { border-top-color: var(--accent); }

/* --------------------------------------------------------------- odds/ends */
.h1-sm { font-size: 2rem; margin-bottom: 16px; }
.foot-legal { max-width: 70ch; text-transform: none; letter-spacing: .02em; }
.hero .crumbs { margin-bottom: 14px; }

/* ---- THE SET PIECE: the twin dials -------------------------------------
   One profit, two arcs, two printed scales. Identity B: hairline, mono
   labels, tabular numerals, no lift. */
.dials { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.dials-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.dial { text-align: center; min-width: 0; }
.dial-svg { width: 100%; max-width: 168px; height: auto; display: block; margin: 0 auto; }
.dial-track {
  fill: none; stroke: var(--surface-sunken); stroke-width: 9; stroke-linecap: round;
}
.dial-fill {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dasharray var(--t-fast) var(--ease-out);
}
/* Selling below cost. The arc empties rather than reversing; this only
   recolours the (zero-length) stroke so the state is not silently identical
   to "exactly break-even". */
.dial-fill.is-neg { stroke: var(--muted); }
.dial-v {
  margin-top: -14px;
  font-family: var(--mono); font-weight: 700; font-size: 1.32rem; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.dial-v small { font-size: .74rem; color: var(--muted); margin-left: 1px; }
.dial-k {
  margin-top: 2px; font-size: .82rem; color: var(--ink-2); font-weight: 600;
}
.dial-scale {
  margin-top: 2px; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.dial-scale b { color: var(--accent); font-weight: 700; }
.dials-mid { text-align: center; padding: 0 2px; }
.dials-eq {
  display: inline-block; font-size: .68rem; line-height: 1.45; color: var(--muted);
  font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.dials-eq b {
  font-size: .96rem; color: var(--ink); letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.dials-cap {
  margin-top: 12px; font-size: .82rem; color: var(--muted); line-height: 1.55; text-align: center;
}
.dials-cap b { color: var(--ink); }

@media (max-width: 560px) {
  /* Stacking keeps both arcs legible; side by side at 375px each dial is
     ~150px wide and the value overlaps its own label. The "same profit" chip
     becomes a full-width rule BETWEEN them, which reads as the equals sign it
     is meant to be. */
  .dials-row { grid-template-columns: 1fr; gap: 4px; }
  .dials-mid { padding: 6px 0; }
  .dials-eq { display: flex; align-items: center; justify-content: center; gap: 6px; }
  .dials-eq br { display: none; }
  .dial-svg { max-width: 190px; }
}
/* Margin's mathematical ceiling, drawn on the same arc as the fill so it
   cannot drift from what it annotates. */
.dial-ceil {
  fill: none; stroke: var(--ink-2); stroke-width: 13; opacity: .5; stroke-linecap: butt;
}