/* ============================================================
   DIGIT Design System — Global Styles
   Supplements Tailwind CSS.
   Design tokens: #0E165D brand · #FFFFFF page · #FFFFFF surface
   ============================================================ */

/* ─── 1. Prevent FOUC ────────────────────────────────────────────────────────*/
html:not(.hydrated) * { transition: none !important; }

/* ─── 2. CSS custom properties ───────────────────────────────────────────────*/
:root {
  --brand:          #0E165D;
  --brand-hover:    #15186F;
  --brand-pressed:  #101357;
  --brand-surface:  #EEF1FF;
  --brand-border:   #C7D2FE;
  --brand-sel:      #EEF1FF;
  --gray-50:        #FAFAFB;
  --gray-100:       #F4F5F7;
  --gray-200:       #E5E7EB;
  --gray-300:       #D1D5DB;
  --gray-400:       #9CA3AF;
  --gray-500:       #6B7280;
  --gray-600:       #4B5563;
  --gray-700:       #374151;
  --gray-800:       #1F2937;
  --gray-900:       #111827;
  --page-bg:        #FFFFFF;
  --surface:        #FFFFFF;
  --surface-alt:    #F4F5F7;
  --surface-soft:   #F8F8F8;
  --surface-hover:  #F5F7FB;
  --surface-preview:#F8F8F8;
  --text-heading:   #111827;
  --text-primary:   #1F2937;
  --text-secondary: #6B7280;
  --text-disabled:  #6B7280;
  --border:         #E5E7EB;
  --border-input:   #D1D5DB;
  --success:        #15803D;
  --success-bg:     #ECFDF3;
  --warning:        #B45309;
  --warning-bg:     #FFFBEB;
  --error:          #B91C1C;
  --error-bg:       #FEF2F2;
  --info:           #1D4ED8;
  --info-bg:        #EFF6FF;
  --shadow-xs:      0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --shadow-md:      0 4px 8px rgba(0,0,0,.08);
  --radius-sm:      6px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-pill:    9999px;
}

/* ─── 3. Base ────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

/* ─── 4. Search input ────────────────────────────────────────────────────────*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ─── 5. Scrollbars ──────────────────────────────────────────────────────────*/
.sidebar-scroll,
.search-results-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.sidebar-scroll::-webkit-scrollbar,
.search-results-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track,
.search-results-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: var(--radius-pill);
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--gray-300); }

/* ─── 6. Focus ring ──────────────────────────────────────────────────────────*/
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── 7. Skip link ───────────────────────────────────────────────────────────*/
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ─── 8. Nav animated underline ──────────────────────────────────────────────*/
.nav-link-animated { position: relative; }
.nav-link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--brand);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-link-animated:hover::after,
.nav-link-animated[aria-current="page"]::after { transform: scaleX(1); }

/* ─── 9. Mobile drawer ───────────────────────────────────────────────────────*/
#mobile-drawer {
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ─── 10. Search overlay ──────────────────────────────────────────────────────*/
#search-overlay { animation: dsSearchIn 0.12s ease-out; }
#search-overlay.hidden { animation: none; }
@keyframes dsSearchIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── 11. Page content fade-in ───────────────────────────────────────────────*/
@keyframes dsFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.page-content { animation: dsFadeUp 0.35s ease-out; }

/* ─── 12. Card hover lift ─────────────────────────────────────────────────────*/
.card-lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* ─── 12a. Color palette card hover ──────────────────────────────────────────*/
.color-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.color-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* ─── 13. Hero gradient (homepage) ───────────────────────────────────────────*/
.hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(25,29,136,.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(15,118,110,.10) 0%, transparent 60%),
    linear-gradient(135deg, #111827 0%, #1F2937 50%, #111827 100%);
}

/* ─── 14. Dot pattern ────────────────────────────────────────────────────────*/
.dot-pattern {
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ─── 15. Prose (template generated content) ─────────────────────────────────*/
.prose h1, .prose h2, .prose h3 { scroll-margin-top: 5rem; }
.prose pre {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ─── 16. Section rule / divider ─────────────────────────────────────────────*/
.section-rule { height: 1px; background: #d1d5db; margin: 14px 0 24px; }

/* ── Global section divider — applies to ALL sections on ALL pages ── */
.section-divider,
.anatomy-section .section-divider,
.variants-section .section-divider,
.properties-section .section-divider,
.interaction-section .section-divider,
.behaviours-section .section-divider,
.behaviors-section .section-divider,
.usage-section .section-divider,
.content-guidelines-section .section-divider,
.changelog-section .section-divider,
.checklist-section .section-divider {
  background-color: #d1d5db !important;
  height: 1px !important;
  width: 100% !important;
  margin: 14px 0 24px !important;
  border: none !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* ── Remove any inherited padding from parent containers ── */
.anatomy-section,
.variants-section,
.properties-section,
.interaction-section,
.behaviours-section,
.behaviors-section,
.usage-section,
.content-guidelines-section,
.changelog-section,
.checklist-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Section spacing consistency ─────────────────────────────────────────────*/

/* 1. Remove browser-default h2 margin so heading→divider gap is always
      exactly the divider's own margin-top (14px). */
h2.section-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 2. Section bottom spacing — matches design-approach.html mb-16 (64px).
      Also overrides Design Checklist sections that use mb-16. */
section.scroll-mt-24 {
  margin-bottom: 64px !important;
}

/* 2a. Section scroll-margin — matches design-approach.html scroll-mt-8 (32px). */
main#main-content section[id] {
  scroll-margin-top: 2rem;
}

/* 2b. On-this-page nav card — matches design-approach.html hero mb-12 (48px). */
.p-6.mb-24 {
  margin-bottom: 3rem !important;
}

/* 3. pt-2 pages: normalise top spacing to match mt-12 (48px) used on other pages. */
#properties > div.pt-2 {
  padding-top: 0 !important;
  margin-top: 48px !important;
}


/* ─── 17. Section tag chip ───────────────────────────────────────────────────*/
.section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-surface);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  border: 1px solid var(--brand-border);
}

/* ─── 18. Chip / badge ───────────────────────────────────────────────────────*/
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── 19. Property table (component doc pages) ───────────────────────────────*/
.prop-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prop-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-700);
  background: var(--surface-alt);
  border-bottom: 2px solid var(--brand);
}
.prop-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(217,217,217,.6);
  color: var(--gray-700);
  vertical-align: top;
  line-height: 1.55;
}
.prop-table tr:last-child td { border-bottom: none; }
.prop-table tr:nth-child(even) td { background: rgba(244,245,247,.6); }
.pn { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; font-weight: 500; color: var(--text-heading); }
.pt { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11.5px; color: var(--gray-600); }
.pd { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11.5px; color: var(--brand); }

/* ─── 20. Data row hover ─────────────────────────────────────────────────────*/
.data-row { transition: background 0.12s; }
.data-row:hover { background: #FAFAFB; }

/* ─── 21. Property code pill ─────────────────────────────────────────────────*/
.prop-code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 13px;
  color: var(--brand);
}

/* ─── 22. Copy-code button (inside dark code blocks) ────────────────────────*/
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  white-space: nowrap;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  transition: background .12s, border-color .12s, color .12s;
}
.copy-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.copy-btn.copied { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.6); }

/* ─── 23. Vis placeholder (component preview) ────────────────────────────────*/
.vis-placeholder {
  background: var(--surface-alt);
  border: 1px solid var(--border-input);
  border-radius: 4px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── 24. Tab system (component pages) ───────────────────────────────────────*/
.tab-trigger {
  position: relative;
  padding-bottom: 16px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.tab-trigger:hover { color: var(--text-heading); }
.tab-trigger::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
}
.tab-trigger.active { color: var(--brand); }
.tab-trigger.active::after { transform: scaleX(1); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── 25. Tab row / btn / pane ───────────────────────────────────────────────*/
.tab-row { display: flex; border-bottom: 2px solid rgba(217,217,217,.6); background: var(--surface-alt); }
.tab-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.tab-btn:hover { color: var(--text-heading); }
.tab-btn.on { color: var(--brand); border-bottom-color: var(--brand); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

/* ─── 25b. Contained property tab toggle ────────────────────────────────────*/
.prop-toggle {
  display: inline-flex;
  background: #F4F5F7;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 2px;
}
.prop-toggle .tab-trigger {
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 600;
  border-radius: 6px;
  color: #6B7280;
  background: transparent;
}
.prop-toggle .tab-trigger::after { display: none !important; }
.prop-toggle .tab-trigger.active {
  background: #ffffff;
  color: #0E165D !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.prop-toggle .tab-trigger:hover:not(.active) { color: #111827; background: rgba(0,0,0,.04); }

/* ─── 26. Section title (component pages) ────────────────────────────────────*/
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* ─── 27. On-this-page nav link ──────────────────────────────────────────────*/
.otp-link {
  color: var(--brand);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: text-decoration 0.1s;
}
.otp-link:hover { text-decoration: underline; }

/* ─── 28a. On this page link weight ─────────────────────────────────────────*/
.on-this-page a,
.on-this-page-link,
.page-nav a,
.toc a,
.toc-link,
.otp-link {
  font-weight: 500;
}

/* ─── 28b. Checkbox accent & frozen state ───────────────────────────────────*/
input[type="checkbox"] { accent-color: var(--brand); }
input[type="checkbox"].chk-frozen { pointer-events: none; cursor: default; }
input[type="checkbox"].chk-frozen:checked { accent-color: var(--brand); }

/* ─── 28c. Scroll anchor offset ─────────────────────────────────────────────*/
.scroll-mt-24 { scroll-margin-top: 96px; }

/* ─── 28. Diff card image placeholder ────────────────────────────────────────*/
.diff-card-img {
  height: 200px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ─── 29. Typography scale for doc pages ─────────────────────────────────────*/
main#main-content h1 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  font-weight: 700;
}
main#main-content h2 {
  font-size: clamp(19px, 2.8vw, 26px);
  line-height: 1.26;
  letter-spacing: -0.014em;
  font-weight: 700;
}
main#main-content h3 {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.35;
  letter-spacing: -0.008em;
  font-weight: 700;
}
main#main-content h4 {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}
main#main-content p { line-height: 1.72; }
main#main-content .intro-text { font-size: 17px; line-height: 1.7; }
main#main-content section { margin-bottom: 3rem; }

/* ─── 30. Sidebar typography ─────────────────────────────────────────────────*/
.sidebar-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 12px;
  margin-top: 20px;
  margin-bottom: 6px;
  display: block;
  line-height: 1.4;
}

/* Sidebar nav font sizes — enforced via CSS since Tailwind CDN
   doesn't scan arbitrary values inside JS strings */
#sidebar-content a,
#mobile-sidebar-content a,
#sidebar-content button[data-key],
#mobile-sidebar-content button[data-key] {
  font-size: 16px;
}
#sidebar-content [id^="sub-"] a,
#mobile-sidebar-content [id^="sub-"] a {
  font-size: 14px;
}
#sidebar-content p.text-\[10\.5px\],
#mobile-sidebar-content p.text-\[10\.5px\] {
  font-size: 11.5px;
}

/* ─── 31. Table typography ─────────────────────────────────────────────────*/
.prop-table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}
.prop-table td {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.prop-table .pn { font-size: 12.5px !important; }

/* ─── 32. Scroll margin ──────────────────────────────────────────────────────*/
[id] { scroll-margin-top: 24px; }
.scroll-mt-24 { scroll-margin-top: 96px; }

/* ─── 36. Non-component page section gaps ────────────────────────────────────
   These pages use structural selectors instead of scroll-mt-24, so the
   section.scroll-mt-24 rule in §35 doesn't apply. Force 96px to match
   component docs. The existing `main#main-content section { mb: 3rem }` rule
   (§29) overrides Tailwind mb-* classes to 48px — we need !important here.
   Foundation pages (digit-colours, spacing-system, etc.) intentionally omitted
   so they fall back to the 3rem base rule, matching design-approach.html.     */
#localisation, #ux-copy, #pre-ship-checklist,
#principles, #checkpoints, #in-practice {
  margin-bottom: 6rem !important;
}

/* ─── 37. Section heading-row → first content gap ───────────────────────────
   The flex heading rows on getting-started / foundation pages use Tailwind
   mb-2 (8px) or mb-6 (24px). Normalise to 2rem (32px) to match the
   ~39px visual gap the section-divider creates on component pages.          */
#localisation > div:first-child,
#ux-copy > div:first-child,
#pre-ship-checklist > div:first-child,
#digit-colours > div:first-child,
#spacing-system > div:first-child,
#typefaces > div:first-child {
  margin-bottom: 2rem !important;
}

/* ─── 33. Print ──────────────────────────────────────────────────────────────*/
@media print {
  aside, #mobile-drawer, .skip-link { display: none !important; }
  main { margin-left: 0 !important; }
  body { background: #fff; }
}


/* ─── 34. Design Checklist row states ───────────────────────────────────────*/
#design-checklist .chk-row-pass { background: #ffffff; }
#design-checklist .chk-row-na   { background: #f5f5f5; }


/* ─── 35. Responsive breakpoints ────────────────────────────────────────────*/

/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
  main#main-content { padding-left: 2rem; padding-right: 2rem; }
}

/* Mobile: ≤ 768px — section-row stacks vertically */
@media (max-width: 768px) {
  .section-row { flex-direction: column !important; }
  .section-row .vis-col,
  .section-row .txt-col { width: 100% !important; }
  main#main-content { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Small mobile: ≤ 480px */
@media (max-width: 480px) {
  main#main-content { padding-left: 1rem; padding-right: 1rem; }
  .prop-table { font-size: 12px; }
  .prop-table th, .prop-table td { padding: 8px 10px; }
}

/* ── Vertical connector line (hub diagram) ────────────────────── */
.vertical-line-connector {
  width: 0;
  border-left: 2px dashed rgba(99,102,241,0.35);
  flex: 1;
  margin: 0;
  padding: 0;
  display: block;
}

/* ─── 38. Mobile hamburger + slide-in drawer ─────────────────────────────── */

#mob-hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0E165D;
  transition: background .15s;
}
#mob-hamburger:hover { background: #EEF1FF; }
#mob-hamburger:focus-visible { outline: 2px solid #0E165D; outline-offset: 2px; }

#mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#mob-overlay.open { display: block; }

#mob-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100vh;
  width: 288px;
  max-width: 85vw;
  background: #fff;
  border-right: 1px solid #E5E7EB;
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#mob-drawer.open { transform: translateX(0); }

#mob-drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F4F5F7;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  z-index: 1;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
#mob-drawer-close:hover { background: #E5E7EB; color: #111827; }

#mob-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

/* ─── 39. Global overflow & responsive fixes ─────────────────────────────── */

/* No horizontal scrollbar on body */
body { overflow-x: hidden; }

/* Responsive images globally */
img { max-width: 100%; height: auto; }

/* Code blocks scroll instead of overflow */
pre { overflow-x: auto; max-width: 100%; }

/* Tables: ensure horizontal scroll wrapper works on touch */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* ─── 40. Responsive breakpoints (extended) ─────────────────────────────── */

@media (max-width: 1024px) {
  /* Show hamburger button */
  #mob-hamburger { display: flex; }

  /* Push content down so hamburger (44px + 12px top) doesn't overlap */
  main#main-content { padding-top: 68px !important; }
}

@media (max-width: 768px) {
  /* Touch targets for interactive elements */
  button,
  .step-cta,
  .otp-link,
  [role="button"] { min-height: 44px; }

  /* Prevent any fixed-width element from causing horizontal scroll */
  main#main-content { overflow-x: hidden; }

  /* Code blocks on small screens */
  pre, code { font-size: 12px !important; }
}

@media (max-width: 480px) {
  /* Tighter code block padding on very small screens */
  pre { padding: 12px; }
}