/* ==========================================================================
   /browse/ - the discovery surface, Momentum
   ==========================================================================
   Real cacheable file, linked with an absolute path (/assets/browse.css),
   never inlined. See docs/browse-sources/DESIGN.md for the page's own
   design decision record. Every color/border/radius/spacing/shadow token
   below reads its value from assets/momentum.css's own --mom-* custom
   properties (linked in the <head> of public/browse/index.html BEFORE this
   file, so this file's page-specific rules still win the cascade on any
   shared selector). No token is restated here as a hex/rgba literal.

   Mobile first: base rules target 375px, wider layout arrives via
   min-width media queries only. NO em dashes, NO italics, NO pill radii
   (999px/9999px/50% on any rectangular control) - circles only.
   ========================================================================== */

/* Russo One and Inter, self-hosted as real cacheable .woff2 files, the same
   pair and pattern every other ported page in this build already sets up
   (see public/assets/course.css). momentum.css's own --mom-font-head /
   --mom-font-body-* are CHOSEN system fallbacks for a build that could not
   load real fonts; the two local tokens below name the real families with
   the same fallback stacks after them, so this page renders the real
   Russo One / Inter instead of the system approximation. */
@font-face {
  font-family: 'Russo One';
  src: url('/assets/fonts/russo-one.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --browse-font-head: 'Russo One', 'Arial Narrow', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --browse-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body.browse-body {
  margin: 0;
  font-family: var(--browse-font-body);
  color: var(--mom-text-body);
  font-size: var(--mom-text-md);
  line-height: 1.5;
}

body.browse-body a { color: inherit; }

/* ---- Header ------------------------------------------------------------
   A light, page-local header. NOT the dashboard's #mn-bar shell (that stays
   out of scope, see DESIGN.md section 6) - just enough chrome for a member
   who lands here directly to know where they are and how to get back. */
.browse-header {
  position: relative;
  padding: var(--mom-space-6) var(--mom-space-6) var(--mom-space-5);
  border-bottom: 1px solid var(--mom-border-faint);
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.94), rgba(26, 26, 26, 0.94));
  backdrop-filter: blur(var(--mom-blur-md));
  -webkit-backdrop-filter: blur(var(--mom-blur-md));
}
.browse-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--mom-gold);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.browse-back-link:hover { color: var(--mom-gold-hot); }
.browse-back-link svg { width: 11px; height: 11px; fill: currentColor; flex-shrink: 0; }
.browse-title {
  margin: var(--mom-space-4) 0 var(--mom-space-2);
  font-family: var(--browse-font-head);
  font-weight: 900;
  font-style: normal;
  font-size: var(--mom-text-2xl);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, var(--mom-gold) 55%, var(--mom-gold-ops) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}
.browse-sub {
  margin: 0;
  color: var(--mom-text-muted);
  font-size: var(--mom-text-sm);
  max-width: 60ch;
}

/* ---- Main shell ---------------------------------------------------------- */
.browse-main {
  padding: var(--mom-space-6) var(--mom-space-6) var(--mom-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--mom-space-9);
  max-width: 1200px;
  margin: 0 auto;
}

.browse-zone { display: flex; flex-direction: column; gap: var(--mom-space-6); }

/* ---- Zone 3: search --------------------------------------------------- */
.browse-search-panel { position: relative; }
.browse-search-wrap { position: relative; }
.browse-search-icon {
  position: absolute;
  left: var(--mom-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: var(--mom-text-muted);
  pointer-events: none;
}
#browse-search-input {
  width: 100%;
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-gold);
  color: var(--mom-text);
  padding: var(--mom-space-5) var(--mom-space-5) var(--mom-space-5) 40px;
  font-size: var(--mom-text-lg);
  font-family: var(--browse-font-body);
  border-radius: var(--mom-radius-lg);
}
#browse-search-input:focus-visible {
  outline: none;
  border-color: var(--mom-gold-hot);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.16);
}
#browse-search-input::placeholder { color: var(--mom-text-muted); }

.browse-search-results {
  margin-top: var(--mom-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mom-space-3);
}
.browse-search-results[hidden] { display: none; }

/* Two visibly distinct result tiers (2026-08-10 fix). Tier A ("Found in
   these sections") is a real section-level answer: the whole row is one
   <a>, styled as before. Tier B ("Teaches this") is a module-level
   answer only - the data does not say which section, so the row is NOT
   one big link (that would imply a single confident destination); it is
   a plain container holding its own module link plus, underneath, that
   module's sections offered as a way in, explicitly not as matches. */
.browse-result-heading {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
  padding: var(--mom-space-2) var(--mom-space-2) 2px;
}
.browse-result-heading:not(:first-child) { margin-top: var(--mom-space-2); }

.browse-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mom-space-4);
  text-decoration: none;
  background: var(--mom-bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--mom-radius-lg);
  padding: var(--mom-space-4) var(--mom-space-5);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.browse-result-row:not(.browse-result-row--module):hover,
.browse-result-row:not(.browse-result-row--module):focus-visible {
  border-color: var(--mom-gold);
  box-shadow: 0 0 16px rgba(240, 193, 115, 0.16);
  outline: none;
}
.browse-result-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Tier B container: a plain block, not a link (it holds its own nested
   links, and nesting an <a> inside an <a> is invalid). */
.browse-result-row--module {
  flex-direction: column;
  align-items: stretch;
  gap: var(--mom-space-3);
}
.browse-result-modulelink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mom-space-4);
  text-decoration: none;
  border-radius: var(--mom-radius-md);
  margin: calc(-1 * var(--mom-space-2)) calc(-1 * var(--mom-space-2)) 0;
  padding: var(--mom-space-2);
  transition: background 0.18s ease;
}
.browse-result-modulelink:hover,
.browse-result-modulelink:focus-visible { background: rgba(240, 193, 115, 0.08); outline: none; }
.browse-result-module-tag {
  flex-shrink: 0;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
}
.browse-result-module-caption {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
}
.browse-result-module-sections { margin-top: 2px; }
.browse-result-crumb {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mom-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-result-crumb b { color: var(--mom-gold); font-weight: 600; }
.browse-result-label {
  font-family: var(--browse-font-head);
  font-weight: 900;
  font-style: normal;
  font-size: var(--mom-text-md);
  color: var(--mom-text);
}
.browse-result-time {
  flex-shrink: 0;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  color: var(--mom-gold);
  background: rgba(240, 193, 115, 0.12);
  border-radius: var(--mom-radius-sm);
  padding: 3px 9px;
}
.browse-search-empty,
.browse-search-hint {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  color: var(--mom-text-muted);
  padding: var(--mom-space-3) var(--mom-space-2) 0;
}

/* ---- Zone 1: start here ------------------------------------------------ */
.browse-start-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mom-space-6);
}
@media (min-width: 860px) {
  .browse-start-grid { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
}

.browse-panel-title {
  margin: 0 0 var(--mom-space-5);
  font-family: var(--browse-font-head);
  font-weight: 900;
  font-style: normal;
  font-size: var(--mom-text-lg);
  letter-spacing: 0.6px;
  color: var(--mom-text);
}

.browse-journey-route {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mom-space-2);
}
.browse-journey-step { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.browse-journey-step:last-child { border-bottom: none; }
.browse-journey-link {
  display: flex;
  align-items: center;
  gap: var(--mom-space-4);
  text-decoration: none;
  padding: var(--mom-space-3) var(--mom-space-2);
  border-radius: var(--mom-radius-md);
  transition: background 0.18s ease;
}
.browse-journey-link:hover,
.browse-journey-link:focus-visible { background: rgba(240, 193, 115, 0.08); outline: none; }
.browse-journey-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--mom-radius-sm); /* 5px, matching .mom-panel-num. Never a circle: a
                                          numbered marker is a badge, and fully rounded badges
                                          are treated as defects across the estate. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 193, 115, 0.12);
  border: 1px solid var(--mom-border-soft);
  color: var(--mom-gold);
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
}
.browse-journey-label {
  font-family: var(--browse-font-head);
  font-weight: 900;
  font-style: normal;
  font-size: var(--mom-text-base);
  letter-spacing: 0.4px;
  color: var(--mom-text-body);
}

.browse-lowcommit-panel { display: flex; flex-direction: column; gap: var(--mom-space-4); }
.browse-lowcommit-body { color: var(--mom-text-soft); font-size: var(--mom-text-sm); margin: 0; }
.browse-lowcommit-meta { display: flex; align-items: center; gap: var(--mom-space-3); flex-wrap: wrap; }
.browse-meta-figure {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 1px;
  color: var(--mom-text-muted);
  text-transform: uppercase;
}
.browse-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  align-self: flex-start;
  text-decoration: none;
  background: var(--mom-gold);
  color: #000;
  font-family: var(--browse-font-head);
  font-weight: 900;
  font-style: normal;
  font-size: var(--mom-text-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: var(--mom-space-4) var(--mom-space-6);
  border-radius: var(--mom-radius-lg); /* 9px, never a pill */
  border: 1px solid var(--mom-gold);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.browse-cta-btn:hover,
.browse-cta-btn:focus-visible {
  box-shadow: 0 0 18px rgba(240, 193, 115, 0.4);
  transform: translateY(-1px);
  outline: none;
}

/* ---- Zone 2: what is in here ------------------------------------------- */
.browse-programme-list { display: flex; flex-direction: column; gap: var(--mom-space-5); }

.browse-programme {
  border-radius: var(--mom-radius-panel);
  overflow: hidden;
}
.browse-programme > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--mom-space-5) var(--mom-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mom-space-4);
  flex-wrap: wrap;
}
.browse-programme > summary::-webkit-details-marker { display: none; }
.browse-programme-heading { display: flex; align-items: center; gap: var(--mom-space-4); flex-wrap: wrap; min-width: 0; }
.browse-programme-caret {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  fill: var(--mom-gold);
  transition: transform 0.18s ease;
}
.browse-programme[open] .browse-programme-caret { transform: rotate(90deg); }
.browse-programme-title {
  margin: 0;
  font-family: var(--browse-font-head);
  font-weight: 900;
  font-style: normal;
  font-size: var(--mom-text-lg);
  letter-spacing: 0.6px;
  color: var(--mom-text);
  text-transform: uppercase;
}
.browse-programme-note {
  margin: 2px 0 0;
  font-size: var(--mom-text-xs);
  color: var(--mom-text-muted);
}
.browse-programme-count {
  flex-shrink: 0;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-xs);
  letter-spacing: 0.8px;
  color: var(--mom-gold);
  background: rgba(240, 193, 115, 0.12);
  border-radius: var(--mom-radius-sm);
  padding: 4px 10px;
}
.browse-programme-body {
  padding: 0 var(--mom-space-6) var(--mom-space-6);
}
.browse-loading-note {
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-sm);
  color: var(--mom-text-muted);
  padding: var(--mom-space-3) 0 0;
}

/* Module list (nested inside a programme's body) */
.browse-module-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mom-space-2); }
.browse-module {
  background: var(--mom-bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--mom-radius-lg);
}
.browse-module > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mom-space-3);
  padding: var(--mom-space-4) var(--mom-space-5);
}
.browse-module > summary::-webkit-details-marker { display: none; }
.browse-module-title {
  font-family: var(--browse-font-body);
  font-weight: 600;
  font-size: var(--mom-text-sm);
  color: var(--mom-text-body);
}
.browse-module-count {
  flex-shrink: 0;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs);
  letter-spacing: 0.6px;
  color: var(--mom-text-muted);
  white-space: nowrap;
}
.browse-module-body { padding: 0 var(--mom-space-5) var(--mom-space-4); }

/* Section rows (built lazily on a module's first open) */
.browse-section-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.browse-section-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.browse-section-row:first-child { border-top: none; }
.browse-section-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mom-space-3);
  text-decoration: none;
  padding: var(--mom-space-3) var(--mom-space-2);
  border-radius: var(--mom-radius-sm);
  transition: background 0.18s ease;
}
.browse-section-link:hover,
.browse-section-link:focus-visible { background: rgba(240, 193, 115, 0.08); outline: none; }
.browse-section-label { font-size: var(--mom-text-sm); color: var(--mom-text-body); }
.browse-section-time {
  flex-shrink: 0;
  font-family: var(--mom-font-mono);
  font-size: var(--mom-text-2xs);
  color: var(--mom-gold);
  background: rgba(240, 193, 115, 0.12);
  border-radius: var(--mom-radius-sm);
  padding: 2px 7px;
}

/* Milestone list (Magnum Accelerator: milestone-level only, no nested details) */
.browse-milestone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.browse-milestone-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.browse-milestone-row:first-child { border-top: none; }
.browse-milestone-link {
  display: flex;
  align-items: center;
  gap: var(--mom-space-3);
  text-decoration: none;
  padding: var(--mom-space-3) var(--mom-space-2);
  border-radius: var(--mom-radius-sm);
  font-size: var(--mom-text-sm);
  color: var(--mom-text-body);
  transition: background 0.18s ease;
}
.browse-milestone-link:hover,
.browse-milestone-link:focus-visible { background: rgba(240, 193, 115, 0.08); outline: none; }

@media (min-width: 640px) {
  .browse-main { padding: var(--mom-space-8) var(--mom-space-9) var(--mom-space-10); }
  .browse-header { padding: var(--mom-space-7) var(--mom-space-9) var(--mom-space-6); }
}