/* ─────────────────────────────────────────────────────────────
   Page 10 — Components library
   ───────────────────────────────────────────────────────────── */

/* Section header — for each component group */
.comp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .comp-row { grid-template-columns: 1fr; } }
.comp-frame {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.comp-frame.daylight {
  background: #FFFFFF;
  color: #000;
  border-color: rgba(0,0,0,0.08);
}
.comp-frame.nightfall {
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(47,55,255,0.14), transparent 60%),
    #050818;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.10);
}
.comp-frame .stage {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-height: 80px;
}
.comp-frame .stage.col {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.comp-frame .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comp-frame.daylight .label { color: #767781; }
.comp-frame.daylight .label .s { color: var(--blue-700); }
.comp-frame.nightfall .label { color: rgba(255,255,255,0.55); }
.comp-frame.nightfall .label .s { color: var(--blue-300); }

/* Buttons (twins for both registers) */
.cb {
  appearance: none;
  border: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  letter-spacing: -0.005em;
}
.cb-sm { padding: 7px 12px; font-size: 12px; gap: 6px; }
.cb-lg { padding: 14px 22px; font-size: 14.5px; }

.cb-d-primary { background: #000; color: #FFF; }
.cb-d-primary:hover { background: #1A1A1E; }
.cb-d-secondary { background: #FFFFFF; color: #000; border: 1px solid #DADADD; }
.cb-d-secondary:hover { border-color: #000; }
.cb-d-ghost { background: transparent; color: #000; }
.cb-d-ghost:hover { background: #F7F7F8; }
.cb-d-danger { background: #B53519; color: #FFF; }
.cb-d-disabled { background: #EEEEF0; color: #B9BAC0; cursor: not-allowed; }

.cb-n-primary { background: #FFFFFF; color: #000; }
.cb-n-primary:hover { background: rgba(255,255,255,0.92); }
.cb-n-secondary { background: transparent; color: #FFF; border: 1px solid rgba(255,255,255,0.22); }
.cb-n-secondary:hover { border-color: #FFFFFF; }
.cb-n-ghost { background: transparent; color: rgba(255,255,255,0.78); }
.cb-n-ghost:hover { color: #FFFFFF; background: rgba(255,255,255,0.04); }
.cb-n-danger { background: #FF9494; color: #2C0F0F; }
.cb-n-disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.28); cursor: not-allowed; }

.cb .material-icons { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════
   §10.1 Button system — variant × size × state matrix
   Themed by data-mode on .btn-show; one toggle flips the whole panel.
   ═══════════════════════════════════════════════════════════════ */

/* header with the Light/Dark toggle */
.section-head.btn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.btn-modes {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: rgba(255,255,255,0.03);
}
.btn-modes button {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding: 5px 14px;
  border-radius: 6px;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}
.btn-modes button:hover { color: var(--fg-default); }
.btn-modes button.active { background: var(--blue-500); color: #FFFFFF; }

/* ── the showcase panel — carries its own light/dark tokens ── */
.btn-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.btn-show[data-mode="light"] {
  --eb-surface: #FFFFFF;
  --eb-fg: #0B0B0D;
  --eb-muted: #767781;
  --eb-faint: #B9BAC0;
  --eb-line: #E9E9EC;
  --eb-line-strong: #DADADD;
  --eb-accent: #000000;        /* primary CTA */
  --eb-accent-hover: #26262B;
  --eb-on-accent: #FFFFFF;
  --eb-sec: #F2F2F4;
  --eb-sec-hover: #E9E9EC;
  --eb-ghost-hover: #F4F4F6;
  --eb-link: var(--blue-600);
  --eb-link-hover: var(--blue-500);
  --eb-ring: rgba(47,55,255,0.30);
  /* hover-motion tints — primary is black here, so a light sheen reads */
  --eb-sheen: rgba(255,255,255,0.30);
  --eb-fill: rgba(0,0,0,0.07);
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
}
.btn-show[data-mode="dark"] {
  --eb-surface: #0A0D1C;
  --eb-fg: #FFFFFF;
  --eb-muted: rgba(255,255,255,0.56);
  --eb-faint: rgba(255,255,255,0.34);
  --eb-line: rgba(255,255,255,0.10);
  --eb-line-strong: rgba(255,255,255,0.22);
  --eb-accent: #FFFFFF;        /* primary CTA */
  --eb-accent-hover: rgba(255,255,255,0.88);
  --eb-on-accent: #0A0D1C;
  --eb-sec: rgba(255,255,255,0.08);
  --eb-sec-hover: rgba(255,255,255,0.14);
  --eb-ghost-hover: rgba(255,255,255,0.06);
  --eb-link: var(--blue-300);
  --eb-link-hover: #A8BCFF;
  --eb-ring: rgba(133,160,255,0.40);
  /* primary is white here — sheen must be a dark/blue wipe to show on it */
  --eb-sheen: rgba(47,55,255,0.22);
  --eb-fill: rgba(255,255,255,0.10);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.16), transparent 58%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

/* ── the button itself ── */
.eb {
  appearance: none;
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  /* spring overshoot only on transform/shadow — NOT on colour
     (an overshooting curve makes background/colour flash past target) */
  transition:
    background 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms ease,
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* keep label + icon above any sweep/fill pseudo-elements */
.eb > * { position: relative; z-index: 1; }
.eb:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; }
.eb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--eb-ring); }

/* ── arrow icon: nudge forward on hover, with a faint trail ── */
.eb .ico-arrow {
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb:hover .ico-arrow { transform: translateX(3px); }
.eb-lg:hover .ico-arrow { transform: translateX(4px); }
.eb:active .ico-arrow { transform: translateX(1px); }
/* icon-only arrow: same nudge */
.eb-icon:hover .ico-arrow { transform: translateX(2px); }

/* sizes */
.eb-xs { font-size: 11.5px; padding: 5px 10px;  gap: 5px; border-radius: 4px; }
.eb-sm { font-size: 12.5px; padding: 7px 13px;  gap: 6px; }
.eb-md { font-size: 13.5px; padding: 10px 17px; gap: 7px; }
.eb-lg { font-size: 14.5px; padding: 13px 22px; gap: 8px; }

/* icon-only squares — match each size's height */
.eb-icon { padding: 0; aspect-ratio: 1 / 1; }
.eb-icon.eb-xs { width: 26px; }
.eb-icon.eb-sm { width: 30px; }
.eb-icon.eb-md { width: 38px; }
.eb-icon.eb-lg { width: 46px; }

/* ── PRIMARY — lift + a sheen that wipes across ── */
.eb-primary {
  background: var(--eb-accent);
  color: var(--eb-on-accent);
  overflow: hidden;
}
/* the sheen: a soft diagonal highlight parked off the left edge */
.eb-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    var(--eb-sheen, rgba(255,255,255,0.28)) 48%,
    transparent 72%
  );
  transform: translateX(-130%) skewX(-12deg);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.eb-primary:hover {
  background: var(--eb-accent-hover);
  transform: translateY(-2px);
}
.eb-primary:hover::before { transform: translateX(130%) skewX(-12deg); }
.eb-primary:active {
  transform: translateY(0) scale(0.985);
}

/* ── SECONDARY — fill rises from the bottom + border sharpens ── */
.eb-secondary {
  background: var(--eb-sec);
  color: var(--eb-fg);
  border-color: var(--eb-line-strong);
  overflow: hidden;
}
.eb-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--eb-fill, rgba(0,0,0,0.06));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.eb-secondary:hover {
  border-color: var(--eb-fg);
  transform: translateY(-2px);
}
.eb-secondary:hover::after { transform: scaleY(1); }
.eb-secondary:active {
  transform: translateY(0) scale(0.985);
}

.eb-tertiary { background: transparent; color: var(--eb-fg); }
.eb-tertiary:hover { background: var(--eb-ghost-hover); }

.eb-link, .eb-linkmuted {
  background: transparent;
  padding-left: 4px; padding-right: 4px;
  border-radius: 4px;
}
.eb-link { color: var(--eb-link); }
.eb-link:hover { color: var(--eb-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.eb-linkmuted { color: var(--eb-fg); }
.eb-linkmuted:hover { color: var(--eb-link); text-decoration: underline; text-underline-offset: 3px; }
/* link icon-only shouldn't carry the text padding */
.eb-link.eb-icon, .eb-linkmuted.eb-icon { padding: 0; }

/* states */
.eb.is-disabled, .eb[disabled] { cursor: not-allowed; opacity: 0.55; }
.eb.is-disabled:hover, .eb[disabled]:hover { background: var(--eb-accent); }
.eb-secondary.is-disabled:hover { background: var(--eb-sec); border-color: var(--eb-line-strong); }
.eb.is-loading { cursor: progress; opacity: 1; }
.eb-spin {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.85;
  animation: ebSpin 0.7s linear infinite;
}
@keyframes ebSpin { to { transform: rotate(360deg); } }

/* ── inline outline icons (Emma §08 set, currentColor) ── */
.eb .ico { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; }
.eb-xs .ico { width: 13px; height: 13px; }
.eb-sm .ico { width: 14px; height: 14px; }
.eb-md .ico { width: 16px; height: 16px; }
.eb-lg .ico { width: 18px; height: 18px; }
.ico {
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ico-arrow  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ico-add    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ico-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-5-5'/%3E%3C/svg%3E"); }
.ico-more   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E"); }
/* glyphs use --ico-svg for both mask props (DRY) */
.ico-mail, .ico-help, .ico-chev, .ico-x, .ico-copy, .ico-alert,
.ico-user, .ico-check, .ico-vitals,
.ico-dev-mobile, .ico-dev-tablet, .ico-dev-desktop {
  -webkit-mask-image: var(--ico-svg); mask-image: var(--ico-svg);
}
.ico-dev-mobile  { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.ico-dev-tablet  { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.ico-dev-desktop { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.ico-vitals { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-6 4 12 2-6h6'/%3E%3C/svg%3E"); }
.ico-user  { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); }
.ico-check { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.ico-mail  { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ico-help  { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 .8-1 1.7'/%3E%3Ccircle cx='12' cy='17' r='0.5' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ico-chev  { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ico-x     { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ico-copy  { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E"); }
.ico-alert { --ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='16' r='0.5' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }

/* ── matrix grid ── */
.btn-matrix {
  display: grid;
  grid-template-columns: 150px repeat(4, minmax(0, 1fr)) minmax(120px, 0.9fr);
  gap: 14px 16px;
  align-items: center;
}
.bm-head {
  display: contents;
}
.bm-head > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eb-faint);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--eb-line);
}
.bm-head .bm-corner { color: var(--eb-muted); }
.bm-head .bm-iconcol { text-align: left; }
.bm-row { display: contents; }
.bm-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--eb-fg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.bm-name em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--eb-faint);
}
.bm-cell { display: flex; align-items: center; }
.bm-cell.bm-icons { gap: 8px; }
/* subtle row separators */
.bm-row .bm-name,
.bm-row .bm-cell {
  padding: 4px 0;
}

/* ── states strip ── */
.btn-states {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--eb-line);
}
.bs-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eb-muted);
  margin-bottom: 16px;
}
.bs-label em { font-style: normal; color: var(--eb-faint); }
.bs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.bs-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.bs-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--eb-faint);
}

/* narrow: let the matrix scroll rather than crush the cells */
@media (max-width: 900px) {
  .btn-show { padding: 22px 20px 24px; }
  .btn-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .btn-matrix { min-width: 660px; }
}
/* disabled / loading must not lift, sheen, or fill */
.eb[disabled]:hover,
.eb.is-disabled:hover,
.eb.is-loading:hover { transform: none; box-shadow: none; }
.eb[disabled]:hover::before,
.eb[disabled]:hover::after,
.eb.is-disabled:hover::before,
.eb.is-disabled:hover::after,
.eb.is-loading:hover::before,
.eb.is-loading:hover::after { transform: translateX(-130%) skewX(-12deg); }
.eb-secondary[disabled]:hover::after,
.eb-secondary.is-disabled:hover::after { transform: scaleY(0); }
.eb[disabled]:hover .ico-arrow,
.eb.is-disabled:hover .ico-arrow { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .eb,
  .eb .ico-arrow,
  .eb-primary::before,
  .eb-secondary::after { transition: none; }
  .eb:hover { transform: none; }
  .eb:hover .ico-arrow { transform: none; }
  .eb-primary:hover::before { transform: translateX(-130%) skewX(-12deg); }
  .eb-secondary:hover::after { transform: scaleY(0); }
  .eb-spin { animation-duration: 1.4s; }
}

/* Inputs */
.ci {
  appearance: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  outline: none;
  width: 100%;
  letter-spacing: -0.005em;
}
.ci-d {
  background: #FFFFFF;
  color: #000;
  border: 1px solid #DADADD;
}
.ci-d::placeholder { color: #767781; }
.ci-d:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(47,55,255,0.18); }
.ci-d.is-error { border-color: var(--red-500); }
.ci-n {
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.12);
}
.ci-n::placeholder { color: rgba(255,255,255,0.45); }
.ci-n:focus { border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(86,106,255,0.28); }

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.comp-frame.daylight .field-label { color: #767781; }
.comp-frame.nightfall .field-label { color: rgba(255,255,255,0.55); }
.field-help {
  font-size: 11px;
  margin-top: 6px;
}
.comp-frame.daylight .field-help { color: #767781; }
.comp-frame.nightfall .field-help { color: rgba(255,255,255,0.55); }
.field-help.is-error { color: var(--red-500); }

/* ═══════════════════════════════════════════════════════════════
   §10.2 Input system — themed field shell with addons & states
   Reuses the same data-mode token contract as §10.1 buttons.
   ═══════════════════════════════════════════════════════════════ */
.inp-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.inp-show[data-mode="light"] {
  --if-surface: #FFFFFF;
  --if-fg: #0B0B0D;
  --if-muted: #767781;
  --if-faint: #9A9AA4;
  --if-line: #DADADD;
  --if-line-hover: #B9BAC0;
  --if-addon-bg: #F7F7F8;
  --if-field-bg: #FFFFFF;
  --if-chip-bg: #F2F2F4;
  --if-ring: rgba(47,55,255,0.22);
  --if-focus: var(--blue-500);
  --if-error: #D8401F;
  --if-error-ring: rgba(216,64,31,0.18);
  --if-error-bg: rgba(216,64,31,0.04);
  --if-req: #D8401F;
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
}
.inp-show[data-mode="dark"] {
  --if-surface: #0A0D1C;
  --if-fg: #FFFFFF;
  --if-muted: rgba(255,255,255,0.58);
  --if-faint: rgba(255,255,255,0.36);
  --if-line: rgba(255,255,255,0.14);
  --if-line-hover: rgba(255,255,255,0.30);
  --if-addon-bg: rgba(255,255,255,0.05);
  --if-field-bg: rgba(255,255,255,0.03);
  --if-chip-bg: rgba(255,255,255,0.08);
  --if-ring: rgba(133,160,255,0.34);
  --if-focus: var(--blue-300);
  --if-error: #FF9494;
  --if-error-ring: rgba(255,148,148,0.22);
  --if-error-bg: rgba(255,148,148,0.05);
  --if-req: #FF9494;
  background:
    radial-gradient(ellipse 90% 120% at 0% 0%, rgba(47,55,255,0.14), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

/* gallery grid */
.inp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 22px 20px;
}

/* one field block: label, field, help */
.ef { display: flex; flex-direction: column; }
.ef-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--if-muted);
  margin-bottom: 7px;
}
.ef-label .req { color: var(--if-req); margin-left: 1px; }

/* the field shell — flex row holding addons + input */
.ef-field {
  display: flex;
  align-items: stretch;
  background: var(--if-field-bg);
  border: 1px solid var(--if-line);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  overflow: hidden;
}
.ef-field:hover { border-color: var(--if-line-hover); }
/* live focus — ring follows whatever child input is focused */
.ef-field:focus-within,
.ef-field.is-focus-demo {
  border-color: var(--if-focus);
  box-shadow: 0 0 0 3px var(--if-ring);
}
.ef-field.is-error {
  border-color: var(--if-error);
  background: var(--if-error-bg);
}
.ef-field.is-error:focus-within { box-shadow: 0 0 0 3px var(--if-error-ring); }
.ef-field.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--if-addon-bg);
}
.ef-field.is-disabled .ef-input { cursor: not-allowed; }

/* the input itself */
.ef-input {
  appearance: none;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--if-fg);
  background: transparent;
  border: 0;
  outline: none;
  padding: 9px 12px;
}
.ef-input::placeholder { color: var(--if-faint); }

/* leading slot (icon / brand / $) */
.ef-lead {
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: var(--if-muted);
}
.ef-lead .ico { width: 16px; height: 16px; }
.ef-lead + .ef-input { padding-left: 8px; }
.ef-prefix {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--if-muted);
  padding-left: 12px;
  align-items: center;
}

/* trailing slot (help mark / alert) */
.ef-trail {
  display: flex;
  align-items: center;
  padding-right: 12px;
  color: var(--if-faint);
}
.ef-trail .ico { width: 15px; height: 15px; }
.ef-field.is-error .ef-trail { color: var(--if-error); }
.ef-hint-mark { cursor: help; }
.ef-hint-mark:hover { color: var(--if-muted); }

/* addon (select / text prefix), divided from the input */
.ef-addon {
  display: flex;
  align-items: center;
  background: var(--if-addon-bg);
  color: var(--if-fg);
  font-size: 13px;
  white-space: nowrap;
}
.ef-prefix-text {
  font-family: var(--font-mono);
  color: var(--if-muted);
  padding: 0 10px;
  border-right: 1px solid var(--if-line);
}
.ef-select { position: relative; }
.ef-select select {
  appearance: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--if-fg);
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 26px 0 12px;
  height: 100%;
  cursor: pointer;
  border-right: 1px solid var(--if-line);
}
.ef-select .ico-chev {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--if-muted);
  pointer-events: none;
}
.ef-addon-end { order: 9; }
.ef-addon-end select { border-right: 0; border-left: 1px solid var(--if-line); padding: 0 26px 0 12px; }
.ef-addon-end .ico-chev { right: 9px; }

/* card brand glyph (Mastercard-style overlapping circles) */
.ef-brand { display: flex; align-items: center; padding-left: 12px; gap: 0; }
.ef-brand b { width: 13px; height: 13px; border-radius: 50%; display: block; }
.ef-brand .cc-a { background: #E9692C; }
.ef-brand .cc-b { background: #F2A36E; margin-left: -6px; mix-blend-mode: screen; }
.inp-show[data-mode="light"] .ef-brand .cc-b { mix-blend-mode: multiply; }

/* users — tag/chip field */
.ef-tags { flex-wrap: wrap; align-items: center; gap: 5px; padding: 5px 6px; }
.ef-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--if-chip-bg);
  border: 1px solid var(--if-line);
  border-radius: 5px;
  padding: 2px 4px 2px 5px;
  font-size: 12.5px;
  color: var(--if-fg);
}
.ef-av {
  width: 15px; height: 15px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
}
.ef-av[data-i="p"] { background: linear-gradient(135deg, #F2A36E, #E9692C); }
.ef-x {
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; padding: 1px;
  color: var(--if-faint); cursor: pointer; border-radius: 3px;
  transition: color 140ms ease, background 140ms ease;
}
.ef-x .ico { width: 11px; height: 11px; }
.ef-x:hover { color: var(--if-fg); background: rgba(127,127,140,0.18); }
.ef-input-tags { flex: 1; min-width: 70px; padding: 4px 6px; }

/* website + copy combo */
.ef-combo { display: flex; align-items: stretch; gap: 8px; }
.ef-field-grow { flex: 1; }
.ef-copy {
  appearance: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--if-line);
  background: var(--if-addon-bg);
  color: var(--if-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 160ms cubic-bezier(0.34,1.56,0.64,1);
}
.ef-copy .ico { width: 14px; height: 14px; }
.ef-copy:hover { border-color: var(--if-line-hover); transform: translateY(-1px); }
.ef-copy:active { transform: translateY(0) scale(0.97); }
.ef-copy.is-copied { color: var(--if-focus); border-color: var(--if-focus); }

/* help line */
.ef-help {
  font-size: 11.5px;
  color: var(--if-muted);
  margin-top: 7px;
  line-height: 1.4;
}
.ef-help.is-error { color: var(--if-error); }

/* ── states strip ── */
.inp-states {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--if-line);
}
.is-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--if-muted);
  margin-bottom: 18px;
}
.is-label em { font-style: normal; color: var(--if-faint); }
.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 20px;
}
.is-col { gap: 0; }
.is-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--if-faint);
  margin-bottom: 8px;
}
.is-tag em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .ef-copy { transition: border-color 150ms ease, background 150ms ease, color 150ms ease; }
}

/* ═══════════════════════════════════════════════════════════════
   §10.3 Selects & search — live dropdowns, search, multi-select
   Shares the §10.2 --if-* token contract; same Light/Dark toggle.
   ═══════════════════════════════════════════════════════════════ */
.sel-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.sel-show[data-mode="light"] {
  --if-fg: #0B0B0D; --if-muted: #767781; --if-faint: #9A9AA4;
  --if-line: #DADADD; --if-line-hover: #B9BAC0;
  --if-field-bg: #FFFFFF; --if-addon-bg: #F7F7F8; --if-chip-bg: #F2F2F4;
  --if-ring: rgba(47,55,255,0.22); --if-focus: var(--blue-500); --if-req: #D8401F;
  --sel-menu-bg: #FFFFFF; --sel-menu-line: #E9E9EC;
  --sel-opt-hover: #F4F4F6; --sel-opt-active: #F0F1FE;
  --sel-shadow: 0 12px 32px rgba(15,18,40,0.14), 0 2px 8px rgba(15,18,40,0.08);
  --sel-kbd-bg: #FFFFFF; --sel-kbd-line: #DADADD;
  --sel-scroll: rgba(0,0,0,0.18); --sel-scroll-hover: rgba(0,0,0,0.30);
  background: #FFFFFF; border-color: rgba(0,0,0,0.08);
}
.sel-show[data-mode="dark"] {
  --if-fg: #FFFFFF; --if-muted: rgba(255,255,255,0.58); --if-faint: rgba(255,255,255,0.36);
  --if-line: rgba(255,255,255,0.14); --if-line-hover: rgba(255,255,255,0.30);
  --if-field-bg: rgba(255,255,255,0.03); --if-addon-bg: rgba(255,255,255,0.05); --if-chip-bg: rgba(255,255,255,0.08);
  --if-ring: rgba(133,160,255,0.34); --if-focus: var(--blue-300); --if-req: #FF9494;
  --sel-menu-bg: #0D1124; --sel-menu-line: rgba(255,255,255,0.10);
  --sel-opt-hover: rgba(255,255,255,0.05); --sel-opt-active: rgba(47,55,255,0.18);
  --sel-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
  --sel-kbd-bg: rgba(255,255,255,0.06); --sel-kbd-line: rgba(255,255,255,0.16);
  --sel-scroll: rgba(255,255,255,0.20); --sel-scroll-hover: rgba(255,255,255,0.34);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.14), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

.sel-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 22px 20px;
}
.ef-q { width: 13px; height: 13px; color: var(--if-faint); vertical-align: -1px; }

/* the select wrapper anchors the menu */
.sel { position: relative; }

/* trigger button */
.sel-trigger {
  appearance: none;
  width: 100%;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--if-fg);
  background: var(--if-field-bg);
  border: 1px solid var(--if-line);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.sel-trigger:hover { border-color: var(--if-line-hover); }
.sel-trigger:focus-visible,
.sel.is-open .sel-trigger {
  outline: none;
  border-color: var(--if-focus);
  box-shadow: 0 0 0 3px var(--if-ring);
}
.sel-lead { width: 16px; height: 16px; flex: 0 0 auto; color: var(--if-muted); }
.sel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.sel-value.is-placeholder { color: var(--if-faint); }
.sel-value em { font-style: normal; color: var(--if-faint); font-size: 12.5px; }
.sel-caret { width: 16px; height: 16px; flex: 0 0 auto; color: var(--if-muted); transition: transform 200ms cubic-bezier(0.22,1,0.36,1); }
.sel.is-open .sel-caret, .sel-caret.is-flip { transform: rotate(180deg); }

/* avatar / dot inside trigger value */
.sel-av {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
}
.sel-av[data-i="p"] { background: linear-gradient(135deg, #F2A36E, #E9692C); }
.sel-av[data-i="l"] { background: linear-gradient(135deg, #8BEA9D, #00A1A6); }
.sel-av[data-i="d"] { background: linear-gradient(135deg, #C2B3FF, #6F8DFF); }
.sel-av[data-i="c"] { background: linear-gradient(135deg, #FF9494, #B53519); }
.sel-av[data-i="n"] { background: linear-gradient(135deg, #69FDF8, #017E84); }
.sel-av[data-i="r"] { background: linear-gradient(135deg, #E1F066, #00CCCE); }
.sel-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--green-300, #8BEA9D); }

/* search bar variant */
.sel-searchbar { cursor: text; }
.sel-input {
  flex: 1; min-width: 40px;
  appearance: none; border: 0; outline: none; background: transparent;
  font: inherit; font-family: var(--font-sans); font-size: 13.5px;
  color: var(--if-fg); padding: 0;
}
.sel-input::placeholder { color: var(--if-faint); }
.sel-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--if-muted);
  background: var(--sel-kbd-bg);
  border: 1px solid var(--sel-kbd-line);
  border-radius: 4px;
  padding: 1px 5px;
  flex: 0 0 auto;
}
.sel-tags { flex-wrap: wrap; gap: 5px; }
.sel-chips { display: contents; }
.sel-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--if-chip-bg);
  border: 1px solid var(--if-line);
  border-radius: 5px;
  padding: 2px 4px 2px 4px;
  font-size: 12.5px; color: var(--if-fg);
}
.sel-chip .sel-av { width: 15px; height: 15px; }
.sel-chip .ef-x { color: var(--if-faint); }

/* the dropdown menu */
.sel-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  z-index: 40;
  background: var(--sel-menu-bg);
  border: 1px solid var(--sel-menu-line);
  border-radius: 10px;
  box-shadow: var(--sel-shadow);
  padding: 5px;
  max-height: 232px;
  overflow-y: auto;
  display: none;
  /* open animation */
  transform-origin: top center;
  /* thin scrollbar — Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--sel-scroll, rgba(127,127,140,0.4)) transparent;
}
/* thin scrollbar — WebKit / Chromium */
.sel-menu::-webkit-scrollbar { width: 6px; }
.sel-menu::-webkit-scrollbar-track { background: transparent; }
.sel-menu::-webkit-scrollbar-thumb {
  background: var(--sel-scroll, rgba(127,127,140,0.4));
  border-radius: 99px;
}
.sel-menu::-webkit-scrollbar-thumb:hover {
  background: var(--sel-scroll-hover, rgba(127,127,140,0.6));
}
.sel.is-open .sel-menu { display: block; animation: selPop 160ms cubic-bezier(0.22,1,0.36,1); }
@keyframes selPop {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* static "Open" specimen */
.sel-menu.is-static-open {
  position: static; display: block; box-shadow: var(--sel-shadow);
  margin-top: 6px; animation: none;
}

/* options */
.sel-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--if-fg);
  font-size: 13.5px;
  transition: background 120ms ease;
}
.sel-opt:hover, .sel-opt.is-cursor { background: var(--sel-opt-hover); }
.sel-opt.is-active { background: var(--sel-opt-active); }
.sel-optname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-optname em { font-style: normal; color: var(--if-faint); font-size: 12.5px; margin-left: 3px; }
.sel-tick { width: 16px; height: 16px; flex: 0 0 auto; color: var(--if-focus); }
.sel-opt .sel-lead-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--if-muted); }
.sel-empty { padding: 14px 10px; font-size: 13px; color: var(--if-faint); text-align: center; }

/* static state specimens (states strip) */
.sel-static {
  display: flex; align-items: center; gap: 7px;
  background: var(--if-field-bg);
  border: 1px solid var(--if-line);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 13.5px; color: var(--if-fg);
}
.sel-static .sel-value { flex: 1; }
.sel-static.is-focus { border-color: var(--if-focus); box-shadow: 0 0 0 3px var(--if-ring); }
.sel-static.is-disabled { opacity: 0.55; background: var(--if-addon-bg); }

@media (prefers-reduced-motion: reduce) {
  .sel.is-open .sel-menu { animation: none; }
  .sel-caret { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   §10.4 Cards — eight variants, one surface skeleton
   ═══════════════════════════════════════════════════════════════ */
.card-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.card-show[data-mode="light"] {
  --cd-fg: #0B0B0D; --cd-muted: #5E5E68; --cd-faint: #9A9AA4;
  --cd-surface: #FFFFFF; --cd-line: #E4E4E8; --cd-soft: #F7F7F8; --cd-cover: #EEF0F6;
  --cd-accent: var(--blue-600); --cd-panel-line: #E9E9EC;
  --cd-shadow: 0 6px 20px rgba(15,18,40,0.10);
  --cd-sk: rgba(0,0,0,0.06); --cd-sk-hi: rgba(0,0,0,0.03);
  /* button + pill tokens used inside cards */
  --eb-fg: #0B0B0D; --eb-muted: #767781; --eb-line-strong: #DADADD;
  --eb-sec: #F2F2F4; --eb-sec-hover: #E9E9EC; --eb-fill: rgba(0,0,0,0.06); --eb-ring: rgba(47,55,255,0.22);
  --eb-accent: #000; --eb-accent-hover: #26262B; --eb-on-accent: #FFF; --eb-ghost-hover: #F4F4F6; --eb-sheen: rgba(255,255,255,0.30);
  background: #FFFFFF; border-color: rgba(0,0,0,0.08);
}
.card-show[data-mode="dark"] {
  --cd-fg: #FFFFFF; --cd-muted: rgba(255,255,255,0.62); --cd-faint: rgba(255,255,255,0.40);
  --cd-surface: #0E1326; --cd-line: rgba(255,255,255,0.12); --cd-soft: rgba(255,255,255,0.05); --cd-cover: #161C36;
  --cd-accent: var(--blue-300); --cd-panel-line: rgba(255,255,255,0.10);
  --cd-shadow: 0 8px 24px rgba(0,0,0,0.5);
  --cd-sk: rgba(255,255,255,0.08); --cd-sk-hi: rgba(255,255,255,0.04);
  --eb-fg: #FFFFFF; --eb-muted: rgba(255,255,255,0.56); --eb-line-strong: rgba(255,255,255,0.22);
  --eb-sec: rgba(255,255,255,0.08); --eb-sec-hover: rgba(255,255,255,0.14); --eb-fill: rgba(255,255,255,0.10); --eb-ring: rgba(133,160,255,0.40);
  --eb-accent: #FFF; --eb-accent-hover: rgba(255,255,255,0.88); --eb-on-accent: #0A0D1C; --eb-ghost-hover: rgba(255,255,255,0.06); --eb-sheen: rgba(47,55,255,0.22);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.12), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

/* gallery — masonry-ish responsive grid */
.card-gallery {
  /* masonry via CSS multi-columns — packs cards tightly regardless of height */
  column-width: 264px;
  column-gap: 16px;
}
/* each card is a column item; keep it whole and add vertical rhythm */
.card-gallery > .card,
.card-gallery > .card-pickset {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 16px;
  width: 100%;
}

/* base card */
.card {
  position: relative;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: 14px;
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  color: var(--cd-fg);
}

/* shared bits */
.card-eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cd-muted);
  margin-bottom: 12px;
}
.card-eyebrow .ico { width: 13px; height: 13px; color: var(--cd-faint); }
.card-eyebrow-accent { color: var(--cd-accent); }
.card-ts { margin-left: auto; color: var(--cd-faint); font-size: 9.5px; letter-spacing: 0.04em; text-transform: none; }
.card-title { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 7px; color: var(--cd-fg); line-height: 1.3; }
.card-body { font-size: 13px; line-height: 1.55; color: var(--cd-muted); margin: 0; }
.card-actions { display: flex; gap: 8px; margin-top: 16px; }
.card-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); }
.card-avatar[data-i="p"] { background: linear-gradient(135deg, #F2A36E, #E9692C); }
.card-avatar[data-i="o"] { background: linear-gradient(135deg, #C2B3FF, #6F8DFF); }
.card-avatar-sm { width: 18px; height: 18px; }

/* 1 · metric */
.card-metricval { font-family: var(--font-sans); font-size: 30px; font-weight: 600; letter-spacing: -0.022em; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.card-delta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.card-delta.up { color: var(--green-500); }
.card-delta.down { color: var(--red-500); }
.card-metricsub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--cd-faint); margin-top: 7px; }
.card-spark { width: 100%; height: 30px; margin-top: 14px; overflow: visible; }
.card-spark polyline { fill: none; stroke: var(--cd-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.card-metric .cp-sm { margin-left: auto; }

/* 2 · recommendation */
.card-rec { border-left: 3px solid var(--cd-accent); }

/* 3 · profile */
.card-phead { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.card-pname { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--cd-fg); }
.card-pmeta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--cd-faint); margin-top: 2px; }
.card-actions .eb .ico { width: 14px; height: 14px; }

/* 4 · media */
.card-media { padding: 0; overflow: hidden; }
.card-cover {
  position: relative;
  height: 132px;
  background:
    repeating-linear-gradient(135deg, rgba(133,160,255,0.10) 0 9px, transparent 9px 18px),
    var(--cd-cover);
  border-bottom: 1px solid var(--cd-line);
}
.card-cover-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cd-accent); background: var(--cd-surface);
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--cd-line);
}
.card-mbody { padding: 16px 18px 18px; }
.card-byline { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--cd-faint); }

/* 5 · stat-grid */
.card-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cd-line); border: 1px solid var(--cd-line); border-radius: 10px; overflow: hidden; }
.card-stat { background: var(--cd-surface); padding: 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.card-stat b { font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--cd-fg); line-height: 1; }
.card-stat b.is-warn { color: var(--orange-500); }
.card-stat span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cd-faint); }

/* 6 · selectable */
.card-pickset { display: flex; flex-direction: column; gap: 10px; }
.card-pick {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  align-items: stretch;
  transition: border-color 180ms ease, transform 200ms cubic-bezier(0.34,1.56,0.64,1), background 180ms ease;
}
.card-pick:hover { transform: translateY(-2px); border-color: var(--cd-faint); }
.card-pick .card-eyebrow { margin-bottom: 6px; }
.card-pick .card-pname { font-size: 15px; font-weight: 600; color: var(--cd-fg); margin-bottom: 4px; }
.card-pick.is-selected { border-color: var(--cd-accent); background: color-mix(in srgb, var(--cd-accent) 6%, var(--cd-surface)); }
.card-tick {
  position: absolute; top: 14px; right: 14px;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid var(--cd-line);
  display: flex; align-items: center; justify-content: center;
  color: #FFF; transition: background 160ms ease, border-color 160ms ease;
}
.card-tick .ico { width: 12px; height: 12px; opacity: 0; transition: opacity 160ms ease; }
.card-pick.is-selected .card-tick { background: var(--cd-accent); border-color: var(--cd-accent); }
.card-pick.is-selected .card-tick .ico { opacity: 1; }

/* 7 · skeleton + empty */
.card-skeleton { gap: 10px; }
.sk-line { height: 11px; border-radius: 5px; background: linear-gradient(90deg, var(--cd-sk) 25%, var(--cd-sk-hi) 50%, var(--cd-sk) 75%); background-size: 200% 100%; animation: skShimmer 1.4s ease-in-out infinite; }
.sk-eyebrow { width: 38%; height: 9px; }
.sk-title { width: 72%; height: 15px; margin-bottom: 4px; }
.sk-short { width: 54%; }
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.card-empty { align-items: center; text-align: center; padding: 28px 18px; }
.card-emptyicon { width: 42px; height: 42px; border-radius: 11px; background: var(--cd-soft); display: flex; align-items: center; justify-content: center; color: var(--cd-faint); margin-bottom: 14px; }
.card-emptyicon .ico { width: 19px; height: 19px; }
.card-empty .card-title { margin-bottom: 5px; }
.card-empty .card-actions { margin-top: 16px; justify-content: center; }

/* 8 · notification */
.card-notif { flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; transition: background 160ms ease; }
.card-notif:hover { background: var(--cd-soft); }
.card-unread { position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--cd-accent); transition: opacity 200ms ease; }
.card-notif:not(.is-unread) .card-unread { opacity: 0; }
.card-nbody { min-width: 0; }
.card-ntext { font-size: 13px; line-height: 1.5; color: var(--cd-muted); margin: 0; }
.card-ntext b { color: var(--cd-fg); font-weight: 600; }
.card-notif .card-ts { margin-left: 0; display: block; margin-top: 4px; }

/* 9 · progress */
.card-progpct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--cd-accent); letter-spacing: 0; }
.card-track { height: 7px; border-radius: 99px; background: var(--cd-soft); overflow: hidden; margin: 4px 0 0; }
.card-fill { display: block; height: 100%; border-radius: 99px; background: var(--cd-accent); }
.card-track-sm { height: 4px; margin-top: 8px; }
.card-progress .card-metricsub { margin-top: 9px; }

/* 10 · chart */
.card-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; margin-top: 4px; }
.card-bars span { flex: 1; background: var(--cd-accent); opacity: 0.85; border-radius: 3px 3px 0 0; min-height: 4px; }
.card-bars span:last-child { opacity: 1; }
.card-barlabels { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--cd-faint); }

/* 11 · pricing */
.card-price.is-popular { border-color: var(--cd-accent); border-width: 1.5px; }
.card-price.is-popular { padding-top: 16px; }
.card-pricetag {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #FFF; background: var(--cd-accent); padding: 3px 8px; border-radius: 6px;
  line-height: 1.4;
}
.card-show[data-mode="dark"] .card-pricetag { color: #06122E; }
.card-price .card-pname { font-size: 15px; font-weight: 600; margin: 2px 0 4px; }
.card-priceval { font-family: var(--font-sans); font-size: 30px; font-weight: 600; letter-spacing: -0.022em; line-height: 1; color: var(--cd-fg); }
.card-priceval span { font-size: 13px; font-weight: 400; color: var(--cd-faint); letter-spacing: 0; margin-left: 2px; }
.card-features { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.card-features li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cd-muted); }
.card-features .ico { width: 14px; height: 14px; flex: 0 0 auto; color: var(--green-500); }
.card-pricecta { margin-top: 18px; width: 100%; }

/* 12 · timeline */
.card-tl { list-style: none; margin: 4px 0 0; padding: 0; }
.card-tl li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.card-tl li:last-child { padding-bottom: 0; }
.card-tl li::before {
  content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px;
  width: 1.5px; background: var(--cd-line);
}
.card-tl li:last-child::before { display: none; }
.card-tldot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: 3px; background: var(--cd-surface); border: 1.5px solid var(--cd-faint); position: relative; z-index: 1; }
.card-tl li.is-done .card-tldot { background: var(--cd-accent); border-color: var(--cd-accent); }
.card-tl li > div { display: flex; flex-direction: column; gap: 1px; }
.card-tl li b { font-size: 13px; font-weight: 500; color: var(--cd-fg); }
.card-tl li .card-ts { margin: 0; }

/* 13 · alert / callout */
.card-alert { flex-direction: row; align-items: flex-start; gap: 11px; border-left-width: 3px; }
.card-alerticon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.card-alert.al-info  { border-left-color: var(--blue-500); }
.card-alert.al-info  .card-alerticon { color: var(--blue-500); }
.card-alert.al-warn  { border-left-color: var(--orange-500); }
.card-alert.al-warn  .card-alerticon { color: var(--orange-500); }
.card-alert.al-success { border-left-color: var(--green-500); }
.card-alert.al-success .card-alerticon { color: var(--green-500); }
.card-alert.al-error { border-left-color: var(--red-500); }
.card-alert.al-error .card-alerticon { color: var(--red-500); }
.card-show[data-mode="dark"] .card-alert.al-info { border-left-color: var(--blue-300); }
.card-show[data-mode="dark"] .card-alert.al-info .card-alerticon { color: var(--blue-300); }

/* 14 · file */
.card-file { flex-direction: row; align-items: center; gap: 12px; }
.card-fileicon { width: 38px; height: 38px; border-radius: 9px; background: var(--cd-soft); display: flex; align-items: center; justify-content: center; color: var(--cd-muted); flex: 0 0 auto; }
.card-fileicon .ico { width: 17px; height: 17px; }
.card-file .card-nbody { flex: 1; min-width: 0; }
.card-fileact { flex: 0 0 auto; padding: 6px; }
.card-down { transform: rotate(90deg); }

/* 15 · quote */
.card-quote { padding-top: 14px; }
.card-quotemark { font-family: var(--font-sans); font-size: 44px; line-height: 0.6; color: var(--cd-accent); opacity: 0.4; height: 22px; }
.card-quotetext { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--cd-fg); margin: 6px 0 0; }
.card-quote .card-byline { margin-top: 16px; }

/* 16 · map */
.card-map { padding: 0; overflow: hidden; }
.card-mapview {
  position: relative; height: 124px;
  background:
    radial-gradient(circle at 50% 46%, rgba(47,55,255,0.10), transparent 55%),
    var(--cd-cover);
  border-bottom: 1px solid var(--cd-line);
  overflow: hidden;
}
.card-mapgrid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--cd-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cd-line) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.card-mappin {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50% 50% 50% 0;
  background: var(--cd-accent); rotate: -45deg;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cd-accent) 18%, transparent);
}
.card-map .card-byline { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
  .card-pick { transition: border-color 180ms ease, background 180ms ease; }
  .card-pick:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   §10.5 Status pills — state × style matrix, one semantic palette
   State classes set --st-*; style classes (soft/solid/outline) use them.
   ═══════════════════════════════════════════════════════════════ */
.pill-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.pill-show[data-mode="light"] {
  --pl-fg: #0B0B0D; --pl-muted: #767781; --pl-faint: #9A9AA4;
  --pl-line: #E9E9EC;
  background: #FFFFFF; border-color: rgba(0,0,0,0.08);
}
.pill-show[data-mode="dark"] {
  --pl-fg: #FFFFFF; --pl-muted: rgba(255,255,255,0.58); --pl-faint: rgba(255,255,255,0.36);
  --pl-line: rgba(255,255,255,0.10);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.12), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

/* ── per-state palette (light) ──────────────────────────── */
.pill-show[data-mode="light"] .st-healthy { --st-fg: var(--green-700);  --st-solid: var(--green-500);  --st-on: #FFFFFF; --st-soft: var(--green-100);  --st-line: rgba(41,190,71,0.45); }
.pill-show[data-mode="light"] .st-watch   { --st-fg: var(--yellow-700); --st-solid: var(--yellow-500); --st-on: #1A1A0A; --st-soft: var(--yellow-100); --st-line: rgba(177,201,25,0.50); }
.pill-show[data-mode="light"] .st-risk    { --st-fg: var(--orange-700); --st-solid: var(--orange-500); --st-on: #FFFFFF; --st-soft: var(--orange-100); --st-line: rgba(233,97,38,0.45); }
.pill-show[data-mode="light"] .st-stall   { --st-fg: var(--red-900);    --st-solid: var(--red-500);    --st-on: #FFFFFF; --st-soft: var(--red-100);    --st-line: rgba(255,35,35,0.40); }
/* ── per-state palette (dark) ───────────────────────────── */
.pill-show[data-mode="dark"] .st-healthy { --st-fg: var(--green-300);  --st-solid: var(--green-500);  --st-on: #04210C; --st-soft: rgba(41,190,71,0.14);  --st-line: rgba(139,234,157,0.40); }
.pill-show[data-mode="dark"] .st-watch   { --st-fg: var(--yellow-300); --st-solid: var(--yellow-500); --st-on: #1A1A0A; --st-soft: rgba(225,240,102,0.12); --st-line: rgba(225,240,102,0.38); }
.pill-show[data-mode="dark"] .st-risk    { --st-fg: var(--orange-300); --st-solid: var(--orange-500); --st-on: #2A0F04; --st-soft: rgba(242,163,110,0.12); --st-line: rgba(242,163,110,0.40); }
.pill-show[data-mode="dark"] .st-stall   { --st-fg: var(--red-300);    --st-solid: var(--red-500);    --st-on: #2C0606; --st-soft: rgba(255,148,148,0.12); --st-line: rgba(255,148,148,0.38); }

/* ── the pill ───────────────────────────────────────────── */
.cp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}
.cp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
  position: relative;
}
/* styles */
.cp-soft    { color: var(--st-fg);  background: var(--st-soft); }
.cp-solid   { color: var(--st-on);  background: var(--st-solid); }
.cp-outline { color: var(--st-fg);  background: transparent; border-color: var(--st-line); }
.cp-solid .cp-dot { background: var(--st-on); opacity: 0.92; }

/* sizes */
.cp-sm { font-size: 9.5px; padding: 3px 8px; gap: 5px; }
.cp-sm .cp-dot { width: 5px; height: 5px; }
.cp-lg { font-size: 12px; padding: 7px 14px; gap: 7px; letter-spacing: 0.06em; }
.cp-lg .cp-dot { width: 7px; height: 7px; }

/* count badge */
.cp-count {
  font-weight: 600;
  margin-left: 3px;
  padding-left: 7px;
  border-left: 1px solid currentColor;
  opacity: 0.85;
}
.cp-solid .cp-count { border-left-color: var(--st-on); }

/* dismiss button */
.cp-dismiss { padding-right: 5px; }
.cp-x {
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; padding: 2px;
  margin-left: 1px;
  color: currentColor; cursor: pointer; border-radius: 50%;
  opacity: 0.6;
  transition: opacity 140ms ease, background 140ms ease;
}
.cp-x .ico { width: 10px; height: 10px; }
.cp-x:hover { opacity: 1; background: rgba(127,127,140,0.22); }

/* live pulse — only on the healthy/live state's dot */
.cp-pulse .cp-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: cpPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes cpPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(3);   opacity: 0; }
  100% { transform: scale(3);   opacity: 0; }
}

/* matrix grid */
.pill-matrix {
  display: grid;
  grid-template-columns: 170px repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: center;
}
.pm-head { display: contents; }
.pm-head > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-faint);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--pl-line);
}
.pm-head .pm-corner { color: var(--pl-muted); }
.pm-row { display: contents; }
.pm-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--pl-fg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.pm-name em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--pl-faint);
}
.pm-cell { display: flex; align-items: center; }

/* extras row */
.pill-extras {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--pl-line);
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
}
.pe-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin-bottom: 12px;
}
.pe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .pill-matrix { grid-template-columns: 1fr; gap: 8px; }
  .pill-matrix .pm-head { display: none; }
  .pm-name { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-pulse .cp-dot::after { animation: none; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   §10.6 Chips & tags — filter chips + tags (avatar / icon / plain)
   Lightly rounded (8px), never fully pill. Same data-mode contract.
   ═══════════════════════════════════════════════════════════════ */
.chip-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.chip-show[data-mode="light"] {
  --ch-fg: #0B0B0D; --ch-muted: #767781; --ch-faint: #9A9AA4;
  --ch-line: #DADADD; --ch-line-hover: #B9BAC0; --ch-bg: #F7F7F8; --ch-bg-hover: #EFEFF1;
  --ch-active-bg: #0B0B0D; --ch-active-fg: #FFFFFF;
  --ch-panel-line: #E9E9EC;
  background: #FFFFFF; border-color: rgba(0,0,0,0.08);
}
.chip-show[data-mode="dark"] {
  --ch-fg: #FFFFFF; --ch-muted: rgba(255,255,255,0.58); --ch-faint: rgba(255,255,255,0.36);
  --ch-line: rgba(255,255,255,0.16); --ch-line-hover: rgba(255,255,255,0.32);
  --ch-bg: rgba(255,255,255,0.04); --ch-bg-hover: rgba(255,255,255,0.08);
  --ch-active-bg: #FFFFFF; --ch-active-fg: #0B0B0D;
  --ch-panel-line: rgba(255,255,255,0.10);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.12), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

/* the chip — lightly rounded */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 450;
  letter-spacing: -0.002em;
  line-height: 1;
  color: var(--ch-fg);
  background: var(--ch-bg);
  border: 1px solid var(--ch-line);
  border-radius: 8px;               /* slightly rounded, not pill */
  padding: 6px 10px;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms cubic-bezier(0.34,1.56,0.64,1);
}
/* filter chip (button) — clickable */
button.chip { cursor: pointer; }
button.chip:hover { background: var(--ch-bg-hover); border-color: var(--ch-line-hover); }
button.chip:active { transform: scale(0.96); }
button.chip.is-active {
  background: var(--ch-active-bg);
  color: var(--ch-active-fg);
  border-color: var(--ch-active-bg);
}

/* avatar / icon inside chip */
.chip-av {
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  margin-left: -2px;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
}
.chip-av[data-i="p"] { background: linear-gradient(135deg, #F2A36E, #E9692C); }
.chip-av[data-i="l"] { background: linear-gradient(135deg, #8BEA9D, #00A1A6); }
.chip-av[data-i="o"] { background: linear-gradient(135deg, #C2B3FF, #6F8DFF); }
.chip-ico { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ch-muted); margin-left: -1px; }

/* dismiss button */
.chip-x {
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; padding: 1px;
  margin: 0 -2px 0 1px;
  color: var(--ch-faint); cursor: pointer; border-radius: 4px;
  transition: color 140ms ease, background 140ms ease;
}
.chip-x .ico { width: 12px; height: 12px; }
.chip-x:hover { color: var(--ch-fg); background: rgba(127,127,140,0.20); }

/* sizes */
.chip-sm { font-size: 11.5px; padding: 4px 8px; gap: 5px; border-radius: 6px; }
.chip-sm .chip-av { width: 14px; height: 14px; }
.chip-lg { font-size: 13.5px; padding: 8px 13px; gap: 7px; border-radius: 9px; }
.chip-lg .chip-av { width: 20px; height: 20px; }

/* layout */
.ch-group { margin-bottom: 26px; }
.ch-group:last-child { margin-bottom: 0; }
.ch-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ch-muted);
  margin-bottom: 14px;
}
.ch-label em { font-style: normal; color: var(--ch-faint); }
.ch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ch-cols { display: flex; flex-wrap: wrap; gap: 28px 40px; }
.ch-sub { display: flex; flex-direction: column; }
.ch-sublabel {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ch-faint);
  margin-bottom: 10px;
}
/* divider between filter chips and the rest */
.ch-group + .ch-group { padding-top: 24px; border-top: 1px solid var(--ch-panel-line); }

@media (prefers-reduced-motion: reduce) {
  .chip { transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
}

/* ═══════════════════════════════════════════════════════════════
   §10.8 Toasts — 4 types, action, countdown bar, live stack
   ═══════════════════════════════════════════════════════════════ */
.toast-show {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  overflow: hidden;
  transition: background 220ms ease, border-color 220ms ease;
}
.toast-show[data-mode="light"] {
  --tt-fg: #0B0B0D; --tt-muted: #5E5E68; --tt-faint: #9A9AA4;
  --tt-surface: #FFFFFF; --tt-line: #E4E4E8; --tt-close: #9A9AA4; --tt-close-hover: #0B0B0D;
  --tt-shadow: 0 14px 36px rgba(15,18,40,0.16), 0 3px 10px rgba(15,18,40,0.08);
  --tt-track: rgba(0,0,0,0.07); --tt-panel-line: #E9E9EC;
  /* tokens the launcher's .eb-secondary buttons need */
  --eb-fg: #0B0B0D; --eb-muted: #767781; --eb-line-strong: #DADADD;
  --eb-sec: #F2F2F4; --eb-sec-hover: #E9E9EC; --eb-fill: rgba(0,0,0,0.06);
  --eb-ring: rgba(47,55,255,0.22);
  background: #FFFFFF; border-color: rgba(0,0,0,0.08);
}
.toast-show[data-mode="dark"] {
  --tt-fg: #FFFFFF; --tt-muted: rgba(255,255,255,0.66); --tt-faint: rgba(255,255,255,0.40);
  --tt-surface: #11162C; --tt-line: rgba(255,255,255,0.12); --tt-close: rgba(255,255,255,0.50); --tt-close-hover: #FFFFFF;
  --tt-shadow: 0 18px 44px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.45);
  --tt-track: rgba(255,255,255,0.12); --tt-panel-line: rgba(255,255,255,0.10);
  /* tokens the launcher's .eb-secondary buttons need */
  --eb-fg: #FFFFFF; --eb-muted: rgba(255,255,255,0.56); --eb-line-strong: rgba(255,255,255,0.22);
  --eb-sec: rgba(255,255,255,0.08); --eb-sec-hover: rgba(255,255,255,0.14); --eb-fill: rgba(255,255,255,0.10);
  --eb-ring: rgba(133,160,255,0.40);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.12), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

/* the toast */
.ct {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 15px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tt-fg);
  background: var(--tt-surface);
  border: 1px solid var(--tt-line);
  box-shadow: var(--tt-shadow);
  overflow: hidden;
}
.ct-ico {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: #FFFFFF;
}
.ct-ico .ico { width: 15px; height: 15px; }
.ct-body { flex: 1; min-width: 0; color: var(--tt-muted); padding-top: 2px; }
.ct-body strong { display: block; font-weight: 600; color: var(--tt-fg); margin-bottom: 1px; }
.ct-action {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--tt-accent); cursor: pointer; padding: 0;
  margin-top: 7px; display: inline-block;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.ct-close {
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; padding: 3px;
  color: var(--tt-close); cursor: pointer; border-radius: 5px;
  flex: 0 0 auto; margin: -1px -2px 0 0;
  transition: color 140ms ease, background 140ms ease;
}
.ct-close .ico { width: 13px; height: 13px; }
.ct-close:hover { color: var(--tt-close-hover); background: rgba(127,127,140,0.18); }

/* countdown bar */
.ct-bar {
  position: absolute;
  left: 0; bottom: 0; height: 3px;
  width: 100%;
  background: var(--tt-accent);
  transform-origin: left;
  opacity: 0.85;
}
.ct-bar.is-static { width: 64%; }   /* specimens show a partial bar */

/* type accents */
.ct-success { --tt-accent: var(--green-500); }
.ct-success .ct-ico { background: var(--green-500); }
.ct-error   { --tt-accent: var(--red-500); }
.ct-error   .ct-ico { background: var(--red-500); }
.ct-warning { --tt-accent: var(--orange-500); }
.ct-warning .ct-ico { background: var(--orange-500); }
.ct-info    { --tt-accent: var(--blue-500); }
.ct-info    .ct-ico { background: var(--blue-500); }
.toast-show[data-mode="dark"] .ct-info { --tt-accent: var(--blue-300); }
.toast-show[data-mode="dark"] .ct-info .ct-ico { background: var(--blue-400); }

/* specimen grid */
.ts-specimens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.ts-specimens .ct-bar { animation: none; width: 62%; }

/* launcher */
.ts-launcher {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--tt-panel-line);
}
.ts-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tt-muted); margin-bottom: 14px;
}
.ts-label em { font-style: normal; color: var(--tt-faint); }
.ts-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* the live stack — bottom-right within the panel */
.ts-stack {
  position: absolute;
  right: 22px; bottom: 22px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100% - 44px));
  pointer-events: none;
}
.ts-stack .ct { pointer-events: auto; }
.ts-stack .ct {
  animation: ctIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-stack .ct.is-leaving {
  animation: ctOut 280ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.ts-stack .ct .ct-bar { animation: ctCountdown var(--ct-life, 4500ms) linear forwards; }
@keyframes ctIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ctOut {
  to { opacity: 0; transform: translateX(24px) scale(0.96); margin-bottom: -54px; }
}
@keyframes ctCountdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-stack .ct, .ts-stack .ct.is-leaving { animation: none; }
  .ts-stack .ct .ct-bar { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   §10.9 Modals & drawers — one overlay engine, many surfaces
   ═══════════════════════════════════════════════════════════════ */
.modal-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.modal-show[data-mode="light"],
.mo-host[data-mode="light"] {
  --mo-fg: #0B0B0D; --mo-muted: #5E5E68; --mo-faint: #9A9AA4;
  --mo-surface: #FFFFFF; --mo-line: #E9E9EC; --mo-soft: #F7F7F8;
  --mo-shadow: 0 30px 80px rgba(15,18,40,0.28), 0 8px 24px rgba(15,18,40,0.12);
  --mo-accent: var(--blue-600); --mo-close: #9A9AA4; --mo-close-hover: #0B0B0D;
  /* tokens the .eb launcher + dialog buttons need */
  --eb-fg: #0B0B0D; --eb-muted: #767781; --eb-line-strong: #DADADD;
  --eb-sec: #F2F2F4; --eb-sec-hover: #E9E9EC; --eb-fill: rgba(0,0,0,0.06);
  --eb-ring: rgba(47,55,255,0.22);
  --eb-accent: #000; --eb-accent-hover: #26262B; --eb-on-accent: #FFF;
  --eb-ghost-hover: #F4F4F6; --eb-sheen: rgba(255,255,255,0.30);
  --if-fg: #0B0B0D; --if-muted: #767781; --if-faint: #9A9AA4;
  --if-line: #DADADD; --if-line-hover: #B9BAC0; --if-field-bg: #FFFFFF;
  --if-ring: rgba(47,55,255,0.22); --if-focus: var(--blue-500); --if-req: #D8401F; --if-addon-bg: #F7F7F8;
  background: #FFFFFF; border-color: rgba(0,0,0,0.08);
}
.modal-show[data-mode="dark"],
.mo-host[data-mode="dark"] {
  --mo-fg: #FFFFFF; --mo-muted: rgba(255,255,255,0.64); --mo-faint: rgba(255,255,255,0.40);
  --mo-surface: #0C1126; --mo-line: rgba(255,255,255,0.12); --mo-soft: rgba(255,255,255,0.05);
  --mo-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.5);
  --mo-accent: var(--blue-300); --mo-close: rgba(255,255,255,0.5); --mo-close-hover: #FFFFFF;
  --eb-fg: #FFFFFF; --eb-muted: rgba(255,255,255,0.56); --eb-line-strong: rgba(255,255,255,0.22);
  --eb-sec: rgba(255,255,255,0.08); --eb-sec-hover: rgba(255,255,255,0.14); --eb-fill: rgba(255,255,255,0.10);
  --eb-ring: rgba(133,160,255,0.40);
  --eb-accent: #FFF; --eb-accent-hover: rgba(255,255,255,0.88); --eb-on-accent: #0A0D1C;
  --eb-ghost-hover: rgba(255,255,255,0.06); --eb-sheen: rgba(47,55,255,0.22);
  --if-fg: #FFFFFF; --if-muted: rgba(255,255,255,0.58); --if-faint: rgba(255,255,255,0.36);
  --if-line: rgba(255,255,255,0.14); --if-line-hover: rgba(255,255,255,0.30); --if-field-bg: rgba(255,255,255,0.03);
  --if-ring: rgba(133,160,255,0.34); --if-focus: var(--blue-300); --if-req: #FF9494; --if-addon-bg: rgba(255,255,255,0.05);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.12), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

/* launcher groups */
.md-group { margin-bottom: 22px; }
.md-group:last-child { margin-bottom: 0; }
.md-group + .md-group { padding-top: 20px; border-top: 1px solid var(--mo-line); }
.md-glabel {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mo-muted); margin-bottom: 13px;
}
.md-glabel em { font-style: normal; color: var(--mo-faint); }
.md-launch { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── overlay host ── */
.mo-host {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.mo-host[hidden] { display: none; }
.mo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 22, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.mo-host.is-open .mo-backdrop { opacity: 1; }
.mo-viewport {
  position: absolute;
  inset: 0;
  display: flex;
}

/* shared surface bits */
.mo-dialog, .mo-drawer, .mo-sheet {
  position: relative;
  background: var(--mo-surface);
  color: var(--mo-fg);
  border: 1px solid var(--mo-line);
  box-shadow: var(--mo-shadow);
}
.mo-x {
  position: absolute;
  top: 16px; right: 16px;
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; padding: 5px;
  color: var(--mo-close); cursor: pointer; border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
  z-index: 2;
}
.mo-x .ico { width: 15px; height: 15px; }
.mo-x:hover { color: var(--mo-close-hover); background: rgba(127,127,140,0.16); }
.mo-x-inline { position: static; }
.mo-lbl {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mo-accent); margin-bottom: 9px;
}
.mo-lbl-danger { color: var(--red-500); }
.mo-title {
  font-family: var(--font-sans);
  font-size: 19px; font-weight: 600; letter-spacing: -0.014em;
  margin: 0 0 9px; color: var(--mo-fg);
}
.mo-text { font-size: 13.5px; line-height: 1.55; color: var(--mo-muted); margin: 0; }
.mo-foot {
  display: flex; gap: 9px; justify-content: flex-end;
  margin-top: 22px;
}
.mo-foot-center { justify-content: center; }
.mo-iconwrap {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: #FFFFFF;
}
.mo-iconwrap .ico { width: 22px; height: 22px; }
.mo-iconwrap-danger { background: var(--red-500); }
.mo-iconwrap-success { background: var(--green-500); }
.mo-btn-danger { background: var(--red-500); color: #FFFFFF; border-color: var(--red-500); }
.mo-btn-danger:hover { background: var(--red-700); border-color: var(--red-700); }

/* ── centred dialog ── */
.mo-dialog {
  margin: auto;
  width: calc(100% - 40px);
  max-width: var(--mo-w, 480px);
  max-height: calc(100vh - 80px);
  border-radius: 16px;
  padding: 26px 26px 24px;
  display: flex; flex-direction: column;
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
.mo-host.is-open .mo-dialog { transform: scale(1) translateY(0); opacity: 1; }
.mo-dialog-center { text-align: center; align-items: center; }
.mo-dialog-center .mo-text { max-width: 38ch; }
/* sizes (set via --mo-w by JS data-size) */
.mo-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.ef-mo-select { position: relative; }
.ef-mo-select select { appearance: none; cursor: pointer; }
.ef-mo-select .ef-trail .ico { width: 14px; height: 14px; }

/* ── scrollable dialog ── */
.mo-dialog-scroll { padding: 0; max-width: 560px; }
.mo-shead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--mo-line);
}
.mo-shead .mo-title { margin: 0; }
.mo-sbody {
  overflow-y: auto;
  padding: 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--mo-line) transparent;
}
.mo-sbody::-webkit-scrollbar { width: 6px; }
.mo-sbody::-webkit-scrollbar-thumb { background: var(--mo-line); border-radius: 99px; }
.mo-release { padding: 12px 0; border-bottom: 1px solid var(--mo-line); }
.mo-release:last-child { border-bottom: 0; }
.mo-rel-v {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--mo-accent); margin-bottom: 5px;
}
.mo-release p { font-size: 13px; line-height: 1.55; color: var(--mo-muted); margin: 0; }
.mo-foot-sticky {
  margin-top: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--mo-line);
}

/* ── right drawer ── */
.mo-drawer {
  margin-left: auto;
  width: min(440px, calc(100% - 48px));
  height: 100%;
  border-radius: 0;
  border-top: 0; border-right: 0; border-bottom: 0;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(0.5, 0.1, 0.2, 1);
}
.mo-host.is-open .mo-drawer { transform: translateX(0); }
.mo-drow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mo-line);
}
.mo-dk {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mo-faint);
}
.mo-dv { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--mo-fg); }
.mo-dv .ef-av { width: 18px; height: 18px; }
.mo-dnote {
  margin-top: 16px; padding: 13px 14px;
  background: var(--mo-soft); border-radius: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--mo-muted);
}

/* ── bottom sheet ── */
.mo-sheet {
  margin-top: auto;
  width: 100%;
  border-radius: 18px 18px 0 0;
  border-bottom: 0; border-left: 0; border-right: 0;
  padding: 12px 20px 22px;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.5, 0.1, 0.2, 1);
}
.mo-host.is-open .mo-sheet { transform: translateY(0); }
.mo-grab {
  width: 38px; height: 4px; border-radius: 99px;
  background: var(--mo-line);
  margin: 2px auto 16px;
}
.mo-sheet .mo-title { text-align: center; font-size: 16px; margin-bottom: 16px; }
.mo-actions { display: flex; flex-direction: column; gap: 4px; max-width: 460px; margin: 0 auto; }
.mo-act {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--mo-fg); cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 12px; border-radius: 10px;
  transition: background 140ms ease;
}
.mo-act .ico { width: 17px; height: 17px; color: var(--mo-muted); }
.mo-act:hover { background: var(--mo-soft); }
.mo-act-danger { color: var(--red-500); }
.mo-act-danger .ico { color: var(--red-500); }

@media (prefers-reduced-motion: reduce) {
  .mo-backdrop, .mo-dialog, .mo-drawer, .mo-sheet { transition: none; }
  .mo-dialog { transform: none; opacity: 1; }
}
@media (max-width: 560px) {
  .mo-drawer { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   §10.7 Tabs — underline / segmented / enclosed, sliding indicator
   The indicator is positioned by JS via --ink-x / --ink-w.
   ═══════════════════════════════════════════════════════════════ */
.tab-show {
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 30px 32px 32px;
  transition: background 220ms ease, border-color 220ms ease;
}
.tab-show[data-mode="light"] {
  --tb-fg: #0B0B0D; --tb-muted: #767781; --tb-faint: #9A9AA4;
  --tb-line: #E9E9EC; --tb-ink: #0B0B0D;
  --tb-seg-bg: #F2F2F4; --tb-thumb: #FFFFFF; --tb-thumb-line: rgba(0,0,0,0.06);
  --tb-enc-bg: #F7F7F8; --tb-enc-active: #FFFFFF; --tb-enc-line: #E9E9EC;
  --tb-count-bg: rgba(0,0,0,0.07);
  background: #FFFFFF; border-color: rgba(0,0,0,0.08);
}
.tab-show[data-mode="dark"] {
  --tb-fg: #FFFFFF; --tb-muted: rgba(255,255,255,0.56); --tb-faint: rgba(255,255,255,0.36);
  --tb-line: rgba(255,255,255,0.12); --tb-ink: #FFFFFF;
  --tb-seg-bg: rgba(255,255,255,0.06); --tb-thumb: rgba(255,255,255,0.14); --tb-thumb-line: rgba(255,255,255,0.10);
  --tb-enc-bg: rgba(255,255,255,0.04); --tb-enc-active: rgba(255,255,255,0.10); --tb-enc-line: rgba(255,255,255,0.12);
  --tb-count-bg: rgba(255,255,255,0.14);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(47,55,255,0.12), transparent 56%),
    #060A1A;
  border-color: rgba(255,255,255,0.10);
}

.tg-block { margin-bottom: 28px; }
.tg-block:last-child { margin-bottom: 0; }
.tg-block + .tg-block { padding-top: 24px; border-top: 1px solid var(--tb-line); }
.tg-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tb-muted); margin-bottom: 14px;
}
.tg-label em { font-style: normal; color: var(--tb-faint); }

/* shared tab button */
.ctab {
  appearance: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--tb-muted);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}
.ctab:hover:not(:disabled):not(.is-active) { color: var(--tb-fg); }
.ctab.is-active { color: var(--tb-fg); }
.ctab:disabled { color: var(--tb-faint); cursor: not-allowed; opacity: 0.7; }
.ctab:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 6px; }
.tab-ico { width: 15px; height: 15px; flex: 0 0 auto; color: currentColor; }
.tab-count {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 99px;
  background: var(--tb-count-bg); color: currentColor;
  margin-left: 1px;
}

/* ── Underline variant ── */
.ctabs { position: relative; display: flex; margin: 0; padding: 0; }
.ctabs-underline {
  gap: 2px;
  border-bottom: 1px solid var(--tb-line);
}
.ctabs-underline .ctab { padding: 11px 14px; }
.ctab-ink {
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  width: var(--ink-w, 0);
  transform: translateX(var(--ink-x, 0));
  background: var(--tb-ink);
  border-radius: 2px;
  transition: transform 300ms cubic-bezier(0.5, 0.1, 0.2, 1), width 300ms cubic-bezier(0.5, 0.1, 0.2, 1);
  pointer-events: none;
}

/* ── Segmented variant — sliding thumb ── */
.ctabs-seg {
  gap: 0;
  background: var(--tb-seg-bg);
  border-radius: 9px;
  padding: 3px;
  display: inline-flex;
  position: relative;
}
.ctabs-seg .ctab {
  padding: 7px 16px;
  border-radius: 6px;
  z-index: 1;
  font-size: 12.5px;
}
.ctab-thumb {
  position: absolute;
  top: 3px; left: 0; bottom: 3px;
  width: var(--ink-w, 0);
  transform: translateX(var(--ink-x, 0));
  background: var(--tb-thumb);
  border: 1px solid var(--tb-thumb-line);
  border-radius: 6px;
  transition: transform 320ms cubic-bezier(0.5, 0.05, 0.15, 1), width 320ms cubic-bezier(0.5, 0.05, 0.15, 1);
  pointer-events: none;
}
.ctabs-seg.ctabs-sm .ctab { padding: 5px 12px; font-size: 11.5px; }
.ctabs-seg.ctabs-lg .ctab { padding: 9px 20px; font-size: 14px; }

/* ── Enclosed variant ── */
.ctabs-enclosed {
  gap: 4px;
  background: var(--tb-enc-bg);
  border: 1px solid var(--tb-enc-line);
  border-radius: 10px;
  padding: 4px;
  display: inline-flex;
}
.ctabs-enclosed .ctab { padding: 8px 14px; border-radius: 7px; }
.ctabs-enclosed .ctab.is-active {
  background: var(--tb-enc-active);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tab-show[data-mode="dark"] .ctabs-enclosed .ctab.is-active { box-shadow: none; }

/* ── content panels (underline variant) ── */
.tg-panels {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--tb-muted);
  line-height: 1.5;
  min-height: 22px;
}
.tg-panel { display: none; }
.tg-panel.is-active { display: block; animation: tgFade 260ms cubic-bezier(0.22,1,0.36,1); }
@keyframes tgFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tg-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

@media (prefers-reduced-motion: reduce) {
  .ctab-ink, .ctab-thumb { transition: none; }
  .tg-panel.is-active { animation: none; }
}

/* Component table of contents */
.comp-toc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .comp-toc { grid-template-columns: repeat(2, 1fr); } }
.comp-toc a {
  padding: 18px 18px 20px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.comp-toc a:hover { background: rgba(255,255,255,0.04); }
.comp-toc a .n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--blue-300);
}
.comp-toc a .l {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--fg-default);
}