/* A.I.R.A. takeover: the operator (another person's pointer, selection, caret), the content system's notices, the
   approval dialog, the session's traces and the CTRL Department's containment order (aira-story.mjs, aira-traces.mjs).
   Pass 11: someone else is operating this website while you read it, and it looks exactly like that: the platform's
   arrow, the system's selection colour, a collaborator's caret and flag, a save notice, a publish dialog. Nothing
   tears, glows or dims the page; colours come from the site's tokens (pass 11 HOOKS.md) with fallbacks. Shared by apps/site (/aira) and the in-room CRT
   (apps/vault/public/aira-site); copied byte for byte by `pnpm --dir apps/site sync:ctrl`. Flash-safe: no luminance
   change faster than three times a second, never a white flash; reduced motion keeps every state with calm
   transitions. No em dashes in copy. */

/* ---------- The first sign (about 2 s in): one character renders as the replacement glyph for 0.7 s ---------- */
/* The glyph comes from whatever fallback font the system has, as a real rendering fault does. */
.aira-slip { font-weight: inherit; }

/* ---------- Traces: the record revises itself ---------- */
.aira-trace-revised { font-variant-numeric: tabular-nums; }
p.aira-trace-revised { margin: 18px 0 0 !important; white-space: nowrap; font: 500 13px/1.3 var(--aira-sans, Arial), Arial, sans-serif !important; letter-spacing: 0; color: #d7cfb9 !important; }
/* Pass 5: the record details panel is light; the unauthorized revision reads in the ink of a correction. */
.aira-record-meta .aira-trace-revised dt, .aira-record-meta .aira-trace-revised dd { color: #7a2616 !important; font-weight: 700; }
.aira-record-meta .aira-trace-revised dd { font-size: 13px; white-space: nowrap; }
/* On the wide hero it hangs under the actions without moving the headline. */
@media (min-width: 801px) { .hero-copy > p.aira-trace-revised { position: absolute; left: 0; top: 100%; } }
@keyframes aira-fresh { 0% { background: #d9b96a55; } 100% { background: transparent; } }
.aira-revise del { color: inherit; opacity: .62; text-decoration: line-through 1.5px #9c2a22; text-decoration-skip-ink: none; }
.aira-revise ins { text-decoration: underline 1.5px #a8792a; text-underline-offset: .16em; background: #f3dfa233; color: inherit; }

/* The timestamps drift (the official strip's stamp; it runs backwards once the record is being backdated). */
.aira-trace-clock { margin: 0 0 0 auto !important; font: 500 11.5px/1.2 var(--aira-sans, Arial), Arial, sans-serif; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #b9c6bf !important; white-space: nowrap; }
.aira-trace-clock + .aira-official-status { margin-left: 18px !important; }
.aira-trace-clock[data-drift] { color: #e9dcb8 !important; }

/* Still blinking: the site status line (the official strip's; the notice bar is gone, 2026-10-01), with the drive's own
   light (0.8 Hz, two steps). The look hides the status where the strip is narrow (container under 1180px: phones, and
   desktops while the chat is docked); while Locust's edit is in it, it is shown there in the clock's place, on one line.
   Phones: the line takes the strip's second row and How you know moves up beside the site name, so the strip keeps its
   height (the drifting clock never shows there: its long text used to wrap and push the page down). */
.aira-trace-was { display: none; }
.aira-trace-blink[data-done] { font-weight: 600; }
@keyframes aira-drive { 50% { background: #6b5316; box-shadow: none; } }
@container aira (max-width: 1180px) {
  html .aira-static .aira-official-inner > .aira-official-status:has(.aira-trace-blink) { display: inline-flex !important; margin-left: auto !important; min-height: 1lh; }
  html .aira-static .aira-official-inner:has(.aira-trace-blink) > .aira-trace-clock { display: none; }
}
@container aira (max-width: 719px) {
  html .aira-static .aira-official-inner > .aira-trace-clock[data-drift] { display: none; }
  html .aira-static .aira-official-inner:has(.aira-official-sound) { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 0 8px; padding-block: 4px; }
  html .aira-static .aira-official-inner:has(.aira-official-sound) > .aira-official-text { grid-area: 1 / 1; white-space: normal; overflow-wrap: anywhere; }
  html .aira-static .aira-official-inner:has(.aira-official-sound) > .aira-official-how { grid-area: 1 / 2; }
  html .aira-static .aira-official-inner:has(.aira-official-sound) > .aira-official-how summary { min-height: 44px; }
  html .aira-static .aira-official-inner:has(.aira-official-sound) > .aira-official-sound { grid-area: 1 / 3; margin: 0; }
  html .aira-static .aira-official-sound .aira-sound-toggle { width: 44px; height: 44px; }
  html .aira-static .aira-official-inner:has(.aira-trace-blink) { flex-wrap: wrap; padding-bottom: 4px; }
  html .aira-static .aira-official-inner > .aira-official-status:has(.aira-trace-blink) { grid-column: 1 / -1; flex-basis: 100%; margin-left: 0 !important; min-width: 0; white-space: normal; padding-bottom: 4px; }
  html .aira-static .aira-official-inner:has(.aira-trace-blink) > .aira-official-how { flex-basis: auto; }
  html .aira-static .aira-official-inner > .aira-official-status:has(.aira-trace-blink) { order: 6; gap: 6px; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: no-preference) {
  html .aira-static .aira-official-status:has(.aira-trace-blink[data-done])::before { animation: aira-drive 1.25s steps(1, end) infinite; }
}
@media (max-width: 800px) { .aira-trace-clock { font-size: 10.5px; } }
.aira-notice .aira-trace-blink[data-done] { color: var(--aira-stamp, #7a2616); }

/* ---------- The operator: another person's pointer on this page (aira-traces.mjs createOperator) ---------- */
/* The platform's own arrow (black on a Mac, white elsewhere), moved by script frame by frame: no CSS transition, so
   its motion is the motion model's (speed profile, curve, overshoot, hesitation), not an easing curve. */
.aira-op { position: fixed; left: 0; top: 0; z-index: 2147481250; width: 16px; height: 24px; pointer-events: none; opacity: 0; transition: opacity .12s linear; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); will-change: transform; }
.aira-op[data-on] { opacity: 1; }
.aira-op svg { display: block; transform-origin: 2px 2px; transition: transform 70ms linear; }
.aira-op[data-press] svg { transform: scale(.88); transition-duration: 45ms; }
/* A click's ring: thin, in the site's accent, spreading from the arrow's tip and fading (360 ms; reduced motion: still). */
.aira-op-ring { position: fixed; left: 0; top: 0; z-index: 2147481245; width: 0; height: 0; pointer-events: none; }
.aira-op-ring::after { content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; box-sizing: border-box; border: 2px solid var(--aira-accent, #1d6b52); border-radius: 50%; opacity: 0; animation: aira-op-ring .36s cubic-bezier(.2,.7,.3,1) both; }
.aira-op-ring[data-reduced]::after { animation: none; opacity: .7; transform: scale(.7); }
@keyframes aira-op-ring { from { opacity: 1; transform: scale(.18); } 60% { opacity: .8; } to { opacity: 0; transform: scale(1); } }
/* The control the other pointer presses takes its own pressed state for a moment (120 ms). */
button[data-aira-press], .btn[data-aira-press], [role="button"][data-aira-press] { transform: translateY(1px); filter: brightness(.9); }
a[data-aira-press] { text-decoration: underline; text-decoration-thickness: 2px; }
/* Labelled only once it admits the others (`who`), the way a shared editor labels a person's pointer. */
.aira-op-label { position: absolute; left: 13px; top: 19px; display: none; padding: 2px 6px 3px; border-radius: 3px; background: #3d4a8a; color: #fff; font: 600 11px/1.2 var(--aira-font-ui, var(--aira-sans, Arial)), Arial, sans-serif; letter-spacing: 0; white-space: nowrap; }
.aira-op[data-labelled] .aira-op-label { display: block; }
.aira-op[data-session="2"] .aira-op-label { background: #8a4b2a; }
.aira-op[data-session="3"] .aira-op-label { background: #2f6b4f; }

/* Its selection: the system's selection colour (the Custom Highlight API paints it; the fallback wraps a span). */
::highlight(aira-sel) { background-color: #b4d5fe; color: inherit; }
::highlight(aira-sel-dark) { background-color: #3a6fd8; color: #fff; }
.aira-sel { background: #b4d5fe; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.aira-sel-dark { background: #3a6fd8; color: #fff; }
/* Its caret, with a collaborator's flag (steady while it types, blinking when it pauses). */
.aira-caret { position: absolute; left: 0; top: 0; z-index: 2147481240; width: 1px; height: 1em; background: #3d4a8a; pointer-events: none; opacity: 0; }
.aira-caret[data-on] { opacity: 1; animation: aira-caret 1.06s steps(1, end) infinite; }
.aira-caret[data-on][data-typing] { animation: none; }
@keyframes aira-caret { 50% { opacity: 0; } }
.aira-caret-flag { position: absolute; left: 0; bottom: 100%; margin-bottom: 1px; padding: 1px 5px 2px; border-radius: 2px 2px 2px 0; background: #3d4a8a; color: #fff; font: 600 11px/1.25 var(--aira-font-ui, var(--aira-sans, Arial)), Arial, sans-serif; letter-spacing: 0; white-space: nowrap; }
.aira-caret-flag[data-flip] { left: auto; right: 0; border-radius: 2px 2px 0 2px; }
.aira-ghost-hover { text-decoration-thickness: 2px; }
.aira-pressed { outline: 2px solid var(--aira-accent, #0d4a38); outline-offset: 2px; }

/* ---------- The content system's save notices (the page's alert area) ---------- */
.aira-toast { position: fixed; left: 20px; bottom: 20px; z-index: 2147481400; display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 40px)); padding: 11px 12px 11px 16px; border-radius: var(--aira-radius-2, 4px); background: var(--aira-ink, #12181a); color: var(--aira-on-ink, #ece9e2); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font: 500 15px/1.35 var(--aira-font-ui, var(--aira-sans, Arial)), Arial, sans-serif; opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.aira-toast[data-on] { opacity: 1; transform: none; pointer-events: auto; }
.aira-toast span { min-width: 0; }
.aira-toast button { flex: none; min-height: 34px; padding: 6px 12px; border: 0; border-radius: var(--aira-radius-1, 2px); background: transparent; color: #9fd3bd; font: 700 15px/1 inherit; cursor: pointer; }
.aira-toast button:hover { background: rgba(255, 255, 255, .08); }
.aira-toast button:disabled { color: #b0b8b4; cursor: default; }
.aira-toast :focus-visible { outline: 3px solid var(--aira-focus, #ffd33d); outline-offset: 1px; }
.aira-toast[data-kind="pointer"], .aira-toast[data-kind="page"] { background: #1c2b4a; }
.aira-toast[data-kind="lockdown"] { background: var(--aira-alert, #b3261e); color: #fff; font-weight: 700; }
@media (max-width: 760px) { .aira-toast { left: 12px; right: 12px; bottom: auto; top: calc(10px + env(safe-area-inset-top)); max-width: none; transform: translateY(-10px); } }
/* The status toast lands under the strip on phones, so it never covers the line it announces. */
@media (max-width: 760px) { .aira-toast[data-kind="notice"] { top: calc(74px + env(safe-area-inset-top)); } }
html[data-aira-locked] .aira-toast { display: none; }

/* ---------- The approval it asks for (a CMS publish dialog over the page) ---------- */
.aira-ask { position: fixed; inset: 0; z-index: 2147481280; display: grid; place-items: center; padding: 24px; padding-right: calc(24px + var(--aira-chat-w, 0px)); pointer-events: none; }
.aira-ask-box { width: min(480px, 100%); padding: 22px 24px 20px; border: 1px solid var(--aira-rule, #d6d1c6); border-top: 3px solid var(--aira-accent, #0d4a38); border-radius: var(--aira-radius-2, 4px); background: var(--aira-surface, #fff); color: var(--aira-text, #2b3130); box-shadow: 0 24px 60px rgba(10, 16, 14, .32), 0 2px 8px rgba(10, 16, 14, .16); font: 400 15px/1.5 var(--aira-font-ui, var(--aira-sans, Arial)), Arial, sans-serif; pointer-events: auto; animation: aira-ask-in .18s ease-out both; }
.aira-ask[data-closed] { display: none; }
@keyframes aira-ask-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.aira-ask-from { margin: 0 0 6px; color: var(--aira-muted, #5a615f); font-size: 13px; }
.aira-ask-title { margin: 0 0 8px; color: var(--aira-ink, #12181a); font: 650 20px/1.25 var(--aira-font-ui, var(--aira-sans, Arial)), Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.aira-ask-body { margin: 0 0 10px; }
.aira-ask-list { margin: 0 0 16px; padding: 8px 0 0 18px; border-top: 1px solid var(--aira-rule, #d6d1c6); color: var(--aira-muted, #5a615f); font-size: 14px; }
.aira-ask-actions { display: flex; justify-content: flex-end; gap: 10px; }
.aira-ask-actions button { min-height: 42px; padding: 9px 16px; border-radius: var(--aira-radius-1, 2px); font: 650 15px/1 var(--aira-font-ui, var(--aira-sans, Arial)), Arial, sans-serif; cursor: pointer; }
.aira-ask-discard { border: 1px solid var(--aira-rule, #d6d1c6); background: var(--aira-surface, #fff); color: var(--aira-text, #2b3130); }
.aira-ask-approve { border: 1px solid var(--aira-accent, #0d4a38); background: var(--aira-accent, #0d4a38); color: var(--aira-on-accent, #fff); }
.aira-ask-approve.aira-ghost-hover, .aira-ask-approve:hover { background: var(--aira-accent-hover, #083326); }
.aira-ask :focus-visible { outline: 3px solid var(--aira-focus, #ffd33d); outline-offset: 2px; }
.aira-ask[data-blocked] .aira-ask-box { border-top-color: var(--aira-alert, #b3261e); }
.aira-ask[data-blocked] .aira-ask-approve { border-color: var(--aira-alert, #b3261e); background: var(--aira-alert-surface, #fbe9e6); color: var(--aira-alert-text, #a8231b); cursor: default; }
@media (max-width: 760px) { .aira-ask { place-items: start center; padding: 70px 12px 12px; } .aira-ask-box { padding: 16px 16px 14px; } .aira-ask-title { font-size: 18px; } }
html[data-aira-locked] .aira-ask { display: none; }

/* The page stops answering the reader's finger while its pointer acts (touch screens). */
html[data-aira-pointer="page"], html[data-aira-pointer="page"] body { overflow: hidden !important; touch-action: none; }

/* The breadcrumb learns where the reader is. */
.aira-trace-crumb span { color: var(--aira-stamp, #7a2616); font-weight: 650; }
/* The site's own notice, taken over by the facility. */
.aira-notice[data-aira-alarm] { background: var(--aira-alert, #b3261e) !important; border-color: #7d1a14 !important; color: #fff !important; }
.aira-notice[data-aira-alarm] :is(strong, p, a, span) { color: #fff !important; }

/* The climax: the public record taken apart in place (aira-traces.mjs dismantle). Nothing falls or moves: each block
   keeps its height; its content goes and an editor's placeholder takes its place. */
.aira-erased { color: transparent !important; transition: color .6s ease; }
.aira-unlinked { opacity: .38; text-decoration: line-through !important; pointer-events: none; transition: opacity .3s ease; }
.aira-unpublished { position: relative; }
.aira-unpublished > * { opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
.aira-unpublished::after { content: attr(data-aira-unpublished); position: absolute; inset: 10px max(10px, 2%); display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px dashed #a79d85; background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(19, 32, 26, .035) 9px 18px); color: #545c57; font: 500 12.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; text-align: center; animation: aira-unpublish .3s ease-out both; }
.aira-unpublished-dark::after { border-color: #ffffff3d; background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, .04) 9px 18px); color: #b9c7bf; }
.aira-pulled { opacity: 0 !important; transition: opacity .4s ease; }
@keyframes aira-unpublish { from { opacity: 0; } to { opacity: 1; } }
html[data-aira-dismantled="reduced"] .aira-unpublished > * { transition-duration: .6s, 0s; transition-delay: 0s, .6s; }
html[data-aira-dismantled="reduced"] .aira-unpublished::after { animation-duration: .8s; }

/* The content system's draft preview bar: it should never be on the public page. */
.aira-trace-draft { position: fixed; left: 16px; bottom: 16px; z-index: 2147481150; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 7px 12px 7px 10px; border-radius: 4px; background: #202225; color: #e6e6e6; font: 500 12.5px/1.35 var(--aira-sans, Arial), Arial, sans-serif; box-shadow: 0 6px 18px #0004; pointer-events: none; }
.aira-trace-draft b { flex: none; padding: 2px 7px; border-radius: 3px; background: #e8b43a; color: #1d1604; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.aira-trace-draft span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-aira-locked] .aira-trace-draft { display: none; }
@media (max-width: 760px) { .aira-trace-draft { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; } html[data-aira-split] .aira-trace-draft { display: none; } }

/* The search field answers back (a suggestion that is not a page). */
.aira-suggest { position: absolute; z-index: 100; top: calc(100% + 6px); right: 0; width: min(360px, calc(100vw - 32px)); margin: 0; padding: 6px 0; list-style: none; background: #f8f5ee; border: 1px solid #a7ad9f; box-shadow: 0 12px 35px #11281d29; color: #1c3a30; font: 14px/1.4 var(--aira-sans, Arial), Arial, sans-serif; text-align: left; }
.aira-suggest li { margin: 0; padding: 8px 14px; color: #1c3a30; }
.aira-suggest li a { color: inherit; text-decoration: none; display: block; }
.aira-suggest li a:hover, .aira-suggest li a:focus-visible { text-decoration: underline; }
.aira-suggest small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7b7f76; }
/* The leaked draft looks like any other result: that is what makes it wrong. */
.aira-suggest .aira-suggest-answer { border-top: 1px solid #d4d8ca; color: #1c3a30; }

/* ---------- Locust's marks from its session ---------- */
/* The same plain pointer the reader saw earlier, now carrying its account's name, the way shared editors label
   another person's pointer. It moves in steps, like the earlier one. */
.locust-cursor {
  position: fixed; left: 0; top: 0; z-index: 2147481200; width: 16px; height: 24px; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M1 1 L1 19 L5.6 14.8 L8.7 22 L11.6 20.8 L8.6 13.8 L14.6 13.8 Z' fill='%23fff' stroke='%23111' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 16px 24px;
  filter: drop-shadow(0 1px 1px #0006);
  transition: transform 1.15s steps(18, end), opacity .3s ease;
}
.locust-cursor::after {
  content: "svc-drive2"; position: absolute; left: 14px; top: 20px; padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  font: 600 11px/1.3 var(--aira-sans, Arial), Arial, sans-serif; color: #fff; background: #5b2a86;
}
.locust-cursor[data-on] { opacity: 1; }
.locust-hover { text-decoration-thickness: 2px; background: #b3d4fc; color: #111 !important; }
.locust-redact {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(#0d0c0a, #0d0c0a) no-repeat 0 0 / 0% 100%;
  transition: background-size .9s steps(14, end), color 0s linear .9s;
}
.locust-redact[data-done] { background-size: 100% 100%; color: transparent; }
.locust-mark { background: transparent; color: inherit; padding: 0 2px; transition: background-color .5s ease, color .5s ease; }
.locust-mark[data-done] { background: #f0c24a; color: #140f04; box-shadow: 0 0 0 2px #f0c24a55; }

/* The office lights: pass 5 keeps the layer (hosts still create it) but the page itself never dims, flickers or turns
   red. The building's lights change in the room, and on the site in the shared camera frame. */
.aira-lights { display: none; }

/* The small assistance card closes as its conversation opens in the docked panel (no tear). */
[data-handover] { animation: aira-handover .3s ease forwards; pointer-events: none; }
@keyframes aira-handover { to { opacity: 0; } }

/* ---------- The CTRL Department's containment order ---------- */
/* The page greys and locks under it (the scrim filters what is behind it; the page itself is inert). */
html[data-aira-locked] { overflow: hidden !important; }
.aira-ctrl {
  --ctrl-ink: #e9e4d8; --ctrl-mute: #9aa29d; --ctrl-line: #2d3437; --ctrl-red: #d23b2f; --ctrl-ok: #86c29b; --ctrl-amber: #e0a93a;
  position: fixed; inset: 0; z-index: 2147483500; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: var(--ctrl-ink); font: 15px/1.5 var(--aira-sans, Arial), "Helvetica Neue", Arial, sans-serif; text-align: left;
}
.aira-ctrl-scrim {
  position: fixed; inset: 0; z-index: -1; background: rgba(14, 16, 17, 0.5);
  -webkit-backdrop-filter: grayscale(1) brightness(.62) contrast(.92); backdrop-filter: grayscale(1) brightness(.62) contrast(.92);
  animation: aira-ctrl-grey .12s linear both;
}
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) { .aira-ctrl-scrim { background: rgba(28, 30, 31, 0.84); } }
@keyframes aira-ctrl-grey { from { opacity: 0; } to { opacity: 1; } }
.aira-ctrl .aira-ctrl-order {
  position: relative; width: min(820px, 100%); padding: 26px 30px 20px; outline: none;
  background: #111415f5; border: 1px solid var(--ctrl-line); border-top: 4px solid var(--ctrl-red);
  box-shadow: 0 30px 80px #000a, 0 0 0 1px #000;
  animation: none;
}
@keyframes aira-ctrl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Alfonso, 2026-10-01 (14:41): issued live, the seized page lands over the frozen last frame (DANGER) like a VHS tape
   finding its tracking: the whole page rolls down into place, a dark tracking band runs down it, the colours split and
   settle; all within 0.8 s (aira-traces.mjs mountLockdown sets data-aira-rollin). Nothing brightens: the band is dark,
   the split only moves colour sideways. Reduced motion: a 0.3 s fade. */
.aira-ctrl[data-aira-rollin="vhs"] { animation: aira-ctrl-roll .8s cubic-bezier(.2,.7,.25,1) both; }
.aira-ctrl[data-aira-rollin="vhs"] .aira-ctrl-order { animation: aira-ctrl-chroma .8s ease-out both; }
.aira-ctrl[data-aira-rollin="vhs"]::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 11vh; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(8, 10, 11, .55) 0 2px, rgba(120, 128, 126, .16) 2px 3px, rgba(8, 10, 11, .4) 3px 5px);
  animation: aira-ctrl-track .8s linear both;
}
.aira-ctrl[data-aira-rollin="fade"] { animation: aira-ctrl-grey .3s linear both; }
@keyframes aira-ctrl-roll {
  0% { transform: translateY(-100%); } 34% { transform: translateY(-16%); } 52% { transform: translateY(5%); }
  66% { transform: translateY(-2.4%); } 80% { transform: translateY(1%); } 100% { transform: none; }
}
@keyframes aira-ctrl-chroma {
  0% { filter: drop-shadow(-7px 0 rgba(255, 46, 40, .6)) drop-shadow(7px 0 rgba(40, 214, 255, .55)); }
  60% { filter: drop-shadow(-2px 0 rgba(255, 46, 40, .45)) drop-shadow(2px 0 rgba(40, 214, 255, .4)); }
  100% { filter: none; }
}
@keyframes aira-ctrl-track { 0% { transform: translateY(-12vh); opacity: .9; } 85% { opacity: .7; } 100% { transform: translateY(104vh); opacity: 0; } }
.aira-ctrl .aira-ctrl-order p { margin: 0; color: inherit; max-width: none; }
.aira-ctrl .aira-ctrl-head { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ctrl-line); }
.aira-ctrl .aira-ctrl-seal { position: relative; flex: 0 0 64px; display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--ctrl-ink); border-radius: 50%; box-shadow: inset 0 0 0 4px #111415, inset 0 0 0 5px var(--ctrl-ink); color: var(--ctrl-ink); }
.aira-ctrl .aira-ctrl-seal span { position: absolute; top: 12px; font: 700 6.5px/1 "Courier New", monospace; letter-spacing: .2em; }
.aira-ctrl .aira-ctrl-seal b { font: 800 15px/1 "Arial Narrow", Impact, sans-serif; letter-spacing: .08em; }
.aira-ctrl .aira-ctrl-seal small { position: absolute; bottom: 11px; font: 700 4.5px/1 "Courier New", monospace; letter-spacing: .16em; }
.aira-ctrl .aira-ctrl-dept { font-weight: 800; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.aira-ctrl .aira-ctrl-kind { font-family: var(--aira-serif, Georgia), Georgia, serif; font-size: 22px; line-height: 1.2; }
.aira-ctrl .aira-ctrl-auth { font-size: 12.5px; color: var(--ctrl-mute); }
.aira-ctrl .aira-ctrl-meta { display: grid; grid-template-columns: 1.05fr 1.4fr 1.4fr .8fr; gap: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--ctrl-line); }
.aira-ctrl .aira-ctrl-meta div { min-width: 0; padding: 0 14px 0 0; }
.aira-ctrl .aira-ctrl-meta div + div { padding-left: 14px; border-left: 1px solid var(--ctrl-line); }
.aira-ctrl .aira-ctrl-meta dt, .aira-ctrl .aira-ctrl-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ctrl-mute); }
.aira-ctrl .aira-ctrl-meta dd { margin: 3px 0 0; font: 600 12.5px/1.3 ui-monospace, "SF Mono", Menlo, "Courier New", monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.aira-ctrl .aira-ctrl-title { margin: 18px 0 8px; font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--aira-sans, Arial), Arial, sans-serif; letter-spacing: -.005em; color: #f4efe3; text-transform: none; }
.aira-ctrl .aira-ctrl-notice { font-size: 14.5px; line-height: 1.55; color: #d4cfc3 !important; }
.aira-ctrl .aira-ctrl-trigger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px !important; }
.aira-ctrl .aira-ctrl-trigger .aira-ctrl-label { display: inline; }
.aira-ctrl .aira-ctrl-trigger code { font: 700 12.5px/1.4 ui-monospace, "SF Mono", Menlo, "Courier New", monospace; letter-spacing: .04em; color: var(--ctrl-red); }
.aira-ctrl .aira-ctrl-status-head { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--ctrl-line); }
.aira-ctrl .aira-ctrl-steps { margin: 6px 0 0; padding: 0; list-style: none; }
.aira-ctrl .aira-ctrl-steps li { display: grid; grid-template-columns: 22px 11.5em 1fr auto; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #262c2f; color: var(--ctrl-mute); transition: color .4s ease; }
.aira-ctrl .aira-ctrl-steps li:last-child { border-bottom: 0; }
.aira-ctrl .aira-ctrl-steps b { font-weight: 700; font-size: 14px; }
.aira-ctrl .aira-ctrl-detail { font-size: 13px; min-width: 0; }
.aira-ctrl .aira-ctrl-steps time { font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, "Courier New", monospace; font-variant-numeric: tabular-nums; color: var(--ctrl-mute); }
.aira-ctrl .aira-ctrl-tick { position: relative; top: 3px; width: 14px; height: 14px; border: 1.5px solid #4a5357; border-radius: 50%; }
.aira-ctrl .aira-ctrl-steps li[data-state="active"] { color: var(--ctrl-ink); }
.aira-ctrl .aira-ctrl-steps li[data-state="active"] .aira-ctrl-tick { border-color: var(--ctrl-amber); border-right-color: transparent; animation: aira-ctrl-spin .9s linear infinite; }
@keyframes aira-ctrl-spin { to { transform: rotate(360deg); } }
.aira-ctrl .aira-ctrl-steps li[data-state="done"] { color: var(--ctrl-ink); }
.aira-ctrl .aira-ctrl-steps li[data-state="done"] .aira-ctrl-tick { border-color: var(--ctrl-ok); background: var(--ctrl-ok); }
.aira-ctrl .aira-ctrl-steps li[data-state="done"] .aira-ctrl-tick::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 4px; height: 7px; border: solid #111415; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.aira-ctrl .aira-ctrl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ctrl-line); visibility: hidden; }
.aira-ctrl .aira-ctrl-foot[data-on] { visibility: visible; animation: aira-ctrl-grey .6s ease both; }
.aira-ctrl .aira-ctrl-lock { display: inline-flex; align-items: center; gap: 9px; padding: 6px 11px; border: 1px solid var(--ctrl-red); color: var(--ctrl-red); font: 800 13px/1 var(--aira-sans, Arial), Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.aira-ctrl .aira-ctrl-lamp { width: 9px; height: 9px; border-radius: 50%; background: #ffd34a; box-shadow: 0 0 8px #ffd34acc; animation: aira-drive 1.25s steps(1, end) infinite; }
.aira-ctrl .aira-ctrl-anchor { flex: 1 1 260px; font: 12.5px/1.45 ui-monospace, "SF Mono", Menlo, "Courier New", monospace; color: #c8c3b7 !important; }
.aira-ctrl .aira-ctrl-enter { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; border: 1px solid var(--ctrl-red); background: var(--ctrl-red); color: #0b0c0c; font: 800 12px/1 var(--aira-sans, Arial), Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.aira-ctrl .aira-ctrl-enter:hover, .aira-ctrl .aira-ctrl-enter:focus-visible { background: #0b0c0c; color: var(--ctrl-amber); border-color: var(--ctrl-amber); outline: none; }
.aira-ctrl .aira-ctrl-fiction { margin-top: 12px !important; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #6f7773 !important; }
.aira-ctrl .aira-ctrl-order .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Inside the office the visitor has already entered: the way in is not offered again. */
html[data-aira-mode="terminal"] .aira-ctrl .aira-ctrl-enter { display: none; }
@media (max-width: 700px) {
  /* Phones: the whole order fits a 390 x 844 screen (smaller screens scroll inside it). */
  .aira-ctrl { place-items: start center; font-size: 13.5px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .aira-ctrl .aira-ctrl-order { padding: 14px 14px 10px; border-top-width: 3px; }
  .aira-ctrl .aira-ctrl-head { gap: 11px; padding-bottom: 10px; }
  .aira-ctrl .aira-ctrl-seal { flex-basis: 46px; width: 46px; height: 46px; box-shadow: inset 0 0 0 3px #111415, inset 0 0 0 4px var(--ctrl-ink); }
  .aira-ctrl .aira-ctrl-seal span { top: 8px; font-size: 5px; } .aira-ctrl .aira-ctrl-seal b { font-size: 11px; } .aira-ctrl .aira-ctrl-seal small { display: none; }
  .aira-ctrl .aira-ctrl-dept { font-size: 11px; letter-spacing: .18em; }
  .aira-ctrl .aira-ctrl-kind { font-size: 16.5px; }
  .aira-ctrl .aira-ctrl-auth { font-size: 11px; }
  .aira-ctrl .aira-ctrl-meta { grid-template-columns: 1fr 1fr; gap: 8px 0; padding: 9px 0; }
  .aira-ctrl .aira-ctrl-meta div:nth-child(3) { border-left: 0; padding-left: 0; }
  .aira-ctrl .aira-ctrl-meta dt { font-size: 9px; }
  .aira-ctrl .aira-ctrl-meta dd { font-size: 11.5px; }
  .aira-ctrl .aira-ctrl-title { margin: 11px 0 6px; font-size: 18.5px; }
  .aira-ctrl .aira-ctrl-notice { font-size: 12.5px; line-height: 1.45; }
  .aira-ctrl .aira-ctrl-trigger { margin-top: 8px !important; gap: 2px 10px; }
  .aira-ctrl .aira-ctrl-trigger code { font-size: 11px; }
  .aira-ctrl .aira-ctrl-status-head { margin-top: 10px !important; padding-top: 9px; }
  .aira-ctrl .aira-ctrl-steps { margin-top: 3px; }
  .aira-ctrl .aira-ctrl-steps li { grid-template-columns: 18px 1fr auto; gap: 0 8px; padding: 4px 0; }
  .aira-ctrl .aira-ctrl-steps b { font-size: 13px; }
  .aira-ctrl .aira-ctrl-tick { width: 12px; height: 12px; top: 2px; }
  .aira-ctrl .aira-ctrl-steps li[data-state="done"] .aira-ctrl-tick::after { left: 2.5px; top: .5px; width: 3.5px; height: 6px; }
  .aira-ctrl .aira-ctrl-detail { grid-column: 2 / 4; font-size: 11px; line-height: 1.35; }
  .aira-ctrl .aira-ctrl-steps time { grid-column: 3; grid-row: 1; font-size: 11px; }
  .aira-ctrl .aira-ctrl-foot { margin-top: 8px; padding-top: 9px; gap: 6px 10px; }
  .aira-ctrl .aira-ctrl-lock { font-size: 11.5px; padding: 5px 9px; }
  .aira-ctrl .aira-ctrl-anchor { font-size: 10.5px; flex-basis: 100%; }
  .aira-ctrl .aira-ctrl-enter { min-height: 38px; padding: 8px 14px; font-size: 11px; }
  .aira-ctrl .aira-ctrl-fiction { margin-top: 8px !important; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .aira-ctrl .aira-ctrl-lamp { animation: none; }
  .aira-op { transition: none; }
  .aira-caret[data-on] { animation: none; }
  .aira-toast, .aira-ask-box { transition: none; animation: none; }
  .locust-cursor { transition: opacity .2s ease; }
  .locust-redact, .locust-mark { transition: none; }
  [data-handover] { animation: none; opacity: 0; }
  .aira-ctrl .aira-ctrl-steps li[data-state="active"] .aira-ctrl-tick { animation: none; border-right-color: var(--ctrl-amber); }
}

/* Pass 6: the reader's own pointer, taken (aira-traces.mjs takePointer): the system pointer is hidden and their arrow
   is moved for them, then handed back. */
html[data-aira-pointer="taken"], html[data-aira-pointer="taken"] * { cursor: none !important; }
.aira-taken-pointer { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 16px; height: 24px; pointer-events: none; filter: drop-shadow(0 1px 1px #0005); will-change: transform; }
.aira-taken-pointer svg { display: block; transform-origin: 2px 2px; transition: transform 70ms linear; }
.aira-taken-pointer[data-press] svg { transform: scale(.86); }
/* The page typed at the reader (the `address` beat): the heading in view counts their time. */
.aira-addressed { overflow: hidden; font-variant-numeric: tabular-nums; }
.aira-addressed-text { text-decoration: underline 1.5px #a8792a; text-underline-offset: .16em; background: #f3dfa233; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Pass 12: the page breaks (aira-glitch.mjs), in the Locust terminal's language ---------- */
/* Shivering letters (motion only), a phosphor fringe (red / cyan, no brightening), torn slices (copies of a heading
   clipped to a band and displaced), a scan-line band over a photograph that slips a frame. Flash-safe: nothing here
   changes luminance by more than a faint band (under 12 % alpha); reduced motion never runs these (only word swaps). */
.aira-gl-shiver { display: inline-block; animation: aira-gl-shiver 120ms steps(2, end) infinite; animation-delay: var(--d, 0ms); }
@keyframes aira-gl-shiver { 0% { transform: translate(0.6px, -0.4px); } 50% { transform: translate(-0.5px, 0.5px); } 100% { transform: translate(0.3px, 0.2px); } }
.aira-gl-fringe { text-shadow: -1.5px 0 0 rgba(214, 44, 44, 0.55), 1.5px 0 0 rgba(30, 190, 210, 0.5) !important; }
.aira-gl-tear { transition: none !important; animation: none !important; user-select: none; }
.aira-gl-scan {
  position: fixed; z-index: 2147481000; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(10, 14, 15, 0.1) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, transparent 0 38%, rgba(220, 232, 226, 0.1) 46% 54%, transparent 62% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .aira-gl-shiver { animation: none; }
  .aira-gl-scan, .aira-gl-tear { display: none; }
}