/* ── Reset & Variables ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #f0f1f3;
  --surface:     #ffffff;
  --border:      #dde1e6;
  --text:        #1a1a2e;
  --text-dim:    #5f6878;
  --accent:      #2d5aa0;
  --accent-light:#e8eef7;
  --tag-accepted:    #1a7a3a;
  --tag-accepted-bg: #e6f4ea;
  --tag-rejected:    #a82a2a;
  --tag-rejected-bg: #fce8e8;
  --tag-undecided:   #8a6d00;
  --tag-undecided-bg:#fff8e0;
  --rule-bg:     #f0f1f3;
  --suspended-bg:#f0f0f0;
  --radius:      8px;
  --shadow:      0 1px 3px rgba(0,0,0,.1);
  --shadow-lg:   0 2px 6px rgba(0,0,0,.13);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--text); background: var(--bg);
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
body.modal-open { overflow: hidden; }

[hidden] { display: none !important; }

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

.skip-link {
  position: fixed; left: .75rem; top: .5rem;
  z-index: 1000; transform: translateY(-180%);
  padding: .5rem .75rem; border-radius: var(--radius);
  color: #fff; background: var(--accent);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #0b70c9;
  outline-offset: 2px;
}

.global-status {
  position: fixed; top: 4.2rem; right: 1rem;
  width: min(420px, calc(100vw - 2rem));
  z-index: 400;
  padding: .65rem .8rem;
  border: 1px solid #b9cee6;
  border-radius: var(--radius);
  background: #edf5fd; color: #173f68;
  box-shadow: var(--shadow-lg);
  font-size: .84rem;
}
.global-status.status-success { border-color: #a8d4b5; background: #edf8f0; color: #18552b; }
.global-status.status-error { border-color: #edb8b0; background: #fff0ee; color: #7a2015; }

/* ── Top Bar ─────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1.1rem; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0; gap: .75rem;
}
.topbar-left { display: flex; align-items: center; gap: .5rem; font-size: .86rem; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.service-links { display: inline-flex; align-items: center; gap: .4rem; margin-left: .15rem; }
.service-links a { color: var(--text-dim); font-size: .7rem; white-space: nowrap; }
.service-links a:hover { color: var(--accent); }
.app-brand { display: inline-flex; flex-direction: column; line-height: 1.05; }
.app-title { font-weight: 700; color: var(--accent); white-space: nowrap; }
.app-lab { color: var(--text-dim); font-size: .58rem; letter-spacing: .035em; white-space: nowrap; }
.sep { color: var(--border); }
.scenario-name { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-indicator {
  flex-shrink: 0; padding: .12rem .4rem;
  border: 1px solid #bdd0e5; border-radius: 999px;
  background: #edf4fb; color: #2c567f;
  font-size: .68rem; font-weight: 600;
}
.context-indicator.context-project { border-color: #b4d5bd; background: #edf8f0; color: #235b32; }
.context-indicator.context-shared { border-color: #d8c78e; background: #fff8df; color: #695315; }
.modified-indicator {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: .14rem .45rem;
  border-radius: 999px;
  border: 1px solid #d7b46a;
  background: #fff6dc;
  color: #6a4b00;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.modified-indicator[hidden] { display: none; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 500;
  padding: .4rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg); border-color: #bbc0c8; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #244a88; }
.btn-small { font-size: .76rem; padding: .28rem .65rem; }
.btn-small, .concl-filter, .facts-filter, .kb-tab, .chat-access-button {
  min-height: 24px;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.access-chip {
  color: #244f7c; background: #eef4fb; border-color: #bdd0e5;
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── LLM-gated elements ──────────────────────────────── */
/* Hidden when the server reports ABDA_ENABLE_LLM=0 (the default).
   app.js toggles body.llm-disabled after fetching GET /config. */
body.llm-disabled .llm-only { display: none !important; }
body.llm-disabled .left-panel { width: 100%; }

/* ── Two-Panel Layout ────────────────────────────────── */
.main-area { flex: 1; display: flex; overflow: hidden; }

/* ── Panel Header (shared style) ─────────────────────── */
.panel-header {
  font-size: .78rem; font-weight: 600;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
  background: var(--surface);
}

/* ── Left Panel ──────────────────────────────────────── */
.left-panel {
  width: 75%; min-width: 400px;
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg);
}

/* ── Top Section: Conclusions + Facts ─────────────────── */
.top-section {
  display: flex;
  flex-shrink: 0;
  height: 35%;
  min-height: 120px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 3px 8px rgba(0,0,0,.1);
  position: relative; z-index: 1;
}
.conclusions-panel {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.conclusions-header-row {
  display: flex; align-items: center; justify-content: space-between;
}
.concl-filters { display: flex; gap: .1rem; }
.concl-filter {
  font-size: .68rem; font-weight: 500;
  padding: .15rem .4rem; border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent; color: var(--text-dim);
  cursor: pointer; transition: all .12s;
}
.concl-filter:hover { background: var(--bg); color: var(--text); }
.concl-filter.active {
  background: var(--accent-light); color: var(--accent);
  font-weight: 600;
}
.conclusions-list {
  flex: 1; overflow-y: auto;
  padding: .5rem .7rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.facts-panel {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.facts-header-row {
  display: flex; align-items: center; justify-content: space-between;
}
.facts-list {
  flex: 1; overflow-y: auto;
  padding: .5rem .7rem;
  display: flex; flex-direction: column; gap: .15rem;
}

/* ── Conclusion Card ─────────────────────────────────── */
.conclusion-card {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .84rem; font-weight: 500;
  box-shadow: var(--shadow);
  transition: box-shadow .12s, border-color .12s;
  overflow: hidden;
  min-height: 2rem;
}
.conclusion-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }
.conclusion-card.label-changed {
  animation: conclusion-label-pulse .75s ease-out;
}
@keyframes conclusion-label-pulse {
  0% {
    box-shadow: 0 0 0 3px rgba(45,90,160,.35), var(--shadow-lg);
    border-color: var(--accent);
  }
  100% {
    box-shadow: var(--shadow);
    border-color: var(--border);
  }
}
.conclusion-status-bar {
  width: 5.5rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
  /* Match the card's inner rounded corners on the left so the coloured
     border isn't clipped by the card's overflow:hidden at top-left and
     bottom-left. Right side stays square — it butts up against the label. */
  border-top-left-radius: calc(var(--radius) - 1px);
  border-bottom-left-radius: calc(var(--radius) - 1px);
}
/* Hue family matches the AF-graph node fills (fillFor() in app.js): blue for
   accepted, orange for rejected, yellow for undecided. Pattern is light tint
   bg + dark text + colored border of the same hue. */
.conclusion-status-bar.status-accepted  { background: #dce8f7; color: #1d4f8c; border: 1px solid #3a7ad0; }
.conclusion-status-bar.status-rejected  { background: #fae5cf; color: #7a3f10; border: 1px solid #e08a3a; }
.conclusion-status-bar.status-undecided { background: #fbf1c8; color: #5a4500; border: 1px solid #c0a93a; }
.conclusion-label { flex: 1; padding: .3rem .5rem; }
.conclusion-actions { display: flex; gap: .25rem; align-items: center; padding: .3rem .4rem .3rem 0; }

/* ── Status Badges ───────────────────────────────────── */
.badge {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding: .1rem .35rem;
  border-radius: 100px; white-space: nowrap;
}
.badge-accepted { background: #dce8f7; color: #1d4f8c; border: 1px solid #3a7ad0; }
.badge-rejected { background: #fae5cf; color: #7a3f10; border: 1px solid #e08a3a; }
.badge-undecided { background: #fbf1c8; color: #5a4500; border: 1px solid #c0a93a; }

/* ── Why Button ──────────────────────────────────────── */
.btn-explain {
  font-size: .72rem; font-weight: 600; color: #2d5aa0; cursor: pointer;
  background: transparent; border: 1px solid #4a7abf;
  border-radius: var(--radius); padding: .15rem .5rem;
  transition: background .12s, color .12s;
}
.btn-explain:hover:not(:disabled) { background: #2d5aa0; color: #fff; }
.btn-explain:disabled {
  color: #9aa4ad; border-color: #c9d0d7; cursor: not-allowed;
  background: transparent;
}

/* ── Fact Card ───────────────────────────────────────── */
.fact-id {
  font-size: .68rem; font-weight: 600; flex-shrink: 0;
  color: var(--text-dim);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  min-width: 2rem;
}
.fact-card {
  display: flex; align-items: center; gap: .4rem;
  padding: .25rem .5rem; margin-bottom: .1rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .78rem;
  box-shadow: var(--shadow);
  transition: box-shadow .12s;
}
.fact-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }
.fact-card input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0;
}
.fact-text { flex: 1; }
.fact-tag {
  font-size: .6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; padding: .1rem .3rem;
  border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.tag-material { background: #f0ede8; color: #7a6a52; border: 1px solid #c4b8a4; }
.tag-evidence { background: #e8eef0; color: #4a6a7a; border: 1px solid #a0b8c4; }
.tag-unchallenged { background: #e8e8ec; color: #5a5a6a; border: 1px solid #b0b0c0; }
.tag-witness-testimony { background: #efeaf4; color: #5a3a7a; border: 1px solid #c0aed0; }
.tag-commonsense { background: #eef0e8; color: #5a6a3a; border: 1px solid #b0c0a0; }
.tag-doctrine { background: #eaefea; color: #3a6a4a; border: 1px solid #a8c4ae; }
.tag-equity { background: #f4e8e8; color: #7a3a3a; border: 1px solid #c4a0a0; }
.tag-inference-validity { background: #f0eae4; color: #6a5a3a; border: 1px solid #c4b8a4; }

/* ── Facts & Assumptions: type filter bar ───────────────── */
.facts-filter-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.facts-filter {
  font-size: .72rem; font-weight: 500;
  padding: .2rem .5rem; border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent; color: var(--text-dim);
  cursor: pointer; transition: all .12s;
}
.facts-filter:hover { background: var(--bg); color: var(--text); }
.facts-filter.active {
  background: var(--accent-light); color: var(--accent);
  border-color: var(--accent-light); font-weight: 600;
}

/* ── Divergence from YAML baseline (lavender) ───────────── */
/* --- Scenario select, error banner --- */

.scenario-select {
  background: var(--bg-alt, var(--bg));
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: .35rem .5rem;
  font: inherit;
  cursor: pointer;
  min-width: 17rem;
  max-width: 24rem;
}
.scenario-select:focus { outline: none; border-color: var(--accent); }

/* Inactive assumptions use shape and background, while retaining text contrast. */
.fact-card.suspended {
  background: var(--suspended-bg);
  border-style: dashed;
  box-shadow: none;
}

/* "Absent" status = no argument concludes this proposition (nor its
   negation). Render with neutral grey so it reads as "nothing derived
   yet" rather than a positive/negative outcome. */
.conclusion-status-bar.status-absent {
  background: #e5e6ea;
  color: #545b6b;
}
.conclusion-card:has(.status-absent) {
  border-style: dashed;
  box-shadow: none;
}

.error-banner {
  background: #f4d4d4;
  color: #5a1e1e;
  padding: .5rem .75rem;
  margin: .5rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .9em;
}

/* Rule / fact / assumption ids rendered inline at the end of the
   description, rather than as a left-edge metadata cell. */
.inline-id {
  font-size: .85em;
  font-weight: 600;
  color: var(--text-dim);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  margin-left: .4rem;
  white-space: nowrap;
}

/* --- Game Explorer additions --- */

/* Style the .kw keyword class globally (previously only scoped per
   container). "If", "then", "normally", "necessarily", "and" render
   in uppercase + bold + muted dark gray at slightly smaller size.
   Applies everywhere .kw is used (rule cards, Explain modal, Conflicts
   view, Game Explorer). */
.kw {
  font-weight: 700;
  color: #4a4a5a;
  text-transform: uppercase;
  font-size: .92em;
}

.game-picker-header {
  font-size: .85rem;
  color: var(--text-dim);
  margin-bottom: .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.game-picker-list { display: flex; flex-direction: column; gap: .4rem; }
.game-picker-card {
  display: block;
  width: 100%;
  padding: .6rem .75rem;
  color: var(--text);
  font: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.game-picker-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.game-picker-rule {
  display: block;
  font-size: .85rem;
  line-height: 1.45;
  margin-bottom: .3rem;
}
.game-picker-meta {
  display: block;
  font-size: .7rem;
  color: var(--text-dim);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
}
.game-toolbar {
  /* Sticky so "Back to arguments" stays visible even after the user
     has scrolled through a deep game tree. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  padding: .3rem 0 .6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .6rem;
}
.support-rule-line {
  font-size: .82rem;
  line-height: 1.4;
  margin-bottom: .2rem;
}

/* Applies uniformly to fact-cards and rule-cards that have been
   toggled, modified, or otherwise diverge from the scenario
   authoring baseline. */
/* Violet outline for "modified from baseline". Outline only (normal
   gray card background preserved); a thicker 5px left bar makes the
   divergence pop in a scan. Violet is deliberately out-of-palette --
   the accepted/rejected/undecided status colours (blue/orange/yellow)
   never use violet, so there's no risk of reading it as a label. */
.kb-divergent {
  border-color: #7a3fa0 !important;
  border-left: 5px solid #7a3fa0 !important;
}
.kb-divergent .fact-id,
.kb-divergent .rule-id {
  color: #4a2a70;
}

/* ── Toggle checkbox placement: right side, with breathing room ── */
.rule-card .rule-active-toggle {
  margin-left: .5rem;
  margin-right: .25rem;
}
.fact-card > input[type="checkbox"]:last-child {
  margin-left: auto;
  margin-right: .15rem;
}

/* ── Resize Handles ──────────────────────────────────── */
/* Vertical bar (col-resize) — between side-by-side panels */
.v-resize-handle {
  width: 5px; cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background .12s;
}
.v-resize-handle:hover, .v-resize-handle.dragging {
  background: var(--accent);
}
/* Horizontal bar (row-resize) — between stacked panels */
.h-resize-handle {
  height: 5px; cursor: row-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background .12s;
}
.h-resize-handle:hover, .h-resize-handle.dragging {
  background: var(--accent);
}
/* Special case: between conclusions and facts (side-by-side in a row) */
.top-section > .v-resize-handle {
  /* uses default v-resize-handle style */
}

/* ── Rules Section ───────────────────────────────────── */
.rules-section {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.rules-toolbar {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.kb-tabs { display: flex; gap: .1rem; }
.kb-tab {
  font-size: .74rem; font-weight: 500;
  padding: .2rem .5rem; border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent; color: var(--text-dim);
  cursor: pointer; transition: all .12s;
}
.kb-tab:hover { background: var(--bg); color: var(--text); }
.kb-tab.active {
  background: var(--accent-light); color: var(--accent);
  border-color: var(--accent-light); font-weight: 600;
}
.toolbar-spacer { flex: 1; }
.kb-search input {
  font-size: .78rem; padding: .22rem .5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  width: 140px; outline: none;
  transition: border-color .12s;
}
.kb-search input:focus { border-color: var(--accent); }

.kb-content {
  flex: 1; overflow-y: auto;
  padding: .6rem .9rem;
  background: var(--surface);
}

/* ── KB Group ────────────────────────────────────────── */
.kb-group {
  margin-bottom: .8rem;
}
.kb-group-title {
  padding: .25rem 0; margin-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}
.kb-group-title .kb-badge {
  font-size: .65rem;
  padding: .15rem .5rem;
  margin: 0;
}

/* ── Category badge (Compact view) ───────────────────── */
/* Option C from the badge mock: light tint bg, dark text, NO border,
   square corners. Reads as a label, not a button (keeping clear
   distinction from the outlined Explain-button pattern). Placed
   right-justified inside the card, just before the `?` info icon
   (see .fact-card and .rule-actions). */
.kb-badge {
  display: inline-block;
  font-size: .58rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em;
  padding: .1rem .4rem;
  border: 0;
  border-radius: 0;
  vertical-align: middle;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0 .25rem;
}

/* ── Compact-view switch (top bar) ───────────────────── */
.compact-switch {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer;
  padding: .25rem .4rem;
  user-select: none;
}
.compact-switch input {
  position: absolute; opacity: 0; pointer-events: none;
}
.compact-switch-slider {
  position: relative;
  display: inline-block;
  width: 28px; height: 15px;
  background: #c8cdd4;
  border-radius: 20px;
  transition: background .15s;
  flex-shrink: 0;
}
.compact-switch-slider::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.compact-switch input:checked + .compact-switch-slider {
  background: var(--accent);
}
.compact-switch input:checked + .compact-switch-slider::before {
  transform: translateX(13px);
}
.compact-switch input:focus-visible + .compact-switch-slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.compact-switch-label {
  font-size: .82rem; font-weight: 500;
  color: var(--text);
}

/* ── Rule Card ───────────────────────────────────────── */
.rule-card {
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: .25rem;
  background: var(--rule-bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .12s;
  overflow: hidden;
}
.rule-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }
.rule-card.suspended {
  background: var(--suspended-bg);
  border-style: dashed;
  box-shadow: none;
}
.rule-card.rule-modified {
  background: #f0edf5; border-color: #c4b8d4;
}
.rule-card.rule-modified .rule-id {
  color: #7a5a9a;
}
.rule-modified-badge {
  display: inline-block;
  font-size: .58rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; padding: .08rem .25rem;
  border-radius: 100px;
  background: #e0d8ec; color: #6a4a8a; border: 1px solid #c0a8d8;
  margin-right: .15rem;
}
.rule-kind-badge {
  font-size: .6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; padding: .1rem .3rem;
  border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.rule-kind-strict {
  background: #e8e8ec; color: #5a5a6a; border: 1px solid #b0b0c0;
}
.rule-kind-defeasible {
  background: #e8e8ec; color: #5a5a6a; border: 1px solid #b0b0c0;
}
.rule-id {
  font-size: .68rem; font-weight: 600; flex-shrink: 0;
  padding: .35rem .3rem .35rem .4rem;
  color: var(--text-dim);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  min-width: 2.5rem;
}
.rule-body { flex: 1; min-width: 0; padding: .35rem .4rem; }
.rule-text { font-size: .82rem; line-height: 1.45; }
.rule-text .kw {
  font-weight: 700; color: #4a4a5a;
}
.rule-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0;
  font-family: inherit;
  font-size: .68rem; font-weight: 700;
  color: var(--text-dim); background: var(--bg);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: help; flex-shrink: 0;
  transition: color .12s, border-color .12s;
}
.rule-info:hover { color: var(--accent); border-color: var(--accent); }
.rule-actions {
  display: flex; gap: .2rem; align-items: center;
  flex-shrink: 0; padding: .35rem .5rem .35rem 0;
}

/* ── Right Panel: Chat ───────────────────────────────── */
.right-panel {
  flex: 1; min-width: 280px;
  display: flex; flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: .7rem .9rem;
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface);
}
.chat-input-area {
  display: flex; gap: .4rem; align-items: stretch;
  padding: .6rem .9rem;
  flex-shrink: 0;
  min-height: 80px;
  background: var(--surface);
}
.chat-input-area textarea {
  flex: 1; font-size: .88rem;
  font-family: inherit; line-height: 1.45;
  padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none; resize: none;
  background: var(--surface);
  transition: border-color .12s;
}
.chat-input-area textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.chat-input-area .btn { padding: .5rem 1rem; font-size: .84rem; align-self: flex-end; }

.chat-header-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.chat-access-button {
  border: 0; border-radius: 999px;
  padding: .15rem .5rem;
  background: var(--accent-light); color: var(--accent);
  font: inherit; font-size: .67rem; font-weight: 700;
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.chat-access-note {
  display: none;
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--border);
  background: #fff8df; color: #655112;
  font-size: .76rem; line-height: 1.4;
}
.chat-access-note.visible { display: block; }
.chat-access-note button {
  border: 0; padding: 0; background: none; color: var(--accent);
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
}

/* Research workspace */
.modal-workspace-content {
  width: min(1040px, 96vw);
  height: min(760px, 92vh);
}
.modal-subtitle { margin-top: .12rem; color: var(--text-dim); font-size: .75rem; }
.workspace-layout { display: flex; flex: 1; min-height: 0; }
.workspace-tabs {
  width: 190px; flex-shrink: 0;
  padding: .75rem .6rem;
  border-right: 1px solid var(--border);
  background: #f7f8fa;
  display: flex; flex-direction: column; gap: .2rem;
}
.workspace-tab {
  width: 100%; padding: .55rem .65rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--text-dim);
  text-align: left; font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer;
}
.workspace-tab:hover { color: var(--text); background: var(--surface); }
.workspace-tab.active {
  color: var(--accent); background: var(--accent-light); border-color: #c9d7ea;
}
.workspace-panels { flex: 1; min-width: 0; overflow: hidden; }
.workspace-panel {
  height: 100%; overflow-y: auto;
  padding: 1.1rem 1.25rem 1.5rem;
}
.workspace-panel h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.workspace-panel h3 { margin: 0; font-size: .9rem; }
.workspace-panel p { margin: .15rem 0; }
.workspace-lead { max-width: 64rem; color: var(--text-dim); font-size: .86rem; line-height: 1.55; }
.workspace-section-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: .75rem;
}
.workspace-section-heading p { color: var(--text-dim); font-size: .78rem; }
.workspace-form {
  margin-top: 1rem; padding: .85rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fafbfd;
}
.workspace-form h3 { margin-bottom: .65rem; }
.form-field { display: flex; flex-direction: column; gap: .28rem; min-width: 0; margin-bottom: .7rem; }
.form-field label, .workspace-form legend {
  color: var(--text); font-size: .78rem; font-weight: 650;
}
.form-field input, .form-field select, .form-field textarea,
.workspace-form > select, .secret-input-row input {
  width: 100%; min-width: 0;
  padding: .48rem .58rem;
  border: 1px solid #cfd5dc; border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: .84rem;
}
.form-field textarea { resize: vertical; line-height: 1.4; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.optional-label { color: var(--text-dim); font-size: .7rem; font-weight: 500; }
.form-help, .privacy-note { color: var(--text-dim); font-size: .73rem; line-height: 1.45; }
.privacy-note {
  margin-top: .25rem; padding: .48rem .58rem;
  border-left: 3px solid #7ca1ca; background: #edf4fb;
}
.development-notice {
  margin: .1rem 0 .75rem; padding: .5rem .6rem;
  border: 1px solid #ead59c; border-radius: var(--radius);
  background: #fff8df; color: #655112; font-size: .75rem;
}
.identity-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .75rem 0 1rem; padding: .8rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fafbfd;
}
.identity-name { font-size: .94rem; font-weight: 700; }
.identity-email { color: var(--text-dim); font-size: .78rem; }
.verified-badge {
  padding: .18rem .48rem; border-radius: 999px;
  border: 1px solid #a8d4b5; background: #edf8f0; color: #235b32;
  font-size: .68rem; font-weight: 700; white-space: nowrap;
}
.trial-card {
  margin-bottom: 1rem; padding: .85rem;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.trial-balance { margin: .6rem 0 .15rem; }
.trial-balance-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; }
.trial-meter {
  height: .55rem; margin-top: .32rem;
  overflow: hidden; border-radius: 999px; background: #e2e7ec;
}
.trial-meter span { display: block; width: 0; height: 100%; background: #2d7b49; transition: width .2s ease; }
.workspace-status { min-height: 1.25rem; margin-top: .55rem; font-size: .78rem; }
.workspace-status.status-error { color: #8a261b; }
.workspace-status.status-success { color: #25633a; }
.workspace-status.status-info { color: var(--text-dim); }
.account-policy-note {
  margin-top: .75rem; color: var(--text-dim); font-size: .72rem; line-height: 1.5;
}
.account-policy-note a { color: var(--accent); }
.signed-in-required {
  margin-top: .8rem; padding: .7rem .8rem;
  border: 1px solid #d5dbe2; border-radius: var(--radius);
  color: var(--text-dim); background: #f7f8fa; font-size: .82rem;
}
.project-create-form { margin-bottom: 1rem; }
.current-project-card {
  margin: .75rem 0 1rem; padding: .8rem;
  border: 1px solid #b4d5bd; border-radius: var(--radius);
  background: #f3faf5;
}
.current-project-card .project-card-actions { margin-top: .65rem; }
.project-list-heading, .config-block-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .85rem 0 .45rem;
}
.project-list-heading span { color: var(--text-dim); font-size: .72rem; }
.project-list, .credential-list { display: flex; flex-direction: column; gap: .5rem; }
.project-card, .credential-card {
  padding: .68rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.project-card-main, .credential-card-main {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
}
.project-card-name, .credential-card-name { font-size: .84rem; font-weight: 700; }
.project-card-description { margin-top: .16rem; color: var(--text-dim); font-size: .75rem; }
.project-card-meta, .credential-card-meta { margin-top: .22rem; color: var(--text-dim); font-size: .68rem; }
.project-card-actions, .credential-card-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.empty-list {
  padding: .85rem; border: 1px dashed #cbd2da; border-radius: var(--radius);
  color: var(--text-dim); text-align: center; font-size: .79rem;
}
.share-panel {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid #cfe0d3;
}
.share-url-row { display: flex; gap: .4rem; margin-top: .4rem; }
.share-url-row input { flex: 1; min-width: 0; }
.choice-card-group, .scope-fieldset { border: 0; padding: 0; margin: 0 0 .8rem; }
.choice-card-group legend, .scope-fieldset legend { margin-bottom: .4rem; }
.choice-card {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-bottom: .4rem; padding: .65rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.choice-card:has(input:checked) { border-color: #7b9fc8; background: #f1f6fc; }
.choice-card input { margin-top: .18rem; }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { font-size: .82rem; }
.choice-card small { margin-top: .15rem; color: var(--text-dim); font-size: .72rem; line-height: 1.4; }
.byok-settings { margin: .5rem 0 .8rem; }
.secret-input-row { display: flex; align-items: center; gap: .4rem; }
.secret-input-row input { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.scope-fieldset { display: flex; flex-direction: column; gap: .36rem; }
.scope-fieldset label { font-size: .78rem; }
.scope-fieldset input { margin-right: .35rem; }
.one-time-secret {
  margin: 1rem 0; padding: .8rem;
  border: 1px solid #d7bd6a; border-radius: var(--radius);
  background: #fff9e6;
}
.one-time-secret p { margin: .15rem 0 .55rem; color: #655112; font-size: .75rem; }
.config-block { margin-top: .65rem; }
.config-block-heading { margin-bottom: .25rem; font-size: .76rem; font-weight: 700; }
.config-block pre {
  max-height: 8rem; overflow: auto;
  padding: .6rem; border: 1px solid #d8d1b9; border-radius: var(--radius);
  background: #fffdf5; font-size: .72rem; white-space: pre-wrap; word-break: break-word;
}
.shared-view .btn-rule-modify,
.shared-view .facts-filter-bar .btn-primary,
.shared-view .rules-toolbar > .btn-primary { display: none !important; }

@media (max-width: 1050px) {
  .topbar { align-items: flex-start; flex-wrap: wrap; }
  .topbar-left, .topbar-right { width: 100%; }
  .topbar-right { overflow-x: auto; padding-bottom: .15rem; }
}

@media (max-width: 780px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .topbar { position: sticky; top: 0; z-index: 50; padding: .45rem .65rem; }
  .main-area { display: block; overflow: visible; }
  .left-panel { width: 100% !important; min-width: 0; overflow: visible; }
  .top-section { height: auto !important; min-height: 0; flex-direction: column; overflow: visible; }
  .conclusions-panel, .facts-panel, .rules-section, .right-panel {
    min-width: 0; width: 100%; overflow: visible;
  }
  .conclusions-list, .facts-list, .kb-content, .chat-messages { max-height: 55vh; overflow-y: auto; }
  .rules-section { min-height: 60vh; }
  .right-panel { min-height: 70vh; }
  .v-resize-handle, .h-resize-handle { display: none !important; }
  .conclusions-header-row, .facts-filter-bar, .rules-toolbar { flex-wrap: wrap; }
  .concl-filters, .kb-tabs { overflow-x: auto; max-width: 100%; }
  .modal-workspace-content { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .workspace-layout { flex-direction: column; }
  .workspace-tabs {
    width: 100%; padding: .45rem; border-right: 0; border-bottom: 1px solid var(--border);
    flex-direction: row; overflow-x: auto;
  }
  .workspace-tab { width: auto; white-space: nowrap; }
  .workspace-panel { padding: .9rem .75rem 1.2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 520px) {
  .scenario-name { max-width: 12rem; }
  .compact-switch, #aspic-btn { display: none; }
  .topbar-right {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible; gap: .35rem;
  }
  .topbar-right .scenario-select { grid-column: 1 / -1; width: 100%; max-width: none; }
  .topbar-right .btn { width: 100%; justify-content: center; }
  .service-links { grid-column: 1 / -1; justify-content: center; padding: .2rem 0; }
  .workspace-section-heading, .identity-card, .project-card-main, .credential-card-main {
    flex-direction: column; align-items: stretch;
  }
  .secret-input-row, .share-url-row { flex-wrap: wrap; }
  .secret-input-row input, .share-url-row input { flex-basis: 100%; }
}

/* Public research service policy pages */
body.policy-page {
  min-height: 100vh; height: auto; overflow: auto; display: block;
  background: #f5f7fa;
}
.policy-header {
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.policy-header-inner, .policy-main, .policy-footer {
  width: min(820px, calc(100% - 2rem)); margin: 0 auto;
}
.policy-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4rem;
}
.policy-brand { color: var(--accent); font-size: 1.05rem; font-weight: 750; text-decoration: none; }
.policy-nav { display: flex; flex-wrap: wrap; gap: .85rem; }
.policy-nav a { color: var(--text-dim); font-size: .82rem; }
.policy-main {
  margin-top: 2rem; margin-bottom: 2rem; padding: 2rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
}
.policy-main h1 { margin-bottom: .3rem; font-size: clamp(1.75rem, 4vw, 2.35rem); line-height: 1.2; }
.policy-updated { margin-bottom: 1.5rem; color: var(--text-dim); font-size: .82rem; }
.policy-main h2 { margin-top: 1.6rem; margin-bottom: .45rem; font-size: 1.08rem; }
.policy-main p, .policy-main li { color: #30384a; line-height: 1.65; }
.policy-main p + p { margin-top: .7rem; }
.policy-main ul { margin: .55rem 0 .2rem 1.35rem; }
.policy-main li + li { margin-top: .35rem; }
.policy-callout {
  margin: 1rem 0; padding: .8rem .9rem; border-left: 4px solid #7ca1ca;
  background: #edf4fb;
}
.policy-footer { padding: 0 0 2rem; color: var(--text-dim); font-size: .78rem; }
@media (max-width: 600px) {
  .policy-header-inner { align-items: flex-start; flex-direction: column; padding: .8rem 0; }
  .policy-main { margin-top: 1rem; padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Chat Messages ───────────────────────────────────── */
.chat-msg { font-size: .84rem; }
.chat-msg-system .chat-bubble,
.chat-msg-assistant .chat-bubble {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .75rem;
}
.chat-msg-user { text-align: right; }
.chat-msg-user .chat-bubble {
  background: var(--accent-light); border: 1px solid #c8d6ea;
  border-radius: var(--radius); padding: .4rem .7rem;
  display: inline-block; text-align: left; max-width: 85%;
  white-space: pre-wrap; word-wrap: break-word;
}
/* Markdown content inside assistant bubbles: tighten spacing. */
.chat-msg-assistant .chat-bubble > :first-child { margin-top: 0; }
.chat-msg-assistant .chat-bubble > :last-child { margin-bottom: 0; }
.chat-msg-assistant .chat-bubble-plain { white-space: pre-wrap; }
.chat-msg-assistant .chat-bubble p { margin: .35rem 0; line-height: 1.45; }
.chat-msg-assistant .chat-bubble ul,
.chat-msg-assistant .chat-bubble ol { margin: .35rem 0; padding-left: 1.4rem; }
.chat-msg-assistant .chat-bubble li { margin: .15rem 0; }
.chat-msg-assistant .chat-bubble code {
  background: var(--bg); border: 1px solid var(--border);
  padding: 0 .25rem; border-radius: 3px;
  font-size: .82rem;
}
.chat-msg-assistant .chat-bubble pre {
  background: var(--bg); border: 1px solid var(--border);
  padding: .5rem .65rem; border-radius: var(--radius);
  overflow-x: auto; margin: .4rem 0;
}
.chat-msg-assistant .chat-bubble pre code {
  background: none; border: none; padding: 0;
}
.chat-msg-assistant .chat-bubble blockquote {
  margin: .4rem 0; padding: 0 .7rem;
  border-left: 3px solid var(--border); color: var(--text-dim);
}
.chat-msg-assistant .chat-bubble h1,
.chat-msg-assistant .chat-bubble h2,
.chat-msg-assistant .chat-bubble h3 {
  margin: .5rem 0 .3rem; font-size: .92rem; font-weight: 700;
}
.chat-response-meta {
  margin-top: .45rem; padding-top: .35rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: .66rem;
}
/* Typing indicator (three bouncing dots) shown while a request is in flight. */
.chat-msg-loading .chat-bubble {
  display: inline-flex; gap: .25rem; align-items: center;
  padding: .55rem .7rem;
}
.chat-dot {
  display: inline-block;
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--text-dim);
  animation: chat-dot-bounce 1.1s infinite ease-in-out;
}
.chat-dot:nth-child(2) { animation-delay: .15s; }
.chat-dot:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot-bounce {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}
/* Empty-state placeholder shown when chatMessages is empty. */
.chat-empty {
  color: var(--text-dim); font-size: .82rem;
  padding: .4rem .2rem; line-height: 1.5;
}
.chat-empty .rule-info-demo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem;
  font-size: .62rem; font-weight: 700;
  color: var(--text-dim); background: var(--bg);
  border: 1px solid var(--border); border-radius: 50%;
  vertical-align: middle;
}

/* LLM mode: the `?` buttons become clickable (they prefill chat). Without
   LLM mode, they remain pure tooltips (cursor: help set on .rule-info). */
body:not(.llm-disabled) .rule-info { cursor: pointer; }
body.llm-disabled .rule-info { display: none; }

/* ── Modals ──────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-backdrop.visible { display: flex; }
.modal-content {
  background: var(--surface);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow-lg);
  max-height: 85vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-game-content { width: 75vw; max-width: 900px; }
.modal-af-content { width: 90vw; max-width: 1400px; }
.modal-fact-content { width: 550px; max-width: 90vw; }
.modal-rule-content { width: 600px; max-width: 90vw; }
.modal-prefs-content { width: 500px; max-width: 90vw; }
.modal-aspic-content { width: 70vw; max-width: 900px; }
.modal-edit-content { width: 640px; max-width: 92vw; }
.modal-save-content { width: 480px; max-width: 92vw; }
.modal-save-collision-content { width: 440px; max-width: 92vw; }
.modal-suspend-impact-content { width: 520px; max-width: 92vw; }

/* ── Suspend-impact preview modal ────────────────────── */
.modal-suspend-impact-content .modal-body { padding: .9rem 1rem .4rem; }
.suspend-impact-summary {
  font-size: .88rem;
  margin-bottom: .8rem;
  padding: .5rem .6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.suspend-impact-summary strong { font-weight: 600; }
.suspend-impact-section-label {
  font-size: .78rem; font-weight: 600;
  color: var(--text-dim);
  margin-bottom: .35rem;
}
.suspend-impact-list {
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 40vh; overflow-y: auto;
}
.suspend-impact-item {
  padding: .4rem .55rem;
  font-size: .84rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.suspend-impact-item-text { display: block; margin-bottom: .25rem; }
.suspend-impact-transition {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem;
}
.suspend-impact-empty {
  font-size: .84rem; color: var(--text-dim);
  padding: .4rem 0; font-style: italic;
}

/* ── Save-as-new-scenario modal ──────────────────────── */
.modal-save-content .modal-body { padding: .9rem 1rem .3rem; }
.save-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.save-field label { font-size: .82rem; font-weight: 600; color: var(--text); }
.save-field input {
  font-family: inherit; font-size: .88rem;
  padding: .5rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none; background: var(--surface); color: var(--text);
}
.save-field input:focus { border-color: var(--accent); }
.save-hint { font-size: .74rem; color: var(--text-dim); }
.save-status { min-height: 1.2em; font-size: .84rem; margin-top: .2rem; }
.save-status-info { color: var(--text-dim); }
.save-status-error {
  color: #b5341a;
  background: #fdecea; border: 1px solid #f5c2ba;
  padding: .4rem .6rem; border-radius: var(--radius);
}
.save-overwrite-field { margin-top: .4rem; }
.save-overwrite-label {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 500; font-size: .86rem; cursor: pointer;
}
.save-overwrite-label input[type="checkbox"] { margin: 0; }
.save-field input:disabled { background: var(--bg); color: var(--text-dim); }

/* ── Edit modal (Proposer / Reviewer) ────────────────── */
.modal-edit-content .modal-body { padding: .9rem 1rem .6rem; }
.edit-instruction-wrap { display: flex; flex-direction: column; gap: .3rem; }
.edit-instruction-wrap label {
  font-size: .82rem; font-weight: 600; color: var(--text);
}
#edit-instruction {
  font-family: inherit; font-size: .88rem; line-height: 1.45;
  padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none; resize: vertical; min-height: 80px;
  background: var(--surface);
}
#edit-instruction:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}
.edit-hint {
  font-size: .74rem; color: var(--text-dim);
}
.edit-hint kbd {
  font-family: ui-monospace, monospace; font-size: .72rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; padding: 0 .3rem;
}
.edit-status { margin-top: .6rem; min-height: 1.2em; }
.edit-status-loading {
  color: var(--text-dim); font-size: .84rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.edit-loading-dots {
  display: inline-flex; gap: .25rem; align-items: center;
}
.edit-status-error {
  color: #b5341a; font-size: .84rem;
  background: #fdecea; border: 1px solid #f5c2ba;
  padding: .4rem .6rem; border-radius: var(--radius);
}
.edit-status-ok {
  color: #1a6a3a; font-size: .78rem;
}
.edit-preview { margin-top: .55rem; }
.edit-prop-heading {
  font-size: .78rem; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: .2rem;
}
.edit-prop-heading.edit-prop-promote {
  color: #1a6a3a;
}
.edit-prop-promote-ref {
  margin: .15rem 0 .35rem;
  font-size: .82rem;
  color: var(--text-dim);
}
.edit-prop-promote-ref em {
  color: var(--text); font-style: normal; font-weight: 500;
}
.edit-prop-body {
  font-size: .92rem; line-height: 1.5;
  padding: .65rem .8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.edit-prop-body .kw { color: var(--text-dim); font-weight: 600; }
.edit-prop-body .inline-id { color: var(--text-dim); font-size: .82rem; }
/* ASPIC- view below the NL preview: compact, monospaced, same colour
   palette as the Show ASPIC- modal so the syntax reads identically. */
.edit-prop-aspic-label {
  margin-top: .5rem;
  font-size: .72rem; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.edit-prop-aspic {
  margin: .25rem 0 0;
  padding: .5rem .65rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text);
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-x: auto;
}
.edit-prop-meta {
  margin-top: .35rem; font-size: .76rem; color: var(--text-dim);
}
.edit-issues-heading {
  margin-top: .7rem; font-size: .78rem; color: var(--text-dim);
  font-weight: 600;
}
.edit-issues {
  margin: .3rem 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .3rem;
}
.edit-issue {
  display: flex; gap: .45rem; align-items: flex-start;
  font-size: .82rem; line-height: 1.4;
  padding: .4rem .55rem;
  border-radius: var(--radius);
}
.edit-issue-icon { flex-shrink: 0; }
.edit-issue-blocker { background: #fdecea; border: 1px solid #f5c2ba; color: #7a1a10; }
.edit-issue-warning { background: #fef5e5; border: 1px solid #f3d48a; color: #6e4a10; }
.edit-issue-note    { background: #eef3f8; border: 1px solid #c9d8e8; color: #2a4a6a; }

.modal-footer {
  padding: .6rem 1rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: .45rem;
}

/* Modify button on rule cards -- inherits .btn .btn-small styling. */
.btn-rule-modify { flex-shrink: 0; }

/* ── Show ASPIC- modal ────────────────────────────────── */
.aspic-header-actions { display: flex; align-items: center; gap: .45rem; }
.aspic-pre {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text);
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
}
.aspic-comment { color: #8a8f98; font-style: italic; }
.aspic-arrow { color: #0b67d0; font-weight: 600; }
.aspic-name { color: #0a7a40; }
.aspic-negation { color: #b5341a; font-weight: 600; }
#aspic-copy-btn.copied { background: var(--accent); color: #fff; border-color: var(--accent); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-weight: 600; font-size: .92rem; }
.modal-close {
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  background: none; border: none; color: var(--text-dim);
  padding: .2rem .4rem; border-radius: var(--radius);
}
.modal-close:hover { background: var(--bg); }
.modal-body { padding: 1rem; overflow-y: auto; flex: 1; }

/* ── View AF: button in conclusions header ─────────────── */
.conclusions-title {
  display: inline-flex; align-items: center; gap: .45rem;
}
.btn-view-af {
  font-size: .7rem;
  font-weight: 500;
  padding: .15rem .5rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ── View AF modal ──────────────────────────────────────── */
.af-legend {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35rem .75rem;
  font-size: .78rem;
  color: var(--text-dim);
  padding: .35rem .5rem .7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
}
.af-legend .af-swatch {
  display: inline-block;
  width: .85rem; height: .85rem;
  border-radius: 3px;
  margin-right: .1rem;
  vertical-align: middle;
}
.af-legend .af-edge-sample {
  display: inline-flex; align-items: center;
  margin-right: .1rem;
}
.af-legend .af-legend-sep {
  width: 1px; height: 1rem;
  background: var(--border);
  margin: 0 .25rem;
}
.af-legend .af-legend-ucnode {
  display: inline-flex; align-items: center;
  margin-right: .1rem;
}
.af-legend .af-ucnode-sample {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .7rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border: 1px solid #203040;
  border-radius: 4px;
  background: #2d5aa0;
  color: #fff;
  letter-spacing: .01em;
}
.af-legend .af-ucnode-sample .af-ucnode-x {
  font-size: .95rem;
  font-weight: 800;
  margin-right: .08rem;
}
.af-legend .af-legend-note {
  color: var(--text-dim); font-style: italic;
  flex-basis: 100%;
  font-size: .72rem;
  margin-top: .3rem;
}
.af-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0 .3rem .4rem;
}
.af-scope-control {
  display: flex; align-items: center; gap: .3rem;
}
.af-control-label {
  font-size: .72rem; color: var(--text-dim);
}
.af-scope-btn {
  font-size: .7rem; font-weight: 500;
  padding: .2rem .55rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .12s;
}
.af-scope-btn:hover:not(.active) {
  background: var(--bg); color: var(--text);
}
.af-scope-btn.active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent-light);
  font-weight: 600;
}
.af-zoom-controls {
  display: flex; align-items: center; gap: .3rem;
}
.af-zoom-controls .btn {
  padding: .15rem .5rem;
  font-size: .78rem;
  min-width: 2.1rem;
  justify-content: center;
}
.af-zoom-readout {
  font-size: .72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-left: .25rem;
}

.af-svg-scroll {
  overflow: auto;
  /* Fixed height so the scroll viewport doesn't collapse when the user
     zooms out (SVG shrinks within the container rather than pulling the
     modal in with it). Scrollbars appear when the SVG is larger. */
  height: 68vh;
  width: 100%;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem;
}
.af-svg-scroll svg {
  display: block;
  /* Centre small diagrams horizontally in the scroll area. */
  margin: 0 auto;
}
.af-svg-scroll g[data-af-rule] rect {
  transition: filter .12s;
}
.af-svg-scroll g[data-af-rule]:hover rect {
  filter: brightness(1.08);
}
.af-svg-scroll g.af-node {
  cursor: default;
}

.af-tooltip {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  padding: .5rem .65rem;
  font-size: .8rem;
  line-height: 1.4;
  max-width: 320px;
  pointer-events: none;
  z-index: 10000;
}
.af-tooltip-claim {
  font-weight: 500;
  color: var(--text);
  margin-bottom: .3rem;
}
.af-tooltip-meta {
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem;
}
.af-tooltip-status {
  display: inline-block;
  padding: .08rem .4rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.af-tooltip-status.status-accepted  { background: #dce8f7; color: #1d4f8c; border: 1px solid #3a7ad0; }
.af-tooltip-status.status-rejected  { background: #fae5cf; color: #7a3f10; border: 1px solid #e08a3a; }
.af-tooltip-status.status-undecided { background: #fbf1c8; color: #5a4500; border: 1px solid #c0a93a; }
.af-tooltip-argid {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-weight: 700;
  color: var(--text);
}

/* ── Game view: main flex layout with minimap sidebar ── */
.game-main {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.game-main-left { flex: 1; min-width: 0; }
.game-main-right { flex-shrink: 0; position: sticky; top: 0; }

.game-minimap {
  padding: .45rem .5rem .5rem;
  background: #f6f7f9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 70vh;
  overflow: auto;
}
.game-minimap-header {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: .35rem;
}
.game-minimap svg { display: block; }
.game-minimap circle {
  transition: r .1s, filter .12s;
}
.game-minimap circle:hover {
  filter: brightness(1.12);
}

/* ── Game tree: inline collapse caret in topbar ───────── */
.game-node-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.game-topbar-caret {
  font-size: .68rem; font-weight: 600; line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: .15rem .45rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.game-topbar-caret:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.6);
}
.game-node-focus {
  flex: 1;
  min-height: 24px;
  padding: .1rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

/* ── Game rationale banner (rejected-via-strict) ──────── */
.game-rationale {
  background: var(--accent-light);
  border: 1px solid #c8d6ea;
  border-radius: var(--radius);
  padding: .55rem .75rem;
  margin-bottom: .8rem;
  font-size: .85rem;
  line-height: 1.5;
}
.game-rationale p { margin: 0; }
.game-rationale p + p { margin-top: .35rem; }
.game-rationale strong { color: var(--tag-rejected); }

/* ── Preference-suppressed counter-attackers block ─────── */
.game-pref-disclosure {
  margin-top: .5rem;
  padding: .4rem .6rem;
  background: var(--accent-light);
  border: 1px solid #c8d6ea;
  border-radius: var(--radius);
  font-size: .78rem;
  line-height: 1.5;
}
.game-pref-lead {
  color: var(--text);
  margin-bottom: .25rem;
}
.game-pref-list {
  list-style: disc;
  margin: 0 0 0 1.2rem;
  color: var(--text-dim);
}
.game-pref-list li { margin-bottom: .15rem; }
.game-pref-list .kw { font-weight: 700; color: #4a4a5a; }

/* ── Game Explorer ────────────────────────────────────── */
.game-tree {
  margin-bottom: .8rem;
}
.game-node {
  margin-bottom: .4rem;
}
.game-node-inner {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .12s;
}
.game-node-active > .game-node-inner {
  position: relative;
  z-index: 1;
  /* The inner card is followed by sibling panels (.game-supports,
     .game-node-res-reason, .game-children) that paint over the bottom
     of an outside box-shadow. A fresh stacking context here lifts the
     shadow above those siblings so the ring is visible on all sides. */
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-light);
}
/* Resolved nodes keep their status badge and (for undec/cycle) the
   dashed border to signal label; no opacity dim -- the dim read as
   "disabled" and obscured rejected/accepted text even when the verdict
   was what the user came to see. */
.game-node-undecided > .game-node-inner { border-style: dashed; }
.game-node-cycle > .game-node-inner { border-style: dashed; }
.game-node-topbar {
  padding: .25rem .6rem;
  font-size: .7rem; font-weight: 600;
  color: #fff;
}
.game-bar-htb { background: #5a7a8a; }
.game-bar-cb { background: #8a7050; }
.game-bar-concede { background: var(--tag-accepted); }
.game-bar-retract { background: var(--tag-rejected); }
.game-bar-cycle { background: var(--tag-undecided-bg); color: var(--tag-undecided); }
.game-node-content {
  padding: .35rem .6rem;
}
.game-node-claim {
  font-size: .84rem; font-weight: 500;
}
.game-node-rule {
  font-size: .76rem; color: var(--text-dim);
  margin-top: .2rem; line-height: 1.4;
}
.game-node-rule .kw {
  font-weight: 700; color: #4a4a5a;
}
.game-node-detail {
  font-size: .76rem; color: var(--text-dim);
  margin-top: .15rem; font-style: italic;
}
.game-node-id {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: .7rem; font-weight: 600; color: var(--text-dim);
}
.game-node-dim { color: var(--text-dim); font-size: .78rem; }
.game-node-status {
  display: flex; justify-content: flex-end;
  padding: .2rem .6rem .3rem;
}
.game-node-res-reason {
  font-size: .72rem; font-style: italic; color: var(--text-dim);
  padding: .1rem .6rem .3rem;
}
.game-children {
  padding-left: 1.5rem;
  position: relative;
}
/* Tree connector lines */
.game-children::before {
  content: '';
  position: absolute;
  left: .6rem; top: 0; bottom: .7rem;
  width: 1.5px;
  background: #aab0b8;
}
.game-children > .game-node,
.game-children > .game-resolution-text {
  position: relative;
}
.game-children > .game-node::before,
.game-children > .game-resolution-text::before {
  content: '';
  position: absolute;
  left: -.9rem; top: .9rem;
  width: .7rem; height: 1.5px;
  background: #aab0b8;
}


/* ── Game Supports (collapsible sub-arguments) ───────── */
.game-supports {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.game-supports-toggle {
  display: block;
  width: 100%;
  padding: .25rem .6rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  font-size: .72rem; font-weight: 600; color: var(--text-dim);
  cursor: pointer; user-select: none;
  transition: color .12s;
}
.game-supports-toggle:hover { color: var(--accent); }
.game-supports-arrow {
  font-size: .6rem; margin-right: .2rem;
}
.game-supports-list {
  padding: .2rem .6rem .4rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.game-support-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .3rem .5rem;
  font-size: .76rem; line-height: 1.45;
}
.game-support-label {
  font-weight: 600; color: var(--text);
  margin-bottom: .15rem;
}
.game-support-rules {
  color: var(--text-dim);
}
.game-support-rules .kw { font-weight: 700; color: #4a4a5a; }
.game-support-facts {
  font-size: .72rem; color: var(--text-dim);
  margin-top: .25rem; padding-top: .2rem;
  border-top: 1px dashed var(--border);
  line-height: 1.5;
}

/* ── Game Attack Info (on CB nodes) ──────────────────── */
.game-attack-info {
  font-size: .74rem; color: var(--accent);
  font-weight: 600; margin-bottom: .25rem;
  padding: .15rem .3rem;
  background: var(--accent-light);
  border-radius: calc(var(--radius) / 2);
}
.game-attack-type {
  font-weight: 400; color: var(--text-dim);
}

/* ── Game Moves Panel ────────────────────────────────── */
.game-moves {
  border-top: 1px solid var(--border);
  padding-top: .6rem;
}
.game-moves-header {
  font-size: .76rem; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .4rem;
}
.game-moves-empty {
  font-size: .82rem; color: var(--text-dim);
  padding: .3rem 0;
}
.game-move-card {
  width: 100%;
  padding: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: .3rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s;
}
.game-move-card:hover {
  box-shadow: var(--shadow-lg); border-color: var(--accent);
}
.game-move-type {
  width: 12rem; flex-shrink: 0;
  display: flex; align-items: center;
  padding: .35rem .5rem;
  font-size: .68rem; font-weight: 600;
  color: #fff;
}
.game-move-label {
  display: block;
  flex: 1; padding: .35rem .5rem;
  font-size: .82rem;
}
.game-other-branches {
  border-top: 1px solid var(--border);
  margin-top: .5rem; padding-top: .4rem;
}
.game-move-other {
  background: #f7f8fa;
  border-style: dashed;
}

/* ── Preferences / Conflicts View ─────────────────────── */
.pref-conflict-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  margin-bottom: .6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pref-conflict-question {
  font-size: .88rem; font-weight: 600;
  margin-bottom: .5rem; color: var(--text);
}
.pref-conflict-sides {
  display: flex; gap: .5rem; align-items: stretch;
  margin-bottom: .5rem;
}
.pref-side {
  flex: 1; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .4rem .5rem;
  transition: border-color .12s, background .12s;
}
/* .pref-side-stronger used to colour the winning side in the Conflicts
   view; removed because the radio-button selection already indicates
   which rule is stronger and the card-level tint was visually noisy. */
.pref-side-label {
  font-size: .76rem; font-weight: 600; color: var(--text);
  margin-bottom: .3rem;
}
.pref-rule {
  font-size: .74rem; color: var(--text-dim);
  margin-bottom: .2rem; line-height: 1.4;
}
.pref-rule .kw { font-weight: 700; color: #4a4a5a; }
.pref-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600; color: var(--text-dim);
  flex-shrink: 0; padding: 0 .2rem;
}
.pref-control {
  display: flex; gap: .8rem; align-items: center;
  padding: .4rem .3rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: .4rem;
}
.pref-option {
  display: flex; align-items: center; gap: .25rem;
  font-size: .74rem; color: var(--text);
  cursor: pointer;
}
.pref-option input[type="radio"] {
  accent-color: var(--accent);
}
.pref-note {
  font-size: .72rem; color: var(--text-dim);
  font-style: italic; line-height: 1.4;
}

/* ── Fact Impact Items ────────────────────────────────── */
.fact-impact-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .35rem .5rem;
  font-size: .82rem;
}

/* ── Chat Action Cards (Modify / New Rule) ───────────── */
.chat-action-card {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-action-header {
  font-size: .8rem; font-weight: 600;
  padding: .35rem .6rem;
  background: var(--accent-light); color: var(--accent);
}
.chat-action-current,
.chat-action-original,
.chat-action-revised,
.chat-action-change,
.chat-action-details,
.chat-action-impact {
  padding: .3rem .6rem;
  font-size: .8rem; line-height: 1.45;
}
.chat-action-current { border-bottom: 1px solid var(--border); }
.chat-action-diff {
  border-bottom: 1px solid var(--border);
}
.chat-action-original {
  color: var(--text-dim);
}
.chat-action-revised {
  background: #f8f8f0;
}
.chat-action-change {
  font-size: .76rem; color: var(--accent);
  border-bottom: 1px solid var(--border);
}
.chat-action-details {
  font-size: .78rem;
  border-bottom: 1px solid var(--border);
}
.chat-action-impact {
  font-size: .78rem; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.chat-action-input {
  padding: .4rem .6rem;
}
.chat-action-textarea {
  width: 100%; font-size: .84rem;
  font-family: inherit; line-height: 1.4;
  padding: .4rem .5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none; resize: vertical;
}
.chat-action-textarea:focus {
  border-color: var(--accent);
}
.chat-action-buttons {
  padding: .4rem .6rem;
  display: flex; gap: .3rem;
}
.chat-action-card .kw { font-weight: 700; color: #4a4a5a; }

/* ── Placeholder ─────────────────────────────────────── */
.placeholder-msg {
  text-align: center; color: var(--text-dim);
  padding: 2rem; font-size: .85rem;
}