/**
 * 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 */
  /* Translucent, like the rest of the site (rooslabs.css --border), so a
     rule reads the same over the page and over a card. Was solid #2a2a2a. */
  --border-color:               rgba(255, 255, 255, 0.13);
  --border-light:               rgba(255, 255, 255, 0.2);

  /* 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: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !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;
  /* normal, not 1: the built pages set no line-height, and the wordmark's
     54px box is what makes their bar 83px tall. 1 made this bar 69px. */
  line-height: 1.2 !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 .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: 24px;
  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 0;
  border: none;
  border-bottom: 2px solid transparent;
  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: 0 16px 40px !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 0 !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(38px, 7vw, 92px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  max-width: 22ch !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}
.header p {
  margin: 0 !important;
  max-width: 600px !important;
  font-size: clamp(17px, 1.7vw, 21px) !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 p { font-size: 17px !important; }
  .view-toggle.sub-nav { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 18px !important; }
}

/* Section titles inside the app match the essay H2: condensed, uppercase,
   clamp(24px, 3vw, 36px), no rule underneath. */
.step-content h3 {
  font-size: clamp(24px, 3vw, 36px) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 1.2rem !important;
}

/* =============================================
   STEP PAGES — DECLUTTER (2026-10-02)
   The step pages were boxes inside boxes: the view panel, then "Why This
   Step Matters" as a red box, then "Common Pitfalls" as a second red box,
   then every pitfall as its own bordered card, with a bullet AND an × on
   each. Four levels of borders in three reds. Everything below flattens
   that into the essay rhythm the rest of the site uses: open sections
   divided by a single hairline, a mono eyebrow as the section label, and
   the × / ✓ carrying the list on their own.
   Content in content.js is untouched; this is CSS only. Later in the file
   than the WHY THIS MATTERS / COMMON PITFALLS blocks, so it wins.
============================================= */

/* Lead paragraph of each step reads as the dek. */
.step-content > p:first-of-type {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--text-primary) !important;
  max-width: 64ch;
  margin-bottom: 18px !important;
}
.step-content p,
.step-content li {
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 72ch;
}
.step-content ul,
.step-content ol { margin: 10px 0 20px !important; padding-left: 22px !important; }
.step-content li { margin-bottom: 6px !important; }

/* Asides: keep the coloured left rule (it means something), lose the box. */
.step-content .research-callout,
.step-content .psychological-models,
.step-content .digital-tools {
  background: transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left-width: 2px !important;
  padding: 4px 0 4px 20px !important;
  margin: 22px 0 26px !important;
}
.step-content .research-callout > strong,
.step-content .psychological-models > strong,
.step-content .digital-tools > strong {
  display: block;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  margin-bottom: 10px;
}

/* "Why This Step Matters" and "Common Pitfalls": open sections, one hairline. */
.step-content .why-matters,
.step-content .common-pitfalls,
body.dark-mode .why-matters,
body.dark-mode .common-pitfalls,
#detailedSections .why-matters,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters,
body.dark-mode #detailedSections .detailed-view .step-content .common-pitfalls {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 28px 0 0 !important;
  margin: 36px 0 0 !important;
  box-shadow: none !important;
}
.step-content .why-matters::before,
.step-content .common-pitfalls::before { display: none !important; content: none !important; }

.step-content .why-matters h4,
.step-content .common-pitfalls h4,
body.dark-mode .why-matters h4,
body.dark-mode .common-pitfalls h4 {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--accent-ink, #dc6150) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
.step-content .why-matters p { margin-bottom: 12px !important; }
.step-content .why-matters p:last-child { margin-bottom: 0 !important; }

/* Pitfalls: the × and ✓ ARE the bullets. */
.step-content .pitfall-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.step-content .pitfall-list li,
body.dark-mode .pitfall-list li,
body.dark-mode .step7 .common-pitfalls .pitfall-list li {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  column-gap: 6px !important;
  row-gap: 4px !important;
  align-items: baseline;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.step-content .pitfall-list li:first-child { border-top: none !important; padding-top: 0 !important; }
.step-content .pitfall-list li:last-child { padding-bottom: 0 !important; }
.step-content .pitfall-list .pitfall-wrong,
.step-content .pitfall-list .pitfall-right {
  grid-row: 1 / span 2;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  text-align: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
.step-content .pitfall-list .pitfall-wrong { color: var(--accent-ink, #dc6150) !important; }
.step-content .pitfall-list .pitfall-right { color: #5dcaa5 !important; }
.step-content .pitfall-list li > strong {
  grid-column: 2;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.step-content .pitfall-list li > p {
  grid-column: 2;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
}
/* The "Instead:" item has its text as a bare node after <strong>; the grid
   would push that text into column 1. Let it flow as one block instead. */
.step-content .pitfall-list li:has(> .pitfall-right) {
  display: block !important;
  padding-left: 34px !important;
  position: relative;
}
.step-content .pitfall-list li:has(> .pitfall-right) .pitfall-right {
  position: absolute; left: 0; top: 14px;
}
.step-content .pitfall-list li:has(> .pitfall-right) > strong { display: inline !important; }

/* Notes: same open-section rhythm, no left-rule box. */
.notes-section,
body.dark-mode .notes-section {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 28px 0 0 !important;
  margin-top: 36px !important;
}
.notes-title,
body.dark-mode .notes-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 14px !important;
}

/* =============================================
   FRAMEWORK HERO + TOOLBAR — match the Dispatch page (2026-10-02)
   Side by side with Dispatch, the framework still read as its own thing:
   the eyebrow had no rule, the dek was full-ink, the search box floated
   centred inside the hero, and the Learn/Practice row sat loose under it.
   Dispatch is the pattern: eyebrow + hairline + right-hand label, muted
   dek, hero closed by a rule, then a TOOLBAR row (controls), then the
   content. Here the toolbar is the group tabs + search, and the sub-nav
   is the row beneath it. Appended last so it wins.
============================================= */
.header {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 22px !important;
  padding: clamp(46px, 8vw, 104px) 0 clamp(34px, 5vw, 62px) !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}
/* Eyebrow row — drawn by a small JS helper in navigation.js as a real flex
   row (label · flexible 1px line · right label), exactly like the DC pages.
   The earlier pseudo-element version measured the gap in em and the line
   neither started at the label nor stopped at the count. */
.framework-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.framework-eyebrow .fe-label { color: var(--accent-ink, #dc6150); }
.framework-eyebrow .fe-line { flex: 1 1 40px; height: 1px; background: var(--border-color); min-width: 40px; }
.header::before, .header::after { content: none !important; }
.header h1 { max-width: 22ch !important; }
.header p {
  color: var(--text-muted) !important;      /* Dispatch dek is muted, not full ink */
  font-size: clamp(17px, 1.7vw, 21px) !important;
  max-width: 600px !important;
}

/* Search moves out of the hero into the toolbar row below it. */
.header .search-container { display: none !important; }

/* One compact toolbar band: hero rule above, sub-nav rule below. The group
   tabs and search share the first row; the sub-nav sits tight under the
   tabs. Before this, hero padding + toolbar padding + sub-nav margins
   stacked to ~300px of empty space between the dek and the first card. */
.framework-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 6px 0 0;
  margin: 0;
}
.framework-toolbar .nav-groups {
  margin: 0 !important;
  border-bottom: none !important;
  flex: 1 1 auto;
  gap: 22px !important;
}
.framework-toolbar .search-container {
  display: block !important;
  position: relative;
  flex: 0 1 300px;
  margin: 0 !important;
  max-width: 100%;
}
.framework-toolbar .search-input-wrapper {
  margin: 0 !important;
  max-width: none !important;
  border: 1px solid var(--border-color) !important;
  background: transparent !important;
  border-radius: 0 !important;
  min-height: 40px;
}
.framework-toolbar .search-input {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.framework-toolbar .search-input::placeholder { text-transform: uppercase; letter-spacing: 0.1em; }
.group-btn { padding: 10px 0 !important; min-height: 40px !important; }
.view-toggle.sub-nav {
  border-top: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0 0 10px !important;
  margin: 0 0 clamp(24px, 3vw, 36px) !important;
}
/* Hero bottom = the DC pages' clamp(34px, 5vw, 62px). Measured against
   Dispatch, not guessed. */
.header { padding-bottom: clamp(34px, 5vw, 62px) !important; }
@media (max-width: 768px) {
  .header::after { display: none; }
  .framework-toolbar .search-container { flex-basis: 100%; }
}

/* Final pin for the toolbar stack (beats the base .view-toggle margin and
   any earlier rhythm rules). Order on the page:
   hero → rule → [tabs | search] → sub-nav → rule → cards. */
/* Rule → controls = Dispatch's toolbar-section top pad, clamp(24px, 4vw, 40px). */
.framework-toolbar { padding-top: clamp(24px, 4vw, 40px) !important; margin: 0 !important; }
.framework-toolbar .nav-groups { padding: 0 !important; margin: 0 !important; border-bottom: none !important; }
.view-toggle.sub-nav { margin-top: 6px !important; padding-top: 0 !important; }
#overviewSection, #detailedSections { margin-top: 0 !important; }

/* Dek in the body face (Saira), like every DC hero. The base .header p never
   pinned a family, so whatever won the cascade could render in the system
   font. Same size/leading/colour as Dispatch's dek. */
.header p {
  font-family: 'Saira', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(17px, 1.7vw, 21px) !important;
  line-height: 1.5 !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
  max-width: 600px !important;
  margin: 0 !important;
  text-wrap: pretty;
}

/* Toolbar geometry = Dispatch's toolbar section, measured: the rule, then
   clamp(18px,3vw,28px) to the control row, controls 44px tall, then
   clamp(18px,3vw,28px) to the next rule. Sub-nav is that next row. */
.framework-toolbar {
  padding: clamp(18px, 3vw, 28px) 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  gap: 14px 24px !important;
}
.framework-toolbar .nav-groups { padding: 0 !important; }
.group-btn { padding: 0 !important; min-height: 44px !important; line-height: 44px !important; border-bottom-width: 2px !important; }
.view-toggle.sub-nav {
  margin: 0 0 clamp(28px, 4vw, 44px) !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  min-height: 44px !important;
  align-items: stretch !important;
}
.view-toggle.sub-nav .view-btn { min-height: 44px !important; line-height: 44px !important; padding: 0 !important; }

/* search.js injects .search-container { margin: 30px auto 0 } at runtime,
   after every stylesheet, which is where the extra toolbar height came from.
   Inside the toolbar the box has no margin and sits on the control row. */
.framework-toolbar .search-container { margin: 0 !important; max-width: none !important; flex: 0 1 320px !important; }
.framework-toolbar .search-input-wrapper { margin: 0 !important; }
.framework-toolbar { align-items: center !important; }

/* Everything in the toolbar row is exactly one 44px control tall. The search
   box had no pinned height (its wrapper, input and the absolutely-positioned
   results list all came from the base sheet), so whichever of them was
   tallest set the row height. Measured live at 77px rule→tabs instead of 27. */
.framework-toolbar { min-height: 0 !important; }
.framework-toolbar .search-container { height: 44px !important; margin: 0 !important; padding: 0 !important; display: block !important; }
.framework-toolbar .search-input-wrapper { height: 44px !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; }
.framework-toolbar .search-input { height: 42px !important; padding: 0 !important; margin: 0 !important; line-height: 42px !important; }
.framework-toolbar .search-results { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; margin: 0 !important; }
.framework-toolbar .search-results.hidden { display: none !important; }

/* Tabs are 44px like every other control. line-height: 44px plus the base
   sheet's padding and 2px underline stacked to 66px. */
.framework-toolbar .group-btn { height: 44px !important; min-height: 0 !important; line-height: 1 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; }
.framework-toolbar .nav-groups { align-items: center !important; }
.view-toggle.sub-nav .view-btn { height: 44px !important; min-height: 0 !important; line-height: 1 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; }

/* Footer — Dispatch's footer, value for value. It is the LAST child of
   .container, which has 56px bottom padding and a 1280px max width. So:
   break out to the full viewport (same trick as the nav), eat the
   container's bottom padding with a negative margin, keep the email in
   its written case, and let the rule run edge to edge. */
footer, .footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  margin: clamp(44px, 7vw, 84px) 0 -56px calc(50% - 50vw) !important;
  padding: 30px clamp(16px, 4vw, 56px) !important;
  border-top: 1px solid var(--border-color) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
  text-align: left !important;
  background: transparent !important;
}
footer .footer-left { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; margin: 0 !important; }
footer a, footer .footer-right { color: var(--text-muted) !important; text-decoration: none !important; font: inherit !important; letter-spacing: inherit !important; text-transform: none !important; margin: 0 !important; }
footer a:hover { color: var(--color-primary) !important; }