/* The pager (pager-view.mjs): the tray on the top bar (a lamp, then one icon per page) and Comms, its list. No new
   colours: amber is what you act on, red a threat. Nothing here moves: the lamp blinks (light), a new page glows. */
.pager { display: flex; align-items: center; gap: 4px; flex: none; min-height: 30px; padding: 3px 5px 3px 4px; color: var(--muted); background: #1b1409; border: 1px solid #3a2c14; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 0 rgba(0, 0, 0, 0.6); }
.pager[aria-expanded='true'] { border-color: var(--amber); }
.pager button { font-family: var(--mono); }
.pager button:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }
.pager .led { width: 7px; height: 7px; border-radius: 50%; background: #3a2c14; flex: none; }
.pager .led.on { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.pager .led.blink { animation: pagerblink 1.2s steps(1) infinite; }
.pager .led.alert { background: var(--hot); box-shadow: 0 0 6px var(--hot); }
.no-motion .pager .led { animation: none; }
.pg-lamp { display: flex; align-items: center; padding: 6px 4px; background: none; border: 0; cursor: pointer; }
.pg-lamp:hover .led:not(.on) { background: var(--amber-deep); }
.pg-tile { display: grid; place-items: center; width: 26px; height: 22px; padding: 0; color: var(--amber); background: rgba(241, 185, 47, 0.06); border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; }
.pg-tile .glyph { width: 14px; height: 14px; margin: 0; }
.pg-tile:hover { background: rgba(241, 185, 47, 0.16); }
.pg-tile.new { border-color: var(--amber); box-shadow: 0 0 6px rgba(241, 185, 47, 0.35); }
.pg-tile.threat { color: var(--hot); border-color: rgba(255, 91, 61, 0.6); background: var(--hot-soft); }
.pg-tile.threat.new { border-color: var(--hot); box-shadow: 0 0 6px rgba(255, 91, 61, 0.45); }
.pg-more { padding: 0 3px; font: 600 11px var(--mono); color: var(--muted); background: none; border: 0; cursor: pointer; }

/* Comms: the pages with their buttons, the news folded under them. */
.comms .pg-scroll { min-height: 0; overflow: auto; }
.pg-inbox .pgi { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid rgba(241, 185, 47, 0.08); }
.pg-inbox .pgi.unseen { background: rgba(241, 185, 47, 0.05); }
.pgi-ico { display: grid; place-items: center; color: var(--amber); }
.pgi-ico .glyph { width: 16px; height: 16px; margin: 0; }
.pgi.threat .pgi-ico { color: var(--hot); }
.pgi-main { display: grid; gap: 1px; min-width: 0; }
.pgi-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--mono); color: var(--bright); }
.pgi-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px var(--mono); color: var(--dim); }
.pgi-act { min-width: 76px; white-space: nowrap; }
.pgi-act.hot { color: var(--hot); border-color: var(--hot); background: var(--hot-soft); }
.pg-hist summary { padding: 8px 12px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); cursor: pointer; }
.pg-hist summary b { color: var(--muted); }
.pg-hist[open] summary { border-bottom: 1px solid var(--line); }
.pgh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 12px; font: 11px var(--mono); color: var(--muted); }
.pgh-k { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.pgh-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgh-age { font-size: 10px; color: var(--dim); }
/* The director's history (event-cards.mjs historyMarkup): its icon, the name, how it ended; won and taken in amber. */
.pg-hist.dh .pgh-k { display: inline-flex; gap: 3px; align-items: center; color: var(--daemon, #c3a6ff); }
.pg-hist.dh .pgh-k .glyph { width: 12px; height: 12px; margin: 0; }
.pg-hist.dh .pgh.dh-won .pgh-age, .pg-hist.dh .pgh.dh-taken .pgh-age, .pg-hist.dh .pgh.dh-true .pgh-age { color: var(--amber); }
.pgh.done { opacity: 0.55; }
.pgh.go { cursor: pointer; }
.pgh.go:hover .pgh-t { color: var(--bright); }

/* Narrower top bars (the casing at 1440, a Fight or Run tab, more tabs): the tray tightens so who-you-are keeps the
   class name (at 1440 with six tabs: three icons and +n, class shown, a threat's chip too). */
@media (max-width: 1520px) and (min-width: 901px) { .pager { gap: 2px; padding: 3px 3px 3px 1px; } .pg-tile { width: 22px; } .pg-lamp { padding: 6px 3px; } .pg-more { padding: 0 2px; } }
.topbar.fit-2 .pg-tile { width: 21px; }
.topbar.fit-2 .pg-tile .glyph { width: 13px; height: 13px; }
/* Phone: the pager's cell on the top bar's first row, the lamp and up to three icons. */
@media (max-width: 900px) { .pager + .meters { margin-left: 0; } }

/* A page's quest before you take it (pager-view.mjs askMarkup): the quest window's card over the screen, Take or Cancel. */
.gain.pg-ask-wrap { z-index: 41; }
.gain.pg-ask-wrap .pz-card.pg-ask { width: min(520px, 100%); gap: var(--s5); }
.pg-ask .qa-lines { display: grid; gap: var(--s3); color: var(--text); }
.pg-ask .rw-chips { justify-content: flex-start; }
.pg-ask .acts { justify-content: flex-end; }