/* ═══════════════════════════════════════════════════════════
   engine/css/base.css — Variables, reset, and base styles
═══════════════════════════════════════════════════════════ */

/* ── NWM variable mapping ────────────────────────────────── */
/* These map to reading containers via surface.css too, but are
   also set here so nwm-* elements and #scripture-popup work
   correctly outside .layer-pane-content (e.g. fixed overlays). */
:root {
  --nwm-scale:   1;
  --nwm-size:    calc(1rem * var(--nwm-scale));
  --nwm-text:    var(--text-2);
  --nwm-muted:   var(--text-2);
  --nwm-accent:  var(--accent);
  --nwm-brand:   var(--accent);
  --nwm-border:  var(--border);
  --nwm-surface: var(--bg-card);
  --nwm-shadow:  var(--shadow-card);
  --nwm-focus:   var(--accent);
}

/* ── Layout constants (not part of the theme) ───────────── */
:root {
  --topbar-h:        42px;
  --bar-h:           36px;  /* reference bar, text panel footer, study panel header, study tabs */

  --btn-size:        28px;  /* buttons inside bars (chips, study tabs) */
  --btn-icon:        16px;  /* icons inside bar buttons */

  --topbar-btn-size: 32px;  /* topbar icon buttons — independent so you can size separately */
  --topbar-btn-icon: 18px;
}

/* ── Reset & base ────────────────────────────────────────── */

/* Enforce the HTML hidden attribute against any display overrides */
[hidden] { display: none !important; }

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

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

body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

select, input {
  font-family: inherit;
}

details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }

/* ── Accessibility ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Safe area — notched phones ──────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
  .main-wrap {
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* ── SVG icon mask technique ─────────────────────────────── */
/* Icons are <span class="icon icon--NAME"> elements.
   background-color inherits `color` from the parent so hover/active
   color changes (e.g. accent on hover) apply automatically. */
.icon {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.icon--audio      { -webkit-mask-image: url(/shared/assets/icons/audio.svg);      mask-image: url(/shared/assets/icons/audio.svg); }
.icon--backward   { -webkit-mask-image: url(/shared/assets/icons/backward.svg);   mask-image: url(/shared/assets/icons/backward.svg); }
.icon--camera     { -webkit-mask-image: url(/shared/assets/icons/camera.svg);     mask-image: url(/shared/assets/icons/camera.svg); }
.icon--commentary { -webkit-mask-image: url(/shared/assets/icons/commentary.svg); mask-image: url(/shared/assets/icons/commentary.svg); }
.icon--context    { -webkit-mask-image: url(/shared/assets/icons/context.svg);    mask-image: url(/shared/assets/icons/context.svg); }
.icon--crossrefs  { -webkit-mask-image: url(/shared/assets/icons/crossrefs.svg);  mask-image: url(/shared/assets/icons/crossrefs.svg); }
.icon--document   { -webkit-mask-image: url(/shared/assets/icons/document.svg);   mask-image: url(/shared/assets/icons/document.svg); }
.icon--forward    { -webkit-mask-image: url(/shared/assets/icons/forward.svg);    mask-image: url(/shared/assets/icons/forward.svg); }
.icon--keywords   { -webkit-mask-image: url(/shared/assets/icons/keywords.svg);   mask-image: url(/shared/assets/icons/keywords.svg); }
.icon--library    { -webkit-mask-image: url(/shared/assets/icons/library.svg);    mask-image: url(/shared/assets/icons/library.svg); }
.icon--news       { -webkit-mask-image: url(/shared/assets/icons/news.svg);       mask-image: url(/shared/assets/icons/news.svg); }
.icon--next       { -webkit-mask-image: url(/shared/assets/icons/next.svg);       mask-image: url(/shared/assets/icons/next.svg); }
.icon--notes      { -webkit-mask-image: url(/shared/assets/icons/notes.svg);      mask-image: url(/shared/assets/icons/notes.svg); }
.icon--original   { -webkit-mask-image: url(/shared/assets/icons/original.svg);   mask-image: url(/shared/assets/icons/original.svg); }
.icon--parallel   { -webkit-mask-image: url(/shared/assets/icons/parallel.svg);   mask-image: url(/shared/assets/icons/parallel.svg); }
.icon--pause      { -webkit-mask-image: url(/shared/assets/icons/pause.svg);      mask-image: url(/shared/assets/icons/pause.svg); }
.icon--play       { -webkit-mask-image: url(/shared/assets/icons/play.svg);       mask-image: url(/shared/assets/icons/play.svg); }
.icon--prev       { -webkit-mask-image: url(/shared/assets/icons/prev.svg);       mask-image: url(/shared/assets/icons/prev.svg); }
.icon--return     { -webkit-mask-image: url(/shared/assets/icons/return.svg);     mask-image: url(/shared/assets/icons/return.svg); }
.icon--settings   { -webkit-mask-image: url(/shared/assets/icons/settings.svg);   mask-image: url(/shared/assets/icons/settings.svg); }
.icon--study      { -webkit-mask-image: url(/shared/assets/icons/study.svg);      mask-image: url(/shared/assets/icons/study.svg); }