/* ===========================================================
   Atlas Style Guide — page styles
   ===========================================================
   Internal reference page at /styleguide. Two-column shell:
   sticky 240 px sidebar on the left, scrollable main content
   on the right. All values use Atlas tokens via var(--…) so
   the guide stays in lockstep with the prototype's own
   design system.

   Naming: .styleguide-* prefix on every class so nothing in
   this file collides with the rest of the prototype's CSS.
   =========================================================== */

.styleguide-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px 24px;
  min-height: 100vh;
  background: var(--color-white, #FFFFFF);
  color: var(--color-grey-90, #312D33);
  font-family: var(--font-body, Roboto, sans-serif);
}

/* Single-column collapse on narrow viewports — sidebar moves
   to the top and loses its sticky behavior. Atlas-spec
   breakpoint is 744 px (the mobile/tablet cutover). */
@media (max-width: 744px) {
  .styleguide-page {
    grid-template-columns: 1fr;
    padding: 16px 16px 48px 16px;
    gap: 16px;
  }
}

/* ── Sidebar ──────────────────────────────────────────────── */

.styleguide-sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 16px;
  background: var(--color-white, #FFFFFF);
  border-radius: var(--radius-16, 16px);
  box-shadow: var(--shadow-subtle, 0 1px 3px rgba(0, 0, 0, 0.08));
  box-sizing: border-box;
}

@media (max-width: 744px) {
  .styleguide-sidebar {
    position: static;
    max-height: none;
  }
}

.styleguide-sidebar-title {
  font-family: var(--font-display, "Be Vietnam Pro"), sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--color-black, #000000);
  line-height: 1;
}

.styleguide-sidebar-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-60, #79777A);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 4px 0 16px 0;
}

.styleguide-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Nav link — fills the sidebar width, two-column inside (number
   + label). Inactive: Grey-60 label. Hover: Grey-10 background.
   Active (set by IntersectionObserver via .is-active): Grey-20
   background, black label, bumped weight — matches the Atlas
   "Focus" state from the tabs spec but applied to a nav row. */
.styleguide-nav-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-grey-60, #79777A);
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: background-color 120ms ease, color 120ms ease;
}

.styleguide-nav-link:hover {
  background: var(--color-grey-10, #F7F5F2);
  color: var(--color-grey-90, #312D33);
}

.styleguide-nav-link:focus-visible {
  outline: 2px solid var(--color-black, #000000);
  outline-offset: -2px;
  background: var(--color-grey-20, #D4D4D5);
  color: var(--color-black, #000000);
}

.styleguide-nav-link.is-active {
  background: var(--color-grey-20, #D4D4D5);
  color: var(--color-black, #000000);
  font-weight: 700;
}

.styleguide-nav-num {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 20px;
  text-align: right;
}

.styleguide-nav-label {
  flex: 1;
  min-width: 0;
}

/* ── Main content ─────────────────────────────────────────── */

.styleguide-main {
  min-width: 0; /* lets grid item shrink correctly inside the 1fr column */
}

.styleguide-header {
  margin-bottom: 48px;
}

.styleguide-header h1 {
  font-family: var(--font-display, "Be Vietnam Pro"), sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 40px;
  color: var(--color-black, #000000);
  margin: 0 0 12px 0;
}

.styleguide-header p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-60, #79777A);
  margin: 0;
  max-width: 640px;
}

/* Section block — scroll-margin-top so anchor jumps and the
   IntersectionObserver root-margin land in sync (the sticky
   sidebar's 32 px top inset is mirrored here). border-bottom
   gives the sections a visible boundary between blocks. */
.styleguide-section {
  scroll-margin-top: 32px;
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--color-grey-20, #D4D4D5);
}

.styleguide-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.styleguide-section h2 {
  font-family: var(--font-display, "Be Vietnam Pro"), sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 32px;
  color: var(--color-black, #000000);
  margin: 0 0 24px 0;
}

.styleguide-body {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-grey-90, #312D33);
  margin: 0 0 24px 0;
  max-width: 720px;
}

/* Metadata list — Overview's "Atlas version / Last updated /
   Source" rows. Two-column layout (label / value), 0.5 px
   Grey-20 separators between rows, no card chrome (lives
   inline in the Overview section). */
.styleguide-meta {
  margin: 0 0 24px 0;
  padding: 0;
  max-width: 480px;
  border-top: 0.5px solid var(--color-grey-20, #D4D4D5);
}

.styleguide-meta-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--color-grey-20, #D4D4D5);
}

.styleguide-meta-row dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-grey-60, #79777A);
  margin: 0;
}

.styleguide-meta-row dd {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-grey-90, #312D33);
  margin: 0;
}

/* Callout — soft Grey-10 surface, left border in Atlas Brand-Pink
   for the "paired with the prototype" note. */
.styleguide-callout {
  background: var(--color-grey-10, #F7F5F2);
  border-left: 4px solid var(--color-brand-pink, #F91D71);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-grey-90, #312D33);
  max-width: 720px;
}

.styleguide-callout strong {
  display: block;
  color: var(--color-black, #000000);
  margin-bottom: 4px;
}

/* Phase 2-5 placeholders — light italic so empty sections read
   as scaffolding, not as broken content. */
.styleguide-placeholder {
  font-size: 14px;
  font-style: italic;
  color: var(--color-grey-40, #A2A0A3);
  margin: 0;
}

/* ===========================================================
   Phase 2 — Core Tokens (Colors / Typography / Spacing & Radius)
   ===========================================================
   All swatches, type rows, and bars pull values from
   tokens.css via var(--…). Hex / px text alongside is
   metadata only — it doesn't drive the rendering.
   =========================================================== */

/* Subsection heading inside each Phase 2 section (Brand, Greys,
   Semantic, Gradients, Spacing, Radius). One step smaller than
   the main h2 and Grey-90 instead of Black so the section heading
   stays dominant. */
.styleguide-subsection-heading {
  font-family: var(--font-display, var(--font-heading, "Be Vietnam Pro")), sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--color-grey-90, #1B1B1B);
  margin: 32px 0 16px 0;
}

/* Inline code chips used for token names in body copy + metadata
   lists. Atlas-spec monospace stack, Grey-10 surface, soft padding
   so it reads as a code reference, not a CTA. */
.styleguide-inline-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  background: var(--color-grey-10, #F7F7F7);
  color: var(--color-grey-90, #1B1B1B);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Section 2: Colors ───────────────────────────────────── */

/* Responsive color grid — 4 columns on desktop, 2 on tablet,
   1 on phone. Mirrors the Atlas mobile/tablet/desktop breakpoint
   table (744 px / 1280 px) so the swatches breathe at every size. */
.styleguide-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 1023px) {
  .styleguide-color-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .styleguide-color-grid {
    grid-template-columns: 1fr;
  }
}

.styleguide-color-swatch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* The color tile itself — fixed 80 px tall, fluid width, 1 px
   Grey-20 hairline so White / Grey-10 swatches stay visible against
   the page background. Radius matches Atlas's small-component
   spec (8 px). */
.styleguide-color-block {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-8, 8px);
  border: 1px solid var(--color-grey-20, #D4D4D5);
  box-sizing: border-box;
}

.styleguide-color-name {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-grey-90, #1B1B1B);
  margin-top: 8px;
}

.styleguide-color-hex {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--color-grey-60, #434343);
}

.styleguide-color-var {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  color: var(--color-grey-40, #8C8C8C);
  word-break: break-all;
}

/* ── Section 3: Typography ───────────────────────────────── */

.styleguide-type-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-grey-20, #D4D4D5);
}

/* Each type row is a 3-column grid: label left (180 px), live
   sample fluid middle, metadata right (220 px). The sample
   column gets min-width: 0 so long text doesn't push the
   metadata off-screen. Vertical padding gives the sample
   room to breathe at H1 sizes (48 px line-height). */
.styleguide-type-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-grey-20, #D4D4D5);
  align-items: center;
}

@media (max-width: 900px) {
  .styleguide-type-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
}

.styleguide-type-label {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-grey-60, #434343);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.styleguide-type-sample {
  color: var(--color-black, #000000);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Metadata column — small dl rows, label/value pair per row.
   Right-aligned label, left-aligned value so the column reads
   as a structured spec sheet. */
.styleguide-type-meta {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, Roboto), sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.styleguide-type-meta > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  font-size: 12px;
}

.styleguide-type-meta dt {
  color: var(--color-grey-60, #434343);
  font-weight: 500;
  margin: 0;
}

.styleguide-type-meta dd {
  color: var(--color-grey-90, #1B1B1B);
  font-weight: 600;
  margin: 0;
  word-break: break-word;
}

/* ── Section 4: Spacing & Radius ─────────────────────────── */

/* Spacing bars — each row is a flex pair (track | label). The
   bar grows with var(--space-N), the track stays full-width so
   the eye can compare bars across rows. */
.styleguide-space-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.styleguide-space-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 16px;
  align-items: center;
}

@media (max-width: 600px) {
  .styleguide-space-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Grey track behind the bar gives a scale reference — without it
   small values (4 px, 8 px) wouldn't read as visible bars. */
.styleguide-space-track {
  background: var(--color-grey-10, #F7F7F7);
  border: 1px solid var(--color-grey-20, #D4D4D5);
  border-radius: 4px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.styleguide-space-bar {
  height: 100%;
  background: var(--color-brand-pink, #F91D71);
  /* width set inline per row via style="width: var(--space-N)" */
}

.styleguide-space-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.styleguide-space-value {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 12px;
  color: var(--color-grey-60, #434343);
}

/* Radius grid — 5 squares per row on desktop, fewer on small
   viewports. Each cell stacks the square above its label. */
.styleguide-radius-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .styleguide-radius-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .styleguide-radius-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.styleguide-radius-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* The radius preview square — fixed 80 px so the corner geometry
   reads consistently regardless of viewport. Border (Grey-20)
   makes the corners visible against the page background. */
.styleguide-radius-square {
  width: 80px;
  height: 80px;
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-grey-20, #D4D4D5);
  /* border-radius set inline per cell via style="border-radius: var(--radius-N)" */
}

.styleguide-radius-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.styleguide-radius-value {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 11px;
  color: var(--color-grey-60, #434343);
}

/* ===========================================================
   Phase 3 — Visual Primitives (Shadows / Icons / Chips)
   =========================================================== */

/* ── Section 5: Shadows ──────────────────────────────────── */

/* Three-card row, generous gap so each shadow has clean air
   around it (overlapping shadows would muddle the comparison).
   Sample cards keep a soft 1-px Grey-20 border so the
   smallest shadow (Subtle, 3% opacity) is still discernible
   against the page's white background. */
.styleguide-shadow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32, 32px);
  padding: var(--space-24, 24px) 0;
}

@media (max-width: 900px) {
  .styleguide-shadow-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.styleguide-shadow-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.styleguide-shadow-card {
  width: 200px;
  height: 120px;
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-grey-20, #D4D4D5);
  border-radius: var(--radius-16, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.styleguide-shadow-card-label {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-grey-60, #434343);
}

.styleguide-shadow-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 240px;
}

.styleguide-shadow-name {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-grey-90, #1B1B1B);
}

.styleguide-shadow-usecase {
  margin: 4px 0 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-60, #434343);
}

/* ── Section 6: Icons ────────────────────────────────────── */

/* Weight rows — vertical stack, label + grid + caption. */
.styleguide-icon-row {
  margin: 0 0 28px 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-grey-20, #D4D4D5);
}

.styleguide-icon-row:last-of-type {
  border-bottom: none;
}

.styleguide-icon-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.styleguide-icon-weight-label {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-grey-90, #1B1B1B);
}

/* "DEFAULT" pill next to the Light weight label so the
   default convention is unmistakable. Brand-Pink filled,
   white text, --radius-full pill geometry. */
.styleguide-icon-default-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full, 1000px);
  background: var(--color-brand-pink, #F91D71);
  color: var(--color-white, #FFFFFF);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-family: var(--font-body, Roboto), sans-serif;
}

/* Icon grid — auto-fill so the row reflows on narrow viewports
   without empty cells. Each cell stacks the 24-px glyph above
   its FontAwesome class name. */
.styleguide-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.styleguide-icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid var(--color-grey-20, #D4D4D5);
  border-radius: var(--radius-8, 8px);
  background: var(--color-white, #FFFFFF);
}

.styleguide-icon-cell i {
  font-size: 24px;
  color: var(--color-grey-90, #1B1B1B);
  line-height: 1;
}

.styleguide-icon-caption {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-grey-60, #434343);
}

/* Affordance rows — icon left, label + description right. */
.styleguide-affordance-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.styleguide-affordance-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-grey-20, #D4D4D5);
  border-radius: var(--radius-16, 16px);
  background: var(--color-white, #FFFFFF);
  align-items: start;
}

@media (max-width: 600px) {
  .styleguide-affordance-row {
    grid-template-columns: 1fr;
  }
}

.styleguide-affordance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full, 1000px);
  background: var(--color-grey-10, #F7F7F7);
}

.styleguide-affordance-icon i {
  font-size: 20px;
  color: var(--color-grey-90, #1B1B1B);
}

.styleguide-affordance-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.styleguide-affordance-label {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-grey-90, #1B1B1B);
}

.styleguide-affordance-desc {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-grey-60, #434343);
}

/* ── Section 9: Chips ────────────────────────────────────── */

.styleguide-chip-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-grey-20, #D4D4D5);
}

.styleguide-chip-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-grey-20, #D4D4D5);
  align-items: center;
}

@media (max-width: 700px) {
  .styleguide-chip-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Demo column — centers the chip horizontally so the
   sample is visually framed regardless of label width. */
.styleguide-chip-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.styleguide-chip-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.styleguide-chip-name {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-grey-90, #1B1B1B);
}

.styleguide-chip-usecase {
  margin: 4px 0 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-grey-60, #434343);
}

/* Payment-method chips — mirrors PaymentMethods.razor's
   inline-styled MudChips. Reproduced here as classes so the
   style-guide sample can be rendered without a MudChip
   instance + the page reads as one consistent system. */
.styleguide-paymethod-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  height: 26px;
  border-radius: var(--radius-8, 8px);
  font-family: var(--font-body, Roboto), sans-serif;
  font-weight: var(--font-weight-bold, 700);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.styleguide-paymethod-chip--primary {
  background-color: var(--color-brand-grey, #312D33);
  color: var(--color-white, #FFFFFF);
}

.styleguide-paymethod-chip--autopay {
  background-color: var(--color-grey-10, #F7F7F7);
  color: var(--color-black, #000000);
}

/* ===========================================================
   Phase 4 — Interactive Components (Buttons / Tabs / Forms)
   ===========================================================
   §7 Buttons + §10 Tabs reuse the prototype's REAL global
   classes (atlas-buttons.css, Dashboard.css). hover / pressed /
   focused are reproduced STATICALLY here via .sg-state-* /
   .sg-tab-* helper classes that mirror the real :hover /
   :active / :focus-visible rules, so each state is visible
   without interacting. §11 Forms are MudBlazor (+ the
   Make-a-Payment radio cards), reproduced with .styleguide-*
   classes — same approach as the Chips section.
   =========================================================== */

/* ── Shared state / variant label (under each sample) ─────── */
.styleguide-btn-state-label,
.styleguide-variant-label {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-grey-60, #434343);
  text-align: center;
}

/* ── §7 Buttons ───────────────────────────────────────────── */
.styleguide-btn-group {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-grey-20, #D4D4D5);
}
.styleguide-btn-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.styleguide-btn-type-name {
  font-family: var(--font-display, var(--font-heading, "Be Vietnam Pro")), sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--color-grey-90, #1B1B1B);
  margin: 0 0 4px 0;
}

.styleguide-btn-desc {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-grey-60, #434343);
  margin: 0 0 16px 0;
  max-width: 640px;
}

/* Row of state samples — wraps on narrow viewports. align-items:
   flex-start so the 3px focus ring on one cell doesn't nudge the
   others. */
.styleguide-btn-states {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.styleguide-btn-state-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.styleguide-btn-note {
  margin: 8px 0 0 0;
  font-size: 12.5px;
  line-height: 18px;
  font-style: italic;
  color: var(--color-grey-60, #434343);
  max-width: 640px;
}

/* Forced button states — these duplicate the real atlas-buttons.css
   :hover / :active / :focus-visible declarations so the sample renders
   the state statically. Scoped under .styleguide-page and combined with
   the type class for specificity over the (often !important) defaults. */
/* Primary — pink → orange + Roboto Bold swap */
.styleguide-page .aff-btn--primary.sg-state-hover {
  background: var(--color-light-orange-40, #FFA94D) !important;
  color: var(--color-black, #000) !important;
  font-family: var(--font-body, Roboto) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}
.styleguide-page .aff-btn--primary.sg-state-pressed {
  background: var(--color-brand-light-orange, #FF5709) !important;
  color: var(--color-black, #000) !important;
  font-family: var(--font-body, Roboto) !important;
  font-weight: var(--font-weight-bold, 700) !important;
}
.styleguide-page .aff-btn--primary.sg-state-focus {
  background: var(--color-brand-light-orange, #FF5709) !important;
  color: var(--color-black, #000) !important;
  font-family: var(--font-body, Roboto) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  outline: 3px solid var(--color-orange-60, #CC4607);
  outline-offset: 0;
}
/* Primary-B2B — purple */
.styleguide-page .aff-btn--primary-b2b.sg-state-hover { background: var(--color-purple-40, #C378D7) !important; }
.styleguide-page .aff-btn--primary-b2b.sg-state-pressed { background: var(--color-brand-purple, #A230C1) !important; }
.styleguide-page .aff-btn--primary-b2b.sg-state-focus {
  background: var(--color-brand-purple, #A230C1) !important;
  outline: 3px solid var(--color-purple-60, #82269A);
  outline-offset: 0;
}
/* Secondary — Brand-Grey */
.styleguide-page .aff-btn--secondary.sg-state-hover { background: var(--color-grey-80, #282828) !important; }
.styleguide-page .aff-btn--secondary.sg-state-pressed { background: var(--color-black, #000) !important; }
.styleguide-page .aff-btn--secondary.sg-state-focus {
  background: var(--color-grey-60, #434343) !important;
  outline: 3px solid var(--color-black, #000);
  outline-offset: 0;
}
/* Tertiary — transparent + black border */
.styleguide-page .aff-btn--tertiary.sg-state-hover { background: var(--color-grey-10, #F7F7F7) !important; color: var(--color-black, #000) !important; }
.styleguide-page .aff-btn--tertiary.sg-state-pressed { background: var(--color-grey-20, #D4D4D5) !important; color: var(--color-grey-70, #353535) !important; }
.styleguide-page .aff-btn--tertiary.sg-state-focus {
  background: var(--color-grey-10, #F7F7F7) !important;
  color: var(--color-black, #000) !important;
  outline: 3px solid var(--color-black, #000);
  outline-offset: 0;
}
/* Destructive — red held across hover/pressed; outline on focus */
.styleguide-page .aff-btn--destructive.sg-state-hover { background: var(--color-error, #E22721) !important; }
.styleguide-page .aff-btn--destructive.sg-state-pressed { background: var(--color-error, #E22721) !important; }
.styleguide-page .aff-btn--destructive.sg-state-focus {
  background: var(--color-error, #E22721) !important;
  outline: 3px solid var(--color-black, #000);
  outline-offset: 0;
}
/* Text CTA (arrow) — Grey-10 / Grey-20 wash; 2px black focus ring */
.styleguide-page .text-cta-arrow.sg-state-hover { background-color: var(--color-grey-10, #F7F7F7); }
.styleguide-page .text-cta-arrow.sg-state-pressed { background-color: var(--color-grey-20, #D4D4D5); }
.styleguide-page .text-cta-arrow.sg-state-focus { outline: 2px solid var(--color-black, #000); outline-offset: 2px; }

/* ── §10 Tabs ─────────────────────────────────────────────── */
.styleguide-tabs-examples {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 16px;
}

.styleguide-tabs-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Frame: a faint Grey-10 card so the white tab strip + its Grey-20
   horizon line read clearly on the white page. Width caps near the
   phone strip width so the .account-tab-indicator (sized via the
   Dashboard.css media queries) lands roughly under each cell. */
.styleguide-tabs-frame {
  max-width: 440px;
  background: var(--color-grey-10, #F7F7F7);
  border-radius: var(--radius-8, 8px);
  padding: 12px 12px 0 12px;
  box-sizing: border-box;
}

.styleguide-tabs-caption {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 12px;
  color: var(--color-grey-60, #434343);
}

/* Forced hover on an inactive tab (mirrors .tab:hover:not(.active)). */
.styleguide-page .tab.sg-tab-hover:not(.active) {
  background-color: var(--color-grey-10, #F7F7F7);
}

/* ── Spec list (Tabs + Forms documentation) ───────────────── */
.styleguide-spec {
  margin: 8px 0 0 0;
  padding: 0;
  border-top: 1px solid var(--color-grey-20, #D4D4D5);
  max-width: 760px;
}

.styleguide-spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-grey-20, #D4D4D5);
}

.styleguide-spec-row dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-grey-90, #1B1B1B);
  margin: 0;
}

.styleguide-spec-row dd {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-grey-60, #434343);
  margin: 0;
}

@media (max-width: 600px) {
  .styleguide-spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ── §11 Forms ────────────────────────────────────────────── */
.styleguide-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 8px 0 16px 0;
}

@media (max-width: 700px) {
  .styleguide-form-grid { grid-template-columns: 1fr; }
}

.styleguide-form-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 8px 0 16px 0;
  align-items: flex-start;
}

.styleguide-form-variant {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

/* Inputs — mirror MudTextField Variant="Variant.Outlined" + .mud-label */
.styleguide-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.styleguide-field-label {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-grey-90, #1B1B1B);
}
.styleguide-field--focus .styleguide-field-label { color: var(--color-brand-pink, #F91D71); }
.styleguide-field--error .styleguide-field-label { color: var(--color-error, #E22721); }
.styleguide-field--disabled .styleguide-field-label { color: var(--color-grey-40, #8C8C8C); }

.styleguide-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.styleguide-input-icon {
  position: absolute;
  left: 12px;
  font-size: 16px;
  color: var(--color-grey-60, #434343);
  pointer-events: none;
}

.styleguide-input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--color-grey-40, #8C8C8C);
  border-radius: var(--radius-8, 8px);
  background: var(--color-white, #FFFFFF);
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 16px;
  color: var(--color-black, #000000);
  box-sizing: border-box;
  outline: none;
}
.styleguide-input::placeholder { color: var(--color-grey-40, #8C8C8C); }
/* Focus (real + forced) — 2px Brand-Pink border; pad compensates so
   text doesn't shift when the border thickens. */
.styleguide-input:focus,
.styleguide-input.sg-input-focus {
  border: 2px solid var(--color-brand-pink, #F91D71);
  padding-left: 37px;
}
.styleguide-input--error {
  border: 2px solid var(--color-error, #E22721) !important;
  padding-left: 37px;
}
.styleguide-input:disabled {
  background: var(--color-grey-10, #F7F7F7);
  color: var(--color-grey-40, #8C8C8C);
  border-color: var(--color-grey-20, #D4D4D5);
  cursor: not-allowed;
}

.styleguide-field-helper {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-grey-60, #434343);
}
.styleguide-field-helper--error { color: var(--color-error, #E22721); }

/* Checkbox — mirror MudCheckBox */
.styleguide-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.styleguide-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-grey-40, #8C8C8C);
  border-radius: 4px;
  background: var(--color-white, #FFFFFF);
  flex-shrink: 0;
}
.styleguide-checkbox i {
  font-size: 12px;
  line-height: 1;
  color: var(--color-white, #FFFFFF);
}
.styleguide-checkbox--checked {
  background: var(--color-brand-pink, #F91D71);
  border-color: var(--color-brand-pink, #F91D71);
}
.styleguide-checkbox--disabled {
  background: var(--color-grey-10, #F7F7F7);
  border-color: var(--color-grey-20, #D4D4D5);
}

.styleguide-checkbox-text {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  color: var(--color-grey-90, #1B1B1B);
}
.styleguide-checkbox-row--disabled .styleguide-checkbox-text { color: var(--color-grey-40, #8C8C8C); }

/* Radio card — mirror .payment-amount-card / .payment-card.selected */
.styleguide-radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-grey-20, #D4D4D5);
  border-radius: var(--radius-8, 8px);
  box-sizing: border-box;
}
.styleguide-radio-card--selected {
  border: 1.5px solid var(--color-brand-pink, #F91D71);
  background-color: rgba(249, 29, 113, 0.06);
}
.styleguide-radio-card--disabled {
  background: var(--color-grey-10, #F7F7F7);
  opacity: 0.75;
}

.styleguide-radio-glyph {
  font-size: 22px;
  color: #A2A0A3;
  flex-shrink: 0;
}
.styleguide-radio-glyph--selected { color: #C7175A; }
.styleguide-radio-glyph--disabled { color: var(--color-grey-40, #8C8C8C); }

.styleguide-radio-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.styleguide-radio-title {
  font-family: var(--font-body, Roboto), sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #212121;
  margin-bottom: 2px;
}
.styleguide-radio-desc {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 12px;
  color: #000000;
  line-height: 1.4;
}
.styleguide-radio-amount {
  font-family: var(--font-body, Roboto), sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #212121;
  flex-shrink: 0;
}
.styleguide-radio-card--disabled .styleguide-radio-title,
.styleguide-radio-card--disabled .styleguide-radio-desc,
.styleguide-radio-card--disabled .styleguide-radio-amount {
  color: var(--color-grey-40, #8C8C8C);
}

/* Toggle / Switch — mirror MudSwitch */
.styleguide-switch {
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  padding: 2px;
  border-radius: var(--radius-full, 1000px);
  background: var(--color-grey-40, #8C8C8C);
  box-sizing: border-box;
  transition: background-color 120ms ease;
}
.styleguide-switch-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full, 1000px);
  background: var(--color-white, #FFFFFF);
  box-shadow: var(--shadow-subtle, 0 1px 2px rgba(0, 0, 0, 0.2));
}
.styleguide-switch--on {
  background: var(--color-brand-pink, #F91D71);
  justify-content: flex-end;
}
.styleguide-switch--disabled {
  background: var(--color-grey-20, #D4D4D5);
}

/* ===========================================================
   Phase 5 — Composed Patterns (Cards / Alerts & Toasts /
   Drawers & Modals)
   ===========================================================
   §8 Cards + §12 inline alerts + the §12 Toast render the
   prototype's REAL global classes / components. §13 modals are
   styled mockups (the live overlays are full-viewport fixed).
   Demo wrappers below provide a surface / stage and neutralize
   fixed positioning so the real components show inline.
   =========================================================== */

/* ── §8 Cards ─────────────────────────────────────────────── */
/* Grey-10 "page" surface so the white card fill + subtle shadow read. */
.styleguide-card-demo {
  max-width: 420px;
  background: var(--color-grey-10, #F7F7F7);
  padding: 24px;
  border-radius: var(--radius-16, 16px);
  margin: 8px 0 16px 0;
}

/* Gradient hero (§8C) — .gradient-card has no intrinsic size; give it one. */
.styleguide-gradient-card {
  min-height: 168px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.styleguide-gradient-title {
  font-family: var(--font-display, var(--font-heading, "Be Vietnam Pro")), sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--color-white, #FFFFFF);
}
.styleguide-gradient-sub {
  margin-top: 8px;
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-white, #FFFFFF);
  opacity: 0.92;
}

/* Sticky CTA (§8D) — frame the footer + neutralize position: fixed. */
.styleguide-sticky-demo {
  max-width: 420px;
  border: 1px solid var(--color-grey-20, #D4D4D5);
  border-radius: var(--radius-16, 16px);
  overflow: hidden;
  background: var(--color-grey-10, #F7F7F7);
  margin: 8px 0 16px 0;
}
.styleguide-sticky-hint {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 13px;
  color: var(--color-grey-40, #8C8C8C);
}
.styleguide-page .styleguide-sticky-demo .account-details-payment-container {
  position: static;
  border-top: 1px solid var(--color-grey-20, #D4D4D5);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* ── §12 Inline alerts ────────────────────────────────────── */
.styleguide-alert-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 16px 0;
}
.styleguide-alert-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.styleguide-alert-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.styleguide-banner-icon {
  font-size: 18px;
  line-height: 22px;
  flex-shrink: 0;
}
.styleguide-banner-text {
  font-family: var(--font-body, Roboto), sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-grey-90, #1B1B1B);
}
/* Success — same ebo-banner anatomy, green tokens (style-guide-only). */
.accounts-details-ebo-banner.styleguide-banner--success {
  border: 0.5px solid var(--color-success, #0D8728);
  background: var(--color-success-bg, #E6FFEC);
}

/* ── §12 Toasts — real Toast.razor shown inline ───────────── */
.styleguide-toast-demo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 8px 0 16px 0;
}
.styleguide-toast-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* Neutralize the toast's fixed positioning / hidden transform for the demo. */
.styleguide-page .styleguide-toast-demo .aff-toast {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  margin: 0;
}

/* ── §13 Modal-Floating mockup ────────────────────────────── */
/* Stage = the dimmed backdrop (rgba 0,0,0,.5) with the modal centered. */
.styleguide-modal-stage {
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-16, 16px);
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 16px 0;
}
/* Mirrors .info-modal-container exactly (incl. the known 8px-radius drift). */
.styleguide-infomodal {
  background: #FFFFFF;
  border-radius: 8px;
  width: 100%;
  max-width: 360px;
  padding: 20px 20px 16px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  font-family: 'Be Vietnam Pro', 'Nunito Sans', Arial, sans-serif;
}
.styleguide-infomodal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.styleguide-infomodal-title {
  font-size: 17px;
  font-weight: 700;
  color: #312D33;
  line-height: 1.2;
}
.styleguide-infomodal-close {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: #312D33;
  font-size: 16px;
  line-height: 1;
}
.styleguide-infomodal-body {
  font-size: 14px;
  line-height: 1.5;
  color: #312D33;
  font-family: var(--font-body, Roboto), sans-serif;
}

/* ── §13 Modal-Bottom-Sheet mockup ────────────────────────── */
.styleguide-sheet-stage {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-16, 16px);
  min-height: 380px;
  max-width: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin: 8px 0 16px 0;
}
/* Mirrors .custom-bottom-drawer (24px top corners = the known drift vs 32). */
.styleguide-bottomsheet {
  width: 100%;
  background: #FFFFFF;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.styleguide-bottomsheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.styleguide-bottomsheet-title {
  font-family: var(--font-display, var(--font-heading, "Be Vietnam Pro")), sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #312D33;
}