/* ==========================================================================
   The Blueprint — Skipton Email Design System
   Standalone documentation stylesheet

   Header styles use personal brand tokens from tokens.css.
   All Skipton design values inside .skipton-system reference skipton-tokens.css.
   ========================================================================== */


/* ==========================================================================
   Page chrome tokens — for the documentation site itself, not the Skipton
   email system. These were referenced throughout when patterns were copied
   from the index page. Defined here so the design-system page renders
   correctly without depending on style.css. Email-system tokens live in
   tokens/skipton-tokens.css and are referenced via skipton-tokens scope.
   ========================================================================== */

:root {
  /* Surface chrome — sidebar, header, hover panels on the dark gradient bg */
  --color-surface-base:      rgba(0, 0, 0, 0.25);
  --color-surface-raised:    rgba(0, 0, 0, 0.35);
  --color-surface-overlay:   rgba(255, 255, 255, 0.08);

  /* Text on the page chrome */
  --color-text-primary:      #FFFFFE;
  --color-text-secondary:    rgba(255, 255, 255, 0.75);
  --color-text-tertiary:     rgba(255, 255, 255, 0.55);

  /* Borders — page chrome dividers */
  --color-border-default:    rgba(255, 255, 255, 0.18);
  --color-border-subtle:     rgba(255, 255, 255, 0.08);

  /* Accent hover variant — darker arctic for active/hover states */
  --color-accent-hover:      #5BC5E0;

  /* Misc page chrome */
  --color-white-500:         #FFFFFE;
  --radius-sm:               4px;
  --radius-100:              1em;
  --radius-full:              9999px;
  --transition-default:      0.2s ease;
  --transition-fast:         0.15s ease;

  /* Page-level typography aliases */
  --typography-body-size:        16px;
  --typography-body-size-large:  18px;


  /* ========================================================================
     BLOCK-GAP TIERS — semantic spacing tokens for "container after copy"
     relationships. Use these instead of raw --spacing-* tokens whenever
     a visual block (grid, card group, table, code sample, etc.) appears
     directly under body copy or a heading.

     The tier you pick should reflect the WEIGHT of the block, not the
     specific component — that's what stops drift returning.

     ── --gap-block-heavy   (48px)
        Use for: full-width visual exhibits — multi-column grids,
        large diagrams, the main illustrative artefact of a subsection.
        Examples: .ds-comp-grid, .ds-hero-structure-grid,
                  .ds-structure-diagram

     ── --gap-block-standard (32px)
        Use for: substantial supporting blocks — code samples, note
        callouts, comparison tables, palette/token boards.
        Examples: .ds-code-block, .ds-note-block, .ds-palette-board,
                  .ds-semantic-table-scroll

     ── --gap-block-secondary (24px)
        Use for: smaller blocks closely bound to the copy above —
        rule panels, scale headings, secondary content groups.
        Examples: .ds-rule-panel, .ds-btn-scale-heading

     ── --gap-block-tight   (16px)
        Use for: elements that belong to the SAME visual group as
        what's above — viewport wrappers next to their toggles,
        brand toggles next to their content host.
        Examples: .ds-comp-viewport-wrap, .ds-brand-toggle-wrap

     Rule of thumb: if you'd describe the relationship as "this block
     is the main thing", use HEAVY. If "this block expands on the
     copy", use STANDARD. If "this block belongs with the copy",
     use SECONDARY. If "this is part of a tight visual unit",
     use TIGHT.
     ======================================================================== */
  --gap-block-heavy:     var(--spacing-300);  /* 48px */
  --gap-block-standard:  var(--spacing-200);  /* 32px */
  --gap-block-secondary: var(--spacing-150);  /* 24px */
  --gap-block-tight:     var(--spacing-100);  /* 16px */
}


/* ==========================================================================
   Accessibility — skip-link, universal focus ring, reduced-motion support.
   These three rules cover the WCAG AA gaps that aren't otherwise addressed
   by component-level focus styles or markup landmarks.
   ========================================================================== */

/* Skip-to-main link — visually hidden until focused. First focusable element
   on the page so keyboard users can bypass the long sidebar nav. */
.ds-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: var(--spacing-075) var(--spacing-150);
  background-color: var(--color-accent);
  color: #1E1F29;
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size-default);
  font-weight: var(--typography-weight-black);
  text-decoration: none;
  border-radius: 0 0 var(--radius-075) 0;
  transform: translateY(-100%);
  transition: transform 0.15s ease;
}

.ds-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Universal focus indicator — every native link and button gets a visible
   focus ring against the gradient page background. Component-level overrides
   already exist for picker tiles, viewport toggles, brand toggles, etc.;
   this rule catches everything else (sidebar nav, accordion headers, body
   hyperlinks, footnote links, header / footer demo nav links). */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduced motion — collapse animation / transition durations for users who
   request reduced motion. Smooth scroll fallback to auto. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   CSS Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Offset anchor links below the sticky header */
  scroll-padding-top: var(--ds-header-height);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

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


/* ==========================================================================
   Body Defaults — personal brand tokens
   ========================================================================== */

body {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-regular);
  line-height: var(--typography-lineHeight-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   Header — identical to index.html, uses personal brand tokens
   ========================================================================== */

#header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  /* Opaque white in light mode; dark-mode override below swaps to
     fjord. Either way the header reads cleanly over both the marine
     gradient bg and the .ds-section--light sections. */
  background-color: #FFFFFE;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color var(--transition-default),
              border-color var(--transition-default);
}

html.dark-mode #header {
  background-color: var(--color-fjord-100, #001D2E);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-100) var(--spacing-200);
}

.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo svg {
  height: var(--spacing-300);
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-150);
}

.header-nav-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-150);
}

.header-nav-link {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.header-nav-link:hover {
  color: var(--color-text-primary);
}

.header-cv-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-050) var(--spacing-100);
  background-color: var(--color-accent);
  color: var(--color-black-500);
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.header-cv-btn:hover {
  background-color: var(--color-accent-hover);
}

/* Dark toggle hidden on this page — the design-system page's dark-mode
   styling isn't fully covered yet, so clicking the toggle puts the page
   into a half-styled state that reads as broken. Hidden via display: none
   so it's also out of the tab order. Re-enable when dark mode coverage
   is finished. */
#dark-toggle {
  display: none !important;
}

.header-dark-toggle,
.header-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-200);
  height: var(--spacing-200);
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.header-dark-toggle:hover,
.header-hamburger:hover {
  background-color: var(--color-surface-overlay);
}

.header-dark-toggle svg,
.header-hamburger svg {
  width: var(--spacing-150);
  height: var(--spacing-150);
}

html.dark-mode .site-logo .cls-1 {
  fill: var(--color-white-500);
}

/* Theme icons */
.icon-moon { display: block; }
.icon-sun  { display: none;  }

html.dark-mode .icon-moon { display: none;  }
html.dark-mode .icon-sun  { display: block; }

/* Hamburger icons */
.icon-hamburger { display: block; }
.icon-close     { display: none;  }

#header.nav-open .icon-hamburger { display: none;  }
#header.nav-open .icon-close     { display: block; }

.header-hamburger {
  display: none;
}


/* --- Header mobile --- */

@media (max-width: 767px) {
  .header-inner {
    padding: var(--spacing-100) var(--spacing-150);
  }

  .header-logo svg {
    height: var(--spacing-200);
  }

  .header-hamburger {
    display: flex;
  }

  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-100) var(--spacing-150) var(--spacing-150);
    background-color: var(--color-surface-base);
    border-bottom: 1px solid var(--color-border-subtle);
    gap: var(--spacing-100);
    transition: background-color var(--transition-default);
  }

  #header.nav-open .header-nav {
    display: flex;
  }

  .header-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .header-nav-link {
    display: block;
    padding: var(--spacing-075) 0;
    font-size: var(--typography-body-size-large);
  }

  .header-cv-btn {
    align-self: flex-start;
  }
}


/* ==========================================================================
   Layout variables
   Header height = top padding + bottom padding + logo + border
   ========================================================================== */

:root {
  --ds-sidebar-width: 280px;
  --ds-header-height: calc(var(--spacing-100) * 2 + var(--spacing-300) + 1px);
}

@media (max-width: 767px) {
  :root {
    --ds-header-height: calc(var(--spacing-100) * 2 + var(--spacing-200) + 1px);
  }
}


/* ==========================================================================
   Two-column layout
   ========================================================================== */

.ds-layout {
  display: flex;
  align-items: flex-start;
}

.ds-sidebar {
  position: fixed;
  top: var(--ds-header-height);
  left: 0;
  width: var(--ds-sidebar-width);
  height: calc(100vh - var(--ds-header-height));
  overflow-y: auto;
  /* Desktop: transparent so the marine page gradient shows through.
     Mobile drawer state overrides this to fjord-100 inside the
     max-width: 992px block (the drawer slides over scrolling content,
     so it needs a solid surface for nav-link contrast). */
  background-color: transparent;
  border-right: 1px solid var(--color-border-subtle);
  z-index: var(--z-raised);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
}

.ds-sidebar::-webkit-scrollbar {
  width: 4px;
}

.ds-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-border-default);
  border-radius: var(--radius-full);
}

#main-content {
  margin-left: var(--ds-sidebar-width);
  padding-top: var(--ds-header-height);
  flex: 1;
  min-width: 0;
}


/* ==========================================================================
   Sidebar brand block
   ========================================================================== */

.ds-sidenav-brand {
  padding: var(--spacing-150);
  border-bottom: 2px solid var(--color-border-subtle);
}

.ds-sidenav-brand-label {
  display: block;
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--spacing-025);
}

.ds-sidenav-brand-title {
  font-family: var(--typography-family-display);
  font-size: var(--typography-h5-size);
  font-weight: var(--typography-weight-medium);
  line-height: var(--typography-lineHeight-tight);
  color: var(--color-text-primary);
}

.ds-sidenav-brand-sub {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-025);
}


/* ==========================================================================
   Side navigation
   ========================================================================== */

.ds-sidenav {
  padding: var(--spacing-075) 0 var(--spacing-200);
}

.ds-sidenav-list,
.ds-sidenav-sublist {
  display: flex;
  flex-direction: column;
  font-weight: var(--typography-weight-medium);
}

.ds-sidenav-item {
  font-weight: bold;
}

/* Top-level link */
.ds-sidenav-link {
  display: block;
  padding: var(--spacing-075) var(--spacing-150);
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-text-primary);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color var(--transition-default), background-color var(--transition-default);
}

.ds-sidenav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
}

.ds-sidenav-link.is-active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

/* Sub-item link */
.ds-sidenav-sublink {
  display: block;
  padding: var(--spacing-050) var(--spacing-200);
  font-family: var(--typography-family-body);
  font-size: var(--typography-small-size);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color var(--transition-default);
}

.ds-sidenav-sublink:hover {
  color: var(--color-text-primary);
}


/* ==========================================================================
   Section placeholders
   ========================================================================== */

.ds-section {
  /* Section break — vertical breathing room between major sections.
     padding-block is the section-break value (top + bottom of every
     major .ds-section). padding-inline keeps the content margins
     from the section edges. Consolidating to padding-block / -inline
     instead of margin so spacing belongs to the section container,
     not to fragile margin stacks between siblings. */
  padding-block: var(--spacing-600);
  padding-inline: var(--spacing-400);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ds-placeholder-title {
  font-family: var(--typography-family-display);
  font-size: var(--typography-h2-size);
  font-weight: var(--typography-weight-medium);
  line-height: var(--typography-h2-lineHeight);
  color: var(--color-text-primary);
}

.ds-placeholder-title + * {
  /* Migrated from .ds-placeholder-title margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-100);
}

.ds-placeholder-note {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  color: var(--color-text-tertiary);
}


/* ==========================================================================
   Page gradient — marine background applied to the full layout below the header
   .ds-layout has .skipton-system class so gradient tokens resolve correctly
   ========================================================================== */

.ds-layout.skipton-system {
  background: linear-gradient(
    var(--color-email-hero-gradient-1-angle),
    var(--color-email-hero-gradient-1-start),
    var(--color-email-hero-gradient-1-mid),
    var(--color-email-hero-gradient-1-end)
  );
  background-attachment: fixed;
  min-height: 100vh;
}


/* ==========================================================================
   Sidebar — solid dark surface so contents stay readable on both desktop
   (where it sits beside the gradient page) and mobile (where it slides over
   scrolling page content as a drawer).
   ========================================================================== */

.ds-sidebar.skipton-system {
  background-color: transparent;
  border-right: 2px solid var(--color-border-subtle);
}

.ds-sidenav-brand-title {
  color: var(--color-text-onLight-subtle);
  font-weight: var(--typography-weight-bold);
}

.ds-sidenav-brand-sub {
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
}


/* ==========================================================================
   Side nav text — white on gradient
   ========================================================================== */

.ds-sidebar.skipton-system .ds-sidenav-link {
  color: var(--color-text-onLight-subtle);
}

.ds-sidebar.skipton-system .ds-sidenav-link:hover {
  color: var(--color-text-onLight-subtle);
  background-color: transparent;
}

.ds-sidebar.skipton-system .ds-sidenav-link.is-active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background-color: rgba(0, 0, 0, 0.1)
}

.ds-sidebar.skipton-system .ds-sidenav-sublink {
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
}

.ds-sidebar.skipton-system .ds-sidenav-sublink:hover {
  color: var(--color-text-onLight-subtle);
  opacity: 1;
}


/* ==========================================================================
   Subheadings — Roboto Black inside .skipton-system
   ========================================================================== */

.skipton-system h2,
.skipton-system h3 {
  font-family: var(--typography-family-body);
  font-weight: var(--typography-weight-black);
}


/* ==========================================================================
   Placeholder sections — white text on gradient
   ========================================================================== */

#main-content .ds-placeholder-title {
  color: var(--color-text-onLight-subtle);
}

#main-content .ds-placeholder-note {
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
}

#main-content .ds-section {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}


/* ==========================================================================
   Light section variant — full white background, dark text.
   Used to bring focus and breathing room to high-density reference content
   (e.g. the colour and surfaces system).
   ========================================================================== */

#main-content .ds-section--light {
  background-color: #FFFFFE;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* In the light section, the arctic accent loses contrast against white.
   Override --color-accent to marine-500 so every place that uses the
   accent token (headline labels, accordion borders, active states,
   surface card names, mechanism titles, contrast picker active border,
   typeface notes etc.) automatically picks up the higher-contrast brand
   blue. */
.ds-section--light {
  --color-accent: var(--color-marine-500);
}

/* Type — flip white-on-dark to dark-on-light */
.ds-section--light .ds-section-title,
.ds-section--light .ds-section-body,
.ds-section--light .ds-subsection-title,
.ds-section--light .ds-subsection-body,
.ds-section--light .ds-tier-title,
.ds-section--light .ds-tier-example,
.ds-section--light .ds-tier-desc,
.ds-section--light .ds-surface-card-mode-label,
.ds-section--light .ds-surface-card-token,
.ds-section--light .ds-surface-card-hex,
.ds-section--light .ds-token-table,
.ds-section--light .ds-note-block p,
.ds-section--light .ds-semantic-accordion-header,
.ds-section--light .ds-btn-card-body,
.ds-section--light .ds-btn-scale-label,
.ds-section--light .ds-icon-usage {
  color: var(--color-text-onLight-strong);
}

/* Subtle text retains lower contrast against white */
.ds-section--light .ds-section-body,
.ds-section--light .ds-subsection-body,
.ds-section--light .ds-tier-desc,
.ds-section--light .ds-surface-card-mode-label,
.ds-section--light .ds-surface-card-hex,
.ds-section--light .ds-note-block p,
.ds-section--light .ds-btn-card-body,
.ds-section--light .ds-btn-scale-label,
.ds-section--light .ds-icon-usage {
  opacity: 0.75;
}

/* Primitive palette — drop the white container chrome since the section is
   already white. The board now sits flush. */
.ds-section--light .ds-palette-board {
  background-color: transparent;
  padding: 0;
  margin-top: var(--gap-block-standard);
}

/* Tier boxes, surface cards, note blocks, token tables, code blocks,
   button anatomy/variant cards — replace the rgba-black overlay with a
   soft light-grey panel that reads correctly on the white section. */
.ds-section--light .ds-tier-box,
.ds-section--light .ds-surface-card,
.ds-section--light .ds-note-block,
.ds-section--light .ds-token-table-wrap,
.ds-section--light .ds-contrast-table-wrap,
.ds-section--light .ds-code-block,
.ds-section--light .ds-btn-card {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Hyperlink surface previews — on a white section the rgba-white
   "light surface" preview becomes invisible, so swap to a solid white
   with a hairline border. The dark preview switches to a solid
   midnight surface that matches the real onDark context. */
.ds-section--light .ds-hyperlink-swatch--light {
  background-color: #FFFFFE;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.ds-section--light .ds-hyperlink-swatch--dark {
  background-color: var(--color-fjord-100);
}

/* Surface Treatment subsection — the "Alt" treatment preview lives on a
   dark surface. The rgba-black overlay is too light on a white section,
   so swap to a solid dark surface. */
.ds-section--light .ds-btn-surface-dark {
  background-color: var(--color-fjord-100);
}

/* Default button specimens (Variants subsection + Surface Treatment Default)
   sat in white inset containers — redundant now the section bg is white.
   Strip the chrome so the buttons sit directly on the card panel. */
.ds-section--light .ds-btn-swatch-light {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* Visual examples divider — the rgba-white border was invisible on the
   light panel bg. Flip to rgba-black. */
.ds-section--light .ds-btn-example {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Token table internals — keep zebra striping subtle on white */
.ds-section--light .ds-token-table thead tr {
  background-color: rgba(0, 0, 0, 0.06);
}

.ds-section--light .ds-token-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Token swatches — flip the hairline to dark so it sits on white */
.ds-section--light .ds-token-swatch {
  border-color: rgba(0, 0, 0, 0.15);
}

/* Surface-card swatches likewise */
.ds-section--light .ds-surface-card-swatch {
  border-color: rgba(0, 0, 0, 0.1);
}

/* Semantic accordion header on light surface */
.ds-section--light .ds-semantic-accordion-header {
  background-color: rgba(0, 0, 0, 0.04);
}

.ds-section--light .ds-semantic-accordion-header:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

/* Contrast subsection on light surface */
.ds-section--light .ds-contrast-pick {
  border-color: rgba(0, 0, 0, 0.12);
}

/* Selected surface detail container — give it a light hairline border so
   the panel reads as a distinct container even when the chosen surface is
   itself light (white, stone, pale rider, arctic). Without this the
   container blurs into the section's white background. */
.ds-section--light .ds-contrast-detail {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.ds-section--light .ds-contrast-filter {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text-onLight-strong);
}

.ds-section--light .ds-contrast-legend,
.ds-section--light .ds-contrast-summary {
  color: var(--color-text-onLight-strong);
  opacity: 0.75;
}

.ds-section--light .ds-contrast-matrix-summary {
  color: var(--color-text-onLight-strong);
}

/* Dark-mode subsection mechanism cards on light surface */
.ds-section--light .ds-mechanism-card {
  background-color: rgba(0, 0, 0, 0.04);
}

.ds-section--light .ds-mechanism-body {
  color: var(--color-text-onLight-strong);
  opacity: 0.75;
}


/* ==========================================================================
   Introduction section
   ========================================================================== */

/* Hero block */

.ds-intro-label {
  display: block;
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--spacing-100);
}

.ds-intro-title {
  font-family: var(--typography-family-display);
  font-size: var(--typography-h1-size-large);
  font-weight: var(--typography-weight-black);
  line-height: 1.1em;
  color: var(--color-text-onLight-subtle);
}

.ds-intro-subtitle {
  font-size: var(--typography-body-size-leading);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.8;
  margin-top: var(--spacing-200);
  max-width: 600px;
}

.ds-intro-rule {
  width: 60px;
  height: 3px;
  background-color: var(--color-accent);
  margin: var(--spacing-300) 0;
}


/* Case study meta — credit reel anchoring ownership */

.ds-case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-200);
  margin-bottom: var(--spacing-300);
  padding: var(--spacing-150) var(--spacing-200);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
}

.ds-case-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050);
}

.ds-case-meta-label {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ds-case-meta-value {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size-default);
  line-height: var(--typography-body-lineHeight);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
}


/* Three content blocks */

.ds-intro-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-200);
  margin-bottom: var(--spacing-300);
}

.ds-intro-block {
  background-color: rgba(0, 0, 0, 0.15);
  padding: var(--spacing-200);
  border-radius: var(--radius-075);
}

.ds-intro-block-heading {
  font-family: var(--typography-family-display);
  font-size: var(--typography-h5-size-large);
  font-weight: var(--typography-weight-black);
  line-height: var(--typography-h5-lineHeight);
  color: var(--color-accent);
}

.ds-intro-block-heading + * {
  /* Migrated from .ds-intro-block-heading margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-100);
}

.ds-intro-block-body {
  font-size: var(--typography-body-size-default);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
}


/* Metrics row */

.ds-intro-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-200);
  margin-top: var(--spacing-300);
}

.ds-intro-metric {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050);
}

.ds-intro-metric-number {
  display: block;
  font-family: var(--typography-family-condensed);
  font-size: var(--typography-h1-size-large);
  font-weight: var(--typography-weight-black);
  line-height: 1.1em;
  color: var(--color-accent);
}

.ds-intro-metric-label {
  display: block;
  font-size: var(--typography-body-size-default);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.8;
}


/* Quick navigation — three-card TL;DR sitting at the end of the Introduction
   so a reader can route directly into Foundations / Components / Decisions
   without scrolling. Each card is a clickable anchor. */

.ds-intro-quicknav {
  margin-top: var(--spacing-400);
  padding-top: var(--spacing-300);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-intro-quicknav-label {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-150);
}

.ds-intro-quicknav-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-150);
}

.ds-intro-quicknav-item {
  display: block;
  padding: var(--spacing-200);
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-075);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ds-intro-quicknav-item:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.ds-intro-quicknav-item-label {
  display: block;
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size-default);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
}

.ds-intro-quicknav-item-label + * {
  /* Migrated from .ds-intro-quicknav-item-label margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-075);
}

.ds-intro-quicknav-item-desc {
  display: block;
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
}


/* Introduction section responsive */

@media (max-width: 992px) {
  .ds-intro-blocks,
  .ds-intro-metrics,
  .ds-intro-quicknav-items {
    grid-template-columns: 1fr;
  }
  .ds-case-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ds-case-meta {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Token Architecture section
   ========================================================================== */

/* Section header */

.ds-section-header {
  /* No bottom padding — the gap to the first subsection is owned
     by .ds-subsection { margin-top: spacing-600 }. Avoids stacking
     two spacings at the same boundary. */
}

.ds-section-label {
  display: block;
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--spacing-100);
}

.ds-section-title {
  font-size: var(--typography-h2-size-medium);
  color: var(--color-text-onLight-subtle);
}

.ds-section-body {
  font-size: var(--typography-body-size-default);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
  margin-top: var(--spacing-150);
  max-width: 700px;
}


/* Three-tier diagram */

.ds-tier-diagram {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
  margin: var(--spacing-300) 0;
}

.ds-tier-box {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-200);
  border-radius: var(--radius-075);
}

.ds-tier-label {
  display: block;
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--spacing-075);
}

.ds-tier-title {
  font-size: var(--typography-h5-size-large);
  color: var(--color-text-onLight-subtle);
}

.ds-tier-title + * {
  /* Migrated from .ds-tier-title margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-075);
}

.ds-tier-example {
  display: block;
  font-family: monospace;
  font-size: var(--typography-small-size);
  color: var(--color-text-onLight-subtle);
  opacity: 0.9;
  word-break: break-all;
  margin-bottom: var(--spacing-075);
}

.ds-tier-desc {
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.8;
}

.ds-tier-arrow {
  font-size: var(--typography-h2-size-medium);
  color: var(--color-accent);
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

.ds-tier-arrow--v {
  display: none;
}


/* Subsections */

.ds-subsection {
  /* Subsection break — matches the section-break value (96px).
     Sections still read as distinct because the boundary doubles
     up (96px padding-bottom on prior section + 1px border + 96px
     padding-top on next section = ~193px), so the hierarchy holds. */
  margin-top: var(--spacing-600);
}

.ds-subsection-title {
  font-size: var(--typography-h3-size-large);
  color: var(--color-text-onLight-subtle);
  /* No margin-bottom — the following body element carries the
     inter-element gap via margin-top. Keeps spacing computed
     against the body's consistent font-size rather than the
     title's larger one (em-based tokens diverge otherwise). */
}

.ds-subsection-body {
  font-size: var(--typography-body-size-default);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
  max-width: 700px;
  /* Gap above the body — 24px against body font-size, mirroring
     the .ds-section-body pattern. */
  margin-top: var(--spacing-150);
}

.ds-subsection-body + .ds-subsection-body {
  /* Paragraph-to-paragraph spacing — tighter than title-to-body. */
  margin-top: var(--spacing-100);
}


/* Code block */

.ds-code-block {
  background-color: rgba(0, 0, 0, 0.3);
  padding: var(--spacing-150);
  border-radius: var(--radius-075);
  font-family: monospace;
  font-size: var(--typography-small-size);
  color: var(--color-text-onLight-subtle);
  margin-top: var(--gap-block-standard);
  overflow-x: auto;
  white-space: pre;
}


/* Token tables */

.ds-token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--typography-small-size);
  color: var(--color-text-onLight-subtle);
}

.ds-token-table thead tr {
  background-color: rgba(0, 0, 0, 0.3);
}

.ds-token-table th,
.ds-token-table td {
  padding: var(--spacing-075) var(--spacing-150);
  text-align: left;
  vertical-align: middle;
}

.ds-token-table th {
  font-weight: var(--typography-weight-black);
  font-size: var(--typography-label-size);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ds-token-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.1);
}

.ds-token-table code {
  font-family: monospace;
}

.ds-token-swatch {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-025);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}


/* Semantic Tokens accordion */

.ds-semantic-accordion {
  /* STANDARD tier — substantial supporting block. Same 32px as
     spacing-200, but semantically labeled to stay tied to the
     block-gap system. */
  margin-top: var(--gap-block-standard);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-075);
}

.ds-semantic-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: var(--radius-075);
  padding: var(--spacing-100) var(--spacing-150);
  cursor: pointer;
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-text-onLight-subtle);
  text-align: left;
}

.ds-semantic-accordion-header:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.ds-semantic-accordion-toggle {
  font-size: var(--typography-body-size);
  color: var(--color-accent);
  font-weight: var(--typography-weight-black);
  flex-shrink: 0;
  margin-left: var(--spacing-100);
}

.ds-semantic-accordion-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--transition-default);
  overflow: hidden;
}

.ds-semantic-accordion-body.is-closed {
  grid-template-rows: 0fr;
}

.ds-semantic-accordion-inner {
  overflow: hidden;
}

.ds-semantic-table-scroll {
  margin-top: var(--gap-block-standard);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  overflow: hidden;
}

.ds-token-swatch-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-050);
  vertical-align: middle;
}

.ds-token-swatch-chip {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}


/* Token Architecture responsive */

@media (max-width: 992px) {
  .ds-tier-diagram {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .ds-tier-arrow--h {
    display: none;
  }

  .ds-tier-arrow--v {
    display: block;
    text-align: center;
    padding: var(--spacing-050) 0;
  }

  .ds-chain-block {
    max-width: 100%;
  }
}


/* ==========================================================================
   Colour and Surfaces section
   ========================================================================== */

/* Primitive palette — Atlassian-style.
   One white container holds every family. Families are columns inside.
   Each shade is a flush horizontal strip with the colour filling the row,
   the token name visible by default, and the hex revealed on click. */

.ds-palette-board {
  background-color: #FFFFFE;
  border-radius: var(--radius-075);
  padding: var(--spacing-300);
  margin-top: var(--spacing-150);
}

.ds-palette-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-300);
}

.ds-palette-family {
  /* No card chrome — the white board provides the frame */
}

.ds-palette-family-name {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  color: #1E1F29;     /* midnight on white */
  margin: 0 0 var(--spacing-100) 0;
}

.ds-palette-stops {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-050);
  overflow: hidden;   /* clips strip corners to the radius */
}

/* Each shade is a button-styled accordion trigger */
.ds-palette-stop {
  display: block;
  width: 100%;
  border: none;
  padding: 0.65em var(--spacing-150);
  text-align: left;
  font-family: var(--typography-family-body);
  cursor: pointer;
  /* background-color is set inline per-shade */
  color: #FFFFFE;     /* default: white text for dark backgrounds */
  transition: padding 0.15s ease;
}

.ds-palette-stop:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.ds-palette-stop-name {
  display: block;
  font-family: monospace;
  font-size: 14.4px;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
}

.ds-palette-stop-hex {
  display: none;       /* hidden until accordion expands */
  font-family: monospace;
  font-size: 14.4px;
  line-height: 1.4;
  margin-top: 4px;
  opacity: 0.85;
  color: inherit;
}

/* Thin border for white-family stops so they don't blend into the
   white container background. Attribute selectors target by inline colour. */
.ds-palette-stop[style*="#FFFFFE"],
.ds-palette-stop[style*="#FAFAFA"] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Accordion-expanded state — reveal the hex underneath the name */
.ds-palette-stop[aria-expanded="true"] {
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}

.ds-palette-stop[aria-expanded="true"] .ds-palette-stop-hex {
  display: block;
}

/* Light-surface variant — dark text on light colour blocks
   (arctic, paleRider, stone, white) */
.ds-palette-stop--light {
  color: #1E1F29;
}

.ds-palette-stop--light .ds-palette-stop-hex {
  opacity: 0.7;
}


/* Surface tokens — one card per surface, two mode columns inside each card */

.ds-surface-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-200);
  margin-top: var(--gap-block-heavy);
}

.ds-surface-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
}

.ds-surface-card-name {
  display: block;
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
}

.ds-surface-card-name + * {
  /* Migrated from .ds-surface-card-name margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-150);
}

.ds-surface-card-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-150);
}

.ds-surface-card-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-surface-card-mode-label {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-025, 2px);
}

.ds-surface-card-swatch {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  border-radius: var(--radius-050);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: var(--spacing-075);
}

.ds-surface-card-token {
  font-family: monospace;
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  line-height: 1.4;
  word-break: break-all;
}

.ds-surface-card-primitive {
  font-family: monospace;
  font-size: 14.4px;
  color: var(--color-accent);
  opacity: 0.85;
}

.ds-surface-card-hex {
  font-family: monospace;
  font-size: 14.4px;
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
}


/* Note block */

.ds-note-block {
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-150);
  border-radius: var(--radius-075);
  margin-top: var(--gap-block-standard);
}

.ds-note-block p {
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
}

.ds-note-block p + p {
  margin-top: var(--spacing-100);
}


/* Contrast grid */

.ds-contrast-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-075);
  background-color: rgba(0, 0, 0, 0.2);
}

.ds-contrast-table {
  border-collapse: collapse;
  width: 100%;
}

.ds-contrast-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: rgba(0, 40, 75, 0.97);
  min-width: 160px;
  padding: var(--spacing-075);
}

.ds-contrast-col-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: rgba(0, 40, 75, 0.97);
  min-width: 110px;
  padding: var(--spacing-075);
  vertical-align: bottom;
  text-align: center;
  color: var(--color-text-onLight-subtle);
}

.ds-contrast-header-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-025);
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0 auto var(--spacing-050);
}

.ds-contrast-header-token {
  display: block;
  font-family: monospace;
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  word-break: break-all;
}

.ds-contrast-header-hex {
  display: block;
  font-family: monospace;
  font-size: 14.4px;
  color: var(--color-text-onLight-subtle);
  opacity: 0.7;
  margin-top: 2px;
}

.ds-contrast-row-header {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 35, 65, 0.97);
  padding: var(--spacing-075);
  min-width: 160px;
  vertical-align: middle;
  color: var(--color-text-onLight-subtle);
}

.ds-contrast-row-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-025);
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: var(--spacing-050);
}

.ds-contrast-row-token {
  display: block;
  font-family: monospace;
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  word-break: break-all;
}

.ds-contrast-row-hex {
  display: block;
  font-family: monospace;
  font-size: 14.4px;
  color: var(--color-text-onLight-subtle);
  opacity: 0.7;
  margin-top: 2px;
}

.ds-contrast-cell {
  padding: var(--spacing-075);
  min-width: 110px;
  text-align: center;
  vertical-align: middle;
  transition: opacity var(--transition-default);
}

.ds-contrast-ratio {
  display: block;
  font-family: monospace;
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  margin-bottom: 4px;
}

.ds-contrast-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-025);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-text-onLight-subtle);
  line-height: 1.4;
  white-space: nowrap;
}

.ds-contrast-badge--aaa      { background-color: rgba(0, 128, 0, 0.6); }
.ds-contrast-badge--aa       { background-color: rgba(0, 100, 0, 0.5); }
.ds-contrast-badge--aa-large { background-color: rgba(180, 120, 0, 0.5); }
.ds-contrast-badge--fail     { background-color: rgba(180, 0, 0, 0.5); }

/* Filter controls */

.ds-contrast-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-075);
  margin-top: var(--spacing-150);
}

.ds-contrast-filter {
  padding: var(--spacing-050) var(--spacing-100);
  border-radius: var(--radius-025);
  border: none;
  cursor: pointer;
  font-family: var(--typography-family-body);
  font-size: var(--typography-small-size);
  font-weight: var(--typography-weight-black);
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--color-text-onLight-subtle);
  transition: background-color var(--transition-default), color var(--transition-default);
}

.ds-contrast-filter.is-active {
  background-color: var(--color-accent);
  color: var(--color-black-500);
}

/* Legend */

.ds-contrast-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-150);
  margin-top: var(--spacing-200);
  font-size: var(--typography-small-size);
  color: var(--color-text-onLight-subtle);
  opacity: 0.8;
}

.ds-contrast-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-050);
}

/* Summary */

.ds-contrast-summary {
  margin-top: var(--spacing-100);
  font-size: var(--typography-small-size);
  color: var(--color-text-onLight-subtle);
  opacity: 0.8;
}


/* ==========================================================================
   Contrast surface-picker — primary interaction model
   ========================================================================== */

/* Surface picker — WAI-ARIA tablist of selectable surfaces */
.ds-contrast-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-075);
  margin-top: var(--spacing-200);
  margin-bottom: var(--spacing-150);
}

.ds-contrast-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: var(--spacing-100) var(--spacing-150);
  padding-right: calc(var(--spacing-150) + 18px); /* leave space for chevron */
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-075);
  cursor: pointer;
  text-align: left;
  font-family: var(--typography-family-body);
  min-height: 64px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  /* background-color and color set inline per surface */
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Chevron indicator on each pick — signals these are interactive
   and that clicking reveals additional content below. */
.ds-contrast-pick::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--spacing-100);
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-65%) rotate(135deg);
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ds-contrast-pick:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.ds-contrast-pick:hover::after {
  opacity: 0.95;
  transform: translateY(-30%) rotate(135deg);
}

.ds-contrast-pick:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ds-contrast-pick.is-active {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.ds-contrast-pick.is-active::after {
  opacity: 1;
  /* Active arrow inverts — points up toward the detail panel above */
  transform: translateY(-35%) rotate(-45deg);
}

.ds-contrast-pick-name {
  font-family: monospace;
  font-size: 14.4px;
  font-weight: 500;
}

.ds-contrast-pick-hex {
  font-family: monospace;
  font-size: 14.4px;
}


/* Detail panel — selected surface plus its full pairings */
.ds-contrast-detail {
  border-radius: var(--radius-075);
  overflow: hidden;
  margin-bottom: var(--spacing-200);
}

.ds-contrast-detail:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ds-contrast-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-200);
  padding: var(--spacing-200);
  /* background-color and color set inline per surface */
}

.ds-contrast-detail-name-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-contrast-detail-eyebrow {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.ds-contrast-detail-name {
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: inherit;
}

.ds-contrast-detail-hex {
  font-family: monospace;
  font-size: 14.4px;
  color: inherit;
}

.ds-contrast-detail-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-200);
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  color: inherit;
}

.ds-contrast-detail-counts strong {
  font-weight: 700;
  font-size: 16px;
  margin-right: 4px;
}

.ds-contrast-detail-warn {
  color: #FFB870;
}


/* Pairings — each row demonstrates one text/headline on the selected surface */
/* On desktop the 10 pairings split into 2 columns (5 each). Using CSS Grid
   with explicit rows + column auto-flow so each row's height is set by the
   taller of its two pairings — both columns always end at the same point. */
.ds-contrast-detail-pairings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}

.ds-contrast-pairing {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--spacing-150);
  padding: var(--spacing-075) var(--spacing-200) var(--spacing-150);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--typography-family-body);
  /* background-color and color set inline */
}

/* Vertical divider between the two columns — applied to the first 5 pairings
   (column 1) via :nth-child so it extends through any extra stretched height. */
.ds-contrast-detail-pairings .ds-contrast-pairing:nth-child(-n+5) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ds-contrast-pairing-sample {
  font-family: var(--typography-family-body);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}


/* When a pairing fails (ratio < 3:1), shift the metadata text to a
   surface-context-aware red so the token name, hex, and ratio stay
   readable even when the sample 'Aa' has dropped to near-zero contrast.
   Two reds — onLight (#7F1D1D dark red) and onDark (#FEE2E2 pale red) —
   mirror the system's onLight/onDark pattern. */
.ds-contrast-pairing[data-result="fail"][data-context="light"] .ds-contrast-pairing-token,
.ds-contrast-pairing[data-result="fail"][data-context="light"] .ds-contrast-pairing-hex,
.ds-contrast-pairing[data-result="fail"][data-context="light"] .ds-contrast-pairing-ratio {
  color: #450A0A;
}

.ds-contrast-pairing[data-result="fail"][data-context="dark"] .ds-contrast-pairing-token,
.ds-contrast-pairing[data-result="fail"][data-context="dark"] .ds-contrast-pairing-hex,
.ds-contrast-pairing[data-result="fail"][data-context="dark"] .ds-contrast-pairing-ratio {
  color: #FEE2E2;
}

.ds-contrast-pairing-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-contrast-pairing-token {
  font-family: monospace;
  font-size: 14.4px;
  font-weight: 500;
}

.ds-contrast-pairing-hex {
  font-family: monospace;
  font-size: 14.4px;
  opacity: 0.7;
}

.ds-contrast-pairing-result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.ds-contrast-pairing-ratio {
  font-family: monospace;
  font-size: 14.4px;
  font-weight: 500;
}

.ds-contrast-pairing-locked {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}


/* Full matrix disclosure */
.ds-contrast-matrix {
  margin-top: var(--spacing-200);
}

.ds-contrast-matrix-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100) var(--spacing-150);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-050);
  color: var(--color-text-onLight-subtle);
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}

.ds-contrast-matrix-summary::-webkit-details-marker {
  display: none;
}

.ds-contrast-matrix-summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
  text-align: center;
}

.ds-contrast-matrix[open] .ds-contrast-matrix-summary::before {
  content: "−";
}

.ds-contrast-matrix-summary:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.ds-contrast-matrix-summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ds-contrast-matrix-body {
  margin-top: var(--spacing-150);
}


/* Legend annotation icon */
.ds-contrast-annotation-icon {
  display: inline-block;
  font-size: 16px;
  margin-right: 2px;
  color: var(--color-accent);
}


/* Surface-picker + detail responsive — single-column at narrow viewports */
@media (max-width: 992px) {
  .ds-contrast-picker {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  /* Single column at narrow viewports */
  .ds-contrast-detail-pairings {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  /* Drop the vertical divider on the (now-only) column */
  .ds-contrast-detail-pairings .ds-contrast-pairing:nth-child(-n+5) {
    border-right: none;
  }

  .ds-contrast-pairing {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "sample meta"
      "sample result";
    gap: var(--spacing-075) var(--spacing-150);
  }

  .ds-contrast-pairing-sample {
    grid-area: sample;
    font-size: 24px;
  }

  .ds-contrast-pairing-meta {
    grid-area: meta;
  }

  .ds-contrast-pairing-result {
    grid-area: result;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-075);
  }

  .ds-contrast-pairing-locked {
    width: 100%;
    margin-top: 0;
  }

  .ds-contrast-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-100);
  }
}


/* Mobile contrast cards — hidden on desktop */

.ds-contrast-cards {
  display: none;
}

.ds-contrast-card {
  border-radius: var(--radius-075);
  overflow: hidden;
}

.ds-contrast-card-header {
  padding: var(--spacing-100) var(--spacing-150);
  background-color: rgba(0, 0, 0, 0.3);
}

.ds-contrast-card-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
}

.ds-contrast-card-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-025);
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.ds-contrast-card-header-name {
  display: block;
  font-family: monospace;
  font-size: var(--typography-body-size-default);
  font-weight: var(--typography-weight-black);
}

.ds-contrast-card-header-hex {
  display: block;
  font-family: monospace;
  font-size: var(--typography-small-size);
  margin-top: 2px;
}

.ds-contrast-card-body {
  padding: var(--spacing-100);
}

.ds-contrast-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-075) var(--spacing-100);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity var(--transition-default);
}

.ds-contrast-card-row:last-child {
  border-bottom: none;
}

.ds-contrast-card-row-left {
  flex: 1;
  min-width: 0;
  margin-right: var(--spacing-100);
}

.ds-contrast-card-row-token {
  display: block;
  font-family: monospace;
  font-size: var(--typography-small-size);
}

.ds-contrast-card-row-hex {
  display: block;
  font-family: monospace;
  font-size: 14.4px;
  opacity: 0.75;
  margin-top: 2px;
}

.ds-contrast-card-row-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-075);
  flex-shrink: 0;
}

.ds-contrast-card-row-ratio {
  font-family: monospace;
  font-size: var(--typography-body-size-default);
  font-weight: var(--typography-weight-black);
  white-space: nowrap;
}


/* Dark mode mechanism cards */

.ds-mechanism-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-150);
}

.ds-mechanism-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
}

.ds-mechanism-title {
  display: block;
  font-family: monospace;
  font-size: var(--typography-body-size-default);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
}

.ds-mechanism-title + * {
  /* Migrated from .ds-mechanism-title margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-100);
}

.ds-mechanism-body {
  font-size: var(--typography-body-size-default);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
}


/* Colour and Surfaces responsive */

@media (max-width: 992px) {
  .ds-mechanism-grid {
    grid-template-columns: 1fr;
  }

  .ds-semantic-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-semantic-table-scroll .ds-token-table {
    min-width: 600px;
  }
}

/* Mobile font-size minimum — 14.4px floor for all sub-threshold text at ≤992px */
@media (max-width: 992px) {
  .ds-sidenav-brand-sub,
  .ds-intro-label,
  .ds-section-label,
  .ds-tier-label,
  .ds-tier-example,
  .ds-tier-desc,
  .ds-code-block,
  .ds-token-table,
  .ds-token-table th,
  .ds-palette-family-name,
  .ds-surface-card-name,
  .ds-surface-card-mode-label,
  .ds-surface-card-token,
  .ds-surface-card-primitive,
  .ds-surface-card-hex,
  .ds-note-block p,
  .ds-contrast-header-token,
  .ds-contrast-header-hex,
  .ds-contrast-row-token,
  .ds-contrast-row-hex,
  .ds-contrast-ratio,
  .ds-contrast-badge,
  .ds-contrast-filter,
  .ds-contrast-legend,
  .ds-contrast-summary,
  .ds-contrast-card-header-hex,
  .ds-contrast-card-row-token,
  .ds-contrast-card-row-hex,
  .ds-sidenav-sublink {
    font-size: 14.4px;
  }
}

@media (max-width: 992px) {
  .ds-surface-grid {
    grid-template-columns: 1fr;
  }

  /* Contrast grid — swap table for cards */
  .ds-contrast-table-wrap {
    display: none;
  }

  .ds-contrast-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-150);
  }

  /* 14.4px minimum throughout mobile card layout */
  .ds-contrast-cards .ds-contrast-card-header-name,
  .ds-contrast-cards .ds-contrast-card-header-hex,
  .ds-contrast-cards .ds-contrast-card-row-token,
  .ds-contrast-cards .ds-contrast-card-row-hex,
  .ds-contrast-cards .ds-contrast-card-row-ratio,
  .ds-contrast-cards .ds-contrast-badge {
    font-size: 14.4px;
  }
}


/* ==========================================================================
   Typography Section
   ========================================================================== */

/* Typeface cards */

.ds-typeface-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-150);
  margin-top: var(--gap-block-heavy);
}

.ds-typeface-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
}

.ds-typeface-specimen {
  margin-bottom: var(--spacing-100);
  line-height: 1;
  color: var(--color-text-onLight-subtle);
}

.ds-typeface-name {
  color: var(--color-accent);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  margin-bottom: 4px;
}

.ds-typeface-usage {
  color: var(--color-text-onLight-subtle);
  opacity: 0.8;
  font-size: var(--typography-small-size);
}

.ds-typeface-desc {
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
  font-size: var(--typography-small-size);
  margin-top: var(--spacing-075);
  line-height: var(--typography-body-lineHeight);
}

.ds-typeface-note {
  color: var(--color-accent);
  opacity: 0.7;
  font-size: 14.4px;
  margin-top: var(--spacing-100);
  line-height: var(--typography-body-lineHeight);
}


/* Type scale poster — visual reference sat above the token tables.
   Each row is a heading level. Left column shows the heading name rendered
   at its largest variant plus line-height meta. The next three columns are
   the Large / Medium / Small variant slots. Each slot shows the pixel size
   rendered at the actual size; for sizes that benefit from a weight
   comparison, the same pixel size is shown a second time in Roboto Regular
   below the heading-weight rendering. */

.ds-scale-poster {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-250) var(--spacing-300);
  margin: var(--gap-block-heavy) 0 var(--spacing-300) 0;
}

.ds-scale-poster-header {
  display: grid;
  grid-template-columns: minmax(14em, 1.6fr) repeat(3, 1fr);
  gap: var(--spacing-200);
  padding-bottom: var(--spacing-100);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--spacing-150);
}

.ds-scale-poster-header span {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ds-scale-poster-row {
  display: grid;
  grid-template-columns: minmax(14em, 1.6fr) repeat(3, 1fr);
  gap: var(--spacing-200);
  align-items: baseline;
  padding: var(--spacing-100) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ds-scale-poster-row:last-child {
  border-bottom: none;
}

.ds-scale-poster-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050);
}

.ds-scale-poster-name {
  color: var(--color-text-onLight-subtle);
  /* font-family / size / weight / line-height set inline per row */
}

.ds-scale-poster-lh {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  opacity: 0.7;
}

.ds-scale-poster-footnote {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-style: italic;
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
  margin-top: var(--spacing-025, 2px);
}

.ds-scale-poster-cell {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-025, 2px);
  align-items: flex-start;
}

.ds-scale-poster-display {
  color: var(--color-text-onLight-subtle);
  /* font-family / size / weight / line-height set inline per cell */
}


/* Type scale table */

.ds-scale-table-wrap {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  overflow: hidden;
  margin-bottom: var(--spacing-150);
}

.ds-scale-group-label {
  background: rgba(0, 0, 0, 0.15);
  padding: var(--spacing-100) var(--spacing-200);
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
}

.ds-scale-table {
  width: 100%;
  border-collapse: collapse;
}

.ds-scale-table th {
  background: rgba(0, 0, 0, 0.25);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
  opacity: 0.7;
  text-transform: uppercase;
  padding: var(--spacing-075) var(--spacing-150);
  text-align: left;
}

.ds-scale-table td {
  padding: var(--spacing-100) var(--spacing-150);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
  color: var(--color-text-onLight-subtle);
}

.ds-scale-table tbody tr:last-child td {
  border-bottom: none;
}

.ds-scale-preview {
  width: 120px;
}

.ds-scale-token code {
  font-family: monospace;
  font-size: var(--typography-small-size);
  color: var(--color-text-onLight-subtle);
}

.ds-scale-weight {
  font-size: var(--typography-small-size);
  white-space: nowrap;
}

.ds-scale-size,
.ds-scale-lh {
  font-family: monospace;
  font-size: var(--typography-small-size);
  white-space: nowrap;
}

.ds-scale-badge {
  display: inline-block;
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  color: var(--color-accent);
  opacity: 0.8;
  margin-left: var(--spacing-075);
}


/* Rule panel — single card wrapping multiple rule items in 2-col grid.
   New pattern to replace separate cards where the noise outweighs the
   visual separation. */

.ds-rule-panel {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-250);
  margin-top: var(--gap-block-secondary);
}

.ds-rule-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-300);
  row-gap: var(--spacing-200);
}

.ds-rule-item-title {
  color: var(--color-accent);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
}

.ds-rule-item-title + * {
  /* Migrated from .ds-rule-item-title margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-050);
}

.ds-rule-item-body {
  color: var(--color-text-onLight-subtle);
  font-size: var(--typography-body-size);
  opacity: 0.85;
  line-height: var(--typography-body-lineHeight);
}


/* Typography responsive — 992px and below */
@media (max-width: 992px) {
  .ds-typeface-grid,
  .ds-rule-grid,
  .ds-rule-panel-grid {
    grid-template-columns: 1fr;
  }

  /* Poster collapses to a single column. Each row becomes:
     meta block, then cells stacked vertically. The standalone
     "Large / Medium / Small" header row would disappear in this
     stacked layout and the size context would be lost, so we hide
     the header row and surface the variant label inside each cell
     instead — see the data-size ::before rules below. */
  .ds-scale-poster-header {
    display: none;
  }

  .ds-scale-poster-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-150);
  }

  /* Hide cells that have no variant (e.g. H2's empty Large slot, H5's
     empty Medium, Body's empty third slot). On desktop they hold the
     grid in alignment; on mobile they'd just be dead space. */
  .ds-scale-poster-cell[aria-hidden="true"] {
    display: none;
  }

  /* Variant label injected as a ::before prefix on each cell, reading
     the data-size attribute on the cell. This restores the
     Large / Medium / Small (or Leading / Default for Body) context that
     the standalone header row provided on desktop. */
  .ds-scale-poster-cell[data-size]::before {
    content: attr(data-size);
    display: block;
    font-family: var(--typography-family-body);
    font-size: var(--typography-label-size);
    font-weight: var(--typography-weight-black);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-onLight-subtle);
    opacity: 0.7;
    margin-bottom: var(--spacing-050);
  }

  .ds-typeface-note {
    font-size: 14.4px;
  }

  .ds-scale-table thead {
    display: none;
  }

  .ds-scale-table,
  .ds-scale-table tbody {
    display: block;
  }

  .ds-scale-table tr {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 2px var(--spacing-100);
    padding: var(--spacing-100) var(--spacing-150);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .ds-scale-table tbody tr:last-child {
    border-bottom: none;
  }

  .ds-scale-table td {
    padding: 0;
    border: none;
    font-size: 14.4px;
  }

  .ds-scale-preview {
    grid-column: 1;
    grid-row: 1 / 4;
    width: auto;
    align-self: center;
  }

  .ds-scale-token {
    grid-column: 2;
    grid-row: 1;
  }

  .ds-scale-weight {
    display: none;
  }

  .ds-scale-size {
    grid-column: 2;
    grid-row: 2;
  }

  .ds-scale-lh {
    grid-column: 2;
    grid-row: 3;
  }

  .ds-scale-token code,
  .ds-scale-size,
  .ds-scale-lh {
    font-size: 14.4px;
  }
}


/* ==========================================================================
   Spacing & Layout Section
   ========================================================================== */

/* Spacing scale visualization */

.ds-spacing-vis {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
  margin-top: var(--spacing-200);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-075);
}

.ds-spacing-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
}

.ds-spacing-token {
  font-family: monospace;
  font-size: var(--typography-small-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-accent);
  width: 110px;
  flex-shrink: 0;
}

.ds-spacing-bar {
  height: 24px;
  background-color: rgba(138, 232, 255, 0.3);
  display: flex;
  align-items: center;
  overflow: visible;
  flex-shrink: 0;
}

.ds-spacing-bar-text {
  font-family: monospace;
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  white-space: nowrap;
  padding-left: var(--spacing-075);
}


/* Radius scale visualization */

.ds-radius-vis {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
  margin-top: var(--spacing-200);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

.ds-radius-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
}

.ds-radius-token {
  font-family: monospace;
  font-size: var(--typography-small-size);
  color: var(--color-accent);
  width: 110px;
  flex-shrink: 0;
}

.ds-radius-sample {
  width: 80px;
  height: 80px;
  background-color: rgba(138, 232, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.ds-radius-value {
  font-family: monospace;
  font-size: var(--typography-small-size);
  color: var(--color-text-onLight-subtle);
}


/* Composite radius patterns */

.ds-composite-label {
  display: block;
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--spacing-200);
  margin-bottom: var(--spacing-100);
}

.ds-composite-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-150);
}

.ds-composite-card {
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-150);
  border-radius: var(--radius-075);
}

.ds-composite-sample {
  width: 120px;
  height: 80px;
  background-color: rgba(138, 232, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ds-composite-token {
  font-family: monospace;
  font-size: var(--typography-small-size);
  color: var(--color-accent);
  margin-top: var(--spacing-075);
}

.ds-composite-value {
  font-family: monospace;
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  margin-top: 4px;
}


/* Spacing & Layout responsive — 992px and below */

@media (max-width: 992px) {
  .ds-spacing-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-spacing-table-scroll .ds-token-table {
    min-width: 600px;
  }

  .ds-composite-grid,
  .ds-principle-grid {
    grid-template-columns: 1fr;
  }

  .ds-spacing-token,
  .ds-radius-token {
    font-size: 14.4px;
    width: 110px;
  }

  .ds-spacing-bar-text,
  .ds-radius-value,
  .ds-composite-token,
  .ds-composite-value,
  .ds-principle-body {
    font-size: 14.4px;
  }

  .ds-radius-sample {
    width: 56px;
    height: 56px;
  }
}


/* ==========================================================================
   Buttons & Hyperlinks Section
   ========================================================================== */

/* Button card grid */

.ds-btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-150);
}

.ds-btn-card {
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-200);
  border-radius: var(--radius-075);
}

.ds-btn-card-title {
  color: var(--color-accent);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
}

.ds-btn-card-title + * {
  /* Migrated from .ds-btn-card-title margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-075);
}

.ds-btn-card-body {
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
}


/* Button visual examples */

.ds-btn-example {
  margin-top: var(--spacing-150);
  padding-top: var(--spacing-150);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-btn-example-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-100);
}

.ds-btn-preview {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 1.2em;
  border-radius: var(--radius-button);
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size-default);
  font-weight: var(--typography-weight-medium);
  gap: 0;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ds-btn-preview:not(.ds-btn-preview--secondary):hover {
  filter: brightness(0.85);
}

.ds-btn-preview--secondary:hover {
  border-color: var(--button-secondary-color-border-default-onLight-hover) !important;
}

.ds-btn-surface-dark {
  background-color: rgba(0, 0, 0, 0.3);
  padding: var(--spacing-150);
  border-radius: var(--radius-075);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-100);
}


/* Light surface swatch — wraps button specimens shown on light backgrounds */

.ds-btn-swatch-light {
  background-color: #FFFFFE;
  padding: var(--spacing-150);
  border-radius: var(--radius-075);
  color: var(--color-text-onLight-strong);
}

.ds-btn-swatch-light .ds-btn-scale-label {
  color: var(--color-text-onLight-strong);
  opacity: 0.75;
}


/* Button scale comparison — inside Primary Button card */

.ds-btn-scale-heading {
  font-size: var(--typography-small-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--gap-block-secondary);
}

.ds-btn-scale-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-100);
  margin-top: var(--spacing-100);
}

.ds-btn-scale-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-075);
}

.ds-btn-scale-label {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  opacity: 0.7;
}


/* Icon cards */

.ds-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-150);
}

.ds-icon-grid .ds-btn-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-125);
}

.ds-icon-symbol {
  flex-shrink: 0;
}

.ds-icon-symbol img {
  display: block;
  width: 40px;
  height: auto;
}

.ds-icon-copy {
  flex: 1;
  min-width: 0;
}

.ds-btn-icon {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.ds-icon-name {
  color: var(--color-accent);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
}

.ds-icon-name + * {
  /* Migrated from .ds-icon-name margin-bottom. Applied to the following
     sibling instead so the gap computes against ITS font-size, not
     this element’s — keeps spacing visually consistent across
     varying title sizes. */
  margin-top: var(--spacing-050);
}

.ds-icon-usage {
  color: var(--color-text-onLight-subtle);
  opacity: 0.85;
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
}


/* Hyperlink examples */

.ds-hyperlink-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-150);
}

.ds-hyperlink-label {
  display: block;
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--spacing-050);
}

.ds-hyperlink-swatch {
  padding: var(--spacing-150);
  border-radius: var(--radius-075);
}

.ds-hyperlink-swatch--light {
  background-color: rgba(255, 255, 255, 0.15);
}

.ds-hyperlink-swatch--dark {
  background-color: rgba(0, 0, 0, 0.3);
}


.ds-token-table-subheader td {
  background-color: rgba(0, 0, 0, 0.25) !important;
  color: var(--color-accent) !important;
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* Buttons & Hyperlinks responsive — 992px and below */

@media (max-width: 992px) {
  .ds-btn-grid,
  .ds-icon-grid,
  .ds-hyperlink-grid {
    grid-template-columns: 1fr;
  }

  .ds-btn-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-btn-table-scroll .ds-token-table {
    min-width: 700px;
  }

  .ds-btn-card-body,
  .ds-icon-usage,
  .ds-hyperlink-label,
  .ds-btn-preview {
    font-size: 14.4px;
  }
}


/* ==========================================================================
   Components Section — pull-out, border, two-column panels
   ========================================================================== */

/* Three-area layout — example spans full-width top row;
   spec + notes sit side by side below.
   Grid order in HTML: spec, example, rules — grid-area handles visual placement. */

.ds-comp-grid {
  display: grid;
  grid-template-areas:
    "example example"
    "spec    rules";
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-200);
  margin-top: var(--gap-block-heavy);
  margin-bottom: var(--spacing-200);
  align-items: stretch;
}

.ds-comp-grid > .ds-comp-spec    { grid-area: spec; }
.ds-comp-grid > .ds-comp-example { grid-area: example; }
.ds-comp-grid > .ds-comp-rules   { grid-area: rules; }


/* Spec card — definition list of structure rules */

.ds-comp-spec {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
}

.ds-comp-spec-title {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-150);
}

.ds-comp-spec-list {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--spacing-075) var(--spacing-150);
  margin: 0;
}

.ds-comp-spec-list dt {
  font-family: var(--typography-family-body);
  font-size: var(--typography-small-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
  opacity: 0.7;
  align-self: start;
  padding-top: 2px;
}

.ds-comp-spec-list dd {
  font-family: var(--typography-family-body);
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-subtle);
  margin: 0;
}

.ds-comp-spec-list dd code {
  font-family: monospace;
  font-size: 0.9em;
  color: var(--color-accent);
}

.ds-comp-spec-list dd a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ds-comp-spec-list dd a:hover {
  text-decoration: none;
}


/* Live example container */

.ds-comp-example {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
  display: flex;
  flex-direction: column;
}

.ds-comp-example-label {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-150);
}

.ds-comp-example-frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-150);
  background:
    linear-gradient(
      var(--color-email-hero-gradient-1-angle, 45deg),
      var(--color-email-hero-gradient-1-start, #1971B1),
      var(--color-email-hero-gradient-1-mid, #0062A8),
      var(--color-email-hero-gradient-1-end, #004E86)
    );
  border-radius: var(--radius-050);
  min-height: 240px;
}

/* Content-wrapper frame — for components that live inside color-email-wrapper-onLight.
   Pull-out panels, border panels and two-column panels all sit on white in the real system. */
.ds-comp-example-frame--content {
  background: #FFFFFE;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  display: block;
  min-height: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);  /* subtle edge so the wrapper reads as a contained surface */
}


/* Mock content-wrapper interior — simulates the surrounding body copy
   that a pull-out panel breaks through. */

.ds-pullout-stage {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #222222;
  padding: 1.5em 0;
  max-width: 36em;            /* matches the content-wrapper inner container */
  margin: 0 auto;
}

.ds-pullout-stage-body {
  margin: 0 1.5em 1em 1.5em;  /* 1.5em horizontal padding inside the wrapper */
  font-size: 16px;
  line-height: 1.5em;
  color: #222222;
}


/* Pull-out panel demo — Pullout panel module (Panel A / Standard variant)
   Pale Rider surface inside white content wrapper.
   Values match the real Taxi module output. */

.ds-pullout-demo {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #222222;
  background-color: #E5EFF6;   /* Pale Rider — change to #FAF6F3 for Stone default */
  max-width: 34em;             /* outer panel width: 31em content + 1.5em padding each side = 544px */
  margin: 1.5em 1em;           /* 24px top/bottom breathing room; 16px horizontal against wrapper edges */
  padding: 0 1.5em;            /* horizontal padding; vertical via spacer divs */
  border-radius: 0.75em;
  overflow: hidden;
  box-sizing: border-box;
}

/* Spacer divs replicate the Outlook-safe non-breaking-space padding pattern
   used in the real module. 1.5em top/bottom, 1em between elements. */
.ds-pullout-demo-spacer {
  display: block;
  font-size: 16px;
  line-height: 1.5em;
  height: 1.5em;
}

.ds-pullout-demo-spacer--small {
  line-height: 1em;
  height: 1em;
}

.ds-pullout-demo-heading {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 19px;             /* H4 medium default in source */
  line-height: 1.35em;
  font-weight: 700;            /* see note 14 — bold rather than 900 for client support */
  color: #222222;
  margin: 0;
}

.ds-pullout-demo-body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #222222;
  margin: 0;
}

/* Border variant — transparent fill, 0.15em border in the default dark colour.
   Same dimensions as Standard (max-width 34em, padding, radius) so the two
   demos stack as identical footprints. */
.ds-pullout-demo--border {
  background-color: transparent;
  border: 0.15em solid #222222;
}

/* Variant label — small uppercase caption above each demo so the reader
   knows which variant they're looking at. Sits within the stage margins. */
.ds-pullout-demo-variant-label {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 14.4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #222222;
  opacity: 0.7;
  margin: 0.5em 1em 0.25em 1em;
}


/* Two-column panel demo (m_Body_TwoCol_4) — Image and Icon variants.
   Same outer dimensions as Pullout. Inner grid splits the content. */

.ds-twocol-panel-demo {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #222222;
  background-color: #E5EFF6;   /* Pale Rider */
  max-width: 34em;
  margin: 1.5em 1em;
  border-radius: 0.75em;
  overflow: hidden;
  box-sizing: border-box;
  display: grid;
}

/* Image variant — 50/50 columns */
.ds-twocol-panel-demo--image {
  grid-template-columns: 1fr 1fr;
}

/* Icon variant — narrow left column for the icon, wide right column for content */
.ds-twocol-panel-demo--icon {
  grid-template-columns: 1fr 3fr;
}

/* Image placeholder — Rolling Hill radius on bottom-right corner */
.ds-twocol-panel-demo-image {
  background: linear-gradient(135deg, #d49391, #c97373);
  border-radius: 0 0 2em 0;
  min-height: 200px;
}

/* Icon container — sits at top of narrow column */
.ds-twocol-panel-demo-icon {
  padding: 1.5em 0.75em 0 1.5em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ds-twocol-panel-demo-icon svg {
  width: 4em;
  height: 4em;
  display: block;
}

/* Content column — horizontal padding only; vertical via spacer divs */
.ds-twocol-panel-demo-content {
  padding: 0 1.5em;
}


/* Two-column cards demo (m_Body_TwoCol_Multiplevi) — two independent cards
   side by side. Parent surface contrasts with card surfaces. */

.ds-twocol-cards-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  max-width: 34em;
  margin: 1.5em 1em;
  padding: 1em;
  background-color: #E5EFF6;    /* Pale Rider parent surface */
  border-radius: 0.75em;
  box-sizing: border-box;
}

.ds-twocol-card {
  background-color: #FFFFFE;    /* White card surfaces by default */
  border-radius: 0.75em;
  overflow: hidden;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.ds-twocol-card-image {
  background: linear-gradient(135deg, #d49391, #c97373);
  border-radius: 0 0 2em 0;
  min-height: 130px;
}

.ds-twocol-card-content {
  padding: 0 1em;
  display: flex;
  flex-direction: column;
  flex: 1;
}


/* Usage rules block — sits inside .ds-comp-grid as right column on the bottom row */

.ds-comp-rules {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
}

.ds-comp-rules-title {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-100);
}

.ds-comp-rules-list {
  margin: 0;
  padding-left: 1.4em;
  color: var(--color-text-onLight-subtle);
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
}

.ds-comp-rules-list li {
  margin-bottom: var(--spacing-125);
}

.ds-comp-rules-list li:last-child {
  margin-bottom: 0;
}

/* Principle label that opens each rule — lifts the rule's headline so the
   list reads as scannable principle + rationale rather than a wall of
   sentences. */
.ds-rules-list-title {
  display: block;
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  margin-bottom: var(--spacing-025, 2px);
}

.ds-comp-rules-list sup {
  color: var(--color-accent);
  cursor: pointer;
}


/* Component viewport toggle — desktop / mobile preview switcher.
   Generic pattern shared across Pullout, Two-col panel and Two-col cards
   examples. Mobile state shrinks the example frame to ~432px so the
   2-col components fall into their existing single-column layout. */

.ds-comp-viewport-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  margin-top: var(--gap-block-tight);
}

.ds-comp-viewport-toggle {
  display: inline-flex;
  align-self: flex-start;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-050);
  padding: 4px;
  gap: 2px;
}

.ds-comp-viewport-toggle-btn {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
  background: transparent;
  border: none;
  padding: var(--spacing-075) var(--spacing-150);
  border-radius: var(--radius-050);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ds-comp-viewport-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.ds-comp-viewport-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ds-comp-viewport-toggle-btn.is-active {
  background-color: var(--color-accent);
  color: #1E1F29;
}

.ds-comp-viewport {
  transition: max-width 0.35s ease, box-shadow 0.35s ease;
  margin: 0 auto;
  width: 100%;
}

.ds-comp-viewport.is-desktop {
  max-width: 100%;
}

.ds-comp-viewport.is-mobile {
  max-width: 27em; /* 432px @ 16px base */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-100);
}

/* Mobile state — force stacked layout regardless of viewport width.
   Mirrors the existing 992px media query rules so the preview is
   accurate without needing to actually shrink the browser. */
.ds-comp-viewport.is-mobile .ds-twocol-panel-demo--image,
.ds-comp-viewport.is-mobile .ds-twocol-panel-demo--icon,
.ds-comp-viewport.is-mobile .ds-twocol-cards-demo {
  grid-template-columns: 1fr;
}

.ds-comp-viewport.is-mobile .ds-twocol-panel-demo-image {
  min-height: 140px;
}

.ds-comp-viewport.is-mobile .ds-twocol-panel-demo-icon {
  padding: 1.5em 1.5em 0 1.5em;
}


/* Components responsive — 992px and below */

@media (max-width: 992px) {
  /* On mobile, stack all three areas vertically: example, spec, rules */
  .ds-comp-grid {
    grid-template-areas:
      "example"
      "spec"
      "rules";
    grid-template-columns: 1fr;
  }

  /* Two-column panel — stacks per the email behaviour (single column at 36em / mobile). */
  .ds-twocol-panel-demo--image,
  .ds-twocol-panel-demo--icon {
    grid-template-columns: 1fr;
  }

  .ds-twocol-panel-demo-image {
    min-height: 140px;
    border-radius: 0 0 2em 0;
  }

  .ds-twocol-panel-demo-icon {
    padding: 1.5em 1.5em 0 1.5em;
  }

  /* Two-column cards — same stacking behaviour */
  .ds-twocol-cards-demo {
    grid-template-columns: 1fr;
  }

  .ds-comp-spec-list {
    grid-template-columns: 1fr;
    gap: 4px var(--spacing-150);
  }

  .ds-comp-spec-list dt {
    font-size: 14.4px;
    opacity: 0.75;
    margin-top: var(--spacing-075);
  }

  .ds-comp-spec-list dt:first-child {
    margin-top: 0;
  }

  .ds-comp-spec-list dd,
  .ds-comp-rules-list,
  .ds-comp-rules-title,
  .ds-comp-spec-title,
  .ds-comp-example-label {
    font-size: 14.4px;
  }
}


/* ==========================================================================
   Hero Section — structure cards, gradient swatches, usage rules
   ========================================================================== */

/* Three-card structure layout (Background / Image / Content) */
.ds-hero-structure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-150);
  margin-top: var(--gap-block-heavy);
}


/* Live hero demo — two layouts from the real templates.
   Layout A (DoubleColumn): image alongside content on desktop, stacked on mobile.
   Layout B (SingleColumn): full-width image above centered content.
   Each layout has its own desktop/mobile toggle. Skips the logo header
   (separate component, documented elsewhere). */


/* Variant label above each example */
.ds-hero-demo-variant-label {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 14.4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
  margin: 0 0 var(--spacing-100) 0;
}


/* Toggle control */
.ds-hero-demo-toggle-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
}

.ds-hero-demo-toggle {
  display: inline-flex;
  align-self: flex-start;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-050);
  padding: 4px;
  gap: 2px;
}

.ds-hero-demo-toggle-btn {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
  background: transparent;
  border: none;
  padding: var(--spacing-075) var(--spacing-150);
  border-radius: var(--radius-050);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ds-hero-demo-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.ds-hero-demo-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ds-hero-demo-toggle-btn.is-active {
  background-color: var(--color-accent);
  color: #1E1F29;
}


/* Viewport — wraps the hero so width can shrink to simulate mobile.
   Mobile mode adds a phone-like shadow and rounded outer corners. */
.ds-hero-demo-viewport {
  transition: max-width 0.35s ease, box-shadow 0.35s ease;
  margin: 0 auto;
}

.ds-hero-demo-viewport.is-desktop {
  max-width: 100%;
}

.ds-hero-demo-viewport.is-mobile {
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  overflow: hidden;
}


/* Hero wrapper — full-width Marine gradient surface with Rolling Hill
   bottom-right radius. Content lives inside a 36em max-width inner
   container, so the gradient extends edge-to-edge while the content
   stays bounded the way it would in a real email. */
.ds-hero-demo-wrapper {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  background: linear-gradient(45deg, #1971B1, #0062A8, #004E86);
  border-radius: 0 0 4em 0.5em;
  overflow: hidden;
  color: #FFFFFE;
  width: 100%;
}

.ds-hero-demo-viewport.is-mobile .ds-hero-demo-wrapper {
  border-radius: 0 0 2em 0.5em;
}

/* Content container — caps content width at 36em (576px) and centers it
   horizontally within the full-width gradient wrapper. */
.ds-hero-demo-inner {
  max-width: 36em;
  margin: 0 auto;
}


/* Shared headline / body / CTA styles (text alignment set per-layout) */
.ds-hero-demo-h1 {
  margin: 0;
  font-weight: normal;
  /* font-family inherited from main */
}

.ds-hero-demo-main {
  display: inline-block;
  font-family: 'Turret 1853', Georgia, serif;
  font-weight: 700;
  font-size: 35px;
  line-height: 1.15em;
  color: #FFFFFE;
}

.ds-hero-demo-viewport.is-mobile .ds-hero-demo-main {
  font-size: 33px;  /* H1 mobile responsive override per note 17 */
}

.ds-hero-demo-body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  margin: 1.5em 0 .5em 0;
  color: #FFFFFE;
}

/* CTA — Primary Alt button (white fill, dark text), standard size to match
   the actual hero CTA spec in the templates: 16px text, 0.3em 1.2em padding. */
.ds-hero-demo-cta {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3em !important;
  margin-top: 1em;
}

.ds-hero-demo-cta-icon {
  width: 35px !important;
}


/* Layout A — DoubleColumn.
   Desktop: 2-column grid (content left, image right), content left-aligned.
   Mobile: stacks (image top, content below), still left-aligned. */
.ds-hero-demo-a-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  padding: 1.5em;
}

.ds-hero-demo-viewport--a.is-mobile .ds-hero-demo-a-grid {
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
}

.ds-hero-demo-a-content {
  padding: 0 1.5em 0 0;
  text-align: left;
}

.ds-hero-demo-viewport--a.is-mobile .ds-hero-demo-a-content {
  padding: 1.5em 1.5em 1.5em;
  order: 2;
}

.ds-hero-demo-a-image {
  width: 100%;
  background: linear-gradient(135deg, #d49391, #c97373);
  aspect-ratio: 1 / 1;
  /* --radius-image-hero-2col-right — soft 0.5em corners with a 3em
     statement curve at the bottom-right. Hero-specific rolling-hill
     radius for the image in a two-column hero on the right side. */
  border-radius: 0.5em 0.5em 3em 0.5em;
}

.ds-hero-demo-viewport--a.is-mobile .ds-hero-demo-a-image {
  aspect-ratio: 500 / 430;
  order: 1;
  margin: 1.5em 1.5em 0;
  width: calc(100% - 3em);
}

.ds-hero-demo-viewport--a .ds-hero-demo-cta {
  /* Left-aligned CTA in Layout A — overrides the default centered wrapper */
}


/* Layout B — SingleColumn.
   Desktop: full-width image at top (1152×500 aspect), centered content below.
   Mobile: same structure, image switches to 500×430 aspect.
   Image radius matches the wrapper's rolling hill (0 0 4em .5em on desktop,
   slightly smaller curve on mobile to feel proportional at narrow width). */
.ds-hero-demo-b-image {
  width: 100%;
  background: linear-gradient(135deg, #d49391, #c97373);
  border-radius: 0 0 4em 0.5em;
  transition: aspect-ratio 0.35s ease;
}

.ds-hero-demo-viewport--b.is-desktop .ds-hero-demo-b-image {
  aspect-ratio: 1152 / 500;
}

.ds-hero-demo-viewport--b.is-mobile .ds-hero-demo-b-image {
  aspect-ratio: 500 / 430;
  border-radius: 0 0 2em 0.5em;
}

.ds-hero-demo-b-content {
  padding: 1.5em 1.5em 3em;
  text-align: center;
}

.ds-hero-demo-viewport--b .ds-hero-demo-h1,
.ds-hero-demo-viewport--b .ds-hero-demo-body {
  text-align: center;
}


/* Source-spec annotation below the hero — text swaps with viewport mode */
.ds-hero-demo-source-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-100);
  margin: var(--spacing-150) 0 0 0;
  padding: 0 var(--spacing-150);
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  color: #222222;
}

.ds-hero-demo-source-label {
  font-weight: var(--typography-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14.4px;
  opacity: 0.75;
}

.ds-hero-demo-source-value {
  font-family: monospace;
  font-size: 14.4px;
  color: #1E1F29;
}

.ds-hero-demo-source-desktop,
.ds-hero-demo-source-mobile {
  display: none;
}

.ds-hero-demo-toggle-wrap:has(.is-desktop) .ds-hero-demo-source-desktop {
  display: inline;
}

.ds-hero-demo-toggle-wrap:has(.is-mobile) .ds-hero-demo-source-mobile {
  display: inline;
}


/* Six gradient cards in a 3-column grid */
.ds-hero-gradient-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-200);
}

.ds-hero-gradient-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-075);
  padding: var(--spacing-200);
  display: flex;
  flex-direction: column;
}

/* The gradient swatch — generous height so the gradient reads as
   an actual hero surface rather than a colour chip. */
.ds-hero-gradient-swatch {
  width: 100%;
  height: 140px;
  border-radius: var(--radius-050);
  margin-bottom: var(--spacing-150);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ds-hero-gradient-name {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  margin: 0 0 var(--spacing-100) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-075);
  flex-wrap: wrap;
}

.ds-hero-gradient-tag {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  font-weight: var(--typography-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-050);
}

.ds-hero-gradient-spec {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--spacing-075) var(--spacing-150);
  margin: 0;
}

.ds-hero-gradient-spec dt {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
  opacity: 0.7;
}

.ds-hero-gradient-spec dd {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  line-height: 1.45;
  color: var(--color-text-onLight-subtle);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ds-hero-gradient-spec dd code {
  font-family: monospace;
  font-size: 14.4px;
  color: var(--color-accent);
  overflow-wrap: anywhere;
}


/* Hero responsive — step down 3 → 2 → 1 column through the breakpoints */
@media (max-width: 1200px) {
  .ds-hero-structure-grid,
  .ds-hero-gradient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ds-hero-structure-grid,
  .ds-hero-gradient-grid {
    grid-template-columns: 1fr;
  }

  .ds-hero-gradient-swatch {
    height: 100px;
  }

  .ds-hero-gradient-spec {
    grid-template-columns: 1fr;
    gap: 4px var(--spacing-150);
  }

  .ds-hero-gradient-spec dt {
    margin-top: var(--spacing-075);
    opacity: 0.75;
  }

  .ds-hero-gradient-spec dt:first-child {
    margin-top: 0;
  }

  /* Hero demo handles its own desktop/mobile swap via the .is-mobile class
     on .ds-hero-demo-viewport — no media-query overrides needed here.
     The viewport simulator works independently of the page viewport. */
}


/* ==========================================================================
   Footnote link — wraps every inline <sup> reference so it clicks through
   to its corresponding entry in System Notes. Underline + accent colour
   make it visibly interactive without competing with body copy.
   ========================================================================== */

.ds-footnote {
  text-decoration: none;
  color: var(--color-accent);
  font-weight: var(--typography-weight-black);
  transition: opacity 0.15s ease;
}

.ds-footnote:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ds-footnote sup {
  font-size: 0.7em;
  margin-left: 1px;
}


/* ==========================================================================
   System Notes — decision log. Grouped by category, each note carries its
   own sequential number that matches the <sup> references throughout the
   doc. Anchor ids (#note-1 ... #note-40) make each note linkable.
   ========================================================================== */

.ds-system-notes-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400);
  margin-top: var(--spacing-200);
}

.ds-system-notes-group {
  display: flex;
  flex-direction: column;
}

.ds-system-notes-group-title {
  font-family: var(--typography-family-body);
  font-size: var(--typography-h3-size-medium);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: var(--spacing-100);
  margin: 0 0 var(--spacing-100) 0;
}

.ds-system-note {
  display: flex;
  gap: var(--spacing-200);
  padding: var(--spacing-200) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  scroll-margin-top: var(--spacing-300);
}

.ds-system-note:last-child {
  border-bottom: none;
}

.ds-system-note-number {
  flex: 0 0 3em;
  font-family: monospace;
  font-size: var(--typography-h5-size-large);
  font-weight: var(--typography-weight-black);
  color: var(--color-accent);
  line-height: 1;
  padding-top: 2px;
}

.ds-system-note-body {
  flex: 1;
  min-width: 0;
}

.ds-system-note-title {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  line-height: 1.3em;
  color: var(--color-text-onLight-strong);
  margin: 0 0 var(--spacing-100) 0;
}

.ds-system-note-body p {
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-strong);
  opacity: 0.85;
  margin: 0 0 var(--spacing-075) 0;
}

.ds-system-note-body p:last-child {
  margin-bottom: 0;
}

.ds-system-note-body p strong {
  color: var(--color-text-onLight-strong);
  opacity: 1;
}

.ds-system-note-body p code {
  font-family: monospace;
  font-size: 0.95em;
}

.ds-system-note-example {
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.04);
  padding: var(--spacing-075) var(--spacing-100);
  border-radius: var(--radius-050);
}


/* ==========================================================================
   Brand toggle — SBS Retail / Intermediaries variant switcher. Same shape as
   the desktop/mobile viewport toggle (so the affordance is familiar) but
   targeting a different axis. The host element gets is-sbs / is-int classes
   that CSS uses to show/hide the .ds-only-sbs / .ds-only-int regions inside.
   ========================================================================== */

.ds-brand-toggle-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  margin-top: var(--gap-block-tight);
}

.ds-brand-toggle {
  display: inline-flex;
  align-self: flex-start;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-050);
  padding: 4px;
  gap: 2px;
}

.ds-brand-toggle-btn {
  font-family: var(--typography-family-body);
  font-size: 14.4px;
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-subtle);
  background: transparent;
  border: none;
  padding: var(--spacing-075) var(--spacing-150);
  border-radius: var(--radius-050);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ds-brand-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.ds-brand-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ds-brand-toggle-btn.is-active {
  background-color: var(--color-accent);
  color: #1E1F29;
}

/* Light-section override — toggle sits on white surface so flip the
   neutrals to dark-on-light. Active state keeps marine accent. */
.ds-section--light .ds-brand-toggle {
  background-color: rgba(0, 0, 0, 0.06);
}

.ds-section--light .ds-brand-toggle-btn {
  color: var(--color-text-onLight-strong);
}

.ds-section--light .ds-brand-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.ds-section--light .ds-brand-toggle-btn.is-active {
  background-color: var(--color-accent);
  color: #FFFFFE;
}

/* Brand-host show/hide rules — the active brand state on the host hides
   the inactive brand's content. */
.ds-brand-host.is-sbs .ds-only-int { display: none !important; }
.ds-brand-host.is-int .ds-only-sbs { display: none !important; }


/* ==========================================================================
   Footer component demo — faithful render of the SBS Retail footer.
   Midnight dark surface, max-width 36em, zones stacked top to bottom.
   Inline styles in HTML are kept minimal; this stylesheet handles all the
   layout and typography so the demo is editable in one place.
   ========================================================================== */

/* Outer wrapper — full-width midnight surface. Mirrors the Hero pattern:
   wrapper bleeds edge-to-edge inside the example frame, content stays
   constrained within. */
.ds-footer-demo {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #FFFFFE;
  background-color: #1E1F29;
}

/* Inner — 36em centred content container inside the full-width wrapper. */
.ds-footer-demo-inner {
  max-width: 36em;
  margin: 0 auto;
  padding: 2em 1.5em;
  box-sizing: border-box;
}

.ds-footer-demo-cta-row {
  text-align: center;
  margin-bottom: 2em;
}

.ds-footer-demo-cta {
  display: inline-block;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1em;
  color: #FFFFFE;
  text-decoration: none;
  padding: 0.4em 0.9em;
  border: 0.15em solid #FFFFFE;
  border-radius: 2em;
}

.ds-footer-demo-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}

.ds-footer-demo-logo-link {
  display: inline-block;
  text-decoration: none;
}

.ds-footer-demo-logo-link img {
  width: 180px;
  max-width: 180px;
  height: auto;
  display: block;
  border: 0;
}

.ds-footer-demo-divider {
  border: 0;
  border-top: 2px solid #56586E;
  margin: 0.75em 0;
}

/* Footer nav — inline 5-link row on desktop, stacks at narrow widths via the
   wrap. Each link uses the same custom underline treatment as the header nav:
   border-bottom marine, 2px padding-bottom, bold, no text-decoration. */
.ds-footer-demo-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.5em;
}

.ds-footer-demo-nav-link {
  display: inline-block;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFE;
  text-decoration: none;
  border-bottom: 1px solid #0062A8;
  padding-bottom: 2px;
}

.ds-footer-demo-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.ds-footer-demo-social a {
  display: inline-block;
  text-decoration: none;
}

.ds-footer-demo-social img {
  width: 32px;
  height: 32px;
  display: block;
  border: 0;
}

.ds-footer-demo-int-only {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFFFFE;
  margin: 1.5em 0 1em 0;
}

.ds-footer-demo-legal {
  margin-top: 1.5em;
}

.ds-footer-demo-legal-heading {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5em;
  color: #FFFFFE;
  margin: 1em 0 0.25em 0;
}

.ds-footer-demo-legal-body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #FFFFFE;
  margin: 0 0 0.75em 0;
}

.ds-footer-demo-link {
  color: #FFFFFE;
  text-decoration: none;
  border-bottom: 1px solid #0062A8;
  padding-bottom: 2px;
  font-weight: 700;
}

.ds-footer-demo-policy {
  margin: 1.5em 0 0 0;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  color: #FFFFFE;
}

.ds-footer-demo-policy-sep {
  color: #FFFFFE;
}

.ds-footer-demo-closer {
  margin: 2em 0 0 0;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 700;
  color: #FFFFFE;
}


/* ==========================================================================
   Email Structure diagram — nested zones showing the email's semantic layers.
   Mirrors the pattern from the index page, with the Hero added as a child
   of the Wrapper to show where the gradient-backed opening statement lives.
   ========================================================================== */

.ds-structure-diagram {
  max-width: 40rem;
  margin-top: var(--gap-block-heavy);
}

.ds-structure-zone {
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: var(--radius-075);
  padding: var(--spacing-150);
}

.ds-structure-nested {
  margin-top: var(--spacing-100);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-075);
}

/* Body — outermost container. White surface with a darker border so it
   reads as a defined edge against the white section background. */
.ds-zone--body {
  background-color: #FFFFFE;
  border-color: rgba(0, 0, 0, 0.25);
}

/* Wrapper — email-specific full-width container. White with a subtle
   border to nest visibly inside the Body. */
.ds-zone--wrapper {
  background-color: #FFFFFE;
  border-color: rgba(0, 0, 0, 0.12);
}

/* Hero — full-width child of Wrapper. Gradient surface, edge-to-edge inside
   the Wrapper's padding. The width is the same as Wrapper (no horizontal
   margin) which is the whole point of the Wrapper construct. */
.ds-zone--hero {
  background: linear-gradient(45deg, #1971B1, #0062A8, #004E86);
  background-color: #004E86;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Body content — constrained inner column inside Wrapper. Renders at
   max-width 36em to communicate the 576px centred behaviour. */
.ds-zone--inner {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  border-style: dashed;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

/* Footer — dark closing zone. */
.ds-zone--footer {
  background-color: #1E1F29;
  border-color: #2C2D38;
}

/* Width tag — small badge alongside zone labels showing the rendered width
   behaviour (full-width vs 576px centred). */
.ds-structure-zone-width {
  display: inline-block;
  margin-left: var(--spacing-075);
  padding: 2px 8px;
  border-radius: var(--radius-050);
  background-color: rgba(0, 0, 0, 0.06);
  font-family: monospace;
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-onLight-strong);
  opacity: 0.7;
  vertical-align: middle;
}

.ds-zone--hero .ds-structure-zone-width {
  background-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFE;
  opacity: 1;
}

.ds-structure-zone-label {
  display: block;
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-black);
  color: var(--color-text-onLight-strong);
  margin-bottom: var(--spacing-050);
}

.ds-structure-zone-role {
  font-size: var(--typography-small-size);
  line-height: var(--typography-body-lineHeight);
  color: var(--color-text-onLight-strong);
  opacity: 0.75;
  margin: 0;
}

/* Hero + Footer zones have dark surfaces — flip the text to light */
.ds-zone--hero .ds-structure-zone-label,
.ds-zone--hero .ds-structure-zone-role,
.ds-zone--footer .ds-structure-zone-label,
.ds-zone--footer .ds-structure-zone-role {
  color: #FAFAFA;
}

.ds-zone--hero .ds-structure-zone-role,
.ds-zone--footer .ds-structure-zone-role {
  opacity: 0.85;
}


/* ==========================================================================
   Header component demo — mirrors the real Skipton email header. The header
   lives INSIDE the hero wrapper: logo row sits on the marine gradient, nav
   bar carries its own white surface inside that same wrapper. The wordmark /
   monogram logo swap is wired through the .ds-comp-viewport.is-mobile state.
   The proposition logo mock approximates the real PNG asset — arctic
   background with a bottom-left Rolling Hill radius baked in.
   ========================================================================== */

.ds-header-demo-wrapper {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  background: linear-gradient(45deg, #1971B1, #0062A8, #004E86);
  background-color: #004E86;
  overflow: hidden;
}

.ds-header-demo-logo-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  font-size: 16px;
  line-height: 1.5em;
  color: #FFFFFE;
}

.ds-header-demo-logo {
  padding: 1.5em 1.5em 1.2em 1.5em;            /* matches the real spacer divs around the logo */
  align-self: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.ds-header-demo-logo-wordmark {
  width: 180px;                                /* real asset rendered width on desktop */
  height: auto;
  display: block;
  border: 0;
}

.ds-header-demo-logo-monogram {
  width: 52px;                                 /* real asset rendered width on mobile */
  height: auto;
  display: none;                               /* hidden until mobile viewport */
  border: 0;
}

.ds-header-demo-proposition {
  text-decoration: none;
  display: block;
}

.ds-header-demo-proposition img {
  width: 168px;                                /* real asset rendered width on desktop */
  height: auto;
  display: block;
  border: 0;
}

/* Nav bar — full-width white surface inside the marine wrapper. The inner
   nav element is constrained to 36em and centered. */
.ds-header-demo-nav-bar {
  background-color: #FFFFFE;
  padding: 0.75em 0;
}

.ds-header-demo-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 36em;
  margin: 0 auto;
}

/* Each nav column is the flex/grid cell that takes 1/3 of the inner nav
   width and centers its child link. The link itself is inline and only
   the text is hyperlinked — the border-bottom underline sits under the
   text only, not under the empty column space. */
.ds-header-demo-nav-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-header-demo-nav-link {
  display: inline-block;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-midnight-500);
  text-decoration: none;
  border-bottom: 1px solid var(--color-marine-500);
  padding-bottom: 2px;
}

.ds-header-demo-nav-divider {
  width: 1px;
  background-color: rgba(0, 0, 0, 0.15);
  align-self: stretch;
}

/* Mobile viewport state — wordmark hides, monogram shows. */
.ds-comp-viewport.is-mobile .ds-header-demo-logo-wordmark {
  display: none;
}

.ds-comp-viewport.is-mobile .ds-header-demo-logo-monogram {
  display: block;
}

.ds-comp-viewport.is-mobile .ds-header-demo-nav-link {
  font-size: 14.4px;
}


/* ==========================================================================
   Mobile-only elements — hidden by default on desktop
   ========================================================================== */

/* Mobile nav bar */
.ds-mobile-navbar {
  display: none;
}

/* Drawer close button */
.ds-drawer-close {
  display: none;
}

/* Backdrop — kept as a transparent click target so tapping outside the
   sidebar closes it, but no full-screen dimming. The sidebar itself now
   carries a solid dark surface so the page content behind doesn't need
   to be obscured for nav legibility. */
.ds-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: transparent;
  z-index: var(--z-raised);
  cursor: pointer;
}

.ds-drawer-backdrop.is-visible {
  display: block;
}


/* ==========================================================================
   Mobile layout — 992px and below
   ========================================================================== */

@media (max-width: 992px) {

  :root {
    /* Nav bar height: top + bottom padding + button content height */
    --ds-mobile-navbar-height: calc(var(--spacing-075) * 2 + var(--spacing-200));
  }

  html {
    scroll-padding-top: calc(var(--ds-header-height) + var(--ds-mobile-navbar-height));
  }

  /* Mobile nav bar — solid dark surface to match the drawer. Hardcoded
     fjord-100 hex because the Skipton token system is scoped to
     .skipton-system, and the mobile navbar sits outside that scope
     (sibling of, not descendant). var(--color-fjord-100) resolves to
     nothing here, so the value has to be inlined. */
  .ds-mobile-navbar {
    display: flex;
    align-items: center;
    position: fixed;
    top: var(--ds-header-height);
    left: 0;
    right: 0;
    background-color: #001D2E;
    padding: var(--spacing-075) var(--spacing-150);
    border-bottom: 1px solid var(--color-border-default);
    z-index: var(--z-raised);
  }

  .ds-mobile-navbar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-075);
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--typography-family-body);
    font-size: var(--typography-body-size);
    font-weight: var(--typography-weight-medium);
    /* Hardcoded white — navbar bg is always dark fjord-100. Using the
       --color-text-primary token would resolve to black in light mode
       via tokens.css's .light-mode override, which fights the dark navbar. */
    color: #FFFFFE;
    cursor: pointer;
    transition: opacity var(--transition-default);
  }

  .ds-mobile-navbar-btn:hover {
    opacity: 0.8;
  }

  .ds-mobile-navbar-icon {
    width: var(--spacing-150);
    height: var(--spacing-150);
    flex-shrink: 0;
  }

  /* Sidebar becomes full-height drawer, slides in from left.
     Solid fjord-100 fill so the drawer doesn't show page content
     bleeding through when it slides over the scroll area. */
  .ds-sidebar,
  .ds-sidebar.skipton-system {
    top: 0;
    height: 100vh;
    /* Pad content below sticky header — header sits on top at z-index 200 */
    padding-top: var(--ds-header-height);
    transform: translateX(-100%);
    transition: transform var(--transition-default);
    z-index: var(--z-overlay);
    /* Token works here because the selector includes .skipton-system,
       putting us inside the scope where Skipton tokens are defined. */
    background-color: var(--color-fjord-100);
    border-right: none;
    box-shadow: var(--shadow-lg);
  }

  .ds-sidebar.is-open {
    transform: translateX(0);
  }

  /* Drawer close button */
  .ds-drawer-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-100) var(--spacing-150);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    font-family: var(--typography-family-body);
    font-size: var(--typography-body-size);
    font-weight: var(--typography-weight-medium);
    /* Hardcoded white — drawer surface is fjord-100. Token would resolve
       to a dark colour in light mode via tokens.css override. */
    color: #FFFFFE;
    cursor: pointer;
    transition: opacity var(--transition-default);
  }

  .ds-drawer-close:hover {
    opacity: 0.8;
  }

  .ds-drawer-close svg {
    width: var(--spacing-150);
    height: var(--spacing-150);
    flex-shrink: 0;
  }

  /* Main content — no sidebar offset, padded below header + mobile nav bar */
  #main-content {
    margin-left: 0;
    padding-top: var(--ds-mobile-navbar-height);
  }

  .ds-section {
    padding: var(--spacing-200) var(--spacing-150);
  }
}



/* ==========================================================================
   Icons section — grid, card, and placeholder treatment
   ========================================================================== */

.ds-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-200);
  margin-top: var(--gap-block-heavy);
}

.ds-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-200);
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-075);
}

.ds-icon-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-050);
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-onLight-subtle);
  opacity: 0.5;
  /* Subtle diagonal pattern — signals "asset coming" without
     looking like a render bug. */
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 14px,
      rgba(0, 0, 0, 0.04) 14px,
      rgba(0, 0, 0, 0.04) 15px
    );
}

.ds-icon-card-name {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  text-align: center;
  color: var(--color-text-onLight-subtle);
  margin: 0;
}


/* Responsive — 2 columns at narrower viewports */
@media (max-width: 767px) {
  .ds-icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-150);
  }
}


/* ==========================================================================
   Inline link — body-copy hyperlinks within prose. Used for cross-references
   between sections (e.g. Icons → Buttons → Anatomy).
   ========================================================================== */

.ds-inline-link {
  color: var(--color-text-onLight-strong);
  font-weight: var(--typography-weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-default);
}

.ds-inline-link:hover {
  text-decoration-color: var(--color-text-onLight-strong);
}


/* Icon card image — the real PNG asset. Fixed 96px display so icons
   render at a consistent size across the grid regardless of card
   width. Well under the 250px max-display rule that governs
   production usage. */
.ds-icon-card-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
}


/* ==========================================================================
   Icons section — text overrides
   Forces darker, fuller text on the light section background. The default
   .ds-section--light treatments apply opacity 0.75 to body copy + labels,
   which the audit flagged as too muted for the docs reading context.
   ========================================================================== */

#icons .ds-section-body,
#icons .ds-subsection-body,
#icons .ds-icon-card-name {
  color: var(--color-text-onLight-strong);
  opacity: 1;
}


/* ==========================================================================
   Header — light-mode text + icon overrides
   The design-system page chrome was designed for the marine gradient
   page bg, so --color-text-secondary etc. resolve to white. With the
   header now opaque-white in light mode (mode-responsive), the nav
   text + icons need dark variants. Dark-mode override flips them back.
   ========================================================================== */

.header-nav-link {
  color: #1d1d1b;
}
.header-nav-link:hover {
  color: #000;
}

.header-dark-toggle,
.header-hamburger {
  color: #1d1d1b;
}

html.dark-mode .header-nav-link {
  color: rgba(255, 255, 255, 0.75);
}
html.dark-mode .header-nav-link:hover {
  color: #FFFFFE;
}
html.dark-mode .header-dark-toggle,
html.dark-mode .header-hamburger {
  color: #FFFFFE;
}


/* ==========================================================================
   Logos — specimen panels for brand mark, propositions, events, third-party
   ========================================================================== */

.ds-logo-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-200);
  margin-top: var(--gap-block-heavy);
}

.ds-logo-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-100);
  padding: var(--spacing-200);
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-075);
}

/* Specimen — the panel showing the logo on a representative surface.
   Surface-specific modifiers swap the bg to demo contrast against
   the logo variant being shown. */
.ds-logo-specimen {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-050);
  background-color: var(--color-marine-700, #004E86);
  /* Placeholder TBC styling — diagonal pattern over the surface */
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 14px,
    rgba(255, 255, 255, 0.05) 14px,
    rgba(255, 255, 255, 0.05) 15px
  );
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}

.ds-logo-card--marine .ds-logo-specimen { background-color: var(--color-marine-500); }
.ds-logo-card--light .ds-logo-specimen {
  background-color: #FFFFFE;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 14px,
    rgba(0, 0, 0, 0.04) 14px,
    rgba(0, 0, 0, 0.04) 15px
  );
  color: rgba(0, 0, 0, 0.4);
}

/* Logo card image — the real PNG asset, sized to fit the specimen panel. */
.ds-logo-card-img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  display: block;
}

.ds-logo-card-name {
  font-family: var(--typography-family-body);
  font-size: var(--typography-body-size);
  font-weight: var(--typography-weight-bold);
  color: var(--color-text-onLight-strong);
  margin: 0;
}

.ds-logo-card-meta {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  color: var(--color-text-onLight-subtle);
  opacity: 0.75;
  margin: 0;
}

/* Sub-group title — distinguishes SBS proposition from INT proposition
   inside the same Propositions subsection. */
.ds-logo-group-title {
  font-family: var(--typography-family-display);
  font-size: var(--typography-h5-size);
  font-weight: var(--typography-weight-bold);
  color: var(--color-text-onLight-strong);
  margin-top: var(--spacing-400);
  margin-bottom: 0;
}

.ds-logo-group-title:first-of-type {
  margin-top: var(--spacing-300);
}


/* Responsive — drop to 2 columns at narrower widths */
@media (max-width: 992px) {
  .ds-logo-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ds-logo-set {
    grid-template-columns: 1fr;
    gap: var(--spacing-150);
  }
}


/* Update existing #icons text overrides to use the new section ID */
#icons-logos .ds-section-body,
#icons-logos .ds-subsection-body,
#icons-logos .ds-icon-card-name,
#icons-logos .ds-logo-card-name,
#icons-logos .ds-logo-card-meta,
#icons-logos .ds-logo-group-title {
  color: var(--color-text-onLight-strong);
  opacity: 1;
}


/* Dark surface modifier — for cards holding logos that need a dark
   background for contrast (white variants on dark, X white-on-dark, etc.) */
.ds-logo-card--dark {
  background-color: var(--color-fjord-100, #001D2E);
}

#icons-logos .ds-logo-card--dark .ds-logo-card-name,
#icons-logos .ds-logo-card--dark .ds-logo-card-meta {
  color: #FFFFFE;
  opacity: 0.85;
}


/* Brand-mark subsection overrides
   - 2-column grid so white variants stack above cyan variants
   - Logo max-height capped at 80px for the docs display
*/
#logo-brand-mark .ds-logo-set {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#logo-brand-mark .ds-logo-card-img {
  max-height: 80px;
}

/* Update the dark-card modifier from fjord to marine-500 — better
   contrast pairing with the white logo variants. */
.ds-logo-card--dark {
  background-color: var(--color-marine-500, #0062A8);
}


/* Logo group title — body font + label treatment instead of display.
   Makes the sub-group headers (Skipton Building Society Logo, Intermediaries,
   Social channels, App stores) read as labels rather than competing with
   the .ds-subsection-title above them. */
.ds-logo-group-title {
  font-family: var(--typography-family-body);
  font-size: var(--typography-label-size);
  font-weight: var(--typography-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Reduce third-party + app store logo display sizes — the brand
   marks are heavy, the third-party logos work better smaller and
   more uniform across the grid. */
#logo-third-party .ds-logo-card-img {
  max-height: 64px;
}