/* =============================================================================
   S2C Styleguide — compiled CSS
   This is the manually-compiled output of scss/s2c.scss for use in this
   Designer project. Locally, run `npm run sass` to regenerate from SCSS.
   ============================================================================= */

/* ---- Tokens ---- */
:root {
  --s2c-primary: #33707b;
  --s2c-primary-rgb: 51, 112, 123;
  --bs-primary: var(--s2c-primary);
  --bs-primary-rgb: var(--s2c-primary-rgb);
  --bs-link-color: var(--s2c-primary);
  --bs-link-hover-color: var(--s2c-primary);
  --s2c-radius-sm: 4px;
  --s2c-radius: 6px;
  --s2c-radius-lg: 10px;
  --s2c-radius-xl: 14px;
  --s2c-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --s2c-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --s2c-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --s2c-shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.04);
  --s2c-shadow-xl: 0 24px 48px rgba(15,23,42,.16);
}

/* Bootstrap primary override (since we can't recompile here) */
.btn-primary {
  --bs-btn-bg: var(--s2c-primary);
  --bs-btn-border-color: var(--s2c-primary);
  --bs-btn-hover-bg: color-mix(in oklab, var(--s2c-primary) 88%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--s2c-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in oklab, var(--s2c-primary) 80%, black);
  --bs-btn-active-border-color: color-mix(in oklab, var(--s2c-primary) 80%, black);
  --bs-btn-disabled-bg: var(--s2c-primary);
  --bs-btn-disabled-border-color: var(--s2c-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--s2c-primary);
  --bs-btn-border-color: var(--s2c-primary);
  --bs-btn-hover-bg: var(--s2c-primary);
  --bs-btn-hover-border-color: var(--s2c-primary);
  --bs-btn-active-bg: var(--s2c-primary);
  --bs-btn-active-border-color: var(--s2c-primary);
}
.text-primary, a { color: var(--s2c-primary); }
.bg-primary { background-color: var(--s2c-primary) !important; }
.border-primary { border-color: var(--s2c-primary) !important; }
.form-check-input:checked { background-color: var(--s2c-primary); border-color: var(--s2c-primary); }

/* ---- Theme ---- */
[data-bs-theme="light"] {
  --s2c-content-bg: #f7f6f2;
  --s2c-card-bg: #ffffff;
  --s2c-card-border: rgba(15,23,42,.08);
  --s2c-card-header-bg: transparent;
  --s2c-card-header-border: rgba(15,23,42,.06);
  --s2c-muted: #64748b;
  --s2c-strong: #0f172a;
  --s2c-divider: rgba(15,23,42,.08);
  --s2c-input-bg: #ffffff;
  --s2c-code-bg: #f1f5f9;
  --s2c-tag-bg: #f1f5f9;

  --s2c-sidebar-bg: #fafbfc;
  --s2c-sidebar-bg-header: #ffffff;
  --s2c-sidebar-border: rgba(15,23,42,.08);
  --s2c-sidebar-text: #475569;
  --s2c-sidebar-text-active: #0f172a;
  --s2c-sidebar-text-muted: #94a3b8;
  --s2c-sidebar-hover-bg: rgba(15,23,42,.04);
  --s2c-sidebar-active-bg: rgba(15,23,42,.06);
  --s2c-topbar-bg: #ffffff;
  --s2c-topbar-border: rgba(15,23,42,.08);
  --s2c-scrollbar-thumb: rgba(15,23,42,.18);
  --s2c-scrollbar-thumb-hover: rgba(15,23,42,.32);
}
[data-bs-theme="dark"] {
  --bs-body-bg: #1a1b2e;
  --bs-body-color: #e2e8f0;
  --s2c-content-bg: #151623;
  --s2c-card-bg: #1e1f33;
  --s2c-card-border: rgba(255,255,255,.08);
  --s2c-card-header-bg: transparent;
  --s2c-card-header-border: rgba(255,255,255,.06);
  --s2c-muted: #94a3b8;
  --s2c-strong: #f8fafc;
  --s2c-divider: rgba(255,255,255,.08);
  --s2c-input-bg: #14152a;
  --s2c-code-bg: #14152a;
  --s2c-tag-bg: rgba(255,255,255,.05);

  --s2c-sidebar-bg: #1e1e2e;
  --s2c-sidebar-bg-header: #161624;
  --s2c-sidebar-border: rgba(255,255,255,.08);
  --s2c-sidebar-text: rgba(255,255,255,.75);
  --s2c-sidebar-text-active: #ffffff;
  --s2c-sidebar-text-muted: rgba(255,255,255,.4);
  --s2c-sidebar-hover-bg: rgba(255,255,255,.08);
  --s2c-sidebar-active-bg: rgba(255,255,255,.08);
  --s2c-topbar-bg: #1e1f33;
  --s2c-topbar-border: rgba(255,255,255,.08);
  --s2c-scrollbar-thumb: rgba(255,255,255,.14);
  --s2c-scrollbar-thumb-hover: rgba(255,255,255,.28);
}

/* ---- Base ---- */
html, body { height: 100%; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .9375rem;
  line-height: 1.55;
  background: var(--s2c-content-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { scrollbar-width: thin; }
::selection { background: rgba(var(--s2c-primary-rgb), .25); }

code, kbd, pre, samp {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .875em;
}
code {
  background: var(--s2c-code-bg);
  padding: .125em .375em;
  border-radius: var(--s2c-radius-sm);
  color: var(--s2c-primary);
}
kbd {
  background: var(--s2c-tag-bg);
  color: var(--s2c-strong);
  padding: .125em .4em;
  border-radius: var(--s2c-radius-sm);
  font-size: .75em;
  border: 1px solid var(--s2c-divider);
  border-bottom-width: 2px;
}
pre {
  background: var(--s2c-code-bg);
  padding: 1rem 1.25rem;
  border-radius: var(--s2c-radius);
  border: 1px solid var(--s2c-divider);
  font-size: .8125rem;
  line-height: 1.6;
  overflow-x: auto;
}
pre code { background: transparent; color: inherit; padding: 0; }
hr { border: 0; border-top: 1px solid var(--s2c-divider); margin: 1.5rem 0; opacity: 1; }

/* ---- Typography ---- */
h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }
h1, h2, h3, h4, h5, h6 {
  color: var(--s2c-strong);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
.s2c-display { font-size: 3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.s2c-eyebrow { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--s2c-muted); }
.s2c-lead { font-size: 1.0625rem; color: var(--s2c-muted); line-height: 1.6; }
.text-muted, .s2c-muted { color: var(--s2c-muted) !important; }
.s2c-strong { color: var(--s2c-strong); }
.s2c-mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; }

/* ---- Utilities ---- */
.s2c-stack-xs { display: flex; flex-direction: column; gap: .25rem; }
.s2c-stack-sm { display: flex; flex-direction: column; gap: .5rem; }
.s2c-stack    { display: flex; flex-direction: column; gap: 1rem; }
.s2c-stack-lg { display: flex; flex-direction: column; gap: 1.5rem; }
.s2c-stack-xl { display: flex; flex-direction: column; gap: 2.5rem; }
.s2c-row-xs { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.s2c-row-sm { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.s2c-row    { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.s2c-row-lg { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.s2c-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.s2c-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.s2c-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 768px) {
  .s2c-grid-2, .s2c-grid-3, .s2c-grid-4 { grid-template-columns: 1fr; }
}
.s2c-divider { height: 1px; background: var(--s2c-divider); margin: 1rem 0; }
.s2c-elev-sm { box-shadow: var(--s2c-shadow-sm); }
.s2c-elev-md { box-shadow: var(--s2c-shadow-md); }
.s2c-elev-lg { box-shadow: var(--s2c-shadow-lg); }
.s2c-radius-sm { border-radius: var(--s2c-radius-sm); }
.s2c-radius    { border-radius: var(--s2c-radius); }
.s2c-radius-lg { border-radius: var(--s2c-radius-lg); }
.s2c-radius-xl { border-radius: var(--s2c-radius-xl); }
.s2c-clickable { cursor: pointer; user-select: none; }

/* ---- Sidebar + topbar (theme-aware) ---- */
.s2c-app {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 50px 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  height: 100vh;
  transition: grid-template-columns .25s cubic-bezier(.4,0,.2,1);
}
.s2c-app.is-collapsed { grid-template-columns: 56px 1fr; }

/* thin themed scrollbar */
.s2c-thin-scroll { scrollbar-width: thin; scrollbar-color: var(--s2c-scrollbar-thumb) transparent; }
.s2c-thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.s2c-thin-scroll::-webkit-scrollbar-track { background: transparent; }
.s2c-thin-scroll::-webkit-scrollbar-thumb { background: var(--s2c-scrollbar-thumb); border-radius: 3px; }
.s2c-thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--s2c-scrollbar-thumb-hover); }

.s2c-sidebar {
  grid-area: sidebar;
  background: var(--s2c-sidebar-bg);
  border-right: 1px solid var(--s2c-sidebar-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 100;
  transition: background .15s ease, border-color .15s ease;
}
.s2c-sidebar__brand {
  height: 50px;
  background: var(--s2c-sidebar-bg-header);
  display: flex; align-items: center; gap: .625rem;
  padding: 0 16px;
  border-bottom: 1px solid var(--s2c-sidebar-border);
  color: var(--s2c-sidebar-text-active);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.s2c-sidebar__logo {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--s2c-primary), color-mix(in oklab, var(--s2c-primary) 70%, white));
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
/* When collapsed the sidebar is only 56px wide, but .s2c-sidebar__brand keeps
   its expanded `padding: 0 16px` (meant to left-align the badge + brand text).
   With a 32px badge that leaves 16px on the left vs 8px on the right, so the
   badge drifts right-of-centre. Centre it explicitly in the collapsed rail. */
.s2c-app.is-collapsed .s2c-sidebar__brand {
  justify-content: center;
  padding: 0;
}
.s2c-sidebar__brand-text { line-height: 1.1; }
.s2c-app.is-collapsed .s2c-sidebar__brand-text { display: none; }
.s2c-sidebar__brand-text .name { font-weight: 700; font-size: .95rem; }
.s2c-sidebar__brand-text .sub { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--s2c-sidebar-text-muted); }

.s2c-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--s2c-scrollbar-thumb) transparent;
}
.s2c-sidebar__nav::-webkit-scrollbar { width: 6px; }
.s2c-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.s2c-sidebar__nav::-webkit-scrollbar-thumb { background: var(--s2c-scrollbar-thumb); border-radius: 3px; }
.s2c-sidebar__nav::-webkit-scrollbar-thumb:hover { background: var(--s2c-scrollbar-thumb-hover); }

/* Collapsable groups */
.s2c-sidebar__group + .s2c-sidebar__group { margin-top: .25rem; }
.s2c-sidebar__group-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 16px .4rem;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--s2c-sidebar-text-muted);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.s2c-sidebar__group-toggle:hover { color: var(--s2c-sidebar-text-active); }
.s2c-sidebar__group-toggle .chev { margin-left: auto; font-size: .7rem; transition: transform .15s ease; }
.s2c-app.is-collapsed .s2c-sidebar__group-toggle { opacity: 0; pointer-events: none; height: 0; padding: 0; overflow: hidden; }
.s2c-sidebar__group.is-collapsed .s2c-sidebar__group-toggle .chev { transform: rotate(-90deg); }
.s2c-sidebar__group-items { overflow: hidden; transition: max-height .22s ease, opacity .18s ease; }
.s2c-sidebar__group.is-collapsed .s2c-sidebar__group-items { max-height: 0 !important; opacity: 0; pointer-events: none; }

.s2c-sidebar__link {
  display: flex; align-items: center; gap: .75rem;
  height: 38px;
  padding: 0 16px;
  color: var(--s2c-sidebar-text);
  text-decoration: none;
  font-size: .875rem;
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.s2c-sidebar__link i, .s2c-sidebar__link .icon {
  font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0;
}
.s2c-sidebar__link:hover { background: var(--s2c-sidebar-hover-bg); color: var(--s2c-sidebar-text-active); }
.s2c-sidebar__link.is-active {
  background: var(--s2c-sidebar-active-bg);
  color: var(--s2c-sidebar-text-active);
  font-weight: 500;
}
.s2c-sidebar__link.is-active i,
.s2c-sidebar__link.is-active .icon { color: var(--s2c-primary); }
.s2c-sidebar__link.is-external { color: var(--s2c-primary); }
.s2c-sidebar__link.is-external i { color: var(--s2c-primary); }
.s2c-app.is-collapsed .s2c-sidebar__link .label,
.s2c-app.is-collapsed .s2c-sidebar__link .badge { display: none; }
.s2c-sidebar__footer { border-top: 1px solid var(--s2c-sidebar-border); padding: .5rem; }
.s2c-sidebar__collapse-btn {
  width: 100%; height: 36px;
  background: transparent;
  border: 0;
  color: var(--s2c-sidebar-text-muted);
  border-radius: var(--s2c-radius-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.s2c-sidebar__collapse-btn:hover { background: var(--s2c-sidebar-hover-bg); color: var(--s2c-sidebar-text-active); }

.s2c-topbar {
  grid-area: header;
  background: var(--s2c-topbar-bg);
  border-bottom: 1px solid var(--s2c-topbar-border);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
  z-index: 110;
  transition: background .15s ease, border-color .15s ease;
}
.s2c-topbar__search { flex: 1; max-width: 480px; position: relative; }
.s2c-topbar__search i {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--s2c-muted); pointer-events: none;
}
.s2c-topbar__search input {
  width: 100%; height: 34px;
  border: 1px solid var(--s2c-divider);
  background: var(--s2c-input-bg);
  border-radius: var(--s2c-radius);
  padding: 0 4rem 0 2.25rem;
  font-size: .875rem;
  color: var(--bs-body-color);
}
.s2c-topbar__search input:focus {
  outline: none;
  border-color: var(--s2c-primary);
  box-shadow: 0 0 0 3px rgba(var(--s2c-primary-rgb), .15);
}
.s2c-topbar__search .kbd-hint {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: .7rem; color: var(--s2c-muted);
  padding: 2px 6px; border: 1px solid var(--s2c-divider); border-radius: 4px;
}
.s2c-topbar__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.s2c-topbar__btn {
  width: 34px; height: 34px;
  border-radius: var(--s2c-radius);
  border: 1px solid var(--s2c-divider);
  background: transparent;
  color: var(--bs-body-color);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease;
}
.s2c-topbar__btn:hover { background: var(--s2c-tag-bg); }
.s2c-topbar__btn.is-active { background: var(--s2c-primary); border-color: var(--s2c-primary); color: #fff; }

.s2c-main { grid-area: main; overflow-y: auto; background: var(--s2c-content-bg); }
.s2c-page { max-width: 1100px; padding: 2rem 2rem 4rem; }

.s2c-breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--s2c-muted);
  margin-bottom: .5rem;
}
.s2c-breadcrumb a { color: var(--s2c-muted); text-decoration: none; }
.s2c-breadcrumb a:hover { color: var(--s2c-primary); }
.s2c-breadcrumb .sep { opacity: .4; }
.s2c-breadcrumb .current { color: var(--s2c-strong); }
.s2c-page-title { font-size: 2rem; margin-bottom: .25rem; }
.s2c-page-lead { color: var(--s2c-muted); font-size: 1rem; margin-bottom: 2rem; }
.s2c-section { margin-top: 2.5rem; }
.s2c-section__head {
  display: flex; align-items: baseline; gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--s2c-divider);
  margin-bottom: 1.25rem;
}
.s2c-section__title { font-size: 1.125rem; margin: 0; }
.s2c-section__sub { color: var(--s2c-muted); font-size: .875rem; }

/* ---- Buttons ---- */
.btn { font-weight: 500; border-radius: var(--s2c-radius); transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--s2c-primary-rgb), .25); outline: none; }
.btn-secondary {
  background: var(--s2c-card-bg);
  border-color: var(--s2c-divider);
  color: var(--s2c-strong);
}
.btn-secondary:hover { background: var(--s2c-tag-bg); border-color: var(--s2c-divider); color: var(--s2c-strong); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--s2c-strong); }
.btn-ghost:hover { background: var(--s2c-tag-bg); }
.btn-teal-ghost { background: rgba(var(--s2c-primary-rgb), .08); border-color: transparent; color: var(--s2c-primary); }
.btn-teal-ghost:hover { background: rgba(var(--s2c-primary-rgb), .16); color: var(--s2c-primary); }
.btn-xs { padding: .125rem .5rem; font-size: .75rem; border-radius: var(--s2c-radius-sm); }
.btn-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-xs { width: 24px; height: 24px; }

/* ---- Forms ---- */
.form-label { font-size: .8125rem; font-weight: 500; color: var(--s2c-strong); margin-bottom: .375rem; }
.form-label .req { color: var(--bs-danger); margin-left: 2px; }
.form-control, .form-select {
  background: var(--s2c-input-bg);
  border-color: var(--s2c-divider);
  color: var(--bs-body-color);
  border-radius: var(--s2c-radius);
  font-size: .875rem;
  padding: .4375rem .75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--s2c-primary);
  box-shadow: 0 0 0 3px rgba(var(--s2c-primary-rgb), .15);
  background: var(--s2c-input-bg);
}
.form-control::placeholder { color: var(--s2c-muted); opacity: .7; }
.form-control:disabled, .form-control[readonly] { background: var(--s2c-tag-bg); cursor: not-allowed; }
.form-text { font-size: .75rem; color: var(--s2c-muted); margin-top: .25rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bs-danger); }
.invalid-feedback { font-size: .75rem; color: var(--bs-danger); }
.input-group-text { background: var(--s2c-tag-bg); border-color: var(--s2c-divider); color: var(--s2c-muted); font-size: .8125rem; }
.form-check-input { border-color: var(--s2c-divider); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--s2c-primary-rgb), .15); }
.form-switch .form-check-input { height: 1.25rem; width: 2.25rem; }
.s2c-color-swatch {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4375rem .625rem;
  border: 1px solid var(--s2c-divider);
  border-radius: var(--s2c-radius);
  background: var(--s2c-input-bg);
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .8125rem;
  color: var(--s2c-strong);
}
.s2c-color-swatch__chip { width: 22px; height: 22px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* ---- Cards ---- */
.card {
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
  box-shadow: var(--s2c-shadow-xs);
}
.card-header {
  background: var(--s2c-card-header-bg);
  border-bottom: 1px solid var(--s2c-card-header-border);
  padding: .875rem 1.25rem;
  font-weight: 600;
  color: var(--s2c-strong);
}
.s2c-card-title { font-size: .9375rem; margin: 0; line-height: 1.3; }
.s2c-card-sub { font-size: .8125rem; color: var(--s2c-muted); font-weight: 400; margin-top: 2px; }
.card-body { padding: 1.25rem; }
.card-footer { background: transparent; border-top: 1px solid var(--s2c-card-header-border); padding: .75rem 1.25rem; }

.s2c-stat {
  padding: 1rem 1.25rem;
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
}
.s2c-stat__label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--s2c-muted); font-weight: 600; }
.s2c-stat__value { font-size: 2rem; font-weight: 600; color: var(--s2c-strong); letter-spacing: -.01em; margin-top: .25rem; line-height: 1.1; }
.s2c-stat__delta { margin-top: .5rem; font-size: .75rem; color: var(--s2c-muted); }
.s2c-stat__delta .up { color: var(--bs-success); }
.s2c-stat__delta .down { color: var(--bs-danger); }

/* ---- Alerts ---- */
.alert {
  border-radius: var(--s2c-radius-lg);
  border: 1px solid;
  padding: .875rem 1rem;
  display: flex; gap: .75rem;
  align-items: flex-start;
}
.alert .alert-icon { flex-shrink: 0; width: 20px; text-align: center; margin-top: 2px; }
.alert .alert-body { flex: 1; }
.alert .alert-title { font-weight: 600; font-size: .9375rem; margin-bottom: .125rem; }
.alert .alert-msg { font-size: .875rem; opacity: .9; }
.alert .btn-close { margin-left: auto; opacity: .6; }
.alert-info { background: rgba(13,202,240,.08); border-color: rgba(13,202,240,.25); color: #055160; }
.alert-info .alert-icon { color: #0dcaf0; }
.alert-success { background: rgba(25,135,84,.08); border-color: rgba(25,135,84,.22); color: #0a3622; }
.alert-success .alert-icon { color: #198754; }
.alert-warning { background: rgba(255,193,7,.12); border-color: rgba(255,193,7,.3); color: #664d03; }
.alert-warning .alert-icon { color: #b45309; }
.alert-danger { background: rgba(220,53,69,.08); border-color: rgba(220,53,69,.22); color: #58151c; }
.alert-danger .alert-icon { color: #dc3545; }
[data-bs-theme="dark"] .alert-info { color: #6edff6; }
[data-bs-theme="dark"] .alert-success { color: #75b798; }
[data-bs-theme="dark"] .alert-warning { color: #ffda6a; }
[data-bs-theme="dark"] .alert-danger { color: #ea868f; }

/* ---- Tabs ---- */
.nav-tabs { border-bottom: 1px solid var(--s2c-divider); gap: .25rem; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  color: var(--s2c-muted);
  font-size: .875rem; font-weight: 500;
  padding: .625rem 1rem; margin-bottom: -1px;
  border-radius: 0; background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--s2c-strong); }
.nav-tabs .nav-link.active { color: var(--s2c-primary); border-bottom-color: var(--s2c-primary); background: transparent; }
.nav-tabs .nav-link i { margin-right: .375rem; }
.tab-content { padding-top: 1rem; }

.nav-pills {
  background: var(--s2c-tag-bg);
  padding: 3px;
  border-radius: var(--s2c-radius);
  display: inline-flex; gap: 2px;
}
.nav-pills .nav-link {
  color: var(--s2c-muted);
  font-size: .8125rem; font-weight: 500;
  padding: .375rem .875rem;
  border-radius: var(--s2c-radius-sm);
  background: transparent;
}
.nav-pills .nav-link:hover { color: var(--s2c-strong); }
.nav-pills .nav-link.active {
  background: var(--s2c-card-bg); color: var(--s2c-strong);
  box-shadow: var(--s2c-shadow-xs);
}

/* ---- Accordion ---- */
.accordion {
  --bs-accordion-bg: var(--s2c-card-bg);
  --bs-accordion-border-color: var(--s2c-card-border);
  --bs-accordion-border-radius: var(--s2c-radius-lg);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--s2c-card-bg);
  --bs-accordion-btn-color: var(--s2c-strong);
  --bs-accordion-active-bg: rgba(var(--s2c-primary-rgb), .05);
  --bs-accordion-active-color: var(--s2c-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--s2c-primary-rgb), .15);
}
.accordion-button { font-weight: 500; font-size: .9375rem; }
.accordion-button:not(.collapsed) { box-shadow: none; }

/* ---- Badges ---- */
.badge { font-weight: 500; font-size: .75rem; padding: .25em .55em; border-radius: var(--s2c-radius-sm); letter-spacing: .01em; }
.badge-soft-primary { background: rgba(var(--s2c-primary-rgb), .12); color: var(--s2c-primary); }
.badge-soft-success { background: rgba(25,135,84,.12); color: #198754; }
.badge-soft-warning { background: rgba(255,193,7,.18); color: #b45309; }
.badge-soft-danger  { background: rgba(220,53,69,.12); color: #dc3545; }
.badge-soft-info    { background: rgba(13,202,240,.12); color: #0dcaf0; }
.badge-soft-muted   { background: var(--s2c-tag-bg); color: var(--s2c-muted); }
[data-bs-theme="dark"] .badge-soft-warning { color: #ffda6a; }

.s2c-status { display: inline-flex; align-items: center; gap: .4em; font-size: .8125rem; }
.s2c-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s2c-status.is-active { color: #198754; }
.s2c-status.is-draft { color: var(--s2c-muted); }
.s2c-status.is-pending { color: #b45309; }
.s2c-status.is-failed { color: #dc3545; }

.s2c-tag {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .2em .6em;
  border-radius: 999px;
  background: var(--s2c-tag-bg);
  font-size: .75rem; color: var(--s2c-strong);
  border: 1px solid var(--s2c-divider);
}
.s2c-tag__close { cursor: pointer; opacity: .5; }
.s2c-tag__close:hover { opacity: 1; }

/* ---- Toolbar ---- */
.s2c-toolbar {
  display: flex; align-items: center; gap: .25rem;
  padding: .375rem;
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius);
}
.s2c-toolbar__btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--s2c-muted);
  border-radius: var(--s2c-radius-sm);
  cursor: pointer; font-size: .875rem;
  transition: background .15s ease, color .15s ease;
}
.s2c-toolbar__btn:hover { background: var(--s2c-tag-bg); color: var(--s2c-strong); }
.s2c-toolbar__btn.is-active { background: rgba(var(--s2c-primary-rgb), .12); color: var(--s2c-primary); }
.s2c-toolbar__btn:disabled { opacity: .4; cursor: not-allowed; }
.s2c-toolbar__sep { width: 1px; height: 20px; background: var(--s2c-divider); margin: 0 .25rem; }
.s2c-toolbar__spacer { flex: 1; }

/* ---- Modal ---- */
.modal-content {
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
  box-shadow: var(--s2c-shadow-xl);
}
.modal-header { border-bottom: 1px solid var(--s2c-card-header-border); padding: 1rem 1.25rem; }
.modal-title { font-size: 1.0625rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--s2c-card-header-border); padding: .875rem 1.25rem; }

/* ---- Progress + spinners ---- */
.progress { height: 8px; border-radius: 999px; background: var(--s2c-tag-bg); }
.progress-bar { background: var(--s2c-primary); border-radius: 999px; transition: width .6s ease; }
.progress-bar.bg-success { background: #198754; }
.progress-bar.bg-warning { background: #b45309; }
.progress-bar.bg-danger { background: #dc3545; }
.s2c-progress-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: .5rem 1rem; align-items: center;
  font-size: .8125rem;
}
.s2c-progress-row > .label { color: var(--s2c-strong); }
.s2c-progress-row > .value { color: var(--s2c-muted); font-variant-numeric: tabular-nums; }
.s2c-progress-row > .progress { grid-column: 1 / -1; }

.s2c-spinner-trio { display: inline-flex; gap: .375rem; }
.s2c-spinner-trio span {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--s2c-primary);
  border-top-color: transparent;
  animation: s2c-spin .8s linear infinite;
}
.s2c-spinner-trio span:nth-child(2) { animation-delay: .1s; opacity: .7; }
.s2c-spinner-trio span:nth-child(3) { animation-delay: .2s; opacity: .4; }
@keyframes s2c-spin { to { transform: rotate(360deg); } }

.s2c-skeleton {
  background: linear-gradient(90deg, var(--s2c-tag-bg) 0%, var(--s2c-divider) 50%, var(--s2c-tag-bg) 100%);
  background-size: 200% 100%;
  animation: s2c-skeleton 1.4s ease-in-out infinite;
  border-radius: var(--s2c-radius-sm);
  height: 14px;
}
@keyframes s2c-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Toasts ---- */
.s2c-toast {
  display: flex; align-items: flex-start; gap: .75rem;
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
  box-shadow: var(--s2c-shadow-lg);
  padding: .875rem 1rem;
  min-width: 280px; max-width: 380px;
}
.s2c-toast__icon { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: .75rem; }
.s2c-toast__body { flex: 1; }
.s2c-toast__title { font-weight: 600; font-size: .875rem; color: var(--s2c-strong); }
.s2c-toast__msg { font-size: .8125rem; color: var(--s2c-muted); margin-top: 2px; }
.s2c-toast__close { background: transparent; border: 0; color: var(--s2c-muted); cursor: pointer; }
.s2c-toast.is-info .s2c-toast__icon { background: rgba(13,202,240,.15); color: #0dcaf0; }
.s2c-toast.is-success .s2c-toast__icon { background: rgba(25,135,84,.15); color: #198754; }
.s2c-toast.is-warning .s2c-toast__icon { background: rgba(255,193,7,.18); color: #b45309; }
.s2c-toast.is-danger .s2c-toast__icon { background: rgba(220,53,69,.15); color: #dc3545; }

/* ---- Tooltips & popovers ---- */
.s2c-tooltip { position: relative; display: inline-block; }
.s2c-tooltip__bubble {
  position: absolute; bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: #1e1e2e; color: #fff;
  font-size: .75rem;
  padding: .35em .625em;
  border-radius: var(--s2c-radius-sm);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
  box-shadow: var(--s2c-shadow-md); z-index: 200;
}
.s2c-tooltip__bubble::after {
  content: ""; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #1e1e2e;
}
.s2c-tooltip:hover .s2c-tooltip__bubble { opacity: 1; }
.s2c-popover {
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius);
  box-shadow: var(--s2c-shadow-lg);
  padding: .75rem .875rem;
  font-size: .8125rem;
  max-width: 280px;
}

/* ---- Tables ---- */
.table {
  --bs-table-bg: var(--s2c-card-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--s2c-divider);
  --bs-table-hover-bg: var(--s2c-tag-bg);
  font-size: .875rem;
  margin-bottom: 0;
}
.table > thead th {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--s2c-muted);
  background: var(--s2c-tag-bg);
  border-bottom: 1px solid var(--s2c-divider);
  padding: .625rem .875rem;
  white-space: nowrap;
}
.table > tbody td {
  padding: .75rem .875rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--s2c-divider);
}
.table > tbody tr:last-child td { border-bottom: 0; }

.s2c-table-card {
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
  overflow: hidden;
  background: var(--s2c-card-bg);
}
.s2c-table-toolbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--s2c-divider);
  background: var(--s2c-card-bg);
}
.s2c-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem 1rem;
  border-top: 1px solid var(--s2c-divider);
  font-size: .8125rem; color: var(--s2c-muted);
}
.s2c-pagination__pages { display: flex; gap: 2px; }
.s2c-pagination__pages button {
  min-width: 30px; height: 30px;
  border: 1px solid var(--s2c-divider);
  background: var(--s2c-card-bg);
  border-radius: var(--s2c-radius-sm);
  font-size: .8125rem;
  cursor: pointer;
  color: var(--s2c-strong);
}
.s2c-pagination__pages button:hover { background: var(--s2c-tag-bg); }
.s2c-pagination__pages button.is-active { background: var(--s2c-primary); border-color: var(--s2c-primary); color: #fff; }

/* ---- Avatar ---- */
.s2c-avatar {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--s2c-primary);
  color: #fff;
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .02em;
  flex-shrink: 0; user-select: none;
  text-decoration: none;
}
.s2c-avatar.size-xs { width: 22px; height: 22px; font-size: .625rem; }
.s2c-avatar.size-sm { width: 28px; height: 28px; font-size: .75rem; }
.s2c-avatar.size-lg { width: 48px; height: 48px; font-size: 1rem; }
.s2c-avatar.size-xl { width: 64px; height: 64px; font-size: 1.25rem; }
.s2c-avatar.tone-teal   { background: var(--s2c-primary); }
.s2c-avatar.tone-blue   { background: #4682B4; }
.s2c-avatar.tone-coral  { background: #F54927; }
.s2c-avatar.tone-purple { background: #5C2D91; }
.s2c-avatar.tone-orange { background: #FF6F00; }
.s2c-avatar.tone-cyan   { background: #0094A1; }
.s2c-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.s2c-avatar-stack { display: inline-flex; }
.s2c-avatar-stack > .s2c-avatar { border: 2px solid var(--s2c-card-bg); margin-left: -8px; }
.s2c-avatar-stack > .s2c-avatar:first-child { margin-left: 0; }

/* ---- Foundations-page specific ---- */
.s2c-swatch {
  border: 1px solid var(--s2c-divider);
  border-radius: var(--s2c-radius);
  overflow: hidden;
  background: var(--s2c-card-bg);
}
.s2c-swatch__chip { height: 64px; }
.s2c-swatch__meta { padding: .625rem .75rem; }
.s2c-swatch__name { font-size: .8125rem; font-weight: 600; color: var(--s2c-strong); }
.s2c-swatch__hex  { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .75rem; color: var(--s2c-muted); }
.s2c-swatch__note { font-size: .6875rem; color: var(--s2c-muted); margin-top: .15rem; font-style: italic; }

/* Color groups — Huisstijl / Theme accents / Customer brands */
.s2c-color-group { margin-bottom: 2rem; }
.s2c-color-group__head {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .875rem 1rem;
  border-radius: 8px; border: 1px solid var(--s2c-divider);
  background: var(--s2c-card-bg);
  margin-bottom: .875rem;
}
.s2c-color-group__copy { flex: 1; min-width: 0; }
.s2c-color-group__title { font-size: .9375rem; font-weight: 600; color: var(--s2c-strong); margin-bottom: .15rem; }
.s2c-color-group__body  { font-size: .8125rem; color: var(--s2c-muted); line-height: 1.5; }
.s2c-color-group__body code { font-size: .75rem; padding: .05rem .3rem; background: var(--s2c-tag-bg); border-radius: 3px; }
.s2c-color-group__body strong { color: var(--s2c-strong); font-weight: 600; }
.s2c-color-group__badge {
  display: inline-flex; align-items: center;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.s2c-color-group__badge.is-house    { background: rgba(var(--s2c-primary-rgb), .12); color: var(--s2c-primary); border: 1px solid rgba(var(--s2c-primary-rgb), .25); }
.s2c-color-group__badge.is-theme    { background: rgb(100 116 139 / .12); color: #475569; border: 1px solid rgb(100 116 139 / .25); }
.s2c-color-group__badge.is-customer { background: rgb(217 119 6 / .12); color: #b45309; border: 1px solid rgb(217 119 6 / .3); }
[data-bs-theme="dark"] .s2c-color-group__badge.is-theme    { color: #cbd5e1; background: rgb(148 163 184 / .15); }
[data-bs-theme="dark"] .s2c-color-group__badge.is-customer { color: #fbbf24; background: rgb(245 158 11 / .15); }

.s2c-spacing-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--s2c-divider);
  font-size: .8125rem;
}
.s2c-spacing-row .name { font-weight: 600; }
.s2c-spacing-row .value { color: var(--s2c-muted); font-family: "JetBrains Mono", monospace; }
.s2c-spacing-row .bar { background: rgba(var(--s2c-primary-rgb), .2); height: 18px; border-radius: 3px; }

.s2c-icon-card {
  display: flex; flex-direction: column; align-items: center;
  gap: .375rem;
  padding: 1rem .5rem;
  border: 1px solid var(--s2c-divider);
  border-radius: var(--s2c-radius);
  text-align: center;
}
.s2c-icon-card i { font-size: 1.5rem; color: var(--s2c-strong); }
.s2c-icon-card .name { font-size: .6875rem; color: var(--s2c-muted); font-family: "JetBrains Mono", monospace; }

/* ---- Brand picker popover ---- */
.s2c-brand-picker {
  position: absolute; top: 44px; right: 1.25rem;
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
  box-shadow: var(--s2c-shadow-lg);
  padding: .875rem;
  z-index: 300;
  width: 300px;
}
.s2c-brand-picker__title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--s2c-muted); font-weight: 600; margin-bottom: .625rem; }
.s2c-brand-picker__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.s2c-brand-swatch {
  display: flex; flex-direction: column; align-items: stretch;
  border: 2px solid transparent;
  border-radius: var(--s2c-radius);
  background: transparent;
  padding: 0; cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.s2c-brand-swatch:hover { transform: translateY(-1px); }
.s2c-brand-swatch.is-active { border-color: var(--s2c-strong); }
.s2c-brand-swatch__chip { height: 48px; }
.s2c-brand-swatch__label {
  padding: .375rem .5rem;
  background: var(--s2c-tag-bg);
  font-size: .6875rem;
  color: var(--s2c-strong);
  text-align: center;
  font-weight: 500;
}

/* ---- Docs demo block (Bootstrap-docs style) ---- */
.s2c-demo {
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
  background: var(--s2c-card-bg);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.s2c-demo__head {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem .625rem 1rem;
  border-bottom: 1px solid var(--s2c-divider);
  background: var(--s2c-card-bg);
}
.s2c-demo__title {
  font-size: .8125rem; font-weight: 600; color: var(--s2c-strong);
  letter-spacing: .005em;
}
.s2c-demo__title .sub { font-weight: 400; color: var(--s2c-muted); margin-left: .375rem; }
.s2c-demo__tabs {
  margin-left: auto;
  background: var(--s2c-tag-bg);
  border-radius: var(--s2c-radius);
  padding: 2px; display: inline-flex; gap: 1px;
}
.s2c-demo__tab {
  border: 0; background: transparent;
  font-size: .75rem; font-weight: 500;
  color: var(--s2c-muted);
  padding: .25rem .625rem;
  border-radius: var(--s2c-radius-sm);
  cursor: pointer;
}
.s2c-demo__tab.is-active { background: var(--s2c-card-bg); color: var(--s2c-strong); box-shadow: var(--s2c-shadow-xs); }
.s2c-demo__copy {
  border: 0; background: transparent; color: var(--s2c-muted);
  width: 28px; height: 28px; border-radius: var(--s2c-radius-sm);
  cursor: pointer; display: grid; place-items: center;
}
.s2c-demo__copy:hover { background: var(--s2c-tag-bg); color: var(--s2c-strong); }
.s2c-demo__preview {
  padding: 1.25rem 1.25rem;
  background: repeating-linear-gradient(45deg,
    transparent 0 12px, rgba(15,23,42,.012) 12px 13px);
}
[data-bs-theme="dark"] .s2c-demo__preview {
  background: repeating-linear-gradient(45deg,
    transparent 0 12px, rgba(255,255,255,.025) 12px 13px);
}
.s2c-demo__code { display: none; border-top: 1px solid var(--s2c-divider); }
.s2c-demo.is-code .s2c-demo__preview { display: none; }
.s2c-demo.is-code .s2c-demo__code { display: block; }
.s2c-demo__code pre {
  margin: 0;
  border: 0; border-radius: 0;
  background: var(--s2c-code-bg);
  padding: 1rem 1.25rem;
  max-height: 360px;
  font-size: .78125rem;
}

.s2c-demo-note {
  font-size: .8125rem; color: var(--s2c-muted);
  margin: 0 0 .5rem;
}

/* ---- Library 3-col layout (sidebar | main | toc) ---- */
.s2c-app.has-toc { grid-template-columns: 260px 1fr 240px; grid-template-areas: "sidebar header header" "sidebar main toc"; }
.s2c-app.has-toc.is-collapsed { grid-template-columns: 56px 1fr 240px; }
@media (max-width: 1100px) {
  .s2c-app.has-toc { grid-template-columns: 260px 1fr; grid-template-areas: "sidebar header" "sidebar main"; }
  .s2c-app.has-toc.is-collapsed { grid-template-columns: 56px 1fr; }
  .s2c-toc { display: none; }
}
.s2c-toc {
  grid-area: toc;
  border-left: 1px solid var(--s2c-divider);
  background: var(--s2c-content-bg);
  padding: 1.25rem 1rem;
  overflow-y: auto;
  position: sticky; top: 0;
  align-self: start;
  height: calc(100vh - 56px);
}
.s2c-toc__title {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--s2c-muted);
  margin-bottom: .625rem;
}
.s2c-toc__list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--s2c-divider); }
.s2c-toc__list a {
  display: block;
  padding: .25rem .75rem;
  font-size: .8125rem;
  color: var(--s2c-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.s2c-toc__list a:hover { color: var(--s2c-strong); }
.s2c-toc__list a.is-active { color: var(--s2c-primary); border-left-color: var(--s2c-primary); font-weight: 500; }

/* anchor offset for in-page jumps under sticky topbar */
.s2c-section[id] { scroll-margin-top: 1rem; }

/* page hero used on library + foundations home */
.s2c-hero { padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--s2c-divider); margin-bottom: 1.5rem; }
.s2c-hero h1 { font-size: 2.25rem; margin-bottom: .375rem; }
.s2c-hero p { color: var(--s2c-muted); font-size: 1.0625rem; max-width: 56rem; margin: 0; }

/* foundations principle cards */
.s2c-principle {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: 1rem 1.125rem;
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
}
.s2c-principle__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--s2c-radius);
  display: grid; place-items: center;
  background: rgba(var(--s2c-primary-rgb), .12);
  color: var(--s2c-primary);
}
.s2c-principle__title { font-size: .9375rem; font-weight: 600; color: var(--s2c-strong); margin: 0 0 .125rem; }
.s2c-principle__body { font-size: .8125rem; color: var(--s2c-muted); margin: 0; line-height: 1.55; }

/* do / don't */
.s2c-do {
  border: 1px solid var(--s2c-card-border);
  border-radius: var(--s2c-radius-lg);
  background: var(--s2c-card-bg);
  padding: 1rem 1.125rem;
}
.s2c-do__head {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .5rem;
}
.s2c-do.is-good .s2c-do__head { color: #198754; }
.s2c-do.is-bad .s2c-do__head { color: #dc3545; }
.s2c-do__body { font-size: .8125rem; color: var(--s2c-muted); margin: 0; line-height: 1.55; }
.s2c-do__body strong { color: var(--s2c-strong); font-weight: 500; }

/* ============================================================
   Data grid — app-style table: dense, sortable, filterable
   ============================================================ */
.s2c-datagrid {
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-divider);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--s2c-shadow-xs);
}
.s2c-datagrid__toolbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: var(--s2c-card-bg);
  border-bottom: 1px solid var(--s2c-divider);
  font-size: .8125rem;
}
.s2c-datagrid__toolbar strong { font-size: .875rem; color: var(--s2c-strong); }
.s2c-datagrid__count { color: var(--s2c-muted); font-size: .75rem; }
.s2c-datagrid__search {
  display: flex; align-items: center; gap: .375rem;
  padding: 0 .5rem; height: 30px;
  background: var(--s2c-input-bg);
  border: 1px solid var(--s2c-divider); border-radius: 6px;
  width: 220px;
}
.s2c-datagrid__search i { color: var(--s2c-muted); font-size: .75rem; }
.s2c-datagrid__search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: .8125rem; color: var(--s2c-strong);
}
.s2c-datagrid__search input::placeholder { color: var(--s2c-muted); }

.s2c-datagrid__scroll { overflow: auto; max-height: 540px; }

.s2c-datagrid__table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .8125rem; line-height: 1.35;
  color: var(--s2c-strong);
}
.s2c-datagrid__table th,
.s2c-datagrid__table td {
  padding: .375rem .625rem;
  border-bottom: 1px solid var(--s2c-divider);
  text-align: left; vertical-align: middle;
  white-space: nowrap;
  background: var(--s2c-card-bg);
}
.s2c-datagrid__table .is-num    { text-align: right; font-variant-numeric: tabular-nums; }
.s2c-datagrid__table .is-actions { text-align: right; padding: 0 .375rem; }

/* sticky header rows */
.s2c-datagrid__head th,
.s2c-datagrid__filter th {
  position: sticky; z-index: 2;
  background: var(--s2c-tag-bg);
  font-weight: 600;
  font-size: .75rem;
  color: var(--s2c-strong);
  text-transform: none;
  letter-spacing: 0;
  user-select: none;
}
.s2c-datagrid__head th { top: 0; height: 32px; }
.s2c-datagrid__filter th { top: 32px; height: 30px; padding: 0 .5rem; background: var(--s2c-card-bg); }
.s2c-datagrid__head th + th { border-left: 1px solid var(--s2c-divider); }
.s2c-datagrid__head th { border-bottom: 1px solid var(--s2c-divider); }

/* sortable header layout */
.s2c-datagrid__head th { cursor: pointer; }
.s2c-datagrid__head th > span { display: inline-block; vertical-align: middle; }
.s2c-datagrid__head th .sort {
  font-size: .65rem; margin-left: .375rem; color: var(--s2c-muted); opacity: .55;
  vertical-align: middle;
}
.s2c-datagrid__head th:hover .sort { opacity: 1; }
.s2c-datagrid__head th.is-sorted { color: var(--s2c-primary); background: rgba(var(--s2c-primary-rgb), .06); }
.s2c-datagrid__head th.is-sorted .sort { color: var(--s2c-primary); opacity: 1; }
.s2c-datagrid__head th.is-num,
.s2c-datagrid__filter th .is-num { text-align: right; }

/* filter row inputs */
.s2c-datagrid__filter th { border-bottom: 1px solid var(--s2c-divider); }
.s2c-datagrid__filter input,
.s2c-datagrid__filter select {
  width: 100%; height: 24px;
  border: 1px solid var(--s2c-divider); border-radius: 4px;
  background: var(--s2c-input-bg);
  padding: 0 .375rem;
  font-size: .75rem; color: var(--s2c-strong);
  outline: none;
}
.s2c-datagrid__filter input:focus,
.s2c-datagrid__filter select:focus {
  border-color: var(--s2c-primary);
  box-shadow: 0 0 0 2px rgba(var(--s2c-primary-rgb), .15);
}
.s2c-datagrid__filter input::placeholder { color: var(--s2c-muted); }

/* body rows */
.s2c-datagrid__table tbody tr:hover td { background: rgba(var(--s2c-primary-rgb), .04); }
.s2c-datagrid__table tbody tr.is-selected td { background: rgba(var(--s2c-primary-rgb), .08); }
.s2c-datagrid__table tbody tr.is-selected:hover td { background: rgba(var(--s2c-primary-rgb), .12); }
.s2c-datagrid__table tbody tr:last-child td { border-bottom: 0; }
.s2c-datagrid__table td code {
  font-size: .75rem; color: var(--s2c-strong);
  background: transparent; padding: 0;
}
.s2c-datagrid__table .s2c-tag {
  font-size: .6875rem; padding: .1rem .4rem;
}
.s2c-datagrid__table .s2c-status { font-size: .75rem; }

/* compact checkbox */
.s2c-checkbox { display: inline-flex; align-items: center; cursor: pointer; line-height: 0; }
.s2c-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.s2c-checkbox span {
  width: 14px; height: 14px;
  border: 1.5px solid var(--s2c-divider);
  background: var(--s2c-input-bg);
  border-radius: 3px;
  display: inline-block; position: relative;
  transition: background .12s, border-color .12s;
}
.s2c-checkbox input:checked + span {
  background: var(--s2c-primary);
  border-color: var(--s2c-primary);
}
.s2c-checkbox input:checked + span::after {
  content: ""; position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.s2c-checkbox input:focus-visible + span {
  box-shadow: 0 0 0 2px rgba(var(--s2c-primary-rgb), .25);
}

/* footer / pager */
.s2c-datagrid__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .75rem;
  border-top: 1px solid var(--s2c-divider);
  background: var(--s2c-card-bg);
  font-size: .75rem;
}
.s2c-datagrid__pager-info { display: flex; align-items: center; gap: 1rem; color: var(--s2c-muted); }
.s2c-datagrid__pager-info label {
  display: inline-flex; align-items: center; gap: .375rem;
  margin: 0; color: var(--s2c-strong);
}
.s2c-datagrid__pager-info select {
  height: 26px; padding: 0 .375rem;
  border: 1px solid var(--s2c-divider); border-radius: 4px;
  background: var(--s2c-input-bg); font-size: .75rem; color: var(--s2c-strong);
}
.s2c-datagrid__footer .s2c-pagination__pages { display: flex; gap: .15rem; align-items: center; }
.s2c-datagrid__footer .s2c-pagination__pages button {
  min-width: 26px; height: 26px; padding: 0 .375rem;
  border: 1px solid transparent; background: transparent;
  border-radius: 4px; color: var(--s2c-strong); font-size: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.s2c-datagrid__footer .s2c-pagination__pages button:hover { background: var(--s2c-tag-bg); }
.s2c-datagrid__footer .s2c-pagination__pages button.is-active {
  background: var(--s2c-primary); color: #fff; border-color: var(--s2c-primary);
}
.s2c-datagrid__ellipsis { color: var(--s2c-muted); padding: 0 .25rem; }

/* dark mode tweaks */
[data-bs-theme="dark"] .s2c-datagrid__head th { background: rgb(255 255 255 / .04); }
[data-bs-theme="dark"] .s2c-datagrid__head th.is-sorted { background: rgba(var(--s2c-primary-rgb), .12); }
[data-bs-theme="dark"] .s2c-datagrid__table tbody tr:hover td { background: rgb(255 255 255 / .03); }
[data-bs-theme="dark"] .s2c-datagrid__table tbody tr.is-selected td { background: rgba(var(--s2c-primary-rgb), .14); }

/* ============================================================
   Form layout pattern — grouped sections, full-width footer
   ============================================================ */
.s2c-form-layout { display: flex; flex-direction: column; gap: 1rem; }
.s2c-form-layout__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 .25rem .5rem;
}
.s2c-form-layout__head h3 { font-size: 1.0625rem; font-weight: 600; color: var(--s2c-strong); }
.s2c-form-layout__head .s2c-eyebrow { margin-bottom: .15rem; }

.s2c-form-grid { display: grid; gap: 1rem; }
.s2c-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .s2c-form-grid--2 { grid-template-columns: 1fr; } }

.s2c-form-section {
  background: var(--s2c-card-bg);
  border: 1px solid var(--s2c-divider);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--s2c-shadow-xs);
}
.s2c-form-section__head {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--s2c-divider);
  background: var(--s2c-card-bg);
}
.s2c-form-section__title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9375rem; font-weight: 600; color: var(--s2c-strong);
}
.s2c-form-section__title i { color: var(--s2c-primary); font-size: .85em; }
.s2c-form-section__sub {
  font-size: .75rem; color: var(--s2c-muted);
  margin-top: .15rem; line-height: 1.45;
}
.s2c-form-section__body { padding: 1rem; margin: 0 !important; }
.s2c-form-section__body .form-label {
  font-size: .75rem; font-weight: 500; color: var(--s2c-strong);
  text-transform: none; letter-spacing: 0;
  margin-bottom: .25rem;
}
.s2c-form-section__body .req { color: #dc3545; margin-left: .15rem; }
.s2c-form-section__body .form-check { display: inline-flex; align-items: center; gap: .375rem; padding-left: 0; min-height: auto; }
.s2c-form-section__body .form-check-input { float: none; margin: 0; flex-shrink: 0; }
.s2c-form-section__body .form-check-label { font-size: .8125rem; color: var(--s2c-strong); }

.s2c-form-layout__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--s2c-divider); border-radius: 8px;
  background: var(--s2c-card-bg);
  position: sticky; bottom: 0; z-index: 1;
  box-shadow: var(--s2c-shadow-sm);
}
.s2c-form-layout__footer a { color: var(--s2c-primary); text-decoration: none; font-weight: 500; }
.s2c-form-layout__footer a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .s2c-form-layout__footer { flex-direction: column; align-items: stretch; }
  .s2c-form-layout__footer .s2c-row { justify-content: flex-end; }
}

/* ============================================================
   Form validation states — wraps, icons, warning variant
   ============================================================ */
.s2c-input-wrap { position: relative; display: flex; align-items: stretch; }
.s2c-input-wrap .form-control { padding-right: 2.25rem; }
.s2c-input-wrap .s2c-input-icon {
  position: absolute; right: .625rem; top: 50%; transform: translateY(-50%);
  font-size: .9em; pointer-events: none;
}
.s2c-input-wrap.is-valid   .s2c-input-icon { color: #198754; }
.s2c-input-wrap.is-warning .s2c-input-icon { color: #b45309; }
.s2c-input-wrap.is-invalid .s2c-input-icon { color: #dc3545; }
.s2c-input-wrap .input-group-text-suffix {
  display: inline-flex; align-items: center; padding: 0 .625rem;
  background: var(--s2c-tag-bg); border: 1px solid var(--s2c-divider); border-left: 0;
  border-radius: 0 var(--s2c-radius) var(--s2c-radius) 0;
  color: var(--s2c-muted); font-size: .8125rem;
  margin-left: -1px;
}
.s2c-input-wrap.is-warning .form-control,
.form-control.is-warning {
  border-color: #f59e0b;
  padding-right: 2.25rem;
}
.form-control.is-warning:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.s2c-feedback.is-warning { color: #b45309; }
[data-bs-theme="dark"] .s2c-feedback.is-warning { color: #fbbf24; }
.invalid-feedback i, .valid-feedback i, .s2c-feedback i { font-size: .85em; }

/* a11y rows */
.s2c-a11y { display: flex; flex-direction: column; gap: .5rem; }
.s2c-a11y__row {
  display: grid; grid-template-columns: 220px 1fr 220px; gap: 1rem; align-items: center;
  padding: .5rem .75rem;
  border: 1px solid var(--s2c-divider); border-radius: 6px;
  background: var(--s2c-card-bg);
}
.s2c-a11y__lab { font-size: .8125rem; color: var(--s2c-strong); font-weight: 500; }
.s2c-a11y__sample {
  border-radius: 4px; padding: .5rem .75rem;
  font-size: .9375rem; font-weight: 500;
  border: 1px solid var(--s2c-divider);
}
.s2c-a11y__ratio { font-size: .75rem; }
.s2c-a11y__ratio strong { font-family: "JetBrains Mono", monospace; font-size: .8125rem; margin-right: .375rem; }
.s2c-a11y__ratio.is-pass { color: #198754; }
.s2c-a11y__ratio.is-fail { color: #dc3545; }
@media (max-width: 800px) { .s2c-a11y__row { grid-template-columns: 1fr; } }

/* showcase wrapper — uses existing primitives, just a flex container */
.s2c-showcase { display: flex; flex-direction: column; gap: 1rem; }
.s2c-showcase__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }