* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--bg-scrollbar-thumb);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scrollbar-thumb-hover);
  background-clip: padding-box;
}

:root {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;

  color-scheme: dark;
  background: var(--bg-root);
  color: var(--fg-main);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;

  background: var(--bg-root);

  overflow: hidden;
}

button,
textarea,
select,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 1px solid var(--bd-focus);
  outline-offset: -1px;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(420px, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr) 34px auto;

  width: 100vw;
  height: 100vh;

  background: var(--bg-shell);
}

.app-shell[data-status-visible="false"] {
  grid-template-rows: minmax(0, 1fr) 0 auto;
}

.app-shell[data-status-visible="false"] .status-bar {
  display: none;
}

.repair-banner {
  grid-column: 1 / -1;
  grid-row: 3;
  max-height: 40vh;
  overflow: auto;
  padding: 8px 12px;
  border-top: 1px solid var(--bd-region);
  background: var(--bg-status);
  color: var(--fg-soft);
  font-size: 0.8125rem;
}

.repair-banner[hidden] { display: none; }
.repair-banner button {
  margin: 2px 4px;
  padding: 4px 8px;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid var(--bd-control);
  background: var(--bg-card);
  cursor: pointer;
}
.repair-banner button:disabled { opacity: 0.6; cursor: wait; }
.repair-matrix { margin: 8px 0; padding-left: 20px; }
.repair-matrix li { padding: 3px 0; overflow-wrap: anywhere; }
.repair-dots { white-space: nowrap; color: var(--fg-main); }
.repair-result { margin: 6px 0 0; overflow-wrap: anywhere; }

.sidebar,
.mantle,
.inspector {
  min-width: 0;
  min-height: 0;
}

.sidebar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  grid-row: 1;

  border-right: 1px solid var(--bd-region);

  background: var(--bg-nav);
}

.house-mark {
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 70px;
  gap: 12px;
  padding: 14px 16px;

  text-align: left;

  border: 0;
  border-bottom: 1px solid var(--bd-section);
  background: var(--bg-clear);
  color: var(--fg-main);

  cursor: pointer;
}

.house-mark:hover,
.house-mark[aria-pressed="true"] {
  background: var(--bg-hover);
}

.house-mark strong,
.house-mark small {
  display: block;
}

.house-mark small,
.eyebrow,
.account-copy small,
.message-meta {
  font-size: 12px;

  color: var(--fg-dim);
}


.house-glyph,
.avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  border: 1px solid var(--bd-avatar);
  border-radius: 50%;

  background: var(--bg-avatar);
}

.house-glyph {
  width: 40px;
  height: 40px;

  font-size: 18px;
}

.avatar {
  width: 38px;
  height: 38px;

  font-weight: 700;
}

.avatar-lg {
  width: 46px;
  height: 46px;

  font-size: 17px;
}

.avatar-user {
  width: 32px;
  height: 32px;
}

.mode-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 4px;
  margin: 12px;
  padding: 4px;
  border: 1px solid var(--bd-region);
  border-radius: 8px;

  background: var(--bg-root);
}

.mode-button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;

  font-size: 12px;

  background: var(--bg-clear);
  color: var(--fg-dim);

  cursor: pointer;
}

.mode-button:hover,
.mode-button.is-active {
  background: var(--bg-active);
  color: var(--fg-active);
}

.subject-list {
  flex: 1;

  padding: 0 8px 12px;

  overflow-y: auto;
}

.house-scope-note {
  display: grid;

  gap: 5px;
  margin: 10px 6px;
  padding: 13px;

  border: 1px solid var(--bd-nav-note);
  border-radius: 8px;
  background: var(--bg-nav-note);
}

.house-scope-note span {
  font-size: 11px;
  line-height: 1.4;

  color: var(--fg-nav-note);
}

.subject-row {
  display: flex;
  align-items: center;

  width: 100%;
  gap: 10px;
  min-height: 58px;
  margin: 2px 0;
  padding: 8px;
  border: 1px solid var(--bd-clear);
  border-radius: 7px;

  text-align: left;

  background: var(--bg-clear);

  cursor: pointer;
}

.subject-row:hover {
  background: var(--bg-hover);
}

.subject-row.is-active {
  border-color: var(--bd-active);

  background: var(--bg-active);
}

.subject-row-copy {
  flex: 1;

  min-width: 0;
}
.subject-row-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 8px;
}

.subject-row-heading strong {
  flex: 1;

  min-width: 0;
}

.subject-row time {
  flex: 0 0 auto;

  font-size: 11px;

  color: var(--fg-ghost);
}


.subject-row strong,
.subject-row small {
  display: block;

  text-overflow: ellipsis;
  white-space: nowrap;

  overflow: hidden;
}

.subject-row small {
  margin-top: 3px;

  color: var(--fg-dim);
}
.avatar-stack {
  position: relative;
  flex: 0 0 auto;
}

.avatar-stack .presence {
  position: absolute;
  right: -1px;
  bottom: -1px;

  box-shadow: 0 0 0 2px var(--bg-nav);
}


.presence {
  width: 8px;
  height: 8px;
  border: 1px solid var(--bd-presence);
  border-radius: 50%;

  background: var(--bg-presence);
}

.presence.is-quiet {
  background: var(--bg-clear);
}

.sidebar-drawer {
  position: relative;
  flex: 1;

  min-height: 0;

  overflow: clip;
}

.drawer-track {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: clip;
}

.drawer-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;

  background: var(--bg-nav);

  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), opacity 200ms ease;
}

.drawer-pane[data-drawer-position="before"] {
  opacity: 0;

  transform: translateX(-108%);
}

.drawer-pane[data-drawer-position="active"] {
  z-index: 2;

  opacity: 1;

  transform: translateX(0);
}

.drawer-pane[data-drawer-position="after"] {
  opacity: 0;

  transform: translateX(108%);
}

.drawer-pane[aria-hidden="true"] {
  pointer-events: none;
}

.sidebar-account {
  padding: 8px;
  border-top: 1px solid var(--bd-section);
}

.account-button {
  display: flex;
  align-items: center;

  width: 100%;
  gap: 9px;
  padding: 8px;
  border: 0;
  border-radius: 7px;

  text-align: left;

  background: var(--bg-clear);

  cursor: pointer;
}

.account-button:hover {
  background: var(--bg-account-hover);
}

.account-copy {
  flex: 1;

  min-width: 0;
}

.account-copy strong,
.account-copy small {
  display: block;
}

.drawer-pane-header {
  display: flex;
  align-items: center;

  gap: 6px;
  min-height: 62px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bd-section);
}

.drawer-pane-header h2 {
  margin: 1px 0 0;

  font-size: 17px;
}

.drawer-back {
  display: grid;
  place-items: center;

  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;

  font-size: 20px;
  line-height: 1;

  background: var(--bg-clear);
  color: var(--fg-overlay-meta);

  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}

.drawer-back:hover {
  background: var(--bg-clear);
  color: var(--fg-active);

  transform: translateX(-2px);
}

.drawer-pane-content {
  flex: 1;

  min-height: 0;
  padding: 12px;

  overflow-y: auto;
}

.account-content {
  padding: 14px;
}

.account-summary {
  display: flex;
  align-items: center;

  gap: 13px;
  padding: 16px;

  border: 1px solid var(--bd-drawer-card);
  border-radius: 9px;
  background: var(--bg-drawer-card);
}

.account-summary .account-avatar {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  font-size: 16px;
  font-weight: 600;

  border: 1px solid var(--bd-avatar);
  border-radius: 50%;
  background: var(--bg-account-avatar);
  color: var(--fg-account-avatar);
}

.account-summary strong,
.account-summary span {
  display: block;
}

.account-summary span {
  margin-top: 4px;

  font-size: 12px;

  color: var(--fg-account-meta);
}

.account-state {
  margin-top: 12px;
  padding: 4px 14px;

  border: 1px solid var(--bd-drawer-well);
  border-radius: 9px;
  background: var(--bg-drawer-well);
}

.account-state > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 39px;

  font-size: 12px;

  border-top: 1px solid var(--bd-drawer-divider);
}

.account-state > div:first-child {
  border-top: 0;
}

.account-state span {
  color: var(--fg-account-state-label);
}

.account-state strong {
  font-weight: 500;

  color: var(--fg-account-state-value);
}

/* The block states its own source, and the Host's persistence reading in full,
   so neither is left buried in the round it came from. */
.account-state-source,
.account-state-note {
  margin: 9px 2px 0;

  font-size: 11px;
  line-height: 1.45;

  color: var(--fg-account-state-label);
}

.account-state-note {
  margin-top: 6px;

  font-size: 10px;
}

.drawer-menu {
  margin-top: 12px;
}

.drawer-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;

  width: 100%;
  gap: 11px;
  padding: 13px;

  text-align: left;

  border: 1px solid var(--bd-drawer-row);
  border-radius: 9px;
  background: var(--bg-drawer-row);

  cursor: pointer;
}

.drawer-menu button:hover,
.drawer-menu button:focus-visible {
  border-color: var(--bd-drawer-row-hover);
  background: var(--bg-drawer-row-hover);
}

.drawer-menu strong,
.drawer-menu small {
  display: block;
}

.drawer-menu strong {
  font-weight: 500;
}

.drawer-menu small {
  margin-top: 4px;

  font-size: 11px;
  line-height: 1.4;

  color: var(--fg-drawer-note);
}

.drawer-menu-icon {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  font-size: 14px;

  border: 1px solid var(--bd-drawer-icon);
  border-radius: 7px;
  color: var(--fg-drawer-icon);
}

.drawer-menu-arrow {
  font-size: 18px;

  color: var(--fg-overlay-faint);
}
.drawer-shortcut {
  display: flex;
  align-items: center;

  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border-top: 1px solid var(--bd-section);

  font-size: 12px;

  color: var(--fg-drawer-note);
}

.drawer-shortcut kbd {
  min-width: 30px;
  padding: 3px 6px;
  border: 1px solid var(--bd-control);
  border-bottom-color: var(--bd-tab-key-edge);
  border-radius: 4px;

  font: inherit;
  text-align: center;

  background: var(--bg-tab-key);
  color: var(--fg-tab-key);
}



.mantle {
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  grid-column: 2;
  grid-row: 1;

  background: var(--bg-mantle);
}



.mantle-tabs {
  display: flex;
  align-items: stretch;

  min-width: 0;
  border-bottom: 1px solid var(--bd-region);

  background: var(--bg-header);

  overflow: hidden;
}

.mantle-context {
  display: flex;
  align-items: center;
  flex: 1;

  min-width: 0;
  gap: 0;
  padding: 0;

  color: var(--fg-soft);
}


.subject-views {
  display: flex;
  align-self: stretch;
  flex: 1;

  min-width: 0;
  padding-right: 2px;
  scroll-padding-inline: 2px;

  overflow-x: auto;
  scrollbar-width: none;
}

.subject-views::-webkit-scrollbar {
  display: none;
}

.subject-views .tab {
  display: flex;
  align-items: center;
  flex: 0 0 auto;

  gap: 6px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid var(--bd-clear);

  font-size: 13px;

  background: var(--bg-clear);
  color: var(--fg-dim);

  cursor: pointer;
}

.subject-views .tab:hover,
.subject-views .tab.is-active {
  color: var(--fg-main);
  background: var(--bg-hover);
}

.subject-views .tab.is-active {
  border-bottom-color: var(--fg-soft);
}

.subject-views kbd {
  min-width: 21px;
  padding: 2px 5px;

  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;

  border: 1px solid var(--bd-control);
  border-bottom-color: var(--bd-tab-key-edge);
  border-radius: 4px;
  background: var(--bg-tab-key);
  color: var(--fg-tab-key);
}


.icon-button {
  display: grid;
  flex: 0 0 44px;
  place-items: center;

  width: 44px;
  border: 0;

  background: var(--bg-clear);

  cursor: pointer;
}

.inspector-toggle {
  flex-basis: auto;
  width: auto;
  padding-inline: 12px;
}

.icon-button:hover {
  background: var(--bg-hover);
}

.sidebar-toggle {
  display: none;
}

.active-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;

  min-height: 0;
  min-width: 0;
}

.subject-header {
  position: relative;
  display: flex;
  align-items: center;

  gap: 12px;
  min-height: 76px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--bd-section);
}

.subject-header-copy {
  flex: 1;

  min-width: 0;
}

.subject-header h1,
.subject-header p {
  margin: 0;
}

.subject-header h1 {
  font-size: 17px;
}

.subject-header p {
  margin-top: 4px;

  font-size: 13px;

  color: var(--fg-dim);
}

.session-toggle {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid var(--bd-section);
  border-radius: 6px;

  font-size: 12px;
  text-align: left;

  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.session-toggle:hover,
.session-toggle[aria-expanded="true"] {
  border-color: var(--bd-active);

  background: var(--bg-hover);
}

.header-verb,
.card-verb {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid var(--bd-section);
  border-radius: 6px;

  font-size: 12px;

  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.header-verb:hover,
.card-verb:hover {
  border-color: var(--bd-active);

  background: var(--bg-hover);
}

.header-chip {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--bd-section);
  border-radius: 999px;

  font-size: 11px;

  color: var(--fg-soft);
}

.access-control {
  display: grid;

  gap: 6px;
  margin-top: 10px;
  justify-items: start;
}

.card-picker {
  display: grid;

  gap: 4px;
  width: 100%;
}

.card-picker button {
  padding: 7px 9px;
  border: 1px solid var(--bd-section);
  border-radius: 6px;

  font-size: 12px;
  text-align: left;

  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.card-picker button:hover {
  border-color: var(--bd-active);

  background: var(--bg-hover);
}

.collection-door {
  margin: 8px 10px;
  padding: 9px;
  border: 1px dashed var(--bd-section);
  border-radius: 7px;

  font-size: 12px;

  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.collection-door:hover {
  border-color: var(--bd-active);

  background: var(--bg-hover);
}

.spirit-form {
  display: flex;

  gap: 6px;
  margin: 8px 10px;
}

.spirit-form input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--bd-section);
  border-radius: 6px;

  font-size: 12px;

  background: var(--bg-clear);
  color: var(--fg-main);
}

.session-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% - 8px);
  right: 24px;
  display: grid;

  gap: 4px;
  width: min(320px, calc(100vw - 28px));
  max-height: min(420px, calc(100vh - 116px));
  padding: 6px;
  border: 1px solid var(--bd-section);
  border-radius: 8px;

  background: var(--bg-context-card);
  box-shadow: 0 12px 28px var(--bg-inspector-dock-shadow);

  overflow-y: auto;
}

.session-menu-action {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--bd-session-durable);
  border-radius: 6px;

  font-size: 12px;
  font-weight: 500;
  text-align: left;

  background: var(--bg-session-durable);
  color: var(--fg-inv);

  cursor: pointer;
}

.session-menu-action:hover {
  border-color: var(--bd-active);
}

.subject-header[data-kind="hallway"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  gap: 9px 12px;
}

.subject-header[data-kind="hallway"] .subject-heading {
  min-width: 0;

  overflow-wrap: break-word;
  word-break: normal;
}

.hallway-statuses {
  grid-column: 1 / -1;

  min-width: 0;
}

.hallway-statuses {
  display: flex;
  flex-wrap: wrap;

  gap: 5px 12px;
}

.hallway-status {
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid var(--bd-subject-status);

  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;

  color: var(--fg-soft);
}

.thread-header-meta {
  display: flex;
  align-items: center;

  gap: 8px;
  min-width: 0;
}

.thread-date {
  font-size: 12px;

  color: var(--fg-dim);
}

/* the record door is a row-anatomy button, not a full-width inspector door */
.subject-header .hallway-record-door {
  width: auto;
  padding: 5px 9px;

  font-size: 12px;
  white-space: nowrap;
}

.subject-header .thread-header-seal {
  grid-column: 1 / -1;

  min-width: 0;
  margin: 0;
  padding-left: 8px;
  border-left: 1px solid var(--bd-subject-status);

  font-size: 11px;
  line-height: 1.4;

  color: var(--fg-soft);
}

.thread-seal {
  display: flex;
  align-items: center;
  align-self: center;

  gap: 10px;
  width: 100%;
  max-width: 760px;

  font-size: 11px;
  line-height: 1.35;
  text-align: center;

  color: var(--fg-soft);
}

.thread-seal::before,
.thread-seal::after {
  flex: 1;

  min-width: 12px;
  border-top: 1px solid var(--bd-section);

  content: "";
}






.presence-glyph {
  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;
  border: 1px solid var(--bd-avatar);

  border-radius: 50%;

  font-size: 11px;
  font-weight: 700;

  background: var(--bg-avatar);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  align-self: flex-start;
  width: 100%;
  max-width: 1040px;
  gap: 18px;
  margin: 0 auto;
}

.overview-hero {
  grid-column: 1 / -1;

  padding: 22px;
}

.overview-hero h2,
.overview-hero p {
  margin: 0;
}

.overview-hero h2 {
  margin-top: 6px;

  font-size: 24px;
  font-weight: 600;
}

.overview-hero > p {
  max-width: 680px;
  margin-top: 8px;

  line-height: 1.55;

  color: var(--fg-project-body);
}

.project-work-state {
  display: grid;
  grid-template-columns: auto 1fr;

  gap: 4px 14px;
  margin-top: 20px;
  padding-top: 16px;

  border-top: 1px solid var(--bd-section);
}

.project-work-state span,
.project-work-state small {
  color: var(--fg-project-note);
}

.project-work-state strong {
  font-weight: 500;
}

.project-work-state small {
  grid-column: 2;

  line-height: 1.45;
}

.project-room-list {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.project-room-list span {
  padding: 5px 8px;

  font-size: 11px;

  border: 1px solid var(--bd-project-room);
  border-radius: 999px;
  background: var(--bg-project-room);
  color: var(--fg-project-room);
}

.project-activity-compact {
  display: grid;

  gap: 9px;
}

.project-activity-compact p {
  display: grid;
  grid-template-columns: 120px 1fr;

  gap: 10px;
  margin: 0;

  font-size: 12px;
}

.project-activity-compact time {
  color: var(--fg-ghost);
}

.project-conversation-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  width: min(100%, 760px);
  gap: 14px;
  margin: 0 auto 8px;
  padding: 13px;

  border: 1px solid var(--bd-project-banner);
  border-radius: 9px;
  background: var(--bg-project-banner);
}

.project-conversation-banner h2,
.project-conversation-banner p {
  margin: 0;
}

.project-conversation-banner h2 {
  margin-top: 3px;

  font-size: 15px;
  font-weight: 500;
}

.project-conversation-banner p,
.project-conversation-banner > span {
  margin-top: 3px;

  font-size: 11px;

  color: var(--fg-project-note);
}

.project-conversation-banner > button {
  padding: 7px 9px;

  border: 1px solid var(--bd-control);
  border-radius: 6px;
  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}


.project-session-list {
  display: grid;

  gap: 9px;
}

.project-session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;

  gap: 16px;
  padding: 15px;

}

.project-session-row.is-selected {
  border-color: var(--bd-project-selected);
  box-shadow: inset 3px 0 var(--bd-project-selected-rail);
}

.project-session-row h3,
.project-session-row p {
  margin: 0;
}

.project-session-row h3 {
  margin-top: 5px;

  font-size: 14px;
  font-weight: 500;
}

.project-session-row p {
  margin-top: 4px;

  font-size: 11px;

  color: var(--fg-project-note);
}

.project-route-type {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--fg-project-body);
}

.project-session-state {
  text-align: right;
}

.project-session-state span,
.project-session-state code {
  display: block;
}

.project-session-state span {
  font-size: 11px;

  color: var(--fg-soft);
}

.project-session-state code {
  margin-top: 4px;

  font-size: 10px;

  color: var(--fg-ghost);
}

.project-session-row > button {
  padding: 8px 12px;

  border: 1px solid var(--bd-project-durable);
  border-radius: 6px;
  background: var(--bg-project-durable);
  color: var(--fg-inv);

  cursor: pointer;
}

.project-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;

  gap: 18px;
  padding: 16px;

}

.project-evidence h3,
.project-evidence p {
  margin: 0;
}

.project-evidence h3 {
  font-size: 13px;
  font-weight: 500;
}

.project-evidence p,
.project-evidence > span {
  margin-top: 4px;

  font-size: 11px;

  color: var(--fg-project-note);
}

.project-evidence > span {
  max-width: 260px;

  text-align: right;
}




.live-boundary {
  display: flex;
  align-items: center;
  align-self: center;

  gap: 10px;
  width: 100%;
  max-width: 760px;

  font-size: 11px;
  line-height: 1.35;
  text-align: center;

  color: var(--fg-dim);
}

.live-boundary::before,
.live-boundary::after {
  flex: 1;

  min-width: 12px;
  border-top: 1px solid var(--bd-section);

  content: "";
}

.timeline-empty {
  display: grid;
  align-self: center;

  gap: 6px;
  width: min(100%, 520px);
  margin: auto;
  padding: 20px;
  border: 1px solid var(--bd-section);
  border-radius: 8px;

  font-size: 12px;
  line-height: 1.5;
  text-align: center;

  background: var(--bg-session-empty);
  color: var(--fg-session-empty);
}

.timeline-empty strong {
  font-size: 13px;

  color: var(--fg-session-empty-head);
}



.specimen-grid,
.specimen-stack {
  align-self: flex-start;

  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.specimen-stack {
  display: grid;

  gap: 18px;
}

.house-record-stack {
  max-width: 1040px;
}

.specimen-card,
.history-event {
  padding: 16px;
}

.specimen-card {
  border: 1px solid var(--bd-card);
  border-radius: 8px;
  background: var(--bg-card);
}

.surface-lead {
  border: 1px solid var(--bd-lead);
  border-radius: 10px;
  background: var(--bg-lead);
}

.surface-row {
  border: 1px solid var(--bd-row);
  border-radius: 8px;
  background: var(--bg-row);
}

.specimen-card h2,
.specimen-card h3,
.specimen-card p {
  margin: 0;
}

.specimen-card h2 {
  margin-top: 5px;

  font-size: 19px;
}

.specimen-card h3 {
  margin-bottom: 10px;

  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--fg-soft);
}

.specimen-card p,
.history-event span,
.plain-list {
  font-size: 12px;
  line-height: 1.55;

  color: var(--fg-specimen-body);
}

.specimen-lead,
.specimen-wide {
  grid-column: 1 / -1;
}

.meter {
  height: 5px;
  margin-top: 13px;
  border-radius: 999px;

  background: var(--bg-specimen-meter-track);

  overflow: hidden;
}

.meter span {
  display: block;

  height: 100%;

  background: var(--bg-specimen-meter-fill);
}

.plain-list {
  margin: 0;
  padding-left: 18px;
}

.history-event {
  display: grid;
  grid-template-columns: 120px minmax(120px, .6fr) 1fr;
  align-items: baseline;

  gap: 14px;
}

.history-event time {
  font-size: 11px;

  color: var(--fg-ghost);
}

.history-event strong {
  font-weight: 400;
}

.recall-query {
  font-size: 12px;

  color: var(--fg-soft);
}

.recall-canon,
.recall-candidate {
  display: grid;

  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--bd-card);
  border-radius: 6px;

  background: var(--bg-card);
}

.recall-canon strong {
  font-size: 12px;
}

.recall-canon small,
.recall-candidate small {
  font-size: 11px;

  color: var(--fg-soft);
}

.recall-candidate-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;

  gap: 10px;
}

.recall-candidate-head strong {
  font-size: 12px;
}

.recall-scope {
  flex: 0 0 auto;

  font-size: 11px;

  color: var(--fg-ghost);
}

.recall-candidate-score {
  display: flex;
  align-items: center;

  gap: 8px;

  font-size: 11px;

  color: var(--fg-soft);
}

.term-meter {
  display: inline-block;

  width: 64px;
  height: 6px;
  border: 1px solid var(--bd-section);
  border-radius: 999px;

  overflow: clip;
}

.term-meter > span {
  display: block;

  height: 100%;

  background: var(--fg-ghost);
}

.durable-entry {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: baseline;

  gap: 4px 14px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--bd-card);
  border-radius: 6px;

  background: var(--bg-card);
}

.durable-entry + .durable-entry {
  margin-top: 6px;
}

.durable-entry:hover,
.durable-entry[aria-current="true"] {
  border-color: var(--bd-presence-row-active);

  background: var(--bg-hover);
}

.durable-entry time {
  font-size: 11px;

  color: var(--fg-ghost);
}

.durable-entry strong {
  font-size: 13px;
}

.durable-entry small {
  grid-column: 2;

  font-size: 11px;

  color: var(--fg-overlay-faint);
}


.session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;

  gap: 14px;
  width: 100%;
  padding: 16px;

  text-align: left;


  cursor: pointer;
}

.session-row:hover,
.session-row[aria-pressed="true"] {
  border-color: var(--bd-active);

  background: var(--bg-hover);
}

.session-row > span,
.session-row small,
.session-row b {
  display: block;
}

.session-row > span:last-child {
  text-align: right;
}

.session-row b {
  font-size: 12px;
  font-weight: 500;
}

.session-row small {
  margin-top: 3px;

  font-size: 11px;

  color: var(--fg-session-note);
}





.action-event {
  align-self: center;

  width: 100%;
  max-width: 760px;
  min-width: 0;
  border: 1px solid var(--bd-section);
  border-radius: 6px;

  background: var(--bg-action-event);
}

.action-event summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  gap: 5px 8px;
  min-width: 0;
  padding: 7px 9px;

  font-size: 11px;
  line-height: 1.4;
  list-style: none;

  color: var(--fg-soft);

  cursor: pointer;
}

.action-event summary::-webkit-details-marker {
  display: none;
}

.action-event summary::before {
  flex: 0 0 12px;

  font-weight: 700;
  text-align: center;

  color: var(--fg-dim);
  content: "+";
}

.action-event[open] summary::before {
  content: "−";
}

.action-event summary:focus-visible {
  outline: 1px solid var(--bd-focus);
  outline-offset: -1px;
}

.action-verb {
  flex: 0 0 auto;

  font-weight: 400;

  color: var(--fg-main);
}

.action-target {
  flex: 1 1 12rem;

  min-width: 0;

  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
  word-break: break-word;

  color: var(--fg-action-target);
}

.action-state {
  flex: 0 0 auto;

  white-space: nowrap;

  color: var(--fg-dim);
}

.action-details {
  max-height: min(34vh, 15rem);
  min-width: 0;
  padding: 9px 11px;
  border-top: 1px solid var(--bd-section);

  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;

  color: var(--fg-soft);

  overflow-y: auto;
}

.message-timeline {
  display: flex;
  flex-direction: column;

  gap: 18px;
  padding: 24px clamp(18px, 5vw, 70px);

  overflow-y: auto;
}


.message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);

  gap: 10px;
  max-width: 760px;
  width: 100%;
}

.message[data-author="Alex"] {
  align-self: flex-end;
  grid-template-columns: minmax(0, 1fr) 34px;
}

.message[data-author="Alex"] .avatar {
  grid-column: 2;
}

.message[data-author="Alex"] .message-body {
  grid-column: 1;
  grid-row: 1;
}

.message .avatar {
  width: 34px;
  height: 34px;

  font-size: 13px;
}

.message-body {
  min-width: 0;
}

.message-meta {
  display: flex;

  gap: 7px;
  margin: 0 0 5px;
}

.message[data-author="Alex"] .message-meta {
  justify-content: flex-end;
}

.message-delivery {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: var(--fg-message-delivery);
}

.message-bubble {
  padding: 11px 13px;
  border: 1px solid var(--bd-message);
  border-radius: 5px 13px 13px 13px;

  line-height: 1.48;

  background: var(--bg-message);

  cursor: pointer;
}

.message[data-author="Alex"] .message-bubble {
  border-radius: 13px 5px 13px 13px;

  background: var(--bg-message-own);
}

.message-bubble:hover,
.message.is-selected .message-bubble {
  border-color: var(--bd-active);
}

/* The bubble reads a small Markdown: paragraphs, lists, code. Every block
   loses its browser margin, then each block after the first sits one line
   below its neighbour. Both rules carry the same specificity on purpose: a
   `> p` reset outranks `> * + *` and silently keeps the gap at zero
   (2026-09-09, the bubble read as one tight block). */
.message-bubble > * {
  margin: 0;
}

.message-bubble > * + * {
  margin-top: 1em;
}

.message-bubble ul,
.message-bubble ol {
  padding-left: 1.3em;
}

.message-bubble code {
  padding: 0 4px;
  border-radius: 4px;

  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;

  background: var(--bg-message-own);
}

.message-bubble pre {
  padding: 9px 11px;
  border: 1px solid var(--bd-message);
  border-radius: 6px;

  overflow-x: auto;

  background: var(--bg-message-own);
}

.message-bubble pre code {
  padding: 0;

  background: none;
}

.message-thinking details {
  margin-bottom: 6px;
  border: 1px solid var(--bd-message);
  background: var(--bg-message);
}

.message-thinking summary {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--fg-soft);
  cursor: pointer;
}

.message-thinking summary:focus-visible {
  outline: 1px solid var(--bd-focus);
  outline-offset: -1px;
}

.message-thinking pre {
  margin: 0;
  padding: 9px 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  color: var(--fg-soft);
}

.message-outcome {
  padding: 2px 6px;
  border: 1px solid var(--bd-active);
  color: var(--fg-active);
}

/* Tools the spirit used on the way to a line, one chip each, in order. */
.message-steps {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;
  margin: 0 0 6px;
  padding: 0;

  list-style: none;
}

.message-steps li {
  display: inline-flex;
  align-items: baseline;

  gap: 6px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--bd-message);
  border-radius: 999px;

  font-size: 11px;

  color: var(--fg-dim);
  background: var(--bg-message);
}

.message-steps li[data-status="running"] {
  border-style: dashed;
}

.message-steps li[data-status="error"] {
  border-color: var(--bd-active);

  color: var(--fg-active);
}

.message-step-tool {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  color: var(--fg-soft);
}

.message-step-summary {
  overflow: hidden;

  max-width: 32ch;

  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A line still forming: same bubble, dashed edge, a blinking cursor after
   the last character. */
.message.is-draft .message-bubble {
  border-style: dashed;

  cursor: default;
}

.message-cursor {
  display: inline-block;

  width: 0.55em;
  height: 1em;
  margin-left: 2px;

  vertical-align: text-bottom;

  background: var(--fg-dim);

  animation: message-cursor-blink 1s steps(2, start) infinite;
}

@keyframes message-cursor-blink {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .message-cursor { animation: none; }
}


.app-shell[data-density="compact"] .message-timeline {
  gap: 10px;
  padding-block: 14px;
}

.app-shell[data-density="compact"] .message-bubble {
  padding: 7px 10px;

  line-height: 1.35;
}

.app-shell[data-density="compact"] .composer textarea {
  min-height: 42px;
  padding-block: 9px;
}

.app-shell[data-text-scale="large"] .message-timeline {
  font-size: 17px;
}

.app-shell[data-measure="wide"] .message,
.app-shell[data-measure="wide"] .live-boundary,
.app-shell[data-measure="wide"] .action-event,
.app-shell[data-measure="wide"] .specimen-grid,
.app-shell[data-measure="wide"] .specimen-stack {
  max-width: 1040px;
}

.app-shell[data-contrast="high"] {
  color: var(--fg-active);
}

.app-shell[data-contrast="high"] .message-bubble,
.app-shell[data-contrast="high"] .context-card,
.app-shell[data-contrast="high"] .specimen-card,
.app-shell[data-contrast="high"] .session-row {
  border-color: var(--bd-active);
}

.app-shell[data-timestamps="false"] .message-meta > span:not(.message-delivery) {
  display: none;
}

.app-shell[data-reduced-motion="true"] *,
.app-shell[data-reduced-motion="true"] *::before,
.app-shell[data-reduced-motion="true"] *::after {
  scroll-behavior: auto !important;
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}
.composer {
  margin: 0 clamp(18px, 5vw, 70px) 20px;
  border: 1px solid var(--bd-control);
  border-radius: 10px;

  background: var(--bg-compose);
}

.composer textarea {
  display: block;

  width: 100%;
  min-height: 52px;
  max-height: 150px;
  padding: 14px;
  border: 0;

  background: var(--bg-clear);
  color: var(--fg-main);

  resize: none;
}

.composer-actions {
  display: flex;
  align-items: center;

  min-height: 48px;
  gap: 10px;
  padding: 7px 8px 8px 14px;

  border-top: 1px solid var(--bd-section);
}

.composer-continuity-group {
  display: flex;
  align-items: center;

  gap: 7px;
}

.composer-feedback {
  display: grid;
  flex: 1;

  min-width: 0;
  gap: 2px;
}

.composer-refusal,
.composer-response-status,
.composer-continuity-status {
  min-width: 0;

  font-size: 12px;

  color: var(--fg-soft);
}

.composer-buttons {
  display: flex;
  align-items: center;

  gap: 7px;
  margin-left: auto;
}

.composer-actions button {
  padding: 7px 14px;
  border: 1px solid var(--bd-composer-send);
  border-radius: 6px;

  background: var(--bg-composer-send);
  color: var(--fg-inv);

  cursor: pointer;
}

.composer-actions .composer-continuity {
  padding-inline: 10px;

  font-size: 11px;

  border-color: var(--bd-control);
  background: var(--bg-clear);
  color: var(--fg-soft);
}

.composer-actions .composer-clear {
  border-color: var(--bd-control);

  background: var(--bg-clear);
  color: var(--fg-soft);
}

.composer-actions .composer-stop {
  border: 2px double var(--bd-composer-stop);

  background: var(--bg-composer-stop);
  color: var(--fg-main);
}

.composer-actions button:disabled {
  border-color: var(--bd-control);

  background: var(--bg-composer-disabled);
  color: var(--fg-composer-disabled);

  cursor: not-allowed;
}

.composer-actions [hidden] {
  display: none !important;
}

.inspector {
  position: relative;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-column: 3;
  grid-row: 1;

  border-left: 1px solid var(--bd-region);

  background: var(--bg-inspector);
}

.app-shell[data-inspector-open="false"] {
  grid-template-columns: 280px minmax(420px, 1fr) 0;
}

.app-shell[data-inspector-open="false"] .inspector {
  display: none;
}

.inspector > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 62px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--bd-inspector-header);
}

.inspector-title,
.eyebrow {
  display: block;
}

.inspector-content {
  padding: 16px;

  overflow-y: auto;
}



.member-group {
  display: grid;

  gap: 5px;
  margin-bottom: 12px;
}

.member-group > strong {
  font-size: 12px;

  color: var(--fg-soft);
}

.presence-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;

  gap: 8px;
  width: 100%;
  padding: 7px;
  border: 1px solid var(--bd-clear);
  border-radius: 6px;

  text-align: left;

  background: var(--bg-clear);

  cursor: pointer;
}

.presence-row:hover,
.presence-row[aria-pressed="true"] {
  border-color: var(--bd-presence-row-active);

  background: var(--bg-hover);
}


.presence-row > span:last-child,
.presence-row small {
  display: block;

  min-width: 0;
}

.presence-row b {
  font-size: 12px;
}

.presence-row small {
  margin-top: 2px;

  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--fg-overlay-faint);

  overflow: hidden;
}

.app-shell[data-hallway="true"] {
  grid-template-columns: 280px minmax(420px, 1fr) 260px;
}

.app-shell[data-hallway="true"] .inspector {
  display: none;
}

.member-dock-scrim {
  display: none;
}

.member-dock {
  grid-column: 3;
  grid-row: 1;

  min-width: 0;
  padding: 18px 12px;

  border-left: 1px solid var(--bd-region);
  background: var(--bg-inspector);

  overflow-y: auto;
}

.member-dock[hidden] {
  display: none;
}

.member-dock > .eyebrow {
  margin-bottom: 16px;
}


.profile-layer {
  position: fixed;
  z-index: 60;
  inset: 0;

  pointer-events: none;
}

.profile-layer[hidden] {
  display: none;
}

.presence-profile {
  position: fixed;
  top: var(--profile-top);
  left: var(--profile-left);

  width: min(315px, calc(100vw - 24px));
  padding: 16px;

  border: 1px solid var(--bd-profile);
  border-radius: 10px;
  background: var(--bg-profile);
  box-shadow: 0 16px 36px var(--bg-profile-shadow);

  pointer-events: auto;
}

.presence-profile > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;

  gap: 11px;
  margin-bottom: 16px;
}

.presence-profile header strong,
.presence-profile header span {
  display: block;
}

.presence-profile header span {
  margin-top: 3px;

  font-size: 11px;

  color: var(--fg-overlay-meta);
}

.presence-profile .profile-glyph {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  margin-top: 0;

  font-size: 14px;
  font-weight: 600;

  border: 1px solid var(--bd-profile-glyph);
  border-radius: 50%;
  background: var(--bg-profile-glyph);
  color: var(--fg-overlay-strong);
}

.presence-profile [data-close-profile] {
  align-self: start;

  width: 28px;
  height: 28px;
  border: 0;

  font-size: 18px;

  background: var(--bg-clear);
  color: var(--fg-overlay-meta);

  cursor: pointer;
}

.presence-profile [data-close-profile]:hover {
  color: var(--fg-active);
}

.context-card {
  margin-bottom: 12px;
  padding: 13px;
  border: 1px solid var(--bd-context-card);
  border-radius: 8px;

  background: var(--bg-context-card);
}

.context-card h2,
.context-card h3,
.context-card p {
  margin: 0;
}

.context-card h2 {
  margin-bottom: 4px;

  font-size: 16px;
}

.context-card h3 {
  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--fg-soft);
}

.context-card p,
.context-list {
  font-size: 13px;
  line-height: 1.5;

  color: var(--fg-context-body);
}

.context-list {
  display: grid;
  grid-template-columns: auto 1fr;

  gap: 7px 10px;
  margin: 0;
}

.context-list dt {
  color: var(--fg-ghost);
}

.context-list dd {
  margin: 0;

  text-align: right;
}

.membership-card {
  margin-bottom: 12px;
  padding: 13px;
  border: 1px solid var(--bd-context-card);
  border-radius: 8px;

  background: var(--bg-context-card);
}

.membership-card h2,
.membership-card h3,
.membership-card p {
  margin: 0;
}

.membership-card h2 {
  margin-bottom: 4px;

  font-size: 16px;
}

.membership-card h3 {
  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--fg-soft);
}

.membership-card p,
.membership-card .context-list {
  font-size: 13px;
  line-height: 1.5;

  color: var(--fg-context-body);
}

.state-section {
  display: grid;

  gap: 8px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--bd-card);
  border-radius: 8px;

  background: var(--bg-card);
}

.state-section > .eyebrow {
  color: var(--fg-soft);
}

.status-bar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  grid-column: 1 / -1;
  grid-row: 2;

  gap: 2px;
  min-width: 0;
  padding: 0 7px;
  border-top: 1px solid var(--bd-region);

  background: var(--bg-status);

  overflow-x: auto;
}

.status-bar > button {
  display: flex;
  align-items: center;
  flex: 0 0 auto;

  gap: 6px;
  height: 27px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;

  font-size: 12px;

  background: var(--bg-clear);
  color: var(--fg-dim);

  cursor: pointer;
}

.status-compact {
  display: none;
}

.status-bar > button:hover,
.status-bar > button[aria-expanded="true"] {
  background: var(--bg-hover);
  color: var(--fg-main);
}

.status-dot {
  width: 7px;
  height: 7px;
  border: 1px solid var(--bd-status-dot);
  border-radius: 50%;
}

/* The dot carries the source state the chip's words already name. */
.status-dot[data-tone="steady"] {
  border-color: var(--fg-main);

  background: var(--fg-main);
}

.status-dot[data-tone="attention"] {
  border-color: var(--bd-active);

  background: var(--bg-clear);
}

.status-dot[data-tone="quiet"] {
  border-color: var(--bd-control);

  background: var(--bg-clear);
}



.status-popover {
  position: fixed;
  z-index: 50;
  bottom: 40px;
  left: 290px;

  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--bd-popover);
  border-radius: 8px;

  background: var(--bg-popover);
  box-shadow: 0 16px 42px var(--bg-popover-shadow);
}

.status-popover h2,
.status-popover p {
  margin: 0;
}

.status-popover h2 {
  margin-bottom: 7px;

  font-size: 15px;
}

.status-popover p {
  font-size: 13px;
  line-height: 1.45;

  color: var(--fg-overlay-meta);
}

.status-popover-source {
  margin-top: 9px;

  font-size: 11px;
}

.status-popover .card-verb {
  display: block;

  margin-top: 10px;
}

.settings-content {
  padding: 0 0 18px;
}

.settings-identity {
  display: flex;
  align-items: center;

  gap: 13px;
  padding: 20px 18px;

  border-bottom: 1px solid var(--bd-section);
  background: var(--bg-drawer-row);
}

.settings-identity .settings-avatar {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-top: 0;

  font-size: 16px;
  font-weight: 600;

  border: 1px solid var(--bd-avatar);
  border-radius: 50%;
  background: var(--bg-account-avatar);
  color: var(--fg-account-avatar);
}

.settings-identity strong,
.settings-identity span {
  display: block;
}

.settings-identity span {
  margin-top: 4px;

  font-size: 12px;

  color: var(--fg-account-meta);
}

.settings-group {
  margin: 18px 14px 0;
  padding: 16px;

  border: 1px solid var(--bd-drawer-well);
  border-radius: 9px;
  background: var(--bg-drawer-card);
}

.settings-group h3 {
  margin: 0 0 15px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--fg-overlay-meta);
}

.settings-group label {
  display: grid;

  gap: 8px;
  margin-top: 14px;

  font-size: 13px;

  color: var(--fg-settings-label);
}

.settings-group h3 + label {
  margin-top: 0;
}

.settings-group select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 7px;

  border: 1px solid var(--bd-settings-control);
  background: var(--bg-settings-control);
  color: var(--fg-overlay-strong);

  cursor: pointer;
}

.settings-group select:hover,
.settings-group select:focus-visible {
  border-color: var(--bd-settings-control-focus);
  background: var(--bg-settings-control-hover);
}

.settings-group .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 48px;
  gap: 16px;
  margin: 0;
  padding: 10px 0;

  border-top: 1px solid var(--bd-drawer-divider);

  cursor: pointer;
}

.settings-group h3 + .setting-row {
  border-top: 0;
}

.setting-row > span,
.setting-row b,
.setting-row small {
  display: block;
}

.setting-row b {
  font-size: 13px;
  font-weight: 500;

  color: var(--fg-setting-title);
}

.setting-row small {
  margin-top: 4px;

  font-size: 11px;
  line-height: 1.35;

  color: var(--fg-setting-note);
}

.settings-group input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;

  accent-color: var(--bg-setting-check);

  cursor: pointer;
}




.overview-grid button,
.specimen-card [data-open-interface-settings] {
  margin-top: 13px;
  padding: 7px 10px;

  border: 1px solid var(--bd-control);
  border-radius: 6px;
  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.library-list {
  display: grid;

  gap: 9px;
}

.library-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;

  width: 100%;
  gap: 13px;
  padding: 15px;

  text-align: left;

  color: inherit;

  cursor: pointer;
}

.library-row:hover,
.library-row[aria-pressed="true"] {
  border-color: var(--bd-active);
  background: var(--bg-hover);
}

.library-row h3,
.library-row p {
  margin: 0;
}

.library-row h3 {
  font-size: 13px;
  font-weight: 500;
}

.library-row p {
  margin-top: 5px;

  font-size: 11px;
  line-height: 1.45;

  color: var(--fg-library-note);
}

.library-id {
  min-width: 44px;
  padding: 4px 6px;

  font-size: 10px;
  text-align: center;

  border: 1px solid var(--bd-library-id);
  border-radius: 5px;
  color: var(--fg-library-id);
}

.context-doors {
  display: grid;

  gap: 7px;
}

.context-doors h3 {
  margin-bottom: 1px;
}

.inspector-door {
  width: 100%;
  padding: 8px 10px;

  text-align: left;

  border: 1px solid var(--bd-control);
  border-radius: 6px;
  background: var(--bg-context-door);
  color: var(--fg-context-door);

  cursor: pointer;
}

.inspector-door:hover {
  border-color: var(--bd-active);
  background: var(--bg-hover);
}

.context-library-selection [data-clear-library-selection] {
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;

  border: 1px solid var(--bd-control);
  border-radius: 6px;
  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.context-selection {
  border-style: dashed;
}

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;

  white-space: nowrap;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.subject-row-tail {
  display: flex;
  align-items: center;
  flex: 0 0 auto;

  gap: 6px;
}

.hallway-counts {
  display: inline-flex;
  align-items: center;

  gap: 4px;
}

.attention-count {
  display: inline-grid;
  place-items: center;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--bd-control);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  background: var(--bg-tab-key);
  color: var(--fg-tab-key);
}

.attention-count.is-targeted {
  border-color: var(--bd-focus);
  background: var(--bg-active);
  color: var(--fg-active);
}

.bell-toggle .hallway-counts {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.bell-toggle .attention-count {
  position: absolute;
  top: 2px;

  min-width: 16px;
  height: 16px;
  padding-inline: 4px;

  font-size: 9px;
}

.bell-toggle .attention-count.is-unread {
  right: 2px;
}

.bell-toggle .attention-count.is-targeted {
  left: 2px;

  border-width: 2px;
  border-radius: 4px;
}

.message-recipient {
  padding-left: 7px;
  border-left: 1px solid var(--bd-section);

  color: var(--fg-soft);
}

.bell-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bell-toggle {
  position: relative;

  width: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  padding: 0;
  border-left: 1px solid var(--bd-section);

  color: var(--fg-soft);
}

.bell-toggle[data-has-attention="true"] {
  background: var(--bg-active);
  color: var(--fg-active);
}

.bell-layer {
  position: fixed;
  z-index: 100;
  inset: 0;

  display: grid;
  align-items: start;
  justify-items: center;

  padding: clamp(18px, 8vh, 72px) 12px 12px;

  background: var(--bg-switcher-scrim);
}

.bell-layer[hidden] {
  display: none;
}

.hallway-inbox {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;

  width: min(620px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 48px));

  overflow: clip;

  border: 1px solid var(--bd-switcher);
  border-radius: 12px;
  background: var(--bg-switcher);
  box-shadow: 0 24px 80px var(--bg-switcher-shadow);
}

.hallway-inbox > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-width: 0;
  padding: 14px 12px 14px 18px;
  border-bottom: 1px solid var(--bd-region);
}

.hallway-inbox > header h2 {
  margin: 2px 0 0;

  font-size: 17px;
}

.hallway-inbox-summary {
  margin: 0;
  padding: 11px 18px;
  border-bottom: 1px solid var(--bd-section);

  font-size: 12px;

  color: var(--fg-soft);
}

.hallway-inbox-list {
  min-height: 0;
  padding: 8px;

  overflow-y: auto;
}

.hallway-inbox-item {
  margin: 0;
}

.hallway-inbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  width: 100%;
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid var(--bd-clear);
  border-radius: 8px;

  text-align: left;

  background: var(--bg-clear);
  color: var(--fg-main);

  cursor: pointer;
}

.hallway-inbox-row:hover,
.hallway-inbox-row:focus-visible {
  outline: none;
  border-color: var(--bd-active);
  background: var(--bg-active);
}

.hallway-inbox-copy {
  display: grid;

  min-width: 0;
  gap: 4px;
}

.hallway-inbox-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  min-width: 0;
  gap: 10px;
}

.hallway-inbox-heading strong,
.hallway-inbox-heading small,
.hallway-inbox-preview {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.hallway-inbox-heading small,
.hallway-inbox-preview,
.hallway-inbox-verb {
  font-size: 11px;

  color: var(--fg-dim);
}

.hallway-inbox-preview {
  display: block;
}

.hallway-inbox-verb {
  grid-column: 2 / -1;

  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hallway-inbox-empty {
  display: grid;
  place-items: center;

  min-height: 180px;
  gap: 5px;
  padding: 24px;

  text-align: center;
}

.hallway-inbox-empty span {
  font-size: 12px;

  color: var(--fg-dim);
}

.hallway-inbox > footer {
  padding: 10px 18px;
  border-top: 1px solid var(--bd-section);

  font-size: 11px;
  line-height: 1.45;

  color: var(--fg-dim);
}

.mechanics-settings-door {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;

  width: 100%;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--bd-control);
  border-radius: 7px;

  text-align: left;

  background: var(--bg-clear);
  color: var(--fg-main);

  cursor: pointer;
}

.mechanics-settings-door:hover,
.mechanics-settings-door:focus-visible {
  outline: none;
  border-color: var(--bd-active);
  background: var(--bg-active);
}

.mechanics-settings-door b,
.mechanics-settings-door small {
  display: block;
}

.mechanics-settings-door b {
  font-size: 13px;
}

.mechanics-settings-door small {
  margin-top: 5px;

  font-size: 11px;
  line-height: 1.45;

  color: var(--fg-dim);
}

.mechanics-settings-door > span:last-child {
  font-size: 22px;

  color: var(--fg-soft);
}

.mechanics-observatory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  width: min(100%, 1040px);
  margin: 0 auto;
  gap: 16px;
}

.mechanics-lead {
  display: grid;

  gap: 5px;
  padding: 4px 2px 17px;
  border-bottom: 1px solid var(--bd-region);
}

.mechanics-lead h2 {
  margin: 0;

  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.1;
}

.mechanics-lead > p {
  max-width: 720px;
  margin: 2px 0 0;

  color: var(--fg-soft);
}

.mechanics-snapshot-status {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
  margin-top: 9px;
}

.mechanics-snapshot-status > span,
.mechanics-row-flags > span {
  padding: 4px 7px;
  border: 1px solid var(--bd-section);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.mechanics-snapshot-status [data-tone="attention"],
.mechanics-row-flags [data-tone="attention"] {
  border-color: var(--bd-active);
  background: var(--bg-active);
  color: var(--fg-active);
}

.mechanics-snapshot-status [data-tone="steady"],
.mechanics-row-flags [data-tone="steady"] {
  background: var(--bg-tab-key);
  color: var(--fg-tab-key);
}

.mechanics-snapshot-status [data-tone="quiet"],
.mechanics-row-flags [data-tone="quiet"] {
  color: var(--fg-dim);
}

.insula-observation {
  display: grid;

  gap: 12px;
  padding: 14px;

  border: 1px solid var(--bd-section);
  border-radius: 8px;
  background: var(--bg-clear);
}

.insula-observation-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;

  gap: 16px;
}

.insula-observation-lead h3 {
  margin: 2px 0 0;

  font-size: 17px;
}

.insula-observation-lead p {
  max-width: 620px;
  margin: 5px 0 0;

  color: var(--fg-soft);
}

.insula-observation-lead .mechanics-snapshot-status {
  justify-content: flex-end;

  margin-top: 0;
}

.insula-observation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 8px;
}

.insula-observation-channel {
  display: grid;
  align-content: start;

  min-width: 0;
  gap: 7px;
  padding: 11px;

  border: 1px solid var(--bd-section);
  border-radius: 6px;
  background: var(--bg-region);
}

.insula-observation-channel > span {
  font-size: 10px;
  font-weight: 700;

  color: var(--fg-dim);
}

.insula-observation-channel > strong {
  font-size: 15px;
  line-height: 1.2;
}

.insula-observation-channel > p {
  margin: 0;

  font-size: 11px;
  line-height: 1.45;

  color: var(--fg-soft);
}

.pulse-block {
  display: grid;

  gap: 6px;
}

.pulse-block-lead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 4px 10px;
  padding-inline: 2px;
}

.pulse-block-lead h4,
.pulse-block-lead h5 {
  margin: 0;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--fg-dim);
}

.pulse-block-lead small {
  font-size: 10px;

  color: var(--fg-dim);
}

.pulse-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  border-top: 1px solid var(--bd-section);
}

.pulse-status {
  display: grid;
  justify-items: end;

  gap: 8px;
}

.pulse-status .mechanics-snapshot-status {
  justify-content: flex-end;

  margin-top: 0;
}

.mechanics-row-body dl.pulse-receipt-detail {
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr);
}

/* The lane drilldown: one drawer under the open lane, carrying whatever the
   Host answered about its spans — including the refusal. */
.pulse-trace {
  display: grid;

  gap: 6px;
  padding: 10px;
  border: 1px solid var(--bd-row);
  border-radius: 6px;

  background: var(--bg-row);
}

.pulse-trace p {
  margin: 0;

  font-size: 11px;
  line-height: 1.45;

  color: var(--fg-dim);
}

.pulse-trace-spans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  border-top: 1px solid var(--bd-section);
}

.pulse-trace-span {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(160px, 0.8fr) auto;
  align-items: center;

  gap: 8px;
  min-width: 0;
  padding: 8px 4px;
  border-bottom: 1px solid var(--bd-section);
}

/* Slots 1 and 3 stack their instrument above the rest of the page: same column,
   so each reads as one page rather than two widths. */
.house-board,
.house-sediment {
  align-self: flex-start;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

/* A named absence, where rows would be. Never styled to look like a row. */
.board-absence,
.sediment-absence {
  margin: 0;
  padding: 10px 2px;

  font-size: 12px;

  color: var(--fg-dim);
}

/* A superseded or archived body wears this before its first line: after the
   first line, the operator has already read it as the current record. */
.sediment-authority {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--bd-active);
  border-radius: 8px;

  font-size: 11px;
  font-weight: 700;

  background: var(--bg-active);
  color: var(--fg-active);
}

/* Memories and lessons stand beside each other where there is room for both,
   and a shelf with one door takes the whole width rather than half of it. */
.sediment-shelves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;

  gap: 18px;
}

.sediment-fixtures {
  padding-top: 6px;
  border-top: 1px solid var(--bd-section);
}

/* The fixture chip rides the row's own metadata line: the section header states
   it in markup, and this repeats it per row so no single row can be read out of
   its shelf and mistaken for something a door sent. */
[data-fixture-shelf] .durable-entry small::after {
  content: " · fixture, not from a door";

  color: var(--fg-active);
}

/* The evidence drawer is a second disclosure inside a quest row, so its own
   rows get narrower columns than a top-level row can afford. */
.evidence-drawer > summary {
  padding: 7px 2px;
  border: 1px solid transparent;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;

  color: var(--fg-soft);

  cursor: pointer;
}

.evidence-drawer > summary::-webkit-details-marker {
  display: none;
}

.evidence-drawer > summary:hover {
  color: var(--fg-active);
}

/* Focus rides the border edge, the same contract the row species use: a
   background or shadow is stripped under forced colors and would leave a
   keyboard user with no focus position at all on this disclosure. */
.evidence-drawer > summary:focus-visible {
  outline: none;
  border-color: var(--bd-focus);

  color: var(--fg-active);
}

.evidence-drawer-body {
  display: grid;

  gap: 12px;

  padding-bottom: 4px;
}

/* One message inside a Hallway drawer. The body is another room's own prose, so
   it wears no House chrome that could let it read as panel copy. */
.hallway-message {
  display: grid;

  gap: 4px;

  padding: 8px 2px;
  border-top: 1px solid var(--bd-section);
}

.hallway-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  gap: 8px;
  margin: 0;

  font-size: 11px;

  color: var(--fg-ghost);
}

.hallway-message-meta strong {
  font-size: 12px;

  color: var(--fg-soft);
}

.hallway-message-body {
  margin: 0;

  font-size: 12px;
  line-height: 1.45;

  color: var(--fg-dim);
}

/* Chips ride a line that already exists here — the drawer's summary and the
   message's own metadata row — instead of taking one of their own. */
.hallway-drawer > summary .mechanics-row-flags,
.hallway-message .mechanics-row-flags {
  display: inline-flex;
  justify-content: start;

  vertical-align: baseline;
}

.mechanics-row.evidence-row > summary {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.45fr) auto;
}

.mechanics-row.sediment-row > summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.sediment-row > summary .mechanics-row-title {
  grid-column: 1 / -1;
}

.sediment-row > summary .mechanics-row-flags {
  justify-content: start;
}

.mechanics-row-body dl.evidence-receipt-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mechanics-controls {
  display: grid;

  gap: 10px;
}

.mechanics-search {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(220px, 1fr);
  align-items: center;

  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--bd-section);
  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  background: var(--bg-clear);
  color: var(--fg-soft);
}

.mechanics-search input {
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--bd-control);
  border-radius: 6px;

  background: var(--bg-clear);
  color: var(--fg-main);
}

.mechanics-search input:hover,
.mechanics-search input:focus-visible {
  outline: none;
  border-color: var(--bd-active);
  background: var(--bg-active);
}

.mechanics-categories {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
  padding-bottom: 3px;
}

.mechanics-categories button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;

  min-height: 34px;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--bd-control);
  border-radius: 6px;

  font-size: 11px;

  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.mechanics-categories button:hover,
.mechanics-categories button:focus-visible,
.mechanics-categories button[aria-pressed="true"] {
  outline: none;
  border-color: var(--bd-active);
  background: var(--bg-active);
  color: var(--fg-active);
}

.mechanics-categories small {
  display: inline-grid;
  place-items: center;

  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;

  background: var(--bg-tab-key);
  color: var(--fg-tab-key);
}

/* Durable shelf search — same instrument vocabulary as the observatory controls,
   named for its own anatomy so mechanics rules stay mechanics-owned. */
.shelf-controls {
  display: grid;

  gap: 10px;
}

.shelf-search {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(220px, 1fr);
  align-items: center;

  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--bd-section);
  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  background: var(--bg-clear);
  color: var(--fg-soft);
}

.shelf-search input {
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--bd-control);
  border-radius: 6px;

  background: var(--bg-clear);
  color: var(--fg-main);
}

.shelf-search input:hover,
.shelf-search input:focus-visible {
  outline: none;
  border-color: var(--bd-active);
  background: var(--bg-active);
}

.shelf-marks {
  display: flex;

  gap: 6px;
  padding-bottom: 3px;
  overflow-x: auto;
}

.shelf-marks button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;

  min-height: 34px;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--bd-control);
  border-radius: 6px;

  font-size: 11px;

  background: var(--bg-clear);
  color: var(--fg-soft);

  cursor: pointer;
}

.shelf-marks button:hover,
.shelf-marks button:focus-visible,
.shelf-marks button[aria-pressed="true"] {
  outline: none;
  border-color: var(--bd-active);
  background: var(--bg-active);
  color: var(--fg-active);
}

.shelf-status {
  font-size: 11px;
  color: var(--fg-dim);
}

[data-durable-results] {
  display: contents;
}

.mechanics-results-status {
  margin: -3px 2px 0;

  font-size: 11px;

  color: var(--fg-dim);
}

.mechanics-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  border-top: 1px solid var(--bd-region);
}

.mechanics-row {
  min-width: 0;
  border-bottom: 1px solid var(--bd-section);
}

.mechanics-row > summary {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(180px, 0.8fr) auto;
  align-items: center;

  gap: 14px;
  padding: 13px 10px;

  list-style: none;

  cursor: pointer;
}

.mechanics-row > summary::-webkit-details-marker {
  display: none;
}

.mechanics-row > summary:hover,
.mechanics-row > summary:focus-visible,
.mechanics-row[open] > summary {
  outline: none;
  background: var(--bg-active);
}

.mechanics-row-title {
  display: grid;

  min-width: 0;
  gap: 3px;
}

.mechanics-row-title strong,
.mechanics-row-title small,
.mechanics-row code {
  overflow-wrap: anywhere;
}

.mechanics-row-title strong {
  font-size: 13px;
}

.mechanics-row-title small {
  font-size: 10px;

  color: var(--fg-dim);
}

.mechanics-row code {
  font-size: 11px;

  color: var(--fg-soft);
}

.mechanics-row-value {
  display: grid;

  min-width: 0;
  gap: 3px;
}

.mechanics-row-value small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--fg-dim);
}

.mechanics-row-flags {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;

  gap: 5px;
}

.mechanics-row-body {
  display: grid;

  gap: 12px;
  padding: 1px 10px 15px;
}

.mechanics-row-body dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  margin: 0;
  border: 1px solid var(--bd-section);
  border-radius: 6px;
}

.mechanics-row-body dl > div {
  min-width: 0;
  padding: 9px;
  border-left: 1px solid var(--bd-section);
}

.mechanics-row-body dl > div:first-child {
  border-left: 0;
}

.mechanics-row-body dt {
  margin-bottom: 4px;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--fg-dim);
}

.mechanics-row-body dd {
  margin: 0;

  font-size: 11px;
  overflow-wrap: anywhere;
}

.mechanics-row-body p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;

  color: var(--fg-soft);
}

.mechanics-empty {
  display: grid;
  place-items: center;

  min-height: 180px;
  gap: 5px;
  padding: 24px;

  text-align: center;
}

.mechanics-empty span,
.mechanics-observatory > footer {
  font-size: 11px;

  color: var(--fg-dim);
}

.mechanics-observatory > footer {
  padding-top: 4px;
}

.switcher-layer {
  position: fixed;
  z-index: 100;
  inset: 0;

  display: grid;
  align-items: start;
  justify-items: center;

  padding: clamp(24px, 10vh, 96px) 12px 12px;

  background: var(--bg-switcher-scrim);
}

.switcher-layer[hidden] {
  display: none;
}

.house-switcher {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;

  width: min(680px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 120px));

  overflow: hidden;

  border: 1px solid var(--bd-switcher);
  border-radius: 12px;
  background: var(--bg-switcher);
  box-shadow: 0 24px 80px var(--bg-switcher-shadow);
}

.switcher-query {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  gap: 12px;
  padding: 14px 16px;

  border-bottom: 1px solid var(--bd-region);
}

.switcher-query > span {
  font-size: 20px;

  color: var(--fg-soft);
}

.switcher-query input {
  min-width: 0;

  font-size: 16px;

  border: 0;
  outline: 0;
  background: var(--bg-clear);
  color: var(--fg-main);
}

.switcher-query input::placeholder {
  color: var(--fg-dim);
}

.switcher-query kbd,
.switcher-shortcut {
  padding: 4px 7px;

  font-size: 12px;
  white-space: nowrap;

  border: 1px solid var(--bd-tab-key-edge);
  border-radius: 5px;
  background: var(--bg-tab-key);
  color: var(--fg-tab-key);
}

.switcher-results {
  display: grid;
  align-content: start;

  gap: 4px;
  padding: 8px;

  max-height: min(560px, calc(100dvh - 220px));

  overflow-y: auto;
}

.switcher-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  width: 100%;
  gap: 12px;
  padding: 11px 12px;

  text-align: left;

  border: 1px solid var(--bd-clear);
  border-radius: 7px;
  background: var(--bg-clear);
  color: var(--fg-main);

  cursor: pointer;
}

.switcher-result:hover,
.switcher-result.is-active {
  border-color: var(--bd-active);
  background: var(--bg-active);
}

.switcher-result[aria-disabled="true"] {
  cursor: not-allowed;
}

.switcher-verb {
  min-width: 48px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--fg-soft);
}

.switcher-copy {
  display: grid;

  min-width: 0;
  gap: 3px;
}

.switcher-copy strong,
.switcher-copy small {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher-copy strong {
  font-size: 14px;
}

.switcher-copy small {
  font-size: 14px;

  color: var(--fg-dim);
}

.switcher-result[aria-disabled="true"] .switcher-copy strong,
.switcher-result[aria-disabled="true"] .switcher-verb {
  color: var(--fg-dim);
}

.switcher-empty {
  display: grid;
  place-items: center;

  min-height: 160px;
  padding: 24px;

  font-size: 14px;
  text-align: center;

  color: var(--fg-dim);
}

.switcher-footer {
  padding: 10px 16px;

  font-size: 14px;

  border-top: 1px solid var(--bd-section);
  color: var(--fg-dim);
}

/* ===== Focus contract — keyboard only, composed per species ===== */

/* rows focus through their own anatomy: hover fill + focus edge, no outline ring */
.subject-row:focus-visible,
.session-row:focus-visible,
.session-toggle:focus-visible,
.header-verb:focus-visible,
.card-verb:focus-visible,
.card-picker button:focus-visible,
.collection-door:focus-visible,
.session-menu-action:focus-visible,
.durable-entry:focus-visible,
.library-row:focus-visible,
.presence-row:focus-visible,
.inspector-door:focus-visible,
.drawer-menu button:focus-visible {
  outline: none;
  border-color: var(--bd-focus);
}

/* tabs speak underline, never a box */
.tab:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--bd-focus);
}

/* the two naked divs get edges */
.message-timeline:focus-visible {
  outline: none;
  box-shadow: inset 2px 0 0 var(--bd-focus);
}

.message-bubble:focus-visible {
  outline: 1px solid var(--bd-focus);
  outline-offset: -1px;
}

/* large chrome buttons: fill shift beats a lone box */
.house-mark:focus-visible,
.account-button:focus-visible {
  outline: 1px solid var(--bd-focus);
  outline-offset: -1px;
  background: var(--bg-drawer-row-hover);
}

/* switcher query: quiet bottom hairline instead of silence */
.switcher-query input:focus-visible {
  outline: none;
  box-shadow: inset 0 -1px 0 var(--bd-focus);
}

@media (forced-colors: active) {
  .tab:focus-visible,
  .message-timeline:focus-visible,
  .switcher-query input:focus-visible,
  .evidence-row > summary:focus-visible,
  .sediment-row > summary:focus-visible,
  .session-menu {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }

  .session-menu {
    box-shadow: none;
  }
}

@media (max-width: 1050px) {
  .app-shell,
  .app-shell[data-inspector-open="false"] {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .inspector {
    position: fixed;
    z-index: 25;
    top: 0;
    right: 0;
    bottom: 34px;

    width: min(340px, calc(100vw - 50px));

    box-shadow: -16px 0 40px var(--bg-inspector-shadow);
  }

  .app-shell[data-inspector-open="false"] .inspector {
    display: none;
  }

  .app-shell[data-hallway="true"] {
    grid-template-columns: 260px minmax(0, 1fr) 190px;
  }

  .member-dock {
    grid-column: 3;
  }

  .shelf-marks {
    flex-wrap: wrap;

    overflow-x: visible;
  }

  .mechanics-observatory {
    gap: 13px;
  }

  .mechanics-lead {
    padding-top: 0;
  }

  .insula-observation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mechanics-search,
  .shelf-search {
    grid-template-columns: 1fr;

    gap: 7px;
  }

  .mechanics-row > summary {
    grid-template-columns: minmax(0, 1fr);

    gap: 8px;
    padding-inline: 6px;
  }

  .mechanics-row-flags {
    justify-content: start;
  }

  .mechanics-row-body {
    padding-inline: 6px;
  }

  .mechanics-row-body dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanics-row-body dl > div {
    border-top: 1px solid var(--bd-section);
  }

  .mechanics-row-body dl > div:nth-child(-n + 2) {
    border-top: 0;
  }

  .mechanics-row-body dl > div:nth-child(odd) {
    border-left: 0;
  }

  .subject-header[data-kind="hallway"] {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);


    gap: 8px 10px;
  }

  .subject-header[data-kind="hallway"] .thread-header-meta {
    grid-column: 1 / -1;
  }

  .subject-views .tab {
    justify-content: center;
    flex: 1 1 0;

    min-width: 0;
    gap: 4px;
    padding-inline: 4px;

    font-size: 12px;
  }

  .subject-views kbd {
    min-width: 19px;
    padding-inline: 4px;

    font-size: 9px;
  }
}

@media (max-width: 700px) {
  .app-shell,
  .app-shell[data-inspector-open="false"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 34px;
    left: 0;

    width: min(290px, calc(100vw - 46px));

    box-shadow: 16px 0 40px var(--bg-nav-shadow);

    transform: translateX(-102%);
    transition: transform 140ms ease;
  }

  .app-shell[data-sidebar-open="true"] .sidebar {
    transform: translateX(0);
  }

  .mantle {
    grid-column: 1;
  }

  .app-shell[data-hallway="true"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .insula-observation-lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .insula-observation-lead .mechanics-snapshot-status {
    justify-content: flex-start;
  }

  .insula-observation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pulse-trace-span {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .member-dock-scrim {
    position: absolute;
    z-index: 19;
    inset: 44px 0 34px;

    display: block;
    border: 0;

    background: var(--bg-switcher-scrim);

    cursor: pointer;
  }

  .member-dock-scrim[hidden] {
    display: none;
  }

  .member-dock {
    position: absolute;
    z-index: 20;
    top: 44px;
    right: 0;
    bottom: 34px;

    display: block;
    width: min(320px, calc(100vw - 46px));
    padding: 14px 12px;

    box-shadow: -10px 0 30px var(--bg-inspector-dock-shadow);

    pointer-events: none;
    transform: translateX(102%);
    transition: transform 140ms ease;
  }

  .member-dock[aria-hidden="true"] {
    display: none;
  }

  .app-shell[data-member-dock-open="true"] .member-dock {
    display: block;
    pointer-events: auto;
    transform: translateX(0);
  }


  .member-dock .presence-row {
    grid-template-columns: 28px minmax(0, 1fr);

    padding: 6px;
  }

  .member-dock .member-group > strong,
  .member-dock > .eyebrow {
    font-size: 10px;
  }


  .presence-profile {
    width: calc(100vw - 136px);
  }
  .sidebar-toggle {
    display: grid;
  }


  .hallway-inbox {
    max-height: calc(100dvh - 24px);
  }

  .hallway-inbox-row {
    gap: 8px;
    padding: 10px;
  }

  .subject-header {
    padding: 12px 14px;
  }


  .session-menu {
    right: 14px;
  }


  .action-state {
    white-space: normal;
  }

  .message-timeline {
    padding: 18px 13px;
  }


  .mantle-context {
    padding: 0;
  }

  .subject-views {
    padding-right: 6px;
    scroll-padding-right: 6px;
  }

  .bell-toggle {
    margin-left: 4px;
  }

  .subject-views .tab {
    padding: 0 8px;
  }


  .specimen-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-event {
    grid-template-columns: 1fr;

    gap: 4px;
  }

  .durable-entry {
    grid-template-columns: 1fr;
  }

  .durable-entry small {
    grid-column: 1;
  }


  .session-row {
    grid-template-columns: 1fr;

    gap: 6px;
  }

  .session-row > span:last-child {
    text-align: left;
  }

  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-hero {
    padding: 17px;
  }

  .project-work-state {
    grid-template-columns: 1fr;
  }

  .project-work-state small {
    grid-column: 1;
  }

  .project-activity-compact p {
    grid-template-columns: 1fr;

    gap: 3px;
  }

  .project-conversation-banner {
    grid-template-columns: 1fr auto;

    width: 100%;
  }

  .project-conversation-banner > button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .project-session-row,
  .project-evidence {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .project-session-state,
  .project-evidence > span {
    max-width: none;

    text-align: left;
  }

  .project-session-row > button {
    width: 100%;
  }

  .composer-actions {
    gap: 6px;
    padding-left: 8px;
  }

  .composer-continuity-group,
  .composer-buttons {
    gap: 5px;
  }

  .composer-actions .composer-continuity {
    padding-inline: 6px;

    font-size: 10px;
  }


  .app-shell[data-hallway="true"] .composer {
    margin-right: 12px;
  }

  .app-shell[data-hallway="true"] .composer-actions {
    padding-right: 6px;
  }

  .app-shell[data-hallway="true"] .composer-actions button {
    padding-inline: 7px;

    font-size: 10px;
  }

  .app-shell[data-hallway="true"] .composer-actions .composer-continuity {
    padding-inline: 4px;

    font-size: 9px;
  }

  .composer {
    margin: 0 12px 12px;
  }

  .status-bar {
    justify-content: space-between;

    gap: 0;
    padding-inline: 4px;

    overflow-x: hidden;
  }

  .status-bar > button {
    gap: 3px;
    padding-inline: 4px;

    font-size: 10px;
  }

  .status-full {
    display: none;
  }

  .status-compact {
    display: inline;
  }

  .status-popover {
    left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }
}


/* Public Pages wrapper: disclosure sits outside the product anatomy. */
body.public-demo {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);

  height: 100dvh;
  min-height: 0;

  overflow: hidden;
}

.public-demo-disclosure {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;
  gap: 8px;
  padding: 6px 16px;

  font-size: 11px;
  line-height: 1.35;

  border-bottom: 1px solid var(--bd-section);
  background: var(--bg-status);
  color: var(--fg-soft);
}

.public-demo-disclosure strong,
.public-demo-disclosure a {
  color: var(--fg-main);
}

.public-demo-disclosure a:focus-visible {
  outline: 1px solid var(--bd-focus);
  outline-offset: 3px;
}

.public-demo .app-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

@media (max-width: 700px) {
  .public-demo-disclosure {
    justify-content: flex-start;
    flex-wrap: wrap;

    min-height: 38px;
    padding: 6px 12px;

    font-size: 10px;
  }
}