/*!
 * EnlightenmentU Reading Engine
 * Free personalised Vedic reading. Deterministic, offline, no API key.
 * Built 2026-08-09 from src/. Do not edit dist/ by hand.
 */
/* =============================================================================
   EnlightenmentU Reading Engine - surface styles

   DESIGN READ
   An interactive reading tool embedded inside an existing editorial spiritual site,
   for US and UK women aged 30 to 50, with a calm sacred ritual language, leaning
   toward native CSS plus procedural SVG plus restrained ceremonial motion.

   DIALS  variance 6  |  motion 7  |  density 3

   DELIBERATE DEVIATIONS FROM THE DEFAULT STACK, AND WHY
   1. No React, no Tailwind, no Motion. The host is WordPress with Ezoic already on
      the page. A framework would add a build step the site has no pipeline for and
      weight the ad stack cannot spare. Vanilla is the correct engineering answer here,
      not a shortcut.
   2. No web fonts. System serif and system sans only. Zero network requests, zero
      layout shift, which protects CLS on a page that is already carrying ad slots.
   3. The tool owns one locked theme in both its inline and expanded states, so it
      never inverts within itself. `paper` exists for hosts that need it. Ink is the
      default because the reading is a distinct branded surface, the way a player or
      a map is, rather than a section of the article around it.

   RADIUS SYSTEM  one scale. Everything is 2px. `--eu-r-round` is used only for
   shapes that are circular by nature. No pill buttons on a square layout.

   ACCENT  one accent, marigold. The three tone values are semantic state for the
   mitra, sama and shatru meeting, and they stay inside the same warm family so the
   surface still reads as a single palette.
   ============================================================================= */

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

.eu-reading {
  /* ---- ink tokens (default) ---- */
  --eu-bg: #0f0e13;
  --eu-bg-lift: #16151c;
  --eu-bg-sink: #0a090d;
  --eu-text: #f4efe6;
  --eu-text-dim: rgba(244, 239, 230, 0.68);
  --eu-text-faint: rgba(244, 239, 230, 0.56);
  --eu-line: rgba(244, 239, 230, 0.13);
  --eu-line-strong: rgba(244, 239, 230, 0.26);
  --eu-accent: #e8a33d;
  --eu-accent-ink: #0f0e13;
  --eu-tone-support: #e8a33d;
  --eu-tone-neutral: #c8b79a;
  --eu-tone-growth: #d2703f;

  --eu-r: 2px;
  --eu-r-round: 999px;
  --eu-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --eu-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --eu-ease: cubic-bezier(0.16, 1, 0.3, 1);

  margin: 2.5rem 0;
  color: var(--eu-text);
  font-family: var(--eu-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Native controls, in particular the date input and its calendar button, follow
     this. Without it the picker renders as a light widget on the ink surface. */
  color-scheme: dark;
}

.eu-reading[data-eu-theme="paper"] { color-scheme: light; }

.eu-reading[data-eu-theme="paper"] {
  --eu-bg: #f7f3ec;
  --eu-bg-lift: #fffdf9;
  --eu-bg-sink: #efe9df;
  --eu-text: #1c1a22;
  --eu-text-dim: rgba(28, 26, 34, 0.72);
  --eu-text-faint: rgba(28, 26, 34, 0.66);
  --eu-line: rgba(28, 26, 34, 0.14);
  --eu-line-strong: rgba(28, 26, 34, 0.3);
  --eu-accent: #8f5210;
  --eu-accent-ink: #fffdf9;
  --eu-tone-support: #8f5210;
  --eu-tone-neutral: #7a6a4e;
  --eu-tone-growth: #9c4a22;
}

.eu-reading[data-tone="support"] { --eu-tone: var(--eu-tone-support); }
.eu-reading[data-tone="neutral"] { --eu-tone: var(--eu-tone-neutral); }
.eu-reading[data-tone="growth"]  { --eu-tone: var(--eu-tone-growth); }
.eu-reading { --eu-tone: var(--eu-accent); }

/* ------------------------------------------------------------ shared elements */

/* :where() keeps the reset at zero specificity so it neutralises the host theme
   without out-ranking the component rules underneath it. A plain `.eu-reading p`
   selector here silently beats `.eu-door__body` and collapses the vertical rhythm. */
:where(.eu-reading) :where(h2, h3, p, ul, li, s, em, b) {
  margin: 0;
  padding: 0;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
}
:where(.eu-reading) :where(em) { font-style: italic; }
:where(.eu-reading) :where(b) { font-weight: 700; }
:where(.eu-reading) :where(s) { text-decoration: line-through; }

/* HEADINGS MUST DECLARE THEIR OWN COLOUR.
   Everything else here sets colour on a class, and a class always beats a host
   theme's bare `p { color }`. Headings were the exception: they carried only a font
   and inherited their colour, and inherited colour loses to ANY direct selector, so
   the theme's `h2 { color: #222 }` won and the headline rendered dark on the ink
   surface. Seen live on enlightenmentu.com, whose theme does exactly that.
   Fixing it here rather than with a blanket reset, because a blanket
   `.eu-reading p` rule would out-specify the dim and faint tiers and flatten the
   whole hierarchy. */

.eu-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eu-text-faint);
}

.eu-display {
  color: var(--eu-text);
  font-family: var(--eu-serif);
  font-weight: 400;
  /* 1.14 plus the reserve below keeps the descender on an italic "you" or "saying"
     from clipping against the element edge. */
  line-height: 1.14;
  letter-spacing: -0.012em;
  padding-bottom: 0.08em;
}

.eu-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--eu-r);
  font-family: var(--eu-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--eu-ease), background-color 0.18s var(--eu-ease),
    border-color 0.18s var(--eu-ease), color 0.18s var(--eu-ease);
}
.eu-btn:active { transform: scale(0.98); }
.eu-btn:focus-visible {
  outline: 2px solid var(--eu-accent);
  outline-offset: 3px;
}

/* accent on ink, and ink on accent. both sit far above WCAG AA. */
.eu-btn--primary {
  background: var(--eu-accent);
  color: var(--eu-accent-ink);
}
.eu-btn--primary:hover { background: color-mix(in srgb, var(--eu-accent) 88%, #fff); }

.eu-btn--ghost {
  background: transparent;
  color: var(--eu-text);
  border-color: var(--eu-line-strong);
}
.eu-btn--ghost:hover { border-color: var(--eu-text-dim); background: rgba(255, 255, 255, 0.04); }
.eu-reading[data-eu-theme="paper"] .eu-btn--ghost:hover { background: rgba(0, 0, 0, 0.04); }

.eu-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============================================================ 1. THE DOORWAY
   Inline block that sits inside the article. Asymmetric split, not centred.
   Its job is one decision: open the reading.
   ============================================================================ */

.eu-door {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--eu-bg);
  border: 1px solid var(--eu-line);
  border-radius: var(--eu-r);
  overflow: hidden;
}

.eu-door::after {
  /* hairline of accent along the top edge. the only decoration on this card. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eu-accent), transparent);
  opacity: 0.55;
}

.eu-door__eyebrow {
  margin-bottom: 0.9rem;
  color: var(--eu-accent);
}

.eu-door__title {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  margin-bottom: 0.85rem;
}

.eu-door__body {
  color: var(--eu-text-dim);
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  line-height: 1.62;
  max-width: min(46ch, 100%);
  margin-bottom: 1.75rem;
}

.eu-door__note {
  margin-top: 0.95rem;
  font-size: 0.875rem;
  color: var(--eu-text-faint);
}

.eu-door .eu-btn--primary {
  font-size: clamp(1.0625rem, 1.2vw, 1.125rem);
  padding: 1.05rem 2.1rem;
}

.eu-door__art {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
}
.eu-door__art svg { display: block; width: 100%; height: auto; }

.eu-door__art::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--eu-accent) 22%, transparent), transparent 62%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .eu-door {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .eu-door__art { order: -1; max-width: 200px; margin: 0 auto; }
  .eu-door__body { max-width: none; }
}

/* ====================================================== 2. THE READING SURFACE
   Full screen overlay. Two panes on desktop: the yantra holds still on the left
   while the reading scrolls on the right. Single column on mobile.
   ============================================================================ */

.eu-overlay {
  position: fixed;
  inset: 0;
  /* The overlay carries the `.eu-reading` base class for its tokens, and that class
     sets a block margin for the inline doorway. On a fixed `inset: 0` box a margin
     shrinks the element, leaving a strip of the page showing at top and bottom. */
  margin: 0;
  z-index: 2147483000; /* above WordPress admin bars, sticky headers and ad frames */
  display: grid;
  place-items: center;
  padding: clamp(0px, 2vw, 2rem);
  background: color-mix(in srgb, var(--eu-bg-sink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transition: opacity 0.32s var(--eu-ease);
}
.eu-overlay[data-open="true"] { opacity: 1; }

@media (prefers-reduced-transparency: reduce) {
  .eu-overlay { background: var(--eu-bg-sink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.eu-panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(920px, 100%);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  /* Both are required. Grid items default to `min-height: auto`, which refuses to
     shrink below their content, so the row grows to the full height of the reading
     and `overflow: auto` on the scroll pane never engages. That pushes the yantra
     hundreds of pixels below the visible panel. */
  grid-template-rows: minmax(0, 1fr);
  background: var(--eu-bg);
  border: 1px solid var(--eu-line);
  border-radius: var(--eu-r);
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform 0.42s var(--eu-ease), opacity 0.34s var(--eu-ease);
}
.eu-overlay[data-open="true"] .eu-panel { transform: none; opacity: 1; }

.eu-panel > * { min-height: 0; min-width: 0; }

/* The body wrapper is the grid item, so the constraint has to be passed down to the
   scrolling pane inside it. Without this the pane grows to its full content height,
   the panel clips it, and the reader can never reach the offer at the bottom. */
.eu-panel__body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
.eu-scroll, .eu-intro { min-height: 0; }

.eu-panel__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--eu-bg-lift);
  border: 1px solid var(--eu-line);
  border-radius: var(--eu-r);
  color: var(--eu-text-dim);
  font-family: var(--eu-sans);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s var(--eu-ease), border-color 0.18s var(--eu-ease);
}
.eu-panel__close:hover { color: var(--eu-text); border-color: var(--eu-line-strong); }
.eu-panel__close:focus-visible { outline: 2px solid var(--eu-accent); outline-offset: 2px; }

/* ---- left pane ---- */

.eu-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--eu-bg-sink);
  border-right: 1px solid var(--eu-line);
}

.eu-stage__art { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.eu-stage__art svg { display: block; width: 100%; height: auto; }

.eu-stage__meta {
  display: grid;
  gap: 0.55rem;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.eu-metaRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}
/* one hairline between rows, never a box around every row */
.eu-metaRow + .eu-metaRow { border-top: 1px solid var(--eu-line); }

.eu-metaRow__k { font-size: 0.8125rem; color: var(--eu-text-faint); }
.eu-metaRow__v { font-family: var(--eu-serif); font-size: 1.0625rem; color: var(--eu-text); }
.eu-metaRow__v b { color: var(--eu-tone); font-weight: 400; }

/* ---- right pane ---- */

.eu-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.75rem, 3.2vw, 3rem);
  padding-right: clamp(1.75rem, 3.2vw, 3.25rem);
}
/* Focus moves here programmatically so a screen reader lands on the reading. That is
   not a keyboard focus, so it must not draw a ring around the entire pane. Keyboard
   users still get every ring inside it. */
.eu-scroll:focus { outline: none; }

.eu-verdict { margin-bottom: 2.25rem; }

.eu-chip {
  display: inline-flex;
  align-items: stretch;
  padding: 0.32rem 0.7rem;
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--eu-tone) 45%, transparent);
  border-radius: var(--eu-r);
  background: color-mix(in srgb, var(--eu-tone) 12%, transparent);
  color: color-mix(in srgb, var(--eu-tone) 84%, #fff);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
/* A hairline rather than a middot. The Sanskrit term and its plain reading are two
   separate labels and should not run together into one string. */
.eu-chip b { color: inherit; font-weight: 700; padding-right: 0.6rem; }
.eu-chip i {
  color: inherit;
  font-style: normal;
  font-weight: 500;
  padding-left: 0.6rem;
  border-left: 1px solid color-mix(in srgb, var(--eu-tone) 40%, transparent);
  opacity: 0.85;
}

.eu-verdict__title {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  margin-bottom: 0.75rem;
}

.eu-verdict__sub { color: var(--eu-text-dim); max-width: min(52ch, 100%); }

.eu-section { padding-block: 1.6rem; border-top: 1px solid var(--eu-line); }

.eu-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.9rem;
}
.eu-section__title { color: var(--eu-text); font-family: var(--eu-serif); font-size: 1.3rem; font-weight: 400; }
.eu-section__kicker { font-size: 0.75rem; color: var(--eu-tone); letter-spacing: 0.04em; }

.eu-section p {
  color: var(--eu-text-dim);
  font-size: 1.0125rem;
  line-height: 1.72;
  max-width: min(62ch, 100%);
}
.eu-section p + p { margin-top: 0.85rem; }

.eu-section--gift p:first-of-type {
  font-family: var(--eu-serif);
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--eu-text);
}

/* The reading arrives one section at a time. This is the ritual, and it is the only
   sequencing animation in the tool.

   `backwards` rather than `forwards`, and no hidden base state. The element's resting
   style is the visible one, so the animation only ever moves it INTO that state. An
   environment that never runs the animation shows the reading rather than a blank pane. */
.eu-reveal {
  animation: eu-rise 0.72s var(--eu-ease) backwards;
  animation-delay: calc(var(--eu-i, 0) * 130ms);
}
@keyframes eu-rise { from { opacity: 0; transform: translateY(16px); } }

/* The yantra settles in once, then holds.
   This animates the CONTAINER, never the individual primitives. Fading each path
   from `opacity: 0` with `animation-fill-mode: both` means any environment that
   does not run the animation leaves the product's main visual invisible. The end
   state here is the natural state, so a skipped animation costs nothing. */
.eu-stage__art {
  animation: eu-settle 1.1s var(--eu-ease) backwards;
}
@keyframes eu-settle {
  from { opacity: 0; transform: scale(0.965); }
}

.eu-door__art svg > g {
  transform-origin: 50% 50%;
  animation: eu-turn 240s linear infinite;
}
@keyframes eu-turn { to { transform: rotate(360deg); } }

/* ---- offer ---- */

.eu-offer {
  margin-top: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--eu-bg-lift);
  border: 1px solid var(--eu-line);
  border-radius: var(--eu-r);
}
.eu-offer__title { color: var(--eu-text); font-family: var(--eu-serif); font-size: 1.5rem; margin-bottom: 0.6rem; }
.eu-offer__body { color: var(--eu-text-dim); font-size: 0.9688rem; max-width: min(54ch, 100%); margin-bottom: 1.35rem; }
.eu-offer__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.55rem;
  color: var(--eu-text-dim);
  font-size: 0.9375rem;
}
.eu-offer__list li { padding-left: 1.15rem; position: relative; }
.eu-offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--eu-tone);
  border-radius: var(--eu-r-round);
}
.eu-offer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.eu-offer__price { font-family: var(--eu-serif); font-size: 1.35rem; color: var(--eu-text); }
.eu-offer__price s { color: var(--eu-text-faint); font-size: 0.8em; margin-right: 0.4rem; }

/* ============================================================= 3. THE FORM
   Labels above inputs. Helper below. Errors below. No placeholder as label.
   ============================================================================ */

.eu-form { display: grid; gap: 1.35rem; max-width: 30rem; }

.eu-field { display: grid; gap: 0.5rem; }

.eu-field__label {
  color: var(--eu-text);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--eu-text);
  letter-spacing: 0.005em;
}

.eu-input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--eu-bg-lift);
  border: 1px solid var(--eu-line-strong);
  border-radius: var(--eu-r);
  color: var(--eu-text);
  font-family: var(--eu-sans);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.18s var(--eu-ease), background-color 0.18s var(--eu-ease);
}
.eu-input::placeholder { color: var(--eu-text-dim); opacity: 1; }

/* THE VALUE INSIDE AN INPUT NEEDS MORE SPECIFICITY THAN THE INPUT ITSELF.
   `.eu-input` is (0,1,0) and loses to a theme rule like `input[type="text"] { color }`,
   which is (0,1,1). The placeholder was fine because themes rarely style
   `::placeholder`, which is exactly the asymmetry seen on the phone: the grey hint text
   was right while everything typed in was washed out.
   `-webkit-text-fill-color` is not belt and braces here. iOS Safari paints the text of
   date inputs and autofilled fields with it, and it wins over `color` outright. */
.eu-reading input.eu-input,
.eu-reading input.eu-input:focus,
.eu-reading input.eu-input:active {
  color: var(--eu-text);
  -webkit-text-fill-color: var(--eu-text);
  opacity: 1;
}

/* iOS renders the date text in a shadow part that ignores the rules above. */
.eu-reading input[type="date"]::-webkit-date-and-time-value {
  color: var(--eu-text);
  -webkit-text-fill-color: var(--eu-text);
  text-align: left;
}
.eu-reading input[type="date"]::-webkit-datetime-edit,
.eu-reading input[type="date"]::-webkit-datetime-edit-text,
.eu-reading input[type="date"]::-webkit-datetime-edit-month-field,
.eu-reading input[type="date"]::-webkit-datetime-edit-day-field,
.eu-reading input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--eu-text);
  -webkit-text-fill-color: var(--eu-text);
}

/* Autofill repaints the field with the browser's own colours. */
.eu-reading input.eu-input:-webkit-autofill,
.eu-reading input.eu-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--eu-text);
  -webkit-box-shadow: 0 0 0 1000px var(--eu-bg-lift) inset;
  caret-color: var(--eu-text);
}
.eu-input:hover { border-color: var(--eu-text-faint); }
.eu-input:focus {
  outline: none;
  border-color: var(--eu-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eu-accent) 26%, transparent);
}
.eu-input[aria-invalid="true"] { border-color: var(--eu-tone-growth); }

.eu-field__help { font-size: 0.8125rem; color: var(--eu-text-dim); }
.eu-field__error { font-size: 0.8125rem; color: var(--eu-tone-growth); font-weight: 500; }
.eu-reading[data-eu-theme="paper"] .eu-field__error { color: #8c3a15; }

.eu-form__foot { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.eu-form__privacy { font-size: 0.8125rem; color: var(--eu-text-faint); }

/* Intro pane inside the overlay, before a reading exists.
   This MUST scroll. Without `overflow-y: auto` the form is taller than the pane on a
   phone, the submit button sits below the fold with no way to reach it, and the touch
   gesture chains through to the page behind. `justify-content: center` also silently
   clips the top of an overflowing flex container, which is why the intro paragraph was
   cut off mid-sentence. Centring is therefore only safe when the content fits. */
.eu-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.75rem, 3.2vw, 3rem);
}
.eu-intro__title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-bottom: 0.8rem; }
.eu-intro__body { color: var(--eu-text-dim); max-width: min(46ch, 100%); margin-bottom: 2rem; }

/* ------------------------------------------------------------- states */

/* loading. skeleton matches the shape of the reading it replaces. */
.eu-skeleton { display: grid; gap: 0.7rem; }
.eu-skeleton__bar {
  height: 0.85rem;
  background: linear-gradient(90deg, var(--eu-bg-lift), var(--eu-line), var(--eu-bg-lift));
  background-size: 220% 100%;
  border-radius: var(--eu-r);
  animation: eu-shimmer 1.5s linear infinite;
}
@keyframes eu-shimmer { to { background-position: -220% 0; } }
.eu-skeleton__bar:nth-child(3n) { width: 72%; }
.eu-skeleton__bar:nth-child(4n) { width: 88%; }

.eu-status { font-size: 0.875rem; color: var(--eu-text-dim); }
.eu-status[data-kind="error"] { color: var(--eu-tone-growth); }

/* ------------------------------------------------------- responsive collapse */

@media (max-width: 899px) {
  .eu-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 100%;
    border-radius: 0;
    border: 0;
  }
  .eu-stage {
    border-right: 0;
    border-bottom: 1px solid var(--eu-line);
    padding: 1.5rem 1.25rem 1.25rem;
  }
  .eu-stage__art { max-width: 190px; }
  .eu-stage__meta { display: none; } /* the same values are repeated in the reading */
  .eu-scroll { padding: 1.5rem 1.25rem 3rem; }
  .eu-overlay { padding: 0; }
  /* flex-start, never center: on a phone this pane always overflows, and centring an
     overflowing flex container makes its top unreachable. */
  .eu-intro { justify-content: flex-start; padding: 1.5rem 1.25rem 2.5rem; }
}

@media (max-width: 480px) {
  .eu-form__foot .eu-btn { width: 100%; }
  .eu-offer__actions { flex-direction: column; align-items: stretch; }
  .eu-offer__actions .eu-btn { width: 100%; }
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .eu-reading *,
  .eu-overlay,
  .eu-panel {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .eu-reveal { opacity: 1; transform: none; }
  .eu-door__art svg > g { animation: none; }
  .eu-stage__art { opacity: 1; transform: none; }
}

/* body lock while the overlay is open */
body.eu-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* (9) An interstitial or sticky ad landing on top of the reading is worth more to us
   closed than open, so ad slots are hidden only while the overlay is up. This is a
   stopgap: the real fix is disabling vignette and anchor formats in the ad dashboard,
   because hiding a slot that has already loaded still counts as an unviewed impression. */
body.eu-locked [id^="ezoic-pub-ad"],
body.eu-locked [id*="ezoic"],
body.eu-locked .ezoic-ad,
body.eu-locked ins.adsbygoogle,
body.eu-locked [id^="google_ads_iframe"],
body.eu-locked [class*="vignette"] {
  display: none !important;
}