/* Palapaga Watchtower — v2.0
   Self-hosted fonts: no third-party font CDN. Visitors' IP addresses are not
   handed to Google on every page load, which matters for a tool positioned on
   privacy. Subset to Latin; WOFF so every browser handles it. */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/spectral-400.woff) format('woff');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/spectral-400i.woff) format('woff');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-500.woff) format('woff');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/spectral-600.woff) format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff) format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff) format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff) format('woff');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexmono-400.woff) format('woff');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plexmono-500.woff) format('woff');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plexmono-600.woff) format('woff');}

/* ── 1.1 THE PREDAWN SPECTRUM (v2.1) ─────────────────────────────────────────
   Six colors, blue-leaning (zero purple/brown). Depth comes from a 3-step
   gradient scale per color — Focal Core / Pastel Midtone / Translucent Aura —
   not from adding new hues. This replaces the v2.0 "Predawn to Dawn" tokens:
   dark mode now leans cold silver/navy rather than warm gold-on-gold, and the
   heat layer uses Crimson (urgent) + Gold (need) as two DISTINCT hues instead
   of two near-identical oranges, so overlapping blooms blend into new tones
   instead of just glaring brighter. See palapaga-v2.1-upgrade-spec.md. */
:root{
  --color-oceanic-navy:#0B132B;      /* Main dark BG (deep blue, not purple) */
  --color-celestial-silver:#E0E6ED;  /* Main light BG / dark-mode borders */
  --color-slate-frosted:#141726;     /* Card / panel fills, frosted glass */
  --color-taupe-slate:#7D7585;       /* Muted metadata / inactive states */
  --color-horizon-gold:#FBB45E;      /* Focal beacon — selected pin, answered prayer (≤5% of any view) */
  --color-crimson-ember:#F04A38;     /* Urgent heat / high-severity alerts (replaces Dawn Amber) */

  /* Gradient scale — Level 2 (Pastel Midtone, ~40–60% opacity equivalent) */
  --color-gold-pastel:#FFD6A5;
  --color-crimson-pastel:#FF8A7A;
  --color-silver-frost:#C5D3E8;      /* icy frost blue */
  --color-taupe-pastel:#A19BAA;
  --color-slate-mid:#2B3859;
  --color-navy-slate:#152238;        /* deep slate, gradient partner to oceanic navy */

  /* Gradient scale — Level 3 (Translucent Aura) as ready-made rgba() */
  --aura-crimson:rgba(240,74,56,.18);
  --aura-gold:rgba(251,180,94,.15);
  --aura-silver:rgba(224,230,237,.12);
  --aura-taupe:rgba(125,117,133,.20);
  --aura-slate:rgba(26,35,58,.50);
  --aura-navy:rgba(11,19,43,.85);

  /* Back-compat aliases: v2.0 code/comments referenced these names. Kept so
     nothing silently breaks; both now resolve into the v2.1 palette. */
  --color-midnight-ink:var(--color-oceanic-navy);
  --color-delft-blue:var(--color-slate-frosted);
  --color-dawn-amber:var(--color-crimson-ember);

  --font-serif:'Spectral',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── 1.2 Dark mode — "3:00 AM Watch" (default): cold, silver, breathable.
     Purge solid dark blocks — panels are translucent frosted glass over a
     radial-gradient navy canvas, never flat #000-adjacent fills. ── */
  --bg:var(--color-oceanic-navy);
  --bg-gradient:radial-gradient(ellipse 120% 90% at 50% -10%,var(--color-navy-slate) 0%,var(--color-oceanic-navy) 60%);
  --text:var(--color-celestial-silver);
  --surface:color-mix(in srgb,var(--color-slate-frosted) 65%,transparent);
  --surface-2:color-mix(in srgb,var(--color-navy-slate) 70%,var(--color-oceanic-navy));
  --panel:color-mix(in srgb,var(--color-slate-frosted) 40%,var(--color-oceanic-navy));
  --line:rgba(224,230,237,.14);
  --line-strong:rgba(224,230,237,.28);
  --line-inset:inset 0 1px 0 rgba(197,211,232,.1);
  /* Taupe alone is 3.6:1 on navy — too faint for small text. Metadata text
     uses a taupe/silver mix (7.2:1); raw taupe is kept for inactive strokes. */
  --muted:color-mix(in srgb,var(--color-taupe-slate) 45%,var(--color-celestial-silver));
  --inactive:var(--color-taupe-slate);
  --accent:var(--color-horizon-gold);
  --accent-ink:var(--color-horizon-gold);   /* accent used AS TEXT */
  --alert:var(--color-crimson-ember);
  /* v2.1.1: the Human Impact pill's crimson outline is a light-mode-only
     accent now — on the dark canvas it read as one more red among the map's
     own reds/heat colors. Dark mode treats it like any other neutral pill. */
  --impact-line:var(--inactive);
  --on-accent:var(--color-oceanic-navy);
  --systems:var(--color-silver-frost);
  --systems-fill:var(--color-slate-frosted);
  --blur:blur(16px);
  --shadow:0 8px 32px rgba(0,0,0,.35),var(--line-inset);
  color-scheme:dark;
}
/* ── Light mode — "6:00 AM Dawn" ── crisp celestial silver canvas with hints
   of the darker oceanic/slate tones for depth. Gold and crimson fail contrast
   as text on silver, so in light mode they are used only as fills, heat and
   pins; accent text falls back to the deep slate. ── */
:root[data-theme="light"]{
  --bg:var(--color-celestial-silver);
  --bg-gradient:none;
  --text:var(--color-oceanic-navy);
  --surface:color-mix(in srgb,#fff 88%,var(--color-celestial-silver));
  --surface-2:color-mix(in srgb,#fff 60%,var(--color-celestial-silver));
  --panel:color-mix(in srgb,var(--color-oceanic-navy) 4%,var(--color-celestial-silver));
  --line:rgba(11,19,43,.08);
  --line-strong:rgba(11,19,43,.18);
  --line-inset:none;
  --muted:color-mix(in srgb,var(--color-taupe-slate) 70%,var(--color-oceanic-navy));
  --inactive:var(--color-taupe-slate);
  --accent-ink:var(--color-navy-slate);
  --alert:var(--color-crimson-ember);
  --impact-line:var(--color-crimson-ember);
  --systems:var(--color-navy-slate);
  --systems-fill:var(--color-navy-slate);
  --blur:blur(10px);
  --shadow:0 4px 16px rgba(11,19,43,.06);
  color-scheme:light;
}
body{background-image:var(--bg-gradient);background-attachment:fixed;}
/* Cold silver glassmorphism (spec 1.2 §3): every translucent surface gets the
   same frosted treatment so panels feel like glass over the navy sky, not
   solid blocks. One rule here beats repeating backdrop-filter everywhere. */
.sidebar,.feed-controls,#streamPanel,.vb-head,dialog,.maptip,.seg,.zoom,.map-hint,.legend,
.toast,.resource-item,.sanctuary-detail{backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);}
.card[aria-expanded="true"],.prayer-card[aria-current="true"]{box-shadow:var(--line-inset),0 16px 48px -12px var(--aura-gold);}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background-color:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease;}
[hidden]{display:none !important;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
a{color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:var(--color-horizon-gold);color:var(--color-midnight-ink);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:-999px;top:8px;z-index:500;background:var(--accent);color:var(--on-accent);padding:8px 12px;border-radius:6px;}
.skip:focus{left:8px;}
.mono{font-family:var(--font-mono);}

.app{display:flex;flex-direction:column;height:100vh;height:100dvh;}

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:12px 20px;
  border-bottom:1px solid var(--line);background:var(--bg);flex-shrink:0;}
.brand{display:flex;align-items:center;gap:11px;min-width:0;}
/* Custom uploaded logo (HOW-TO-ADD-LOGO.md) replaces the built-in mark +
   wordmark when one loads; see loadBrandLogo() in app.js. Capped in height,
   not width, so a wide horizontal lockup has room to breathe. Widened again
   (round 5) at Tonie's request — this is now most of the header's left
   side; if it's STILL reading small after this, the bottleneck is almost
   certainly the source SVG/PNG's own canvas having blank margin baked in
   around the artwork, not this box (see the chat reply for how to check). */
.brand-logo{height:64px;width:auto;max-width:560px;display:block;}
.brand-fallback{display:flex;align-items:center;gap:11px;min-width:0;}
.brand-mark{width:30px;height:30px;flex-shrink:0;color:var(--accent);}
.brand h1{font-family:var(--font-serif);font-weight:600;font-size:22px;line-height:1.1;margin:0;letter-spacing:.2px;}
.brand h1 .wt{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent-ink);margin-left:8px;vertical-align:3px;}
.brand .sub{margin:2px 0 0;font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--muted);}
.viewnav{display:flex;border:1px solid var(--line-strong);border-radius:999px;padding:3px;gap:2px;}
.viewnav button,.viewnav a{background:none;border:0;border-radius:999px;padding:6px 14px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;white-space:nowrap;}
.viewnav button[aria-selected="true"]{background:var(--accent);color:var(--on-accent);font-weight:600;}
.viewnav a:hover{color:var(--text);}
.hdr-spacer{flex:1 1 auto;}
.hdr-tools-col{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.hdr-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.vigil{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--muted);white-space:nowrap;}
.vigil .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:vigil 2.4s ease-out infinite;}
@keyframes vigil{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-horizon-gold) 55%,transparent);}
  70%{box-shadow:0 0 0 9px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.tool-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line-strong);
  border-radius:7px;padding:6px 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;}
.tool-btn:hover{border-color:var(--accent);color:var(--text);}
.tool-btn.primary{border-color:var(--accent);color:var(--accent-ink);}
.tool-btn:disabled{opacity:.5;cursor:default;}
.tool-btn svg{width:14px;height:14px;}
.spin{width:11px;height:11px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);
  animation:spin .8s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── 2.3 Global status ticker ────────────────────────────────────────────── */
.ticker{height:24px;flex-shrink:0;overflow:hidden;background:var(--color-delft-blue);color:var(--color-celestial-silver);
  font-family:var(--font-mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;display:flex;align-items:center;
  border-bottom:1px solid color-mix(in srgb,var(--color-celestial-silver) 12%,transparent);}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 40s linear infinite;will-change:transform;}
.ticker-track span{padding-right:80px;}
.ticker b{color:var(--color-horizon-gold);font-weight:600;}
.ticker .sep{opacity:.45;margin:0 12px;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── Views & two-panel layout ───────────────────────────────────────────── */
.view{flex:1;min-height:0;display:flex;flex-direction:column;}
.tabbar{display:none;border-bottom:1px solid var(--line);flex-shrink:0;}
.tabbar button{flex:1;padding:11px;background:none;border:0;border-bottom:2px solid transparent;font-family:var(--font-mono);
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.tabbar button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent);}
.main{display:flex;flex:1;min-height:0;}
.sidebar{flex:0 0 var(--sidebar-w,40%);min-width:300px;max-width:78%;background:var(--panel);overflow-y:auto;
  overscroll-behavior:contain;position:relative;}
.resizer{flex:0 0 9px;position:relative;cursor:col-resize;touch-action:none;z-index:6;background:transparent;}
.resizer::after{content:'';position:absolute;top:0;bottom:0;left:4px;width:1px;background:var(--line-strong);}
.resizer:hover::after,.resizer[data-dragging="true"]::after,.resizer:focus-visible::after{left:3px;width:3px;background:var(--accent);}
body.resizing{cursor:col-resize;user-select:none;}
body.resizing iframe{pointer-events:none;}
.mapwrap{flex:1 1 auto;min-width:320px;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:var(--bg);}

/* ── 3. Two-level filter ────────────────────────────────────────────────── */
.feed-controls{position:sticky;top:0;z-index:4;background:var(--panel);padding:14px 16px 10px;border-bottom:1px solid var(--line);}
.perspective{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;}
.perspective button{background:none;border:0;padding:9px 6px;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);}
.perspective button:last-child{border-right:0;}
.perspective button small{display:block;font-size:9px;letter-spacing:1px;opacity:.75;margin-top:2px;font-weight:400;}
.perspective button[aria-checked="true"]{background:var(--surface);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:28px;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:transparent;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;border:1px solid var(--inactive);color:var(--muted);}
.pill .n{font-size:9.5px;opacity:.8;}
/* Human Impact (v2.1.1): a solid crimson fill on every pill read as "crazy
   red everywhere" and fought visually with the gold Watchtower brand button.
   Now: crimson is stroke-only (outline), the interior is the same silver as
   the rest of the UI (not solid alert-red), and selecting a pill highlights
   it to the SAME gold as the header brand accent — not crimson — so "active"
   reads as one consistent brand color across the whole app, and crimson is
   reserved for what it actually means (urgent/alert), not "selected".
   Root Systems: Delft Blue outline (mixed toward silver in dark mode, where
   pure Delft on Midnight is only 1.3:1) — unchanged.
   v2.1.1: the crimson stroke itself is now light-mode-only (--impact-line);
   in dark mode it drops to the same neutral taupe as every other pill, since
   crimson-everywhere-in-the-dark-UI was the exact complaint this was meant
   to fix and one more red outline still fought with the map's own reds. */
.pill[data-perspective="impact"]{border-color:var(--impact-line);background:var(--color-celestial-silver);color:var(--color-oceanic-navy);}
.pill[data-perspective="systems"]{border-color:var(--systems);}
.pill[aria-pressed="true"][data-perspective="impact"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
/* ...unless nothing is actually narrowed yet (#pills[data-all-on]) — every
   pill renders aria-pressed="true" in that state (all categories included),
   which should read as the calm default, not a wall of gold either. Gold is
   reserved for an actual, deliberate narrow-to-this-category choice. */
#pills[data-all-on="true"] .pill[aria-pressed="true"][data-perspective="impact"]{
  background:var(--color-celestial-silver);color:var(--color-oceanic-navy);border-color:var(--impact-line);}
.pill[aria-pressed="true"][data-perspective="systems"]{background:var(--systems-fill);color:var(--color-celestial-silver);border-color:var(--systems);}
.pill[data-all]{border-color:var(--line-strong);}
.pill[data-all][aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text);}
.stream-caption{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;align-self:center;}
.feed-meta{margin-top:10px;display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
.feed-meta button{background:none;border:0;padding:0;color:var(--accent-ink);font:inherit;letter-spacing:inherit;text-transform:inherit;}
.errbanner{margin:10px 16px 0;padding:9px 11px;border:1px solid var(--alert);border-radius:7px;
  color:var(--text);background:color-mix(in srgb,var(--color-dawn-amber) 12%,transparent);font-family:var(--font-mono);font-size:10.5px;}

/* ── Intelligence cards ─────────────────────────────────────────────────── */
.card{position:relative;padding:14px 16px 14px 18px;border-bottom:1px solid var(--line);cursor:pointer;
  border-left:3px solid transparent;transition:background .15s ease,box-shadow .2s ease;}
.card[data-perspective="impact"]{border-left-color:color-mix(in srgb,var(--color-dawn-amber) 70%,transparent);}
.card[data-perspective="systems"]{border-left-color:var(--systems);}
.card:hover{background:color-mix(in srgb,var(--surface) 55%,transparent);}
.card:focus-visible{outline-offset:-2px;}
.card[aria-expanded="true"]{background:var(--surface);border-left-color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-horizon-gold) 45%,transparent),0 0 24px -8px color-mix(in srgb,var(--color-horizon-gold) 60%,transparent);}
.card h3{font-family:var(--font-serif);font-weight:600;font-size:16px;line-height:1.3;margin:0 0 5px;}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.card .cat{color:var(--text);}
.card .sev{display:inline-flex;gap:2px;}
.card .sev i{width:5px;height:5px;border-radius:50%;background:var(--inactive);opacity:.5;}
.card .sev i.on{background:var(--accent);opacity:1;}
.card .sev i.on.hot{background:var(--alert);}
.badge{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;padding:1px 6px;border-radius:3px;font-weight:600;}
.badge.new{background:var(--color-horizon-gold);color:var(--color-midnight-ink);}
.badge.sample{background:var(--inactive);color:var(--color-celestial-silver);}
.card .desc{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:color-mix(in srgb,var(--text) 86%,transparent);}
.card[aria-expanded="true"] .desc{display:none;}

/* ── 2.2 Prayer Directive focal card ─────────────────────────────────────── */
.directive{margin:12px 0 2px;display:grid;gap:10px;animation:unfold .28s ease-out;}
@keyframes unfold{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.directive .row{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;}
.directive .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);
  font-size:10px;font-weight:600;border:1px solid var(--line-strong);color:var(--muted);}
.directive .lbl{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.directive p{margin:0;font-size:13.5px;line-height:1.5;}
.directive .focus .ic{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.directive .focus p{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--accent-ink);}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.card-actions a,.card-actions button{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:7px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--line-strong);background:transparent;color:var(--text);}
.card-actions .go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;}
.card-actions .mobile-only{display:none;}
.card .source{margin-top:10px;font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.state-box{padding:40px 24px;text-align:center;color:var(--muted);}
.state-box h4{font-family:var(--font-serif);color:var(--text);font-size:17px;margin:8px 0 6px;}
.state-box p{margin:0;font-size:13px;}

/* ── Map stage ──────────────────────────────────────────────────────────── */
.mapstage{position:relative;width:100%;aspect-ratio:1.95/1;flex-shrink:0;overflow:hidden;background:var(--bg);
  touch-action:pan-y;user-select:none;}
.mapstage[data-projection="globe"]{aspect-ratio:1.35/1;}
.mapstage[data-projection="globe"],.mapstage[data-zoomed="true"]{touch-action:none;}
.mapstage.fill{flex:1 1 auto;aspect-ratio:auto;min-height:320px;}
.mapstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.mapstage.dragging{cursor:grabbing;}
.mapstage[data-plant="true"]{cursor:crosshair;}
.pinlayer{position:absolute;inset:0;z-index:5;pointer-events:none;}
.pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;background:none;pointer-events:auto;
  display:grid;place-items:center;border-radius:50%;}
.pin .core{width:9px;height:9px;border-radius:50%;background:var(--pin-color,var(--color-horizon-gold));
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--pin-color,var(--color-horizon-gold)) 80%,transparent);}
.pin[data-kind="urgent"] .core{background:var(--color-dawn-amber);box-shadow:0 0 9px 2px color-mix(in srgb,var(--color-dawn-amber) 75%,transparent);}
.pin[data-kind="systems"] .core{background:transparent;border:2px solid var(--systems);box-shadow:none;width:10px;height:10px;}
.pin .core::before{content:'';position:absolute;inset:3px;border-radius:50%;background:currentColor;opacity:0;}
.pin[data-kind="impact"] .core,.pin[data-kind="urgent"] .core{animation:pinpulse 2.6s ease-out infinite;}
@keyframes pinpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-horizon-gold) 60%,transparent);}
  100%{box-shadow:0 0 0 12px transparent;}}
.pin[data-selected="true"]{z-index:3;}
.pin[data-selected="true"] .core{width:13px;height:13px;background:var(--pin-color,var(--color-horizon-gold));border:0;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pin-color,var(--color-horizon-gold)) 30%,transparent),0 0 22px 6px color-mix(in srgb,var(--pin-color,var(--color-horizon-gold)) 70%,transparent);animation:none;}
/* Vision board pins */
.pin[data-kind="prayer"] .core{width:12px;height:12px;background:var(--pin-color,var(--color-horizon-gold));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pin-color,var(--color-horizon-gold)) 25%,transparent);animation:none;}
/* v2.2 (phase 2 item 7): curated pin shapes — a solid-CSS reduction of the old
   prayer-board prototype's 6-shape set (kept the 5 that read clearly at pin
   scale; "drop" was visually the same as the default circle at this size).
   "cross" was added later (round 3) as a Latin/holy cross — a taller
   vertical bar with a shorter crossbar in the upper third, deliberately NOT
   a symmetric plus/medical-cross, since that reads wrong for a prayer pin. */
.pin[data-shape="diamond"] .core{border-radius:2px;transform:rotate(45deg);}
.pin[data-shape="square"] .core{border-radius:2px;}
.pin[data-shape="triangle"] .core{border-radius:0;clip-path:polygon(50% 0%,100% 100%,0% 100%);}
.pin[data-shape="star"] .core{border-radius:0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.pin[data-shape="cross"] .core{border-radius:0;clip-path:polygon(37% 0%,63% 0%,63% 22%,100% 22%,100% 48%,63% 48%,63% 100%,37% 100%,37% 48%,0% 48%,0% 22%,37% 22%);}
.pin[data-kind="answered"]{width:30px;height:30px;margin:-15px 0 0 -15px;}
.pin .star{width:26px;height:26px;color:var(--color-horizon-gold);
  filter:drop-shadow(0 0 6px var(--color-horizon-gold)) drop-shadow(0 0 14px color-mix(in srgb,var(--color-horizon-gold) 60%,transparent));
  animation:stardawn 1.1s cubic-bezier(.2,.9,.3,1.4) both;}
@keyframes stardawn{0%{transform:scale(.2) rotate(-90deg);opacity:0;}60%{opacity:1;}100%{transform:scale(1) rotate(0);}}
.pin.draft .core{background:transparent;border:2px dashed var(--color-horizon-gold);box-shadow:none;}
.ping{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;
  border:2px solid var(--color-horizon-gold);animation:ping 1.4s ease-out forwards;}
@keyframes ping{from{transform:scale(1);opacity:1;}to{transform:scale(5);opacity:0;}}
.map-tools{position:absolute;top:10px;right:10px;z-index:8;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
/* Sanctuary-only theme toggle (v2.1.1): lives in .map-tools (shared with the
   ordinary Watchtower view) but only makes sense — and only shows — under
   Sanctuary, where the header's own toggle is hidden. */
.sanctuary-theme-toggle{display:none;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px);}
body.sanctuary .sanctuary-theme-toggle{display:inline-flex;}
.seg{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px);}
.seg button{background:none;border:0;padding:5px 11px;font-family:var(--font-mono);font-size:10px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--accent);color:var(--on-accent);font-weight:600;}
.zoom{display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;
  background:color-mix(in srgb,var(--bg) 78%,transparent);}
.zoom button{width:30px;height:28px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font-size:15px;line-height:1;}
.zoom button:last-child{border-bottom:0;font-size:12px;}
.legend{position:absolute;left:10px;bottom:9px;z-index:7;display:flex;align-items:center;gap:7px;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 78%,transparent);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;}
.legend .bar{width:56px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--color-horizon-gold),var(--color-dawn-amber));}
.legend .ring{width:9px;height:9px;border-radius:50%;border:2px solid var(--systems);}
.map-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:7;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line-strong);border-radius:999px;
  padding:5px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.maptip{position:absolute;z-index:9;max-width:230px;padding:8px 10px;border-radius:8px;pointer-events:none;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow);transform:translate(-50%,calc(-100% - 14px));
  font-size:12px;}
.maptip strong{display:block;font-family:var(--font-serif);font-size:13px;}
.maptip span{color:var(--muted);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.5px;}

/* ── 2.1 The light beam (SVG overlay) ───────────────────────────────────── */
.beam-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40;overflow:visible;}
.beam-layer .beam-glow{fill:none;stroke:var(--color-horizon-gold);stroke-width:6;opacity:.28;}
.beam-layer .beam-core{fill:none;stroke:var(--color-horizon-gold);stroke-width:1.6;stroke-linecap:round;}
.beam-layer .beam-pulse{fill:none;stroke:var(--color-celestial-silver);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:18 900;animation:beamrun 2.4s linear infinite;opacity:.9;}
.beam-layer .beam-dot{fill:var(--color-horizon-gold);}
@keyframes beamrun{from{stroke-dashoffset:918;}to{stroke-dashoffset:0;}}
.beam-layer[data-state="off"]{opacity:0;}
.beam-layer{transition:opacity .2s ease;}

/* ── Live newsroom ───────────────────────────────────────────────────────── */
#streamPanel{flex:1 0 auto;display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--panel);}
.stream-head{display:flex;align-items:center;gap:8px;padding:10px 12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
.stream-head .lbl{display:flex;align-items:center;gap:7px;}
.livedot{width:6px;height:6px;border-radius:50%;background:var(--color-dawn-amber);animation:blink .9s ease-in-out infinite;}
@keyframes blink{50%{opacity:.25;}}
.stream-picker{display:flex;gap:6px;padding:0 12px 10px;flex-wrap:wrap;}
.chanchip{font-family:var(--font-mono);font-size:10px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);
  background:transparent;color:var(--muted);}
.chanchip:hover{border-color:var(--accent);color:var(--text);}
.chanchip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:600;}
.stream-stage{flex:1 1 auto;aspect-ratio:16/9;min-height:190px;position:relative;margin:0 12px 12px;border-radius:9px;
  overflow:hidden;background:#000;border:1px solid var(--line);}
.stream-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.stream-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:16px;background:var(--surface-2);border:0;width:100%;color:var(--muted);}
.stream-idle .play{width:44px;height:44px;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;color:var(--accent-ink);}
.stream-idle span{font-size:12px;max-width:240px;}
.stream-note{padding:0 12px 12px;font-family:var(--font-mono);font-size:9.5px;line-height:1.5;color:var(--muted);}
.theatre{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:none;flex-direction:column;padding:clamp(12px,4vw,48px);}
.theatre[data-open="true"]{display:flex;}
.theatre-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;color:#E0E6ED;}
.theatre-bar .tool-btn{color:#E0E6ED;border-color:rgba(224,230,237,.35);}
.theatre-frame{flex:1;position:relative;background:#000;border-radius:10px;overflow:hidden;}
.theatre-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ── 4. Vision board ────────────────────────────────────────────────────── */
.vb-head{position:sticky;top:0;z-index:4;background:var(--panel);padding:14px 16px 12px;border-bottom:1px solid var(--line);}
.vb-head h2{margin:0 0 3px;font-family:var(--font-serif);font-weight:600;font-size:18px;}
.vb-head .lede{margin:0 0 10px;font-size:12.5px;color:var(--muted);}
.vb-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;}
.vb-tabs button{background:none;border:0;padding:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);}
.vb-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);}
.vb-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.vb-actions .tool-btn{font-size:10px;padding:5px 9px;}
.sync-state{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-top:8px;letter-spacing:.4px;}
.sync-state[data-tone="ok"]::before{content:'● ';color:var(--color-horizon-gold);}
.sync-state[data-tone="warn"]::before{content:'● ';color:var(--color-dawn-amber);}
.prayer-card{padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:10px;
  border-left:3px solid var(--color-horizon-gold);}
.prayer-card:hover{background:color-mix(in srgb,var(--surface) 55%,transparent);}
.prayer-card[aria-current="true"]{background:var(--surface);}
.prayer-card h3{margin:0 0 4px;font-family:var(--font-serif);font-size:15.5px;font-weight:600;}
.prayer-card .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.prayer-card .note{margin:6px 0 0;font-size:13px;color:color-mix(in srgb,var(--text) 82%,transparent);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prayer-card .thumb{width:54px;height:54px;border-radius:7px;object-fit:cover;border:1px solid var(--line);}
.prayer-card .open{align-self:start;}
.testimony{padding:16px;border-bottom:1px solid var(--line);}
.testimony h3{margin:0 0 6px;font-family:var(--font-serif);font-size:16px;display:flex;gap:8px;align-items:center;}
.testimony h3 svg{width:16px;height:16px;color:var(--color-horizon-gold);flex-shrink:0;}
.testimony .span{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);}
.testimony .span .line{flex:1;height:1px;background:linear-gradient(90deg,var(--inactive),var(--color-horizon-gold));}
.testimony blockquote{margin:10px 0 0;padding-left:12px;border-left:2px solid var(--color-horizon-gold);
  font-family:var(--font-serif);font-style:italic;font-size:14px;}
.fab{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:13px 18px;
  border-radius:999px;border:0;background:var(--color-horizon-gold);color:var(--color-midnight-ink);font-weight:600;font-size:14px;
  box-shadow:0 8px 24px color-mix(in srgb,var(--color-horizon-gold) 40%,transparent),var(--shadow);}
.fab:hover{transform:translateY(-1px);}
.fab svg{width:16px;height:16px;}

/* ── Dialogs ────────────────────────────────────────────────────────────── */
dialog{border:1px solid var(--line-strong);border-radius:14px;padding:0;background:var(--surface-2);color:var(--text);
  width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);box-shadow:var(--shadow);}
:root[data-theme="light"] dialog{background:#fff;}
dialog::backdrop{background:rgba(10,13,20,.6);backdrop-filter:blur(2px);}
.dlg{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);}
.dlg-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px;border-bottom:1px solid var(--line);}
.dlg-head h2{margin:0;font-family:var(--font-serif);font-size:19px;font-weight:600;flex:1;}
.dlg-close{background:none;border:0;font-size:22px;line-height:1;color:var(--muted);padding:2px 6px;}
.dlg-body{padding:14px 18px;overflow-y:auto;}
.dlg-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 18px 16px;border-top:1px solid var(--line);}
.field{display:block;margin-bottom:12px;}
.field > span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.field input[type="text"],.field input[type="password"],.field textarea,.field select{width:100%;padding:9px 11px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--text);}
.field textarea{min-height:90px;resize:vertical;line-height:1.5;}
.field input[type="file"]{font-size:12px;color:var(--muted);max-width:100%;}
.field input[type="file"]::file-selector-button{margin-right:10px;padding:7px 12px;border-radius:7px;border:1px solid var(--line-strong);
  background:transparent;color:var(--text);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;}
.field small{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:8px;border:1px solid var(--line-strong);
  background:transparent;color:var(--text);font-family:var(--font-mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;}
.btn.primary{background:var(--color-horizon-gold);border-color:var(--color-horizon-gold);color:var(--color-midnight-ink);font-weight:600;}
.btn.danger{border-color:var(--alert);color:var(--text);}
.btn:disabled{opacity:.5;cursor:default;}
.btn.answer{border-color:var(--color-horizon-gold);}
.place-line{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:12px;}
.place-line b{color:var(--text);font-weight:500;}
.images{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.images figure{position:relative;margin:0;}
.images img{width:78px;height:78px;border-radius:8px;object-fit:cover;border:1px solid var(--line);display:block;}
.images figure button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--surface-2);color:var(--text);font-size:12px;line-height:1;padding:0;}
.status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:9px;border:1px dashed var(--line-strong);margin-top:4px;}
.status-row .st{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;}
.status-row .st[data-status="answered"]{color:var(--accent-ink);}
.notice{padding:10px 12px;border-radius:8px;border:1px solid var(--line-strong);font-size:12.5px;margin-bottom:12px;background:var(--bg);}
.notice.warn{border-color:var(--alert);}
.code{font-family:var(--font-mono);font-size:15px;letter-spacing:1.5px;padding:10px 12px;border-radius:8px;border:1px dashed var(--accent);
  background:var(--bg);word-break:break-all;user-select:all;}
.meter{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px;}
.meter i{display:block;height:100%;background:var(--color-horizon-gold);width:0;transition:width .2s;}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:6px 0 12px;}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:10px;padding:10px 16px;box-shadow:var(--shadow);font-size:13px;max-width:calc(100vw - 32px);}

/* Onboarding */
.onb-steps{display:grid;gap:14px;}
.onb-step{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:12px;border-radius:12px;border:1px solid var(--line);
  opacity:.45;transition:opacity .25s ease,border-color .25s ease;}
.onb-step[data-active="true"]{opacity:1;border-color:var(--accent);background:var(--bg);}
.onb-step svg{width:56px;height:56px;}
.onb-step h3{margin:0 0 3px;font-family:var(--font-serif);font-size:16px;}
.onb-step p{margin:0;font-size:12.5px;color:var(--muted);}
.onb-dots{display:flex;gap:6px;margin-right:auto;align-items:center;}
.onb-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);}
.onb-dots i[data-on="true"]{background:var(--color-horizon-gold);}

/* ── 4. Resources & Downloads (replaces Vision Board, v2.1) ─────────────── */
.resources-container{max-width:900px;margin:0 auto;padding:28px 20px 60px;overflow-y:auto;height:100%;}
.resources-header{margin-bottom:22px;}
.resources-header h2{margin:0 0 4px;font-family:var(--font-serif);font-weight:600;font-size:22px;}
.resources-header .lede{margin:0;font-size:13px;color:var(--muted);font-style:italic;font-family:var(--font-serif);}
.resources-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;}
.resources-tabs [role="tab"]{padding:7px 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);}
.resources-tabs [role="tab"][aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;}
.resources-cat-desc{margin:0 0 16px;font-size:13px;color:var(--muted);}
.resource-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.resource-item{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--line-inset);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.resource-item:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--line-inset),0 12px 28px -10px var(--aura-gold);}
.resource-item .icon{font-size:26px;line-height:1;}
.resource-item .details h4{margin:0;font-family:var(--font-serif);font-size:14.5px;font-weight:600;}
.resource-item .details p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45;}
.resource-item .details small{display:block;margin-top:5px;font-family:var(--font-mono);font-size:10px;color:var(--inactive);}
.resource-item.external .warning{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:4px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;background:var(--aura-crimson);color:var(--alert);}
.btn-download{align-self:flex-start;margin-top:2px;padding:7px 13px;border-radius:7px;background:var(--color-horizon-gold);
  color:var(--color-oceanic-navy);text-decoration:none;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;}
.btn-download:hover{background:var(--color-gold-pastel);}

footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 20px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:10px;color:var(--muted);background:var(--bg);flex-shrink:0;}
footer .buildstamp{letter-spacing:1px;text-transform:uppercase;opacity:.75;}
footer button{background:none;border:1px solid var(--line-strong);border-radius:5px;padding:3px 8px;font-family:var(--font-mono);font-size:10px;color:var(--muted);}

/* ── 5.3 Sanctuary mode ─────────────────────────────────────────────────── */
.sanctuary-caption{display:none;}
body.sanctuary{font-size:28px;}
/* map-tools stays OUT of this hide-list (v2.0 bug): it was display:none on
   every screen size, not just mobile, so there was never a way to zoom or
   switch Board/Globe on a wall display or a phone. It's re-styled below. */
body.sanctuary .hdr-tools,body.sanctuary .hdr-tools-col,body.sanctuary .viewnav,body.sanctuary .brand .sub,body.sanctuary footer,body.sanctuary .sidebar,
body.sanctuary .resizer,body.sanctuary #streamPanel,body.sanctuary .tabbar,body.sanctuary .fab,
body.sanctuary #visionView,body.sanctuary .legend,body.sanctuary .skip,body.sanctuary .beam-layer{display:none !important;}
body.sanctuary .hdr{padding:1.1rem 2rem;justify-content:space-between;}
body.sanctuary .brand h1{font-size:2.2rem;}
body.sanctuary .brand h1 .wt{font-size:1rem;}
body.sanctuary .brand-mark{width:2.6rem;height:2.6rem;}
body.sanctuary .brand-logo{height:2.6rem;max-width:min(60vw,520px);}
body.sanctuary .ticker{height:3rem;font-size:1.3rem;}
/* overscroll-behavior stops the browser's own pull-to-refresh / edge-swipe
   navigation from hijacking a globe-rotate drag — the reported cause of
   "rotation behaves badly on mobile" (the page, not the globe, was moving). */
body.sanctuary .mapwrap{overflow:hidden;overscroll-behavior:none;touch-action:none;
  min-height:280px;/* never collapse to 0 during an iOS address-bar transition */}
/* THE actual cause of "globe isn't visible in portrait": #watchMain's
   data-tab stays "feed" (its default) in Sanctuary, since the tabbar that
   would normally switch it to "map" is hidden there. The general mobile rule
   below — correct for the ordinary Intelligence/Map tab switcher — was still
   matching and hiding .mapwrap completely. A phone in portrait is under the
   760px breakpoint so this fired; in landscape a phone is often over it, so
   the same page "worked" there — which is exactly what got reported. Fixed
   by force-showing the map in Sanctuary regardless of data-tab, with enough
   specificity to win over the mobile rule further down this file. */
body.sanctuary .main[data-tab] .mapwrap{display:flex !important;}
body.sanctuary .mapstage{flex:1 1 auto;aspect-ratio:auto;height:100%;min-height:280px;}
body.sanctuary .sanctuary-caption{display:block;position:absolute;left:3vw;bottom:5vh;z-index:20;
  /* An explicit width, not just a cap — see the container-type note below
     for why "auto" can't be used here any more. Chosen to match what the
     old shrink-to-fit sizing actually produced for real headlines/quotes in
     practice (this card's content nearly always reaches this width anyway). */
  width:min(46vw,1100px);max-width:min(46vw,1100px);
  padding:1.4rem 1.8rem;border-radius:1.2rem;background:color-mix(in srgb,var(--color-oceanic-navy) 82%,transparent);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid color-mix(in srgb,var(--color-horizon-gold) 40%,transparent);color:var(--color-celestial-silver);
  box-shadow:0 0 60px -10px var(--aura-gold);transition:opacity .6s ease;cursor:pointer;
  /* round 3: this card auto-rotates content every 15s and, unlike the other
     Sanctuary widgets, was never given a way to shrink safely — dragging its
     resize grip smaller just let the headline/quote spill out past the
     card's own edge. container-type turns its own box into the reference
     for the cqi units below, so type scales down as the card is resized
     instead of overflowing; overflow-y is the backstop for whatever a single
     very long headline still doesn't fit even at the smallest size.
     IMPORTANT: inline-size containment disables shrink-to-fit ("width:auto"
     sizing driven by content) on this element — with only `left` set (no
     `right`), that's exactly how its width used to be computed, and without
     the explicit `width` above the box collapses to ~0 and the card goes
     invisible. Only matters here because left+right aren't both set; the
     mobile rule below sets both, which is a different, content-independent
     computation, so it resets width back to auto safely. */
  container-type:inline-size;overflow-y:auto;overflow-x:hidden;}
.sanctuary-caption[data-fading="true"]{opacity:0;}
.sc-body{padding-right:1.6rem;} /* keep text clear of .sc-min, which is absolutely positioned over the top-right corner */
.sanctuary-caption .k{font-family:var(--font-mono);font-size:clamp(.7rem,3.2cqi,.95rem);letter-spacing:.25em;text-transform:uppercase;color:var(--color-horizon-gold);}
.sanctuary-caption h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.1rem,9cqi,2.4rem);line-height:1.15;margin:.35rem 0 .3rem;overflow-wrap:break-word;}
.sanctuary-caption .place{font-family:var(--font-mono);font-size:clamp(.62rem,3.6cqi,1.05rem);letter-spacing:.12em;text-transform:uppercase;opacity:.8;}
.sanctuary-caption p{font-family:var(--font-serif);font-style:italic;font-size:clamp(.9rem,6cqi,1.7rem);line-height:1.35;margin:.9rem 0 0;color:var(--color-horizon-gold);overflow-wrap:break-word;}
.sanctuary-caption .tap-hint{display:block;margin-top:.8rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;}
/* Minimize toggle — collapses the card to a one-line strip instead of
   closing it outright, so a looping ambient card is never "gone" with no
   way back. Built once outside the part tick() rewrites every rotation. */
.sc-min{position:absolute;top:.6rem;right:.7rem;z-index:2;width:1.8rem;height:1.8rem;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--color-horizon-gold) 40%,transparent);
  background:color-mix(in srgb,var(--color-oceanic-navy) 55%,transparent);color:var(--color-celestial-silver);
  font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sc-min:hover{border-color:var(--color-horizon-gold);color:var(--color-horizon-gold);}
.sanctuary-caption.sc-collapsed{padding:.7rem 1.1rem;overflow:visible;}
.sanctuary-caption.sc-collapsed .sc-body{display:flex;align-items:baseline;gap:.7rem;padding-right:2.1rem;}
.sanctuary-caption.sc-collapsed .sc-body h2,
.sanctuary-caption.sc-collapsed .sc-body p,
.sanctuary-caption.sc-collapsed .sc-body .tap-hint{display:none;}
.sanctuary-caption.sc-collapsed .sc-body .place{opacity:.8;}
.sanctuary-clock{display:none;}
body.sanctuary .sanctuary-clock{display:block;font-family:var(--font-mono);font-size:1.2rem;letter-spacing:.15em;color:var(--color-celestial-silver);opacity:.8;}

/* map-tools in Sanctuary: larger, glassmorphic, thumb-reachable — visible in
   both orientations, not just an accidental landscape overflow. */
body.sanctuary .map-tools{top:auto;bottom:calc(5vh + 1rem);right:3vw;z-index:22;gap:10px;}
body.sanctuary .seg button,body.sanctuary .zoom button{padding:10px 16px;font-size:13px;}
body.sanctuary .zoom button{width:42px;height:40px;font-size:19px;}

/* ── 5.3c Wide-screen / projector mode (v2.2, phase 2 item 5) ────────────────
   For a prayer group on a projector or a 60"+ TV: generous negative space on
   both sides instead of the globe stretching edge to edge. Auto-detects a
   very wide viewport (matchMedia in app.js) or can be forced on/off from
   #sanctuaryWideToggle. Pure layout — no theme or content changes. */
body.sanctuary-wide .hdr{padding-left:7vw;padding-right:7vw;}
body.sanctuary-wide .ticker-track{padding-left:2vw;}
body.sanctuary-wide .mapwrap{padding:0 7vw;}
body.sanctuary-wide .sanctuary-caption{left:9vw;width:min(36vw,820px);max-width:min(36vw,820px);}
body.sanctuary-wide .map-tools{right:8vw;}
body.sanctuary-wide .sanctuary-detail{right:8vw;}
body.sanctuary-wide .sanctuary-clock{margin-right:1vw;}

/* ── 5.3b Sanctuary detail sidebar — opens on pin click. Previously a pin
   click in Sanctuary did nothing visible: state updated but there was no
   card to show it in (the list is never rendered there). This is the fix:
   the same Situation / Human Impact / Intercession Focus breakdown used in
   the main feed, in a glass panel over the globe. ── */
/* v2.1.1: this used to be a full top-to-bottom sidebar (440px wide, the
   entire height of the screen) — functionally a wall between the visitor and
   half the globe the moment they clicked anything, which is exactly what
   made "clicking pins" feel bad rather than enjoyable. Now it's a compact
   floating card anchored to a corner with its own max-height, so the globe
   stays visible around and above it. */
/* Anchored top-right, not bottom-right: the caption card lives bottom-left
   and .map-tools lives bottom-right (both sit at bottom:5vh) — a bottom-right
   detail card would sit directly on top of the map controls. Top-right is
   clear space below the (compact, brand-only) Sanctuary header. */
/* This card is deliberately self-contained/theme-independent — always the
   dark glass look, even when the rest of Sanctuary (and the main site) is on
   the light theme. Sanctuary can now be either theme (v2.1.1), but most of
   its inner content (.directive, .lbl, p, links) is the SAME markup the
   Watchtower feed cards use, styled with theme-variable colors like --text
   and --accent-ink that flip to dark navy in light mode. Inheriting that
   here, on top of this card's dark background, made the text unreadable
   (dark-on-dark) the moment Sanctuary wasn't dark. Fixing it by hardcoding
   the card's own palette is simpler and more robust than re-theming every
   nested class two different ways depending on where it's rendered. */
.sanctuary-detail{position:fixed;right:3vw;top:6.5rem;bottom:auto;width:min(300px,88vw);
  max-height:min(64vh,480px);z-index:100;border-radius:16px;
  background:color-mix(in srgb,var(--color-slate-frosted) 92%,var(--color-oceanic-navy));
  color:var(--color-celestial-silver);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(224,230,237,.16);box-shadow:0 20px 48px -16px rgba(0,0,0,.55);
  padding:1.1rem 1.25rem;overflow-y:auto;font-size:16px;animation:sanctSlideIn .32s cubic-bezier(.2,.8,.3,1);cursor:auto;}
@keyframes sanctSlideIn{from{transform:translateY(16px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.sanctuary-detail .sd-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:.7rem;}
.sanctuary-detail .sd-close{margin-left:auto;background:none;border:1px solid rgba(224,230,237,.28);border-radius:8px;
  color:var(--color-celestial-silver);font-size:1rem;line-height:1;padding:.25rem .55rem;flex-shrink:0;}
.sanctuary-detail .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-horizon-gold);}
.sanctuary-detail h2{font-family:var(--font-serif);font-weight:600;font-size:1.25rem;line-height:1.2;margin:.25rem 0;color:var(--color-celestial-silver);}
.sanctuary-detail .place{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:.7rem;}
.sanctuary-detail .directive{gap:.75rem;}
.sanctuary-detail .directive .lbl{font-size:.64rem;color:color-mix(in srgb,var(--color-taupe-slate) 45%,var(--color-celestial-silver));}
.sanctuary-detail .directive .ic{color:color-mix(in srgb,var(--color-taupe-slate) 45%,var(--color-celestial-silver));border-color:rgba(224,230,237,.28);}
.sanctuary-detail .directive p{font-size:.85rem;line-height:1.5;color:var(--color-celestial-silver);}
.sanctuary-detail .directive .focus p{font-size:.92rem;color:var(--color-horizon-gold);}
.sanctuary-detail .sd-source{margin-top:.8rem;padding-top:.7rem;border-top:1px solid rgba(224,230,237,.14);}
.sanctuary-detail .sd-source a{font-family:var(--font-mono);font-size:.72rem;color:var(--color-horizon-gold);}

/* ── Sanctuary sticky-note widgets (v2.2, widget.js) ────────────────────────
   Any card wearing .widget can be dragged/resized like a sticky note so a
   prayer group can arrange the screen themselves instead of a fixed card
   blocking the globe. .widget-handle is whatever part starts the drag (the
   whole caption card; just the header row on the detail card and the Vision
   Board widget, so their body text stays selectable). Double-click/tap a
   handle to snap a widget back to its default spot. */
.widget{touch-action:none;}
.widget-handle{cursor:grab;}
.widget-handle.dragging{cursor:grabbing;}
.widget-resize-grip{position:absolute;right:3px;bottom:3px;width:20px;height:20px;cursor:nwse-resize;
  opacity:.45;border-radius:4px;
  background-image:repeating-linear-gradient(135deg,var(--color-celestial-silver) 0 1.5px,transparent 1.5px 5px);
  background-position:bottom right;background-repeat:no-repeat;background-size:14px 14px;}
.widget-resize-grip:hover,.widget-resize-grip.dragging{opacity:.9;}
body.sanctuary .sanctuary-caption.widget{cursor:grab;}

/* ── Sanctuary Vision Board widget (v2.2, phase 2 items 4/7) — sanctuary-
   vision.js. Same dark-glass, theme-independent treatment as .sanctuary-
   detail (see the note above that block): this panel floats over the globe
   in either theme, so it hardcodes its own palette rather than inheriting
   --text/--surface. ── */
.sanctuary-vision{position:fixed;top:6.5rem;right:3vw;width:340px;min-width:260px;max-height:70vh;z-index:110;border-radius:16px;
  background:color-mix(in srgb,var(--color-slate-frosted) 92%,var(--color-oceanic-navy));color:var(--color-celestial-silver);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(224,230,237,.16);
  box-shadow:0 20px 48px -16px rgba(0,0,0,.55);display:flex;flex-direction:column;font-size:14px;cursor:auto;}
.sv-head{display:flex;align-items:center;gap:8px;padding:.9rem 1rem .6rem;flex-shrink:0;}
.sv-head h2{margin:0;font-family:var(--font-serif);font-weight:600;font-size:1.05rem;flex:1;color:var(--color-celestial-silver);}
.sv-close{background:none;border:1px solid rgba(224,230,237,.28);border-radius:8px;color:var(--color-celestial-silver);
  font-size:1rem;line-height:1;padding:.2rem .5rem;flex-shrink:0;}
.sv-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:0 1rem .7rem;flex-shrink:0;}
.sv-toolbar .tool-btn{font-size:9.5px;padding:5px 8px;color:var(--color-celestial-silver);border-color:rgba(224,230,237,.28);}
.sv-toolbar .tool-btn[aria-pressed="true"]{background:var(--color-horizon-gold);color:var(--color-oceanic-navy);border-color:var(--color-horizon-gold);}
.sv-body{overflow-y:auto;padding:0 1rem 1rem;flex:1;}
.sv-hint{margin:0;padding:8px 10px;border-radius:8px;border:1px dashed rgba(224,230,237,.35);
  font-family:var(--font-mono);font-size:10.5px;color:var(--color-celestial-silver);opacity:.9;flex:1;}
.sv-place-row{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.sv-empty{padding:20px 4px;text-align:center;color:rgba(224,230,237,.6);font-size:12.5px;}
.sv-row{display:flex;align-items:center;gap:9px;padding:8px 4px;border-radius:9px;border-bottom:1px solid rgba(224,230,237,.1);}
.sv-row:hover{background:rgba(224,230,237,.06);}
.sv-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;background:var(--dot-color,var(--color-horizon-gold));border:1px solid rgba(0,0,0,.25);}
.sv-dot[data-shape="diamond"]{border-radius:2px;transform:rotate(45deg);}
.sv-dot[data-shape="square"]{border-radius:2px;}
.sv-dot[data-shape="triangle"]{border-radius:0;clip-path:polygon(50% 0%,100% 100%,0% 100%);}
.sv-dot[data-shape="star"]{border-radius:0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.sv-dot[data-shape="cross"]{border-radius:0;clip-path:polygon(37% 0%,63% 0%,63% 22%,100% 22%,100% 48%,63% 48%,63% 100%,37% 100%,37% 48%,0% 48%,0% 22%,37% 22%);}
.sv-row-main{flex:1;min-width:0;cursor:pointer;}
.sv-row-main .t{font-family:var(--font-serif);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-row-main .p{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;opacity:.65;}
.sv-row>button{background:none;border:1px solid rgba(224,230,237,.28);border-radius:6px;color:var(--color-celestial-silver);
  font-size:12px;padding:3px 8px;flex-shrink:0;}
.sv-swatches,.sv-shapes{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px;}
.sv-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;}
.sv-swatch[aria-pressed="true"]{border-color:var(--color-celestial-silver);box-shadow:0 0 0 2px var(--color-horizon-gold);}
.sv-shape-btn{width:28px;height:28px;border-radius:8px;border:1px solid rgba(224,230,237,.28);background:rgba(224,230,237,.08);
  display:grid;place-items:center;padding:0;cursor:pointer;}
.sv-shape-btn[aria-pressed="true"]{border-color:var(--color-horizon-gold);background:color-mix(in srgb,var(--color-horizon-gold) 25%,transparent);}
.sv-shape-btn span{width:11px;height:11px;background:var(--color-celestial-silver);display:block;border-radius:50%;}
.sv-shape-btn[data-shape="diamond"] span{border-radius:2px;transform:rotate(45deg);}
.sv-shape-btn[data-shape="square"] span{border-radius:2px;}
.sv-shape-btn[data-shape="triangle"] span{border-radius:0;clip-path:polygon(50% 0%,100% 100%,0% 100%);}
.sv-shape-btn[data-shape="star"] span{border-radius:0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.sv-shape-btn[data-shape="cross"] span{border-radius:0;clip-path:polygon(37% 0%,63% 0%,63% 22%,100% 22%,100% 48%,63% 48%,63% 100%,37% 100%,37% 48%,0% 48%,0% 22%,37% 22%);}
/* Custom color spectrum (round 3): a native <input type="color"> gives us
   the "drag across a spectrum" picker for free — no canvas or JS color-wheel
   needed, so it stays inside the zero-dependency/CSP rules. Browsers paint
   very different chrome for a bare color input (a plain swatch in some, a
   swatch-plus-border in others), so instead of fighting that per-vendor, the
   input sits invisible on top of a decorative rainbow circle: what you SEE
   is always our swatch, what you CLICK is the native picker underneath. */
.sv-swatch-custom{position:relative;width:26px;height:26px;border-radius:50%;flex-shrink:0;
  border:2px solid transparent;background:conic-gradient(from 0deg,#f04a38,#f2c14e,#4c9a5b,#3fa796,#4a90e2,#8b7fd1,#e85d9e,#f04a38);}
.sv-swatch-custom.active{border-color:var(--color-celestial-silver);box-shadow:0 0 0 2px var(--color-horizon-gold);}
.sv-swatch-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.sv-legend-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.sv-legend-row input{flex:1;padding:6px 8px;border-radius:7px;border:1px solid rgba(224,230,237,.28);
  background:rgba(11,19,43,.35);color:var(--color-celestial-silver);font-size:12px;}
.sv-country-row{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:12.5px;border-bottom:1px solid rgba(224,230,237,.08);}
.sv-country-row .n{flex:1;}
.sv-field{display:block;margin-bottom:11px;}
.sv-field>span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  opacity:.7;margin-bottom:4px;}
.sv-field input[type="text"],.sv-field input[type="password"],.sv-field textarea{width:100%;padding:8px 9px;border-radius:7px;
  border:1px solid rgba(224,230,237,.28);background:rgba(11,19,43,.35);color:var(--color-celestial-silver);font-size:12.5px;box-sizing:border-box;}
.sv-field textarea{min-height:60px;resize:vertical;}
.sv-check{display:flex;gap:8px;align-items:center;font-size:12px;margin:6px 0 12px;}
.sv-foot{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;margin-top:6px;}
.sv-foot .btn{font-size:10px;padding:6px 10px;background:transparent;border:1px solid rgba(224,230,237,.28);color:var(--color-celestial-silver);}
.sv-foot .btn.primary{background:var(--color-horizon-gold);border-color:var(--color-horizon-gold);color:var(--color-oceanic-navy);font-weight:600;}
.sv-foot .btn.danger{border-color:var(--color-crimson-ember);}
.sanctuary-vision .images img{border-color:rgba(224,230,237,.28);}
.sanctuary-vision .notice{background:rgba(11,19,43,.35);border-color:rgba(224,230,237,.28);color:var(--color-celestial-silver);}
.sanctuary-vision .code{background:rgba(11,19,43,.35);border-color:var(--color-horizon-gold);color:var(--color-celestial-silver);}
.sv-sync-state{font-family:var(--font-mono);font-size:10px;color:rgba(224,230,237,.75);margin:8px 0;}
@media (max-width:760px){
  .sanctuary-detail{width:92vw;right:4vw;left:4vw;bottom:calc(4vh + .5rem);top:auto;
    max-height:min(46vh,420px);border-radius:16px;animation:sanctSlideUp .32s cubic-bezier(.2,.8,.3,1);}
  @keyframes sanctSlideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  body.sanctuary .map-tools{bottom:calc(4vh + .5rem);right:4vw;}
  /* Both left AND right set here — width goes back to "auto", but that's now
     a fill-the-gap computation (content-independent), not shrink-to-fit, so
     it's unaffected by the container-type note on the base rule above. */
  body.sanctuary .sanctuary-caption{right:4vw;left:4vw;width:auto;max-width:none;bottom:auto;top:5.5rem;}
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .hdr{padding:10px 14px;gap:10px;}
  .brand h1{font-size:19px;}
  .brand .sub{display:none;}
  /* A wide horizontal lockup needs real width to stay legible, not just a
     taller box — the old 150px cap read as a squint-to-see thumbnail on
     phones. Height still leaves headroom under the 44px tap-target row;
     width scales with the viewport (min() ) instead of a tight fixed cap. */
  .brand-logo{height:44px;max-width:min(68vw,320px);}
  .hdr-spacer{display:none;}
  .viewnav{order:3;width:100%;}
  .viewnav button,.viewnav a{flex:1;justify-content:center;}
  .hdr-tools-col{margin-left:auto;align-items:flex-end;}
  .hdr-tools .wide{display:none;}
  .vigil .txt{display:none;}
  .brand h1 .wt{font-size:9px;letter-spacing:2px;margin-left:6px;}
  .brand-mark{width:26px;height:26px;}
  #refreshBtn .lbl{display:none;}
  .tabbar{display:flex;}
  .main{flex-direction:column;}
  .sidebar{flex:1 1 auto !important;max-width:none;min-width:0;}
  .resizer{display:none;}
  .mapwrap{flex:1 1 auto;min-width:0;}
  .main[data-tab="list"] .mapwrap,.main[data-tab="feed"] .mapwrap{display:none;}
  .main[data-tab="map"] .sidebar{display:none;}
  .stream-stage{min-height:210px;}
  .card-actions .mobile-only{display:inline-flex;}
  .beam-layer{display:none;}
  .fab{right:14px;bottom:14px;padding:12px 15px;}
  .ticker{font-size:10px;}
  footer{padding:6px 14px;gap:4px 10px;font-size:9px;line-height:1.35;}
  footer > span:first-child{flex:1 1 100%;}
  body.sanctuary{font-size:16px;}
  body.sanctuary .sanctuary-caption{max-width:none;right:3vw;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .ticker-track{animation:none;}
  .beam-layer .beam-pulse{display:none;}
}

/* ── 5.4 Print Field Guide ──────────────────────────────────────────────── */
.print-guide{display:none;}
@media print{
  @page{size:auto;margin:16mm 14mm;}
  html,body{height:auto;background:#fff !important;color:#000 !important;font-size:11pt;transition:none !important;}
  body > *:not(.print-guide){display:none !important;}
  .print-guide{display:block !important;font-family:Georgia,'Times New Roman',serif;color:#000;}
  .print-guide header{border-bottom:2pt solid #000;padding-bottom:6pt;margin-bottom:12pt;}
  .print-guide h1{font-size:20pt;margin:0;}
  .print-guide .sub{font-family:Arial,Helvetica,sans-serif;font-size:9pt;margin:3pt 0 0;}
  .print-guide article{break-inside:avoid;page-break-inside:avoid;border-bottom:.5pt solid #999;padding:9pt 0;}
  .print-guide h2{font-size:13pt;margin:0 0 2pt;}
  .print-guide .meta{font-family:Arial,Helvetica,sans-serif;font-size:8.5pt;text-transform:uppercase;letter-spacing:.5pt;margin-bottom:5pt;}
  .print-guide dl{margin:0;display:grid;grid-template-columns:34mm 1fr;gap:3pt 8pt;}
  .print-guide dt{font-family:Arial,Helvetica,sans-serif;font-size:8.5pt;font-weight:bold;text-transform:uppercase;}
  .print-guide dd{margin:0;}
  .print-guide .intel{font-size:9.5pt;margin-top:5pt;}
  .print-guide .src{font-family:Arial,Helvetica,sans-serif;font-size:8pt;margin-top:3pt;word-break:break-all;}
  .print-guide footer{display:block !important;border:0;background:none;color:#000;font-family:Arial,Helvetica,sans-serif;font-size:8pt;margin-top:12pt;padding:0;}
}
.sync-gap{height:12px;}

#vbList{padding-bottom:88px;}
body[data-view="resources"] #clearBtn{display:none;}
:root[data-theme="light"] .beam-layer .beam-core{stroke-width:2.2;}
:root[data-theme="light"] .beam-layer .beam-glow{opacity:.45;}