/* ============================================================
   Storyteller App — Components
   Buttons, inputs, cards, modals, agent panels, chat, sheets
   ============================================================ */

/* ── Utility ───────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-auto { margin-top: auto; }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-primary);
  line-height: 1.2;
}

.view-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--c-red-200);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border-strong);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-3);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition:
    background var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth),
    transform var(--dur-instant) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Primary — blood red */
.btn-primary {
  background: var(--c-red-500);
  border-color: var(--c-red-400);
  color: var(--c-white);
}
.btn-primary:hover:not(:disabled) {
  background: var(--c-red-400);
  box-shadow: var(--shadow-red);
}

/* Secondary */
.btn-secondary {
  background: var(--c-bg-500);
  border-color: var(--c-border-medium);
  color: var(--c-text-primary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--c-bg-400);
  border-color: var(--c-red-700);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  border-color: var(--c-border-medium);
  color: var(--c-text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: hsla(0,0%,100%,0.05);
  color: var(--c-text-primary);
}

/* Gold — ST authority actions */
.btn-gold {
  background: hsla(43, 90%, 48%, 0.15);
  border-color: var(--c-gold-500);
  color: var(--c-gold-300);
}
.btn-gold:hover:not(:disabled) {
  background: hsla(43, 90%, 48%, 0.25);
  box-shadow: var(--shadow-gold);
}

/* Danger */
.btn-danger {
  background: hsla(0, 80%, 20%, 0.5);
  border-color: var(--c-red-700);
  color: var(--c-red-200);
}
.btn-danger:hover:not(:disabled) {
  background: hsla(0, 80%, 25%, 0.7);
  box-shadow: var(--shadow-red);
}

/* Agent-colored button */
.btn-agent {
  background: var(--agent-color, var(--c-agent-storyteller));
  border-color: transparent;
  color: var(--c-white);
  opacity: 0.9;
}
.btn-agent:hover:not(:disabled) { opacity: 1; }

/* Icon button (circle) */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-full);
  font-size: var(--text-md);
}

/* Sizes */
.btn-sm { font-size: var(--text-xs); padding: var(--sp-2) var(--sp-3); min-height: 32px; }
.btn-lg { font-size: var(--text-md); padding: var(--sp-3) var(--sp-6); }

/* Floating action button */
.fab {
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  border: none;
  transition:
    box-shadow var(--dur-fast) var(--ease-smooth),
    transform var(--dur-instant) var(--ease-smooth),
    background var(--dur-fast);
  box-shadow: var(--shadow-lg);
}
.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(0.95); }

.fab-primary { background: var(--c-red-500); color: var(--c-white); }
.fab-primary:hover { box-shadow: var(--shadow-red), var(--shadow-lg); }

.fab-neutral { background: var(--c-bg-500); color: var(--c-text-primary); }
.fab-neutral:hover { background: var(--c-bg-400); }

.fab-gold { background: hsla(43, 90%, 30%, 0.9); color: var(--c-gold-300); }
.fab-gold:hover { box-shadow: var(--shadow-gold), var(--shadow-lg); }

.fab-combat { background: var(--c-red-500); color: var(--c-white); animation: pulse-combat 1.5s infinite; }

/* ── Inputs ────────────────────────────────────────────────── */
.input {
  background: var(--c-bg-400);
  border: 1px solid var(--c-border-medium);
  color: var(--c-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  width: 100%;
  transition:
    border-color var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth);
  outline: none;
}
.input::placeholder { color: var(--c-text-disabled); }
.input:focus {
  border-color: var(--c-red-500);
  box-shadow: 0 0 0 3px hsla(0, 72%, 40%, 0.15);
}

textarea.input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-right: 30px;
  cursor: pointer;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--c-bg-500);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-smooth);
}
.card:hover { border-color: var(--c-red-700); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border-subtle);
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Chat Messages ─────────────────────────────────────────── */
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: slideInMsg var(--dur-fast) var(--ease-out-quart);
}

.chat-msg-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.chat-msg-sender {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.chat-msg-sender.system   { color: var(--c-text-muted); }
.chat-msg-sender.player   { color: var(--c-red-300); }
.chat-msg-sender.storyteller { color: var(--c-gold-400); }
.chat-msg-sender.agent    { color: var(--c-agent-storyteller); }

.chat-msg-time {
  font-size: 10px;
  color: var(--c-text-muted);
}

.chat-msg-body {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  line-height: 1.5;
  padding-left: var(--sp-1);
}
.chat-msg-body em { color: var(--c-text-muted); font-style: italic; }
.chat-msg-body strong { color: var(--c-text-primary); font-weight: 600; }

/* System messages (dice rolls, events) */
.chat-msg.system-msg .chat-msg-body {
  color: var(--c-text-muted);
  font-style: italic;
  font-size: var(--text-xs);
}

/* Agent narration messages */
.chat-msg.agent-msg .chat-msg-body {
  color: var(--c-text-secondary);
  font-style: italic;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--c-agent-storyteller);
  background: hsla(271, 30%, 15%, 0.3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Dice roll result in chat */
.dice-result-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--c-bg-400);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-primary);
  border: 1px solid var(--c-border-medium);
}
.dice-result-inline.success { border-color: var(--c-success); color: hsl(142, 70%, 60%); }
.dice-result-inline.failure { border-color: var(--c-red-700); color: var(--c-red-300); }
.dice-result-inline.botch   { border-color: var(--c-error); color: var(--c-red-200); animation: shake 0.4s ease; }

/* ── Agent Response Panel ──────────────────────────────────── */
.agent-response {
  background: var(--c-bg-600);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: slideInMsg var(--dur-normal) var(--ease-out-quart);
}

.agent-response-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.agent-badge[data-agent="storyteller"] {
  background: hsla(271, 55%, 45%, 0.2);
  border: 1px solid var(--c-agent-storyteller);
  color: var(--c-agent-storyteller);
}
.agent-badge[data-agent="tactician"] {
  background: hsla(0, 78%, 45%, 0.2);
  border: 1px solid var(--c-agent-tactician);
  color: var(--c-agent-tactician);
}
.agent-badge[data-agent="rules"] {
  background: hsla(208, 80%, 45%, 0.2);
  border: 1px solid var(--c-agent-rules);
  color: var(--c-agent-rules);
}
.agent-badge[data-agent="disciplines"] {
  background: hsla(340, 72%, 45%, 0.2);
  border: 1px solid var(--c-agent-disciplines);
  color: var(--c-agent-disciplines);
}
.agent-badge[data-agent="lorekeeper"] {
  background: hsla(142, 55%, 35%, 0.2);
  border: 1px solid var(--c-agent-lorekeeper);
  color: var(--c-agent-lorekeeper);
}
.agent-badge[data-agent="npc"] {
  background: hsla(32, 90%, 45%, 0.2);
  border: 1px solid var(--c-agent-npc);
  color: var(--c-agent-npc);
}

.agent-response-body {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  line-height: 1.65;
}
.agent-response-body em { color: var(--c-text-muted); }
.agent-response-body strong { color: var(--c-text-primary); font-weight: 600; }
.agent-response-body p { margin-bottom: var(--sp-2); }
.agent-response-body p:last-child { margin-bottom: 0; }

/* Agent thinking indicator */
.agent-thinking {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-600);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-lg);
  color: var(--c-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}
.thinking-dots span {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: currentColor;
  margin: 0 1px;
  animation: thinking-dot 1.2s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Quick prompt chips */
.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
}
.prompt-chip {
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--c-border-medium);
  background: var(--c-bg-500);
  color: var(--c-text-secondary);
  font-size: var(--text-xs);
  cursor: pointer;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
  white-space: nowrap;
  user-select: none;
}
.prompt-chip:hover {
  background: var(--c-bg-400);
  border-color: var(--c-red-700);
  color: var(--c-text-primary);
}

/* Dice suggestion card from agent */
.dice-suggestion-card {
  background: var(--c-bg-500);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast);
}
.dice-suggestion-card:hover {
  border-color: var(--c-red-500);
  background: var(--c-bg-400);
}
.dice-pool-display {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-red-300);
  min-width: 40px;
  text-align: center;
}
.dice-pool-label {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

/* ── Login Card ────────────────────────────────────────────── */
.login-card {
  background: var(--c-bg-600);
  border: 1px solid var(--c-gold-700);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-8);
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(139, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  backdrop-filter: blur(10px);
}

.login-logo {
  text-align: center;
  margin-bottom: var(--sp-2);
}
.login-logo h1 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--c-parchment);
  text-shadow: 0 0 12px rgba(139, 0, 0, 0.7);
  letter-spacing: 0.12em;
  margin: 0;
}
.login-logo p {
  color: var(--c-gold-400);
  font-size: 0.82rem;
  margin-top: 4px;
  font-style: italic;
  letter-spacing: 0.06em;
}

.login-card .input {
  background: var(--c-bg-800) !important;
  color: var(--c-parchment) !important;
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-card .input:focus {
  border-color: var(--c-gold-500) !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.3) !important;
  outline: none;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: var(--sp-1) 0;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border-medium);
}

/* ── View Panel Headers ────────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  flex-shrink: 0;
}

/* ── Dot Rating (character sheet) ──────────────────────────── */
.dot-rating {
  display: inline-flex;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-text-muted);
  background: transparent;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.dot.filled {
  background: var(--c-red-500);
  border-color: var(--c-red-400);
  box-shadow: 0 0 4px var(--c-red-500);
}
.dot-rating:hover .dot { border-color: var(--c-red-400); }
.dot-rating .dot:hover,
.dot-rating .dot:hover ~ .dot { background: hsla(0, 72%, 45%, 0.3) !important; }

/* ── Health Track ──────────────────────────────────────────── */
.health-track {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.health-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  background: var(--c-bg-500);
  border: 1px solid var(--c-border-subtle);
  transition: background var(--dur-fast);
}
.health-level.damaged    { background: hsla(0, 60%, 15%, 0.5); border-color: var(--c-red-700); }
.health-level.aggravated { background: hsla(0, 80%, 10%, 0.7); border-color: var(--c-red-500); }

.health-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--c-border-medium);
  border-radius: var(--r-xs);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  transition: all var(--dur-fast);
}
.health-check.superficial { background: var(--c-red-700); border-color: var(--c-red-500); color: white; }
.health-check.aggravated  { background: var(--c-red-900); border-color: var(--c-red-700); color: var(--c-red-200); }

/* ── Quick Stat Bar (sidebar) ──────────────────────────────── */
.quick-stat-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 55px;
  flex-shrink: 0;
}

.blood-pool {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.blood-dot {
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-red-700);
  background: transparent;
  transition: all var(--dur-fast);
}
.blood-dot.filled {
  background: var(--c-red-500);
  box-shadow: 0 0 3px var(--c-red-500);
}

.willpower-dots {
  display: flex;
  gap: 3px;
}
.will-dot {
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-border-medium);
  background: transparent;
  transition: all var(--dur-fast);
}
.will-dot.filled { background: hsl(208, 80%, 54%); border-color: hsl(208, 80%, 65%); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-smooth);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--glass-bg, var(--c-bg-700));
  backdrop-filter: var(--glass-blur, blur(10px));
  border: var(--glass-border, 1px solid var(--c-border-strong));
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95) translateY(16px);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border-strong);
}
.modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--c-red-200);
}
.modal-close {
  background: none; border: none;
  color: var(--c-text-muted);
  font-size: var(--text-xl);
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
  line-height: 1;
}
.modal-close:hover { color: var(--c-text-primary); background: var(--c-bg-400); }

.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.modal-footer {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border-subtle);
}

/* ── Toast notifications ───────────────────────────────────── */
#toast-container {
  position: fixed;
  top: calc(var(--topbar-h) + var(--sp-4));
  right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  background: var(--c-bg-600);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  animation: slideInToast var(--dur-normal) var(--ease-spring) forwards;
  pointer-events: all;
  max-width: 320px;
}
.toast.success { border-color: var(--c-success); }
.toast.error   { border-color: var(--c-error); }
.toast.warning { border-color: var(--c-warning); }
.toast.info    { border-color: var(--c-agent-rules); }

/* ── Popup Panel (floating) ────────────────────────────────── */
.popup-panel {
  position: fixed;
  bottom: calc(var(--sp-6) + 52px + var(--sp-3));
  right: var(--sp-6);
  background: var(--glass-bg, var(--c-bg-700));
  backdrop-filter: var(--glass-blur, blur(10px));
  border: var(--glass-border, 1px solid var(--c-border-strong));
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  width: 340px;
  box-shadow: var(--shadow-xl);
  z-index: var(--z-floating);
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
}
.popup-panel.open { display: flex; animation: popIn var(--dur-normal) var(--ease-spring); }

/* ── V20 Character Sheet ───────────────────────────────────── */
.v20-sheet {
  background: var(--c-bg-700);
  color: var(--c-text-primary);
  border: 1px solid var(--c-border-strong);
  font-family: var(--font-body);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* V20 Layouts */
.v20-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.v20-col {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v20-col h3 {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-border-medium);
  padding-bottom: 4px;
  margin-bottom: 10px;
  color: var(--c-red-200);
}
.v20-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.v20-field label {
  font-family: var(--font-body);
  font-size: 0.9em;
  color: var(--c-text-secondary);
  flex-shrink: 0;
}
.v20-field input[type="text"], .v20-field input[type="number"] {
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.2) !important;
  border: none;
  border-bottom: 1px dashed var(--c-border-medium);
  color: var(--c-text-primary) !important;
  font-family: var(--font-body);
  outline: none;
  border-radius: 4px 4px 0 0;
  padding: 4px 8px;
}
.v20-field input:focus {
  border-bottom-color: var(--c-red-500);
}
.v20-textarea {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px dashed var(--c-border-medium);
  color: var(--c-text-primary) !important;
  font-family: var(--font-body);
  outline: none;
  border-radius: 4px;
  padding: 8px;
  resize: vertical;
  height: 40px;
}
.v20-textarea:focus {
  border-color: var(--c-red-500);
}
.v20-subcol-title {
  text-align: center;
  font-style: italic;
  font-size: 0.8em;
  color: var(--c-text-muted);
  margin-top: 10px;
  margin-bottom: 5px;
}
.v20-field .dot-rating {
  flex-shrink: 0;
  color: var(--c-text-primary);
}
.v20-field .dot {
  color: var(--c-text-primary);
  cursor: pointer;
}

.sheet-tabs {
  display: flex;
  gap: 4px;
  padding: var(--sp-2);
  background: var(--c-bg-700);
  border-bottom: 1px solid var(--c-border-strong);
  overflow-x: auto;
}

.sheet-tab-btn {
  background: var(--c-bg-800);
  border: 1px solid var(--c-border-medium);
  color: var(--c-text-secondary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all var(--dur-fast);
}
.sheet-tab-btn:hover {
  background: var(--c-bg-600);
  color: var(--c-text-primary);
}
.sheet-tab-btn.active {
  background: hsla(0, 75%, 35%, 0.25);
  border-color: var(--c-red-500);
  color: var(--c-red-200);
}
.sheet-tab-content { display: none; padding: var(--sp-5); }
.sheet-tab-content.active { display: block; }

/* Discipline Cards on sheet */
.discipline-card {
  background: var(--c-bg-500);
  border: 1px solid var(--c-border-medium);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  transition: border-color var(--dur-fast);
}
.discipline-card:hover { border-color: var(--c-agent-disciplines); }
.discipline-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--c-red-200);
}
.discipline-level {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

/* ── Table ─────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border-medium);
  text-align: left;
}
.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-text-secondary);
}
.data-table tr:hover td { background: var(--c-bg-500); }

/* ── Scrollbars ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-medium); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }

/* ── Thematic Classes ── */
.obsidian-frame {
    border: 2px solid var(--c-bg-900);
    box-shadow: inset 0 0 10px hsla(0, 80%, 25%, 0.5), 0 4px 6px rgba(0,0,0,0.8);
    border-radius: var(--r-md);
}

.glass-panel {
    backdrop-filter: var(--glass-blur, blur(12px));
    background: var(--glass-bg, hsla(0, 0%, 5%, 0.75));
    border-top: var(--glass-border, 1px solid hsla(0, 0%, 100%, 0.1));
}

/* Automatic Roller Glow Feedback */
.glow-highlight {
    box-shadow: 0 0 12px var(--c-gold-400) !important;
    border-color: var(--c-gold-500) !important;
    transition: box-shadow 0.2s, border-color 0.2s;
}

/* ── Session Cards ─────────────────────────────────────────── */
.session-card {
  background: var(--c-bg-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.session-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: var(--c-border-hover);
}
.session-card-header {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: var(--c-bg-surface);
}
.session-card-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
}
.session-card-title-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  z-index: 1;
}
.session-card-number {
  font-size: var(--text-xs);
  color: var(--c-primary);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  display: block;
}
.session-card-title {
  font-size: var(--text-lg);
  color: white;
  margin: 0;
  font-family: var(--font-heading);
}
.session-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.session-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  margin-bottom: 0.75rem;
}
.session-card-summary {
  font-size: var(--text-sm);
  color: var(--c-text-body);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;
}
.session-card-attendees {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: auto;
}
.attendee-badge {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-primary);
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}