/* App shell styles (APP-06). Loaded after styles.css.
 *
 * Intent: the 3D location is the stage and everything else is a calm overlay.
 * Dark first, warm near-black glass, one accent tinted by the active
 * character's hue. Two voices on purpose:
 *   - the character speaks in a serif, set large and unframed;
 *   - the application speaks in a plain sans with a steel-blue rule whenever it
 *     is stating what is true about the system (status, attempts, erasures).
 * Text colours are checked against the worst case (glass over a white scene) by
 * tests/shell-contrast.test.mjs, which reads the --palette values below.
 */

/* ---- palette and scale -------------------------------------------------------------- */

body.shell-on {
  --ink: #0c0b0e;
  --glass: rgba(14, 12, 17, 0.86);
  --glass-strong: rgba(10, 9, 13, 0.94);
  --surface: #17141b;
  --surface-2: #211d28;
  --line: rgba(255, 240, 222, 0.15);
  --line-strong: rgba(255, 240, 222, 0.3);
  --text: #f5efe6;
  --text-dim: #d3cabe;
  --text-faint: #aba297;
  --sys: #a9c2d6;
  --sys-line: rgba(169, 194, 214, 0.45);
  --ok: #9fd1b0;
  --warn: #e8c277;
  --bad: #ff9c8e;
  --bad-text: #ffc7bd;
  --on-accent: #1a1409;
  --dock-w: clamp(400px, 29vw, 760px);
  --inspector-h: clamp(190px, 34vh, 520px);
  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Type scale (em, relative to the shell's fluid base size). Every font-size
     below uses one of these; tests/shell-static.test.mjs enforces it.
       t-1 labels, small caps, meta     t-5 the character's voice, serif text
       t-2 secondary text, hints        t-6 panel titles
       t-3 interface text               t-7 names, picker title
       t-4 base                         t-8 the programme name */
  --t-1: 0.72em;
  --t-2: 0.82em;
  --t-3: 0.92em;
  --t-4: 1em;
  --t-5: 1.14em;
  --t-6: 1.6em;
  --t-7: 1.9em;
  --t-8: 2.6em;
}

.shell {
  --accent: oklch(0.84 0.085 var(--hue, 78));
  --accent-strong: oklch(0.91 0.1 var(--hue, 78));
  --accent-dim: oklch(0.62 0.06 var(--hue, 78));
  --accent-wash: oklch(0.84 0.085 var(--hue, 78) / 0.14);
  --accent-line: oklch(0.84 0.085 var(--hue, 78) / 0.5);

  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  color: var(--text);
  font-family: var(--font-ui);
  /* 15px at 1280 wide, 16.5px at 1728, 19.5px at 2560, 22px at 3456 */
  font-size: clamp(14px, 0.35vw + 10.5px, 22px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell > * { pointer-events: auto; }
.shell > .toasts { pointer-events: none; }
.shell *, .shell *::before, .shell *::after { box-sizing: border-box; }

/* Soft shading so text on the stage stays legible over any scene. */
.shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60em 28em at 0% 0%, rgba(8, 7, 10, 0.62), transparent 70%),
    radial-gradient(52em 22em at 0% 100%, rgba(8, 7, 10, 0.5), transparent 70%);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: 0.6rem;
  background: var(--accent, #e8c58a); color: var(--on-accent, #1a1409); font: 600 14px/1.3 ui-sans-serif, -apple-system, "SF Pro Text", Arial, sans-serif; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---- resets inside the shell (styles.css styles bare button/h1/h2/p) ---------------- */

.shell button, .shell .btn {
  flex: none; margin: 0; padding: 0; font: inherit; color: inherit; background: none;
  border: 0; border-radius: 0; cursor: pointer; text-align: inherit;
}
.shell button:disabled { cursor: not-allowed; }
:where(.shell) h1, :where(.shell) h2, :where(.shell) h3 { margin: 0; font-weight: 500; text-transform: none; letter-spacing: normal; color: inherit; font-size: var(--t-4); }
:where(.shell) p, :where(.shell) dl, :where(.shell) dd, :where(.shell) ul, :where(.shell) ol, :where(.shell) blockquote, :where(.shell) fieldset { margin: 0; padding: 0; }
:where(.shell) ul, :where(.shell) ol { list-style: none; }
:where(.shell) fieldset { border: 0; min-width: 0; }
:where(.shell) dt { color: inherit; }
:where(.shell) a { color: var(--accent); }

.shell :focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 0.35rem;
}
.shell textarea:focus-visible, .shell input[type="text"]:focus-visible, .shell select:focus-visible {
  outline-offset: 0;
  border-color: var(--accent);
}

.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- buttons ---------------------------------------------------------------------------------- */

.shell .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.55em 1.05em; min-height: 2.4em;
  border: 1px solid var(--line-strong); border-radius: 0.65rem;
  font-size: var(--t-3); font-weight: 550; letter-spacing: 0.01em; line-height: 1.2;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease), transform 0.16s var(--ease);
}
.shell .btn-small { padding: 0.32em 0.75em; min-height: 2em; font-size: var(--t-2); }
.shell .btn-large { padding: 0.8em 1.5em; font-size: var(--t-4); border-radius: 0.8rem; }
.shell .btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.shell .btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
.shell .btn-primary:active:not(:disabled) { transform: translateY(1px); }
.shell .btn-quiet { color: var(--text); background: rgba(255, 240, 222, 0.04); }
.shell .btn-quiet:hover:not(:disabled) { background: rgba(255, 240, 222, 0.11); border-color: var(--accent-line); }
.shell .btn-danger { color: var(--bad-text); border-color: var(--bad); background: rgba(255, 156, 142, 0.08); }
.shell .btn-danger:hover:not(:disabled) { background: rgba(255, 156, 142, 0.2); }
.shell .btn:disabled { opacity: 0.55; }
.shell .btn-primary:disabled { background: rgba(255, 240, 222, 0.06); color: var(--text-faint); border: 1px solid var(--line); opacity: 1; }
.shell .pin[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-strong); }
.shell .btn-icon { display: inline-flex; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.8rem; }
.button-column { display: grid; gap: 0.7rem; margin-top: 0.6rem; }

/* ---- presence strip (top left) ------------------------------------------------------------------- */

.presence {
  position: absolute; left: 1.25rem; top: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
  max-width: calc(100% - var(--dock-w) - 2.5rem);
  transition: max-width 0.3s var(--ease);
}
[data-dock="hidden"] .presence { max-width: calc(100% - 2.5rem); }
.shell .presence-main {
  --accent: oklch(0.84 0.085 var(--hue, 78));
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.45rem 1.2rem 0.45rem 0.45rem;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; text-align: left;
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.shell .presence-main:hover { border-color: var(--accent-line); }
.medallion {
  flex: none; display: inline-grid; place-items: center;
  width: 2.7em; height: 2.7em; border-radius: 50%;
  font-family: var(--font-display); font-size: var(--t-5); color: var(--accent);
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  box-shadow: 0 0 0 4px rgba(8, 7, 10, 0.35);
}
.medallion-large { width: 3em; height: 3em; font-size: var(--t-6); }
.presence-text { display: grid; gap: 0.05rem; min-width: 0; }
.presence-name {
  font-family: var(--font-display); font-size: var(--t-7); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em;
}
.presence-line { font-size: var(--t-3); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence-note { font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.shell .presence-away {
  display: inline-flex; align-items: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.3em 0.9em; border-radius: 999px; background: var(--glass-strong);
  border: 1px solid var(--warn); color: var(--warn); font-size: var(--t-2); line-height: 1.3; text-align: left; text-decoration: underline; text-underline-offset: 0.2em;
}
.shell .presence-away:hover { background: rgba(232, 194, 119, 0.14); }
.presence { flex-wrap: wrap; }
.presence-break { flex-basis: 100%; height: 0; }
.presence-break[hidden] { display: none; }
.presence-state {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.28em 0.8em; border-radius: 999px; background: var(--glass);
  border: 1px solid var(--line); font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.presence-state::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--ok); }
.presence-state[data-state="paused"] { color: var(--warn); border-color: rgba(232, 194, 119, 0.5); }
.presence-state[data-state="paused"]::before { border-radius: 1px; width: 0.55em; height: 0.55em; background: transparent; border-left: 0.16em solid var(--warn); border-right: 0.16em solid var(--warn); }

/* ---- stage bar (bottom left) ----------------------------------------------------------------------- */

.stagebar { position: absolute; left: 1.25rem; bottom: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; max-width: calc(100% - var(--dock-w) - 2.5rem); }
.stagebar-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
[data-dock="hidden"] .stagebar { max-width: calc(100% - 2.5rem); }
.seg-group { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.shell .seg {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.42em 0.95em; border-radius: 999px;
  font-size: var(--t-2); font-weight: 550; color: var(--text-dim); border: 1px solid transparent;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.shell .seg:hover { color: var(--text); }
.shell .seg[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-strong); border-color: var(--accent-line); }
.shell .seg-toggle { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.shell .seg-toggle[aria-pressed="true"] { background: var(--glass); color: var(--text); border-color: var(--line-strong); }
.stage-hint { width: fit-content; max-width: 30em; padding: 0.4em 0.9em; border-radius: 0.7rem; background: var(--glass); font-size: var(--t-2); color: var(--text-faint); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.shell .dock-tab {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.9em 0.7em;
  background: var(--glass); border: 1px solid var(--line); border-right: 0; border-radius: 0.8rem 0 0 0.8rem;
  writing-mode: vertical-rl; font-size: var(--t-2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.shell .dock-tab:hover { color: var(--text); }

/* ---- dock ---------------------------------------------------------------------------------------------- */

.dock {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--dock-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
  border-left: 1px solid var(--line);
  box-shadow: -40px 0 80px rgba(0, 0, 0, 0.28);
  transition: transform 0.32s var(--ease), opacity 0.24s var(--ease), visibility 0s linear 0s;
}
[data-dock="hidden"] .dock { transform: translateX(104%); opacity: 0; visibility: hidden; transition: transform 0.32s var(--ease), opacity 0.24s var(--ease), visibility 0s linear 0.32s; }

.tabs { display: flex; align-items: stretch; justify-content: space-between; gap: 0.4rem; padding: 0.9rem 1rem 0 1rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.shell .tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.55em 0.1em 0.8em;
  font-size: var(--t-3); font-weight: 550; letter-spacing: 0.01em; color: var(--text-faint); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.shell .tab .icon { display: none; }
@media (min-width: 2300px) { .shell .tab .icon { display: inline-block; } }
.shell .tab:hover { color: var(--text); }
.shell .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab-badge {
  position: absolute; top: 0.05em; right: -0.95em; min-width: 1.5em; padding: 0 0.35em; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: var(--t-1); font-weight: 700; line-height: 1.5; text-align: center;
}

.shell .dockline {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;
  padding: 0.5rem 1.25rem; font-size: var(--t-1); letter-spacing: 0.03em; color: var(--text-faint);
  border-bottom: 1px solid var(--line); text-align: left;
}
.shell .dockline:hover { color: var(--text-dim); background: rgba(255, 240, 222, 0.03); }
.dockline-runtime, .dockline-save { display: inline-flex; align-items: center; gap: 0.5em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dockline-runtime { display: block; flex: 1 1 auto; }
.dockline-save { flex: none; }
.dockline-save[data-tone="ok"]::before, .dockline-save[data-tone="warn"]::before, .dockline-save[data-tone="bad"]::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; }
.dockline-save[data-tone="ok"]::before { background: var(--ok); }
.dockline-save[data-tone="warn"]::before { background: transparent; border: 1.5px solid var(--warn); }
.dockline-save[data-tone="bad"]::before { background: var(--bad); border-radius: 1px; }

.dock-panels { position: relative; flex: 1; min-height: 0; }
.panel { position: absolute; inset: 0; overflow-y: auto; padding: 1.2rem 1.4rem 2.4rem; animation: panel-in 0.28s var(--ease); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.panel[hidden] { display: none !important; }
.panel:focus { outline: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel-head { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.panel-title { font-family: var(--font-display); font-size: var(--t-6); line-height: 1.15; letter-spacing: -0.005em; }
.panel-lede { font-size: var(--t-3); color: var(--text-dim); }
.shell .panel-note {
  font-size: var(--t-2); line-height: 1.5; color: var(--sys);
  border-left: 2px solid var(--sys-line); padding-left: 0.8rem; margin: 0.6rem 0;
}
.group-title { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.5rem 0 0.4rem; font-size: var(--t-1); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.group-title .count { color: var(--accent); }
.group-help { font-size: var(--t-2); color: var(--text-faint); margin-bottom: 0.7rem; }
.empty { color: var(--text-faint); font-size: var(--t-3); font-style: italic; padding: 0.6rem 0; }
.mono { font-family: var(--font-mono); font-size: var(--t-2); }
.tag {
  display: inline-block; padding: 0.05em 0.6em; border: 1px dashed var(--line-strong); border-radius: 999px;
  font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); vertical-align: 0.1em;
}
.kicker { font-size: var(--t-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 650; }

/* ---- conversation ------------------------------------------------------------------------------------ */

.talk { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.talk .panel-head { padding: 1.1rem 1.4rem 0.75rem; margin: 0; border-bottom: 1px solid var(--line); }
.transcript-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.transcript { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem 1.2rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.turns { display: grid; gap: 1.15rem; }
.shell .jump {
  position: absolute; left: 50%; bottom: 0.8rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.45em 1em; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: var(--t-2); font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.intro { margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.7rem; }
.intro-kicker { font-size: var(--t-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 650; }
.intro-body { font-family: var(--font-display); font-size: var(--t-4); line-height: 1.55; color: var(--text-dim); }
.intro-line { font-size: var(--t-3); color: var(--text-dim); }
.intro-key { color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-2); }

.msg-head, .attempt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; margin-bottom: 0.25rem; font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; }
.msg .who, .attempt-who { color: var(--accent); }
.msg-user .who { color: var(--text-faint); }
.msg .origin { color: var(--text-faint); font-weight: 500; letter-spacing: 0.08em; }
.msg .when, .attempt .when { margin-left: auto; color: var(--text-faint); font-weight: 450; letter-spacing: 0.04em; text-transform: none; font-variant-numeric: tabular-nums; }
.msg .body, .attempt .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-char .body, .attempt .body { font-family: var(--font-display); font-size: var(--t-5); line-height: 1.58; }
.msg-user { margin-left: 1.6rem; padding-left: 0.9rem; border-left: 2px solid var(--line-strong); }
.msg-user .body { font-size: var(--t-3); color: var(--text); }

.attempt { position: relative; padding-left: 0; }
.attempt[data-tone="bad"] { border-left: 2px solid var(--bad); padding-left: 0.8rem; margin-left: -0.9rem; }
.attempt[data-tone="stopped"] { border-left: 2px solid var(--warn); padding-left: 0.8rem; margin-left: -0.9rem; }
.attempt-old { opacity: 0.82; }
.attempt-old .body { font-size: var(--t-4); color: var(--text-dim); }
.attempt-head .glyph { display: inline-flex; align-self: center; color: var(--accent); }
.attempt[data-tone="bad"] .glyph, .attempt[data-tone="bad"] .attempt-status { color: var(--bad); }
.attempt[data-tone="stopped"] .glyph, .attempt[data-tone="stopped"] .attempt-status { color: var(--warn); }
.attempt-status { color: var(--text-dim); }
.attempt-label { color: var(--text-dim); font-weight: 500; }
.attempt[data-tone="wait"] .glyph svg, .attempt[data-tone="live"] .glyph svg { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.attempt .body.live::after {
  content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.3em; border-radius: 50%;
  background: var(--accent); vertical-align: 0.08em; animation: pulse 1.4s ease-in-out infinite;
}
.attempt .body.partial { color: var(--text-dim); }
.attempt .body.partial::after { content: " \2026 [partial]"; font-family: var(--font-ui); font-size: var(--t-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }
.attempt-error {
  margin-top: 0.4rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: rgba(255, 156, 142, 0.1);
  color: var(--bad-text); font-size: var(--t-2); line-height: 1.45; overflow-wrap: anywhere;
}
.attempt-note { margin-top: 0.35rem; font-size: var(--t-2); color: var(--sys); }
.attempt-meta { margin-top: 0.25rem; font-size: var(--t-1); color: var(--text-faint); letter-spacing: 0.03em; }
.attempt-actions { margin-top: 0.6rem; display: flex; gap: 0.5rem; }

.marker { display: grid; gap: 0.35rem; justify-items: center; text-align: center; padding: 0.3rem 0; }
.marker-rule { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--sys-line), transparent); }
.marker-text { font-size: var(--t-2); color: var(--sys); letter-spacing: 0.02em; white-space: pre-wrap; }
.marker-paused .marker-text { color: var(--warn); }
.marker-catchup { display: grid; gap: 0.2rem; font-size: var(--t-2); color: var(--text-dim); font-style: italic; }
.marker-catchup .catchup-label { font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-3); color: var(--text-faint); }

.pausebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.4rem; background: rgba(232, 194, 119, 0.1); border-top: 1px solid rgba(232, 194, 119, 0.4); }
.pausebar-text { font-size: var(--t-2); color: var(--text); }

.composer { padding: 0.9rem 1.4rem 1.1rem; border-top: 1px solid var(--line); background: rgba(8, 7, 10, 0.35); display: grid; gap: 0.5rem; }
.shell textarea, .shell input[type="text"], .shell select {
  width: 100%; margin: 0; padding: 0.7em 0.9em; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 0.7rem; font: inherit; font-size: var(--t-3); line-height: 1.5; resize: none;
}
.shell textarea::placeholder, .shell input::placeholder { color: var(--text-faint); }
.shell select { appearance: none; -webkit-appearance: none; padding-right: 2em; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 1.1em) 55%, calc(100% - 0.8em) 55%; background-size: 0.3em 0.3em; background-repeat: no-repeat; }
.shell .composer-input { font-family: var(--font-ui); min-height: 3.4em; max-height: min(14em, 26vh); }
.field-small { padding: 0.5em 0.8em; font-size: var(--t-3); }
.composer-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.composer-hint { margin-right: auto; font-size: var(--t-1); color: var(--text-faint); }
.composer-error { padding: 0.5rem 0.7rem; border-radius: 0.5rem; background: rgba(255, 156, 142, 0.1); color: var(--bad-text); font-size: var(--t-2); }

/* ---- notebook ------------------------------------------------------------------------------------------ */

.notebook-summary { padding: 0.8rem 0.9rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 0.8rem; background: rgba(255, 240, 222, 0.03); display: grid; gap: 0.35rem; }
.summary-line { display: block; }
.summary-key { font-size: var(--t-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 650; }
.summary-text { font-family: var(--font-display); font-size: var(--t-4); }
.summary-counts { font-size: var(--t-2); color: var(--text-faint); }
.entries { display: grid; gap: 1.1rem; }
.entry { padding: 0.9rem 1rem 0.8rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface); }
.entry[data-author="character"] { border-left: 3px solid var(--accent-line); }
.entry-mine { background: var(--surface-2); }
.entry-removed { opacity: 0.75; }
.entry-removed .entry-text { font-style: italic; color: var(--text-faint); }
.entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; margin-bottom: 0.4rem; font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; }
.entry .author { color: var(--accent); }
.entry-mine .author { color: var(--text-dim); }
.chip { padding: 0.05em 0.65em; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-dim); font-weight: 550; letter-spacing: 0.08em; }
.entry .when { margin-left: auto; color: var(--text-faint); font-weight: 450; letter-spacing: 0.04em; text-transform: none; }
.entry-text { font-family: var(--font-display); font-size: var(--t-5); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.entry-edited { margin-top: 0.4rem; font-size: var(--t-1); color: var(--sys); }
.entry-actions { margin-top: 0.6rem; display: flex; gap: 0.5rem; }
.entry-edit { display: grid; gap: 0.5rem; }
.history { margin-top: 0.6rem; font-size: var(--t-2); }
.history-summary { cursor: pointer; color: var(--text-dim); font-size: var(--t-2); letter-spacing: 0.04em; padding: 0.2rem 0; list-style-position: inside; }
.history-summary:hover { color: var(--text); }
.revisions { display: grid; gap: 0.6rem; margin-top: 0.5rem; padding-left: 0.8rem; border-left: 1px solid var(--line-strong); }
.revision-head { font-size: var(--t-2); color: var(--sys); letter-spacing: 0.02em; }
.revision-text { white-space: pre-wrap; color: var(--text-dim); overflow-wrap: anywhere; }
.revision-note { font-size: var(--t-2); color: var(--text-faint); font-style: italic; }
.notebook-add { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; }
.field-row { display: flex; align-items: center; gap: 0.7rem; }
.field-row .select { width: auto; min-width: 9em; }
.field { display: grid; gap: 0.3rem; margin-top: 0.9rem; }
.field-label { font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 650; }
.field-help { font-size: var(--t-2); color: var(--text-faint); }

/* ---- memory ------------------------------------------------------------------------------------------------- */

.choice { display: grid; gap: 0.2rem; margin: 0.4rem 0 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 0.8rem; }
.choice-legend { padding: 0 0.4rem; font-size: var(--t-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 650; }
.choice-row { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.45rem 0.1rem; cursor: pointer; }
.choice-row input { flex: none; margin: 0.35em 0 0; accent-color: oklch(0.84 0.085 var(--hue, 78)); width: 1.05em; height: 1.05em; }
.choice-text { display: grid; gap: 0.1rem; }
.choice-label { font-weight: 550; font-size: var(--t-3); }
.option-help { font-size: var(--t-2); color: var(--text-faint); }

.memory-group { margin-bottom: 0.4rem; }
.memories { display: grid; gap: 0.9rem; }
.memory { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--surface); display: grid; gap: 0.45rem; }
.memory[data-status="proposed"] { border-style: dashed; border-color: var(--accent-line); }
.memory[data-status="tentative"] { border-style: dashed; }
.memory[data-status="disabled"] { opacity: 0.72; }
.memory-pinned { box-shadow: inset 3px 0 0 var(--accent); }
.memory-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 650; }
.memory-head .about { color: var(--text-faint); font-weight: 500; }
.memory-head .status { margin-left: auto; color: var(--accent); }
.memory[data-status="tentative"] .status, .memory[data-status="disabled"] .status { color: var(--warn); }
.memory-text { font-family: var(--font-display); font-size: var(--t-5); line-height: 1.5; overflow-wrap: anywhere; }
.memory-source { font-size: var(--t-2); color: var(--sys); }
.memory-quote { font-size: var(--t-2); font-style: italic; color: var(--text-dim); padding-left: 0.8rem; border-left: 2px solid var(--line-strong); overflow-wrap: anywhere; }
.memory-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: var(--t-1); color: var(--text-faint); }
.confbar { position: relative; width: 4.5em; height: 0.4em; border-radius: 999px; background: var(--line); overflow: hidden; }
.confbar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--accent); border-radius: 999px; }
.confbar[data-band="unsure"] .confbar-fill, .confbar[data-band="guess"] .confbar-fill { background: var(--warn); }
.memory-confidence { color: var(--text-dim); }
.memory-corrected { color: var(--sys); }
.memory-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.25rem; }
.memory-form { display: grid; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.forget-warning { font-size: var(--t-2); color: var(--bad-text); }
.erasure { border-style: dotted; border-color: var(--line-strong); background: transparent; }
.erasure-line { font-family: var(--font-ui); font-size: var(--t-3); color: var(--text-dim); }
.erasure .status { color: var(--text-faint); }
.scope { display: grid; gap: 0.25rem; margin-top: 0.4rem; font-size: var(--t-2); color: var(--text-dim); padding-left: 1rem; list-style: disc; }
.memory-add { margin-top: 1.2rem; display: grid; gap: 0.5rem; }

/* ---- character ---------------------------------------------------------------------------------------------------- */

.character-head { grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
.character-id { display: grid; gap: 0.15rem; }
.character-epithet { font-style: italic; }
.character-presentation, .programme-presentation { font-family: var(--font-display); font-size: var(--t-5); line-height: 1.58; margin: 0.8rem 0; }
.voice { margin: 1rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--accent-line); font-family: var(--font-display); font-style: italic; font-size: var(--t-5); line-height: 1.5; color: var(--text); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; margin: 1rem 0; }
.fact { display: grid; grid-template-columns: minmax(7.5em, 10em) 1fr; gap: 0.8rem; align-items: baseline; }
.fact-key { font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 650; }
.fact-value { font-size: var(--t-3); color: var(--text); overflow-wrap: anywhere; }
.character-edit { margin-top: 0.4rem; display: grid; gap: 0.2rem; }
.character-revision { margin-top: 0.8rem; }

/* ---- settings --------------------------------------------------------------------------------------------------------- */

.settings-section { padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.settings-section:last-child { border-bottom: 0; }
.settings .facts { margin: 0.6rem 0; }
.settings .fact { grid-template-columns: minmax(6em, 9em) 1fr; }
.fact-value[data-tone="warn"], .statusline[data-tone="warn"] { color: var(--warn); }
.fact-value[data-tone="bad"], .statusline[data-tone="bad"] { color: var(--bad-text); }
.fact-value[data-tone="ok"] { color: var(--text); }
.progress { height: 0.4em; border-radius: 999px; background: var(--line); overflow: hidden; margin: 0.4rem 0; }
.progress-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); }
.pause-state { font-size: var(--t-4); margin-bottom: 0.4rem; }
.pause-state[data-paused="true"] { color: var(--warn); }
.away-list { display: grid; gap: 0.9rem; margin-top: 0.9rem; }
.away { padding: 0.8rem 0.95rem; border: 1px solid var(--line); border-radius: 0.8rem; display: grid; gap: 0.25rem; }
.away-title { font-weight: 600; font-size: var(--t-3); }
.away-span { font-size: var(--t-2); color: var(--text-faint); }
.away-text { font-size: var(--t-3); color: var(--text-dim); }
.away-honest { font-size: var(--t-2); color: var(--sys); }
.away-catchup { margin-top: 0.4rem; padding: 0.55rem 0.7rem; border: 1px dashed var(--line-strong); border-radius: 0.6rem; }
.catchup-label { font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); font-weight: 650; }
.export-info { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 0.7rem; display: grid; gap: 0.2rem; }
.export-name { font-family: var(--font-mono); font-size: var(--t-2); overflow-wrap: anywhere; }
.import-preview { margin-top: 0.9rem; padding: 0.8rem 0.95rem; border: 1px solid var(--accent-line); border-radius: 0.7rem; display: grid; gap: 0.4rem; }
.import-title { font-weight: 600; }
.problems { display: grid; gap: 0.25rem; padding-left: 1rem; list-style: disc; color: var(--bad-text); font-size: var(--t-2); }
.copies { display: grid; gap: 0.5rem; }
.copy { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 0.6rem; }
.copy-current { border-color: var(--accent-line); }
.copy-label { font-weight: 550; font-size: var(--t-3); }
.copy-meta { font-size: var(--t-1); color: var(--text-faint); margin-right: auto; }
.statusline { margin-top: 0.6rem; color: var(--text-dim); overflow-wrap: anywhere; }
.control { display: grid; gap: 0.2rem; }

.shell .switch { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0; font-weight: 550; font-size: var(--t-3); }
.switch-label { color: var(--text); }
.switch-track { position: relative; width: 2.6em; height: 1.4em; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.switch-thumb { position: absolute; top: 0.15em; left: 0.18em; width: 0.96em; height: 0.96em; border-radius: 50%; background: var(--text-dim); transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); }
.switch[aria-checked="true"] .switch-label { color: var(--text); }
.switch-track { background: var(--accent-wash); border-color: var(--accent); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(1.18em); background: var(--accent-strong); }

.stage-details summary { cursor: pointer; }
.stage-host { margin-top: 0.6rem; }
.stage-host #panel {
  position: static; width: auto; padding: 0; overflow: visible;
  background: transparent; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-size: var(--t-2); color: var(--text-dim);
}
.stage-host #panel header h1 { font-size: var(--t-5); font-weight: 600; color: var(--text); }
.stage-host #panel h2 { margin: 1rem 0 0.4rem; font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.stage-host #panel .buttons { display: flex; gap: 0.5rem; }
.stage-host #panel button { flex: none; padding: 0.4em 0.9em; border: 1px solid var(--line-strong); border-radius: 0.6rem; background: rgba(255, 240, 222, 0.04); color: var(--text); font-size: var(--t-3); }
.stage-host #panel button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-strong); }
.stage-host #panel dl { display: grid; grid-template-columns: 8em 1fr; gap: 0.15rem 0.7rem; margin: 0.4rem 0; }
.stage-host #panel dt { color: var(--text-faint); }
.stage-host #panel dd { margin: 0; word-break: break-word; }
.stage-host #panel .hint { color: var(--text-faint); font-size: var(--t-3); }
.stage-host #panel #nodes { padding-left: 1.4em; list-style: decimal; font-size: var(--t-3); }
.stage-host #panel #nodes .kind { color: var(--accent); margin-right: 0.3em; }

/* ---- inspector dock (bottom) ------------------------------------------------------------------------------------ */

.inspector {
  position: absolute; left: 0; right: var(--dock-w); bottom: 0; height: var(--inspector-h);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--glass-strong); border-top: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  animation: rise 0.3s var(--ease);
  transition: right 0.3s var(--ease);
}
[data-dock="hidden"] .inspector { right: 0; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.inspector-head { display: flex; align-items: center; gap: 1.2rem; padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--line); }
.inspector-title { font-size: var(--t-1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 650; white-space: nowrap; }
.inspector-head .statusline { margin: 0; flex: 1; min-width: 0; font-size: var(--t-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspector-mount { flex: 1; min-height: 0; overflow: auto; padding: 1rem 1.25rem; }
.inspector-placeholder { max-width: 46em; display: grid; gap: 0.6rem; font-size: var(--t-3); color: var(--text-dim); }

/* ---- picker ------------------------------------------------------------------------------------------------------------ */

.picker { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; place-items: center; padding: clamp(0.75rem, 3vw, 3rem); animation: fade 0.25s var(--ease); z-index: 70; }
.picker-scrim { position: absolute; inset: 0; background: rgba(6, 5, 8, 0.74); -webkit-backdrop-filter: blur(14px) saturate(0.8); backdrop-filter: blur(14px) saturate(0.8); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.picker-sheet {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; width: min(78em, 100%); max-height: 100%; overflow: auto;
  background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: 1.3rem;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); animation: sheet-in 0.34s var(--ease);
}
@keyframes sheet-in { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.picker-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 1.6rem 2rem 1.2rem; border-bottom: 1px solid var(--line); }
.picker-title { font-family: var(--font-display); font-size: var(--t-7); line-height: 1.12; margin: 0.3rem 0 0.5rem; }
.shell .picker-close { flex: none; }
.picker-lede { max-width: 46em; color: var(--text-dim); font-size: var(--t-3); }
.picker-body { display: grid; grid-template-columns: minmax(15em, 22em) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0; }
.cast-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow-y: auto; padding: 0.8rem 0.8rem 1.2rem; border-right: 1px solid var(--line); gap: 0.15rem; }
.shell .cast-tab {
  --accent: oklch(0.84 0.085 var(--hue, 78));
  display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0.8rem; border-radius: 0.9rem; border: 1px solid transparent; text-align: left; position: relative;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.shell .cast-tab .medallion { width: 2.4em; height: 2.4em; font-size: var(--t-3); }
.shell .cast-tab:hover { background: rgba(255, 240, 222, 0.05); }
.shell .cast-tab[aria-selected="true"] { background: var(--accent-wash); border-color: var(--accent-line); }
.cast-names { display: grid; min-width: 0; }
.cast-name { font-family: var(--font-display); font-size: var(--t-5); line-height: 1.15; }
.cast-epithet { font-size: var(--t-1); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-here { margin-left: auto; font-size: var(--t-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.programme { --accent: oklch(0.84 0.085 var(--hue, 78)); --accent-line: oklch(0.84 0.085 var(--hue, 78) / 0.5); --accent-wash: oklch(0.84 0.085 var(--hue, 78) / 0.14); padding: 1.8rem 2.2rem 2rem; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.programme-top { display: flex; align-items: center; gap: 1.2rem; }
.programme-name { font-family: var(--font-display); font-size: var(--t-8); line-height: 1.05; letter-spacing: -0.015em; }
.programme-epithet { color: var(--accent); font-size: var(--t-2); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; margin-top: 0.3rem; }
.programme .fact { grid-template-columns: minmax(10em, 13em) 1fr; }
.programme-actions { display: grid; gap: 0.7rem; justify-items: start; margin-top: 1.6rem; }

/* ---- toasts ----------------------------------------------------------------------------------------------------------------- */

.toasts { position: absolute; bottom: 1rem; right: calc(var(--dock-w) + 1rem); width: min(27em, calc(100% - var(--dock-w) - 2rem)); display: grid; gap: 0.5rem; z-index: 8; transition: right 0.3s var(--ease); }
[data-dock="hidden"] .toasts { right: 1rem; }
@media (max-width: 1150px) { .toasts { bottom: 8.5rem; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: 0.8rem; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); animation: rise 0.25s var(--ease); }
.toast[data-level="error"] { border-color: var(--bad); }
.toast[data-level="error"] .icon { color: var(--bad); }
.toast[data-level="warn"] .icon { color: var(--warn); }
.toast[data-level="info"] .icon { color: var(--sys); }
.toast-text { flex: 1; font-size: var(--t-3); }

/* ---- existing banners (index.html) ------------------------------------------------------------------------------------------- */

body.shell-on #problems { left: 1.25rem; top: 13.2rem; bottom: auto; max-width: min(40em, calc(100% - var(--dock-w) - 2.5rem)); z-index: 30; border-radius: 0.8rem; font-family: var(--font-ui); }
body.shell-on #update { left: 1.25rem; top: auto; bottom: 9.5rem; transform: none; max-width: min(34rem, calc(100% - var(--dock-w) - 2.5rem)); z-index: 30; border-radius: 0.8rem; background: var(--glass-strong); border-color: var(--accent-line); font-family: var(--font-ui); }
body.shell-on #update button { flex: none; padding: 0.35em 0.9em; border-radius: 0.5rem; }

/* ---- hidden scrollbars on webkit, unobtrusive otherwise ------------------------------------------------------------------------- */

.shell ::-webkit-scrollbar { width: 10px; height: 10px; }
.shell ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

/* ---- narrow windows: the dock becomes a bottom sheet ---------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  body.shell-on { --dock-w: 100%; }
  .dock { top: auto; left: 0; right: 0; width: auto; height: 58vh; border-left: 0; border-top: 1px solid var(--line-strong); box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.3); }
  [data-dock="hidden"] .dock { transform: translateY(104%); }
  .presence, .stagebar { max-width: calc(100% - 2rem); }
  .stagebar { bottom: calc(58vh + 0.75rem); }
  [data-dock="hidden"] .stagebar { bottom: 1rem; }
  .inspector { left: 0; right: 0; height: 42vh; z-index: 3; }
  .toasts { right: 1rem; bottom: auto; width: calc(100% - 2rem); top: 4.8rem; }
  .picker-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .cast-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .cast-tab { flex: none; }
  .cast-epithet, .cast-here { display: none; }
  .programme { padding: 1.2rem 1.2rem 1.6rem; }
  .programme .fact, .fact { grid-template-columns: 1fr; gap: 0.1rem; }
  body.shell-on #problems { max-width: calc(100% - 2rem); }
}
@media (max-height: 620px) {
  .panel { padding-top: 0.8rem; }
  .picker-head { padding: 1rem 1.4rem 0.8rem; }
  .picker-title { font-size: var(--t-6); }
}

/* ---- preferences ---------------------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .shell *, .shell *::before, .shell *::after, body.shell-on #update {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Places panel (src/shell/view-places.js, APP-04) */
.places .panel-note { margin: 0 0 0.8rem; }
.places-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.5rem; }
.places-list li { display: grid; gap: 0.25rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line, rgba(255,240,222,0.15)); border-radius: 0.7rem; background: var(--surface, #17141b); }
.places-list li[aria-current="true"] { border-color: var(--accent-line, rgba(255,240,222,0.5)); background: var(--accent-wash, rgba(255,240,222,0.08)); }
.places-row { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; justify-content: space-between; }
.places-name { font-weight: 600; }
.places-meta { color: var(--text-dim, #d3cabe); font-size: var(--t-3); }
.places-section-title { font-family: var(--font-display, serif); font-size: var(--t-5); margin: 1.1rem 0 0.5rem; }
.places-problems li { border-color: var(--warn, #e8c277); }
.places-chip { display: inline-block; padding: 0.02em 0.6em; border: 1px solid var(--line-strong, rgba(255,240,222,0.3)); border-radius: 999px; font-size: var(--t-2); color: var(--text-dim, #d3cabe); }

@media (prefers-contrast: more) {
  body.shell-on { --line: rgba(255, 240, 222, 0.38); --line-strong: rgba(255, 240, 222, 0.6); --text-faint: #c9c0b5; --glass: rgba(8, 7, 10, 0.97); }
}

@media (forced-colors: active) {
  .shell .btn, .shell .seg, .shell .tab[aria-selected="true"], .shell .cast-tab[aria-selected="true"], .memory, .entry, .away, .toast, .dock, .inspector, .picker-sheet {
    border: 1px solid CanvasText;
  }
  .shell .tab[aria-selected="true"] { border-width: 0 0 2px; }
  .confbar, .progress { border: 1px solid CanvasText; }
  .shell :focus-visible { outline-color: Highlight; }
}

/* ---- live cognition dock: the world and conversation remain usable above it ---- */
body.shell-on { --cognition-space: 40px; }
body.shell-on #stage { bottom: var(--cognition-space); }
.shell .dock { bottom: var(--cognition-space); }
.shell .stagebar { bottom: calc(var(--cognition-space) + 1rem); }
.shell .dock-tab { bottom: calc(var(--cognition-space) + 1rem); }
.shell .toasts { bottom: calc(var(--cognition-space) + 1rem); }
.shell .inspector { bottom: var(--cognition-space); }
.observatory-dock {
  position: absolute; inset: auto 0 0; z-index: 30; height: 40px;
  display: flex; flex-direction: column; background: var(--ink); color: var(--text);
  border-top: 1px solid var(--sys-line); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.observatory-dock.observatory-auto { height: auto; max-height: calc(100dvh - 110px); }
.observatory-title { margin: 0; color: var(--sys); font-size: var(--t-3); font-weight: 600; letter-spacing: 0.04em; }
.observatory-title:focus-visible { outline: 2px solid var(--sys); outline-offset: 3px; }
.observatory-bar { height: 40px; flex: 0 0 40px; display: flex; align-items: center; gap: 1rem; padding: 0 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.observatory-hint { flex: 1; color: var(--text-faint); font-size: var(--t-2); }
.observatory-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.observatory-body[hidden] { display: none; }
.observatory-auto .observatory-body { flex: 0 1 auto; overflow: clip; overscroll-behavior: none; }
.observatory-auto .obs { height: auto; min-height: 0; overflow: clip; }
.observatory-auto .observatory-mount { overflow: clip; }
.observatory-mount { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.observatory-failure { margin: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--bad); color: var(--bad-text); border-radius: 0.6rem; }
body.shell-modal .sem-bar, body.shell-modal .sem-card, body.shell-modal #pwa-open { visibility: hidden; }
@media (max-width: 1000px) {
  .shell .dock { top: 4.5rem; height: auto; }
  .observatory-hint { display: none; }
  .shell .stagebar { bottom: calc(var(--cognition-space) + 0.5rem); }
}

/* with a narrow stage the overlay toolbar would sit on top of the presence strip: put it underneath */
@media (max-width: 1000px) { body .sem-bar { top: 5.6rem; } body .sem-card { top: 11.5rem; max-height: calc(100vh - 16rem); } }

/* the offline and storage button (src/pwa) floats on the stage; in the app it lives in Settings and only comes out when it has something to say */
body.shell-on #pwa-open:not([data-level="warn"]):not([data-level="critical"]) { display: none; }
body.shell-on #pwa-open { left: 1.25rem; bottom: auto; top: 10.4rem; }
body.shell-on #pwa-panel { left: 1.25rem; bottom: auto; top: 13.2rem; max-height: calc(100vh - 15.2rem); width: min(34rem, calc(100vw - var(--dock-w) - 2.5rem)); }
/* storage that Safari has not marked persistent is true but cannot be acted on from a tab: amber, not an alarm */
body.shell-on #pwa-open[data-level="critical"] { border-color: #e0b04a; background: #101820cc; }
/* the toasts stay above the owner inspector when it is open along the bottom of the stage */
.shell[data-inspector="open"] .toasts { bottom: calc(var(--inspector-h) + 1rem); }
/* "Find Emma": the way for someone who has just arrived to the person on the stage */
.shell .seg-find { background: var(--accent-wash); color: var(--accent-strong); border: 1px solid var(--accent-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.shell .seg-find:hover { background: var(--accent-line); color: var(--on-accent); }
.shell .seg-find[hidden] { display: none; }
body.shell-modal #pwa-open { visibility: hidden; }
/* a long unbroken word (a content address in a fault) must wrap, not push the toast over the dock */
.toast { max-width: 100%; }
.toast-text { min-width: 0; overflow-wrap: anywhere; }

.starters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.shell .starter { padding: 0.4em 0.95em; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-wash); color: var(--text); font-size: var(--t-2); line-height: 1.3; }
.shell .starter:hover { background: var(--accent-line); color: var(--on-accent); }

/* Lifecycle controls remain distinct from conversation, camera and inspection. */
.people-controls { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding-block: .55rem; }
.people-controls select { max-width: 100%; padding: .45rem; color: inherit; background: var(--surface, #202630); border: 1px solid currentColor; border-radius: .3rem; }
.people-controls [role="alert"] { flex-basis: 100%; color: #ffb4a8; }

/* Explicit, scoped data deletion in Settings. */
.data-workspaces { display: flex; flex-direction: column; gap: 0.4em; max-height: 18em; overflow: auto; overscroll-behavior: contain; }
.data-workspace { display: flex; align-items: baseline; gap: 0.6em; overflow-wrap: anywhere; }
.data-workspace input { flex: none; }
.data-confirm { margin-top: 1em; padding: 0.8em; border: 1px solid var(--bad); border-radius: 0.5em; }
.data-confirm input { display: block; width: min(100%, 18em); margin: 0.5em 0; }
.data-danger { border-color: var(--bad); color: var(--bad-text); }