/* ===================================================================
   Strategic Direction — UI prototype (Stage 0)
   Static mock styling built on the Claude design-system tokens
   (Design/claude-tokens.css). Stub data only; no backend.
   =================================================================== */

/* --- Design tokens (copied from Design/claude-tokens.css) --- */
:root {
  --om-bg-app: #faf9f5;
  --om-bg-panel: #f8f7f3;
  --om-bg-surface: #ffffff;
  --om-bg-elevated: #ffffff;
  --om-bg-active: #e8e6dc;
  --om-bg-selected: #e3dacc;
  --om-bg-muted: #f0eee6;

  --om-border-subtle: #0f0c0814;
  --om-border-card: #0f0c081f;
  --om-border-default: #0f0c081a;
  --om-border-strong: #0f0c0838;
  --om-border-focus: #0f0c085c;

  --om-text-primary: #0f0c08eb;
  --om-text-prose: #0f0c08cc;
  --om-text-secondary: #0f0c08a3;
  --om-text-tertiary: #0f0c0899;
  --om-text-disabled: #0f0c0852;
  --om-text-inverse: #faf9f5;
  --om-text-link: #6a9bcc;

  --om-accent-primary: #d97757;
  --om-accent-primary-hover: #c46a4d;
  --om-accent-primary-active: #b05e43;
  --om-accent-secondary: #6a9bcc;
  --om-accent-success: #558a42;
  --om-accent-sage: #788c5d;
  --om-accent-warning: #c9a82d;
  --om-accent-error: #a63244;

  /* Insertions and deletions in a markup diff (Consolidate only). The success
     accent is 4.1:1 on a card — fine on a pill, under the line for a paragraph
     — so the ink is darkened to 5.9:1. Colour is never the only signal here:
     red/green is the worst pair for colour vision deficiency, so a deletion is
     struck through and an insertion underlined as well. */
  --om-diff-ins: #3f6b30;
  --om-diff-del: var(--om-accent-error);

  /* A member's own text in a markup question. A darkened --om-accent-secondary:
     the accent itself is 2.8:1 on a card, fine for a pill and unreadable as a
     paragraph. Blue because it is the one accent not already carrying a meaning
     — red is Delete, terracotta the primary action, yellow the stale warning. */
  --om-mk-mine: #3d6f9e;

  --om-shadow-xs: 0 1px 2px #1414130a;
  --om-shadow-sm: 0 1px 3px #1414130f;
  --om-shadow-md: 0 4px 6px #1414130f;
  --om-shadow-diffuse: 0 4px 20px #1414130a;
  --om-shadow-lg: 0 10px 15px #14141314;
  --om-shadow-card: 0 18px 44px #1414131a, 0 3px 10px #1414130d;
  --om-shadow-modal: 0 24px 48px #0f0c0829, 0 8px 16px #0f0c0814;

  --om-font-sans: "Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --om-font-serif: "Anthropic Serif", ui-serif, Georgia, "Times New Roman", serif;
  --om-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
}

:root[data-theme="dark"] {
  --om-bg-app: #1c1b19;
  --om-bg-panel: #222220;
  --om-bg-surface: #2a2927;
  --om-bg-elevated: #2a2927;
  --om-bg-active: #35332c;
  --om-bg-selected: #3c392f;
  --om-bg-muted: #2e2c26;

  --om-border-subtle: #faf9f51a;
  --om-border-card: #faf9f524;
  --om-border-default: #faf9f51f;
  --om-border-strong: #faf9f53d;
  --om-border-focus: #faf9f566;

  --om-text-primary: #faf9f5eb;
  --om-text-prose: #faf9f5cc;
  --om-text-secondary: #faf9f5a3;
  --om-text-tertiary: #faf9f599;
  --om-text-disabled: #faf9f552;
  --om-text-inverse: #1c1b19;
  --om-text-link: #7eaeda;

  --om-accent-primary: #e08968;
  --om-accent-primary-hover: #e89b7e;
  --om-accent-primary-active: #efad94;
  --om-accent-secondary: #7eaeda;
  --om-accent-success: #6fa859;
  --om-accent-sage: #8fae6a;
  --om-accent-warning: #dabe4a;
  --om-accent-error: #dc8290;

  /* All comfortable on a dark card (5.2–6.2:1), so no darkened variants. */
  --om-diff-ins: var(--om-accent-success);
  --om-diff-del: var(--om-accent-error);
  --om-mk-mine: var(--om-accent-secondary);

  --om-shadow-xs: 0 1px 2px #0000003d;
  --om-shadow-sm: 0 1px 3px #00000047;
  --om-shadow-md: 0 4px 6px #00000047;
  --om-shadow-diffuse: 0 4px 20px #0000003d;
  --om-shadow-lg: 0 10px 15px #00000052;
  --om-shadow-card: 0 18px 44px #0006, 0 3px 10px #0000003d;
  --om-shadow-modal: 0 24px 48px #0000007a, 0 8px 16px #00000052;
}

/* --- Reset / base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--om-font-sans);
  background: var(--om-bg-app);
  color: var(--om-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--om-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; color: var(--om-text-prose); }
small { color: var(--om-text-secondary); }

/* --- Prototype banner --- */
.proto-banner {
  background: var(--om-accent-warning);
  color: #201a05;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  padding: 4px 10px;
  letter-spacing: .02em;
}

/* --- Top bar --- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  background: var(--om-bg-surface);
  border-bottom: 1px solid var(--om-border-default);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }
.brand .logo {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--om-accent-primary);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem;
}
.topbar .spacer { flex: 1; }
.userchip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--om-border-default); background: var(--om-bg-panel);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s;
}
a.userchip:hover { background: var(--om-bg-active); border-color: var(--om-border-strong); text-decoration: none; }
.userchip .avatar {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--om-accent-secondary); color: #fff; font-size: .75rem; font-weight: 700;
}
.userchip .meta { display: flex; flex-direction: column; line-height: 1.1; }
.userchip .meta b { font-size: .8rem; }
.userchip .meta span { font-size: .68rem; color: var(--om-text-secondary); }
.icon-btn {
  border: 1px solid var(--om-border-default); background: var(--om-bg-panel);
  color: var(--om-text-secondary); width: 34px; height: 34px; border-radius: 8px;
  cursor: pointer; font-size: 1rem; display: grid; place-items: center;
}
.icon-btn:hover { background: var(--om-bg-active); color: var(--om-text-primary); }

/* --- App layout (sidebar + main) --- */
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 84px); }
.sidebar {
  background: var(--om-bg-panel); border-right: 1px solid var(--om-border-default);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
}
.sidebar .group-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--om-text-tertiary); margin: 14px 8px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--om-text-prose); font-size: .9rem; cursor: pointer;
}
.nav-item:hover { background: var(--om-bg-active); text-decoration: none; color: var(--om-text-primary); }
.nav-item.active { background: var(--om-bg-selected); color: var(--om-text-primary); font-weight: 600; }
.nav-item .ic { width: 18px; text-align: center; opacity: .8; }
.sidebar .spacer { flex: 1; }
.sidebar-version {
  display: flex; flex-direction: column; gap: 1px;
  margin: 10px 8px 2px; padding-top: 10px;
  border-top: 1px solid var(--om-border-default);
  font-size: .68rem; line-height: 1.4; color: var(--om-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.main { padding: 24px 32px 60px; max-width: 1100px; }
.page-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.page-header .titles { flex: 1; }
.page-header .crumbs { font-size: .8rem; color: var(--om-text-secondary); margin-bottom: 4px; }
.page-header .crumbs a { color: var(--om-text-secondary); }
.page-header h1 { margin-bottom: 2px; }
.page-header .sub { color: var(--om-text-secondary); font-size: .9rem; }
.header-actions { display: flex; gap: 8px; align-items: center; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--om-border-default); background: var(--om-bg-surface);
  color: var(--om-text-primary); transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--om-bg-active); }
.btn-primary { background: var(--om-accent-primary); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--om-accent-primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--om-text-secondary); }
.btn-ghost:hover { background: var(--om-bg-active); color: var(--om-text-primary); }
.btn-sm { padding: 5px 10px; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* --- Cards --- */
.card {
  background: var(--om-bg-surface); border: 1px solid var(--om-border-card);
  border-radius: var(--radius); box-shadow: var(--om-shadow-xs); margin-bottom: 18px;
}
.card-header {
  padding: 14px 18px; border-bottom: 1px solid var(--om-border-subtle);
  display: flex; align-items: center; gap: 12px;
}
.card-header h2, .card-header h3 { margin: 0; }
.card-header .spacer { flex: 1; }
.card-body { padding: 18px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.project-card { cursor: pointer; transition: box-shadow .15s, transform .05s; }
.project-card:hover { box-shadow: var(--om-shadow-md); }
.project-card .type-tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--om-accent-primary);
}

/* --- Status pills --- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--om-border-default); background: var(--om-bg-muted);
  color: var(--om-text-secondary);
}
.pill .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.pill.draft { color: var(--om-text-tertiary); }
.pill.open { color: var(--om-accent-secondary); border-color: color-mix(in srgb, var(--om-accent-secondary) 40%, transparent); }
.pill.consolidation { color: var(--om-accent-warning); border-color: color-mix(in srgb, var(--om-accent-warning) 40%, transparent); }
.pill.locked { color: var(--om-accent-success); border-color: color-mix(in srgb, var(--om-accent-success) 40%, transparent); }
.pill.role { color: var(--om-accent-sage); }

/* --- Member completion badge (live phase, project page) --- */
.status-badge {
  display: inline-block; white-space: nowrap;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 5px; border: 1px solid transparent;
}
.status-badge.done {
  color: var(--om-accent-success);
  background: color-mix(in srgb, var(--om-accent-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--om-accent-success) 35%, transparent);
}
.status-badge.todo {
  color: var(--om-text-tertiary);
  background: var(--om-bg-muted);
  border-color: var(--om-border-default);
}

/* --- Stepper (phase progression) --- */
.steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.step {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--om-border-default); background: var(--om-bg-surface); font-size: .82rem;
}
.step .num {
  width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; background: var(--om-bg-muted); color: var(--om-text-secondary);
}
.step.done .num { background: var(--om-accent-success); color: #fff; }
.step.current { border-color: var(--om-accent-primary); box-shadow: var(--om-shadow-xs); }
.step.current .num { background: var(--om-accent-primary); color: #fff; }
.step.todo { opacity: .7; }

/* --- Tables --- */
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--om-border-subtle); }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--om-text-tertiary); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--om-bg-panel); }
/* Phase description in the project phases table: cap at 2 lines (full text on hover). */
.phase-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; max-width: 46ch;
}

/* --- Forms --- */
.field { margin-bottom: 18px; }
.field > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; }
.field .hint { font-size: .8rem; color: var(--om-text-secondary); margin: 0 0 8px; }
.field .req { color: var(--om-accent-error); }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; font-family: inherit; font-size: .92rem; color: var(--om-text-primary);
  background: var(--om-bg-surface); border: 1px solid var(--om-border-default);
  border-radius: 8px; padding: 9px 11px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--om-border-focus); box-shadow: 0 0 0 3px var(--om-border-subtle); }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--om-border-default); border-radius: 8px; cursor: pointer; font-size: .9rem;
}
.choice:hover { background: var(--om-bg-panel); }
.choice input { accent-color: var(--om-accent-primary); }
.scale { display: flex; gap: 8px; flex-wrap: wrap; }
.scale label {
  display: grid; place-items: center; width: 42px; height: 42px; cursor: pointer;
  border: 1px solid var(--om-border-default); border-radius: 8px; font-weight: 600;
}
.scale input { position: absolute; opacity: 0; width: 0; height: 0; }
.scale input:checked + span { color: #fff; }
.scale label:has(input:checked) { background: var(--om-accent-primary); border-color: transparent; }

/* --- Ranking question ---
   Two columns: the ranked slots (numbered by a CSS counter, so filled rows and
   empty slots share one sequence) and the pool of everything not yet placed. */
.rank-instruction { margin: 0 0 10px; }
.rank-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.rank-col-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--om-text-secondary); margin-bottom: 6px;
}
.rank-count { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0; }
.ranking.is-full .rank-count { color: var(--om-accent-success); }
.rank-zone {
  list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px;
  min-height: 56px; border: 1px dashed var(--om-border-default); border-radius: 10px;
  background: var(--om-bg-muted);
}
.rank-ranked { counter-reset: rank; }
.rank-zone.rank-over { border-color: var(--om-accent-primary); background: color-mix(in srgb, var(--om-accent-primary) 8%, var(--om-bg-muted)); }
.rank-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--om-bg-surface); border: 1px solid var(--om-border-default);
  border-radius: 8px; font-size: .88rem; cursor: grab;
}
.rank-item.dragging { opacity: .45; cursor: grabbing; }
.rank-ranked > li::before {
  counter-increment: rank; content: counter(rank);
  flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: var(--om-accent-primary); color: #fff;
}
.rank-slot::before { background: transparent; color: var(--om-text-secondary); border: 1px dashed var(--om-border-strong); }
.rank-grip { color: var(--om-text-secondary); cursor: grab; }
.rank-label { flex: 1; overflow-wrap: anywhere; }
.rank-slot {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px dashed var(--om-border-strong); border-radius: 8px;
  font-size: .82rem; color: var(--om-text-secondary);
}
.rank-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.rank-btn {
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--om-border-default); border-radius: 6px;
  background: var(--om-bg-surface); color: var(--om-text-prose); cursor: pointer; font-size: .82rem;
}
.rank-btn:hover:not(:disabled) { background: var(--om-bg-panel); border-color: var(--om-border-strong); }
.rank-btn:disabled { opacity: .3; cursor: not-allowed; }
/* Each column only offers the moves that make sense in it. */
.rank-ranked .rank-btn[data-act="add"],
.rank-unranked .rank-btn[data-act="up"],
.rank-unranked .rank-btn[data-act="down"],
.rank-unranked .rank-btn[data-act="remove"] { display: none; }

@media (max-width: 700px) {
  .rank-cols { grid-template-columns: 1fr; }
}

/* --- Markup questions ---
   Two boxes stacked: the passage as given, then the member's copy of it. The
   whole of each box is one colour — the original grey and recessive, the
   member's blue and live — so there is no word-level highlighting to read.
   Colour is not doing this alone: the boxes are labelled, differently shaded,
   and only one of them has a cursor in it. */
.mk-box {
  border: 1px solid var(--om-border-default); border-radius: 8px;
  overflow: hidden; margin-bottom: 10px;
}
.mk-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px;
  font-size: .78rem; font-weight: 600; color: var(--om-text-secondary);
  background: var(--om-bg-panel); border-bottom: 1px solid var(--om-border-subtle);
}
.mk-head .muted { font-weight: 400; }
.mk-head .btn { padding: 2px 9px; font-size: .75rem; }
.mk-original, textarea.mk-mine {
  display: block; width: 100%; margin: 0; padding: 12px;
  font-family: inherit; font-size: .92rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 380px; overflow: auto;
}
.mk-original { color: var(--om-text-secondary); background: var(--om-bg-muted); }
/* Overrides the shared control styling: inside its own box it needs no second
   border, and the box supplies the rounding. */
textarea.mk-mine {
  color: var(--om-mk-mine); background: var(--om-bg-surface);
  border: 0; border-radius: 0; min-height: 170px; resize: vertical;
}
textarea.mk-mine:focus { border: 0; box-shadow: inset 0 0 0 2px var(--om-border-subtle); }
textarea.mk-mine[readonly] { background: var(--om-bg-panel); }
.markup.is-edited .mk-state { color: var(--om-accent-primary); font-weight: 600; }
.mk-nochange-row { width: auto; }

/* --- Markup on the Consolidate page ---
   Every markup is available and none is open: the facilitator's normal route
   in is the AI summary, and the diffs are what they open when it raises
   something. So the collapsed row carries the counts and the flags — without
   them you would have to open all ten to find out who did anything. */
.mk-source { margin-bottom: 12px; }
.mk-source > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600;
  color: var(--om-text-secondary); padding: 4px 0;
}
.mk-source .mk-original { border: 1px solid var(--om-border-subtle); border-radius: 8px; margin-top: 6px; }
.mk-list-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; font-size: .85rem; }
.mk-member { border-bottom: 1px solid var(--om-border-subtle); }
.mk-member:last-child { border-bottom: 0; }
.mk-member-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 2px; font-size: .9rem; cursor: pointer; list-style: none;
}
.mk-flat > .mk-member-head { cursor: default; }
summary.mk-member-head::-webkit-details-marker { display: none; }
/* The triangle is drawn rather than inherited, so the no-change rows can
   simply not have one. */
summary.mk-member-head::before {
  content: "▸"; color: var(--om-text-tertiary); font-size: .8rem; width: 12px;
}
.mk-member[open] > summary.mk-member-head::before { content: "▾"; }
.mk-flat > .mk-member-head { padding-left: 14px; }
.mk-who { font-weight: 600; }
.mk-stats { font-size: .82rem; margin-left: auto; }
.mk-diff {
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6;
  padding: 12px; margin: 0 0 12px; border-radius: 8px;
  background: var(--om-bg-muted); border: 1px solid var(--om-border-subtle);
  max-height: 420px; overflow: auto;
}
/* A replacement puts the deletion hard against the insertion, and without a
   gap the two words read as one — "neutralpositive". The padding is visual
   only; the text itself is untouched. */
.mk-diff del, .mk-diff ins,
.mk-changes-note del, .mk-changes-note ins { padding: 1px 3px; border-radius: 3px; }
.mk-diff del, .mk-changes-note del {
  color: var(--om-diff-del); text-decoration: line-through;
  background: color-mix(in srgb, var(--om-diff-del) 8%, transparent);
}
.mk-diff ins, .mk-changes-note ins {
  color: var(--om-diff-ins); text-decoration: underline;
  background: color-mix(in srgb, var(--om-diff-ins) 10%, transparent);
}

/* --- "Show my changes" on the member's page ---
   Shut by default, so the page is unchanged for anyone who does not want it,
   and the two boxes stay the thing you look at. Its contents are rendered by
   the server on load and refreshed by the server as they type. */
.mk-changes { margin: 0 0 10px; }
.mk-changes > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 7px 11px; font-size: .8rem; font-weight: 600;
  color: var(--om-text-secondary);
  border: 1px solid var(--om-border-default); border-radius: 8px;
  background: var(--om-bg-panel);
}
.mk-changes[open] > summary { border-radius: 8px 8px 0 0; border-bottom: 0; }
.mk-changes-count { font-weight: 400; margin-left: auto; }
.mk-changes-note { margin: 10px 11px 0; font-size: .78rem; }
.mk-changes .mk-diff { margin: 8px 0 0; border-radius: 0 0 8px 8px; border-top: 0; }
/* The panel keeps showing the last good diff while a refresh is in flight;
   fading it says "this is a moment behind" without emptying the box. */
.mk-changes.is-refreshing .mk-diff { opacity: .55; }
.mk-changes.is-stale > summary {
  border-color: var(--om-accent-warning);
  box-shadow: inset 3px 0 0 var(--om-accent-warning);
}
.mk-changes.is-stale > summary::after {
  content: "the passage has changed — reload before saving";
  color: var(--om-accent-warning); font-weight: 400;
}

/* --- Ranked answers, read-only (consolidate) --- */
.answer-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.answer-rank li { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.rank-pos {
  flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: var(--om-accent-primary); color: #fff;
}

/* --- Ranking group result (Consolidate) --- */
.tally {
  border: 1px solid var(--om-border-default); border-radius: 10px;
  background: var(--om-bg-muted); padding: 12px 14px; margin: 0 0 16px;
}
.tally-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: .9rem; }
.tally-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tally-table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--om-text-secondary); font-weight: 600; padding: 4px 8px 6px 0; white-space: nowrap;
  border-bottom: 1px solid var(--om-border-default);
}
.tally-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--om-border-subtle); }
.tally-table tr:last-child td { border-bottom: 0; }
.tally-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tally-table th.num { cursor: help; }
/* Options nobody placed stay listed — a unanimous non-choice is a result. */
.tally-zero td { color: var(--om-text-secondary); }
.tally-bar-cell { width: 34%; min-width: 90px; padding-right: 0; }
.tally-bar {
  display: block; height: 8px; border-radius: 999px; min-width: 2px;
  background: var(--om-accent-primary);
}
.tally-flag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; cursor: help;
}
.tally-flag.contested {
  background: color-mix(in srgb, var(--om-accent-warning) 18%, var(--om-bg-surface));
  color: var(--om-accent-warning);
  border: 1px solid color-mix(in srgb, var(--om-accent-warning) 40%, transparent);
}
.tally-flag.consensus {
  background: color-mix(in srgb, var(--om-accent-success) 16%, var(--om-bg-surface));
  color: var(--om-accent-success);
  border: 1px solid color-mix(in srgb, var(--om-accent-success) 38%, transparent);
}
.tally-note { margin: 10px 0 0; font-size: .78rem; line-height: 1.5; }

@media (max-width: 700px) {
  .tally-table .hide-narrow, .tally-bar-cell { display: none; }
}

/* --- Stat tiles + progress --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--om-bg-surface); border: 1px solid var(--om-border-card); border-radius: var(--radius); padding: 16px; }
.stat .value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.stat .label { font-size: .78rem; color: var(--om-text-secondary); }
.stat .value.accent { color: var(--om-accent-primary); }
.progress { height: 8px; border-radius: 999px; background: var(--om-bg-muted); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--om-accent-success); border-radius: 999px; }

/* --- AI panel --- */
.ai-panel { border: 1px solid color-mix(in srgb, var(--om-accent-primary) 35%, var(--om-border-card)); }
.ai-panel .card-header {
  background: color-mix(in srgb, var(--om-accent-primary) 8%, var(--om-bg-surface));
  border-radius: var(--radius) var(--radius) 0 0;
}
.ai-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700;
  color: var(--om-accent-primary); text-transform: uppercase; letter-spacing: .05em;
}
/* Collapsible prompt + responses context on the AI summary page. */
.ai-context {
  margin: 0 0 16px; border: 1px solid var(--om-border-subtle);
  border-radius: var(--radius); background: var(--om-bg-muted);
}
.ai-context > summary,
.ai-context-member > summary { cursor: pointer; list-style: none; }
.ai-context > summary::-webkit-details-marker,
.ai-context-member > summary::-webkit-details-marker { display: none; }
.ai-context > summary::before,
.ai-context-member > summary::before {
  content: "\25B8"; display: inline-block; margin-right: 6px;
  color: var(--om-text-tertiary); transition: transform .15s ease;
}
.ai-context[open] > summary::before,
.ai-context-member[open] > summary::before { transform: rotate(90deg); }
.ai-context > summary {
  padding: 9px 12px; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--om-text-secondary);
}
.ai-context > .hint { padding: 0 12px; }
.ai-context-members { padding: 4px 12px 10px; }
.ai-context-member { border-top: 1px solid var(--om-border-subtle); }
.ai-context-member:first-child { border-top: none; }
.ai-context-member > summary { padding: 8px 0; font-size: .85rem; font-weight: 600; }
/* Who feeds the AI summary — checkbox list inside the same collapsible shell. */
.ai-context > form { padding: 0 12px 12px; }
.summary-members {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px;
}
.summary-member {
  display: flex; align-items: center; gap: 6px; padding: 5px 0;
  font-size: .88rem; cursor: pointer;
}
.summary-member input { width: auto; margin: 0; flex: none; }
.ctx-answer { padding: 4px 0 4px 20px; font-size: .85rem; }
.ctx-answer .ctx-q { display: block; color: var(--om-text-secondary); font-weight: 600; }
.ctx-answer .ctx-a { display: block; white-space: pre-wrap; }
.ai-output { font-size: .92rem; color: var(--om-text-prose); line-height: 1.55; }
.ai-output > :first-child { margin-top: 0; }
.ai-output > :last-child { margin-bottom: 0; }
.ai-output p { margin: 0 0 .6em; }
.ai-output h3, .ai-output h4, .ai-output h5, .ai-output h6 {
  margin: .9em 0 .35em; line-height: 1.3; font-weight: 700; color: var(--om-text-primary);
}
.ai-output h3 { font-size: 1.02rem; }
.ai-output h4 { font-size: .95rem; }
.ai-output h5, .ai-output h6 { font-size: .9rem; }
.ai-output ul, .ai-output ol { margin: .3em 0 .6em 1.2em; padding: 0; }
.ai-output li { margin: .25em 0; }
.ai-output strong { font-weight: 700; color: var(--om-text-primary); }
.ai-output em { font-style: italic; }
.ai-output code {
  font-family: var(--om-font-mono); font-size: .86em;
  background: var(--om-bg-muted); border: 1px solid var(--om-border-subtle);
  border-radius: 4px; padding: .05em .35em;
}
.ai-output a { color: var(--om-text-link); }
.ai-output .ai-table-wrap { overflow-x: auto; margin: .5em 0 .8em; }
.ai-output table { border-collapse: collapse; font-size: .88rem; }
.ai-output th, .ai-output td {
  border: 1px solid var(--om-border-default); padding: 5px 10px;
  text-align: left; vertical-align: top;
}
.ai-output th { background: var(--om-bg-muted); font-weight: 700; color: var(--om-text-primary); }
.ai-placeholder { color: var(--om-text-tertiary); font-size: .9rem; }
.ai-disclaimer { font-size: .75rem; color: var(--om-text-tertiary); margin-top: 10px; }
.spinner {
  width: 15px; height: 15px; border-radius: 999px; border: 2px solid var(--om-border-strong);
  border-top-color: var(--om-accent-primary); display: inline-block; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Response items (consolidation) --- */
.response { border: 1px solid var(--om-border-default); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: var(--om-bg-surface); }
.response .who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .82rem; color: var(--om-text-secondary); }
.response .who .avatar { width: 22px; height: 22px; border-radius: 999px; background: var(--om-accent-secondary); color: #fff; display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
.response .body { font-size: .92rem; color: var(--om-text-primary); }

/* Type-aware answer formatting on the consolidation view */
.answer-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.answer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.answer-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--om-accent-primary) 12%, var(--om-bg-surface)); border: 1px solid color-mix(in srgb, var(--om-accent-primary) 30%, var(--om-border-default)); font-size: .82rem; }
.scale-viz { display: inline-flex; gap: 4px; vertical-align: middle; }
.scale-dot { width: 12px; height: 12px; border-radius: 999px; border: 1px solid var(--om-border-strong); background: transparent; }
.scale-dot.on { background: var(--om-accent-primary); border-color: var(--om-accent-primary); }
.scale-num { margin-left: 10px; }
/* Extreme-position legend shown once under a scale question; low/high on separate lines. */
.scale-legend { margin: 2px 0 12px; font-size: .8rem; line-height: 1.5; }

/* --- Login --- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(1200px 500px at 70% -10%, color-mix(in srgb, var(--om-accent-primary) 12%, transparent), transparent),
  var(--om-bg-app); }
.auth-card { width: 100%; max-width: 400px; background: var(--om-bg-surface); border: 1px solid var(--om-border-card);
  border-radius: var(--radius-lg); box-shadow: var(--om-shadow-card); padding: 28px; }
.auth-card .brand { justify-content: center; font-size: 1.15rem; margin-bottom: 4px; }
.auth-card .tagline { text-align: center; color: var(--om-text-secondary); font-size: .88rem; margin-bottom: 22px; }

/* The authoring form hides the settings the chosen question type ignores, and
   several of those blocks carry a display rule of their own. */
[hidden] { display: none !important; }

/* --- Utilities --- */
.row { display: flex; gap: 12px; align-items: center; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.muted { color: var(--om-text-secondary); }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.notice { background: var(--om-bg-muted); border: 1px solid var(--om-border-default); border-left: 3px solid var(--om-accent-secondary);
  border-radius: 8px; padding: 10px 14px; font-size: .85rem; color: var(--om-text-prose); margin-bottom: 16px; }
.locked-note { border-left-color: var(--om-accent-success); }
/* Stale/out-of-date AI summary warning. */
.notice-stale {
  border-left-color: var(--om-accent-warning);
  background: color-mix(in srgb, var(--om-accent-warning) 10%, var(--om-bg-muted));
}

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--om-border-default); }
  .sidebar .group-label, .sidebar .spacer { display: none; }
  .main { padding: 18px; }
}