@font-face {
  font-family: "Momo Trust Sans";
  src: url("../assets/fonts/MomoTrustSans.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Italic.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--sm-color-surface-page);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  scroll-behavior: auto;
}

html,
body {
  height: 100%;
  height: 100dvh;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--sm-color-surface-page);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-600);
  line-height: var(--sm-type-leading-900);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: var(--sm-size-border-thin);
  height: var(--sm-size-border-thin);
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin-top: calc(-1 * var(--sm-size-border-thin));
  margin-right: calc(-1 * var(--sm-size-border-thin));
  margin-bottom: calc(-1 * var(--sm-size-border-thin));
  margin-left: calc(-1 * var(--sm-size-border-thin));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* App Shell & Sidebar */
.app-shell {
  display: grid;
  grid-template-columns: calc(var(--sm-layout-sidebar-width) + var(--sm-cover-divider-width)) minmax(0, 1fr);
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

.app-shell.is-cover {
  grid-template-columns: 1fr;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

.app-shell.is-cover .side-panel {
  display: none;
}

.app-shell.is-cover .page-region {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

.side-panel {
  position: relative;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: var(--sm-layout-sidebar-width);
  height: 100%;
  height: 100dvh;
  background-color: var(--sm-color-surface-sidebar);
  color: var(--sm-primitive-color-white);
  overflow: hidden;
  z-index: 10;
  border-right: var(--sm-cover-divider-width) solid var(--sm-primitive-color-shell-divider);
  box-sizing: content-box;
}

.side-header {
  padding-top: var(--sm-layout-page-pad-top);
  padding-right: var(--sm-layout-sidebar-pad);
  padding-bottom: 0;
  padding-left: var(--sm-space-12);
  height: calc(var(--sm-nav-offset-top) - var(--sm-space-6));
  box-sizing: border-box;
}

.client-logo-slot {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  font-family: var(--sm-type-family-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
}

.client-logo-slot:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-primitive-color-white);
  outline-offset: var(--sm-size-border-emphasis);
}

.side-scroll {
  min-height: 0;
  overflow-y: auto;
  padding-top: var(--sm-space-6);
  padding-right: var(--sm-layout-sidebar-pad);
  padding-bottom: var(--sm-space-6);
  padding-left: var(--sm-layout-sidebar-pad);
}

.app-shell.is-cover .side-scroll {
  display: none;
}

.side-nav {
  display: grid;
  gap: var(--sm-space-1);
  width: var(--sm-nav-width);
}

/* Nav Item per U10, D1, D4 */
.nav-item,
.nav-trigger,
.sub-nav a {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: var(--sm-button-radius-compact);
  background-color: transparent;
  color: var(--sm-nav-idle-text);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-nav-item-text-size);
  font-weight: var(--sm-type-weight-regular);
  line-height: var(--sm-type-leading-200);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sm-motion-duration-standard) ease, color var(--sm-motion-duration-standard) ease;
}

.nav-item,
.nav-trigger {
  min-height: var(--sm-nav-item-height);
  justify-content: space-between;
  padding-top: 0;
  padding-right: var(--sm-space-6);
  padding-bottom: 0;
  padding-left: var(--sm-space-6);
}

.nav-item:hover,
.nav-trigger:hover,
.sub-nav a:hover {
  background-color: var(--sm-primitive-color-shell-subactive);
  color: var(--sm-nav-idle-text);
}

.nav-item:focus-visible,
.nav-trigger:focus-visible,
.sub-nav a:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-primitive-color-white);
  outline-offset: var(--sm-size-border-emphasis);
}

.nav-item.is-active,
.nav-trigger.is-active {
  background-color: #5E6D5C;
  color: #FFFFFF;
  font-weight: var(--sm-type-weight-medium);
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background-color: rgba(58, 72, 62, 0.54);
  color: #E5E1D8;
  font-family: var(--sm-type-family-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.nav-chevron {
  display: inline-block;
  width: var(--sm-size-icon-200);
  height: var(--sm-size-icon-200);
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuMjUgNy41TDkgMTEuMjVMMTIuNzUgNy41IiBzdHJva2U9IiNFNUUxRDgiIHN0cm9rZS13aWR0aD0iMS4xMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuMjUgNy41TDkgMTEuMjVMMTIuNzUgNy41IiBzdHJva2U9IiNFNUUxRDgiIHN0cm9rZS13aWR0aD0iMS4xMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transition: transform var(--sm-motion-duration-standard) ease;
}

.nav-group:not(.is-open) .nav-chevron {
  transform: rotate(-90deg);
}

.sub-nav {
  display: none;
  gap: var(--sm-space-05);
  padding-top: var(--sm-space-05);
  padding-right: 0;
  padding-bottom: var(--sm-space-2);
  padding-left: var(--sm-space-3);
  width: var(--sm-nav-subnav-width);
}

.nav-group.is-open .sub-nav {
  display: grid;
}

.sub-nav a {
  min-height: var(--sm-nav-subnav-height);
  padding-top: 0;
  padding-right: var(--sm-space-4);
  padding-bottom: 0;
  padding-left: var(--sm-space-6);
  font-size: var(--sm-nav-subnav-text-size);
}

.sub-nav a.is-active {
  background-color: #5E6D5C;
  color: #FFFFFF;
}

.side-footer {
  position: absolute;
  bottom: var(--sm-space-8);
  left: var(--sm-layout-sidebar-pad);
  display: none;
  gap: var(--sm-space-2);
  width: var(--sm-cover-version-width);
  height: var(--sm-cover-footer-height);
}

.app-shell.is-cover .side-footer {
  display: grid;
}

.studio-link {
  display: inline-block;
  color: #FFFFFF;
  font-family: var(--sm-type-family-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
}

.studio-link:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-primitive-color-white);
  outline-offset: var(--sm-size-border-emphasis);
}

.footer-copy {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: #E5E1D8;
  font-family: var(--sm-type-family-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
}

/* Page Region & Content Frame */
.page-region {
  min-width: 0;
  height: 100%;
  height: 100dvh;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background-color: var(--sm-color-surface-page);
  padding-top: var(--sm-layout-page-pad-top);
  padding-right: 0;
  padding-bottom: var(--sm-layout-page-pad-bottom);
  padding-left: var(--sm-layout-page-pad-x);
}

.page {
  display: none;
}

.page.is-active {
  display: block;
}

.content-frame {
  max-width: var(--sm-layout-content-drawn-width);
  min-width: 0;
  width: 100%;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

@media (width >= 1600px) {
  .page-region {
    padding-left: var(--sm-layout-page-pad-x-wide);
    padding-right: var(--sm-layout-page-pad-x-wide);
  }

  .content-frame {
    max-width: var(--sm-layout-content-max-wide);
    margin-left: auto;
    margin-right: auto;
  }

  .code-example-grid {
    max-width: var(--sm-layout-content-max-wide);
  }
}

.page-header {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--sm-layout-module-gap);
  margin-left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sm-space-4);
  flex-wrap: wrap;
}

.kicker {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--sm-space-2);
  margin-left: 0;
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-bold);
  line-height: var(--sm-type-leading-200);
  text-transform: uppercase;
}

.page-title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--sm-space-4);
  margin-left: 0;
  color: var(--sm-color-text-primary);
  font: var(--sm-font-display);
}

.page-summary {
  max-width: var(--sm-layout-content-column-width);
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--sm-space-6);
  margin-left: 0;
  color: var(--sm-color-text-secondary);
  font: var(--sm-font-body-large);
}

.page-header-divider {
  width: 100%;
  height: var(--sm-size-border-thin);
  background-color: var(--sm-color-border-default);
  margin-top: var(--sm-space-6);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.module-stack {
  display: grid;
  gap: var(--sm-layout-module-gap);
}

.module {
  display: grid;
  gap: var(--sm-space-6);
  min-width: 0;
  max-width: 100%;
}

.module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sm-space-4);
  flex-wrap: wrap;
}

.module-heading {
  max-width: var(--sm-layout-content-column-width);
  min-width: 0;
}

.module-title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--sm-space-2);
  margin-left: 0;
  color: var(--sm-color-text-primary);
  font: var(--sm-font-heading-xlarge);
}

.module-description {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--sm-color-text-secondary);
  font: var(--sm-font-body);
}

/* Cards & Panels */
.grid {
  display: grid;
  gap: var(--sm-space-4);
  min-width: 0;
  max-width: 100%;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rules-grid {
  display: grid;
  grid-template-columns: calc(var(--sm-space-28) + var(--sm-space-28) + var(--sm-space-28) + var(--sm-space-28) + var(--sm-space-28) + var(--sm-space-16) + var(--sm-space-2)) minmax(0, 1fr);
  gap: var(--sm-space-4);
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .rules-grid {
    grid-template-columns: 1fr;
  }

  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-region {
    padding-right: var(--sm-layout-page-pad-x-narrow);
  }
}

.panel {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--sm-space-2) + var(--sm-space-05) + var(--sm-size-border-thin));
  padding-top: calc(var(--sm-space-7) + var(--sm-space-05));
  padding-right: var(--sm-space-8);
  padding-bottom: calc(var(--sm-space-7) + var(--sm-size-border-thin));
  padding-left: var(--sm-space-8);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-card);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.wireframe-preview {
  min-width: 0;
  max-width: 100%;
  aspect-ratio: var(--sm-layout-ratio-slide, 16 / 9);
  background-color: var(--sm-color-surface-fill);
  border-radius: var(--sm-radius-md);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  padding: var(--sm-space-4);
  margin-top: var(--sm-space-3);
  box-sizing: border-box;
}

.wireframe-preview.wireframe-preview-accent {
  background-color: var(--sm-color-accent-surface);
  border-color: var(--sm-color-accent);
}

.wireframe-preview.wireframe-preview-media {
  background-color: var(--sm-color-border-separator);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wireframe-preview.wf-cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.wireframe-preview.wf-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sm-space-3);
}

.wireframe-preview.wf-three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sm-space-2);
}

.wireframe-preview.wf-bullets-image {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sm-space-3);
}

.wireframe-preview.wf-image-passages {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-2);
}

.wireframe-preview.wf-section-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wireframe-preview.wf-four-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sm-space-1);
}

.wireframe-preview.wf-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sm-space-3);
}

.panel.span-3,
.span-3 {
  grid-column: 1 / -1;
}

.panel h3 {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--sm-color-text-primary);
  font-size: var(--sm-health-card-heading-size);
  font-weight: 700;
  line-height: var(--sm-health-card-heading-line-height);
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.panel h4,
.panel-title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--sm-color-text-primary);
  font-size: var(--sm-type-scale-800);
  font-weight: var(--sm-type-weight-bold);
  line-height: var(--sm-type-leading-200);
  min-width: 0;
  overflow-wrap: anywhere;
}

.panel p,
.panel-text {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-type-scale-400);
  line-height: var(--sm-type-leading-700);
  min-width: 0;
  overflow-wrap: anywhere;
}

.panel a {
  color: var(--sm-color-accent);
  font-weight: var(--sm-type-weight-medium);
}

.panel-head {
  display: grid;
  gap: calc(var(--sm-space-2) + var(--sm-space-05) + var(--sm-size-border-thin));
  align-items: start;
  min-width: 0;
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-space-8);
  height: var(--sm-space-8);
  flex-shrink: 0;
}

.icon-badge svg,
.icon-badge img {
  width: 100%;
  height: 100%;
}

/* Quick Tip */
.quick-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--sm-space-4);
  max-width: var(--sm-layout-content-column-width);
  padding-top: var(--sm-space-5);
  padding-right: var(--sm-space-6);
  padding-bottom: var(--sm-space-5);
  padding-left: var(--sm-space-6);
  border-radius: var(--sm-quicktip-radius);
  background-color: var(--sm-quicktip-bg);
  color: var(--sm-quicktip-text);
}

.quick-tip .icon-badge {
  color: var(--sm-quicktip-accent);
}

.quick-tip strong {
  display: block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--sm-space-1);
  margin-left: 0;
  color: var(--sm-quicktip-text);
  font-size: var(--sm-type-scale-400);
  font-weight: var(--sm-type-weight-bold);
}

.quick-tip p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font: var(--sm-font-body);
}

/* Tables */
.table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-raised);
}

table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  text-align: left;
  font: var(--sm-font-body);
}

th,
td {
  padding-top: var(--sm-table-cell-pad);
  padding-right: var(--sm-table-cell-pad);
  padding-bottom: var(--sm-table-cell-pad);
  padding-left: var(--sm-table-cell-pad);
  border-bottom: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  vertical-align: middle;
}

th {
  background-color: var(--sm-color-surface-code);
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-table-header-size);
  font-weight: var(--sm-type-weight-bold);
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.table-group-header td {
  background-color: var(--sm-color-surface-code);
  color: var(--sm-color-text-primary);
  font-weight: var(--sm-type-weight-bold);
}

/* Chips */
.chip {
  display: inline-block;
  padding-top: var(--sm-space-05);
  padding-right: var(--sm-chip-pad-inline);
  padding-bottom: var(--sm-space-05);
  padding-left: var(--sm-chip-pad-inline);
  border-radius: var(--sm-chip-radius);
  background-color: var(--sm-chip-bg);
  color: var(--sm-color-text-primary);
  font: var(--sm-font-code);
}

/* ==========================================================================
   Health Gate (Old master reference O lines 536 to 584, Decisions Y1-Y3)
   ========================================================================== */

.health-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-health-chip-gap);
  padding-top: var(--sm-health-chip-pad-block);
  padding-right: var(--sm-health-chip-pad-inline);
  padding-bottom: var(--sm-health-chip-pad-block);
  padding-left: var(--sm-health-chip-pad-inline);
  height: var(--sm-health-chip-height);
  border: 0;
  border-radius: var(--sm-health-chip-radius);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-health-chip-font-size);
  font-weight: 500;
  line-height: var(--sm-health-chip-line-height);
  white-space: nowrap;
  box-sizing: border-box;
}

.health-chip::before {
  content: "";
  display: inline-block;
  width: var(--sm-health-chip-icon-size);
  height: var(--sm-health-chip-icon-size);
  flex-shrink: 0;
}

.health-chip.pass {
  background-color: var(--sm-health-chip-pass-bg);
  color: var(--sm-health-chip-pass-text);
}

.health-chip.pass::before {
  background-color: var(--sm-health-chip-pass-icon);
  clip-path: path("M8 1C4 1 1 4 1 8s3 7 7 7 7-3 7-7-3-7-7-7ZM7 11 4 8l1-1 2 2 4-4 1 1-5 5Z");
}

.health-chip.warn {
  background-color: var(--sm-health-chip-warn-bg);
  color: var(--sm-health-chip-warn-text);
}

.health-chip.warn::before {
  background-color: var(--sm-health-chip-warn-icon);
  clip-path: polygon(48% 0, 13% 56%, 42% 56%, 32% 100%, 88% 39%, 57% 39%, 68% 0);
}

.health-chip.red {
  background-color: var(--sm-health-chip-red-bg);
  color: var(--sm-health-chip-red-text);
}

.health-chip.red::before {
  background-color: var(--sm-health-chip-red-icon);
  clip-path: path("M8 1C4 1 1 4 1 8s3 7 7 7 7-3 7-7-3-7-7-7ZM5 6l1-1 2 2 2-2 1 1-2 2 2 2-1 1-2-2-2 2-1-1 2-2-2-2Z");
}

/* Health cards (O lines 1025 to 1053, Y3) */
.panel.health-pass,
.panel.health-warn,
.panel.health-red {
  min-height: var(--sm-health-card-min-height);
  box-shadow: var(--sm-shadow-card);
}

.panel.health-pass {
  border-color: var(--sm-health-card-pass-border);
  background-color: var(--sm-health-card-pass-bg);
  color: var(--sm-health-card-pass-text);
}

.panel.health-pass h3,
.panel.health-pass p {
  color: var(--sm-health-card-pass-text);
}

.panel.health-warn {
  border-color: var(--sm-health-card-warn-border);
  background-color: var(--sm-health-card-warn-bg);
  color: var(--sm-health-card-warn-text);
}

.panel.health-warn h3,
.panel.health-warn p {
  color: var(--sm-health-card-warn-text);
}

.panel.health-red {
  border-color: var(--sm-health-card-red-border);
  background-color: var(--sm-health-card-red-bg);
  color: var(--sm-health-card-red-text);
}

.panel.health-red h3,
.panel.health-red p {
  color: var(--sm-health-card-red-text);
}

.panel.health-pass p,
.panel.health-warn p,
.panel.health-red p {
  font-size: var(--sm-health-card-body-size);
  line-height: var(--sm-health-card-body-line-height);
  margin: 0;
}

/* Status icons (Feedback section messages, banners, flags, inline messages per Item 7) */
.status-icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
  width: var(--sm-size-icon-100);
  height: var(--sm-size-icon-100);
}

.status-icon.size-20 {
  width: var(--sm-size-icon-300);
  height: var(--sm-size-icon-300);
}

.status-icon.size-24 {
  width: var(--sm-size-icon-400);
  height: var(--sm-size-icon-400);
}

.status-icon.size-32 {
  width: var(--sm-size-icon-500);
  height: var(--sm-size-icon-500);
}

.status-icon.icon-alert-triangle {
  -webkit-mask-image: url("../assets/icons/feather/alert-triangle.svg");
  mask-image: url("../assets/icons/feather/alert-triangle.svg");
}

.status-icon.icon-alert-octagon {
  -webkit-mask-image: url("../assets/icons/feather/alert-octagon.svg");
  mask-image: url("../assets/icons/feather/alert-octagon.svg");
}

.status-icon.icon-check-circle {
  -webkit-mask-image: url("../assets/icons/feather/check-circle.svg");
  mask-image: url("../assets/icons/feather/check-circle.svg");
}

.status-icon.icon-info {
  -webkit-mask-image: url("../assets/icons/feather/info.svg");
  mask-image: url("../assets/icons/feather/info.svg");
}

.status-icon.icon-star {
  -webkit-mask-image: url("../assets/icons/feather/star.svg");
  mask-image: url("../assets/icons/feather/star.svg");
}

.status-icon.icon-wifi-off {
  -webkit-mask-image: url("../assets/icons/feather/wifi-off.svg");
  mask-image: url("../assets/icons/feather/wifi-off.svg");
}

.status-icon.icon-bell {
  -webkit-mask-image: url("../assets/icons/feather/bell.svg");
  mask-image: url("../assets/icons/feather/bell.svg");
}

.status-icon.role-warn {
  color: var(--sm-color-feedback-warn-text);
}

.status-icon.role-error,
.status-icon.role-red {
  color: var(--sm-color-feedback-red-text);
}

.status-icon.role-pass,
.status-icon.role-success {
  color: var(--sm-color-feedback-pass-text);
}

.status-icon.role-info {
  color: var(--sm-color-feedback-info-text);
}

.status-icon.role-normal {
  color: var(--sm-color-text-secondary);
}

.status-icon.role-discovery {
  color: var(--sm-color-accent);
}

/* Palette & Swatches */
.palette-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-16);
}

.palette-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sm-space-4);
}

.palette-family {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-3);
}

.palette-family-title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--sm-color-text-primary);
  font-size: var(--sm-type-scale-400);
  font-weight: var(--sm-type-weight-bold);
  line-height: var(--sm-type-leading-600);
}

.palette-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--sm-primitive-color-neutral-0);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-sm);
  overflow: hidden;
}

.palette-swatch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(var(--sm-space-8) + var(--sm-space-1) + var(--sm-size-border-thin));
  min-height: calc(var(--sm-space-8) + var(--sm-space-1) + var(--sm-size-border-thin));
  padding-top: var(--sm-space-2);
  padding-right: var(--sm-space-2);
  padding-bottom: var(--sm-space-2);
  padding-left: var(--sm-space-4);
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--sm-motion-duration-quick) ease;
}

.palette-swatch:hover {
  opacity: 0.92;
}

.palette-swatch:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: calc(-1 * var(--sm-size-border-emphasis));
  z-index: 1;
  position: relative;
}

.swatch-name {
  font-size: var(--sm-type-scale-100);
  font-weight: var(--sm-type-weight-regular);
  line-height: var(--sm-type-leading-200);
}

.swatch-hex {
  font-size: var(--sm-type-scale-100);
  font-weight: var(--sm-type-weight-regular);
  line-height: var(--sm-type-leading-200);
}

.feedback-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sm-space-4);
}

.feedback-swatch {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm-space-2) + var(--sm-space-05));
}

.feedback-bar {
  display: block;
  width: 100%;
  height: calc(var(--sm-space-10) + var(--sm-space-1));
  padding: 0;
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-sm);
  cursor: pointer;
  transition: opacity var(--sm-motion-duration-quick) ease;
}

.feedback-bar:hover {
  opacity: 0.92;
}

.feedback-bar:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-border-emphasis);
}

.feedback-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.feedback-name {
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-bold);
  color: var(--sm-color-text-primary);
  line-height: var(--sm-type-leading-400);
}

.feedback-hex {
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-regular);
  color: var(--sm-color-text-secondary);
  line-height: var(--sm-type-leading-400);
}

.swatch-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  font-size: var(--sm-type-scale-300);
  color: var(--sm-color-text-primary);
}

.swatch-dot {
  width: calc(var(--sm-space-4) + var(--sm-space-05));
  height: calc(var(--sm-space-4) + var(--sm-space-05));
  border-radius: var(--sm-radius-sm);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  flex-shrink: 0;
}

/* Button Component Tokens & Specimens */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm-button-gap);
  height: var(--sm-button-height);
  padding-top: var(--sm-button-pad-block);
  padding-right: var(--sm-button-pad-inline);
  padding-bottom: var(--sm-button-pad-block);
  padding-left: var(--sm-button-pad-inline);
  border-width: var(--sm-button-border-width);
  border-style: solid;
  border-color: transparent;
  border-radius: var(--sm-button-radius);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-400);
  font-weight: var(--sm-type-weight-medium);
  line-height: var(--sm-type-leading-300);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--sm-button-transition-duration) ease,
              border-color var(--sm-button-transition-duration) ease,
              color var(--sm-button-transition-duration) ease;
}

.button:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.button.compact {
  height: var(--sm-button-height-compact);
  padding-top: var(--sm-button-pad-block-compact);
  padding-bottom: var(--sm-button-pad-block-compact);
  border-radius: var(--sm-button-radius-compact);
}

.button.full-width {
  width: 100%;
}

.button.icon-only {
  width: var(--sm-button-height);
  padding-left: 0;
  padding-right: 0;
}

.button.compact.icon-only {
  width: var(--sm-button-height-compact);
}

.button.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button.default {
  background-color: var(--sm-color-surface-fill);
  border-color: var(--sm-color-border-default);
  color: var(--sm-color-text-primary);
}

.button.default:hover,
.button.default.is-hovered {
  background-color: var(--sm-color-border-separator);
}

.button.default:active,
.button.default.is-pressed {
  background-color: var(--sm-color-surface-fill);
}

.button.primary,
.button.appearance-primary {
  background-color: var(--sm-color-accent);
  color: var(--sm-color-text-on-bold);
}

.button.primary:hover,
.button.primary.is-hovered,
.button.appearance-primary:hover,
.button.appearance-primary.is-hovered {
  background-color: var(--sm-button-primary-hover-bg);
}

.button.primary:active,
.button.primary.is-pressed,
.button.appearance-primary:active,
.button.appearance-primary.is-pressed {
  background-color: var(--sm-button-primary-active-bg);
}

.button.subtle,
.button.appearance-subtle {
  background-color: transparent;
  color: var(--sm-color-text-secondary);
}

.button.subtle:hover,
.button.subtle.is-hovered {
  background-color: var(--sm-color-surface-fill);
}

.button.subtle:active,
.button.subtle.is-pressed {
  background-color: var(--sm-color-border-separator);
}

.button.warning {
  background-color: var(--sm-button-warning-bg);
  color: var(--sm-button-warning-text);
}

.button.warning:hover,
.button.warning.is-hovered {
  background-color: var(--sm-button-warning-hover-bg);
}

.button.warning:active,
.button.warning.is-pressed {
  background-color: var(--sm-button-warning-active-bg);
}

.button.danger {
  background-color: var(--sm-color-feedback-red);
  color: var(--sm-color-text-contrast-dark);
}

.button.danger:hover,
.button.danger.is-hovered {
  color: var(--sm-color-text-contrast-dark);
}

.button.danger:active,
.button.danger.is-pressed {
  color: var(--sm-color-text-contrast-dark);
}

.button.discovery {
  background-color: var(--sm-color-feedback-info);
  color: var(--sm-color-text-contrast-dark);
}

.button.discovery:hover,
.button.discovery.is-hovered {
  color: var(--sm-color-text-contrast-dark);
}

.button.discovery:active,
.button.discovery.is-pressed {
  color: var(--sm-color-text-contrast-dark);
}

.button.danger.is-loading,
.button.discovery.is-loading {
  color: var(--sm-color-text-contrast-dark);
}

.button:focus-visible,
.button.is-focused {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.button.is-selected {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-accent);
  outline-offset: var(--sm-size-focus-offset);
}

.button:disabled,
.button.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.button.is-loading {
  position: relative;
  pointer-events: none;
}

.button.is-loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--sm-radius-pill);
  border: 2px solid transparent;
  border-top-color: currentColor;
  animation: sm-spin 0.6s linear infinite;
  margin-left: var(--sm-space-2);
}

@keyframes sm-spin {
  to { transform: rotate(360deg); }
}

.button.download {
  gap: var(--sm-button-download-gap);
}

.button.download::before {
  content: "";
  display: inline-block;
  width: var(--sm-button-download-icon-size);
  height: var(--sm-button-download-icon-size);
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/feather/download.svg") no-repeat center / contain;
  mask: url("../assets/icons/feather/download.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.button-group {
  display: inline-flex;
  gap: var(--sm-space-2);
}

.split-button {
  display: inline-flex;
  gap: var(--sm-space-05);
}

.button-link {
  color: var(--sm-color-accent);
  text-decoration: underline;
  font-weight: var(--sm-type-weight-medium);
}

.specimen-card {
  padding-top: var(--sm-space-6);
  padding-right: var(--sm-space-6);
  padding-bottom: var(--sm-space-6);
  padding-left: var(--sm-space-6);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-raised);
}

.anatomy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sm-space-8);
  align-items: center;
}

.specimen-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--sm-space-12);
  padding-right: var(--sm-space-12);
  padding-bottom: var(--sm-space-12);
  padding-left: var(--sm-space-12);
  background-color: var(--sm-color-surface-code);
  border-radius: var(--sm-radius-sm);
}

.specimen-legend ol {
  margin-top: var(--sm-space-2);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--sm-space-2);
}

.specimen-legend li {
  display: flex;
  align-items: center;
}

.specimen-legend h4 {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font: var(--sm-font-heading-medium);
}

.callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-space-5);
  height: var(--sm-space-5);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-color-accent);
  color: var(--sm-primitive-color-white);
  font-size: var(--sm-type-scale-100);
  font-weight: var(--sm-type-weight-bold);
}

.callout-container {
  top: calc(-1 * var(--sm-space-2));
  left: calc(-1 * var(--sm-space-2));
}

.callout-icon {
  top: calc(-1 * var(--sm-space-2));
  left: var(--sm-space-4);
}

.callout-label {
  bottom: calc(-1 * var(--sm-space-2));
  right: var(--sm-space-4);
}

.callout-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-space-5);
  height: var(--sm-space-5);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-color-accent);
  color: var(--sm-primitive-color-white);
  font-size: var(--sm-type-scale-100);
  font-weight: var(--sm-type-weight-bold);
  margin-right: var(--sm-space-2);
}

.spec-list {
  display: grid;
  gap: var(--sm-space-2);
  margin-top: var(--sm-space-4);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font: var(--sm-font-body);
}

.spec-list div {
  display: flex;
  justify-content: space-between;
}

.spec-list dt {
  color: var(--sm-color-text-secondary);
}

.spec-list dd {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-weight: var(--sm-type-weight-medium);
}

.specimen-row {
  display: flex;
  align-items: center;
  gap: var(--sm-space-4);
  margin-top: var(--sm-space-4);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* Code Example Panels */
.code-example-grid {
  display: grid;
  gap: var(--sm-space-6);
  max-width: var(--sm-layout-content-drawn-width);
}

.code-example {
  display: grid;
  gap: var(--sm-space-2);
  background-color: transparent;
}

.code-example-header {
  min-height: var(--sm-button-height);
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-3);
  color: var(--sm-color-text-primary);
  font-size: var(--sm-type-scale-400);
  line-height: var(--sm-type-leading-300);
  font-weight: var(--sm-type-weight-bold);
}

.copy-code {
  min-height: var(--sm-button-height);
  padding-top: var(--sm-button-pad-block);
  padding-right: var(--sm-button-pad-inline);
  padding-bottom: var(--sm-button-pad-block);
  padding-left: var(--sm-button-pad-inline);
  border-width: 0;
  border-radius: var(--sm-button-radius);
  background-color: transparent;
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-type-scale-400);
  line-height: var(--sm-type-leading-300);
  font-weight: var(--sm-type-weight-medium);
  cursor: pointer;
  transition: background-color var(--sm-button-transition-duration) ease;
}

.copy-code:hover,
.copy-code:focus-visible {
  outline: none;
  background-color: var(--sm-color-surface-fill);
}

.code-example pre {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: var(--sm-space-6);
  padding-right: var(--sm-space-6);
  padding-bottom: var(--sm-space-6);
  padding-left: var(--sm-space-6);
  overflow-x: auto;
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-color-surface-raised);
  color: var(--sm-color-text-primary);
}

.code-example code {
  font: var(--sm-font-code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-block {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-code);
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--sm-space-10) + var(--sm-space-1));
  padding-top: 0;
  padding-right: var(--sm-space-4);
  padding-bottom: 0;
  padding-left: var(--sm-space-4);
  border-bottom: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-medium);
}

.code-header span {
  color: var(--sm-color-text-primary);
  font-weight: var(--sm-type-weight-bold);
  text-transform: uppercase;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sm-space-8);
  padding-top: 0;
  padding-right: var(--sm-space-3);
  padding-bottom: 0;
  padding-left: var(--sm-space-3);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-color-surface-raised);
  color: var(--sm-color-text-primary);
  font-size: var(--sm-type-scale-100);
  font-weight: var(--sm-type-weight-medium);
  cursor: pointer;
  transition: background-color var(--sm-motion-duration-quick) ease;
}

.copy-button:hover,
.copy-button:focus-visible {
  background-color: var(--sm-color-surface-fill);
}

.copy-button:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

pre {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: var(--sm-space-5);
  padding-right: var(--sm-space-5);
  padding-bottom: var(--sm-space-5);
  padding-left: var(--sm-space-5);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--sm-color-text-primary);
  font: var(--sm-font-code);
  min-width: 0;
  max-width: 100%;
}

pre code {
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
  font: inherit;
}

/* Cover Page Styles */
.cover-page {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--sm-color-surface-sidebar);
  color: var(--sm-primitive-color-white);
  overflow: hidden;
}

.cover-global-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--sm-layout-header-height);
  background-color: #485946;
  border-bottom: 1px solid #2C3635;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-right: var(--sm-layout-sidebar-pad);
  padding-bottom: 0;
  padding-left: var(--sm-layout-sidebar-pad);
  z-index: 20;
}

.cover-header-brand {
  display: flex;
  align-items: center;
  gap: var(--sm-space-2);
}

.cover-header-mark {
  display: inline-flex;
  width: var(--sm-space-4);
  height: var(--sm-space-4);
}

.cover-header-title {
  color: #FFFFFF;
  font-family: var(--sm-type-family-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
}

.cover-header-weight {
  color: #FFFFFF;
  font-family: var(--sm-type-family-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
  margin-right: var(--sm-space-2);
}

.cover-header-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background-color: rgba(58, 72, 62, 0.54);
  color: #E5E1D8;
  font-family: var(--sm-type-family-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.cover-sidebar-client {
  position: absolute;
  top: var(--sm-cover-sidebar-client-top);
  left: var(--sm-space-12);
  width: max-content;
  color: #FFFFFF;
  font-family: var(--sm-type-family-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 22px;
  z-index: 10;
}

.cover-sidebar-divider {
  position: absolute;
  top: var(--sm-layout-header-height);
  left: var(--sm-layout-sidebar-width);
  width: 2px;
  height: calc(100vh - var(--sm-layout-header-height));
  background-color: #2C3635;
  z-index: 10;
}

.cover-sidebar-footer {
  position: absolute;
  bottom: var(--sm-space-8);
  left: var(--sm-layout-sidebar-pad);
  display: grid;
  gap: var(--sm-space-2);
  z-index: 10;
}

.cover-footer-brand {
  color: #FFFFFF;
  font-family: var(--sm-type-family-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.cover-footer-rights {
  color: #E5E1D8;
  font-family: var(--sm-type-family-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
}

.cover-region {
  position: absolute;
  top: 0;
  left: var(--sm-layout-sidebar-width);
  right: 0;
  width: calc(100% - var(--sm-layout-sidebar-width));
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #485946;
}

.cover-content {
  position: absolute;
  top: 120px;
  left: 120px;
  max-width: 840px;
  display: grid;
  gap: var(--sm-space-8);
  z-index: 5;
}

.cover-title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-family: var(--sm-type-family-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 74px;
  color: #FFFFFF;
}

.cover-copy {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  max-width: 840px;
  color: #FFFFFF;
  font-family: var(--sm-type-family-sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 45px;
}

.cover-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 300px;
  height: 56px;
  border: 1px solid #2A2A26;
  border-radius: 4px;
  background-color: #DBE64C;
  color: #2A2A26;
  font-family: var(--sm-type-family-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--sm-motion-duration-standard) ease;
}

.cover-action:hover {
  opacity: 0.9;
  background-color: #DBE64C;
}

.cover-action:focus-visible {
  outline: 2px solid #2A2A26;
  outline-offset: 2px;
}

.cover-action-chevron {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #2A2A26;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNkwxNSAxMkw5IDE4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNkwxNSAxMkw5IDE4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.cover-asterisk-band {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 275px;
  background-image: url("../assets/cover-asterisk-band.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* Shape Samples and Modal Specimen (Shapes Page) */
.shape-sample {
  display: inline-block;
  width: var(--sm-space-8);
  height: var(--sm-space-8);
  background-color: var(--sm-color-accent);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
}

.modal-specimen-wrap {
  padding: var(--sm-space-8);
  background-color: var(--sm-primitive-color-shell-scrim);
  border-radius: var(--sm-radius-md);
  display: flex;
  justify-content: center;
}

.modal-specimen-dialog {
  width: 100%;
  max-width: var(--sm-layout-sidebar-width);
  background-color: var(--sm-color-surface-raised);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-space-3);
  padding: var(--sm-space-6);
  box-shadow: var(--sm-shadow-card);
}

.modal-specimen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sm-space-4);
}

.modal-specimen-close {
  background: transparent;
  border: none;
  color: var(--sm-color-text-secondary);
  font: var(--sm-font-heading-small);
  cursor: pointer;
}

.modal-specimen-body {
  margin-bottom: var(--sm-space-6);
  color: var(--sm-color-text-primary);
}

.modal-specimen-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sm-space-3);
}

/* ==========================================================================
   Components: Fields, Controls, States (Group D)
   ========================================================================== */

.field {
  display: grid;
  gap: var(--sm-space-2);
  width: 100%;
}

.field-label {
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-semibold);
  line-height: var(--sm-type-leading-200);
}

.required-indicator {
  color: var(--sm-color-feedback-red);
}

.input,
.textarea {
  width: 100%;
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-fill);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-400);
  line-height: var(--sm-type-leading-300);
  box-sizing: border-box;
}

.input {
  height: var(--sm-space-10);
  padding-top: var(--sm-space-2);
  padding-bottom: var(--sm-space-2);
  padding-left: var(--sm-space-3);
  padding-right: var(--sm-space-3);
}

.input.subtle {
  border-color: transparent;
  background-color: transparent;
}

.input.subtle:hover {
  border-color: var(--sm-color-border-hover);
  background-color: var(--sm-color-surface-fill);
}

.textarea {
  min-height: var(--sm-space-20);
  padding-top: var(--sm-space-3);
  padding-bottom: var(--sm-space-3);
  padding-left: var(--sm-space-3);
  padding-right: var(--sm-space-3);
  resize: vertical;
}

.input:focus,
.textarea:focus,
.select-control:focus {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-border-thin);
  border-color: var(--sm-color-accent);
}

.input.is-invalid,
.textarea.is-invalid {
  border-color: var(--sm-color-feedback-red);
}

.input:disabled,
.textarea:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: var(--sm-color-surface-fill);
}

.helper {
  color: var(--sm-color-text-secondary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  line-height: var(--sm-type-leading-100);
}

.error-message {
  color: var(--sm-color-feedback-red-text);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  line-height: var(--sm-type-leading-100);
  font-weight: var(--sm-type-weight-medium);
}

.select-control {
  width: 100%;
  min-height: var(--sm-space-10);
  padding-top: var(--sm-space-2);
  padding-bottom: var(--sm-space-2);
  padding-left: var(--sm-space-3);
  padding-right: var(--sm-space-3);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-2);
  background-color: var(--sm-color-surface-fill);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-400);
  box-sizing: border-box;
  cursor: pointer;
}

.select-tag {
  display: inline-flex;
  align-items: center;
  padding-top: var(--sm-space-05);
  padding-bottom: var(--sm-space-05);
  padding-left: var(--sm-space-2);
  padding-right: var(--sm-space-2);
  background-color: var(--sm-color-accent-surface);
  color: var(--sm-color-accent);
  border-radius: var(--sm-radius-sm);
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-medium);
  margin-right: var(--sm-space-1);
}

.combobox-wrapper {
  position: relative;
  width: 100%;
}

.select-menu {
  position: absolute;
  top: calc(100% + var(--sm-space-1));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: var(--sm-space-1);
  list-style: none;
  background-color: var(--sm-color-surface-card);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  box-shadow: var(--sm-shadow-card);
}

.select-menu[hidden] {
  display: none;
}

.select-option {
  padding: var(--sm-space-2) var(--sm-space-3);
  border-radius: var(--sm-radius-sm);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  cursor: pointer;
  transition: background-color var(--sm-motion-duration-quick) ease;
}

.select-option:hover,
.select-option.is-focused {
  background-color: var(--sm-color-accent-surface);
  color: var(--sm-color-text-primary);
}

.select-option[aria-selected="true"] {
  background-color: var(--sm-color-accent-surface);
  font-weight: var(--sm-type-weight-semibold);
}

.choice-demo-shell {
  display: grid;
  gap: var(--sm-space-2);
  width: 100%;
}

.choice-demo-label {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-semibold);
  color: var(--sm-color-text-primary);
}

.choice-list {
  display: grid;
  gap: var(--sm-space-3);
  width: 100%;
}

.choice {
  width: 100%;
  height: var(--sm-space-12);
  padding-left: var(--sm-space-4);
  padding-right: var(--sm-space-4);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-pill);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sm-space-6);
  column-gap: var(--sm-space-3);
  align-items: center;
  background-color: var(--sm-color-surface-fill);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-400);
  font-weight: var(--sm-type-weight-medium);
  cursor: pointer;
  transition: border-color var(--sm-motion-duration-standard) ease,
              background-color var(--sm-motion-duration-standard) ease;
}

.choice:hover:not(:disabled) {
  border-color: var(--sm-color-accent);
  background-color: var(--sm-color-surface-raised);
}

.choice:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.choice[aria-pressed="true"] {
  border-color: var(--sm-color-accent);
  background-color: var(--sm-color-accent-surface);
}

.choice-check {
  width: var(--sm-space-6);
  height: var(--sm-space-6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--sm-color-accent);
  color: var(--sm-color-text-on-bold);
  font-size: var(--sm-type-scale-300);
  opacity: 0;
  transition: opacity var(--sm-motion-duration-quick) ease;
}

.choice[aria-pressed="true"] .choice-check {
  opacity: 1;
}

.choice:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.switch-demo-list {
  display: grid;
  gap: var(--sm-space-4);
  width: 100%;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-4);
}

.switch-copy {
  display: grid;
  gap: var(--sm-space-05);
}

.switch-copy strong {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-semibold);
  color: var(--sm-color-text-primary);
}

.switch-copy span {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  color: var(--sm-color-text-secondary);
}

.switch {
  position: relative;
  width: var(--sm-space-8);
  height: var(--sm-space-4);
  border-width: 0;
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-border-default);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--sm-motion-duration-standard) ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: var(--sm-space-05);
  left: var(--sm-space-05);
  width: var(--sm-space-3);
  height: var(--sm-space-3);
  border-radius: 50%;
  background-color: var(--sm-primitive-color-white);
  transition: transform var(--sm-motion-duration-standard) ease;
}

.switch:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.switch[aria-checked="true"] {
  background-color: var(--sm-color-accent);
}

.switch[aria-checked="true"]::after {
  transform: translateX(var(--sm-space-4));
}

.stepper {
  display: flex;
  gap: var(--sm-space-3);
  width: 100%;
}

.step {
  flex: 1;
  display: grid;
  gap: var(--sm-space-2);
}

.step-track {
  height: var(--sm-space-1);
  background-color: var(--sm-color-border-separator);
  border-radius: var(--sm-radius-pill);
  overflow: hidden;
}

.step-fill {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--sm-color-accent);
  transition: width var(--sm-motion-duration-standard) ease;
}

.step.is-complete .step-fill {
  width: 100%;
}

.step.is-progress .step-fill {
  width: 50%;
}

.step-label {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-medium);
  color: var(--sm-color-text-secondary);
}

.step.is-progress .step-label,
.step.is-complete .step-label {
  color: var(--sm-color-text-primary);
  font-weight: var(--sm-type-weight-semibold);
}

.faq-accordion-list {
  display: grid;
  gap: var(--sm-space-3);
  width: 100%;
}

.faq-accordion-item {
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-fill);
  padding-top: var(--sm-space-4);
  padding-bottom: var(--sm-space-4);
  padding-left: var(--sm-space-4);
  padding-right: var(--sm-space-4);
}

.faq-accordion-item summary {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-400);
  font-weight: var(--sm-type-weight-semibold);
  color: var(--sm-color-text-primary);
  cursor: pointer;
}

.faq-accordion-copy {
  margin-top: var(--sm-space-3);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  line-height: var(--sm-type-leading-300);
  color: var(--sm-color-text-secondary);
}

/* ADS Controls (ADS/05 lines 302-336) */
.control-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  color: var(--sm-color-text-primary);
  cursor: pointer;
  user-select: none;
}

.control-checkbox {
  appearance: none;
  width: var(--sm-space-4);
  height: var(--sm-space-4);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-color-surface-fill);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin: 0;
  transition: background-color var(--sm-motion-duration-quick) ease, border-color var(--sm-motion-duration-quick) ease;
}

.control-checkbox:checked {
  background-color: var(--sm-color-accent);
  border-color: var(--sm-color-accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8l3 3 5-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.control-checkbox:indeterminate {
  background-color: var(--sm-color-accent);
  border-color: var(--sm-color-accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.control-checkbox.is-invalid {
  border-color: var(--sm-color-feedback-red);
}

.control-checkbox:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.control-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.control-radio {
  appearance: none;
  width: var(--sm-space-4);
  height: var(--sm-space-4);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-surface-fill);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin: 0;
  transition: border-color var(--sm-motion-duration-quick) ease;
}

.control-radio:checked {
  border-color: var(--sm-color-accent);
}

.control-radio:checked::after {
  content: "";
  width: var(--sm-space-2);
  height: var(--sm-space-2);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-accent);
}

.control-radio:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.control-radio:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.control-toggle {
  position: relative;
  width: var(--sm-space-8);
  height: var(--sm-space-4);
  border: 0;
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-border-default);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background-color var(--sm-motion-duration-standard) ease;
}

.control-toggle::after {
  content: "";
  position: absolute;
  top: var(--sm-space-05);
  left: var(--sm-space-05);
  width: var(--sm-space-3);
  height: var(--sm-space-3);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-primitive-color-white);
  transition: transform var(--sm-motion-duration-standard) ease;
}

.control-toggle[aria-checked="true"] {
  background-color: var(--sm-color-accent);
}

.control-toggle[aria-checked="true"]::after {
  transform: translateX(var(--sm-space-4));
}

.control-toggle.toggle-large {
  width: var(--sm-space-10);
  height: var(--sm-space-5);
}

.control-toggle.toggle-large::after {
  width: var(--sm-space-4);
  height: var(--sm-space-4);
}

.control-toggle.toggle-large[aria-checked="true"]::after {
  transform: translateX(var(--sm-space-5));
}

.control-toggle:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.control-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.control-range {
  appearance: none;
  width: 100%;
  height: var(--sm-space-2);
  background-color: var(--sm-color-border-separator);
  border-radius: var(--sm-radius-pill);
  outline: none;
  cursor: pointer;
}

.control-range::-webkit-slider-thumb {
  appearance: none;
  width: var(--sm-space-4);
  height: var(--sm-space-4);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-accent);
  box-shadow: var(--sm-shadow-card);
  cursor: pointer;
  transition: transform var(--sm-motion-duration-quick) ease;
}

.control-range::-moz-range-thumb {
  width: var(--sm-space-4);
  height: var(--sm-space-4);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-accent);
  box-shadow: var(--sm-shadow-card);
  cursor: pointer;
  border: 0;
}

.control-range:focus-visible::-webkit-slider-thumb {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.control-progress-bar {
  width: 100%;
  height: var(--sm-space-2);
  background-color: var(--sm-color-border-separator);
  border-radius: var(--sm-radius-pill);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--sm-color-accent);
  border-radius: var(--sm-radius-pill);
  transition: width var(--sm-motion-duration-standard) ease;
}

.progress-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-space-2);
  position: relative;
  z-index: 1;
}

.step-marker {
  width: var(--sm-space-8);
  height: var(--sm-space-8);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-surface-fill);
  border: var(--sm-size-border-emphasis) solid var(--sm-color-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-semibold);
  color: var(--sm-color-text-secondary);
}

.progress-step.is-complete .step-marker {
  background-color: var(--sm-color-feedback-pass);
  border-color: var(--sm-color-feedback-pass);
  color: var(--sm-primitive-color-white);
}

.progress-step.is-current .step-marker {
  border-color: var(--sm-color-accent);
  color: var(--sm-color-accent);
  box-shadow: 0 0 0 var(--sm-size-border-emphasis) var(--sm-color-accent-surface);
}

.step-title {
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-medium);
  color: var(--sm-color-text-secondary);
}

.progress-step.is-current .step-title,
.progress-step.is-complete .step-title {
  color: var(--sm-color-text-primary);
}

.progress-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
}

.progress-dot {
  width: var(--sm-space-2);
  height: var(--sm-space-2);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-border-default);
  transition: background-color var(--sm-motion-duration-quick) ease, width var(--sm-motion-duration-quick) ease;
}

.progress-dot.is-active {
  background-color: var(--sm-color-accent);
  width: var(--sm-space-5);
}

.accordion {
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  overflow: hidden;
  background-color: var(--sm-color-surface-card);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sm-space-4);
  background-color: var(--sm-color-surface-fill);
  border: 0;
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-semibold);
  color: var(--sm-color-text-primary);
  cursor: pointer;
  text-align: left;
}

.accordion-trigger:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: calc(0px - var(--sm-size-border-emphasis));
}

.accordion-panel {
  padding: var(--sm-space-4);
  border-top: var(--sm-size-border-thin) solid var(--sm-color-border-separator);
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-type-scale-300);
  line-height: var(--sm-type-leading-600);
}

.accordion-panel[hidden] {
  display: none;
}

/* ADS Feedback Messages (ADS/05 lines 408-426) */
.banner-specimen {
  display: flex;
  align-items: center;
  gap: var(--sm-space-2);
  padding: var(--sm-space-3) var(--sm-space-4);
  border-radius: var(--sm-radius-sm);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
}

.banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-message {
  display: flex;
  gap: var(--sm-space-3);
  padding: var(--sm-space-4);
  border-radius: var(--sm-radius-md);
  font-family: var(--sm-type-family-sans);
}

.inline-message {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
}

.flag-specimen {
  display: flex;
  gap: var(--sm-space-3);
  padding: var(--sm-space-4);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-card);
  box-shadow: var(--sm-shadow-card);
}

/* Card variations (Item 15) */
.card-feature-media {
  aspect-ratio: var(--sm-layout-ratio-feature);
  border-radius: var(--sm-radius-md);
  overflow: hidden;
  margin: 0;
  background-color: var(--sm-color-surface-fill);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
}

.card-tinted {
  padding: var(--sm-space-10);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-accent-surface);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
}

.card-stacked-panel,
.card-icon-panel,
.card-bordered-step,
.card-action-panel,
.card-horizontal-panel {
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-card);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  box-shadow: var(--sm-shadow-card);
}

.flag-group {
  display: grid;
  gap: var(--sm-space-4);
  width: 100%;
}

.flag {
  padding-top: var(--sm-space-4);
  padding-bottom: var(--sm-space-4);
  padding-left: var(--sm-space-4);
  padding-right: var(--sm-space-4);
  border-radius: var(--sm-radius-md);
  display: grid;
  grid-template-columns: var(--sm-space-6) minmax(0, 1fr);
  gap: var(--sm-space-3);
  align-items: start;
}

.flag-icon {
  width: var(--sm-space-6);
  height: var(--sm-space-6);
  border-radius: var(--sm-radius-sm);
  display: grid;
  place-items: center;
  font-weight: var(--sm-type-weight-bold);
  font-size: var(--sm-type-scale-300);
}

.flag-copy {
  display: grid;
  gap: var(--sm-space-1);
}

.flag-copy strong {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-semibold);
}

.flag-copy span {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  line-height: var(--sm-type-leading-200);
}

.flag.error {
  background-color: var(--sm-color-feedback-red-surface);
  color: var(--sm-color-text-primary);
}

.flag.error .flag-icon {
  background-color: var(--sm-color-feedback-red);
  color: var(--sm-color-text-on-bold);
}

.flag.warning {
  background-color: var(--sm-color-feedback-warn-surface);
  color: var(--sm-color-text-primary);
}

.flag.warning .flag-icon {
  background-color: var(--sm-color-feedback-warn);
  color: var(--sm-color-text-on-bold);
}

.flag.caution {
  background-color: var(--sm-color-feedback-caution-surface);
  color: var(--sm-color-text-primary);
}

.flag.caution .flag-icon {
  background-color: var(--sm-color-feedback-caution);
  color: var(--sm-color-text-on-bold);
}

.flag.success {
  background-color: var(--sm-color-feedback-pass-surface);
  color: var(--sm-color-text-primary);
}

.flag.success .flag-icon {
  background-color: var(--sm-color-feedback-pass);
  color: var(--sm-color-text-on-bold);
}

.flag.info {
  background-color: var(--sm-color-feedback-info-surface);
  color: var(--sm-color-text-primary);
}

.flag.info .flag-icon {
  background-color: var(--sm-color-feedback-info);
  color: var(--sm-color-text-on-bold);
}

.skeleton-bar {
  background-color: var(--sm-color-border-separator);
  border-radius: var(--sm-radius-sm);
}

.empty-state-box {
  background-color: var(--sm-color-surface-fill);
  border-radius: var(--sm-radius-md);
  border-width: var(--sm-size-border-thin);
  border-style: dashed;
  border-color: var(--sm-color-border-default);
}

/* ==========================================================================
   Components: Data Display & Overlays (Group E)
   ========================================================================== */

.lozenge {
  display: inline-flex;
  align-items: center;
  padding-top: var(--sm-space-05);
  padding-bottom: var(--sm-space-05);
  padding-left: var(--sm-space-1);
  padding-right: var(--sm-space-1);
  border-radius: var(--sm-radius-sm);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-semibold);
  line-height: var(--sm-type-leading-100);
  text-transform: uppercase;
  letter-spacing: var(--sm-space-05);
}

.lozenge.default {
  background-color: var(--sm-color-surface-fill);
  color: var(--sm-color-text-secondary);
}

.lozenge.success {
  background-color: var(--sm-color-feedback-pass-surface);
  color: var(--sm-color-text-primary);
}

.lozenge.success.bold {
  background-color: var(--sm-color-feedback-pass);
  color: var(--sm-color-text-contrast-dark);
}

.lozenge.danger {
  background-color: var(--sm-color-feedback-red-surface);
  color: var(--sm-color-text-primary);
}

.lozenge.danger.bold {
  background-color: var(--sm-color-feedback-red);
  color: var(--sm-color-text-contrast-dark);
}

.lozenge.warning {
  background-color: var(--sm-color-feedback-warn-surface);
  color: var(--sm-color-text-primary);
}

.lozenge.warning.bold {
  background-color: var(--sm-color-feedback-warn);
  color: var(--sm-color-text-contrast-dark);
}

.lozenge.caution {
  background-color: var(--sm-color-feedback-caution-surface);
  color: var(--sm-color-text-primary);
}

.lozenge.caution.bold {
  background-color: var(--sm-color-feedback-caution);
  color: var(--sm-color-text-contrast-dark);
}

.lozenge.info {
  background-color: var(--sm-color-feedback-info-surface);
  color: var(--sm-color-text-primary);
}

.lozenge.info.bold {
  background-color: var(--sm-color-feedback-info);
  color: var(--sm-color-text-contrast-dark);
}

.lozenge.discovery {
  background-color: var(--sm-color-accent-surface);
  color: var(--sm-color-text-primary);
}

.lozenge.discovery.bold {
  background-color: var(--sm-color-accent);
  color: var(--sm-color-text-on-bold);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sm-space-4);
  height: var(--sm-space-4);
  padding-left: var(--sm-space-1);
  padding-right: var(--sm-space-1);
  border-radius: var(--sm-radius-pill);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-100);
  font-weight: var(--sm-type-weight-semibold);
  line-height: var(--sm-type-leading-100);
  background-color: var(--sm-color-surface-fill);
  color: var(--sm-color-text-primary);
}

.badge.primary {
  background-color: var(--sm-color-accent);
  color: var(--sm-color-text-on-bold);
}

.badge.danger {
  background-color: var(--sm-color-feedback-red);
  color: var(--sm-color-text-contrast-dark);
}

.badge.success {
  background-color: var(--sm-color-feedback-pass);
  color: var(--sm-color-text-contrast-dark);
}

.badge.warning {
  background-color: var(--sm-color-feedback-warn);
  color: var(--sm-color-text-contrast-dark);
}

.badge.caution {
  background-color: var(--sm-color-feedback-caution);
  color: var(--sm-color-text-contrast-dark);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-1);
  padding-top: var(--sm-space-05);
  padding-bottom: var(--sm-space-05);
  padding-left: var(--sm-space-2);
  padding-right: var(--sm-space-2);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-color-surface-fill);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-medium);
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-space-2);
}

.stat-widget {
  padding-top: var(--sm-space-6);
  padding-bottom: var(--sm-space-6);
  padding-left: var(--sm-space-6);
  padding-right: var(--sm-space-6);
  background-color: var(--sm-color-surface-raised);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  display: grid;
  gap: var(--sm-space-2);
}

.stat-value {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-800);
  font-weight: var(--sm-type-weight-bold);
  line-height: var(--sm-type-leading-700);
  color: var(--sm-color-text-primary);
}

.stat-label {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  color: var(--sm-color-text-secondary);
}

.key-value-list {
  display: grid;
  gap: var(--sm-space-3);
  width: 100%;
}

.key-value-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sm-space-2);
  padding-bottom: var(--sm-space-2);
  border-bottom-width: var(--sm-size-border-thin);
  border-bottom-style: solid;
  border-bottom-color: var(--sm-color-border-separator);
}

.key-value-key {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  color: var(--sm-color-text-secondary);
}

.key-value-val {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-semibold);
  color: var(--sm-color-text-primary);
}

.modal-dialog-preview {
  width: 100%;
  max-width: var(--sm-layout-sidebar-width);
  background-color: var(--sm-color-surface-raised);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-soft);
  padding-top: var(--sm-space-6);
  padding-bottom: var(--sm-space-6);
  padding-left: var(--sm-space-6);
  padding-right: var(--sm-space-6);
  box-shadow: var(--sm-shadow-card);
}

.modal-dialog-preview h4 {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-500);
  font-weight: var(--sm-type-weight-bold);
  color: var(--sm-color-text-primary);
}

.modal-dialog-preview p {
  margin-top: var(--sm-space-2);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  line-height: var(--sm-type-leading-300);
  color: var(--sm-color-text-secondary);
}

.modal-footer {
  margin-top: var(--sm-space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--sm-space-3);
}

.tooltip-sample {
  position: relative;
  display: inline-flex;
}

.tooltip-bubble {
  padding-top: var(--sm-space-1);
  padding-bottom: var(--sm-space-1);
  padding-left: var(--sm-space-2);
  padding-right: var(--sm-space-2);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-color-surface-sidebar);
  color: var(--sm-primitive-color-white);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  line-height: var(--sm-type-leading-100);
  white-space: nowrap;
}

.popover-sample {
  padding-top: var(--sm-space-4);
  padding-bottom: var(--sm-space-4);
  padding-left: var(--sm-space-4);
  padding-right: var(--sm-space-4);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-raised);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  box-shadow: var(--sm-shadow-card);
  max-width: var(--sm-layout-sidebar-width);
}

/* Patterns: Navigation, Layouts, Templates (Group F) */
.top-nav-preview-desktop {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--sm-space-4);
  padding-bottom: var(--sm-space-4);
  padding-left: var(--sm-space-6);
  padding-right: var(--sm-space-6);
  background-color: var(--sm-color-surface-raised);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-4);
  overflow-x: auto;
}

.top-nav-preview-mobile {
  width: 100%;
  max-width: var(--sm-layout-sidebar-width);
  box-sizing: border-box;
  padding-top: var(--sm-space-3);
  padding-bottom: var(--sm-space-3);
  padding-left: var(--sm-space-4);
  padding-right: var(--sm-space-4);
  background-color: var(--sm-color-surface-raised);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sm-space-2);
  font-family: var(--sm-type-family-sans);
  font-weight: var(--sm-type-weight-bold);
  color: var(--sm-color-text-primary);
  flex-shrink: 0;
}

.top-nav-brand img {
  height: var(--sm-space-6);
  width: auto;
}

.top-nav-links-list {
  display: flex;
  align-items: center;
  gap: var(--sm-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.top-nav-links-list a {
  color: var(--sm-color-text-secondary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-medium);
  text-decoration: none;
}

.top-nav-links-list a:hover {
  color: var(--sm-color-text-primary);
}

.top-nav-actions-group {
  display: flex;
  align-items: center;
  gap: var(--sm-space-3);
  flex-shrink: 0;
}

.docs-nav-preview {
  width: 100%;
  max-width: var(--sm-layout-sidebar-width);
  background-color: var(--sm-color-surface-raised);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  padding-top: var(--sm-space-4);
  padding-bottom: var(--sm-space-4);
  padding-left: var(--sm-space-3);
  padding-right: var(--sm-space-3);
  display: grid;
  gap: var(--sm-space-2);
}

.docs-nav-category {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-100);
  font-weight: var(--sm-type-weight-bold);
  text-transform: uppercase;
  color: var(--sm-color-text-secondary);
  padding-left: var(--sm-space-3);
  padding-top: var(--sm-space-2);
}

.docs-nav-item {
  display: flex;
  align-items: center;
  padding-top: var(--sm-space-2);
  padding-bottom: var(--sm-space-2);
  padding-left: var(--sm-space-3);
  padding-right: var(--sm-space-3);
  border-radius: var(--sm-radius-sm);
  color: var(--sm-color-text-secondary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  text-decoration: none;
}

.docs-nav-item.is-active {
  background-color: var(--sm-color-surface-fill);
  color: var(--sm-color-text-primary);
  font-weight: var(--sm-type-weight-semibold);
}

.tabs-preview {
  display: grid;
  gap: var(--sm-space-4);
  width: 100%;
}

.tab-list {
  display: flex;
  border-bottom-width: var(--sm-size-border-thin);
  border-bottom-style: solid;
  border-bottom-color: var(--sm-color-border-separator);
  gap: var(--sm-space-2);
}

.tab-button {
  padding-top: var(--sm-space-2);
  padding-bottom: var(--sm-space-3);
  padding-left: var(--sm-space-3);
  padding-right: var(--sm-space-3);
  background: transparent;
  border: 0;
  border-bottom-width: var(--sm-size-border-emphasis);
  border-bottom-style: solid;
  border-bottom-color: transparent;
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-medium);
  color: var(--sm-color-text-secondary);
  cursor: pointer;
}

.tab-button.is-active {
  border-bottom-color: var(--sm-color-accent);
  color: var(--sm-color-text-primary);
  font-weight: var(--sm-type-weight-semibold);
}

.breadcrumbs-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-space-2);
  padding-top: var(--sm-space-2);
  padding-bottom: var(--sm-space-2);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  color: var(--sm-color-text-secondary);
  text-decoration: none;
}

.breadcrumb-item.is-current {
  color: var(--sm-color-text-primary);
  font-weight: var(--sm-type-weight-medium);
}

.breadcrumb-separator {
  color: var(--sm-color-text-muted);
  font-size: var(--sm-type-scale-200);
}

.pagination-preview {
  display: flex;
  align-items: center;
  gap: var(--sm-space-2);
  padding-top: var(--sm-space-2);
  padding-bottom: var(--sm-space-2);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sm-space-8);
  height: var(--sm-space-8);
  padding-left: var(--sm-space-2);
  padding-right: var(--sm-space-2);
  border-radius: var(--sm-radius-sm);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  background-color: var(--sm-color-surface-raised);
  color: var(--sm-color-text-primary);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.pagination-btn.is-active {
  background-color: var(--sm-color-surface-fill);
  border-color: var(--sm-color-text-primary);
  font-weight: var(--sm-type-weight-bold);
}

.demo-links-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-space-6);
}

.demo-link-item {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  color: var(--sm-color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.demo-link-item.subtle {
  color: var(--sm-color-text-secondary);
  text-decoration: none;
}

.demo-link-item.subtle:hover {
  text-decoration: underline;
}

/* Layouts and Spacing (Group F) */
.spacing-scale-grid {
  display: grid;
  gap: var(--sm-space-3);
  max-width: 100%;
  width: 100%;
}

.spacing-scale-row {
  display: grid;
  grid-template-columns: var(--sm-space-20) minmax(var(--sm-space-28), 1fr) var(--sm-space-16);
  gap: var(--sm-space-4);
  align-items: center;
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  color: var(--sm-color-text-primary);
}

.spacing-bar-fill {
  height: var(--sm-space-6);
  background-color: var(--sm-color-accent);
  border-radius: var(--sm-radius-sm);
}

.grid-demo-wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sm-space-3);
  padding-top: var(--sm-space-4);
  padding-bottom: var(--sm-space-4);
  padding-left: var(--sm-space-4);
  padding-right: var(--sm-space-4);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-raised);
}

.grid-demo-cell {
  min-height: var(--sm-space-16);
  border-radius: var(--sm-radius-sm);
  display: grid;
  place-items: center;
  background-color: var(--sm-color-surface-fill);
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-200);
  font-weight: var(--sm-type-weight-semibold);
  color: var(--sm-color-text-secondary);
}

.grid-demo-cell.span-12 { grid-column: span 12; }
.grid-demo-cell.span-6  { grid-column: span 6; }
.grid-demo-cell.span-4  { grid-column: span 4; }
.grid-demo-cell.span-8  { grid-column: span 8; }

.divider-sample-h {
  width: 100%;
  height: var(--sm-size-border-thin);
  background-color: var(--sm-color-border-separator);
  margin-top: var(--sm-space-4);
  margin-bottom: var(--sm-space-4);
}

.archetype-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--sm-layout-sidebar-width), 1fr));
  gap: var(--sm-space-4);
}

.archetype-item {
  padding-top: var(--sm-space-5);
  padding-bottom: var(--sm-space-5);
  padding-left: var(--sm-space-5);
  padding-right: var(--sm-space-5);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-color-surface-raised);
  border-width: var(--sm-size-border-thin);
  border-style: solid;
  border-color: var(--sm-color-border-default);
  display: grid;
  gap: var(--sm-space-2);
}

.archetype-item h4 {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-400);
  font-weight: var(--sm-type-weight-bold);
  color: var(--sm-color-text-primary);
}

.archetype-item p {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-300);
  line-height: var(--sm-type-leading-300);
  color: var(--sm-color-text-secondary);
}

.archetype-item code {
  font-family: var(--sm-type-family-mono);
  font-size: var(--sm-type-scale-200);
  color: var(--sm-color-accent);
}

.is-hidden {
  display: none !important;
}

/* ==========================================================================
   Icon Library Board
   ========================================================================== */

.icon-search-wrap {
  margin-bottom: var(--sm-space-6);
}

.icon-search {
  width: min(100%, var(--sm-icon-search-width));
  min-height: var(--sm-icon-search-height);
  padding: var(--sm-icon-search-pad-block) var(--sm-icon-search-pad-inline);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-pill);
  background-color: var(--sm-color-surface-card);
  color: var(--sm-color-text-primary);
  font: inherit;
  font-size: var(--sm-icon-search-font-size);
  line-height: var(--sm-icon-search-line-height);
  outline: none;
  box-sizing: border-box;
}

.icon-search:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-focus-offset);
}

.icon-board {
  display: grid;
  gap: var(--sm-space-8);
}

.icon-section {
  display: grid;
  gap: var(--sm-space-3);
}

.icon-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm-space-4);
}

.icon-section-heading h3 {
  margin: 0;
  font: var(--sm-font-heading-large);
  font-weight: var(--sm-type-weight-bold);
}

.icon-count {
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-icon-count-font-size);
  line-height: var(--sm-icon-count-line-height);
  font-weight: var(--sm-type-weight-bold);
}

.icon-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--sm-icon-library-tile-size));
  gap: var(--sm-space-2);
}

.icon-library-card {
  width: var(--sm-icon-library-tile-size);
  height: var(--sm-icon-library-tile-size);
  padding: 0;
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  display: grid;
  align-content: center;
  justify-items: center;
  background-color: var(--sm-color-surface-card);
  color: var(--sm-color-text-primary);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform var(--sm-icon-library-transition-duration) ease, box-shadow var(--sm-icon-library-transition-duration) ease;
}

.icon-library-card:hover {
  outline: none;
  box-shadow: var(--sm-icon-library-card-shadow-hover);
  transform: translateY(var(--sm-icon-library-lift));
}

.icon-library-card:focus-visible {
  outline: var(--sm-size-border-emphasis) solid var(--sm-color-focus-ring);
  outline-offset: var(--sm-size-border-emphasis);
  box-shadow: var(--sm-icon-library-card-shadow-hover);
  transform: translateY(var(--sm-icon-library-lift));
}

.icon-library-card img {
  width: var(--sm-icon-library-size);
  height: var(--sm-icon-library-size);
  display: block;
  pointer-events: none;
}

.icon-meta-line {
  margin-top: var(--sm-space-4);
  font: var(--sm-font-label);
  color: var(--sm-color-text-secondary);
  font-size: var(--sm-icon-count-font-size);
}

.selected-icon-wrap {
  margin-top: var(--sm-space-6);
}

/* ==========================================================================
   Logo & Image Asset Libraries (Items 2, 3)
   ========================================================================== */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm-space-6);
}

.logo-card {
  display: flex;
  flex-direction: column;
}

.logo-preview-box {
  background: var(--sm-color-surface-raised);
  padding: var(--sm-space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--sm-space-28) + var(--sm-space-7));
  border-radius: var(--sm-radius-sm);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
}

.logo-card.theme-light-ground .logo-preview-box {
  background: var(--sm-primitive-color-white);
}

.logo-card.theme-dark-ground .logo-preview-box {
  background: var(--sm-color-surface-sidebar);
}

.logo-mark-img {
  max-height: var(--sm-space-12);
  max-width: 100%;
}

.logo-mark-render {
  display: inline-block;
  width: min(calc(var(--sm-space-28) * 2 - var(--sm-space-1)), 100%);
  height: var(--sm-space-12);
}

.logo-mark-mask-studio-logo {
  -webkit-mask: url("../assets/sm-studio-logo.svg") no-repeat center / contain;
  mask: url("../assets/sm-studio-logo.svg") no-repeat center / contain;
}

.logo-mark-mask-circle-mark {
  -webkit-mask: url("../assets/sm-studio-circle-mark.svg") no-repeat center / contain;
  mask: url("../assets/sm-studio-circle-mark.svg") no-repeat center / contain;
}

.logo-mark-white {
  background-color: var(--sm-primitive-color-white);
}

.logo-mark-primary {
  background-color: var(--sm-color-text-primary);
}

.logo-card .code-example,
.image-card .code-example {
  margin-top: var(--sm-space-3);
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sm-space-6);
}

.image-card {
  display: flex;
  flex-direction: column;
}

.image-box {
  width: 100%;
  aspect-ratio: var(--sm-layout-ratio-image, 1.5);
  position: relative;
  overflow: hidden;
  border-radius: var(--sm-radius-sm);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: var(--sm-layout-ratio-image, 1.5);
}

.prompt-description {
  margin: 0;
  font: var(--sm-font-body-small);
  color: var(--sm-color-text-secondary);
}

.folder-table-wrap {
  margin-top: var(--sm-space-6);
}

.th-folder {
  width: 28%;
}

/* Mobile Top Bar & Drawer (W3, AC18) */
.mobile-top-bar {
  display: none;
}

.drawer-scrim {
  display: none;
}

/* Media Queries with E2 Placeholders */
@media (width < 1024px) {
  .mobile-top-bar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--sm-layout-header-height);
    background-color: var(--sm-primitive-color-shell-header);
    z-index: 100;
    padding-top: 0;
    padding-right: var(--sm-space-4);
    padding-bottom: 0;
    padding-left: var(--sm-space-4);
    box-sizing: border-box;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--sm-space-8);
    padding-top: 0;
    padding-right: var(--sm-space-2);
    padding-bottom: 0;
    padding-left: var(--sm-space-2);
    border: 0;
    border-radius: var(--sm-radius-sm);
    background-color: transparent;
    color: var(--sm-primitive-color-shell-cream);
    font: var(--sm-font-label);
    cursor: pointer;
    transition: background-color var(--sm-motion-duration-standard) ease;
  }

  .mobile-menu-btn:hover {
    background-color: var(--sm-primitive-color-shell-active);
  }

  .mobile-menu-btn:focus-visible {
    outline: var(--sm-size-border-emphasis) solid var(--sm-primitive-color-white);
    outline-offset: var(--sm-size-border-emphasis);
  }

  .mobile-top-brand {
    display: flex;
    align-items: center;
    gap: var(--sm-space-3);
    margin-left: var(--sm-space-4);
  }

  .mobile-brand-mark {
    width: var(--sm-space-4);
    height: var(--sm-space-4);
    display: block;
  }

  .mobile-brand-title {
    color: var(--sm-primitive-color-shell-cream);
    font-family: var(--sm-type-family-sans);
    font-size: var(--sm-type-scale-400);
    font-weight: var(--sm-type-weight-medium);
    line-height: var(--sm-type-leading-300);
  }

  .mobile-brand-sub {
    color: var(--sm-primitive-color-shell-cream);
    font-family: var(--sm-type-family-sans);
    font-size: var(--sm-type-scale-400);
    font-weight: var(--sm-type-weight-regular);
    line-height: var(--sm-type-leading-300);
  }

  .drawer-scrim {
    display: block;
    position: fixed;
    top: var(--sm-layout-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - var(--sm-layout-header-height));
    height: calc(100dvh - var(--sm-layout-header-height));
    background-color: var(--sm-primitive-color-shell-scrim);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sm-motion-duration-standard) ease;
  }

  .drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell .side-panel,
  .app-shell.is-cover .side-panel {
    display: grid !important;
    position: fixed;
    top: var(--sm-layout-header-height);
    left: 0;
    width: var(--sm-layout-sidebar-width);
    max-width: 100vw;
    height: calc(100vh - var(--sm-layout-header-height));
    height: calc(100dvh - var(--sm-layout-header-height));
    z-index: 90;
    transform: translateX(-100%);
    transition: transform var(--sm-motion-duration-standard) ease;
    box-sizing: border-box;
  }

  .app-shell .side-panel.is-open,
  .app-shell.is-cover .side-panel.is-open {
    transform: translateX(0);
  }

  .app-shell.is-cover .side-scroll,
  .app-shell.is-cover .side-footer {
    display: grid !important;
  }

  .side-header {
    display: none;
  }

  .page-region {
    padding-top: calc(var(--sm-layout-header-height) + var(--sm-space-8));
    padding-left: var(--sm-space-4);
    padding-right: var(--sm-space-4);
    padding-bottom: var(--sm-layout-page-pad-bottom-short);
    min-width: 0;
    max-width: 100%;
  }

  .content-frame {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .page-title {
    font: var(--sm-font-heading-xxlarge);
  }

  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .palette-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Cover W5 */
  .cover-global-header {
    display: none;
  }

  .cover-sidebar-client,
  .cover-sidebar-divider,
  .cover-sidebar-footer {
    display: none;
  }

  .app-shell.is-cover .page-region {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .cover-region {
    position: absolute;
    top: var(--sm-layout-header-height);
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - var(--sm-layout-header-height));
    height: calc(100dvh - var(--sm-layout-header-height));
    overflow: hidden;
  }

  .cover-content {
    position: absolute;
    top: var(--sm-space-8);
    left: var(--sm-space-4);
    right: var(--sm-space-4);
    max-width: calc(100% - var(--sm-space-8));
    gap: var(--sm-space-6);
  }

  .cover-title {
    font: var(--sm-font-heading-xxlarge);
    min-height: auto;
    color: var(--sm-primitive-color-shell-cream);
  }

  .cover-copy {
    font: var(--sm-font-heading-medium);
    min-height: auto;
    color: var(--sm-cover-copy-color);
  }

  .cover-action {
    width: var(--sm-cover-action-width);
  }

  .cover-asterisk-band {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 275px;
    background-image: url("../assets/cover-asterisk-band.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
  }
}

@media (width < 810px) {
  .grid.two {
    grid-template-columns: 1fr;
  }

  .grid.three {
    grid-template-columns: 1fr;
  }

  .palette-row {
    grid-template-columns: 1fr;
  }

  .feedback-row {
    grid-template-columns: 1fr;
  }

  .cover-content {
    top: var(--sm-space-6);
    gap: var(--sm-space-4);
  }

  .cover-action {
    width: 100%;
    max-width: var(--sm-cover-action-width);
  }

  .cover-asterisk-band {
    display: none;
  }
}

@media (max-height: 820px) {
  .cover-content {
    top: var(--sm-cover-short-top);
    gap: var(--sm-space-4);
  }

  .cover-title {
    font-size: var(--sm-cover-short-title-size);
    line-height: var(--sm-type-leading-400);
    min-height: auto;
  }

  .cover-copy {
    font-size: var(--sm-cover-short-copy-size);
    line-height: var(--sm-type-leading-700);
    min-height: auto;
  }

  .cover-asterisk-band {
    max-height: 28vh;
  }
}

/* Inline styles token remediation classes */
.specimen-row-clipped-160 {
  max-width: 160px;
}

.field-state-matrix-row .field-label {
  min-height: var(--sm-type-scale-800);
  line-height: var(--sm-type-scale-800);
  white-space: nowrap;
  margin-bottom: var(--sm-space-1);
}

.slide-grid-svg-wrap {
  margin-top: var(--sm-space-4);
  background-color: var(--sm-color-surface-fill);
  border-radius: var(--sm-radius-md);
  padding: var(--sm-space-4);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
}

.slide-grid-svg {
  width: 100%;
  height: auto;
  border: var(--sm-size-border-emphasis) solid var(--sm-color-border-default);
  border-radius: var(--sm-radius-md);
  background: var(--sm-color-surface-card);
  display: block;
}

.radius-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sm-space-4);
  margin-top: var(--sm-space-6);
}

.elevation-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sm-space-4);
  margin-top: var(--sm-space-6);
}

.surface-modal {
  width: 100%;
  max-width: 480px;
  background-color: var(--sm-color-surface-card);
  border-radius: var(--sm-radius-md);
  box-shadow: var(--sm-shadow-card);
  border: var(--sm-size-border-thin) solid var(--sm-color-border-default);
  padding: var(--sm-space-6);
}

/* Swatch classes replacing inline styles in colours.html */
.swatch-neutral-0 { background-color: var(--sm-primitive-color-neutral-0); color: var(--sm-color-text-contrast-dark); }
.swatch-neutral-100 { background-color: var(--sm-primitive-color-neutral-100); color: var(--sm-color-text-contrast-dark); }
.swatch-neutral-200 { background-color: var(--sm-primitive-color-neutral-200); color: var(--sm-color-text-contrast-dark); }
.swatch-neutral-300 { background-color: var(--sm-primitive-color-neutral-300); color: var(--sm-color-text-contrast-dark); }
.swatch-neutral-400 { background-color: var(--sm-primitive-color-neutral-400); color: var(--sm-color-text-contrast-dark); }
.swatch-neutral-500 { background-color: var(--sm-primitive-color-neutral-500); color: var(--sm-color-text-contrast-light); }
.swatch-neutral-600 { background-color: var(--sm-primitive-color-neutral-600); color: var(--sm-color-text-contrast-light); }
.swatch-neutral-700 { background-color: var(--sm-primitive-color-neutral-700); color: var(--sm-color-text-contrast-light); }
.swatch-neutral-800 { background-color: var(--sm-primitive-color-neutral-800); color: var(--sm-color-text-contrast-light); }
.swatch-neutral-900 { background-color: var(--sm-primitive-color-neutral-900); color: var(--sm-color-text-contrast-light); }
.swatch-neutral-1000 { background-color: var(--sm-primitive-color-neutral-1000); color: var(--sm-color-text-contrast-light); }
.swatch-neutral-1100 { background-color: var(--sm-primitive-color-neutral-1100); color: var(--sm-color-text-contrast-light); }
.swatch-neutral-1200 { background-color: var(--sm-primitive-color-neutral-1200); color: var(--sm-color-text-contrast-light); }

.swatch-ink-400 { background-color: var(--sm-primitive-color-ink-400); color: var(--sm-color-text-contrast-dark); }
.swatch-ink-600 { background-color: var(--sm-primitive-color-ink-600); color: var(--sm-color-text-contrast-light); }
.swatch-ink-800 { background-color: var(--sm-primitive-color-ink-800); color: var(--sm-color-text-contrast-light); }
.swatch-ink-900 { background-color: var(--sm-primitive-color-ink-900); color: var(--sm-color-text-contrast-light); }
.swatch-ink-1000 { background-color: var(--sm-primitive-color-ink-1000); color: var(--sm-color-text-contrast-light); }

.swatch-surface-page { background-color: var(--sm-primitive-color-surface-page); color: var(--sm-color-text-contrast-dark); }
.swatch-surface-line { background-color: var(--sm-primitive-color-surface-line); color: var(--sm-color-text-contrast-dark); }
.swatch-surface-code { background-color: var(--sm-primitive-color-surface-code); color: var(--sm-color-text-contrast-dark); }

.swatch-accent-primary { background-color: var(--sm-primitive-color-accent-base); color: var(--sm-color-text-contrast-light); }
.swatch-accent-surface { background-color: var(--sm-primitive-color-accent-surface); color: var(--sm-color-text-contrast-dark); }
.swatch-accent-border { background-color: var(--sm-primitive-color-accent-focus-ring); color: var(--sm-color-text-contrast-dark); }

.swatch-status-pass { background-color: var(--sm-primitive-color-status-pass); color: var(--sm-color-text-contrast-light); }
.swatch-status-pass-surface { background-color: var(--sm-color-feedback-pass-surface); color: var(--sm-color-text-contrast-dark); }

.swatch-status-warn { background-color: var(--sm-primitive-color-status-warn); color: var(--sm-color-text-contrast-dark); }
.swatch-status-warn-surface { background-color: var(--sm-color-feedback-warn-surface); color: var(--sm-color-text-contrast-dark); }
.swatch-status-warn-text { background-color: var(--sm-primitive-color-status-warn-text); color: var(--sm-color-text-contrast-light); }

.swatch-status-red { background-color: var(--sm-primitive-color-status-red); color: var(--sm-color-text-contrast-light); }
.swatch-status-red-surface { background-color: var(--sm-color-feedback-red-surface); color: var(--sm-color-text-contrast-dark); }

.swatch-status-info { background-color: var(--sm-primitive-color-status-info); color: var(--sm-color-text-contrast-light); }
.swatch-status-info-surface { background-color: var(--sm-color-feedback-info-surface); color: var(--sm-color-text-contrast-dark); }

.feedback-bar.feedback-bar-pass { background-color: var(--sm-color-feedback-pass); }
.feedback-bar.feedback-bar-red { background-color: var(--sm-color-feedback-red); }
.feedback-bar.feedback-bar-warn { background-color: var(--sm-color-feedback-warn); }
.feedback-bar.feedback-bar-info { background-color: var(--sm-color-feedback-info); }

.swatch-dot.dot-color-accent { background-color: var(--sm-color-accent); }
.swatch-dot.dot-color-surface-sidebar { background-color: var(--sm-color-surface-sidebar); }
.swatch-dot.dot-color-surface-page { background-color: var(--sm-color-surface-page); }
.swatch-dot.dot-color-text-primary { background-color: var(--sm-color-text-primary); }
.swatch-dot.dot-color-text-secondary { background-color: var(--sm-color-text-secondary); }
.swatch-dot.dot-color-border-default { background-color: var(--sm-color-border-default); }
.swatch-dot.dot-color-surface-fill { background-color: var(--sm-color-surface-fill); }
.swatch-dot.dot-color-feedback-red { background-color: var(--sm-color-feedback-red); }

/* Hola palette swatches */
.swatch-hola-lime { background-color: #DBE64C; color: #2A2A26; }
.swatch-hola-sage { background-color: #485946; color: #FFFFFF; }
.swatch-hola-sand { background-color: #D6C7B0; color: #2A2A26; }
.swatch-hola-forest { background-color: #2C3635; color: #FFFFFF; }
.swatch-hola-kite { background-color: #2A2A26; color: #FFFFFF; }
.swatch-hola-white { background-color: #F6F8ED; color: #2A2A26; }
.swatch-hola-light-sand { background-color: #F1EAD8; color: #2A2A26; }

/* Social template cards */
.social-group-title {
  font-family: var(--sm-type-family-sans);
  font-size: var(--sm-type-scale-600);
  font-weight: var(--sm-type-weight-medium);
  margin-top: var(--sm-space-8);
  margin-bottom: var(--sm-space-4);
  color: var(--sm-color-text-primary);
}
.social-grid {
  margin-bottom: var(--sm-space-8);
}
.social-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sm-space-4);
}
.social-preview-box {
  background-color: var(--sm-color-surface-fill);
  border-radius: var(--sm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 200px;
}
.social-preview-img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}
.social-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-2);
  margin-top: var(--sm-space-3);
}
.social-card-title {
  font-size: var(--sm-type-scale-300);
  font-weight: var(--sm-type-weight-medium);
  margin: 0;
  color: var(--sm-color-text-primary);
}