/* The product's own chrome, reproduced.

   Every value here was read off the running app, not guessed: a stealth build
   of cortex-curator launched against a throwaway cortex of invented records,
   and getComputedStyle taken on each element below. The colour values are
   cortex-ui/src/styles/tokens.css verbatim, light and dark.

   Units are rem, and the px they came from is in the comment beside them.
   That is what lets one set of rules serve two jobs:
     - inside shared/product.html the root font size is set from the frame's
       width, so the whole window scales like a picture of itself;
     - on a treatment page the root is the reader's own font size, so a small
       callout visual grows with 200% text like everything else.

   Everything is scoped under .cx so no name here can touch the page around
   it, and the page's tokens cannot leak in. No real cortex was ever rendered
   to build this: every word inside a .cx block is invented. */

.cx {
  /* cortex-ui base ramp, light */
  --cx-bg-primary: #ffffff;
  --cx-bg-secondary: #f5f5f5;
  --cx-bg-tertiary: #f5f5f5;
  --cx-bg-hover: #e5e5e5;
  --cx-bg-selected: #d4d4d4;
  --cx-border: #d4d4d4;
  --cx-text: #0a0a0a;
  --cx-text-strong: #171717;
  --cx-text-muted: #525252;
  --cx-text-tertiary: #737373;
  --cx-primary: #171717;
  --cx-primary-fg: #ffffff;
  --cx-agent: #c026d3;
  --cx-agent-ring: #d946ef;
  --cx-user-ring: #475569;
  --cx-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--cx-text);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .cx {
    --cx-bg-primary: #0a0a0a;
    --cx-bg-secondary: #171717;
    --cx-bg-tertiary: #262626;
    --cx-bg-hover: #262626;
    --cx-bg-selected: #404040;
    --cx-border: #404040;
    --cx-text: #fafafa;
    --cx-text-strong: #f5f5f5;
    --cx-text-muted: #a3a3a3;
    --cx-text-tertiary: #737373;
    --cx-primary: #f5f5f5;
    --cx-primary-fg: #0a0a0a;
    --cx-agent: #e879f9;
    --cx-agent-ring: #d946ef;
    --cx-user-ring: #94a3b8;
    --cx-shadow-sm: 0 1px 3px 0 rgb(255 255 255 / 0.06), 0 1px 2px -1px rgb(255 255 255 / 0.06);
  }
}

.cx *,
.cx *::before,
.cx *::after {
  box-sizing: border-box;
}

.cx p {
  margin: 0;
  max-width: none;
}

.cx .i {
  width: 1rem; /* 16 */
  height: 1rem;
  flex: none;
  stroke-width: 2;
}
.cx .i-sm { width: 0.875rem; height: 0.875rem; } /* 14 */
.cx .i-xs { width: 0.75rem; height: 0.75rem; }   /* 12 */
.cx .i-lg { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; } /* 24 */

.cx .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;  /* 28 */
  height: 1.75rem;
  border-radius: 0.5rem;
  color: var(--cx-text-muted);
  flex: none;
}
.cx .btn-icon.sm { width: 1.5rem; height: 1.5rem; } /* 24 */
.cx .muted { color: var(--cx-text-muted); }
.cx .trunc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }

/* ── The window: grey frame, two white cards ─────────────────────────── */
.cx-window {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--cx-bg-secondary);
  overflow: hidden;
}

/* ── Left sidebar ──────────────────────────────────────────────────── */
.cx-sidebar {
  width: 16rem; /* 256 */
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0 0 0.75rem; /* 12 0 0 12 */
}
.cx-navrail {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.25rem; /* 36 */
  padding: 0 0.25rem;
}
.cx-switcher {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
  height: 1.75rem;
  padding: 0 0.375rem;
  font-size: 0.875rem; /* 14 */
  line-height: 1.25rem;
  font-weight: 600;
}
.cx-switcher .i-sm { color: var(--cx-text-muted); }
.cx-wshead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem; /* 32 */
  padding: 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.cx-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* 2 */
  padding: 0.25rem;
  flex: 1;
}
.cx-tab {
  display: flex;
  align-items: center;
  height: 1.75rem; /* 28 */
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem; /* 13 */
  line-height: 1.21875rem;
}
.cx-tab[data-state="active"] { background: var(--cx-bg-selected); }
.cx-tab.dim { color: var(--cx-text-muted); font-style: italic; }
.cx-wsrail {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-top: 1px solid color-mix(in oklab, var(--cx-border) 30%, transparent);
}
.cx-wsrail .btn-icon { color: var(--cx-text); }
.cx-wsrail .btn-icon[data-state="active"] { background: var(--cx-bg-selected); }

/* ── Cards ─────────────────────────────────────────────────────────── */
.cx-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.75rem; /* 12 */
  padding: 0.75rem 0.75rem 0.75rem 0;
}
.cx-card {
  background: var(--cx-bg-primary);
  border: 1px solid var(--cx-border);
  border-radius: 0.5rem; /* 8 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cx-main { flex: 1; }
.cx-right { width: 20rem; flex: none; } /* 320 */

/* ── Editor header: icon, title, path, tags ────────────────────────── */
.cx-edhead { padding: 1rem 1.5rem 0.5rem; } /* 16 24 8 */
.cx-titlerow { display: flex; align-items: center; gap: 0.5rem; height: 2.25rem; }
.cx-fileicon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
.cx-title {
  flex: 1;
  min-width: 0;
  font-size: 1.5rem; /* 24 */
  line-height: 2rem;
  font-weight: 600;
  color: var(--cx-text-strong);
}
.cx-actions { display: flex; align-items: center; gap: 0.5rem; color: var(--cx-text-muted); }
.cx .cx-path {
  margin-top: 1.25rem; /* title-error row (16) + mt-1 */
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;  /* 12 */
  line-height: 1rem;
  color: var(--cx-text-muted);
}
.cx-tagsbar { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0; }
.cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem; /* 2 8 */
  border-radius: 0.5rem;
  background: var(--cx-bg-secondary);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

/* ── Pending proposals banner ──────────────────────────────────────── */
.cx-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12 */
  padding: 0.5rem 1rem; /* 8 16 */
  border-bottom: 1px solid var(--cx-border);
  border-left: 2px solid var(--cx-agent);
  background: color-mix(in oklab, var(--cx-bg-secondary) 30%, transparent);
}
.cx-dot {
  width: 0.5rem; /* 8 */
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cx-agent);
  flex: none;
}
.cx-dot.sm { width: 0.375rem; height: 0.375rem; }
.cx-banner-text { flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1rem; color: var(--cx-text-muted); }
.cx-banner-text b { font-weight: 500; color: var(--cx-text); }
.cx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem; /* 32 */
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}
.cx-btn.primary {
  background: var(--cx-primary);
  color: var(--cx-primary-fg);
  box-shadow: var(--cx-shadow-sm);
}

/* ── The property surface ──────────────────────────────────────────── */
.cx-props { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; } /* 12 16 */
.cx-prop { display: flex; align-items: center; gap: 0.75rem; min-height: 1.75rem; }
.cx-prop-label {
  width: 8rem; /* 128 */
  flex: none;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--cx-text-muted);
}
.cx-prop-label .q { opacity: 0.6; margin-left: 0.125rem; }
.cx-field { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.cx-field.grow { flex: 1; }
.cx-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 1.75rem; /* 28 */
  min-width: 0;
  padding: 0 0.75rem; /* 4 12 */
  border: 1px solid var(--cx-border);
  border-radius: 0.5rem;
  box-shadow: var(--cx-shadow-sm);
  font-size: 0.875rem; /* 14 */
  line-height: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
}
.cx-field.grow .cx-input { flex: 1; }
/* The attribution rings: 1px outside the border, agent and user. The app
   draws exactly this and nothing more on a touched field. */
.cx-input.agent { box-shadow: 0 0 0 1px var(--cx-agent-ring), var(--cx-shadow-sm); }
.cx-input.user { box-shadow: 0 0 0 1px var(--cx-user-ring), var(--cx-shadow-sm); }
.cx-remove { font-size: 0.75rem; line-height: 1; color: color-mix(in oklab, var(--cx-text-muted) 50%, transparent); padding: 0.125rem; }
.cx-addprop {
  margin-left: 8.75rem; /* 128 label + 12 gap */
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem; /* 11 */
  color: var(--cx-text-muted);
}

/* ── Body ──────────────────────────────────────────────────────────── */
.cx-body { flex: 1; min-height: 0; padding: 0.875rem 1rem; font-size: 0.875rem; line-height: 1.3125rem; } /* 14/21 */
.cx-body p { padding: 0 0.125rem 0 0.375rem; }
.cx-body p + p { margin-top: 1.3125rem; }
.cx-chatrow {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem; /* 32 */
  padding: 0 0.75rem;
  border-top: 1px solid color-mix(in oklab, var(--cx-border) 60%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cx-text-muted);
}

/* ── Source view (plain markdown on disk) ──────────────────────────── */
.cx-source {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0.5rem 1rem;
  white-space: pre;
  overflow: hidden;
}
.cx-source .k { color: var(--cx-text-muted); }

/* ── Right panel: mount rail, discussion ───────────────────────────── */
.cx-mountrail { display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem; }
.cx-mount {
  flex: 1;
  max-width: 7.5rem; /* 120 */
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--cx-text-muted);
}
.cx-mount[data-state="active"] { background: var(--cx-bg-tertiary); color: var(--cx-text); }
.cx-panelhead {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--cx-border);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
.cx-panelhead.tall { padding: 0.375rem 0.5rem; }
.cx-panelhead .name { flex: 1; min-width: 0; padding: 0.25rem 0.375rem; }
.cx-create {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--cx-primary);
  color: var(--cx-primary-fg);
}
.cx-transcript { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; }
.cx-turn-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.375rem 0.5rem; /* 6 8 */
  border-radius: 0.25rem;
  background: var(--cx-bg-tertiary);
  font-size: 0.75rem;
  line-height: 1rem;
}
.cx-turn-agent {
  align-self: flex-start;
  max-width: 95%;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--cx-border) 60%, transparent);
  background: var(--cx-bg-secondary);
  font-size: 0.75rem;
  line-height: 1rem;
}
.cx-turn-agent p + p { margin-top: 1rem; }
.cx-time {
  display: block;
  text-align: right;
  margin-top: 0.25rem;
  font-size: 0.625rem; /* 10 */
  color: color-mix(in oklab, var(--cx-text-muted) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
.cx-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--cx-primary) 30%, transparent);
  color: var(--cx-text-strong);
  font-size: 0.75rem;
  line-height: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}
.cx-system {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--cx-border) 60%, transparent);
  background: color-mix(in oklab, var(--cx-bg-secondary) 20%, transparent);
  font-size: 0.6875rem; /* 11 */
  line-height: 1.03125rem;
  color: var(--cx-text-muted);
}
.cx-system .i-xs { margin-top: 0.125rem; }
.cx-system-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; }
.cx-system-body b { font-weight: 500; }
.cx-status {
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--cx-primary) 15%, transparent);
  color: var(--cx-text-strong);
}
.cx-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--cx-border) 60%, transparent);
  font-size: 0.625rem;
  line-height: 0.9375rem;
}
.cx-composer { padding: 0.5rem 0.75rem; }
.cx-composer-box { border: 1px solid var(--cx-border); border-radius: 0.5rem; }
.cx-composer-input {
  min-height: 4.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--cx-text-muted);
}
.cx-composer-actions { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.375rem 0.375rem; }
.cx-token {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--cx-bg-secondary) 30%, transparent);
  font-size: 0.625rem;
  color: var(--cx-text-muted);
}
.cx-send { background: var(--cx-bg-secondary); color: color-mix(in oklab, var(--cx-text-muted) 60%, transparent); }

/* ── A loose fragment: one piece of chrome, lifted out of the window ─── */
.cx-fragment {
  background: var(--cx-bg-primary);
  border: 1px solid var(--cx-border);
  border-radius: 0.5rem;
  overflow: hidden;
}
.cx-fragment.pad { padding: 0.75rem; }

/* Fragments size to their container, never past it: at 200% text on a
   narrow phone the page must not scroll sideways because of a picture. */
.cx-fragment { max-width: 100%; }
.cx-fragment .cx-props { padding: 0; }
.cx-fragment .cx-prop-label { width: 7rem; }
.cx-fragment .cx-banner { flex-wrap: wrap; border-bottom: 0; row-gap: 0.5rem; }
.cx-fragment .cx-banner-text { flex: 1 1 12rem; }
.cx-fragment .cx-composer { padding: 0.5rem; }
.cx .cx-path.pad { margin: 0; padding: 0.625rem 1rem 0.25rem; }
.cx-composer-input.typed { color: var(--cx-text); }
.cx-chip.trunc { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.cx-caption { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.625rem; font-size: 0.75rem; line-height: 1rem; color: var(--cx-text-muted); }
.cx-caption span { display: inline-flex; align-items: center; gap: 0.375rem; }
.cx-dot.user { background: var(--cx-user-ring); }

/* A record, reduced to the lines that say what kind of record it is. */
.cx-record { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cx-record-head { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--cx-text-strong); min-width: 0; }
.cx-record .cx-prop-label { width: auto; text-align: left; }
.cx-record .cx-prop { gap: 0.5rem; }