/* =============================================================================
   CFT components (02_design_system.md §6). Tokens only — no raw colours.
   Loaded after bootstrap.min.css 5.3.8 and tokens.css (D28).
   Part 1 restyles Bootstrap components through their own --bs-* variables.
   Part 2 adds the components Bootstrap lacks; none of their class names may
   collide with Bootstrap's (the gallery checks this against the live sheet).
   Breakpoints: phone < 768 · tablet 768–1199 · desktop ≥ 1200 (public: menu < 992).
   ============================================================================= */

/* ── Part 1 · Bootstrap, restyled ──────────────────────────────────────────── */
body { font-size: var(--cft-fs-md); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.01em; font-weight: 600; }
h1, h2 { font-family: var(--cft-serif); }
h1 { font-size: var(--cft-fs-2xl); } h2 { font-size: var(--cft-fs-xl); } h3 { font-size: var(--cft-fs-lg); } h4 { font-size: var(--cft-fs-md); }
a { text-underline-offset: 2px; }
code { background: var(--cft-surface-2); padding: 1px 5px; border-radius: 4px; font-size: .88em; }
kbd { background: none; border: 1px solid var(--cft-border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--cft-muted); font-size: .8em; }
hr { border-color: var(--cft-border); opacity: 1; margin: var(--cft-s6) 0; }
.small { font-size: var(--cft-fs-sm); }
:focus-visible { outline: 2px solid var(--cft-focus); outline-offset: 2px; }

/* Buttons: one base, variants only set Bootstrap's variables */
.btn { --bs-btn-padding-x: 16px; --bs-btn-padding-y: 0; --bs-btn-font-size: var(--cft-fs-sm); --bs-btn-font-weight: 600; --bs-btn-line-height: 1;
  --bs-btn-border-radius: var(--cft-r-md); --bs-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; white-space: nowrap; }
.btn-sm { --bs-btn-padding-x: 12px; --bs-btn-font-size: var(--cft-fs-xs); min-height: 32px; --bs-btn-border-radius: var(--cft-r-sm); }
.btn-lg { --bs-btn-padding-x: 22px; --bs-btn-font-size: var(--cft-fs-md); min-height: 48px; }
.btn-primary { --bs-btn-bg: var(--cft-primary); --bs-btn-border-color: var(--cft-primary); --bs-btn-color: var(--cft-on-primary);
  --bs-btn-hover-bg: var(--cft-primary-hover); --bs-btn-hover-border-color: var(--cft-primary-hover); --bs-btn-hover-color: var(--cft-on-primary);
  --bs-btn-active-bg: var(--cft-primary-hover); --bs-btn-active-border-color: var(--cft-primary-hover); --bs-btn-active-color: var(--cft-on-primary);
  --bs-btn-disabled-bg: var(--cft-primary); --bs-btn-disabled-border-color: var(--cft-primary); --bs-btn-disabled-color: var(--cft-on-primary); }
.btn-secondary { --bs-btn-bg: var(--cft-surface); --bs-btn-border-color: var(--cft-border-strong); --bs-btn-color: var(--cft-ink);
  --bs-btn-hover-bg: var(--cft-surface-2); --bs-btn-hover-border-color: var(--cft-border-strong); --bs-btn-hover-color: var(--cft-ink);
  --bs-btn-active-bg: var(--cft-surface-2); --bs-btn-active-border-color: var(--cft-border-strong); --bs-btn-active-color: var(--cft-ink);
  --bs-btn-disabled-bg: var(--cft-surface); --bs-btn-disabled-border-color: var(--cft-border); --bs-btn-disabled-color: var(--cft-muted); }
.btn-danger { --bs-btn-bg: var(--cft-surface); --bs-btn-border-color: var(--cft-danger); --bs-btn-color: var(--cft-danger);
  --bs-btn-hover-bg: var(--cft-danger-bg); --bs-btn-hover-border-color: var(--cft-danger); --bs-btn-hover-color: var(--cft-danger);
  --bs-btn-active-bg: var(--cft-danger-bg); --bs-btn-active-border-color: var(--cft-danger); --bs-btn-active-color: var(--cft-danger); }
/* Our two extra variants, built the same way */
.btn-accent { --bs-btn-bg: var(--cft-accent); --bs-btn-border-color: var(--cft-accent); --bs-btn-color: var(--cft-on-accent);
  --bs-btn-hover-bg: var(--cft-accent-hover); --bs-btn-hover-border-color: var(--cft-accent-hover); --bs-btn-hover-color: var(--cft-on-accent);
  --bs-btn-active-bg: var(--cft-accent-hover); --bs-btn-active-border-color: var(--cft-accent-hover); --bs-btn-active-color: var(--cft-on-accent); }
.btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--cft-ink);
  --bs-btn-hover-bg: var(--cft-surface-2); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--cft-ink);
  --bs-btn-active-bg: var(--cft-surface-2); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--cft-ink); }
.btn-icon { width: 40px; --bs-btn-padding-x: 0; }
.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cft-spin .7s linear infinite; }
@keyframes cft-spin { to { transform: rotate(360deg); } }

/* Badges: Bootstrap's .badge, our state colours */
.badge { --bs-badge-padding-x: 9px; --bs-badge-padding-y: 2px; --bs-badge-font-size: var(--cft-fs-xs); --bs-badge-font-weight: 600; --bs-badge-border-radius: var(--cft-r-pill);
  display: inline-flex; align-items: center; gap: 5px; line-height: 1.6; }
.badge .ti { font-size: 13px; }
.badge-success { background: var(--cft-success-bg); --bs-badge-color: var(--cft-success); }
.badge-warning { background: var(--cft-warning-bg); --bs-badge-color: var(--cft-warning); }
.badge-danger { background: var(--cft-danger-bg); --bs-badge-color: var(--cft-danger); }
.badge-info { background: var(--cft-info-bg); --bs-badge-color: var(--cft-info); }
.badge-neutral { background: var(--cft-surface-2); --bs-badge-color: var(--cft-muted); }

/* Form controls: Bootstrap's .form-control / .form-select; inputs carry the ≥3:1 border */
.form-control, .form-select { min-height: 42px; padding: 9px 12px; border-color: var(--cft-border-strong); background-color: var(--cft-surface); color: var(--cft-ink); border-radius: var(--cft-r-md); }
.form-select { padding-right: 36px; }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-control:focus, .form-select:focus { border-color: var(--cft-focus); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); background-color: var(--cft-surface); color: var(--cft-ink); }
.form-control::placeholder { color: var(--cft-muted); opacity: 1; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--cft-danger); background-image: none; padding-right: 12px; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cft-danger) 35%, transparent); }

/* Cards: Bootstrap's .card / .card-body */
.card { --bs-card-bg: var(--cft-surface); --bs-card-border-color: var(--cft-border); --bs-card-border-radius: var(--cft-r-lg); --bs-card-color: var(--cft-ink);
  --bs-card-spacer-y: var(--cft-s5); --bs-card-spacer-x: var(--cft-s5); box-shadow: var(--cft-shadow); }

/* ── Part 2 · Ours (no Bootstrap equivalent) ───────────────────────────────── */
.ti { font-size: 1.15em; line-height: 1; vertical-align: -.12em; }
.muted { color: var(--cft-muted); }
.num { font-variant-numeric: tabular-nums; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--cft-r-pill); background: var(--cft-accent); color: var(--cft-on-accent); font: 700 11px/1 var(--cft-sans); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--cft-r-pill); border: 1px solid var(--cft-border-strong); background: var(--cft-surface); color: var(--cft-ink); font-size: var(--cft-fs-sm); cursor: pointer; text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-current] { background: var(--cft-primary); border-color: var(--cft-primary); color: var(--cft-on-primary); }
.cur { font: 700 10px/1 var(--cft-sans); letter-spacing: .06em; padding: 3px 5px; border-radius: 4px; border: 1px solid currentColor; }
.cur-usd { color: var(--cft-usd); } .cur-eur { color: var(--cft-eur); }
.field { display: grid; gap: 6px; margin-bottom: var(--cft-s4); }
.field > label, .field-label { font: 600 var(--cft-fs-sm)/1.3 var(--cft-sans); }
.hint { font-size: var(--cft-fs-xs); color: var(--cft-muted); }
.error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--cft-fs-sm); color: var(--cft-danger); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--cft-fs-sm); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cft-primary); flex: none; }
.masked { font-family: var(--cft-mono); letter-spacing: .08em; }
.card-head { display: flex; align-items: center; gap: var(--cft-s3); padding: var(--cft-s4) var(--cft-s5); border-bottom: 1px solid var(--cft-border); }
.card-head h3 { margin: 0; font-size: var(--cft-fs-md); font-family: var(--cft-sans); }
.card-head .r { margin-left: auto; display: flex; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--cft-s3); }
.kpi { padding: var(--cft-s4) var(--cft-s5); }
.kpi .k-label { font-size: var(--cft-fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--cft-muted); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.kpi .k-value { font: 600 var(--cft-fs-2xl)/1.15 var(--cft-sans); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: var(--cft-fs-sm); color: var(--cft-muted); margin-top: 2px; }
.delta { font-weight: 600; font-size: var(--cft-fs-sm); }
.delta.up { color: var(--cft-success); } .delta.down { color: var(--cft-danger); }

/* ── Tables (stack below 992px; .opt columns hidden below 1200px) ─────────── */
.table-wrap { overflow-x: auto; }
.table { --bs-table-bg: var(--cft-surface); --bs-table-color: var(--cft-ink); --bs-table-border-color: var(--cft-border); --bs-table-hover-bg: var(--cft-surface-2); --bs-table-hover-color: var(--cft-ink); margin: 0; font-size: var(--cft-fs-sm); }
.table th { text-align: left; font-weight: 600; color: var(--cft-muted); font-size: var(--cft-fs-xs); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--cft-border); white-space: nowrap; background: var(--cft-surface); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--cft-border); vertical-align: top; }
.table tbody tr:hover > * { --bs-table-bg-state: var(--cft-surface-2); }
.table tbody tr[aria-selected="true"] > * { --bs-table-bg-state: var(--cft-soft); }
.table .right { text-align: right; } .table td.right { font-variant-numeric: tabular-nums; }
.table th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
@container (max-width: 1199.98px) { .table .opt { display: none; } }
@container (max-width: 991.98px) {
  .table.stack thead { display: none; }
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
  .table.stack tr { border-bottom: 1px solid var(--cft-border); padding: 10px 14px; }
  .table.stack td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; text-align: right; }
  .table.stack td::before { content: attr(data-label); color: var(--cft-muted); font-size: var(--cft-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
  .table.stack td.primary { font-weight: 600; text-align: left; }
  .table.stack td.primary::before { display: none; }
}

/* ── Pager (B3: never a silent cap) ───────────────────────────────────────── */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cft-s3); justify-content: space-between; padding: var(--cft-s3) var(--cft-s5); font-size: var(--cft-fs-sm); color: var(--cft-muted); }
.pager nav { display: flex; gap: 4px; }
.pager a, .pager span.cur-page { min-width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: var(--cft-r-sm); text-decoration: none; color: var(--cft-ink); border: 1px solid var(--cft-border); background: var(--cft-surface); padding: 0 8px; }
.pager span.cur-page { background: var(--cft-primary); color: var(--cft-on-primary); border-color: var(--cft-primary); font-weight: 600; }
.pager a[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ── Filter bar + date range (one row above results) ──────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: var(--cft-s2); align-items: center; padding: var(--cft-s3) 0 var(--cft-s4); }
.filters .form-select, .filters .form-control { width: auto; min-height: 36px; padding: 6px 10px; font-size: var(--cft-fs-sm); }
.filters .form-select { padding-right: 30px; background-position: right 8px center; }
.filters .r { margin-left: auto; display: flex; gap: 8px; }
.daterange { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; border: 1px solid var(--cft-border-strong); border-radius: var(--cft-r-md); background: var(--cft-surface); overflow: hidden; }
.daterange .custom { min-height: 34px; flex-wrap: wrap; }
.daterange button { border: 0; background: none; padding: 7px 11px; font: 500 var(--cft-fs-sm) var(--cft-sans); color: var(--cft-ink); cursor: pointer; border-right: 1px solid var(--cft-border); }
.daterange button[aria-pressed="true"] { background: var(--cft-soft); font-weight: 700; }
.daterange .custom { display: inline-flex; gap: 6px; align-items: center; padding: 0 10px; font-size: var(--cft-fs-sm); color: var(--cft-muted); }
.daterange .custom input { border: 0; background: none; color: var(--cft-ink); font: inherit; width: 8.4em; }

/* ── Banners, callouts, empty states, toasts ──────────────────────────────── */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--cft-r-md); border: 1px solid transparent; font-size: var(--cft-fs-sm); }
.banner .ti { font-size: 20px; flex: none; margin-top: 1px; }
.banner b { display: block; margin-bottom: 2px; }
.banner p { margin: 0; }
.banner .act { margin-left: auto; flex: none; }
.banner.info { background: var(--cft-info-bg); color: var(--cft-info); }
.banner.success { background: var(--cft-success-bg); color: var(--cft-success); }
.banner.warning { background: var(--cft-warning-bg); color: var(--cft-warning); }
.banner.danger { background: var(--cft-danger-bg); color: var(--cft-danger); }
.empty { text-align: center; padding: var(--cft-s12) var(--cft-s6); color: var(--cft-muted); }
.empty .ti { font-size: 40px; color: var(--cft-border-strong); }
.empty h3 { color: var(--cft-ink); margin: 12px 0 6px; font-family: var(--cft-sans); }
.toast { --bs-toast-bg: var(--cft-ink); --bs-toast-color: var(--cft-bg); --bs-toast-border-color: transparent; --bs-toast-border-radius: var(--cft-r-md); --bs-toast-max-width: 420px; --bs-toast-font-size: var(--cft-fs-sm); --bs-toast-box-shadow: var(--cft-shadow-lg); }
.toast-body { display: flex; gap: 10px; align-items: center; padding: 12px 16px; }
.skeleton { background: linear-gradient(90deg, var(--cft-surface-2), var(--cft-border), var(--cft-surface-2)); background-size: 200% 100%; animation: cft-shimmer 1.4s infinite; border-radius: 6px; min-height: 14px; }
@keyframes cft-shimmer { to { background-position: -200% 0; } }

/* ── Slide-in panel (B2 fix: it always shows the outcome) ─────────────────── */
.panel-wrap { position: relative; }
.scrim { position: absolute; inset: 0; background: var(--cft-scrim); }
.panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--cft-surface); border-left: 1px solid var(--cft-border); box-shadow: var(--cft-shadow-lg); display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: var(--cft-s4) var(--cft-s5); border-bottom: 1px solid var(--cft-border); }
.panel-head h3 { margin: 0; font-family: var(--cft-sans); }
.panel-head .btn { margin-left: auto; }
.panel-body { padding: var(--cft-s5); overflow: auto; flex: 1; }
.panel-foot { padding: var(--cft-s4) var(--cft-s5); border-top: 1px solid var(--cft-border); display: flex; gap: 8px; justify-content: flex-end; background: var(--cft-surface); }

/* ── Tabs, breadcrumbs, segmented ─────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--cft-border); overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--cft-muted); font-weight: 600; font-size: var(--cft-fs-sm); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current] { color: var(--cft-ink); border-bottom-color: var(--cft-primary); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--cft-fs-sm); color: var(--cft-muted); margin-bottom: var(--cft-s2); }
.crumbs a { color: var(--cft-muted); text-decoration: none; } .crumbs a:hover { color: var(--cft-ink); text-decoration: underline; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--cft-surface-2); border-radius: var(--cft-r-md); }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font: 600 var(--cft-fs-sm) var(--cft-sans); color: var(--cft-muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.seg button[aria-pressed="true"] { background: var(--cft-surface); color: var(--cft-ink); box-shadow: var(--cft-shadow); }

/* ── Dropdown — Renara pattern (D6): CSS-only, opens on hover and focus ──── */
.drop { position: relative; display: inline-block; }
.drop-t { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 4px; font: 600 var(--cft-fs-sm) var(--cft-sans); color: var(--cft-ink); cursor: pointer; letter-spacing: .02em; }
.drop-t .chev { transition: transform var(--cft-dur); font-size: 14px; }
.drop:hover .drop-t .chev, .drop:focus-within .drop-t .chev { transform: rotate(180deg); }
.drop-c { position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; padding: 6px; background: var(--cft-surface); border: 1px solid var(--cft-border); border-radius: var(--cft-r-md); box-shadow: var(--cft-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--cft-dur), transform var(--cft-dur), visibility var(--cft-dur); z-index: 30; }
.drop-c::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.drop:hover .drop-c, .drop:focus-within .drop-c { opacity: 1; visibility: visible; transform: none; }
.drop-c a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: var(--cft-r-sm); text-decoration: none; color: var(--cft-ink); }
.drop-c a:hover { background: var(--cft-surface-2); }
.drop-c a b { font-family: var(--cft-serif); font-weight: 600; font-size: var(--cft-fs-md); }
.drop-c a i { font-style: italic; font-family: var(--cft-serif); font-size: var(--cft-fs-sm); color: var(--cft-accent-text); }
.drop-c a[aria-current] { background: var(--cft-soft); }
.drop-c a[aria-current] b::after { content: " ✓"; color: var(--cft-success); font-family: var(--cft-sans); }
.drop-c h6 { margin: 8px 12px 4px; font: 700 10.5px/1 var(--cft-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cft-muted); }
.drop-c .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* ── Meters, progress, reward level (D22) ─────────────────────────────────── */
.meter { height: 8px; background: var(--cft-surface-2); border-radius: var(--cft-r-pill); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--cft-chart-1); border-radius: var(--cft-r-pill); }
.meter.warn > i { background: var(--cft-chart-4); }
.level { display: grid; gap: 8px; }
.level-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.level-steps span { height: 8px; border-radius: 4px; background: var(--cft-surface-2); }
.level-steps span.done { background: var(--cft-accent); }
.level-steps span.now { background: linear-gradient(90deg, var(--cft-accent) var(--p, 50%), var(--cft-surface-2) 0); }
.level-names { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; font-size: var(--cft-fs-xs); color: var(--cft-muted); }
.level-names b { color: var(--cft-ink); }

/* ── Avatars, media tiles, flags (D9, D19) ────────────────────────────────── */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--cft-soft); color: var(--cft-soft-ink); font: 700 12px var(--cft-sans); flex: none; }
.tile { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--cft-surface-2); }
.tile .ph { position: absolute; inset: 0; }
.tile .dur { position: absolute; right: 6px; bottom: 6px; font: 600 11px var(--cft-sans); color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 4px; }
.tile .flag { position: absolute; left: 6px; top: 6px; }
.tile .sel { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); }
.tile[aria-selected="true"] { outline: 3px solid var(--cft-focus); outline-offset: -3px; }
.tile[aria-selected="true"] .sel { background: var(--cft-focus); }

/* ── Charts (server-rendered SVG; geometry ported in the build) ───────────── */
.chart { width: 100%; height: auto; display: block; }
.chart .grid line { stroke: var(--cft-chart-grid); stroke-width: 1; }
.chart .axis text { fill: var(--cft-muted); font: 11px var(--cft-sans); }
.chart .s1 { fill: var(--cft-chart-1); } .chart .s2 { fill: var(--cft-chart-2); } .chart .s3 { fill: var(--cft-chart-3); } .chart .s4 { fill: var(--cft-chart-4); }
.chart .l1 { stroke: var(--cft-chart-1); } .chart .l2 { stroke: var(--cft-chart-2); } .chart .l3 { stroke: var(--cft-chart-3); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .bar { stroke: var(--cft-surface); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--cft-fs-sm); color: var(--cft-ink); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Cloudflare Turnstile (D50). The widget itself is Cloudflare's iframe (300 x 65,
   compact 150 x 140); this only places it and shows the "couldn't check" state. */
.ts { margin: 4px 0 12px; min-height: 65px; }
.ts.compact { min-height: 0; margin: 8px 0 0; }
.ts-failed { margin: 8px 0 12px; }