:root {
  /* bridge theme tokens to legacy variables */
  --color-bg: var(--theme-color-bg, #f5f5f5);
  --color-nodes: var(--theme-color-node, #555555);
  --color-text: var(--theme-color-text, #111111);
  --color-band: var(--theme-color-band, #7a7979);
  --color-accent: var(--theme-color-accent, #1f6feb);
  --color-magnifier-stroke: var(--theme-color-magnifier-stroke, #000000);
  --focus-node-radius: var(--theme-radius-node, 12px);
  --focus-node-stroke: var(--theme-stroke-node, 1px);
  --focus-node-font: var(--theme-font-label, 'Montserrat'), sans-serif;
  --magnifier-font: var(--theme-font-magnifier, 'Montserrat'), sans-serif;
  --focus-label-transform: uppercase;
  --space-2xs: var(--theme-space-2xs, 4px);
  --space-xs: var(--theme-space-xs, 6px);
  --space-sm: var(--theme-space-sm, 8px);
  --space-md: var(--theme-space-md, 12px);
  --space-lg: var(--theme-space-lg, 16px);
  --space-xl: var(--theme-space-xl, 20px);
  --space-2xl: var(--theme-space-2xl, 24px);
  --radius-panel: var(--theme-radius-panel, 14px);
  --radius-card: var(--theme-radius-card, 10px);
  --motion-fast: var(--theme-motion-duration-fast, 120ms);
  --motion-medium: var(--theme-motion-duration-medium, 200ms);
  --motion-slow: var(--theme-motion-duration-slow, 320ms);
  --motion-ease: var(--theme-motion-ease, cubic-bezier(0.33, 1, 0.68, 1));
}

* { box-sizing: border-box; }

/* Lock the page into a fixed, non-scrollable surface. A scrollable page is
   what lets a mobile browser (e.g. DuckDuckGo/Android) treat a vertical scrub
   as page-scroll and toggle its toolbar mid-gesture — our whole navigation is
   vertical swiping, so the page must never scroll. touch-action must sit on
   the SVG itself (the element the finger lands on), not just body — it is not
   inherited. overscroll-behavior kills the rubber-band/pull effects. */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  /* Android Chromium (Chrome, DuckDuckGo) flashes a translucent highlight box
     over any element with a click handler on touch — on an SVG group that
     means its whole bounding rect (seen over the parent button). Not a link,
     not navigation: suppress it, and the text-selection long-press cousin. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
body {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  font-family: var(--theme-font-body, var(--focus-node-font, 'Montserrat')), sans-serif;
}

svg {
  width: 100vw;
  /* 100vh is the toolbar-HIDDEN height on browsers with dynamic chrome, which
     over-sizes the canvas and crops the bottom; dvh is the dynamic (current)
     height. JS then pins the exact size (main.js). vh first as the fallback
     for browsers without dvh. */
  height: 100vh;
  height: 100dvh;
  touch-action: none;
}
/* Tapping can also FOCUS the handler-bearing element in some browsers, which
   paints a persistent outline box until the next tap. The instrument has no
   keyboard navigation; nothing inside the canvas should ever show one. */
svg :focus,
svg :focus-visible {
  outline: none;
}

/* Portrait gate: the wheel's geometry only works in portrait, so on a touch
   device held landscape we cover it with a rotate prompt rather than render it
   broken. Gated on pointer:coarse so desktop (landscape by nature) is never
   affected. Hidden by default. */
#portrait-gate {
  display: none;
}
@media (orientation: landscape) and (pointer: coarse) {
  #portrait-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5vmin;
    padding: 8vmin;
    box-sizing: border-box;
    background: var(--color-bg, #868686);
    color: var(--color-text, #000);
    font-family: var(--focus-node-font, 'Montserrat'), sans-serif;
    text-align: center;
  }
  #portrait-gate .portrait-gate-icon {
    width: 22vmin;
    height: 22vmin;
  }
  #portrait-gate .portrait-gate-text {
    margin: 0;
    font-size: 4.5vmin;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width: 80vw;
  }
}

.copyright-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(6px * var(--iframe-scale, 1)) calc(10px * var(--iframe-scale, 1));
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--focus-node-font, 'Montserrat'), sans-serif;
  font-size: calc(11px * var(--iframe-scale, 1));
  text-align: center;
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 300;
}

.detail-version {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--focus-node-font, 'Montserrat'), sans-serif;
  font-size: calc(11px * var(--iframe-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  padding-top: var(--space-xs, 6px);
}

.focus-ring-node {
  fill: var(--color-nodes);
  stroke: none;
}

.focus-ring-label {
  fill: var(--color-text);
  font-family: var(--focus-node-font, 'Montserrat'), sans-serif;
  font-size: clamp(calc(14px * var(--iframe-scale, 1)), 1.6vmin, calc(26px * var(--iframe-scale, 1)));
  text-transform: var(--focus-label-transform, uppercase);
  pointer-events: none;
}

.focus-ring-band {
  fill: var(--color-band);
  opacity: 1;
}

/* diagnostic band removed — was debug scaffolding */

.focus-ring-magnifier-circle {
  fill: var(--color-nodes);
  stroke: var(--color-magnifier-stroke, #000);
  stroke-width: 1px;
}

.focus-ring-magnifier-label {
  fill: var(--color-text);
  font-family: var(--magnifier-font, 'Montserrat'), sans-serif;
  font-size: clamp(calc(21px * var(--iframe-scale, 1)), 2.4vmin, calc(39px * var(--iframe-scale, 1)));
  text-transform: var(--focus-label-transform, uppercase);
  pointer-events: none;
}

/* Calendar parent-button labels arrive display-ready ("MMdM CATALOGO",
   "753 BC") — render them verbatim; the lowercase d in MMdM must survive.
   Other volumes' parent labels still rely on the uppercase transform. */
:root[data-theme="calendar"] .focus-ring-parent-label {
  text-transform: none;
}

.focus-ring-magnifier.rotating .focus-ring-magnifier-circle {
  fill: none;
  stroke: var(--color-magnifier-stroke, #000);
  stroke-width: 1px;
}

.focus-ring-magnifier.rotating .focus-ring-magnifier-label {
  display: none;
}

/* Child pyramid preview rendering */
.child-pyramid {
  pointer-events: none;
}

.child-pyramid-node {
  fill: rgba(0, 0, 0, 0.14);
  stroke: rgba(0, 0, 0, 0.32);
  stroke-width: 1px;
  pointer-events: auto;
  transition: fill var(--motion-fast, 120ms) var(--motion-ease, ease),
    stroke var(--motion-fast, 120ms) var(--motion-ease, ease);
}

.child-pyramid-node:hover {
  fill: rgba(0, 0, 0, 0.22);
  stroke: rgba(0, 0, 0, 0.46);
}

.child-pyramid-label {
  fill: var(--color-text);
  font-family: var(--focus-node-font, 'Montserrat'), sans-serif;
  font-size: clamp(calc(14px * var(--iframe-scale, 1)), 1.6vmin, calc(26px * var(--iframe-scale, 1)));
  pointer-events: none;
}

/* Fade child pyramid nodes/labels while the Focus Ring is rotating.
   Blur is applied via SVG filter attribute for iOS WebKit compatibility. */
.child-pyramid.is-rotating .child-pyramid-node,
.child-pyramid.is-rotating .child-pyramid-label {
  opacity: 0.35;
  transition: opacity 80ms linear;
}

/* Migration animation overlay — cloned nodes that travel from pyramid to ring */
.migration-animation-overlay {
  pointer-events: none;
}

.migration-node {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .migration-node {
    transition: none !important;
  }
}

/* Detail panel — full-screen transparent overlay.
   Arc-following text is positioned in viewport coordinates;
   cards centre themselves within the full-screen container. */
.detail-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-in;
  z-index: 200;
}

.detail-panel.detail-panel--visible {
  display: block;
  opacity: 1;
  /* pointer-events intentionally remain 'none' — the panel is a transparent
     display overlay.  Only specific interactive children opt-in below. */
}

.detail-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Pass events through to the SVG; only opt-in children capture them. */
  pointer-events: none;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--theme-font-detail, var(--magnifier-font, 'Montserrat')), sans-serif;
  line-height: 1.4;
}

.detail-sector-content {
  color: rgba(255, 255, 255, 0.92);
}

/* ── Plain text fallback ─────────────────────────────────────────────── */
.detail-text {
  white-space: pre-wrap;
  padding: calc(16px * var(--iframe-scale, 1)) calc(24px * var(--iframe-scale, 1));
  font-size: calc(15px * var(--iframe-scale, 1));
}

/* ── Arc-following text layout ───────────────────────────────────────── */
/* Container covers the full detail-content area; lines are absolutely
   positioned using viewport coordinates from the line table. */
.detail-text--arc {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Individual arc-positioned text lines */
.detail-text-line {
  display: block;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  Font-size tiers expressed as a fraction of SSd.
  --detail-SSd is set by TextDetailPlugin on the container element.
  line-height is unitless so it scales with computed font-size.
*/
.font-tier-1 { font-size: calc(10.5 / 100 * var(--detail-SSd, 650px)); line-height: 1.3;  }
.font-tier-2 { font-size: calc( 8.0 / 100 * var(--detail-SSd, 650px)); line-height: 1.3;  }
.font-tier-3 { font-size: calc( 6.0 / 100 * var(--detail-SSd, 650px)); line-height: 1.35; }
.font-tier-4 { font-size: calc( 4.5 / 100 * var(--detail-SSd, 650px)); line-height: 1.4;  }
.font-tier-5 { font-size: calc( 3.5 / 100 * var(--detail-SSd, 650px)); line-height: 1.4;  }
.font-tier-6 { font-size: calc( 3.0 / 100 * var(--detail-SSd, 650px)); line-height: 1.4;  }

/* RTL language support */
.detail-text--arc[lang="he"],
.detail-text--arc[lang="ar"] {
  direction: rtl;
}
.detail-text--arc[lang="he"] .detail-text-line,
.detail-text--arc[lang="ar"] .detail-text-line {
  text-align: right;
}

/* ── Arc-following card layout ───────────────────────────────────────── */
/* Container identical to .detail-text--arc: full-layer, lines are spans
   absolutely positioned by the JS line table. */
.detail-card--arc {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Title line — bold, inherits font-tier class for size */
.detail-card-title {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

/* Body subtitle line — muted */
.detail-card-body {
  color: rgba(255, 255, 255, 0.65);
}

/* Description lines — italic */
.detail-card-description {
  color: rgba(255, 255, 255, 0.88);
  font-style: italic;
}

/* ── Fallback card (no line table) ──────────────────────────────────── */
.detail-card {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  overflow: hidden;
}

.detail-card > * + * {
  margin-top: var(--space-sm, 8px);
}

.detail-card .detail-card-title {
  font-weight: 700;
  font-size: calc(19px * var(--iframe-scale, 1));
  color: rgba(255, 255, 255, 0.95);
}

.detail-card .detail-card-body {
  font-size: calc(13px * var(--iframe-scale, 1));
  color: rgba(255, 255, 255, 0.65);
}

.detail-card .detail-card-description {
  margin-top: var(--space-md, 12px);
  font-size: calc(14px * var(--iframe-scale, 1));
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  font-style: italic;
  text-align: left;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  pointer-events: auto;
  max-height: 100%;
}

.detail-card-image {
  width: calc(84px * var(--iframe-scale, 1));
  height: calc(84px * var(--iframe-scale, 1));
  object-fit: contain;
  border-radius: var(--radius-card, 10px);
  background: rgba(255, 255, 255, 0.08);
}