/* ============================================================
 * BSS Design System · components.css
 * Requires tokens.css to be loaded first.
 *
 * Component classes are designed to be composable.
 * Background variants live on a wrapper (.bg-*), components
 * pick up appropriate colors via cascade where useful.
 * ============================================================ */

/* ============================================================
 * Section backgrounds (5 only — never invent a new BG color)
 * ============================================================ */
.bg-canvas     { background: var(--c-canvas);     color: var(--c-ink-deep); }
.bg-light-grey { background: var(--c-light-grey); color: var(--c-ink-deep); }
.bg-primary    { background: var(--c-primary);    color: #fff; }
.bg-dark-blue  { background: var(--c-dark-blue);  color: #fff; }
.bg-ink-deep   { background: var(--c-ink-deep);   color: #fff; }

.bg-wash-soft  { background: var(--gr-wash-soft); color: var(--c-ink-deep); }
.bg-wash-sky   { background: var(--gr-wash-sky);  color: var(--c-ink-deep); }
.bg-wash-cool  { background: var(--gr-wash-cool); color: var(--c-ink-deep); }
.bg-wash-diag  { background: var(--gr-wash-diag); color: var(--c-ink-deep); }

/* ============================================================
 * Buttons
 * Context rule: on primary / dark-blue / ink-deep BG → use .btn-sky.
 * On light BG → use .btn-primary.
 * ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--r-md);
  font: var(--fw-button) var(--fs-button)/var(--lh-button) var(--ff);
  letter-spacing: var(--tracking);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary    { background: var(--c-primary);    color: #fff; }
.btn-primary:hover    { background: var(--c-sky); color: var(--c-ink-deep); }

.btn-dark-blue  { background: var(--c-dark-blue);  color: #fff; }
.btn-dark-blue:hover  { background: var(--c-dark-blue-active); }

.btn-sky        { background: var(--c-sky);        color: var(--c-ink-deep); }
.btn-sky:hover  { background: var(--c-sky-light); }

.btn-ghost      { background: transparent; color: var(--c-ink-deep); box-shadow: inset 0 0 0 1.5px var(--c-light-grey); }
.btn-ghost:hover{ background: var(--c-light-grey); }

.btn-block { display: flex; width: 100%; }
.btn-lg    { padding: 18px 36px; font-size: 18px; }
.btn-sm    { padding: 10px 18px; font-size: var(--fs-caption); } /* 16px — Korean min */

/* ============================================================
 * Cards
 * .card — neutral white card
 * .card-soft / .card-sky / .card-diag — wash backgrounds
 * .card-inverted — ink-deep card with sky accent
 * ============================================================ */
.card {
  background: var(--c-canvas);
  border-radius: var(--r-xl);
  padding: var(--sp-3xl);
  box-shadow: var(--sh-soft);
  color: var(--c-body);
}
.card-soft     { background: var(--gr-wash-soft); }
.card-sky      { background: var(--gr-wash-sky); }
.card-diag     { background: var(--gr-wash-diag); }
.card-light    { background: var(--c-light-grey); box-shadow: none; }

.card-inverted {
  background: #13304E;
  color: #fff;
  border: 1px solid rgba(88,197,255,0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-inverted .card-accent { color: var(--c-sky); }

.card-header-band {
  padding: 0;
  overflow: hidden;
}
.card-header-band > .band {
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-xl) var(--sp-3xl);
  font: var(--fw-h4) var(--fs-h4)/var(--lh-h4) var(--ff);
  letter-spacing: var(--tracking);
}
.card-header-band > .body {
  padding: var(--sp-3xl);
}

/* ============================================================
 * Form fields
 * ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--sp-sm); }
.field > label {
  font: var(--fw-body-strong) var(--fs-caption)/var(--lh-caption) var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
}
.field > input,
.field > textarea,
.field > select {
  background: transparent;
  border: 1px solid var(--c-line-default);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font: var(--fw-body) var(--fs-caption)/1.4 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
  outline: none;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field > input::placeholder,
.field > textarea::placeholder { color: var(--c-grey); }
.field > input:hover,
.field > textarea:hover,
.field > select:hover { border-color: var(--c-line-hover); box-shadow: inset 0 0 0 1px var(--c-line-hover); }
.field > input:focus,
.field > textarea:focus,
.field > select:focus { border-color: var(--c-line-focus); box-shadow: inset 0 0 0 1px var(--c-line-focus); }
.field > textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field > select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230A1E33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}

/* Inverted form fields — for dark BG (.card-inverted) */
.card-inverted .field > label { color: rgba(255,255,255,0.7); }
.card-inverted .field > input,
.card-inverted .field > textarea,
.card-inverted .field > select {
  color: #fff;
  border-color: var(--c-line-default-inverted);
}
.card-inverted .field > input::placeholder,
.card-inverted .field > textarea::placeholder { color: rgba(255,255,255,0.4); }
.card-inverted .field > input:hover,
.card-inverted .field > textarea:hover,
.card-inverted .field > select:hover { border-color: var(--c-line-hover-inverted); box-shadow: inset 0 0 0 1px var(--c-line-hover-inverted); }
.card-inverted .field > input:focus,
.card-inverted .field > textarea:focus,
.card-inverted .field > select:focus { border-color: var(--c-line-focus-inverted); box-shadow: inset 0 0 0 1px var(--c-line-focus-inverted); }

/* Option cards — single select (radio) and multi select (check).
 * Indicators are always circular per system rule. */
.option-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.option-cards.vertical { grid-template-columns: 1fr; }

.option-card {
  background: var(--c-canvas);
  border-radius: var(--r-md);
  padding: 20px 52px 20px 20px;
  position: relative;
  border: 1px solid var(--c-line-default);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.option-card:hover { border-color: var(--c-line-hover); box-shadow: inset 0 0 0 1px var(--c-line-hover); }
.option-card.selected:hover { box-shadow: none; }
.option-card .oc-title {
  font: var(--fw-body-strong) var(--fs-caption)/1.4 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
}
.option-card .oc-desc {
  margin-top: 6px;
  /* Korean minimum 16px (caption token). */
  font: var(--fw-body) var(--fs-caption)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-body);
}
.option-card.selected {
  background: var(--c-sky-light);
  box-shadow: none;
}
.option-card::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%; /* always circle */
  box-shadow: inset 0 0 0 2px var(--c-light-grey);
  background: #fff;
  transition: background 0.15s, box-shadow 0.15s;
}
.option-card.selected::before { background: var(--c-primary); box-shadow: none; }
.option-card.selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 14px/1 var(--ff);
}

/* ============================================================
 * Navigation
 * ============================================================ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: var(--c-canvas);
  box-shadow: var(--sh-soft);
}
.nav .nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font: var(--fw-body-strong) var(--fs-body)/var(--lh-body-strong) var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
}
.nav .nav-brand svg,
.nav .nav-brand img { display: block; height: 50px; width: auto; }
.nav .nav-items { display: flex; gap: var(--sp-2xl); align-items: center; }
.nav .nav-items a:not(.btn) {
  color: var(--c-body);
  text-decoration: none;
  font: var(--fw-button) var(--fs-button)/1.5 var(--ff);
  letter-spacing: var(--tracking);
}
.nav .nav-items a:not(.btn):hover { color: var(--c-primary); }

/* ============================================================
 * Badges / Tags
 * ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  /* Korean minimum 16px (caption token). NEVER reduce below this. */
  font: var(--fw-body-strong) var(--fs-caption)/1 var(--ff);
  letter-spacing: var(--tracking);
}
.badge-primary { background: var(--c-sky-light); color: var(--c-primary); }
.badge-grey    { background: var(--c-light-grey); color: var(--c-ink-deep); }
.badge-positive{ background: rgba(0,167,117,0.12); color: var(--c-positive); }
.badge-warning { background: rgba(250,164,26,0.12); color: var(--c-warning); }
.badge-negative{ background: rgba(241,106,38,0.12); color: var(--c-negative); }

/* ============================================================
 * Section / Container helpers
 * ============================================================ */
.section { padding: var(--sp-5xl) 0; }
.section-sm { padding: var(--sp-4xl) 0; }
.section-lg { padding: var(--sp-6xl) 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-2xl); }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 var(--sp-2xl); }
.container-lg { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-2xl); }

/* ============================================================
 * Grid presets
 * ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3xl); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2xl); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }

@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .option-cards { grid-template-columns: 1fr; }
}

/* ============================================================
 * Link
 * ============================================================ */
a {
  color: var(--c-primary);
  text-underline-offset: 2px;
}
a:hover { color: var(--c-primary-active); }

/* ============================================================
 * Line tokens
 * Hairline = thin section / divider rule.  Bold = input outline.
 * ============================================================ */
:root {
  --line-hairline: 1px solid rgba(10,30,51,0.12);
  --line-hairline-inverted: 1px solid rgba(255,255,255,0.16);
}

/* ============================================================
 * Accordion (Wise-style FAQ)
 * Hairline rule between items. Open item gets a 2px ink-deep
 * outlined box around the question. Plus icon rotates 45° → ×.
 * ============================================================ */
.accordion { border-top: var(--line-hairline); }
.accordion details { border-bottom: var(--line-hairline); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-xl) var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  font: var(--fw-body-strong) var(--fs-body-strong)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
  transition: color 0.15s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--c-primary); }
.accordion .acc-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-light-grey);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.accordion .acc-icon::before,
.accordion .acc-icon::after {
  content: "";
  position: absolute;
  background: var(--c-ink-deep);
  transition: background 0.15s;
}
.accordion .acc-icon::before { width: 16px; height: 2px; }
.accordion .acc-icon::after  { width: 2px; height: 16px; }
.accordion details[open] .acc-icon {
  background: var(--c-ink-deep);
  transform: rotate(45deg);
}
.accordion details[open] .acc-icon::before,
.accordion details[open] .acc-icon::after { background: #fff; }
.accordion .acc-body {
  padding: 0 var(--sp-lg) var(--sp-xl);
  max-width: 780px;
}
.accordion .acc-body > * { margin: 0; }
.accordion .acc-body > * + * { margin-top: var(--sp-md); }

/* ============================================================
 * Carousel (Wise mw-carousel style)
 * Arrows on top-right. Cards alternate dark / light fills.
 * Hidden scrollbar, smooth scroll via JS.
 * ============================================================ */
.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-2xl);
}
.carousel-head .carousel-title { margin: 0; }
.carousel-controls {
  display: flex;
  gap: var(--sp-md);
  flex: 0 0 auto;
}
.carousel-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--c-light-grey);
  color: var(--c-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.carousel-btn > svg { display: block; width: 20px; height: 20px; }
.carousel-btn:hover { background: var(--c-primary); color: var(--c-light-grey); }
.carousel-btn:active { transform: scale(0.95); }
.carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; background: var(--c-light-grey); color: var(--c-primary); transform: none; }

.carousel-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 340px;
  gap: var(--sp-xl);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.carousel-rail::-webkit-scrollbar { display: none; }

@media (max-width: 820px) {
  .carousel-rail { grid-auto-columns: 300px; }
}
@media (max-width: 540px) {
  .carousel-rail { grid-auto-columns: 86%; }
}

.t-card {
  scroll-snap-align: start;
  border-radius: var(--r-xl);
  padding: var(--sp-3xl) var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  min-height: 460px;
  min-width: 0;
}
.t-card-dark  { background: var(--c-ink-deep); color: #fff; }
.t-card-light { background: var(--c-sky-light); color: var(--c-ink-deep); }

.t-avatar {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--c-light-grey);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font: var(--fw-body) 12px/1.2 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-grey);
  overflow: visible;
}
.t-card-dark .t-avatar { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.t-avatar-flag {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-canvas);
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--ff-en);
  color: var(--c-ink-deep);
}
.t-card-quote {
  font: var(--fw-body-strong) 20px/1.5 var(--ff);
  letter-spacing: var(--tracking);
  margin: 0;
  text-wrap: pretty;
}
.t-card-dark .t-card-quote  { color: #fff; }
.t-card-light .t-card-quote { color: var(--c-ink-deep); }
.t-card-author {
  display: flex; flex-direction: column; gap: 2px;
}
.t-card-author .name { font: var(--fw-body-strong) var(--fs-caption)/1.4 var(--ff); letter-spacing: var(--tracking); }
.t-card-author .role { font: var(--fw-body) var(--fs-caption)/1.4 var(--ff); letter-spacing: var(--tracking); opacity: 0.7; }
.t-card-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: none;
  font: var(--fw-button) var(--fs-button)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.t-card-dark .t-card-cta  { background: var(--c-sky-light); color: var(--c-ink-deep); }
.t-card-light .t-card-cta { background: var(--c-ink-deep);  color: #fff; }
.t-card-cta:hover { transform: translateY(-1px); opacity: 0.92; }

/* ============================================================
 * Extended components (v3.1) — Geist-aligned set.
 * Minimal color usage: existing tokens only, no new hex.
 * All interactive indicators are circular per hard rule §1.6.
 * ============================================================ */

/* ---------- Checkbox (circular per system rule) ---------- */
.checkbox {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-md);
  cursor: pointer;
  font: var(--fw-body) var(--fs-caption)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
  user-select: none;
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox .cb-box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-canvas);
  box-shadow: inset 0 0 0 2px var(--c-line-default);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.checkbox:hover .cb-box { box-shadow: inset 0 0 0 2px var(--c-line-hover); }
.checkbox input:checked + .cb-box {
  background: var(--c-primary);
  box-shadow: none;
}
.checkbox input:checked + .cb-box::before {
  content: "✓";
  color: #fff;
  font: 700 14px/1 var(--ff);
}
.checkbox input:disabled + .cb-box { background: var(--c-light-grey); box-shadow: inset 0 0 0 2px var(--c-line-soft); }
.checkbox input:disabled ~ * { color: var(--c-grey); }

/* ---------- Radio (circular) ---------- */
.radio {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-md);
  cursor: pointer;
  font: var(--fw-body) var(--fs-caption)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
  user-select: none;
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio .rd-box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-canvas);
  box-shadow: inset 0 0 0 2px var(--c-line-default);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.radio:hover .rd-box { box-shadow: inset 0 0 0 2px var(--c-line-hover); }
.radio input:checked + .rd-box { box-shadow: inset 0 0 0 2px var(--c-primary); }
.radio input:checked + .rd-box::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
}
.radio input:disabled + .rd-box { background: var(--c-light-grey); box-shadow: inset 0 0 0 2px var(--c-line-soft); }
.radio input:disabled ~ * { color: var(--c-grey); }

/* ---------- Switch (pill track + circular knob) ---------- */
.switch {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-md);
  cursor: pointer;
  font: var(--fw-body) var(--fs-caption)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
  user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .sw-track {
  flex: 0 0 auto;
  width: 44px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-light-grey);
  box-shadow: inset 0 0 0 1px var(--c-line-default);
  position: relative;
  transition: background 0.15s, box-shadow 0.15s;
}
.switch .sw-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-canvas);
  box-shadow: var(--sh-soft);
  transition: transform 0.18s;
}
.switch input:checked + .sw-track { background: var(--c-primary); box-shadow: none; }
.switch input:checked + .sw-track::after { transform: translateX(20px); }
.switch input:disabled + .sw-track { opacity: 0.5; }

/* ---------- Progress (linear bar) ---------- */
.progress {
  width: 100%;
  height: 8px;
  background: var(--c-light-grey);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.progress .pg-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-pill);
  transition: width 0.3s;
}
.progress.is-indeterminate .pg-fill {
  width: 30% !important;
  animation: pg-loop 1.4s linear infinite;
}
@keyframes pg-loop {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ---------- Spinner (circular loader) ---------- */
.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--c-light-grey);
  border-top-color: var(--c-primary);
  animation: spin 0.8s linear infinite;
}
.spinner.sp-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner.sp-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Skeleton (loading placeholder) ---------- */
.skel {
  display: block;
  background: linear-gradient(90deg, var(--c-light-grey) 0%, #F5F7F9 50%, var(--c-light-grey) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-md);
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel.sk-text { height: 16px; margin: 4px 0; }
.skel.sk-title { height: 24px; margin: 6px 0; }
.skel.sk-block { height: 120px; }
.skel.sk-circle { border-radius: 50%; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: relative;
  display: inline-flex;
}
.tooltip > .tt-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-ink-deep);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
  font: var(--fw-body) var(--fs-caption)/1.4 var(--ff);
  letter-spacing: var(--tracking);
}
.tooltip > .tt-content::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--c-ink-deep);
}
.tooltip:hover > .tt-content,
.tooltip:focus-within > .tt-content { opacity: 1; }

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed;
  bottom: var(--sp-xl);
  right: var(--sp-xl);
  z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-md);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-md);
  background: var(--c-ink-deep);
  color: #fff;
  padding: var(--sp-md) var(--sp-xl);
  border-radius: var(--r-md);
  box-shadow: var(--sh-full);
  min-width: 280px;
  font: var(--fw-body) var(--fs-caption)/1.5 var(--ff);
  letter-spacing: var(--tracking);
}
.toast .tst-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-sky);
  flex: 0 0 auto;
}
.toast.is-positive .tst-dot { background: var(--c-positive); }
.toast.is-warning  .tst-dot { background: var(--c-warning); }
.toast.is-negative .tst-dot { background: var(--c-negative); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; align-items: center; gap: var(--sp-xs);
  border-bottom: 1px solid var(--c-line-default);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--sp-md) var(--sp-lg);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--c-grey);
  font: var(--fw-button) var(--fs-button)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--c-ink-deep); }
.tab.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* ---------- Pagination ---------- */
.pagination {
  display: inline-flex; gap: var(--sp-xs); align-items: center;
}
.pg-btn {
  min-width: 40px; height: 40px;
  padding: 0 var(--sp-md);
  border-radius: var(--r-md);
  background: transparent;
  border: 0;
  color: var(--c-body);
  font: var(--fw-button) var(--fs-button)/1 var(--ff);
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pg-btn:hover { background: var(--c-light-grey); color: var(--c-ink-deep); }
.pg-btn.is-active { background: var(--c-ink-deep); color: #fff; }
.pg-btn:disabled { color: var(--c-grey); cursor: not-allowed; background: transparent; }
.pg-ellipsis { padding: 0 var(--sp-sm); color: var(--c-grey); }

/* ---------- Table ---------- */
.table-bss { width: 100%; border-collapse: collapse; }
.table-bss th, .table-bss td {
  padding: var(--sp-md) var(--sp-lg);
  text-align: left;
  font: var(--fw-body) var(--fs-caption)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-body);
  border-bottom: var(--line-hairline);
}
.table-bss thead th {
  color: var(--c-grey);
  text-transform: uppercase;
  font: 600 var(--fs-caption)/1.2 var(--ff-en);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--c-line-default);
}
.table-bss tbody tr:hover { background: var(--c-light-grey); }
.table-bss tbody tr:last-child td { border-bottom: 0; }

/* ---------- Code block (multi-line) ---------- */
.code-block {
  background: var(--c-ink-deep);
  color: var(--c-light-grey);
  border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-xl);
  overflow-x: auto;
  font: 400 var(--fs-caption)/1.6 var(--ff-en);
  letter-spacing: 0;
}
.code-block code { color: inherit; font: inherit; }

/* ---------- Snippet (single-line code w/ copy) ---------- */
.snippet {
  display: inline-flex; align-items: center; gap: var(--sp-md);
  background: var(--c-light-grey);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  font: 600 var(--fs-caption)/1 var(--ff-en);
  letter-spacing: 0;
  color: var(--c-ink-deep);
}
.snippet-copy {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-grey);
  padding: 4px;
  border-radius: 4px;
  font: var(--fw-body) var(--fs-caption)/1 var(--ff);
  letter-spacing: var(--tracking);
}
.snippet-copy:hover { color: var(--c-primary); background: var(--c-canvas); }

/* ---------- Status dot ---------- */
.status-dot {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font: var(--fw-body) var(--fs-caption)/1.4 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-body);
}
.status-dot::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-grey);
  flex: 0 0 auto;
}
.status-dot.is-positive::before { background: var(--c-positive); }
.status-dot.is-warning::before  { background: var(--c-warning); }
.status-dot.is-negative::before { background: var(--c-negative); }
.status-dot.is-info::before     { background: var(--c-primary); }

/* ---------- Entity (chip with leading element) ---------- */
.entity {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  padding: 4px var(--sp-md) 4px 4px;
  border-radius: var(--r-pill);
  background: var(--c-light-grey);
  color: var(--c-ink-deep);
  font: var(--fw-body-strong) var(--fs-caption)/1.4 var(--ff);
  letter-spacing: var(--tracking);
}
.entity .ent-mark {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--fs-caption)/1 var(--ff);
}

/* ---------- Split button ---------- */
.split-btn {
  display: inline-flex; align-items: stretch;
  border-radius: var(--r-md);
  overflow: hidden;
}
.split-btn > .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.split-btn > .split-toggle {
  padding: 14px 16px;
  border: 0;
  background: var(--c-primary);
  color: #fff;
  cursor: pointer;
  border-left: 1px solid rgba(255,255,255,0.15);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: background 0.15s;
}
.split-btn > .split-toggle:hover { background: var(--c-sky); color: var(--c-ink-deep); }

/* ---------- Show more (expand text) ---------- */
.show-more-wrap[data-collapsed="true"] .show-more-body {
  max-height: 96px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.show-more-toggle {
  margin-top: var(--sp-sm);
  background: transparent; border: 0;
  color: var(--c-primary);
  cursor: pointer;
  padding: 0;
  font: var(--fw-body-strong) var(--fs-caption)/1.5 var(--ff);
  letter-spacing: var(--tracking);
}

/* ---------- Collapse (single details, no accordion border) ---------- */
.collapse summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) 0;
  font: var(--fw-body-strong) var(--fs-body)/1.5 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
}
.collapse summary::-webkit-details-marker { display: none; }
.collapse summary::after {
  content: "+";
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-light-grey);
  color: var(--c-ink-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--ff);
  transition: transform 0.2s;
}
.collapse[open] summary::after { content: "−"; }
.collapse[open] > * + * { margin-top: var(--sp-sm); }

/* ---------- Choicebox (compact option-card) ---------- */
.choicebox {
  display: inline-flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm) var(--sp-sm);
  background: var(--c-canvas);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--c-line-default);
  cursor: pointer;
  font: var(--fw-body) var(--fs-caption)/1.4 var(--ff);
  letter-spacing: var(--tracking);
  color: var(--c-ink-deep);
  transition: box-shadow 0.15s, background 0.15s;
}
.choicebox::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-canvas);
  box-shadow: inset 0 0 0 2px var(--c-line-default);
  flex: 0 0 auto;
}
.choicebox:hover { box-shadow: inset 0 0 0 1px var(--c-line-hover); }
.choicebox.is-selected { background: var(--c-sky-light); box-shadow: inset 0 0 0 1px var(--c-primary); }
.choicebox.is-selected::before { background: var(--c-primary); box-shadow: none; }

/* ---------- Context card (info card with action) ---------- */
.context-card {
  display: flex; align-items: flex-start; gap: var(--sp-lg);
  padding: var(--sp-xl);
  background: var(--c-light-grey);
  border-radius: var(--r-md);
}
.context-card .cc-mark {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--ff);
}
.context-card .cc-body { display: flex; flex-direction: column; gap: var(--sp-xs); flex: 1; }
.context-card .cc-body h4 { margin: 0; }
.context-card .cc-body p { margin: 0; color: var(--c-body); }

/* ---------- Slider (range) ---------- */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-light-grey);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 3px solid var(--c-canvas);
  box-shadow: 0 1px 4px rgba(10,30,51,0.18);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 3px solid var(--c-canvas);
  box-shadow: 0 1px 4px rgba(10,30,51,0.18);
  cursor: pointer;
}

/* ---------- Multi-select (tag input) ---------- */
.multi-select {
  display: flex; flex-wrap: wrap; gap: var(--sp-xs);
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  background: var(--c-canvas);
  box-shadow: inset 0 0 0 1px var(--c-line-default);
  min-height: 48px;
  align-items: center;
}
.multi-select:focus-within { box-shadow: inset 0 0 0 1px var(--c-primary); }
.multi-select .ms-tag {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 4px 4px 4px var(--sp-md);
  background: var(--c-sky-light);
  color: var(--c-primary);
  border-radius: var(--r-pill);
  font: var(--fw-body-strong) var(--fs-caption)/1.2 var(--ff);
  letter-spacing: var(--tracking);
}
.multi-select .ms-tag .ms-x {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 0;
  font: 700 12px/1 var(--ff);
}
.multi-select input {
  flex: 1; min-width: 100px;
  border: 0; background: transparent;
  font: var(--fw-body) var(--fs-caption)/1.4 var(--ff);
  letter-spacing: var(--tracking);
  outline: none;
  padding: 4px var(--sp-sm);
  color: var(--c-ink-deep);
}

/* ---------- Sheet (slide-in panel) ---------- */
.sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(520px, 100vw);
  background: var(--c-canvas);
  box-shadow: -8px 0 24px rgba(10,30,51,0.18);
  padding: var(--sp-3xl);
  z-index: 150;
  display: flex; flex-direction: column; gap: var(--sp-lg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}
.sheet.is-open { transform: translateX(0); }
.sheet .sh-close {
  align-self: flex-end;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-light-grey);
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 18px/1 var(--ff);
  color: var(--c-ink-deep);
}
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,30,51,0.40);
  z-index: 140;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Theme switcher (3-segment) ---------- */
.theme-switcher {
  display: inline-flex; gap: 2px;
  padding: 2px;
  background: var(--c-light-grey);
  border-radius: var(--r-pill);
}
.theme-switcher button {
  padding: 6px 14px;
  border: 0; background: transparent;
  color: var(--c-grey);
  cursor: pointer;
  border-radius: var(--r-pill);
  font: var(--fw-body-strong) var(--fs-caption)/1.2 var(--ff);
  letter-spacing: var(--tracking);
  transition: background 0.15s, color 0.15s;
}
.theme-switcher button:hover { color: var(--c-ink-deep); }
.theme-switcher button.is-active { background: var(--c-canvas); color: var(--c-ink-deep); box-shadow: var(--sh-soft); }

/* ---------- Layout Grid (visual guide grid component) ---------- */
.lay-grid {
  display: grid;
  position: relative;
  background:
    linear-gradient(to right, var(--c-line-soft) 1px, transparent 1px) 0 0 / calc((100% - 1px) / var(--lg-cols, 4)) 100% repeat-x,
    linear-gradient(to bottom, var(--c-line-soft) 1px, transparent 1px) 0 0 / 100% calc((100% - 1px) / var(--lg-rows, 2)) repeat-y;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  grid-template-columns: repeat(var(--lg-cols, 4), 1fr);
  grid-template-rows: repeat(var(--lg-rows, 2), minmax(80px, auto));
  gap: 0;
}
.lay-grid.is-hide-cols { background-image: linear-gradient(to bottom, var(--c-line-soft) 1px, transparent 1px); background-size: 100% calc((100% - 1px) / var(--lg-rows, 2)); background-repeat: repeat-y; }
.lay-grid.is-hide-rows { background-image: linear-gradient(to right, var(--c-line-soft) 1px, transparent 1px); background-size: calc((100% - 1px) / var(--lg-cols, 4)) 100%; background-repeat: repeat-x; }
.lay-cell {
  padding: var(--sp-md);
  display: flex; align-items: center; justify-content: center;
  font: 600 var(--fs-caption)/1 var(--ff-en);
  letter-spacing: 0;
  color: var(--c-grey);
  min-height: 80px;
}
.lay-cell.is-solid {
  background: var(--c-sky-light);
  color: var(--c-primary);
  border-radius: 4px;
  margin: 4px;
}
.lay-cell.is-overlay {
  background: rgba(0,108,183,0.10);
  color: var(--c-primary);
  border-radius: 4px;
  margin: 4px;
}