:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f3f0;
  --bg-warm: #faf9f7;
  --panel: rgba(250, 249, 247, 0.96);
  --panel-soft: #f5f4f1;
  --panel-tint: #eeedea;
  --surface: #faf9f7;
  --surface-raised: #ffffff;
  --surface-muted: #f0efec;
  --surface-overlay: rgba(250, 249, 247, 0.96);
  --chrome: rgba(250, 249, 247, 0.92);
  --ink: #1c1c1a;
  --muted: #5f5f5b;
  --line: rgba(28, 28, 26, 0.12);
  --line-strong: rgba(28, 28, 26, 0.22);
  --accent: #2a2a28;
  --accent-hover: #0f0f0e;
  --blue: var(--ink);
  --teal: var(--accent);
  --rust: #9a4a3f;
  --success: #2d6347;
  --green: var(--success);
  --amber: #8f5718;
  --bad: #a32820;
  --red: #c7443a;
  --red-dark: #8f2a22;
  --red-soft: #b85a52;
  --grey-rail: #e8e7e3;
  --shadow: rgba(28, 28, 26, 0.12);
  --shadow-soft: rgba(28, 28, 26, 0.06);
  --placeholder: #8a8984;
  --code-text: #2a3336;
  --code-bg: #f0efec;
  --brand-accent: #a84840;
  --input-bg: rgba(255, 255, 255, 0.88);
  --control-bg: rgba(255, 255, 255, 0.78);
  --focus-ring: rgba(28, 28, 26, 0.22);
  --backdrop: rgba(28, 28, 26, 0.32);
  --modal-backdrop: rgba(18, 24, 28, 0.42);
  --status-green-bg: rgba(45, 99, 71, 0.08);
  --status-green-border: rgba(45, 99, 71, 0.24);
  --status-green-surface: rgba(240, 247, 243, 0.95);
  --status-amber-bg: rgba(143, 87, 24, 0.08);
  --status-amber-border: rgba(143, 87, 24, 0.24);
  --status-amber-surface: rgba(252, 247, 238, 0.92);
  --status-bad-bg: rgba(163, 40, 32, 0.08);
  --status-bad-border: rgba(163, 40, 32, 0.24);
  --status-bad-surface: rgba(252, 246, 245, 0.95);
  --status-red-surface: var(--status-bad-surface);
  --status-neutral-bg: rgba(74, 95, 112, 0.08);
  --status-neutral-border: rgba(74, 95, 112, 0.22);
  --status-neutral-surface: rgba(244, 247, 249, 0.94);
  --status-neutral-text: #4a5f70;
  --status-blue-surface: rgba(242, 246, 250, 0.94);
  --product-accent: rgba(42, 42, 40, 0.18);
  --product-surface: rgba(245, 244, 241, 0.96);
  --select-focus: rgba(42, 42, 40, 0.42);
  --gradient-body: linear-gradient(180deg, rgba(250, 249, 247, 0.82), rgba(244, 243, 240, 0.92) 34rem);
  --gradient-panel: linear-gradient(180deg, rgba(250, 249, 247, 0.97), rgba(245, 244, 241, 0.99) 15rem);
  --gradient-composer: linear-gradient(180deg, rgba(250, 249, 247, 0.82), rgba(250, 249, 247, 0.98));
  --grid-line: rgba(28, 28, 26, 0.035);
  --primary-start: #2a2a28;
  --primary-end: #121211;
  --active-bg: #2a2a28;
  --active-text: #faf9f7;
  --msg-user-bg: rgba(245, 244, 241, 0.98);
  --msg-assistant-bg: rgba(250, 249, 247, 0.98);
  --hover-fill: rgba(28, 28, 26, 0.04);
  --pill-bg: rgba(28, 28, 26, 0.04);
  --terminal-bg: rgba(22, 24, 26, 0.94);
  --terminal-text: #ecebe6;
  --live-board-graphite: #202321;
  --live-board-ink: #ecebe6;
  --live-board-secondary: #a8aaa6;
  --live-board-line: rgba(236, 235, 230, 0.14);
  --live-working: #6aab82;
  --live-queued: #9c9b96;
  --live-waiting: #82a6c2;
  --live-review: #a58ad4;
  --live-blocked: #d4a05a;
  --live-failed: #e07066;
  --live-complete: #65b8a6;
  --project-drawer-width: min(720px, calc(100vw - 44px));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141413;
  --bg-warm: #1a1a18;
  --panel: rgba(30, 30, 28, 0.96);
  --panel-soft: #232321;
  --panel-tint: #282826;
  --surface: #1e1e1c;
  --surface-raised: #262624;
  --surface-muted: #2c2c2a;
  --surface-overlay: rgba(30, 30, 28, 0.96);
  --chrome: rgba(26, 26, 24, 0.94);
  --ink: #e8e7e3;
  --muted: #9c9b96;
  --line: rgba(232, 231, 227, 0.12);
  --line-strong: rgba(232, 231, 227, 0.22);
  --accent: #d4d3cf;
  --accent-hover: #f0efec;
  --blue: var(--ink);
  --teal: var(--accent);
  --rust: #c9786a;
  --success: #6aab82;
  --green: var(--success);
  --amber: #d4a05a;
  --bad: #e07066;
  --red: #e07066;
  --red-dark: #b8544c;
  --red-soft: #c9786a;
  --grey-rail: #2a2a28;
  --shadow: rgba(0, 0, 0, 0.35);
  --shadow-soft: rgba(0, 0, 0, 0.22);
  --placeholder: #73726d;
  --code-text: #d8d7d2;
  --code-bg: #232321;
  --brand-accent: #c9786a;
  --input-bg: rgba(38, 38, 36, 0.92);
  --control-bg: rgba(38, 38, 36, 0.88);
  --focus-ring: rgba(232, 231, 227, 0.28);
  --backdrop: rgba(0, 0, 0, 0.52);
  --modal-backdrop: rgba(0, 0, 0, 0.62);
  --status-green-bg: rgba(106, 171, 130, 0.12);
  --status-green-border: rgba(106, 171, 130, 0.28);
  --status-green-surface: rgba(32, 42, 36, 0.92);
  --status-amber-bg: rgba(212, 160, 90, 0.12);
  --status-amber-border: rgba(212, 160, 90, 0.28);
  --status-amber-surface: rgba(42, 36, 28, 0.92);
  --status-bad-bg: rgba(224, 112, 102, 0.12);
  --status-bad-border: rgba(224, 112, 102, 0.28);
  --status-bad-surface: rgba(42, 28, 28, 0.92);
  --status-red-surface: var(--status-bad-surface);
  --status-neutral-bg: rgba(130, 155, 174, 0.12);
  --status-neutral-border: rgba(130, 155, 174, 0.28);
  --status-neutral-surface: rgba(28, 36, 42, 0.92);
  --status-neutral-text: #a9bdcc;
  --status-blue-surface: rgba(30, 38, 45, 0.92);
  --product-accent: rgba(212, 211, 207, 0.22);
  --product-surface: rgba(34, 34, 32, 0.96);
  --select-focus: rgba(212, 211, 207, 0.38);
  --gradient-body: linear-gradient(180deg, rgba(26, 26, 24, 0.92), rgba(20, 20, 19, 0.98) 34rem);
  --gradient-panel: linear-gradient(180deg, rgba(30, 30, 28, 0.97), rgba(26, 26, 24, 0.99) 15rem);
  --gradient-composer: linear-gradient(180deg, rgba(30, 30, 28, 0.82), rgba(30, 30, 28, 0.98));
  --grid-line: rgba(232, 231, 227, 0.045);
  --primary-start: #3a3a38;
  --primary-end: #222221;
  --active-bg: #d4d3cf;
  --active-text: #141413;
  --msg-user-bg: rgba(34, 34, 32, 0.98);
  --msg-assistant-bg: rgba(30, 30, 28, 0.98);
  --hover-fill: rgba(232, 231, 227, 0.06);
  --pill-bg: rgba(232, 231, 227, 0.06);
  --terminal-bg: rgba(10, 11, 12, 0.96);
  --terminal-text: #ecebe6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--gradient-body), var(--bg);
}

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

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

button {
  cursor: pointer;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.launch-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--gradient-body), var(--bg);
  animation: launch-screen-out 240ms ease 1.25s forwards;
}

.launch-screen.is-hidden {
  display: none;
}

.launch-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(430px, 100vw);
  min-height: min(360px, 100dvh);
}

.launch-title {
  display: grid;
  justify-items: center;
  gap: 12px;
  animation: launch-title-in-out 1.25s ease forwards;
}

.launch-title img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.launch-title span {
  color: var(--ink);
  font-size: 22px;
  font-weight: 850;
}

@keyframes launch-screen-out {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes launch-title-in-out {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(.97);
  }
  24%,
  74% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px) scale(.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-screen,
  .launch-title {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(14px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
  background: var(--chrome);
  backdrop-filter: blur(14px);
}

.app-menu {
  position: relative;
  z-index: 90;
  justify-self: start;
  flex: 0 0 auto;
}

.app-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 46px;
  height: 46px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: var(--control-bg);
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}

.app-menu summary::-webkit-details-marker {
  display: none;
}

.menu-scampi-icon {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.menu-label {
  font-size: 12px;
  line-height: 1;
}

.menu-caret {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  transform: translateY(1px);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  display: grid;
  gap: 8px;
  width: min(260px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 20px 48px var(--shadow);
}

.menu-panel a,
.menu-panel button {
  width: 100%;
  justify-content: flex-start;
  color: var(--blue);
  background: var(--panel-soft);
  text-align: left;
  text-decoration: none;
}

.room-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: var(--control-bg);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.room-link:hover,
.room-link:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.mobile-command-rail {
  display: none;
}

.command-drawer-backdrop {
  display: none;
}

.session-drawer {
  position: fixed;
  top: 76px;
  left: 0;
  z-index: 30;
  width: min(340px, calc(100vw - 44px));
  transform: translateX(-100%);
  transition: transform 180ms ease;
}

.session-drawer.is-open {
  transform: translateX(0);
}

.session-drawer-tab {
  position: absolute;
  top: 18px;
  right: -42px;
  width: 42px;
  min-height: 122px;
  padding: 9px 6px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 0 8px 8px 0;
  border-left: 0;
  background: var(--surface-raised);
  box-shadow: 8px 12px 24px rgba(23, 23, 23, 0.08);
}

.session-drawer .sessions-panel {
  min-height: min(620px, calc(100dvh - 94px));
  max-height: calc(100dvh - 94px);
  overflow: hidden;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 24px 68px var(--shadow);
}

.project-drawer,
.workspace-drawer,
.artifact-drawer {
  position: fixed;
  top: 76px;
  right: 0;
  z-index: 30;
  width: var(--project-drawer-width);
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.project-drawer.is-open,
.workspace-drawer.is-open,
.artifact-drawer.is-open {
  transform: translateX(0);
}

.project-drawer-tab,
.workspace-drawer-tab,
.artifact-drawer-tab {
  position: absolute;
  top: 18px;
  left: -42px;
  width: 42px;
  min-height: 122px;
  padding: 9px 6px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 8px 0 0 8px;
  border-right: 0;
  background: var(--surface-overlay);
  box-shadow: -8px 12px 24px var(--shadow-soft);
}

.workspace-drawer {
  width: var(--project-drawer-width);
}

.workspace-drawer-tab {
  top: 150px;
  min-height: 148px;
}

.artifact-drawer {
  top: 224px;
  right: auto;
  left: 0;
  width: min(420px, calc(100vw - 44px));
  transform: translateX(-100%);
}

.artifact-drawer.is-open {
  transform: translateX(0);
}

.artifact-drawer-tab {
  right: -42px;
  left: auto;
  min-height: 132px;
  border-right: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--surface-raised);
  box-shadow: 8px 12px 24px rgba(23, 23, 23, 0.08);
}

.project-drawer .project-board-panel,
.workspace-drawer .workspace-panel,
.artifact-drawer .artifact-panel {
  min-height: min(620px, calc(100dvh - 94px));
  max-height: calc(100dvh - 94px);
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 24px 68px var(--shadow);
}

.artifact-drawer .artifact-panel {
  overflow: auto;
  border-radius: 0 8px 8px 0;
}

.project-drawer .project-board-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspace-drawer .workspace-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-drawer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.workspace-drawer-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(320px, 1fr);
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}

.project-board-list {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.mobile-project-picker {
  display: grid;
  gap: 6px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
}

.mobile-project-picker label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-project-picker select {
  width: 100%;
  min-height: 40px;
  background: var(--input-bg);
  font-weight: 750;
}

.project-drawer .project-board-list {
  display: none;
}

.workspace-tree-pane,
.workspace-preview-pane {
  min-width: 0;
  min-height: 0;
}

.workspace-tree-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-search-results {
  flex: 0 0 auto;
  max-height: 150px;
  overflow: auto;
}

.workspace-tree {
  flex: 1 1 auto;
  max-height: none;
  margin: 0;
}

.workspace-preview-pane {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.workspace-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.workspace-preview-head h3 {
  margin: 2px 0 4px;
  color: var(--blue);
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.workspace-doc-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

@media (max-width: 760px) {
  .workspace-preview-head {
    flex-direction: column;
  }

  .workspace-doc-actions {
    justify-content: flex-start;
  }
}

.workspace-file-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.workspace-media-preview {
  display: grid;
  min-height: 220px;
  margin-top: 10px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.workspace-image-preview {
  display: block;
  width: 100%;
  max-height: min(68vh, 760px);
  object-fit: contain;
  background: #fff;
}

.workspace-pdf-preview {
  display: block;
  width: 100%;
  min-height: min(68vh, 760px);
  border: 0;
  background: #fff;
}

.workspace-media-status {
  margin: 0;
  padding: 18px;
  text-align: center;
}

.msg-text-block-group {
  min-width: 0;
}

.msg-workspace-media {
  display: grid;
  width: min(100%, 760px);
  min-height: 160px;
  margin: 10px 0 4px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.msg-workspace-media img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}

.msg-workspace-media iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
  background: #fff;
}

.msg-workspace-media .media-preview-error {
  margin: 0;
  padding: 16px;
  color: var(--muted);
  text-align: center;
}

.project-drawer-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.project-drawer-detail-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.project-drawer-detail-head h3 {
  margin: 2px 0 4px;
  color: var(--blue);
  font-size: 18px;
  line-height: 1.15;
}

.project-drawer-doc-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.project-drawer-doc-actions[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .project-drawer-detail-head {
    flex-direction: column;
  }

  .project-drawer-doc-actions {
    justify-content: flex-start;
  }
}

.project-drawer-detail .project-detail-body {
  min-height: 0;
  overflow: auto;
  padding-top: 10px;
  padding-right: 4px;
}

.artifact-drawer .artifact-panel {
  min-height: min(560px, calc(100dvh - 242px));
  max-height: calc(100dvh - 242px);
}

.artifact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.artifact-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.artifact-card.is-unavailable {
  border-color: rgba(169, 31, 22, 0.22);
  background: var(--status-bad-surface);
}

.artifact-preview,
.artifact-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 76px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.artifact-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.artifact-body strong,
.artifact-body span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.artifact-body strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.artifact-body span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.artifact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.danger-link {
  color: var(--bad);
}

.panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-lockup {
  display: grid;
  justify-items: center;
  min-width: 0;
  gap: 3px;
  text-align: center;
}

.brand-subtitle {
  margin: 0;
  color: var(--red-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.mini-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent), var(--red-dark));
  color: white;
  font-size: 23px;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 0 14px 30px rgba(159, 29, 21, 0.18);
}

.scampi-avatar {
  padding: 3px;
  object-fit: cover;
  background: var(--surface-raised);
  border: 1px solid rgba(23, 23, 23, 0.1);
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  color: var(--blue);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1;
}

h2 {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.top-actions,
.file-actions,
.composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.top-actions {
  justify-self: end;
}

.icon-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle {
  position: relative;
}

.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon {
  position: absolute;
  inset: 0;
  margin: auto;
}

.theme-toggle .theme-icon-moon {
  fill: currentColor;
  stroke: none;
}

[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .theme-icon-moon,
:root:not([data-theme]) .theme-toggle .theme-icon-moon {
  display: none;
}

.layout {
  display: grid;
  grid-template-columns: minmax(430px, 1fr);
  gap: 14px;
  height: calc(100vh - 85px);
  height: calc(100dvh - 85px);
  min-height: 0;
  padding: 14px 58px;
}

@media (min-width: 800px) {
  .layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  }
}

@media (min-width: 1180px) {
  .layout {
    grid-template-columns: minmax(0, 1.78fr) minmax(320px, 1fr);
  }
}

@media (min-width: 1280px) {
  .layout {
    width: 100%;
    max-width: 1540px;
    margin-inline: auto;
    padding-inline: 24px;
  }

  body.project-drawer-open .layout {
    max-width: min(1540px, calc(100vw - var(--project-drawer-width) - 76px));
    margin-left: 24px;
    margin-right: auto;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 14px;
}

.panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 44px var(--shadow-soft);
}

.command-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-color: var(--line-strong);
  background: var(--gradient-panel), var(--panel);
  box-shadow: 0 24px 68px var(--shadow);
}

.live-work-board {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(236, 235, 230, 0.18);
  border-radius: 8px;
  color: var(--live-board-ink);
  background: var(--live-board-graphite);
}

.live-work-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 1px solid var(--live-board-line);
}

.live-work-eyebrow {
  margin: 0 0 5px;
  color: var(--live-board-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.live-work-head h2,
.live-work-detail h3 {
  margin: 0;
  color: var(--live-board-ink);
  letter-spacing: -.02em;
}

.live-work-head h2 {
  font-size: 20px;
}

#live-work-freshness {
  margin: 6px 0 0;
  color: var(--live-board-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.live-work-pressure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 7px;
  border: 1px solid var(--live-board-line);
  border-radius: 999px;
  color: var(--live-board-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.live-work-pressure::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-queued);
  content: "";
}

.live-work-pressure[data-level="normal"]::before { background: var(--live-working); }
.live-work-pressure[data-level="elevated"]::before { background: var(--live-blocked); }
.live-work-pressure[data-level="high"]::before { background: var(--live-failed); }

.live-work-head-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.live-work-head-actions a,
.live-work-head-actions button,
.live-work-detail button,
.live-work-retry {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--live-board-line);
  border-radius: 6px;
  color: var(--live-board-ink);
  background: rgba(236, 235, 230, 0.05);
  font-size: 11px;
  font-weight: 780;
  text-decoration: none;
}

.live-work-head-actions button {
  display: none;
}

.live-work-head-actions a:hover,
.live-work-head-actions a:focus-visible,
.live-work-head-actions button:hover,
.live-work-head-actions button:focus-visible,
.live-work-detail button:hover,
.live-work-detail button:focus-visible,
.live-work-retry:hover,
.live-work-retry:focus-visible {
  border-color: rgba(236, 235, 230, 0.42);
  background: rgba(236, 235, 230, 0.1);
  outline: 0;
}

.live-work-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--live-board-line);
}

.live-work-counts div {
  min-width: 0;
}

.live-work-counts div + div {
  padding-left: 10px;
  border-left: 1px solid var(--live-board-line);
}

.live-work-counts dt {
  min-height: 26px;
  color: var(--live-board-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.live-work-counts dd {
  margin: 4px 0 0;
  color: var(--live-board-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.live-work-status {
  min-height: 36px;
  margin: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--live-board-line);
  color: var(--live-board-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.live-work-status[data-tone="warning"] {
  color: var(--live-blocked);
}

.live-work-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-color: rgba(236, 235, 230, .22) transparent;
}

.live-work-rows,
.live-work-group-rows {
  display: grid;
}

.live-work-group h3 {
  margin: 0;
  padding: 13px 18px 8px;
  color: var(--live-board-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.live-work-row {
  --live-row-state: var(--live-queued);
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
  padding: 12px 16px 12px 18px;
  border: 0;
  border-top: 1px solid var(--live-board-line);
  border-left: 3px solid var(--live-row-state);
  border-radius: 0;
  color: var(--live-board-ink);
  background: transparent;
  text-align: left;
}

.live-work-row:hover,
.live-work-row:focus-visible {
  background: rgba(236, 235, 230, 0.055);
}

.live-work-row:focus-visible {
  z-index: 1;
  outline: 2px solid var(--live-board-ink);
  outline-offset: -3px;
}

.live-work-row.state-working { --live-row-state: var(--live-working); }
.live-work-row.state-waiting { --live-row-state: var(--live-waiting); }
.live-work-row.state-review { --live-row-state: var(--live-review); }
.live-work-row.state-blocked { --live-row-state: var(--live-blocked); }
.live-work-row.state-failed { --live-row-state: var(--live-failed); }
.live-work-row.state-complete { --live-row-state: var(--live-complete); }
.live-work-row.is-stale { --live-row-state: var(--live-failed); }

.live-work-row-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.live-work-agent {
  color: var(--live-board-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.live-work-agent-name {
  min-width: 0;
  overflow: hidden;
  color: var(--live-board-secondary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-work-state {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--live-row-state);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
}

.live-work-state-mark {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.live-work-title,
.live-work-step {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-work-title {
  font-size: 14px;
  letter-spacing: -.01em;
}

.live-work-step {
  color: var(--live-board-secondary);
  font-size: 11px;
}

.live-work-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 11px;
  color: var(--live-board-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.live-work-recent {
  border-top: 1px solid var(--live-board-line);
}

.live-work-recent summary {
  padding: 13px 18px;
  color: var(--live-board-secondary);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.live-work-recent summary:focus-visible {
  outline: 2px solid var(--live-board-ink);
  outline-offset: -3px;
}

.live-work-empty {
  display: grid;
  gap: 7px;
  min-height: 180px;
  align-content: center;
  justify-items: start;
  padding: 28px 18px;
  color: var(--live-board-secondary);
}

.live-work-empty strong {
  color: var(--live-board-ink);
  font-size: 15px;
}

.live-work-empty span {
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.5;
}

.live-work-empty.is-error strong {
  color: var(--live-failed);
}

.live-work-placeholder {
  height: 88px;
  border-bottom: 1px solid var(--live-board-line);
  border-left: 3px solid var(--live-board-secondary);
  background: linear-gradient(110deg, transparent 10%, rgba(236, 235, 230, .035) 44%, transparent 70%);
}

.live-work-detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  min-height: 0;
  flex-direction: column;
  color: var(--live-board-ink);
  background: var(--live-board-graphite);
}

.live-work-detail.hidden {
  display: none;
}

.live-work-detail > header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 1px solid var(--live-board-line);
}

.live-work-detail h3 {
  font-size: 17px;
}

#live-work-detail-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.live-work-detail-list {
  display: grid;
  grid-template-columns: minmax(90px, .38fr) minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--live-board-line);
}

.live-work-detail-list dt,
.live-work-detail-list dd {
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--live-board-line);
  overflow-wrap: anywhere;
}

.live-work-detail-list dt {
  color: var(--live-board-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-work-detail-list dd {
  color: var(--live-board-ink);
  font-size: 11px;
  line-height: 1.45;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

#chat-meta {
  margin-top: 5px;
}

.context-health {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.context-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.context-health-row > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.context-health-row strong {
  font-size: 13px;
}

.context-health-row span {
  color: var(--muted);
  font-size: 12px;
}

.context-health-track {
  height: 4px;
  overflow: hidden;
  background: var(--line);
}

.context-health-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--success);
  transition: width 180ms ease;
}

.context-health[data-tone="watch"] .context-health-track span,
.context-health[data-tone="warning"] .context-health-track span {
  background: var(--amber);
}

.context-health[data-tone="danger"] .context-health-track span {
  background: var(--bad);
}

.chat-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chat-title-row h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.title-edit-button {
  flex: 0 0 auto;
  width: 30px;
  min-height: 30px;
  padding: 6px;
  border-radius: 8px;
}

.title-edit-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.chat-title-form {
  display: grid;
  grid-template-columns: minmax(160px, 420px) auto auto;
  gap: 6px;
  margin-top: 6px;
}

.chat-title-form input,
.chat-title-form button {
  min-height: 32px;
  padding-block: 6px;
}

.chat-title-form button {
  padding-inline: 10px;
}

.status-pill,
.token-pill,
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--ink);
  background: var(--pill-bg);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.chat-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 220px;
  max-width: 48%;
}

.model-select,
.thinking-select,
.agent-select {
  min-height: 30px;
  max-width: 260px;
  padding: 4px 28px 4px 9px;
  color: var(--ink);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 750;
}

.thinking-select {
  max-width: 138px;
}

.token-pill {
  color: var(--blue);
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.token-pill:empty {
  display: none;
}

input,
textarea,
select,
button,
.buttonlike {
  border: 1px solid var(--line);
  border-radius: 8px;
}

input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--input-bg);
}

textarea {
  min-height: 104px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
}

select {
  min-height: 38px;
}

button,
.buttonlike {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--blue);
  background: var(--control-bg);
  font-weight: 750;
  text-decoration: none;
}

button:hover,
.buttonlike:hover,
.list-item.active {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--hover-fill);
}

button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.primary-action {
  min-height: 42px;
  padding-inline: 18px;
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-start), var(--primary-end));
  box-shadow: 0 12px 26px var(--shadow-soft);
}

.primary-action:hover {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-hover), var(--primary-end));
}

.stop-action {
  min-height: 42px;
  padding-inline: 14px;
  color: var(--bad);
  border-color: rgba(159, 58, 58, 0.32);
  background: var(--status-red-surface);
}

.stop-action:hover {
  color: var(--bad);
  border-color: rgba(159, 58, 58, 0.48);
  background: color-mix(in srgb, var(--status-red-surface) 78%, white);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.buttonlike:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 70vh;
  overflow: auto;
}

.list.compact {
  max-height: 28vh;
}

.list-item,
.shortcut,
.tree-file {
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.list-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--panel-soft);
}

.session-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.session-open {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.session-open:hover {
  color: inherit;
  background: transparent;
}

.session-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  width: 100%;
}

.session-row-top time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.session-open small {
  margin-top: 5px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.session-item.is-continuation {
  border-color: rgba(114, 92, 48, 0.34);
}

.session-pin {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
}

.session-pin.is-pinned {
  color: var(--green);
  border-color: rgba(47, 111, 78, 0.28);
  background: var(--status-green-surface);
}

.list-item strong,
.shortcut strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.list-item span,
.shortcut span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.sessions-panel {
  background: var(--surface-raised);
}

.sessions-panel .list {
  max-height: calc(100dvh - 228px);
}

.session-checkpoints {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.checkpoint-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.checkpoint-strip-head .checkpoint-empty-hint {
  overflow: hidden;
  font-weight: 500;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkpoint-strip-list {
  display: grid;
  gap: 5px;
}

.checkpoint-strip-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 6px;
  text-align: left;
  background: var(--control-bg);
}

.checkpoint-strip-list time {
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.checkpoint-strip-list span {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-muted);
}

.empty-state strong {
  color: var(--blue);
}

.empty-state span {
  font-size: 12px;
  line-height: 1.35;
}

.empty-state .buttonlike,
.empty-state button {
  justify-self: start;
}

.messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 4px 4px 10px 0;
  scroll-behavior: smooth;
}

.msg {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface-raised);
}

.msg.user {
  border-color: var(--line-strong);
  background: var(--msg-user-bg);
}

.msg.assistant {
  border-color: var(--line-strong);
  background: var(--surface-overlay);
}

.msg-content {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.msg-text a {
  color: var(--blue);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.msg-text a.workspace-file-link {
  display: inline;
  color: var(--green);
}

.msg-text a.workspace-file-link:hover,
.msg-text a.workspace-file-link:focus-visible {
  color: var(--active-text);
  background: var(--active-bg);
  outline: 2px solid transparent;
}

.msg.pending .msg-content::after {
  content: "";
  display: inline-block;
  justify-self: start;
  width: .45em;
  height: .45em;
  margin-top: -6px;
  border-radius: 999px;
  background: currentColor;
  animation: pulse-thinking 1s ease-in-out infinite;
}

.msg-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-muted);
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.msg-table-wrap:focus-visible {
  outline: 2px solid var(--select-focus);
  outline-offset: 2px;
}

.msg-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.msg-table th,
.msg-table td {
  min-width: 110px;
  max-width: min(46rem, 68vw);
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

.msg-table th {
  color: var(--muted);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.msg-table tbody tr:nth-child(even) td {
  background: var(--surface-overlay);
}

.msg-table tbody tr:hover td {
  background: var(--hover-fill);
}

.msg-table tr > :last-child {
  border-right: 0;
}

.msg-table tbody tr:last-child td {
  border-bottom: 0;
}

.msg-table .align-center { text-align: center; }
.msg-table .align-right { text-align: right; }

.msg-table code {
  display: inline;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--control-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
}

@media (max-width: 760px) {
  .msg-table {
    font-size: 13px;
  }

  .msg-table th,
  .msg-table td {
    min-width: 96px;
    max-width: 78vw;
    padding: 8px 9px;
  }
}

@keyframes pulse-thinking {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

@keyframes spin-thinking {
  to { transform: rotate(360deg); }
}

.msg-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
}

.msg-head-detail {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}

.msg-delivery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 58px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.msg-delivery::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.msg-delivery.tone-active {
  color: var(--blue);
}

.msg-delivery.tone-active::before {
  animation: pulse-thinking 1s ease-in-out infinite;
}

.msg-delivery.tone-success {
  color: var(--green);
}

.msg-delivery.tone-warning {
  color: var(--amber);
}

.msg.delivery-warning {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line-strong));
}

.msg-head-main {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  gap: 7px;
}

.msg-head time {
  color: var(--muted);
  font-weight: 650;
}

.msg-head strong {
  color: var(--ink);
  text-transform: capitalize;
}

.msg-usage {
  margin-top: 9px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 750;
}

.msg-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.msg:hover .msg-actions,
.msg:focus-within .msg-actions {
  opacity: 1;
  transform: translateY(0);
}

.msg-actions button {
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  background: var(--control-bg);
}

.msg-actions button.is-confirmed {
  color: var(--green);
  border-color: rgba(47, 111, 78, 0.28);
  background: var(--status-green-surface);
}

button.is-confirmed {
  color: var(--green);
  border-color: rgba(47, 111, 78, 0.28);
  background: var(--status-green-surface);
}

.scroll-bottom {
  position: sticky;
  bottom: var(--composer-sticky-offset, 82px);
  z-index: 6;
  align-self: center;
  min-height: 32px;
  margin: -36px auto 4px;
  border-color: var(--line-strong);
  background: var(--surface-overlay);
  box-shadow: 0 12px 26px var(--shadow-soft);
}

.composer {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  background: var(--gradient-composer);
  backdrop-filter: blur(10px);
}

.chat-panel.is-file-drop-target {
  outline: 2px solid var(--green);
  outline-offset: -4px;
}

.composer.is-file-drop-target::after {
  content: "Drop file to attach";
  position: absolute;
  inset: 6px 0 0;
  z-index: 8;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(47, 111, 78, 0.58);
  border-radius: 8px;
  color: var(--green);
  background: color-mix(in srgb, var(--status-green-surface) 86%, transparent);
  font-size: 13px;
  font-weight: 850;
  pointer-events: none;
}

.composer-more {
  display: none;
}

.composer-tools-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.composer-footer-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.composer-routing-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 4px;
  min-width: min(100%, 300px);
  flex: 1 1 300px;
}

.composer-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.composer-selects .agent-select {
  flex: 0 1 148px;
  min-width: 112px;
  max-width: 180px;
}

.composer-selects .model-select {
  flex: 1 1 210px;
  min-width: min(100%, 190px);
}

.composer-selects .thinking-select {
  flex: 0 1 132px;
  min-width: 112px;
}

.composer-footer-main > .token-pill {
  flex: 0 0 auto;
  align-self: center;
  min-height: 30px;
}

.attachment-pill {
  width: 100%;
}

.attachment-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(47, 111, 78, 0.24);
  border-radius: 8px;
  color: var(--green);
  background: var(--status-green-surface);
  font-size: 12px;
  font-weight: 750;
}

.attachment-pill span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.attachment-pill button {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--bad);
}

.composer-input {
  min-width: 0;
}

.composer textarea {
  width: 100%;
  min-height: 40px;
  max-height: min(20vh, 132px);
  line-height: 1.45;
  overflow-y: hidden;
  resize: none;
  border-radius: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

/* Keep context pressure in the same sight line as the next message. */
.composer[data-context-tone="watch"] textarea,
.composer[data-context-tone="warning"] textarea {
  border: 3px solid var(--amber);
  background: color-mix(in srgb, var(--status-amber-surface) 72%, var(--input-bg));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--amber) 24%, transparent),
    0 0 22px color-mix(in srgb, var(--amber) 18%, transparent);
}

.composer[data-context-tone="danger"] textarea {
  border: 3px solid var(--bad);
  background: color-mix(in srgb, var(--status-bad-surface) 78%, var(--input-bg));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--bad) 34%, transparent),
    0 0 30px color-mix(in srgb, var(--bad) 30%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--bad) 10%, transparent);
  animation: context-composer-alarm 1.6s ease-in-out infinite;
}

.composer[data-context-tone="watch"] textarea:focus-visible,
.composer[data-context-tone="warning"] textarea:focus-visible {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--amber) 40%, transparent),
    0 0 26px color-mix(in srgb, var(--amber) 24%, transparent);
}

.composer[data-context-tone="danger"] textarea:focus-visible {
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--bad) 48%, transparent),
    0 0 34px color-mix(in srgb, var(--bad) 38%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--bad) 12%, transparent);
}

@keyframes context-composer-alarm {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--bad) 28%, transparent),
      0 0 24px color-mix(in srgb, var(--bad) 22%, transparent),
      inset 0 0 16px color-mix(in srgb, var(--bad) 8%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--bad) 48%, transparent),
      0 0 38px color-mix(in srgb, var(--bad) 40%, transparent),
      inset 0 0 22px color-mix(in srgb, var(--bad) 14%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer[data-context-tone="danger"] textarea {
    animation: none;
  }
}

.composer-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.thinking-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.thinking-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-top-color: var(--blue);
  border-radius: 999px;
  animation: spin-thinking 850ms linear infinite;
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.composer-submit {
  display: flex;
  justify-content: flex-end;
  min-width: 76px;
}

.composer-tool {
  min-width: 52px;
  min-height: 36px;
  padding: 6px 10px;
  justify-content: center;
  font-weight: 800;
}

.composer .primary-action {
  min-width: 74px;
  min-height: 36px;
  padding-inline: 14px;
  font-weight: 850;
}

.composer-tool.is-listening {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-soft));
  color: var(--accent);
}

.voice-toggle.is-on {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 14%, var(--panel-soft));
  color: var(--blue);
}

.upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.project-board {
  display: grid;
  gap: 8px;
}

.project-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.project-card-button {
  display: block;
  width: 100%;
  min-height: 0;
  text-align: left;
}

.project-card.active {
  border-color: rgba(47, 111, 78, 0.28);
  background: var(--status-green-surface);
}

.project-card span {
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.project-card strong {
  display: block;
  margin-top: 4px;
  color: var(--blue);
}

.project-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.project-blocker {
  color: var(--bad) !important;
  font-weight: 700;
}

.project-modal-card {
  width: min(940px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.project-detail-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 3px;
}

.project-detail-section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  scroll-margin-top: 58px;
}

.project-detail-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 8px;
  background: linear-gradient(180deg, var(--surface-overlay), var(--chrome));
  backdrop-filter: blur(8px);
  scrollbar-width: thin;
}

.project-detail-nav button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--teal);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.project-detail-section h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 14px;
  line-height: 1.2;
}

.project-detail-section p {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.project-note {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
}

.project-note strong {
  color: var(--teal);
}

.project-note span {
  color: var(--muted);
  font-size: 11px;
}

.project-note pre {
  max-height: 230px;
  overflow: auto;
  color: var(--code-text);
  font-size: 12px;
  line-height: 1.45;
}

.projects-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: 14px;
  min-height: calc(100dvh - 85px);
  padding: 14px;
}

.signal-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-height: calc(100dvh - 76px);
  padding: 14px 14px 14px 36px;
}

.signal-app-page {
  background: var(--bg);
}

.signal-app-page .topbar {
  min-height: 70px;
  padding: 10px 14px;
  background: var(--surface-overlay);
  backdrop-filter: none;
}

.signal-app-page .app-menu summary {
  width: 46px;
  height: 46px;
  padding: 4px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.signal-app-page .menu-scampi-icon {
  width: 34px;
  height: 34px;
}

.signal-app-page .brand-lockup {
  gap: 0;
  transform: translateY(0);
}

.signal-app-page .brand-lockup h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
}

.signal-app-page .brand-subtitle {
  margin-top: 2px;
  color: var(--brand-accent);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .16em;
}

.signal-app-page .top-actions {
  justify-self: end;
}

.signal-app-page .top-actions .icon-button {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 8px;
  background: var(--surface-raised);
}

.signal-app-page .top-actions .icon-button svg {
  width: 22px;
  height: 22px;
}

.signal-drawer {
  position: fixed;
  top: 84px;
  left: 0;
  z-index: 32;
  width: min(300px, calc(100vw - 44px));
  transform: translateX(-100%);
  transition: transform 180ms ease;
}

.signal-drawer.is-open {
  transform: translateX(0);
}

.signal-drawer-tab {
  position: absolute;
  top: 0;
  right: -24px;
  width: 24px;
  min-height: 112px;
  padding: 9px 3px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 0 8px 8px 0;
  border-left: 0;
  background: var(--surface-raised);
  box-shadow: 3px 6px 14px rgba(23, 23, 23, 0.08);
  font-size: 16px;
  font-weight: 850;
}

.signal-date-rail {
  min-height: min(620px, calc(100dvh - 94px));
  max-height: calc(100dvh - 113px);
  overflow: auto;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 24px 68px var(--shadow);
}

.signal-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 78;
  background: var(--backdrop);
}

.signal-detail-panel {
  position: fixed;
  top: 86px;
  right: 14px;
  bottom: 14px;
  z-index: 80;
  width: min(520px, calc(100vw - 28px));
  max-height: none;
  overflow: auto;
  transform: translateX(calc(100% + 24px));
  transition: transform 180ms ease;
}

.signal-detail-panel.is-open {
  transform: translateX(0);
}

.signal-detail-panel .panel-head {
  flex-direction: row;
}

.signal-detail-close {
  flex: 0 0 auto;
}

.signal-date-list,
.signal-filter-list,
.signal-item-list,
.signal-detail {
  display: grid;
  gap: 7px;
}

.signal-date-row {
  display: grid;
  justify-items: start;
  width: 100%;
  min-height: 54px;
  text-align: left;
  background: var(--panel-soft);
}

.signal-date-row.today {
  border-color: var(--line-strong);
  box-shadow: inset 3px 0 0 var(--teal);
}

.signal-date-row.active,
.signal-item-row.active {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--msg-user-bg);
}

.signal-item-row.status-ignored {
  opacity: .58;
}

.signal-item-row.status-saved {
  border-color: rgba(47, 111, 78, 0.24);
  background: var(--status-green-surface);
}

.signal-item-row.status-reviewed,
.signal-item-row.status-done {
  background: var(--status-green-surface);
}

.signal-item-row.status-research,
.signal-item-row.status-memory-candidate,
.signal-item-row.status-project {
  border-color: rgba(163, 93, 31, 0.26);
  background: var(--status-amber-surface);
}

.signal-date-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.signal-filter-section {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

details.signal-filter-section summary {
  cursor: pointer;
}

details.signal-filter-section .signal-filter-list {
  margin-top: 8px;
}

.rail-label {
  margin: 0;
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.signal-rail-section {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.signal-rail-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.signal-mode-buttons {
  display: grid;
  gap: 8px;
}

.signal-mode-buttons button {
  justify-content: space-between;
  min-height: 36px;
  padding: 7px 10px;
  text-transform: uppercase;
}

.signal-mode-buttons button.active {
  color: var(--active-text);
  border-color: transparent;
  background: var(--active-bg);
}

.signal-mode-buttons span {
  color: inherit;
  opacity: .78;
  font-size: 11px;
}

.signal-select-control {
  width: 100%;
  min-height: 38px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface-raised);
  font: inherit;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-select-note,
.signal-packet-meta {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.signal-packet-meta {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.signal-packet-meta strong {
  color: var(--blue);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.signal-packet-meta span,
.signal-packet-meta code {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.signal-packet-meta code {
  padding: 5px;
  border-radius: 6px;
  background: var(--code-bg);
}

.signal-packet-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.signal-packet-links a {
  color: var(--teal);
  font-weight: 850;
  text-decoration: none;
}

.signal-packet-links a:hover,
.signal-packet-links a:focus-visible {
  text-decoration: underline;
}

.signal-filter-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  background: var(--panel-soft);
  text-align: left;
}

.signal-filter-chip.active {
  color: var(--teal);
  border-color: var(--line-strong);
  background: var(--code-bg);
}

.signal-filter-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-filter-chip strong {
  color: var(--muted);
  font-size: 11px;
}

.signal-reader {
  min-width: 0;
  max-height: calc(100dvh - 98px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.signal-command-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  min-height: 132px;
  margin-bottom: 0;
}

.signal-command-bar .eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
}

.signal-command-bar .muted {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.signal-search-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-self: end;
  width: 100%;
}

.signal-search-wrap input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 15px;
  background: var(--surface-raised);
}

.signal-add-button {
  min-height: 40px;
  white-space: nowrap;
}

.signal-manual-dialog {
  z-index: 80;
}

.signal-manual-card {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100dvh - 34px);
  overflow: auto;
}

.signal-manual-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.signal-manual-card label,
.signal-manual-text-wrap label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.signal-manual-card label span {
  text-transform: uppercase;
}

.signal-manual-card input,
.signal-manual-card textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface-raised);
}

.signal-manual-card textarea {
  resize: vertical;
  line-height: 1.4;
}

.signal-manual-text-wrap {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.signal-manual-text-wrap summary {
  padding: 10px 12px;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.signal-manual-text-wrap label {
  padding: 0 12px 12px;
}

.signal-manual-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.signal-manual-status[data-tone="error"] {
  color: var(--bad);
}

.signal-manual-status[data-tone="busy"] {
  color: var(--amber);
}

.signal-manual-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.signal-review-heading {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.signal-review-controls {
  display: grid;
  grid-template-columns: minmax(190px, 290px) minmax(320px, 1fr) minmax(280px, 360px);
  gap: 24px;
  align-items: end;
  min-height: 90px;
}

.signal-review-heading h2 {
  min-width: 0;
  margin: 0;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
}

.signal-date-picker {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.signal-date-picker .signal-select-control {
  min-height: 38px;
  border-color: var(--select-focus);
  background: var(--surface-raised);
}

.signal-app-page .signal-select-note {
  display: none;
}

.signal-status-tabs {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.signal-status-tab {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.signal-status-tab.active {
  color: var(--active-text);
  border-color: transparent;
  background: var(--active-bg);
}

.signal-status-tab span {
  color: inherit;
  opacity: .78;
  font-size: 11px;
}

.signal-detail-section ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 17px;
}

.signal-bulk-bar {
  position: sticky;
  top: 21px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.05);
}

.signal-select-all,
.signal-select-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.signal-select-all {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.signal-select-all input,
.signal-select-cell input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--active-bg);
}

.signal-bulk-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.signal-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.signal-bulk-actions button {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
}

.signal-bulk-actions button[data-bulk-status="deleted"] {
  color: var(--bad);
}

.signal-list-head,
.signal-item-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(180px, 240px) 56px minmax(188px, 240px);
  gap: 14px;
  align-items: start;
}

.signal-list-head {
  position: sticky;
  top: -15px;
  z-index: 2;
  min-height: 36px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  background: var(--surface-overlay);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.signal-item-row {
  position: relative;
  width: 100%;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  justify-content: stretch;
  text-align: left;
  background: var(--control-bg);
  cursor: pointer;
}

.signal-item-row:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.signal-item-row > span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.32;
}

.signal-select-cell {
  min-height: 28px;
  justify-content: center;
}

.signal-item-title {
  display: grid;
  gap: 5px;
}

.signal-item-title strong {
  display: -webkit-box;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.signal-item-title > span:not(.signal-chip-row) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.signal-source-cell {
  display: grid;
  gap: 4px;
}

.signal-source-cell strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.signal-source-cell .muted {
  font-size: 12px;
  line-height: 1.2;
}

.signal-source-link {
  width: fit-content;
  color: var(--ink);
  font-weight: 850;
  font-size: 12px;
  text-decoration: none;
}

.signal-source-link:hover,
.signal-source-link:focus-visible {
  text-decoration: underline;
}

.signal-score {
  justify-self: start;
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
}

.signal-score.score-high {
  color: var(--green);
}

.signal-score.score-medium {
  color: var(--amber);
}

.signal-score.score-low {
  color: var(--muted);
}

.signal-inline-actions {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.signal-packet-row .signal-inline-actions,
.signal-packet-row:focus-within .signal-inline-actions,
.signal-packet-row:hover .signal-inline-actions {
  display: flex;
}

.packet-actions .signal-packet-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.signal-item-row:hover .signal-inline-actions,
.signal-item-row:focus-within .signal-inline-actions {
  display: flex;
}

@media (hover: none) {
  .signal-inline-actions {
    position: static;
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

.signal-inline-actions button {
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 11px;
}

@media (max-width: 1480px) {
  .signal-page-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #memory-state-model {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .signal-app-page {
    overflow-x: hidden;
  }

  .signal-app-page .page-shell,
  .signal-page-layout,
  .signal-reader,
  .signal-command-bar,
  .signal-review-controls,
  .signal-item-list,
  .signal-item-row {
    max-width: 100%;
    min-width: 0;
  }

  .signal-app-page .topbar {
    min-height: 62px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .signal-app-page .brand-lockup h1 {
    font-size: 22px;
  }

  .signal-page-layout {
    padding: 10px 10px 10px 34px;
  }

  .signal-reader {
    padding: 10px;
    overflow-x: hidden;
  }

  .signal-command-bar {
    gap: 10px;
    min-height: 0;
  }

  .signal-review-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-height: 0;
  }

  .signal-review-heading {
    order: -1;
    justify-items: start;
    text-align: left;
  }

  .signal-review-heading h2 {
    font-size: 18px;
  }

  .signal-search-wrap {
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
  }

  .signal-add-button {
    width: 100%;
  }

  .signal-search-wrap input {
    min-width: 0;
    font-size: 16px;
  }

  .signal-list-head,
  .signal-item-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .signal-list-head {
    display: none;
  }

  .signal-item-row {
    padding: 10px;
  }

  .signal-item-title strong {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }

  .signal-item-title > span:not(.signal-chip-row) {
    -webkit-line-clamp: 2;
  }

  .signal-source-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
  }

  .signal-source-cell strong,
  .signal-source-cell .muted,
  .signal-source-link,
  .signal-score {
    font-size: 12px;
    line-height: 1.25;
  }

  .signal-inline-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    opacity: 1;
    pointer-events: auto;
  }

  .signal-inline-actions button {
    min-height: 30px;
    padding: 5px 8px;
  }
}

.signal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.signal-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(47, 111, 78, 0.18);
  border-radius: 999px;
  color: var(--green);
  background: var(--status-green-surface);
  font-size: 11px;
  font-weight: 750;
}

.signal-chip-soft {
  color: var(--rust);
  border-color: rgba(145, 84, 46, 0.18);
  background: var(--status-amber-surface);
}

.signal-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--blue);
  background: var(--control-bg);
  font-size: 11px;
  font-weight: 850;
}

.signal-recurrence-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(163, 93, 31, 0.24);
  border-radius: 999px;
  color: var(--amber);
  background: var(--status-amber-surface);
  font-size: 11px;
  font-weight: 850;
}

.signal-detail-section {
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.signal-detail-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.signal-detail-section h3 {
  margin: 0;
  color: var(--blue);
  font-size: 13px;
}

.signal-detail-section p,
.signal-detail-section li {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.signal-triage-section {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.signal-triage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.signal-triage-actions button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.signal-triage-actions button.active {
  color: var(--active-text);
  border-color: transparent;
  background: var(--active-bg);
}

.signal-detail-disclosure {
  display: block;
}

.signal-detail-disclosure summary {
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.signal-detail-disclosure > *:not(summary) {
  margin-top: 8px;
}

.signal-packet-summary code {
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  color: var(--muted);
  background: var(--code-bg);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.signal-packet-text {
  max-height: none;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--code-text);
  background: var(--code-bg);
  font-size: 12px;
  line-height: 1.5;
}

.signal-recurrence-list {
  display: grid;
  gap: 7px;
}

.signal-recurrence-row {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.signal-recurrence-row strong {
  color: var(--blue);
  font-size: 12px;
}

.signal-recurrence-row span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.project-whiteboard {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--surface-overlay);
  background-size: 28px 28px;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 44px var(--shadow-soft);
}

.whiteboard-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.whiteboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.product-card-create {
  min-height: 32px;
  white-space: nowrap;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
  gap: 12px;
}

.whiteboard-card {
  min-height: 172px;
  background: var(--control-bg);
  box-shadow: 0 10px 24px rgba(23, 23, 23, 0.08);
}

.editable-whiteboard-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.editable-whiteboard-card[draggable="true"] {
  cursor: grab;
}

.editable-whiteboard-card.is-dragging {
  cursor: grabbing;
  opacity: .56;
}

.editable-whiteboard-card.is-drop-target {
  outline: 2px solid rgba(47, 111, 78, 0.34);
  outline-offset: 2px;
}

.whiteboard-card-main {
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.whiteboard-card-main:hover,
.whiteboard-card-main:focus-visible {
  background: transparent;
}

.whiteboard-card-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.whiteboard-card-control {
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1;
}

.whiteboard-card strong {
  font-size: 16px;
  line-height: 1.22;
}

.product-whiteboard-card {
  border-color: var(--product-accent);
  background: var(--product-surface);
}

.project-card-tone-loop {
  border-color: rgba(34, 117, 160, 0.52);
  border-left: 5px solid #2275a0;
  background:
    linear-gradient(90deg, rgba(34, 117, 160, 0.13), transparent 34%),
    var(--product-surface);
}

.project-card-tone-loop.active {
  border-color: rgba(34, 117, 160, 0.66);
  background:
    linear-gradient(90deg, rgba(34, 117, 160, 0.18), transparent 38%),
    var(--status-green-surface);
}

.project-card-tone-loop span,
.project-card-tone-loop strong {
  color: #145f84;
}

.project-card-tone-autonomy {
  border-color: var(--status-amber-border);
  border-left: 5px solid #8f5b1d;
  background:
    linear-gradient(90deg, rgba(163, 93, 31, 0.14), transparent 36%),
    var(--control-bg);
}

.project-card-tone-autonomy.active {
  border-color: var(--status-amber-border);
  background:
    linear-gradient(90deg, rgba(163, 93, 31, 0.2), transparent 40%),
    var(--status-amber-surface);
}

.project-card-tone-autonomy span,
.project-card-tone-autonomy strong {
  color: #6f3e16;
}

.product-whiteboard-card span {
  text-transform: capitalize;
}

.product-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.product-card-tags small {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.detail-tags {
  margin-top: 0;
}

.product-card-facts {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.product-card-facts div {
  display: grid;
  grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.product-card-facts dt,
.product-card-facts dd {
  margin: 0;
}

.product-card-facts dt {
  color: var(--muted);
  font-size: 12px;
}

.product-card-facts dd {
  color: var(--ink);
  font-size: 13px;
}

.product-card-detail-list {
  display: grid;
  gap: 10px;
}

.product-card-detail-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.product-card-detail-item div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.product-card-detail-item strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.product-card-detail-item span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--code-bg);
  font-size: 11px;
  font-weight: 750;
}

.product-card-detail-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.product-card-evidence {
  display: grid;
  gap: 7px;
}

.product-card-evidence a,
.product-card-evidence code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
}

.product-card-evidence a {
  color: var(--teal);
  font-weight: 850;
  text-decoration: none;
}

.product-card-evidence a:hover,
.product-card-evidence a:focus-visible {
  text-decoration: underline;
}

.product-card-evidence code {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--code-bg);
}

.product-card-form {
  display: grid;
  gap: 12px;
  width: min(620px, 96vw);
}

.product-card-form label {
  display: grid;
  gap: 6px;
}

.product-card-form label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.product-card-form input,
.product-card-form select,
.product-card-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--ink);
  font: inherit;
}

.product-card-form input,
.product-card-form select {
  min-height: 42px;
  padding: 8px 10px;
}

.product-card-form textarea {
  resize: vertical;
  min-height: 96px;
  padding: 10px;
}

.product-card-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.45fr);
  gap: 10px;
}

.project-acp-section {
  border-color: var(--status-amber-border);
  background: var(--status-amber-surface);
}

.project-acp-section.ok {
  border-color: var(--status-green-border);
  background: var(--status-green-surface);
}

.project-acp-section.bad {
  border-color: var(--status-red-border);
  background: var(--status-red-surface);
}

.project-acp-head {
  display: grid;
  gap: 6px;
}

.project-acp-head span,
.project-acp-loop span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.project-acp-head h3 {
  margin: 0;
}

.project-acp-head p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.project-acp-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.project-acp-kv-grid article {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.project-acp-kv-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-acp-kv-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-acp-split {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.project-acp-split article {
  min-width: 0;
}

.project-acp-split h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
}

.project-acp-loop-list {
  display: grid;
  gap: 7px;
}

.project-acp-loop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.project-acp-loop.ok {
  border-color: var(--status-green-border);
}

.project-acp-loop.warn {
  border-color: var(--status-amber-border);
}

.project-acp-loop.bad {
  border-color: var(--status-red-border);
}

.project-acp-loop strong,
.project-acp-loop p,
.project-acp-note-list p {
  margin: 0;
}

.project-acp-loop strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-acp-loop p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-acp-section details {
  margin-top: 12px;
}

.project-acp-note-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.project-acp-note-list p {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.project-inspector {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: calc(100dvh - 114px);
  overflow: hidden;
}

.project-inspector .project-detail-body {
  min-height: 0;
  max-height: calc(100dvh - 214px);
  overflow: auto;
}

.loops-page-layout {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
  min-height: calc(100dvh - 85px);
  padding: 14px;
}

.loops-library-page {
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1fr) minmax(300px, .82fr);
}

.todo-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-height: calc(100dvh - 76px);
  padding: 14px;
}

.todo-app-page {
  background: var(--bg);
}

.todo-app-page .topbar {
  min-height: 70px;
  padding: 10px 14px;
  background: var(--surface-overlay);
  backdrop-filter: none;
}

.calendar-app-page {
  background: var(--bg);
}

.calendar-app-page .topbar {
  min-height: 70px;
  padding: 10px 14px;
  background: var(--surface-overlay);
  backdrop-filter: none;
}

.calendar-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 14px;
  min-height: calc(100dvh - 76px);
  padding: 14px;
}

.crons-page-layout {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(360px, .85fr);
  gap: 14px;
  min-height: calc(100dvh - 76px);
  padding: 14px;
}

.crons-board,
.cron-detail-panel {
  min-width: 0;
  max-height: calc(100dvh - 98px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.crons-board-head {
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.cron-status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.cron-status-strip article {
  display: grid;
  gap: 2px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.cron-status-strip span {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.cron-status-strip b {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.b-operating-report {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.b-report-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.b-report-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.b-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.b-report-tile {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  background: var(--control-bg);
}

.b-report-tile.tone-ok {
  border-left-color: var(--success);
}

.b-report-tile.tone-watch,
.b-report-tile.tone-warn {
  border-left-color: var(--amber);
}

.b-report-tile.tone-bad {
  border-left-color: var(--bad);
}

.b-report-tile > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}

.b-report-tile strong {
  font-size: 13px;
  line-height: 1.25;
}

.b-report-tile span,
.b-report-tile small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.b-report-summary {
  display: grid;
  gap: 4px;
}

.b-report-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.b-report-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.b-report-check {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.b-report-check.tone-ok {
  border-color: var(--status-green-border);
  background: var(--status-green-bg);
}

.b-report-check.tone-watch,
.b-report-check.tone-warn {
  border-color: var(--status-amber-border);
  background: var(--status-amber-bg);
}

.b-report-check.tone-bad {
  border-color: var(--status-bad-border);
  background: var(--status-bad-bg);
}

.b-report-check b,
.b-report-check small {
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.b-report-check small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

.cron-list {
  display: grid;
  gap: 9px;
}

.cron-card {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--control-bg);
  text-align: left;
}

.cron-card.active {
  background: var(--status-blue-surface);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
}

.cron-card.tone-ok {
  border-left-color: var(--success);
}

.cron-card.tone-watch,
.cron-card.tone-warn {
  border-left-color: var(--amber);
}

.cron-card.tone-bad {
  border-left-color: var(--bad);
}

.cron-card.tone-disabled {
  border-left-color: var(--muted);
  opacity: .74;
}

.cron-card-top,
.cron-card-facts,
.cron-detail-actions,
.cron-surfaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.cron-card-top {
  justify-content: space-between;
}

.cron-card-top small,
.cron-card-facts span {
  color: var(--muted);
  font-size: 11px;
}

.cron-card strong {
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cron-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cron-tone,
.cron-surface-chip {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0;
}

.cron-tone.tone-ok {
  color: var(--success);
  background: var(--status-green-bg);
  border-color: var(--status-green-border);
}

.cron-tone.tone-watch,
.cron-tone.tone-warn {
  color: var(--amber);
  background: var(--status-amber-bg);
  border-color: var(--status-amber-border);
}

.cron-tone.tone-bad {
  color: var(--bad);
  background: var(--status-bad-bg);
  border-color: var(--status-bad-border);
}

.cron-tone.tone-disabled {
  color: var(--muted);
  background: var(--pill-bg);
}

.cron-detail-body {
  display: grid;
  gap: 12px;
}

.cron-detail-actions {
  justify-content: space-between;
  margin-bottom: 10px;
}

.cron-detail-actions button {
  min-height: 34px;
  padding: 7px 11px;
}

.cron-detail-actions button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.cron-command,
.cron-diagnostics {
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--code-text);
  background: var(--code-bg);
  font-size: 12px;
  line-height: 1.45;
}

.cron-surface-chip {
  color: var(--ink);
  background: var(--surface-muted);
  text-transform: none;
  overflow-wrap: anywhere;
}

.calendar-board {
  min-width: 0;
  max-height: calc(100dvh - 98px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.calendar-command-bar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  min-height: 72px;
}

.calendar-command-bar h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: 0;
}

.calendar-command-bar .muted {
  margin: 6px 0 0;
}

.calendar-month-controls,
.calendar-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.calendar-month-controls button,
.calendar-form-actions button,
.calendar-detail-card button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--control-bg);
  font-weight: 850;
}

.calendar-form-actions button[type="submit"] {
  color: var(--active-text);
  border-color: transparent;
  background: var(--active-bg);
}

.calendar-form-actions .danger-action {
  color: var(--bad);
  border-color: rgba(159, 58, 58, 0.24);
  background: var(--status-red-surface);
}

.calendar-form-actions .danger-action:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.calendar-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}

.calendar-source-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.calendar-filter-row input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--surface-raised);
}

.calendar-week-head,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-week-head {
  gap: 7px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-week-head span {
  padding: 0 8px;
}

.calendar-grid {
  gap: 7px;
}

.calendar-day {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  min-height: 132px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--control-bg);
  text-align: left;
  overflow: hidden;
}

.calendar-day.outside-month {
  color: var(--muted);
  background: color-mix(in srgb, var(--control-bg) 64%, transparent);
}

.calendar-day.today {
  border-color: rgba(47, 111, 78, 0.36);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 78, 0.16);
}

.calendar-day.selected {
  border-color: var(--line-strong);
  background: var(--msg-user-bg);
}

.calendar-day:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.calendar-day-number {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.calendar-day-count {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 20px;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.calendar-day-count:empty {
  display: none;
}

.calendar-day-events {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.calendar-event-chip {
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 22px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface-raised);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-chip b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
}

.calendar-event-chip em {
  flex: 0 0 auto;
  max-width: 74px;
  padding: 1px 5px;
  border-radius: 999px;
  color: color-mix(in srgb, currentColor 82%, var(--ink));
  background: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.calendar-event-chip.tone-cron-system,
.calendar-detail-card.tone-cron-system,
.calendar-detail-row.tone-cron-system {
  border-color: rgba(50, 91, 130, 0.22);
  background: var(--status-blue-surface);
}

.calendar-event-chip.tone-cron-memory,
.calendar-detail-card.tone-cron-memory,
.calendar-detail-row.tone-cron-memory {
  border-color: rgba(47, 111, 78, 0.24);
  background: var(--status-green-surface);
}

.calendar-event-chip.tone-cron-department,
.calendar-detail-card.tone-cron-department,
.calendar-detail-row.tone-cron-department {
  border-color: rgba(94, 81, 150, 0.24);
  background: rgba(94, 81, 150, 0.12);
}

.calendar-event-chip.tone-cron-b-loop,
.calendar-detail-card.tone-cron-b-loop,
.calendar-detail-row.tone-cron-b-loop {
  border-color: rgba(163, 93, 31, 0.25);
  background: var(--status-amber-surface);
}

.calendar-event-chip.tone-cron-backup,
.calendar-detail-card.tone-cron-backup,
.calendar-detail-row.tone-cron-backup {
  border-color: rgba(119, 75, 51, 0.25);
  background: rgba(119, 75, 51, 0.11);
}

.calendar-event-chip.tone-cron-signal,
.calendar-detail-card.tone-cron-signal,
.calendar-detail-row.tone-cron-signal {
  border-color: rgba(35, 120, 132, 0.24);
  background: rgba(35, 120, 132, 0.11);
}

.calendar-event-chip.tone-cron-security,
.calendar-detail-card.tone-cron-security,
.calendar-detail-row.tone-cron-security {
  border-color: rgba(159, 58, 58, 0.24);
  background: var(--status-red-surface);
}

.calendar-event-chip.tone-cron-workflow,
.calendar-detail-card.tone-cron-workflow,
.calendar-detail-row.tone-cron-workflow {
  border-color: rgba(62, 118, 102, 0.24);
  background: rgba(62, 118, 102, 0.11);
}

.calendar-event-chip.tone-review,
.calendar-event-chip.tone-sprint,
.calendar-event-chip.tone-warn {
  border-color: rgba(163, 93, 31, 0.22);
  background: var(--status-amber-surface);
}

.calendar-event-chip.tone-bad {
  border-color: rgba(159, 58, 58, 0.24);
  background: var(--status-red-surface);
}

.calendar-event-chip.tone-ok {
  border-color: rgba(47, 111, 78, 0.2);
  background: var(--status-green-surface);
}

.calendar-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.calendar-side-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.calendar-detail-panel,
.calendar-editor-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--gradient-panel), var(--panel);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.calendar-detail-panel {
  max-height: calc(48dvh - 54px);
  overflow: auto;
}

.calendar-editor-panel {
  max-height: calc(52dvh - 58px);
  overflow: auto;
  background: var(--surface-overlay);
}

.calendar-detail-body {
  display: grid;
  gap: 9px;
}

.calendar-detail-card,
.calendar-detail-row {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--control-bg);
  text-align: left;
}

.calendar-detail-row strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.calendar-detail-row span,
.calendar-detail-row small {
  color: var(--muted);
  font-size: 12px;
}

.calendar-detail-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-detail-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.calendar-detail-card.tone-bad,
.calendar-detail-row.tone-bad {
  border-color: rgba(159, 58, 58, 0.24);
  background: var(--status-red-surface);
}

.calendar-detail-card.tone-warn,
.calendar-detail-row.tone-warn {
  border-color: rgba(163, 93, 31, 0.22);
  background: var(--status-amber-surface);
}

.calendar-form {
  display: grid;
  gap: 11px;
}

.calendar-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-form label span {
  text-transform: uppercase;
}

.calendar-form input,
.calendar-form select,
.calendar-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface-raised);
  font: inherit;
}

.calendar-form textarea {
  resize: vertical;
  line-height: 1.35;
}

.calendar-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, .58fr);
  gap: 10px;
}

.todo-reader {
  min-width: 0;
  max-height: calc(100dvh - 98px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.todo-command-bar {
  display: grid;
  gap: 20px;
  align-items: stretch;
  min-height: 126px;
}

.todo-command-bar .eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
}

.todo-review-controls {
  display: grid;
  grid-template-columns: minmax(190px, 290px) minmax(320px, 1fr) minmax(280px, 360px);
  gap: 24px;
  align-items: end;
  min-height: 88px;
}

.todo-filter-group {
  display: grid;
  gap: 6px;
}

.todo-pipeline-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.todo-pipeline-tab {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.todo-pipeline-tab.active {
  color: var(--active-text);
  border-color: transparent;
  background: var(--active-bg);
}

.todo-pipeline-tab b {
  font-size: 11px;
}

.todo-review-heading {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.todo-review-heading h2 {
  min-width: 0;
  margin: 0;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: 0;
}

.todo-review-heading .muted {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.todo-search-wrap {
  align-self: end;
  width: 100%;
}

.todo-search-wrap input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 15px;
  background: var(--surface-raised);
}

.todo-color-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-overlay);
}

.todo-color-key-label {
  margin-right: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.todo-color-key .todo-status-badge {
  white-space: nowrap;
}

.todo-list-head,
.todo-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 150px) minmax(170px, 220px) minmax(112px, 132px);
  gap: 14px;
  align-items: start;
}

.todo-list-head {
  position: sticky;
  top: -15px;
  z-index: 2;
  min-height: 36px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  background: var(--surface-overlay);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.todo-item-list {
  display: grid;
  gap: 7px;
}

.todo-item-row {
  position: relative;
  width: 100%;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  justify-content: stretch;
  color: var(--ink);
  text-align: left;
  background: var(--control-bg);
  cursor: pointer;
}

.todo-item-row.active {
  border-color: var(--line-strong);
  background: var(--msg-user-bg);
}

.todo-item-row.pipeline-need {
  box-shadow: inset 3px 0 0 var(--blue);
}

.todo-item-row.pipeline-process {
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
  box-shadow: inset 3px 0 0 var(--teal);
}

.todo-item-row.pipeline-review {
  border-color: rgba(163, 93, 31, 0.24);
  background: var(--status-amber-surface);
}

.todo-item-row.pipeline-blocked {
  border-color: rgba(159, 58, 58, 0.26);
  background: var(--status-red-surface);
}

.todo-item-row.pipeline-done {
  border-color: rgba(47, 111, 78, 0.24);
  background: var(--status-green-surface);
}

.todo-item-row.pipeline-library {
  border-color: var(--status-neutral-border);
  background: var(--status-neutral-surface);
  box-shadow: inset 3px 0 0 var(--status-neutral-text);
}

.todo-item-row:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.todo-item-row > span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.32;
}

.todo-row-main {
  display: grid;
  gap: 5px;
}

.todo-row-main strong {
  display: -webkit-box;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.todo-row-main > span:not(.signal-chip-row) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.todo-row-pipeline,
.todo-row-owner {
  display: grid;
  gap: 4px;
}

.todo-row-pipeline strong,
.todo-row-owner strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.todo-row-updated {
  color: var(--muted);
  font-size: 12px;
}

.todo-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--blue);
  background: var(--control-bg);
  font-size: 11px;
  font-weight: 850;
}

.todo-status-badge.pipeline-process {
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
}

.todo-status-badge.pipeline-review {
  color: var(--amber);
  background: var(--status-amber-surface);
}

.todo-status-badge.pipeline-blocked {
  color: var(--bad);
  background: var(--status-red-surface);
}

.todo-status-badge.pipeline-done {
  color: var(--green);
  background: var(--status-green-surface);
}

.todo-status-badge.pipeline-library {
  color: var(--status-neutral-text);
  background: var(--status-neutral-surface);
}

.signal-chip.bad {
  color: var(--bad);
  border-color: rgba(159, 58, 58, 0.2);
  background: var(--status-red-surface);
}

.signal-chip.warn {
  color: var(--amber);
  border-color: rgba(163, 93, 31, 0.2);
  background: var(--status-amber-surface);
}

.signal-chip.ok {
  color: var(--green);
  border-color: rgba(47, 111, 78, 0.18);
  background: var(--status-green-surface);
}

.todo-detail-panel {
  width: min(560px, calc(100vw - 28px));
}

.todo-detail-body {
  padding-bottom: 24px;
}

.todo-detail-summary {
  display: grid;
  gap: 10px;
}

.todo-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.todo-status-action {
  min-height: 36px;
  padding: 7px 11px;
}

.todo-status-action.primary {
  color: var(--active-text);
  border-color: transparent;
  background: var(--active-bg);
}

.todo-resource-list {
  display: grid;
  gap: 7px;
}

.todo-resource-list a,
.todo-resource-list span {
  display: block;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface-raised);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.todo-resource-list a {
  text-decoration: none;
}

.todo-resource-list a:hover,
.todo-resource-list a:focus-visible {
  border-color: var(--line-strong);
  text-decoration: underline;
}

.loops-index {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--gradient-panel), var(--panel);
  box-shadow: 0 18px 44px var(--shadow-soft);
}

.loops-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.loops-list {
  display: grid;
  gap: 10px;
}

.loop-library-toolbar {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.loop-library-toolbar input,
.loop-create-form input,
.loop-create-form select,
.loop-create-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface-raised);
  font: inherit;
}

.loop-create-form textarea {
  resize: vertical;
  line-height: 1.35;
}

.loop-card {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 128px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  text-align: left;
  box-shadow: 0 4px 14px rgba(23, 23, 23, 0.05);
}

.loop-library-card {
  min-height: 154px;
}

.loop-card.active {
  border-color: rgba(47, 111, 78, 0.34);
  background: var(--status-green-surface);
}

.loop-card-error {
  border-color: rgba(169, 31, 22, 0.32);
  background: rgba(255, 248, 247, 0.96);
}

.loop-card-top,
.loop-card-facts,
.loop-row div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.loop-card-top {
  justify-content: space-between;
}

.loop-card-top small,
.loop-card-facts span,
.loop-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.loop-card strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.loop-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.loop-card .loop-phase {
  color: var(--rust);
  font-weight: 850;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.loop-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--code-bg);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.loop-status.ok {
  border-color: rgba(47, 111, 78, 0.24);
  color: var(--success);
  background: rgba(47, 111, 78, 0.08);
}

.loop-status.warn {
  border-color: rgba(156, 91, 24, 0.26);
  color: var(--amber);
  background: rgba(156, 91, 24, 0.08);
}

.loop-status.bad {
  border-color: rgba(169, 31, 22, 0.28);
  color: var(--bad);
  background: rgba(169, 31, 22, 0.08);
}

.loops-detail-panel {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: calc(100dvh - 114px);
  overflow: hidden;
}

.loops-create-panel {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100dvh - 114px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.loop-create-form {
  display: grid;
  gap: 11px;
}

.loop-create-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.loop-create-form label span {
  text-transform: uppercase;
}

.loop-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, .56fr);
  gap: 10px;
}

.loop-create-form button,
.loop-detail-actions button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  color: var(--active-text);
  background: var(--active-bg);
  font-weight: 850;
}

.loop-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.loops-detail-body {
  min-height: 0;
  max-height: calc(100dvh - 214px);
  overflow: auto;
}

.loops-section h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.loop-facts {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.loop-facts div {
  display: grid;
  grid-template-columns: minmax(84px, .24fr) minmax(0, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.loop-facts dt,
.loop-facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.loop-facts dt {
  color: var(--muted);
  font-size: 12px;
}

.loop-facts dd {
  color: var(--ink);
  font-size: 13px;
}

.loop-row {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.loop-row-bad {
  border-color: rgba(169, 31, 22, 0.24);
  background: rgba(255, 248, 247, 0.82);
}

.loop-row strong,
.loop-row a,
.loop-row code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.loop-row strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.loop-row p,
.loop-row ul {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.loop-row ul {
  padding-left: 18px;
}

.loop-row a {
  color: var(--teal);
  font-weight: 850;
  text-decoration: none;
}

.loop-row a:hover,
.loop-row a:focus-visible {
  text-decoration: underline;
}

.loop-row code {
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--code-bg);
  font-size: 12px;
  line-height: 1.4;
}

.loop-check-group + .loop-check-group {
  margin-top: 12px;
}

body.sheet-open {
  overflow: hidden;
}

.project-sheet-card {
  width: min(760px, 96vw);
}

.agent-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 14px;
  min-height: calc(100dvh - 85px);
  padding: 14px;
}

.agent-board-stage {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--gradient-panel), var(--panel);
  box-shadow: 0 18px 44px var(--shadow-soft);
}

.agent-command-node {
  max-width: 520px;
  margin: 10px auto 18px;
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}

.agent-node-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 0;
  align-content: start;
  padding: 10px;
  text-align: left;
  background: var(--control-bg);
  box-shadow: 0 8px 18px rgba(23, 23, 23, 0.07);
}

.agent-node-card.command {
  border-color: rgba(23, 23, 23, 0.24);
  background: var(--status-green-surface);
}

.agent-node-card.active {
  border-color: rgba(23, 23, 23, 0.42);
  box-shadow: 0 14px 32px rgba(23, 23, 23, 0.13);
}

.agent-node-card.selected {
  min-height: 0;
  margin-bottom: 10px;
  pointer-events: none;
}

.agent-node-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.agent-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(145deg, var(--accent), var(--green));
  font-size: 16px;
  font-weight: 950;
}

.agent-avatar.compact {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.agent-avatar.og {
  width: 44px;
  height: 44px;
  background: linear-gradient(145deg, var(--ink), var(--accent));
  font-size: 22px;
}

.agent-node-card strong {
  color: var(--blue);
  font-size: 15px;
  line-height: 1.2;
}

.agent-node-card em {
  color: var(--rust);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.agent-node-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.38;
}

.agent-usage-compact {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.agent-inventory-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.agent-inventory-counts span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  max-width: 100%;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-inventory-groups {
  display: grid;
  gap: 8px;
}

.agent-inventory-group {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.agent-inventory-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.agent-inventory-group-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.agent-inventory-group-head strong {
  color: var(--blue);
  font-size: 12px;
}

.agent-inventory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.agent-inventory-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface-raised);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-inventory-group p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.agent-token-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.agent-token-grid div,
.agent-detail-metrics div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.agent-token-grid span,
.agent-detail-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.agent-token-grid strong,
.agent-detail-metrics strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
}

.agent-route-warning {
  padding: 7px 8px;
  border: 1px solid rgba(163, 93, 31, 0.24);
  border-radius: 8px;
  color: #6f3e16;
  background: var(--status-amber-surface);
  font-size: 11px;
  font-weight: 760;
}

.agent-route-warning.detail {
  margin-top: 10px;
  font-size: 12px;
}

.agent-board-inspector {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  max-height: calc(100dvh - 114px);
  overflow: auto;
}

.agent-inspector-close {
  display: none;
}

.agent-inspector-backdrop {
  display: none;
}

.agent-selected-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.agent-selected-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.agent-selected-identity strong,
.agent-selected-identity span,
.agent-selected-identity p {
  min-width: 0;
}

.agent-selected-identity strong {
  display: block;
  color: var(--blue);
  font-size: 14px;
  line-height: 1.2;
}

.agent-selected-identity span {
  display: block;
  margin-top: 2px;
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
}

.agent-selected-identity p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.agent-inspector-tabs {
  flex: 0 0 auto;
}

.agent-inspector-pane {
  min-height: 0;
  flex: 1 1 auto;
}

.agent-inspector-pane.is-active {
  display: grid;
  gap: 10px;
}

.agent-chatbox {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.agent-files-panel {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.agent-files-head,
.agent-file-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-files-head h3 {
  margin: 0;
  color: var(--blue);
  font-size: 15px;
}

.agent-file-tabs {
  display: flex;
  gap: 6px;
  max-width: 100%;
  min-height: 42px;
  overflow-x: auto;
  padding: 2px 1px 6px;
  scrollbar-width: thin;
}

.agent-file-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface-raised);
  box-shadow: 0 1px 0 var(--shadow-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.agent-file-tab span {
  display: block;
  overflow: hidden;
  max-width: 140px;
  text-overflow: ellipsis;
}

.agent-file-tab:hover,
.agent-file-tab:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
}

.agent-file-tab.active {
  color: var(--active-text);
  border-color: transparent;
  background: var(--active-bg);
  box-shadow: none;
}

.agent-file-tab.missing:not(.active) {
  border-style: dashed;
  color: var(--muted);
  background: var(--panel-soft);
}

.agent-file-editor {
  width: 100%;
  min-height: 280px;
  max-height: 50dvh;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--terminal-text);
  background: var(--terminal-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

.agent-files-error {
  margin: 0;
}

.mission-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
  gap: 14px;
  min-height: calc(100dvh - 85px);
  padding: 14px;
}

.mission-builder,
.mission-output {
  align-self: start;
}

.mission-output {
  position: sticky;
  top: 100px;
  max-height: calc(100dvh - 114px);
  overflow: hidden;
}

.mission-form {
  display: grid;
  gap: 14px;
}

.mission-section {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.mission-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.mission-section h3 {
  margin: 0;
  color: var(--blue);
  font-size: 14px;
}

.mission-section label {
  display: grid;
  gap: 6px;
}

.mission-section label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.mission-section input,
.mission-section select,
.mission-section textarea {
  width: 100%;
}

.mission-section textarea {
  resize: vertical;
}

.mission-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mission-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.mission-agent-grid label {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.mission-agent-grid input {
  width: auto;
  margin-right: 8px;
}

.mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.mission-output-text {
  min-height: 420px;
  max-height: calc(100dvh - 214px);
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--terminal-bg);
  color: var(--terminal-text);
  white-space: pre-wrap;
}

.agent-chat-head {
  margin-bottom: 0;
}

.agent-chat-head h3 {
  margin: 0;
  color: var(--blue);
  font-size: 15px;
}

.agent-session-picker {
  min-width: 0;
}

.agent-session-menu {
  position: relative;
}

.agent-session-menu summary {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: var(--input-bg);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.agent-session-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 18px 44px var(--shadow-soft);
}

.agent-session-options button {
  display: grid;
  gap: 3px;
  justify-items: start;
  width: 100%;
  min-height: 0;
  padding: 8px;
  text-align: left;
}

.agent-session-options button.active {
  border-color: rgba(23, 23, 23, 0.34);
  background: var(--surface-overlay);
}

.agent-session-options strong,
.agent-session-options span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.agent-session-options strong {
  color: var(--blue);
  font-size: 12px;
  line-height: 1.2;
}

.agent-session-options span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 550;
}

.agent-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  max-height: 32dvh;
  overflow: auto;
  padding-right: 2px;
}

.agent-chat-messages .msg {
  padding: 9px 10px;
}

.agent-chat-messages .msg-head {
  margin-bottom: 5px;
  font-size: 11px;
}

.agent-chat-messages .msg pre {
  font-size: 12px;
  line-height: 1.45;
}

.agent-chat-empty {
  margin: auto 0;
  padding: 14px;
  border: 1px dashed rgba(23, 23, 23, 0.18);
  border-radius: 8px;
  text-align: center;
}

.agent-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.agent-chat-form textarea {
  min-height: 48px;
  max-height: 22dvh;
  resize: vertical;
}

.agent-chat-form .primary-action {
  min-height: 48px;
}

.agent-chat-form #agent-chat-stop {
  min-height: 48px;
}

.agent-detail {
  display: grid;
  gap: 10px;
}

.agent-detail-drawer summary {
  display: none;
}

.agent-detail-section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.agent-detail-section h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 14px;
}

.agent-detail-section p,
.agent-detail-section li {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.agent-detail-section ul {
  margin: 0;
  padding-left: 18px;
  overflow-wrap: anywhere;
}

.agent-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.agent-detail-metrics p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.shortcut {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: var(--surface-overlay);
}

.files-panel input#workspace-search {
  margin: 8px 0;
}

.workspace-root-note {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

.search-results {
  margin: 8px 0;
}

.search-hit strong {
  color: var(--teal);
}

.json-box,
.file-content,
.file-tree {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--code-text);
  background: var(--code-bg);
}

.file-content {
  min-height: 24vh;
  max-height: 30vh;
  margin-top: 10px;
  overflow: auto;
  padding: 12px;
}

.hidden {
  display: none !important;
}

.file-tree {
  max-height: 34vh;
  margin: 8px 0;
  overflow: auto;
  padding: 8px;
}

.files-page-layout {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(440px, 1fr) minmax(320px, 0.72fr);
  grid-template-areas:
    "command command command"
    "filters index preview";
  align-items: start;
  gap: 12px;
  min-height: calc(100dvh - 73px);
  padding: 12px;
}

.files-command-bar,
.files-filter-rail,
.files-index-panel,
.file-preview-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  box-shadow: 0 14px 34px var(--shadow-soft);
}

.files-command-bar {
  position: sticky;
  top: 73px;
  z-index: 20;
  grid-area: command;
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background:
    var(--gradient-panel), var(--surface-raised);
  backdrop-filter: blur(12px);
}

.files-command-title {
  min-width: 0;
}

.files-command-title h2 {
  color: var(--blue);
  font-size: 22px;
}

.file-search-wrap {
  min-width: 0;
}

.file-command-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
}

.file-command-actions button {
  min-height: 36px;
  white-space: nowrap;
}

.files-filter-rail {
  position: sticky;
  top: 149px;
  grid-area: filters;
  display: grid;
  gap: 14px;
  padding: 12px;
}

.filter-rail-section {
  display: grid;
  gap: 7px;
}

.rail-label {
  margin: 0;
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.filter-chip,
.scope-chip {
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--ink);
  background: var(--surface-muted);
  font-size: 13px;
}

.filter-chip span {
  min-width: 24px;
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--muted);
  background: rgba(23, 23, 23, 0.06);
  font-size: 11px;
  text-align: center;
}

.filter-chip.active {
  border-color: var(--line-strong);
  color: var(--teal);
  background: var(--code-bg);
}

.scope-chip {
  justify-content: flex-start;
  color: var(--blue);
}

.files-rail-note {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 248, 237, 0.58);
  font-size: 12px;
  line-height: 1.35;
}

.files-rail-note strong {
  color: var(--amber);
}

.files-index-panel {
  grid-area: index;
  padding: 12px;
}

.files-index-head,
.files-inspector-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.files-index-head h2,
.files-inspector-head h2 {
  overflow-wrap: anywhere;
}

.file-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--code-bg);
}

.file-table-head,
.file-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 92px 128px 88px;
  align-items: center;
  gap: 10px;
}

.file-table-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-overlay);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.file-table-body {
  max-height: calc(100dvh - 252px);
  overflow: auto;
}

.file-row {
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.file-row:hover,
.file-row:focus-visible,
.file-row.active {
  color: var(--ink);
  background: var(--surface-muted);
}

.file-row.active {
  box-shadow: inset 3px 0 0 var(--teal);
}

.file-row.is-recent .file-kind-dot {
  box-shadow: 0 0 0 3px rgba(163, 93, 31, 0.12);
}

.file-row > span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.file-row b {
  color: var(--teal);
  font-size: 12px;
}

.file-name-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 9px;
}

.file-name-cell strong,
.file-name-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-name-cell strong {
  color: var(--blue);
  font-size: 14px;
  font-weight: 850;
}

.file-name-cell small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

.file-kind-dot {
  grid-row: 1 / span 2;
  align-self: center;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green);
}

.file-row.is-dir .file-kind-dot {
  background: var(--amber);
}

.file-empty-state {
  padding: 18px;
  color: var(--muted);
  font-size: 13px;
}

.search-results {
  display: none;
  max-height: 190px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
}

.search-results:not(:empty) {
  display: flex;
  flex-direction: column;
}

.search-result-row {
  width: 100%;
  display: grid;
  gap: 3px;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.search-result-row strong,
.search-result-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-row strong {
  color: var(--teal);
  font-size: 13px;
}

.search-result-row span {
  color: var(--muted);
  font-size: 12px;
}

.file-preview-panel {
  position: sticky;
  top: 149px;
  grid-area: preview;
  padding: 12px;
  max-height: calc(100dvh - 161px);
  overflow: hidden;
}

.file-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
}

.file-meta-grid div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.file-meta-grid div:first-child {
  grid-column: 1 / -1;
}

.file-meta-grid dt {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.file-meta-grid dd {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.file-preview-panel .file-content {
  min-height: calc(100dvh - 395px);
  max-height: calc(100dvh - 395px);
  margin-top: 0;
  background: var(--code-bg);
  line-height: 1.45;
}

.file-preview-panel .workspace-media-preview {
  min-height: calc(100dvh - 395px);
  max-height: calc(100dvh - 395px);
  margin-top: 0;
}

.file-preview-panel .workspace-image-preview,
.file-preview-panel .workspace-pdf-preview {
  max-height: calc(100dvh - 395px);
}

.tree-level {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 10px;
}

summary {
  cursor: pointer;
  padding: 5px 4px;
  color: var(--teal);
  font-weight: 750;
}

.tree-file {
  min-height: 30px;
  padding: 5px 4px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 600;
}

.tree-file:hover {
  color: var(--teal);
  background: transparent;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--modal-backdrop);
}

.modal-card {
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(23, 23, 23, 0.24);
}

.palette-card {
  width: min(760px, 96vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}

.security-card {
  width: min(760px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
}

.continuation-card {
  width: min(860px, 96vw);
  height: min(720px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.continuation-head,
.continuation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.continuation-head h2,
.continuation-head p,
.continuation-card > p {
  margin: 0;
}

#continuation-handoff {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 640px) {
  .context-health-row,
  .context-health-row > div,
  .continuation-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .context-health-row .compact-link,
  .continuation-actions button {
    width: 100%;
  }

  .continuation-card {
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }
}

.security-section {
  display: grid;
  gap: 10px;
}

.security-section h3 {
  margin: 0;
  font-size: 15px;
}

.compact-head {
  align-items: center;
}

.security-device-list {
  display: grid;
  gap: 8px;
}

.security-device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.security-device strong,
.security-device span {
  display: block;
  min-width: 0;
}

.security-device span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.security-pair-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 8px;
  align-items: end;
}

.security-pair-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.pair-output {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.pair-qr {
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.pair-qr svg {
  width: 100%;
  height: 100%;
}

.pair-manual {
  display: grid;
  gap: 8px;
}

.pair-code {
  font-size: 28px;
  font-weight: 850;
  letter-spacing: .08em;
}

.manual-field {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.shortcut-hint {
  margin: -4px 0 10px;
}

.palette-results {
  max-height: 60vh;
  margin-top: 10px;
}

.palette-item strong {
  color: var(--ink);
}

.palette-item:hover strong {
  color: var(--teal);
}

.usage-layout {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.usage-wide {
  width: 100%;
}

.usage-simple-layout {
  max-width: 1180px;
  margin: 0 auto;
}

.usage-approval-board {
  border-color: var(--line-strong);
  background: var(--gradient-panel), var(--panel);
}

.usage-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.usage-total-cards {
  margin-top: 12px;
}

.usage-hero-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.usage-primary-window {
  margin-top: 8px;
}

.usage-mission-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mission-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mission-step.ok {
  border-color: rgba(47, 111, 78, 0.28);
  color: var(--green);
}

.mission-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: .55;
}

.usage-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
  gap: 12px;
  margin-top: 12px;
}

.usage-breakdown-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
  gap: 12px;
  margin-top: 12px;
}

.usage-chart-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.usage-chart-panel h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
}

.usage-donut-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
}

.usage-donut {
  width: min(270px, 70vw);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 20px var(--surface-overlay), 0 18px 44px var(--shadow-soft);
  -webkit-mask: radial-gradient(circle, transparent 0 47%, #000 48%);
  mask: radial-gradient(circle, transparent 0 47%, #000 48%);
}

.usage-donut-center {
  position: absolute;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.usage-donut-center span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.usage-donut-center strong {
  color: var(--ink);
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1;
}

.usage-stack-list {
  display: grid;
  gap: 8px;
}

.usage-stack-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.usage-stack-row strong {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.usage-stack-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.usage-stack-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.usage-swatch {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--usage-color);
  box-shadow: 0 0 0 1px var(--line);
}

.usage-simple-table {
  min-width: 820px;
}

.usage-note-panel {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.usage-note-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.compact-head {
  margin: 0 0 8px;
}

.compact-head h3 {
  margin: 0;
  color: var(--blue);
  font-size: 15px;
}

.usage-model-matrix {
  min-width: 1120px;
}

.usage-note {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0 5px 5px 0;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--rust);
  font-size: 11px;
  font-weight: 800;
}

.usage-cost {
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
}

.usage-rate-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 6px;
  min-width: 220px;
  margin-top: 6px;
}

.usage-rate-editor label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.usage-rate-editor input {
  min-height: 30px;
  padding: 5px 6px;
  font-size: 12px;
}

.compact-agent {
  padding: 10px;
}

.compact-agent.ok {
  border-color: rgba(47, 111, 78, 0.26);
}

.compact-agent.warn {
  border-color: rgba(163, 93, 31, 0.3);
}

.compact-usage {
  grid-template-columns: 1fr 1fr;
}

.compact-link {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.usage-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.usage-card.ok {
  border-color: rgba(47, 111, 78, 0.34);
  background: var(--status-green-surface);
}

.usage-card.warn {
  border-color: rgba(163, 93, 31, 0.36);
  background: var(--status-amber-surface);
}

.usage-card.bad {
  border-color: rgba(159, 47, 40, 0.32);
  background: rgba(255, 246, 244, 0.95);
}

.usage-card span {
  display: block;
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.usage-card strong {
  display: block;
  margin: 8px 0 5px;
  color: var(--blue);
  font-size: clamp(18px, 3vw, 31px);
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.usage-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.usage-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.usage-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}

.usage-table th,
.usage-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.usage-table th {
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.usage-list {
  display: grid;
  gap: 10px;
}

.usage-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.usage-row.alert {
  margin-top: 10px;
}

.usage-row.alert.ok {
  border-color: rgba(47, 111, 78, 0.34);
  background: var(--status-green-surface);
}

.usage-row.alert.warn {
  border-color: rgba(163, 93, 31, 0.36);
  background: var(--status-amber-surface);
}

.usage-row.alert.bad {
  border-color: rgba(159, 47, 40, 0.32);
  background: rgba(255, 246, 244, 0.95);
}

.memory-layout {
  display: grid;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px;
}

.memory-gate-panel {
  border-color: var(--line-strong);
  background: var(--gradient-panel), var(--panel);
}

.memory-gate-panel.ok {
  border-color: var(--status-green-border);
}

.memory-gate-panel.warn {
  border-color: var(--status-amber-border);
}

.memory-gate-panel.bad {
  border-color: var(--status-bad-border);
}

.memory-gate-topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.memory-gate-topline h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(32px, 8vw, 78px);
  line-height: .92;
  letter-spacing: 0;
}

.memory-gate-panel.ok .memory-gate-topline h2 {
  color: var(--green);
}

.memory-gate-panel.warn .memory-gate-topline h2 {
  color: var(--amber);
}

.memory-gate-panel.bad .memory-gate-topline h2 {
  color: var(--bad);
}

.memory-frame {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.memory-attention-strip {
  display: grid;
  grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.memory-attention-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.memory-attention-card.ok {
  border-color: var(--status-green-border);
  background: var(--status-green-surface);
}

.memory-attention-card.warn {
  border-color: var(--status-amber-border);
  background: var(--status-amber-surface);
}

.memory-attention-card.neutral {
  border-color: var(--status-neutral-border);
  background: var(--status-neutral-surface);
}

.memory-attention-card.bad {
  border-color: var(--status-bad-border);
  background: var(--status-bad-surface);
}

.memory-attention-card > span,
.memory-attention-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.memory-attention-card > strong,
.memory-attention-card div strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.memory-attention-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.memory-attention-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.memory-attention-number {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink) !important;
  background: var(--surface-overlay);
  font-size: 30px !important;
  line-height: 1;
}

.memory-frame-summary {
  max-width: 980px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

.memory-frame-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.memory-frame-grid article,
.memory-kv,
.memory-decision,
.memory-source-row,
.memory-check {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.memory-frame-grid span,
.memory-kv span,
.memory-decision span {
  display: block;
  color: var(--rust);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.memory-frame-grid strong,
.memory-kv strong,
.memory-decision strong,
.memory-source-row strong,
.memory-check strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.memory-operating-picture {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

#memory-state-model {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.memory-autonomy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.memory-gate-rail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 8px;
  background: var(--status-neutral-surface);
}

.memory-gate-rail-item {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.memory-gate-rail-item > span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--status-neutral-border);
  border-radius: 999px;
  color: var(--status-neutral-text);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.memory-gate-rail-item.open > span {
  color: var(--green);
  border-color: var(--status-green-border);
}

.memory-gate-rail-item strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.memory-gate-rail-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.memory-status-card,
.memory-system-card,
.memory-probe,
.memory-audit-row {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
}

.memory-status-card.ok,
.memory-system-card.ok,
.memory-probe.ok,
.memory-audit-row.ok {
  border-color: var(--status-green-border);
  background: var(--status-green-surface);
}

.memory-status-card.warn,
.memory-system-card.warn,
.memory-probe.warn {
  border-color: var(--status-amber-border);
  background: var(--status-amber-surface);
}

.memory-status-card.neutral,
.memory-system-card.neutral,
.memory-probe.neutral {
  border-color: var(--status-neutral-border);
  background: var(--status-neutral-surface);
}

.memory-status-card.bad,
.memory-system-card.bad,
.memory-probe.bad,
.memory-audit-row.bad {
  border-color: var(--status-bad-border);
  background: var(--status-bad-surface);
}

.memory-status-head {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.memory-light {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--status-green-bg);
}

.memory-status-card.warn .memory-light {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--status-amber-bg);
}

.memory-status-card.neutral .memory-light {
  background: var(--status-neutral-text);
  box-shadow: 0 0 0 3px var(--status-neutral-bg);
}

.memory-status-card.bad .memory-light {
  background: var(--bad);
  box-shadow: 0 0 0 3px var(--status-bad-bg);
}

.memory-status-head strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.memory-status-head p,
.memory-mini-row p,
.memory-probe > p,
.memory-audit-row p,
.memory-probe-hit p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.memory-status-detail {
  color: var(--status-neutral-text) !important;
}

.memory-status-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.memory-status-counts span,
.memory-mini-row > span,
.memory-probe-head span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.memory-status-counts .ok,
.memory-mini-row.ok > span,
.memory-probe.ok .memory-probe-head span {
  color: var(--green);
  border-color: var(--status-green-border);
}

.memory-status-counts .warn,
.memory-mini-row.warn > span,
.memory-probe.warn .memory-probe-head span {
  color: var(--amber);
  border-color: var(--status-amber-border);
}

.memory-status-counts .neutral,
.memory-mini-row.neutral > span,
.memory-probe.neutral .memory-probe-head span {
  color: var(--status-neutral-text);
  border-color: var(--status-neutral-border);
}

.memory-status-counts .bad,
.memory-mini-row.bad > span,
.memory-probe.bad .memory-probe-head span {
  color: var(--bad);
  border-color: var(--status-bad-border);
}

.memory-status-card details {
  margin-top: 10px;
}

.memory-status-card summary,
.memory-check summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.memory-mini-list,
.memory-system-list,
.memory-probe-list,
.memory-audit-list {
  display: grid;
  gap: 8px;
}

.memory-mini-list {
  margin-top: 8px;
}

.memory-mini-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
}

.memory-mini-row strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.memory-grid {
  display: grid;
  gap: 14px;
}

.memory-grid-primary {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
}

.memory-grid-secondary {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
}

.memory-check-list,
.memory-clerk-grid,
.memory-decision-list,
.memory-source-map {
  display: grid;
  gap: 10px;
}

.memory-check {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: start;
}

.memory-check.ok {
  border-color: var(--status-green-border);
  background: var(--status-green-surface);
}

.memory-check.warn {
  border-color: var(--status-amber-border);
  background: var(--status-amber-surface);
}

.memory-check.bad {
  border-color: var(--status-bad-border);
  background: var(--status-bad-surface);
}

.memory-check p,
.memory-decision p,
.memory-source-row p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.memory-check details {
  min-width: 0;
}

.memory-check summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.memory-check ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.memory-clerk-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.memory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.memory-action[disabled] {
  cursor: progress;
  opacity: .65;
}

.memory-output {
  min-height: 112px;
  max-height: 260px;
  margin: 12px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--terminal-bg);
  color: var(--terminal-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}

.memory-system-card {
  display: grid;
  gap: 10px;
}

.memory-system-head {
  display: grid;
  gap: 4px;
}

.memory-system-head span {
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.memory-system-card.ok .memory-system-head span {
  color: var(--green);
  border-color: var(--status-green-border);
}

.memory-system-card.warn .memory-system-head span {
  color: var(--amber);
  border-color: var(--status-amber-border);
}

.memory-system-card.neutral .memory-system-head span {
  color: var(--status-neutral-text);
  border-color: var(--status-neutral-border);
}

.memory-system-card.bad .memory-system-head span {
  color: var(--bad);
  border-color: var(--status-bad-border);
}

.memory-system-head strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.memory-system-head p,
.memory-note-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.memory-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.memory-system-card details {
  min-width: 0;
}

.memory-system-card summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.memory-note-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.memory-note-list p {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-overlay);
  overflow-wrap: anywhere;
}

.memory-source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.memory-source-row span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.memory-probe-head,
.memory-audit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.memory-probe-head {
  grid-template-columns: auto minmax(0, 1fr);
}

.memory-probe-head strong,
.memory-audit-row strong {
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.memory-probe-hit {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.memory-probe-hit span,
.memory-audit-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.memory-probe-hit strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 880px) {
  .memory-gate-topline,
  .memory-source-row {
    display: grid;
  }

  .memory-frame-grid,
  .memory-attention-strip,
  .memory-operating-picture,
  .memory-autonomy-grid,
  .memory-gate-rail,
  .memory-grid-primary,
  .memory-grid-secondary,
  .memory-clerk-grid,
  .memory-system-grid,
  .memory-check {
    grid-template-columns: 1fr;
  }

  #memory-state-model {
    grid-template-columns: 1fr;
  }

  .memory-gate-topline h2 {
    font-size: clamp(34px, 14vw, 58px);
  }
}

.row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.badge.ok {
  color: var(--green);
  border-color: rgba(47, 111, 78, 0.30);
}

.badge.bad {
  color: var(--bad);
  border-color: rgba(159, 47, 40, 0.28);
  background: rgba(255, 246, 244, 0.95);
}

.badge.warn {
  color: var(--amber);
  border-color: rgba(163, 93, 31, 0.32);
  background: var(--status-amber-surface);
}

.attempts {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  overflow: auto;
}

.attempt {
  min-width: 190px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.attempt.failed {
  border-color: rgba(159, 47, 40, 0.32);
  background: rgba(255, 246, 244, 0.95);
}

.attempt.success {
  border-color: rgba(47, 111, 78, 0.34);
  background: var(--status-green-surface);
}

.attempt b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 999px;
  color: var(--active-text);
  background: var(--active-bg);
}

.attempt strong {
  display: block;
  margin-top: 4px;
}

.attempt span {
  color: var(--muted);
  font-size: 12px;
}

.error-text {
  color: var(--bad);
  overflow-wrap: anywhere;
}

.small {
  font-size: 11px;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  margin-top: 8px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--grey-rail);
}

.segmented button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  padding: 6px 10px;
  font-size: 12px;
}

.segmented button.active {
  color: var(--active-text);
  background: var(--active-bg);
}

@media (max-width: 1180px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .stack {
    display: block;
  }

  .signal-page-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .layout,
  .files-page-layout,
  .projects-page-layout,
  .loops-page-layout,
  .todo-page-layout,
  .calendar-page-layout,
  .crons-page-layout,
  .agent-board-layout,
  .mission-layout,
  .signal-page-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 10px;
  }

  .files-page-layout,
  .projects-page-layout,
  .loops-page-layout,
  .todo-page-layout,
  .calendar-page-layout,
  .crons-page-layout,
  .agent-board-layout,
  .mission-layout,
  .signal-page-layout {
    padding: 10px;
  }

  .todo-board {
    grid-template-columns: 1fr;
  }

  .todo-review-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-height: 0;
  }

  .todo-review-heading {
    order: -1;
    justify-items: start;
    text-align: left;
  }

  .todo-pipeline-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .todo-search-wrap {
    align-self: stretch;
  }

  .todo-list-head,
  .todo-item-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .todo-list-head {
    display: none;
  }

  .todo-reader {
    max-height: none;
    padding: 10px;
  }

  .calendar-board,
  .crons-board,
  .cron-detail-panel,
  .calendar-detail-panel,
  .calendar-editor-panel {
    max-height: none;
    padding: 10px;
  }

  .calendar-command-bar,
  .calendar-filter-row {
    grid-template-columns: 1fr;
    display: grid;
    gap: 10px;
    align-items: stretch;
  }

  .calendar-month-controls {
    justify-content: stretch;
  }

  .calendar-month-controls button {
    flex: 1 1 0;
  }

  .calendar-source-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cron-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b-report-grid,
  .b-report-checks {
    grid-template-columns: 1fr;
  }

  .b-report-head,
  .b-report-tile > div:first-child {
    align-items: start;
  }

  .calendar-week-head {
    display: none;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-day {
    min-height: 112px;
  }

  .calendar-day.outside-month {
    display: none;
  }

  .calendar-form-row {
    grid-template-columns: 1fr;
  }

  .todo-item-row {
    min-height: 0;
    padding: 10px;
  }

  .todo-row-pipeline,
  .todo-row-owner,
  .todo-row-updated {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
  }

  .signal-reader {
    max-height: none;
  }

  .loops-create-panel,
  .loops-detail-panel {
    position: static;
    max-height: none;
  }

  .loop-form-row {
    grid-template-columns: 1fr;
  }

  .signal-command-bar {
    gap: 10px;
    min-height: 0;
  }

  .signal-review-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    min-height: 0;
  }

  .signal-review-heading {
    order: -1;
    justify-items: start;
    text-align: left;
  }

  .signal-search-wrap {
    align-self: stretch;
  }

  .mission-output {
    position: static;
    max-height: none;
  }

  .mission-output-text {
    max-height: none;
    min-height: 320px;
  }

  .signal-detail-backdrop {
    background: rgba(23, 23, 23, 0.32);
  }

  .signal-detail-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 88dvh;
    border-radius: 12px 12px 0 0;
    transform: translateY(calc(100% + 24px));
  }

  .signal-detail-panel.is-open {
    transform: translateY(0);
  }

  .signal-date-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .files-page-layout {
    grid-template-areas:
      "command"
      "filters"
      "index"
      "preview";
    gap: 10px;
  }

  .files-command-bar,
  .files-filter-rail,
  .file-preview-panel {
    position: static;
    max-height: none;
  }

  .files-command-bar {
    grid-template-columns: 1fr;
  }

  .file-command-actions {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .files-filter-rail {
    grid-template-columns: 1fr;
  }

  .filter-rail-section {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filter-rail-section .rail-label,
  .files-rail-note {
    grid-column: 1 / -1;
  }

  .filter-chip,
  .scope-chip {
    min-width: 0;
    justify-content: center;
    gap: 6px;
    padding-inline: 7px;
    font-size: 12px;
  }

  .file-table-head {
    display: none;
  }

  .file-table-body {
    max-height: none;
  }

  .file-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    min-height: 70px;
  }

  .file-row > span:nth-child(3),
  .file-row > span:nth-child(4) {
    grid-column: 2;
    justify-self: end;
  }

  .file-name-cell {
    grid-row: 1 / span 3;
  }

  .file-meta-grid {
    grid-template-columns: 1fr;
  }

  .project-inspector,
  .loops-detail-panel,
  .agent-board-inspector {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .loops-detail-body {
    max-height: none;
  }

  .project-inspector {
    display: none;
  }

  .project-sheet-modal {
    align-items: end;
    place-items: end center;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .project-sheet-card {
    width: min(100%, 520px);
    max-height: min(82dvh, 760px);
    padding: 14px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  .project-sheet-card .panel-head {
    flex-direction: row;
    align-items: flex-start;
  }

  .project-sheet-card .project-detail-body {
    min-height: 0;
    max-height: calc(82dvh - 112px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .project-sheet-card #project-sheet-close {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .agent-board-layout {
    padding-bottom: 92px;
  }

  .agent-board-inspector {
    display: none;
  }

  .agent-inspector-backdrop.is-open {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: block;
    background: rgba(23, 23, 23, 0.12);
  }

  .agent-board-inspector.is-floating {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 80;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 72px);
    overflow: auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-color: rgba(23, 23, 23, 0.22);
    border-radius: 10px;
    background: var(--surface-overlay);
    box-shadow: 0 18px 58px rgba(23, 23, 23, 0.24);
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
  }

  .agent-board-inspector.is-floating::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: rgba(23, 23, 23, 0.18);
  }

  .agent-inspector-close {
    display: inline-flex;
  }

  .agent-board-inspector.is-floating > .panel-head {
    align-items: center;
    margin-bottom: 6px;
  }

  .agent-board-inspector.is-floating > .panel-head h2,
  .agent-board-inspector.is-floating > .panel-head .muted {
    display: none;
  }

  .agent-board-inspector .agent-node-card.selected {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    padding: 9px;
  }

  .agent-board-inspector .agent-node-card.selected .agent-node-top {
    grid-row: 1 / span 3;
  }

  .agent-board-inspector .agent-node-card.selected em,
  .agent-board-inspector .agent-node-card.selected p {
    display: none;
  }

  .agent-board-inspector .agent-node-card.selected strong {
    align-self: center;
  }

  .agent-board-inspector.is-floating .agent-chatbox {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .agent-board-inspector.is-floating .agent-inspector-pane.is-active,
  .agent-board-inspector.is-floating .agent-files-panel {
    min-height: 0;
  }

  .agent-board-inspector.is-floating .agent-files-panel {
    grid-template-rows: auto auto auto minmax(180px, 1fr);
  }

  .agent-board-inspector.is-floating .agent-file-editor {
    min-height: clamp(180px, 30dvh, 320px);
    max-height: 38dvh;
    resize: none;
  }

  .agent-chat-messages {
    flex: 1 1 auto;
    min-height: clamp(150px, 28dvh, 300px);
    max-height: clamp(150px, 28dvh, 300px);
  }

  .agent-board-inspector.is-floating .agent-detail-drawer {
    flex: 0 0 auto;
    min-height: 0;
    padding-top: 10px;
    scroll-snap-align: start;
  }

  .agent-board-inspector.is-floating .agent-detail-drawer summary {
    display: none;
  }

  .agent-board-inspector.is-floating .agent-detail {
    max-height: none;
    overflow: visible;
    padding-top: 0;
  }

  .agent-board-inspector.is-floating .agent-detail-section {
    padding: 9px;
  }

  .agent-board-inspector.is-floating .agent-detail-section h3 {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .agent-board-inspector.is-floating .agent-detail-section p,
  .agent-board-inspector.is-floating .agent-detail-section li {
    font-size: 12px;
  }

  .agent-board-inspector.is-floating .agent-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-board-inspector.is-floating .agent-session-menu summary {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .agent-board-inspector.is-floating .agent-session-options {
    max-height: min(240px, 32dvh);
  }

  .stack {
    display: flex;
  }

  .messages {
    min-height: 52vh;
    max-height: none;
  }

  .list,
  .list.compact,
  .file-content,
  .file-tree {
    max-height: 40vh;
  }

  .file-preview-panel .file-content {
    min-height: 45vh;
    max-height: 60vh;
  }

  .usage-cards {
    grid-template-columns: 1fr 1fr;
  }

  .usage-hero-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usage-board-grid {
    grid-template-columns: 1fr;
  }

  .usage-breakdown-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 799px) {
  :root {
    --mobile-topbar-offset: calc(67px + env(safe-area-inset-top));
    --mobile-rail-height: 50px;
    --mobile-drawer-top: calc(var(--mobile-topbar-offset) + var(--mobile-rail-height));
  }

  body.command-drawer-open {
    overflow: hidden;
  }

  .security-pair-form,
  .pair-output {
    grid-template-columns: 1fr;
  }

  .pair-qr {
    justify-self: center;
  }

  .signal-command-bar,
  .signal-list-head,
  .signal-item-row {
    grid-template-columns: 1fr;
  }

  .signal-app-page .signal-page-layout {
    padding: 10px 10px 10px 34px;
  }

  .signal-list-head {
    display: none;
  }

  .signal-score {
    justify-self: start;
  }

  .signal-inline-actions {
    justify-content: flex-start;
    opacity: 1;
    pointer-events: auto;
  }

  .topbar {
    align-items: center;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  }

  .menu-scampi-icon {
    width: 30px;
    height: 30px;
  }

  .mobile-command-rail {
    position: sticky;
    top: var(--mobile-topbar-offset);
    z-index: 65;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 10px;
    background: var(--chrome);
    backdrop-filter: blur(12px);
  }

  .mobile-command-rail button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 6px 5px 8px;
    color: var(--blue);
    background: var(--control-bg);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sessions-drawer-open .mobile-command-rail [data-drawer-action="sessions"],
  body.project-drawer-open .mobile-command-rail [data-drawer-action="projects"],
  body.live-work-drawer-open .mobile-command-rail [data-drawer-action="live-work"],
  body.workspace-drawer-open .mobile-command-rail [data-drawer-action="workspace"],
  body.artifact-drawer-open .mobile-command-rail [data-drawer-action="artifacts"] {
    color: var(--active-text);
    background: var(--active-bg);
  }

  body.sessions-drawer-open .mobile-command-rail [data-drawer-action="sessions"]::after,
  body.project-drawer-open .mobile-command-rail [data-drawer-action="projects"]::after,
  body.live-work-drawer-open .mobile-command-rail [data-drawer-action="live-work"]::after,
  body.workspace-drawer-open .mobile-command-rail [data-drawer-action="workspace"]::after,
  body.artifact-drawer-open .mobile-command-rail [data-drawer-action="artifacts"]::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 5px;
    left: 8px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .command-drawer-backdrop {
    position: fixed;
    top: var(--mobile-drawer-top);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 64;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: var(--backdrop);
    transition: opacity 160ms ease;
  }

  body.command-drawer-open .command-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .session-drawer {
    top: var(--mobile-drawer-top);
    z-index: 66;
    width: min(390px, calc(100vw - 24px));
  }

  .project-drawer,
  .workspace-drawer,
  .artifact-drawer {
    top: var(--mobile-drawer-top);
    z-index: 66;
    width: min(390px, calc(100vw - 24px));
  }

  .live-work-board {
    position: fixed;
    top: var(--mobile-drawer-top);
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 66;
    width: min(390px, calc(100vw - 24px));
    height: calc(100dvh - var(--mobile-drawer-top));
    border-right: 0;
    border-bottom: 0;
    border-radius: 8px 0 0 0;
    transform: translateX(100%);
    transition: transform 180ms ease;
  }

  .live-work-board.is-open {
    transform: translateX(0);
  }

  .live-work-head-actions button {
    display: inline-flex;
    align-items: center;
  }

  .session-drawer-tab,
  .project-drawer-tab,
  .workspace-drawer-tab,
  .artifact-drawer-tab {
    display: none;
  }

  .session-drawer .sessions-panel {
    min-height: calc(100dvh - var(--mobile-drawer-top));
    max-height: calc(100dvh - var(--mobile-drawer-top));
  }

  .project-drawer .project-board-panel,
  .workspace-drawer .workspace-panel,
  .artifact-drawer .artifact-panel {
    min-height: calc(100dvh - var(--mobile-drawer-top));
    max-height: calc(100dvh - var(--mobile-drawer-top));
    background: var(--surface-raised);
  }

  .project-drawer .project-desktop-link {
    display: none;
  }

  .mobile-project-picker {
    display: grid;
    gap: 6px;
    padding: 10px 0 2px;
    border-top: 1px solid var(--line);
  }

  .mobile-project-picker label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mobile-project-picker select {
    min-height: 44px;
    background: var(--input-bg);
    font-weight: 750;
  }

  .project-drawer-layout,
  .workspace-drawer-layout {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .project-board-list {
    display: none;
  }

  .project-board-drawer-card {
    display: block;
    min-height: 44px;
    width: 100%;
    padding: 7px 12px;
    overflow: hidden;
    background: var(--surface);
  }

  .project-board-drawer-card span,
  .project-board-drawer-card strong,
  .project-board-drawer-card p {
    min-width: 0;
  }

  .project-board-drawer-card strong {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-board-drawer-card p {
    display: none;
  }

  .project-board-drawer-card .product-card-tags {
    display: none;
  }

  .project-drawer-detail {
    min-height: calc(100dvh - var(--mobile-drawer-top) - 178px);
    background: var(--surface);
  }

  .workspace-tree-pane {
    min-height: min(34dvh, 290px);
    background: var(--surface);
  }

  .workspace-preview-pane {
    min-height: min(44dvh, 380px);
    background: var(--surface);
  }

  .workspace-tree {
    max-height: min(34dvh, 290px);
  }

  .artifact-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .artifact-preview,
  .artifact-file-icon {
    width: 82px;
    height: 68px;
  }

  .sessions-panel .list {
    max-height: calc(100dvh - var(--mobile-drawer-top) - 62px);
  }

  .brand-lockup {
    justify-self: center;
  }

  .mini-avatar,
  .brand-lockup .eyebrow {
    display: none;
  }

  .brand-lockup h1 {
    font-size: 18px;
    text-align: center;
  }

  .top-actions {
    gap: 6px;
  }

  .room-link {
    display: none;
  }

  .layout {
    gap: 10px;
    height: calc(100dvh - var(--mobile-drawer-top));
    min-height: 0;
    padding: 10px;
  }

  .files-page-layout {
    padding: 8px;
  }

  .mission-split {
    grid-template-columns: 1fr;
  }

  .files-command-bar,
  .files-filter-rail,
  .files-index-panel,
  .file-preview-panel {
    padding: 10px;
  }

  .filter-rail-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .file-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .file-row > span:nth-child(3),
  .file-row > span:nth-child(4) {
    grid-column: auto;
    justify-self: start;
  }

  .file-name-cell {
    grid-row: auto;
  }

  .chat-panel {
    order: 1;
    min-height: 0;
    height: 100%;
    padding: 10px;
  }

  .stack {
    order: 3;
  }

  .panel-head {
    flex-direction: column;
  }

  .chat-panel .panel-head {
    margin-bottom: 6px;
  }

  .chat-controls,
  .model-select,
  .thinking-select,
  .agent-select {
    width: 100%;
    max-width: none;
  }

  .chat-controls {
    justify-content: stretch;
  }

  .chat-panel .eyebrow,
  #chat-meta {
    display: none;
  }

  .token-pill {
    max-width: 100%;
  }

  .messages {
    min-height: 0;
    max-height: none;
    padding-bottom: 8px;
  }

  .msg {
    padding: 10px;
  }

  .msg-actions {
    position: static;
    margin: -2px 0 7px;
    opacity: 1;
    transform: none;
  }

  .msg-actions button {
    min-height: 30px;
  }

  .composer {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  .composer-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "tools submit"
      "context context"
      "routing routing";
    gap: 8px;
    align-items: start;
  }

  .composer-footer-main {
    display: contents;
  }

  .composer-tools-menu {
    grid-area: tools;
    gap: 6px;
    min-width: 156px;
    overflow: visible;
  }

  .composer-routing-controls,
  .composer-selects {
    width: 100%;
  }

  .composer-routing-controls {
    grid-area: routing;
    order: 3;
  }

  .composer-tools-menu {
    order: 1;
  }

  .composer-footer-main > .token-pill {
    grid-area: context;
    order: 2;
    align-self: center;
    justify-self: stretch;
    min-width: 0;
    max-width: 100%;
    min-height: 30px;
    justify-content: flex-start;
    padding-inline: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .composer-selects .agent-select,
  .composer-selects .model-select,
  .composer-selects .thinking-select {
    flex: 1 1 140px;
    min-width: 0;
  }

  .composer-submit {
    grid-area: submit;
    min-width: 76px;
    justify-self: end;
  }

  .composer-tool,
  .composer .primary-action {
    min-width: 48px;
    min-height: 44px;
    padding: 8px 9px;
  }

  .composer textarea {
    min-width: 0;
    min-height: 40px;
    padding: 9px;
  }

  .usage-cards,
  .compact-usage {
    grid-template-columns: 1fr;
  }

  .usage-hero-cards {
    grid-template-columns: 1fr;
  }

  .usage-layout {
    padding: 10px;
  }

  .usage-donut-wrap {
    min-height: 230px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .whiteboard-actions {
    justify-content: flex-start;
  }

  .product-card-form-grid {
    grid-template-columns: 1fr;
  }

  .project-whiteboard,
  .project-inspector,
  .agent-board-stage,
  .agent-board-inspector {
    padding: 10px;
  }

  .agent-grid,
  .agent-detail-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .session-drawer,
  .project-drawer,
  .workspace-drawer,
  .artifact-drawer,
  .live-work-board {
    width: 100vw;
  }

  .session-drawer .sessions-panel,
  .project-drawer .project-board-panel,
  .workspace-drawer .workspace-panel,
  .artifact-drawer .artifact-panel {
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-work-board,
  .live-work-detail {
    scroll-behavior: auto;
    transition: none;
  }
}

/* Token usage ledger hierarchy: scoped to usage.html to preserve shared Control Box surfaces. */
.usage-ledger-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding-block: clamp(10px, 2vw, 22px) 40px;
}

.usage-ledger-layout .panel {
  min-width: 0;
}

.usage-posture {
  padding: clamp(18px, 3vw, 30px);
  border-color: var(--line-strong);
  background: var(--panel);
}

.usage-posture-head,
.usage-section-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.usage-posture h2,
.usage-section-head h2 {
  margin: 2px 0 0;
}

.usage-freshness {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
}

.usage-posture-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  gap: clamp(18px, 4vw, 48px);
  align-items: end;
  margin-top: clamp(22px, 4vw, 42px);
}

.usage-posture-sentence {
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 5.2vw, 66px);
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: .98;
}

.usage-takeaway {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--success);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.usage-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(24px, 4vw, 42px);
  border-top: 1px solid var(--line);
}

.usage-metric {
  min-width: 0;
  padding: 15px 16px 0 0;
}

.usage-metric + .usage-metric {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.usage-metric span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.usage-metric strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: clamp(18px, 3vw, 30px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.usage-metric p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.usage-runway-panel {
  padding: clamp(16px, 2.5vw, 24px);
}

.usage-runway {
  display: flex;
  min-height: 190px;
  gap: clamp(4px, 1vw, 12px);
  align-items: stretch;
  margin-top: 18px;
  padding: 12px 10px 8px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to top, transparent 33%, var(--line) 33%, var(--line) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, var(--line) 66%, var(--line) calc(66% + 1px), transparent calc(66% + 1px));
  scrollbar-width: thin;
}

.usage-runway-day {
  display: grid;
  min-width: 54px;
  flex: 1 0 54px;
  grid-template-rows: 24px 1fr 24px;
  gap: 5px;
  align-items: end;
  text-align: center;
}

.usage-runway-value,
.usage-runway-label {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.usage-runway-bar {
  display: block;
  width: min(30px, 64%);
  height: var(--runway-height);
  min-height: 5px;
  margin-inline: auto;
  border-radius: 3px 3px 1px 1px;
  background: var(--success);
  opacity: .78;
}

.usage-runway-caption {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.usage-evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 14px;
}

.usage-provider-panel,
.usage-reset-panel,
.usage-model-panel,
.usage-agent-panel,
.usage-notes-panel {
  padding: clamp(16px, 2.5vw, 22px);
}

.usage-ranked-list,
.usage-agent-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.usage-ranked-row > div:first-child,
.usage-agent-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.usage-ranked-row strong,
.usage-agent-row strong {
  color: var(--ink);
  font-size: 13px;
}

.usage-ranked-row span,
.usage-agent-row p {
  color: var(--muted);
  font-size: 11px;
}

.usage-ranked-row p,
.usage-agent-row p {
  margin: 5px 0 0;
}

.usage-ranked-track {
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-muted);
}

.usage-ranked-track span {
  display: block;
  width: var(--ranked-width);
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  opacity: .7;
}

.usage-availability {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface-muted);
}

.usage-availability strong {
  color: var(--amber);
  font-size: 13px;
}

.usage-availability span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.usage-model-panel .usage-table-wrap {
  margin-top: 18px;
}

.usage-ledger-layout .usage-table-wrap:focus-visible,
.usage-mix-detail summary:focus-visible {
  outline: 2px solid var(--select-focus);
  outline-offset: 3px;
}

.usage-agent-row {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.usage-agent-row > div:last-child {
  text-align: right;
}

.usage-mix-detail {
  padding: 0;
  overflow: hidden;
}

.usage-mix-detail summary {
  display: flex;
  min-height: 74px;
  padding: 17px 20px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.usage-mix-detail summary::-webkit-details-marker { display: none; }
.usage-mix-detail summary strong { display: block; margin-top: 3px; color: var(--ink); font-size: 18px; }
.usage-mix-detail[open] summary { border-bottom: 1px solid var(--line); }

.usage-mix-body {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
}

.usage-mix-body .usage-donut-wrap { min-height: 230px; }
.usage-mix-body .usage-donut { width: min(210px, 60vw); opacity: .82; }

.usage-quality-badge {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.usage-quality-badge.is-observed { border-color: var(--status-green-border); color: var(--success); background: var(--status-green-bg); }
.usage-quality-badge.is-incomplete { border-color: var(--status-amber-border); color: var(--amber); background: var(--status-amber-bg); }
.usage-notes-panel .usage-note-panel { margin-top: 18px; }

@media (max-width: 820px) {
  .usage-posture-copy,
  .usage-evidence-grid,
  .usage-mix-body { grid-template-columns: 1fr; }

  .usage-posture-sentence { font-size: clamp(30px, 9vw, 54px); }
  .usage-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-metric:nth-child(3) { padding-left: 0; border-left: 0; }
  .usage-metric:nth-child(n+3) { margin-top: 14px; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .usage-posture-head,
  .usage-section-head { display: grid; grid-template-columns: 1fr; }
  .usage-primary-window { width: 100%; }
  .usage-primary-window button { flex: 1; }
  .usage-posture-copy { margin-top: 26px; }
  .usage-takeaway { font-size: 13px; }
  .usage-metric-strip { grid-template-columns: 1fr; }
  .usage-metric,
  .usage-metric + .usage-metric { padding: 13px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .usage-agent-row { align-items: flex-start; }
  .usage-runway { min-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .usage-runway-bar,
  .usage-ranked-track span { transition: none; }
}

.migration-layout {
  display: grid;
  gap: 18px;
  padding: 18px clamp(14px, 3vw, 28px) 32px;
}

.migration-hero,
.migration-next-panel {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 14px 0 20px;
}

.migration-hero h2,
.migration-next-panel h3 {
  margin: 4px 0 8px;
  color: var(--ink);
  letter-spacing: 0;
}

.migration-hero h2 {
  font-size: clamp(30px, 5vw, 56px);
  line-height: .95;
}

.migration-next-panel h3 {
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.05;
}

.migration-progress-card {
  display: grid;
  gap: 7px;
  min-width: min(280px, 100%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.migration-progress-card strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.migration-progress-card span,
.migration-phase-head p,
.migration-item small,
.migration-item em {
  color: var(--muted);
}

.migration-progress-track,
.migration-phase-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface);
}

.migration-progress-track span,
.migration-phase-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .18s ease;
}

.migration-next-panel {
  align-items: flex-start;
  padding-top: 4px;
}

.migration-board-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.migration-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
  min-width: min(100%, 980px);
}

.migration-phase {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 180px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.migration-phase.complete {
  border-color: var(--status-green-border);
  background: var(--status-green-bg);
}

.migration-phase-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.migration-phase-head h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
}

.migration-phase-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.migration-phase-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.migration-items {
  display: grid;
  gap: 8px;
}

.migration-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 56px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.migration-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.migration-checkmark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
}

.migration-checkmark::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}

.migration-item.done .migration-checkmark {
  border-color: var(--success);
  background: var(--success);
}

.migration-item.done .migration-checkmark::after {
  border-color: var(--panel);
}

.migration-item-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.migration-item strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
}

.migration-item small {
  font-size: 12px;
  line-height: 1.35;
}

.migration-item em {
  font-size: 11px;
  font-style: normal;
}

.migration-item.done strong,
.migration-item.done small {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: .64;
}

.migration-item.saving {
  opacity: .65;
}

@media (max-width: 760px) {
  .migration-hero,
  .migration-next-panel {
    display: grid;
  }

  .migration-progress-card {
    width: 100%;
  }

  .migration-board {
    grid-template-columns: 1fr;
  }
}

/* Customer Journey (Release 1) */

.cj-mobile-picker {
  display: none;
}

/* --- Docket board (Gate 1A) -------------------------------------------
   Warm-paper ledger system approved in Figma file WVk8y46SEBQti0ZB7nhf4o,
   frame 18:6. Tokens and rules below are scoped under .cj-dock-shell /
   .cj-dock-page so no other Themis page inherits them. Flat hairline
   rules, mono REC/stage headers, stamp badges (not pills), ink/rust/green
   semantic states — the generic rounded whiteboard/status-pill look this
   replaces lives only in the shared .project-card/.status-pill rules used
   by other pages, untouched here.

   Typography (Gate 1A K2): the approved frame's declared type stack is
   Inter (proportional) + IBM Plex Mono (design gate handoff,
   2026-08-13-themis-docket-create-project-gate.md ss11: "Inter plus IBM
   Plex Mono ... No brand typeface has been supplied"). Neither font is
   installed on this host or loaded anywhere else in this app, so every
   browser here was silently substituting a system sans for the CSS
   `font-family: Inter, ...` fallback stack — self-hosted below so the
   approved family actually renders instead of degrading.

   CJ-N Major 4: registered under Customer-Journey-specific family aliases,
   not under the plain family names. An @font-face registration is
   document-global, so registering `Inter` would have supplied a font to the
   pre-existing `font-family: Inter, ...` declarations at the top of this
   shared stylesheet (:root, .msg-table) and silently re-typeset every other
   Themis page that loads it — a change no visual gate reviewed. The alias
   is used only by --cj-sans / --cj-mono, so exactly the surfaces the
   Customer Journey gates reviewed get these files and nothing else moves.
   The files themselves are unchanged and tracked in the repository, with
   their hashes and licence provenance in the handoff's asset manifest. */
@font-face {
  font-family: 'CJ Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'CJ IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'CJ IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'CJ IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'CJ IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700.woff2') format('woff2');
}

/* The Customer Journey page itself, so the one reviewed element that sits
   outside .cj-dock-shell — the unlock modal, a sibling of the shell — keeps
   the typography its own gate reviewed it with. Before the alias above, that
   modal was picking the self-hosted files up by accident, through the
   pre-existing `font-family: Inter, ...` on :root; scoping it here is what
   makes the alias a no-op for this page while it reverts the unreviewed
   change to every other page. The two tokens are repeated rather than moved
   so .cj-dock-shell stays self-contained exactly as reviewed. */
.cj-dock-body {
  --cj-sans: 'CJ Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cj-mono: 'CJ IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-family: var(--cj-sans);
}

.cj-dock-shell {
  --cj-paper: #f4f1e9;
  --cj-ground: #e9e4d8;
  --cj-ink: #1e1b16;
  --cj-muted: #86806f;
  /* The frames draw two muted steps, not one: --cj-muted is the quiet
     interface grey (the board's Dismiss, card tallies), --cj-muted-ink the
     darker on-paper grey the approved exports print outlined marks in — the
     sheet's DRAFT stamp, the unpressed status stamps, the category chips. */
  --cj-muted-ink: #6e675c;
  --cj-hairline: #c8c0ae;
  --cj-rust: #9a3b22;
  --cj-green: #2e5a3c;
  --cj-sans: 'CJ Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cj-mono: 'CJ IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: var(--cj-ground);
  color: var(--cj-ink);
  font-family: var(--cj-sans);
}

/* K1 — 55px paper topbar, left THEMIS | CUSTOMER PROJECTS mono lockup,
   right J. MICHELS, hairline rule. The shared .topbar is a 3-column grid
   that centers the middle column and has no user-label slot; both are
   wrong for this frame, so this overrides layout mode, not just color. */
.cj-dock-shell .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  padding: 0 60px;
  background: var(--cj-paper);
  border-bottom: 1px solid var(--cj-hairline);
  box-shadow: none;
  backdrop-filter: none;
}

/* No mascot tile, no dark-mode/refresh affordances on this board — the
   approved frame shows only the text lockup and the user label. These
   controls stay in the DOM (customer-journey.js/theme.js wire them
   directly and are not null-safe) but are not part of this gate's board. */
.cj-dock-shell .app-menu,
.cj-dock-shell .theme-toggle,
.cj-dock-shell .refresh-button {
  display: none;
}

.cj-dock-shell .brand-lockup {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--cj-mono);
}

.cj-dock-shell .brand-lockup h1 {
  font-family: var(--cj-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-ink);
}

.cj-dock-shell .brand-lockup .brand-subtitle {
  position: relative;
  margin: 0;
  padding-left: 11px;
  font-family: var(--cj-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-muted);
  border-left: 1px solid var(--cj-hairline);
}

.cj-dock-topbar-user {
  font-family: var(--cj-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-dock-shell .top-actions {
  display: flex;
  align-items: center;
}

.cj-dock-page {
  padding: 34px 60px 28px;
  display: flex;
  flex-direction: column;
  font-family: var(--cj-sans);
}

/* The `hidden` attribute is only a user-agent `display: none`, so the rule
   directly above silently outranks it: the board stayed laid out underneath
   the full-page sheet and the record workspace, and once the board grew past
   the fold it scrolled the document — which puts a scrollbar over a surface
   measured against a 1440-wide frame and shifts every landmark on it. Both
   full-page surfaces set `dockPage.hidden = true` and both meant it. */
.cj-dock-page[hidden] {
  display: none;
}

.cj-dock-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cj-dock-titlebar h2 {
  margin: 0;
  font-family: var(--cj-sans);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cj-ink);
}

.cj-dock-subtitle {
  margin: 4px 0 0;
  font-family: var(--cj-sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--cj-muted);
}

.cj-dock-titlebar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
  text-align: right;
}

.cj-dock-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--cj-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cj-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.cj-dock-link:hover,
.cj-dock-link:focus-visible {
  color: var(--cj-ink);
}

/* K5 — Dismiss is a quiet secondary action, not visual parity with the
   primary "Open record" link: no underline, muted only. */
.cj-dock-link-quiet {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--cj-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cj-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cj-dock-link-quiet:hover,
.cj-dock-link-quiet:focus-visible {
  color: var(--cj-ink);
}

.cj-dock-button-primary {
  background: var(--cj-ink);
  color: var(--cj-paper);
  border: none;
  border-radius: 2px;
  padding: 11px 20px;
  font-family: var(--cj-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.cj-dock-button-primary:hover,
.cj-dock-button-primary:focus-visible {
  background: color-mix(in srgb, var(--cj-ink) 85%, var(--cj-paper));
}

/* K5 — plain mono directly under the button, not a keycap box riding its
   own row lower down the page. */
.cj-dock-titlebar-meta {
  width: 100%;
  margin: 4px 0 0;
  text-align: right;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-dock-banner {
  margin-top: 31px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--cj-ink);
  padding: 12px 20px;
  font-family: var(--cj-sans);
}

.cj-dock-banner-rec {
  font-family: var(--cj-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.cj-dock-banner-summary {
  flex: 1;
  min-width: 220px;
  font-size: 0.85rem;
}

/* K5 — the filed date sits in the same size/color continuum as the rest
   of the banner line, not de-emphasized small/gray. */
.cj-dock-banner-summary .muted {
  color: var(--cj-ink);
  font-size: inherit;
}

.cj-dock-banner-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* R3 (Audrey Gate 1A re-review) — "Open record" is the banner's primary
   action and reads in ink, restoring the hierarchy over the quiet
   "Dismiss" (.cj-dock-link-quiet, unchanged muted/no-underline). */
.cj-dock-banner-actions .cj-dock-link {
  color: var(--cj-ink);
}

/* Both banner actions are <button>s, so the base rule's 38px min-height was
   setting the banner's height: 63px against the frame's 47. Cleared here,
   the strip is the stamp's own height plus its padding, as drawn. */
.cj-dock-banner-actions .cj-dock-link,
.cj-dock-banner-actions .cj-dock-link-quiet {
  min-height: 0;
}

.cj-dock-meta-row {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-dock-empty,
.cj-dock-error {
  margin-top: 16px;
  font-family: var(--cj-sans);
  font-size: 0.9rem;
  color: var(--cj-muted);
}

.cj-dock-error {
  color: var(--cj-rust);
}

.cj-dock-grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 60px;
  align-items: start;
}

/* Cards need a single honest reading column on a narrow screen.  Keeping the
   desktop's three tracks here would leave each ledger value competing with
   two empty columns and the NEXT due-date column. */
@media (max-width: 760px) {
  .cj-dock-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.cj-dock-card {
  cursor: pointer;
  background: var(--cj-paper);
  border: 1px solid var(--cj-hairline);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.cj-dock-card:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

/* K4 — one hairline under the REC/ordinal strip (was missing entirely). */
.cj-dock-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cj-hairline);
  font-family: var(--cj-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--cj-muted);
}

.cj-dock-card-title {
  margin: 12px 0 0;
  font-family: var(--cj-sans);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cj-ink);
}

.cj-dock-card-subtitle {
  margin: 2px 0 0;
  font-family: var(--cj-sans);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--cj-muted);
}

/* K4 — one hairline above the ledger (already present, kept). */
.cj-dock-ledger {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--cj-hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--cj-sans);
}

.cj-dock-ledger-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 6px;
  align-items: baseline;
  font-size: 0.74rem;
}

.cj-dock-ledger-row dt {
  font-family: var(--cj-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cj-muted);
}

.cj-dock-ledger-row dd {
  min-width: 0;
  margin: 0;
  font-weight: 400;
  color: var(--cj-ink);
  overflow-wrap: anywhere;
  white-space: normal;
}

/* NEXT's right-aligned due date (K3) — mono, matching REC/ordinal voice. */
.cj-dock-ledger-row dd.cj-dock-ledger-due {
  font-family: var(--cj-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cj-ink);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* K4 — no rule around the footer, no stamp/held divider: plain flex gap. */
.cj-dock-card-foot {
  margin-top: 16px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cj-dock-stamp {
  display: inline-block;
  border: 1px solid var(--cj-ink);
  padding: 3px 9px;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
  white-space: nowrap;
}

.cj-dock-stamp-rust {
  border-color: var(--cj-rust);
  color: var(--cj-rust);
}

.cj-dock-stamp-green {
  border-color: var(--cj-green);
  color: var(--cj-green);
}

/* K5 — HELD N D: rust mono caps, not mixed-case humanist bold. */
.cj-dock-held {
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-rust);
}

/* K3 — real "NOTES N  FILES N" mono-caps counts, not "N notes · N files". */
.cj-dock-card-foot-meta {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted);
  white-space: nowrap;
}

/* --- Docket blank sheet (Gate 1B, frame 18:7) --------------------------
   A full-page paper sheet replacing the generic centered modal — reached
   from the board's "New Customer Project" button or the N shortcut. Reuses
   the .cj-dock-shell tokens/fonts (same page, same @font-face rules). */

/* Geometry below is measured off the approved 1440x900 export of frame 18:7,
   not estimated: sheet 60..939, rail 980..1379, both 84..855; sheet content
   column 96..903; writing rules 226..903; row rules at 286/322/358/394,
   the description's two writing lines at 426/448, status 492, next 528; the
   optional block's hairline at 562, its halves at 592/628, category 666,
   notes 702, file trays 712..763, the footer's ink rule at 800. */

.cj-sheet {
  position: fixed;
  inset: 55px 0 0;
  z-index: 60;
  /* The sheet is sized to the frame rather than to its content, so nothing
     scrolls the page out from under the fixed topbar and no scrollbar
     narrows the 1440 layout. If a viewport is too short for the sheet, the
     sheet itself scrolls (see .cj-sheet-main) and the rail stays put. */
  overflow: hidden;
  background: var(--cj-ground);
  font-family: var(--cj-sans);
  color: var(--cj-ink);
}

.cj-sheet-layout {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  /* One row, pinned to the container. Without this the row is auto-sized and
     the taller of the two columns can push the whole layout past the fold —
     which is how 18:9's extra rail block would drag the sheet's own footer,
     and its always-enabled File record, out of view. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 880px) minmax(0, 400px);
  gap: 40px;
  justify-content: center;
  max-width: none;
  margin: 0;
  padding: 29px 60px 45px;
}

.cj-sheet-main {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--cj-paper);
  border: 1px solid var(--cj-hairline);
  padding: 20px 35px 0;
}

/* The sheet is a fixed-height flex column, so without this every row is a
   shrinkable flex item: the file trays would be squeezed under their own
   row and overlap the note beneath them. Rows keep their measured heights
   and the sheet scrolls instead. */
.cj-sheet-main > * {
  flex-shrink: 0;
}

.cj-sheet-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cj-hairline);
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

/* No rule under the head block in 18:7 — the meta rule above it and the
   REQUIRED TO FILE ink rule below it are the only two. */
.cj-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: 17px;
}

/* The sheet's DRAFT stamp is a quiet pending mark in 18:7, not a struck one:
   the frame prints border and label in the on-paper muted token, in a 72x24
   box flush to the content column's right edge (832..903). Padding carries
   the box proportions; .cj-dock-stamp's own 3px/9px gives 56x22. */
#cj-filing-stamp {
  border-color: var(--cj-muted-ink);
  color: var(--cj-muted-ink);
  padding: 4px 17px;
}

.cj-sheet-eyebrow {
  margin: 0;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-sheet-head h2 {
  margin: 0;
  font-family: var(--cj-sans);
  font-size: 1.85rem;
  line-height: 1.02;
  font-weight: 700;
  color: var(--cj-ink);
}

.cj-sheet-intro {
  /* 615px reproduces the frame's own line break, after "can wait —". */
  margin: 13px 0 0;
  max-width: 615px;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--cj-muted);
}

.cj-sheet-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--cj-ink);
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cj-ink);
}

.cj-sheet-block-head-optional {
  border-bottom-color: var(--cj-hairline);
  color: var(--cj-muted);
  font-weight: 400;
}

/* A row's writing rule runs the control and hint columns only (226..903 in
   the frame), never under the label — so it is drawn as a pinned grid item
   rather than as the row's own border-bottom. Every child is pinned to row 1
   so the rule can share the cell without displacing anything. */
.cj-sheet-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 114px minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: start;
  min-height: 36px;
}

.cj-sheet-row > * {
  grid-row: 1;
}

.cj-sheet-row > label,
.cj-sheet-row > .cj-sheet-row-label {
  grid-column: 1;
}

.cj-sheet-row > .cj-sheet-control {
  grid-column: 2;
}

.cj-sheet-row > .cj-sheet-hint,
.cj-sheet-row > .cj-sheet-hint-control {
  grid-column: 3;
}

.cj-sheet-row::after {
  content: "";
  grid-row: 1;
  grid-column: 2 / -1;
  align-self: end;
  height: 1px;
  background: var(--cj-hairline);
}

/* The first row under a block head closes the 30px gap the frame leaves
   there (256..286 required, 562..592 optional); every later row is 36. */
.cj-sheet-block-head + .cj-sheet-row,
.cj-sheet-block-head + .cj-sheet-optional-grid .cj-sheet-row {
  min-height: 30px;
}

.cj-sheet-row label,
.cj-sheet-row-label {
  padding-top: 9px;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
}

/* Required vs optional is carried three ways at once in the approved design,
   and label colour is one of them: everything below the optional block's
   hairline is muted, everything above it is ink. */
.cj-sheet-block-head-optional ~ .cj-sheet-row > label,
.cj-sheet-block-head-optional ~ .cj-sheet-row > .cj-sheet-row-label,
.cj-sheet-block-head-optional ~ .cj-sheet-optional-grid .cj-sheet-row > label,
.cj-sheet-block-head-optional ~ .cj-sheet-optional-grid .cj-sheet-row > .cj-sheet-row-label {
  color: var(--cj-muted);
}

/* "PROJECT No." and "REC No." keep their mixed case in the frame — the mono
   meta voice is uppercase, but the abbreviation is not shouted. The second
   selector is not redundant: inside a row this is a <label>, and
   `.cj-sheet-row label` above out-specifies a lone class, which is what
   shouted PROJECT No. into PROJECT NO. while the meta row stayed correct. */
.cj-sheet-label-mixed,
.cj-sheet-row label.cj-sheet-label-mixed {
  text-transform: none;
}

/* A dependent row that is not open yet (CONTACT before a company is
   chosen): muted label, and no control drawn at all. */
.cj-sheet-row-locked > label,
.cj-sheet-row-locked > .cj-sheet-row-label {
  color: var(--cj-muted);
}

.cj-sheet-hint {
  padding-top: 9px;
  text-align: right;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cj-muted);
  white-space: nowrap;
}

/* The COMPANY row's hint is the one sentence on the sheet, not a mono
   caption — it reads as printed instruction in 18:7, so it keeps sentence
   case and the sans face. It is also the one hint the frame does not set in
   the right-hand caption column: it runs on from the two doors, so it drops
   .cj-sheet-hint's caption padding and right alignment and takes its vertical
   position from .cj-chooser-line's shared baseline instead. */
.cj-sheet-hint-prose {
  font-family: var(--cj-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  padding-top: 0;
  text-align: left;
}

/* min-height is reset explicitly: the base form rules give every textarea a
   104px min-height and every select a 38px one, which would silently win
   over the row heights this sheet is measured to. */
.cj-sheet-control input[type="text"],
.cj-sheet-control input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([hidden]),
.cj-sheet-control textarea,
.cj-sheet-control select {
  display: block;
  width: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 6px 2px 5px;
  font-family: var(--cj-sans);
  font-size: 0.88rem;
  color: var(--cj-ink);
}

/* Inert optional controls keep the frame's solid writing rule (the row draws
   it) — a dotted underline would break the sheet's rule rhythm and is not a
   distinction 18:7 makes. */
.cj-sheet-control input:disabled {
  color: var(--cj-muted);
}

.cj-sheet-control textarea {
  resize: none;
}

/* DESCRIPTION is a two-line ruled writing area in 18:7 (rules at 426 and
   448). ::after draws the lower one with every other row; ::before adds the
   upper one, spanning the same control..hint width so both rules run the
   frame's full 226..903 rather than stopping at the textarea's edge. */
.cj-sheet-row-description {
  min-height: 54px;
}

.cj-sheet-row-description::before {
  content: "";
  grid-row: 1;
  grid-column: 2 / -1;
  align-self: start;
  margin-top: 32px;
  height: 1px;
  background: var(--cj-hairline);
}

.cj-sheet-row-description .cj-sheet-control textarea {
  margin-top: 10px;
  height: 44px;
  padding: 0 2px;
  line-height: 22px;
}

.cj-sheet-control input:focus-visible,
.cj-sheet-control textarea:focus-visible,
.cj-sheet-control select:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

.cj-sheet-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* COMPANY's printed line: the two doors, then the sentence, all on one
   baseline (18:7 sets the doors' ink at 226..470 and starts the sentence at
   492). The gap is the column gap, not the caption column — the sentence is
   inside the control, not in the row's right-hand hint slot. */
.cj-chooser-line {
  display: flex;
  align-items: baseline;
  column-gap: 20px;
}

/* The two doors run on one printed line in 18:7, and everything on it sits on
   a single baseline. align-items: center is what raised the "or" — the doors
   are <label>s, so `.cj-sheet-row label` gives them 9px of label padding the
   bare connector span does not have, and centring two boxes of unequal height
   floated the connector half that padding above their baseline. Baseline
   alignment leaves the doors exactly where they are and drops the connector
   onto their line. */
.cj-chooser-toggle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 8px;
  font-family: var(--cj-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A chooser sitting in the hint column (WAITING ON's "US · CUSTOMER") reads
   as the frame's printed hint — muted mono, no underline — but is the real,
   working control; it takes ink only once John actually sets it. */
.cj-sheet-hint-control {
  justify-content: flex-end;
  padding-top: 9px;
}

.cj-sheet-hint-control .cj-chooser-link {
  text-decoration: none;
  letter-spacing: 0.02em;
  font-size: 0.68rem;
}

.cj-sheet-hint-control .cj-chooser-link[aria-pressed="true"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cj-chooser-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cj-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cj-chooser-link:has(input:checked) {
  color: var(--cj-ink);
  font-weight: 600;
}

.cj-chooser-link input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cj-chooser-or {
  /* "or" stays lowercase between the two doors, as printed in 18:7 */
  text-transform: lowercase;
  color: var(--cj-muted);
}

/* min-height is reset for the same reason as the inputs above: the base
   button rule's 38px floor would set these rows' heights, not the frame. */
button.cj-chooser-link {
  min-height: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  /* the base button rule ships font-weight 750; these read as printed
     hints, not as buttons, until one is actually set */
  font-weight: 400;
  font-family: var(--cj-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

button.cj-chooser-link[aria-pressed="true"] {
  color: var(--cj-ink);
  font-weight: 600;
}

/* STATUS is a row of stamps, never a dropdown (frame 18:7). */
.cj-stamp-picker {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  padding-top: 10px;
}

/* These stamps are <button>s, so the base rule's 8px radius rounded them into
   pills; the outlined near-square stamp is the frame's signature mark, drawn
   at the 2px Docket radius the primary action already uses. The unpressed
   label takes the on-paper muted token, not the interface grey. */
.cj-stamp-picker .cj-dock-stamp {
  min-height: 0;
  background: none;
  border-color: var(--cj-hairline);
  border-radius: 2px;
  color: var(--cj-muted-ink);
  padding: 4px 8px;
  font-size: 0.62rem;
  cursor: pointer;
}

.cj-stamp-picker .cj-dock-stamp[aria-pressed="true"] {
  border-color: var(--cj-ink);
  color: var(--cj-ink);
  font-weight: 600;
}

.cj-sheet-row-status {
  min-height: 44px;
}

/* Halves: 96..479 and 520..903, each carrying the same 114px label column,
   so both writing rules start 130px in from their own left edge. */
.cj-sheet-optional-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 41px;
}

.cj-sheet-row-half {
  grid-template-columns: 114px minmax(0, 1fr) auto;
}

.cj-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 9px;
  padding-top: 10px;
}

.cj-chip {
  border: 1px solid var(--cj-hairline);
  padding: 3px 6px;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Same on-paper muted step as the unpressed stamps they echo. */
  color: var(--cj-muted-ink);
}

.cj-sheet-row-category {
  min-height: 38px;
}

/* The file trays are the last thing on the sheet, so the row carries no
   writing rule of its own — the trays' own hairlines are the frame's. */
.cj-sheet-row-files {
  min-height: 0;
  padding-top: 10px;
}

.cj-sheet-row-files::after {
  content: none;
}

/* The trays run the full writing width (227..902 in the frame), so this
   row's control takes the hint column too — it carries no hint. */
.cj-sheet-row-files > .cj-sheet-control {
  grid-column: 2 / -1;
}

.cj-filing-files { min-width: 0; }
.cj-filing-file-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cj-filing-file-controls > label:first-child { font-size: 0.78rem; color: var(--cj-muted); }
.cj-filing-file-controls > select { flex: 1 1 130px; min-width: 0; max-width: 260px; border: 1px solid var(--cj-hairline); padding: 7px 10px; color: var(--cj-ink); background: transparent; font: inherit; }
.cj-filing-file-controls .cj-file-tray-choose { position: relative; flex: 0 0 auto; margin: 0; }
.cj-filing-file-help { margin: 8px 0 0; font-size: 0.75rem; color: var(--cj-muted); }
.cj-filing-file-list { list-style: none; margin: 10px 0 0; padding: 0; }
.cj-filing-file-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--cj-hairline); }
.cj-filing-file-identity { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.cj-filing-file-identity strong { font-size: 0.8rem; font-weight: 500; }
.cj-filing-file-identity > span { color: var(--cj-muted); font-size: 0.72rem; }
.cj-filing-file-remove { flex: 0 0 auto; border: 1px solid var(--cj-hairline); background: transparent; color: var(--cj-ink); padding: 5px 8px; font: inherit; font-size: 0.72rem; cursor: pointer; }
.cj-filing-file-remove:disabled, .cj-filing-file-controls select:disabled, .cj-filing-file-controls .cj-file-tray-choose:has(input:disabled) { opacity: 0.55; cursor: default; }

.cj-file-trays {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
}

.cj-file-tray {
  box-sizing: border-box;
  height: 51px;
  border: 1px solid var(--cj-hairline);
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 12px;
}

/* CHOOSE spans both rows so it centres against the tray, not against the
   "Drop files here" line alone. */
.cj-file-tray .cj-file-tray-choose {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.cj-file-tray-label {
  grid-column: 1;
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-file-tray-drop {
  font-size: 0.8rem;
  color: var(--cj-muted);
}

/* The tray's file input is hidden behind its label; nothing in the sheet's
   control rules may resurrect the native "Choose Files / No file chosen"
   widget the frame deliberately replaces with a hairline tray. */
.cj-sheet-control input[hidden],
/* R2, Audrey §6.4: `display: none` removes the control from the document, so
   the tray could be clicked but never reached by keyboard. It is visually
   hidden instead — see .cj-hidden-file-input at the foot of this file — which
   keeps it in the tab order and lets the visible label carry the focus ring.
   The rule is kept, and narrowed to the R1 spelling it was written for, so a
   file input that is still marked `hidden` anywhere behaves as it always did. */
.cj-file-tray-choose input[type="file"][hidden] {
  display: none;
}

.cj-file-tray-choose {
  justify-self: end;
  min-height: 0;
  border: 1px solid var(--cj-hairline);
  padding: 4px 12px;
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
  cursor: pointer;
}

/* The tray caption is a note about the trays, so 18:7 indents it to the
   writing column (226) rather than starting it at the label column (96):
   130px is the label column plus the row gap. */
.cj-sheet-file-note {
  margin: 12px 0 0 130px;
  font-size: 0.72rem;
  color: var(--cj-muted);
}

/* Pushed to the foot of the sheet, above an ink rule — the frame's second
   heavy rule, matching REQUIRED TO FILE's. */
.cj-sheet-footer {
  margin-top: auto;
  padding: 10px 0 14px;
  border-top: 1px solid var(--cj-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 131 x 31 in the frame, sitting at 810..841 above the sheet's foot. */
.cj-sheet-footer .cj-dock-button-primary {
  min-height: 0;
  padding: 8px 20px;
}

.cj-sheet-footer .cj-dock-link-quiet {
  min-height: 0;
  font-size: 0.85rem;
}

#cj-filing-progress-footer {
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-sheet-footer-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* The rail's two panels sit at the top and the foot of the same column in
   18:7 (84..383 and 716..855) — the space between them is deliberate: there
   is no record to preview yet, and the sheet says so. */
.cj-sheet-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 0;
  gap: 24px;
}

.cj-sheet-rail-panel {
  box-sizing: border-box;
  background: var(--cj-paper);
  border: 1px solid var(--cj-hairline);
  padding: 19px 24px;
}

.cj-sheet-rail-eyebrow {
  margin: 0 0 4px;
  font-family: var(--cj-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-sheet-rail-head {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cj-hairline);
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-ink);
}

.cj-sheet-rail-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  counter-reset: rail;
}

/* 18:7 numbers the three outcomes 01/02/03 in the mono meta voice, in a
   fixed column to the left of each entry. */
.cj-sheet-rail-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: start;
  row-gap: 3px;
  counter-increment: rail;
}

.cj-sheet-rail-list li::before {
  content: counter(rail, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 2px;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--cj-muted);
}

.cj-sheet-rail-list li > * {
  grid-column: 2;
}

.cj-sheet-rail-list strong {
  color: var(--cj-ink);
  font-size: 0.94rem;
  line-height: 1.15;
  font-weight: 700;
}

.cj-sheet-rail-list span {
  color: var(--cj-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.cj-sheet-rail-preview-hint {
  margin: 8px 0 0;
  padding: 14px 0 12px;
  border-top: 1px solid var(--cj-hairline);
  font-size: 0.72rem;
  color: var(--cj-muted);
}

/* The Tess panel's heading is a sentence-case sans title in 18:7, not the
   mono ruled block-head that "WHAT FILING CREATES" uses — the optional door
   is offered, not filed under. */
.cj-sheet-rail-title {
  margin: 4px 0 0;
  font-family: var(--cj-sans);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cj-ink);
}

.cj-sheet-rail-body {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--cj-muted);
}

/* Outlined, not the board's filled ink button: Tess is the optional door,
   and 18:7 keeps the only filled action on the sheet's own "File record". */
.cj-sheet-rail-button {
  display: inline-block;
  min-height: 0;
  margin-top: 8px;
  padding: 5px 14px;
  border: 1px solid var(--cj-ink);
  border-radius: 2px;
  background: none;
  font-family: var(--cj-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
  text-decoration: none;
  text-align: center;
}

.cj-sheet-rail-button:hover,
.cj-sheet-rail-button:focus-visible {
  background: var(--cj-ink);
  color: var(--cj-paper);
}

/* --- Populated + validation states (frames 18:8 / 18:9) ------------------
   Geometry below is measured off the approved 1440x900 exports, not
   estimated: the chosen COMPANY box at 226..383 y298..323 and CONTACT at
   226..422 y334..359, the rust stop marker's 3px bar at x96..98 y186..224,
   the CANNOT FILE stamp flush right at 903, the two stopped rows' rust
   writing rules at y394/y528, the 2px ink focus outline at x220..909
   y364..397, the preview card at 980..1379 x 112..371 (400 x 260) with its
   inner rules at y151/y231, and the rail's rust rule at y470 running the
   rail's full 400px. */

/* A settled chooser row: the value in a hairline box on the writing rule,
   its provenance in the mono caption voice, and the change affordance at
   the right edge of the rule. */
/* The box sits 12px down the row and finishes 1px past the row's own writing
   rule, exactly as the frame draws it. The negative margin holds the row at
   its measured 36px so nothing below it moves when a row settles. */
.cj-chosen-line {
  display: flex;
  align-items: baseline;
  column-gap: 13px;
  padding-top: 12px;
  margin-bottom: -1px;
}

.cj-chosen-value {
  border: 1px solid var(--cj-hairline);
  padding: 3px 11px;
  font-family: var(--cj-sans);
  font-size: 0.88rem;
  color: var(--cj-ink);
  white-space: nowrap;
}

.cj-chosen-tag {
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted);
  white-space: nowrap;
}

/* min-height/weight reset for the same reason as every other button on this
   sheet: the base button rule's 38px floor and 750 weight would set the row
   height and shout a quiet link. */
.cj-chosen-action {
  margin-left: auto;
  min-height: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--cj-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cj-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* "+ Add new company" / "+ Add new contact" expanded in place. The panel is
   part of the same row — the sheet never reloads and no project row is
   cleared — so it is drawn in the sheet's own ruled idiom rather than as a
   dialog. */
.cj-inline-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px;
}

.cj-inline-add-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-inline-add-row label {
  padding-top: 4px;
  font-family: var(--cj-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-inline-add-commit {
  align-self: flex-start;
  min-height: 0;
  margin-top: 4px;
  border: 1px solid var(--cj-ink);
  border-radius: 2px;
  background: none;
  padding: 4px 12px;
  font-family: var(--cj-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
  cursor: pointer;
}

/* A settled optional value printed on its own writing rule (WAITING ON). */
.cj-sheet-value {
  display: block;
  padding: 6px 2px 5px;
  font-family: var(--cj-sans);
  font-size: 0.88rem;
  color: var(--cj-ink);
}

.cj-sheet-value:empty {
  display: none;
}

/* 18:9 — the stopped-filing marker. It replaces the instructional paragraph
   in place, so it inherits the paragraph's slot and adds only the rust bar
   the frame draws at x96..98. */
.cj-sheet-stop {
  margin: 13px 0 0;
  border-left: 3px solid var(--cj-rust);
  padding: 0 0 0 16px;
  max-width: 615px;
}

.cj-sheet-stop-head {
  margin: 0;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-rust);
}

/* Sized so the marker occupies exactly the instructional paragraph's slot —
   the frame's two states put every row below at the same y. */
.cj-sheet-stop-body {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--cj-ink);
}

/* CANNOT FILE: the same outlined stamp, in rust. The box hugs its label and
   stays flush to the content column's right edge (903), exactly as DRAFT
   does — the run is wider than the frame's for the same reason DRAFT's is,
   the stamp-label typeface residual Audrey parked at Gate A. */
#cj-filing-stamp.cj-sheet-stamp-stopped {
  border-color: var(--cj-rust);
  color: var(--cj-rust);
}

/* A written row drops its printed caption (18:8 / 18:9) — which is also what
   hands DESCRIPTION and REACH BY the frame's full 226..903 writing width. A
   stopped row is by definition empty, so it never carries this class and its
   rust REQUIRED TO FILE always shows. */
.cj-sheet-row-written > .cj-sheet-hint {
  display: none;
}

/* A fixed two-line writing area is the design; the browser's scrollbar is
   not a Docket element, so it is suppressed rather than drawn over the
   second rule. */
.cj-sheet-row-description .cj-sheet-control textarea {
  scrollbar-width: none;
}

.cj-sheet-row-description .cj-sheet-control textarea::-webkit-scrollbar {
  display: none;
}

/* A row that stopped the filing: rust label, rust writing rule, rust hint.
   Colour is never the only cue — the marker names the rows, the rail spells
   out what each one needs, and the footer counts them. */
.cj-sheet-row-stopped > label,
.cj-sheet-row-stopped > .cj-sheet-row-label {
  color: var(--cj-rust);
}

.cj-sheet-row-stopped::after {
  height: 1.5px;
  background: var(--cj-rust);
}

.cj-sheet-row-stopped > .cj-sheet-hint {
  color: var(--cj-rust);
}

/* Focus lands on the first stopped row as a 2px ink outline around the whole
   row cell — control and hint together, which is why it is drawn on a pinned
   pseudo-element spanning both columns rather than on the input. The input
   itself keeps its own focus-visible ring for keyboard use elsewhere; this
   one is the frame's row-level mark. */
.cj-sheet-row-focus::before {
  content: "";
  grid-row: 1;
  grid-column: 2 / -1;
  align-self: start;
  margin-top: 12px;
  height: 21px;
  outline: 2px solid var(--cj-ink);
  outline-offset: 4px;
  pointer-events: none;
}

.cj-sheet-row-focus > .cj-sheet-control input:focus-visible,
.cj-sheet-row-focus > .cj-sheet-control textarea:focus-visible {
  outline: none;
}

/* --- The rail's live card preview --------------------------------------- */

.cj-rail-preview {
  display: flex;
  flex-direction: column;
}

.cj-rail-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Puts the card's top edge on the frame's y112. */
  padding-bottom: 14px;
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

/* The preview is the board's own card component, so it inherits the card
   system's paper, hairline, rules and stamp verbatim — including the REC
   strip band Audrey recorded as a ride-along on the board. It is not
   clickable: there is no record to open yet. */
.cj-preview-card {
  cursor: default;
}

.cj-rail-preview-note {
  margin: 20px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--cj-muted);
}

/* 18:9's rail block: what each stopped row actually needs, under a rust rule
   running the rail's full width. */
.cj-rail-stop {
  margin-top: 22px;
}

.cj-rail-stop-head {
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--cj-rust);
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-rust);
}

.cj-rail-stop-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0 0;
}

/* The items are paragraphs; the UA's 1em block margins would add ~16px per
   entry and walk the whole block down the rail. */
.cj-rail-stop-item {
  margin: 0;
}

.cj-rail-stop-item-label {
  display: block;
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-rust);
}

.cj-rail-stop-item-body {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--cj-ink);
}

.cj-rail-stop-foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--cj-hairline);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--cj-muted);
}

/* The hole the missing NEXT row leaves on the board: the value cell keeps
   its place in the ledger and draws a rust rule where the line would be.
   This is the honest argument for why NEXT is required at all. */
.cj-dock-ledger-row dd.cj-dock-ledger-gap {
  border-bottom: 1.5px solid var(--cj-rust);
  align-self: end;
  height: 0.9em;
}

.cj-upload-uploading {
  opacity: 0.7;
}

.cj-upload-failed {
  border: 1px solid color-mix(in srgb, var(--red, #b3402f) 45%, transparent);
}

.cj-orphan-row {
  border: 1px solid color-mix(in srgb, var(--red, #b3402f) 45%, transparent);
}

/* Optional filing work that did not land (CJ-N Major 3). Drawn only when
   something actually failed — no reviewed state of the workspace renders
   this panel at all — and drawn in the workspace's own idiom rather than a
   new one: the panel is a .cj-ws-panel, the rows are .cj-ws-file-rows, and
   the only addition is the sheet's rust rule marking the block as something
   that still needs John. */
.cj-ws-followups {
  border-color: var(--cj-rust);
  padding-bottom: 20px;
}

.cj-ws-followups > .cj-ws-panel-head {
  border-bottom-color: var(--cj-rust);
  color: var(--cj-rust);
}

.cj-ws-followups-body {
  margin: 0;
  padding: 13px 0 0;
  font-family: var(--cj-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cj-ink);
}

/* --- Saved project workspace (Gate C, frame 18:10) ----------------------
   The record immediately after filing, and the surface every later change is
   made on. Like the docket sheet it is a full page, not an inspector rail:
   opening a record replaces the board and the two printed routes back are
   "← Customer projects" at the head and "View it on the board" at the foot.

   Geometry below is measured off the approved 1440x900 export, not
   estimated: page gutters 60/60; head panel 60..1379 x 104..239 with its
   meta rule at 146; left column 60..919, right column 944..1379, 24px
   apart; SUMMARY 264..375 (head rule 302), LEDGER 392..595 (ink head rule
   430, row rules 470/502/534/566), NOTES 612..839 (head rule 650, entry
   rules 714/776, write line 816); CONTACTS 264..403 (head rule 302, inner
   rule 356), FILES 420..839 (ink head rule 458, section rules 542/602/662);
   footer prose baseline y865..874 with "View it on the board" ending 1379.

   Two muted steps, as everywhere else on this page: --cj-muted-ink on paper
   and --cj-muted-ground for the two runs that sit on the page ground (the
   back link and the footer prose). Design's A1 table measures the on-ground
   token at 4.82:1, which the on-paper token does not clear off paper. */

.cj-dock-shell {
  --cj-muted-ground: #686156;
}

.cj-ws {
  position: fixed;
  inset: 55px 0 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--cj-ground);
  font-family: var(--cj-sans);
  color: var(--cj-ink);
}

.cj-ws-page {
  box-sizing: border-box;
  padding: 21px 60px 18px;
}

/* Block, not the button's default inline-block: an inline-level box's
   vertical margin does not move the block that follows it, which left the
   head panel's top edge at the mercy of the line box instead of a measured
   12px. */
.cj-ws-back {
  display: block;
  min-height: 0;
  height: 16px;
  line-height: 16px;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--cj-muted-ground);
  cursor: pointer;
}

.cj-ws-back span {
  padding-right: 5px;
}

.cj-ws-back:hover,
.cj-ws-back:focus-visible {
  color: var(--cj-ink);
}

/* --- Head block --------------------------------------------------------- */

.cj-ws-head {
  box-sizing: border-box;
  background: var(--cj-paper);
  border: 1px solid var(--cj-hairline);
  padding: 0 24px;
}

.cj-ws-head-meta {
  display: flex;
  align-items: baseline;
  gap: 37px;
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--cj-hairline);
  font-family: var(--cj-mono);
  text-transform: uppercase;
}

.cj-ws-rec {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cj-ink);
}

.cj-ws-filed {
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--cj-muted-ink);
}

.cj-ws-ordinal {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--cj-muted-ink);
}

.cj-ws-head-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 22px;
}

.cj-ws-title {
  margin: 0;
  font-family: var(--cj-sans);
  font-size: 1.94rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cj-ink);
}

.cj-ws-subtitle {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--cj-muted-ink);
}

.cj-ws-head-actions {
  display: flex;
  align-items: center;
  gap: 23px;
}

/* Editing puts the six-stamp picker where the single settled stamp was, so
   the actions stack rather than wrap: a wrapped picker would grow the head
   band and push the record's own foot past the fold. */
.cj-ws-head-actions-editing {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* The record's status stamp, drawn at the head rather than in a card foot:
   same outlined mark, same tone rules (rust when the ball is with the
   customer, green once delivered) as the board card this record projects. */
.cj-ws-stamp {
  padding: 6px 13px;
  font-size: 0.66rem;
  font-weight: 600;
}

/* Outlined, not the board's filled ink action: the workspace is a settled
   record and "Edit record" opens it, it does not create anything. */
.cj-ws-action {
  min-height: 0;
  padding: 6px 15px;
  background: none;
  border: 1px solid var(--cj-ink);
  border-radius: 2px;
  font-family: var(--cj-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
  cursor: pointer;
}

.cj-ws-action:hover,
.cj-ws-action:focus-visible {
  background: var(--cj-ink);
  color: var(--cj-paper);
}

.cj-ws-quiet-action {
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cj-muted-ink);
  cursor: pointer;
}

.cj-ws-quiet-action:hover,
.cj-ws-quiet-action:focus-visible {
  color: var(--cj-ink);
}

.cj-ws-edit-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* --- Columns and panels ------------------------------------------------- */

.cj-ws-columns {
  display: grid;
  grid-template-columns: 860px 436px;
  gap: 24px;
  margin-top: 24px;
}

.cj-ws-col-main,
.cj-ws-col-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cj-ws-col-main > .cj-ws-panel:last-child,
.cj-ws-col-side > .cj-ws-panel:last-child {
  flex: 1;
}

.cj-ws-panel {
  box-sizing: border-box;
  background: var(--cj-paper);
  border: 1px solid var(--cj-hairline);
  padding: 0 24px;
  margin-bottom: 16px;
}

.cj-ws-panel:last-child {
  margin-bottom: 0;
}

.cj-ws-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
  height: 38px;
  padding: 20px 0 0;
  border-bottom: 1px solid var(--cj-hairline);
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

/* LEDGER and FILES carry the heavier ink rule the sheet's REQUIRED TO FILE
   block-head uses; SUMMARY, NOTES and CONTACTS carry the hairline. The two
   ink rules are the frame's own weighting: those are the blocks that say
   what the record *is*. */
.cj-ws-ledger-panel > .cj-ws-panel-head,
.cj-ws-files > .cj-ws-panel-head {
  border-bottom-color: var(--cj-ink);
}

.cj-ws-panel-note {
  color: var(--cj-muted-ink);
}

.cj-ws-head-count {
  padding-left: 17px;
}

/* Drawn as the frame draws it, and genuinely non-interactive: the Customer
   Record has no create-contact writer and no writer for
   additionalContactIds, so this cannot be wired without the schema change
   AM has not authorized. Reported, not invented. */
/* Positioned rather than baseline-aligned: the action's larger face would
   otherwise set the flex line's baseline and push the panel's own mono label
   down with it, which the frame does not do. */
.cj-ws-panel-action {
  position: absolute;
  right: 0;
  bottom: 3px;
  font-family: var(--cj-sans);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cj-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cj-ws-empty {
  margin: 0;
  padding: 11px 0 21px;
  font-size: 0.72rem;
  color: var(--cj-muted-ink);
}

/* --- Summary ------------------------------------------------------------ */

.cj-ws-summary-body {
  margin: 0;
  padding: 12px 0 19px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--cj-ink);
}

/* --- Ledger ------------------------------------------------------------- */

.cj-ws-ledger {
  margin: 0;
  padding: 0;
}

.cj-ws-ledger-row {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0;
  box-sizing: border-box;
  min-height: 32px;
  height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-ws-ledger-row:first-child {
  min-height: 40px;
  height: auto;
  padding-top: 12px;
}

.cj-ws-ledger-row:last-child {
  min-height: 28px;
  height: auto;
  border-bottom: none;
}

.cj-ws-ledger-row dt {
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

.cj-ws-ledger-row dd {
  min-width: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--cj-ink);
  overflow-wrap: anywhere;
}

/* The board card's own right-aligned mono due date, on the same NEXT row it
   sits on there. */
.cj-ws-ledger-row dd.cj-ws-ledger-due {
  font-family: var(--cj-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  color: var(--cj-ink);
}

/* --- Notes -------------------------------------------------------------- */

.cj-ws-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cj-ws-note {
  padding: 17px 0 8px;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-ws-note-meta {
  margin: 0 0 6px;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

.cj-ws-note-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--cj-ink);
}

.cj-ws-note-empty {
  font-size: 0.85rem;
  color: var(--cj-muted-ink);
}

/* The write line is a ruled row like every other line on this record — the
   frame prints "Write a note" as the placeholder on a hairline, not as a
   boxed field with a button beside it. */
.cj-ws-note-form {
  display: block;
  padding: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-ws-note-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: 39px;
  padding: 8px 0 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.8rem;
  color: var(--cj-ink);
}

.cj-ws-note-form input::placeholder {
  color: var(--cj-muted-ink);
  opacity: 1;
}

.cj-ws-note-form input:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

.cj-ws-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cj-ws-notes > .error-text {
  margin: 6px 0 0;
}

/* --- Contacts ----------------------------------------------------------- */

.cj-ws-contact {
  padding: 11px 0 8px;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-ws-contact-name {
  margin: 0 0 4px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cj-ink);
}

.cj-ws-contact-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--cj-muted-ink);
}

/* New-contact HubSpot import: the one sync line under a contact's methods. */
.cj-ws-contact-sync {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--cj-muted-ink);
  overflow-wrap: anywhere;
}

.cj-ws-contact-sync-ok {
  color: var(--success);
}

.cj-ws-contact-sync-bad {
  color: var(--bad);
}

/* --- Files -------------------------------------------------------------- */

.cj-ws-bucket {
  padding: 12px 0 11px;
}

.cj-ws-bucket + .cj-ws-bucket {
  border-top: 1px solid var(--cj-hairline);
}

.cj-ws-bucket > .cj-ws-empty {
  padding: 10px 0 0;
}

.cj-ws-bucket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

.cj-ws-file-list {
  list-style: none;
  margin: 0;
  padding: 3px 0 0;
}

.cj-ws-file-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 0;
}

/* The file name carries the download action: the frame draws the row as a
   name and a size, so the name is the affordance rather than a second
   labelled button crowding the row. */
.cj-ws-file-name {
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--cj-ink);
  cursor: pointer;
}

.cj-ws-file-name:hover,
.cj-ws-file-name:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cj-ws-file-name-plain {
  cursor: default;
}

.cj-ws-file-size {
  flex-shrink: 0;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

/* Deleting a file is a change to the record, so it is offered where every
   other change is: while the record is being edited. The capability and its
   endpoint are unchanged. */
.cj-ws-file-remove {
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1;
  color: var(--cj-muted-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Preview sits beside Remove and is drawn the same way: a quiet secondary run,
   so the file name keeps the primary affordance the frame was designed around
   and the row does not gain a second loud control. It appears only for files
   the server marked previewable. */
.cj-ws-file-preview {
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1;
  color: var(--cj-muted-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cj-ws-file-preview:hover,
.cj-ws-file-preview:focus-visible {
  color: var(--cj-ink);
}

/* The preview panel is far larger than the shared .modal-card default, because
   the whole point is reading a document rather than filling a short form. */
.cj-preview-card {
  width: min(1040px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cj-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.cj-preview-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.cj-preview-head-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

/* The body is the flex child that gets the leftover height, so the frame grows
   with the viewport instead of being pinned to a guessed pixel height. */
.cj-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cj-paper, var(--panel));
}

.cj-preview-frame {
  width: 100%;
  height: min(72vh, 900px);
  border: none;
}

.cj-preview-image {
  max-width: 100%;
  max-height: min(72vh, 900px);
  object-fit: contain;
}

.cj-ws-add-files {
  padding: 17px 0 0;
}

.cj-ws-add-files-panel {
  padding: 12px 0 0;
}

.cj-ws-add-files-head {
  margin: 0 0 6px;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

.cj-ws-add-files-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--cj-hairline);
  font-size: 0.8rem;
  color: var(--cj-ink);
  cursor: pointer;
}

.cj-ws-add-files-choose {
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cj-ink);
}

.cj-ws-files-note {
  margin: 0;
  padding: 16px 0 19px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--cj-muted-ink);
}

/* --- Edit state --------------------------------------------------------- */
/* Frame 18:10 draws the settled record; it cannot draw the state that
   changes it. Editing therefore happens in the record's own rows — the same
   writing rules, the same stamp picker as the docket sheet, the same
   "Us · Customer" control — rather than in a form that replaces the page. */

.cj-ws-edit-form {
  display: none;
}

.cj-ws-edit-row-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
  max-width: 460px;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-ws-edit-row-title label {
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

/* Child combinator, not descendant — see the note on the R2 rule further down
   (Audrey F1). This R1 rule sits ABOVE `.cj-chip input` in the cascade so it
   never actually reached the chips' hidden radios, but the two rules say the
   same thing and only one of them said it safely. Narrowing both means the
   next control dropped inside one of these cells cannot re-open the finding. */
.cj-ws-edit-row-title > input,
.cj-ws-ledger-edit > input {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.85rem;
  color: var(--cj-ink);
}

.cj-ws-ledger-edit {
  border-bottom: 1px solid var(--cj-ink);
}

.cj-ws-edit-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: 40px;
  margin: 12px 0 15px;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--cj-ink);
  border-radius: 0;
  resize: none;
  font-family: var(--cj-sans);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--cj-ink);
}

.cj-ws-edit-row-title > input:focus-visible,
.cj-ws-ledger-edit > input:focus-visible,
.cj-ws-edit-textarea:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 3px;
}

.cj-ws-stage-picker {
  padding-top: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.cj-ws-waiting-toggle {
  padding-top: 0;
}

/* --- Foot --------------------------------------------------------------- */

.cj-ws-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 21px 0 0;
}

.cj-ws-foot-note {
  margin: 0;
  font-size: 0.7rem;
  color: var(--cj-muted-ground);
}

.cj-ws-foot-link {
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--cj-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .cj-mobile-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   R2 — Customer Journey expansion (work order 01)

   Everything below extends the accepted Docket sheet language rather than
   redesigning it: the same mono captions, the same hairline writing rules,
   the same 2px-radius outlined stamp, the same muted-until-set treatment for
   a control that lives in the hint column. Every selector is .cj-* scoped and
   none of the R1 rules above is edited, so no reviewed surface can be reached
   from here.
   ========================================================================== */

/* --- Contact Methods (§B) ------------------------------------------------
   The repeatable editor for the REACH BY row. Each way to reach somebody is
   one printed line on the row's writing rule: kind, value, and the two
   actions. The row keeps the sheet's 36px rhythm at one method and grows by
   one line per method after that — it is a list, and a list that lies about
   its length would be worse than a taller row. */
.cj-method-list {
  display: flex;
  flex-direction: column;
}

.cj-method-row {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
}

/* The kind sits in the mono caption voice, because it is a label for the
   value beside it rather than a value in its own right. */
.cj-sheet-control select.cj-method-type {
  flex: 0 0 78px;
  width: 78px;
  font-family: var(--cj-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
  cursor: pointer;
}

.cj-sheet-control input.cj-method-value {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.cj-sheet-control input.cj-method-value::placeholder,
.cj-sheet-control input.cj-extra-name::placeholder,
.cj-sheet-control input.cj-extra-title::placeholder {
  color: var(--cj-muted);
  opacity: 1;
}

/* Quiet mono actions, the same voice the WAITING ON toggle uses in the hint
   column — these are affordances on a printed line, not buttons on a form. */
.cj-method-action {
  flex: 0 0 auto;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.cj-method-action:focus-visible,
.cj-chip:focus-within {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

/* A legacy Reach By value projected off a Contact filed before Contact
   Methods existed. Printed, never editable in place, and tagged so it is
   obvious it is being carried through untouched rather than re-typed. */
.cj-method-row-legacy {
  column-gap: 13px;
  padding: 6px 0 5px;
}

.cj-method-legacy-label,
.cj-method-legacy-tag {
  font-family: var(--cj-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted);
  white-space: nowrap;
}

.cj-method-legacy-label {
  flex: 0 0 78px;
}

.cj-method-legacy-value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--cj-sans);
  font-size: 0.88rem;
  color: var(--cj-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One method is the sheet's ordinary 36px row; the list drives the height
   from there, so nothing below has to be re-measured per method. */
.cj-sheet-row-methods {
  min-height: 36px;
  align-items: stretch;
}

/* --- Target Date (§D) ----------------------------------------------------
   A native date control, kept in the sheet's writing-rule idiom: no browser
   chrome, no box, and the picker button in the same muted ink the row's
   caption uses. */
.cj-sheet-control input[type="date"] {
  font-family: var(--cj-sans);
  cursor: text;
}

.cj-sheet-control input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

/* --- Category (§F) -------------------------------------------------------
   The chips become real radios. The visual treatment is unchanged from the
   R1 chip Audrey passed; only the pressed state is new, and it is the same
   ink border / ink label / 600 weight the pressed status stamp already
   uses, so the two selectable controls on the sheet read as one system. */
.cj-chip {
  /* Keep native radio focus inside the visible chip and its scroll container.
     Otherwise focusing the absolute input can scroll the locked outer sheet. */
  position: relative;
  cursor: pointer;
}

.cj-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cj-chip:has(input:checked) {
  border-color: var(--cj-ink);
  color: var(--cj-ink);
  font-weight: 600;
}

/* --- More Contacts (§E) --------------------------------------------------
   Each additional contact is one full-width line in the sheet's own row
   grid, so the writing rules keep running where every other rule on the
   sheet runs. */
.cj-extra-contacts:empty {
  display: none;
}

.cj-extra-contact-line {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
  flex-wrap: wrap;
}

.cj-sheet-control input.cj-extra-name {
  flex: 1 1 130px;
  width: auto;
  min-width: 0;
}

.cj-sheet-control input.cj-extra-title {
  flex: 1 1 90px;
  width: auto;
  min-width: 0;
}

.cj-extra-method {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
  flex: 4 1 320px;
  min-width: 0;
}

.cj-extra-method .cj-method-value {
  flex: 1 1 auto;
  min-width: 0;
}

/* Pushes Remove to the end of an existing-contact line, which has no
   growing input of its own to do it. */
.cj-extra-spacer {
  flex: 1 1 auto;
}

.cj-extra-contact .cj-chosen-value {
  white-space: nowrap;
}

.cj-sheet-control select#cj-more-contacts-existing {
  font-family: var(--cj-sans);
  font-size: 0.82rem;
  cursor: pointer;
}

/* --- Fitting a repeatable control onto a sheet that was already exactly
       full (R2 layout finding) --------------------------------------------

   Measured: the R1 sheet's main column is 769px of content in a 769px box at
   1440x900 — it fits exactly, with zero slack. So every line a repeatable
   control adds has to be paid for. Two rules pay for it, and neither of them
   changes the blank sheet by a single pixel:

   1. A repeated line is set in the compact rhythm the sheet already uses for
      its expand-in-place panels, not in the 36px rhythm of a printed row.
      One method is a row; the second, third and fourth are lines within it.
   2. The footer is pinned to the bottom of the scroll region. `File record`
      is never disabled — that is the decision frame 18:9 exists to justify —
      so it must also never be off-screen, and neither must the counter that
      says whether pressing it will work. A sheet carrying more repeated
      lines than the fold can hold scrolls its rows between a fixed head and
      a fixed foot, rather than pushing its primary action out of view. */

/* The :not() chain is carried over verbatim from the base control rule
   above: without it this loses on specificity and the repeated lines keep
   the 36px-row padding they are supposed to be shedding. */
.cj-sheet-control .cj-method-row input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([hidden]),
.cj-sheet-control.cj-extra-contact-line input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([hidden]),
.cj-sheet-control .cj-method-row select,
.cj-sheet-control.cj-extra-contact-line select {
  padding: 2px 2px 1px;
}

/* The first method keeps the row's own 36px rhythm; every method after it is
   a compact repeated line. */
.cj-method-row + .cj-method-row {
  margin-top: 1px;
}

.cj-extra-contact.cj-sheet-row {
  min-height: 26px;
  align-items: center;
}

.cj-extra-contact.cj-sheet-row > .cj-sheet-row-label {
  padding-top: 0;
}

/* The line runs the sheet's full writing width (226..903) like the file
   trays do, because a person's name, role and way to reach them will not fit
   in the two-thirds a hint column leaves. Remove sits at the end of the line
   rather than in the hint column for the same reason. */
.cj-extra-contact.cj-sheet-row > .cj-sheet-control {
  grid-column: 2 / -1;
}

.cj-extra-contact + .cj-extra-contact {
  margin-top: 1px;
}

.cj-sheet-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--cj-paper);
}

/* The seventh stamp (§A) has to fit on one line beside the row's caption:
   wrapping the picker is the defect R1 fixed on the category chips, and it
   would break the stamp band's single-line signature. The treatment is
   untouched — same 2px radius, same hairline border, same muted-ink label,
   same ink-when-pressed — only the horizontal breathing room inside each
   stamp and between them gives back the width Follow-up needs. */
.cj-stamp-picker {
  gap: 5px;
}

/* 5px also brings the box closer to the approved export than R1's 8px did —
   IN SPEC now sets 58px against the frame's 59, where R1 measured 64 (the
   residual Audrey recorded and declined to order at Gate A). */
.cj-stamp-picker .cj-dock-stamp {
  padding: 4px 5px;
}

/* An empty date control still prints its own format ("mm/dd/yyyy"). Set in
   the sheet's muted caption ink it reads as the printed hint it is, rather
   than as a value somebody typed. */
.cj-sheet-control input[type="date"]:not(:focus)::-webkit-datetime-edit {
  color: var(--cj-muted);
}

.cj-sheet-control input[type="date"]:focus::-webkit-datetime-edit,
.cj-sheet-control input[type="date"].cj-date-set::-webkit-datetime-edit {
  color: var(--cj-ink);
}

/* Same reason: an example domain in the WEBSITE box must not read as a
   Customer's actual website. */
.cj-inline-add-row input::placeholder {
  color: var(--cj-muted);
  opacity: 1;
}

/* --- The board card's Category caption (§F) ------------------------------
   Placed on Audrey's CJ2-A cycle-1 ruling: the card's mono caption voice, in
   the meta region, subordinate to the stamp — not a second stamp. The meta
   group already carries NOTES/FILES in exactly this voice, so Category needs
   no treatment of its own beyond taking the on-paper muted ink (a step darker
   than the counts) to say it is a property of the job rather than a tally. */
.cj-dock-card-category {
  color: var(--cj-muted-ink);
}

/* --- The record's own detail rows (§C/§D/§F) -----------------------------
   The Record panel reuses the Ledger's row grid verbatim (see .cj-ws-ledger-
   row above) so the two side-by-side blocks read as one ruled ledger rather
   than two inventions. Only the empty-value ink and the edit cells are new. */
.cj-ws-unset {
  color: var(--cj-muted);
}

/* Category is a classification, so it takes the same mono caption voice the
   card's meta region gives it — which is also why the "New build"/"New Build"
   casing question (Audrey §5.5) stays invisible on this surface. */
.cj-ws-category {
  font-family: var(--cj-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The one link on the record. Underlined in the record's own ink rather than
   the browser's blue: it is a value on a ruled row that happens to be
   reachable, not a navigation control. */
.cj-ws-website {
  color: var(--cj-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cj-ws-website:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

/* An edit cell has to hold a control inside a 32px ruled row without growing
   it, so the control sheds its own box exactly as the sheet's rows do.
   --------------------------------------------------------------------------
   Audrey CJ2-A F1. The combinator is the whole fix, and it is a `>` for a
   reason worth stating rather than leaving to be re-derived.

   Written as a DESCENDANT selector, this rule matched every input anywhere
   beneath an edit cell — including the five visually hidden Category radios,
   which live two levels down inside `#cj-ws-category > label.cj-chip`. Those
   radios are hidden by `.cj-chip input { position: absolute; width: 1px }`, an
   EQUAL-specificity rule (0,1,1) that appears EARLIER in this file, so `width:
   100%` won on cascade order alone and each 1px radio became a 1430px
   absolutely positioned box. Five of them, starting at their static positions
   inside the chip row, put the rightmost edge at x=2691 against a 1430px
   container: 1,261px of empty scrollable paper and a horizontal scrollbar
   across the bottom of a reviewed surface.

   The three controls this rule is actually for — Project No., Target date,
   Website — are DIRECT children of the cell. The chips are not. So the child
   combinator states the intent exactly ("the control on this row"), fixes the
   whole class rather than the one instance, and needs no specificity war with
   the chip rule. The guard in customer-journey-r2-browser.test.js fails
   without this `>` and passes with it. */
.cj-ws-ledger-edit > input {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.82rem;
  color: var(--cj-ink);
}

.cj-ws-ledger-edit > input:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

/* The five chips, in the side column's narrower measure: same chip treatment
   the sheet uses (and the same native radios underneath), wrapped onto as
   many lines as the column needs rather than clipped. */
.cj-ws-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 0;
}

.cj-ws-record .cj-ws-ledger-row:has(.cj-ws-chip-row) {
  height: auto;
  min-height: 32px;
  padding-bottom: 4px;
}

/* --- Contact Methods on the record (§B) ---------------------------------
   One printed line per way to reach somebody, in the same kind/value idiom
   the sheet's editor uses, so the same data reads the same way on both
   surfaces. Text only: no method is ever rendered as a link. */
.cj-ws-method-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.cj-ws-method {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
  padding: 2px 0;
}

.cj-ws-method-kind {
  flex: 0 0 62px;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

.cj-ws-method-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--cj-ink);
  overflow-wrap: anywhere;
}

.cj-ws-method-tag {
  flex: 0 0 auto;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

.cj-ws-method-empty {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--cj-muted);
}

.cj-ws-contact-actions {
  display: flex;
  gap: 14px;
  margin: 6px 0 0;
}

/* --- The in-place contact editor (§E) ------------------------------------
   Expand-in-place, the mechanic the sheet's add-new-company panel and the
   workspace's own Add files already use: the record never reloads and nothing
   else on it is disturbed. */
.cj-ws-contact-editor {
  padding: 11px 0 12px;
}

.cj-ws-editor-head {
  margin: 0 0 8px;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

.cj-ws-editor-row {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
  padding: 2px 0;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-ws-editor-row label {
  flex: 0 0 62px;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
}

.cj-ws-editor-row input,
.cj-ws-editor-row select,
.cj-ws-editor-method input,
.cj-ws-editor-method select {
  box-sizing: border-box;
  min-height: 0;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--cj-sans);
  font-size: 0.78rem;
  color: var(--cj-ink);
}

.cj-ws-editor-row input,
.cj-ws-editor-row select {
  flex: 1 1 auto;
  min-width: 0;
}

.cj-ws-editor-method {
  display: flex;
  align-items: baseline;
  column-gap: 10px;
  padding: 2px 0;
  border-bottom: 1px solid var(--cj-hairline);
}

.cj-ws-editor-method select {
  flex: 0 0 62px;
  font-family: var(--cj-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cj-muted-ink);
  cursor: pointer;
}

.cj-ws-editor-method input {
  flex: 1 1 auto;
  min-width: 0;
}

.cj-ws-editor-row input:focus-visible,
.cj-ws-editor-row select:focus-visible,
.cj-ws-editor-method input:focus-visible,
.cj-ws-editor-method select:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

.cj-ws-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 10px;
}

/* "Add a contact" is a real button now (R1's inert span is gone), so it has
   to shed the button chrome the frame does not draw while keeping the
   positioned placement .cj-ws-panel-action already establishes. */
button.cj-ws-panel-action {
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

button.cj-ws-panel-action:focus-visible {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
}

/* --- The scrollbar (Audrey CJ2-A cycle 1, §6.1) --------------------------

   Once the sheet could scroll, every overflowing state drew the browser's
   stock dark scrollbar — full-height track, arrow buttons, heavy grey thumb —
   straight down the inside edge of the Docket paper card. Audrey ruled it
   "the single loudest foreign element on the sheet" and required it styled
   into the system before the final gate.

   Set with the standard `scrollbar-width` / `scrollbar-color` properties
   rather than the `::-webkit-scrollbar` pseudo-elements, for three reasons:
   both properties are INHERITED, so one declaration reaches the sheet's
   scroll region, the workspace's page scroll and anything else this page
   ever scrolls; `thin` drops the arrow buttons on its own, so nothing has to
   be hidden; and Chromium ignores the legacy pseudo-elements on any element
   that sets either standard property, so mixing the two mechanisms would
   only give one of them a way to lose. The same idiom is already used
   elsewhere in this file (.live-work-list, .msg-table-wrap).

   Thumb in the on-paper muted ink, track in the sheet's own hairline: the
   two tokens the Docket already rules its paper with. The values are
   repeated as literals here for the same reason the font tokens are
   repeated on .cj-dock-body — the viewport's own scrollbar is drawn by the
   root element, which sits outside .cj-dock-shell where the tokens live. */
html:has(> .cj-dock-body),
.cj-dock-body,
/* `scrollbar-color` is an inherited property; `scrollbar-width` is NOT, so
   the width has to be stated on the scroll containers as well as the root.
   Measured, not assumed: without this the sheet's own scroll region computed
   `scrollbar-width: auto` while its colours came through, which is the exact
   half-styled state the finding was about. */
.cj-dock-body * {
  scrollbar-width: thin;
  scrollbar-color: #6e675c #c8c0ae; /* --cj-muted-ink on --cj-hairline */
}

/* --- One visible focus treatment for the whole Docket (Audrey §6.4) ------

   §6.4 asks for visible-focus evidence on the method row, the chips,
   + Add / Remove / Clear and the stamp band. Measuring it is what found the
   problem: the app-wide focus ring (styles.css `button:focus-visible` and
   friends) is `outline: 0` plus `box-shadow: 0 0 0 2px var(--focus-ring)`,
   and --focus-ring resolves to rgba(232, 231, 227, 0.28) — a near-white ring
   at 28% opacity, designed for the dark app chrome. On Docket paper (#f4f1e9)
   it is invisible. R2's own controls escaped that because the method actions
   and the chips were given an explicit ink outline; every control the Docket
   INHERITED — the stamp band, the Us · Customer and Choose · + Add chooser
   links, Clear, Change/Edit — had a focus state that could not be seen. That
   is not something a capture could have shown before this gate, because no
   reviewed capture had ever focused one.

   So the treatment is stated once, for the whole shell: the ink hairline the
   sheet rules everything else with, 2px, offset 2px, and the foreign ring
   suppressed. Nothing about any resting state moves — this selector only
   matches while an element actually has visible focus. The chip carries it on
   its label because the real radio underneath is visually hidden and cannot
   show a ring of its own. */
.cj-dock-shell :focus-visible,
.cj-dock-shell .cj-chip:focus-within,
.cj-dock-shell .cj-file-tray-choose:focus-within,
.cj-dock-shell .cj-ws-add-files-choose:focus-within {
  outline: 2px solid var(--cj-ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* --- File choosers: reachable, not just clickable (Audrey §6.4) ----------

   The other thing measuring the tab ring found. The file trays' inputs were
   `hidden`, which removes an element from the document entirely — so the two
   trays on the sheet and the four bucket choosers on the record could be
   clicked but could not be reached by keyboard at all. §6.4 asks for proof
   that every control is reachable by keyboard alone, and it was not.

   Visually hidden instead of `hidden`, which is the pattern the Category
   chips already use for exactly this reason: the real control stays in the
   tab order and keeps its native Space-opens-the-picker behaviour, and the
   visible label carries the focus ring through :focus-within above. The label
   still forwards clicks, so nothing about using a mouse changes. Inherited
   from R1 rather than introduced by R2, and disclosed as such. */
/* Scoped to the shell to sit above the page's own control rules. The box
   keeps the small intrinsic size the file control resolves to rather than the
   1px asked for here, which is harmless: it is absolutely positioned (out of
   flow), fully transparent, and takes no pointer events, so it can neither
   move anything nor be clicked. What matters is that it is still IN the
   document, and therefore still in the tab order. */
.cj-dock-shell .cj-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Mach staff workspace — approved C direction, September 18, 2026.
   Scoped to this page; integration state and existing hidden rules remain intact. */
body.cj-mach-ui, body.cj-mach-ui .cj-dock-shell {
  --cj-paper:#f7f7f7; --cj-ground:#f7f7f7; --cj-ink:#111111;
  --cj-muted:#5e5e5e; --cj-muted-ink:#333333; --cj-hairline:#e4e0df;
  --cj-rust:#a22d19; --cj-green:#2e5a3c; --cj-accent:#cf2f17; --cj-oxblood:#851718;
  --mach-sidebar:232px; background:var(--cj-ground); color:var(--cj-ink);
  font-family:var(--cj-sans); font-size:16px; line-height:1.5; color-scheme:light;
}
body.cj-mach-ui { margin:0; padding:0; }
body.cj-mach-ui [hidden], body.cj-mach-ui .hidden { display:none!important; }
body.cj-mach-ui .page-shell { width:auto; max-width:none; margin:0 0 0 var(--mach-sidebar); padding:0; }
body.cj-mach-ui .cj-mach-sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--mach-sidebar); z-index:30;
  box-sizing:border-box; display:flex; flex-direction:column; padding:28px 16px;
  overflow-y:auto; background:#111; color:white;
}
body.cj-mach-ui .cj-mach-brand { display:flex; align-items:center; gap:10px; padding:0 8px 38px; font-size:17px; font-weight:700; line-height:1.25; }
body.cj-mach-ui .cj-mach-brand img { width:42px; height:42px; flex:none; }
body.cj-mach-ui .cj-mach-brand small { display:block; font-size:10px; font-weight:400; letter-spacing:.1em; color:#c5c5c5; margin-top:6px; }
body.cj-mach-ui .cj-mach-nav-label { margin:0 12px 12px; font:11px var(--cj-mono); letter-spacing:.12em; color:#aaa; }
body.cj-mach-ui #cj-dashboard-nav { display:flex; flex-direction:column; flex-wrap:nowrap; gap:6px; padding:0; margin:0; border:0; }
body.cj-mach-ui #cj-dashboard-nav button { min-height:48px; width:100%; box-sizing:border-box; padding:12px; border:0; border-left:3px solid transparent; border-radius:0; background:transparent; color:#d8d8d8; text-align:left; justify-content:flex-start; font:500 16px/1.4 var(--cj-sans); }
body.cj-mach-ui #cj-dashboard-nav button:hover { background:#222; color:#fff; }
body.cj-mach-ui #cj-dashboard-nav button[aria-current=page] { background:#292929; border-left-color:#cf2f17; color:white; font-weight:600; }
body.cj-mach-ui .cj-mach-sidebar-foot { margin-top:auto; padding:40px 12px 0; font-size:13px; color:#aaa; }
body.cj-mach-ui .cj-mach-sidebar-foot::before { content:''; display:block; width:24px; border-top:3px solid #cf2f17; margin-bottom:16px; }
body.cj-mach-ui .cj-mach-sidebar-foot strong { display:block; font-size:13px; color:#fff; margin-bottom:6px; }
body.cj-mach-ui .cj-mach-sidebar-foot p { margin:0; }
body.cj-mach-ui .topbar { height:auto; min-height:72px; padding:16px 32px; gap:18px; background:#fff; border-bottom:1px solid var(--cj-hairline); position:relative; }
body.cj-mach-ui .brand-lockup { gap:12px; min-width:0; font-family:var(--cj-sans); }
body.cj-mach-ui .brand-lockup h1 { font:500 14px var(--cj-sans); letter-spacing:0; text-transform:none; color:#5e5e5e; }
body.cj-mach-ui .brand-lockup .brand-subtitle { font:500 14px/1.4 var(--cj-sans); letter-spacing:0; text-transform:none; color:#111; white-space:normal; }
body.cj-mach-ui .top-actions { gap:14px; min-width:0; flex-wrap:wrap; justify-content:flex-end; }
body.cj-mach-ui .cj-staff-account { gap:12px; flex-wrap:wrap; font-size:14px; }
body.cj-mach-ui .cj-staff-account-name { font:500 14px var(--cj-sans); color:#111; }
body.cj-mach-ui .cj-staff-button { background:#fff; border:1px solid #aaa4a1; border-radius:3px; color:#111; min-height:40px; font:500 14px var(--cj-sans); }
body.cj-mach-ui .cj-dock-page { max-width:1700px; width:100%; box-sizing:border-box; padding:38px 40px; margin:auto; }
body.cj-mach-ui .cj-dock-titlebar h2 { font-size:32px; line-height:1.2; letter-spacing:-.04em; color:#111; }
body.cj-mach-ui .cj-dock-subtitle { font-size:16px; color:#5e5e5e; margin:12px 0 0; line-height:1.5; }
body.cj-mach-ui .cj-dock-button-primary { min-height:48px; background:#cf2f17; color:white; border:1px solid #cf2f17; border-radius:3px; font:600 16px/1.4 var(--cj-sans); padding:12px 20px; text-transform:none; letter-spacing:0; }
body.cj-mach-ui .cj-dock-button-primary:hover { background:#b82613; }
body.cj-mach-ui .cj-landing-controls { padding:18px; margin:28px 0 12px; background:#fff; border:1px solid var(--cj-hairline); border-radius:3px; gap:16px; }
body.cj-mach-ui .cj-landing-button { font-size:15px; min-height:46px; background:#fff; border-color:#aaa4a1; padding:10px 14px; }
body.cj-mach-ui .cj-landing-button[aria-pressed=true] { background:#111; color:#fff; border-color:#111; }
body.cj-mach-ui .cj-landing-search { font-size:14px; color:#333; }
body.cj-mach-ui .cj-landing-search input { min-height:46px; font-size:16px; background:#fff; color:#111; border:1px solid #96918e; border-radius:3px; }
body.cj-mach-ui .cj-landing-help, body.cj-mach-ui .cj-landing-status, body.cj-mach-ui .cj-landing-empty { font-size:14px; color:#5e5e5e; }
body.cj-mach-ui .cj-landing-attention { margin:20px 0; padding:16px 0 24px; }
body.cj-mach-ui .cj-landing-attention-list { grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); }
body.cj-mach-ui .cj-landing-attention-list li { background:#fff; border-left:3px solid #851718; padding:16px; border-radius:3px; }
body.cj-mach-ui .cj-landing-attention h3, body.cj-mach-ui .cj-landing-activity h3 { font-size:20px; font-weight:600; }
body.cj-mach-ui .cj-landing-project strong { font-size:16px; font-weight:600; }
body.cj-mach-ui .cj-landing-customer, body.cj-mach-ui .cj-landing-detail, body.cj-mach-ui .cj-landing-activity-meta { font-size:14px; }
body.cj-mach-ui .cj-landing-kind { font-size:12px; }
body.cj-mach-ui .cj-dock-meta-row { font:14px var(--cj-sans); color:#5e5e5e; padding:20px 0; height:auto; letter-spacing:0; text-transform:none; }
body.cj-mach-ui .cj-dock-grid { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:20px; align-items:stretch; }
body.cj-mach-ui .cj-dock-card { background:#fff; border:1px solid var(--cj-hairline); border-radius:3px; padding:22px; min-height:0; height:auto; width:auto; box-shadow:none; }
body.cj-mach-ui .cj-dock-card:hover { border-color:#99918d; box-shadow:0 3px 10px #11100009; }
body.cj-mach-ui .cj-dock-card-head { border:0; padding-bottom:8px; font-size:12px; color:#5e5e5e; }
body.cj-mach-ui .cj-dock-card-title { font-size:16px; font-weight:400; color:#5e5e5e; line-height:1.5; }
body.cj-mach-ui .cj-dock-card-subtitle { font-size:21px; font-weight:650; line-height:1.35; color:#111; letter-spacing:-.025em; }
body.cj-mach-ui .cj-dock-ledger { border:0; padding-top:0; margin-top:18px; gap:10px; }
body.cj-mach-ui .cj-dock-ledger-row { font-size:14px; grid-template-columns:50px minmax(0,1fr) auto; gap:8px; }
body.cj-mach-ui .cj-dock-ledger-row dt { font-size:11px; color:#5e5e5e; }
body.cj-mach-ui .cj-dock-ledger-row:nth-child(2) { display:grid; grid-template-columns:minmax(0,1fr) auto; order:-1; font-size:16px; margin-bottom:8px; }
body.cj-mach-ui .cj-dock-ledger-row:nth-child(2) dt { grid-column:1/-1; font-size:11px; }
body.cj-mach-ui .cj-staff-card-team { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; font-size:14px; padding:14px 0; margin:16px 0 0; }
body.cj-mach-ui .cj-staff-card-team strong { display:block; font-size:12px; color:#5e5e5e; margin-bottom:2px; }
body.cj-mach-ui .cj-dock-card-foot { margin-top:auto; padding-top:15px; font-size:13px; gap:8px; }
body.cj-mach-ui .cj-dock-stamp { font:600 12px/1.4 var(--cj-sans); text-transform:none; letter-spacing:0; border-radius:3px; padding:5px 8px; background:#f7e2de; color:#851718; border-color:#dfb5ad; white-space:normal; }
body.cj-mach-ui .cj-dock-stamp-green { color:#205034; background:#eef6ee; border-color:#91b49a; }
body.cj-mach-ui .cj-dock-stamp-rust { color:#96301d; background:#fff1ec; border-color:#dcb2a5; }
body.cj-mach-ui .cj-dock-card-foot-meta, body.cj-mach-ui .cj-dock-held { font-size:12px; letter-spacing:0; text-transform:none; }
body.cj-mach-ui #cj-workspace, body.cj-mach-ui #cj-filing-modal { top:var(--cj-workspace-top,72px); margin-left:var(--mach-sidebar); width:calc(100% - var(--mach-sidebar)); box-sizing:border-box; }
body.cj-mach-ui #cj-library-panel, body.cj-mach-ui #cj-selector-panel, body.cj-mach-ui #cj-calculators-panel, body.cj-mach-ui #cj-fit-check-panel { padding:32px 40px; margin:0; min-width:0; box-sizing:border-box; }
body.cj-mach-ui :is(button,input,select,textarea) { font-family:var(--cj-sans); }
body.cj-mach-ui :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid #cf2f17; outline-offset:3px; }
body.cj-mach-ui .cj-mach-sidebar :focus-visible { outline-color:#ff927f; }
body.cj-mach-ui .cj-staff-dialog { background:#fff; color:#111; font-family:var(--cj-sans); border-color:#aaa4a1; }
body.cj-mach-ui .cj-staff-dialog h2 { color:#111; }
body.cj-mach-ui .cj-staff-description { font-size:16px; color:#333; }
body.cj-mach-ui .cj-staff-eyebrow { color:#851718; }
body.cj-mach-ui .cj-staff-message { color:#a22d19; }
body.cj-mach-ui .cj-reminder-bell { background:#fff; color:#111; border-color:#aaa4a1; min-width:44px; min-height:44px; }
/* Shared tool surfaces. The embedded catalog and CAD viewer retain their own controls. */
body.cj-mach-ui .cj-files-workspace { padding:0; border:0; border-radius:0; background:transparent; }
body.cj-mach-ui .cj-files-heading h2, body.cj-mach-ui .cj-fit-header h2 { font-size:32px; letter-spacing:-.04em; }
body.cj-mach-ui .cj-files-heading + .cj-files-help { font-size:16px; margin:12px 0 28px; }
body.cj-mach-ui .cj-files-field { font-size:16px; }
body.cj-mach-ui .cj-files-field :is(input,select) { background:#fff; color:#111; border-color:#96918e; min-height:46px; font-size:16px; }
body.cj-mach-ui :is(.cj-files-button,.cj-fit-controls button,.cj-fit-header > button) { min-height:44px; border-radius:3px; font:500 15px/1.4 var(--cj-sans); }
body.cj-mach-ui .cj-files-button { background:#fff; border-color:#aaa4a1; }
body.cj-mach-ui :is(.cj-files-results,.cj-files-selection,.cj-files-project-disclosure) { background:#fff; border-radius:3px; }
body.cj-mach-ui .cj-files-item { padding:18px; }
body.cj-mach-ui .cj-files-item.is-selected { background:#f7e2de; box-shadow:inset 3px 0 #851718; }
body.cj-mach-ui .cj-files-search > button { background:#cf2f17; border-color:#cf2f17; color:#fff; }
body.cj-mach-ui .cj-files-meta, body.cj-mach-ui .cj-files-help, body.cj-mach-ui .cj-files-status { font-size:14px; color:#5e5e5e; }
body.cj-mach-ui .cj-fit-header { background:#fff; border-color:#e4e0df; border-radius:3px; padding:24px; color:#111; }
body.cj-mach-ui .cj-fit-header :is(h2,p,label) { color:#111; }
body.cj-mach-ui .cj-fit-header p { color:#333; font-size:16px; }
body.cj-mach-ui .cj-fit-controls select { min-height:46px; border-radius:3px; background:#fff; border-color:#96918e; font-size:16px; }
body.cj-mach-ui .cj-fit-controls button, body.cj-mach-ui .cj-fit-header > button { background:#cf2f17; border-color:#cf2f17; }
body.cj-mach-ui .cj-fit-frame, body.cj-mach-ui .cj-selector-frame { border-color:#e4e0df; border-radius:3px; }
@media(max-width:1200px) {
  body.cj-mach-ui .topbar { padding:16px 24px; flex-wrap:wrap; }
  body.cj-mach-ui .cj-dock-page, body.cj-mach-ui #cj-library-panel, body.cj-mach-ui #cj-selector-panel, body.cj-mach-ui #cj-calculators-panel, body.cj-mach-ui #cj-fit-check-panel { padding:28px; }
}
@media(max-width:760px) {
  body.cj-mach-ui { --mach-sidebar:0px; }
  body.cj-mach-ui .cj-dock-shell { --mach-sidebar:0px; }
  body.cj-mach-ui .cj-mach-sidebar { position:relative; inset:auto; width:100%; padding:18px 20px 0; overflow:visible; }
  body.cj-mach-ui .cj-mach-brand { padding:0 0 18px; }
  body.cj-mach-ui .cj-mach-brand img { width:36px; height:36px; }
  body.cj-mach-ui .cj-mach-nav-label, body.cj-mach-ui .cj-mach-sidebar-foot { display:none; }
  body.cj-mach-ui #cj-dashboard-nav { flex-direction:row; gap:12px; overflow-x:auto; padding-bottom:0; }
  body.cj-mach-ui #cj-dashboard-nav button { width:auto; flex:none; padding:12px 4px; border-left:0; border-bottom:3px solid transparent; font-size:15px; }
  body.cj-mach-ui #cj-dashboard-nav button[aria-current=page] { background:transparent; border-bottom-color:#cf2f17; }
  body.cj-mach-ui .topbar { padding:14px 20px; gap:12px; }
  body.cj-mach-ui .top-actions { justify-content:flex-start; gap:10px; }
  body.cj-mach-ui .cj-dock-page, body.cj-mach-ui #cj-library-panel, body.cj-mach-ui #cj-selector-panel, body.cj-mach-ui #cj-calculators-panel, body.cj-mach-ui #cj-fit-check-panel { padding:26px 20px; }
  body.cj-mach-ui .cj-dock-titlebar h2 { font-size:28px; }
  body.cj-mach-ui .cj-dock-titlebar-actions { width:100%; justify-content:flex-start; }
  body.cj-mach-ui .cj-landing-controls { padding:14px; }
  body.cj-mach-ui .cj-landing-search { min-width:100%; }
  body.cj-mach-ui .cj-dock-meta-row { flex-wrap:wrap; gap:10px; }
  body.cj-mach-ui .cj-staff-card-team { grid-template-columns:1fr 1fr; }
}