/* Shared pieces: the section rail, hotspots, Explore mode, utility classes and the story text cards. */

/* Right-hand progress rail: one dot per group in `groupDefs` (JS). Solid line = passed, dashed = ahead. */
/* ---------- rail ---------- */
.ab-rail { position: fixed; z-index: 8; right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: grid; list-style: none; margin: 0; padding: 0; }
.ab-rail li { position: relative; height: 47px; display: grid; justify-items: center; }
.ab-rail li:last-child { height: 12px; }
.ab-rail li::after { content: ""; position: absolute; top: 12px; bottom: -1px; left: calc(50% - 1px); width: 0; border-left: 2px dashed currentColor; opacity: 0.85; }   /* - 1px: half the 2px line, so it runs through the dots' centres */
.ab-rail li.ab-done::after { border-left-style: solid; }
.ab-rail li:last-child::after { display: none; }
.ab-rail button { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; color: inherit; background: currentColor; cursor: pointer; }   /* color: inherit, so the dot takes the rail's colour (a button otherwise keeps the browser's black) */
.ab-rail button[aria-current="true"] { box-shadow: 0 0 0 7px rgba(128,128,128,0.45); }
/* each dot's name: a Bootstrap tooltip with an arrow (js/page-ui.js), recoloured through its variables; cyan in Cyber
   (css/modes.css) */
.ab-rail-tip { --bs-tooltip-bg: var(--dark); --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; --bs-tooltip-font-size: 12px;
  --bs-tooltip-padding-x: 9px; --bs-tooltip-padding-y: 6px; --bs-tooltip-border-radius: 6px; font-family: var(--sans); font-weight: 500; }
.ab-rail.ab-on-light { color: #202124; }
.ab-rail.ab-on-dark { color: #fff; }
body.ab-exploring .ab-rail, body.ab-exploring main, body.ab-exploring footer { visibility: hidden; }

/* Orange numbered hotspots placed on the 3D model; their content comes from `pins` in `chapters`. */
/* ---------- hotspots ---------- */
#pins { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.ab-pin { left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: auto; font: 600 12px/1 var(--mono);   /* number centred by d-flex align-items-center justify-content-center p-0 (js/overlays.js) */
  color: #fff; background: var(--annot); border: 2px solid #fff; animation: ping 2.4s ease-out infinite; transition: opacity 0.25s;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(239,106,46,0.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(239,106,46,0); } }
.ab-pin[data-off="true"] { opacity: 0; pointer-events: none; }
#pincard { position: fixed; z-index: 9; width: min(290px, calc(100vw - 32px)); padding: 14px 16px; background: #fff; color: var(--ink); display: grid; gap: 6px; }
#pincard h3 { margin: 0; font-size: 16px; font-weight: 600; padding-right: 26px; }
#pincard p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.ab-x { top: 8px; right: 8px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-soft); font-size: 20px; line-height: 1; }
.ab-x:hover { background: #f1f3f4; }

/* Free exploration mode: hides the story and enables orbit controls + the part / room chips. */
/* ---------- explore mode ---------- */
/* the explore panel sits top left, under "Back to the story", at most 350px wide; the model is framed in the space
   right of it (exploreFrame() in the JS). On phones it becomes a full-width strip under the button (see below). */
.ab-explore-ui { z-index: 9; display: none; top: calc(74px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); width: min(350px, calc(100vw - 32px)); max-height: calc(100vh - 90px - env(safe-area-inset-top, 0px)); overflow-y: auto; }
body.ab-exploring .ab-explore-ui { display: grid; gap: 10px; align-content: start; }
.ab-explore-bar { flex-wrap: wrap; background: rgba(255,255,255,0.92); color: var(--ink); padding: 10px; }
.ab-explore-bar .ab-group-label { flex-basis: 100%; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 2px 4px 0 6px; }
.ab-chip { font: 500 13px/1 var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--line-light); border-radius: 999px; }
.ab-chip:hover { border-color: var(--orange); }
.ab-chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.ab-explore-hint { font-family: var(--mono); font-size: 11.5px; background: rgba(255,255,255,0.9); color: var(--ink-soft); }
.ab-back { z-index: 9; display: none; top: calc(14px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }   /* the "Back to the story" frame; its button has its own background (data-solid) */
body.ab-exploring .ab-back { display: inline-flex; }

#tourbar {
  position: fixed; z-index: 9; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(32,33,36,0.88); color: #fff; font: 500 13px/1.2 var(--sans);
}
#tourbar button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
#tourbar button svg { width: 11px; height: 11px; fill: currentColor; }
#tourbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

dialog { width: min(520px, calc(100vw - 32px)); border: 0; padding: 30px; background: #fff; color: var(--ink); }
dialog::backdrop { background: rgba(32, 33, 36, 0.6); }
dialog:modal { position: fixed; }   /* alfuix al-corner sets position: relative, which would place the open dialog at the top of the page */
dialog h3 { font-size: 30px; font-weight: 400; text-transform: uppercase; margin: 4px 0 14px; line-height: 1; padding-right: 26px; }
dialog .ab-yr { font-family: var(--mono); font-size: 12px; color: var(--orange); margin: 0; }
dialog p { margin: 0 0 10px; color: var(--ink-soft); }


/* ---------- utilities: the Bootstrap classes (p-4, d-flex, gap-3, shadow-lg ...) and alfuix's al-rounded-* used in
   the HTML come from the libraries linked in index.html ---------- */

/* Card behind every chapter text. Tweak transparency here; padding / radius / shadow come from the
   utility classes on each .ab-copy element in the HTML (p-4 p-md-5 al-rounded-20 shadow-lg). */
/* ---------- text cards ---------- */
.ab-copy.ab-text-card { -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); text-shadow: none !important; }
.ab-theme-cream .ab-copy.ab-text-card { background: rgba(255, 255, 255, 0.86); --al-border-bg: rgba(32, 33, 36, 0.08); }
.ab-theme-dark .ab-copy.ab-text-card { background: rgba(18, 20, 24, 0.72); --al-border-bg: rgba(255, 255, 255, 0.08); }
.ab-theme-photo .ab-copy.ab-text-card { background: rgba(10, 12, 18, 0.66); --al-border-bg: rgba(255, 255, 255, 0.08); }
/* CARDS: every card has its four corners cut by alfuix (al-corner + a size in the markup): large cards 16px
   (al-corner-all-16: text cards, the Helipad Moments dialog, the references box), small ones 12px (al-corner-all-12:
   fact tiles, the hotspot popup, the Explore panel boxes, the Google Maps photos). The HUD cards keep their own
   two-corner cut and the mode switch a smaller 8px / 6px cut (see css/modes.css). A CSS border would stop short of the
   cut corners, so outlines are alfuix al-border al-border-1, drawn
   along the cut shape, in the colour set by --al-border-bg (above for text cards; transparent where Classic shows
   none; Cyber's cyan in css/modes.css). Shadows are gone: the clip would cut them off. */
#pincard, #moment, .ab-explore-bar { --al-border-bg: transparent; }
/* TITLE LINE: under each story card's and popup's title, an alfuix line in the markup (.ab-title-line: a 70px hairline
   with a short amber dash at its start and a dot at its end). It is white for the dark cards; on the light cards in
   Classic (the cream ones, and the white hotspot popup and Helipad moment dialog) its hairline and dot turn dark so
   they show. Cards without a title (the globe captions) have none */
body:not(.ab-cyber) :is(.ab-theme-cream, #pincard, #moment) .ab-title-line { border-color: rgba(32, 33, 36, 0.25) !important; }
body:not(.ab-cyber) :is(.ab-theme-cream, #pincard, #moment) .ab-title-line .bg-white { background-color: var(--ink) !important; }
.ab-layout-center .ab-copy.ab-text-card { width: min(640px, 100%); }