/* Scripture Atlas: shared structural CSS. Per-region palettes stay inline
   in each page's own <style> block and define --accent / --accent-hi /
   --accent-alt; everything here consumes those generic tokens. */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;height:100%;}
body[data-bb-route="atlas-map"]{overflow:hidden;}
.plate{position:fixed;z-index:1;inset:60px 0 0 0;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(8px,1.4vw,18px) clamp(16px,3vw,40px);
  font-family:'Lora','Hoefler Text','Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 100% at 50% 28%, var(--paper-hi) 0%, var(--paper) 44%, var(--paper-lo) 84%, var(--paper-edge) 100%);}
/* 60px matches the reader header's own --header-height; when the WP admin bar is
   showing, the reader header itself shifts down by --admin-bar-height, so follow it */
body.admin-bar .plate{top:calc(var(--admin-bar-height, 32px) + 60px);}

/* preview-only: real BibleBridge site nav, copied 1:1 from reader/topic-map.php */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:#0c0b09;border-bottom:1px solid rgba(255,255,255,.05);
  padding:0 1rem;height:60px;display:flex;align-items:center;justify-content:space-between;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;}
.nav-brand{font-size:.95rem;font-weight:600;color:#fff;opacity:.9;letter-spacing:.02em;text-decoration:none;line-height:1;}
.nav-brand:hover{opacity:1;color:#fff;}
.nav-right{display:flex;gap:1.25rem;align-items:center;margin-left:auto;}
.nav-cta{background:#9e7640;color:#fff!important;padding:.4rem .9rem;border-radius:6px;font-weight:600;font-size:.78rem;text-decoration:none;transition:background .15s;}
.nav-cta:hover{background:#7e5c2e;color:#fff;}
.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;opacity:var(--grain-op);}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 44% at 50% 46%, var(--glow, rgba(0,0,0,.12)) 0%, transparent 72%);}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(118% 100% at 50% 42%, transparent 55%, var(--vignette) 100%);}

header.cartouche{text-align:left;position:absolute;z-index:2;top:clamp(10px,1.8vw,22px);left:clamp(16px,3vw,40px);max-width:min(340px,40vw);pointer-events:none;}
.plate h1,#bb-atlas-master h1{color:var(--ink) !important;font-family:'Fraunces','Hoefler Text','Iowan Old Style',Georgia,serif !important;font-weight:600 !important;font-variant:small-caps !important;letter-spacing:.05em !important;font-size:clamp(16px,2.1vw,24px) !important;line-height:1.05 !important;margin:0 0 .12em !important;white-space:nowrap;}
.subtitle{font-style:italic;color:var(--ink-soft);font-size:clamp(10.5px,1.3vw,12px);line-height:1.35;transition:opacity .3s ease;}
.subtitle .cite{font-style:normal;font-variant:small-caps;letter-spacing:.08em;color:var(--accent);font-size:.82em;white-space:nowrap;}

.chart-wrap{position:relative;z-index:1;flex:1;min-height:0;max-width:1040px;width:100%;margin-inline:auto;overflow:hidden;touch-action:none;}
svg.chart{display:block;width:100%;height:100%;overflow:visible;}
.hl{stroke:var(--hatch);}
.t0{stop-color:var(--term-outer);stop-opacity:0;} .t1{stop-color:var(--term-outer);stop-opacity:var(--term-op);}
.p-out{stroke:var(--ink);} .spec{fill:var(--spec);}
.edge{fill:var(--ink-soft);stroke:none;opacity:var(--eop,.4);transition:opacity .3s ease,fill .3s ease;}
.edge-ghost{stroke:var(--accent);stroke-dasharray:1 4;stroke-linecap:round;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.edge-ghost.lit{opacity:var(--gop,.6);}
.edge-hit{stroke-width:16px;vector-effect:non-scaling-stroke;}
@media (pointer:coarse){ .edge-hit{stroke-width:36px;} }
.lbl{font-style:italic;fill:var(--ink);font-size:18px;transition:fill .3s ease;pointer-events:none;}
.lbl.big{font-variant:small-caps;font-style:normal;letter-spacing:.05em;font-size:20px;}
.leader{stroke:var(--ink-soft);stroke-width:.6;opacity:.5;transition:opacity .3s ease;pointer-events:none;}
.bgstar{fill:var(--ink-soft);}
.glow-h{opacity:0;pointer-events:none;transition:opacity .35s ease;}
.planet{cursor:pointer;outline:none;}
svg.chart.has-active .edge:not(.lit){opacity:0;}
svg.chart.has-active .planet:not(.active):not(.linked){opacity:.3;transition:opacity .3s ease;}
svg.chart.has-active .planet.active .glow-h{opacity:1;}
svg.chart.has-active .edge.lit{opacity:.95;fill:var(--accent);}
.lbl.hot{fill:var(--accent-hi);} .leader.hot{opacity:1;}

#bb-atlas-master .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--paper-hi);color:var(--ink);
  border:1px solid var(--ink-faint);box-shadow:0 6px 22px rgba(0,0,0,.3);
  padding:12px 22px;font-variant:small-caps;letter-spacing:.1em;font-size:13.5px;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;z-index:9;white-space:nowrap;}
#bb-atlas-master .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#bb-atlas-master .toast em{font-variant:normal;font-style:italic;color:var(--accent);}
/* shared-verse evidence panel */
.evpanel{position:absolute;top:0;right:0;height:100%;width:min(370px,88%);background:var(--paper-hi);
  border-left:1px solid var(--ink-faint);box-shadow:-9px 0 32px rgba(0,0,0,.3);
  transform:translateX(103%);transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:6;display:flex;flex-direction:column;padding:clamp(18px,2.6vw,30px);}
.evpanel.open{transform:translateX(0);}
.evclose{position:absolute;top:12px;right:15px;background:none;border:none;color:var(--ink-soft);font-size:24px;line-height:1;cursor:pointer;font-family:inherit;}
.evclose:hover{color:var(--accent);}
.evpanel h3{font-family:'Fraunces','Hoefler Text','Iowan Old Style',Georgia,serif !important;font-variant:small-caps !important;letter-spacing:.03em !important;font-weight:600 !important;font-size:clamp(15px,2vw,20px) !important;margin:.1em 34px .06em 0 !important;color:var(--ink) !important;line-height:1.15 !important;}
.evsub{font-variant:small-caps;letter-spacing:.12em;font-size:11px;color:var(--accent);margin-bottom:11px;}
.evrule{height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin-bottom:13px;flex:none;}
.evlist{overflow-y:auto;flex:1;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--ink-faint) transparent;
  scroll-snap-type:y mandatory;overscroll-behavior:contain;}
.evlist::-webkit-scrollbar{width:8px;}
.evlist::-webkit-scrollbar-track{background:transparent;}
.evlist::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:4px;border:2px solid var(--paper-hi);}
.evlist::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);}
.evverse{margin-bottom:12px;scroll-snap-align:start;}
.evverse:not(:last-child){border-bottom:1px solid var(--ink-faint);padding-bottom:11px;}
.evref{font-variant:small-caps;letter-spacing:.06em;font-size:12px;color:var(--accent);display:block;margin-bottom:2px;}
.evtext{font-size:13.5px;line-height:1.5;color:var(--ink) !important;}
.evbridges{margin:2px 0 10px;}
.evconnects{margin:2px 0 10px;}
.evconnects .evb-label,.evbridges .evb-label{font-variant:small-caps;letter-spacing:.08em;font-size:11px;color:var(--accent);display:block;margin-bottom:5px;}
.evb-link{display:block;font-style:italic;font-size:14px;color:var(--accent);text-decoration:none;padding:3px 0;cursor:pointer;background:none;border:none;text-align:left;font-family:inherit;}
.evb-link:hover,.evb-link:focus-visible{text-decoration:underline;}
.evb-more{opacity:.75;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}
@media (max-width:560px){.lbl{font-size:20px;} .subtitle{font-size:13px;} .evtext{font-size:15px;}}
/* Reader's mobile bottom nav (fixed, z-index:200) appears at this same breakpoint
   and sits on top of the evpanel (z-index:6): without clearance, the last verse
   and the "Show N more" button render underneath it, unreachable. 70px matches
   the reader's own existing bottom-nav clearance (see .reader-index-page). */
@media (max-width:640px){
  .evlist{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px));}
  .atlas-back{display:none;}
  /* Cartouche joins normal document flow (was absolutely positioned, which
     reserved it no space at all), instead of a narrow 40vw-capped left
     column that was too narrow to read a verse in. Must be in-flow for the
     evidence panel below to actually render after it rather than
     underneath it. Rendered as a real card (background/border), same
     paper-card language .evpanel already uses elsewhere in this atlas, so
     it reads as a distinct centered block regardless of its exact width,
     rather than relying on implied whitespace alone. max-width must be
     explicitly reset to none, or the desktop rule's max-width:min(340px,40vw)
     above still caps this box even with width:100% set, since max-width
     can only shrink a box, never let width exceed it. */
  header.cartouche{position:static;text-align:left;width:100%;max-width:none;margin:0 0 14px;
    background:var(--paper-hi);border:1px solid var(--ink-faint);border-radius:10px;padding:14px 16px;}
  header.cartouche h1{text-align:center;}
  /* Evidence panel joins normal document flow instead of overlaying from
     the right: it renders after the cartouche, so a short verse leaves it
     higher and a long verse pushes it down, with no fixed offset to guess
     at. Chart hides while the panel is open so the panel fills the rest
     of the screen instead of sitting below a hidden, still-occupying chart. */
  .plate:has(.evpanel.open) .chart-wrap{display:none;}
  /* display can't be transitioned normally (it's discrete, not interpolable),
     so closing was an instant cut. allow-discrete defers the display:none
     switch until the opacity transition finishes, and @starting-style gives
     the browser a "before" state to fade in from when the element first
     goes from display:none to flex (otherwise there's nothing to transition
     FROM, since a non-rendered element has no previous frame).
     position:relative, not static: .evclose is position:absolute and needs
     the panel itself as its containing block. A static element doesn't
     establish one, so the close button would escape up to .plate (the
     next positioned ancestor) and render pinned near the top of the whole
     page instead of inside the panel. */
  .evpanel{display:none;position:relative;width:100%;height:auto;transform:none;opacity:0;
    transition:opacity .3s ease,display .3s allow-discrete;
    border-left:none;border-top:1px solid var(--ink-faint);box-shadow:0 -9px 32px rgba(0,0,0,.3);}
  .evpanel.open{display:flex;flex:1;min-height:0;opacity:1;}
  @starting-style{.evpanel.open{opacity:0;}}
}