/*
 * theme.css — Design-system palette overlay (Story #2952)
 * ----------------------------------------------------------------------------
 * A CSS custom-properties layer on top of the vendored bootstrap.min.css. No
 * SCSS, no Node/bundler build step — just :root variables served by Propshaft.
 *
 * Palette drawn from the redesign references:
 *   - rubyonrails.org homepage (tmp/refs reference: layout.png): bold Rails-red
 *     headers, soft warm pink-gray section backgrounds, dark warm code cards,
 *     near-black neutral text.
 *   - the course's ruby + Chrome hero art (ruby-chrome.png): warm ruby/gold tones.
 *
 * This file is the foundation: it defines the palette tokens and remaps a
 * conservative set of Bootstrap's global --bs-* variables onto them so the
 * vendored Bootstrap adopts the new look. Per-section restyling (code cards,
 * section headings, eyebrows, etc.) lands in the follow-up stories, consuming
 * the --color-* tokens defined here.
 */

:root {
  /* ==========================================================================
   * Palette tokens
   * ======================================================================== */

  /* --- Header / accent red (deeper) --------------------------------------- */
  --color-accent: #d30001;            /* headers, links, eyebrows, badges */
  --color-accent-rgb: 211, 0, 1;
  --color-accent-strong: #a90001;     /* hover / pressed */
  --color-accent-soft: #fbe7e6;       /* tinted chips, badges, subtle fills */

  /* --- Warm background tints (soft pink-gray bands) ----------------------- */
  --color-surface: #ffffff;           /* base / card surface */
  --color-surface-warm: #f6efed;      /* warm-tinted section background */
  --color-surface-warm-alt: #fbf6f4;  /* lighter warm tint, alternating sections */
  --color-surface-cream: #fdfbf9;     /* near-white cream */

  /* --- Dark code-card surfaces (deep warm charcoal) ----------------------- */
  --color-surface-dark: #1e1a1a;      /* code blocks / dark sections */
  --color-surface-dark-raised: #2a2423;
  --color-on-dark: #ededed;           /* text on dark surfaces */
  --color-on-dark-muted: #a59f9f;     /* muted text on dark surfaces */

  /* --- Neutral text ------------------------------------------------------- */
  --color-text: #1a1a1a;              /* primary headings + body */
  --color-text-muted: #6b6b6b;        /* secondary / supporting text */
  --color-border: #e8e1df;            /* hairline borders on warm surfaces */

  /* ==========================================================================
   * Bootstrap overlay — remap core --bs-* theme variables onto the palette so
   * the vendored Bootstrap (no recompile) inherits the new colors. Component
   * and per-section styling builds on the --color-* tokens above.
   * ======================================================================== */
  --bs-body-bg: var(--color-surface);
  --bs-body-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-bg: var(--color-surface-warm);   /* .bg-body-tertiary bands -> warm */
  --bs-border-color: var(--color-border);
  --bs-emphasis-color: var(--color-text);

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: var(--color-accent-rgb);

  --bs-link-color: var(--color-accent);
  --bs-link-color-rgb: var(--color-accent-rgb);
  --bs-link-hover-color: var(--color-accent-strong);
  --bs-link-hover-color-rgb: var(--color-accent-rgb);

  /* Buttons use their own brighter red (--brand #e21c2c, in application.css) —
   * intentionally separate from the deeper header accent above. */

  /* ==========================================================================
   * Type scale (Story #2953) — a modular (~1.25) scale for a confident, modern
   * hierarchy. Sizes are rem; consume via the tokens or the utilities below.
   * ======================================================================== */
  --fs-eyebrow: 0.8125rem;   /* 13px — uppercase section eyebrows / badges */
  --fs-small: 0.875rem;      /* 14px — captions, meta */
  --fs-body: 1rem;           /* 16px — base body copy */
  --fs-lead: 1.25rem;        /* 20px — intro / lead paragraphs */
  --fs-h3: 1.5rem;           /* 24px — sub-headings */
  --fs-h2: 2rem;             /* 32px — section titles */
  --fs-h1: 2.75rem;          /* 44px — page titles */
  --fs-display: 3.5rem;      /* 56px — hero / big rubyonrails.org-style titles */

  /* Line heights */
  --lh-tight: 1.08;          /* display + bold headings */
  --lh-snug: 1.25;           /* sub-headings */
  --lh-base: 1.6;            /* body copy */

  /* Font weights (--fw-black matches the rubyonrails.org bold titles) */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Letter spacing */
  --ls-tight: -0.02em;       /* large bold headings */
  --ls-eyebrow: 0.08em;      /* uppercase eyebrows */

  /* Monospace stack — code cards */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ==========================================================================
   * Spacing rhythm (Story #2953) — consistent section padding + whitespace.
   * ======================================================================== */
  --space-section-y: 5.5rem;      /* desktop section vertical padding */
  --space-section-y-sm: 3.5rem;   /* mobile section vertical padding */
  --space-stack: 1.25rem;         /* default gap between stacked elements */
  --space-gutter: 1.5rem;         /* grid / column gutter */
  --measure: 42rem;               /* comfortable max line length for prose */
}

/* ============================================================================
 * Design-system utilities (Story #2953)
 * Layered on top of Bootstrap — no source overrides. Components compose these;
 * nothing here restyles Bootstrap globals.
 * ==========================================================================
 *
 * Usage examples:
 *   <section class="section"> ... </section>            generous responsive padding
 *   <p class="eyebrow">What you'll learn</p>            uppercase accent label
 *   <h2 class="heading-display text-accent">…</h2>      bold red section title
 *   <h1 class="heading-display heading-display-xl">…</h1> hero-scale title
 *   <p class="lead-copy">…</p>                          muted supporting paragraph
 */

/* Section rhythm — responsive vertical padding for the generous whitespace look. */
.section {
  padding-block: var(--space-section-y-sm);
}
@media (min-width: 768px) {
  .section {
    padding-block: var(--space-section-y);
  }
}

/* Eyebrow — small uppercase accent label above a section title. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* Bold display/section titles — the rubyonrails.org "Everything you need." look.
 * Pair with .text-accent for the red treatment; size with the modifier or a
 * Bootstrap size class. */
.heading-display {
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-size: var(--fs-h2);
}
.heading-display-lg {
  font-size: var(--fs-h1);
}
.heading-display-xl {
  font-size: var(--fs-display);
}

/* Accent color helper — mirrors --color-accent without touching Bootstrap's
 * .text-primary. */
.text-accent {
  color: var(--color-accent) !important;
}

/* Lead / supporting paragraph under a heading. */
.lead-copy {
  font-size: var(--fs-lead);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

/* Constrain prose to a comfortable measure. */
.measure {
  max-width: var(--measure);
}

/* ============================================================================
 * Badge / eyebrow pill (Story #2954) — Badge::BadgeComponent. A small uppercase
 * pill chip; variants map to the palette tokens.
 * ========================================================================== */
.badge-pill {
  display: inline-block;
  padding: 0.4em 0.9em;
  border-radius: 50rem;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1;
}
.badge-pill-accent {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
.badge-pill-light {
  background-color: var(--color-surface);
  color: var(--color-text);
}
.badge-pill-dark {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark);
}

/* ============================================================================
 * Code card (Story #2955) — Code::CodeCardComponent. A dark, rubyonrails.org-style
 * code visual: filename header bar + code body. Token colors are applied to
 * hand-marked .tok-* spans (no JS highlighter / build step).
 * ========================================================================== */
.code-card {
  background-color: var(--color-surface-dark);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
}
.code-card-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background-color: var(--color-surface-dark-raised);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.code-card-dots {
  display: inline-flex;
  gap: 0.35rem;
}
.code-card-dots span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
}
.code-card-filename {
  color: var(--color-on-dark-muted);
  font-size: var(--fs-small);
  font-family: var(--font-mono);
}
.code-card-body {
  margin: 0;
  padding: 1.25rem;
  color: var(--color-on-dark);
  font-size: var(--fs-small);
  line-height: 1.6;
  overflow-x: auto;
}
.code-card-body code {
  font-family: var(--font-mono);
}

/* Token colors for hand-marked snippets (a calm dark theme; keyword ties to red). */
.tok-keyword  { color: #ff7a85; }
.tok-constant { color: #f7c469; }
.tok-string   { color: #9ece6a; }
.tok-symbol   { color: #7dcfff; }
.tok-method   { color: #7aa2f7; }
.tok-comment  { color: #6b7280; font-style: italic; }

/* ============================================================================
 * Navbar restyle (Story #2956) — warm at the top of the page, transitioning to a
 * white + shadow bar once scrolled (see the navbar Stimulus controller). Overrides
 * the base .site-navbar (application.css) on the public site only (theme.css is not
 * loaded in the admin layout, so the admin nav is untouched).
 * ========================================================================== */
.site-navbar {
  background-color: var(--color-surface-warm);
  padding-block: 0.65rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Past the scroll threshold (class toggled by the navbar Stimulus controller). */
.site-navbar.site-navbar--scrolled {
  background-color: var(--color-surface);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.site-navbar .navbar-brand {
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.site-navbar .nav-link {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-link.active {
  color: var(--color-accent);
}

/* ============================================================================
 * Hero restyle (Story #2957) — light, warm rubyonrails.org-style hero. Overrides
 * the dark gradient defined in application.css (public site only).
 * ========================================================================== */
.site-hero {
  background: linear-gradient(180deg, var(--color-surface-warm) 0%, var(--color-surface) 72%);
  color: var(--color-text);
}
.site-hero .hero-rating {
  color: #e0a800; /* amber stars, legible on the warm background */
}

/* White secondary button (e.g. hero "Preview the course") — white fill, hairline
 * border, dark label; border + label turn accent on hover. */
.btn-white {
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-accent);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-active-color: var(--color-accent);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--color-accent);
}

/* Hero stat card (under the CTAs) — label + value on a white card with a soft
 * drop shadow. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 0.85rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
  padding: 1.15rem 1.5rem;
  row-gap: 1rem;
}
.hero-stat {
  padding-inline: 1.25rem;
}
.hero-stat:first-child {
  padding-left: 0;
}
/* On phones, and in the narrow two-column range (992-1200px, where each hero
 * column is only ~480px), the four stats become a tidy 2x2 grid. */
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1199.98px) {
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-stat {
    padding-inline: 0;
  }
  .hero-stat:nth-child(odd) {
    padding-right: 1.25rem;
  }
  .hero-stat:nth-child(even) {
    padding-left: 1.25rem;
  }
}

/* Hero course-preview thumbnail (ruby-chrome.png) — a clickable video preview
 * (Udemy/ZTM style). Click-to-play modal is wired in a follow-up. */
.hero-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.hero-preview-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-preview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-accent);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.hero-preview-play svg {
  margin-left: 4px; /* optically center the triangle */
}
.hero-preview:hover .hero-preview-play,
.hero-preview:focus-visible .hero-preview-play {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: #fff;
}
.hero-preview-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 1rem 0.9rem;
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
.hero-preview:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ============================================================================
 * Check badge (Story #2958) — accent checkmark for objective / feature lists.
 * ========================================================================== */
.check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  margin-top: 0.15rem;
}

/* ============================================================================
 * Curriculum (Story #2959) — expandable sections (Bootstrap accordion) revealing
 * each section's lectures. Active/focus styling mirrors .faq-accordion.
 * ========================================================================== */
.curriculum-accordion {
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-active-bg: var(--color-accent-soft);
  --bs-accordion-active-color: var(--color-accent-strong);
  --bs-accordion-btn-focus-border-color: var(--color-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--color-accent-rgb), 0.25);
}
.curriculum-accordion .accordion-button {
  font-weight: var(--fw-semibold);
}
/* Pin the chevron to the far right so the lectures/duration meta sits just before
 * it (otherwise both take margin-left:auto and the meta ends up centered). */
.curriculum-accordion .accordion-button::after {
  margin-left: 0;
}
/* Lecture list — subtly tinted so it reads as nested content under the header. */
.curriculum-accordion .accordion-body {
  background-color: var(--color-surface-warm-alt);
}
.curriculum-lecture {
  padding: 0.7rem 1.25rem;
}
.curriculum-lecture + .curriculum-lecture {
  border-top: 1px solid var(--color-border);
}
.curriculum-lecture-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}
.curriculum-lecture-title {
  color: var(--color-text);
}
.curriculum-lecture-preview {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  line-height: inherit;
}
.curriculum-lecture-preview:hover {
  text-decoration: underline;
}

/* Course-preview modal — dark panel with a featured player + a playlist of all
 * available preview videos. */
.video-modal .modal-content {
  background-color: #1b1917;
  color: var(--color-on-dark);
  border: 0;
  border-radius: 0.85rem;
  padding: 1.25rem 1.25rem 1rem;
}
.video-modal-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.video-modal-title {
  font-weight: var(--fw-bold);
  color: var(--color-on-dark);
}
.video-modal-list-heading {
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
}
.video-modal-list {
  max-height: 15rem;
  overflow-y: auto;
}
.video-modal-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.7rem 0.5rem;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark);
  text-align: left;
}
.video-modal-list li:first-child .video-modal-item {
  border-top: 0;
}
.video-modal-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
.video-modal-item.active {
  background-color: rgba(255, 255, 255, 0.1);
}
.video-modal-item-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-on-dark-muted);
}
.video-modal-item.active .video-modal-item-icon {
  color: var(--color-accent);
}
.video-modal-item-title {
  flex: 1 1 auto;
  font-weight: var(--fw-medium);
}
.video-modal-item-duration {
  flex-shrink: 0;
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
}

/* Video modal — placeholder shown when a preview has no video uploaded yet. */
.video-modal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.65);
  font-weight: var(--fw-semibold);
}
.video-modal-empty[hidden] {
  display: none;
}

/* ============================================================================
 * Testimonials (Story #2961) — review cards with star rating + avatar.
 * ========================================================================== */
.testimonial-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.85rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.04);
}
.star-rating {
  color: #e0a800;
  letter-spacing: 0.1em;
}
.testimonial-quote {
  color: var(--color-text);
}
.testimonial-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-weight: var(--fw-bold);
}

/* ============================================================================
 * Instructor (Story #2960) — photo/placeholder + bio.
 * ========================================================================== */
.instructor-avatar {
  width: 140px;
  height: 140px;
  object-fit: cover;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}
.instructor-avatar-placeholder {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 3rem;
  font-weight: var(--fw-bold);
}

/* Instructor reviews cloud — two staggered columns of small review cards over a
 * soft blob, tight with a slight overlap (Instructor::TestimonialsComponent). */
/* Contain the cloud's blob (its negative inset extends past the column) so it
 * doesn't cause horizontal scroll on narrow screens. */
#instructor {
  overflow-x: clip;
}
.instructor-cloud {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 2.5rem;
  border-radius: 0.85rem;
}
.instructor-cloud-col {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Stagger the second column down, and let its cards lean back over the gutter a
 * touch so the two columns overlap slightly. */
.instructor-cloud-col--offset {
  margin-top: 2.5rem;
  margin-left: -1.85rem;
  z-index: 2;
}
.instructor-cloud-card {
  padding: 1.05rem 1.2rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.08);
}
.instructor-cloud-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.instructor-cloud-stars {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.instructor-cloud-stars .filled {
  color: #e0a800;
}
.instructor-cloud-stars .empty {
  color: #d8d2d0;
}

.btn-brand--instructor {
  width: 50%;
}

@media (max-width: 575.98px) {
  .instructor-cloud {
    flex-direction: column;
  }
  .instructor-cloud-col--offset {
    margin-top: 0;
    margin-left: 0;
  }
  .btn-brand--instructor {
    width: 100%;
  }
}

/* ============================================================================
 * FAQ (Story #2962) — accordion themed via Bootstrap's --bs-accordion-* vars
 * (no source override). Active panels use the accent; focus ring is on-brand
 * for a clearly visible keyboard focus state.
 * ========================================================================== */
.faq-accordion {
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-active-bg: var(--color-accent-soft);
  --bs-accordion-active-color: var(--color-accent-strong);
  --bs-accordion-btn-focus-border-color: var(--color-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--color-accent-rgb), 0.25);
}
.faq-accordion .accordion-button {
  font-weight: var(--fw-semibold);
}

/* ============================================================================
 * Footer (Story #2963) — refined dark close, palette-aligned. Overrides the base
 * .site-footer (application.css) on the public site only.
 * ========================================================================== */
.site-footer {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark-muted);
}
.site-footer__brand {
  color: var(--color-on-dark);
}
.site-footer__mark {
  color: var(--color-accent);
}
.site-footer a {
  color: var(--color-on-dark);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--color-accent);
}
.footer-heading {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
  margin-bottom: 1rem;
}
.footer-divider {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
 * Tabbed code editor (Code::EditorComponent) — VS Code-style panel: a tab bar of
 * files over switchable, fixed-height code panes.
 * ========================================================================== */
.code-editor {
  background-color: var(--color-surface-dark);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
}
.code-editor-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #15110f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.code-editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--color-on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  white-space: nowrap;
  cursor: pointer;
}
.code-editor-tab.active {
  background-color: var(--color-surface-dark);
  color: var(--color-on-dark);
}
.code-editor-tab:hover:not(.active) {
  color: var(--color-on-dark);
}
.code-editor-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.code-editor-dot--rb { background-color: #cc342d; }
.code-editor-dot--js { background-color: #f1e05a; }
.code-editor-dot--css { background-color: #563d7c; }
.code-editor-dot--txt { background-color: #8a8a8a; }
.code-editor-panes {
  height: 24rem;
  overflow-y: auto;
}
.code-editor-body {
  display: flex;
  align-items: stretch;
}
.code-editor-gutter {
  margin: 0;
  padding: 1.25rem 0.65rem 1.25rem 1rem;
  text-align: right;
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.6;
  user-select: none;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.code-editor-code {
  margin: 0;
  padding: 1.25rem;
  color: var(--color-on-dark);
  font-size: var(--fs-small);
  line-height: 1.6;
  font-family: var(--font-mono);
  overflow-x: auto;
  flex: 1 1 auto;
}
.code-editor-code code {
  font-family: var(--font-mono);
}

/* Glowing glass frame around the editor — a frosted, reddish-tinted thick border
 * with a soft brand-red glow behind it. */
.code-editor-frame {
  padding: 0.75rem;
  border-radius: 1.15rem;
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(var(--brand-rgb), 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 4rem rgba(var(--brand-rgb), 0.3),
    0 1.5rem 3rem rgba(var(--brand-rgb), 0.16),
    0 1rem 2rem rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}