/* ==========================================================================
   MoneyDoc — Shared Components
   Consume these AS-IS. Do not restyle, do not fork, do not redefine.
   Anything new goes in your own scoped stylesheet, built from tokens only.
   Requires tokens.css to be loaded first.
   ========================================================================== */

/* ------------------------------- Layout ---------------------------------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { padding-inline: var(--space-5); } }

.prose { max-width: var(--prose); }

/* Wide content scrolls inside its OWN container. The body never scrolls.

   min-width: 0 is load-bearing, not decoration. A grid or flex item defaults
   to min-width: auto, so a wide child (a table with min-width: 640px) sizes
   the whole track to 640px and overflow-x never engages. Combined with
   overflow-x: clip on the body, the excess is silently CUT OFF rather than
   scrolled — content the user can never reach and no scrollbar to hint at it. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }

.stack       { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, var(--space-4)); }
.row         { display: flex; align-items: center; gap: var(--gap, var(--space-3)); flex-wrap: wrap; }

/* -------------------------------- Button --------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 44px;               /* 44x44 touch target floor */
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary   { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-accent    { background: var(--accent); color: var(--accent-fg); }
.btn-accent:hover:not(:disabled)  { background: var(--accent-hover); }

.btn-outline   { background: transparent; border-color: var(--border-strong); color: var(--fg); }
.btn-outline:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }

.btn-ghost     { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover:not(:disabled)   { background: var(--bg-sunken); color: var(--fg); }

.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { min-height: 52px; padding: var(--space-3) var(--space-6); font-size: var(--text-base); }

/* Async state: buttons must be disabled while a request is in flight. */
.btn[data-loading="true"] { pointer-events: none; opacity: 0.7; }
.btn[data-loading="true"] .btn-spinner { display: inline-block; }
.btn-spinner {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: md-spin 0.7s linear infinite;
}
@keyframes md-spin { to { transform: rotate(360deg); } }

/* --------------------------------- Card ---------------------------------- */
/* Cards are not the default answer. Use only when genuinely the best
   affordance. NESTED CARDS ARE ALWAYS WRONG. */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-flush { padding: 0; overflow: hidden; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.card-body   { padding: var(--space-5); }
.card-title  { font-size: var(--text-lg); font-weight: 600; }

/* --------------------------------- Field --------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field-label {
  font-size: var(--text-sm); font-weight: 550; color: var(--fg);
  display: flex; align-items: baseline; gap: var(--space-2);
}
.field-required { color: var(--neg); font-weight: 600; }
.field-optional { color: var(--fg-subtle); font-weight: 400; font-size: var(--text-xs); }

.field-input, .field-select, .field-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.field-textarea { min-height: 96px; padding-block: var(--space-3); resize: vertical; }
.field-input:hover, .field-select:hover { border-color: var(--fg-subtle); }

/* Placeholders held to full body contrast (4.5:1), not the muted-gray default. */
.field-input::placeholder, .field-textarea::placeholder { color: var(--fg-subtle); opacity: 1; }

/* Reference data typed into a field is mono. */
.field-input[data-figure] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.field-hint  { font-size: var(--text-xs); color: var(--fg-muted); }

/* Error message sits ADJACENT to the problem, never in a summary elsewhere. */
.field-error { font-size: var(--text-xs); color: var(--neg); display: flex; gap: var(--space-1); align-items: flex-start; }
.field[data-invalid="true"] .field-input,
.field[data-invalid="true"] .field-select,
.field[data-invalid="true"] .field-textarea { border-color: var(--neg); }

.field[data-valid="true"] .field-input { border-color: var(--pos); }

/* "Why we need this" — the primary trust mechanism in a regulated flow. */
.field-why {
  font-size: var(--text-xs); color: var(--fg-muted);
  border-left: 1px solid var(--border);   /* 1px only — thicker is a banned side-stripe */
  padding-left: var(--space-3);
}
.field-why strong { color: var(--fg); font-weight: 550; }

/* --------------------------------- Badge --------------------------------- */
/* Status is NEVER carried by colour alone. Every badge must contain an icon
   or glyph AND a text label. Colour is the third signal, not the only one. */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-xs); font-weight: 550; line-height: 1.6;
  white-space: nowrap;
}
.badge-ok      { background: var(--pos-weak);  color: var(--pos);  border-color: var(--pos); }
.badge-pending { background: var(--info-weak); color: var(--info); border-color: var(--info); }
.badge-warn    { background: var(--warn-weak); color: var(--warn); border-color: var(--warn); }
.badge-err     { background: var(--neg-weak);  color: var(--neg);  border-color: var(--neg); }
.badge-neutral { background: var(--bg-sunken); color: var(--fg-muted); border-color: var(--border); }

/* -------------------------------- Stepper -------------------------------- */

.stepper { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; padding: 0; }

.stepper-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.stepper-item[aria-current="step"] { background: var(--primary-weak); color: var(--fg); font-weight: 600; }
.stepper-item[data-state="done"]   { color: var(--fg); }
.stepper-item[data-state="locked"] { opacity: 0.5; pointer-events: none; }

.stepper-marker {
  flex: none;
  width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px;
}
.stepper-item[data-state="done"] .stepper-marker { background: var(--pos); border-color: var(--pos); color: var(--bg); }
.stepper-item[aria-current="step"] .stepper-marker { border-color: var(--primary); color: var(--primary); }

/* Mobile: horizontal progress bar instead of a rail. */
.stepper-progress { height: 3px; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; }
.stepper-progress > span {
  display: block; height: 100%; background: var(--primary);
  transition: width var(--dur-slow) var(--ease-out-quart);
}

/* --------------------------------- Table --------------------------------- */
/* Always wrap in .scroll-x — the table scrolls, not the page. */

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--border); }
.table thead th {
  background: var(--bg-sunken);
  font-size: var(--text-xs); font-weight: 600; color: var(--fg-muted);
  white-space: nowrap;
}
.table td[data-figure], .table th[data-figure] {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: var(--bg-sunken); }

/* --------------------------------- Modal --------------------------------- */

.modal { border: 0; padding: 0; background: transparent; max-width: min(520px, calc(100vw - 2rem)); }
.modal::backdrop { background: var(--bg-overlay); }
.modal-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

/* --------------------------------- Alert --------------------------------- */
/* Full borders and background tints. NEVER a thick coloured left border. */

.alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--bg-sunken);
}
.alert-info { background: var(--info-weak); border-color: var(--info); color: var(--fg); }
.alert-warn { background: var(--warn-weak); border-color: var(--warn); color: var(--fg); }
.alert-err  { background: var(--neg-weak);  border-color: var(--neg);  color: var(--fg); }
.alert-ok   { background: var(--pos-weak);  border-color: var(--pos);  color: var(--fg); }

/* ------------------------------ Sample data ------------------------------ */
/* Regulatory figures (allowance thresholds, BOP codes) are prototype sample
   data and MUST be visibly marked as requiring verification. */

.sample-flag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 550;
  color: var(--warn);
  border: 1px dashed var(--warn);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
}

/* ----------------------------- Upload / file ----------------------------- */

.upload {
  display: grid; gap: var(--space-2); place-items: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background-color var(--dur-fast) var(--ease-out-quart);
}
.upload:hover, .upload[data-dragover="true"] { border-color: var(--primary); background: var(--primary-weak); }
.upload[data-state="success"]  { border-style: solid; border-color: var(--pos); background: var(--pos-weak); }
.upload[data-state="rejected"] { border-style: solid; border-color: var(--neg); background: var(--neg-weak); }
.upload[data-state="uploading"] { border-color: var(--info); background: var(--info-weak); }

/* -------------------------------- Empty ---------------------------------- */

.empty { display: grid; gap: var(--space-3); place-items: center; padding: var(--space-7) var(--space-4); text-align: center; color: var(--fg-muted); }
.empty-title { font-size: var(--text-base); font-weight: 600; color: var(--fg); }

/* Dev-only chrome, stripped by ?export=1 before client capture, and by the
   host gate on production domains (app.js / demo.js). [data-review-only]
   marks chrome that exists only for reviewers walking the preview — the
   walkthrough entries and their explanatory notes. */
:root.is-export .dev-switcher,
:root.is-export [data-dev-only],
:root.is-export [data-review-only],
:root.is-export .demo-note,
:root.is-export .tourbar { display: none !important; }

/* ------------------------------ Ruled lines ------------------------------ */
/* The ledger motif: hairline rules, never decorative borders. */

.rule    { height: 1px; background: var(--border); border: 0; }
.rule-strong { height: 1px; background: var(--border-strong); border: 0; }

/* ------------------------------- Brand mark ------------------------------ */
/* The MoneyDoc "MD" monogram, top-left on every surface. Drawn as a mask so
   the mark inherits the surrounding text colour — navy on light chrome,
   near-white on the drenched header — instead of shipping two files.
   Source: client logo screenshot, traced. Replace with the supplied
   production artwork when MoneyDoc sends it. */

.brand-logo {
  flex: none;
  align-self: center;
  width: 42px; height: 23px;
  background-color: currentColor;
  -webkit-mask: url(../assets/brand/moneydoc-mark.svg) center / contain no-repeat;
          mask: url(../assets/brand/moneydoc-mark.svg) center / contain no-repeat;
}

/* Narrow screens: the mark plus the wordmark is the lockup; the FSP chip is
   repeated in the footer and in the legal line, so it goes first. */
@media (max-width: 460px) {
  .brand-logo { width: 34px; height: 19px; }
  .brand-fsp, .app-brand .fsp { display: none; }
}

/* =========================== Guided walkthrough ========================== */
/* Review scaffolding: a fixed bar naming where in the journey this screen
   sits, and a control that moves to the next one. It never replaces the
   page's own primary action — a reviewer can fill the form properly or skip
   ahead, and both routes land in the same place. */

.tourbar {
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: var(--z-toast);
  background: var(--drench); color: var(--drench-fg);
  border-top: 1px solid var(--drench-rule);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.18);
}
.tourbar-inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: grid; gap: var(--space-2) var(--space-4);
  grid-template-areas: "where actions" "progress progress" "count count";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
@media (min-width: 860px) {
  .tourbar-inner {
    grid-template-areas: "where progress count actions";
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) auto auto;
  }
}

.tourbar-where { grid-area: where; display: grid; gap: 2px; min-width: 0; }
.tourbar-kicker {
  font-size: 10px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.tourbar-label {
  font-size: var(--text-sm); font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}

.tourbar-progress {
  grid-area: progress;
  height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--drench-rule);
}
.tourbar-progress span {
  display: block; height: 100%; background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out-quart);
}
.tourbar-count { grid-area: count; font-size: var(--text-xs); color: var(--drench-muted); }

.tourbar-actions { grid-area: actions; display: flex; gap: var(--space-2); align-items: center; }
.tourbar-btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-weight: 550;
  border: 1px solid var(--drench-rule); border-radius: var(--radius-md);
  background: transparent; color: var(--drench-fg); cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background-color var(--dur-fast) var(--ease-out-quart);
}
.tourbar-btn:hover:not(:disabled) { border-color: var(--drench-fg); }
.tourbar-btn:disabled { opacity: 0.4; cursor: default; }
.tourbar-next {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.tourbar-next:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.tourbar-exit {
  padding: var(--space-2); font-size: var(--text-xs);
  background: none; border: 0; color: var(--drench-muted);
  cursor: pointer; text-decoration: underline;
}
.tourbar-exit:hover { color: var(--drench-fg); }

/* Keep the bar off the page's own content and clear of the stage switcher. */
body[data-tour="on"] { padding-bottom: 7.5rem; }
@media (min-width: 860px) { body[data-tour="on"] { padding-bottom: 5.5rem; } }
body[data-tour="on"] .dev-switcher { bottom: 6.5rem; }
@media (min-width: 860px) { body[data-tour="on"] .dev-switcher { bottom: 5rem; } }

/* --------------------------- Sample-data notice -------------------------- */
/* Prefilled values are stated as prefilled. A form that silently knows the
   reviewer's address is a worse demo than one that says where it got it. */

.demo-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.6;
}
.demo-note-tag {
  flex: none;
  padding: 2px var(--space-2);
  border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  color: var(--accent); font-weight: 600;
}
:root.is-export .demo-note, :root.is-export .tourbar { display: none !important; }

/* ============================ Price panel =============================== */
/* Shared by the landing calculator, the quote screen and the markets screen.
   Markup is produced by MD.rates.board() — keep the two in step.

   CLIENT NOTE 1 (Round 2): this used to be a venue-by-venue comparison table.
   The customer now sees one number per leg and nothing about where it came
   from. The .venue-* class names are kept because three pages and the JS all
   reference them; only what they render has changed. */

.venue-board {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  overflow: hidden;
}

.venue-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.venue-title {
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.venue-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.venue-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--pos);
  flex: none;
}

.venue-leg { padding: var(--space-4); }
.venue-leg + .venue-leg { border-top: 1px solid var(--border); }

.venue-leg-head {
  font-size: var(--text-sm);
  font-weight: 650;
  margin-bottom: var(--space-2);
}
.venue-leg-head span {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: 2px;
}

/* The one number. It is the whole component now, so it carries the weight. */
.price-best {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}
.price-best small {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-muted);
  text-transform: none;
}
.price-best[data-none] {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--warn);
}

.venue-foot {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: var(--leading-snug);
}

@media (max-width: 560px) {
  .price-best { font-size: var(--text-xl); }
}

/* No source can fill the size: the panel still renders, but nothing in it is
   a price. */
.venue-board[data-unfillable] .venue-dot { display: none; }
.venue-board[data-unfillable] .venue-foot {
  color: var(--warn);
  font-weight: 550;
}

/* Live vs indicative. Not a venue disclosure — a data-quality one, and the
   single thing that must never be ambiguous. Carried by the worded label
   first and the dot colour only as reinforcement. */
.venue-meta[data-mode="sim"] { color: var(--warn); }
.venue-meta[data-mode="sim"] .venue-dot { background: var(--warn); }
.venue-meta[data-mode="live"] .venue-dot { background: var(--pos); }

/* A leg with no live market feed says so on the leg itself, so a panel mixing
   a real crypto book with an indicative fiat mid cannot be misread. */
.venue-sim {
  display: block;
  margin-top: var(--space-1);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--warn);
}

/* ================ Disclaimer band + Corporate Profile dialog =============
   CLIENT NOTE (Round 4, 22 Sep 2026): "Add the disclaimers to the site
   (bottom)." Markup is injected by shared/disclaimer.js, so this is the only
   stylesheet that needs it and every page family gets it at once.

   The band sits inside whichever footer the page has. On the public pages that
   is a wide .site-footer and it can be centred and generous; inside the
   platform's .app-legal strip and the onboarding .access-footer it has to
   compress, or a one-line legal strip turns into a block of body copy. Hence
   the two context overrides at the end. */

.disclaimer-host { display: block; }

.disclaimer-band {
  text-align: center;
  padding-block: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.disclaimer-band h2 {
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: var(--space-3);
}
.disclaimer-text {
  max-width: 78ch;
  margin-inline: auto;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* A button, not a link: it opens a dialog on this page rather than navigating,
   and a screen reader should be told which of the two it is. Styled as a link
   because that is what the client's design shows. */
.disclaimer-more {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--primary);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.disclaimer-more:hover { color: var(--accent); }
.disclaimer-more:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- the dialog -- */

.profile-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
}
.profile-backdrop[hidden] { display: none; }
html.md-modal-open { overflow: hidden; }

.profile-modal {
  width: min(760px, 100%);
  max-height: calc(100dvh - var(--space-7));
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.profile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.profile-head h2 { font-size: var(--text-lg); font-weight: 620; }
.profile-x {
  background: none; border: 0; cursor: pointer;
  color: var(--fg-muted); font-size: var(--text-lg); line-height: 1;
  padding: var(--space-2); border-radius: var(--radius-sm);
}
.profile-x:hover { color: var(--fg); background: var(--bg-sunken); }
.profile-x:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* The tab row wraps rather than scrolls: "Promotion of Access to Information"
   is long enough that a single row would either truncate it or force a
   horizontal scrollbar on a phone. */
.profile-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  padding: var(--space-3) var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.profile-tabs [role="tab"] {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--text-sm); color: var(--fg-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.profile-tabs [role="tab"]:hover { color: var(--fg); }
.profile-tabs [role="tab"][aria-selected="true"] {
  color: var(--primary); font-weight: 600;
  border-bottom-color: var(--accent);
}
.profile-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm);
}

.profile-body { padding: var(--space-5); overflow-y: auto; }
.profile-body [role="tabpanel"] { display: grid; gap: var(--space-4); justify-items: start; }
.profile-body p {
  color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.7;
  max-width: var(--prose);
}

.profile-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}

/* ---------------------------------------------------- compact contexts ---- */

/* Inside the app and onboarding strips the band is a note, not a section. */
.app-legal .disclaimer-band,
.access-footer .disclaimer-band {
  text-align: left;
  padding-block: 0 var(--space-3);
  margin-bottom: var(--space-3);
}
.app-legal .disclaimer-band h2,
.access-footer .disclaimer-band h2 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-bottom: var(--space-1);
}
.app-legal .disclaimer-text,
.access-footer .disclaimer-text {
  margin-inline: 0;
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* The disclaimer is site furniture, not part of a policy document, so it is
   dropped when a document page is printed. */
@media print {
  .disclaimer-host, .profile-backdrop { display: none !important; }
}