/* ── RULES PANEL ── */
.rules-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-mid);
  color: var(--accent);
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  user-select: none;
}
.rules-toggle:hover { background: var(--accent-mid); transform: translateY(-1px); }
.rules-toggle svg { transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.rules-toggle.open svg { transform: rotate(180deg); }

.rules-panel {
  display: none;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  animation: panelSlide 0.25s cubic-bezier(.22,.68,0,1.2) both;
}
.rules-panel.open { display: block; }
@keyframes panelSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.rules-panel-head {
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.rule-chunk {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-2);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-mid);
  font-weight: 300;
}
.rule-chunk:last-child { border-bottom: none; }

/* legacy meta (chunk mode) */
.rule-chunk-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rule-chunk-meta .rule-page {
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.rule-chunk-text { white-space: pre-wrap; }

/* structured mode */
.rule-chunk-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.rule-id {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.rule-title {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.rule-source {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid var(--border-2);
  white-space: nowrap;
}

.rule-structured { white-space: normal; }
/* Residual headings — not expected in new format but kept as fallback */
.rule-structured h2 { display: none; }
.rule-structured h3,
.rule-structured h4,
.rule-structured h5,
.rule-structured h6 {
  font-family: var(--font-b);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mid);
  margin: 8px 0 4px;
}
.rule-structured p { margin: 4px 0; color: var(--ink-mid); }
.rule-structured strong { color: var(--ink); }

/* ── CITED CHIPS ── */
.cited-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-mid);
  border-radius: 8px;
}
.cited-chips-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.cited-chip {
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent-mid);
  border-radius: 14px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  letter-spacing: -0.01em;
}
.cited-chip:hover  { background: var(--accent-mid); transform: translateY(-1px); }
.cited-chip:active { transform: translateY(0); }

/* ── RULE LINES ── */
.rule-structured .rule-line {
  margin: 4px 0;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mid);
  /* indentation based on rule-id depth (8-2 = 2, 8-2-1 = 3, …) */
  margin-left: calc((var(--rule-depth, 2) - 2) * 14px);
}
.rule-structured .rule-line strong {
  color: var(--accent);
  font-weight: 700;
  margin-right: 5px;
  letter-spacing: -0.01em;
}

/* ── CITED RULE HIGHLIGHT ── */
.rule-structured .cited-rule {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  padding: 7px 10px;
  border-radius: 0 4px 4px 0;
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--ink);
  scroll-margin-top: 14px;
}
.rule-structured .cited-rule strong { color: var(--accent); }
@keyframes citedFlash {
  0%   { background: var(--accent); color: white; }
  100% { background: var(--accent-dim); color: var(--ink); }
}
.rule-structured .cited-rule.cited-flash { animation: citedFlash 1.2s ease; }

/* Dim non-cited rules when citations exist */
.rule-structured.has-cited .rule-line:not(.cited-rule) {
  opacity: 0.32;
  transition: opacity 0.25s;
}
.rule-structured.has-cited:hover .rule-line:not(.cited-rule) {
  opacity: 0.65;
}

/* ── ADDITIONAL CONTEXT SECTION ── */
.rules-context-section {
  margin-top: 4px;
  border-top: 1px dashed var(--border);
}
.rules-context-toggle {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s, background 0.15s;
}
.rules-context-toggle:hover { color: var(--ink-mid); background: var(--surface-2); }
.rules-context-toggle svg { transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.rules-context-toggle.open svg { transform: rotate(180deg); }

.rules-context-body { display: none; border-top: 1px solid var(--border-2); }
.rules-context-body.open { display: block; }
.rules-context-body .rule-chunk { background: var(--surface-2); opacity: 0.85; }
.rules-context-body .rule-chunk:hover { opacity: 1; }