:root {
  --ink: #1d1d1f;
  --secondary: #5c5957;
  --tertiary: rgba(92, 89, 87, 0.72);
  --canvas: #f6f4f0;
  --raised: #edeae5;
  --surface: #ffffff;
  --hairline: rgba(29, 29, 31, 0.08);
  --fill: rgba(29, 29, 31, 0.055);
  --verified: #1f7a35;
  --attention: #9e6600;
  --destructive: #c70013;
  --radius: 18px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; }
#app { height: 100%; }

/* ---------- pages ---------- */
.page { flex: 1; overflow-y: auto; }
.column { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 22px; letter-spacing: -0.02em; margin: 4px 0 18px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondary); margin: 28px 0 10px; font-weight: 600; }
.muted { color: var(--secondary); }
.small { font-size: 13px; }

.card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
}
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { font-size: 13px; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

form.stack { display: grid; gap: 10px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--secondary); }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
code.copy { background: var(--fill); padding: 2px 6px; border-radius: 6px; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
ol.steps { padding-left: 20px; margin: 8px 0 14px; }
ol.steps li { margin: 4px 0; }

/* ---------- chat ---------- */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.messages { flex: 1; overflow-y: auto; }
.messages .column { padding-bottom: 12px; }
.earlier { display: block; margin: 0 auto 16px; }
.msg { margin: 14px 0; display: flex; }
.msg.user { justify-content: flex-end; }
.bubble { max-width: 100%; overflow-wrap: anywhere; }
.msg.user .bubble {
  background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 20px 20px 6px 20px; max-width: 100%; white-space: pre-wrap;
}
.msg.assistant .bubble { width: 100%; }
.msg.event .bubble { width: 100%; text-align: center; font-size: 13px; color: var(--secondary); white-space: pre-wrap; }
.msg.worker .bubble { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 16px; }
.msg .error { color: var(--destructive); font-size: 13px; margin-top: 6px; }
.meta .link { border: 0; background: none; padding: 0; font: inherit; color: var(--secondary); cursor: pointer; }
.meta .link:hover { color: var(--ink); text-decoration: underline; }
.worker-label { font-size: 12px; font-weight: 600; color: var(--verified); margin-bottom: 6px; }
.worker-label.bad { color: var(--destructive); }
.divider.fresh { border-top: 1px solid var(--hairline); padding-top: 10px; }
.spinner { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fill); border-top-color: var(--secondary); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
textarea.persona { font: 14px/1.55 var(--font); resize: vertical; min-height: 220px; }
.meta { font-size: 12px; color: var(--tertiary); margin-top: 4px; }
.msg.user .meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--tertiary); }
/* A message whose reply waits behind another: a quiet chip beside its time. */
.wait-chip {
 display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px;
 line-height: 1; white-space: nowrap;
}
.wait-chip svg { flex: none; color: var(--tertiary); }
.tools { font-size: 12.5px; color: var(--tertiary); margin-top: 6px; }
.divider { text-align: center; font-size: 12px; color: var(--tertiary); margin: 22px 0 8px; }
/* The reply being written: three dots and one short status. */
.typing { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--tertiary); font-size: 13px; line-height: 1.4; margin: 2px 0 0; }
.bubble + .typing { margin-top: 10px; }
.typing .dots { flex: none; display: inline-flex; gap: 4px; }
.typing .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.2s infinite ease-in-out; }
.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.typing .dot:nth-child(3) { animation-delay: 0.3s; }
.typing-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing .dot { animation: none; opacity: 0.6; } }
.workers { font-size: 12.5px; color: var(--secondary); margin: 6px 0; }

/* Rendered markdown: one rhythm (blocks 10–12px apart, headings close to what they introduce). */
.md p { margin: 0 0 10px; }
.md h2, .md h3, .md h4, .md h5 { text-transform: none; letter-spacing: 0; color: var(--ink); line-height: 1.35; margin: 20px 0 6px; font-weight: 650; }
.md h2 { font-size: 18px; }
.md h3 { font-size: 16.5px; }
.md h4 { font-size: 15.5px; margin-top: 16px; }
.md h5 { font-size: 14px; margin-top: 16px; color: var(--secondary); }
.md > :first-child { margin-top: 0; }
.md > :last-child, .md li > :last-child, .md blockquote > :last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 1.45em; }
.md ol { padding-left: 1.8em; }
.md li::marker { color: var(--secondary); }
.md ol > li::marker { font-variant-numeric: tabular-nums; }
.md li + li { margin-top: 4px; }
.md .loose > li + li { margin-top: 8px; }
.md li > p { margin: 0; }
.md li > :not(:first-child) { margin-top: 8px; }
.md li > :is(ul, ol):not(:first-child) { margin-top: 4px; }
.md li > ul, .md li > ol, .md li > .code-block, .md li > .table-wrap, .md li > blockquote { margin-bottom: 0; }
.md li.task { list-style: none; position: relative; }
.md .task-box {
  position: absolute; left: -1.45em; top: 0.32em; width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--tertiary); border-radius: 4px;
}
.md .task-box.done { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Code and tables scroll sideways; a soft shadow shows at an edge while more is hidden there. */
.md pre, .md .table-wrap {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--hairline); border-radius: 12px;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(29, 29, 31, 0.16), rgba(29, 29, 31, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(29, 29, 31, 0.16), rgba(29, 29, 31, 0)) right center / 12px 100% no-repeat scroll,
    var(--surface);
}
.md .code-block { position: relative; margin: 0 0 12px; }
.md pre { margin: 0; padding: 12px 40px 12px 14px; font: 12.5px/1.55 var(--mono); white-space: pre; overflow-wrap: normal; }
.md .code-block .copy-code { position: absolute; top: 5px; right: 5px; background: var(--surface); opacity: 0; }
.md .code-block .copy-code:hover { background: linear-gradient(var(--fill), var(--fill)) var(--surface); }
.md .code-block:hover .copy-code, .md .code-block .copy-code:focus { opacity: 1; }
@media (hover: none) { .md .code-block .copy-code { opacity: 1; } }
.md code { font-family: var(--mono); font-size: 0.9em; background: var(--fill); padding: 1px 5px; border-radius: 5px; }
.md pre code { background: none; padding: 0; font-size: inherit; }
.md blockquote { margin: 0 0 12px; padding: 1px 0 1px 13px; border-left: 3px solid rgba(29, 29, 31, 0.14); color: var(--secondary); }
.md blockquote blockquote { margin-top: 8px; }
.md hr { border: 0; border-top: 1px solid var(--hairline); margin: 16px 0; }
/* Tables keep readable columns: short ones never wrap; prose wraps down to its --floor to fit, and when
   the narrowest table (--least) is still wider than its box, it scrolls with prose at --wide instead. */
.md .table-wrap { container-type: inline-size; margin: 4px 0 12px; }
.md table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.5; }
.md th, .md td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.md th { background: rgba(29, 29, 31, 0.03); font-size: 12.5px; font-weight: 620; color: var(--secondary); }
.md th .cell { min-width: max(var(--floor, 0px), min(var(--wide, 0px), (var(--least, 0px) - 100cqi) * 1000)); }
.md tbody tr:last-child td { border-bottom: 0; }
.md thead:last-child th { border-bottom: 0; }
.md .al-r { text-align: right; }
.md .al-c { text-align: center; }
.md .nw { white-space: nowrap; }
/* Two long columns on a narrow screen: one card per row, first cell as its title. */
@container (max-width: 559px) {
  .md table.stack, .md table.stack thead, .md table.stack tbody, .md table.stack tr, .md table.stack th, .md table.stack td { display: block; }
  .md table.stack thead tr { padding: 8px 14px; background: rgba(29, 29, 31, 0.03); border-bottom: 1px solid var(--hairline); }
  .md table.stack thead:last-child tr { border-bottom: 0; }
  .md table.stack th { padding: 0; border: 0; background: none; text-align: left; white-space: normal; }
  .md table.stack th + th { font-weight: 450; }
  .md table.stack .cell { min-width: 0; }
  .md table.stack tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
  .md table.stack tbody tr:last-child { border-bottom: 0; }
  .md table.stack td { padding: 0; border: 0; text-align: left; white-space: normal; }
  .md table.stack td:first-child { font-weight: 600; }
  .md table.stack td + td { margin-top: 3px; }
  .md table.stack td:empty { display: none; }
}
.md a { text-decoration: underline; text-decoration-color: rgba(29, 29, 31, 0.3); }

/* ---------- files: type tiles, cards and thumbnails ---------- */
.file-badge {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 11%, #fff); color: var(--tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 14%, transparent);
  font: 700 10px/1 var(--font); letter-spacing: 0.04em;
}
.file-badge.small { width: 28px; height: 28px; border-radius: 8px; font-size: 7.5px; }
.file-badge.large { width: 76px; height: 76px; border-radius: 20px; font-size: 16px; margin-bottom: 10px; }
.file-name { display: flex; min-width: 0; font-weight: 560; }
.file-name .start { overflow: hidden; text-overflow: ellipsis; white-space: pre; min-width: 0; }
.file-name .end { flex: none; white-space: pre; }
.file-meta { flex: 1; display: grid; gap: 1px; min-width: 0; text-align: left; }
.file-sub { font-size: 12.5px; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.files { display: grid; gap: 6px; justify-items: start; margin: 6px 0; max-width: 100%; }
.msg.user .files { justify-items: end; }
/* Nexus's files sit in a grid: one column on phones, two on wider screens. */
.msg.assistant .files { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); justify-items: stretch; }
.msg.assistant .files > .thumbs { grid-column: 1 / -1; justify-self: start; }
.msg.assistant .files .file-card { width: 100%; }
.file-card {
  display: flex; align-items: center; gap: 12px; width: min(340px, 100%); padding: 9px 14px 9px 9px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; cursor: pointer; font-size: 14px; text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.file-card:hover { border-color: rgba(29, 29, 31, 0.16); box-shadow: 0 2px 12px rgba(29, 29, 31, 0.06); }
.file-card:focus-visible, .thumb:focus-visible, .file-row:focus-visible, .tray-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.thumbs { position: relative; overflow: hidden; border-radius: 18px; max-width: 100%; }
.thumbs.grid { display: grid; gap: 3px; width: min(340px, 100%); }
.thumbs.cols-2 { grid-template-columns: repeat(2, 1fr); }
.thumbs.cols-3 { grid-template-columns: repeat(3, 1fr); }
.thumb { display: block; position: relative; padding: 0; border: 0; background: var(--raised); cursor: zoom-in; line-height: 0; overflow: hidden; }
.thumb img { transition: opacity 0.2s; }
.thumbs.grid .thumb { aspect-ratio: 1; }
.thumbs.grid .thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumbs.single .thumb { max-width: 100%; max-height: 340px; min-height: 48px; }
.thumbs.single .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbs.single::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
.thumbs.single .thumb.loading { width: 240px; height: 180px; }
.thumb.loading { background: linear-gradient(90deg, var(--raised) 0, #f4f2ee 50%, var(--raised) 100%) 0 0 / 400px 100%; animation: shimmer 1.3s infinite linear; }
.thumb.loading img { position: absolute; opacity: 0; }
.thumb.broken { display: grid; place-items: center; cursor: pointer; }
.thumbs.single .thumb.broken { width: 120px; height: 96px; }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }

.file-rows { padding: 6px; }
.file-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; text-align: left; }
.file-row + .file-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 10px; border-top: 1px solid var(--hairline); }
.file-row:hover::before, .file-row:hover + .file-row::before { opacity: 0; }
.row-thumb { flex: none; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; background: var(--raised); line-height: 0; }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the composer's tray: picked files, uploading ---------- */
.attachments { display: flex; gap: 10px; overflow-x: auto; padding: 9px 4px 10px; margin: -9px -4px 0; scrollbar-width: none; }
.attachments::-webkit-scrollbar { display: none; }
.tray-item { position: relative; flex: none; }
.tray-open { display: block; position: relative; width: 68px; height: 68px; padding: 0; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--raised); cursor: zoom-in; }
.tray-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tray-item.file .file-card { width: 236px; padding-right: 22px; }
.tray-x {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 2px solid var(--canvas); background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 1;
}
.tray-x::before { content: ""; position: absolute; inset: -11px; }
.tray-ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 20, 22, 0.32); }
.tray-ring::after {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--progress, 0) * 360deg), rgba(255, 255, 255, 0.32) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.tray-bar { position: absolute; left: 61px; right: 22px; bottom: 7px; height: 3px; border-radius: 2px; background: var(--fill); overflow: hidden; pointer-events: none; }
.tray-bar::after { content: ""; display: block; height: 100%; width: calc(var(--progress, 0) * 100%); background: var(--ink); transition: width 0.2s; }
.tray-item.failed .file-card { border-color: rgba(199, 0, 19, 0.35); background: #fff8f8; padding-right: 78px; }
.tray-item.failed .file-sub { color: var(--destructive); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.tray-item.image.failed .tray-open { border-color: rgba(199, 0, 19, 0.5); }
.tray-failed { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 18px; border-radius: 14px; background: rgba(199, 0, 19, 0.42); color: #fff; font-weight: 700; pointer-events: none; }
.tray-retry {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-radius: 999px; padding: 5px 10px 5px 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tray-item.image .tray-retry { left: 5px; right: 5px; top: auto; bottom: 5px; transform: none; justify-content: center; padding: 3px 4px; font-size: 11px; }
.tray-item.image .tray-retry svg { display: none; }
.chat { position: relative; }
.dropzone {
  display: none; position: absolute; inset: 8px; border: 2px dashed rgba(29, 29, 31, 0.3); border-radius: 20px;
  background: rgba(246, 244, 240, 0.9); place-items: center; font-weight: 560; color: var(--secondary); pointer-events: none; z-index: 4;
}
.chat.dragging .dropzone { display: grid; }

/* ---------- the file viewer ---------- */
dialog.viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
dialog.viewer[open] { display: grid; place-items: center; }
dialog.viewer::backdrop { background: rgba(24, 22, 20, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.viewer-sheet {
  width: min(1180px, calc(100vw - 48px)); height: calc(100vh - 48px); height: calc(100dvh - 48px);
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05); animation: viewer-in 0.18s ease-out;
}
@keyframes viewer-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.viewer-title { flex: 1; display: grid; gap: 1px; min-width: 0; }
.viewer-title .file-name { font-size: 15px; }
.viewer-sub { font-size: 12.5px; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-pager { display: flex; align-items: center; font-size: 13px; color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-tools { display: flex; gap: 2px; }
.viewer-tools:empty { display: none; }
.viewer-download { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.viewer-body { flex: 1; position: relative; min-height: 0; overflow: hidden; background: var(--canvas); }
.viewer-body.view-video { background: #0c0c0d; }
.viewer-note { flex: none; padding: 8px 16px; font-size: 12.5px; color: var(--secondary); background: #faf6ec; border-bottom: 1px solid var(--hairline); }
.scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.paper { background: var(--surface); }
.fill { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface); }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; font-size: 13.5px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.loading .spinner { width: 22px; height: 22px; border-width: 2.5px; }
.loading-bar { width: 160px; height: 3px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.loading-bar::after { content: ""; display: block; height: 100%; width: calc(var(--progress, 0) * 100%); background: var(--ink); transition: width 0.2s; }

.stage { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; padding: 16px; }
.stage img, .stage video { display: block; max-width: 100%; max-height: 100%; }
.stage img { object-fit: contain; transform-origin: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.stage.zoom { touch-action: none; cursor: zoom-in; }
.stage.zoomed { cursor: grab; }
.stage.dark { padding: 0; background: #0c0c0d; }
.stage video { width: 100%; height: 100%; }

.text pre.code { margin: 0; padding: 18px 20px 56px; font: 12.5px/1.6 var(--mono); white-space: pre; tab-size: 4; }
.text pre.code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc { max-width: 760px; margin: 0 auto; padding: 36px 28px 72px; font-size: 15.5px; line-height: 1.65; }
.doc.md h2 { font-size: 24px; margin: 26px 0 10px; letter-spacing: -0.015em; }
.doc.md h3 { font-size: 18px; margin: 22px 0 8px; }
.doc.md h4 { font-size: 16.5px; margin: 20px 0 6px; }
.doc.md h2:first-child, .doc.md h3:first-child, .doc.md h4:first-child { margin-top: 0; }

.table-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--surface); }
table.grid { border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.4; }
.grid th, .grid td { padding: 6px 10px; text-align: left; vertical-align: top; white-space: pre; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.grid td.long { white-space: pre-wrap; min-width: 16rem; max-width: 26rem; }
.grid thead th { position: sticky; top: 0; z-index: 2; background: #f3f1ec; font-weight: 600; }
.grid .rownum, .grid .corner { position: sticky; left: 0; z-index: 1; min-width: 2.75rem; background: #f3f1ec; color: var(--tertiary); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.grid thead .corner { z-index: 3; }
.grid tbody tr:hover td { background: rgba(29, 29, 31, 0.025); }
.grid td.n { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-tabs { flex: none; display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid var(--hairline); scrollbar-width: none; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.empty-sheet { margin: 24px; color: var(--secondary); }

.slides { display: grid; gap: 20px; justify-items: center; align-content: start; padding: 24px 16px 56px; }
.slides .viewer-note { width: min(880px, 100%); border: 0; border-radius: 10px; }
.slide { position: relative; width: min(880px, 100%); aspect-ratio: 16 / 9; margin: 0; padding: clamp(18px, 5%, 52px); background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.08); }
.slide h2 { margin: 0 0 14px; font-size: clamp(18px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.015em; text-transform: none; color: var(--ink); }
.slide ul { margin: 0; padding-left: 1.2em; font-size: clamp(13px, 1.7vw, 17px); line-height: 1.5; }
.slide li { margin: 3px 0; }
.slide-number { position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: var(--tertiary); }
.slide-subtitle { margin: -4px 0 14px; font-size: clamp(14px, 2vw, 20px); color: var(--secondary); white-space: pre-line; }
.slide.cover { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.slide.cover h2 { font-size: clamp(22px, 4.4vw, 44px); }
.slide.image { padding: 0; aspect-ratio: auto; overflow: hidden; line-height: 0; }
.slide.image img { display: block; width: 100%; }
.slide.image figcaption { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 11px; line-height: 1.4; }

.zip { max-width: 860px; margin: 0 auto; padding: 16px 16px 56px; }
.zip-summary { padding: 4px 4px 12px; font-size: 13px; color: var(--secondary); }
.zip-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--hairline); font-size: 13.5px; }
.zip-path { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zip-size { flex: none; font-size: 12.5px; color: var(--secondary); font-variant-numeric: tabular-nums; }

.info-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; text-align: center; overflow: auto; }
.info-name { display: flex; justify-content: center; min-width: 0; max-width: min(520px, 100%); font-size: 17px; font-weight: 600; }
.info-sub { font-size: 13px; color: var(--secondary); }
.info-note { max-width: 380px; margin: 12px 0 16px; font-size: 14px; color: var(--secondary); }
.info-note:empty { display: none; }
.info-note.bad { color: var(--destructive); }
.info-card .btn { display: inline-flex; align-items: center; gap: 8px; }
.info-card audio { width: min(440px, 100%); margin-top: 20px; }

/* Phones: the viewer takes the whole screen, with room for the notch and home indicator. */
@media (max-width: 640px) {
  .viewer-sheet { width: 100%; height: 100%; border-radius: 0; box-shadow: none; animation-name: viewer-up; }
  @keyframes viewer-up { from { opacity: 0.6; transform: translateY(24px); } }
  .viewer-bar { gap: 4px; padding: max(6px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); }
  .viewer-bar > .file-badge, .viewer-pager .icon-btn { display: none; }
  .viewer-pager { padding: 0 6px; }
  .viewer-bar .viewer-download { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; background: none; }
  .viewer-download .label { display: none; }
  .stage { padding: 0 0 env(safe-area-inset-bottom); }
  .scroll, .fill { padding-bottom: env(safe-area-inset-bottom); }
  .doc { padding: 22px 18px 56px; }
  .text pre.code { padding: 14px 14px 48px; font-size: 12px; }
}

/* ---------- pairing ---------- */
.center { flex: 1; display: grid; place-items: center; padding: 24px; }
.pair { width: 100%; max-width: 380px; text-align: center; }
.pair img { width: 56px; height: 56px; margin-bottom: 8px; }
.pair input { text-align: center; letter-spacing: 0.12em; text-transform: uppercase; }

#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); max-width: calc(100% - 32px);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 20;
}
#toast.show { opacity: 1; }

/* =====================================================================
   Nexus web, calm editorial: warm paper, ink, one grotesque for display moments.
   ===================================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/vendor/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: optional; /* Preloaded; a slow font never swaps after the page is laid out. */
}
:root {
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow-1: 0 1px 2px rgba(29, 29, 31, 0.04), 0 6px 20px rgba(29, 29, 31, 0.05);
  --shadow-2: 0 2px 6px rgba(29, 29, 31, 0.05), 0 18px 48px rgba(29, 29, 31, 0.09);
  --rail: 236px;
  --side: 344px;
}
body {
  /* The phone's atmosphere: a soft white glow up top, warm paper below. */
  background:
    radial-gradient(110% 55% at 85% -12%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(90% 55% at -12% 108%, rgba(237, 234, 229, 0.95), transparent 66%),
    var(--canvas);
  background-attachment: fixed;
}
.display { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- shell ---------- */
.app-shell { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.rail, .side { display: none; }
.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.main > .page, .main > .chat { flex: 1; min-height: 0; }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 620; font-size: 20px; letter-spacing: -0.015em; font-variation-settings: "opsz" 48; }
.brand img { width: 26px; height: 26px; }

.topbar {
  display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 6;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--hairline); background: rgba(246, 244, 240, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.topbar-title { flex: 1; font-size: 14px; color: var(--secondary); padding-left: 4px; }
.topbar .live-text { display: none; }
.topbar-menu { position: relative; }
.topbar-menu > summary { list-style: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; color: var(--ink); }
.topbar-menu > summary::-webkit-details-marker { display: none; }
.topbar-menu > summary:hover, .topbar-menu[open] > summary { background: var(--fill); }
.menu-sheet {
  position: absolute; right: 0; top: calc(100% + 6px); width: 232px; padding: 6px; z-index: 10;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-2); animation: rise 0.16s ease-out;
}
.rail-nav, .menu-nav { display: grid; gap: 2px; }
.rail-nav a, .menu-nav a, .menu-item {
 display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px;
 text-decoration: none; text-align: left;

}
.rail-nav a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.menu-nav a.active { background: var(--fill); color: var(--ink); }
.menu-item { margin-top: 4px; border-top: 1px solid var(--hairline); }

.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tertiary); white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--attention); box-shadow: 0 0 0 3px rgba(158, 102, 0, 0.12); }
.live.on .live-dot { background: var(--verified); box-shadow: 0 0 0 3px rgba(31, 122, 53, 0.12); }


.rail-work h3, .side h3, .inline-needs h3 { margin: 0; font: 650 11px/1 var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tertiary); }
.rail-work h3 { margin: 0 0 8px 10px; }

/* ---------- buttons ---------- */
summary.btn { display: inline-flex; }

/* ---------- the conversation ---------- */
.chat { display: flex; flex-direction: column; min-height: 0; position: relative; }
.messages .column { padding-top: 28px; }
.msg { margin: 20px 0; }
.msg-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 13px; }
.msg-head img { width: 18px; height: 18px; }
.msg-head .who { font-weight: 650; }
.msg-head .at { color: var(--tertiary); font-size: 12px; }
.msg.assistant .bubble.md { font-size: 15.5px; line-height: 1.62; }
.msg.user .bubble { border-radius: 20px 20px 6px 20px; padding: 10px 15px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
/* A big paste: his words, then one quiet chip that opens the full text. */
.paste-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 11px 6px 9px;
  border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.paste-chip:hover { background: rgba(255, 255, 255, 0.22); }
.paste-chip:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
.paste-chip .paste-size { opacity: 0.7; overflow: hidden; text-overflow: ellipsis; }
.paste-words + .paste-chip { margin-top: 8px; }
.msg.worker .bubble { box-shadow: var(--shadow-1); }
.worker-label { display: inline-flex; align-items: center; gap: 5px; }
.msg.event { justify-content: center; margin: 12px 0; }

.receipt {
  display: flex; align-items: flex-start; gap: 11px; width: min(560px, 100%); padding: 11px 14px;
  border: 1px solid var(--hairline); border-radius: 15px; background: rgba(255, 255, 255, 0.7); animation: rise 0.25s ease-out;
}
.receipt .grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
@media (max-width: 640px) { .receipt { padding: 9px 12px; gap: 10px; border-radius: 13px; } .msg.event { margin: 8px 0; } }
.receipt-icon { flex: none; width: 24px; height: 24px; margin-top: 0; border-radius: 50%; display: grid; place-items: center; }
.receipt.ok .receipt-icon { background: rgba(31, 122, 53, 0.12); color: var(--verified); }
.receipt.muted .receipt-icon { background: var(--fill); color: var(--tertiary); }
.receipt.info { background: transparent; border-style: dashed; }
.receipt.info .receipt-icon { color: var(--tertiary); }
.receipt.info .receipt-sub { white-space: pre-wrap; }
.receipt.bad .receipt-icon { background: rgba(199, 0, 19, 0.1); color: var(--destructive); }
.receipt-title { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.receipt-title b { font-weight: 620; }
.receipt.muted .receipt-title { color: var(--secondary); }
.receipt-sub { margin-top: 2px; font-size: 12.5px; color: var(--tertiary); overflow-wrap: anywhere; }
.receipt-reason { margin-top: 5px; font-size: 12.5px; color: var(--destructive); }
/* A finished call: its card in the conversation, and its transcript in a sheet. */
.receipt.call .receipt-icon { background: var(--fill); color: var(--ink); }
.call-notes { margin: 5px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--secondary); }
.call-notes ul { margin: 0; padding-left: 18px; }
.receipt-sub .link { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.doc.transcript .msg:first-child { margin-top: 0; }
/* The pulse's note card: a ping (title, body, why) or a one-line remark. */
.receipt.note .receipt-icon { background: var(--fill); color: var(--secondary); }
.receipt.remark { background: transparent; }
.receipt-body { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--secondary); overflow-wrap: anywhere; }
.divider.fresh { display: flex; align-items: center; gap: 12px; border: 0; padding: 0; }
.divider.fresh::before, .divider.fresh::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }

.welcome { padding: min(14vh, 120px) 4px 24px; animation: rise 0.45s ease-out; }
.welcome-mark { width: 44px; height: 44px; margin-bottom: 18px; }
.welcome h1 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 46px); line-height: 1.06; }
.lede { max-width: 540px; margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: var(--secondary); }
.starters { display: flex; flex-wrap: wrap; gap: 8px; }
.starter {
  padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(255, 255, 255, 0.72);
  color: var(--ink); font-size: 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.starter:hover { background: var(--surface); border-color: rgba(29, 29, 31, 0.18); transform: translateY(-1px); }
.welcome-note { margin: 20px 0 0; font-size: 13.5px; color: var(--secondary); }

/* ---------- composer ---------- */
.pending .column { padding: 0 16px 12px; }
.inline-work { margin-bottom: 16px; }
.inline-needs { display: block; margin-top: 8px; }
/* A card waiting on him sits in the conversation with a way to put it away. */
.inline-need { position: relative; }
.inline-need-hide { position: absolute; top: 8px; right: 8px; opacity: 0.55; }
.inline-need-hide:hover, .inline-need-hide:focus-visible { opacity: 1; }
.composer { padding: 6px 0 max(14px, env(safe-area-inset-bottom)); }
.composer .column { padding: 0 16px; }
.composer-box {
  padding: 8px; border: 1px solid rgba(29, 29, 31, 0.1); border-radius: 22px; background: var(--surface);
  box-shadow: var(--shadow-2); transition: border-color 0.15s, box-shadow 0.15s;
}
.composer-box:focus-within { border-color: rgba(29, 29, 31, 0.24); }
.composer-box .attachments:empty { display: none; }
.composer-box .attachments { margin: 0 0 4px; padding: 9px 6px 6px; }
.composer-row { display: flex; align-items: flex-end; gap: 6px; }
.composer textarea {
 flex: 1; min-height: 40px; max-height: 240px; padding: 9px 6px;
 line-height: 1.45; resize: none; outline: none;
}
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 0; font-size: 12px; color: var(--tertiary); }
@media (hover: none) { .composer-foot .hint { visibility: hidden; } }
@media (max-width: 899px) { .composer-foot { display: none; } }

/* ---------- needs you ---------- */
.side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 20px; }
.count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 650; }
.side-link { margin-left: auto; font-size: 13px; color: var(--secondary); text-decoration: none; }
.side-link:hover { color: var(--ink); text-decoration: underline; }
.needs { display: grid; gap: 12px; }

/* ---------- the side panel: the date, needs you, the day, accounts at the foot ---------- */
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 20px 28px; }
.side-date {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; margin: 0 0 20px;
  font-family: var(--display); font-size: 26px; font-weight: 560; line-height: 1.1; letter-spacing: -0.022em; animation: rise 0.35s ease-out;
}
.side-monthday { color: var(--tertiary); font-weight: 460; }
.side-calm { display: flex; align-items: center; gap: 12px; animation: rise 0.35s ease-out; }
.calm-mark { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(31, 122, 53, 0.1); color: var(--verified); box-shadow: inset 0 0 0 1px rgba(31, 122, 53, 0.08); }
.calm-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.calm-sub { font-size: 12.5px; line-height: 1.35; color: var(--tertiary); }
.side-today { margin-top: 30px; }
.side-needs.has-needs + .side-today { margin-top: 34px; }
.side-note { margin-left: auto; font-size: 12px; color: var(--tertiary); font-variant-numeric: tabular-nums; }

/* What's on now: a raised card with a thin track that fills as the meeting goes. */
.day-now {
  position: relative; margin: 0 0 6px; padding: 12px 14px 14px;
  border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); animation: rise 0.3s ease-out;
}
.day-now-track { height: 3px; margin-top: 12px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.day-now-track span { display: block; height: 100%; border-radius: inherit; background: var(--verified); opacity: 0.7; }
.day-now-head { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--tertiary); font-variant-numeric: tabular-nums; }
.day-now-head .pulse { width: 7px; height: 7px; }
.day-now-label { font: 650 11px/1 var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--verified); }
.day-now-until { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-now-title {
  display: block; margin: 7px 0 6px; font-family: var(--display); font-size: 17px; font-weight: 560; line-height: 1.25; letter-spacing: -0.01em;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.day-now-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.day-now .day-meta { margin: 0; }
.day-join { position: relative; z-index: 1; height: 28px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; text-decoration: none; }

/* The rest of the day: time on the left, title and where (with the account's tint) on the right. */
.day-list { display: grid; gap: 1px; margin: 0 -8px; }
.day-now + .day-list, .day-list + .day-now, .day-list + .day-list { margin-top: 4px; }
.day-row {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 8px; align-items: start;
  padding: 7px 8px; border-radius: 12px; transition: background 0.15s;
}
.day-row:hover { background: var(--fill); }
.day-when { display: grid; gap: 2px; padding-top: 1px; }
.day-time { font-size: 12.5px; font-weight: 560; line-height: 1.35; color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-row.all-day .day-time { font-weight: 500; color: var(--tertiary); }
.day-in { font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--attention); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-main { min-width: 0; }
.day-title { display: block; font-size: 14px; font-weight: 560; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-link { color: inherit; text-decoration: none; }
.day-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.day-link:focus-visible { outline: none; }
.day-link:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; }
.day-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--tertiary); }
.day-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tint); }
.day-join-link {
  position: relative; z-index: 1; align-self: center; padding: 4px 10px; border-radius: 8px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.day-more { margin: 2px 0 0 72px; padding: 4px 0; font-size: 12.5px; }
.day-clear { display: flex; align-items: flex-start; gap: 12px; padding: 2px 0; }
.day-clear-mark { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--secondary); box-shadow: var(--shadow-1); }
.day-clear-title { font-size: 14px; font-weight: 600; line-height: 1.3; padding-top: 1px; }
.day-clear-sub { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--tertiary); overflow-wrap: anywhere; }
.day-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tertiary); }
.day-note a { color: var(--secondary); }

/* Accounts: one quiet row of tiles at the foot; hovering a tile names it in the caption. */
.side-foot { flex: none; padding: 13px 20px 15px; border-top: 1px solid var(--hairline); }
.acct-row { display: flex; align-items: center; gap: 10px; }
.acct-tiles { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.acct {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; text-decoration: none;
  background: color-mix(in srgb, var(--tint) 10%, #fff); color: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 16%, transparent);
  font: 640 11.5px/1 var(--display); letter-spacing: -0.01em; transition: transform 0.15s, box-shadow 0.15s;
}
.acct:hover, .acct:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 34%, transparent), 0 3px 10px rgba(29, 29, 31, 0.08); }
.acct:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.acct.broken { background: #fff3f3; color: var(--destructive); box-shadow: inset 0 0 0 1.5px rgba(199, 0, 19, 0.4); }
.acct.broken::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--destructive); box-shadow: 0 0 0 2px var(--canvas); }
.acct-caption { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 9px; font-size: 12px; color: var(--tertiary); text-decoration: none; }
.acct-caption span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caption:hover { color: var(--secondary); }
.acct-state { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--verified); box-shadow: 0 0 0 3px rgba(31, 122, 53, 0.12); }
.acct-caption.bad { color: var(--destructive); }
.acct-caption.bad .acct-state { background: var(--destructive); box-shadow: 0 0 0 3px rgba(199, 0, 19, 0.12); }
.acct-empty { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--secondary); text-decoration: none; }
.acct-empty:hover { color: var(--ink); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .side-date, .side-calm, .day-now { animation: none; } .acct { transition: none; } }

.act {
  padding: 14px 16px 12px; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface);
  box-shadow: var(--shadow-1); animation: rise 0.25s ease-out;
}
.act-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--tertiary); min-width: 0; }
.act-kind {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--fill); color: var(--secondary); font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
}
.act-email .act-kind { background: rgba(35, 82, 150, 0.08); color: #2a5596; }
.act-event .act-kind { background: rgba(31, 122, 53, 0.09); color: var(--verified); }
.act-task .act-kind { background: rgba(158, 102, 0, 0.1); color: var(--attention); }
.act-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-line { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.act-label { flex: none; width: 38px; color: var(--tertiary); }
.act-subject {
  margin: 8px 0 6px; font-family: var(--display); font-size: 18px; font-weight: 560; line-height: 1.3; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.act-when { margin: 0 0 6px; font-size: 14px; font-weight: 560; }
.act-body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 13.5px; line-height: 1.55; color: var(--secondary); white-space: pre-wrap; overflow-wrap: anywhere;
}
.act-body p { margin: 0; }
.act-body p + p { margin-top: 7px; }
.act.open .act-body { display: block; -webkit-line-clamp: unset; max-height: 50vh; overflow-y: auto; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; }
.chips-label { margin-right: 2px; font-size: 12px; color: var(--tertiary); }
.act-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.act-foot .link-btn { margin-left: auto; }

/* ---------- background work ---------- */
.workers-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.worker-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 6px 4px 6px 12px;
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface);
}
.rail .worker-row { align-items: flex-start; min-height: 0; padding: 7px 2px 7px 10px; border-color: transparent; background: transparent; }
.rail .worker-row:hover { background: var(--fill); }
.rail .worker-row .pulse { margin-top: 6px; }
.worker-row .grow { flex: 1; min-width: 0; }
.worker-title { font-size: 13.5px; font-weight: 560; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .worker-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.worker-sub { font-size: 12px; color: var(--tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.worker-row .icon-btn { flex: none; width: 30px; height: 30px; }
@media (hover: hover) {
  .rail .worker-row { position: relative; }
  .rail .worker-row .icon-btn { position: absolute; top: 3px; right: 2px; opacity: 0; }
  .rail .worker-row:hover .icon-btn, .rail .worker-row .icon-btn:focus-visible { opacity: 1; }
}
.pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verified); animation: pulse-dot 1.6s ease-in-out infinite; }

/* ---------- goals: rows in the rail (or above the composer), cards in the conversation ---------- */
.inline-goals h3 { margin: 0 0 8px 2px; font: 650 11px/1 var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tertiary); }
.goals-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.goal-row {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 8px 4px 8px 12px;
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface);
}
.rail .goal-row { padding: 7px 2px 7px 10px; border-color: transparent; background: transparent; }
.rail .goal-row:hover { background: var(--fill); }
.goal-row .grow { flex: 1; min-width: 0; }
.goal-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 2px; background: var(--tertiary); transform: rotate(45deg); }
.goal-row.working .goal-dot { background: var(--verified); animation: pulse-dot 1.6s ease-in-out infinite; }
.goal-row.needs_you .goal-dot { background: var(--attention); }
.goal-row.paused .goal-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tertiary); }
.goal-title { font-size: 13.5px; font-weight: 560; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-sub { font-size: 12px; color: var(--secondary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.goal-row.needs_you .goal-sub { color: var(--attention); }
.goal-update { margin-top: 2px; font-size: 12px; color: var(--tertiary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.goal-actions { flex: none; display: flex; }
.goal-row .icon-btn { width: 30px; height: 30px; }
.watch-icon { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; margin-left: -4px; color: var(--tertiary); }
.rail .goal-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rail .goal-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (hover: hover) {
  /* In the rail the controls appear over the row on hover, so names get the full width. */
  .rail .goal-row { position: relative; }
  .rail .goal-actions {
    position: absolute; top: 3px; right: 2px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1);
    opacity: 0; transition: opacity 0.15s;
  }
  .rail .goal-row:hover .goal-actions, .rail .goal-actions:focus-within { opacity: 1; }
}
.act-goal .act-kind { background: rgba(35, 82, 150, 0.08); color: #2a5596; }
.act-answer { margin-top: 10px; min-height: 44px; font: 14px/1.45 var(--font); resize: vertical; }

.goal-card-row { display: flex; }
.goal-card {
  width: min(560px, 100%); padding: 11px 14px 12px; border: 1px solid var(--hairline); border-radius: 15px;
  background: rgba(255, 255, 255, 0.78); box-shadow: var(--shadow-1); animation: rise 0.25s ease-out;
}
.goal-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--tertiary); }
.goal-card-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(35, 82, 150, 0.08); color: #2a5596; }
.goal-card.ok .goal-card-icon { background: rgba(31, 122, 53, 0.12); color: var(--verified); }
.goal-card.bad .goal-card-icon { background: rgba(199, 0, 19, 0.1); color: var(--destructive); }
.goal-card-label { flex: none; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; color: var(--secondary); }
.goal-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink); }
.goal-card-at { flex: none; margin-left: auto; white-space: nowrap; }
.goal-card-body { margin-top: 7px; font-size: 14px; line-height: 1.55; }
.goal-card-body > :last-child { margin-bottom: 0; }
.goal-card .files, .goal-card .thumbs { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .goal-card, .goal-row.working .goal-dot { animation: none; } }
.worker-row.queued .pulse { background: var(--tertiary); animation: none; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* ---------- other pages ---------- */
.page h1 { font-family: var(--display); font-size: 30px; font-weight: 560; letter-spacing: -0.025em; margin: 8px 0 8px; }
.page .column { padding-top: 34px; }
.card { border-radius: 18px; box-shadow: var(--shadow-1); }
.empty-state { display: flex; align-items: flex-start; gap: 14px; margin-top: 12px; padding: 20px; border: 1px dashed rgba(29, 29, 31, 0.15); border-radius: 18px; }
.empty-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--secondary); box-shadow: var(--shadow-1); }
.empty-title { font-family: var(--display); font-size: 17.5px; font-weight: 580; letter-spacing: -0.01em; margin: 1px 0 4px; }
.empty-text { max-width: 440px; font-size: 14px; line-height: 1.5; color: var(--secondary); }
.pair .display { font-size: 38px; margin: 6px 0 10px; }
.center { min-height: 100%; }

/* ---------- settings: models ---------- */
.plans { padding-top: 6px; padding-bottom: 14px; }
.plan { padding: 12px 0 14px; border-top: 1px solid var(--hairline); }
.plan:first-child { border-top: 0; }
.plan-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.plan-head .grow { flex: 1; min-width: 0; }
.plan-name { font-family: var(--display); font-size: 17px; font-weight: 580; letter-spacing: -0.01em; }
.plan-engine { font-family: var(--font); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--secondary); }
.plan-checked { flex: none; white-space: nowrap; }
.plan-status { margin: -2px 0 8px; font-size: 13px; }
.plan-status.wait { color: var(--attention); }
.plan-status.bad { color: var(--destructive); }
.plan-window { display: grid; grid-template-columns: 170px minmax(0, 1fr) 48px 158px; gap: 12px; align-items: center; padding: 4px 0; font-size: 14px; }
.plan-window-label { color: var(--ink); }
.plan-window-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 560; }
.plan-window-reset { color: var(--secondary); font-size: 13px; white-space: nowrap; }
.meter { position: relative; height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--verified); }
.meter-fill.wait { background: var(--attention); }
.meter-fill.bad { background: var(--destructive); }
.plan-credits { margin-top: 6px; }
.plan-note { margin: 6px 0 0; }
.model-toggle { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hairline); color: var(--ink); font-size: 15px; }
.model-roles { padding: 0 16px; }
.model-row { padding: 16px 0; border-top: 1px solid var(--hairline); }
.model-row:first-child { border-top: 0; }
.model-row-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.model-role-title { font-family: var(--display); font-size: 17px; font-weight: 580; letter-spacing: -0.01em; }
.model-summary { font-size: 14px; font-weight: 560; color: var(--ink); }
.model-id { margin-left: 8px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--tertiary); }
.model-row-text { margin: 2px 0 10px; }
.model-pick { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 8px; }
.model-pick.single { grid-template-columns: minmax(0, 1fr); }
.model-pick.triple { grid-template-columns: minmax(0, 1fr) 160px 160px; }
.model-pick select, .model-fallback select { padding: 9px 10px; text-overflow: ellipsis; }
.model-advanced { margin-top: 8px; font-size: 13px; color: var(--secondary); }
.model-advanced > summary { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; }
.model-advanced > summary::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.model-advanced[open] > summary::before { transform: rotate(45deg); }
.model-advanced > summary::-webkit-details-marker { display: none; }
.model-fallback { margin-top: 8px; }
.model-last { margin: 8px 0 0; font-size: 13px; color: var(--secondary); overflow-wrap: anywhere; }
.model-last-label { color: var(--tertiary); }
.model-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin: -2px 2px 0; }
.model-foot p { flex: 1 1 280px; margin: 0; }
.versions { margin-top: 14px; padding-top: 14px; }
.version-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline); }
.version-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verified); transform: translateY(-1px); }
.version-dot.wait { background: var(--attention); }
.version-dot.bad { background: var(--destructive); }
.version-row .grow { flex: 1; min-width: 0; }
.version-title { font-size: 14px; font-weight: 560; font-variant-numeric: tabular-nums; }
.version-text { font-size: 13px; color: var(--secondary); overflow-wrap: anywhere; }
.version-text.wait { color: var(--attention); }
.version-text.bad { color: var(--destructive); }
.versions-foot { margin: 10px 0 0; }
@media (max-width: 640px) {
  .plan-head { flex-wrap: wrap; gap: 2px 12px; }
  .plan-window { grid-template-columns: minmax(0, 1fr) 46px; gap: 4px 10px; padding: 6px 0; }
  .plan-window .meter { grid-column: 1 / -1; grid-row: 2; }
  .plan-window-reset { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; }
  .model-pick, .model-pick.triple { grid-template-columns: minmax(0, 1fr); }
  .model-row-head { flex-direction: column; gap: 2px; }
  .model-id { display: block; margin: 2px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse, .act, .receipt, .welcome, .menu-sheet { animation: none; }
}

/* ---------- trail: what Nexus did while answering ---------- */
.trail { margin-top: 10px; font-size: 12.5px; color: var(--tertiary); }
.trail > summary {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px 4px 8px; border-radius: 999px;
  cursor: pointer; list-style: none; transition: background 0.15s, color 0.15s;
}
.trail > summary::-webkit-details-marker { display: none; }
.trail > summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin-right: 1px; }
.trail[open] > summary::before { transform: rotate(45deg); }
.trail > summary:hover { background: var(--fill); color: var(--secondary); }
.trail-count { flex: none; font-weight: 600; color: var(--secondary); }
.trail-peek { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trail[open] .trail-peek { display: none; }
.trail ol { margin: 6px 0 0; padding: 4px 0 4px 10px; list-style: none; border-left: 1px solid var(--hairline); display: grid; gap: 5px; }
.trail li { display: flex; align-items: flex-start; gap: 8px; color: var(--secondary); line-height: 1.4; }
.step-icon { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--fill); color: var(--secondary); }
.step-text { padding-top: 1px; overflow-wrap: anywhere; }
.step-link {
  display: inline-flex; align-items: flex-start; gap: 8px; max-width: calc(100% + 12px); margin: -3px -6px; padding: 3px 6px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.step-link .step-text { flex: 1; text-decoration: underline; text-decoration-color: rgba(29, 29, 31, 0.22); text-underline-offset: 3px; }
.step-link .step-open { flex: none; display: grid; place-items: center; height: 20px; color: var(--tertiary); }
.step-link:hover { background: var(--fill); color: var(--ink); }
.step-link:hover .step-icon { background: var(--surface); color: var(--ink); }

/* ---------- a memory in full ---------- */
.memory-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.memory-link {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 8px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 12.5px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.memory-link svg { flex: none; color: var(--secondary); }
.memory-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-link:hover { border-color: rgba(29, 29, 31, 0.2); box-shadow: var(--shadow-1); }
.memory-sheet {
  width: min(600px, calc(100vw - 48px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05); animation: viewer-in 0.18s ease-out;
}
.memory-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--hairline); }
.memory-badge { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--fill); color: var(--secondary); }
.memory-eyebrow { flex: 1; font: 650 11px/1 var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tertiary); }
.memory-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px 26px; }
.memory-title { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 560; line-height: 1.18; letter-spacing: -0.02em; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
.memory-chips { margin: 12px 0 0; }
.memory-body { margin-top: 18px; font-size: 15.5px; line-height: 1.62; overflow-wrap: anywhere; }
.memory-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13px; }
.memory-facts dt { color: var(--tertiary); }
.memory-facts dd { margin: 0; color: var(--secondary); }
.memory-note { margin: 0 0 14px; padding: 9px 12px; border-radius: 11px; background: var(--fill); font-size: 13px; color: var(--secondary); }
.memory-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 28px; border-top: 1px solid var(--hairline); }
.memory-foot-note { flex: 1; font-size: 12.5px; color: var(--tertiary); }
.memory-loading { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: 13.5px; color: var(--secondary); }
.memory-empty { margin: 4px 0; color: var(--secondary); }
.memory-row { align-items: flex-start; }
.memory-open { display: block; min-width: 0; margin: -6px; padding: 6px; font: inherit; text-align: left; }
.memory-open .title { white-space: normal; }
.memory-row-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
/* Phones: a sheet up from the bottom, clear of the home indicator. */
@media (max-width: 640px) {
  dialog.memory-viewer[open] { place-items: end stretch; }
  .memory-sheet { width: 100%; max-height: calc(100dvh - max(28px, env(safe-area-inset-top))); border-radius: 22px 22px 0 0; animation-name: viewer-up; }
  .memory-scroll { padding: 18px 20px 22px; }
  .memory-title { font-size: 23px; }
  .memory-foot { padding: 8px 12px max(10px, env(safe-area-inset-bottom)) 20px; }
}
.meta .link { font-size: 12px; }
.msg.assistant .meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; opacity: 0; transition: opacity 0.15s; }
.msg.assistant .meta .copy-btn:first-child { margin-left: -7px; }
.msg.assistant:hover .meta, .msg.assistant:focus-within .meta { opacity: 1; }
@media (hover: none) { .msg.assistant .meta { opacity: 1; } }

/* ---------- steps: a long run of one kind opens into its own list ---------- */
.step-times { color: var(--tertiary); font-variant-numeric: tabular-nums; }
.trail li.step-group { display: block; }
.step-group > details > summary { display: flex; align-items: flex-start; gap: 8px; color: var(--secondary); cursor: pointer; border-radius: 8px; margin: -3px -6px; padding: 3px 6px; transition: background 0.15s; }
.step-group > details > summary:hover { background: var(--fill); color: var(--ink); }
.step-group > details > summary .step-text::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 2px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.6; transition: transform 0.15s; }
.step-group > details[open] > summary .step-text::after { transform: rotate(45deg); }
.trail .step-group ol { margin: 6px 0 2px 9px; padding: 2px 0 2px 14px; }

/* ---------- activity: receipts, results, pings and notes, outside the chat ---------- */
.rail-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px 10px; }
.rail-head h3 { margin: 0; }
.rail-link { margin-left: auto; padding: 2px 4px; }
.rail-link:hover { text-decoration: underline; }
.rail-empty { margin: 0 0 0 10px; font-size: 12.5px; color: var(--tertiary); }
.activity-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.activity-row, .work-activity-row { position: relative; display: flex; align-items: center; min-width: 0; border-radius: 11px; transition: background 0.15s; }
.activity-row:hover, .work-activity-row:hover { background: var(--fill); }
.activity-row.fresh { animation: activity-fresh 2.6s ease-out; }
@keyframes activity-fresh { 0%, 35% { background: rgba(35, 82, 150, 0.1); box-shadow: inset 0 0 0 1px rgba(35, 82, 150, 0.12); } }
.activity-row.dismissed { opacity: 0.6; }
.activity-open {
 flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 9px;
 font: inherit; text-align: left;
}
.activity-open:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* One glyph per item, in one quiet frame: a check for anything finished, an icon for what the item
   is. Only a failure is drawn in color. */
.activity-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--secondary); }
.activity-icon.is-done, .activity-badge.is-done { color: var(--verified); }
.activity-icon.is-bad, .activity-badge.is-bad { background: rgba(199, 0, 19, 0.07); color: var(--destructive); }
.activity-icon.is-muted, .activity-badge.is-muted { color: var(--tertiary); }
.activity-icon.is-open, .activity-badge.is-open { color: var(--ink); }
.activity-text { flex: 1; min-width: 0; display: grid; }
.activity-title { font-size: 13px; font-weight: 560; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tone-muted .activity-title { color: var(--secondary); font-weight: 500; }
.activity-sub { font-size: 12px; line-height: 1.35; color: var(--tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-at { flex: none; font-size: 11.5px; color: var(--tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.activity-x { flex: none; width: 30px; height: 30px; color: var(--tertiary); }
.activity-x:hover:not(:disabled) { color: var(--ink); }
@media (hover: hover) {
  /* The x takes the time's place on hover, so titles keep the width. */
  .activity-row .activity-x { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); background: var(--surface); box-shadow: var(--shadow-1); opacity: 0; transition: opacity 0.15s; }
  .activity-row:hover .activity-x, .activity-row .activity-x:focus-visible { opacity: 1; }
  .activity-row:hover .activity-at { visibility: hidden; }
}
.rail .activity-open { align-items: flex-start; padding: 6px 8px 6px 8px; gap: 9px; }
.rail .activity-icon { width: 18px; height: 18px; margin-top: 2px; border-radius: 0; background: none; }
.rail .activity-sub { font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* The Activity sheet and one item in full (the memory sheet's frame). */
.activity-scroll { padding: 10px 14px 18px; }
.activity-history .activity-row { border-radius: 12px; }
.activity-history .activity-open { padding: 9px 10px; gap: 11px; }
.activity-history .activity-icon { width: 28px; height: 28px; }
.activity-history .activity-title { font-size: 14px; }
.activity-history .activity-sub { font-size: 12.5px; }
.activity-history .activity-row + .activity-row::before { content: ""; position: absolute; top: 0; left: 49px; right: 10px; border-top: 1px solid var(--hairline); }
.activity-history .activity-row:hover::before, .activity-history .activity-row:hover + .activity-row::before { opacity: 0; }
.activity-more { display: flex; justify-content: center; padding-top: 10px; }
.activity-more:has(> [hidden]) { display: none; }
.activity-empty { display: flex; align-items: flex-start; gap: 12px; padding: 14px 8px; }
.memory-bar .btn.small { height: 30px; }
.activity-heading { font-size: 22px; line-height: 1.22; }
.activity-when { margin: 6px 0 0; font-size: 12.5px; color: var(--tertiary); }
.activity-plain { white-space: pre-wrap; }
.activity-why { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--secondary); }
.activity-why svg { flex: none; margin-top: 2px; color: var(--tertiary); }
.activity-raw { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.5; color: var(--tertiary); white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-error { margin: 12px 0 0; font-size: 13.5px; color: var(--destructive); }
.activity-sheet .files, .activity-sheet .thumbs { margin-top: 14px; }
.activity-sheet .trail { margin-top: 16px; }

/* Narrow screens: what arrives slides in at the top, newest on top; more than one stacks. */
.activity-toasts {
  position: fixed; z-index: 15; left: 50%; transform: translateX(-50%); top: calc(max(8px, env(safe-area-inset-top)) + 60px);
  width: min(520px, calc(100% - 24px)); display: grid; gap: 8px; justify-items: center; pointer-events: none;
}
.activity-toasts > * { pointer-events: auto; }
.activity-toasts:empty { display: none; }
.activity-toast {
  width: 100%; display: flex; align-items: flex-start; min-width: 0; border: 1px solid var(--hairline); border-radius: 16px;
  background: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-2); animation: toast-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
.toast-open { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 11px; padding: 11px 4px 11px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 16px 0 0 16px; }
.toast-open .activity-icon { width: 30px; height: 30px; margin-top: 1px; }
.toast-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.toast-label { font: 650 11px/1.3 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-at { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tertiary); font-variant-numeric: tabular-nums; }
.toast-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-detail { font-size: 13px; line-height: 1.4; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-x { width: 44px; height: 44px; margin: 4px 2px 0 0; color: var(--tertiary); }
.toast-x:hover:not(:disabled) { color: var(--ink); }
.toast-stack { position: relative; width: 100%; isolation: isolate; padding-bottom: 6px; }
.toast-stack.depth-3 { padding-bottom: 12px; }
.toast-stack::before, .toast-stack::after {
  content: ""; position: absolute; z-index: -1; height: 24px; border: 1px solid rgba(29, 29, 31, 0.1); border-radius: 0 0 15px 15px;
  background: #fbfaf8; box-shadow: 0 4px 12px rgba(29, 29, 31, 0.08);
}
.toast-stack::before { left: 9px; right: 9px; bottom: 0; }
.toast-stack.depth-3::before { bottom: 6px; }
.toast-stack.depth-3::after { left: 18px; right: 18px; bottom: 0; background: #f5f3ef; }
.toast-stack.depth-2::after { display: none; }
/* "3 updates" sits on the stack's lower edge, like a tab. */
.toast-stack + .toast-more { margin-top: -15px; position: relative; z-index: 1; }
.toast-more {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 999px;
  background: rgba(255, 255, 255, 0.96); color: var(--secondary); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-1); cursor: pointer;
}
.toast-more:hover { color: var(--ink); }
/* More than one: a frosted panel over the conversation, stacked or opened into a list. */
.activity-toasts.open, .activity-toasts.stacked {
  width: min(536px, calc(100% - 12px)); padding: 8px; border: 1px solid var(--hairline); border-radius: 22px;
  background: rgba(246, 244, 240, 0.94); box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.toast-list { width: 100%; display: grid; gap: 6px; max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
.toast-list .activity-toast { box-shadow: var(--shadow-1); animation: none; }
.toast-foot { display: flex; gap: 8px; justify-content: center; }
.activity-toasts.open .toast-more { box-shadow: none; }
.activity-toasts.stacked { gap: 0; }
.activity-toasts.stacked .activity-toast { box-shadow: var(--shadow-1); }
@media (prefers-reduced-motion: reduce) { .activity-toast, .activity-row.fresh { animation: none; } }

/* The menu: Activity with how many are open, and a dot on the menu button. */
.topbar-menu > summary { position: relative; }
.menu-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #2a5596; box-shadow: 0 0 0 2px var(--canvas); }
.menu-dot[hidden] { display: none; }
.menu-activity + .menu-item { margin-top: 0; }
.menu-count { margin-left: auto; background: #2a5596; }
.menu-count[hidden] { display: none; }

/* ---------- reminders & watches: their own sheet, reached from the rail or the menu ---------- */
/* Never pinned over the chat. The rail has one calm entry; narrow screens have a menu item. */
.rail-watches { margin-top: -14px; }
.reminders-entry {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 11px; border: 0; border-radius: 11px;
  background: none; color: var(--secondary); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.reminders-entry:hover { background: var(--fill); color: var(--ink); }
.reminders-entry:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.reminders-entry-icon { flex: none; align-self: flex-start; display: grid; place-items: center; height: 20px; color: var(--secondary); }
.reminders-entry-text { flex: 1; min-width: 0; display: grid; }
.reminders-entry-title { font-size: 14.5px; font-weight: 500; line-height: 20px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reminders-entry-sub { font-size: 12px; line-height: 1.35; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-sheet { width: 256px; }
.menu-item.menu-reminders { margin-top: 0; border-top: 0; white-space: nowrap; }
.menu-count.reminders-count { background: var(--fill); color: var(--secondary); }

.reminders-scroll { padding: 18px 22px 24px; display: grid; gap: 22px; align-content: start; }
.rw-section h3 { margin: 0 0 8px 2px; font: 650 11px/1 var(--font); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tertiary); }
.rw-list { display: grid; gap: 8px; }
.rw-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--hairline); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-1);
}
.rw-icon { flex: none; align-self: flex-start; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--secondary); }
.rw-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rw-when { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rw-title { font-size: 14.5px; font-weight: 560; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.rw-when + .rw-title { font-weight: 450; color: var(--secondary); }
.rw-sub { font-size: 12.5px; line-height: 1.35; color: var(--tertiary); }
.rw-row .btn.small { flex: none; }
.rw-recent .rw-list { gap: 0; padding: 2px 4px; }
.rw-ended { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hairline); }
.rw-ended:first-child { border-top: 0; }
.rw-ended-title { flex: 1; min-width: 0; font-size: 13.5px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-ended-sub { flex: none; font-size: 12px; color: var(--tertiary); font-variant-numeric: tabular-nums; }
.rw-empty { padding: 28px 8px 8px; text-align: center; }
.rw-empty-title { font-family: var(--display); font-size: 19px; font-weight: 580; letter-spacing: -0.015em; color: var(--ink); }
.rw-empty-sub { max-width: 340px; margin: 8px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--tertiary); }
@media (max-width: 899px) { .reminders-scroll { padding: 16px 16px 22px; } }

/* ---------- wide screens: rail, then the Needs-you column (last so they win) ---------- */
@media (min-width: 900px) {
  .app-shell { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .topbar { display: none; }
  .rail {
    display: flex; flex-direction: column; gap: 26px; min-height: 0; overflow-y: auto;
    padding: 22px 12px 16px; border-right: 1px solid var(--hairline); background: rgba(251, 250, 247, 0.55);
  }
  .rail > .brand { padding: 2px 10px; }
  .rail-foot { margin-top: auto; padding: 0 10px; }
  .inline-work { display: none; }
  .activity-toasts { display: none; }
}
@media (min-width: 1180px) {
  .app-shell.route-chat { grid-template-columns: var(--rail) minmax(0, 1fr) var(--side); }
  .side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-left: 1px solid var(--hairline); background: rgba(251, 250, 247, 0.45); }
}

/* ---------- Work owns the screen; the Today panel folds to a pull tab ---------- */
/* No rail and no top bar in Work: its own sidebar leads back to Chat. */
.app-shell.route-work { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.side[hidden] { display: none; }
.side-tab { display: none; }
@media (min-width: 1180px) {
  .app-shell.route-chat.side-closed { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .app-shell.route-work { grid-template-columns: minmax(0, 1fr) var(--side); }
  .app-shell.route-work.side-closed { grid-template-columns: minmax(0, 1fr); }
  /* A small handle on the panel's edge (or the screen's, when folded). */
  .side-tab {
    position: fixed; z-index: 7; top: 50%; right: var(--side); transform: translateY(-50%); display: grid; place-items: center;
    width: 16px; height: 56px; padding: 0; border: 1px solid var(--hairline); border-right: 0; border-radius: 9px 0 0 9px;
    background: var(--surface); color: var(--tertiary); cursor: pointer; box-shadow: -2px 0 10px rgba(29, 29, 31, 0.05);
    transition: color 0.12s, width 0.12s, background 0.12s;
  }
  .side-closed .side-tab { right: 0; }
  /* In Work the right edge is for what is being read (a transcript's end, the review's notes): the handle sits up beside the session's header, which leaves it room. */
  .app-shell.route-work .side-tab { top: 10px; transform: none; height: 33px; }
  .app-shell.route-work .work-session .work-header { padding-right: 26px; }
  .side-tab:hover { width: 20px; color: var(--ink); }
  .side-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .side-tab-dot { position: absolute; top: -4px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--attention); box-shadow: 0 0 0 2px var(--canvas); }
  .side-tab-dot[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .side-tab { transition: none; } }

/* =====================================================================
   Rich response containers (blocks.js): cards, carousels, tables, maps
   and charts inside Nexus's replies. Everything is scoped under .nx so
   the markdown styles above don't leak in.

   One palette: ink, neutral greys and white on the app's canvas. Colour
   only where it means something: green and red for up/down and yes/no.
   One family: white surfaces with a hairline and a 16px radius, an 8px
   rhythm (4 / 8 / 12 / 16), Bricolage for titles and numbers, the same
   pills, tags and "More" everywhere. Phone first; nothing scrolls the
   page sideways.
   ===================================================================== */
.md .nx {
  /* Neutral greys in place of the app's warm ones, for everything inside a container. */
  --secondary: #5f5f64; --tertiary: #86868b; --raised: #f0f0f1; --fill: rgba(29, 29, 31, 0.05);
  --nx-quiet: #f8f8f9; --nx-line: rgba(29, 29, 31, 0.16); --nx-mid: #8e8e93; --nx-soft: #c7c7cc; --nx-faint: #e4e4e7;
  --nx-up: #1a7f37; --nx-down: #c9342a;
  margin: 8px 0 16px; padding: 0; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--ink);
}
.md .nx:last-child { margin-bottom: 2px; }
.md .nx ul, .md .nx ol { list-style: none; margin: 0; padding: 0; }
.md .nx li + li, .md .nx li > * { margin-top: 0; }
.md .nx p { margin: 0; }
.md .nx a { color: inherit; text-decoration: none; }
.md .nx h4 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.md .nx dl, .md .nx dd { margin: 0; }
.nx .nx-title { margin: 0 0 8px; font-family: var(--display); font-size: 15.5px; font-weight: 560; letter-spacing: -0.01em; color: var(--ink); }
.nx .nx-muted { color: var(--tertiary); }
.nx .nx-sub { display: flex; align-items: baseline; gap: 4px; color: var(--secondary); font-size: 13px; }
.nx .nx-sub .nx-icon { align-self: center; color: var(--tertiary); }
.nx .nx-note { color: var(--secondary); font-size: 13px; line-height: 1.45; }
.nx .nx-foot { margin-top: 8px !important; color: var(--tertiary); font-size: 12.5px; }
.nx .nx-foot + .nx-foot { margin-top: 2px !important; }
.nx .nx-icon { flex: none; vertical-align: -2px; }
.nx .nx-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx .nx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The shared surface: every card, table and list is this. */
.nx .nx-card, .nx .nx-links, .nx .nx-table-scroll, .nx .nx-places-card, .nx .nx-timeline, .nx .nx-metric, .nx .nx-chart-card, .nx .nx-checklist-card, .nx .nx-ranking, .nx .nx-pc-card, .md .nx.nx-verdict {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 1px 2px rgba(29, 29, 31, 0.03);
}
.nx .nx-card { position: relative; min-width: 0; overflow: hidden; }
.nx .nx-body { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px 13px; min-width: 0; }
.nx .nx-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.md .nx .nx-card-title { font-weight: 620; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.005em; }
.nx :is(.nx-card-title, .nx-rank-name, .nx-step-title, .nx-check-title, .nx-alt-title) a:hover { text-decoration: underline; text-decoration-color: rgba(29, 29, 31, 0.3); text-underline-offset: 2px; }
.nx .nx-price { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.nx .nx-price small { font-family: var(--font); font-size: 12.5px; font-weight: 450; color: var(--secondary); letter-spacing: 0; }
.nx .nx-was { color: var(--tertiary); font-size: 12.5px; }
.nx .nx-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 560; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx .nx-rating .nx-icon path { fill: currentColor; stroke: currentColor; }
.nx .nx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.nx .nx-chips li, .nx .nx-chip-link { padding: 3px 8px; border-radius: 999px; background: var(--fill); color: var(--secondary); font-size: 12px; line-height: 1.35; white-space: nowrap; }
.nx .nx-chips.nx-tight li { padding: 2px 7px; font-size: 11.5px; }
.nx .nx-chip-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; color: var(--ink); font-size: 12.5px; font-weight: 560; }
.nx .nx-chip-link:hover { background: rgba(29, 29, 31, 0.09); }
.nx .nx-cta { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 4px; padding: 6px 11px; border-radius: 999px; background: var(--ink); color: #fff !important; font-size: 12.5px; font-weight: 560; }
.nx .nx-cta:hover { background: #3a3a3d; }
.nx .nx-badge { position: absolute; top: 9px; left: 9px; z-index: 1; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 11.5px; font-weight: 620; box-shadow: 0 1px 4px rgba(29, 29, 31, 0.12); }
/* The pick, wherever it appears: a small black pill. A tag is its outlined, quieter sibling. */
.nx .nx-pick-mark { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 650; letter-spacing: 0.02em; line-height: 1.45; white-space: nowrap; }
.nx .nx-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--nx-line); color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.nx .nx-label { color: var(--tertiary); font-size: 12px; font-weight: 600; }
/* Text cut to two lines, and the button that opens it in place (block-live.js shows it only when cut). */
.nx [data-nx-clamp] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.nx [data-nx-clamp].nx-open { display: block; -webkit-line-clamp: unset; }
.nx .nx-more { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nx .nx-more[hidden] { display: none; }
.nx .nx-more:hover { color: var(--ink); }
.nx .nx-more .nx-icon { transition: transform 0.15s; }
.nx .nx-more[aria-expanded="true"] .nx-icon { transform: rotate(180deg); }
/* What Nexus thinks of the thing above it: a quiet grey foot on its card. */
.nx .nx-take { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--nx-quiet); font-size: 13.5px; line-height: 1.45; }
.nx .nx-take-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; }
.nx .nx-take-label img { width: 15px; height: 15px; align-self: center; }
@media (max-width: 520px) { .nx .nx-take { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Pictures: a grey placeholder until the proxy's image paints; a broken one shows the icon. */
.nx .nx-media { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--raised); color: rgba(95, 95, 100, 0.45); }
.nx .nx-media .nx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx .nx-media.nx-failed .nx-img { display: none; }
.nx .nx-media:has(> .nx-img):not(.nx-failed) > .nx-icon { visibility: hidden; }
.nx .nx-media > .nx-icon { width: 22px; height: 22px; }
.nx .nx-shimmer, .nx .nx-shimmer-text { background: linear-gradient(100deg, var(--raised) 30%, #f8f8f9 50%, var(--raised) 70%) 0 0 / 300% 100%; animation: nx-shimmer 1.4s ease-in-out infinite; }
.nx .nx-shimmer-text { color: transparent; border-radius: 6px; }
@keyframes nx-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.nx .nx-initial { display: flex; align-items: center; justify-content: center; background: #ececee; color: var(--secondary); font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
.nx .nx-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 13.5px; }

/* Strips (products) and photo carousels: native scrolling that snaps, arrows on hover. */
.nx .nx-strip { position: relative; margin: 0 -2px; }
.nx .nx-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 2px; padding: 2px 2px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.nx .nx-track::-webkit-scrollbar, .nx .nx-photo-track::-webkit-scrollbar { display: none; }
.nx .nx-track > * { scroll-snap-align: start; flex: none; }
.nx .nx-nav, .nx .nx-pnav { position: absolute; z-index: 2; display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(255, 255, 255, 0.96); color: var(--ink); box-shadow: 0 2px 8px rgba(29, 29, 31, 0.12); cursor: pointer; }
.nx .nx-nav { top: calc(50% - 22px); }
.nx .nx-nav.nx-prev { left: -8px; }
.nx .nx-nav.nx-next { right: -8px; }
@media (hover: hover) {
  .nx .nx-strip:hover .nx-nav, .nx .nx-photos:hover .nx-pnav { display: inline-flex; }
  .nx .nx-at-start > .nx-prev, .nx .nx-at-end > .nx-next { display: none !important; }
}
.nx .nx-photos { position: relative; aspect-ratio: 4 / 3; background: var(--raised); }
.nx .nx-photo-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.nx .nx-photo { flex: none; width: 100%; height: 100%; scroll-snap-align: start; display: block; }
.nx .nx-photos > .nx-photo, .nx .nx-photo > .nx-media { width: 100%; height: 100%; }
.nx .nx-pnav { top: calc(50% - 15px); width: 30px; height: 30px; }
.nx .nx-pnav.nx-prev { left: 8px; }
.nx .nx-pnav.nx-next { right: 8px; }
.nx .nx-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.nx .nx-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); transition: background 0.2s; }
.nx .nx-dots i.on { background: #fff; }

/* Listings: one card per place, photos first; two columns when there's room. */
.nx .nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 12px; }
.nx .nx-media-wrap { position: relative; }

/* Products: a strip of compact cards, the whole card a link. */
.nx .nx-product { width: 182px; }
.nx .nx-product .nx-cover-link { display: block; height: 100%; }
.nx .nx-product .nx-square { aspect-ratio: 1; background: #fafafa; }
.nx .nx-product .nx-square .nx-img { object-fit: contain; padding: 10px; }
.nx .nx-product .nx-body { gap: 3px; }
.md .nx .nx-product .nx-card-title { font-size: 13.5px; font-weight: 600; }
.nx .nx-product:hover { border-color: rgba(29, 29, 31, 0.16); }
.nx .nx-product-facts { color: var(--secondary); font-size: 12px; }
.nx .nx-product-action { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 600; }

/* Links: source rows with the site's favicon and the page's own picture. */
.nx .nx-links { overflow: hidden; }
.nx .nx-link-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; }
.nx .nx-link-row + .nx-link-row { border-top: 1px solid var(--hairline); }
.nx .nx-link-row:hover { background: rgba(29, 29, 31, 0.025); }
.nx .nx-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx .nx-link-site { display: flex; align-items: center; gap: 6px; color: var(--secondary); font-size: 12px; }
.nx .nx-favicon { width: 16px; height: 16px; border-radius: 4px; flex: none; object-fit: contain; }
.nx .nx-letter { display: inline-flex; align-items: center; justify-content: center; background: var(--fill); font-size: 10px; font-weight: 650; color: var(--secondary); }
.nx .nx-link-title { width: fit-content; max-width: 100%; font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx .nx-link-desc { color: var(--secondary); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx .nx-link-desc[hidden] { display: none; }
.nx .nx-thumb { flex: none; width: 76px; height: 58px; border-radius: 10px; }

/* Comparison: scrolls sideways inside itself with the first column pinned; typed cells; a column of
   numbers, prices or ratings sorts from its heading. The pick is a black pill and a rule, not a tint. */
.nx .nx-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.md .nx .nx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.4; }
.md .nx .nx-table th, .md .nx .nx-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--surface); }
.md .nx .nx-table thead th { background: #fafafa; color: var(--secondary); font-size: 12px; font-weight: 620; }
.md .nx .nx-table tbody th { font-weight: 620; color: var(--ink); white-space: normal; min-width: 120px; max-width: 200px; }
.md .nx .nx-table td.nx-col-text { white-space: normal; min-width: 120px; max-width: 260px; }
.md .nx .nx-table tbody tr:last-child > * { border-bottom: 0; }
.nx .nx-sticky { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--hairline); }
.md .nx .nx-table tr.nx-pick > th { box-shadow: inset 2px 0 0 var(--ink), 1px 0 0 var(--hairline); font-weight: 700; }
.nx .nx-table .nx-pick-mark { margin-left: 4px; vertical-align: 1px; }
.nx .nx-sort { display: inline-flex; align-items: center; gap: 2px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.nx .nx-sort:hover { background: var(--fill); color: var(--ink); }
.nx .nx-sort-icon path { fill: none; stroke: var(--nx-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx th[aria-sort="ascending"] .nx-sort, .nx th[aria-sort="descending"] .nx-sort { color: var(--ink); }
.nx th[aria-sort="ascending"] .nx-sort-up, .nx th[aria-sort="descending"] .nx-sort-down { stroke: var(--ink); }
.nx .nx-price-cell { font-weight: 620; }
.nx .nx-yes { color: var(--nx-up); }
.nx .nx-no { color: var(--nx-soft); }
.nx .nx-cellbar { display: flex; align-items: center; gap: 8px; }
.nx .nx-cellbar-track, .nx .nx-score-bar, .nx .nx-meter-track { display: block; height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.nx .nx-cellbar-track { width: 56px; }
.nx :is(.nx-cellbar-track, .nx-score-bar, .nx-meter-track) i { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
.md .nx .nx-cell-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: rgba(29, 29, 31, 0.25); text-underline-offset: 2px; }

/* Gallery: a mosaic (or an even grid, or one strip); a tap opens the photo large. */
.nx .nx-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.nx .nx-gallery[data-count="1"] { grid-template-columns: 1fr; }
.nx .nx-gallery[data-layout="mosaic"]:is([data-count="3"], [data-count="5"]) .nx-tile:first-child { grid-row: span 2; aspect-ratio: auto; }
@media (min-width: 640px) { .nx .nx-gallery:not([data-layout="strip"]):not([data-count="1"]):not([data-count="2"]):not([data-layout="mosaic"][data-count="3"]) { grid-template-columns: repeat(3, 1fr); } }
.nx .nx-gallery[data-layout="strip"] { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.nx .nx-gallery[data-layout="strip"]::-webkit-scrollbar { display: none; }
.nx .nx-gallery[data-layout="strip"] > .nx-tile { flex: none; width: min(62%, 280px); aspect-ratio: 4 / 3; scroll-snap-align: start; }
.nx .nx-tile { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: var(--raised); }
.nx .nx-gallery[data-count="1"] .nx-tile { aspect-ratio: 16 / 10; }
.nx .nx-tile > .nx-media { width: 100%; height: 100%; }
.nx .nx-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); color: #fff; font-size: 12px; text-align: left; }
dialog.nx-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 20, 21, 0.94); color: #fff; }
dialog.nx-lightbox::backdrop { background: transparent; }
.nx-lightbox .nx-lb-stage { position: absolute; inset: 0 0 64px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.nx-lightbox .nx-lb-stage img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.nx-lightbox .nx-lb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; font-size: 14px; }
.nx-lightbox .nx-lb-bar a { display: inline-flex; align-items: center; gap: 5px; color: #fff; }
.nx-lightbox .nx-muted { color: rgba(255, 255, 255, 0.6); }
.nx-lightbox button { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.nx-lightbox .nx-lb-close { top: 16px; right: 16px; }
.nx-lightbox .nx-lb-nav { top: calc(50% - 53px); }
.nx-lightbox .nx-lb-nav.nx-prev { left: 16px; }
.nx-lightbox .nx-lb-nav.nx-next { right: 16px; }

/* Places: one card. The map is the operator's own tiles drawn grey and quiet; one place gets the
   map across the card with a caption, several get their list beside it (below it on a phone). */
figure.nx-places { container-type: inline-size; }
.nx .nx-places-card { display: flex; flex-direction: column; overflow: hidden; }
.nx .nx-map { position: relative; height: 200px; width: 100%; overflow: hidden; background: #ededee; cursor: grab; isolation: isolate; user-select: none; -webkit-user-select: none; }
.nx .nx-map[hidden] { display: none; }
.nx .nx-map.nx-dragging { cursor: grabbing; }
.nx .nx-map:focus-visible { outline-offset: -3px; }
.nx .nx-one .nx-map, .nx .nx-many .nx-map { height: 220px; }
.nx .nx-map-tiles { position: absolute; inset: 0; pointer-events: none; filter: grayscale(1) contrast(0.5) brightness(1.34); }
.nx .nx-map-tiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; border: 0; border-radius: 0; opacity: 0; transform-origin: 0 0; transition: opacity 0.25s; }
.nx .nx-map-tiles img.on { opacity: 1; }
.nx .nx-map-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.nx .nx-pin { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; pointer-events: auto; }
.nx .nx-pin[hidden] { display: none; }
.nx .nx-pin-mark { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.15s, box-shadow 0.15s; }
.nx .nx-pin:hover { z-index: 3; }
.nx .nx-pin:hover .nx-pin-mark { transform: scale(1.1); }
.nx .nx-pin.selected { z-index: 4; }
.nx .nx-pin.selected .nx-pin-mark { transform: scale(1.25); box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(29, 29, 31, 0.16), 0 3px 10px rgba(0, 0, 0, 0.3); }
.nx .nx-pin-label { position: absolute; left: 50%; bottom: calc(100% + 9px); max-width: 180px; overflow: hidden; text-overflow: ellipsis; transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.96); color: var(--ink); font-size: 12px; font-weight: 620; white-space: nowrap; box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.06), 0 2px 8px rgba(29, 29, 31, 0.16); opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.nx .nx-pin.nx-lean-right .nx-pin-label { left: -4px; transform: none; }
.nx .nx-pin.nx-lean-left .nx-pin-label { left: auto; right: -4px; transform: none; }
.nx .nx-pin.nx-drop .nx-pin-label { bottom: auto; top: calc(100% + 9px); }
.nx .nx-pin.selected .nx-pin-label { bottom: calc(100% + 12px); }
.nx .nx-pin.selected.nx-drop .nx-pin-label { bottom: auto; top: calc(100% + 12px); }
.nx .nx-pin.selected .nx-pin-label, .nx .nx-pin:hover .nx-pin-label, .nx .nx-pin:focus-visible .nx-pin-label { opacity: 1; }
/* One place: a plain marker with a halo; the caption names it. */
.nx .nx-pin-dot { cursor: default; }
.nx .nx-pin-dot .nx-pin-mark { width: 14px; height: 14px; box-shadow: 0 0 0 3px #fff, 0 0 0 12px rgba(29, 29, 31, 0.12), 0 2px 6px rgba(0, 0, 0, 0.3); transform: none !important; }
.nx .nx-pin-dot .nx-pin-label { display: none; }
/* Several places too close to tell apart: their count, in white; a click opens them up. */
.nx .nx-pin-cluster .nx-pin-mark { width: 28px; height: 28px; background: #fff; color: var(--ink); font-size: 12px; box-shadow: 0 0 0 1.5px var(--ink), 0 2px 6px rgba(0, 0, 0, 0.22); }
.nx .nx-map-controls { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.08), 0 2px 8px rgba(29, 29, 31, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nx .nx-map-controls button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--secondary); cursor: pointer; }
.nx .nx-map-controls button + button { border-top: 1px solid var(--hairline); }
.nx .nx-map-controls button:hover { background: rgba(29, 29, 31, 0.05); color: var(--ink); }
.nx .nx-map-controls button:focus-visible { outline-offset: -2px; }
@media (hover: none) { .nx .nx-map-controls button { width: 36px; height: 36px; } }
.md .nx .nx-map-attribution { position: absolute; right: 6px; bottom: 6px; z-index: 3; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.8); color: var(--secondary); font-size: 10px; line-height: 1.6; }
.nx .nx-map-hint { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(29, 29, 31, 0.5); color: #fff; font-size: 14px; font-weight: 560; text-align: center; pointer-events: none; }
.nx .nx-map-hint[hidden] { display: none; }
.nx .nx-place-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.nx .nx-place-name { font-weight: 620; font-size: 14.5px; line-height: 1.3; }
.nx .nx-place-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--secondary); font-size: 12.5px; }
.nx .nx-place-meta span { display: inline-flex; align-items: center; gap: 4px; }
.nx .nx-place-meta .nx-icon { color: var(--tertiary); }
.nx .nx-place-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.nx .nx-maps { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--fill); font-size: 12px; font-weight: 560; white-space: nowrap; }
.nx .nx-maps:hover { background: rgba(29, 29, 31, 0.09); }
.nx .nx-place-caption { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; }
.nx .nx-map:not([hidden]) + .nx-place-caption, .nx .nx-map:not([hidden]) + .nx-places { border-top: 1px solid var(--hairline); }
.nx .nx-place-caption .nx-place-text { flex: 1 1 260px; }
.nx .nx-place-caption .nx-place-name { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.nx .nx-place-caption .nx-maps { background: var(--ink); color: #fff; padding: 6px 11px; font-size: 12.5px; }
.nx .nx-place-caption .nx-maps:hover { background: #3a3a3d; }
.nx .nx-place-caption .nx-site { background: var(--fill); color: var(--ink); }
.nx .nx-place-caption .nx-site:hover { background: rgba(29, 29, 31, 0.09); }
.nx .nx-place { display: flex; align-items: flex-start; gap: 4px; padding-right: 8px; }
.nx .nx-place + .nx-place { border-top: 1px solid var(--hairline); }
.nx .nx-place-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 0 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.nx button.nx-place-main { cursor: pointer; }
.nx .nx-place:has(button.nx-place-main:hover) { background: rgba(29, 29, 31, 0.025); }
.nx .nx-place[aria-current] { background: var(--nx-quiet); box-shadow: inset 2px 0 0 var(--ink); }
.nx button.nx-place-main:focus-visible { outline-offset: -2px; border-radius: 6px; }
.nx .nx-place .nx-place-actions { gap: 2px; padding-top: 8px; }
.nx .nx-place-go { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--secondary); }
.nx .nx-place-go:hover { background: var(--fill); color: var(--ink); }
.nx .nx-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
@container (min-width: 620px) {
  /* The list is never its own scroll area: the card grows with it and a long list scrolls with the
     page while the map (capped in height) stays in view beside it. */
  .nx .nx-many:has(.nx-map:not([hidden])) { flex-direction: row; overflow: clip; }
  .nx .nx-many .nx-map { flex: 1.15; width: auto; height: auto; min-height: 320px; max-height: 520px; position: sticky; top: 0; }
  .nx .nx-many .nx-map:not([hidden]) + .nx-places { flex: 1; min-width: 0; border-top: 0; border-left: 1px solid var(--hairline); }
  .nx .nx-one .nx-map { height: 260px; }
}

/* Timeline: a quiet line, one dot per step; done steps filled, the current one ringed. A long
   detail is cut to two lines and opens in place. */
.md .nx .nx-timeline { padding: 16px; }
.nx .nx-step { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.nx .nx-step:last-child { padding-bottom: 0; }
.nx .nx-step::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 1.5px; background: rgba(29, 29, 31, 0.12); }
.nx .nx-step:last-child::before { display: none; }
.nx .nx-step .nx-dot { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; border: 1.5px solid rgba(29, 29, 31, 0.3); background: var(--surface); color: #fff; }
.nx .nx-done .nx-dot { background: var(--ink); border-color: var(--ink); }
.nx .nx-now .nx-dot { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(29, 29, 31, 0.08); }
.nx .nx-now .nx-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.nx .nx-next .nx-dot { border-color: var(--ink); }
.nx .nx-later { opacity: 0.72; }
.nx .nx-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nx .nx-when { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--secondary); font-size: 12px; font-weight: 560; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.nx .nx-now-tag { padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 650; }
.nx .nx-duration { display: inline-flex; align-items: center; gap: 3px; color: var(--tertiary); font-weight: 500; }
.nx .nx-step-title { font-weight: 620; font-size: 14.5px; line-height: 1.35; }
.nx .nx-step-title a { display: inline-flex; align-items: center; gap: 4px; }
.nx .nx-step-title .nx-icon { color: var(--tertiary); }
.nx .nx-done .nx-step-title { color: var(--secondary); }
.nx .nx-step-detail { max-width: 68ch; color: var(--secondary); font-size: 13px; }

/* Metrics: tiles with the number large, the change coloured by whether it's good, progress to a
   target, and a sparkline that reads out the value under the pointer. */
.nx .nx-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nx .nx-metric { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 12px 14px; min-width: 0; }
.nx .nx-metric-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nx .nx-metric-label { color: var(--secondary); font-size: 12.5px; }
.nx .nx-metric-value { font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nx .nx-metric-value small { margin-left: 3px; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--secondary); letter-spacing: 0; }
.nx .nx-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx .nx-delta .nx-muted { font-weight: 450; }
.nx .nx-good { color: var(--nx-up); }
.nx .nx-bad { color: var(--nx-down); }
.nx .nx-meter { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.nx .nx-meter-text { color: var(--secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.nx .nx-meter-text b { color: var(--ink); font-weight: 650; }
.nx .nx-metric-note { margin-top: 2px; color: var(--tertiary); font-size: 12px; }
.nx .nx-spark { position: relative; height: 30px; color: var(--nx-mid); cursor: crosshair; touch-action: pan-y; border-radius: 4px; }
.nx .nx-spark:focus-visible { outline-offset: 4px; }
.nx .nx-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx .nx-spark-area { fill: rgba(29, 29, 31, 0.045); }
.nx .nx-spark-end, .nx .nx-hover-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.nx .nx-spark .nx-hover-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.nx .nx-spark.nx-reading .nx-spark-end { opacity: 0.25; }
.nx .nx-spark-tag { position: absolute; z-index: 1; transform: translate(-50%, calc(-100% - 9px)); padding: 2px 7px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.nx .nx-spark-tag.nx-at-start { transform: translate(-12px, calc(-100% - 9px)); }
.nx .nx-spark-tag.nx-at-end { transform: translate(calc(-100% + 12px), calc(-100% - 9px)); }
.nx .nx-spark:not(.nx-reading) :is(.nx-hover-dot, .nx-spark-tag) { display: none; }

/* Charts: an SVG plot that fills its box, with HTML labels so text never stretches. Series are ink,
   grey and dashes. The crosshair and tooltip float over the plot and never move the layout. */
.nx .nx-chart-card { container-type: inline-size; padding: 16px 16px 8px 12px; }
/* A note pinned near the top of the plot gets room above it. */
.nx .nx-chart-card.nx-headroom { padding-top: 36px; }
.nx .nx-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px 4px; color: var(--secondary); font-size: 12px; }
.nx .nx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nx .nx-swatch { flex: none; display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--ink); }
.nx .nx-swatch.nx-s1, .nx .nx-swatch.nx-s3 { border-top-color: var(--nx-mid); }
.nx .nx-swatch.nx-s2, .nx .nx-swatch.nx-s3 { border-top-style: dashed; }
.nx .nx-bars .nx-swatch { width: 9px; height: 9px; border: 0; border-radius: 2.5px; background: var(--ink); }
.nx .nx-bars .nx-swatch.nx-s1 { background: var(--nx-mid); }
.nx .nx-bars .nx-swatch.nx-s2 { background: var(--nx-soft); }
.nx .nx-bars .nx-swatch.nx-s3 { background: var(--nx-faint); }
.nx .nx-chart { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 190px auto; column-gap: 10px; border-radius: 6px; }
.nx .nx-chart:focus-visible { outline: none; }
.nx .nx-chart-card:has(.nx-chart:focus-visible) { box-shadow: 0 0 0 2px var(--ink); }
.nx .nx-y { position: relative; min-width: 26px; color: var(--tertiary); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.nx .nx-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.nx .nx-plot { position: relative; min-width: 0; cursor: crosshair; touch-action: pan-y; }
.nx .nx-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx .nx-gridline { stroke: rgba(29, 29, 31, 0.08); stroke-width: 1; }
.nx .nx-gridline.nx-zero { stroke: rgba(29, 29, 31, 0.2); }
.nx .nx-area { fill: rgba(29, 29, 31, 0.05); }
.nx .nx-plot polyline { stroke: var(--ink); stroke-width: 2; }
.nx .nx-plot polyline.nx-s1, .nx .nx-plot polyline.nx-s3 { stroke: var(--nx-mid); }
.nx .nx-plot polyline.nx-s2, .nx .nx-plot polyline.nx-s3 { stroke-width: 1.75; stroke-dasharray: 5 4; }
.nx .nx-plot rect { fill: var(--ink); }
.nx .nx-plot rect.nx-s1 { fill: var(--nx-mid); }
.nx .nx-plot rect.nx-s2 { fill: var(--nx-soft); }
.nx .nx-plot rect.nx-s3 { fill: var(--nx-faint); }
.nx .nx-ref { stroke: var(--secondary); stroke-width: 1; stroke-dasharray: 3 3; }
.nx .nx-ref-label { position: absolute; left: 6px; transform: translateY(calc(-100% - 4px)); padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: var(--secondary); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.nx .nx-end { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2.5px var(--surface); pointer-events: none; }
.nx .nx-end.nx-s1, .nx .nx-end.nx-s3 { background: var(--nx-mid); }
.nx .nx-end span, .nx .nx-value { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 11.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx .nx-end span { position: absolute; right: 10px; bottom: 6px; }
.nx .nx-value { position: absolute; transform: translate(-50%, calc(-100% - 5px)); padding: 0 4px; pointer-events: none; }
.nx .nx-value.nx-below { transform: translate(-50%, 6px); }
.nx .nx-pinned { position: absolute; width: 0; height: 0; pointer-events: none; }
.nx .nx-pinned i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.nx .nx-pinned span { position: absolute; left: 0; bottom: 12px; transform: translateX(-50%); padding: 2px 7px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.nx .nx-pinned.nx-at-start span { transform: translateX(-10px); }
.nx .nx-pinned.nx-at-end span { transform: translateX(calc(-100% + 10px)); }
.nx .nx-x { grid-column: 2; position: relative; height: 22px; margin-top: 6px; color: var(--tertiary); font-size: 11px; }
.nx .nx-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.nx .nx-chart:not(.nx-bar) .nx-x span:first-child { transform: none; }
.nx .nx-chart:not(.nx-bar) .nx-x span:last-child { transform: translateX(-100%); }
@container (max-width: 520px) { .nx .nx-x .nx-minor, .nx .nx-value.nx-minor { display: none; } }
.nx .nx-cross { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(29, 29, 31, 0.4); pointer-events: none; }
.nx .nx-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(29, 29, 31, 0.05); pointer-events: none; }
.nx .nx-plot .nx-hover-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.nx .nx-hover-dot.nx-s1, .nx .nx-hover-dot.nx-s3 { background: var(--nx-mid); }
.nx .nx-hover-dot[hidden] { display: none; }
.nx .nx-tip { position: absolute; z-index: 3; min-width: 88px; max-width: min(240px, 100%); padding: 7px 10px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.08), 0 6px 20px rgba(29, 29, 31, 0.14); font-size: 12.5px; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.nx .nx-tip-label { color: var(--tertiary); font-size: 11.5px; }
.nx .nx-tip-row { display: flex; align-items: center; gap: 6px; }
.nx .nx-tip-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--secondary); }
.nx .nx-tip-row b { margin-left: auto; padding-left: 8px; font-weight: 650; font-variant-numeric: tabular-nums; }
.nx .nx-tip-row:only-of-type b { margin-left: 0; padding-left: 0; font-size: 14px; }
.nx .nx-tip-row:only-of-type i + span + b { margin-left: auto; padding-left: 8px; font-size: inherit; }
.nx .nx-chart:not(.nx-reading) :is(.nx-cross, .nx-band, .nx-hover-dot, .nx-tip) { display: none; }
.nx .nx-chart.nx-reading :is(.nx-end span, .nx-value, .nx-pinned span) { opacity: 0.25; }

/* Checklist: progress (a segment per item) over grouped rows; due dates sit at the right edge. */
.nx .nx-checklist-card { overflow: hidden; }
.nx .nx-progress { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.nx .nx-progress-text { flex: none; color: var(--secondary); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx .nx-progress-text b { color: var(--ink); font-family: var(--display); font-size: 15px; font-weight: 600; }
.nx .nx-progress-segs { flex: 1; display: flex; gap: 3px; }
.nx .nx-progress-segs i { flex: 1; height: 4px; border-radius: 2px; background: var(--fill); }
.nx .nx-progress-segs i.on { background: var(--ink); }
.nx .nx-progress-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.nx .nx-progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.nx .nx-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px 4px; color: var(--secondary); font-size: 12px; font-weight: 620; }
.nx .nx-checklist + .nx-group-title { border-top: 1px solid var(--hairline); }
.nx .nx-group-count { color: var(--tertiary); font-weight: 500; font-variant-numeric: tabular-nums; }
.nx .nx-check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; }
.nx .nx-check + .nx-check { border-top: 1px solid var(--hairline); }
.nx .nx-group-title + .nx-checklist .nx-check + .nx-check { border-top: 0; }
.nx .nx-group-title + .nx-checklist .nx-check { padding-top: 7px; padding-bottom: 7px; }
.nx .nx-group-title + .nx-checklist { padding-bottom: 6px; }
.nx .nx-check .nx-box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(29, 29, 31, 0.26); color: var(--secondary); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx .nx-ordered .nx-box { border-radius: 50%; }
.nx .nx-done .nx-box { background: var(--ink); border-color: var(--ink); color: #fff; }
.nx .nx-check-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nx .nx-check-title { font-size: 14.5px; }
.nx .nx-done .nx-check-title { color: var(--tertiary); text-decoration: line-through; text-decoration-color: rgba(134, 134, 139, 0.6); }
.nx .nx-check-note { color: var(--secondary); font-size: 13px; }
.nx .nx-check .nx-due { flex: none; margin-top: 1px; padding: 1px 8px; border-radius: 999px; background: var(--fill); color: var(--secondary); font-size: 12px; font-weight: 560; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx .nx-done .nx-due { background: none; color: var(--tertiary); font-weight: 450; }

/* People and companies: who it is, what they do, a sheet of facts, Nexus's note, where to go. */
.nx .nx-stack { display: flex; flex-direction: column; gap: 12px; }
.nx .nx-profile { display: flex; flex-direction: column; }
.nx .nx-profile-head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 0; }
.nx .nx-profile .nx-avatar { width: 52px; height: 52px; font-size: 18px; }
.nx .nx-avatar.nx-logo { border-radius: 14px; }
.nx .nx-avatar.nx-logo .nx-img { object-fit: contain; padding: 5px; background: #fff; }
.nx .nx-avatar.nx-logo:has(.nx-img) { box-shadow: inset 0 0 0 1px var(--hairline); background: #fff; }
.nx .nx-profile-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md .nx .nx-profile .nx-card-title { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.nx .nx-role { color: var(--ink); font-size: 13.5px; }
.nx .nx-profile > :is(.nx-summary, .nx-chips, .nx-facts) { margin: 12px 16px 0; }
.nx .nx-summary { max-width: 70ch; color: var(--secondary); font-size: 14px; line-height: 1.5; white-space: pre-line; }
figure.nx-profile { container-type: inline-size; }
.nx .nx-facts { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--hairline); border-radius: 12px; }
.nx .nx-facts[data-count="1"] { grid-template-columns: 1fr; }
.nx .nx-facts > div { padding: 9px 12px 10px; box-shadow: -1px 0 0 var(--hairline), 0 -1px 0 var(--hairline); min-width: 0; }
/* Two across on a phone, three or four with room; an odd one out takes the rest of its row. */
.nx .nx-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container (min-width: 520px) {
  .nx .nx-facts:is([data-count="3"], [data-count="5"], [data-count="6"]) { grid-template-columns: repeat(3, 1fr); }
  .nx .nx-facts:is([data-count="4"], [data-count="7"], [data-count="8"]) { grid-template-columns: repeat(4, 1fr); }
  .nx .nx-facts > div:last-child:nth-child(odd) { grid-column: auto; }
  .nx .nx-facts:is([data-count="5"], [data-count="7"]) > div:last-child { grid-column: span 2; }
}
.nx .nx-facts dt { color: var(--tertiary); font-size: 11.5px; }
.nx .nx-facts dd { font-weight: 600; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.nx .nx-profile > .nx-take { margin-top: 16px; }
.nx .nx-profile-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px; }
.nx .nx-profile > :not(.nx-take) + .nx-profile-links { padding-top: 14px; }
.nx .nx-profile > :is(.nx-summary, .nx-chips, .nx-facts, .nx-profile-head):last-child { margin-bottom: 16px; }
.nx .nx-profile > .nx-profile-head:last-child { padding-bottom: 0; }
.nx .nx-profile-links .nx-cta { margin: 0; }
.nx .nx-take + .nx-profile-links { border-top: 1px solid var(--hairline); }

/* Social posts: the post as it reads, its counts and its link, then Nexus's take as the card's foot. */
.nx .nx-post-main { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.nx .nx-post-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nx .nx-post-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nx .nx-post-author { font-weight: 650; font-size: 14px; }
.nx .nx-post-by { color: var(--tertiary); font-size: 12.5px; }
.nx .nx-post-text { max-width: 68ch; white-space: pre-wrap; font-size: 15px; line-height: 1.45; }
.nx .nx-post-image { aspect-ratio: 16 / 9; max-height: 300px; border-radius: 12px; }
.nx .nx-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.nx .nx-counts { display: flex; gap: 16px; color: var(--tertiary); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nx .nx-counts span { display: inline-flex; align-items: center; gap: 4px; }
.nx .nx-post-open { display: inline-flex; align-items: center; gap: 4px; color: var(--secondary); font-size: 12.5px; font-weight: 600; }
.nx .nx-post-open:hover { color: var(--ink); }

/* Ranking: place and movement, the name with its reason (which opens when it's long), the score
   over a bar. First place is the only filled numeral. */
.nx .nx-ranking { overflow: hidden; }
.nx .nx-rank { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.nx .nx-rank + .nx-rank { border-top: 1px solid var(--hairline); }
.nx .nx-rank-place { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 24px; }
.nx .nx-rank-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; background: var(--fill); color: var(--secondary); font-family: var(--display); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx .nx-first .nx-rank-num { background: var(--ink); color: #fff; }
.nx .nx-change { display: inline-flex; align-items: center; color: var(--tertiary); font-size: 10.5px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.nx .nx-change.nx-good { color: var(--nx-up); }
.nx .nx-change.nx-bad { color: var(--nx-down); }
.nx .nx-rank-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx .nx-rank-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 24px; }
.nx .nx-rank-name { font-weight: 620; font-size: 14.5px; }
.nx .nx-rank-sub { color: var(--tertiary); font-size: 13px; }
.nx .nx-rank-reason { max-width: 72ch; color: var(--secondary); font-size: 13px; }
.nx .nx-rank .nx-chips { margin-top: 4px; }
.nx .nx-rank-score { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 52px; padding-top: 2px; }
.nx .nx-score { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.nx .nx-score small { margin-left: 2px; font-family: var(--font); font-size: 11.5px; font-weight: 500; color: var(--tertiary); }
.nx .nx-score-bar { width: 52px; height: 3px; }

/* Pros and cons: one card, two columns with a rule between (stacked on a phone), then the bottom line. */
.nx .nx-pc-card { overflow: hidden; container-type: inline-size; }
.nx .nx-pcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.nx .nx-pc { padding: 14px 16px 16px; min-width: 0; }
.nx .nx-pc + .nx-pc { border-left: 1px solid var(--hairline); }
.nx .nx-pc-title { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 650; }
.nx .nx-pc-count { color: var(--tertiary); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.nx .nx-pc li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.nx .nx-pc li + li { margin-top: 8px; }
.nx .nx-pc li > span:first-of-type { flex: 1; min-width: 0; }
.nx .nx-pc .nx-icon { margin-top: 3px; }
.nx .nx-pros .nx-icon { color: var(--nx-up); }
.nx .nx-cons .nx-icon { color: var(--nx-down); }
.nx .nx-major > span:first-of-type { font-weight: 620; }
.nx .nx-pc .nx-weight { flex: none; display: inline-flex; gap: 3px; margin-top: 8px; }
.nx .nx-weight i { width: 5px; height: 5px; border-radius: 50%; background: var(--nx-faint); }
.nx .nx-weight i.on { background: var(--ink); }
.nx .nx-bottom-line { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; border-top: 1px solid var(--hairline); background: var(--nx-quiet); }
.nx .nx-bottom-line p { font-size: 14.5px; font-weight: 620; line-height: 1.4; }
@container (max-width: 520px) {
  .nx .nx-pcs { grid-template-columns: 1fr; }
  .nx .nx-pc + .nx-pc { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* The pick: a white card like the rest. "My pick" is a black pill, confidence a three-step meter,
   the action one black button; the runners-up sit in the card's quiet foot. */
.md .nx.nx-verdict { overflow: hidden; }
.nx .nx-verdict-main { display: flow-root; padding: 16px; }
.nx .nx-verdict-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.nx .nx-confidence { display: inline-flex; align-items: center; gap: 6px; color: var(--secondary); font-size: 12px; font-weight: 560; }
.nx .nx-conf-meter { display: inline-flex; gap: 2px; }
.nx .nx-conf-meter i { width: 10px; height: 4px; border-radius: 2px; background: var(--nx-faint); }
.nx .nx-conf-meter i.on { background: var(--ink); }
.nx .nx-verdict-title { margin-top: 8px; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.md .nx .nx-verdict-reason { max-width: 64ch; margin-top: 6px; color: var(--secondary); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.md .nx .nx-reasons { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 14px; }
.nx .nx-reasons li { display: flex; align-items: flex-start; gap: 8px; }
.nx .nx-reasons .nx-icon { margin-top: 3px; color: var(--ink); }
.nx.nx-verdict .nx-cta { margin-top: 14px; padding: 7px 13px; font-size: 13px; }
.nx .nx-verdict-image { float: right; width: 112px; height: 112px; margin: 0 0 8px 16px; border-radius: 12px; }
.nx .nx-alts { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--hairline); background: var(--nx-quiet); }
.md .nx .nx-alts ul { display: flex; flex-direction: column; gap: 4px; }
.nx .nx-alts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13.5px; }
.nx .nx-alt-title { font-weight: 620; }
.nx .nx-alt-title a { display: inline-flex; align-items: center; gap: 4px; }
.nx .nx-alt-title .nx-icon { color: var(--tertiary); }
.nx .nx-alt-reason { color: var(--secondary); }
@media (max-width: 520px) { .nx .nx-verdict-image { width: 72px; height: 72px; } }

/* While a reply streams: a quiet skeleton in the block's shape, never raw JSON. */
.md .nx-skeleton { display: flex; flex-direction: column; gap: 8px; }
.nx-skeleton .nx-sk-row { display: flex; gap: 8px; overflow: hidden; }
.nx-skeleton .nx-sk-row:has(.nx-sk-line) { flex-direction: column; }
.nx-skeleton .nx-sk { display: block; border-radius: 12px; background: linear-gradient(100deg, var(--raised) 30%, #f8f8f9 50%, var(--raised) 70%) 0 0 / 300% 100%; animation: nx-shimmer 1.4s ease-in-out infinite; }
.nx-skeleton .nx-sk-media { flex: none; width: 46%; max-width: 230px; aspect-ratio: 4 / 3; }
.nx-skeleton .nx-sk-chart { width: 100%; height: 150px; }
.nx-skeleton .nx-sk-line { height: 14px; border-radius: 7px; width: 100%; }
.nx-skeleton .nx-sk-line.nx-short { width: 55%; }
.nx-skeleton .nx-sk-label { color: var(--tertiary); font-size: 12px; }
.md .nx-fallback ul { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .nx .nx-shimmer, .nx .nx-shimmer-text, .nx-skeleton .nx-sk { animation: none; }
  .nx .nx-map-tiles img, .nx .nx-pin-mark, .nx .nx-more .nx-icon { transition: none; }
}

/* ---------- Spaces (spaces.js) ----------
   An inline Space is part of the reply: no frame, border, shadow or background of its own, and no
   scrolling inside. Its sandboxed frame is always exactly as tall as its content; the kit pads
   itself by 8px/4px for focus rings and the frame is pulled out by as much, so its text starts on
   the reply's left edge. A page Space is one line that opens it full-screen. */
.md .nx.nx-space { margin: 4px 0 12px; font-size: inherit; line-height: inherit; }
.space { display: block; }
.space-inline { margin: 0 -8px; }
.space-frame { position: relative; margin: -4px 0; }
.space-frame > iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light; opacity: 0; transition: opacity 0.18s ease; }
.space-frame.ready > iframe { opacity: 1; }
.space-skeleton { position: absolute; inset: 10px 8px auto; display: grid; gap: 12px; transition: opacity 0.18s ease; animation: space-wait 1.1s ease-in-out infinite alternate; }
.space-skeleton i { display: block; height: 11px; border-radius: 6px; background: var(--fill); }
.space-skeleton i:nth-child(1) { width: 34%; height: 15px; }
.space-skeleton i:nth-child(2) { width: 92%; }
.space-skeleton i:nth-child(3) { width: 71%; }
.space-skeleton i:nth-child(4) { height: 120px; border-radius: 12px; }
.space-frame.ready > .space-skeleton, .space-frame.failed > .space-skeleton { opacity: 0; animation: none; }
@keyframes space-wait { from { opacity: 0.55; } to { opacity: 1; } }
.space-status { margin: 6px 8px 0; font-size: 13px; color: var(--secondary); }
.space-page .space-status { margin-inline: 0; }
.space-line { display: flex; align-items: center; gap: 13px; width: 100%; padding: 9px 14px 9px 9px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow 0.15s; }
.space-line:hover { box-shadow: var(--shadow-1); }
.space-line:focus-visible, .space-close:focus-visible, .space-ask button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.space-thumb { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--ink); color: #fff; }
.space-line-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.space-line-title { font-family: var(--display); font-size: 15.5px; font-weight: 560; line-height: 1.3; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-line-sub { font-size: 13px; line-height: 1.4; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-line-open { flex: none; display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 600; color: var(--secondary); }
.space-line:hover .space-line-open { color: var(--ink); }
.space-screen { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--canvas); color: var(--ink); }
.space-screen[open] { display: flex; flex-direction: column; animation: rise 0.2s ease-out; }
.space-screen::backdrop { background: var(--canvas); }
.space-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: env(safe-area-inset-top, 0px) 10px 0 20px; border-bottom: 1px solid var(--hairline); }
.space-bar-title { font-family: var(--display); font-size: 15.5px; font-weight: 560; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-close { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--secondary); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; }
.space-close:hover { background: var(--fill); color: var(--ink); }
.space-screen > iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--canvas); color-scheme: light; }
.space-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 13.5px; line-height: 1.45; }
.space-ask p { order: -1; flex-basis: 100%; margin: 0; }
.space-ask button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.space-ask-use { background: var(--ink); color: #fff; }
.space-ask-dismiss { background: transparent; color: var(--secondary); }
.space-screen > .space-ask { margin: 0; border-radius: 0; border-top: 1px solid var(--hairline); }
@media (prefers-reduced-motion: reduce) { .space-skeleton, .space-screen[open] { animation: none; } .space-frame > iframe, .space-skeleton { transition: none; } }
/* Background work above the chat composer: opens Activity; the X only hides this line. */
.running-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 8px 4px; color: var(--secondary); }
.running-line[hidden] { display: none; }
.running-line-open { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.route-work .main { min-width: 0; }

/* The inline shell becomes a modal without moving/reloading its sandboxed iframe. */
.space-inline { position: relative; }
dialog.space-frame:not(.space-screen) { position: relative; inset: auto; width: 100%; max-width: none; max-height: none; padding: 0; border: 0; color: inherit; background: transparent; overflow: visible; }
.space-frame.space-screen { margin: 0; height: 100% !important; }
.space-frame.space-screen > iframe { position: static; opacity: 1; height: auto; }
.space-frame.space-screen > .space-skeleton { display: none; }
.space-expand { position: absolute; z-index: 2; top: 0; right: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: var(--canvas); color: var(--ink); cursor: pointer; opacity: 0; }
.space-inline:hover > .space-expand, .space-inline:focus-within > .space-expand { opacity: 1; }
@media (hover: none), (pointer: coarse) { .space-expand { opacity: 1; } }
.space-materials { position: fixed; z-index: 5; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(340px,calc(100vw - 32px)); max-height: 60vh; overflow: auto; padding: 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--canvas); color: var(--ink); box-shadow: 0 4px 20px #0002; }
.space-materials button { text-align: left; padding: 8px; }
/* Quiet calendar rhythm and one shared, short conversation transition. */
.day-separator { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: var(--secondary); font-size: 11px; text-align: center; }
.day-separator::before, .day-separator::after { content: ""; height: 1px; flex: 1; background: var(--hairline); }
.message-time { position: relative; display: inline-block; color: var(--tertiary); font-size: 11px; font-weight: 400; white-space: nowrap; }
.message-time[hidden] { display: none; }
.message-time::after { content: attr(data-tooltip); position: absolute; z-index: 15; bottom: calc(100% + 6px); right: 0; padding: 5px 8px; border: 1px solid var(--hairline); border-radius: 7px; background: var(--surface); color: var(--secondary); font-size: 11px; white-space: normal; width: max-content; max-width: min(280px, 75vw); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 160ms ease-out, transform 160ms ease-out; }
.message-time:is(:hover, :focus-visible)::after { opacity: 1; transform: translateY(0); }
.message-time:focus-visible { outline: 1px solid var(--secondary); outline-offset: 3px; }
.send-status { min-height: 18px; color: var(--tertiary); font-size: 11px; }
.send-status:empty { display: none; }
.send-status .link-btn { font: inherit; }
.stream-bubble { min-height: 24px; }
.chat, .work-pane { position: relative; }
.jump-latest { position: absolute; z-index: 5; bottom: 125px; left: 50%; transform: translateX(-50%); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px; background: var(--surface); color: var(--secondary); font-size: 12px; cursor: pointer; }
.jump-latest[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .message-time::after { transition: none; } }

/* Dictation status and errors remain visible on phone-width composers. */
.dictation-button { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--secondary); background: transparent; }
.dictation-button[aria-pressed="true"] { color: var(--ink); background: var(--surface); }
.dictation-line, .dictation-error { font-size: 12px; line-height: 1.4; color: var(--secondary); padding: 5px 8px 0; }
.dictation-line:has([hidden]) { display: none; }
.dictation-status { align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.dictation-status:not([hidden]) { display: inline-flex; }
.dictation-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dictation-error[hidden] { display: none; }
/* Keep the complete Markdown result in place; expansion never opens a dialog. */
.worker-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.worker .bubble.work-collapsed { max-height: 28.8em; overflow: hidden; }
.worker .work-expand { margin-top: 8px; }

.owner-pronouns { display: flex; gap: 0; margin-bottom: 16px; }
.owner-pronouns button { flex: 1; min-height: 44px; border: 1px solid var(--line, #ddd); padding: 8px 16px; background: transparent; color: var(--ink); }
.owner-pronouns button:first-child { border-radius: 8px 0 0 8px; }
.owner-pronouns button:last-child { border-radius: 0 8px 8px 0; }
.owner-pronouns button[aria-pressed="true"] { background: var(--ink, #222); color: var(--paper, #fff); }

/* Pairing stays readable on desktop Settings and iPhone Safari. */
.phone-pairing img { display: block; width: 292px; max-width: 100%; height: auto; }
.phone-pair-link { overflow-wrap: anywhere; }

#open-nexus[hidden] { display: none; }

/* Settings → Models: signing Codex in to the owner's ChatGPT plan. */
.codex-sign-in h3 { margin: 0 0 4px; font-size: 15px; }
.codex-sign-in-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.codex-sign-in-row:first-of-type { border-top: 0; }
.codex-device { margin-top: 6px; display: grid; gap: 4px; }
.codex-device-code { font-size: 15px; font-weight: 650; letter-spacing: 0.06em; user-select: all; }

/* Personal setup and Settings use the same quiet, neutral surfaces. */
.settings-group { margin: 28px 0; padding-top: 12px; border-top: 1px solid var(--hairline); }
.settings-group > h2 { margin: 0 0 16px; }
.ai-plans { display: grid; gap: 12px; }
.ai-plans .card { margin: 0; }
.ai-plans h3 { margin-top: 0; }
.ai-plans input { width: 100%; margin: 8px 0; }
.plan-follow-up { padding-top: 16px; }
.personal-setup .pair { width: min(100%, 520px); }
.personal-setup button { margin: 8px 4px 0 0; }
.personal-setup li { margin: 12px 0; }
.plan-recovery { max-width: 420px; }

.personal-setup, .page:has(.settings-group) { background: #f6f6f6; }
.personal-setup .pair { text-align: left; }
.personal-setup .pair input { text-align: left; letter-spacing: normal; text-transform: none; }

/* Personal notes use the same quiet Settings form chrome. */
.about-you textarea, .import-review textarea, .learned-list textarea {
  display: block; width: 100%; resize: vertical; font: 14px/1.55 var(--font);
  padding: 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink);
  margin: 8px 0;
}
.about-you input[type="file"] { display: block; max-width: 100%; margin: 12px 0; }
.import-review article, .learned-list article { padding: 12px 0; border-top: 1px solid var(--hairline); overflow-wrap: anywhere; }
.import-review button, .learned-list button { margin: 4px 8px 4px 0; }
.learned-list textarea[hidden] { display: none; }
.learned-list label { display: flex; align-items: center; gap: 8px; }
.import-review p { white-space: pre-wrap; }

/* Keep shared control resets from flattening the personal flows. */
.owner-pronouns.ctl-segments.ctl-segments { display: flex; width: 100%; padding: 4px; gap: 4px; }
.owner-pronouns.ctl-segments.ctl-segments .ctl-segment { flex: 1; min-height: 40px; border: 1px solid var(--hairline); border-radius: 8px; }
.owner-pronouns.ctl-segments.ctl-segments .ctl-segment[aria-pressed="true"] { background: var(--ink); color: white; }
.check-row.ctl-label { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.check-row input { width: auto; margin: 0; flex: none; }
.persona-summary { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.personality-editor { margin: 16px 0; }
.personality-editor summary { cursor: pointer; }
.plan-steps { display: grid; gap: 20px; margin-top: 20px; }
.plan-steps form { display: grid; gap: 12px; }
.import-review .learning-card, .learned-list .learning-card { padding: 16px; margin: 12px 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.learning-card p { margin: 8px 0; }
.text-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.text-actions > button:not([hidden]) ~ button:not([hidden])::before { content: "·"; margin-right: 10px; color: var(--tertiary); }
.text-actions .ctl-button.ctl-inline { min-height: 40px; padding: 0 2px; font-size: 13px; margin: 0; }
.starter.ctl-button.ctl-quiet { border: 1px solid rgba(29,29,31,.18); background: var(--surface); border-radius: 999px; padding: 10px 14px; min-height: 40px; height: auto; white-space: normal; text-align: left; }
.card-message { width: 100%; }
.card-message .meta { margin-top: 6px; }

.card-message-row { flex-direction: column; align-items: flex-start; gap: 6px; }
.card-message-time { font-size: 11px; color: var(--tertiary); }
.msg.assistant .card-message .meta { opacity: 1; }
.learned-list [hidden], .personal-setup [hidden], .connect-plan-reminder[hidden], #open-nexus[hidden], #use-browser[hidden] { display: none !important; }

/* Explicit personal selection wins over the shared sliding segment treatment. */
.owner-pronouns.ctl-segments.ctl-segments::before { display: none; }
.owner-pronouns.ctl-segments.ctl-segments .ctl-segment:not(.selected)[aria-pressed="false"] { background: transparent; color: var(--ink); }
.owner-pronouns.ctl-segments.ctl-segments .ctl-segment.selected[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
.schedule-field { margin-top: 10px; }
.about-you input[hidden], .about-you button[hidden], .about-you textarea[hidden], .about-you ul[hidden] { display: none !important; }
.about-file-names { padding-left: 20px; overflow-wrap: anywhere; }
.pair-landing .pair .ctl-button { display: flex; width: 100%; min-height: 44px; height: 44px; }
/* Outreach batches share the existing calm action card. */
.act-batch .batch-preview { margin: 12px 0; }
.act-batch .batch-subject, .act-batch .batch-body { width: 100%; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: 7px; padding: 9px; font: inherit; }
.act-batch .batch-body { resize: vertical; line-height: 1.5; margin-top: 6px; }
.act-batch .act-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.batch-all summary { cursor: pointer; padding: 10px 0; }
.batch-item { border-top: 1px solid var(--hairline); padding: 10px 0; overflow-wrap: anywhere; }
.batch-status { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }