/* Setup, diagnostics and pilot records share the existing renderer primitives. */
#pilot-setup { margin: 24px 0 32px; }
#pilot-setup > .ew-section { padding: 0 0 24px; border-bottom: 1px solid var(--border-soft); }
#pilot-setup h3 { font-size: 20px; font-weight: 450; }
.pilot-setup-grid { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(280px, 1.2fr); gap: 32px; margin-top: 24px; }
.pilot-checklist { list-style: none; margin: 0; padding: 0; }
.pilot-checklist li { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.pilot-checklist li p { grid-column: 1 / -1; margin: 0; }
.pilot-stage-name { font-weight: 500; }
.pilot-stage-status { color: var(--text-dim); font-size: 12px; }
.pilot-checklist [data-state="ready"] .pilot-stage-status { color: var(--green); }
.pilot-checklist [data-state="failed"] .pilot-stage-status { color: var(--red); }
.pilot-support p { line-height: 1.6; }
.pilot-support > button { margin: 0 8px 12px 0; }
.pilot-seat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.pilot-seat-row > :first-child { flex: 1; min-width: 120px; }
.pilot-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 24px; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box; }
.pilot-dialog::backdrop { background: #000a; }
.pilot-dialog h2 { font-size: 24px; font-weight: 450; margin-top: 0; }
.pilot-dialog button { margin: 8px 12px 8px 0; min-height: 38px; }
.pilot-dialog button:disabled { opacity: .45; cursor: not-allowed; }
.pilot-dialog input[type="checkbox"], .pilot-support input[type="checkbox"] { accent-color: var(--accent); }
.pilot-export { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: var(--bg); font-size: 12px; }
@media (max-width: 760px) {
  .pilot-setup-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pilot-dialog { padding: 20px; }
  .pilot-dialog button, .pilot-support button { min-height: 44px; }
  .pilot-seat-row { gap: 8px; }
}
/* ===== Plexus UI — brand tokens =====
   Palette, type, radii and motion follow the Plexus design guidelines v1.0.
   Two line weights on purpose: --border-soft is the brand's decorative divider
   (rgba(225,239,217,.12)), which the guidelines say must never be a control's only
   cue; --border is the stronger line real control boundaries need for 3:1. */
@font-face {
  font-family: Outfit; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/Outfit-Latin-Variable.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Outfit; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/Outfit-LatinExt-Variable.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root, body[data-theme="dark"] {
  --bg: #080a09; --bg-raised: #101310; --bg-hover: #161a16; --bg-active: #1d221c;
  --border: rgba(225,239,217,.22); --border-soft: rgba(225,239,217,.12);
  --text: #eef1e9; --text-dim: #969d94; --text-faint: #6d746b;
  --accent: #d5f5a3; --accent-fg: #080a09; --user-bubble: #161a16; --code-bg: #0c0f0c;
  --green: #79b36b; --red: #e0736a; --amber: #d2a75c; --blue: #8aaed6; --cyan: #7cc0bb;
  --add-bg: rgba(121,179,107,.12); --del-bg: rgba(224,115,106,.12);
  --shadow: 0 12px 40px rgba(0,0,0,.6); --shadow-soft: 0 2px 12px rgba(0,0,0,.4);
}
/* Light is for long reading, per the guidelines: #EEF1E9 or white with #080A09 text.
   Pale green is not a readable text pairing on white, so the accent keeps dark text. */
body[data-theme="light"] {
  --bg: #eef1e9; --bg-raised: #fff; --bg-hover: #e5e9df; --bg-active: #dae0d3;
  --border: rgba(8,10,9,.22); --border-soft: rgba(8,10,9,.1);
  --text: #080a09; --text-dim: #5b6159; --text-faint: #858b83;
  --accent: #d5f5a3; --accent-fg: #080a09; --user-bubble: #e5e9df; --code-bg: #f4f6f1;
  --green: #3f7a36; --red: #a83d33; --amber: #8a6520; --blue: #3a6392; --cyan: #2f6f6a;
  --add-bg: rgba(63,122,54,.1); --del-bg: rgba(168,61,51,.1);
  --shadow: 0 12px 40px rgba(8,10,9,.16); --shadow-soft: 0 2px 12px rgba(8,10,9,.08);
}
:root {
  --r-control: 6px;   /* buttons, inputs, selects */
  --r-panel: 12px;    /* cards and panels */
  --fast: 250ms;      /* interaction feedback */
  --reveal: 850ms;    /* content arrivals */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --reveal: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; background: var(--bg); color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.rail-label { padding: 20px 16px 8px; color: var(--text-dim); font-size: 12px; }
.rail-empty { padding: 4px 16px 12px; line-height: 1.6; }
#project-list { max-height: 28vh; overflow: auto; flex-shrink: 0; }
.project-nav { display: flex; flex-direction: column; gap: 6px; width: calc(100% - 16px); margin: 4px 8px; padding: 12px; text-align: left; border-left: 2px solid transparent; border-radius: var(--r-control); overflow-wrap: anywhere; }
.project-nav[aria-current="page"] { background: var(--bg-active); border-left-color: var(--accent); }
.project-nav:hover, .project-task:hover { background: var(--bg-hover); }
.project-nav .small { font-size: 11px; }
#workspace-eyebrow { margin-bottom: 12px; }
#setup-progress { padding: 8px 0 24px; }
#setup-progress h2, #project-task-feed h2 { font-size: 17px; font-weight: 450; margin-bottom: 16px; }
.setup-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.setup-steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-right: 1px solid var(--border-soft); }
.setup-steps li:last-child { border-right: 0; }
.setup-step-number { color: var(--text-dim); }
.setup-steps .ready .setup-step-number { color: var(--accent); }
.setup-steps button { text-align: left; min-height: 38px; }
#project-task-feed { padding: 12px 0 24px; }
.workspace-empty { padding: 24px 0; color: var(--text-dim); line-height: 1.6; }
.project-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: 100%; padding: 20px 8px; text-align: left; border-top: 1px solid var(--border-soft); font-size: 16px; overflow-wrap: anywhere; }
.project-task .small { grid-column: 1 / -1; line-height: 1.6; }
.project-task-status { font-size: 12px; color: var(--text-dim); text-transform: capitalize; }
#workspace-setup { border-top: 1px solid var(--border-soft); margin-top: 32px; }
#workspace-setup > summary { padding: 20px 0; cursor: pointer; font-size: 16px; }
#workspace-setup > summary .small { margin-left: 12px; }
.encrypted-task-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 760px) {
  .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-steps li { border-bottom: 1px solid var(--border-soft); }
  .project-task { grid-template-columns: minmax(0, 1fr); }
  #workspace-setup > summary .small { display: block; margin: 8px 0; }
}
code, pre, .mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.small { font-size: 12px; color: var(--text-dim); }

/* ===== brand =====
   The wordmark is supplied outlined artwork and is never retyped in Outfit. The masters
   already carry their clear space, so the box only needs height. */
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; display: block; }
.brand.big { justify-content: center; margin-bottom: 14px; }
.brand.big img { height: 46px; }
/* Dark is the default surface, so the light-background lockup stays hidden unless the
   light theme is explicitly on - a missing data-theme must never show both marks. */
.brand .on-light { display: none; }
body[data-theme="light"] .brand .on-light { display: block; }
body[data-theme="light"] .brand .on-dark { display: none; }

/* ===== login ===== */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 50; }
.login-card { width: 400px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 30px 28px; box-shadow: var(--shadow); text-align: center; }
.login-sub { color: var(--text-dim); margin: 6px 0 18px; font-size: 13px; }
.login form { display: flex; flex-direction: column; gap: 8px; }
.login input { padding: 9px 12px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.login input:focus { border-color: var(--text-faint); }
.login-hub { margin-top: 14px; color: var(--text-faint); font-size: 11.5px; font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.primary-btn { background: var(--accent); color: var(--accent-fg); border-radius: var(--r-control); padding: 8px 18px; font-weight: 600; transition: filter var(--fast) var(--ease-out); }
.primary-btn:hover { filter: brightness(1.06); }

#app { display: flex; height: 100vh; }

/* ===== sidebar ===== */
#sidebar { width: 260px; min-width: 260px; background: var(--bg-raised); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 16px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-control); color: var(--text-dim); transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.btn-icon:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-nav { padding: 0 8px 6px; }
.nav-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-control); color: var(--text-dim); font-weight: 500; }
.nav-btn:hover, .nav-btn.active { background: var(--bg-hover); color: var(--text); }
.sidebar-search { margin: 4px 12px 8px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg); color: var(--text-faint); }
.sidebar-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 12.5px; }
.thread-list { flex: 1; overflow-y: auto; padding: 2px 8px; }
.thread-group-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .13em; padding: 14px 10px 6px; font-weight: 500; }
.thread-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-control); cursor: pointer; color: var(--text-dim); user-select: none; }
.thread-item:hover { background: var(--bg-hover); color: var(--text); }
.thread-item.active { background: var(--bg-active); color: var(--text); }
.thread-item .t-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.thread-item .t-sub { display: block; font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-status { flex: none; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.t-spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border); border-top-color: var(--text-dim); animation: spin .8s linear infinite; }
.t-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pulse 1.2s infinite; }
.t-del { opacity: 0; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); }
.thread-item:hover .t-del { opacity: .8; }
.t-del:hover { background: var(--bg-active); color: var(--text); }
.thread-empty { color: var(--text-faint); font-size: 12.5px; padding: 14px 10px; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border-soft); padding: 10px 12px; min-width: 0; }
.me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .avatar { flex: none; }

/* avatars */
.avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; flex: none; text-transform: uppercase; }
.avatar.sm { width: 18px; height: 18px; font-size: 9px; }
.presence { display: flex; align-items: center; }
.presence .avatar { margin-left: -6px; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--border); }
.presence .avatar:first-child { margin-left: 0; }
.presence-label { font-size: 11.5px; color: var(--text-faint); margin-left: 8px; }

/* ===== main ===== */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border-soft); }
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.chip { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 11.5px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 4px; }
.wt-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); border: 1px solid var(--blue); border-radius: 4px; padding: 1px 7px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-control); border: 1px solid var(--border); color: var(--text-dim); font-size: 12.5px; }
.chip-btn:hover { background: var(--bg-hover); color: var(--text); }
.chip-btn.active { background: var(--bg-active); color: var(--text); }

/* ===== fleet ===== */
#fleet-view { flex: 1; overflow-y: auto; }
.fleet-wrap { max-width: 860px; margin: 0 auto; padding: 64px 32px 96px; display: flex; flex-direction: column; gap: 48px; }
.fleet-head { text-align: center; }
.fleet-head h1 { font-size: 40px; font-weight: 400; letter-spacing: -.045em; line-height: 1.12; }
.fleet-sub { color: var(--text-dim); margin-top: 12px; font-size: 15px; line-height: 1.6; }
.fleet-composer { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.fleet-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.wt-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 12px; cursor: pointer; }
.wt-toggle input { accent-color: var(--text); }
#composer-host-home { width: 100%; max-width: 720px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.suggestion { border: 1px solid var(--border); border-radius: var(--r-control); padding: 6px 14px; color: var(--text-dim); font-size: 12.5px; }
.suggestion:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-faint); }
.fleet-section-head { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .13em; font-weight: 500; margin-bottom: 12px; }
.runtime-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.runtime-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rc-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.rc-dot.online { background: var(--green); }
.rc-sub { font-size: 12px; color: var(--text-dim); }
.rc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-tag { font-size: 10.5px; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-dim); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.rc-tag.on { color: var(--green); border-color: var(--green); }
.attention-list { display: flex; flex-direction: column; gap: 8px; }
.attention-item { display: flex; align-items: center; gap: 12px; background: var(--bg-raised); border: 1px solid var(--amber); border-radius: var(--r-panel); padding: 10px 14px; }
.attention-item .ai-main { flex: 1; min-width: 0; }
.attention-item .ai-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attention-item .ai-cmd { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attention-empty { color: var(--text-faint); font-size: 12.5px; }

/* ===== thread ===== */
#thread-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.messages { flex: 1; overflow-y: auto; padding: 26px 0 12px; }
.msg { margin: 0 auto 16px; max-width: 780px; padding: 0 28px; animation: rise var(--fast) var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg-user { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg-user .by { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); }
.msg-user .bubble { background: var(--user-bubble); border-radius: var(--r-panel) var(--r-panel) 4px var(--r-panel); padding: 10px 14px; max-width: 85%; white-space: pre-wrap; word-wrap: break-word; border-left: 3px solid var(--by-color, transparent); }
.msg-user.steer .bubble { border: 1px dashed var(--by-color, var(--border)); background: none; color: var(--text-dim); }
.msg-user .bubble-imgs img { max-height: 120px; border-radius: var(--r-control); border: 1px solid var(--border); margin-right: 6px; }
.msg-assistant { line-height: 1.62; }
.md p { margin: 0 0 10px; } .md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { margin: 14px 0 8px; font-size: 15px; }
.md ul, .md ol { margin: 0 0 10px 20px; } .md li { margin: 3px 0; }
.md code { background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 5px; }
.md pre { background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: var(--r-control); padding: 12px; overflow-x: auto; margin: 0 0 10px; }
.md pre code { background: none; border: none; padding: 0; }
.md blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-dim); margin: 0 0 10px; }
.turn-divider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-faint); margin: 0 auto 14px; max-width: 780px; padding: 0 28px; }
.turn-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.reasoning { color: var(--text-faint); font-size: 12.5px; }
.rsn-head { display: inline-flex; gap: 6px; cursor: pointer; user-select: none; font-style: italic; }
.reasoning.thinking .rsn-head { background: linear-gradient(90deg, var(--text-faint) 30%, var(--text) 50%, var(--text-faint) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.rsn-body { font-style: italic; margin-top: 4px; white-space: pre-wrap; }
.reasoning.collapsed .rsn-body { display: none; }
.plan-card { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--bg-raised); padding: 12px 14px; box-shadow: var(--shadow-soft); }
.plan-title { font-weight: 600; font-size: 12.5px; margin-bottom: 8px; color: var(--text-dim); }
.plan-title span { font-weight: 400; }
.plan-steps { display: flex; flex-direction: column; gap: 6px; }
.plan-step { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); }
.ps-box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 9px; color: #fff; }
.plan-step.completed { color: var(--text-faint); text-decoration: line-through; }
.plan-step.completed .ps-box { background: var(--green); border-color: var(--green); }
.plan-step.inProgress { color: var(--text); } .plan-step.inProgress .ps-box { border-color: var(--amber); }
.plan-step.inProgress .ps-box::after { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--amber); animation: pulse 1.2s infinite; }
.cmd-card, .edit-card { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--bg-raised); overflow: hidden; }
.cmd-head, .edit-head { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; user-select: none; }
.cmd-status { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cmd-status.inProgress { background: var(--amber); animation: pulse 1.2s infinite; }
.cmd-status.completed { background: var(--green); } .cmd-status.failed { background: var(--red); } .cmd-status.declined { background: var(--text-faint); }
@keyframes pulse { 50% { opacity: .3; } } @keyframes spin { to { transform: rotate(360deg); } }
.cmd-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.cmd-title b { color: var(--text); }
.cmd-exec { font-size: 10px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; }
.cmd-chevron { color: var(--text-faint); font-size: 10px; }
.cmd-output { border-top: 1px solid var(--border-soft); background: var(--code-bg); padding: 10px 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; color: var(--text-dim); }
.cmd-card.collapsed .cmd-output, .edit-card.collapsed .edit-diff { display: none; }
.edit-path { flex: 1; font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-dim); }
.edit-stats .add { color: var(--green); } .edit-stats .del { color: var(--red); margin-left: 5px; }
.edit-diff { border-top: 1px solid var(--border-soft); max-height: 280px; overflow: auto; background: var(--bg); }
.diff-line { display: flex; white-space: pre-wrap; word-break: break-all; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.55; }
.diff-line .dl-mark { width: 24px; text-align: center; flex: none; color: var(--text-faint); user-select: none; }
.diff-line .dl-text { flex: 1; padding-right: 12px; }
.diff-line.add { background: var(--add-bg); } .diff-line.add .dl-mark { color: var(--green); }
.diff-line.del { background: var(--del-bg); } .diff-line.del .dl-mark { color: var(--red); }
.diff-line.hunk { color: var(--text-faint); background: var(--bg-raised); padding: 2px 0; }
.approval-card { border: 1px solid var(--amber); border-radius: var(--r-panel); padding: 12px 14px; background: var(--bg-raised); box-shadow: var(--shadow-soft); }
.approval-title { font-weight: 600; margin-bottom: 4px; }
.approval-reason { font-size: 12px; color: var(--text-dim); }
.approval-cmd { background: var(--code-bg); border-radius: var(--r-control); padding: 8px 10px; margin: 8px 0; white-space: pre-wrap; word-break: break-all; }
.approval-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.approval-actions .approve { background: var(--accent); color: var(--accent-fg); border-radius: var(--r-control); padding: 6px 14px; font-weight: 600; }
.approval-actions .secondary { border: 1px solid var(--border); border-radius: var(--r-control); padding: 6px 14px; color: var(--text-dim); }
.approval-actions .secondary:hover { color: var(--text); background: var(--bg-hover); }
.resolved-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px 3px 4px; }
.resolved-chip.decline { border-color: var(--red); }
.turn-meta { color: var(--text-faint); font-size: 11px; margin: -8px auto 16px; max-width: 780px; padding: 0 28px; }
.turn-error { color: var(--red); font-size: 12.5px; margin: 0 auto 16px; max-width: 780px; padding: 0 28px; }

/* ===== composer ===== */
.composer-dock { padding: 0 28px 14px; max-width: 836px; margin: 0 auto; width: 100%; }
.working { display: flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 12.5px; padding: 6px 4px; }
.wdots { display: inline-flex; gap: 3px; } .wdots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); animation: bounce 1.2s infinite; }
.wdots i:nth-child(2) { animation-delay: .15s; } .wdots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }
.stop-btn { margin-left: auto; border: 1px solid var(--border); border-radius: var(--r-control); padding: 3px 12px; font-size: 12px; color: var(--text-dim); }
.stop-btn:hover { color: var(--text); background: var(--bg-hover); }
.composer { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--bg-raised); padding: 10px 12px 8px; box-shadow: var(--shadow-soft); width: 100%; }
.composer:focus-within { border-color: var(--text-faint); }
.composer textarea { width: 100%; background: none; border: none; outline: none; resize: none; color: var(--text); max-height: 200px; line-height: 1.5; font-size: 13.5px; }
.composer textarea::placeholder { color: var(--text-faint); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.composer-controls { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.select-wrap select { appearance: none; -webkit-appearance: none; background: none; border: 1px solid var(--border); border-radius: var(--r-control); color: var(--text-dim); font-size: 12px; padding: 4px 12px; outline: none; cursor: pointer; max-width: 200px; }
.select-wrap select:hover { background: var(--bg-hover); color: var(--text); }
.send-btn { width: 30px; height: 30px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.send-btn.steer { background: none; border: 1px dashed var(--text-faint); color: var(--text-dim); }
.composer-hint { text-align: center; color: var(--text-faint); font-size: 11px; margin-top: 8px; }

/* ===== diff review ===== */
#diff-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.diff-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); font-size: 12.5px; }
.diff-header-actions { display: flex; align-items: center; gap: 8px; }
#commit-msg { width: 260px; padding: 5px 11px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; font-size: 12px; }
.mini-btn { border: 1px solid var(--border); border-radius: var(--r-control); padding: 5px 13px; font-size: 12px; color: var(--text-dim); }
.mini-btn:hover { background: var(--bg-hover); color: var(--text); }
.mini-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; }
.mini-btn.danger:hover { color: var(--red); border-color: var(--red); background: none; }
.diff-body { flex: 1; display: flex; min-height: 0; }
.diff-file-list { width: 260px; min-width: 260px; overflow-y: auto; border-right: 1px solid var(--border-soft); padding: 10px 8px; }
.dfl-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: var(--r-control); cursor: pointer; text-align: left; color: var(--text-dim); font-size: 12px; }
.dfl-item:hover { background: var(--bg-hover); color: var(--text); } .dfl-item.active { background: var(--bg-active); color: var(--text); }
.dfl-letter { font-weight: 700; width: 12px; text-align: center; } .dfl-letter.M { color: var(--amber); } .dfl-letter.A { color: var(--green); } .dfl-letter.D { color: var(--red); }
.dfl-path { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.dfl-stats .add { color: var(--green); } .dfl-stats .del { color: var(--red); margin-left: 4px; }
.diff-pane { flex: 1; overflow: auto; }
.diff-pane-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.diff-pane-path { font-weight: 600; font-size: 12.5px; flex: 1; }
.diff-empty { color: var(--text-faint); text-align: center; padding: 80px 0; }
.diff-table { width: 100%; border-collapse: collapse; }
.diff-table td { padding: 0; vertical-align: top; }
.dt-num { width: 44px; min-width: 44px; text-align: right; padding: 0 8px 0 4px !important; color: var(--text-faint); font-size: 11px; user-select: none; font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.dt-text { white-space: pre-wrap; word-break: break-all; padding: 0 12px !important; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.55; }
tr.add { background: var(--add-bg); } tr.add .dt-mark { color: var(--green); }
tr.del { background: var(--del-bg); } tr.del .dt-mark { color: var(--red); }
tr.hunk td { background: var(--bg-raised); color: var(--text-faint); padding: 3px 12px !important; font-size: 11px; }
.dt-mark { width: 20px; min-width: 20px; text-align: center; color: transparent; user-select: none; }

/* ===== modal & toasts ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { width: 460px; max-height: 84vh; overflow-y: auto; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.modal-header h2 { font-size: 18px; font-weight: 400; letter-spacing: -.03em; }
.modal-body { padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-desc { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.field > span { color: var(--text-dim); font-weight: 600; }
.field select { padding: 7px 10px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.check-field { flex-direction: row; align-items: center; justify-content: space-between; }
.check-field input { width: 16px; height: 16px; accent-color: var(--text); }
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: 10px 14px; font-size: 12.5px; max-width: 360px; animation: rise var(--fast) var(--ease-out); display: flex; align-items: center; gap: 10px; }
.toast b { font-weight: 600; }
.toast button { border: 1px solid var(--border); border-radius: var(--r-control); padding: 2px 10px; font-size: 11.5px; color: var(--text-dim); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }

/* ===== team activity / collision radar ===== */
.fsh-sub { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--text-faint); }
.activity-panel { display: flex; flex-direction: column; gap: 8px; }
.activity-empty { color: var(--text-faint); font-size: 12.5px; }
.overlap-item { display: flex; align-items: center; gap: 10px; background: var(--bg-raised); border: 1px solid var(--red); border-radius: var(--r-panel); padding: 9px 14px; font-size: 12.5px; }
.overlap-item.merge-risk { border-color: var(--amber); }
.overlap-item .ov-path { font-weight: 600; font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.overlap-item .ov-who { color: var(--text-dim); flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.overlap-item .ov-sev { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); border: 1px solid var(--red); border-radius: 4px; padding: 1px 7px; }
.overlap-item.merge-risk .ov-sev { color: var(--amber); border-color: var(--amber); }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--border-soft); border-radius: var(--r-control); font-size: 12.5px; cursor: pointer; }
.activity-row:hover { background: var(--bg-hover); }
.activity-row .ar-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.activity-row .ar-files { color: var(--text-dim); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-row .ar-live { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
.activity-row .ar-live.on { background: var(--green); animation: pulse 1.2s infinite; }
.approval-card.collision { border-color: var(--red); }
.approval-collision { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--red); margin-top: 6px; }
.assignee-chip { display: inline-flex; align-items: center; gap: 6px; }
.t-assignee { flex: none; }
.form-row { display: flex; gap: 8px; }
.field input[type="text"] { padding: 7px 10px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.handoff-note { margin: 0 auto 16px; max-width: 780px; padding: 0 28px; }
.handoff-note .hn { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--border); border-radius: var(--r-control); padding: 8px 12px; font-size: 12.5px; color: var(--text-dim); }

/* ===== teams, invitations and host pairing ===== */
.gate-block { display: flex; gap: 8px; margin-top: 12px; }
.gate-block input { flex: 1; padding: 9px 12px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.gate-block input:focus { border-color: var(--text-faint); }
.gate-or { margin: 14px 0 2px; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.gate-error { margin-top: 12px; color: var(--red); font-size: 12.5px; }
.team-admin { display: flex; flex-direction: column; gap: 10px; }
.team-admin-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-field { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; padding: 6px 10px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; min-width: 260px; }
/* Membership is not decryption access; the badge says so rather than implying otherwise. */
.enroll-badge { flex: none; font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); border: 1px solid var(--amber); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

/* ===== Catch-up (template: evidence) =====
   Uses the shared tokens only. Freshness and provenance never rely on colour alone:
   each carries its own word, because "is this current?" is a question a reader must be
   able to answer from a screenshot. */
#catchup-view { overflow-y: auto; padding: 28px 32px 40px; }
.cu-scope { border-bottom: 1px solid var(--border-soft); padding-bottom: 18px; margin-bottom: 4px; }
.cu-title { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.cu-sub { color: var(--text-dim); font-size: 13.5px; margin: 0 0 14px; }
.cu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cu-fresh { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; }
.cu-fresh-ok { color: var(--accent); border-color: var(--accent); }
.cu-fresh-warn { color: var(--amber); border-color: var(--amber); }
.cu-fresh-bad { color: var(--red); border-color: var(--red); }
.cu-range { font-size: 11.5px; color: var(--text-faint); }
.cu-fact { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; }
.cu-fact-k { color: var(--text-faint); }
.cu-fact-v { color: var(--text); }
.cu-fact-unknown { color: var(--text-faint); font-style: italic; }
.cu-explain { color: var(--text-dim); font-size: 12px; margin: 10px 0 0; }
.cu-section { padding: 20px 0; border-bottom: 1px solid var(--border-soft); }
.cu-section:last-of-type { border-bottom: 0; }
.cu-h { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.cu-note { color: var(--text-dim); font-size: 12px; margin: -4px 0 10px; }
.cu-objective { font-size: 14.5px; line-height: 1.55; margin: 0 0 8px; }
.cu-missing { color: var(--text-faint); font-size: 12.5px; line-height: 1.5; margin: 0; }
.cu-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cu-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; border-radius: 3px; padding: 1px 6px; border: 1px solid var(--border-soft); color: var(--text-faint); }
.cu-tag-recorded { color: var(--accent); border-color: var(--accent); }
.cu-tag-derived { color: var(--amber); border-color: var(--amber); }
.cu-source { font-size: 11.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.cu-source:hover { color: var(--text); }
.cu-evt { font-size: 11px; color: var(--text-faint); }
.cu-cards { display: flex; flex-direction: column; gap: 10px; }
.cu-card { border: 1px solid var(--border-soft); border-left: 2px solid var(--accent); border-radius: var(--r-control); padding: 12px 14px; background: var(--bg-raised); }
.cu-card-text { margin: 0 0 4px; font-size: 13.5px; }
.cu-card-by { margin: 0; font-size: 11.5px; color: var(--text-dim); display: flex; gap: 6px; }
.cu-dot { color: var(--text-faint); }
.cu-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cu-step { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.cu-step-status { font-size: 11.5px; color: var(--text-faint); text-transform: capitalize; white-space: nowrap; }
.cu-step-completed .cu-step-text { color: var(--text-dim); }
.cu-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cu-file-path { font-size: 12.5px; color: var(--text); }
.cu-blocker { font-size: 13.5px; margin: 0 0 4px; }
/* An outstanding approval is the one card that is asking the reader for something, so it
   carries the warning edge rather than the accent one every other record uses. */
.cu-approval { border-left-color: var(--amber); list-style: none; }
.cu-approval-action { margin: 0 0 4px; font-size: 13.5px; }
.cu-approval-reason { margin: 0 0 4px; font-size: 12.5px; color: var(--text-dim); }
.cu-approval-expired { margin: 0 0 4px; font-size: 12px; color: var(--text-faint); }
/* A question waiting on a person, distinct from an action waiting on a decision. */
.cu-help { border-left-color: var(--blue); list-style: none; }
.cu-help-question { margin: 0 0 4px; font-size: 13.5px; }
.cu-help-who { margin: 0 0 4px; font-size: 11.5px; color: var(--text-dim); }
/* A link shows where it goes next to what it says, so the two can be compared. */
.cu-link { color: var(--blue); text-decoration: none; }
.cu-link:hover { text-decoration: underline; }
.cu-link-host { font-size: 11.5px; color: var(--text-dim); margin-left: 8px; }
/* The inbox reuses the catch-up screen's anatomy: same sections, same cards, same
   provenance row, because it is showing the same records from a different angle. */
.inbox-count { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--accent-fg); font-size: 11px; text-align: center; }
.inbox-count.zero { background: var(--bg-active); color: var(--text-dim); }
#inbox-view { padding: 24px 28px; overflow-y: auto; }
.inbox-empty { color: var(--text-faint); font-size: 13px; }
.inbox-task { margin: 0 0 4px; font-size: 11.5px; color: var(--text-dim); }
/* The recovery key is shown once and is the one thing on screen worth copying
   exactly, so it gets the monospace treatment and room to be read aloud. */
#recovery-view { padding: 24px 28px; overflow-y: auto; max-width: 720px; }
.rec-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: var(--r-control);
  padding: 12px 14px; word-break: break-all; user-select: all; margin: 8px 0 12px; }
.rec-limit { color: var(--text-dim); font-size: 12.5px; line-height: 1.6; margin: 0 0 8px; }
.rec-warn { color: var(--amber); }
.rec-input { width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 8px 0 12px;
  background: var(--bg-raised); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-control); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cu-actions { display: flex; gap: 10px; padding-top: 20px; }
.cu-src-head { font-size: 12px; color: var(--text-dim); margin: 0 0 6px; }
.cu-src-body { font-size: 11.5px; background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: var(--r-control); padding: 10px 12px; margin: 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 640px) {
  #catchup-view { padding: 20px 16px 32px; }
  .cu-title { font-size: 21px; }
  .cu-meta { gap: 6px 10px; }
  .cu-step { flex-direction: column; gap: 2px; }
}
.cu-activity { display: flex; flex-direction: column; gap: 2px; }
.cu-activity-text { font-size: 13px; }
.cu-source-pane { border-top: 1px solid var(--border-soft); margin-top: 20px; padding-top: 16px; }

/* Shared encrypted review/setup anatomy. Values follow the accepted Plexus pack;
   controls use existing tokens and the browser/desktop consume this one renderer. */
:root { --review-pad: 30px; --review-gap: 20px; --review-inspector: clamp(340px, 28.5vw, 424px); }
.mobile-only { display: none; }
#encrypted-workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--review-inspector); flex: 1; min-height: 0; min-width: 0; }
.ew-main { padding: 32px var(--review-pad); overflow-y: auto; min-width: 0; }
#ew-heading h1 { font-size: 30px; font-weight: 450; line-height: 1.2; letter-spacing: -.04em; overflow-wrap: anywhere; }
.ew-ownership { color: var(--text-dim); margin: 16px 0 8px; line-height: 1.6; }
#ew-tabs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 24px 0 12px; border-bottom: 1px solid var(--border-soft); }
#ew-tabs button { border-color: transparent; background: transparent; }
#ew-tabs [aria-current="page"] { border-radius: 0; border-bottom: 2px solid var(--accent); }
#ew-inspector { display: flex; flex-direction: column; min-height: 0; padding: 30px 24px; border-left: 1px solid var(--border-soft); background: var(--bg-raised); overflow: auto; }
#ew-discussion { overflow: auto; flex: 1; min-height: 100px; }
#ew-discussion h3, .ew-section h3 { font-size: 20px; font-weight: 450; margin-bottom: 12px; }
.ew-message { padding: 24px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.7; overflow-wrap: anywhere; }
.ew-message h4 { font-weight: 500; margin-bottom: 12px; }
.ew-message p { white-space: pre-wrap; }
#ew-target { padding: 16px 0 8px; overflow-wrap: anywhere; }
#ew-composer .composer { margin: 0; width: 100%; }
#ew-composer .composer-controls { flex-wrap: wrap; }
#ew-composer textarea { min-height: 112px; font-size: 14px; }
.ew-section { padding: 24px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.6; }
.ew-section > .mini-btn { margin: 12px 8px 0 0; }
.ew-explain { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }
.ew-file { border: 1px solid var(--border-soft); border-radius: 5px; margin: 16px 0; overflow: hidden; }
.ew-file h4 { padding: 16px; font-weight: 400; overflow-wrap: anywhere; border-bottom: 1px solid var(--border-soft); }
.ew-file > button { margin: 12px 16px; }
.ew-code-scroll { display: block; overflow: auto; max-width: 100%; padding: 12px 0; white-space: pre; }
pre.ew-code-scroll { padding: 16px; }
.ew-code-scroll table { font-size: 13px; line-height: 1.8; }
.ew-code-scroll td { white-space: pre; padding: 2px 8px; }
.ew-code-scroll td:last-child { min-width: 400px; }
.ew-action { padding: 20px; border: 1px solid var(--border); border-radius: 5px; margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ew-error { color: var(--amber); overflow-wrap: anywhere; margin: 12px 0; }
.ew-error:empty { display: none; }
.ew-receipt { padding: 12px 0; border-bottom: 1px solid var(--border-soft); overflow-wrap: anywhere; font-size: 13px; }
.ew-details { margin-top: 20px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.ew-details summary { cursor: pointer; padding: 8px 0; font-size: 16px; }
.ew-field { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ew-field input, .ew-field select, .ew-field textarea { width: 100%; min-width: 0; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-control); }
.ew-field textarea { min-height: 88px; resize: vertical; }
.ew-field input[type="checkbox"] { align-self: flex-start; width: 22px; height: 22px; }
.ew-fingerprint { overflow-wrap: anywhere; color: var(--text-dim); line-height: 1.8; margin: 12px 0; }
.ew-device { padding: 20px 0; border-top: 1px solid var(--border-soft); }
.ew-device > button { margin-right: 8px; margin-top: 12px; }
.ew-link-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; overflow-wrap: anywhere; }
.encrypted-task-row { width: 100%; text-align: left; min-height: 44px; overflow-wrap: anywhere; }
#access-view { padding: 32px max(20px, 6vw); overflow: auto; min-height: 0; }
#access-view .ew-section { max-width: 1040px; margin: 0 auto; }
#access-view h3 { font-size: 30px; letter-spacing: -.04em; }
.ew-setup { max-width: 960px; margin: 0 auto; }
.sidebar-footer { flex-wrap: wrap; }
#ew-content .catchup-scope { padding-top: 0; }
@media (max-width: 1100px) {
  #encrypted-workspace { grid-template-columns: minmax(0, 1fr); }
  #ew-inspector { display: none; position: fixed; top: 50px; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 20; box-shadow: var(--shadow); }
  #encrypted-workspace.inspector-open #ew-inspector { display: flex; }
}
@media (max-width: 760px) {
  :root { --review-pad: 20px; }
  .mobile-only { display: inline-flex; }
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 35; transform: translateX(-100%); transition: transform var(--fast); }
  body.navigation-open #sidebar { transform: translateX(0); box-shadow: var(--shadow); }
  #main { min-width: 0; width: 100%; }
  #topbar { min-height: 68px; height: 68px; padding: 0 12px; }
  #ew-inspector { top: 68px; width: 100%; }
  .ew-main { padding-top: 26px; }
  #ew-heading h1 { font-size: 27px; }
  #encrypted-workspace .mini-btn, #access-view .mini-btn { min-height: 44px; }
  .topbar-right { gap: 4px; }
  #topbar-runtime { display: none; }
  #access-view { padding: 20px; }
  .login-card { width: calc(100vw - 32px); max-width: 400px; }
  .fleet-hero { padding-left: 20px; padding-right: 20px; }
}
.ew-close-discussion { display: none; }
@media (max-width: 1100px) { .ew-close-discussion { display: inline-flex; margin-bottom: 16px; } }
@media (max-width: 760px) { .topbar-title { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
#ew-receipts { max-height: 160px; overflow-y: auto; flex: none; }
#ew-composer { flex: none; }

/* Project-centered alpha: conversation leads, with the recorded result beside it.
   Narrow screens retain the established results view and discussion drawer. */
.fleet-wrap { max-width: 1080px; padding: 32px 32px 64px; gap: 24px; }
.fleet-head { text-align: left; }
.fleet-head h1 { font-size: 32px; }
.fleet-composer { align-items: stretch; }
.fleet-controls { justify-content: flex-start; }
.fleet-composer #composer { width: 100%; max-width: none; }
.fleet-composer .suggestions { justify-content: flex-start; }
#sidebar .encrypted-task-row { align-items: flex-start; gap: 6px; padding: 12px; width: 100%; }
#sidebar .encrypted-task-row .t-title { flex: none; max-width: 100%; }
@media (min-width: 1101px) {
  #encrypted-workspace { grid-template-columns: minmax(0, 1fr) minmax(340px, 46%); }
  #ew-inspector { grid-column: 1; grid-row: 1; border-left: 0; border-right: 1px solid var(--border-soft); background: var(--bg); }
  .ew-main { grid-column: 2; grid-row: 1; background: var(--bg-raised); padding: 28px 24px; }
  #ew-heading h1 { font-size: 25px; }
}
@media (max-width: 760px) {
  .fleet-wrap { padding: 24px 20px 48px; gap: 20px; }
  .fleet-head h1 { font-size: 28px; }
  .setup-steps li { padding: 12px; }
  #setup-progress { padding-bottom: 0; }
}

/* Shared invited-alpha download card; account entry and workspace setup reuse it. */
#desktop-download { display: block; text-align: left; }
#desktop-download .primary-btn { display: inline-block; text-decoration: none; }
#desktop-download p { margin: 12px 0; }
#desktop-download-sha { overflow-wrap: anywhere; }
#desktop-download-warning a { color: var(--accent); }