/* v113: the Prophecy Explorer. Loaded after btb.css (the picture pane, the layer bar, the stop cards, the pager and the download block) and tl.css (the Timeline's page and table styles, which the data page reuses);
   this file adds the panel that opens when an arc is tapped, and a few lines for the data page. Colours come from the site's own tokens. */

.pe-tapnote{margin:.2em 0 .8em;font:400 15.5px/1.5 var(--sans);color:var(--ink-soft,var(--ink));max-width:46em}
.pe .prose{max-width:46em}

/* ---- the arc panel: a sheet at the foot of the window, like the site's verse pop-up (which opens above it) */
.pe-sheet{position:fixed;left:0;right:0;bottom:0;z-index:240;display:flex;justify-content:center;padding:0 10px max(10px,env(safe-area-inset-bottom,0px));pointer-events:none}
.pe-sheet[hidden]{display:none}
.pe-sheet-in{pointer-events:auto;box-sizing:border-box;width:100%;max-width:640px;max-height:52vh;overflow:auto;background:var(--surface,#fff);color:var(--ink,#1c1a17);border:1px solid var(--accent,#2a4480);border-radius:14px;box-shadow:0 8px 34px rgba(0,0,0,.35);padding:12px 18px 14px;font:400 16px/1.5 var(--sans,system-ui,sans-serif)}
@media (max-height:520px){.pe-sheet-in{max-height:70vh}}
.pe-hd{display:flex;align-items:flex-start;gap:10px}
.pe-hd h2{flex:1;margin:0;font:700 18px/1.3 var(--serif,Georgia,serif);overflow-wrap:anywhere}
.pe-hd h2:focus{outline:none}
.pe-x{flex:0 0 auto;min-height:44px;min-width:44px;margin:-8px -10px 0 0;font:600 15px var(--sans,system-ui,sans-serif);color:var(--accent,#2a4480);background:transparent;border:0;cursor:pointer}
.pe-x:focus-visible,.pe-nb:focus-visible,.pe-sheet a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
.pe-chips{display:flex;flex-wrap:wrap;gap:6px;margin:.2em 0 .6em;padding:0}
.pe-chip{display:inline-block;padding:1px 9px;border:1px solid var(--rule,#d0d7de);border-radius:11px;font:600 13px/1.6 var(--sans,system-ui,sans-serif);color:var(--ink)}
.pe-chip-k{background:var(--accent-soft,rgba(42,68,128,.1));border-color:transparent}
.pe-row{display:grid;grid-template-columns:minmax(8.5em,12em) 1fr;gap:.1em 1em;padding:.3em 0;border-top:1px solid var(--rule,#d0d7de)}
.pe-row:first-of-type{border-top:0}
.pe-k{font:700 13.5px/1.5 var(--sans,system-ui,sans-serif);color:var(--muted,#5b574f)}
.pe-v{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.pe-row{grid-template-columns:1fr}}
.pe-ref.scr,.pe-sheet .scr{font-weight:600}
.pe-links{margin:.6em 0 0;font:400 15px/1.7 var(--sans,system-ui,sans-serif)}
.pe-links a{color:var(--accent)}
.pe-near{margin-top:.7em;padding-top:.5em;border-top:1px solid var(--rule,#d0d7de);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pe-nb{font:500 14.5px/1.3 var(--sans,system-ui,sans-serif);min-height:40px;padding:4px 12px;border:1px solid var(--rule,#d0d7de);border-radius:8px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.pe-nb:hover{border-color:var(--accent)}
@media (pointer:coarse){.pe-nb{min-height:44px}}
@media print{.pe-sheet{display:none!important}}

/* ---- the data page */
.pe-guide{display:grid;grid-template-columns:minmax(11em,max-content) 1fr;gap:.35em 1em;margin:.2em 0 1em;font:400 15px/1.5 var(--sans)}
.pe-guide dt{font-weight:700;color:var(--muted);overflow-wrap:anywhere}
.pe-guide dd{margin:0}
@media (max-width:560px){.pe-guide{grid-template-columns:1fr}.pe-guide dt{margin-top:.4em}}
table.pe-nd{min-width:52em}
.pe-nd td{font-size:14.5px}