/* ==========================================================================
   T-Blocks — Base & Components v1.0
   Canonical component implementations. See BRAND.md §5.
   Load after tokens.css. Do not re-declare these in a page <style> block.
   ========================================================================== */

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

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

.funding-skip-link { position:fixed; top:8px; left:8px; z-index:10000; transform:translateY(-180%); padding:12px 16px; background:var(--bg-page,#fff); color:var(--fg,#12222b); border:2px solid currentColor; }
.funding-skip-link:focus { transform:none; }
main:focus { outline:none; }
button:disabled { cursor:not-allowed; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--fg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--accent-ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
a:hover { color: var(--accent-hover); }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.9375em; }

img, svg, video { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

/* Numbers a user compares down a column must be tabular. */
.num, td.num, .tbl td.num, .stat-v {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Focus: non-negotiable ------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--sky-600);
  outline-offset: 2px;
  border-radius: inherit;
}

/* --- Motion kill-switch: mandatory, do not remove ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Brand motifs
   ========================================================================== */

/* The gradient accent bar above section headings. */
.brand-bar {
  width: 3px;
  height: 26px;
  border-radius: 3px;
  background: var(--brand-bar);
  flex: none;
}
.brand-bar.h { width: 26px; height: 3px; }

/* ALL-CAPS micro-eyebrow. Uppercase via CSS, never typed capitals. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow.accent { color: var(--accent-ink); }

/* Glass card, for dark/photographic sections. Flat by design. */
.glass {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--e-0);
}

/* Ops/forms section header bar. */
.section-bar {
  background: var(--navy-700);
  border-left: 4px solid var(--sky-400);
  color: var(--n-0);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ==========================================================================
   Buttons — three variants, one geometry
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  appearance: none;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--e-1); color: var(--fg); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn.pri {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-on-fill);
}
.btn.pri:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on-fill); }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--accent-ink);
  padding-left: 0;
  padding-right: 0;
}
.btn.ghost:hover { color: var(--accent-hover); box-shadow: none; }

.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--n-0); }

/* Marketing CTA geometry. */
.btn.pill { border-radius: var(--r-pill); padding: 12px 24px; font-size: var(--fs-sm); }

.btn.sm   { padding: 7px 12px; font-size: var(--fs-2xs); }
.btn.wide { width: 100%; }

/* One disabled treatment. */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   Status pills — one implementation
   Colour never carries meaning alone; always keep the text label.
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.ok      { color: var(--ok);   background: var(--ok-bg);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.pill.warn    { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.pill.bad     { color: var(--bad);  background: var(--bad-bg);  border-color: color-mix(in srgb, var(--bad) 26%, transparent); }
.pill.info    { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 26%, transparent); }
.pill.neutral { color: var(--fg-muted); background: var(--bg-sunk); border-color: var(--border); }

/* Status dot, for pairing with a label. */
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Mono identifier chip — addresses, ISINs, hashes. */
.stamp {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 7px;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--e-0);
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-sunk);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.panel-body { padding: var(--sp-5); }

/* ==========================================================================
   Tables
   ========================================================================== */
.tblwrap { overflow-x: auto; }
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: var(--fs-sm);
}
.tbl th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Controls
   ========================================================================== */
.field { margin-bottom: var(--sp-4); }
/* Scoped to .field on purpose: `.lab` is also used as a plain cell label inside
   .addr-row and .tr on existing pages, where block+uppercase would be wrong. */
.field > label, .field > .lab {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.inp, input[type="text"], input[type="email"], input[type="number"],
input[type="search"], input[type="password"], select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--fg);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.inp:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-fill);
  box-shadow: var(--focus-ring);
}
.inp.mono { font-family: var(--mono); }
::placeholder { color: var(--n-400); opacity: 1; }

/* Segmented control. */
.seg {
  display: inline-flex;
  gap: var(--sp-1);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
}
.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 7px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button.on {
  background: var(--bg-surface);
  color: var(--fg);
  box-shadow: var(--e-1);
}

/* Theme toggle. */
.toggle {
  appearance: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.toggle:hover { background: var(--bg-sunk); color: var(--fg); }

/* ==========================================================================
   Masthead & navigation
   ========================================================================== */
.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand .mark {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--accent-fill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  flex: none;
}
.brand .nm { font-weight: var(--fw-bold); color: var(--fg); letter-spacing: var(--ls-tight); }

/* Scoped to the masthead on purpose: `.nav` is also a vertical sidebar list on
   the issuer console, where a flex row breaks the layout. */
.mast .nav { display: flex; align-items: center; gap: var(--sp-1); }
.mast .nav a {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  padding: 7px 13px;
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mast .nav a:hover { color: var(--fg); background: var(--bg-sunk); }
.mast .nav a.on { color: var(--accent-ink); background: var(--accent-wash); }

/* ==========================================================================
   Overlays
   ========================================================================== */
.ov {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  z-index: 50;
}
.modal {
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-surface);
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--e-3);
  padding: var(--sp-5);
}
/* Shared fail-closed release disclosure, including legacy prototype screens. */
.release-notice { padding: 12px 24px; border-bottom: 2px solid #92652b; background: #fff3d9; color: #332611; font: 14px/1.5 sans-serif; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.release-notice a { color: #503600; text-decoration: underline; font-weight: 700; }
.release-notice a:focus-visible { outline: 3px solid #503600; outline-offset: 3px; }