/* ══════════════════════════════════════════════════════════════════════════════
 * THE Q-DOOR · airf-door.css · v20260909c
 * One component, six sizes, one law. The question mark is the door.
 *
 * SSOT: ~/LUCID/design/components/airf-door.css → mirrored to every repo's assets/
 * by design/tools/lucid-stamp.mjs (add to MIRRORED). NEVER hand-edit a mirrored copy.
 * Ships as /assets/airf-door.css?v=20260909a (datestamp, never a counter).
 *
 * THE HOST sets four tokens on :root (or on the surface's wrapper) and nothing else:
 *   --airf-host     the blade's accent: frames, glows, arrows (exca #19ff6b · matter #00d973 · oval #e7b73f · hub gold)
 *   --airf-display  the title face — Orbitron 800 is the film's own lockup type and is already
 *                   loaded estate-wide by the SEAL's LUCID:HEAD link; leave the default.
 *   --airf-mono     the meta face (IBM Plex Mono on the blades)
 *   --airf-ink / --airf-mute  text colours (defaults are the seal's)
 * FIXED, never overridden: --airf-gold (the bow) · --airf-cyan (the dot, FREE, FREEDOM).
 * NEVER purple: no token here may resolve to var(--lc-pro) / #a855f7 — the estate probe asserts it.
 * MOTION: the dot's breath is AIRF's shipped breath (amireallyfree.no V1.3, 3s · 1→.78→1 · floor .82) — a reuse, not an
 * invention; registered in the design system as lm-breath (⚑ JJ ratifies the 7th primitive). The sigil's type-on is typed-caret.
 *
 * SIZES  data-film-door="sigil|strip|word|band|marquee|fab"
 *   SIGIL    header centre · the title typed once per load, the mark IS the "?"
 *   STRIP    arrival · referrer-keyed one-liner, dismiss = hidden, nothing stored
 *   WORD     the cyan law · FREE / FREEDOM in running text → cyan, a link
 *   BAND     the bottom of every reading · breathes while in view
 *   MARQUEE  the footer plate · the lockup framed by the host
 *   FAB      blades only · floating disc, appears on timer/interaction, never over a work surface
 *
 * BREATH BUDGET: exactly one dot breathes per viewport. airf-door.js grants .airf-breathe to the
 * BAND while it is in view, otherwise to the FAB. The SIGIL blooms once after typing. Hover = one cycle.
 * prefers-reduced-motion → nothing moves, ever.
 * ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* CANON DERIVATION (lucid-design-system law: no invented hex) — every colour/font/radius resolves to a
     lucid-tokens.css custom property, which is mirrored into all four repos; the literal after the comma is
     the SSOT value as a fallback for any surface that loads this file before the tokens. */
  --airf-gold:var(--lc-oval,#e7b73f);           /* ⭕ --lc-oval · the bow, the title */
  --airf-gold-hi:#f5e6a3; --airf-gold-lo:#d4af37; /* the mark's own gradient stops · $source amireallyfree.no/assets/q.svg (an asset, not a token) */
  --airf-cyan:var(--lc-free,#22d3ee);           /* --lc-free · the dot, FREE, FREEDOM */
  --airf-plate:var(--lc-bg,#09090f);            /* --lc-bg · the estate canvas */
  --airf-host:var(--airf-gold);                 /* the HOST overrides: --lc-exca · --lc-matter · --lc-oval */
  --airf-display:var(--lc-font-display,'Orbitron','Space Mono',monospace);   /* the film's own lockup type */
  --airf-mono:var(--lc-font-data,'IBM Plex Mono','Space Mono',monospace);
  --airf-serif:'Cormorant Garamond','EB Garamond',Georgia,serif;              /* blade-authored; hosts may override */
  --airf-ink:var(--lc-txt,#eef2ee);
  --airf-mute:rgba(238,242,238,.62);
  --airf-r:var(--r-lg,12px); --airf-r-pill:var(--r-pill,999px);
  --airf-elev:var(--elev-1,0 8px 26px rgba(0,0,0,.5));
}

/* ── THE MARK ─────────────────────────────────────────────────────────────── */
.qmark{display:inline-block;width:14px;height:16px;vertical-align:-2px;flex:none;overflow:visible}
.qmark .qm-bow{fill:url(#qm-gold)}
.qmark .qm-dot{fill:var(--airf-cyan);transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
@keyframes qm-breath{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(.78)}}
@keyframes qm-bloom{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.airf-breathe .qm-dot{animation:qm-breath 3s ease-in-out infinite}
.airf-bloom .qm-dot{animation:qm-bloom .5s cubic-bezier(.2,.9,.3,1.2) 1 both}
[data-film-door]:hover .qm-dot,[data-film-door]:focus-visible .qm-dot{animation:qm-breath 1.6s ease-in-out 1}
[data-film-door]{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
[data-film-door] *{box-sizing:border-box}
[data-film-door]:focus-visible{outline:2px solid var(--airf-cyan);outline-offset:3px;border-radius:6px}
[data-film-door] em{font-style:normal;color:var(--airf-cyan)}

/* ── WORD · the cyan law ──────────────────────────────────────────────────── */
.airf-word{color:var(--airf-cyan);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .16s ease;font:inherit;letter-spacing:inherit}
.airf-word:hover,.airf-word:focus-visible{border-bottom-color:var(--airf-cyan)}

/* ── SIGIL · header centre ────────────────────────────────────────────────── */
.airf-sigil{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;
  text-decoration:none;color:var(--airf-mute);font:600 10.5px/1 var(--airf-mono);
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border-radius:8px}
.airf-sigil .qmark{width:16px;height:18px;margin-top:-1px}
.airf-sigil .sg-t{display:inline-block;min-width:15.5ch;text-align:left}   /* reserved: typing never shifts the header */
.airf-sigil .sg-c{display:inline-block;width:1px;height:1em;vertical-align:-2px;background:var(--airf-cyan);opacity:0}
.airf-sigil.is-typing .sg-c{opacity:1;animation:sg-blink .7s steps(1) infinite}
@keyframes sg-blink{50%{opacity:0}}
.airf-sigil:hover,.airf-sigil:focus-visible{color:var(--airf-ink)}
@media (max-width:719px){
  .airf-sigil{padding:0 8px;gap:0}
  .airf-sigil .sg-t,.airf-sigil .sg-c{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .airf-sigil .qmark{width:20px;height:23px}
}

/* ── STRIP · arrival ──────────────────────────────────────────────────────── */
.airf-strip{display:flex;align-items:center;gap:12px;min-height:40px;padding:6px 14px;
  font:500 11px/1.45 var(--airf-mono);letter-spacing:.05em;color:var(--airf-ink);
  border-bottom:1px solid color-mix(in srgb,var(--airf-gold) 30%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--airf-gold) 8%,transparent),transparent)}
.airf-strip[hidden]{display:none}
.airf-strip .qmark{width:16px;height:18px}
.airf-strip .as-line{flex:1 1 auto;min-width:0}
.airf-strip .as-line b{color:var(--airf-cyan);font-weight:600}
.airf-strip .as-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;
  color:var(--airf-gold);text-decoration:none;white-space:nowrap;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.airf-strip .as-back:hover{color:var(--airf-gold-hi)}
.airf-strip .as-x{flex:none;min-width:44px;min-height:44px;background:none;border:0;color:var(--airf-mute);cursor:pointer;font:14px/1 var(--airf-mono)}
.airf-strip .as-x:hover{color:var(--airf-ink)}
@media (max-width:719px){
  .airf-strip{flex-wrap:wrap;padding:8px 12px 4px}
  .airf-strip .as-line{flex-basis:calc(100% - 72px)}
  /* 44, not 40: 40px is below the estate's own tap floor and this is a real link a thumb
     has to hit. Raised 9 Sep 2026 after ovaltable.no measured it at 40 on a phone. */
  .airf-strip .as-back{flex:1 1 auto;justify-content:center;min-height:44px}
}

/* ── BAND · the bottom of every reading ───────────────────────────────────── */
.airf-band{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  margin:28px 0 0;padding:18px 20px;text-decoration:none;color:var(--airf-ink);
  border:1px solid color-mix(in srgb,var(--airf-host) 26%,transparent);border-radius:var(--airf-r);
  background:linear-gradient(180deg,color-mix(in srgb,var(--airf-host) 7%,var(--airf-plate)),var(--airf-plate));
  position:relative;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.airf-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(60% 120% at 0% 50%,color-mix(in srgb,var(--airf-cyan) 12%,transparent),transparent 70%)}
.airf-band:hover::before,.airf-band:focus-visible::before{opacity:1}
.airf-band:hover,.airf-band:focus-visible{border-color:color-mix(in srgb,var(--airf-host) 56%,transparent);
  box-shadow:0 0 30px color-mix(in srgb,var(--airf-host) 16%,transparent)}
.airf-band .qmark{width:28px;height:32px}
.airf-band .ab-body{display:flex;flex-direction:column;min-width:0}
.airf-band .ab-eye,.airf-band .ab-title,.airf-band .ab-sub,.airf-band .ab-lit{display:block}
.airf-band .ab-eye{font:600 9.5px/1 var(--airf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--airf-mute);margin-bottom:7px}
.airf-band .ab-title{font:800 15px/1.15 var(--airf-display);letter-spacing:.06em;color:var(--airf-gold)}
.airf-band .ab-title small{font:600 10px/1 var(--airf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--airf-mute);margin-left:10px;vertical-align:2px}
.airf-band .ab-sub{font:400 13.5px/1.45 var(--airf-serif);font-style:italic;color:var(--airf-mute);margin-top:6px;max-width:62ch}
.airf-band .ab-lit{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--airf-gold) 35%,transparent);
  font:500 11px/1.5 var(--airf-mono);letter-spacing:.04em;color:var(--airf-ink)}
.airf-band .ab-lit b{color:var(--airf-ink);font-weight:600}
.airf-band .ab-lit b em{color:var(--airf-cyan)}
.airf-band.is-lit .ab-lit{display:block}
.airf-band.is-lit{border-color:color-mix(in srgb,var(--airf-gold) 50%,transparent)}
.airf-band .ab-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--airf-host) 48%,transparent);border-radius:var(--airf-r-pill);
  font:600 10.5px/1 var(--airf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--airf-ink);
  background:color-mix(in srgb,var(--airf-host) 6%,transparent);transition:background .18s ease,border-color .18s ease}
.airf-band:hover .ab-cta{background:color-mix(in srgb,var(--airf-host) 14%,transparent);border-color:color-mix(in srgb,var(--airf-host) 70%,transparent)}
.airf-band .ab-cta i{font-style:normal;color:var(--airf-host)}
@media (max-width:719px){
  .airf-band{grid-template-columns:1fr;text-align:center;justify-items:center;gap:12px;padding:20px 16px 16px;margin-top:22px}
  .airf-band .ab-title small{display:block;margin:6px 0 0}
  .airf-band .ab-sub{font-size:13px}
  .airf-band .ab-cta{width:100%;justify-content:center}
}

/* ── BAND · NARROW CONTAINER ───────────────────────────────────────────────────
   The rule above keys off the VIEWPORT, which is right for a full-width reading and wrong for a
   band that lives in a column. ovaltable.no puts it at the bottom of the seat panel — a ~330px
   sidebar that stays narrow at EVERY viewport — so on a 1280px desktop the three-column grid was
   applying inside a third of the width it was drawn for: the lockup broke onto three lines and the
   CTA stranded itself mid-row. Any host with a sidebar reading will meet the same thing.
   HOW TO OPT IN: wrap the band in <div class="airf-band-rail">. That is all. The band then stacks
   on ITS OWN width instead of the window's, and hosts that place it full-width are untouched
   (a 1250px room band never crosses the threshold). Values are identical to the 719px block above,
   so the two paths can never disagree. Degrades silently where @container is unsupported — pair it
   with a host-scoped fallback if you must support a pre-2022 browser. */
.airf-band-rail{container-type:inline-size}
@container (max-width:560px){
  .airf-band{grid-template-columns:1fr;text-align:center;justify-items:center;gap:12px;padding:20px 16px 16px}
  .airf-band .ab-title small{display:block;margin:6px 0 0}
  .airf-band .ab-sub{font-size:13px}
  .airf-band .ab-cta{width:100%;justify-content:center}
}

/* ── MARQUEE · the footer plate ───────────────────────────────────────────── */
.airf-marquee{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:12px 22px;
  max-width:min(92vw,560px);text-decoration:none;border-radius:var(--airf-r);
  border:1px solid color-mix(in srgb,var(--airf-host) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--airf-host) 7%,transparent),color-mix(in srgb,var(--airf-host) 2%,transparent));
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.airf-marquee:hover,.airf-marquee:focus-visible{border-color:color-mix(in srgb,var(--airf-host) 62%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--airf-host) 22%,transparent);transform:translateY(-1px)}
.airf-marquee .qmark{width:18px;height:21px}
.airf-marquee .mq-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.airf-marquee .mq-title{font:800 14px/1.1 var(--airf-display);letter-spacing:.06em;color:var(--airf-gold);white-space:nowrap}
.airf-marquee .mq-meta{font:600 9.5px/1.4 var(--airf-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--airf-mute)}
.airf-marquee .mq-arrow{font:600 11px/1 var(--airf-mono);color:var(--airf-host);opacity:.85;flex:none}
@media (max-width:480px){
  .airf-marquee{width:100%;max-width:none;padding:12px 14px;gap:10px;border-radius:14px}
  .airf-marquee .mq-title{font-size:12.5px;white-space:normal}
  .airf-marquee .mq-meta{font-size:8.5px;letter-spacing:.07em;white-space:normal}
}

/* ── FAB · blades only ────────────────────────────────────────────────────── */
.airf-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.airf-fab.is-on{opacity:1;transform:none;pointer-events:auto}
.airf-fab .fab-go{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--airf-plate);border:1px solid color-mix(in srgb,var(--airf-gold) 55%,transparent);
  box-shadow:var(--airf-elev);text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease}
.airf-fab .fab-go .qmark{width:20px;height:23px}
.airf-fab .fab-go:hover,.airf-fab .fab-go:focus-visible{border-color:var(--airf-gold);
  box-shadow:var(--airf-elev),0 0 24px color-mix(in srgb,var(--airf-cyan) 28%,transparent)}
.airf-fab .fab-x{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;cursor:pointer;
  background:var(--airf-plate);border:1px solid rgba(238,242,238,.25);color:var(--airf-mute);
  font:12px/22px var(--airf-mono);text-align:center;padding:0;opacity:0;transition:opacity .2s ease}
.airf-fab:hover .fab-x,.airf-fab:focus-within .fab-x{opacity:1}
.airf-fab .fab-tip{position:absolute;right:62px;top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;
  font:600 10px/1 var(--airf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--airf-ink);
  background:var(--airf-plate);border:1px solid color-mix(in srgb,var(--airf-gold) 40%,transparent);
  padding:9px 11px;border-radius:8px;opacity:0;transition:opacity .2s ease}
.airf-fab .fab-tip em{font-style:normal;color:var(--airf-cyan)}
.airf-fab:hover .fab-tip,.airf-fab:focus-within .fab-tip{opacity:1}
@media (max-width:719px){
  .airf-fab{right:14px}
  .airf-fab .fab-go{width:48px;height:48px}
  .airf-fab .fab-tip{display:none}
  .airf-fab .fab-x{opacity:1;width:20px;height:20px;font-size:11px;line-height:18px;top:-6px;left:-6px}
}

/* ── MOTION LAW ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .qmark .qm-dot,.airf-sigil .sg-c{animation:none!important}
  .airf-fab,.airf-marquee,.airf-band,.airf-word{transition:none}
}