/*
 * Shared readability-over-the-starfield system for every result/reading
 * page: Self Map, Prashna and the Kids assessment report. Fixed once here
 * rather than three times in three templates.
 *
 * THE BUG: result text (near-white) was drawn straight over the moving
 * starfield canvas with no background of its own, so a star passes behind
 * a letter's stroke and small text in particular becomes hard to read.
 * Several wrapper classes shared across all three pages (.kids-report,
 * .selfmap-section, .prashna-box, .prashna-verdict, .selfmap-actions, the
 * "You asked"/report-intro lines) had no background at all -- only a
 * border or nothing. See docs/READING_PANELS_AUDIT.md for the full list.
 *
 * THE FIX, in one class: .reading-panel. Added alongside each wrapper's
 * existing class(es) in the three templates (purely additive -- nothing
 * removed, no layout restructuring), it gives that element a near-opaque
 * background, a subtle border and rounded corners, so the text inside sits
 * on a surface instead of on the canvas. Scoped under .cosmos throughout
 * this file (as cosmos.css itself is) so nothing here reaches the admin
 * paper theme -- `.kids-report` is also used, unpaneled, inside the admin
 * SKILLS.md viewer (templates/skills_doc.html), which must render exactly
 * as before.
 *
 * Loaded after both admin.css and cosmos.css (see templates/
 * public_base.html), so its rules win on equal selector specificity by
 * cascade order alone -- nothing here needed a higher-specificity selector
 * to take effect.
 */

.cosmos {
  /* --- New design tokens (this task) -------------------------------- */
  --text-body: #edebf5;
  --text-heading: #ffffff;
  --text-secondary: #c9c6d9;
  --panel-bg: rgba(10, 10, 24, 0.90);
  --panel-border: rgba(255, 255, 255, 0.08);
  --focus-ring: var(--star-gold);
  --radius-panel: 14px;
  --space-panel: 1.25rem 1.5rem;
}

/* --- The component -------------------------------------------------- */

.cosmos .reading-panel {
  background: var(--panel-bg);
  border-radius: var(--radius-panel);
  /* inset box-shadow, not `border`: several of these elements (the
     .selfmap-section--* variants especially) already carry a colour-coded
     border-left accent that a `border` shorthand here would silently
     overwrite. A shadow never touches the border-left property at all. */
  box-shadow: inset 0 0 0 1px var(--panel-border);
  padding: var(--space-panel);
  color: var(--text-body);
  /* Near-opaque already (0.90) -- the blur is a polish, not the thing
     doing the readability work, so it is safe to drop entirely on mobile
     below, same as the rest of this app's panels. */
  backdrop-filter: blur(10px);
}

.cosmos .reading-panel h1,
.cosmos .reading-panel h2,
.cosmos .reading-panel h3 {
  color: var(--text-heading);
}

/* Secondary/meta text specifically inside a panel -- lighter than the old
   --text-muted, per this task's own token, but still AA against
   --panel-bg (checked in tests/test_reading_panels_contrast.py). */
.cosmos .reading-panel .cases__meta,
.cosmos .reading-panel .field__hint,
.cosmos .reading-panel .kids-report__sub,
.cosmos .reading-panel .kids-report__source,
.cosmos .reading-panel .selfmap-card__hint {
  color: var(--text-secondary);
}

/* A panel nested inside another (e.g. a flip card's own count badge sits
   outside any .reading-panel, but .kids-combined articles sit inside a
   now-paneled .kids-report section) does not also need the blur -- one
   blurred surface behind another buys nothing and costs a repaint. */
.cosmos .reading-panel .reading-panel {
  backdrop-filter: none;
}

/* --- Typography floor: nothing smaller than 14px on a result page ---- */
/*
 * Every selector below is exclusive to the three result pages and the
 * shared flip-card partial (confirmed by grep against templates/ before
 * writing this -- see the audit doc) except .pill, .cases__meta and
 * .field__hint, which the admin paper theme also uses elsewhere; all three
 * are scoped under .cosmos here, so an admin screen (which never carries
 * that class) is untouched.
 */
.cosmos .pill,
.cosmos .cases__meta,
.cosmos .field__hint,
.cosmos .tag-chip,
.cosmos .kids-combined dt,
.cosmos .selfmap-signal h2,
.cosmos .selfmap-card__title,
.cosmos .selfmap-card__hint,
.cosmos .selfmap-card__hedge,
.cosmos .selfmap-card__count,
.cosmos .selfmap-actions h2,
.cosmos .selfmap-reflect h2,
.cosmos .kids-report__source {
  font-size: 0.875rem; /* 14px */
}

/* Body copy: >=16px, 1.6-1.7 line-height, already <= 68ch via the existing
   --measure variable most of these containers already set. */
.cosmos .reading-panel p,
.cosmos .reading-panel li,
.cosmos .reading-panel dd,
.cosmos .selfmap-card__fact,
.cosmos .selfmap-card__text {
  font-size: 1rem;
  line-height: 1.65;
}

/* No glow/shadow on body text -- readability over flourish here specifically,
   even though headings elsewhere in the theme keep theirs. */
.cosmos .reading-panel,
.cosmos .reading-panel * {
  text-shadow: none;
}

/* --- Kids assessment: larger body type, per this task's own spec ----- */
/*
 * .kids-results wraps only the Kids report's own result sections in
 * templates/kids_report.html -- Self Map's "What went into this" section
 * reuses the bare .kids-report class without this wrapper, so it is not
 * affected and keeps the general 16px treatment above.
 */
.cosmos .kids-results .reading-panel p,
.cosmos .kids-results .reading-panel li,
.cosmos .kids-results .reading-panel dd,
.cosmos .kids-results .kids-report__line,
.cosmos .kids-results .kids-combined dd {
  font-size: 1.125rem; /* 18px */
  line-height: 1.7;
  max-width: 60ch;
}

/* --- Focus ------------------------------------------------------------ */

.cosmos .reading-panel:focus-visible,
.cosmos a.reading-panel:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Small screens: drop the blur, same reasoning as the rest of this
   theme's panels (static/css/cosmos.css's own 640px rule) -- the surface
   is already near-opaque at 0.90, so nothing becomes unreadable. ------- */
@media (max-width: 640px) {
  .cosmos .reading-panel {
    backdrop-filter: none;
  }
}

/* --- Reduced motion: no new work needed here -- static/css/admin.css's
   existing flip-card rules already strip the 3D transform and transition,
   and galaxy-hero.js already freezes the starfield. Nothing in this file
   adds motion of its own. ------------------------------------------------ */

/* --- Print: white page, black text, no starfield, nothing collapsed -- */
@media print {
  #galaxy-canvas {
    display: none;
  }
  .cosmos {
    background: #ffffff;
    color: #000000;
  }
  .cosmos .reading-panel {
    background: #ffffff;
    color: #000000;
    box-shadow: none;
    border: 1px solid #000000;
    backdrop-filter: none;
  }
  .cosmos .reading-panel h1,
  .cosmos .reading-panel h2,
  .cosmos .reading-panel h3,
  .cosmos .reading-panel .cases__meta,
  .cosmos .reading-panel .field__hint,
  .cosmos .reading-panel .kids-report__sub {
    color: #000000;
  }
  .cosmos a {
    color: #000000;
  }
}