/* ============================================================================
   /apologetics/cat.css — CAT Design System ("Editorial War Room")
   Self-contained (no external CSS imports). Depends on /shared/tokens.css + hub-chrome.css.
   - New design system scoped to body[data-tool="apologetics"] (plus a few
     global primitives such as .cat-icon / .sr-only / toast root).
   - Legacy compatibility classes are preserved at the end of the file so
     not-yet-migrated modules keep rendering correctly.
   All custom properties carry fallbacks, e.g. var(--ink, #1c1c1e).
   ========================================================================== */

/* ==========================================================================
   1. SEMANTIC TOKENS
   ========================================================================== */
body[data-tool="apologetics"]{
  /* CAT role colors */
  --cat-apostolic: var(--accent, #7a1f2b);
  --cat-opponent: #5b6b84;
  --cat-evidence: var(--ok, #1a8f4a);
  --cat-objection: var(--warn, #b45309);
  --cat-rebuttal: #2f7d78;
  --cat-review: #6b5ca5;
  --cat-ink-quiet: var(--ink-3, #71717a);

  /* Neutral aliases used by the CAT layer */
  --cat-bg: var(--bg, #fafafa);
  --cat-surface: var(--surface, #fff);
  --cat-surface-2: var(--surface-2, #f4f4f5);
  --cat-border: var(--border, #e4e4e7);
  --cat-border-strong: var(--border-strong, #d4d4d8);
  --cat-ink: var(--ink, #27272a);
  --cat-ink-2: var(--ink-2, #52525b);

  /* Typography */
  --cat-serif: 'EB Garamond', 'Iowan Old Style', Georgia, var(--font-serif, serif);
  --cat-ui: var(--font-sans, 'Inter', system-ui, sans-serif);
  --cat-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --cat-scripture: var(--font-scripture, 'EB Garamond', Georgia, serif);

  /* Metrics */
  --cat-rail-w: 240px;
  --cat-rail-w-compact: 72px;
  --cat-inspector-w: 360px;
  --cat-read-max: 1120px;
  --cat-gap: var(--s-4, 16px);
  --cat-row: 40px;
  --cat-ease: var(--ease, cubic-bezier(.2,.7,.3,1));
  --cat-ease-out: var(--ease-out, cubic-bezier(0,.6,.2,1));
  --cat-dur: var(--dur-2, 180ms);
  --cat-dur-fast: var(--dur-1, 100ms);
  --cat-shadow-1: var(--shadow-1, 0 1px 3px rgba(0,0,0,.06));
  --cat-shadow-2: var(--shadow-2, 0 4px 14px rgba(0,0,0,.08));
  --cat-shadow-3: var(--shadow-3, 0 14px 36px rgba(0,0,0,.12));
  --cat-focus: var(--focus, 0 0 0 3px rgba(122,31,43,.18));
  --cat-doc: var(--cat-apostolic);
}

/* Dark mode — support both `body.theme-dark` and `:root[data-theme="dark"]`
   and the early-paint `html[data-theme-early="dark"]` attribute. */
body[data-tool="apologetics"].theme-dark,
:root[data-theme="dark"] body[data-tool="apologetics"],
html[data-theme-early="dark"] body[data-tool="apologetics"]{
  --cat-opponent: #93a4bd;
  --cat-rebuttal: #4fb3ac;
  --cat-review: #a293e0;
  --cat-apostolic: var(--accent, #a83243);
}

/* Per-doctrine accent variables (used by chips, dots, rails). */
.cat-doc-trinitarian{ --cat-doc: #4a7bc8; }
.cat-doc-islam       { --cat-doc: #2a7a50; }
.cat-doc-judaism     { --cat-doc: #8a6830; }
.cat-doc-jw          { --cat-doc: #6060a0; }
.cat-doc-mormon      { --cat-doc: #7050a0; }
.cat-doc-calvinist   { --cat-doc: #3a5a7a; }
.cat-doc-catholic    { --cat-doc: #8a3030; }

/* ==========================================================================
   2. BASE / TYPOGRAPHY PRIMITIVES
   ========================================================================== */
.cat-icon{ display:inline-block; vertical-align:middle; flex:0 0 auto; }
.cat-icon-glyph{
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-style:normal; line-height:1; text-align:center;
}
.cat-eyebrow,
.cat-section-label{
  display:block;
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:var(--t-xs, .72rem);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--cat-ink-quiet, #71717a);
  margin:0 0 var(--s-2,8px);
}
.cat-display{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-4xl, 2.25rem);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--cat-ink, #27272a);
  margin:0 0 var(--s-3,12px);
}
.cat-section-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-xl, 1.25rem);
  font-weight:600;
  color:var(--cat-ink, #27272a);
  margin:var(--s-5,20px) 0 var(--s-3,12px);
}
.cat-caption{
  font-size:var(--t-xs,.72rem);
  color:var(--cat-ink-quiet,#71717a);
}
.cat-mono{
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.78em; letter-spacing:.04em; text-transform:uppercase;
}
.cat-scripture{
  font-family:var(--cat-scripture, Georgia, serif);
  line-height:1.7;
  color:var(--cat-ink,#27272a);
}
.cat-scripture .vnum{
  font-family:var(--cat-ui, sans-serif);
  font-size:.7em; font-weight:700; color:var(--cat-apostolic);
  vertical-align:super; margin-right:3px;
}
.cat-sr-only,
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.cat-skip-link{
  position:absolute; left:8px; top:-48px; z-index:10000;
  padding:10px 14px; border-radius:var(--r-sm,6px);
  background:var(--cat-apostolic); color:#fff; font-weight:600;
  font-size:var(--t-sm,.8125rem); text-decoration:none;
  transition:top var(--cat-dur-fast,100ms) var(--cat-ease);
}
.cat-skip-link:focus{ top:8px; }

/* ==========================================================================
   3. LAYOUT SHELL
   ========================================================================== */
.cat-shell{
  display:grid;
  grid-template-columns:var(--cat-rail-w,240px) minmax(0,1fr);
  min-height:0;
  height:calc(100vh - var(--topbar-h,60px));      /* fallback */
  height:calc(100dvh - var(--topbar-h,60px));
  background:var(--cat-bg,#fafafa);
  overflow:hidden;
}
.cat-shell.has-inspector{
  grid-template-columns:var(--cat-rail-w,240px) minmax(0,1fr) var(--cat-inspector-w,360px);
}
.cat-rail{
  display:flex; flex-direction:column; gap:2px;
  min-width:0; overflow-y:auto; overflow-x:hidden;
  padding:var(--s-3,12px) var(--s-2,8px);
  padding-bottom:calc(var(--s-3,12px) + env(safe-area-inset-bottom,0px));
  background:var(--cat-surface,#fff);
  border-right:1px solid var(--cat-border,#e4e4e7);
  scrollbar-width:thin; scrollbar-color:var(--cat-border) transparent;
}
.cat-rail-group{ display:flex; flex-direction:column; gap:2px; margin-bottom:var(--s-3,12px); }
.cat-rail-group-title{
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.64rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cat-ink-quiet,#71717a);
  padding:var(--s-2,8px) var(--s-3,12px) var(--s-1,4px);
}
.cat-rail-btn{
  display:flex; align-items:center; gap:var(--s-3,12px);
  width:100%; min-height:var(--cat-row,40px);
  padding:8px var(--s-3,12px);
  border:1px solid transparent; border-radius:var(--r-md,10px);
  background:transparent; color:var(--cat-ink-2,#52525b);
  font-family:var(--cat-ui, sans-serif); font-size:var(--t-sm,.8125rem);
  font-weight:500; text-align:left; text-decoration:none; cursor:pointer;
  transition:background var(--cat-dur-fast,100ms), color var(--cat-dur-fast,100ms),
             border-color var(--cat-dur-fast,100ms);
}
.cat-rail-btn:hover{ background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink,#27272a); }
.cat-rail-btn.active,
.cat-rail-btn[aria-current="page"]{
  background:var(--accent-tint, rgba(122,31,43,.08));
  color:var(--cat-apostolic);
  border-color:transparent;
}
.cat-rail-btn.active::before,
.cat-rail-btn[aria-current="page"]::before{
  content:""; position:absolute; left:0; width:3px; top:6px; bottom:6px;
  border-radius:0 3px 3px 0; background:var(--cat-apostolic);
}
.cat-rail-btn{ position:relative; }
.cat-rail-btn .cat-rail-icon,
.cat-rail-btn .cat-icon{ color:inherit; flex:0 0 auto; }
.cat-rail-btn .cat-rail-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-rail-btn .cat-rail-badge{
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  padding:2px 6px; border-radius:var(--r-pill,999px);
  background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink-quiet,#71717a);
}
.cat-rail-foot{
  margin-top:auto; padding-top:var(--s-3,12px);
  border-top:1px solid var(--cat-border,#e4e4e7);
  display:flex; flex-direction:column; gap:var(--s-2,8px);
}
.cat-workspace{
  min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:var(--s-6,24px);
  padding-bottom:calc(var(--s-8,32px) + env(safe-area-inset-bottom,0px));
  scrollbar-width:thin; scrollbar-color:var(--cat-border) transparent;
}
.cat-workspace-inner{ max-width:var(--cat-read-max,1120px); margin:0 auto; width:100%; }
.cat-panel-head{
  display:flex; flex-direction:column; gap:var(--s-2,8px);
  margin-bottom:var(--s-5,20px);
  padding-bottom:var(--s-4,16px);
  border-bottom:1px solid var(--cat-border,#e4e4e7);
}
.cat-panel-head-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-4,16px); flex-wrap:wrap;
}
.cat-panel-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-3xl, 1.875rem);
  line-height:1.1; font-weight:600; letter-spacing:-.01em;
  color:var(--cat-ink,#27272a);
  margin:0;
}
.cat-panel-desc{
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-sm,.8125rem);
  line-height:1.55; color:var(--cat-ink-quiet,#71717a);
  margin:0; max-width:62ch;
}
.cat-panel-actions{ display:flex; align-items:center; gap:var(--s-2,8px); flex-wrap:wrap; }
.cat-panel-body{ display:block; }
.cat-panel-body > * + *{ margin-top:var(--s-4,16px); }

.cat-inspector{
  min-width:0; min-height:0; overflow-y:auto;
  padding:var(--s-5,20px);
  background:var(--cat-surface,#fff);
  border-left:1px solid var(--cat-border,#e4e4e7);
  scrollbar-width:thin; scrollbar-color:var(--cat-border) transparent;
}
.cat-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-5,20px); align-items:start;
}
.cat-split.side-1-2{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.cat-split.side-2-1{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.cat-toolbar{
  display:flex; align-items:center; gap:var(--s-2,8px); flex-wrap:wrap;
  padding:var(--s-2,8px) 0;
}
.cat-toolbar .cat-spacer{ flex:1; }
.cat-toolbar.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }

/* Compact mobile header + horizontal grouped tabs */
.cat-topbar-compact{ display:none; }
.cat-mobile-tabs{
  display:none;
  gap:var(--s-2,8px);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:var(--s-2,8px) var(--s-3,12px);
  border-bottom:1px solid var(--cat-border,#e4e4e7);
  background:var(--cat-surface,#fff);
  scrollbar-width:none;
}
.cat-mobile-tabs::-webkit-scrollbar{ display:none; }
.cat-mobile-tabs .cat-rail-btn{
  width:auto; min-width:max-content; flex:0 0 auto;
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:var(--r-pill,999px);
}
.cat-mobile-tabs .cat-rail-btn.active{ background:var(--cat-apostolic); color:#fff; border-color:var(--cat-apostolic); }
.cat-mobile-tabs .cat-rail-btn.active::before{ display:none; }

/* ==========================================================================
   4. CONTROLS
   ========================================================================== */
.cat-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--cat-row,40px);
  padding:9px 16px;
  border:1px solid transparent; border-radius:var(--r-md,10px);
  background:var(--cat-apostolic); color:#fff;
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-sm,.8125rem); font-weight:600; letter-spacing:.01em;
  line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--cat-dur-fast,100ms), border-color var(--cat-dur-fast,100ms),
             color var(--cat-dur-fast,100ms), box-shadow var(--cat-dur-fast,100ms);
}
.cat-btn:hover{ background:var(--accent-hover, #661820); }
.cat-btn:active{ transform:translateY(1px); }
.cat-btn:disabled,
.cat-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; }
.cat-btn-primary{ background:var(--cat-apostolic); color:#fff; }
.cat-btn-primary:hover{ background:var(--accent-hover,#661820); }
.cat-btn-accent{ background:var(--cat-apostolic); color:#fff; }
.cat-btn-ghost{
  background:transparent; color:var(--cat-ink-2,#52525b);
  border-color:var(--cat-border,#e4e4e7);
}
.cat-btn-ghost:hover{ background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink,#27272a); }
.cat-btn-subtle{ background:transparent; color:var(--cat-ink-2,#52525b); border-color:transparent; }
.cat-btn-subtle:hover{ background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink,#27272a); }
.cat-btn-danger{
  background:transparent; color:var(--danger,#b3261e);
  border-color:color-mix(in srgb, var(--danger,#b3261e) 35%, transparent);
}
.cat-btn-danger:hover{ background:var(--danger-soft, rgba(179,38,30,.12)); }
.cat-btn-danger.cat-btn-solid{ background:var(--danger,#b3261e); color:#fff; }
.cat-btn-sm{ min-height:30px; padding:5px 11px; font-size:var(--t-xs,.72rem); border-radius:var(--r-sm,6px); }
.cat-btn-lg{ min-height:48px; padding:13px 22px; font-size:var(--t-md,.9375rem); }
.cat-btn-icon{ padding:8px; width:var(--cat-row,40px); }
.cat-btn-block{ width:100%; }

.cat-input,
.cat-select,
.cat-textarea{
  width:100%;
  padding:10px 12px;
  background:var(--cat-surface,#fff);
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:var(--r-md,10px);
  color:var(--cat-ink,#27272a);
  font-family:var(--cat-ui, sans-serif);
  font-size:16px;                                       /* prevents iOS zoom */
  line-height:1.4;
  transition:border-color var(--cat-dur-fast,100ms), box-shadow var(--cat-dur-fast,100ms);
}
.cat-textarea{ min-height:96px; resize:vertical; }
.cat-select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cat-ink-quiet,#71717a) 50%),
    linear-gradient(135deg, var(--cat-ink-quiet,#71717a) 50%, transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.cat-input:focus,
.cat-select:focus,
.cat-textarea:focus{
  outline:none;
  border-color:var(--cat-apostolic);
  box-shadow:var(--cat-focus);
}
.cat-input::placeholder,
.cat-textarea::placeholder{ color:var(--ink-muted,#a1a1aa); }
.cat-input:disabled,
.cat-select:disabled,
.cat-textarea:disabled{ opacity:.6; cursor:not-allowed; }
.cat-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s-4,16px); }
.cat-label{
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-xs,.72rem); font-weight:600; letter-spacing:.02em;
  color:var(--cat-ink-2,#52525b);
}
.cat-label .cat-req{ color:var(--danger,#b3261e); margin-left:2px; }
.cat-hint{ font-size:var(--t-xs,.72rem); color:var(--cat-ink-quiet,#71717a); line-height:1.5; }
.cat-error{ font-size:var(--t-xs,.72rem); color:var(--danger,#b3261e); line-height:1.5; }
.cat-field.is-invalid .cat-input,
.cat-field.is-invalid .cat-select,
.cat-field.is-invalid .cat-textarea{ border-color:var(--danger,#b3261e); }

.cat-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:var(--r-pill,999px);
  border:1px solid var(--cat-border,#e4e4e7);
  background:transparent; color:var(--cat-ink-2,#52525b);
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-xs,.72rem); font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background var(--cat-dur-fast,100ms), color var(--cat-dur-fast,100ms),
             border-color var(--cat-dur-fast,100ms);
}
.cat-pill:hover{ background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink,#27272a); }
.cat-pill.active,
.cat-pill[aria-pressed="true"]{
  background:var(--cat-apostolic); border-color:var(--cat-apostolic); color:#fff;
}
.cat-segmented{
  display:inline-flex; padding:2px; gap:2px;
  border:1px solid var(--cat-border,#e4e4e7); border-radius:var(--r-md,10px);
  background:var(--cat-surface-2,#f4f4f5);
}
.cat-segmented > button,
.cat-segmented > .cat-seg{
  min-height:32px; padding:6px 12px; border:none; border-radius:calc(var(--r-md,10px) - 3px);
  background:transparent; color:var(--cat-ink-2,#52525b);
  font-family:var(--cat-ui, sans-serif); font-size:var(--t-xs,.72rem); font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background var(--cat-dur-fast,100ms), color var(--cat-dur-fast,100ms);
}
.cat-segmented > button.active,
.cat-segmented > button[aria-selected="true"],
.cat-segmented > .cat-seg.active{
  background:var(--cat-surface,#fff); color:var(--cat-ink,#27272a);
  box-shadow:var(--cat-shadow-1, 0 1px 3px rgba(0,0,0,.06));
}
.cat-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--r-pill,999px);
  background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink-2,#52525b);
  font-family:var(--cat-ui, sans-serif);
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.cat-badge-ok{ background:var(--ok-soft, rgba(26,143,74,.12)); color:var(--ok-ink,#0f6b37); }
.cat-badge-warn{ background:var(--warn-soft, rgba(180,83,9,.12)); color:var(--warn-ink,#92400e); }
.cat-badge-danger{ background:var(--danger-soft, rgba(179,38,30,.12)); color:var(--danger-ink,#8f1d18); }
.cat-badge-accent{ background:var(--accent-tint, rgba(122,31,43,.08)); color:var(--cat-apostolic); }
.cat-kbd{
  display:inline-block; padding:2px 7px;
  font-family:var(--cat-mono, ui-monospace, monospace); font-size:.7rem;
  color:var(--cat-ink-2,#52525b);
  background:var(--cat-surface-2,#f4f4f5);
  border:1px solid var(--cat-border,#e4e4e7);
  border-bottom-width:2px; border-radius:var(--r-xs,4px);
}
.cat-toggle{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; font-size:var(--t-sm,.8125rem); color:var(--cat-ink-2,#52525b);
  -webkit-user-select:none; user-select:none;
}
.cat-toggle input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.cat-toggle .cat-toggle-track{
  width:38px; height:22px; border-radius:999px; flex:0 0 auto;
  background:var(--cat-border-strong,#d4d4d8);
  transition:background var(--cat-dur-fast,100ms);
  position:relative;
}
.cat-toggle .cat-toggle-track::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:var(--cat-shadow-1);
  transition:transform var(--cat-dur-fast,100ms) var(--cat-ease);
}
.cat-toggle input:checked + .cat-toggle-track{ background:var(--cat-apostolic); }
.cat-toggle input:checked + .cat-toggle-track::after{ transform:translateX(16px); }
.cat-toggle input:focus-visible + .cat-toggle-track{ box-shadow:var(--cat-focus); }
.cat-checkbox,
.cat-radio{
  width:18px; height:18px; flex:0 0 auto;
  accent-color:var(--cat-apostolic,#7a1f2b);
  cursor:pointer;
}
.cat-check-row{
  display:flex; align-items:flex-start; gap:var(--s-2,8px);
  font-size:var(--t-sm,.8125rem); color:var(--cat-ink-2,#52525b); cursor:pointer;
}
.cat-range,
.cat-range-input{
  width:100%; accent-color:var(--cat-apostolic,#7a1f2b); cursor:pointer;
}

/* ==========================================================================
   5. SURFACES
   ========================================================================== */
.cat-card{
  background:var(--cat-surface,#fff);
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:var(--r-lg,14px);
  padding:var(--s-4,16px) var(--s-5,20px);
  box-shadow:var(--cat-shadow-1, 0 1px 3px rgba(0,0,0,.06));
}
.cat-card-interactive{
  cursor:pointer;
  transition:border-color var(--cat-dur,180ms), box-shadow var(--cat-dur,180ms);
}
.cat-card-interactive:hover{ border-color:var(--cat-apostolic); box-shadow:var(--cat-shadow-2); }
.cat-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3,12px); margin-bottom:var(--s-3,12px);
}
.cat-card-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-lg,1.0625rem); font-weight:600;
  color:var(--cat-ink,#27272a); margin:0;
}
.cat-card-sub{ font-size:var(--t-xs,.72rem); color:var(--cat-ink-quiet,#71717a); margin:2px 0 0; }
.cat-card-actions{ display:flex; gap:var(--s-2,8px); flex-wrap:wrap; align-items:center; }

.cat-panel{
  background:var(--cat-surface,#fff);
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:var(--r-lg,14px);
  overflow:hidden;
}
.cat-panel > .cat-panel-header,
.cat-panel-heading{
  padding:var(--s-3,12px) var(--s-4,16px);
  border-bottom:1px solid var(--cat-border,#e4e4e7);
  font-family:var(--cat-serif, Georgia, serif);
  font-weight:600; color:var(--cat-ink,#27272a);
}
.cat-panel > .cat-panel-sect{
  padding:var(--s-4,16px);
}
.cat-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-2,8px); text-align:center;
  padding:var(--s-10,40px) var(--s-5,20px);
  color:var(--cat-ink-quiet,#71717a);
}
.cat-empty-icon{ color:var(--cat-border-strong,#d4d4d8); line-height:0; margin-bottom:var(--s-1,4px); }
.cat-empty-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-lg,1.0625rem); font-weight:600;
  color:var(--cat-ink,#27272a); margin:0;
}
.cat-empty-body{ font-size:var(--t-sm,.8125rem); line-height:1.55; margin:0; max-width:46ch; }
.cat-empty-action{ margin-top:var(--s-2,8px); }

.cat-divider{
  height:1px; width:100%; border:0; margin:var(--s-4,16px) 0;
  background:var(--cat-border,#e4e4e7);
}
.cat-divider-vert{ width:1px; height:auto; align-self:stretch; margin:0 var(--s-2,8px); }

.cat-meter{
  position:relative; width:100%; height:8px; overflow:hidden;
  border-radius:var(--r-pill,999px);
  background:var(--cat-surface-2,#f4f4f5);
}
.cat-meter-fill{
  height:100%; width:0;
  border-radius:inherit;
  background:var(--cat-apostolic);
  transition:width var(--cat-dur,180ms) var(--cat-ease);
}
.cat-meter[data-state="green"]  .cat-meter-fill,
.cat-meter-fill[data-state="green"]{ background:var(--ok,#1a8f4a); }
.cat-meter[data-state="yellow"] .cat-meter-fill,
.cat-meter-fill[data-state="yellow"]{ background:#d4a017; }
.cat-meter[data-state="orange"] .cat-meter-fill,
.cat-meter-fill[data-state="orange"]{ background:var(--warn,#b45309); }
.cat-meter[data-state="red"]    .cat-meter-fill,
.cat-meter-fill[data-state="red"]{ background:var(--danger,#b3261e); }
.cat-meter-lg{ height:12px; }
.cat-meter-sm{ height:5px; }
.cat-meter-row{ display:flex; align-items:center; gap:var(--s-3,12px); }
.cat-meter-row .cat-meter{ flex:1; }

.cat-stepper{ display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none; }
.cat-step{
  position:relative; padding:var(--s-3,12px) var(--s-3,12px) var(--s-3,12px) var(--s-8,32px);
  border-left:2px solid var(--cat-border,#e4e4e7);
  margin-left:9px;
}
.cat-step:last-child{ border-left-color:transparent; }
.cat-step::before{
  content:""; position:absolute; left:-7px; top:14px;
  width:12px; height:12px; border-radius:50%;
  background:var(--cat-surface,#fff);
  border:2px solid var(--cat-border-strong,#d4d4d8);
}
.cat-step-type{
  display:block; font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cat-ink-quiet,#71717a); margin-bottom:3px;
}
.cat-step-claim::before   { border-color:var(--cat-apostolic); background:var(--cat-apostolic); }
.cat-step-counter::before { border-color:var(--cat-opponent);   background:var(--cat-opponent); }
.cat-step-evidence::before{ border-color:var(--cat-evidence);   background:var(--cat-evidence); }
.cat-step-objection::before{ border-color:var(--cat-objection); background:var(--cat-objection); }
.cat-step-rebuttal::before{ border-color:var(--cat-rebuttal);   background:var(--cat-rebuttal); }
.cat-step-closing::before { border-color:var(--cat-review);     background:var(--cat-review); }
.cat-step-note::before    { border-color:var(--cat-border-strong); }
.cat-step-claim    .cat-step-type{ color:var(--cat-apostolic); }
.cat-step-counter  .cat-step-type{ color:var(--cat-opponent); }
.cat-step-evidence .cat-step-type{ color:var(--cat-evidence); }
.cat-step-objection .cat-step-type{ color:var(--cat-objection); }
.cat-step-rebuttal .cat-step-type{ color:var(--cat-rebuttal); }
.cat-step-closing  .cat-step-type{ color:var(--cat-review); }

.cat-score{
  display:inline-flex; align-items:baseline; gap:4px;
  font-family:var(--cat-serif, Georgia, serif); font-weight:600;
  color:var(--cat-ink,#27272a);
}
.cat-score-value{ font-size:var(--t-3xl,1.875rem); line-height:1; }
.cat-score-max{ font-size:var(--t-sm,.8125rem); color:var(--cat-ink-quiet,#71717a); }
.cat-score[data-state="green"]  .cat-score-value{ color:var(--ok,#1a8f4a); }
.cat-score[data-state="yellow"] .cat-score-value{ color:#d4a017; }
.cat-score[data-state="orange"] .cat-score-value{ color:var(--warn,#b45309); }
.cat-score[data-state="red"]    .cat-score-value{ color:var(--danger,#b3261e); }

.cat-stat{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--s-3,12px) var(--s-4,16px);
  border:1px solid var(--cat-border,#e4e4e7); border-radius:var(--r-md,10px);
  background:var(--cat-surface,#fff);
}
.cat-stat-value{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-2xl,1.5rem); font-weight:600; line-height:1.1;
  color:var(--cat-ink,#27272a);
}
.cat-stat-label{
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cat-ink-quiet,#71717a);
}
.cat-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s-3,12px); }

.cat-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--r-pill,999px);
  background:var(--cat-surface-2,#f4f4f5);
  border:1px solid var(--cat-border,#e4e4e7);
  font-size:var(--t-xs,.72rem); font-weight:500; color:var(--cat-ink-2,#52525b);
  max-width:100%;
}
.cat-chip .cat-chip-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-chip-remove{
  border:none; background:transparent; color:inherit; cursor:pointer;
  padding:0 0 0 2px; line-height:1; opacity:.7;
}
.cat-chip-remove:hover{ opacity:1; }
.cat-chip-accent{ background:var(--accent-tint, rgba(122,31,43,.08)); color:var(--cat-apostolic); border-color:transparent; }

.cat-verse-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--r-sm,6px);
  background:var(--cat-surface-2,#f4f4f5);
  border:1px solid var(--cat-border,#e4e4e7);
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-xs,.72rem); font-weight:600;
  color:var(--cat-apostolic); cursor:pointer;
  transition:background var(--cat-dur-fast,100ms), color var(--cat-dur-fast,100ms);
}
.cat-verse-chip:hover{ background:var(--cat-apostolic); color:#fff; }
.cat-verse-chip .cat-verse-ref{ font-variant-numeric:tabular-nums; }

.cat-citation{
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-xs,.72rem); font-weight:600;
  color:var(--cat-apostolic); text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb, var(--cat-apostolic) 55%, transparent);
  cursor:pointer; white-space:nowrap;
}
.cat-citation:hover{ color:var(--accent-hover,#661820); }
.cat-citation-external{ color:var(--cat-ink-2,#52525b); }

/* ==========================================================================
   6. CHAT
   ========================================================================== */
.cat-thread{
  display:flex; flex-direction:column; gap:var(--s-4,16px);
  padding:var(--s-4,16px) 0;
}
.cat-msg{
  display:flex; flex-direction:column; gap:6px;
  max-width:min(760px,100%);
}
.cat-msg-meta{
  display:flex; align-items:center; gap:var(--s-2,8px);
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.64rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--cat-ink-quiet,#71717a);
}
.cat-msg-body{
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-md,.9375rem); line-height:1.62;
  color:var(--cat-ink,#27272a);
}
.cat-msg-body p{ margin:0 0 var(--s-3,12px); }
.cat-msg-body p:last-child{ margin-bottom:0; }
.cat-msg-body blockquote{
  margin:var(--s-3,12px) 0; padding:var(--s-2,8px) var(--s-4,16px);
  border-left:3px solid var(--cat-apostolic);
  font-family:var(--cat-scripture, Georgia, serif);
  background:var(--cat-surface-2,#f4f4f5); border-radius:0 var(--r-sm,6px) var(--r-sm,6px) 0;
}
.cat-msg-ai .cat-msg-meta{ color:var(--cat-apostolic); }
.cat-msg-ai .cat-msg-body{
  padding:var(--s-3,12px) var(--s-4,16px);
  background:var(--cat-surface,#fff);
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:0 var(--r-lg,14px) var(--r-lg,14px) var(--r-lg,14px);
}
.cat-msg-user{ margin-left:auto; align-items:flex-end; }
.cat-msg-user .cat-msg-meta{ justify-content:flex-end; }
.cat-msg-user .cat-msg-body{
  padding:var(--s-3,12px) var(--s-4,16px);
  background:var(--accent-tint, rgba(122,31,43,.08));
  border:1px solid transparent;
  border-radius:var(--r-lg,14px) 0 var(--r-lg,14px) var(--r-lg,14px);
}
.cat-msg-system{
  align-self:center; max-width:100%; text-align:center;
}
.cat-msg-system .cat-msg-body{
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.7rem; letter-spacing:.03em;
  color:var(--cat-ink-quiet,#71717a);
  background:var(--cat-surface-2,#f4f4f5);
  padding:5px 12px; border-radius:var(--r-pill,999px);
}
.cat-composer{
  display:flex; align-items:flex-end; gap:var(--s-2,8px);
  padding:var(--s-3,12px);
  background:var(--cat-surface,#fff);
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:var(--r-lg,14px);
  box-shadow:var(--cat-shadow-1);
}
.cat-composer .cat-composer-input{
  flex:1; min-width:0; border:none; background:transparent; resize:none;
  font-family:var(--cat-ui, sans-serif); font-size:16px; line-height:1.5;
  color:var(--cat-ink,#27272a); max-height:220px; padding:6px 4px;
}
.cat-composer .cat-composer-input:focus{ outline:none; }
.cat-composer-actions{ display:flex; align-items:center; gap:6px; }
.cat-typing{ display:inline-flex; align-items:center; gap:4px; padding:4px 0; }
.cat-typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--cat-ink-quiet,#71717a);
  animation:catTyping 1.2s infinite ease-in-out;
}
.cat-typing span:nth-child(2){ animation-delay:.18s; }
.cat-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes catTyping{
  0%,60%,100%{ opacity:.25; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}
.cat-tool-activity{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--r-pill,999px);
  background:var(--cat-surface-2,#f4f4f5);
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.66rem; letter-spacing:.03em; color:var(--cat-ink-quiet,#71717a);
}
.cat-tool-activity::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cat-review); flex:0 0 auto;
}

/* ==========================================================================
   7. OVERLAYS — toast, modal, drawer, sheet
   ========================================================================== */
.cat-toast-root{
  position:fixed; z-index:9600;
  left:50%; bottom:max(20px, calc(20px + env(safe-area-inset-bottom,0px)));
  transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; align-items:center; gap:var(--s-2,8px);
  width:min(92vw, 440px); pointer-events:none;
}
.cat-toast{
  display:flex; align-items:center; gap:var(--s-2,8px);
  width:100%; pointer-events:auto;
  padding:10px 12px;
  background:var(--n800,#27272a); color:#fff;
  border:1px solid transparent; border-radius:var(--r-md,10px);
  box-shadow:var(--cat-shadow-3);
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-sm,.8125rem); line-height:1.4;
  opacity:0; transform:translateY(10px);
  transition:opacity var(--cat-dur,180ms) var(--cat-ease-out),
             transform var(--cat-dur,180ms) var(--cat-ease-out);
}
.cat-toast-in{ opacity:1; transform:translateY(0); }
.cat-toast-out{ opacity:0; transform:translateY(10px); }
.cat-toast-ic{ display:inline-flex; flex:0 0 auto; }
.cat-toast-msg{ flex:1; min-width:0; overflow-wrap:anywhere; }
.cat-toast-action{
  flex:0 0 auto; padding:5px 10px; border-radius:var(--r-sm,6px);
  background:rgba(255,255,255,.16); color:#fff; border:none;
  font-family:inherit; font-size:var(--t-xs,.72rem); font-weight:600; cursor:pointer;
}
.cat-toast-action:hover{ background:rgba(255,255,255,.28); }
.cat-toast-close{
  flex:0 0 auto; padding:2px; border:none; background:transparent;
  color:inherit; opacity:.65; cursor:pointer; line-height:0;
}
.cat-toast-close:hover{ opacity:1; }
.cat-toast-info   { background:var(--n800,#27272a); }
.cat-toast-success{ background:#0f6b37; }
.cat-toast-warn   { background:#92400e; }
.cat-toast-error  { background:#8f1d18; }
body.theme-dark .cat-toast{ background:#1a1a1a; border-color:var(--cat-border,#2c2c2c); }
body.theme-dark .cat-toast-success{ background:#14532d; }
body.theme-dark .cat-toast-warn{ background:#78350f; }
body.theme-dark .cat-toast-error{ background:#7f1d1d; }

.cat-overlay-backdrop,
.cat-modal-backdrop{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-4,16px);
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity var(--cat-dur,180ms) var(--cat-ease-out);
}
.cat-overlay-backdrop.open,
.cat-modal-backdrop.open{ opacity:1; pointer-events:auto; }

.cat-modal,
.cat-dialog{
  display:flex; flex-direction:column;
  width:100%; max-width:560px; max-height:min(88vh, 88dvh);
  background:var(--cat-surface,#fff);
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:var(--r-xl,20px);
  box-shadow:var(--cat-shadow-3);
  transform:scale(.98) translateY(8px); opacity:0;
  transition:transform var(--cat-dur,180ms) var(--cat-ease-out), opacity var(--cat-dur,180ms);
  overflow:hidden;
}
.cat-modal.open,
.cat-dialog.open{ transform:none; opacity:1; }
.cat-modal-sm{ max-width:400px; }
.cat-modal-md{ max-width:560px; }
.cat-modal-lg{ max-width:820px; }
.cat-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3,12px);
  padding:var(--s-4,16px) var(--s-5,20px);
  border-bottom:1px solid var(--cat-border,#e4e4e7);
  flex:0 0 auto;
}
.cat-modal-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-xl,1.25rem); font-weight:600;
  color:var(--cat-ink,#27272a); margin:0;
}
.cat-modal-close,
.cat-drawer-close{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-md,10px);
  border:none; background:transparent; color:var(--cat-ink-quiet,#71717a);
  cursor:pointer; line-height:0;
  transition:background var(--cat-dur-fast,100ms), color var(--cat-dur-fast,100ms);
}
.cat-modal-close:hover,
.cat-drawer-close:hover{ background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink,#27272a); }
.cat-modal-body{
  padding:var(--s-5,20px); overflow-y:auto; flex:1 1 auto;
  -webkit-overflow-scrolling:touch;
}
.cat-modal-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--s-2,8px);
  padding:var(--s-3,12px) var(--s-5,20px);
  border-top:1px solid var(--cat-border,#e4e4e7);
  flex:0 0 auto; flex-wrap:wrap;
}
.cat-modal-content{ display:block; }
.cat-modal-content > * + *{ margin-top:var(--s-3,12px); }

/* Drawer (right-side on desktop, sheet on mobile) */
.cat-overlay-backdrop.cat-drawer-backdrop-host{ align-items:stretch; justify-content:flex-end; padding:0; }
.cat-overlay-backdrop:has(.cat-drawer){ padding:0; align-items:stretch; justify-content:flex-end; }
.cat-drawer{
  display:flex; flex-direction:column;
  width:min(92vw, 420px); height:100%;
  background:var(--cat-surface,#fff);
  border-left:1px solid var(--cat-border,#e4e4e7);
  box-shadow:var(--cat-shadow-3);
  transform:translateX(100%);
  transition:transform var(--cat-dur,180ms) var(--cat-ease-out);
  overflow:hidden;
}
.cat-drawer.open{ transform:none; }
.cat-drawer-left{
  border-left:none; border-right:1px solid var(--cat-border,#e4e4e7);
  margin-right:auto; transform:translateX(-100%);
}
.cat-drawer-right{ margin-left:auto; }
.cat-drawer-sm{ width:min(92vw, 340px); }
.cat-drawer-lg{ width:min(96vw, 560px); }
.cat-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3,12px);
  padding:var(--s-4,16px) var(--s-5,20px);
  border-bottom:1px solid var(--cat-border,#e4e4e7);
  flex:0 0 auto;
}
.cat-drawer-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-lg,1.0625rem); font-weight:600;
  color:var(--cat-ink,#27272a); margin:0;
}
.cat-drawer-body{
  flex:1 1 auto; overflow-y:auto; padding:var(--s-5,20px);
  -webkit-overflow-scrolling:touch;
}
.cat-drawer-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--s-2,8px);
  padding:var(--s-3,12px) var(--s-5,20px);
  border-top:1px solid var(--cat-border,#e4e4e7);
  flex:0 0 auto; flex-wrap:wrap;
}
/* Bottom sheet variant */
.cat-sheet{ border-radius:var(--r-xl,20px) var(--r-xl,20px) 0 0; }

/* Lock helper class (set by CATUI) */
body.cat-scroll-lock{ overscroll-behavior:contain; }

/* ==========================================================================
   8. SKELETON
   ========================================================================== */
.cat-skeleton-list{ display:flex; flex-direction:column; gap:var(--s-3,12px); width:100%; }
.cat-skeleton{
  border-radius:var(--r-md,10px);
  background:linear-gradient(90deg,
    var(--cat-surface-2,#f4f4f5) 25%,
    color-mix(in srgb, var(--cat-surface-2,#f4f4f5) 60%, var(--cat-border,#e4e4e7)) 37%,
    var(--cat-surface-2,#f4f4f5) 63%);
  background-size:400% 100%;
  animation:catSkeleton 1.4s ease infinite;
}
.cat-skeleton-row{ height:16px; }
.cat-skeleton-row:first-of-type{ width:72%; }
.cat-skeleton-row:nth-of-type(3n){ width:88%; }
.cat-skeleton-text{ height:12px; }
.cat-skeleton-card{ height:96px; }
.cat-skeleton-block{ height:160px; }
@keyframes catSkeleton{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* Tablet 768–1279 : compact icon rail */
@media (min-width:768px) and (max-width:1279px){
  .cat-shell,
  .cat-shell.has-inspector{ grid-template-columns:var(--cat-rail-w-compact,72px) minmax(0,1fr); }
  .cat-rail{ padding:var(--s-2,8px) var(--s-1,4px); }
  .cat-rail-btn{ flex-direction:column; gap:4px; padding:8px 4px; text-align:center; min-height:56px; }
  .cat-rail-btn .cat-rail-label{ font-size:.58rem; white-space:normal; }
  .cat-rail-group-title{ text-align:center; font-size:.54rem; letter-spacing:.04em; padding:6px 2px 2px; }
  .cat-rail-btn .cat-rail-badge{ position:absolute; top:4px; right:6px; }
  .cat-inspector{ display:none; }
  .cat-split,
  .cat-split.side-1-2,
  .cat-split.side-2-1{ grid-template-columns:1fr; }
}

/* Mobile <768 : compact header + horizontal tabs, full-screen sheets */
@media (max-width:767px){
  .cat-shell,
  .cat-shell.has-inspector{
    grid-template-columns:minmax(0,1fr);
    height:auto; min-height:calc(100vh - var(--topbar-h,60px));
    min-height:calc(100dvh - var(--topbar-h,60px));
    overflow:visible;
  }
  .cat-rail{ display:none; }
  .cat-rail.cat-rail-open{
    display:flex; position:fixed; z-index:9400;
    top:calc(var(--topbar-h,60px) + env(safe-area-inset-top,0px));
    bottom:0; left:0; width:min(84vw,320px);
    box-shadow:var(--cat-shadow-3);
    transform:translateX(0);
  }
  .cat-topbar-compact{
    display:flex; align-items:center; gap:var(--s-2,8px);
    padding:var(--s-2,8px) var(--s-3,12px);
    padding-left:max(var(--s-3,12px), env(safe-area-inset-left));
    padding-right:max(var(--s-3,12px), env(safe-area-inset-right));
    border-bottom:1px solid var(--cat-border,#e4e4e7);
    background:var(--cat-surface,#fff);
  }
  .cat-mobile-tabs{ display:flex; }
  .cat-workspace{ padding:var(--s-4,16px) var(--s-3,12px); }
  .cat-panel-head-row{ flex-direction:column; align-items:stretch; }
  .cat-panel-title{ font-size:var(--t-2xl,1.5rem); }
  .cat-display{ font-size:var(--t-3xl,1.875rem); }
  .cat-inspector{
    border-left:none; border-top:1px solid var(--cat-border,#e4e4e7);
  }
  .cat-split,
  .cat-split.side-1-2,
  .cat-split.side-2-1{ grid-template-columns:1fr; }

  /* Full-screen sheets */
  .cat-overlay-backdrop,
  .cat-modal-backdrop{ padding:0; align-items:stretch; justify-content:stretch; }
  .cat-modal,
  .cat-dialog{
    max-width:none; width:100%; height:100%;
    max-height:100dvh; border-radius:0;
    transform:translateY(14px);
  }
  .cat-modal.open,
  .cat-dialog.open{ transform:none; }
  .cat-modal-head{
    position:sticky; top:0; z-index:2; background:var(--cat-surface,#fff);
    padding-top:calc(var(--s-4,16px) + env(safe-area-inset-top,0px));
  }
  .cat-drawer{
    width:100%; height:100%;
    border-left:none; border-radius:0;
  }
  .cat-drawer.cat-sheet,
  .cat-sheet{
    height:auto; max-height:92dvh; margin-top:auto;
    width:100%; border-radius:var(--r-xl,20px) var(--r-xl,20px) 0 0;
    border-left:none; border-top:1px solid var(--cat-border,#e4e4e7);
    transform:translateY(100%);
  }
  .cat-drawer.cat-sheet.open,
  .cat-sheet.open{ transform:none; }
  .cat-overlay-backdrop:has(.cat-sheet){ align-items:flex-end; justify-content:stretch; }
  .cat-drawer-head{
    padding-top:calc(var(--s-4,16px) + env(safe-area-inset-top,0px));
  }
  .cat-drawer.cat-sheet .cat-drawer-head{ padding-top:var(--s-3,12px); }
  .cat-modal-foot,
  .cat-drawer-foot{
    position:sticky; bottom:0; background:var(--cat-surface,#fff);
    padding-bottom:calc(var(--s-3,12px) + env(safe-area-inset-bottom,0px));
  }
  /* Sticky action bar */
  .cat-action-bar{
    position:sticky; bottom:0; z-index:5;
    display:flex; gap:var(--s-2,8px);
    padding:var(--s-3,12px);
    padding-bottom:calc(var(--s-3,12px) + env(safe-area-inset-bottom,0px));
    background:var(--cat-surface,#fff);
    border-top:1px solid var(--cat-border,#e4e4e7);
  }
  .cat-composer{
    position:sticky; bottom:0;
    padding-bottom:calc(var(--s-3,12px) + env(safe-area-inset-bottom,0px));
  }
  .cat-toast-root{ width:calc(100vw - 16px); }
}

/* No horizontal page overflow at 320px */
@media (max-width:360px){
  .cat-workspace{ padding:var(--s-3,12px); }
  .cat-panel-title{ font-size:var(--t-xl,1.25rem); }
}

/* Dense tables become stacked cards under 900px */
@media (max-width:899px){
  .cat-matrix,
  .cat-matrix thead,
  .cat-matrix tbody,
  .cat-matrix tr,
  .cat-matrix th,
  .cat-matrix td{ display:block; width:100%; }
  .cat-matrix thead{ display:none; }
  .cat-matrix tr{
    margin-bottom:var(--s-3,12px);
    border:1px solid var(--cat-border,#e4e4e7);
    border-radius:var(--r-md,10px); background:var(--cat-surface,#fff);
    padding:var(--s-2,8px);
  }
  .cat-matrix td{
    display:grid; grid-template-columns:38% 1fr; gap:var(--s-2,8px);
    border:none; border-bottom:1px dashed var(--cat-border,#e4e4e7);
    padding:6px 4px;
  }
  .cat-matrix td:last-child{ border-bottom:none; }
  .cat-matrix td::before{
    content:attr(data-label);
    font-family:var(--cat-mono, ui-monospace, monospace);
    font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--cat-ink-quiet,#71717a);
  }
  .cat-battlecard{
    display:block; padding:var(--s-4,16px);
    border:1px solid var(--cat-border,#e4e4e7); border-radius:var(--r-lg,14px);
    background:var(--cat-surface,#fff); margin-bottom:var(--s-3,12px);
  }
  .cat-battlecard-side{
    padding:var(--s-3,12px); border-radius:var(--r-md,10px);
    border-left:3px solid var(--cat-border-strong,#d4d4d8);
  }
  .cat-battlecard-side.is-apostolic{ border-left-color:var(--cat-apostolic); background:var(--accent-tint, rgba(122,31,43,.06)); }
  .cat-battlecard-side.is-opponent{ border-left-color:var(--cat-opponent); background:var(--cat-surface-2,#f4f4f5); }
  .cat-battlecard-side + .cat-battlecard-side{ margin-top:var(--s-2,8px); }
}
.cat-matrix{
  width:100%; border-collapse:collapse;
  font-size:var(--t-sm,.8125rem);
}
.cat-matrix th,
.cat-matrix td{
  padding:9px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--cat-border,#e4e4e7);
}
.cat-matrix thead th{
  position:sticky; top:0; z-index:1;
  background:var(--cat-surface-2,#f4f4f5);
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cat-ink-quiet,#71717a);
}
.cat-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }

/* ==========================================================================
   10. A11Y / POINTER / MOTION / PRINT
   ========================================================================== */
body[data-tool="apologetics"] a:focus-visible,
body[data-tool="apologetics"] button:focus-visible,
body[data-tool="apologetics"] [tabindex]:focus-visible,
body[data-tool="apologetics"] input:focus-visible,
body[data-tool="apologetics"] select:focus-visible,
body[data-tool="apologetics"] textarea:focus-visible{
  outline:none;
  box-shadow:var(--cat-focus);
  border-radius:var(--r-sm,6px);
}

@media (pointer:coarse){
  body[data-tool="apologetics"] .cat-btn,
  body[data-tool="apologetics"] .cat-rail-btn,
  body[data-tool="apologetics"] .cat-pill,
  body[data-tool="apologetics"] .cat-chip,
  body[data-tool="apologetics"] .cat-verse-chip,
  body[data-tool="apologetics"] .cat-segmented > button,
  body[data-tool="apologetics"] .cat-modal-close,
  body[data-tool="apologetics"] .cat-drawer-close,
  body[data-tool="apologetics"] .cat-toast-action,
  body[data-tool="apologetics"] .cat-toast-close,
  body[data-tool="apologetics"] .cat-nav-btn{ min-height:44px; }
  body[data-tool="apologetics"] .cat-modal-close,
  body[data-tool="apologetics"] .cat-drawer-close,
  body[data-tool="apologetics"] .cat-toast-close{ min-width:44px; }
  body[data-tool="apologetics"] a,body[data-tool="apologetics"] button,
  body[data-tool="apologetics"] label,
  body[data-tool="apologetics"] [role="button"]{ -webkit-tap-highlight-color:transparent; }
}

@media (prefers-reduced-motion:reduce){
  body[data-tool="apologetics"] *,
  body[data-tool="apologetics"] *::before,
  body[data-tool="apologetics"] *::after,
  .cat-toast,
  .cat-modal,
  .cat-drawer,
  .cat-skeleton{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@media print{
  .cat-rail,
  .cat-inspector,
  .cat-mobile-tabs,
  .cat-topbar-compact,
  .cat-toolbar,
  .cat-btn,
  .cat-pill-bar,
  .cat-panel-desc,
  .cat-toast-root,
  .cat-overlay-backdrop,
  .cat-modal-backdrop,
  .cat-skip-link,
  .cat-action-bar,
  .cat-composer,
  .cat-icon{ display:none !important; }
  body[data-tool="apologetics"],
  .cat-shell,
  .cat-workspace{
    display:block !important; height:auto !important; overflow:visible !important;
    background:#fff !important; color:#000 !important; padding:0 !important;
  }
  body[data-tool="apologetics"] .cat-print-area{ display:block !important; color:#000; }
  .cat-card,
  .cat-panel{ box-shadow:none !important; border:1px solid #999 !important; break-inside:avoid; }
  .cat-verse-chip,
  .cat-citation{ color:#000 !important; border-color:#999 !important; }
  .cat-matrix th,
  .cat-matrix td{ border:1px solid #999 !important; padding:4pt 6pt !important; font-size:10pt; }
  .cat-scripture{ font-size:11pt; line-height:1.5; }
}

/* ==========================================================================
   11. PANEL-SPECIFIC COMPONENTS
   Classes consumed by the panel modules (cat-*.js) and index.html. Every color
   resolves through a semantic token so light/dark are covered automatically.
   ========================================================================== */

/* ── Debate / side semantics ──
   Side markers shared by Doctrine Map battle cards, step lists and review
   cards. `--cat-side` lets the apostolic/opponent hue flow into any rule. */
.cat-apostolic{ --cat-side:var(--cat-apostolic); color:var(--cat-apostolic); }
.cat-opponent{ --cat-side:var(--cat-opponent); color:var(--cat-opponent); }

/* Battle cards render on mobile (<=899px) and inside .cat-print-area, but the
   base look is defined globally so print/export is styled at every width. */
.cat-battlecard{
  display:block;
  padding:var(--s-4,16px);
  border:1px solid var(--cat-border,#e4e4e7);
  border-radius:var(--r-lg,14px);
  background:var(--cat-surface,#fff);
  margin-bottom:var(--s-3,12px);
}
.cat-battlecard-side{
  padding:var(--s-3,12px);
  border-radius:var(--r-md,10px);
  border-left:3px solid var(--cat-side,var(--cat-border-strong,#d4d4d8));
  background:var(--cat-surface-2,#f4f4f5);
}
.cat-battlecard-side + .cat-battlecard-side{ margin-top:var(--s-2,8px); }
.cat-battlecard-side.is-apostolic,
.cat-battlecard-side.cat-apostolic{
  border-left-color:var(--cat-apostolic);
  background:var(--accent-tint, rgba(122,31,43,.06));
}
.cat-battlecard-side.is-opponent,
.cat-battlecard-side.cat-opponent{
  border-left-color:var(--cat-opponent);
  background:var(--cat-surface-2,#f4f4f5);
}
.cat-battlecard-side .cat-section-label{ margin-bottom:var(--s-1,4px); }
.cat-battlecard-side p{ margin:0 0 var(--s-2,8px); font-size:var(--t-sm,.8125rem); line-height:1.55; }
.cat-battlecard-side p:last-child{ margin-bottom:0; }

/* Proof-text count metadata + contested marker (Doctrine Map / Arsenal). */
.cat-proof-count{
  display:inline-block;
  font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cat-ink-quiet,#71717a);
}
.cat-contested{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--r-pill,999px);
  border-left:3px solid var(--cat-objection);
  background:var(--warn-soft, rgba(180,83,9,.12));
  color:var(--warn-ink,#92400e);
  font-family:var(--cat-ui, sans-serif);
  font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}

/* ── Segmented control: standalone .cat-seg ──
   Arena / Observatory build tab bars with bare .cat-seg buttons inside a
   .cat-toolbar[role=tablist]; .cat-segmented > .cat-seg keeps its own look. */
.cat-seg{
  display:inline-flex; align-items:center; gap:6px;
  min-height:32px; padding:6px 12px;
  border:1px solid var(--cat-border,#e4e4e7); border-radius:var(--r-md,10px);
  background:var(--cat-surface,#fff); color:var(--cat-ink-2,#52525b);
  font-family:var(--cat-ui, sans-serif);
  font-size:var(--t-xs,.72rem); font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background var(--cat-dur-fast,100ms), color var(--cat-dur-fast,100ms),
             border-color var(--cat-dur-fast,100ms);
}
.cat-seg:hover{ background:var(--cat-surface-2,#f4f4f5); color:var(--cat-ink,#27272a); }
.cat-seg.active,
.cat-seg[aria-selected="true"]{
  background:var(--cat-apostolic); border-color:var(--cat-apostolic); color:#fff;
}

/* ── Chat / thread structure ── */
.cat-thread-col{ min-width:0; display:flex; flex-direction:column; gap:var(--s-3,12px); }
.cat-thread-head{
  position:sticky; top:0; z-index:6;
  row-gap:6px;
  padding:var(--s-2,8px) 0;
  background:var(--cat-bg,#fafafa);
  border-bottom:1px solid var(--cat-border,#e4e4e7);
}
.cat-msg-actions{
  display:flex; align-items:center; gap:var(--s-1,4px); flex-wrap:wrap;
  opacity:.7;
  transition:opacity var(--cat-dur-fast,100ms);
}
.cat-msg:hover .cat-msg-actions,
.cat-msg:focus-within .cat-msg-actions{ opacity:1; }

/* ── Notebook verse blockquote ── */
.cat-verse-bq{
  margin:var(--s-3,12px) 0; padding:var(--s-2,8px) var(--s-4,16px);
  border-left:3px solid var(--cat-apostolic);
  border-radius:0 var(--r-sm,6px) var(--r-sm,6px) 0;
  background:var(--cat-surface-2,#f4f4f5);
  font-family:var(--cat-scripture, Georgia, serif);
  font-size:1.02em; line-height:1.65; color:var(--cat-ink,#27272a);
}
.cat-verse-bq em{ font-style:italic; }
.cat-verse-bq .cat-verse-chip{ margin-left:4px; vertical-align:middle; }

/* ── Scripture Arsenal reader ── */
.cat-pp-verse{
  padding:6px 4px; line-height:1.75; border-radius:var(--r-sm,6px);
  transition:background var(--cat-dur-fast,100ms);
}
.cat-pp-verse:hover{ background:var(--cat-surface-2,#f4f4f5); }
.cat-pp-verse[data-target]{ font-weight:500; background:var(--accent-tint, rgba(122,31,43,.08)); }
.cat-pp-verse .cat-verse-chip{ margin-left:6px; }

/* ── Debate Pack / generated content body ── */
.cat-pack-body{
  display:block; font-size:var(--t-sm,.8125rem); line-height:1.6;
  color:var(--cat-ink,#27272a);
}
.cat-pack-body > * + *{ margin-top:var(--s-3,12px); }
.cat-pack-body h3,
.cat-pack-body h4{
  font-family:var(--cat-serif, Georgia, serif); font-weight:600;
  color:var(--cat-ink,#27272a); margin:0;
}
.cat-pack-body blockquote{
  margin:0; padding:var(--s-2,8px) var(--s-4,16px);
  border-left:3px solid var(--cat-apostolic);
  font-family:var(--cat-scripture, Georgia, serif);
  background:var(--cat-surface-2,#f4f4f5);
}

/* ── Command palette ── */
.cat-palette-label{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--t-sm,.8125rem); color:var(--cat-ink,#27272a);
}

/* ── Keyboard shortcuts dialog ── */
.cat-shortcuts{
  display:grid; grid-template-columns:1fr auto;
  gap:var(--s-2,8px) var(--s-4,16px);
  margin:0; align-items:center;
}
.cat-shortcuts dt{ color:var(--cat-ink-2,#52525b); }
.cat-shortcuts dd{ margin:0; text-align:right; }

/* ── Doctrine Map inline detail (row expansion) ── */
.cat-dm-detail{
  display:block; margin-top:var(--s-2,8px); padding-top:var(--s-2,8px);
  border-top:1px dashed var(--cat-border,#e4e4e7);
  font-size:var(--t-xs,.72rem); color:var(--cat-ink-quiet,#71717a);
}
.cat-dm-detail[hidden]{ display:none; }

/* ── War Room dashboard blocks ── */
.cat-dash-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-4,16px); margin-top:var(--s-4,16px);
}
.cat-dash-readiness .cat-meter-row + .cat-meter-row{ margin-top:var(--s-2,8px); }
.cat-dash-quick .cat-toolbar{ padding:0; }
.cat-dash-recent .cat-list{ margin-top:var(--s-2,8px); }
.cat-dash-first-run .cat-list-item{ border-left:3px solid var(--cat-border-strong,#d4d4d8); }

/* ── Library panel ── */
.cat-lib-stats{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2,8px);
  margin:var(--s-2,8px) 0; font-size:var(--t-xs,.72rem);
  color:var(--cat-ink-quiet,#71717a);
}
.cat-lib-sync{
  font-size:var(--t-xs,.72rem); color:var(--cat-ink-quiet,#71717a);
  margin-bottom:var(--s-2,8px);
}
.cat-lib-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--s-3,12px);
}
.cat-lib-bulk{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2,8px);
  margin-bottom:var(--s-2,8px); font-size:var(--t-xs,.72rem);
}
.cat-lib-card{ margin-bottom:var(--s-2,8px); }
.cat-lib-card.is-selected{ border-color:var(--cat-apostolic); box-shadow:var(--cat-focus); }
.cat-lib-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-md,.9375rem); font-weight:600; color:var(--cat-ink,#27272a);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
}
.cat-lib-title:hover{ color:var(--cat-apostolic); }

/* ── Camp cards: locked / in-progress / completed ── */
.cat-card-locked{ opacity:.62; }
.cat-card-locked:hover{
  opacity:.8; transform:none;
  border-color:var(--cat-border,#e4e4e7); box-shadow:var(--cat-shadow-1);
}
.cat-card-locked .cat-card-title::after{
  content:" · locked"; font-family:var(--cat-mono, ui-monospace, monospace);
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cat-ink-quiet,#71717a);
}

/* ── Compact mobile header title ── */
.cat-compact-title{
  font-family:var(--cat-serif, Georgia, serif);
  font-size:var(--t-md,.9375rem); font-weight:600; color:var(--cat-ink,#27272a);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Toast icon (cat-ui passes class "cat-toast-icon") ── */
.cat-toast-icon{ display:inline-flex; flex:0 0 auto; }

/* ── Arena error state ── */
.arena-error{
  padding:var(--s-4,16px);
  border:1px solid color-mix(in srgb, var(--danger,#b3261e) 35%, transparent);
  border-radius:var(--r-md,10px);
  background:var(--danger-soft, rgba(179,38,30,.08));
  color:var(--danger-ink,#8f1d18);
}

/* ── Scholar-gated rail entries (JS hides these for the free tier) ── */
.tier-scholar-gate{ position:relative; }
@media (min-width:1280px){
  .cat-rail-btn.tier-scholar-gate::after{
    content:""; position:absolute; top:9px; right:9px;
    width:6px; height:6px; border-radius:50%;
    background:var(--cat-review);
  }
}

/* ── Matrix sticky header + sticky first column (desktop fallback scroll) ── */
@media (min-width:900px){
  .cat-table-scroll .cat-matrix thead th{ position:sticky; top:0; z-index:2; }
  .cat-table-scroll .cat-matrix tbody tr > th:first-child,
  .cat-table-scroll .cat-matrix thead th:first-child{
    position:sticky; left:0; z-index:1;
    background:var(--cat-surface-2,#f4f4f5);
  }
  .cat-table-scroll .cat-matrix thead th:first-child{ z-index:3; }
}

/* ── Responsive adjustments for the new components ── */
@media (max-width:767px){
  .cat-dash-cards{ grid-template-columns:1fr; }
  .cat-lib-grid{ grid-template-columns:1fr; }
  .cat-thread-head{ position:static; }
}
@media (max-width:360px){
  .cat-lib-grid{ grid-template-columns:1fr; }
  .cat-dash-cards{ grid-template-columns:1fr; }
}

/* Coarse-pointer targets for the components added above. */
@media (pointer:coarse){
  body[data-tool="apologetics"] .cat-seg,
  body[data-tool="apologetics"] .cat-lib-title{ min-height:44px; }
  body[data-tool="apologetics"] .cat-lib-title{ display:flex; align-items:center; }
}

/* Print coverage for battle cards / thread / library added above. */
@media print{
  .cat-thread-head,
  .cat-msg-actions,
  .cat-lib-bulk,
  .cat-lib-sync,
  .cat-dash-quick{ display:none !important; }
  .cat-battlecard{ border:1px solid #999 !important; break-inside:avoid; }
  .cat-battlecard-side{ border:1px solid #bbb !important; border-left-width:3px !important; }
  .cat-battlecard-side.is-apostolic{ border-left-color:#000 !important; }
  .cat-thread-col,
  .cat-msg,
  .cat-verse-bq,
  .cat-lib-card,
  .cat-pp-verse{ break-inside:avoid; }
  .cat-msg-body,
  .cat-pack-body,
  .cat-verse-bq{ color:#000 !important; background:transparent !important; }
  .cat-thread-col{ display:block !important; }
  .cat-seg,
  .cat-shortcuts dd .cat-kbd{ color:#000 !important; }
}

/* ==========================================================================
   12. LEGACY COMPATIBILITY
   Kept LAST so pre-migration modules keep rendering. Lightly restyled to the
   new editorial system while preserving the original class contract.
   ========================================================================== */

/* App scaffold (index.html + cat.js) */
#cat-app{
  display:grid;
  grid-template-columns:220px 1fr;
  height:calc(100vh - var(--topbar-h,60px));
  height:calc(100dvh - var(--topbar-h,60px));
  background:var(--bg,#fafafa);
}
#cat-sidebar{
  background:var(--surface,#fff);
  border-right:1px solid var(--border,#e4e4e7);
  padding:.5rem;
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto; scrollbar-width:thin;
}
#cat-sidebar.cat-sidebar-collapsed{ display:none; }
#cat-app:has(#cat-sidebar.cat-sidebar-collapsed){ grid-template-columns:0 1fr; }
.cat-sidebar-toggle{
  display:none; background:transparent; border:none; color:var(--ink-muted,#a1a1aa);
  font-size:1.1rem; cursor:pointer; padding:.4rem .6rem; border-radius:6px;
  margin-bottom:.4rem; align-self:flex-end;
}
.cat-nav-btn{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .875rem; background:transparent; border:none;
  border-radius:10px; color:var(--ink-muted,#a1a1aa);
  font-size:.8375rem; font-weight:500; cursor:pointer; text-align:left;
  transition:background .15s, color .15s; white-space:nowrap;
}
.cat-nav-btn:hover{ background:var(--surface-2,#f4f4f5); color:var(--ink,#27272a); }
.cat-nav-btn.cat-nav-active{
  background:var(--accent-tint, rgba(122,31,43,.08));
  color:var(--accent,#7a1f2b);
  border-left:3px solid var(--accent,#7a1f2b);
  padding-left:calc(.875rem - 3px);
}
.cat-nav-icon{ width:1.4em; text-align:center; flex-shrink:0; font-size:1rem; }
.cat-nav-label{ flex:1; }
#cat-panel-host{
  overflow-y:auto; overflow-x:hidden; padding:1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--border,#e4e4e7) transparent;
}
.cat-loading{
  display:flex; align-items:center; justify-content:center;
  min-height:200px; color:var(--ink-muted,#a1a1aa); font-size:.875rem;
}
@keyframes catIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.cat-panel{ animation:catIn .18s ease both; }

/* Passage drawer */
.cat-drawer-backdrop{
  display:none; position:fixed; inset:0; top:var(--topbar-h,52px);
  background:rgba(0,0,0,.45); z-index:198;
}
.cat-drawer-backdrop.open{ display:block; }
.cat-passage-drawer{
  position:fixed; right:0; top:var(--topbar-h,52px); width:380px;
  height:calc(100vh - var(--topbar-h,52px));
  height:calc(100dvh - var(--topbar-h,52px));
  background:var(--surface,#fff); border-left:1px solid var(--border,#e4e4e7);
  transform:translateX(100%); transition:transform .28s ease;
  z-index:200; display:flex; flex-direction:column;
}
.cat-passage-drawer.open{ transform:none; }
.cat-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border,#e4e4e7); flex-shrink:0;
}
.cat-drawer-title{ font-weight:600; font-size:.95rem; color:var(--ink,#27272a); }
.cat-drawer-close{
  background:transparent; border:none; color:var(--ink-muted,#a1a1aa);
  cursor:pointer; font-size:1rem; padding:.3rem .5rem; border-radius:5px;
  transition:color .12s;
}
.cat-drawer-close:hover{ color:var(--ink,#27272a); }
.cat-drawer-body{ flex:1; overflow-y:auto; padding:1.25rem; scrollbar-width:thin; }
.cat-sidebar-backdrop{
  display:none; position:fixed; inset:0; top:var(--topbar-h,60px);
  background:rgba(0,0,0,.45); z-index:198;
}
.cat-sidebar-backdrop.open{ display:block; }

/* Auth gate */
#cat-auth-gate{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg,#fafafa); z-index:9000; padding:1.5rem;
}
.cat-auth-card{
  background:var(--surface,#fff); border:1px solid var(--border,#e4e4e7);
  border-radius:var(--r-xl,20px); padding:2.5rem 2rem; max-width:400px; width:100%;
  text-align:center; box-shadow:var(--shadow-3, 0 14px 36px rgba(0,0,0,.12));
}
.cat-auth-icon{ font-size:2.5rem; margin-bottom:.75rem; display:block; }
.cat-auth-card h2{
  font-family:var(--font-serif, Georgia, serif); font-size:1.4rem; font-weight:600;
  color:var(--ink,#27272a); margin:0 0 .6rem;
}
.cat-auth-card p{
  font-size:.875rem; color:var(--ink-muted,#a1a1aa); line-height:1.55; margin:0 0 1.5rem;
}
.cat-auth-btn{
  display:inline-block; padding:10px 22px; background:var(--accent,#7a1f2b); color:#fff;
  border-radius:8px; text-decoration:none; font-weight:600; font-size:.9rem;
  transition:opacity .15s;
}
.cat-auth-btn:hover{ opacity:.88; }

/* Shared panel utilities (legacy) */
.cat-panel-title,
.cat-section-title{ /* legacy sizing intentional */
  font-family:var(--font-serif, Georgia, serif);
}
.cat-pill-bar{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem;
}
.cat-pill{
  padding:.375rem 1rem; border-radius:999px; border:1px solid var(--border,#e4e4e7);
  background:transparent; color:var(--ink-muted,#a1a1aa); font-size:.8125rem; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .1s; white-space:nowrap;
}
.cat-pill:hover,
.cat-pill.active{
  background:var(--accent,#7a1f2b); border-color:var(--accent,#7a1f2b);
  color:#fff; transform:scale(1.03);
}
.cat-verse-chip{
  display:inline-block; padding:.2rem .6rem; border-radius:6px;
  background:var(--surface-2,#f4f4f5); border:1px solid var(--border,#e4e4e7);
  font-size:.75rem; font-weight:500; color:var(--accent,#7a1f2b);
  cursor:pointer; margin:2px; transition:background .12s, color .12s;
}
.cat-verse-chip:hover{ background:var(--accent,#7a1f2b); color:#fff; }
.cat-card{
  background:var(--surface,#fff); border:1px solid var(--border,#e4e4e7);
  border-radius:12px; padding:1rem 1.25rem; margin-bottom:.75rem;
  box-shadow:var(--shadow-1, 0 1px 3px rgba(0,0,0,.06));
  transition:border-color var(--dur-2,180ms), box-shadow var(--dur-2,180ms), transform var(--dur-2,180ms);
}
.cat-card:hover{
  border-color:var(--accent,#7a1f2b);
  box-shadow:var(--shadow-2, 0 4px 14px rgba(0,0,0,.08));
  transform:translateY(-2px);
}
.cat-section-label{
  display:block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-muted,#a1a1aa); margin-bottom:.5rem;
}
.cat-empty{ text-align:center; color:var(--ink-muted,#a1a1aa); font-size:.875rem; padding:2rem 0; }
.cat-error{ color:var(--danger,#b3261e); font-size:.8125rem; line-height:1.5; }
.cat-input,
.cat-textarea,
.cat-select{
  width:100%; padding:.55rem .75rem; background:var(--surface,#fff);
  border:1px solid var(--border,#e4e4e7); border-radius:8px; color:var(--ink,#27272a);
  font-size:16px; font-family:var(--font-sans, sans-serif);
  transition:border-color .15s, box-shadow .15s;
}
.cat-input:focus,
.cat-textarea:focus,
.cat-select:focus{ outline:none; border-color:var(--accent,#7a1f2b); box-shadow:var(--focus); }
.cat-textarea{ min-height:88px; resize:vertical; }
.cat-btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.2rem;
  border-radius:8px; border:none; background:var(--accent,#7a1f2b); color:#fff;
  font-size:.875rem; font-weight:600; letter-spacing:.01em; min-height:2.25rem;
  cursor:pointer; transition:opacity .15s, box-shadow .15s; white-space:nowrap;
}
.cat-btn:hover{ opacity:.88; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.cat-btn:active{ opacity:.75; }
.cat-btn:disabled{ opacity:.5; cursor:not-allowed; }
.cat-btn-ghost{
  background:transparent; border:1.5px solid var(--border,#e4e4e7);
  color:var(--ink-muted,#a1a1aa); box-shadow:none;
}
.cat-btn-ghost:hover{
  opacity:1; background:var(--accent-tint, rgba(122,31,43,.08));
  border-color:var(--accent,#7a1f2b); color:var(--accent,#7a1f2b); box-shadow:none;
}
.cat-btn-sm{ padding:.3rem .75rem; font-size:.8rem; min-height:1.875rem; border-radius:6px; }
.cat-btn-accent{ background:var(--accent,#7a1f2b); color:#fff; }
.cat-btn-danger{ background:transparent; border:1.5px solid var(--danger,#b3261e); color:var(--danger,#b3261e); }
.cat-btn-danger:hover{ background:var(--danger-soft, rgba(179,38,30,.12)); opacity:1; }
.cat-btn-know{ background:#2a7a50; color:#fff; }
.cat-btn-know:hover{ opacity:.88; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.cat-btn-review{ background:var(--surface,#fff); border:1.5px solid var(--border,#e4e4e7); color:var(--ink,#27272a); }
.cat-btn-review:hover{ background:var(--surface-2,#f4f4f5); border-color:var(--ink-muted,#a1a1aa); }
.cat-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.cat-list-item{
  padding:.65rem .8rem; border:1px solid var(--border,#e4e4e7); border-radius:8px;
  background:var(--surface,#fff); transition:border-color .15s, background .15s;
}
.cat-list-item:hover{ border-color:var(--accent,#7a1f2b); background:var(--surface-2,#f4f4f5); }
.cat-stat{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.75rem 1rem; background:var(--surface-2,#f4f4f5); border-radius:10px; text-align:center;
}

/* Difficulty badges */
.cat-diff-beginner{ background:rgba(34,197,94,.12); color:#16a34a; border:1px solid rgba(34,197,94,.30); }
body.theme-dark .cat-diff-beginner{ color:#4ade80; }
.cat-diff-intermediate{ background:var(--accent-tint, rgba(122,31,43,.08)); color:var(--accent,#7a1f2b); border:1px solid var(--accent-soft,#f4e6e8); }
.cat-diff-advanced{ background:rgba(239,68,68,.10); color:#dc2626; border:1px solid rgba(239,68,68,.25); }
body.theme-dark .cat-diff-advanced{ color:#f87171; }

/* Doctrine Map */
.cat-dm-row-even{ background:var(--surface-2, var(--surface,#fff)); }
.cat-dm-chevron{
  display:inline-block; transition:transform .18s var(--ease,ease);
  margin-right:.3rem; font-size:.7rem; color:var(--ink-muted,#a1a1aa);
}
.cat-dm-chevron.open{ transform:rotate(90deg); }

/* AI Debate */
.cat-persona-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.6rem; margin:.75rem 0 1.25rem; }
.cat-mode-list{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }

/* Mastery / quiz */
.cat-quiz-option{
  width:100%; text-align:left; margin-bottom:.4rem; white-space:normal; height:auto;
  padding:.6rem .9rem; font-size:.84rem;
}

/* Camp runner bar (index.html + cat.js) */
#cat-camp-runner{
  display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem;
  background:var(--surface,#fff); border-bottom:1px solid var(--border,#e4e4e7);
  border-top:1px solid var(--border,#e4e4e7); flex-shrink:0; z-index:10;
  grid-column:2;
}
.camp-runner-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.camp-runner-meta{ display:flex; align-items:center; gap:.75rem; }
.camp-runner-title{
  font-weight:600; font-size:.825rem; color:var(--ink,#27272a);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.camp-runner-step{ font-size:.75rem; color:var(--ink-muted,#a1a1aa); white-space:nowrap; flex-shrink:0; }
.camp-runner-instruction-row{ display:flex; }
.camp-runner-instruction{
  font-size:.8rem; color:var(--ink-muted,#a1a1aa); line-height:1.4; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.camp-runner-progress-track{ height:3px; background:var(--border,#e4e4e7); border-radius:2px; overflow:hidden; margin-top:.25rem; }
.camp-runner-progress{ height:100%; background:var(--accent,#7a1f2b); border-radius:2px; transition:width .3s ease; }
.camp-runner-actions{ display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
#cat-app:has(#cat-camp-runner[style*="flex"]){ grid-template-rows:auto 1fr; }
#cat-app:has(#cat-camp-runner[style*="flex"]) #cat-camp-runner{ grid-row:1; grid-column:2; }
#cat-app:has(#cat-camp-runner[style*="flex"]) #cat-panel-host{ grid-row:2; grid-column:2; }
#cat-app:has(#cat-camp-runner[style*="flex"]) #cat-sidebar{ grid-row:1 / span 2; }
@media (max-width:840px){
  #cat-camp-runner{ grid-column:1; flex-wrap:wrap; }
  .camp-runner-actions{ width:100%; justify-content:flex-end; }
}

/* Camp modals */
.camp-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex;
  align-items:center; justify-content:center; z-index:9100; padding:1rem;
}
.camp-modal{
  background:var(--surface,#fff); border:1px solid var(--border,#e4e4e7);
  border-radius:14px; padding:2rem 1.75rem; max-width:400px; width:100%;
  text-align:center; box-shadow:var(--shadow-3, 0 8px 32px rgba(0,0,0,.18));
}
.camp-modal-icon{ font-size:2.5rem; margin-bottom:.75rem; }
.camp-modal-title{
  font-family:var(--font-serif, Georgia, serif); font-size:1.3rem; font-weight:700;
  color:var(--ink,#27272a); margin:0 0 .6rem;
}
.camp-modal-body{ font-size:.875rem; color:var(--ink-muted,#a1a1aa); line-height:1.5; margin:0 0 1.25rem; }
.camp-modal-actions{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }

/* Legacy responsive */
@media (max-width:1024px){
  #cat-app{ grid-template-columns:180px 1fr; }
  .cat-nav-label{ font-size:.775rem; }
  .cat-passage-drawer{ max-width:320px; }
}
@media (max-width:840px){
  #cat-app{ grid-template-columns:1fr; }
  #cat-sidebar{
    position:fixed; top:var(--topbar-h,60px); left:0; bottom:0;
    width:min(80vw,280px); transform:translateX(-100%);
    transition:transform .28s ease; z-index:200; box-shadow:var(--shadow-3, 0 14px 36px rgba(0,0,0,.12));
    border-right:1px solid var(--border,#e4e4e7); flex-direction:column;
    overflow-y:auto; overflow-x:hidden;
  }
  #cat-sidebar.cat-sidebar-open{ transform:none; }
  .cat-passage-drawer{ width:100%; }
  .cat-sidebar-toggle{ display:block; }
}

/* Legacy print */
@media print{
  #cat-sidebar,.cat-drawer-backdrop,#cat-passage-drawer,.cat-pill-bar,
  .cat-panel-desc,#cat-dm-controls{ display:none !important; }
  #cat-app{ display:block !important; }
  #cat-panel-host{ overflow:visible; padding:0; }
}