.liveq { container-type:inline-size; position:relative; --lq-ink:#d9f4ed; color:var(--lq-ink); background:linear-gradient(125deg,#091c34 0%,#103e51 58%,#155853 100%); border:1px solid #42858b; border-radius:20px; overflow:hidden; margin:0 0 28px; box-shadow:0 18px 50px #071f3520; }
.liveq .lq-head { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:20px 24px 12px; }
.liveq h1,.liveq .lq-head h2 { font-size:27px; letter-spacing:-1px; margin:0; color:#d5f7ba; }
.liveq .lq-tag { color:#b3dcd9; font-size:13px; }
.liveq .lq-head { padding-bottom:10px; }
.liveq .lq-menu { position:relative; }
.liveq .lq-menu > summary { list-style:none; user-select:none; }
.liveq .lq-menu > summary::-webkit-details-marker { display:none; }
.liveq .lq-menu > summary::after { content:'▾'; margin-left:4px; font-size:10px; opacity:.8; }
.liveq .lq-menu[open] > summary { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
/* The Explore list (the Explore sheet): every domain with its window total, under its macro. */
.liveq .lq-explore { display:flex; flex-direction:column; align-items:stretch; gap:5px; }
.liveq .lq-explore .lq-chip { justify-content:flex-start; gap:7px; }
.liveq .lq-explore .lq-chip[aria-current=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
/* A macro's heading in Explore is a button (Gate C: it previews the macro and goes there); it keeps the heading's look. */
.liveq .lq-explore button.lq-macro-h { align-self:flex-start; padding:3px 8px; margin:6px 0 0 -6px; border:1px solid transparent; border-radius:10px; background:transparent; text-align:left; font-size:10.5px; color:#9cc6c3; letter-spacing:.3px; text-transform:uppercase; }
.liveq .lq-explore button.lq-macro-h:hover { background:#ffffff10; border-color:transparent; color:#e9fbf2; }
.liveq .lq-explore button.lq-macro-h[aria-current=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
.liveq .lq-explore button.lq-macro-h[hidden] { display:none; }
@media (pointer:coarse) { .liveq .lq-explore button.lq-macro-h { min-height:44px; } }
.liveq .lq-explore .lq-n { margin-left:auto; padding-left:10px; color:#9cc6c3; font-variant-numeric:tabular-nums; }
.liveq .lq-groups { display:flex; flex-wrap:wrap; gap:5px; }
.liveq .lq-groups .lq-chip { justify-content:flex-start; gap:7px; }
/* The subject row (liveq-nav.js fills it; under Follow a subject in the Journey sheet): a labelled search,
   and a note on its scope or its result. */
.liveq .lq-subject-row { flex:1 1 100%; padding:4px 0 0; }
.liveq .lq-subject-row[hidden] { display:none; }
.liveq .lq-subject-row form { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.liveq .lq-subject-row label { font-size:12px; color:#bddcdb; white-space:nowrap; }
.liveq .lq-subject-row input[type=search] { flex:1 1 200px !important; max-width:360px; }
.liveq .lq-subject-row .lq-note { flex:1 1 100%; font-size:11px; color:#9cc6c3; }
.liveq button.lq-chip[aria-expanded=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
/* While a PR Crisis is pinned the Explore openers (▾ and the ◉ row) say why they do nothing (their title). */
.liveq [data-opens=explore][aria-disabled=true] { opacity:.5; cursor:default; }
.liveq.lq-failed :is(.lq-dock,.lq-sheet) :is(button,select,input):disabled { opacity:.45; cursor:default; }
/* The state chip (liveq.js scopeLine): what the view is — live, loading, stale, unavailable, capped. In the
   dock it floats above the capsule only while the view is not healthy; the facts are in Scope & sources. */
.liveq .lq-scope { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:0 24px 8px; font-size:12px; color:#bddcdb; line-height:1.5; }
.liveq .lq-scope-text { display:inline; flex:1 1 auto; min-width:0; }
/* The same account in the Scope & sources sheet (the dock moves .lq-scope-detail into .lq-scope-host): its long
   wording, with spaced dots. */
.liveq :is(.lq-scope,.lq-scope-host) b { color:#e6fbd0; font-weight:600; }
.liveq :is(.lq-scope,.lq-scope-host) .lq-dot { opacity:.55; margin:0 6px; }
.liveq :is(.lq-scope,.lq-scope-host) .lq-short { display:none; }
.liveq .lq-state { display:inline-flex; align-items:center; gap:6px; padding:1px 8px; border-radius:12px; border:1px solid #3f7479; background:#0f2f40; color:#cfe9e4; font-size:11px; white-space:nowrap; }
.liveq .lq-state::before { content:''; width:7px; height:7px; border-radius:50%; background:#8fb7d6; flex:0 0 auto; }
.liveq .lq-state.is-live::before { background:#c6efa6; box-shadow:0 0 6px #c6efa6; }
.liveq .lq-state.is-loading::before { background:#8fb7d6; animation:lq-pulse 1.2s ease-in-out infinite; }
.liveq .lq-state.is-stale,.liveq .lq-state.is-failed { border-color:#b3a3f2; color:#e3dcff; white-space:normal; }
.liveq .lq-state.is-stale::before,.liveq .lq-state.is-failed::before { background:#b3a3f2; }
.liveq .lq-state.is-capped { border-color:#8fb7d6; color:#d6e9f7; }
.liveq .lq-state :is(.lq-retry,.lq-load-all) { font-size:11px; padding:1px 8px; margin-left:2px; }
/* The focus note (Gate C §6.5): a focus with nothing lit says why — hidden by the filter (with Draw X), staged, or empty
   in this window — beside the state chip; neutral ink, the chip's own shape. */
.liveq .lq-focus-note { display:inline-flex; align-items:center; gap:6px; padding:1px 8px; border-radius:12px; border:1px solid #5b989b; background:#0f2f40; color:#cfe9e4; font-size:11px; }
.liveq .lq-focus-note[hidden] { display:none; }
.liveq .lq-focus-note button { font-size:11px; padding:1px 8px; }
@keyframes lq-pulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .liveq .lq-state.is-loading::before { animation:none; } }
.liveq .lq-scope-more { display:inline-block; }
.liveq .lq-scope-more > summary { list-style:none; cursor:pointer; color:#d1f6a9; text-decoration:underline dotted; text-underline-offset:3px; }
.liveq .lq-scope-more > summary::-webkit-details-marker { display:none; }
.liveq .lq-scope-more[open] > summary { color:#e9fbf2; }
.liveq .lq-scope-detail { margin:4px 0 0; padding:10px 12px; background:#0b2437f2; border:1px solid #5b989b; border-radius:12px; font-size:12px; line-height:1.55; color:#cfe9e4; }
.liveq .lq-scope-more[open] { flex:1 1 100%; }
.liveq .lq-scope-detail dl { display:grid; grid-template-columns:max-content 1fr; gap:3px 14px; margin:0; }
.liveq .lq-scope-detail dt { color:#9cc6c3; }
.liveq .lq-scope-detail dd { margin:0; overflow-wrap:anywhere; }
.liveq .lq-scope-detail .lq-counts { display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; padding:0; list-style:none; }
.liveq .lq-scope-detail .lq-counts li { display:inline-flex; gap:5px; align-items:center; }
.liveq .lq-scope-detail .lq-counts .lq-swatch { width:8px; height:8px; }
.liveq .lq-scope-detail p { margin:6px 0 0; }
/* Browse rows: the headline, what activating it does, its source and arrival time. */
.liveq .lq-items .lq-rec { display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:baseline; width:100%; max-width:none; text-align:left; border-radius:12px; padding:7px 12px; }
.liveq .lq-items .lq-rec .lq-t { color:#e1f7ef; }
.liveq .lq-items .lq-rec .lq-swatch { margin-right:6px; }
.liveq .lq-items .lq-rec .lq-m { grid-column:1/-1; font-size:11px; color:#9cc6c3; }
.liveq .lq-items .lq-rec .lq-n { font-size:11px; color:#c6efa6; white-space:nowrap; }
.liveq .lq-items:has(.lq-rec) { flex-direction:column; gap:5px; }
/* When the stage cannot draw: a readable note in its place; the records stay under Browse. */
.liveq .lq-fallback { position:absolute; inset:0; margin:0; display:grid; place-items:center; padding:24px; text-align:center; color:#cfe9e4; font-size:13px; line-height:1.6; background:#071a2dcc; }
/* Touch: Retry, the subject field and the rows meet a 44px target (the dock and the sheets: the Control
   Unit block below). */
@media (pointer:coarse) {
  .liveq .lq-scope :is(.lq-retry,.lq-load-all),.liveq .lq-focus-note button,.liveq .lq-subject-row input[type=search],.liveq .lq-subject-row button { min-height:44px; }
  .liveq .lq-items .lq-rec { min-height:44px; }
}
.liveq .lq-swatch { display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 1px #0006; }
/* A toggle chip is a real checkbox (keyboard, screen reader, form semantics) laid invisibly over its
   label; the chip's own fill shows on or off. */
.liveq .lq-chip { position:relative; display:inline-flex; align-items:center; gap:3px; font-size:11.5px; color:#b9d6d4; background:#0f2f40; border:1px solid #3f7479; border-radius:20px; padding:4px 8px; cursor:pointer; white-space:nowrap; }
.liveq button.lq-chip { padding:5px 10px; }
.liveq .lq-chip:has(input:checked),.liveq button.lq-chip[aria-pressed=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
.liveq .lq-chip input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.liveq .lq-chip:has(input:focus-visible) { outline:2px solid #d1f6a9; outline-offset:2px; }
.liveq .lq-lonely-n:not(:empty) { color:#9cc6c3; }
.liveq .lq-icon { width:28px; height:28px; padding:0; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.liveq .lq-more { font-size:12px; color:#9cc6c3; align-self:center; }
.liveq button,.liveq select,.liveq input[type=search] { font:inherit; font-size:12px; color:#e1f7ef; background:#143c50; border:1px solid #5b989b; border-radius:20px; padding:5px 10px; cursor:pointer; }
.liveq button:hover,.liveq button[aria-pressed=true] { background:#286575; border-color:#c6efa6; }
.liveq input[type=search] { cursor:text; flex:1 1 120px !important; min-width:64px; max-width:260px; }
.liveq input[type=search]::placeholder { color:#9cc6c3; }
.liveq button:focus-visible,.liveq canvas:focus-visible,.liveq summary:focus-visible,.liveq input:focus-visible,.liveq select:focus-visible { outline:2px solid #d1f6a9; outline-offset:3px; }
.liveq label { display:inline-flex; align-items:center; gap:5px; font-size:12px; }
.liveq .lq-layers { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:8px 18px; list-style:none; font-size:11px; letter-spacing:0; color:#bddcdb; }
.liveq .lq-layers[hidden] { display:none; }
.liveq .lq-layers li { display:inline-flex; gap:6px; }
.liveq .lq-layers strong { color:#e6fbd0; font-variant-numeric:tabular-nums; }
.liveq.lq-ucaas .lq-stage { height:clamp(180px,60vh,380px); }
.liveq.lq-ucaas .lq-status { position:static !important; width:auto; height:auto; margin:0; padding:8px 18px !important; clip:auto; clip-path:none; white-space:normal; overflow-wrap:anywhere; }
.liveq .lq-legend { display:flex; flex-wrap:wrap; gap:6px 16px; padding:0 24px 12px; font-size:11.5px; color:#bddcdb; }
.liveq .lq-legend span { display:inline-flex; align-items:center; gap:6px; }
.liveq .lq-legend i { display:inline-block; width:20px; height:2px; border-radius:1px; }
.liveq .lq-stage { position:relative; height:clamp(180px,29vh,380px); }
.liveq canvas { width:100%; height:100%; display:block; touch-action:none; }
/* A drag on the diagram rotates it and must never start a text selection: a selection that starts on
   or runs across the canvas paints the whole field in the browser's selection colour (Paul, 2026-09-30:
   "whenever I interact with the diagram it selects it and highlights blue"). The stage and the calendar
   bars are not selectable; the stage's own search box still is; a long press on a phone gets no
   callout; and a tap on the field or on a chip gets no tap highlight (iOS paints a tapped element's
   whole box in its highlight colour, which on the canvas is the whole diagram). */
.liveq .lq-stage,.liveq .lq-cal-bars { user-select:none; -webkit-user-select:none; }
.liveq .lq-stage input { user-select:text; -webkit-user-select:text; }
.liveq canvas { -webkit-touch-callout:none; }
.liveq,.liveq canvas,.liveq button,.liveq summary,.liveq .lq-chip,.liveq .lq-cal-bars { -webkit-tap-highlight-color:transparent; }
/* Live Navigation: the caption says where the camera is leading; the form asks where to go. Both float
   over the stage, small, so the field stays in view. */
.liveq .lq-caption { position:absolute; left:12px; bottom:12px; max-width:min(560px,calc(100% - 24px)); display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:7px 10px 7px 12px; background:#071a2dcc; border:1px solid #5b989b80; border-radius:12px; font-size:12px; line-height:1.45; color:#cfe9e4; backdrop-filter:blur(3px); pointer-events:auto; }
.liveq .lq-caption strong { color:#e6fbd0; font-size:13.5px; font-weight:700; overflow-wrap:anywhere; flex:1 1 100%; }
.liveq .lq-caption span { color:#a9cfcb; }
.liveq .lq-caption-controls { display:inline-flex; gap:4px; margin-left:auto; }
.liveq .lq-caption-controls button { width:26px; height:24px; padding:0; font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
/* The stage's own Navigate field (relations diagrams) floats over the stage; LiveQ's form sits in its row. */
.liveq .lq-stage > .lq-nav { position:absolute; left:12px; top:12px; right:12px; max-width:420px; display:flex; gap:6px; }
.liveq .lq-nav[hidden],.liveq .lq-caption[hidden] { display:none; }
.liveq .lq-stage > .lq-nav input[type=search] { flex:1 1 auto !important; max-width:none; background:#0b2437ee; }
/* The crumbs (the controller fills them with buttons) live in the dock's location cell (the Control Unit block). */
.liveq .lq-crumbs { display:flex; align-items:center; min-width:0; }
.liveq .lq-hint,.liveq .lq-status { margin:0; padding:8px 24px; font-size:12px; line-height:1.6; color:#bddcdb; }
.liveq .lq-status { border-top:1px solid #679a992c; }
/* The Browse list stands in the Browse sheet, whose body scrolls. */
.liveq .lq-list { padding:0; }
.liveq .lq-items { display:flex; flex-wrap:wrap; gap:7px; padding:10px 0; }
.liveq .lq-items button { text-align:left; max-width:400px; }
.liveq .lq-inspect { padding:0 24px 12px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
/* Under the field nothing is drawn but the calendar rail (Gate B): the hint, the status line and the
   inspect line stay in the page for screen readers (the status and inspect lines are live regions)
   but are not drawn. The stage's own caption carries navigation; the dock and its sheets the rest. */
.liveq .lq-hint,.liveq .lq-status,.liveq .lq-inspect { position:absolute !important; width:1px; height:1px; padding:0 !important; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 !important; }
/* /live: the stage alone, filling the window (spec "bare"); the dock is its drive cell alone (Control Unit block). */
.liveq.lq-bare { position:fixed; inset:0; margin:0; border:0; border-radius:0; box-shadow:none; }
.liveq.lq-bare > :not(.lq-stage):not(.lq-dock) { display:none !important; }
.liveq.lq-bare .lq-stage { height:100%; }
/* Where the browser has no element fullscreen (iPhone Safari) the section fills the window. Fullscreen's
   layout (the field fills the screen, the dock floats on it): the Control Unit block. */
.liveq.lq-max { position:fixed; inset:0; z-index:1000; height:100%; }
html.lq-max-open,html.lq-max-open body { overflow:hidden; }
/* LiveQ and Visual Recon side by side at the top of the page; stacked below 1260px. */
.lq-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0 0 28px; align-items:start; }
.lq-pair > .liveq { margin:0; }
@media(max-width:1260px) { .lq-pair { grid-template-columns:minmax(0,1fr); } }
/* A half-width diagram: a closer title row. */
@container (max-width:720px) { .liveq .lq-head { padding-left:18px; padding-right:18px; } }
@media(max-width:640px) { .liveq .lq-caption { left:8px; bottom:8px; font-size:11px; } .liveq .lq-caption strong { font-size:12px; } .liveq .lq-head,.liveq .lq-legend { padding-left:14px; padding-right:14px; } .liveq .lq-stage { height:24vh; min-height:150px; } }
/* A phone held upright: the card runs nearly edge to edge and its title row sits closer, so the stage gets
   the height. */
@media(max-width:480px) {
  .liveq { border-radius:14px; }
  .liveq .lq-head { flex-wrap:nowrap; gap:8px; padding:10px 10px 6px; }
  .liveq h1,.liveq .lq-head h2 { font-size:22px; }
  .liveq .lq-tag { display:none; }
  .liveq .lq-legend { padding-left:10px; padding-right:10px; }
}
/* PR Crisis (liveq-crisis.js): the pinned subject in the dock's pinned-view slot (.lq-bar), the translucent
   settings dialog over the stage, and the live brief in the stage's top-right corner, under the identity. */
.liveq .lq-crisis-pin { display:inline-flex; align-items:center; gap:4px; padding:2px 3px 2px 9px; border:1px solid #c8b6ff; border-radius:20px; background:#241e3acc; }
.liveq .lq-crisis-pin[hidden] { display:none; }
.liveq .lq-crisis-flag { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#c8b6ff; }
.liveq .lq-crisis-pin input[type=search] { min-width:140px; max-width:240px; border-color:#c8b6ff99; background:#13111c; }
.liveq .lq-crisis-dialog { position:absolute; inset:0; z-index:30; display:flex; align-items:flex-start; justify-content:center; padding:18px; overflow:auto; background:#06121fb3; backdrop-filter:blur(5px); }
.liveq .lq-crisis-dialog[hidden],.liveq .lq-crisis-brief[hidden] { display:none; }
.liveq .lq-crisis-form { width:min(620px,100%); display:flex; flex-direction:column; gap:10px; padding:18px 20px; border:1px solid #c8b6ff80; border-radius:16px; background:#0b2437e6; box-shadow:0 18px 50px #0008; }
.liveq .lq-crisis-form h3 { margin:0; font-size:18px; color:#e2d8ff; }
.liveq .lq-crisis-lede,.liveq .lq-crisis-boundary { margin:0; font-size:12px; line-height:1.5; color:#bddcdb; }
.liveq .lq-crisis-boundary { color:#9cc6c3; font-size:11.5px; }
.liveq .lq-crisis-field { display:flex; flex-direction:column; align-items:stretch; gap:4px; font-size:12px; color:#d9f4ed; }
.liveq .lq-crisis-field > span:first-child { font-weight:600; }
.liveq .lq-crisis-field small { color:#9cc6c3; font-size:11px; }
.liveq .lq-crisis-form input[type=search],.liveq .lq-crisis-form input[type=text],.liveq .lq-crisis-form input[type=datetime-local],.liveq .lq-crisis-form select { font:inherit; font-size:13px; color:#e1f7ef; background:#143c50; border:1px solid #5b989b; border-radius:10px; padding:7px 10px; max-width:none; width:100%; }
.liveq .lq-crisis-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.liveq .lq-crisis-row > input { flex:1 1 200px; width:auto !important; }
.liveq .lq-crisis-two > * { flex:1 1 220px; }
.liveq .lq-crisis-quick,.liveq .lq-crisis-classes { display:inline-flex; flex-wrap:wrap; gap:5px; }
.liveq .lq-crisis-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.liveq .lq-crisis-go { background:#4a3a7a; border-color:#c8b6ff; font-weight:600; }
.liveq .lq-crisis-brief { position:absolute; top:10px; right:10px; z-index:12; width:min(330px,calc(100% - 20px)); max-height:calc(100% - 20px); overflow:auto; padding:10px 12px; border:1px solid #c8b6ff80; border-radius:12px; background:#071a2dd9; backdrop-filter:blur(3px); font-size:12px; line-height:1.45; color:#cfe9e4; }
.liveq .lq-crisis-brief header { display:flex; align-items:center; gap:8px; }
.liveq .lq-crisis-brief header strong { color:#e2d8ff; font-size:13.5px; flex:1 1 auto; overflow-wrap:anywhere; }
.liveq .lq-crisis-live { color:#9cc6c3; font-size:11px; white-space:nowrap; }
.liveq .lq-crisis-live::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#c8b6ff; vertical-align:middle; animation:lq-pulse 1.6s ease-in-out infinite; }
@keyframes lq-pulse { 50% { opacity:.25; } }
.liveq .lq-crisis-brief.lq-collapsed .lq-crisis-body { display:none; }
.liveq .lq-crisis-body p { margin:6px 0; }
.liveq .lq-crisis-big b { color:#e2d8ff; font-size:15px; }
.liveq .lq-crisis-names { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.liveq .lq-crisis-names button,.liveq .lq-crisis-latest button { font-size:11px; padding:3px 8px; text-align:left; }
.liveq .lq-crisis-latest { margin:6px 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.liveq .lq-crisis-heading { display:block; width:100%; margin:6px 0 2px; font-size:12px; color:#e2d8ff; }
@media(max-width:640px) { .liveq .lq-crisis-brief { width:calc(100% - 16px); right:8px; top:8px; max-height:45%; } }
/* ---- The atlas (2026-09-30): views, clock, cameras (the View sheet); the stage beside the inspection panel; the calendar rail. ---- */
.liveq .lq-views { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:0; }
.liveq .lq-view-pick { display:flex; flex-wrap:wrap; gap:5px; }
.liveq .lq-views .lq-chip[aria-pressed=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
.liveq .lq-clock-label { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#bddcdb; }
.liveq .lq-cameras { display:inline-flex; gap:4px; }
/* The camera presets are the atlas's own (Tilted, Top and Side frame Place & Time): shown only while it is the
   view; otherwise a line says where they belong. */
.liveq:not(:has(.lq-views [data-view=spacetime][aria-pressed=true])) .lq-cameras { display:none; }
.liveq:has(.lq-views [data-view=spacetime][aria-pressed=true]) .lq-sheet-note[data-note=cameras] { display:none; }
/* Place & Time is tall (a time axis over a map and its shelves): its stage takes more of the viewport
   than the story field's, on every width, so the atlas opens readable rather than as a strip. */
.liveq:has(.lq-views [data-view=spacetime][aria-pressed=true]) .lq-stage { height:clamp(320px,54vh,720px); }
/* The main row takes its height from the stage; the inspection panel stands over the stage's right edge
   (absolute, so a long panel scrolls inside the stage's height). It never narrows the canvas: opening it
   moves no record (canon R3 — no reading surface resizes the field). */
.liveq .lq-main { display:grid; grid-template-columns:minmax(0,1fr); gap:0; position:relative; }
.liveq .lq-main > .lq-stage { min-width:0; }
.liveq .lq-panel { position:absolute; top:0; right:0; bottom:0; z-index:17; width:340px; box-sizing:border-box; border-left:1px solid #42858b66; background:#0b2437f2; color:#cfe9e4; font-size:12.5px; line-height:1.55; overflow:auto; box-shadow:-10px 0 30px #00000040; }
.liveq .lq-panel:focus { outline:2px solid #c6efa6; outline-offset:-2px; }
.liveq .lq-panel[hidden] { display:none; }
.liveq .lq-panel-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 6px; position:sticky; top:0; background:#0b2437f2; }
.liveq .lq-panel-title { margin:0; font-size:14px; color:#e6fbd0; }
.liveq .lq-panel-close { padding:2px 8px; }
.liveq .lq-panel-body { padding:0 14px 14px; }
.liveq .lq-panel-lede { color:#e6fbd0; font-weight:600; margin:4px 0 8px; overflow-wrap:anywhere; }
.liveq .lq-panel-note { color:#bddcdb; margin:6px 0; }
.liveq .lq-facets { margin:0; display:grid; gap:6px; }
.liveq .lq-facet { display:grid; grid-template-columns:110px 1fr; gap:2px 10px; }
.liveq .lq-facet dt { font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:#9cc6c3; padding-top:2px; }
.liveq .lq-facet dd { margin:0; overflow-wrap:anywhere; }
.liveq .lq-facet-meta { display:block; font-size:10.5px; color:#9cc6c3; margin-top:1px; }
.liveq .lq-not-reported { color:#9cc6c3; font-style:italic; }
.liveq .lq-why { margin:10px 0; }
.liveq .lq-why > summary { cursor:pointer; color:#d1f6a9; font-weight:600; }
.liveq .lq-why-part { margin:6px 0 0; }
.liveq .lq-why-part b { color:#e6fbd0; font-size:11px; letter-spacing:.3px; text-transform:uppercase; }
.liveq .lq-why-part p { margin:2px 0 0; }
.liveq .lq-panel-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.liveq .lq-panel-actions a.lq-chip { text-decoration:none; }
.liveq .lq-calendar { padding:6px 24px 10px; }
.liveq .lq-calendar[hidden] { display:none; }
.liveq .lq-cal-label { font-size:11.5px; color:#bddcdb; margin-bottom:4px; }
.liveq .lq-cal-bars { display:flex; align-items:flex-end; gap:2px; height:36px; cursor:col-resize; touch-action:none; }
.liveq .lq-cal-bars i { flex:1 1 auto; min-width:2px; background:#c6efa64d; border-top:2px solid #c6efa6aa; }
.liveq .lq-cal-bars i.is-out { opacity:.3; }
.liveq .lq-cal-ticks { position:relative; height:16px; font-size:10.5px; color:#9cc6c3; }
.liveq .lq-cal-ticks span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.liveq .lq-cal-clear { margin-top:4px; font-size:11px; padding:2px 9px; }
.liveq .lq-cal-bars:focus { outline:2px solid #c6efa6; outline-offset:2px; }
.liveq .lq-cal-help { font-size:10.5px; color:#9cc6c3; margin-top:3px; }
/* A narrow stage: the panel is a sheet over the stage's lower part — still over the stage, never in the page's
   flow (in the flow it shrank the canvas and moved every record). */
@media(max-width:900px) { .liveq .lq-main { grid-template-columns:minmax(0,1fr); } .liveq .lq-panel { top:auto; left:0; right:0; bottom:0; width:auto; max-height:55%; border-left:0; border-top:1px solid #42858b66; box-shadow:0 -10px 30px #00000040; } }
/* Touch: the atlas controls, the panel's buttons and Clear selection meet 44px too. */
@media (pointer:coarse) { .liveq .lq-views .lq-chip,.liveq .lq-views select,.liveq .lq-panel .lq-chip,.liveq .lq-cal-clear { min-height:44px; } .liveq .lq-panel-close { min-width:44px; } }
@media(max-width:640px) { .liveq .lq-calendar { padding-left:14px; padding-right:14px; } .liveq:has(.lq-views [data-view=spacetime][aria-pressed=true]) .lq-stage { height:clamp(260px,44vh,520px); } }
@media(max-width:480px) { .liveq .lq-calendar { padding-left:10px; padding-right:10px; } }
/* The identity row: the account menu hangs from it (the Control Unit block makes it an overlay on a
   page-filling diagram). */
.liveq .lq-head { position:relative; }
/* The domain spectrum (kits/domains, 2026-09-30): dozens of domains under their macro domains. The
   Explore sheet carries a search field and a heading per macro; a staged domain (declared, no source
   bound yet) is dimmed and says so; the Domains-drawn chips stand in collapsible groups under a macro
   chip that switches them together (pressed, mixed, or off). */
.liveq .lq-explore-search { font:inherit; font-size:12px; padding:5px 9px; border:1px solid #5b989b; border-radius:9px; background:#0b2437; color:#e9fbf2; min-width:0; }
.liveq .lq-explore-search::placeholder { color:#9cc6c3; }
.liveq .lq-macro-h,.liveq .lq-counts-h { font-size:10.5px; color:#9cc6c3; letter-spacing:.3px; text-transform:uppercase; margin:6px 2px 0; }
.liveq .lq-counts-h { flex-basis:100%; margin:4px 0 0; }
.liveq .lq-explore .lq-staged { opacity:.62; }
.liveq .lq-explore-none { font-size:12px; color:#9cc6c3; padding:2px 6px; }
.liveq .lq-explore [hidden] { display:none; }
.liveq .lq-groups .lq-macro { border-style:dashed; font-size:10.5px; letter-spacing:.3px; text-transform:uppercase; margin-left:8px; }
/* The neighbourhood (domain-spectrum-v2): first in the Explore sheet while a domain is in scope, a domain's
   neighbours under the adjacency prior, each with the pair's basis as its explanation, then "Isolate
   neighbourhood". In the universe, the Filter sheet says when only a neighbourhood is drawn, with "Show all". */
.liveq .lq-neighbours-host:empty { display:none; }
.liveq .lq-neighbours-host > * { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding-bottom:10px; border-bottom:1px solid #5b989b33; }
.liveq .lq-neighbours-host .lq-chip { justify-content:flex-start; gap:7px; flex-wrap:wrap; white-space:normal; text-align:left; }
.liveq .lq-neighbours-host .lq-chip[data-strength=weak] { opacity:.78; }
.liveq .lq-neighbours-host .lq-n { margin-left:auto; padding-left:10px; color:#9cc6c3; font-variant-numeric:tabular-nums; }
.liveq .lq-neighbours-host .lq-why { flex:1 1 100%; order:9; margin:0; font-size:10.5px; color:#9cc6c3; padding-left:16px; }
.liveq .lq-neighbours-host .lq-isolate { justify-content:center; margin-top:4px; border-style:dashed; }
.liveq .lq-neighbours-host .lq-isolate[aria-pressed=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
.liveq .lq-filter-isolation .lq-isolated { font-size:11.5px; color:#bddcdb; align-self:center; }
.liveq .lq-filter-isolation .lq-show-all { border-style:dashed; }
.liveq .lq-groups .lq-macro:first-child { margin-left:0; }
.liveq .lq-groups .lq-macro[aria-pressed=mixed] { background:linear-gradient(90deg,#286575 50%,transparent 50%); border-color:#c6efa6; }
.liveq .lq-staged-note { font-size:11px; color:#9cc6c3; margin-left:6px; }
/* LiveQ as the page (Paul, 2026-09-30: remove the header; the logo and Sign in on LiveQ's top line;
   LiveQ takes the entire page; works on a phone). `html.lq-page` is the page that holds one diagram
   and nothing else above it; `.liveq.lq-fill` is that diagram, exactly the window's height, its field
   full-bleed under the identity overlay and the dock (the Control Unit block); the page never scrolls.
   The marks the page places on the identity row (LcqtDiagram.headline) are its own: the logo on a white
   tile (the PNG has a white ground) and the sign-in state as a chip. Until the diagram is built — or if
   its script never runs — the marks stand in a strip of their own at the top (`.lq-marks`), so the page
   always has its logo and a way to sign in; the strip disappears once it is empty. */
html.lq-page, html.lq-page body { margin:0; min-height:100%; background:#091c34; }
html.lq-page .wrap { max-width:none; margin:0; padding:0; }
.lq-marks { display:flex; align-items:center; gap:10px; padding:10px 24px; padding-left:calc(24px + env(safe-area-inset-left)); padding-right:calc(24px + env(safe-area-inset-right)); background:#091c34; }
.lq-marks:empty,.lq-marks:not(:has(*)) { display:none; }
.lq-marks img { display:block; box-sizing:content-box; height:30px; width:auto; padding:3px 7px; background:#fff; border-radius:9px; }
.lq-marks .lq-chip { margin-left:auto; text-decoration:none; }
/* The diagram as the page: a flex column exactly the window's height (overflow hidden; the safe areas left
   and right; top and bottom are the overlay's and the dock's to keep), every row its natural height and
   the main row the rest — so the field is full-bleed and only the calendar rail stands below it. */
.liveq.lq-fill { display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; overflow:hidden; margin:0; border:0; border-radius:0; box-shadow:none; box-sizing:border-box; padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.liveq.lq-fill > * { flex:0 0 auto; }
.liveq.lq-fill > .lq-main { flex:1 1 auto; min-height:0; grid-template-rows:minmax(0,1fr); }
.liveq.lq-fill .lq-stage,.liveq.lq-fill:has(.lq-views [data-view=spacetime][aria-pressed=true]) .lq-stage { height:100%; min-height:0; }
/* The canvas is taken out of the flow so the stage has no intrinsic height of its own: the main row
   is exactly what the window leaves (a canvas in the flow reports the height it was last given, and
   the stage would grow to it, a few pixels past the fold). Its box still follows the stage. */
.liveq.lq-fill .lq-stage > canvas { position:absolute; inset:0; width:100%; height:100%; }
.liveq .lq-head .lq-lead { display:inline-flex; align-items:center; line-height:0; }
.liveq .lq-head .lq-lead a { display:block; line-height:0; }
.liveq .lq-head .lq-lead img { display:block; box-sizing:content-box; height:30px; width:auto; padding:3px 7px; background:#fff; border-radius:9px; box-shadow:0 0 0 1px #0004; }
.liveq .lq-head .lq-trail { display:inline-flex; align-items:center; gap:6px; }
.liveq .lq-head .lq-trail a.lq-chip { text-decoration:none; }
/* The account menu hangs from the title row's right edge, never from its summary, so it stays on screen
   wherever the summary lands. */
.liveq .lq-head .lq-trail .lq-menu { position:static; }
.liveq .lq-head .lq-trail .lq-menu > summary::after { content:'▾'; }
.liveq .lq-head .lq-trail .lq-menu-list { display:flex; flex-direction:column; align-items:stretch; gap:4px; position:absolute; top:calc(100% - 4px); right:24px; z-index:26; min-width:170px; max-width:calc(100% - 48px); padding:8px; background:#0b2437f2; border:1px solid #5b989b; border-radius:12px; box-shadow:0 10px 30px #0006; }
.liveq .lq-head .lq-trail .lq-menu-list a { display:block; padding:6px 10px; border-radius:8px; color:#d9f4ed; text-decoration:none; font-size:12.5px; }
.liveq .lq-head .lq-trail .lq-menu-list a:hover,.liveq .lq-head .lq-trail .lq-menu-list a:focus-visible { background:#286575; color:#e9fbf2; }
@container (max-width:720px) { .liveq .lq-head .lq-trail .lq-menu-list { right:18px; max-width:calc(100% - 36px); } }
/* Touch: the sign-in chip and the account menu's summary meet 44px like the diagram's own chips. */
@media (pointer:coarse) { .liveq .lq-head .lq-trail .lq-chip { min-height:44px; } }
@media(max-width:640px) { .liveq .lq-head .lq-trail .lq-menu-list { right:14px; max-width:calc(100% - 28px); } }
@media(max-width:480px) {
  .lq-marks { padding:8px 10px; padding-left:calc(10px + env(safe-area-inset-left)); padding-right:calc(10px + env(safe-area-inset-right)); }
  .lq-marks img { height:24px; padding:2px 5px; }
}
/* The Matter Lens (Graph-Native Reading, Phase 1: Node → Peek → Matter Lens; docs/canon/graph-native-reading.md).
   A situational briefing beside its Matter, inside the stage: not modal, never a card dropped over the
   page. Placed by liveq-lens.js in the stage's coordinates (transform), so the canvas never resizes and no
   node moves for it. Restrained surface: the field's own scrim, a hairline, one radius. Motion only
   explains continuity: a 140 ms fade and lift on open, nothing under reduced motion. */
.liveq .lq-stage .lq-lens { position:absolute; left:0; top:0; z-index:14; width:min(412px, calc(100% - 16px)); max-height:calc(100% - 16px); overflow:auto; overscroll-behavior:contain;
  box-sizing:border-box; padding:0 0 12px; background:#071a2df2; border:1px solid #5b989b80; border-radius:14px; color:#dcefe9; box-shadow:0 14px 40px #00000059;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); font-size:12.5px; line-height:1.45; user-select:text; -webkit-user-select:text; will-change:transform; }
.liveq .lq-stage .lq-lens[hidden] { display:none; }
.liveq .lq-stage .lq-lens.lq-lens-in { animation:lq-lens-in 140ms ease-out both; }
@keyframes lq-lens-in { from { opacity:0; margin-top:4px; } to { opacity:1; margin-top:0; } }
.liveq .lq-stage .lq-lens:focus { outline:none; }
.liveq .lq-stage .lq-lens:focus-visible { outline:2px solid #d1f6a9; outline-offset:2px; }
.liveq .lq-lens-close { position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; padding:0; border-radius:50%; border:1px solid #5b989b99; background:#071a2dcc; color:#e1f7ef; font-size:13px; line-height:1; cursor:pointer; }
.liveq .lq-lens-close:hover { background:#143c50; }
.liveq .lq-lens-media { position:relative; margin:0; aspect-ratio:16 / 7; max-height:176px; overflow:hidden; border-radius:13px 13px 0 0; background:#0b2437; }
.liveq .lq-lens-media img { display:block; width:100%; height:100%; object-fit:cover; }
.liveq .lq-lens-media .lq-lens-thumb { display:block; width:100%; height:100%; background:radial-gradient(ellipse at 50% 50%, #12384c 0%, #091c34 72%); }
.liveq .lq-lens-media-wait { display:flex; align-items:center; justify-content:center; height:100%; color:#9cc6c3; font-size:12px; }
.liveq .lq-lens-credit { position:absolute; left:0; right:0; bottom:0; padding:14px 12px 6px; font-size:10.5px; line-height:1.35; color:#cfe9e4; background:linear-gradient(transparent, #071a2de6); }
.liveq .lq-lens-more { position:absolute; top:8px; left:10px; padding:2px 8px; border-radius:10px; background:#071a2dcc; border:1px solid #5b989b99; font-size:11px; font-weight:600; color:#e1f7ef; }
.liveq .lq-lens-play { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#071a2dcc; border:1px solid #d1f6a9; color:#e9fbf2; font-size:16px; padding-left:3px; box-sizing:border-box; }
.liveq .lq-lens-body { padding:10px 14px 0; display:flex; flex-direction:column; gap:8px; }
.liveq .lq-lens-situation { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:11.5px; color:#a9cfcb; padding-right:28px; }
.liveq .lq-lens-domain { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#d5f7ba; letter-spacing:.2px; }
.liveq .lq-lens-enter { all:unset; cursor:pointer; border-radius:6px; }
.liveq .lq-lens-enter:hover .lq-lens-domain,.liveq .lq-lens-enter:focus-visible .lq-lens-domain { text-decoration:underline; text-underline-offset:3px; }
.liveq .lq-lens-enter:focus-visible { outline:2px solid #d1f6a9; outline-offset:2px; }
.liveq .lq-lens-situation > span + span::before,.liveq .lq-lens-situation > button + span::before,.liveq .lq-lens-when > span + span:not([hidden])::before { content:'·'; margin-right:10px; color:#5b989b; }
.liveq .lq-lens-when { display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:-4px; font-size:11.5px; color:#bddcdb; }
.liveq .lq-lens-quiet { color:#86aeb0; }
.liveq .lq-lens-headline { margin:2px 0 0; font-size:21px; line-height:1.28; font-weight:650; letter-spacing:-.2px; color:#f2fbf6; overflow-wrap:anywhere; text-wrap:pretty; }
.liveq .lq-lens-dek { margin:0; font-size:13.5px; line-height:1.5; color:#cfe9e4; }
.liveq .lq-lens-dek .lq-lens-attrib { color:#86aeb0; font-size:11.5px; }
.liveq .lq-lens-none { color:#86aeb0; font-style:italic; font-size:12.5px; }
.liveq .lq-lens-evidence { margin:0; font-size:11.5px; color:#bddcdb; }
.liveq .lq-lens-k { display:inline-block; margin-right:8px; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#9cc6c3; }
.liveq .lq-lens-context { margin:2px 0 0; padding:8px 0 0; border-top:1px solid #5b989b40; display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:11.5px; }
.liveq .lq-lens-context > div { display:contents; }
.liveq .lq-lens-context dt { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#9cc6c3; padding-top:1px; }
.liveq .lq-lens-context dd { margin:0; color:#d9f4ed; }
.liveq .lq-lens-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:2px; }
.liveq .lq-lens-actions .lq-chip { text-decoration:none; min-height:32px; padding:6px 12px; font-size:12px; }
.liveq .lq-lens-open { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
@media (pointer:coarse) { .liveq .lq-lens-actions .lq-chip,.liveq .lq-lens-close { min-height:44px; min-width:44px; } }
/* A narrow stage: the Lens becomes a sheet along the bottom (or the top, when its Matter sits low). */
.liveq .lq-stage .lq-lens.lq-lens-sheet { width:calc(100% - 16px); border-radius:14px; }
.liveq .lq-stage .lq-lens.lq-lens-sheet .lq-lens-media { aspect-ratio:16 / 6; max-height:130px; }
.liveq .lq-stage .lq-lens.lq-lens-sheet .lq-lens-headline { font-size:19px; }
/* Peek: the fuller headline beside the node under the pointer or the keyboard cursor. The pointer may move
   onto it (WCAG 1.4.13, hoverable) and a click on it opens the Lens; Escape dismisses it. */
.liveq .lq-stage .lq-peek { position:absolute; left:0; top:0; z-index:13; max-width:min(340px, calc(100% - 12px)); padding:7px 10px; background:#071a2df0; border:1px solid #5b989b99; border-radius:10px;
  cursor:pointer; font-size:12px; line-height:1.4; color:#e1f7ef; box-shadow:0 8px 24px #0000004d; display:grid; grid-template-columns:auto 1fr; column-gap:7px; align-items:baseline; }
.liveq .lq-lens-original { margin:-4px 0 0; font-size:11.5px; color:#9cc6c3; font-style:italic; }
/* The Lens's live region: spoken, not shown. Pinned to the stage's corner: at its static place under a card's canvas it
   stood 1 px past the section's bottom, which made the overflow-hidden section scrollable by 1 px (a focus or a scroll
   into view shifted the field and the dock with it). */
.liveq .lq-stage .lq-sr { position:absolute; left:0; top:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.liveq .lq-stage .lq-peek[hidden] { display:none; }
.liveq .lq-peek strong { font-weight:600; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.liveq .lq-peek small { grid-column:2; color:#9cc6c3; font-size:10.5px; margin-top:2px; }
.liveq .lq-peek .lq-swatch { margin-top:4px; }
/* The structure preview's tag (Gate C §8.2): what a macro, a domain or a proposed story is, in the free field before the
   reader goes there; a neutral pill like the Peek (never lime), above the Peek and below the dock. A target under a sheet
   or off the stage pins it to the free edge with an arrow toward it. On touch it carries a 44 px Go. */
.liveq .lq-stage .lq-preview-tag { position:absolute; left:0; top:0; z-index:14; box-sizing:border-box; max-width:min(380px, calc(100% - 12px)); padding:7px 10px; background:#071a2df0; border:1px dashed #9cc6c3aa; border-radius:10px;
  font-size:12px; line-height:1.4; color:#e1f7ef; box-shadow:0 8px 24px #0000004d; display:flex; flex-direction:column; gap:3px; pointer-events:none; }
.liveq .lq-stage .lq-preview-tag[hidden] { display:none; }
.liveq .lq-preview-tag strong { font-weight:600; }
.liveq .lq-preview-tag small { color:#9cc6c3; font-size:10.5px; }
.liveq .lq-preview-tag .lq-preview-action { color:#cfe9e4; font-size:10.5px; }
.liveq .lq-preview-tag .lq-preview-arrow:empty { display:none; }
.liveq .lq-preview-tag .lq-preview-arrow { align-self:center; color:#e9fbf2; font-size:14px; line-height:1; }
.liveq .lq-preview-tag[data-arrow=down] .lq-preview-arrow,.liveq .lq-preview-tag[data-arrow=right] .lq-preview-arrow { order:9; }
.liveq .lq-preview-tag .lq-preview-go { pointer-events:auto; align-self:flex-start; margin-top:3px; }
@media (pointer:coarse) { .liveq .lq-preview-tag .lq-preview-go { min-height:44px; } }
@media (prefers-reduced-motion: reduce) { .liveq .lq-stage .lq-lens.lq-lens-in { animation:none; } }

/* The Matter Reader (Graph-Native Reading, Gate A; docs/architecture/liveq-reading-program.md §2). A reading
   surface standing over the stage — never a column that narrows the canvas, never a page. liveq-reading.js
   places it from the open field (left / top / width / height in stage coordinates): side by side on the
   half away from its record, a stacked sheet on shorter stages, the whole stage on a phone. Inside: the
   close and fold controls, the orientation rail, then the reading. The same surface as the Lens. */
.liveq .lq-stage .lq-reader { position:absolute; z-index:16; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
  background:#071a2df5; color:#dcefe9; border:1px solid #5b989b80; box-shadow:0 14px 40px #00000066; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  font-size:13px; line-height:1.5; user-select:text; -webkit-user-select:text; overflow:hidden; }
.liveq .lq-stage .lq-reader[hidden] { display:none; }
.liveq .lq-stage .lq-reader:focus { outline:none; }
.liveq .lq-stage .lq-reader[data-side=right] { border-radius:14px 0 0 14px; border-right:0; }
.liveq .lq-stage .lq-reader[data-side=left] { border-radius:0 14px 14px 0; border-left:0; }
.liveq .lq-stage .lq-reader[data-side=bottom] { border-radius:14px 14px 0 0; border-bottom:0; }
.liveq .lq-stage .lq-reader[data-side=top] { border-radius:0 0 14px 14px; border-top:0; }
.liveq .lq-stage .lq-reader[data-layout=takeover] { border-radius:0; border:0; }
/* Stacked and take-over: the rail becomes a compact strip above the reading. */
.liveq .lq-stage .lq-reader[data-layout=stacked],.liveq .lq-stage .lq-reader[data-layout=takeover] { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); }
.liveq .lq-reader-top { grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:8px 10px 6px 14px; border-bottom:1px solid #5b989b33; }
.liveq .lq-reader-kicker { margin-right:auto; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#9cc6c3; }
.liveq .lq-reader-fold,.liveq .lq-reader-close { min-height:32px; padding:4px 12px; border-radius:16px; border:1px solid #5b989b99; background:#071a2dcc; color:#e1f7ef; font:inherit; font-size:12px; cursor:pointer; }
.liveq .lq-reader-close { width:32px; padding:0; border-radius:50%; }
.liveq .lq-reader-fold:hover,.liveq .lq-reader-close:hover { background:#143c50; }
.liveq .lq-reader :focus-visible { outline:2px solid #d1f6a9; outline-offset:2px; }
/* Folded: the strip alone, the field open below (or above) it. A strip on the lower edge stands on the open field's
   edge — above the dock's reserve (Gate B), never under the dock — as the unfolded Reader does (liveq-reading.js area()). */
.liveq .lq-stage .lq-reader.is-folded { height:auto !important; grid-template-rows:auto; }
.liveq .lq-stage .lq-reader.is-folded > :not(.lq-reader-top) { display:none; }
.liveq .lq-stage .lq-reader[data-layout=side].is-folded,.liveq .lq-stage .lq-reader[data-layout=stacked][data-side=bottom].is-folded { top:auto !important; bottom:var(--lq-dock-reserve,0px); }
/* The orientation rail: what am I reading, where, when, how did I get here, what is nearby. */
.liveq .lq-rail { min-height:0; overflow:auto; padding:10px 12px 14px 14px; border-right:1px solid #5b989b33; font-size:11.5px; color:#bddcdb; }
.liveq .lq-reader[data-layout=stacked] .lq-rail,.liveq .lq-reader[data-layout=takeover] .lq-rail { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:6px 14px 8px; border-right:0; border-bottom:1px solid #5b989b33; max-height:120px; }
.liveq .lq-reader[data-layout=stacked] .lq-rail .lq-rail-k,.liveq .lq-reader[data-layout=takeover] .lq-rail .lq-rail-k { display:none; }
.liveq .lq-reader[data-layout=stacked] .lq-rail-moves,.liveq .lq-reader[data-layout=takeover] .lq-rail-moves { margin-bottom:0; }
/* Stacked or on a phone the strip keeps where and how you got here; the record's name, time and graph are in the
   reading below, which keeps the room. */
.liveq .lq-reader[data-layout=takeover] .lq-rail-now,.liveq .lq-reader[data-layout=takeover] .lq-rail-v,
.liveq .lq-reader[data-layout=stacked] .lq-rail-now,.liveq .lq-reader[data-layout=stacked] .lq-rail-v { display:none; }
.liveq .lq-reader-note { font-size:11px; color:#e6fbd0; margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liveq .lq-reader-note + .lq-reader-fold { margin-left:0; }
.liveq .lq-rail p { margin:0 0 2px; }
.liveq .lq-rail-moves { display:flex; gap:6px; margin-bottom:8px; }
.liveq .lq-rail-moves button,.liveq .lq-rail-glances { min-height:28px; padding:3px 10px; border-radius:14px; border:1px solid #5b989b80; background:transparent; color:#d9f4ed; font:inherit; font-size:11.5px; cursor:pointer; }
.liveq .lq-rail-moves button:disabled { opacity:.4; cursor:default; }
.liveq .lq-rail-k { margin-top:10px !important; font-size:9.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#86aeb0; }
.liveq .lq-rail-where { display:flex; align-items:center; gap:6px; font-weight:600; color:#d5f7ba; }
.liveq .lq-rail-region { font-weight:400; color:#bddcdb; }
.liveq .lq-rail-now { color:#f2fbf6; font-weight:600; }
/* Your reading order: numbered, "1 · 2 · 3" — never an arrow, never a line (canon R5). */
.liveq .lq-rail-path { list-style:none; margin:2px 0 4px; padding:0; display:flex; flex-direction:column; gap:2px; }
.liveq .lq-reader[data-layout=stacked] .lq-rail-path,.liveq .lq-reader[data-layout=takeover] .lq-rail-path { flex-direction:row; flex-wrap:wrap; }
.liveq .lq-reader[data-layout=stacked] .lq-rail-path li + li::before,.liveq .lq-reader[data-layout=takeover] .lq-rail-path li + li::before { content:'·'; margin:0 4px; color:#5b989b; }
.liveq .lq-rail-step { all:unset; box-sizing:border-box; display:inline-flex; align-items:baseline; gap:6px; min-height:24px; padding:2px 4px; border-radius:6px; cursor:pointer; color:#cfe9e4; overflow-wrap:anywhere; }
.liveq .lq-rail-step:hover { background:#143c50; }
.liveq .lq-rail-step.is-here { color:#f2fbf6; font-weight:600; cursor:default; background:#12384c; }
.liveq .lq-rail-step.is-glance { color:#9cc6c3; }
.liveq .lq-rail-step:focus-visible { outline:2px solid #d1f6a9; }
.liveq .lq-rail-n { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; border:1px solid #9cc6c3; font-size:10px; font-weight:700; color:#e1f7ef; }
.liveq .lq-rail-more { color:#86aeb0; }
.liveq .lq-rail-v { color:#d9f4ed; }
.liveq .lq-reader-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px 18px 24px; display:flex; flex-direction:column; gap:14px; }
.liveq .lq-reader-id { display:flex; flex-direction:column; gap:6px; }
.liveq .lq-reader-situation { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:11.5px; color:#a9cfcb; }
.liveq .lq-reader-situation > span:first-of-type { font-weight:600; color:#d5f7ba; }
.liveq .lq-reader-headline { margin:2px 0 0; font-size:24px; line-height:1.25; font-weight:650; letter-spacing:-.2px; color:#f2fbf6; overflow-wrap:anywhere; text-wrap:pretty; }
.liveq .lq-reader-headline:focus { outline:none; }
.liveq .lq-reader-headline:focus-visible { outline:2px solid #d1f6a9; outline-offset:3px; border-radius:4px; }
.liveq .lq-reader-original { margin:0; font-size:12px; font-style:italic; color:#9cc6c3; }
.liveq .lq-reader-state,.liveq .lq-reader-quiet { margin:0; font-size:12px; color:#9cc6c3; }
.liveq .lq-reader-absent { margin:2px 0 0; padding:8px 10px; border:1px dashed #9cc6c399; border-radius:10px; font-size:12px; color:#d9f4ed; }
.liveq .lq-reader-absent .lq-chip { margin-left:4px; }
.liveq .lq-reader-edge { padding:10px 12px; border:1px solid #c6efa680; border-radius:10px; background:#0b2437; font-size:12.5px; }
.liveq .lq-reader-edge p { margin:0 0 4px; }
.liveq .lq-reader-edge-ends { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px !important; }
/* An end's title wraps inside a narrow surface (Immersive's card) rather than running out of it. */
.liveq .lq-reader-edge-ends .lq-chip { white-space:normal; text-align:left; max-width:100%; }
.liveq .lq-reader-actions { display:flex; flex-wrap:wrap; gap:8px; }
.liveq .lq-reader-actions .lq-chip { min-height:32px; padding:6px 12px; font-size:12px; }
.liveq .lq-reader-sect { border-top:1px solid #5b989b33; padding-top:10px; }
.liveq .lq-reader-sect h3 { margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#9cc6c3; }
.liveq .lq-reader-sect h4 { margin:10px 0 4px; font-size:11.5px; color:#d5f7ba; }
.liveq .lq-reader-sect p { margin:0 0 6px; }
.liveq .lq-reader-sect ul,.liveq .lq-reader-sect ol { margin:0 0 6px; padding-left:18px; }
.liveq .lq-reader-dek { font-size:14px; line-height:1.55; color:#e3f5ef; }
.liveq .lq-reader-attrib { color:#86aeb0; font-size:12px; }
.liveq .lq-reader-none { color:#86aeb0; font-style:italic; }
.liveq .lq-reader-k { display:inline-block; margin-right:6px; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#9cc6c3; }
.liveq .lq-reader-claim summary { cursor:pointer; min-height:24px; padding:2px 0; }
.liveq .lq-reader-claim-body { padding:4px 0 0 14px; }
.liveq .lq-reader-contradicted { color:#c9d4de; }
.liveq .lq-reader-derived,.liveq .lq-reader-bearing { margin:8px 0; padding:8px 10px; border-left:2px solid #9cc6c366; background:#0b243799; border-radius:0 8px 8px 0; }
.liveq .lq-reader-derived-by { font-size:11px; color:#9cc6c3; }
.liveq .lq-reader-derived-title { font-weight:600; }
.liveq .lq-reader-media { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.liveq .lq-reader-figure { position:relative; margin:0; border-radius:10px; overflow:hidden; background:#0b2437; }
.liveq .lq-reader-figure img { display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; }
.liveq .lq-reader-figure figcaption { padding:6px 8px; font-size:11px; color:#bddcdb; }
/* A link in a figure's caption (the source's own page for a video) reads on the dark card, never the browser's blue. */
.liveq .lq-reader-figure figcaption a { color:#e6fbd0; text-decoration:underline; text-underline-offset:2px; }
.liveq .lq-reader-figure figcaption a:focus-visible { outline:2px solid #d1f6a9; outline-offset:2px; }
.liveq .lq-reader-time li { margin-bottom:3px; }
.liveq .lq-reader-links { list-style:none; padding:0 !important; display:flex; flex-direction:column; gap:4px; }
.liveq .lq-reader-link { all:unset; box-sizing:border-box; display:grid; grid-template-columns:auto 1fr; gap:0 10px; width:100%; min-height:40px; padding:6px 8px; border-radius:8px; border:1px solid transparent; cursor:pointer; }
.liveq .lq-reader-link .lq-reader-rel { grid-row:1 / span 2; align-self:start; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#9cc6c3; padding-top:2px; }
.liveq .lq-reader-link .lq-reader-link-title { color:#e8f8f1; overflow-wrap:anywhere; }
.liveq .lq-reader-link:hover,.liveq .lq-reader-link:focus-visible,.liveq .lq-reader-link.is-peeked { background:#12384c; border-color:#5b989b99; }
.liveq .lq-reader-link[data-verdict=contradicted],.liveq .lq-reader-link[data-verdict=disputed] { opacity:.8; }
.liveq .lq-reader-names { display:flex; flex-wrap:wrap; gap:4px 8px; }
.liveq .lq-reader-name { padding:1px 8px; border:1px solid #5b989b66; border-radius:10px; font-size:11.5px; }
.liveq .lq-reader-domain { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; min-height:24px; cursor:pointer; padding:1px 9px; margin:0 4px 4px 0; border:1px solid #5b989b80; border-radius:12px; font-size:12px; color:#d5f7ba; }
.liveq .lq-reader-domain:hover,.liveq .lq-reader-domain:focus-visible { background:#12384c; }
.liveq .lq-reader-domain[aria-pressed=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
@media (pointer:coarse) { .liveq .lq-reader-fold,.liveq .lq-reader-close,.liveq .lq-reader-actions .lq-chip,.liveq .lq-rail-moves button,.liveq .lq-rail-glances,.liveq .lq-reader-domain,.liveq .lq-reader-claim summary,.liveq .lq-reader-edge .lq-chip { min-height:44px; } .liveq .lq-reader-close { min-width:44px; } .liveq .lq-reader-link,.liveq .lq-rail-step { min-height:44px; } }
@media(max-width:640px) { .liveq .lq-reader-headline { font-size:20px; } .liveq .lq-reader-body { padding:10px 14px 20px; } }
/* The leader from the Reader to its record, and the pointer at the field's edge: UI chrome, never an edge's style. */
.liveq .lq-stage .lq-leader { position:absolute; inset:0; width:100%; height:100%; z-index:15; pointer-events:none; overflow:visible; }
.liveq .lq-leader line { stroke:#e6fbd0b3; stroke-width:1; }
.liveq .lq-leader circle { fill:none; stroke:#e6fbd0; stroke-width:1.2; }
.liveq .lq-leader path { fill:#e6fbd0d9; }

/* Gate B: the context views (docs/architecture/liveq-reading-program.md §3) — Immersive, the Timeline and Compare
   stand where the Reader stands; Immersive folds it to a card so the field leads. */
.liveq .lq-stage .lq-reader[data-layout=card] { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); border-radius:14px; border:1px solid #5b989b80; }
.liveq .lq-stage .lq-reader[data-layout=card] .lq-rail { display:none; }
/* The view's body is a container: Compare's table stacks by the room the body has, not by the viewport (a side Reader
   on a tablet is as narrow as a phone). The card's height is bounded by the open field (inline max-height), so its
   body scrolls. */
.liveq .lq-reader-mode { padding:10px 14px 14px; overflow:auto; display:flex; flex-direction:column; gap:10px; min-height:0; container-type:inline-size; }
.liveq .lq-reader-mode h3 { margin:0; font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#9cc6c3; }
.liveq .lq-imm-title { margin:0; font-size:15px; font-weight:650; color:#f2fbf6; overflow-wrap:anywhere; }
.liveq .lq-imm-group { display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:0; margin:0; padding:0; }
.liveq .lq-imm-group legend { width:100%; margin-bottom:2px; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#86aeb0; }
.liveq .lq-imm-group .lq-chip { min-height:28px; padding:3px 10px; font-size:11.5px; }
/* Off is shown by the missing fill, never by fading an operable control's text (contrast stays above 4.5:1);
   only a disabled chip is faded. */
.liveq .lq-imm-group .lq-chip[aria-pressed=false] { background:transparent; }
.liveq .lq-imm-group .lq-chip:disabled { opacity:.35; cursor:default; }
.liveq .lq-imm-count { margin:0; font-size:12px; color:#d9f4ed; }
.liveq .lq-pick { margin:0; padding:8px 10px; border:1px dashed #c6efa6aa; border-radius:10px; font-size:12.5px; color:#e6fbd0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.liveq .lq-reader-compare-row { margin-left:auto; min-height:28px; padding:2px 9px; font-size:11px; }
.liveq .lq-timeline { display:flex; flex-direction:column; gap:8px; }
.liveq .lq-tl-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:space-between; }
.liveq .lq-tl-clocks { display:flex; gap:6px; }
.liveq .lq-tl-clocks .lq-chip[aria-checked=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
.liveq .lq-timeline-svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
.liveq .lq-tl-day { fill:#5b989b14; }
.liveq .lq-tl-tick { fill:#86aeb0; font-size:9.5px; }
.liveq .lq-tl-lane { fill:#bddcdb; font-size:10.5px; }
.liveq .lq-tl-axis { stroke:#5b989b55; stroke-width:1; }
.liveq .lq-tl-absent { fill:#86aeb0; font-size:10.5px; font-style:italic; }
.liveq .lq-tl-mark { outline:none; }
/* Each lane's pointer target: it takes the nearest mark within reach (liveq-timeline.js), so a mark drawn a few pixels
   across is a 24 px target (44 px on a touch screen). */
.liveq .lq-tl-hit { fill:transparent; pointer-events:all; }
.liveq .lq-tl-clockline { margin:0; max-width:46ch; }
.liveq .lq-tl-mark .lq-tl-dot,.liveq .lq-tl-mark .lq-tl-band { stroke:#071a2d; stroke-width:1; fill-opacity:.85; }
.liveq .lq-tl-mark.is-focus .lq-tl-dot,.liveq .lq-tl-mark.is-focus .lq-tl-band { stroke:#e6fbd0; stroke-width:1.6; }
.liveq .lq-tl-mark:focus-visible .lq-tl-dot,.liveq .lq-tl-mark:focus-visible .lq-tl-band,.liveq .lq-tl-mark.is-peeked .lq-tl-dot,.liveq .lq-tl-mark.is-peeked .lq-tl-band { stroke:#d1f6a9; stroke-width:2.4; }
.liveq .lq-tl-unordered { fill:none; stroke:#9cc6c3; stroke-width:1; }
/* Recall's links as undirected arcs, in the field's Recall hues (proposed cyan, contradicted slate, dashed), never arrows. */
.liveq .lq-tl-arc { fill:none; stroke:rgba(112,207,230,.7); stroke-width:1.1; }
.liveq .lq-tl-arc.is-contradicted { stroke:rgba(140,160,178,.8); stroke-dasharray:3 4; }
.liveq .lq-compare { display:flex; flex-direction:column; gap:10px; }
.liveq .lq-cmp-table { width:100%; border-collapse:collapse; font-size:12px; }
.liveq .lq-cmp-table th,.liveq .lq-cmp-table td { padding:6px 8px; border-top:1px solid #5b989b33; text-align:left; vertical-align:top; overflow-wrap:break-word; }
.liveq .lq-cmp-table thead th { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#9cc6c3; border-top:0; }
.liveq .lq-cmp-table tbody th { font-size:10.5px; font-weight:700; color:#9cc6c3; white-space:nowrap; }
.liveq .lq-cmp-note { color:#bddcdb; }
.liveq .lq-cmp-letter { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:9px; border:1px solid #e6fbd0; font-size:10px; }
.liveq .lq-cmp-read { all:unset; cursor:pointer; color:#f2fbf6; font-weight:600; }
.liveq .lq-cmp-read:hover,.liveq .lq-cmp-read:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.liveq .lq-cmp-direct { margin:0; font-size:12.5px; }
.liveq .lq-cmp-direct.is-none { color:#bddcdb; }
/* Stacked when the view's body is narrow (a phone, or a side Reader on a tablet): each facet a row of A and B. */
@container (max-width:400px) {
  .liveq .lq-cmp-table thead { display:none; }
  .liveq .lq-cmp-table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid #5b989b33; }
  .liveq .lq-cmp-table th[scope=row] { grid-column:1 / -1; border-top:0; padding-bottom:0; }
  .liveq .lq-cmp-table td { border-top:0; }
  .liveq .lq-cmp-table td:nth-of-type(1)::before { content:'A · '; color:#9cc6c3; }
  .liveq .lq-cmp-table td:nth-of-type(2)::before { content:'B · '; color:#9cc6c3; }
  .liveq .lq-cmp-table td.lq-cmp-note { grid-column:1 / -1; }
  .liveq .lq-cmp-table td:empty { display:none; }
}
@media (pointer:coarse) { .liveq .lq-imm-group .lq-chip,.liveq .lq-tl-clocks .lq-chip,.liveq .lq-reader-compare-row,.liveq .lq-reader-mode .lq-chip,.liveq .lq-pick .lq-chip { min-height:44px; } }
.liveq .lq-reader-link-row { display:flex; align-items:flex-start; gap:6px; }
.liveq .lq-reader-link-row .lq-reader-link { flex:1 1 auto; }

/* Gate C: playback (docs/architecture/liveq-reading-program.md §4) — one strip in the Reader's card: your reading
   step by step, or how the archive's record of one Matter changed. */
.liveq .lq-playback { display:flex; flex-direction:column; gap:8px; }
.liveq .lq-pb-controls { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.liveq .lq-pb-controls .lq-chip { min-width:32px; min-height:28px; padding:3px 9px; font-size:12px; justify-content:center; }
.liveq .lq-pb-controls .lq-chip:disabled { opacity:.35; cursor:default; }
.liveq .lq-pb-play { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
.liveq .lq-pb-pos { font-size:12px; color:#d9f4ed; font-variant-numeric:tabular-nums; }
.liveq .lq-pb-exit { margin-left:auto; }
.liveq .lq-pb-step { display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-left:2px solid #c6efa6aa; background:#0b2a3a66; border-radius:0 8px 8px 0; }
.liveq .lq-pb-step p { margin:0; }
.liveq .lq-pb-label { font-size:13px; font-weight:600; color:#f2fbf6; overflow-wrap:anywhere; }
.liveq .lq-pb-then { display:flex; gap:6px; }
.liveq .lq-pb-then .lq-chip[aria-pressed=true] { background:#286575; border-color:#c6efa6; color:#e9fbf2; }
@media (pointer:coarse) { .liveq .lq-pb-controls .lq-chip,.liveq .lq-pb-then .lq-chip { min-height:44px; min-width:44px; } }

/* Gate D: a shared journey (docs/architecture/liveq-reading-program.md §5) — the share sheet (a modal dialog over the
   page) and the replay's card. The reader's own words are set apart and labelled as theirs. */
.lq-share { box-sizing:border-box; width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; padding:18px 20px; border:1px solid #5b989b80; border-radius:14px; background:#0b2236; color:#e9fbf2; font:14px/1.45 system-ui, sans-serif; }
.lq-share::backdrop { background:#03101cb3; }
.lq-share h2 { margin:0 0 8px; font-size:17px; }
.lq-share p { margin:0 0 8px; }
.lq-share-what { font-size:13px; color:#cfe9e4; }
.lq-share-note { color:#e6fbd0; }
/* The sheet stands inside the diagram's section: its own rules outrank the section's inline labels. */
.lq-share .lq-share-field { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:4px; margin:10px 0; font-size:13px; }
.lq-share-input { width:100%; box-sizing:border-box; min-height:36px; padding:7px 9px; border:1px solid #5b989b99; border-radius:8px; background:#071a2d; color:#f2fbf6; font:inherit; }
.lq-share-input:focus-visible,.lq-share-link:focus-visible { outline:2px solid #c6efa6; outline-offset:1px; }
.lq-share-count { justify-self:end; font-size:11.5px; color:#9cc6c3; font-variant-numeric:tabular-nums; }
.lq-share-count.is-over { color:#ffd6a3; }
.lq-share-vis { margin:10px 0; padding:8px 10px; border:1px solid #5b989b55; border-radius:10px; }
.lq-share-vis legend { padding:0 4px; font-size:12px; color:#9cc6c3; }
.lq-share .lq-share-radio { display:flex; gap:8px; align-items:flex-start; min-height:32px; padding:4px 0; font-size:13px; cursor:pointer; }
.lq-share-radio input { margin-top:3px; width:18px; height:18px; accent-color:#c6efa6; }
.lq-share-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.lq-share-actions .lq-chip { min-height:36px; padding:6px 14px; }
.lq-share .lq-share-create { background:#286575; border-color:#c6efa6; color:#f2fbf6; font-weight:600; }
.lq-share-error { color:#ffd6a3; min-height:0; }
/* An empty status line stays in the page (a live region that appears together with its words is often not spoken); it
   takes no room while empty. */
.lq-share-error:empty { display:none; }
.lq-share-status:empty { margin:0; }
.lq-share-link { width:100%; box-sizing:border-box; min-height:36px; padding:7px 9px; border:1px solid #c6efa6aa; border-radius:8px; background:#071a2d; color:#f2fbf6; font:13px ui-monospace, monospace; }
@media (pointer:coarse) { .lq-share-actions .lq-chip,.lq-share-input,.lq-share-link,.lq-share .lq-share-radio { min-height:44px; } }
.liveq .lq-gon { display:flex; flex-direction:column; gap:8px; }
.liveq .lq-gon p { margin:0; }
.liveq .lq-gon-text { padding:8px 10px; border:1px dashed #9cc6c3aa; border-radius:10px; display:flex; flex-direction:column; gap:4px; }
.liveq .lq-gon-title { font-size:14px; font-weight:650; color:#f2fbf6; overflow-wrap:anywhere; }
.liveq .lq-gon-caption,.liveq .lq-gon-tagline { font-size:12.5px; color:#d9f4ed; overflow-wrap:anywhere; }
.liveq .lq-gon-text .is-redacted { font-style:italic; color:#9cc6c3; }
.liveq .lq-gon-label { font-size:11px; color:#9cc6c3; }
.liveq .lq-gon-meta { font-size:12px; color:#cfe9e4; }
.liveq .lq-gon-meta a { color:#e6fbd0; }
.liveq .lq-gon-step { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-left:2px solid #c6efa6aa; background:#0b2a3a66; border-radius:0 8px 8px 0; }
.liveq .lq-reader-mode h3.lq-gon-headline { margin:0; font-size:14px; font-weight:650; letter-spacing:0; text-transform:none; color:#f2fbf6; overflow-wrap:anywhere; }
.liveq .lq-gon-facts { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0; font-size:12px; }
.liveq .lq-gon-facts dt { color:#9cc6c3; font-weight:600; }
.liveq .lq-gon-facts dd { margin:0; color:#e9fbf2; overflow-wrap:anywhere; }
.liveq .lq-gon-flag { font-size:12px; color:#e6fbd0; }
.liveq .lq-gon-diff { margin:0; padding-left:18px; font-size:12.5px; color:#e9fbf2; }
.liveq .lq-gon-owner summary { cursor:pointer; font-size:12px; color:#9cc6c3; min-height:24px; display:flex; align-items:center; }
.liveq .lq-gon-owner[open] { display:flex; flex-direction:column; gap:6px; }
.liveq .lq-gon-owner .lq-share-field { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; font-size:12px; color:#d9f4ed; }
.liveq .lq-gon-owner .lq-chip:disabled { opacity:.45; cursor:default; }
.liveq .lq-gon-outside .lq-chip { margin-left:4px; }
/* Every other control of a playback or a replay — Explore from here, the owner's panel and Revoke, Try again, the way
   back to the journey's field — is 44 px on a touch screen, like the strip's (after the rules above, which it overrides). */
@media (pointer:coarse) { .liveq .lq-pb-explore,.liveq .lq-gon .lq-chip,.liveq .lq-gon-owner summary { min-height:44px; } }
.liveq .lq-gon-missing { margin:6px 0; padding:8px 12px; border:1px solid #ffd6a380; border-radius:10px; color:#ffe9c9; font-size:13px; }

/* ==== The LiveQ Control Unit (Gate B, 2026-10-02; docs/architecture/liveq-human-interface.md) ===========
   One quiet capsule — the dock — floats over the field at the bottom centre of every LiveQ section, and every
   control lives in it or in one of its sheets (liveq-template.js builds them, liveq-dock.js runs them).
   Lime (#c6efa6) in the dock means one thing only: LiveQ is moving the camera (Live Drift, a presentation, a
   tour, a playback). The Filter key's mark is periwinkle, and no dock key borrows the app's lime pressed
   border. The dock and its sheets are absolute to the section (which contains them through container-type),
   so element fullscreen carries them along; nothing here is position:fixed, and the only motion is the
   lamp's satellite (a compositor-only rotate), the 1.5 s arming sweep and a 120 ms sheet fade.
   Tokens liveq-dock.js writes on the section (one ResizeObserver, only when they change; 0 until then):
     --lq-hud-top       the identity overlay's bottom, from the section's top (0 on a card)
     --lq-below-field   the section's bottom minus the field's (the calendar rail, a visible UCaaS status line)
     --lq-dock-reserve  from the stage's bottom to 8 px above the dock's top
     --lq-kb            while a sheet's text field has a touch keyboard over it, the keyboard's height
     --lq-sheet-x       a desktop drop-up sheet's left edge, placed from its key (clamped inside the section)
   The dock's own geometry is two tokens here, so a sheet stands on the dock without measuring it:
   --lq-dock-h (44 px; 52 on touch and phones; 32 on /live) and --lq-dock-gap (14 px off the bottom; 8 on phones). */
.liveq :is(.lq-dock,.lq-sheet) { --lq-dock-h:44px; --lq-dock-gap:14px; }
.liveq .lq-vh { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Whatever the template or the dock marks hidden is gone (several of these elements set their own display). */
.liveq :is(.lq-dock,.lq-sheets) [hidden] { display:none !important; }

/* -- Identity: an overlay on a page-filling diagram (zero layout height, a decorative top scrim, children that take
   the pointer while the band does not); an in-flow title row on a card. */
.liveq.lq-fill > .lq-head { position:absolute; inset:0 0 auto 0; z-index:18; flex-wrap:nowrap; gap:14px; box-sizing:border-box; min-width:0; pointer-events:none;
  padding:calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 10px calc(20px + env(safe-area-inset-left)); }
.liveq.lq-fill > .lq-head > * { pointer-events:auto; }
.liveq.lq-fill > .lq-head::before { content:''; position:absolute; inset:0 0 auto 0; z-index:-1; height:calc(84px + env(safe-area-inset-top)); background:linear-gradient(#091c34d9,#091c3400); pointer-events:none; }
.liveq.lq-fill > .lq-head :is(h1,h2) { flex:0 0 auto; font-size:24px; line-height:30px; }
.liveq.lq-fill > .lq-head .lq-tag { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#9cc6c3; }
.liveq.lq-fill > .lq-head .lq-lead img { height:24px; padding:3px 7px; }
.liveq.lq-fill > .lq-head .lq-trail { margin-left:auto; }
.liveq.lq-fill > .lq-head .lq-trail .lq-chip { background:#0f2f40cc; }
.liveq.lq-fill > .lq-head .lq-trail .lq-menu-list { right:calc(20px + env(safe-area-inset-right)); }

/* -- The dock: 44 px (4 px around 36 px keys), solid, no backdrop-filter, filter or will-change. */
.liveq .lq-dock { position:absolute; z-index:40; left:50%; right:auto; bottom:calc(var(--lq-below-field,0px) + var(--lq-dock-gap) + env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; align-items:center; gap:2px; box-sizing:border-box; width:max-content; max-width:min(1120px, 100% - 24px); height:var(--lq-dock-h); padding:3px;
  background:#071a2df0; border:1px solid #5b989b80; border-radius:calc(var(--lq-dock-h) / 2); box-shadow:0 8px 28px #0007;
  font:12.5px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif; color:#cfe9e4; white-space:nowrap; }
/* While LiveQ drives, the rim tints lime too, so the cue reaches peripheral vision. */
.liveq .lq-dock[data-driving] { border-color:#c6efa6a6; }
/* While a sheet is open the dock paints above it, so the flight note (out of flow above the dock) still names where a
   turning drift flies. The dock body never meets a sheet: every sheet stands 8 px above it. */
.liveq .lq-dock[data-sheet] { z-index:43; }
.liveq .lq-dock :is(.lq-drive,.lq-dock-btn,.lq-where-more) { flex:0 0 auto; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:auto; height:calc(var(--lq-dock-h) - 8px); min-width:36px; margin:0; padding:0 11px; font:inherit; line-height:1; color:inherit; background:transparent; border:1px solid transparent; border-radius:18px; cursor:pointer; white-space:nowrap; }
.liveq .lq-dock :is(.lq-drive,.lq-dock-btn,.lq-where-more):hover { background:#ffffff10; border-color:transparent; }
/* Focus in the dock is ink, never a lime family: lime means LiveQ is moving the camera, and nothing else. */
.liveq .lq-dock :focus-visible { outline:2px solid #e9fbf2; outline-offset:2px; }
/* The key of the open sheet: filled, with a quiet rim (never the lime pressed border). */
.liveq .lq-dock :is(.lq-dock-btn,.lq-where-more)[aria-expanded=true] { background:#286575; border-color:#9cc6c3; color:#e9fbf2; }
.liveq .lq-dock :is(.lq-dock-btn,.lq-where-more):disabled { opacity:.45; cursor:default; }
.liveq .lq-dock :is(.lq-retry,.lq-load-all,.lq-focus-note button,.lq-crisis-pin button):hover { border-color:#9cc6c3; }
.liveq .lq-sep { flex:0 0 1px; width:1px; height:20px; margin:0 3px; background:#5b989b4d; }
.liveq .lq-dock .lq-glyph { line-height:1; }
.liveq .lq-dock .lq-space { padding:0 10px; }
.liveq .lq-dock .lq-space .lq-glyph { font-size:17px; }
.liveq .lq-dock .lq-full .lq-glyph { font-size:15px; opacity:.9; }
.liveq .lq-dock [data-sheet=share] .lq-glyph { font-size:14px; }
/* ◉ carries its word only in a wide container; ⛶ shows its word only as the way out ("⛶ Exit"). */
.liveq .lq-dock :is(.lq-space,.lq-full) .lq-dock-label { display:none; }
.liveq .lq-dock .lq-full[aria-pressed=true] .lq-dock-label { display:inline; }
/* Filter: its value (the read window) in a wide container, and a periwinkle mark while a redraw filter is on. */
.liveq .lq-dock-value { display:none; margin-left:-3px; color:#9cc6c3; }
.liveq .lq-dock-mark { flex:0 0 5px; width:5px; height:5px; margin-left:-3px; border-radius:50%; background:#8fb7d6; }

/* -- The drive cell: an annunciator and the control. A fixed width, so no state reflows the dock; every state change
   is instant (no transition, morph or reflow); shape and word carry the state as well as colour. 160 px holds every
   word whole ("Replaying 200/200"; "Paused · tour 12/12" at 1280 px), 112 px every phone word. */
.liveq .lq-dock .lq-drive { width:160px; justify-content:flex-start; overflow:hidden; padding-left:7px; padding-right:7px; }
.liveq .lq-dock .lq-drive[aria-disabled=true] { cursor:default; }
.liveq .lq-drive-word,.liveq .lq-drive-sub { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.liveq .lq-drive-word { color:#9cc6c3; letter-spacing:.2px; }
.liveq .lq-drive-sub { display:none; margin-left:-3px; color:#9cc6c3; }
.liveq .lq-dock:is([data-motion=drift],[data-motion=present],[data-motion=tour],[data-motion=playback]) .lq-drive-word { color:#c6efa6; }
.liveq .lq-dock[data-motion=paused] .lq-drive-word { color:#e6fbd0; }
.liveq .lq-dock[data-motion=tourpaused] .lq-drive-word { color:#d9f4ed; }
/* Failed: the stage could not draw, so nothing can move; the drive cell goes. */
.liveq .lq-dock[data-motion=failed] .lq-drive { display:none; }
.liveq .lq-dock:is([data-motion=failed],:has(> .lq-drive[hidden])) > [data-sep=drive] { display:none; }
/* The lamp (14 px): waiting, a hollow 9 px ring; arming, a lime arc closing it over the last 1.5 s; held, the ring at
   40%; drift, a lit core with a satellite orbiting at radius 6 (6 s a turn; 2 s in flight); presenting ✦, tour ⌖
   and playback ▷ in lime; paused Ⅱ (two bars); tour paused a small neutral Ⅱ; still and off —. ◉ is never used. */
.liveq .lq-lamp { position:relative; flex:0 0 14px; width:14px; height:14px; }
.liveq .lq-lamp > * { position:absolute; left:0; top:0; display:none; }
.liveq .lq-lamp-ring { width:14px; height:14px; overflow:visible; }
.liveq .lq-lamp-ring circle { fill:none; stroke-width:1.5; }
.liveq .lq-lamp-track { stroke:#9cc6c3; }
.liveq .lq-lamp-sweep { stroke:#c6efa6; stroke-dasharray:23.57; stroke-dashoffset:23.57; }
.liveq .lq-lamp-core { left:4px; top:4px; width:6px; height:6px; border-radius:50%; background:#c6efa6; box-shadow:0 0 6px #c6efa6; font-style:normal; }
.liveq .lq-lamp-orbit { width:14px; height:14px; animation:lq-orbit 6s linear infinite; }
.liveq .lq-lamp-sat { position:absolute; left:5.75px; top:-.25px; width:2.5px; height:2.5px; border-radius:50%; background:#c6efa6; }
@keyframes lq-orbit { to { transform:rotate(360deg); } }
@keyframes lq-arm { to { stroke-dashoffset:0; } }
.liveq .lq-dock:is([data-motion=waiting],[data-motion=held]) .lq-lamp-ring { display:block; }
.liveq .lq-dock[data-motion=held] .lq-lamp-ring { opacity:.4; }
/* The sweep runs while liveq-dock.js's .is-arming class is on the drive cell, with a negative delay (--lq-arm-delay:
   how far into the last 1.5 s the idle already is; the dock also sets it on the arc itself); any input removes the
   class at once. */
.liveq .lq-dock[data-motion=waiting] .is-arming .lq-lamp-sweep { animation:lq-arm 1.5s linear forwards; animation-delay:var(--lq-arm-delay,0ms); }
.liveq .lq-dock[data-motion=drift] :is(.lq-lamp-core,.lq-lamp-orbit) { display:block; }
.liveq .lq-dock[data-motion=drift][data-phase=flight] .lq-lamp-orbit { animation-duration:2s; }
/* Presenting ✦, tour ⌖ and playback ▷ in lime, tour paused a small neutral Ⅱ, still and off — (liveq-dock.js writes
   the glyph into the core as text; the core is aria-hidden with the lamp). */
.liveq .lq-dock:is([data-motion=present],[data-motion=tour],[data-motion=playback],[data-motion=tourpaused],[data-motion=still],[data-motion=off]) .lq-lamp-core { display:block; left:0; top:0; width:14px; height:14px; overflow:hidden; border-radius:0; background:none; box-shadow:none; color:#c6efa6; font:600 13px/14px system-ui,sans-serif; text-align:center; }
.liveq .lq-dock[data-motion=tourpaused] .lq-lamp-core { color:#9cc6c3; font-size:10px; }
.liveq .lq-dock:is([data-motion=still],[data-motion=off]) .lq-lamp-core { color:#9cc6c3; }
/* Paused: Ⅱ as two 2×10 px bars, no glow. */
.liveq .lq-dock[data-motion=paused] .lq-lamp::before,.liveq .lq-dock[data-motion=paused] .lq-lamp::after { content:''; position:absolute; top:2px; width:2px; height:10px; border-radius:1px; background:#e6fbd0; }
.liveq .lq-dock[data-motion=paused] .lq-lamp::before { left:4px; }
.liveq .lq-dock[data-motion=paused] .lq-lamp::after { left:8px; }

/* -- Where you are: the crumbs (the controller fills them), ▾ for where you can go, the pinned view. Only this cell's
   width changes, and only on navigation, which the reader caused. The nav itself never clips (focus rings). */
.liveq .lq-dock .lq-where { display:flex; align-items:center; flex:0 1 auto; min-width:0; max-width:40cqw; }
.liveq .lq-dock .lq-crumbs { flex:0 1 auto; flex-wrap:nowrap; gap:0; padding:0; min-height:0; }
.liveq .lq-dock .lq-crumbs > button { display:block; flex:0 1 auto; min-width:0; max-width:18ch; box-sizing:border-box; height:calc(var(--lq-dock-h) - 8px); margin:0; padding:0 6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:inherit; line-height:calc(var(--lq-dock-h) - 8px); color:#9cc6c3; background-color:transparent; border:0; border-radius:14px; cursor:pointer; }
/* The chevron between crumbs is a background, so it stays out of every crumb's accessible name. */
.liveq .lq-dock .lq-crumbs > button + button { padding-left:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%235b989b' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:6px 50%; }
.liveq .lq-dock .lq-crumbs > button:last-of-type { flex-shrink:.25; max-width:26ch; color:#e9fbf2; font-weight:600; }
/* Alone it must shrink fully (shrink factors summing under 1 absorb only that share of an overflow). */
.liveq .lq-dock .lq-crumbs > button:only-of-type { flex-shrink:1; }
.liveq .lq-dock .lq-crumbs > button:hover { background-color:#ffffff10; color:#e9fbf2; }
/* A focus the filter hides (Gate C): its crumb says so in ink only, a dotted underline (the annunciator offers Draw X). */
.liveq .lq-dock .lq-crumbs > button[data-hidden] { text-decoration:underline dotted; text-underline-offset:3px; }
.liveq .lq-dock .lq-where-more { min-width:28px; padding:0 8px; color:#9cc6c3; }
/* The pinned-view slot (liveq-crisis.js puts the PR Crisis pin here): flag (from 380 px), subject (from 1024 px), ⚙ and ✕. */
.liveq .lq-dock .lq-bar { display:inline-flex; align-items:center; flex:0 0 auto; margin-left:4px; }
.liveq .lq-dock .lq-bar:not(:has(> :not([hidden]))) { display:none; }
.liveq .lq-dock .lq-crisis-pin { box-sizing:border-box; height:calc(var(--lq-dock-h) - 8px); padding:0 2px 0 10px; border:0; box-shadow:inset 0 0 0 1px #c8b6ff; border-radius:18px; }
.liveq .lq-dock .lq-crisis-pin input[type=search] { box-sizing:border-box; height:calc(var(--lq-dock-h) - 14px); min-width:100px; max-width:180px; padding:2px 8px; font-size:12px; }
.liveq .lq-dock .lq-crisis-pin .lq-icon { width:auto; min-width:28px; height:calc(var(--lq-dock-h) - 12px); padding:0 6px; background:transparent; border-color:transparent; }
/* The location cell holds the pin whole, so ⚙ and ✕ are never under another key. Under 1024 px the subject field is
   behind ⚙ and the aria-disabled ▾ steps aside (◉'s Explore row still says why); on a phone the crumbs and Share step
   aside too (the crisis brief names the subject; Share is in ◉), and under 380 px the flag as well. */
@container (max-width:1023px) {
  .liveq .lq-dock .lq-crisis-pin input { display:none; }
  .liveq .lq-dock .lq-where:has(.lq-crisis-pin:not([hidden])) .lq-where-more { display:none; }
}
/* A pinned crisis already names the current crisis and subject inside the pin. On touch, the duplicate crisis
   breadcrumb competes for the same 44 px hit band and can be painted underneath the pin on iPad landscape.
   Remove the duplicate control on coarse pointers; the pin is the location control while pinned, and the ordinary
   breadcrumb returns immediately on unpin. */
@media (pointer:coarse) { .liveq .lq-dock .lq-where:has(.lq-crisis-pin:not([hidden])) .lq-crumbs { display:none; } }
@container (max-width:699px) { .liveq .lq-dock:has(.lq-crisis-pin:not([hidden])) :is(.lq-crumbs,.lq-dock-btn[data-sheet=share]) { display:none; } }
@container (max-width:379px) { .liveq .lq-dock .lq-crisis-flag { display:none; } }
.liveq .lq-markets-flag { display:none; }

/* -- The data-state annunciator (the controller's state chip and Retry): out of flow above the dock's right end, so a
   transient message never moves a key; only while the view is not healthy, in short words (the full sentence is
   the chip's title and the status mirror's). The emptied Scope & sources menu stays here, hidden. */
.liveq .lq-dock > .lq-scope { position:absolute; right:6px; bottom:calc(100% + 6px); display:flex; flex-wrap:nowrap; align-items:center; gap:6px; max-width:40%; margin:0; padding:0; font-size:11.5px; line-height:1.3; }
/* Shown while the view is not healthy, or while the focus note has something to say (Gate C, B8); the healthy "Live view"
   chip never shows beside a note. */
.liveq .lq-dock > .lq-scope:not(:has(.lq-state:not(.is-live), .lq-focus-note:not([hidden]))) { display:none; }
.liveq .lq-dock > .lq-scope .lq-state.is-live { display:none; }
.liveq .lq-dock > .lq-scope .lq-focus-note { box-sizing:border-box; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 4px 3px 10px; background:#071a2df0; box-shadow:0 6px 18px #0006; }
.liveq .lq-dock > .lq-scope .lq-scope-more { display:none; }
.liveq .lq-dock > .lq-scope .lq-state { box-sizing:border-box; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 4px 3px 10px; background:#071a2df0; box-shadow:0 6px 18px #0006; }
.liveq .lq-dock > .lq-scope .lq-state:not(:has(.lq-retry)) { padding-right:10px; }
.liveq .lq-dock > .lq-scope .lq-long { display:none; }
.liveq .lq-dock > .lq-scope .lq-short { display:inline; }

/* -- The flight note (provisional, until Bearing): where a Live Drift flight is going, above the dock's left edge, one
   line, from the start of a flight to 2 s after landing. aria-hidden: the drive cell's name says the same. */
.liveq .lq-flight { position:absolute; left:6px; bottom:calc(100% + 6px); box-sizing:border-box; max-width:min(360px, 60%); margin:0; padding:3px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11.5px; line-height:16px; color:#e6fbd0; background:#071a2dcc; border:1px solid #5b989b59; border-radius:11px; pointer-events:none; }

/* -- Sheets: non-modal dialogs, one open at a time — a drop-up panel above its key on a desktop, a side sheet on a wide
   touch screen or a phone on its side, a bottom sheet stacked above the dock everywhere else; never over the dock.
   The bottom edge is the dock's top + 8 px — above the data-state annunciator while it shows (--lq-annunciator), so
   Stale and Retry are never under a sheet — or the touch keyboard's top + 8 px, whichever is higher. The body
   scrolls; nothing is applied on close. */
.liveq .lq-sheet { --lq-sheet-w:380px; --lq-sheet-bottom:max(calc(var(--lq-below-field,0px) + var(--lq-dock-gap) + env(safe-area-inset-bottom) + var(--lq-dock-h) + var(--lq-annunciator,0px) + 8px), calc(var(--lq-kb,0px) + 8px));
  position:absolute; z-index:42; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;
  top:auto; bottom:var(--lq-sheet-bottom); left:calc(8px + env(safe-area-inset-left)); right:calc(8px + env(safe-area-inset-right)); width:auto;
  max-height:min(62%, 100% - var(--lq-sheet-bottom) - var(--lq-hud-top,0px) - 8px);
  background:#0b2437f5; border:1px solid #5b989b; border-radius:16px; box-shadow:0 14px 40px #0008; color:#cfe9e4; font-size:12.5px; line-height:1.45;
  animation:lq-sheet-in 120ms ease-out; }
.liveq .lq-sheet[hidden] { display:none !important; }
@keyframes lq-sheet-in { from { opacity:0; transform:translateY(4px); } }
.liveq .lq-sheet[data-sheet=space] { --lq-sheet-w:360px; }
.liveq .lq-sheet:is([data-sheet=filter],[data-sheet=explore]) { --lq-sheet-w:440px; }
.liveq .lq-sheet[data-sheet=share] { --lq-sheet-w:420px; }
.liveq .lq-sheet[data-sheet=browse] { --lq-sheet-w:540px; }
.liveq .lq-sheet[data-sheet=scope] { --lq-sheet-w:640px; }
.liveq .lq-sheet-head { position:relative; display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; padding:14px 10px 8px 14px; border-bottom:1px solid #5b989b33; }
/* A bottom sheet's grab bar (decorative). */
.liveq .lq-sheet-head::before { content:''; position:absolute; left:50%; top:5px; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:#5b989b66; }
.liveq .lq-sheet-title { flex:0 0 auto; margin:0; font-size:14px; font-weight:650; line-height:1.3; letter-spacing:0; color:#e9fbf2; }
.liveq .lq-sheet-title:focus { outline:none; }
.liveq .lq-sheet-title:focus-visible { outline:2px solid #e9fbf2; outline-offset:2px; border-radius:4px; }
.liveq .lq-sheet-sub { flex:1 1 auto; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; color:#9cc6c3; }
.liveq .lq-sheet-sub:empty { display:none; }
.liveq .lq-sheet-close { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-left:auto; padding:0; border-radius:50%; border:1px solid #5b989b99; background:#071a2dcc; color:#e1f7ef; font-size:13px; line-height:1; }
.liveq .lq-sheet-close:hover { background:#143c50; border-color:#9cc6c3; }
.liveq .lq-sheet-back { flex:0 0 auto; padding:4px 10px; border-radius:14px; font-size:12px; }
.liveq .lq-sheet-body { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px; padding:10px 14px 14px; }
.liveq .lq-sheet-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; }
.liveq .lq-sheet-k { flex:1 1 100%; margin:0; font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#9cc6c3; }
.liveq .lq-sheet-note { flex:1 1 100%; margin:0; font-size:11.5px; color:#9cc6c3; }
.liveq .lq-sheet select { border-radius:9px; }
/* A desktop (a fine pointer, a container 1024 px or wider): a drop-up panel above its key; liveq-dock.js places it
   from the key's rectangle (--lq-sheet-x: its left edge, centred on the key and clamped 12 px inside the section). */
@media (pointer:fine) {
  @container (min-width:1024px) {
    .liveq .lq-sheet { right:auto; width:min(var(--lq-sheet-w), 100% - 24px); left:var(--lq-sheet-x, calc(50% - min(var(--lq-sheet-w), 100% - 24px) / 2)); max-height:min(70vh, 100% - var(--lq-sheet-bottom) - var(--lq-hud-top,0px) - 16px); border-radius:14px; }
    .liveq .lq-sheet-head { padding-top:10px; }
    .liveq .lq-sheet-head::before { display:none; }
  }
}
/* A wide touch screen (an iPad held sideways): a side sheet on the right, from under the identity to above the dock,
   non-modal, so the field on the left stays visible and touchable (orbit to watch a filter apply). */
@media (pointer:coarse) and (min-width:1024px) {
  .liveq .lq-sheet { left:auto; right:calc(12px + env(safe-area-inset-right)); top:calc(var(--lq-hud-top,0px) + 12px); width:min(400px, 100% - 24px); max-height:none; border-radius:14px; }
  .liveq .lq-sheet-head { padding-top:10px; }
  .liveq .lq-sheet-head::before { display:none; }
}
/* A phone on its side: a right side sheet; the field on the left stays visible. */
@media (pointer:coarse) and (max-height:500px) {
  .liveq .lq-sheet { left:auto; right:calc(8px + env(safe-area-inset-right)); top:calc(8px + env(safe-area-inset-top)); width:min(380px, 55%); max-height:none; border-radius:14px; }
  .liveq .lq-sheet-head { padding-top:10px; }
  .liveq .lq-sheet-head::before { display:none; }
}
/* A card (Visual Recon on /ai and /nfl, a LiveQ beside it): its sheets stay inside the card, sized to the card
   rather than the stage — they may cover the title row — and scroll. */
.liveq:not(.lq-fill) .lq-sheet { max-height:calc(100% - var(--lq-sheet-bottom) - 8px); }
@media (pointer:coarse) and (min-width:1024px) { .liveq:not(.lq-fill) .lq-sheet { top:8px; } }

/* ◉ Space: everything you can do here, a row each (glyph · label · value), then the account and the keys. */
.liveq .lq-space-entries { display:flex; flex-direction:column; gap:2px; }
.liveq .lq-space-entries > button { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; box-sizing:border-box; padding:6px 10px; text-align:left; font-size:12.5px; color:#d9f4ed; background:transparent; border:1px solid transparent; border-radius:10px; }
.liveq .lq-space-entries > button:hover { background:#ffffff10; border-color:transparent; }
.liveq .lq-space-entries > button[aria-disabled=true] { opacity:.5; cursor:default; }
.liveq .lq-space-glyph { flex:0 0 18px; text-align:center; color:#9cc6c3; }
.liveq :is(.lq-space-label,.lq-explore-summary) { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liveq .lq-space-value { flex:0 1 auto; min-width:0; margin-left:auto; padding-left:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9cc6c3; }
.liveq .lq-space-value:empty { display:none; }
.liveq .lq-space-account { display:flex; flex-direction:column; gap:2px; padding-top:8px; border-top:1px solid #5b989b33; }
.liveq .lq-space-account:empty { display:none; }
.liveq .lq-space-account .lq-sheet-k { margin-bottom:4px; }
.liveq .lq-space-link { display:flex; align-items:center; min-height:36px; box-sizing:border-box; padding:6px 10px; border-radius:10px; color:#d9f4ed; text-decoration:none; font-size:12.5px; }
.liveq .lq-space-link:hover,.liveq .lq-space-link:focus-visible { background:#286575; color:#e9fbf2; text-decoration:none; }
.liveq .lq-space-link:focus-visible { outline:2px solid #d1f6a9; outline-offset:2px; }
/* Gate D (liveq-space.js): the search, then "Here" (the structure of where the reader is) or the matches, then the rows
   above. The same row as ◉'s: label, then its value or what it does, muted, at the end. */
.liveq .lq-space-find { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.liveq .lq-sheet .lq-space-search { flex:1 1 auto; width:100%; max-width:none; box-sizing:border-box; min-width:0; font:inherit; font-size:13px; padding:7px 11px; border:1px solid #5b989b; border-radius:10px; background:#0b2437; color:#e9fbf2; }
.liveq .lq-space-search::placeholder { color:#9cc6c3; }
/* On touch the field is 16 px, as every sheet field is there (a smaller one zooms the page when it takes focus). */
@media (pointer:coarse) { .liveq .lq-sheet .lq-space-search { font-size:16px; } }
.liveq .lq-space-search:focus-visible { outline:2px solid #d1f6a9; outline-offset:1px; }
.liveq .lq-space-count { flex:0 0 auto; font-size:11px; color:#9cc6c3; white-space:nowrap; }
.liveq .lq-space-count:empty { display:none; }
.liveq :is(.lq-space-here,.lq-space-results) { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.liveq :is(.lq-space-here,.lq-space-results)[hidden] { display:none; }
.liveq .lq-space-here:empty { display:none; }
.liveq .lq-space-group { display:flex; flex-direction:column; gap:2px; }
.liveq .lq-space-group > .lq-sheet-k { margin:2px 10px 2px; }
.liveq .lq-space-note { margin:0 10px 4px; font-size:11.5px; line-height:1.35; color:#9cc6c3; }
.liveq .lq-space-none { margin:4px 10px; font-size:12px; color:#9cc6c3; }
.liveq .lq-space-row { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; box-sizing:border-box; padding:6px 10px; text-align:left; font:inherit; font-size:12.5px; color:#d9f4ed; background:transparent; border:1px solid transparent; border-radius:10px; cursor:pointer; }
/* The name is what the row is: it keeps its own width (up to 85 % of the row) and the value takes what is left, so a
   neighbour's long basis is cut, never the neighbour's name, and a value that fits is never cut (a macro's
   "9 domains · 4,685 records"). */
.liveq .lq-space-row .lq-space-label { flex:0 0 auto; max-width:85%; }
.liveq .lq-space-row .lq-space-value { flex:0 1 auto; min-width:0; }
.liveq .lq-space-row:hover { background:#ffffff10; }
.liveq .lq-space-row:focus-visible { outline:2px solid #d1f6a9; outline-offset:1px; background:#286575; }
.liveq .lq-space-row[aria-disabled=true] { opacity:.5; cursor:default; }
.liveq .lq-space-row[aria-current=true] .lq-space-label { font-weight:650; }
.liveq .lq-space-here + .lq-space-results + .lq-space-entries,.liveq .lq-space-here:not(:empty) ~ .lq-space-entries { padding-top:8px; border-top:1px solid #5b989b33; }
/* Markets keeps ◉ to View and the account (Gate B): the structure and the search are the field's. */
.liveq.lq-markets-active .lq-sheet[data-sheet=space] :is(.lq-space-find,.lq-space-here,.lq-space-results) { display:none !important; }
.liveq .lq-keys { margin:0; font-size:11px; line-height:1.5; color:#9cc6c3; }
/* Explore and Browse: the lists the old menus held. The Browse list is always open here; its summary reads as the
   sheet's subtitle and cannot collapse it. */
.liveq .lq-sheet .lq-explore-search { flex:0 0 auto !important; width:100%; max-width:none; box-sizing:border-box; }
.liveq .lq-sheet .lq-list > summary { list-style:none; pointer-events:none; margin:0; font-size:11.5px; color:#9cc6c3; }
.liveq .lq-sheet .lq-list > summary::-webkit-details-marker { display:none; }
.liveq .lq-sheet .lq-items { padding:6px 0 0; }
/* Filter: the state line, the isolated neighbourhood, the read window apart from what is drawn, the domains in
   collapsible macro groups with a search, the relationships. */
.liveq .lq-filter-state { margin:0; font-size:12.5px; color:#d9f4ed; }
.liveq :is(.lq-filter-state,.lq-filter-isolation):empty { display:none; }
.liveq .lq-filter-isolation { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.liveq .lq-filter-atlas { margin:0; font-size:11.5px; color:#9cc6c3; }
.liveq .lq-sheet .lq-groups-search { flex:1 1 100% !important; max-width:none; box-sizing:border-box; border-radius:9px; }
.liveq .lq-groups-none { flex:1 1 100%; font-size:12px; color:#9cc6c3; }
/* (A response without the spectrum leaves the chips flat, wrapping as before.) */
.liveq .lq-sheet .lq-groups { flex:1 1 100%; }
.liveq .lq-sheet .lq-groups:has(> .lq-macro-group) { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; }
.liveq .lq-macro-group { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:4px 0; border-bottom:1px solid #5b989b1f; }
.liveq .lq-macro-group > div:not(.lq-macro-domains) { display:flex; align-items:center; gap:8px; flex:1 1 100%; min-width:0; }
.liveq .lq-macro-group .lq-macro { margin-left:0; }
.liveq .lq-macro-count { margin-right:auto; font-size:11px; color:#9cc6c3; font-variant-numeric:tabular-nums; }
.liveq .lq-macro-expand { margin-left:auto; min-width:32px; padding:2px 8px; color:#9cc6c3; background:transparent; border-color:transparent; }
.liveq .lq-macro-expand:hover { background:#ffffff10; border-color:#5b989b; }
.liveq .lq-macro-expand[aria-expanded=true] { color:#e9fbf2; }
.liveq .lq-macro-domains { flex:1 1 100%; display:flex; flex-wrap:wrap; gap:5px; padding:4px 0 6px; }
.liveq .lq-sheet .lq-staged-note { margin:6px 0 0; }
/* Journey: Follow (its form beneath), Present, your reading (liveq-dock.js fills it). */
.liveq .lq-journey-reading { display:flex; flex-direction:column; gap:6px; font-size:12px; color:#d9f4ed; }
.liveq .lq-journey-reading:empty { display:none; }
.liveq .lq-journey-reading p { margin:0; }
.liveq .lq-journey-reading button { align-self:flex-start; }
.liveq :is(.lq-journey-play,.lq-journey-share)[aria-disabled=true] { opacity:.5; cursor:default; }
/* Share: Copy link (its fallback, the address selected), Share… where the system has it, what the link carries and
   what it does not, Share journey. */
.liveq .lq-sheet[data-sheet=share] .lq-sheet-body { align-items:flex-start; }
.liveq .lq-link-url { width:100%; box-sizing:border-box; min-height:32px; padding:6px 9px; font:12px ui-monospace,monospace; color:#f2fbf6; background:#071a2d; border:1px solid #5b989b99; border-radius:8px; user-select:text; -webkit-user-select:text; }
.liveq .lq-link-hint { font-size:11.5px; color:#9cc6c3; }
.liveq .lq-link-carries { margin:0; font-size:12px; line-height:1.5; color:#d9f4ed; }
.liveq .lq-link-carries .lq-link-not { color:#bddcdb; }
.liveq .lq-link-carries:empty { display:none; }
.liveq .lq-link-carries dt { margin:6px 0 2px; font-weight:600; color:#9cc6c3; }
.liveq .lq-link-carries dt:first-child { margin-top:0; }
.liveq .lq-link-carries dd { margin:0 0 2px; overflow-wrap:anywhere; }
/* Scope & sources: the controller's details, moved here once, flat in the sheet. */
.liveq .lq-scope-host .lq-scope-detail { margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }

/* -- Device classes. A wide desktop shows the Filter value (1024 px) and ◉'s word and the drive cell's sub-label
   (1280 px; the state word never gives way to it: only the sub-label may ellipsize). */
@container (min-width:1024px) { .liveq .lq-dock .lq-dock-value { display:inline; } }
@container (min-width:1280px) {
  .liveq .lq-dock .lq-space .lq-dock-label { display:inline; }
  .liveq .lq-drive-sub:not(:empty) { display:inline; }
  .liveq .lq-drive-word { flex-shrink:0; }
}
/* Under 1024 px: no tagline, and the compact crumbs — "‹" (the parent: one tap up; its name stays the parent's full
   name, its text the title), then the current crumb with an ellipsis, then ▾. The current crumb is the one thing here
   that gives way (flex-shrink 1: as the only shrinking item at .25 it would absorb a quarter of the overflow and paint
   over ▾), and ▾ drops its "Neighbours · N" words (its name keeps the count), so the location keeps the room. */
@container (max-width:1023px) {
  .liveq.lq-fill > .lq-head .lq-tag { display:none; }
  .liveq .lq-dock .lq-crumbs > button:not(:nth-last-of-type(-n+2)) { display:none; }
  .liveq .lq-dock .lq-crumbs > button:nth-last-of-type(2) { flex:0 0 auto; min-width:32px; padding:0; font-size:0; text-align:center; background-image:none; }
  .liveq .lq-dock .lq-crumbs > button:nth-last-of-type(2)::before { content:'‹'; content:'‹' / ''; font-size:16px; color:#9cc6c3; }
  .liveq .lq-dock .lq-crumbs > button:last-of-type { flex-shrink:1; padding-left:4px; background-image:none; max-width:none; }
  .liveq .lq-dock .lq-where-n { display:none; }
}
/* Touch: every dock key, crumb, sheet row, chip, close button and macro expander is at least 44×44; the dock is 52 px
   tall; inputs are 16 px, so iOS does not zoom on focus; nothing depends on hover; the keys line is for keyboards. */
@media (pointer:coarse) {
  .liveq :is(.lq-dock,.lq-sheet) { --lq-dock-h:52px; }
  .liveq .lq-dock :is(.lq-drive,.lq-dock-btn,.lq-where-more,.lq-crumbs > button) { min-width:44px; }
  .liveq .lq-dock .lq-crumbs > button:nth-last-of-type(2) { min-width:44px; }
  .liveq .lq-dock .lq-where { max-width:min(40cqw, 420px); }
  .liveq .lq-dock .lq-crisis-pin .lq-icon { min-width:44px; }
  .liveq .lq-dock .lq-crisis-pin :is(.lq-icon,input[type=search]) { height:calc(var(--lq-dock-h) - 8px); }
  .liveq .lq-sheet :is(button,select,summary,.lq-chip,input[type=search],input[type=text]) { min-height:44px; }
  .liveq .lq-sheet .lq-list > summary { min-height:0; }
  .liveq .lq-sheet-close { width:44px; height:44px; }
  .liveq .lq-macro-expand { min-width:44px; }
  .liveq .lq-sheet :is(input,select) { font-size:16px; }
  .liveq .lq-space-link { min-height:44px; }
  .liveq .lq-keys { display:none; }
}
/* A phone (a container under 700 px; a phone on its side, below): once LiveQ is up, the only persistent chrome is
   identity, location, motion and Space (Paul's rule) — drive · location · ↗ Share (from 360 px) · ◉. Everything else
   is behind ◉ (the account too); ⛶ joins the dock only as the way out of fullscreen. The drive cell stays worded,
   in short words where liveq-dock.js gives them (data-short). */
@container (max-width:699px) {
  .liveq :is(.lq-dock,.lq-sheet) { --lq-dock-h:52px; --lq-dock-gap:8px; }
  .liveq .lq-dock:not(.is-bare) { left:calc(8px + env(safe-area-inset-left)); right:calc(8px + env(safe-area-inset-right)); width:auto; max-width:none; transform:none; }
  .liveq .lq-dock .lq-where { flex:1 1 auto; max-width:none; }
  .liveq .lq-dock .lq-dock-btn:not(.lq-space):not(.lq-full):not([data-sheet=share]),.liveq .lq-dock .lq-full:not([aria-pressed=true]),.liveq .lq-dock [data-sep=keys],
  .liveq.lq-fill .lq-head .lq-trail,.liveq .lq-tag { display:none; }
  .liveq .lq-dock :is(.lq-space,[data-sheet=share]) { width:48px; min-width:48px; padding:0; }
  .liveq .lq-dock [data-sheet=share] .lq-dock-label { display:none; }
  .liveq .lq-dock .lq-drive { width:112px; padding:0 6px; gap:6px; }
  /* The short word is drawn by ::after; the full word stays in the span at size 0, with no spacing, so it takes no room. */
  .liveq .lq-drive-word[data-short] { font-size:0; letter-spacing:0; }
  .liveq .lq-drive-word[data-short]::after { content:attr(data-short); font-size:12.5px; letter-spacing:0; }
  .liveq.lq-fill > .lq-head { gap:8px; padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left)); }
  .liveq.lq-fill > .lq-head::before { height:calc(56px + env(safe-area-inset-top)); }
  .liveq.lq-fill > .lq-head :is(h1,h2) { font-size:18px; line-height:20px; }
  .liveq.lq-fill > .lq-head .lq-lead img { height:14px; padding:3px 5px; border-radius:6px; }
}
@media (pointer:coarse) and (max-height:500px) {
  .liveq :is(.lq-dock,.lq-sheet) { --lq-dock-h:52px; --lq-dock-gap:8px; }
  .liveq .lq-dock .lq-dock-btn:not(.lq-space):not(.lq-full):not([data-sheet=share]),.liveq .lq-dock .lq-full:not([aria-pressed=true]),.liveq .lq-dock [data-sep=keys],
  .liveq.lq-fill .lq-head .lq-trail,.liveq .lq-tag { display:none; }
  .liveq .lq-dock :is(.lq-space,[data-sheet=share]) { width:48px; min-width:48px; padding:0; }
  .liveq .lq-dock [data-sheet=share] .lq-dock-label { display:none; }
  .liveq .lq-dock .lq-drive { width:112px; padding:0 6px; gap:6px; }
  .liveq .lq-drive-word[data-short] { font-size:0; letter-spacing:0; }
  .liveq .lq-drive-word[data-short]::after { content:attr(data-short); font-size:12.5px; letter-spacing:0; }
  .liveq.lq-fill > .lq-head { gap:8px; padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left)); }
  .liveq.lq-fill > .lq-head::before { height:calc(52px + env(safe-area-inset-top)); }
  .liveq.lq-fill > .lq-head :is(h1,h2) { font-size:18px; line-height:20px; }
  .liveq.lq-fill > .lq-head .lq-lead img { height:14px; padding:3px 5px; border-radius:6px; }
}
@container (max-width:359px) { .liveq .lq-dock [data-sheet=share] { display:none; } }
@container (max-width:413px) { .liveq:is(:fullscreen,.lq-max) .lq-dock [data-sheet=share] { display:none; } }

/* -- With the inspection panel open on a wide container, the dock centres on the open field. */
@container (min-width:900px) { .liveq:has(.lq-panel:not([hidden])) .lq-dock:not(.is-bare) { left:calc(50% - 170px); } }
/* -- Reserves: what stands over the field keeps clear of the identity above and the dock below. */
.liveq .lq-stage .lq-caption { bottom:max(12px, var(--lq-dock-reserve,0px)); }
@media(min-width:901px) { .liveq.lq-fill .lq-panel { top:var(--lq-hud-top,0px); } }
@media(max-width:900px) { .liveq .lq-panel { bottom:var(--lq-dock-reserve,0px); } }
.liveq .lq-crisis-brief { top:calc(var(--lq-hud-top,0px) + 10px); max-height:calc(100% - var(--lq-hud-top,0px) - var(--lq-dock-reserve,0px) - 20px); }
@media(max-width:640px) { .liveq .lq-crisis-brief { top:calc(var(--lq-hud-top,0px) + 8px); max-height:min(45%, 100% - var(--lq-hud-top,0px) - var(--lq-dock-reserve,0px) - 16px); } }
.liveq.lq-fill > .lq-layers { position:absolute; top:calc(var(--lq-hud-top,0px) + 8px); left:calc(12px + env(safe-area-inset-left)); z-index:11; box-sizing:border-box; max-width:calc(100% - 24px); padding:6px 10px; background:#071a2dcc; border-radius:10px; pointer-events:none; }
/* The note a missing shared journey leaves (liveq-gon.js inserts it before the stage) floats, so it never pushes the field. */
.liveq.lq-fill .lq-gon-missing { position:absolute; top:calc(var(--lq-hud-top,0px) + 8px); left:50%; transform:translateX(-50%); z-index:19; box-sizing:border-box; max-width:calc(100% - 24px); margin:0; background:#0b2437f2; }

/* -- Fullscreen (element fullscreen of the section, or .lq-max where that API is missing): the field fills the screen
   and the dock floats on it exactly as outside (a child of the fullscreen element); the identity steps aside; the
   legend of a card and the calendar rail stay in flow. A card's 1 px border goes too, or its field stops 2 px short. */
.liveq:fullscreen,.liveq.lq-max { display:flex; flex-direction:column; height:100%; overflow:hidden; border:0; border-radius:0; margin:0;
  padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.liveq:fullscreen > *,.liveq.lq-max > * { flex:0 0 auto; }
.liveq:fullscreen > .lq-main,.liveq.lq-max > .lq-main,
.liveq:fullscreen > .lq-stage,.liveq.lq-max > .lq-stage { flex:1 1 auto; min-height:0; height:auto; }
.liveq:fullscreen .lq-main,.liveq.lq-max .lq-main { grid-template-rows:minmax(0,1fr); }
.liveq:fullscreen .lq-main > .lq-stage,.liveq.lq-max .lq-main > .lq-stage,
.liveq:fullscreen:has(.lq-views [data-view=spacetime][aria-pressed=true]) .lq-main > .lq-stage,.liveq.lq-max:has(.lq-views [data-view=spacetime][aria-pressed=true]) .lq-main > .lq-stage { height:100%; min-height:0; }
.liveq:fullscreen .lq-stage > canvas,.liveq.lq-max .lq-stage > canvas { position:absolute; inset:0; }
.liveq:fullscreen > .lq-head,.liveq.lq-max > .lq-head { display:none; }
.liveq:is(:fullscreen,.lq-max) > .lqm { flex:1 1 auto; min-height:0; overflow:auto; }

/* -- /live (bare): the dock is the drive cell alone, bottom left, always worded — a wallboard still says why it moves.
   It rests at .78 and never dims further. (Its live regions stay, unseen.) */
.liveq .lq-dock.is-bare { --lq-dock-h:32px; left:calc(12px + env(safe-area-inset-left)); right:auto; bottom:calc(12px + env(safe-area-inset-bottom)); transform:none; width:auto; max-width:none; padding:0; opacity:.78; }
.liveq .lq-dock.is-bare:is(:hover,:focus-within) { opacity:1; }
.liveq .lq-dock.is-bare > :not(.lq-drive):not(.lq-vh) { display:none !important; }
.liveq .lq-dock.is-bare .lq-drive { height:100%; border-radius:16px; }
@media (pointer:coarse) { .liveq .lq-dock.is-bare { --lq-dock-h:44px; } }

/* -- Markets (layout=markets): the dock keeps the flag "Markets" where the crumbs were, View (Layout only: the way
   back, beside Markets' own "Return to LiveQ"), ◉ (View and Account only) and ⛶. Nothing in Markets moves a camera,
   so the drive cell goes (Markets' own "Pause updates" governs its polling). The panel scrolls inside the
   window-high section, clear of the identity and the dock. */
.liveq.lq-markets-active .lq-dock .lq-markets-flag { display:inline-flex; align-items:center; height:calc(var(--lq-dock-h) - 8px); padding:0 10px; font-weight:600; color:#e9fbf2; }
.liveq.lq-markets-active .lq-dock :is(.lq-drive,.lq-flight,.lq-crumbs,.lq-where-more,.lq-bar,.lq-scope,[data-sep=drive],[data-sheet=filter],[data-sheet=journey],[data-sheet=share]) { display:none !important; }
.liveq.lq-markets-active .lq-sheet[data-sheet=view] .lq-sheet-body > :not([data-group=layout]) { display:none !important; }
.liveq.lq-markets-active .lq-sheet[data-sheet=space] :is(.lq-space-entries > :not([data-opens=view]),.lq-keys) { display:none !important; }
/* Measured from a field that is not drawn, the field tokens mean nothing here: the dock keeps to the section's bottom. */
.liveq.lq-markets-active :is(.lq-dock,.lq-sheet) { --lq-below-field:0px; }
.liveq.lq-markets-active > .lqm { padding-bottom:calc(24px + 74px + env(safe-area-inset-bottom)); }
.liveq.lq-fill > .lqm { flex:1 1 auto; min-height:0; overflow:auto; border-radius:0; padding-top:calc(24px + var(--lq-hud-top,0px)); }

/* -- PR Crisis: while its dialog is open (aria-modal, over the stage) the dock and the sheets step out of the way, so the
   modal is honest; they come back when it closes. */
.liveq:has(.lq-crisis-dialog:not([hidden])) :is(.lq-dock,.lq-sheets) { visibility:hidden; }

/* -- Z-order, lowest first: canvas · UCaaS layers 11 · crisis brief 12 · Peek 13 · Lens 14 · leader 15 · Reader 16 ·
   inspection panel 17 · identity (its Account menu) 18 · the missing-journey note 19 · crisis dialog 30 · dock 40 ·
   sheets 42 · the dock while a sheet is open 43 · the GON <dialog> (top layer). */

/* -- Media features. */
@media (prefers-reduced-motion:reduce) { .liveq :is(.lq-lamp-orbit,.lq-lamp-sweep,.lq-sheet) { animation:none !important; } }
@media (prefers-reduced-transparency:reduce) { .liveq :is(.lq-dock,.lq-sheet,.lq-flight) { background:#071a2d; } .liveq .lq-dock > .lq-scope .lq-state { background:#0f2f40; } }
/* Forced colours: the rim and the lamp are drawn in CanvasText and Highlight, and every state keeps its own shape. */
@media (forced-colors:active) {
  .liveq .lq-dock { border:1px solid CanvasText; }
  .liveq .lq-dock[data-driving] { border:2px solid Highlight; }
  .liveq .lq-lamp { forced-color-adjust:none; }
  .liveq .lq-lamp-track { stroke:CanvasText; }
  .liveq .lq-lamp-sweep { stroke:Highlight; }
  .liveq :is(.lq-lamp-core,.lq-lamp-sat) { background:Highlight; box-shadow:none; }
  .liveq .lq-dock:is([data-motion=present],[data-motion=tour],[data-motion=playback]) .lq-lamp-core { background:none; color:Highlight; }
  .liveq .lq-dock:is([data-motion=tourpaused],[data-motion=still],[data-motion=off]) .lq-lamp-core { background:none; color:CanvasText; }
  .liveq .lq-dock[data-motion=paused] .lq-lamp::before,.liveq .lq-dock[data-motion=paused] .lq-lamp::after { background:CanvasText; }
  .liveq .lq-dock :is(.lq-dock-btn,.lq-where-more)[aria-expanded=true] { border-color:Highlight; }
  .liveq .lq-dock-mark { forced-color-adjust:none; background:CanvasText; }
  .liveq .lq-sep { background:CanvasText; }
  .liveq .lq-sheet { border:1px solid CanvasText; }
}
/* -- Without container queries (Safari before 16): the same classes by the viewport, which is the container on a
   page-filling diagram. */
@supports not (container-type:inline-size) {
  .liveq .lq-dock .lq-where { max-width:40vw; }
  @media (min-width:1024px) { .liveq .lq-dock .lq-dock-value { display:inline; } }
  @media (min-width:1280px) { .liveq .lq-dock .lq-space .lq-dock-label { display:inline; } .liveq .lq-drive-sub:not(:empty) { display:inline; } .liveq .lq-drive-word { flex-shrink:0; } }
  @media (max-width:1023px) {
    .liveq.lq-fill > .lq-head .lq-tag,.liveq .lq-dock .lq-crumbs > button:not(:nth-last-of-type(-n+2)) { display:none; }
    .liveq .lq-dock .lq-crumbs > button:nth-last-of-type(2) { flex:0 0 auto; min-width:32px; padding:0; font-size:0; text-align:center; background-image:none; }
    .liveq .lq-dock .lq-crumbs > button:nth-last-of-type(2)::before { content:'‹'; font-size:16px; color:#9cc6c3; }
    .liveq .lq-dock .lq-crumbs > button:last-of-type { flex-shrink:1; padding-left:4px; background-image:none; max-width:none; }
    .liveq .lq-dock .lq-where-n { display:none; }
    .liveq .lq-dock .lq-crisis-pin input,.liveq .lq-dock .lq-where:has(.lq-crisis-pin:not([hidden])) .lq-where-more { display:none; }
  }
  @media (max-width:699px) { .liveq .lq-dock:has(.lq-crisis-pin:not([hidden])) :is(.lq-crumbs,.lq-dock-btn[data-sheet=share]) { display:none; } }
  @media (max-width:379px) { .liveq .lq-dock .lq-crisis-flag { display:none; } }
  @media (max-width:1023px) and (pointer:coarse) { .liveq .lq-dock .lq-crumbs > button:nth-last-of-type(2) { min-width:44px; } }
  @media (max-width:699px) {
    .liveq :is(.lq-dock,.lq-sheet) { --lq-dock-h:52px; --lq-dock-gap:8px; }
    .liveq .lq-dock:not(.is-bare) { left:calc(8px + env(safe-area-inset-left)); right:calc(8px + env(safe-area-inset-right)); width:auto; max-width:none; transform:none; }
    .liveq .lq-dock .lq-where { flex:1 1 auto; max-width:none; }
    .liveq .lq-dock .lq-dock-btn:not(.lq-space):not(.lq-full):not([data-sheet=share]),.liveq .lq-dock .lq-full:not([aria-pressed=true]),.liveq .lq-dock [data-sep=keys],
    .liveq.lq-fill .lq-head .lq-trail,.liveq .lq-tag { display:none; }
    .liveq .lq-dock :is(.lq-space,[data-sheet=share]) { width:48px; min-width:48px; padding:0; }
    .liveq .lq-dock [data-sheet=share] .lq-dock-label { display:none; }
    .liveq .lq-dock .lq-drive { width:112px; padding:0 6px; gap:6px; }
    .liveq.lq-fill > .lq-head { gap:8px; padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left)); }
    .liveq.lq-fill > .lq-head :is(h1,h2) { font-size:18px; line-height:20px; }
    .liveq.lq-fill > .lq-head .lq-lead img { height:14px; padding:3px 5px; border-radius:6px; }
  }
  @media (max-width:359px) { .liveq .lq-dock [data-sheet=share] { display:none; } }
  @media (pointer:fine) and (min-width:1024px) {
    .liveq .lq-sheet { right:auto; width:min(var(--lq-sheet-w), 100% - 24px); left:var(--lq-sheet-x, calc(50% - min(var(--lq-sheet-w), 100% - 24px) / 2)); max-height:min(70vh, 100% - var(--lq-sheet-bottom) - var(--lq-hud-top,0px) - 16px); border-radius:14px; }
    .liveq .lq-sheet-head { padding-top:10px; }
    .liveq .lq-sheet-head::before { display:none; }
  }
}


/* LiveQ universe identity — 2026-10-03.
   The mark is transparent and belongs to the field; there is no white logo tile. LiveQ + tagline are one
   lockup. S is a conceptual bearing only, never a node, origin, boundary or gravitational centre. */
.liveq .lq-lockup-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; gap:1px; }
.liveq .lq-lockup-copy :is(h1,h2) { line-height:1; }
.liveq .lq-title-q { color:#c6efa6; text-shadow:0 0 12px #c6efa655; }
.liveq .lq-tag { letter-spacing:.055em; }
.liveq .lq-tag-q { color:#c6efa6; font-weight:750; text-shadow:0 0 8px #c6efa644; }
.liveq .lq-head .lq-lead img,
.lq-marks img { box-sizing:border-box; height:38px; width:38px; padding:0; background:transparent; border-radius:0; box-shadow:none; filter:drop-shadow(0 0 7px #65d7c55c); }
.liveq.lq-fill > .lq-head .lq-lead img { height:38px; padding:0; }
.liveq .lq-totality-bearing { display:none; position:absolute; top:calc(var(--lq-hud-top,0px) + 24px); right:calc(24px + env(safe-area-inset-right)); z-index:10;
  pointer-events:none; align-items:baseline; gap:8px; color:#9cc6c3; opacity:.58; text-shadow:0 1px 10px #071a2d; }
.liveq.lq-at-universe .lq-totality-bearing { display:flex; }
.liveq .lq-totality-bearing strong { font:300 30px/1 Georgia,serif; color:#d5f7ba; }
.liveq .lq-totality-bearing span { font:600 9.5px/1 system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
@container (max-width:699px) {
  .liveq.lq-fill > .lq-head .lq-lead img { height:28px; }
  .liveq .lq-lockup-copy :is(h1,h2) { line-height:1; }
  .liveq .lq-totality-bearing { top:calc(var(--lq-hud-top,0px) + 16px); right:calc(12px + env(safe-area-inset-right)); }
  .liveq .lq-totality-bearing strong { font-size:24px; }
}