/* ==========================================================================
   IMMERSION — base
   Element defaults and the components shared across every screen.

   Every value here comes from tokens.css. No raw hex.

   Note for anyone porting the Phase 1 child-theme CSS: the `html body` /
   `html h1` prefixes that file carried existed only to out-specify Talemy's
   customizer output. There is no parent theme here, so plain selectors are
   correct and the prefixes have been removed deliberately.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--imm-font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--imm-body);
  background-color: var(--imm-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* LearnDash renders inline icons and sized images inside its own layouts.
   `display: block` breaks them out of the line they belong on, and `height:
   auto` collapses ones it sizes explicitly — so the reset is withdrawn inside
   LearnDash markup rather than imposed on it. */
.learndash-wrapper img,
.learndash-wrapper svg,
.learndash-wrapper picture {
  display: revert;
  height: revert;
}

/* `font: inherit` is safe — it only unifies the family. `color: inherit` was
   NOT: LearnDash buttons set a coloured background and rely on their own text
   colour, so inheriting body colour put dark text on a dark button. Only the
   family and size are inherited now. */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* --- Headings ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--imm-s-3);
  font-weight: 800;
  line-height: 1.25;
  color: var(--imm-text);
  letter-spacing: var(--imm-track-h1);
}

h1 { font-size: 29px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }

h4, h5, h6 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: normal;
}

p { margin: 0 0 var(--imm-s-5); }

/* --- Links ---------------------------------------------------------------- */

a {
  color: var(--imm-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--imm-t-btn);
}

a:hover,
a:focus { color: var(--imm-link-hover); }

/* --- Accessibility -------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.imm-skip-link:focus {
  position: fixed;
  top: var(--imm-s-3);
  left: var(--imm-s-3);
  z-index: 1000;
  width: auto;
  height: auto;
  padding: var(--imm-s-3) var(--imm-s-5);
  clip: auto;
  clip-path: none;
  background: var(--imm-ink);
  color: #fff;
  border-radius: var(--imm-r-nav);
}

:focus-visible {
  outline: 2px solid var(--imm-teal);
  outline-offset: 2px;
}

/* --- Type utilities ------------------------------------------------------- */

.imm-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--imm-track-eyebrow);
  text-transform: uppercase;
  color: var(--imm-faint);
}

.imm-eyebrow--on-dark { color: var(--imm-faint-dark); }

.imm-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--imm-track-label);
  text-transform: uppercase;
  color: var(--imm-faint);
}

/* Screenplay. Line height is set per context: 1.8 in the drill, 1.85 in the
   reader — see the phase that owns each. */
.imm-script {
  font-family: var(--imm-font-script);
  font-variant-ligatures: none;
}

/* Editorial serif — marketing pull quotes only, never UI. */
.imm-editorial { font-family: var(--imm-font-serif); }

.imm-prose {
  max-width: var(--imm-prose-max);
  font-size: 16.5px;
  line-height: 1.7;
}

.imm-prose > :last-child { margin-bottom: 0; }

.imm-page-title {
  font-size: 34px;
  letter-spacing: var(--imm-track-h1);
}

/* --- Layout --------------------------------------------------------------- */

.imm-wrap {
  width: 100%;
  max-width: var(--imm-reading-max);
  margin-inline: auto;
  padding: var(--imm-s-11) var(--imm-s-12) var(--imm-s-13);
}

.imm-wrap--wide { max-width: var(--imm-content-max); }

/* --- Buttons -------------------------------------------------------------- */

.imm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--imm-s-2);
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--imm-r-btn);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--imm-t-btn),
              border-color var(--imm-t-btn),
              color var(--imm-t-btn);
}

.imm-btn--primary { background-color: var(--imm-red); color: #fff; }
.imm-btn--primary:hover { background-color: #d81f3f; color: #fff; }

.imm-btn--secondary { background-color: var(--imm-link); color: #fff; }
.imm-btn--secondary:hover { background-color: var(--imm-link-hover); color: #fff; }

.imm-btn--quiet {
  background-color: var(--imm-paper);
  border-color: var(--imm-line);
  border-radius: var(--imm-r-nav);
  color: var(--imm-text);
}
.imm-btn--quiet:hover { border-color: var(--imm-line-2); color: var(--imm-text); }

.imm-btn--on-dark {
  background-color: transparent;
  border-color: var(--imm-ink-line-3);
  color: var(--imm-on-dark);
}
.imm-btn--on-dark:hover { border-color: var(--imm-on-dark-2); color: #fff; }

.imm-btn--primary:focus-visible   { outline-color: var(--imm-red); }
.imm-btn--secondary:focus-visible { outline-color: var(--imm-link); }

@media (forced-colors: active) {
  .imm-btn:focus-visible,
  a:focus-visible { outline: 2px solid CanvasText; }
}

/* --- Chips ---------------------------------------------------------------
   Shared: the checkpoint chip on the course page and the free-sample chip on
   step pages. Lives here rather than in course.css because lesson and topic
   screens do not load that file.
   -------------------------------------------------------------------------- */

.imm-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--imm-r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- Cards ---------------------------------------------------------------- */

.imm-card {
  padding: var(--imm-s-7);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-card__title {
  margin-bottom: var(--imm-s-2);
  font-size: 17.5px;
}

.imm-card__title a { color: var(--imm-text); text-decoration: none; }
.imm-card__title a:hover { color: var(--imm-link); }

.imm-card__excerpt { color: var(--imm-muted); font-size: 14.5px; }

.imm-list {
  display: grid;
  gap: var(--imm-s-4);
}

/* --- Progress ------------------------------------------------------------- */

.imm-progress {
  height: 8px;
  border-radius: var(--imm-r-pill);
  background-color: var(--imm-progress-track);
  overflow: hidden;
}

.imm-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--imm-progress-fill);
  transition: width var(--imm-t-progress);
}

/* --- Forms ---------------------------------------------------------------- */

.imm-search { display: flex; gap: var(--imm-s-2); }

.imm-search__field,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea {
  padding: 12px 14px;
  background: var(--imm-paper);
  border: 1px solid var(--imm-line-2);
  border-radius: var(--imm-r-input);
  font-size: 15px;
  color: var(--imm-text);
}

textarea { width: 100%; line-height: 1.6; }

/* --- Misc ----------------------------------------------------------------- */

.imm-empty { color: var(--imm-faint); }

.imm-pagination {
  margin-top: var(--imm-s-9);
  font-size: 14.5px;
}

/* --- Touch targets --------------------------------------------------------
   Handoff § Phase 12: minimum hit target 44px. Set once here rather than per
   screen — .imm-btn's own padding computes to about 40px, which is under the
   line on every screen that uses it.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .imm-btn,
  button,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  select {
    min-height: 44px;
  }
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Theme toggle ----------------------------------------------------------
   Karel: "identical to the one for Loglineit.com". Same three-state control —
   light, dark, auto — with all three glyphs in the markup and CSS choosing
   one, so a click never has to redraw an SVG.
   -------------------------------------------------------------------------- */

.imm-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--imm-line-2);
  border-radius: var(--imm-r-btn);
  background: transparent;
  color: var(--imm-muted);
  cursor: pointer;
  transition: border-color var(--imm-t-btn), color var(--imm-t-btn);
}

.imm-theme-toggle:hover {
  border-color: var(--imm-link);
  color: var(--imm-link);
}

.imm-theme-toggle svg { display: block; }

/* Tooltip. Native `title` waits about a second, which reads as broken on a
   control whose whole job is to respond. */
.imm-theme-toggle::after {
  content: attr(data-tip);
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: var(--imm-r-nav);
  background: var(--imm-ink);
  color: var(--imm-on-dark);
  font-family: var(--imm-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .06s ease;
  z-index: 40;
}

.imm-theme-toggle:hover::after,
.imm-theme-toggle:focus-visible::after { opacity: 1; }

/* Auto is the glyph before JS has assigned data-mode. */
.imm-theme-toggle .imm-tt__icon { display: none; }
.imm-theme-toggle .imm-tt__auto { display: block; }

.imm-theme-toggle[data-mode="light"] .imm-tt__auto,
.imm-theme-toggle[data-mode="dark"]  .imm-tt__auto { display: none; }
.imm-theme-toggle[data-mode="light"] .imm-tt__light { display: block; }
.imm-theme-toggle[data-mode="dark"]  .imm-tt__dark  { display: block; }

/* On the dark app sidebar it sits on ink, not paper. */
.imm-topbar .imm-theme-toggle {
  border-color: var(--imm-ink-line-3);
  color: var(--imm-faint-dark-2);
}

.imm-topbar .imm-theme-toggle:hover {
  border-color: var(--imm-on-dark-2);
  color: #fff;
}

@media (max-width: 782px) {
  .imm-theme-toggle { width: 44px; height: 44px; }
}

/* ==========================================================================
   Contrast corrections
   Ref: tests/contrast-audit/ — every rule here fixes a MEASURED failure.

   Two things learned the hard way while building the audit:

   1. It first switched theme and measured immediately, catching the start of
      the 120ms colour transition and reporting the previous theme's colour.
      That produced 45 phantom failures, and one "fix" for them put teal text
      on the red drill button. The audit now disables transitions outright,
      which also made it repeatable — waiting was not.

   2. base.css loads BEFORE the component stylesheets, so a correction at equal
      specificity loses to the rule it is correcting. Every selector below is
      prefixed with :root to settle that without !important.
   ========================================================================== */

/* Teal as TEXT, where LearnDash paints from its own palette. Its selector for
   the percentage runs to five classes. */
:root[data-theme="dark"] .learndash-wrapper .ld-progress-percentage.ld-secondary-color,
:root[data-theme="dark"] .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage,
:root[data-theme="dark"] .learndash-wrapper .ld-secondary-color,
:root[data-theme="dark"] .imm-qa__answered,
:root[data-theme="dark"] .gb-headline .gb-headline-text {
  color: var(--imm-link);
}

/* The tab strip has a grey of its own that neither palette reaches. */
:root[data-theme="dark"] .learndash-wrapper .ld-tabs .ld-tab .ld-text { color: #fff; }

/* The focus rail FOLLOWS the theme — it is --imm-paper, not permanently dark.
   I assumed otherwise twice: once for the lesson sub-header, once here. Both
   times it put light text on a white card and the next audit run caught it.
   Theme-following tokens are the answer; "this surface is always dark" is a
   claim to verify, not assume. */
:root .imm-focus-step a,
:root .imm-focus-upcoming a { color: var(--imm-body); }
:root .imm-focus-step.is-current a { color: var(--imm-text); font-weight: 700; }

/* The secondary button is a FILL: it has to stay dark enough to carry white. */
:root .imm-btn--secondary { background-color: var(--imm-teal); color: #fff; }
:root .imm-btn--secondary:hover { background-color: var(--imm-teal-hover); color: #fff; }

/* Day cells. The numeral is a <span> inside the link, so it needs naming too. */
:root .imm-grid__cell.is-future a,
:root .imm-tracker__cell.is-future a { color: var(--imm-muted); }

:root .imm-grid__cell.is-today a,
:root .imm-tracker__cell.is-today a { color: var(--imm-red-ink); }

:root .imm-grid__cell a span,
:root .imm-tracker__cell a span { color: inherit; }

/* Thread metadata: --imm-faint is a light-mode weight and clears AA on
   neither wash. */
:root .imm-qa__thread .imm-qa__meta { color: var(--imm-muted); }

/* The footer, which is two different surfaces.

   The MARKETING footer is --imm-ink in both themes, so its links are always
   light. The APP footer sits on the page canvas and follows the theme. One
   rule for both put dark text on the dark marketing footer at 2.7:1. */
:root .imm-site .imm-nav--footer a,
:root .imm-site .imm-site__colophon { color: var(--imm-faint-dark-2); }

:root .imm-app__content .imm-nav--footer a { color: var(--imm-muted); }
:root[data-theme="dark"] .imm-app__content .imm-nav--footer a { color: var(--imm-faint-dark-2); }

/* The one !important in this block. LearnDash marks its own
   .ld-secondary-color declaration important, so nothing else reaches the
   "0% Complete" figure. Verified as the last failing element in the audit. */
:root[data-theme="dark"] .learndash-wrapper .ld-progress-percentage.ld-secondary-color {
  color: var(--imm-link) !important;
}