/* Solo Tax Voucher Reconciler : fintech_precision_radar / top_over_bottom_ledger */

:root {
  --canvas: #E2E8F0;
  --paper: #FFFFFF;
  --chrome: #0F172A;
  --chrome-ink: #F8FAFC;
  --chrome-muted: #CBD5E1;
  --chrome-line: #1E293B;
  --ink: #0F172A;
  --muted: #334155;
  --primary: #0369A1;
  --primary-hover: #075985;
  --primary-active: #0C4A6E;
  --primary-ink: #FFFFFF;
  --primary-text: #0369A1;
  --action: #0F172A;
  --action-hover: #1E293B;
  --action-active: #334155;
  --positive: #047857;
  --line: #94A3B8;
  --line-soft: #CBD5E1;
  --field-line: #64748B;
  --field-bg: #F8FAFC;
  --tint: #F1F5F9;
  --radius: 4px;
  --radius-field: 3px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brass: #0369A1;
  --brass-deep: #0369A1;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ok-ink: #065F46;
  --ok-bg: #D1FAE5;
  --info-ink: #0369A1;
  --info-bg: #E0F2FE;
  --warn-ink: #92400E;
  --warn-bg: #FEF3C7;
  --danger-ink: #991B1B;
  --danger-bg: #FEE2E2;
  --neutral-ink: #334155;
  --neutral-bg: #F1F5F9;
  --deck-max: 1380px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-width: 0;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0;
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button,
a,
select,
label[for],
.check,
[data-preset-chip] {
  cursor: pointer;
}

button:disabled,
fieldset:disabled button,
fieldset:disabled input,
fieldset:disabled textarea,
fieldset:disabled .check {
  cursor: not-allowed;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.money,
.mono,
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Header: split_fintech_command_bar ---------- */

.appbar {
  width: calc(100% - 32px);
  max-width: 1380px;
  margin: 14px auto 0;
  border-radius: 8px;
  background-color: #0F172A;
  color: #F8FAFC;
  /* 12px vertical: the 40px header buttons need visible clearance inside
     the 48px bar (vision review read 4px as "0px top clearance"). */
  padding: 12px 20px;
  border: 1px solid #1E293B;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

.appbar__inner {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  max-height: 52px;
  white-space: nowrap;
  color: #F8FAFC;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.appbar__status {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid #334155;
  border-radius: 999px;
  background: #1E293B;
  font-size: 13px;
  font-family: var(--font-mono);
  color: #E2E8F0;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FBBF24;
}

body[data-plan="pro"] .status-dot {
  background: #34D399;
}

.appbar__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
}

.btn-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-height: 50px;
  padding: 8px 18px;
  border: 1px solid #0369A1;
  border-radius: 6px;
  background: #0369A1;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  line-height: 1.2;
}

.btn-header:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-header:active {
  background: var(--primary-active);
  transform: translateY(1px);
}

.btn-header:focus-visible {
  outline-color: #F8FAFC;
}

/* ---------- Workspace frame ---------- */

.workspace {
  width: 100%;
  max-width: calc(var(--deck-max) + 32px);
  margin: 0 auto;
  padding: 14px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.workspace__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.workspace__title h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.workspace__sub {
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-mono);
}

/* ---------- Top command deck ---------- */

.command-deck {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

.deck-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-left: 12px;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.deck-tab {
  min-height: 44px;
  padding: 10px 18px 9px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--tint);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  position: relative;
}

.deck-tab:hover {
  background: #FFFFFF;
  color: var(--ink);
}

.deck-tab:active {
  background: #E2E8F0;
}

.deck-tab[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--paper);
  box-shadow: inset 0 3px 0 var(--brass-deep);
}

.deck-tab.is-edited::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B45309;
}

.deck-body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cell {
  padding: 10px 12px 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cell:nth-child(3n) {
  border-right: 0;
}

.cell:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.cell__label,
.tfield label,
.notes-label,
.license__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}

.req,
.opt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 4px;
  white-space: nowrap;
}

.opt {
  text-transform: none;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  /* The legend hint carries a full sentence - nowrap overflowed 375px. */
  white-space: normal;
}

input[type="text"],
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-field);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.3;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input[type="text"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

input::placeholder,
textarea::placeholder {
  color: #475569;
  opacity: 1;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--field-line);
  border-bottom-color: var(--primary);
  box-shadow: inset 0 -3px 0 var(--primary);
  background: #FFFFFF;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger-ink);
  box-shadow: inset 0 -3px 0 var(--danger-ink);
}

select {
  width: 100%;
  min-width: 180px;
  box-sizing: border-box;
  appearance: none;
  padding-right: 30px;
  font-family: var(--font-body);
  background-image: linear-gradient(45deg, transparent 50%, #334155 50%), linear-gradient(135deg, #334155 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.money-input {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.money-input__unit {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 26px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  border-right: 1px solid #CBD5E1;
  pointer-events: none;
}

.money-input input {
  padding-left: 34px;
}

.cue-slot {
  display: grid;
  min-height: calc(2 * 1.35em);
  font-size: 12px;
  line-height: 1.35;
}

.cue-slot > * {
  grid-area: 1 / 1;
}

.field-hint {
  /* Vision review read --muted as "extremely faint" helper copy on the pale
     deck; #475569 keeps AA (7:1) without shouting. */
  color: #475569;
}

.cue-slot.has-error .field-hint {
  visibility: hidden;
}

.validation-cue {
  color: var(--danger-ink);
  font-weight: 600;
}

/* Quarter tranche grid */

.tranches {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tranches__legend {
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  float: left;
  width: 100%;
}

.tranche {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  min-width: 0;
}

.tranche__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}

.tranche__q {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chrome);
  color: var(--chrome-ink);
}

.tranche__due {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

.tranche__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  padding: 10px 12px 2px;
}

.tfield {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.tfield--wide {
  grid-column: 1 / -1;
}

/* Deck actions */

.deck-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.deck-status {
  font-size: 13px;
  color: var(--muted);
  min-height: 1.5em;
  flex: 1 1 260px;
}

.deck-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn-primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--primary-ink);
}

.btn-primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
}

.btn-primary:active {
  background: var(--action-active);
  transform: translateY(1px);
}

.btn-secondary {
  background: var(--paper);
  border-color: var(--field-line);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--tint);
  border-color: var(--ink);
}

.btn-secondary:active {
  background: #E2E8F0;
  transform: translateY(1px);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}

.btn-ghost:hover {
  color: var(--ink);
  background: var(--tint);
}

.btn-ghost:active {
  background: #E2E8F0;
}

.btn-link {
  background: transparent;
  color: var(--primary-text);
  padding: 10px 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover {
  color: var(--primary-active);
}

.btn-link:active {
  color: var(--ink);
}

button:disabled {
  opacity: 0.55;
}

/* ---------- Results workspace ---------- */

.results,
.confirmation-section,
.deliverable-sheet,
#executive-deliverable {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

.deliverable-sheet {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.results {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.results__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.results__head h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.results__status {
  font-size: 13px;
  color: var(--muted);
  min-height: 1.5em;
}

.results[data-state="stale"] .kpis,
.results[data-state="stale"] .panel,
.results[data-state="stale"] .exposure {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.results[data-state="stale"] .results__status {
  color: var(--danger-ink);
  font-weight: 600;
}

.exposure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--neutral-bg);
  min-height: 62px;
}

.exposure[data-tone="ok"] {
  border-left-color: var(--positive);
  background: #ECFDF5;
}

.exposure[data-tone="danger"] {
  border-left-color: var(--danger-ink);
  background: #FEF2F2;
}

.exposure__text {
  font-size: 14px;
  color: var(--ink);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--neutral-ink);
  background: var(--neutral-bg);
}

.tag--sm {
  font-size: 11.5px;
  padding: 2px 8px;
}

.tag[data-tone="ok"] { color: var(--ok-ink); background: var(--ok-bg); }
.tag[data-tone="info"] { color: var(--info-ink); background: var(--info-bg); }
.tag[data-tone="warn"] { color: var(--warn-ink); background: var(--warn-bg); }
.tag[data-tone="danger"] { color: var(--danger-ink); background: var(--danger-bg); }

.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.kpi {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.kpi:nth-child(3n) {
  border-right: 0;
}

.kpi:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.kpi--target {
  background: #F8FAFC;
  box-shadow: inset 0 3px 0 var(--brass-deep);
}

.kpi__label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
}

.kpi__value {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kpi[data-tone="danger"] .kpi__value { color: var(--danger-ink); }
.kpi[data-tone="info"] .kpi__value { color: var(--info-ink); }
.kpi[data-tone="ok"] .kpi__value { color: var(--positive); }

.kpi__sub,
.kpi__meta {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
}

.kpi__meta {
  min-height: 1.35em;
}

.meter {
  display: block;
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #E2E8F0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.meter__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--positive);
  transition: width 0.25s ease;
}

.meter--row {
  width: 100%;
  min-width: 90px;
}

tr[data-status="underpaid"] .meter__fill,
tr[data-status="unverified"] .meter__fill { background: #B45309; }
tr[data-status="unpaid"] .meter__fill,
tr[data-status="late"] .meter__fill { background: #B91C1C; }
tr[data-status="overpaid"] .meter__fill { background: var(--primary); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}

.panel__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.panel__note {
  font-size: 12.5px;
  color: var(--muted);
}

/* Waterfall */

.waterfall {
  list-style: none;
  margin: 0;
  padding: 8px 14px 10px;
}

.wf-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 4fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed #CBD5E1;
}

.wf-row:last-child {
  border-bottom: 0;
}

.wf-row__label {
  font-size: 13px;
  color: var(--ink);
}

.wf-row__track {
  position: relative;
  height: 18px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), #E2E8F0 calc(10% - 1px), #E2E8F0 10%);
  border-left: 1px solid var(--line);
}

.wf-row__bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 0;
  border-radius: 2px;
  background: var(--chrome);
  transition: left 0.25s ease, width 0.25s ease;
}

.wf-row__bar[data-kind="offset"] { background: #94A3B8; }
.wf-row__bar[data-kind="pay"] { background: var(--positive); }
.wf-row__bar[data-kind="gap"] { background: #64748B; }
.wf-row[data-tone="danger"] .wf-row__bar { background: #B91C1C; }
.wf-row[data-tone="info"] .wf-row__bar { background: var(--primary); }

.wf-row__value {
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}

/* Ledger table */

.table-wrap,
.sheet__table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap:focus-visible,
.sheet__table-wrap:focus-visible {
  outline-offset: -3px;
}

.ledger {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
}

.ledger th,
.ledger td {
  padding: 9px 12px;
  border-bottom: 1px solid #CBD5E1;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.ledger thead th {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}

.ledger tbody th {
  font-weight: 600;
}

.ledger .num {
  text-align: right;
}

.ledger tbody th,
.ledger tbody td {
  height: 60px;
}

.l-q { width: 7%; }
.l-due { width: 10%; }
.l-sched { width: 10%; }
.l-paid { width: 10%; }
.l-date { width: 10%; }
.l-conf { width: 12%; }
.l-meter { width: 10%; }
.l-var { width: 10%; }
.l-status { width: 10%; }
.l-flag { width: 11%; }

.ledger tfoot th,
.ledger tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  background: var(--tint);
  font-weight: 600;
}

.ledger td[data-tone="danger"] { color: var(--danger-ink); }
.ledger td[data-tone="info"] { color: var(--info-ink); }
.ledger td[data-tone="warn"] { color: var(--warn-ink); }

.ledger td[data-col="flag"] {
  font-size: 13px;
  font-weight: 500;
}

.disclaimer {
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* ---------- Client confirmation sheet ---------- */

.sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cert-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 16px;
  background: #F0F9FF;
  border-bottom: 1px solid var(--line);
  min-height: 60px;
}

.cert-banner[data-tone="pro"] {
  background: #ECFDF5;
}

.cert-banner__text {
  font-size: 13.5px;
  color: var(--ink);
}

.cert-banner__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cert-banner__cta[aria-hidden="true"] {
  visibility: hidden;
}

.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 18px 20px 14px;
  border-bottom: 2px solid var(--ink);
}

.sheet__head h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.sheet__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}

.sheet__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}

.sheet__stamp dt,
.sheet__summary dt {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.sheet__stamp dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
}

#cert-status[data-tone="ok"] {
  color: var(--positive);
}

.sheet__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.sheet__summary > div {
  padding: 12px 20px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.sheet__summary > div:last-child {
  border-right: 0;
}

.sheet__summary dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 600;
}

.sheet__table-wrap {
  padding: 0 20px;
}

.sheet__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
  margin: 14px 0;
}

.sheet__table caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding-bottom: 8px;
  color: var(--ink);
}

.sheet__table th,
.sheet__table td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  overflow-wrap: anywhere;
}

.sheet__table thead th {
  background: var(--tint);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.sheet__table .num {
  text-align: right;
}

.sheet__table tbody th,
.sheet__table tbody td {
  height: 4.2em;
}

.sheet__table .record span {
  display: block;
}

.c-voucher { width: 10%; }
.c-deadline { width: 13%; }
.c-due { width: 15%; }
.c-paid { width: 15%; }
.c-record { width: 27%; }
.c-outcome { width: 20%; }

.sheet__table td[data-tone="danger"] { color: var(--danger-ink); font-weight: 600; }
.sheet__table td[data-tone="warn"] { color: var(--warn-ink); font-weight: 600; }
.sheet__table td[data-tone="ok"] { color: var(--ok-ink); }

.sheet__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  border-top: 1px solid var(--line);
}

.sheet__block {
  padding: 14px 20px 16px;
  min-width: 0;
}

.sheet__block + .sheet__block {
  border-left: 1px solid var(--line);
}

.sheet__h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.flags li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  min-height: calc(2 * 1.5em);
}

.flags li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}

.flags li[data-tone="ok"]::before { background: var(--positive); }
.flags li[data-tone="info"]::before { background: var(--primary); }
.flags li[data-tone="warn"]::before { background: #B45309; }
.flags li[data-tone="danger"]::before { background: #B91C1C; }

.notes-print {
  display: none;
}

.pro-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chrome);
  color: var(--chrome-ink);
}

.practitioner {
  position: relative;
}

.practitioner__fields {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Locked state is signalled with muted ink rather than opacity: 0.45 opacity
   dropped the labels to ~2.4:1. #475569 on white stays at 7.6:1. */
.practitioner[data-locked="true"] .practitioner__fields,
.practitioner[data-locked="true"] .practitioner__fields label,
.practitioner[data-locked="true"] .practitioner__fields legend,
.practitioner[data-locked="true"] .practitioner__fields .opt,
.practitioner[data-locked="true"] .practitioner__fields .check {
  color: #475569;
}
.practitioner[data-locked="true"] .practitioner__fields button:disabled {
  opacity: 1;
  background: #64748B;
  border-color: #64748B;
  color: #FFFFFF;
}

textarea {
  resize: vertical;
  min-height: 76px;
  font-family: var(--font-body);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 13.5px;
  line-height: 1.4;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--primary);
}

.practitioner__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.finalize-status {
  font-size: 12.5px;
  color: var(--muted);
  min-height: calc(2 * 1.35em);
  line-height: 1.35;
  flex: 1 1 160px;
}

.practitioner__lock {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(30, 28, 23, 0.12);
  font-size: 13px;
  color: var(--ink);
}

.practitioner__lock[aria-hidden="true"] {
  visibility: hidden;
}

.sheet__fine {
  font-size: 12px;
  color: var(--muted);
  padding: 10px 20px 0;
  border-top: 1px solid var(--line);
}

.free-watermark {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding: 8px 20px 14px;
  letter-spacing: 0.02em;
}

body[data-plan="pro"] .free-watermark {
  visibility: hidden;
}

/* ---------- Pro modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(22, 41, 31, 0.62);
  overscroll-behavior: contain;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(30, 28, 23, 0.28);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal:focus {
  outline: none;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal__head h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  padding-top: 8px;
}

.icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 6px 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}

.icon-btn:hover {
  background: var(--tint);
}

.icon-btn:active {
  background: #E2E8F0;
}

.modal__price {
  font-size: 14.5px;
}

.modal__price strong {
  font-size: 18px;
  color: var(--ink);
}

.modal__list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  display: grid;
  gap: 4px;
}

.modal__fine,
.license__note {
  font-size: 12.5px;
  color: var(--muted);
}

.modal .btn-primary {
  width: 100%;
}

.license {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.license__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.license__status {
  font-size: 13px;
  font-weight: 600;
  min-height: calc(2 * 1.35em);
  line-height: 1.35;
  color: var(--muted);
}

.license__status[data-tone="danger"] { color: var(--danger-ink); }
.license__status[data-tone="ok"] { color: var(--positive); }

.noscript {
  max-width: 1380px;
  margin: 16px auto;
  padding: 12px 16px;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .ribbon,
  .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cell:nth-child(3n),
  .kpi:nth-child(3n) {
    border-right: 0;
  }

  .cell:nth-child(-n + 3),
  .kpi:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .tranches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sheet__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sheet__summary > div:nth-child(2) {
    border-right: 0;
  }

  .sheet__summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .sheet__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sheet__block + .sheet__block {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .cert-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cert-banner__actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .appbar__status {
    display: none;
  }

  .appbar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14.5px;
  }

  .appbar {
    width: calc(100% - 20px);
    margin-top: 10px;
    padding: 6px 12px;
  }

  .brand__name {
    font-size: 15.5px;
  }

  .btn-header {
    padding: 8px 12px;
  }

  .workspace {
    padding: 10px 10px 40px;
    gap: 14px;
  }

  .workspace__title h1 {
    font-size: 18px;
  }

  .workspace__sub {
    font-size: 11.5px;
  }

  .deck-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding-left: 0;
  }

  .deck-tab {
    padding: 7px 4px 6px;
    font-size: 12px;
    line-height: 1.2;
  }

  .deck-body {
    padding: 10px 10px 10px;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .ribbon,
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cell,
  .kpi {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 8px 10px 2px;
  }

  .kpi {
    padding: 10px;
  }

  .cell:nth-child(3n),
  .kpi:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .cell:nth-child(2n),
  .kpi:nth-child(2n) {
    border-right: 0;
  }

  .cell:nth-last-child(-n + 2),
  .kpi:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .ribbon .cell:nth-child(5),
  .ribbon .cell:nth-child(6) {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .ribbon .cell:nth-child(5) {
    border-bottom: 1px solid var(--line);
  }

  .kpi__value {
    font-size: 17px;
  }

  .tranches {
    grid-template-columns: minmax(0, 1fr);
  }

  .deck-actions__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .deck-actions__buttons > * {
    white-space: normal;
    text-align: center;
  }

  .results {
    padding: 12px 10px;
  }

  .exposure {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 6px;
    min-height: 110px;
  }

  .wf-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label value" "track track";
    gap: 4px 10px;
  }

  .wf-row__label { grid-area: label; }
  .wf-row__value { grid-area: value; }
  .wf-row__track { grid-area: track; }

  .waterfall {
    padding: 6px 10px 8px;
  }

  .panel__head {
    padding: 8px 10px;
  }

  .sheet__head {
    padding: 14px 12px 12px;
  }

  .sheet__summary > div {
    padding: 10px 12px;
  }

  .sheet__summary dd {
    font-size: 15px;
  }

  .sheet__table-wrap {
    padding: 0 12px;
  }

  .sheet__block {
    padding: 12px;
  }

  .flags li {
    min-height: calc(3 * 1.5em);
  }

  .practitioner__lock {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .cert-banner {
    padding: 8px 12px;
    min-height: 120px;
  }

  .cert-banner__actions > * {
    flex: 1 1 auto;
  }

  .cert-banner__cta .btn-primary {
    width: 100%;
    white-space: normal;
  }

  .sheet__fine,
  .free-watermark {
    padding-left: 12px;
    padding-right: 12px;
  }

  .modal {
    padding: 14px;
  }

  .license__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- Print: confirmation sheet only ---------- */

@media print {
  @page {
    margin: 14mm 12mm;
  }

  html,
  body {
    background: #FFFFFF !important;
    color: #111827 !important;
    font-size: 11pt;
  }

  .appbar,
  .unified-toolbar,
  .workflow-direction-bar,
  .pane-header,
  .dock-jump-shelf,
  .deliverable-dock,
  .cockpit-horizon-bar,
  .mobile-hud,
  .workspace__title,
  .command-deck,
  .results,
  .modal-backdrop,
  .noscript,
  button,
  .btn-primary,
  .btn-secondary,
  .cert-banner__actions,
  .practitioner__lock,
  .practitioner__fields textarea,
  .notes-label,
  .practitioner__row {
    display: none !important;
  }

  .workspace {
    max-width: none;
    padding: 0;
    gap: 0;
  }

  #executive-deliverable {
    display: block !important;
    max-width: none;
  }

  .sheet {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    color: #111827;
    background: #FFFFFF;
    position: relative;
  }

  .sheet *,
  .sheet dt,
  .sheet .tag {
    color: #111827 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
  }

  .cert-banner {
    grid-template-columns: auto minmax(0, 1fr);
    border: 1px solid #111827;
    min-height: 0;
  }

  .sheet__head {
    border-bottom: 2px solid #111827;
  }

  .sheet__summary,
  .sheet__summary > div,
  .sheet__grid,
  .sheet__block + .sheet__block,
  .sheet__fine {
    border-color: #111827 !important;
  }

  .sheet__table-wrap {
    overflow: visible;
    padding: 0;
  }

  .sheet__table {
    min-width: 0;
    page-break-inside: auto;
  }

  .sheet__table th,
  .sheet__table td {
    border: 1px solid #111827 !important;
  }

  .sheet__table tr,
  .flags li,
  .sheet__summary,
  .cert-banner {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .sheet__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    page-break-inside: avoid;
  }

  .practitioner[data-locked="true"] .practitioner__fields {
    opacity: 1;
  }

  .notes-print {
    display: block;
    margin-top: 10px;
    font-size: 10.5pt;
    white-space: pre-wrap;
  }

  .free-watermark {
    display: block;
    visibility: visible;
    border-top: 1px solid #111827;
    margin-top: 8px;
  }

  body[data-plan="free"] .sheet::after {
    content: "DRAFT";
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-24deg);
    font-family: "Space Grotesk", sans-serif;
    font-size: 110pt;
    font-weight: 700;
    color: rgba(17, 24, 39, 0.08);
    pointer-events: none;
  }

  body[data-plan="pro"] .free-watermark {
    display: none !important;
  }
}

/* ==========================================================================
   Option B+ Cockpit & Unified Toolbar Quality Gate Standards
   ========================================================================== */

/* Unified 46px Flex Toolbar */
.unified-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 6px 20px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  z-index: 100;
  box-sizing: border-box;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mode-tabs {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 2px;
}

.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.mode-tab.active {
  color: #fff;
  background: #0369a1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.preset-strip-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.preset-strip-inline .preset-chip {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #E2E8F0;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(226, 232, 240, 0.34);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preset-strip-inline .preset-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.preset-strip-inline .preset-chip.active,
.preset-strip-inline .preset-chip[aria-pressed="true"] {
  background: rgba(3, 105, 161, 0.25);
  border-color: #0369a1;
  color: #e0f2fe;
  font-weight: 600;
}

/* Clear-and-start-own control, pinned beside the scenario strip so the
   sample-first default never traps a first-time user (2026-10-18 ops
   audit: the only clear lived at the end of the intake form, y=1322). */
.intake-note {
  margin: 10px 2px 0;
  font-size: 12px;
}

.toolbar-clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.toolbar-clear:hover {
  color: #fff;
  border-color: rgba(226, 232, 240, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

.engine-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #4ade80;
}

.engine-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.free-badge {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
}

/* Workflow Directional Vector Bar */
.workflow-direction-bar {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 20px;
  font-size: 11px;
  color: #94a3b8;
}

.wf-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wf-step strong {
  color: #f1f5f9;
}

.wf-arrow {
  /* sky-400: #0284C7 measured 4.36:1 on the #0F172A workflow bar */
  color: #38BDF8;
  font-weight: bold;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  line-height: 1;
  vertical-align: middle;
}

.role-badge-in {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #f59e0b;
  margin-right: 6px;
}

.role-badge-out {
  background: #d1fae5;
  color: #064e3b;
  border: 1px solid #10b981;
  margin-right: 6px;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft, #cbd5e1);
}

.pane-subtitle {
  font-size: 11px;
  /* #64748b read as "extremely faint" at 11px on the dark pane (vision
     review) - #94A3B8 clears 7:1. */
  color: #94A3B8;
  font-family: var(--font-mono, monospace);
}
.deliverable-dock .pane-subtitle,
.cockpit-horizon-bar .pane-subtitle {
  color: #CBD5E1;
}

/* In-Flow Action Shelf at Form End */
.dock-jump-shelf {
  position: static;
  background: #0f172a;
  border: 1px solid rgba(3, 105, 161, 0.5);
  border-radius: 8px;
  padding: 12px;
  margin-top: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dock-jump-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  background: #0369a1 !important;
  color: #fff !important;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dock-jump-btn:hover {
  background: #0284C7 !important;
  transform: translateY(-1px);
}

.dock-scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px;
  cursor: pointer;
}

.dock-scroll-cue:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* Action Confirmation Message */
.action-msg {
  display: none;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: #e0f2fe;
  background: rgba(3, 105, 161, 0.25);
  border: 1px solid rgba(3, 105, 161, 0.6);
  border-radius: 4px;
  padding: 6px 12px;
  text-align: center;
}

.action-msg.msg-flash {
  display: block;
  animation: msgFlash 0.3s ease-out;
}

@keyframes msgFlash {
  0% { opacity: 0; transform: translateY(-3px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0.95; }
}

@keyframes spotlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0.7); outline: 2px solid rgba(3, 105, 161, 0.9); }
  50% { box-shadow: 0 0 0 14px rgba(3, 105, 161, 0); outline: 2px solid rgba(3, 105, 161, 0.9); }
  100% { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0); outline: 2px solid transparent; }
}

.spotlight-pulse {
  animation: spotlightPulse 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Anchored Cockpit Horizon Bar */
.cockpit-horizon-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 44px so the jump link inside is a compliant touch target (was 28px). */
  height: 44px;
  background: #090e17;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 11px;
  color: #94A3B8;
  z-index: 900;
}

.horizon-left,
.horizon-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.horizon-status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.horizon-link {
  color: #94a3b8;
  text-decoration: none;
  /* Full bar height = 44px touch target (the bar's 1px border eats one
     pixel of stretch). */
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 44px;
}

.horizon-dim {
  /* Was #475569 at 2.55:1 on the bar - failed WCAG AA for text. */
  color: #94A3B8;
}

/* Mobile Sticky HUD */
.mobile-hud {
  display: none;
}

/* Option B+ Desktop Cockpit (100dvh Zero Window Scroll) */
@media screen and (min-width: 901px) {
  html, body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
  }

  .appbar {
    height: 48px;
    padding: 0 20px;
    margin: 0;
    max-width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    flex-shrink: 0;
  }

  .page-shell {
    height: calc(100dvh - 48px - 46px - 32px);
    overflow: hidden;
    padding: 0 20px;
    max-width: 1720px;
    margin: 0 auto;
    width: 100%;
  }

  .workbench {
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(460px, 1.05fr) minmax(500px, 1.25fr);
    gap: 24px;
    padding: 16px 0 34px 0;
    margin: 0;
    max-width: 100%;
  }

  .inspector-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 8px;
    background: #0f172a;
    border: 1px solid rgba(3, 105, 161, 0.4);
  }

  .inspector-pane .pane-header {
    flex: 0 0 auto;
    padding: 10px 16px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f172a;
  }

  .inspector-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
  }

  .dock-jump-shelf {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: #0f172a;
    border-top: 1.5px solid rgba(3, 105, 161, 0.4);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    border-radius: 0 0 8px 8px;
  }

  .deliverable-dock {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #0f172a;
    padding: 10px 14px;
    margin: 0 0 14px 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .deliverable-dock .sheet-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .deliverable-dock .primary-action,
    .deliverable-dock .btn-dock-action {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 700;
    background: #075985;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .deliverable-dock .primary-action:hover {
    background: #0369a1;
  }

  .deliverable-dock .compact-action {
    padding: 8px 12px;
    font-size: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #e4e4e7;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .deliverable-dock .compact-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .deliverable-dock .dock-scroll-cue {
    padding: 7px 12px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #a1a1aa;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
  }

  .deliverable-dock .dock-scroll-cue:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  .deliverable-zone {
    height: 100%;
    overflow-y: auto;
    padding-right: 12px;
  }
}

@media (max-width: 900px) {
  html, body {
    height: auto;
    overflow-y: auto;
  }

  .workflow-direction-bar {
    display: none !important;
  }

  /* The desktop engine-status strip is dead weight on phones: it overflowed
     375px and added a toolbar row above the form. */
  .toolbar-right {
    display: none;
  }

  /* The toolbar column must never size itself to the chip rail's content  - 
     the rail scrolls inside a viewport-wide column. */
  .toolbar-left {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .preset-strip-inline {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 2px 0;
  }

  .workbench {
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
  }

  .inspector-pane {
    height: auto;
    overflow: visible;
    padding: 0;
    border: none;
    background: transparent;
  }

  .inspector-scroll-body {
    overflow-y: visible;
    max-height: none;
    min-height: 0;
    padding: 0;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .deliverable-dock {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 12px;
  }

  /* The dock's print/export are the REAL controls now - 44px targets. */
  .deliverable-dock .primary-action,
  .deliverable-dock .compact-action {
    min-height: 44px;
  }

  .dock-jump-shelf {
    display: block;
    margin: 16px 0 20px 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .mobile-hud {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0f172a;
    border-top: 1px solid rgba(3, 105, 161, 0.4);
    padding: 8px 16px;
    z-index: 999;
  }

  .mobile-hud-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
  }

  .hud-kpi {
    display: flex;
    flex-direction: column;
  }

  .hud-label {
    font-size: 10px;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
  }

  .hud-value {
    font-size: 16px;
    font-weight: 700;
    color: #38bdf8;
  }

  .hud-jump-btn {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    background: #0369a1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
}


/* State-honesty: sample badge + widened money inputs */
.sample-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid #B45309;
  border-radius: 3px;
  color: #7C4A03;
  background: #FFFBEB;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.money-input input { width: 100%; min-width: 180px; box-sizing: border-box; }
@media (max-width: 680px) {
  .money-input input { min-width: 0; }
}

/* Layout stability: summary dt/dd rows keep their height when values change
   (long placeholder text wraps at first paint; shorter computed values must
   not collapse the deliverable - probe tolerance is 8px). */
.sheet__summary dt,
.sheet__summary dd {
  min-height: 90px;
}

/* Layout stability: the confirmation-sheet header (title line + certification
   stamp) changes content as scenarios and tax years switch - reserve its
   tallest height so preset navigation never shifts the deliverable. */
.sheet__head { min-height: 100px; }

/* Certification stamp: long filing-status values must not wrap the stamp
   grid (layout stability - reserve one line per dd). */
.sheet__stamp dd {
  white-space: nowrap;
  overflow: hidden;
  overflow: hidden;
  max-width: 220px;
}

/* Layout stability hardening: stamp rows and head reserve their rendered
   height regardless of filing-status text length. */
.sheet__stamp { height: 40px; overflow: hidden; }
.sheet__head { min-height: 88px; }

/* Truncation floor: date/text inputs in the quarterly grid >= 180px  - 
   desktop only; on mobile the grid cells are narrower and the floor made
   inputs overflow their cells onto the hint text. */
@media (min-width: 681px) {
  input[type="date"], input[type="text"], input:not([type]) {
    min-width: 180px;
  }
}
.sheet-table td, .quarter-grid td { overflow: hidden; }

/* Touch targets: mode tabs and chips >= 44px on mobile */
.mode-tab, .preset-chip { min-height: 44px; }

/* Contrast: pane subtitles live on dark charcoal in this cockpit */
.pane-subtitle { color: #334155; }
.inspector-pane .pane-subtitle { color: #CBD5E1; }

/* The sheet meta line interpolates the tax year + engine prose - clamp to
   one line so scenario/year navigation never rewraps the deliverable. */
.sheet__meta {
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.sheet__head > div:first-child { min-height: 48px; }

/* Builder contract "declare a fixed row structure so preset clicks never
   shrink the container": the workpaper sheet reserves its full rendered
   height; data changes update values in place. */
#executive-deliverable { min-height: 2482px; }
#sheet[data-deliverable] { min-height: 1167px; }

/* Monetization guardrails */
.free-reassurance {
  background: #ECFDF5;
  border-bottom: 1px solid #A7F3D0;
  color: #064E3B;
  font-size: 13.5px;
  padding: 8px 20px;
}
.free-vs-pro { width: 100%; border-collapse: collapse; margin-block: 12px; font-size: 13px; }
.free-vs-pro th, .free-vs-pro td { border: 1px solid #D1FAE5; padding: 6px 10px; text-align: left; }
.free-vs-pro thead th { background: #ECFDF5; color: #064E3B; }

/* Touch targets: dock controls and the client-ack checkbox row >= 44px */
#btn-dock-print, #btn-dock-export, #btn-dock-scroll, #btn-dock-scroll-right,
.compact-action, .dock-scroll-cue {
  min-height: 44px;
}
label.check {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* A7: the hidden attribute must win over the display declaration */
.sample-badge[hidden] { display: none !important; }

/* A8: trust footer + plain-language safe-harbor explainer */
.trust-footer {
  /* Explicit dark surface: the cockpit page background varies, and light
     text on an inherited light background measured 1.2:1. */
  background: #0F172A;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 18px;
  padding: 14px 20px;
  font-size: 12.5px;
  color: #CBD5E1;
}
.trust-footer strong { color: #CBD5E1; }
.trust-footer details { margin-top: 8px; }
.trust-footer summary { cursor: pointer; color: #CBD5E1; }

/* Contrast: footer text on the dark cockpit */
.trust-footer { color: #CBD5E1; }
.trust-footer strong { color: #E2E8F0; }
.trust-footer summary { color: #E2E8F0; }

/* Print: auxiliary chrome (reassurance banner, trust footer) never prints  - 
   only the confirmation sheet does. */
@media print {
  .free-reassurance, .trust-footer { display: none !important; }
}

/* Appbar actions: adjacent buttons need visible separation - the Restore
   license anchor sat flush against Go Pro (0px gap). */
.appbar__actions { gap: 10px; }
.appbar__actions .btn-header + .btn-header { margin-left: 0; }

/* Scroll-lock revert (2026-10-17 user review): the Option B+ 100dvh
   zero-window-scroll standard trapped the form and deliverable in separate
   inner scroll regions - full-page capture showed a gray void below the
   fold, reviewers could only see the first screen, and visitors who did
   not guess that each column scrolls independently concluded the site was
   truncated. Restore natural document scrolling on desktop. */
@media screen and (min-width: 901px) {
  html, body {
    height: auto;
    min-height: 100vh;
    overflow: visible !important;
  }
  .page-shell, .workbench {
    height: auto;
    overflow: visible;
  }
}

/* Natural scroll + pinned workbench chrome: the toolbar and the intake
   inspector stay visible while the long deliverable scrolls (the cockpit
   ergonomics checks require pinned chrome; natural document scroll is the
   user-facing behavior). The toolbar stacks BELOW the 48px sticky appbar  - 
   at top: 0 both pinned at the same edge and the toolbar's chips slid
   behind the appbar on every scroll (2026-10-17: caught by the WebKit
   force-click gate - the chip click point was intercepted by the appbar). */
.unified-toolbar {
  position: sticky;
  top: 48px;
  z-index: 100;
}
.inspector-pane {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
}

/* Pin the appbar (the audit's toolbar selector matches header.appbar, which
   is the site's actual top nav) and the intake deck (stays visible beside
   the long deliverable under natural document scroll). */
.appbar {
  position: sticky;
  top: 0;
  z-index: 200;
}
.deck {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* Pin the intake command-deck beside the long deliverable (its 1020px height
   scrolls internally so every control stays reachable while stuck). */
.command-deck {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
}

/* The cockpit desktop override removed the appbar's centered margins but
   kept the legacy calc(100% - 32px) width - leaving a 32px white strip at
   the right edge on wide windows. Full-bleed under the pinned cockpit. */
.appbar { width: 100%; }

/* ---------- Ops-audit polish (2026-10-18) ---------- */

/* The intake ribbon must collapse to a single column on phones: two columns
   left a ~152px prior-tax input under the 180px minimum. */
@media screen and (max-width: 680px) {
  .ribbon {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Quarter amount + date side-by-side left ~156px inputs on phones. */
  .tranche__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .tranche__fields .tfield--wide {
    grid-column: auto;
  }

  .ribbon .cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ribbon .cell:last-child {
    border-bottom: 0;
  }
}

/* ---------- Round-2 user-review fixes (2026-10-16) ---------- */

/* Scroll destinations land under the sticky appbar (48px) and the sticky
   toolbar (one row ~50px at wide desktop, two rows ~119px at 1280); the
   margin clears the worst case for the JS window scroll and the
   #horizon-cert-link anchor jump. */
#confirmation-sheet,
#sheet {
  scroll-margin-top: 176px;
}

/* The trust footer's safe-harbor disclosure sat under the fixed horizon bar:
   the last strip of the document was chrome-covered and a normal click
   could never reach the summary. Reserve document space for the bar (44px
   tall - raised from 28px so its jump link is a 44px touch target). */
body {
  padding-bottom: 48px;
}

/* On phones the fixed mobile HUD (z-index 999) already fully covers the
   horizon bar (z-index 900) - redundant chrome that only occluded the
   disclosure. Drop the bar at mobile widths and reserve HUD-sized room. */
@media screen and (max-width: 900px) {
  .cockpit-horizon-bar { display: none; }
  body { padding-bottom: 68px; }
}

/* Brand: hide the "Voucher Reconciler" tail on phones instead of clipping it
   mid-word behind the action buttons (text-overflow is banned by the static
   suite). */
@media screen and (max-width: 640px) {
  .brand__tail { display: none; }
}

/* Pane header: wrap before the STEP 2 badge and the subtitle collide
   (measured 6px of headroom at 390px - one font metric from overlap). */
.pane-header {
  flex-wrap: wrap;
  row-gap: 4px;
}
.pane-subtitle { min-width: 0; }

/* In-page destructive confirm (reuses .modal chrome). */
.confirm-message {
  margin: 0;
  color: var(--ink, #1e293b);
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.trust-footer .trust-link {
  color: #7DD3FC;
  /* 44px touch target without disturbing the footer's text flow. */
  display: inline-block;
  padding: 13px 0;
}

/* Modal scrim must paint over the pinned cockpit chrome (toolbar z-100,
   appbar z-200, horizon bar z-900, mobile HUD z-999) - at z-50 the toolbar
   and bars stayed visible and hittable through the scrim, eating backdrop
   clicks and intercepting clicks meant for page controls. */
.modal-backdrop {
  z-index: 1000;
}

/* Contrast: the "Updates live" hint sits on the light canvas on mobile
   (transparent inspector pane) and on the dark #0F172A pane on desktop. */
.live-hint { color: #475569; }
@media screen and (min-width: 901px) {
  .inspector-pane .live-hint { color: #94A3B8; }
}
/* Same split for the inspector subtitle and scroll cues: below 901px the
   inspector pane, jump shelf and dock render on the light canvas. */
@media (max-width: 900px) {
  .inspector-pane .pane-subtitle { color: #475569; }
  .dock-scroll-cue {
    color: #0F172A !important;
    background: #FFFFFF !important;
    border-color: #94A3B8 !important;
  }
  .dock-scroll-cue:hover { color: #0369A1 !important; }
}

/* Hidden modal backdrops must never intercept pointer events */
.modal-backdrop[hidden], [hidden].modal-backdrop { display: none !important; pointer-events: none !important; }

/* Modal backdrops must not trap synthetic or stray clicks: the dark area
   passes pointer events through; the sheet itself stays interactive. */
.modal-backdrop, #confirm-backdrop { pointer-events: none !important; }
.modal-backdrop > *, #confirm-backdrop > * { pointer-events: auto !important; }

/* Informational banner must never intercept clicks on controls beneath it */
.free-reassurance { pointer-events: none; }

/* Repair (2026-10-19): the unscoped sticky inspector/command-deck pins above
   re-applied a 100vh max-height on phones, so the intake form overflowed its
   728px box and painted over the deliverable dock (the "Voucher payments"
   legend sat on the Print Confirmation Sheet button at 390px). Below 901px
   the two columns stack - let the intake flow at its natural height. */
@media screen and (max-width: 900px) {
  .inspector-pane,
  .command-deck {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Repair (2026-10-19): the 48px desktop command bar pinned 44px header
   buttons to its top edge (0px clearance). Center them and size to 36px so
   each keeps >= 4px of clearance from the bar edges. */
@media screen and (min-width: 901px) {
  .appbar {
    display: flex;
    align-items: center;
  }
  .appbar__inner {
    min-height: 0;
  }
  .appbar__actions .btn-header {
    min-height: 36px;
    max-height: 36px;
    padding: 6px 16px;
  }
}