/* episkope built-in pages (A85): sign-in, enrolment, consent, device approval; and the read-only dashboard (A124). */
:root { color-scheme: light dark; --fg: #1b1f24; --bg: #fafafa; --muted: #5b6470; --accent: #2457c5; --warn: #9a3b00; --line: #d8dde3; }
@media (prefers-color-scheme: dark) { :root { --fg: #e8eaed; --bg: #16181c; --muted: #a0a7b1; --accent: #7ea6ff; --warn: #ffb27a; --line: #333a44; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
main { max-width: 34rem; margin: 3rem auto; padding: 0 1.25rem; }
h1 { font-size: 1.5rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
section { border-top: 1px solid var(--line); padding-top: .75rem; }
label { display: block; margin: .5rem 0; }
input { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; }
button { margin: .5rem .5rem .25rem 0; padding: .5rem 1rem; font: inherit; color: #fff; background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; }
button.secondary { color: var(--fg); background: transparent; border: 1px solid var(--line); }
code, .codes { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
code { word-break: break-all; }
.codes { columns: 2; padding-left: 1.5rem; }
.muted { color: var(--muted); }
.warn { color: var(--warn); font-weight: 600; }
.status { min-height: 1.5rem; margin-top: .75rem; }
[hidden] { display: none !important; }

/* The read-only dashboard (A124): body.dash. Classes only, never inline
   style, so the pages' CSP (style-src 'self') stays strict. */
:root { --card: #ffffff; --ok: #1d7a3a; --bad: #b3261e; --neutral: #5b6470; --tint: #eef2f8; }
@media (prefers-color-scheme: dark) { :root { --card: #1d2026; --ok: #6fd08c; --bad: #ff8a80; --neutral: #a0a7b1; --tint: #232833; } }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: .5rem; top: .5rem; z-index: 10; padding: .4rem .7rem; background: var(--card); border: 1px solid var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dash a { color: var(--accent); }
.dash a:focus-visible, .dash button:focus-visible, .dash select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.topbar .bar { max-width: 76rem; margin: 0 auto; padding: .5rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.brand { font-weight: 700; text-decoration: none; color: var(--fg) !important; }
.brand .install { font-weight: 400; color: var(--muted); margin-left: .25rem; }
/* A branded install's name ([console], theme.css sets --accent): in the header and above a sign-in page's heading. */
.brand-name { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.brand-line { margin: 0 0 .5rem; font-weight: 700; }
.brand-line .install { font-weight: 400; color: var(--muted); }
.topbar nav ul, .tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.topbar nav { flex: 1 1 auto; }
.topbar nav a, .tabs a { display: inline-block; padding: .3rem .6rem; border-radius: 6px; text-decoration: none; }
.topbar nav a[aria-current="page"], .tabs a[aria-current="page"] { background: var(--tint); color: var(--fg); font-weight: 600; }
.who { display: flex; align-items: center; gap: .5rem; }
.who form { margin: 0; }
button.small { margin: 0; padding: .3rem .7rem; font-size: .9rem; }
main.wide { max-width: 76rem; margin: 1.5rem auto 2rem; }
.dash h1 { font-size: 1.4rem; overflow-wrap: anywhere; }
.dash section { border-top: 0; padding-top: 0; }
.lede { color: var(--muted); margin-top: -.5rem; }
.small { font-size: .85rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; display: flex; flex-direction: column; }
.stat .figure { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--muted); font-size: .9rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line) !important; border-radius: 8px; padding: .25rem 1rem 1rem !important; margin: 0 0 1rem; min-width: 0; }
.card h2 { margin-top: .75rem; }
.table-wrap { overflow-x: auto; }
.dash table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.dash th, .dash td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.dash th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.dash td time { white-space: nowrap; }
.badge { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.badge.ok { color: var(--ok); }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--bad); }
.badge.neutral { color: var(--neutral); }
.reason { color: var(--muted); font-size: .85rem; margin-top: .2rem; overflow-wrap: anywhere; }
.empty { color: var(--muted); background: var(--tint); border-radius: 6px; padding: .6rem .8rem; }
.empty.warn { color: var(--warn); font-weight: 400; }
.note { background: var(--tint); border-left: 3px solid var(--accent); padding: .5rem .8rem; border-radius: 4px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.tabs { margin: 0 0 1rem; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; margin-bottom: 1rem; }
.filters label { margin: 0; }
.filters select { display: block; margin-top: .25rem; padding: .35rem .5rem; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.shape { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; overflow-wrap: anywhere; }
.shape.big { font-size: 1rem; background: var(--tint); padding: .6rem .8rem; border-radius: 6px; }
.chart { margin: .5rem 0 1rem; color: var(--accent); }
.chart figcaption { color: var(--muted); font-size: .85rem; }
.spark { display: block; width: 100%; height: 5rem; }
.decision { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .5rem; }
.decision h3 { font-size: 1rem; margin: .25rem 0; }
.citations { margin: .25rem 0; padding-left: 1.25rem; }
.digest { padding-left: 1.25rem; }
.dash pre { overflow-x: auto; background: var(--tint); padding: .6rem; border-radius: 6px; font-size: .85rem; }
.foot { max-width: 76rem; margin: 0 auto 2rem; padding: 0 1.25rem; color: var(--muted); font-size: .85rem; }
@media (max-width: 40rem) {
  .topbar .bar { padding: .5rem .75rem; }
  main.wide { padding: 0 .75rem; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { margin-top: .4rem; }
}
.grid > .card { margin: 0; }
.grid { margin-bottom: 1rem; }
.dash code { word-break: normal; overflow-wrap: anywhere; }
.dash td .shape, .dash td .detail { display: inline-block; min-width: 14rem; overflow-wrap: anywhere; }

/* The installable app (A126): the offline banner the service worker adds to a
   saved page, and the Devices page's inline forms and notes. */
.offline-banner { margin: 0; padding: .5rem 1.25rem; background: var(--tint, #eef2f8); color: var(--warn); font-weight: 600; border-bottom: 1px solid var(--line); }
form.inline { display: inline; margin: 0; }
.dash details { margin: .5rem 0; }
.dash details summary { cursor: pointer; color: var(--accent); }

/* Console writes (A148 step 2): forms that act, within the viewer's role. */
form.act { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; margin: .5rem 0; }
form.act label { margin: 0; }
form.act input:not([type=hidden]):not([type=checkbox]), .dash input.inline { display: inline-block; width: auto; min-width: 12rem; margin-top: .25rem; }
.dash input.inline { min-width: 8rem; padding: .3rem .5rem; margin: 0 .25rem 0 0; }
.dash select { display: block; margin-top: .25rem; padding: .35rem .5rem; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
form.inline select { display: inline-block; }
form.inline label { display: inline; margin: 0 .25rem 0 0; }
.dash fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .25rem .75rem .5rem; margin: 0; }
.dash fieldset legend { color: var(--muted); font-size: .9rem; }
label.check { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
label.check input { display: inline-block; width: auto; margin: 0; }
button.danger, a.button.danger { background: var(--bad); color: #fff; }
a.button { display: inline-block; margin: .5rem .5rem .25rem 0; padding: .5rem 1rem; border-radius: 6px; text-decoration: none; }
.controls { margin: 0 0 1rem; }
.grade { margin: .5rem 0 0; }

/* The annunciator panel (A155): a lamp grid. Transit lamps glow amber
   while work is in progress, state lamps are steady green, latched lamps
   flash red until acknowledged, then hold steady while their condition
   does. Pipeline lamps take their colour, and brighten and breathe faster
   with their rate (lvl-1 to lvl-5). Classes only (the CSP forbids inline
   style); with reduced motion nothing breathes or flashes. */
:root { --lamp-off: #c9ced6; --amber: #f2a900; --lamp-ok: #2fbf5b; --lamp-red: #e5372b;
  --c-blue: #2f7df6; --c-green: #2fbf5b; --c-yellow: #f2d100; --c-orange: #ff8a1f; --c-red: #e5372b; }
@media (prefers-color-scheme: dark) { :root { --lamp-off: #3a414c; } }
.panel .lamp-row h2, .panel .banks h2 { font-size: 1rem; margin: 1rem 0 .4rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.panel ul.lamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.panel ul.lamps.one { display: block; }
.lamp { --glow: var(--amber); display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: .9rem; min-width: 0; }
.lamp .legend { overflow-wrap: anywhere; }
.banktable .lamp { border: 0; background: none; padding: .1rem; justify-content: center; }
.banktable .lamp .legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.banktable td { text-align: center; }
.bulb { flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--lamp-off); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.lamp.state { --glow: var(--lamp-ok); }
.lamp.latched-kind { --glow: var(--lamp-red); }
.lamp.c-blue, .key.c-blue { --glow: var(--c-blue); }
.lamp.c-green, .key.c-green { --glow: var(--c-green); }
.lamp.c-yellow, .key.c-yellow { --glow: var(--c-yellow); }
.lamp.c-orange, .key.c-orange { --glow: var(--c-orange); }
.lamp.c-red, .key.c-red { --glow: var(--c-red); }
.key .bulb { display: inline-block; vertical-align: -.15rem; background: var(--glow); }
.key { margin-right: .75rem; white-space: nowrap; }
.lamp.on .bulb { background: var(--glow); box-shadow: 0 0 .35rem .05rem var(--glow); }
.lamp.on.transit, .lamp.on.latched { border-color: var(--glow); }
.lamp.on.lvl-1 .bulb { opacity: .7; }
.lamp.on.lvl-3 .bulb { box-shadow: 0 0 .55rem .15rem var(--glow); }
.lamp.on.lvl-4 .bulb { box-shadow: 0 0 .75rem .25rem var(--glow); }
.lamp.on.lvl-5 .bulb { box-shadow: 0 0 1rem .35rem var(--glow); }
@keyframes breathe { from { filter: brightness(.75); } to { filter: brightness(1.25); } }
@keyframes flash { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
.lamp.on.lvl-1 .bulb { animation: breathe 2.4s ease-in-out infinite alternate; }
.lamp.on.lvl-2 .bulb { animation: breathe 1.6s ease-in-out infinite alternate; }
.lamp.on.lvl-3 .bulb { animation: breathe 1.1s ease-in-out infinite alternate; }
.lamp.on.lvl-4 .bulb { animation: breathe .7s ease-in-out infinite alternate; }
.lamp.on.lvl-5 .bulb { animation: breathe .4s ease-in-out infinite alternate; }
.lamp.state.on .bulb, .lamp.latched-kind.on .bulb { animation: none; }
.lamp.latched-kind.on.latched .bulb { animation: flash 1s steps(1) infinite; }
.panel .acks { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: .5rem 0 0; }
.panel .bank-tabs { margin: .25rem 0 .5rem; }
.panel .legend-row { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .lamp .bulb { animation: none !important; } }