/**
 * rooslabs-theme.css
 * © 2025 Gary Roos
 *
 * Drop-in theme override for rippleofperception.netlify.app
 * Load AFTER styles.css and ripple-enhanced.css
 *
 * How to apply:
 *   <link rel="stylesheet" href="styles.css" />
 *   <link rel="stylesheet" href="ripple-enhanced.css" />
 *   <link rel="stylesheet" href="rooslabs-theme.css" />
 *
 * This file remaps every color, font, radius, and surface
 * to the rooslabs dark editorial aesthetic.
 * No HTML changes required.
 */

/* =============================================
   FONTS — self-hosted from rooslabs.com/assets/fonts/
   (As of 2026-04-27 we no longer load Google Fonts —
   @font-face declarations live in rooslabs.css. If
   you're embedding this theme on a page that doesn't
   already include rooslabs.css, preload the faces:
   <link rel="preload" as="font" type="font/ttf"
         href="https://rooslabs.com/assets/fonts/Saira-Regular.ttf"
         crossorigin />
   <link rel="preload" as="font" type="font/ttf"
         href="https://rooslabs.com/assets/fonts/Saira_Condensed-SemiBold.ttf"
         crossorigin />
   The faces ship as TTF. There are no woff2 files for Saira in the repo —
   this block named two that do not exist, so both preloads 404'd.)
============================================= */

/* =============================================
   CORE TOKENS — override all root variables
============================================= */
:root {
  /* brand */
  --color-primary:              #b3342c;
  --color-primary-dark:         #8f2923;
  --color-secondary:            #7e241e;

  /* backgrounds */
  --bg-gradient-start:          #0f0f0f;
  --bg-gradient-end:            #131313;
  --bg-primary:                 #131313;
  --bg-secondary:               #1a1a1a;
  --bg-overlay:                 rgba(19, 19, 19, 0.96);
  --bg-header:                  rgba(15, 15, 15, 0.6);

  /* text */
  --text-primary:               #f3f2f0;
  --text-secondary:             #dedcd8;
  --text-muted:                 #9d9d99;
  /* Was #6b6b68 — DARKER than the light-theme value, i.e. inverted, and
     3.48:1 on the page. Dark-theme ink must be the lighter of the pair. */
  --text-light:                 #90908b;
  --text-white:                 #f3f2f0;

  /* borders */
  --border-color:               #2a2a2a;
  --border-light:               #343434;

  /* semantic — muted to match palette */
  --color-success:              #5a8a5a;
  --color-success-bg:           #1a231a;
  --color-success-border:       #3a5a3a;
  --color-success-text:         #8ab88a;

  --color-error:                #8a4040;
  --color-error-bg:             #231a1a;
  --color-error-border:         #5a3030;
  --color-error-text:           #c88a8a;
  --color-error-light-bg:       #2a1a1a;

  --color-warning:              #b3342c;
  --color-warning-bg:           #211a13;
  --color-warning-border:       #b3342c;
  --color-warning-text:         #dd9a63;

  --color-info:                 #4a7a8a;
  --color-info-bg:              #141e23;
  --color-info-border:          #2a5a6a;
  --color-info-text:            #7aaabb;

  /* step colors — all shifted to amber-warm palette */
  --color-step-1:               #b3342c;
  --color-step-2a:              #c2703a;
  --color-step-2b:              #c2703a;
  --color-step-2c:              #c2703a;
  --color-step-2d:              #c2703a;
  --color-step-3:               #c9a13a;
  --color-step-4:               #4a7391;
  --color-step-5:               #4a7391;
  --color-step-6:               #4a7391;
  --color-step-7:               #2f8a78;
  --color-step-feedback:        #6b6b68;

  /* step panel tints — a wash of each phase's hue behind its card */
  --tint-step-1:                #281918;
  --tint-step-2:                #2a2019;
  --tint-step-3:                #2b2619;
  --tint-step-4:                #1b2024;
  --tint-step-7:                #182321;
  --tint-step-feedback:         #1f1f1e;

  /* shadows */
  --shadow-sm:                  0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md:                  0 5px 15px rgba(0, 0, 0, 0.6);
  --shadow-lg:                  0 10px 25px rgba(0, 0, 0, 0.7);
  --shadow-xl:                  0 20px 60px rgba(0, 0, 0, 0.8);

  /* legacy aliases */
  --primary-color:              var(--color-primary);
  --primary-dark:               var(--color-primary-dark);
  --secondary-color:            var(--color-secondary);
}

/* =============================================
   BASE & BODY
============================================= */
body {
  /* Saira, not mono. Everything inherits from here, which is why the whole
     app read as monospaced — every unclassed <div> of prose included.
     17px/1.8 was tuned for mono's wider glyphs; Saira sets tighter, so 16.5
     with a 1.65 leading holds the same colour without looking loose. */
  font-family: 'Saira', system-ui, sans-serif !important;
  background: var(--bg-gradient-start) !important;
  color: var(--text-primary) !important;
  font-size: 16.5px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
  opacity: 0.35;
}

/* =============================================
   TYPOGRAPHY
============================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* Prose is Saira. This rule used to force 'Share Tech Mono' on every p, li,
   span, label, td and th with !important — which made ALL body copy in the
   app monospaced, and beat every inline font-family the JS modules set.
   Monospace is for labels, eyebrows, stats and code: short strings where the
   fixed width is the point. In a 30-word sentence it removes the word shapes
   you read by. No !important here, so inline mono in the JS still wins where
   a label genuinely wants it. */
p, li, td, th, label, blockquote, dd, dt {
  font-family: 'Saira', system-ui, sans-serif;
  letter-spacing: normal;
}

code, kbd, samp, pre, .mono {
  font-family: 'Share Tech Mono', monospace;
}

/* Protect the rooslabs wordmark in the top nav from the bulk span rule above.
   The "Labs" span needs to inherit Saira Condensed from its parent <a>. */
.nav-home,
.nav-home span {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
}
.nav-home span { color: var(--color-primary) !important; }

/* The nav row has to beat this file's bulk "a { font-family: mono }" and
   "span { font-family: mono }" rules, or ripple's nav reads as a different
   design from every other page. */
.nav-links .nav-link {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
}
.nav-links .nav-link:hover { color: var(--color-primary) !important; }
.nav-links .nav-link.active,
.nav-links .nav-link[aria-current] {
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  padding-bottom: 2px !important;
}

/* =============================================
   HEADER
============================================= */
.header {
  background: var(--bg-header) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(12px) !important;
  color: var(--text-primary) !important;
}

.header h1 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

.header p {
  color: var(--text-muted) !important;
  font-size: 0.9em !important;
}

/* =============================================
   NAVIGATION BUTTONS
============================================= */
.view-btn {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s, color 0.2s !important;
}

.view-btn:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--color-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

.view-btn.active {
  background: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

.view-btn::before { display: none !important; }

/* =============================================
   STEP CARDS
============================================= */
.step-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-left-width: 3px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: border-color 0.2s !important;
}

.step-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--color-primary) !important;
}

.step-title {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.step-summary {
  color: var(--text-muted) !important;
  font-size: 14px !important;
}

/* .step-emoji is gone — overview cards use .step-index (the step number). */

/* =============================================
   DETAILED VIEWS
============================================= */
.detailed-view {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

.step-content h3 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-size: 1.8rem !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 0.8rem !important;
  margin-bottom: 1.5rem !important;
}

.step-content p,
.step-content li {
  color: var(--text-muted) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

.step-content strong {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* =============================================
   CONTENT SECTION BLOCKS
============================================= */
.psychological-models,
.examples-section,
.research-callout,
.digital-tools,
.practical-applications,
.warning-note,
.notes-section,
.notes-controls {
  background: var(--bg-primary) !important;
  border-radius: 0 !important;
  border-left-color: var(--color-primary) !important;
  color: var(--text-muted) !important;
}

.psychological-models { border-left-color: #6b6b68 !important; }
.examples-section     { border-left-color: #4a7a4a !important; }
.research-callout     { border-left-color: var(--color-primary) !important; }
.digital-tools        { border-left-color: #4a7a8a !important; }
.warning-note         { border-left-color: #8a4040 !important; }

/* =============================================
   WHY THIS MATTERS
============================================= */
.why-matters,
body.dark-mode .why-matters,
#detailedSections .why-matters,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters,
.step7 .why-matters,
body.dark-mode .step7 .why-matters,
body.dark-mode .detailed-view.step7 .why-matters {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--color-primary) !important;
  border-left-width: 3px !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.why-matters::before,
body.dark-mode .why-matters::before {
  background: var(--bg-primary) !important;
  border: 1px solid var(--color-primary) !important;
  box-shadow: none !important;
  animation: none !important;
}

.why-matters h4,
body.dark-mode .why-matters h4,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters h4 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: var(--color-primary) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

.why-matters p,
.why-matters li,
body.dark-mode .why-matters p,
body.dark-mode .why-matters li,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters p {
  color: var(--text-muted) !important;
  font-size: 16px !important;
}

.why-matters strong,
body.dark-mode .why-matters strong {
  color: var(--text-primary) !important;
}

/* =============================================
   COMMON PITFALLS
============================================= */
.common-pitfalls,
body.dark-mode .common-pitfalls,
body.dark-mode .step7 .common-pitfalls,
body.dark-mode #detailedSections .detailed-view .step-content .common-pitfalls {
  background: var(--bg-secondary) !important;
  border: 1px solid #7e3a33 !important;
  border-left-width: 3px !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.common-pitfalls::before,
body.dark-mode .common-pitfalls::before {
  background: var(--bg-primary) !important;
  border: 1px solid #7e3a33 !important;
  box-shadow: none !important;
  animation: none !important;
}

.common-pitfalls h4,
body.dark-mode .common-pitfalls h4 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: #dc6150 !important;
  font-weight: 600 !important;
}

.pitfall-list li,
body.dark-mode .pitfall-list li,
body.dark-mode .step7 .common-pitfalls .pitfall-list li {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
}

.pitfall-list li strong,
body.dark-mode .pitfall-list li strong {
  color: var(--text-primary) !important;
}

.pitfall-list li p,
body.dark-mode .pitfall-list li p {
  color: var(--text-muted) !important;
}

/* =============================================
   GLOSSARY
============================================= */
.glossary-item,
.glossary-expanded .glossary-item,
body.dark-mode .glossary-expanded .glossary-item {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.glossary-expanded .glossary-item:hover,
body.dark-mode .glossary-expanded .glossary-item:hover {
  border-color: var(--color-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* The term has to out-weigh its definition or the card reads as one
   undifferentiated block. Was 400 at 1.1rem — near-identical to the body. */
.glossary-term,
body.dark-mode .glossary-term {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

/* Definitions are PROSE and must not be monospaced. Share Tech Mono is right
   for 3-word labels and wrong for 30-word sentences: every glyph is the same
   width, so the word shapes you actually read by disappear. Explicit family,
   normal letter-spacing, and a line-height tuned for reading. */
.glossary-definition,
body.dark-mode .glossary-definition,
.glossary-item .glossary-definition,
.glossary-item .glossary-definition * {
  font-family: 'Saira', system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
}
.glossary-item .glossary-definition strong {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

.glossary-definition strong,
body.dark-mode .glossary-definition strong {
  color: var(--color-primary) !important;
}

/* =============================================
   QUICK REFERENCE
============================================= */
.quick-reference-guide,
body.dark-mode .quick-reference-guide {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

.quick-reference-guide h2,
body.dark-mode .quick-reference-guide h2 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: var(--color-primary) !important;
}

.quick-reference-guide h3,
body.dark-mode .quick-reference-guide h3 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

.emergency-steps,
body.dark-mode .emergency-steps {
  background: var(--bg-secondary) !important;
  border: 1px solid #5a3a2a !important;
  border-radius: 0 !important;
}

.emergency-step,
body.dark-mode .emergency-step {
  background: var(--bg-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.step-number,
body.dark-mode .step-number {
  background: var(--color-primary) !important;
  color: var(--bg-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.step-content strong,
body.dark-mode .step-content strong {
  color: var(--text-primary) !important;
}

.micro-action,
body.dark-mode .micro-action {
  color: var(--text-muted) !important;
}

.remember-box,
body.dark-mode .remember-box {
  background: var(--color-success-bg) !important;
  border: 1px solid #3a5a3a !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
}

.sentence-starters,
body.dark-mode .sentence-starters {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

.starter-category strong {
  color: var(--color-primary) !important;
}

/* =============================================
   OUTCOME SECTIONS
============================================= */
.breaks-cycles,
body.dark-mode .breaks-cycles {
  background: var(--color-error-bg) !important;
  border-left-color: #8a4040 !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
}

.creates-space,
body.dark-mode .creates-space {
  background: var(--color-success-bg) !important;
  border-left-color: #4a7a4a !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
}

/* =============================================
   APPLICATIONS GRID
============================================= */
.applications-grid > div,
.practical-applications {
  background: var(--bg-primary) !important;
  border-left-color: var(--color-primary) !important;
  border-radius: 0 !important;
}

.applications-grid strong {
  color: var(--text-primary) !important;
}

.applications-grid p {
  color: var(--text-muted) !important;
}

/* =============================================
   NOTES / JOURNAL
============================================= */
.notes-section,
body.dark-mode .notes-section {
  background: var(--bg-secondary) !important;
  border-left-color: var(--color-primary) !important;
  border-radius: 0 !important;
}

.notes-title,
body.dark-mode .notes-title {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.notes-textarea,
body.dark-mode .notes-textarea,
body.dark-mode #allNotesSection textarea,
body.dark-mode #allNotesContainer textarea,
textarea {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 13px !important;
}

.notes-textarea:focus,
body.dark-mode .notes-textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

textarea::placeholder,
body.dark-mode textarea::placeholder,
.notes-textarea::placeholder,
body.dark-mode .notes-textarea::placeholder {
  color: var(--text-light) !important;
  opacity: 1 !important;
}

/* journal cards */
.journal-card,
.notes-card,
.notes-summary,
.notes-empty,
.empty-notes,
.notes-panel,
.notes-list,
body.dark-mode .journal-card,
body.dark-mode .notes-card,
body.dark-mode .notes-summary,
body.dark-mode .notes-empty,
body.dark-mode .empty-notes,
body.dark-mode #allNotesContainer > *,
body.dark-mode #allNotesSection .detailed-view {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.note-content-display {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

.empty-notes-message {
  background: var(--bg-secondary) !important;
  border: 1px dashed var(--border-light) !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
}

.notes-controls {
  background: var(--bg-primary) !important;
  border-left-color: var(--color-primary) !important;
  border-radius: 0 !important;
}

/* =============================================
   BUTTONS
============================================= */
.save-note-btn,
body.dark-mode #allNotesSection .save-note-btn {
  background: var(--color-primary) !important;
  color: var(--bg-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
}

.save-note-btn:hover {
  background: var(--color-primary-dark) !important;
}

.back-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: border-color 0.2s, color 0.2s !important;
}

.back-btn:hover {
  background: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* =============================================
   PASSWORD / LOGIN
============================================= */
.password-overlay {
  background: var(--bg-gradient-start) !important;
}

.password-box {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-xl) !important;
}

.password-box h2 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.password-box p {
  color: var(--text-muted) !important;
}

.password-input {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.password-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}

.password-btn {
  background: var(--color-primary) !important;
  color: var(--bg-primary) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.password-btn:hover {
  background: var(--color-primary-dark) !important;
}

.copyright-small {
  color: var(--text-muted) !important;
}

.auth-back-link {
  margin-top: 1.2rem !important;
  text-align: center !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* Keyboard focus indicator for modal close and other app buttons. */
.modal-close:focus-visible,
.password-btn:focus-visible,
.auth-link:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 3px !important;
}

/* Admin nav badge — amber pill with count, appears only when there are
   pending items. Lives inside the Admin group-btn. Named distinctly from
   the existing .admin-badge used in the user-list status column. */
.admin-nav-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  background: var(--color-primary) !important;
  color: var(--bg-gradient-start) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  vertical-align: middle;
}

/* =============================================
   PRE-LOGIN
============================================= */
.pre-login-section {
  background: var(--bg-gradient-start) !important;
}

.pre-login-box {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-xl) !important;
}

.pre-login-box h2 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.intro-text,
.request-access-text {
  color: var(--text-muted) !important;
}

.pre-login-form-container {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

.submit-access-btn {
  background: var(--color-primary) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.submit-access-btn:hover {
  background: var(--color-primary-dark) !important;
  transform: none !important;
}

/* =============================================
   SEARCH
============================================= */
.search-input-wrapper {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

.search-input-wrapper:focus-within {
  /* Was the same colour as the resting state, so focus was invisible.
     Uses the page surface so the field visibly lifts on focus. */
  background: var(--bg-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

.search-input {
  color: var(--text-primary) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 13px !important;
}

.search-input::placeholder {
  /* --text-light only reached 3.56:1 on the light wrapper. The placeholder
     is the only label this field has, so it needs to be readable rather
     than merely present. --text-muted clears 4.5:1 in both themes. */
  color: var(--text-muted) !important;
}

.search-shortcut {
  background: var(--bg-primary) !important;
  color: var(--text-muted) !important;
  border-radius: 0 !important;
}

.search-results,
body.dark-mode .search-results {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-xl) !important;
}

.search-result-item,
body.dark-mode .search-result-item {
  border-bottom-color: var(--border-color) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.search-result-item:hover,
.search-result-item.selected,
body.dark-mode .search-result-item:hover,
body.dark-mode .search-result-item.selected {
  background: var(--bg-primary) !important;
}

.result-title,
body.dark-mode .result-title {
  color: var(--text-primary) !important;
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
}

.result-summary,
body.dark-mode .result-summary {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.result-type,
body.dark-mode .result-type {
  background: var(--bg-primary) !important;
  color: var(--text-muted) !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

mark,
body.dark-mode mark {
  background: var(--color-warning-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 -2px 0 var(--color-primary) !important;
  border-radius: 0 !important;
}

/* Inside search results the highlight is a solid accent pill, which needs
   fixed white ink. Declared after (and !important) so it beats the generic
   mark rule above — that one would otherwise wash it out. */
.search-results mark {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* scrollbar */
.search-results::-webkit-scrollbar-track,
body.dark-mode .search-results::-webkit-scrollbar-track {
  background: var(--bg-primary) !important;
  border-radius: 0 !important;
}

.search-results::-webkit-scrollbar-thumb,
body.dark-mode .search-results::-webkit-scrollbar-thumb {
  background: var(--border-light) !important;
  border-radius: 0 !important;
}

/* =============================================
   NAVIGATION DOTS
============================================= */
.navigation {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.nav-dot {
  border-radius: 0 !important;
}

/* =============================================
   PROGRESS BAR
============================================= */
.progress-bar {
  background: var(--color-primary) !important;
}

/* =============================================
   FORMS (contact, admin inputs)
============================================= */
.contact-form {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.form-group label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  box-shadow: none !important;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.contact-submit-btn {
  background: var(--color-primary) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.contact-submit-btn:hover {
  background: var(--color-primary-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}

.contact-submit-btn::before { display: none !important; }

/* =============================================
   ADMIN PANEL
============================================= */
.stat-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

.stat-value {
  color: var(--color-primary) !important;
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-size: 2.5rem !important;
}

.stat-label {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.admin-btn,
.admin-btn-small {
  background: var(--color-primary) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.admin-btn:hover { background: var(--color-primary-dark) !important; }
.admin-btn.danger { background: #8a4040 !important; }
.admin-btn.danger:hover { background: #6a3030 !important; }

.admin-table {
  background: var(--bg-secondary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.admin-table thead {
  background: var(--bg-primary) !important;
  color: var(--text-muted) !important;
}

.admin-table th {
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

.admin-table th,
.admin-table td {
  border-bottom-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.admin-table tbody tr:hover {
  background: var(--bg-primary) !important;
}

.admin-input {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.admin-input:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
}

/* =============================================
   FOOTER
============================================= */
.footer {
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
}

/* Match the shared footer: one mono voice at 12px across the whole row,
   rather than 10px meta on the left and a condensed link on the right. */
footer,
footer .footer-left,
footer .footer-right a {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
footer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  /* Full-bleed so the top border reads as a divider across the window,
     matching the built pages. The padding has to be !important too, or the
     0 from the old shorthand wins and the text sits flush to the edge.
     Bleed values duplicated from rooslabs.css's .container > footer because
     this file's !important shorthand would otherwise override them. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 30px clamp(16px, 4vw, 56px) !important;
  width: auto !important;
}
footer .footer-left {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}
footer .footer-left a:hover,
footer .footer-right a:hover { color: var(--color-primary) !important; }

/* =============================================
   UTILITY & ENHANCED DIVIDER
============================================= */
.enhanced-divider {
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent) !important;
  opacity: 0.4 !important;
}

/* =============================================
   ANIMATION OVERRIDE — strip bouncy, keep fade
============================================= */
@keyframes floatIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179,52,44, 0); }
  70%       { box-shadow: 0 0 0 6px rgba(179,52,44, 0); }
}

/* =============================================
   ACCESSIBILITY
============================================= */
.view-btn:focus-visible,
.step-card:focus-visible,
.contact-submit-btn:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* =============================================
   AUTH FORMS
============================================= */
.auth-link {
  color: var(--color-primary) !important;
}

.auth-link:hover {
  color: var(--color-primary-dark) !important;
}

.auth-switch-text {
  color: var(--text-muted) !important;
}

/* =============================================
   TWO-TIER GROUPED NAVIGATION
============================================= */
.nav-groups {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-color);
  min-height: 0 !important;
}

.group-btn {
  padding: 10px 28px;
  border: none;
  border-bottom: 2px solid transparent;
  border-right: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-family: 'Share Tech Mono', monospace;
  /* Bumped from 10px / 0.2em — matches the rooslabs.css nav-link readability
     fix. Top-level chrome should be scannable at a glance, not squinted at. */
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  font-weight: 400;
  flex: 0 0 auto;
  width: auto;
  display: inline-block;
  margin-bottom: -1px;
}

.group-btn:hover {
  color: var(--text-primary);
  border-bottom-color: var(--color-primary);
  background: transparent;
}

.group-btn.active {
  background: transparent;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.sub-nav {
  border-top: none !important;
  margin-bottom: 24px !important;
  padding-top: 12px !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 12px !important;
}

.view-toggle.sub-nav {
  display: none;
  min-height: 0 !important;
}

.view-toggle.sub-nav.active-sub {
  display: flex;
}

============================================= */
.admin-table tbody tr.current-user {
  background: #1a1a14 !important;
}

.admin-table tbody tr.admin-user {
  background: #1a1510 !important;
}

.admin-table tbody tr.current-user.admin-user {
  background: #1a1510 !important;
}

/* =============================================
   BADGE OVERRIDES
============================================= */
.badge {
  border-radius: 0 !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
}

.admin-badge {
  background: var(--color-primary) !important;
  color: var(--bg-primary) !important;
}

.user-badge {
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
}

.current-badge {
  background: #3a6a7a !important;
  color: var(--text-primary) !important;
}

/* =============================================
   STAT CARD VALUE VISIBILITY
============================================= */
.stat-value {
  color: var(--color-primary) !important;
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  word-break: break-all !important;
}

.stat-label {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

.stat-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 20px !important;
  text-align: center !important;
}

/* Admin button hidden by default, shown by JS */
#adminNavButton {
  display: none !important;
}

#adminNavButton.visible {
  display: inline-block !important;
}

/* =============================================
   MOBILE LAYOUT — 768px and below
============================================= */

@media (max-width: 768px) {

  /* === HEADER === */
  .header { padding: 16px !important; text-align: center !important; }
  .header h1 { font-size: 1.5rem !important; }
  .header p { font-size: 13px !important; }
  .copyright-notice {
    position: static !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  /* === CONTAINER === */
  .container { padding: 10px !important; max-width: 100% !important; }

  /* === GROUP NAV — horizontal scroll === */
  .nav-groups {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .nav-groups::-webkit-scrollbar { display: none !important; }
  .group-btn {
    padding: 10px 16px !important;
    /* Bumped from 9px — too small to read on small screens. 11px keeps the
       horizontal-scroll layout from breaking but is meaningfully legible. */
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* === SUB-NAV — horizontal scroll === */
  div.view-toggle.sub-nav,
  .view-toggle.sub-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  div.view-toggle.sub-nav::-webkit-scrollbar,
  .view-toggle.sub-nav::-webkit-scrollbar { display: none !important; }

  .view-toggle.sub-nav .view-btn,
  div.view-toggle.sub-nav .view-btn {
    padding: 8px 12px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* === STEP CARDS — 2 columns === */
  #stepCards,
  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .step-card { padding: 12px !important; }
  .step-emoji { font-size: 1.2em !important; margin-bottom: 4px !important; }
  .step-title { font-size: 0.85rem !important; margin-bottom: 4px !important; }
  .step-summary { font-size: 11px !important; line-height: 1.4 !important; }

  /* === NAV DOTS — hide === */
  .navigation { display: none !important; }

  /* === STEP DETAIL === */
  .detailed-view { padding: 14px !important; }
  .step-content h3 { font-size: 1.3rem !important; }
  .step-content p, .step-content li { font-size: 14px !important; }

  /* === NOTES === */
  .notes-textarea { font-size: 16px !important; min-height: 120px !important; }

  /* === INPUTS — prevent iOS zoom === */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea { font-size: 16px !important; }

  /* === LOGIN === */
  .password-box { padding: 24px 16px !important; width: 92% !important; }

  /* === ADMIN === */
  .admin-table { display: block !important; overflow-x: auto !important; font-size: 12px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* === FOOTER === */
  .footer { font-size: 12px !important; padding: 12px !important; }

  /* === ONBOARDING === */
  #onboarding-heading { font-size: 1.5rem !important; }
  #onboarding-body { font-size: 14px !important; }
}

/* =============================================
   MOBILE LAYOUT — 480px and below
============================================= */

@media (max-width: 480px) {

  #stepCards,
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .header h1 { font-size: 1.2rem !important; }
  .stats-grid { grid-template-columns: 1fr !important; }

  /* Step prev/next stack vertically */
  .step-nav-footer {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .step-nav-footer > div { width: 100% !important; }
  .step-nav-footer button { width: 100% !important; }
}

/* =============================================
   INLINE STEP CROSS-REFERENCE LINKS
   Prose mentions of "Step 2D", "Step 4B", etc. become clickable jumps
   via navigation.js linkifyStepRefs(). Styled as subtle gold inline
   links — visible as clickable without hijacking the typography.
============================================= */
.step-content a.step-ref {
    color: var(--color-primary, #b3342c) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted var(--accent-mid, #7e3a33) !important;
    cursor: pointer;
    transition: border-bottom-color 0.2s, color 0.2s;
}
.step-content a.step-ref:hover,
.step-content a.step-ref:focus-visible {
    color: #eb8a7c !important;
    border-bottom-color: var(--color-primary, #b3342c) !important;
}

/* =============================================
   PASSWORD STRENGTH METER (registration form)
   Filled via registration.js attachStrengthMeter(). Score 0-5 maps
   to width (0%, 20%, 40%, 60%, 80%, 100%) and a color ramp from
   red (very weak) to green (very strong).
============================================= */
.password-strength {
    margin-top: 8px;
}
.pw-strength-track {
    height: 4px;
    background: var(--border-color);
    border-radius: 0;
    overflow: hidden;
}
.pw-strength-fill {
    height: 100%;
    width: 0;
    background: transparent;
    transition: width 0.2s ease, background 0.2s ease;
}
.pw-strength-fill.s1 { background: #c88a8a; }   /* very weak */
.pw-strength-fill.s2 { background: #d69a63; }   /* weak */
.pw-strength-fill.s3 { background: #c9a13a; }   /* fair */
.pw-strength-fill.s4 { background: #8ab88a; }   /* strong */
.pw-strength-fill.s5 { background: #5aa85a; }   /* very strong */
.pw-strength-label {
    margin-top: 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, #9d9d99);
}
.pw-strength-label.s1 { color: #c88a8a; }
.pw-strength-label.s2 { color: #d69a63; }
.pw-strength-label.s3 { color: #c9a13a; }
.pw-strength-label.s4 { color: #8ab88a; }
.pw-strength-label.s5 { color: #5aa85a; }

/* =============================================
   BULK ACTION BAR (user admin table)
   Appears when at least one row-checkbox is checked. Small inline toolbar
   above the table offering batch delete.
============================================= */
.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--color-primary, #b3342c);
    flex-wrap: wrap;
}
.bulk-action-bar .bulk-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary, #b3342c);
    margin-right: auto;
}
.bulk-user-checkbox,
#bulkSelectAll {
    cursor: pointer;
    accent-color: var(--color-primary, #b3342c);
}


/* =============================================
   LIGHT MODE
   Mirrors the rooslabs.com pages: the toggle writes data-theme="light"
   on <html> and persists the choice to the "roos_theme" cookie (scoped
   to .rooslabs.com, so it is shared by every subdomain), with
   localStorage "roos-theme" as a same-origin fast path. Resolution
   order is ?theme= → cookie → localStorage → dark.
   Only tokens are redefined here — no component rules, by design.
   ============================================= */
html[data-theme="light"] {
    --color-primary:              #b3342c;
    --color-primary-dark:         #8f2923;
    --color-secondary:            #7e241e;

    --bg-gradient-start:          #f5f3ef;
    --bg-gradient-end:            #eae7e1;
    --bg-primary:                 #f5f3ef;
    --bg-secondary:               #eae7e1;
    --bg-overlay:                 rgba(245, 243, 239, 0.96);
    --bg-header:                  rgba(245, 243, 239, 0.7);

    --text-primary:               #1b1b1a;
    --text-secondary:             #33332f;
    --text-muted:                 #5d5d58;
    --text-light:                 #65655e;
    --text-white:                 #1b1b1a;

    --border-color:               rgba(0, 0, 0, 0.15);
    --border-light:               rgba(0, 0, 0, 0.09);

    --color-success:              #2f6b34;
    --color-success-bg:           #e4efe2;
    --color-success-border:       #9dc09a;
    --color-success-text:         #1f4a24;

    --color-error:                #96302c;
    --color-error-bg:             #f4e2e1;
    --color-error-border:         #ce9d9a;
    --color-error-text:           #6f1f1c;
    --color-error-light-bg:       #f9eceb;

    --color-warning:              #9a5320;
    --color-warning-bg:           #f5eadf;
    --color-warning-border:       #c2703a;
    --color-warning-text:         #6f3a16;

    --color-info:                 #1d5a96;
    --color-info-bg:              #e2ebf4;
    --color-info-border:          #9ab4ce;
    --color-info-text:            #163f69;

    /* Light twins of the step tints: same hue, ~92% lightness, so the
       phase colour still reads without the card going dark. */
    --tint-step-1:                #f7e9e7;
    --tint-step-2:                #f9ece1;
    --tint-step-3:                #f8f1dd;
    --tint-step-4:                #e6edf3;
    --tint-step-7:                #e2f0ec;
    --tint-step-feedback:         #eeedeb;

    --shadow-sm:                  0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:                  0 5px 15px rgba(0, 0, 0, 0.10);
    --shadow-lg:                  0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-xl:                  0 20px 60px rgba(0, 0, 0, 0.16);
}

/* The bulk rules above hardcode dark surfaces with !important; the few that
   can't read a token need a light-mode counterpart. */
html[data-theme="light"] .pw-strength-track { background: rgba(0, 0, 0, 0.12) !important; }
html[data-theme="light"] .admin-btn.danger { background: #96302c !important; }
html[data-theme="light"] .admin-btn.danger:hover { background: #7c2622 !important; }

/* =============================================
   NAV CHROME
   The toggle and mobile menu are built by theme-toggle.js and styled in
   rooslabs.css, which ripple loads first. Only the bits that need to beat
   this file's own !important bulk are repeated here.
   ============================================= */
.nav-links .roos-theme-toggle,
.nav-links .rl-menu-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    min-height: 44px !important;
    padding: 0 14px !important;
}
.nav-links .roos-theme-toggle:hover,
.nav-links .rl-menu-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
.rl-menu-panel { background: var(--bg-primary) !important; }
.rl-menu-links a { color: var(--text-primary) !important; }
.rl-menu-links a:hover { color: var(--color-primary) !important; }

@media print {
    .roos-theme-toggle, .rl-menu-btn, .rl-menu-panel { display: none !important; }
}

/* Overview cards used to lead with an emoji. Replaced by the step number in
   mono — same role, consistent with the eyebrow/label treatment elsewhere. */
.step-index {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    color: var(--color-primary) !important;
    line-height: 1.2 !important;
}
html[data-theme="light"] .step-index { color: var(--color-primary) !important; }

/* =============================================
   ADMIN 2FA GATE BANNER
   Was inline-styled with hardcoded amber hex and IBM Plex Mono; moved here so
   it follows the tokens and light mode. It is a gate, not a notification —
   deliberately not dismissible.
   ============================================= */
.admin-2fa-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--color-primary);
    color: var(--text-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: var(--shadow-md);
}
.admin-2fa-banner__text strong {
    display: block;
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 2px;
}
.admin-2fa-banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.admin-2fa-banner__btn {
    min-height: 44px;
    padding: 0 18px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.admin-2fa-banner__btn:hover { background: var(--color-primary-dark); }
.admin-2fa-banner__btn:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}
.admin-2fa-banner__hint {
    color: var(--text-muted);
    font-size: 12px;
}
@media (max-width: 560px) {
    .admin-2fa-banner { justify-content: flex-start; font-size: 12px; }
}
@media print { .admin-2fa-banner { display: none !important; } }

/* =============================================
   RIPPLE DIAGRAM
   Nodes are links into their step, so they need a visible hover and a real
   focus ring for keyboard users. The stroke is pre-rendered at opacity 0 so
   nothing reflows on hover.
   ============================================= */
.rp-node { cursor: pointer; }
.rp-node:hover .rp-ring,
.rp-node:focus-visible .rp-ring { stroke-opacity: 1 !important; }
.rp-node:focus-visible { outline: none; }
.rp-legend-row { transition: border-color 0.2s; }
.rp-legend-row:hover { border-bottom-color: var(--color-primary) !important; }
.rp-legend-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rp-legend-row { transition: none; }
}

/* =============================================
   SITE RHYTHM — match rooslabs.com
   The app used to open on a centred, boxed title with rounded tab buttons,
   which read as a separate product. These rules give it the same page
   rhythm as the essays: a left-aligned eyebrow, a big condensed uppercase
   title, a dek, and plain tabs with an underline. Appended last so it wins
   over the older theme rules above, including their mobile overrides.
============================================= */
.header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: clamp(36px, 6vw, 80px) 0 clamp(26px, 4vw, 44px) !important;
  margin: 0 0 clamp(22px, 3vw, 34px) !important;
  display: grid !important;
  gap: 18px !important;
}
.header::before {
  content: '[ THE FRAMEWORK ]';
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent-ink, #dc6150);
}
.header h1 {
  font-family: 'Saira Condensed', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(34px, 6vw, 76px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  max-width: 20ch !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}
.header p {
  margin: 0 !important;
  max-width: 600px !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
  opacity: 1 !important;
  text-wrap: pretty;
}

/* Sub-nav: plain tabs like the group row above them, not boxed buttons. */
.view-toggle.sub-nav {
  justify-content: flex-start !important;
  gap: 4px 22px !important;
  padding: 6px 0 14px !important;
  flex-wrap: wrap !important;
}
.view-toggle.sub-nav .view-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  min-height: 44px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}
.view-toggle.sub-nav .view-btn:hover { color: var(--text-primary) !important; }
.view-toggle.sub-nav .view-btn.active {
  color: var(--accent-ink, #dc6150) !important;
  border-bottom-color: var(--color-primary, #b3342c) !important;
}

/* Step pages read like essay articles: an open panel with an accent rule. */
.detailed-view {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  border-top: 2px solid var(--color-primary, #b3342c) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.step-content h3 {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
}
.step-content p, .step-content li { line-height: 1.85 !important; }

@media (max-width: 768px) {
  .header { padding: 28px 0 22px !important; text-align: left !important; }
  .header h1 { font-size: clamp(30px, 9vw, 44px) !important; }
  .header p { font-size: 15px !important; }
  .view-toggle.sub-nav { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 18px !important; }
}