/* ============================================================
   BREATH RELEASE 0009 . CIB AND CIP REAL MULTI APP HOST
   The world first. Glass only where the Wonder draws it.

   Pink smoke is the world, genuinely moving and evolving: the
   Founder's own live smoke photograph drifts on one long path
   while two translucent smoke veils breathe across it on
   different periods, so the scene never repeats the same frame
   twice within a sitting. This is atmosphere, never a signal.

   There is NO dashboard here. No dock, no windows, no widgets,
   no presence rail, no monitor tabs, no cards, no sidebars, no
   synthetic desktop furniture. Code supplies responsive spatial
   areas, geometry, motion capability, factual seams and SVG
   primitives. The composition belongs to the Wonder.

   Arrival is calm room, never theater. The three phases in this
   package are externally supplied states. No timer advances
   them, no animation end changes what is displayed, and nothing
   here may declare readiness: the phase arrives from outside as
   a fact. Zero setTimeout, zero setInterval.

   No em dashes anywhere, including these comments.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ground: #08070e;
  --ink: #f2ede2;
  --ink-dim: rgba(242, 237, 226, 0.66);
  --ink-faint: rgba(242, 237, 226, 0.45);
  --violet: #8B5CF6;
  --rose: #ec4899;
  --focus: #c9b8fb;

  --glass: rgba(255, 255, 255, 0.05);
  --glass-blur: 16px;
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-soft: rgba(255, 255, 255, 0.08);
  --highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);

  --font-ui: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 10px 16px; background: var(--violet); color: #fff;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   THE WORLD. Three layers of real motion on unequal periods.
   ============================================================ */
.world {
  position: fixed;
  inset: -6%;
  z-index: 0;
  background-color: var(--ground);
  background-image: url("assets/smoke-founder-live-0009.jpeg");
  background-size: cover;
  background-position: center;
  animation: worlddrift 88s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes worlddrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-2.2%, -1.6%, 0); }
}
/* two breathing veils, pure light, unequal periods so the scene evolves */
.veil { position: fixed; inset: -20%; z-index: 0; pointer-events: none; }
.veil.a {
  background: radial-gradient(46% 38% at 30% 62%, rgba(236, 72, 153, 0.20), transparent 70%);
  animation: veila 53s ease-in-out infinite alternate;
}
.veil.b {
  background: radial-gradient(40% 34% at 72% 30%, rgba(139, 92, 246, 0.16), transparent 70%);
  animation: veilb 71s ease-in-out infinite alternate;
}
@keyframes veila { from { transform: translate3d(-4%, 2%, 0) scale(1); opacity: .7; }
                   to   { transform: translate3d(5%, -4%, 0) scale(1.25); opacity: 1; } }
@keyframes veilb { from { transform: translate3d(3%, -2%, 0) scale(1.1); opacity: .8; }
                   to   { transform: translate3d(-5%, 4%, 0) scale(1); opacity: .55; } }
/* one veil that protects ink without hiding the world */
.settle {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 26%, rgba(10, 8, 18, 0.08), rgba(10, 8, 18, 0.46));
}
@media (prefers-reduced-motion: reduce) {
  .world, .veil { animation: none; }
}

/* ============================================================
   SPATIAL AREAS. Geometry only. The Wonder composes into them.
   ============================================================ */
.room {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(14px, 2.6vw, 34px);
  gap: clamp(10px, 1.8vh, 18px);
}

/* the one quiet masthead line. A word, not chrome. */
.name {
  justify-self: start;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  margin: 0;
  color: var(--ink-dim);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* the open middle of the room */
.open {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: clamp(10px, 1.6vw, 22px);
  align-content: center;
}

/* a region: a pane of real glass the Wonder chose to draw on.
   The world must stay clearly visible through it. */
.region {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--highlight), 0 24px 70px rgba(4, 3, 8, .35);
  padding: clamp(14px, 1.8vw, 22px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.region[data-tone="deep"] { background: rgba(10, 8, 18, 0.34); }

/* region label: a short structural word, uppercase, quiet */
.rlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.rvalue { font-size: clamp(26px, 3vw, 40px); font-weight: 300; line-height: 1.05; margin: 0; }
.rrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 13.5px; color: var(--ink-dim);
  padding-bottom: 9px; border-bottom: 1px solid var(--hairline-soft);
  min-width: 0;
}
.rrow:last-child { border-bottom: 0; padding-bottom: 0; }
.rrow b { color: var(--ink); font-weight: 600; }
.rnote { font-size: 10.5px; color: var(--ink-faint); margin: 0; }

/* the request, spoken by the person, resting in the room */
.request {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  max-width: min(560px, 86vw);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--highlight), 0 18px 50px rgba(4, 3, 8, .4);
  padding: 13px 24px;
  font-size: 15px;
  color: var(--ink);
  text-align: center;
}

/* the gathering: the smoke opening where the Wonder is arriving.
   Pure light and geometry. No spinner, no progress, no words. */
.gathering {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: min(46vw, 420px);
  aspect-ratio: 1;
  pointer-events: none;
}
.gathering .bloom {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 237, 226, 0.10), rgba(236, 72, 153, 0.05) 45%, transparent 70%);

  animation: bloombreathe 7s ease-in-out infinite alternate;
}
.gathering .rim {
  position: absolute; inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(242, 237, 226, 0.14);
  box-shadow: 0 0 60px rgba(236, 72, 153, 0.12), inset 0 0 40px rgba(139, 92, 246, 0.08);
  animation: bloombreathe 9s ease-in-out infinite alternate-reverse;
}
@keyframes bloombreathe { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .gathering .bloom, .gathering .rim { animation: none; } }

/* the composer: the one place a person speaks from. Shell owned. */
.composer {
  justify-self: center;
  width: min(680px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--highlight), 0 18px 50px rgba(4, 3, 8, .4);
  padding: 8px 10px 8px 22px;
}
.composer :is(input, textarea) {
  resize: none;
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--ink); font: inherit; font-size: 14px;
}
.composer :is(input, textarea)::placeholder { color: var(--ink-faint); }
.composer .send {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(236,72,153,.22));
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.composer .send:disabled { opacity: .45; cursor: not-allowed; }
.composer .glyph { width: 15px; height: 15px; }
.composer .glyph path { stroke: var(--ink); }

/* the skywriting exploration: one ornamental SVG stroke, carried by
   the smoke, aria-hidden, decorative only, never an instruction */
.skywrit { position: absolute; right: 6%; top: 10%; width: min(30vw, 300px); opacity: .5; pointer-events: none; }
.skywrit path { stroke: rgba(242, 237, 226, 0.5); fill: none; stroke-linecap: round; }

/* ============================================================
   THE THREE EXTERNALLY SUPPLIED PHASES. No timer moves them.
   ============================================================ */
body[data-phase="request"] .open .region { display: none; }
body[data-phase="request"] .gathering { display: none; }
body[data-phase="request"] .skywrit { display: none; }

body[data-phase="arriving"] .open .region { display: none; }
body[data-phase="arriving"] .request { opacity: .55; }
body[data-phase="arriving"] .skywrit { display: none; }
body[data-phase="arriving"] .composer .send { opacity: .45; }

body[data-phase="conversation"] .gathering { display: none; }
body[data-phase="conversation"] .request { display: none; }

/* the Wonder-supplied composition spans, geometry only */
.region[data-span="main"] { grid-column: 3 / 9; }
.region[data-span="side"] { grid-column: 9 / 11; align-self: start; }
.region[data-span="foot"] { grid-column: 3 / 7; }

/* ============================================================
   PHONE. The same world, the same language, one focused region.
   ============================================================ */
@media (max-width: 520px) {
  .room { padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .open { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 12px; }
  .region[data-span="main"], .region[data-span="side"], .region[data-span="foot"] { grid-column: auto; }
  .region[data-span="side"] { align-self: stretch; }
  .request { font-size: 14px; }
  .gathering { width: 72vw; top: 42%; }
  .skywrit { display: none; }
}

/* ============================================================
   RELEASE 0002 ADDITIONS . THE REAL CONVERSATION
   Five externally supplied states: ready, arriving, response,
   refusal, and the reduced variant. The page never advances or
   authors a state, never rewrites a payload, and never speaks.
   Zero setTimeout, zero setInterval.
   ============================================================ */

/* the person's sent words, resting above the answer */
.spoken {
  grid-column: 3 / 11;
  justify-self: end;
  max-width: min(520px, 90%);
  background: rgba(139, 92, 246, 0.14);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 20px 20px 6px 20px;
  box-shadow: var(--highlight), 0 16px 44px rgba(4, 3, 8, .35);
  padding: 12px 18px;
  font-size: 14.5px;
  color: var(--ink);
}

/* the Wonder's answer pane: provider authored text rendered verbatim.
   The pane is geometry; the words inside arrive from the turn. */
.answer {
  grid-column: 3 / 11;
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 20px 20px 20px 6px;
  box-shadow: var(--highlight), 0 24px 70px rgba(4, 3, 8, .35);
  padding: clamp(16px, 2vw, 24px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.answer .verbatim {
  font-family: inherit;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
/* the provenance line: which turn these words came from, factually */
.turnline {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* the factual refusal: transport and session truth only, one quiet line.
   No personality, no apology, no invented explanation, no theater. */
.refusal {
  grid-column: 3 / 11;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 8, 18, 0.40);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid rgba(242, 145, 189, 0.35);
  border-radius: 12px;
  box-shadow: var(--highlight);
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--ink-dim);
}
.refusal .glyph { width: 15px; height: 15px; flex: none; }
.refusal .glyph path { stroke: #f291bd; }
.refusal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink);
}

/* the composer, two states: ready to send once, and resting while the
   turn is in flight. Disabled is a fact set from outside. */
.composer {
  justify-self: center;
  width: min(680px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--highlight), 0 18px 50px rgba(4, 3, 8, .4);
  padding: 8px 10px 8px 22px;
}
.composer :is(input, textarea) {
  resize: none;
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--ink); font: inherit; font-size: 14px;
}
.composer :is(input, textarea)::placeholder { color: var(--ink-faint); }
.composer .send {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(236,72,153,.22));
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.composer .send:disabled { opacity: .45; cursor: not-allowed; }
.composer .glyph { width: 15px; height: 15px; flex: none; }
.composer .glyph path { stroke: var(--ink); }

/* ---------- the five externally supplied states ---------- */
body[data-state="ready"] .spoken,
body[data-state="ready"] .answer,
body[data-state="ready"] .refusal,
body[data-state="ready"] .gathering { display: none; }

body[data-state="arriving"] .answer,
body[data-state="arriving"] .refusal { display: none; }
body[data-state="arriving"] .composer .send { opacity: .45; }

body[data-state="response"] .gathering,
body[data-state="response"] .refusal { display: none; }

body[data-state="refusal"] .gathering,
body[data-state="refusal"] .answer { display: none; }

/* ---------- reduced transparency: same room, raised panes ---------- */
@media (prefers-reduced-transparency: reduce) {
  .spoken, .answer, .refusal, .composer, .request, .region {
    background: rgba(14, 11, 20, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* phone: the same conversation, one column */
@media (max-width: 520px) {
  .spoken, .answer, .refusal { grid-column: 1 / -1; }
  .spoken { max-width: 92%; }
}

/* ============================================================
   RELEASE 0003 ADDITIONS . CIB AND CIP AS ONE WORLD RECOMPOSED
   New externally supplied states beyond 0002: loading, empty,
   restart, reconnect. Desktop is the wide recomposition, phone
   is the same room in one column. Zero timers anywhere.
   ============================================================ */

/* loading: before both factual reads land. The room holds still. */
body[data-state="loading"] .spoken,
body[data-state="loading"] .answer,
body[data-state="loading"] .refusal,
body[data-state="loading"] .gathering,
body[data-state="loading"] .restart,
body[data-state="loading"] .reconnect { display: none; }
body[data-state="loading"] .composer :is(input, textarea),
body[data-state="loading"] .composer .send { opacity: .45; }

/* empty: session ready, nothing spoken yet. The open room IS the state. */
body[data-state="empty"] .spoken,
body[data-state="empty"] .answer,
body[data-state="empty"] .refusal,
body[data-state="empty"] .gathering,
body[data-state="empty"] .restart,
body[data-state="empty"] .reconnect { display: none; }

body[data-state="ready"] .restart,
body[data-state="ready"] .reconnect { display: none; }
body[data-state="arriving"] .restart,
body[data-state="arriving"] .reconnect { display: none; }
body[data-state="response"] .restart,
body[data-state="response"] .reconnect { display: none; }
body[data-state="refusal"] .restart,
body[data-state="refusal"] .reconnect { display: none; }

/* restart read: the protected prior-turn record, rendered factually.
   Digest and lineage facts only; the body stays opaque unless the
   authorized reader supplied a displayable projection. */
body[data-state="restart"] .spoken,
body[data-state="restart"] .answer,
body[data-state="restart"] .refusal,
body[data-state="restart"] .gathering,
body[data-state="restart"] .reconnect { display: none; }
.restart {
  grid-column: 3 / 11;
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--highlight), 0 24px 70px rgba(4, 3, 8, .35);
  padding: clamp(14px, 1.8vw, 22px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.restart .rlabel { margin: 0; }
.restart .fact-rows code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

/* reconnect: transport went away. One factual line and one control the
   PERSON may press. Cold code never presses it. */
body[data-state="reconnect"] .spoken,
body[data-state="reconnect"] .answer,
body[data-state="reconnect"] .refusal,
body[data-state="reconnect"] .gathering,
body[data-state="reconnect"] .restart { display: none; }
.reconnect {
  grid-column: 3 / 11;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 8, 18, 0.40);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--highlight);
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--ink-dim);
}
.reconnect code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink);
}
.reconnect .again {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(236,72,153,.22));
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  cursor: pointer;
  flex: none;
}

/* extra reduced-transparency coverage for the new panes */
@media (prefers-reduced-transparency: reduce) {
  .restart, .reconnect { background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-reduced-transparency="true"] .restart,
html[data-reduced-transparency="true"] .reconnect {
  background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (max-width: 520px) {
  .restart, .reconnect { grid-column: 1 / -1; }
}

/* factual rows, defined here because release 0003 is the first to draw them */
.fact-rows { display: flex; flex-direction: column; gap: 8px; }
.fact-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 13.5px; color: var(--ink-dim);
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline-soft);
  min-width: 0;
}
.fact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-row b { color: var(--ink); font-weight: 600; min-width: 0; }
.fact-note { font-size: 11px; color: var(--ink-dim); margin: 0; }

/* ============================================================
   RELEASE 0004 ADDITIONS . THE APP SURFACE
   The living conversation becomes the first real app. The shell
   may authenticate, route, render, and factually refuse. It may
   not choose the app, write app content, infer meaning, fake
   readiness, or manufacture facts. App identity arrives through
   one exact schema-closed descriptor supplied from outside.

   Shell states live on body[data-shell] and are set only by real
   facts (descriptor validity, factual reads, the route in the
   URL) or a real human press. The conversation keeps its own
   body[data-state] exactly as release 0003 defined it.

   No dock. No windows. No widgets. No fake notifications. One
   launcher landmark resting in the world, one premium glass app
   surface where the app composes. Zero timers anywhere.
   ============================================================ */

/* ---------- shell states ---------- */
/* His loading law: the wall is already painted, so do not hide it. The host fetches nothing
   at boot, the catalog and every app document are json already in this page, and the only
   reason the room was dark here was this rule. The launcher stays. The surface and the
   refusal still wait, because neither has anything true to show yet. */
body[data-shell="loading"] .appsurface,
body[data-shell="loading"] .shellrefusal { display: none; }
body[data-shell="loading"] .doorstrip-holder { display: block; }
.doorstrip-holder { display: none; }
.doorstrip-holder .heldwall,
.doorstrip-holder .doorstrip { margin: 0; }

body[data-shell="closed"] .appsurface,
body[data-shell="closed"] .shellrefusal { display: none; }

body[data-shell="open"] .launcher,
body[data-shell="open"] .shellrefusal { display: none; }

body[data-shell="refusal"] .launcher,
body[data-shell="refusal"] .appsurface { display: none; }

/* The anonymous document carries the same inert private-shaped HTML skeleton so a signed
   Founder can receive the private document at the same URL. Public facts must never make
   that skeleton visible: only the catalog's release/health facts and fixed refusal render. */
body[data-shell="public"] .appsurface { display: none; }

/* ---------- the launcher: one sparse landmark, not a dock ---------- */
.launcher {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--highlight), 0 24px 70px rgba(4, 3, 8, .35);
  padding: 26px 44px 22px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  min-width: 0;
}
.launcher:disabled { opacity: .45; cursor: not-allowed; }
.launcher .glyph { width: 26px; height: 26px; }
.launcher .glyph path { stroke: var(--ink); }
.launcher .word {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}
.launcher .routefact {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- the app surface: premium glass where the app composes ---------- */
body[data-shell="open"] .open { display: block; }
.appsurface {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 16px);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--highlight), 0 30px 90px rgba(4, 3, 8, .4);
  padding: clamp(14px, 1.8vw, 24px);
  min-width: 0;
}

/* the one factual bar: where you are, and the way back */
.appbar:has(> .back:empty):has(> .apptitle:empty) { display: none; }
.appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(10, 8, 18, 0.34);
  color: var(--ink-dim);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
  flex: none;
}
.back .glyph { width: 13px; height: 13px; }
.back .glyph path { stroke: var(--ink-dim); }
.apptitle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-dim);
  margin: 0;
}
.apptitle .routefact {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* the app composes inside the surface on the same 12 column room grammar */
.convo {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: clamp(10px, 1.6vw, 22px);
  align-content: center;
}
.appsurface .composer { flex: none; }

/* ---------- the shell refusal: facts only, its own seam ---------- */
.shellrefusal {
  grid-column: 3 / 11;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 8, 18, 0.40);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid rgba(242, 145, 189, 0.35);
  border-radius: 12px;
  box-shadow: var(--highlight);
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--ink-dim);
}
.shellrefusal .glyph { width: 15px; height: 15px; flex: none; }
.shellrefusal .glyph path { stroke: #f291bd; }
.shellrefusal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink);
}

/* ---------- reduced transparency for the shell panes ---------- */
@media (prefers-reduced-transparency: reduce) {
  .launcher, .appsurface, .back, .shellrefusal {
    background: rgba(14, 11, 20, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
html[data-reduced-transparency="true"] .launcher,
html[data-reduced-transparency="true"] .appsurface,
html[data-reduced-transparency="true"] .back,
html[data-reduced-transparency="true"] .shellrefusal,
body[data-contrast="raised"] .launcher,
body[data-contrast="raised"] .appsurface,
body[data-contrast="raised"] .back,
body[data-contrast="raised"] .shellrefusal {
  background: rgba(14, 11, 20, 0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- CIP: the same route as a full phone composition ---------- */
@media (max-width: 520px) {
  .launcher { padding: 22px 34px 18px; }
  .shellrefusal { grid-column: 1 / -1; }
  /* full composition: the surface gives the room back to the world */
  .appsurface {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* ============================================================
   RELEASE 0005 ADDITIONS . AUTHORIZED APPS
   The catalog is externally supplied and order preserving. The
   shell draws one sparse landmark per authorized app and one
   premium glass active surface. Which surface composes inside
   it (the conversation or the capability result) is a supplied
   fact on the descriptor, mirrored to body[data-app-surface],
   never a choice this code makes. Zero timers anywhere.
   ============================================================ */

/* the catalog is visible only in the closed room */
body[data-shell="loading"] .catalog,
body[data-shell="open"] .catalog,
body[data-shell="refusal"] .catalog { display: none; }

/* the catalog: sparse landmarks resting together in the world.
   Supplied order flows left to right, then wraps. Not a dock:
   no pinning, no badges, no status, no reordering. */
.catalog {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  max-width: min(880px, 92%);
  min-width: 0;
}
.catalog .launcher {
  grid-column: auto;
  justify-self: auto;
  align-self: auto;
}

/* which app surface composes is a supplied fact, not a choice */
body:not([data-app-surface="capability-result"]) .capability { display: none; }
body[data-app-surface="capability-result"] .convo,
body[data-app-surface="capability-result"] .composer { display: none; }

/* the capability result pane: supplied facts and verbatim words */
.capability {
  flex: none;
  align-self: center;
  justify-self: center;
  width: min(680px, 100%);
  margin: auto;
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--highlight), 0 24px 70px rgba(4, 3, 8, .35);
  padding: clamp(14px, 1.8vw, 22px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.capability[data-cap="refusal"], .capability[data-cap="refused"] {
  border-color: rgba(242, 145, 189, 0.35);
}
.capability[data-cap="pending"] { color: var(--ink-dim); }
.capability .capdetail {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.capability .fact-rows code,
.capability .fact-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

/* reduced transparency for the capability pane */
@media (prefers-reduced-transparency: reduce) {
  .capability { background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-reduced-transparency="true"] .capability,
body[data-contrast="raised"] .capability {
  background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* CIP: the same catalog, one column of landmarks */
@media (max-width: 520px) {
  .catalog { flex-direction: column; align-items: stretch; gap: 12px; }
  .catalog .launcher { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 20px; }
  .capability { width: 100%; }
}

/* ============================================================
   RELEASE 0006 ADDITIONS . THE REAL MEETING ROOM
   Everything on the wall is an externally supplied fact: the
   descriptor names the room, the durable readback receipt
   attests the list, and every authorized event renders in
   supplied order with its exact eight facts. No cap, no rank,
   no filter, no summary, no grouping, no truncation, no
   deduplication, no trusted source whitelist, no presence
   claims, no fabricated progress. Scroll lives INSIDE the wall;
   the page never scrolls sideways. Zero timers anywhere.
   ============================================================ */

/* shell states for this surface */
body[data-shell="loading"] .roomsurface,
body[data-shell="loading"] .shellrefusal { display: none; }
body[data-shell="open"] .shellrefusal { display: none; }
body[data-shell="refusal"] .roomsurface { display: none; }

/* the room surface composes the readback seam above the wall */
.roomsurface { min-height: 0; }
.readbackseam {
  flex: none;
  align-self: center;
  width: min(760px, 100%);
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--highlight), 0 18px 50px rgba(4, 3, 8, .3);
  padding: 14px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.readbackseam:empty { display: none; }
.readbackseam .fact-rows code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

/* the wall: the one scrolling region. Contained, never sideways. */
.roomwall {
  flex: 1;
  min-height: 0;
  align-self: center;
  width: min(760px, 100%);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 14px);
  padding: 2px;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

/* one event: eight supplied facts resting on quiet glass */
.roomevent {
  flex: none;
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  box-shadow: var(--highlight);
  padding: 12px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eventhead, .eventfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  min-width: 0;
}
.eventseq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--ink-faint);
}
.eventid, .eventreceipt, .eventreply {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.eventaddress, .eventprovenance {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.eventbody {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-width: 0;
}

/* the refusal on the wall: the exact code, nothing else */
.roomrefusal { align-self: center; margin: auto; }

/* reduced transparency for the room panes */
@media (prefers-reduced-transparency: reduce) {
  .readbackseam, .roomevent { background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-reduced-transparency="true"] .readbackseam,
html[data-reduced-transparency="true"] .roomevent,
body[data-contrast="raised"] .readbackseam,
body[data-contrast="raised"] .roomevent {
  background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* CIP: the same room, full composition, the wall keeps its own scroll */
@media (max-width: 520px) {
  .readbackseam, .roomwall { width: 100%; }
  .eventbody { font-size: 13.5px; }
}

/* the projection refusal lives ON the wall of an open room, so it is
   exempt from the shell-level refusal visibility rule above */
body[data-shell="open"] .roomwall .roomrefusal { display: flex; }

/* ============================================================
   RELEASE 0009 SUCCESSOR . EXACT ROSTER AND TECHNICAL WALL
   The roster is supplied in exact configured order. The drawer
   holds authorized technical references. The wall carries every
   exact receipted technical record in durable order. No presence,
   aggregate status, progress, claim, or completion is inferred.
   ============================================================ */

/* the seats: quiet chips resting in one row that wraps */
.seatrail {
  flex: none;
  align-self: center;
  width: min(760px, 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.seatrail:empty { display: none; }
.seat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  box-shadow: var(--highlight);
  padding: 9px 14px;
  min-width: 0;
}
.seat .glyph { width: 17px; height: 17px; flex: none; }
.seat .glyph path { stroke: var(--ink-dim); }
.seatwords {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  min-width: 0;
}
.seatrole {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}
.seatid, .seatprovenance {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
/* the technical facts drawer, opened by the person */
.receiptdrawer {
  flex: none;
  align-self: center;
  width: min(760px, 100%);
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--highlight), 0 18px 50px rgba(4, 3, 8, .3);
  min-width: 0;
}
.drawersummary {
  cursor: pointer;
  list-style: none;
  padding: 12px 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.drawersummary::-webkit-details-marker { display: none; }
.receiptdrawer[open] .drawersummary { border-bottom: 1px solid var(--hairline-soft); }
.drawerbody { padding: 12px 18px 16px; }
.drawerbody:empty { display: none; }
.drawerbody .fact-rows code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* technical records carry their exact body schema as a quiet fact */
.eventkind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* reduced transparency for the new panes */
@media (prefers-reduced-transparency: reduce) {
  .seat, .receiptdrawer { background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-reduced-transparency="true"] .seat,
html[data-reduced-transparency="true"] .receiptdrawer,
body[data-contrast="raised"] .seat,
body[data-contrast="raised"] .receiptdrawer {
  background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* CIP: the same room, one column, contained wall scroll */
@media (max-width: 520px) {
  .seatrail, .receiptdrawer { width: 100%; }
  .seat { width: 100%; }
}

/* ============================================================
   RELEASE 0009 SUCCESSOR . EXACT CONNECTION REGISTRY
   Capability and resource facts render in supplied order. The
   activity authority is absent and activity is empty. No request,
   authorization, delivery, effect, or receipt history is inferred.
   ============================================================ */

/* the Bridge Builder path seam */
.bridgepath {
  flex: none;
  align-self: center;
  width: min(760px, 100%);
  background: rgba(10, 8, 18, 0.34);
  backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
  border: 1px solid rgba(139, 92, 246, 0.24);
  border-radius: 14px;
  box-shadow: var(--highlight), 0 18px 50px rgba(4, 3, 8, .3);
  padding: 13px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bridgepath:empty { display: none; }
.bridgenote {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* reduced transparency for the new seam */
@media (prefers-reduced-transparency: reduce) {
  .bridgepath { background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-reduced-transparency="true"] .bridgepath,
body[data-contrast="raised"] .bridgepath {
  background: rgba(14, 11, 20, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* CIP: full column */
@media (max-width: 520px) {
  .bridgepath { width: 100%; }
}

/* ============================================================
   RELEASE 0009 ADDITIONS . THE REAL MULTI APP HOST
   Four honest app surfaces live in one page; exactly one is
   composed at a time, chosen only by the route fact in the URL.
   The shipped page starts with no app open. Back returns to the
   same computer: the world never left. Zero timers anywhere.
   ============================================================ */

/* all surfaces rest; the one named by the supplied surface fact composes */
body[data-shell="open"] .appsurface { display: none; }
body[data-app-surface="conversation"] #surface-conversation { display: flex; }
body[data-app-surface="meeting-room"] #surface-meeting-room { display: flex; }
body[data-app-surface="wonder-teams"] #surface-wonder-teams { display: flex; }
body[data-app-surface="connections-desk"] #surface-connections-desk { display: flex; }
/* The calendar was shipped and never shown. Line 1188 above hides every .appsurface once the
   shell is open, and only an id rule wins it back; four surfaces got one and this one did not.
   The markup has ships section#surface-calendar, the bootstrap wires all nine of its elements,
   the host makes it a required catalog coordinate, mounts it and routes its projections. So a
   viewer who opened the calendar got an open shell, the launcher gone, no refusal, and an empty
   column that never resolved. That is his dead air with no end to it, and it was one line. */
body[data-app-surface="calendar"] #surface-calendar { display: flex; }