/* ============================================================================
   Receipt maker — SITE-LOCAL layer, on top of the shared Identity B stylesheet.
   AAA+++ STUDIO PREMIUM (_plans/AAA-PLUS-STUDIO-PREMIUM.md §3.2, §4 calc-card
   row, §5 cluster T).

   Removed 2026-07-31: this file used to open with ~68 lines of the GST
   CALCULATOR's stylesheet (.calc-top, .amount-input, .out, .out-grid,
   .quick-answer, .shortcut) copied in wholesale. None of those classes appear
   in this site's markup, and one of them — a local `.calc-card { border-radius:
   20px }` — was silently overriding the shared 14px radius the moment the
   receipt builder adopted `.calc-card`. Dead CSS that changes live rendering is
   worse than dead CSS. Also removed: a local `.handoff { display:flex }` that
   would have flattened the shared sticky-loop block anatomy.

   Nothing here re-adds backdrop-filter to .site-head.
   ========================================================================== */

/* ---- brand lockup: the mono sub-line naming this site's function --------- */
.brand > span { display: flex; flex-direction: column; line-height: 1.14; }

/* ---- breadcrumb trail (privacy page) ----------------------------------- */
/* The mono font/size/tracking already come from the shared .crumbs rule; this
   is layout only. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  color: var(--muted); text-transform: uppercase; margin-bottom: 18px;
}
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.crumbs a:hover { color: var(--ink-2); border-bottom-color: var(--accent); }
.crumbs .sep { margin: 0 .55em; color: var(--line-2); }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* ---- the receipt builder: THE one floating object ---------------------- */
/* §3.2 — exactly one object per page asks for action, so exactly one object
   carries --shadow. The document preview beside it is a sheet of paper, not a
   control surface: hairline only, no elevation, in either mode. */
.rc-app {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px; align-items: start; max-width: 1000px; margin: 26px auto 0;
}
@media (max-width: 900px) { .rc-app { grid-template-columns: minmax(0, 1fr); } }

.rc-form { background: var(--surface); border: 1px solid var(--line); padding: 20px; }
.rc-form .field { margin-bottom: 12px; }
.rc-form .lbl,
.rc-form label {
  display: block; font-size: .82rem; font-weight: 650;
  color: var(--ink-2); margin-bottom: 6px;
}
.rc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .rc-pair { grid-template-columns: 1fr; } }
.rc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* Textareas are not covered by the shared well rule (input/select only), and a
   flat textarea beside two sunken inputs is the tell that the wells were
   applied by class rather than by intent. */
.field textarea {
  width: 100%; min-height: 64px; padding: 11px 13px; font: inherit;
  color: var(--ink); resize: vertical;
  background: var(--surface-sunken);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(10, 16, 32, .05);
  transition: border-color var(--t-fast) var(--ease-out);
}
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
:root[data-theme="dark"] .field textarea { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4); }

/* ---- the GST split: this site's product, live ------------------------- */
/* Three figures, all tabular, all labelled: what was received, what of it is
   GST, and what is left. The GST component is the one set at result scale
   because it is the number the reader came for and the one they will retype
   into a GST return. */
.rc-split {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.rc-split-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; }
.rc-split-head .kicker { text-transform: uppercase; }
.rc-split-main { margin: 10px 0 12px; }
.rc-split-main .result-v { display: block; }
.rc-split-main .result-u { display: block; margin-top: 4px; }
.rc-split-rows { display: grid; gap: 0; }
.rc-split-rows div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.rc-split-rows .k { color: var(--muted); font-size: .88rem; }
.rc-split-rows .num { font-weight: 650; font-size: 1.04rem; color: var(--ink); }
.rc-split .srcline { margin-top: 14px; }

/* Static worked example in the answer section — same anatomy, no JS involved,
   so the arithmetic is legible with scripting off. */
.split-demo { margin: 18px 0 0; }
.split-demo dl { display: grid; gap: 0; margin: 0; }
.split-demo .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.split-demo .row:last-child { border-bottom: 1px solid var(--line); }
.split-demo dt { color: var(--muted); font-size: .9rem; margin: 0; }
.split-demo dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums lining-nums; }
.split-demo .row--key dd { color: var(--accent); font-weight: 750; }

/* ---- the printed document --------------------------------------------- */
/* No box-shadow: only the builder floats. */
#paper {
  background: #fff; color: #1e293b;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 34px 34px 26px;
  font-size: 14px; line-height: 1.55; min-height: 420px;
}
.rc-head { display: flex; justify-content: space-between; gap: 20px; }
.rc-head h3 { font-size: 17px; font-weight: 750; color: #0f172a; margin-bottom: 2px; }
.rc-head p { font-size: 12px; color: #64748b; white-space: pre-line; }
.rc-title { text-align: right; }
.rc-title span { font-size: 22px; font-weight: 800; letter-spacing: .04em; color: #1a46c9; display: block; }
.rc-title small { color: #94a3b8; font-size: 11px; letter-spacing: .1em; }
.rc-amount { text-align: center; margin: 26px 0; padding: 18px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; }
.rc-amount small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; font-weight: 700; display: block; }
.rc-amount div { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: #0f172a; margin: 2px 0; font-variant-numeric: tabular-nums lining-nums; }
.rc-gstline { font-variant-numeric: tabular-nums lining-nums; }
.rc-rows div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 2px; border-bottom: 1px solid #eef2f7; font-size: 13px; }
.rc-rows span { color: #64748b; }
.rc-rows b { color: #0f172a; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.rc-foot { margin-top: 22px; font-size: 11px; color: #94a3b8; }

/* ---- the reference table ---------------------------------------------- */
.gst-tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.gst-tbl th, .gst-tbl td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--line); }
.gst-tbl th:first-child, .gst-tbl td:first-child { text-align: left; }
.gst-tbl thead th { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 650; background: var(--surface-2); }
.gst-tbl tbody tr:last-child td { border-bottom: 0; }
.gst-tbl .n { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
.gst-tbl .n--gst { color: var(--accent); font-weight: 700; }

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

@media print {
  @page { size: A5 landscape; margin: 12mm; }
  body * { visibility: hidden; }
  .rc-print-zone, .rc-print-zone * { visibility: visible; }
  .rc-print-zone { position: absolute; left: 0; top: 0; width: 100%; }
  #paper { box-shadow: none; border: 0; border-radius: 0; padding: 0; }
}