/* Rule articles and combat share reading styles; navigation uses RG/RD. */
/* Simulator inside the existing RD reading surface, not a second page frame. */
#routeContent #combatAtlas { container-type:inline-size; margin:16px 0 0; padding:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
#combatAtlas .combat-atlas-body { padding:0; border:0; }
#combatAtlas :is(.combatant-card,.combat-results > article,.combat-run-toolbar,.combat-live-actor,.combat-live-object,.combat-log,.combat-rankings,.combat-simulator-evidence) { border:1px solid var(--route-line); border-radius:12px; background:#fffdf8; box-shadow:none; }
#combatAtlas :is(.combatant-card,.combat-results > article) { padding:16px; min-width:0; }
#combatAtlas :is(.combat-target-switch,.combat-lab-tabs,.combatant-statline > span,.combat-result-metrics > div,.combat-run-readout > div,.combat-ranking-grid article) { color:var(--route-deep); border-color:var(--route-line); background:var(--route-soft); }
#combatAtlas :is(.combat-target-switch strong,.combat-target-switch .page-kicker,.combatant-statline b) { color:var(--route-deep); }
#combatAtlas :is(.combatant-letter,.combat-versus span) { color:#fffdf8; background:var(--route-deep); box-shadow:none; border:0; }
#combatAtlas :is(.combat-target-switch button,.combat-lab-tabs button) { border:1px solid transparent; border-radius:8px; color:var(--route-deep); background:transparent; }
#combatAtlas :is(.combat-target-switch button,.combat-lab-tabs button):is(:hover,:focus-visible) { border-color:var(--route-accent); background:#fffdf8; }
#combatAtlas :is(.combat-target-switch button.active,.combat-lab-tabs button.active) { color:#fffdf8; background:var(--route-deep); box-shadow:none; }
#combatAtlas .combat-target-switch > div:last-child { flex-wrap:wrap; border-radius:8px; background:transparent; }
#combatAtlas .combat-field-pair { grid-template-columns:1fr; }
#combatAtlas .combatant-statline { grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); }
#combatAtlas :is(.combat-field select,.combat-select-search,.combat-adjustment-grid select,.combat-adjustment-grid input[type="number"],.combat-run-toolbar input) { border-color:var(--route-line); border-radius:8px; color:var(--ink); background:#fffdf8; }
#routeContent #combatAtlas :is(input,select,button) { font-family:var(--font-ui); font-size:var(--type-ui); line-height:1.4; }
#routeContent #combatAtlas :is(.combat-field > label,.combat-field > span,.combat-adjustment-grid label > span,.combat-run-toolbar label > span) { font-size:var(--type-small); font-weight:650; letter-spacing:0; text-transform:none; }
#combatAtlas .combat-field > small:empty { display:none; }
#combatAtlas .combat-selection-info { margin-top:12px; }
#routeContent #combatAtlas .combat-selection-info p { font-size:var(--type-small); line-height:1.6; }
#combatAtlas .combat-quick-guide { margin-bottom:16px; border-bottom:1px solid var(--route-line); padding:0 0 12px; }
#combatAtlas .combat-quick-guide summary { color:var(--route-deep); cursor:pointer; font-weight:650; }
#combatAtlas .combat-quick-guide p { max-width:75ch; }
#combatAtlas .combat-repeat-shots { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
#combatAtlas .combat-mode-note { color:var(--ink-soft); background:var(--route-soft); border-left-color:var(--route-accent); }
#combatAtlas .combat-run-toolbar { margin-top:12px; grid-template-columns:1fr; }
#combatAtlas .combat-log ol { max-height:none; overflow:visible; }
#combatAtlas .combat-log .log-start { border-left-color:var(--route-accent); }
#combatAtlas .combat-power { color:var(--route-deep); border-color:var(--route-line); background:var(--route-soft); }
#combatAtlas .combatant-statline .combat-weapon-bonus { grid-column:1 / -1; }
@container (max-width:850px) {
  #combatAtlas :is(.combat-matchup,.combat-results,.combat-live-state) { grid-template-columns:1fr; }
  #combatAtlas .combat-versus { min-height:40px; }
  #combatAtlas .combat-versus i { display:none; }
  #combatAtlas .combat-result-divider span { writing-mode:horizontal-tb; }
  #combatAtlas .combat-target-switch { align-items:stretch; flex-direction:column; }
}
:is(#combatRunPanel, #combatComparePanel) > .combat-mode-note { box-sizing:border-box; width:100%; max-width:none; }
.guide-frame .guide-body .rules-topic { margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
.guide-addon + .guide-addon { margin-top:24px; padding-top:20px; border-top:1px solid var(--route-line); }
.guide-addon { scroll-margin-top:calc(var(--topbar-h) + 20px); }
.guide-frame .guide-addon h2 { font-size:var(--type-section-title); }
body:is([data-route="mechanics"],[data-route="combat"]) {
  --rules-copper-ink: #80502c;
  --rules-surface: #fffdf8;
  --rules-reading-line: var(--route-line);
}

body:is([data-route="mechanics"],[data-route="combat"]) #routeContent { min-width: 0; }

body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 7px;
  margin: 0 0 24px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--route-line);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--route-line);
  border-radius: 8px;
  color: var(--route-deep);
  background: var(--rules-surface);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav :is(a, button):hover {
  border-color: var(--route-accent);
  background: var(--route-soft);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav :is(.active, [aria-current="page"]) {
  border-color: var(--route-accent);
  color: white;
  background: var(--route-accent);
  box-shadow: inset 0 -3px var(--route-secondary);
}

body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter,
body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter-body { min-width: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter > header {
  max-width: 1000px;
  margin-bottom: 19px;
  overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter > header h2 {
  margin: 0 0 10px;
  color: var(--route-deep);
  font: 750 clamp(1.55rem, 2.2vw, 1.95rem)/1.2 var(--font-editorial);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter > header p {
  max-width: 75ch;
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter > header > :last-child { margin-bottom: 0; }

body:is([data-route="mechanics"],[data-route="combat"]) .rules-contents,
body:is([data-route="mechanics"],[data-route="combat"]) .rules-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 1000px;
  padding: 0;
  list-style: none;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-contents { margin: 0 0 23px; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-related { margin: 22px 0 0; }
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents, .rules-related) > :is(h3, h4, strong) {
  flex-basis: 100%;
  margin: 0 0 3px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.5;
}
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents, .rules-related) li { margin: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents, .rules-related) :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--route-line);
  border-radius: 7px;
  color: var(--route-accent-ink);
  background: #f1f7f5;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents, .rules-related) :is(a, button):hover {
  border-color: var(--route-accent);
  background: var(--route-soft);
  text-decoration: underline;
  text-underline-offset: .18em;
}

body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic {
  min-width: 0;
  max-width: 1000px;
  margin: 0 0 22px;
  padding: clamp(22px, 3vw, 35px);
  border: 1px solid var(--rules-reading-line);
  border-top: 3px solid var(--route-accent);
  border-radius: 11px;
  color: var(--ink);
  background: var(--rules-surface);
  box-shadow: 0 5px 18px #173b3707;
  line-height: 1.7;
  overflow-wrap: anywhere;
  scroll-margin-top: calc(var(--topbar-h) + 18px);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic > :last-child { margin-bottom: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic :is(h3, h4) { color: var(--route-deep); }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic > header { margin-bottom: 18px; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic > header h3,
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic > h3 {
  max-width: 50ch;
  margin: 0 0 12px;
  font: 750 clamp(1.35rem, 1.9vw, 1.65rem)/1.22 var(--font-editorial);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic h4 {
  margin: 23px 0 9px;
  font-size: 1rem;
  line-height: 1.4;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic p {
  max-width: 75ch;
  margin: 0 0 15px;
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.75;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic .rules-lead {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 1.035rem;
  line-height: 1.7;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic :is(code, kbd) {
  font-family: var(--font-code);
  font-size: .88em;
  white-space: normal;
  overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic p a {
  color: var(--route-accent-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic:is(:target, .rules-target) {
  border-color: var(--route-accent);
  box-shadow: 0 0 0 2px #1d6f7526, 0 6px 20px #173b370b;
}

body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps {
  max-width: 75ch;
  margin: 21px 0 24px;
  padding-left: 1.9rem;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li {
  padding: 0 0 18px 8px;
  color: var(--ink-soft);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li::marker {
  color: var(--route-accent-ink);
  font: 800 1rem/1.5 var(--font-code);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li:last-child { padding-bottom: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li > strong {
  display: block;
  margin-bottom: 5px;
  color: var(--route-deep);
  font-size: .96rem;
  line-height: 1.5;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li > p { margin-bottom: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li > p + p { margin-top: 9px; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-points {
  max-width: 75ch;
  margin: 18px 0 23px;
  padding-left: 1.4rem;
  color: var(--ink-soft);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-points > li { margin: 9px 0; padding-left: 4px; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-points > li::marker { color: var(--route-accent); }

body:is([data-route="mechanics"],[data-route="combat"]) .rules-example {
  max-width: 75ch;
  margin: 22px 0;
  padding: 18px 21px;
  border: 1px solid #dfcdb9;
  border-left: 4px solid #b77947;
  border-radius: 0 9px 9px 0;
  background: #f8f1e8;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-example h4 {
  margin: 0 0 8px;
  color: var(--rules-copper-ink);
  font-size: .94rem;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-example p { color: #574c40; font-size: .92rem; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-example > :last-child { margin-bottom: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic .rules-limits {
  max-width: 75ch;
  margin: 21px 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--rules-reading-line);
  color: #59605a;
  font-size: .88rem;
  line-height: 1.65;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-limits p { font-size: inherit; line-height: inherit; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-limits > :last-child { margin-bottom: 0; }

body:is([data-route="mechanics"],[data-route="combat"]) details.rules-sources {
  max-width: 75ch;
  margin-top: 23px;
  padding: 0 15px;
  border: 1px solid #d2dcd5;
  border-radius: 8px;
  color: var(--ink-soft);
  background: #f1f4ef;
  font-size: .84rem;
  line-height: 1.65;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-sources > summary {
  display: list-item;
  min-height: 44px;
  padding: 12px 0;
  color: var(--route-deep);
  font-weight: 750;
  line-height: 1.5;
  cursor: pointer;
  overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-sources[open] > summary {
  margin-bottom: 13px;
  border-bottom: 1px solid #d2dcd5;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-sources > :last-child:not(summary) { margin-bottom: 15px; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-sources :is(button, a.button) {
  min-height: 44px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid #b3c8bd;
  border-radius: 7px;
  color: var(--route-accent-ink);
  background: white;
  font-size: .81rem;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-sources :is(button, a.button):hover {
  border-color: var(--route-accent);
  background: var(--route-soft);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-sources :is(.button-row, .rules-source-links) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-nav, .rules-chapter) :is(button, a, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--route-accent);
  outline-offset: 2px;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic:focus-visible {
  outline: 3px solid var(--route-accent);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  body:is([data-route="mechanics"],[data-route="combat"]) .workspace { padding-top: 16px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav { gap: 6px; margin-bottom: 19px; padding-bottom: 12px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav :is(a, button) { flex: 1 1 auto; padding: 9px 11px; font-size: .8rem; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter > header h2 { font-size: 1.5rem; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-chapter > header p { font-size: .95rem; line-height: 1.65; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-contents { gap: 6px; margin-bottom: 18px; }
  body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents, .rules-related) :is(a, button) { padding: 9px 10px; font-size: .8rem; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic { margin-bottom: 17px; padding: 23px 18px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic p { font-size: .95rem; line-height: 1.7; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic .rules-lead { font-size: 1rem; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-example { padding: 16px; }
}

@media (max-width: 400px) {
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav :is(a, button) { flex-basis: 42%; padding-right: 9px; padding-left: 9px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic { padding: 21px 14px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps { padding-left: 1.55rem; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li { padding-left: 4px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-example { padding: 14px 12px; }
  body:is([data-route="mechanics"],[data-route="combat"]) details.rules-sources { padding-right: 12px; padding-left: 12px; }
}

/* Shared Petrol controls, matching the room readers. The article flow and
   semantic combat/evidence colors stay separate from navigation styling. */
body:is([data-route="mechanics"],[data-route="combat"]) .rules-layout {
  display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  align-items: start; gap: 20px;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-index {
  position: sticky; top: calc(var(--topbar-h) + 16px);
  display: flex; flex-direction: column; min-width: 0;
  max-height: calc(100dvh - var(--topbar-h) - 32px);
  overflow: hidden;
  border: 1px solid var(--route-line); border-top: 5px solid var(--route-accent);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--route-soft), #faf7f0 190px);
  box-shadow: 0 12px 34px #16232c13;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-filter {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px;
  padding: 12px 10px 10px;
  background: #fffdf7d9;
  border-bottom: 1px solid var(--route-line);
  backdrop-filter: blur(7px);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-filter > label {
  color: var(--route-accent-ink);
  font: 650 var(--type-small)/1.5 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #rulesCount {
  grid-column: 2; grid-row: 1; align-self: end;
  color: var(--ink-soft); text-align: right;
  font: 400 var(--type-meta)/1.5 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #rulesSearch,
body:is([data-route="mechanics"],[data-route="combat"]) .rules-mobile-picker { grid-column: 1 / -1; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-mobile-picker { display: none; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav {
  display: grid; grid-auto-rows: max-content; flex: 1 1 auto;
  min-height: 0; gap: 0; margin: 0; padding: 8px 10px 10px;
  overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: stable;
  scrollbar-color: var(--route-accent) var(--route-soft); border: 0;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav a {
  display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: 10px;
  align-items: start; min-height: 43px; margin: 2px 0;
  padding: 10px; text-align: left;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--ink);
  font: 650 var(--type-ui)/var(--type-ui-leading) var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav a > span:last-child { min-width: 0; overflow-wrap: anywhere; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav a[hidden] { display: none; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav a:hover {
  color: var(--ink); border-color: var(--route-line); background: #ffffffbd;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav a.active {
  color: white; border-color: var(--route-deep); background: var(--route-deep);
  box-shadow: inset 4px 0 var(--route-accent), 0 5px 14px #16232c20;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-index-marker {
  display: block; min-width: 2.2em;
  padding: 0; border-radius: 0; white-space: nowrap;
  color: var(--route-accent-ink); background: transparent;
  font: 650 var(--type-ui)/var(--type-ui-leading) var(--font-code);
  font-variant-numeric: tabular-nums;
}
body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav a.active .rules-index-marker { color: #fff2cb; background: transparent; }
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent :is(.button, .chip:not(.passive), .rules-related a, .inter-links a, .inter-links button, .combat-ranking-grid li button) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--route-line); border-radius: 10px;
  color: var(--route-accent-ink); background: #fffdf8;
  text-decoration: none; white-space: normal; overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent :is(a.chip, button.chip, .combat-ranking-grid li button) { border-radius: 999px; padding: 8px 12px; }
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent :is(.button, .chip:not(.passive), .rules-related a, .inter-links a, .inter-links button, .combat-ranking-grid li button):not(:disabled):is(:hover, :focus-visible) {
  color: #fffdf8; border-color: var(--route-deep); background: var(--route-deep);
  text-decoration: none;
}
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent button:disabled { opacity: .5; cursor: not-allowed; }
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent a.inter-ref {
  display: inline-block; max-width: 100%; min-height: 24px; padding: 1px 7px;
  color: var(--route-accent-ink); background: #fffdf8;
  border: 1px solid var(--route-line); border-radius: 999px;
  vertical-align: baseline; text-decoration: none; overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent a.inter-ref:is(:hover, :focus-visible) { color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep); }
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent :is(a.inter-ref, .inter-links a) :is(code, .inter-code, .inter-command) { color: inherit; background: transparent; padding: 0; font-size: inherit; }
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents, .combat-lab-tabs) {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px;
  background: var(--route-soft); border: 1px solid var(--route-line); border-radius: 10px;
}
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents a, .combat-lab-tabs button, .combat-target-switch button) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 0; max-width: 100%; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 10px;
  color: var(--route-accent-ink); background: transparent;
  text-decoration: none; white-space: normal; overflow-wrap: anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents a, .combat-lab-tabs button, .combat-target-switch button):hover { border-color: var(--route-line); background: #fffdf8; text-decoration: none; }
body:is([data-route="mechanics"],[data-route="combat"]) :is(.rules-contents a[aria-current], .combat-lab-tabs button.active, .combat-target-switch button.active) {
  color: #fffdf8; background: var(--route-deep); border-color: var(--route-deep); box-shadow: none;
}
body:is([data-route="mechanics"],[data-route="combat"]) .combat-target-switch { color: var(--ink); background: var(--route-soft); border: 1px solid var(--route-line); }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-target-switch strong { color: var(--route-deep); }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-target-switch .page-kicker { color: var(--route-accent-ink); }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-target-switch > div:last-child { flex-wrap: wrap; gap: 6px; border-radius: 10px; }
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent :is(input[type="search"], input[type="number"], select) {
  width: 100%; min-width: 0; max-width: 100%; min-height: 44px;
  padding: 10px 12px; color: var(--route-accent-ink); background: #fffdf8;
  border: 1px solid var(--route-line); border-radius: 10px;
}
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent :is(input, select):hover { border-color: var(--route-accent); }
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--route-accent); outline-offset: 3px; }
/* The chapter search shares the compact room-register input, while simulator
   fields retain their own larger control dimensions. */
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent #rulesSearch {
  min-height: 39px; padding: 8px 11px;
  color: var(--ink); background: white;
  border: 1px solid var(--line); border-radius: 8px;
  font: 600 var(--type-ui)/var(--type-ui-leading) var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent #rulesSearch:focus { border-color: var(--route-accent); }
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent .rules-index :is(a, input, select, [tabindex]):focus-visible { outline-offset: 2px; }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-sources { background: var(--route-soft); border-color: var(--route-line); }
body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic.rules-target { box-shadow: 0 0 0 2px #216b7826; }
/* Selected rules already have an outer reader frame; no inner selection ring. */
body:is([data-route="mechanics"],[data-route="combat"]) #routeContent .guide-body .rules-topic {
  border: 0;
  box-shadow: none;
}
body:is([data-route="mechanics"],[data-route="combat"]) :is(.combatant-card, .combat-field, .combat-field-pair, .combat-adjustment-grid, .combat-results > article) { min-width: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-ranking-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-ranking-grid li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-ranking-grid li strong { float: none; margin-left: auto; text-align: center; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-log ol { scrollbar-gutter: stable; }
body:is([data-route="mechanics"],[data-route="combat"]) .table-scroll { max-width: 100%; overflow-x: auto; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-weapon-table { min-width: 640px; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-versus { position: relative; }
body:is([data-route="mechanics"],[data-route="combat"]) .section-title { flex-wrap: wrap; }
body:is([data-route="mechanics"],[data-route="combat"]) .section-title > div { min-width: 0; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-field { align-content: start; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-adjustment-grid label { align-content: start; }
body:is([data-route="mechanics"],[data-route="combat"]) .impact-value { display: inline-grid; place-items: center; min-height: 22px; font: 800 var(--type-caption)/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-adjustments > summary { min-height: 44px; padding: 12px 0; color: var(--route-accent-ink); }
body:is([data-route="mechanics"],[data-route="combat"]) .combat-open-label { display: grid; place-items: center; min-height: 44px; border-radius: 10px; background: var(--route-deep); }
@media (max-width: 1600px) {
  body:is([data-route="mechanics"],[data-route="combat"]) :is(.combat-primer, .combat-core-grid, .combat-matchup, .combat-results, .combat-shoot-grid, .combat-run-toolbar, .combat-live-state) { grid-template-columns: minmax(0, 1fr); }
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-versus { min-height: 46px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-versus i { width: 70%; height: 2px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-result-divider span { writing-mode: horizontal-tb; }
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-run-readout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px), (max-height: 650px) {
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-layout { grid-template-columns: minmax(0, 1fr); }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-index { position: static; max-height: none; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-filter {
    display: block; padding: 12px 16px;
    background: linear-gradient(180deg, var(--route-soft), #faf7f0);
  }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-filter > :is(label, #rulesSearch, #rulesCount) { display: none; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-mobile-picker { display: grid; gap: 6px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-mobile-picker label {
    display: block; color: var(--route-accent-ink);
    font: 650 var(--type-small)/1.5 var(--font-ui);
  }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-mobile-picker select { min-height: 44px; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav { display: none; }
}
@media (max-width: 600px) {
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-field-pair { grid-template-columns: minmax(0, 1fr); }
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-run-buttons { display: flex; }
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-target-switch > div:last-child { display: flex; }
  body:is([data-route="mechanics"],[data-route="combat"]) .combat-stat { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body:is([data-route="mechanics"],[data-route="combat"])) { scroll-behavior: auto; }
  body:is([data-route="mechanics"],[data-route="combat"]) .workspace { transition: none; }
}

@media print {
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-index { display: none; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-layout { display: block; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-nav,
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-contents { display: none; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic {
    max-width: none;
    margin-bottom: 25px;
    padding: 18px 0;
    border: 0;
    border-top: 1px solid #777;
    border-radius: 0;
    background: white;
    box-shadow: none;
  }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-topic > header { break-after: avoid; }
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-steps > li,
  body:is([data-route="mechanics"],[data-route="combat"]) .rules-example { break-inside: avoid; }
}

/* CBL-01 content grammar for every reader under "Spielregeln" and
   "Kampf & Simulator". RG-01 owns the register, RD-01 owns heading, tabs
   and scrolling; this block starts only inside the reading surface. */
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading {
  --cbl-paper:#f1ede3;
  --cbl-ink:#16232c;
  --cbl-petrol:#183f48;
  --cbl-petrol-text:#16525d;
  --cbl-accent:#216b78;
  --cbl-soft:#dcecee;
  --cbl-line:#9fc4ca;
  --cbl-field:#fffdf8;
  --cbl-muted:#3c4b54;
  --cbl-gold:#f0c878;
  --cbl-cream:#fbf5e7;
  color:var(--cbl-ink);
  overflow-wrap:anywhere;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading > :is(.rules-topic,.guide-addon) {
  box-sizing:border-box;
  width:100%;
  max-width:76ch;
  margin-right:auto;
  margin-left:auto;
  color:var(--cbl-ink);
  font:400 1.0625rem/1.72 var(--font-editorial);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading > .guide-addon + .guide-addon {
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid var(--cbl-line);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(p,ul,ol,dl) { max-width:76ch; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.rules-topic,.guide-addon) > h2 {
  margin:2.15rem 0 .7rem;
  color:var(--cbl-petrol);
  font:700 1.5rem/1.3 var(--font-editorial);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.rules-topic,.guide-addon) > h2:first-child { margin-top:0; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.rules-topic,.guide-addon) h3,
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-topic h4 {
  color:var(--cbl-petrol);
  font:700 1.13rem/1.4 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-topic h4 { margin:1.55rem 0 .55rem; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-topic p,
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .guide-addon > p {
  margin:0 0 1rem;
  color:var(--cbl-ink);
  font:inherit;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.rules-lead,.inter-summary) {
  margin:0 0 1.35rem;
  color:var(--cbl-petrol);
  font:400 1.2rem/1.65 var(--font-editorial);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(code,kbd,.inter-code,.inter-command) {
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:.08em .28em;
  border:0;
  border-radius:4px;
  color:var(--cbl-petrol);
  background:#eef4f2;
  font:400 .9em/1.45 var(--font-code);
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Exact destinations are CBL link chips; technical literals remain passive. */
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(a.inter-ref,.inter-links a,.inter-links button,.rules-related a,.rules-related button) {
  display:inline-flex;
  box-sizing:border-box;
  min-width:0;
  min-height:31px;
  max-width:100%;
  align-items:center;
  justify-content:center;
  margin:.12rem .16rem;
  padding:5px 10px;
  border:1px solid var(--cbl-line);
  border-radius:999px;
  color:var(--cbl-petrol-text);
  background:var(--cbl-field);
  font:650 .875rem/1.35 var(--font-ui);
  text-align:center;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
  vertical-align:middle;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.inter-links,.rules-related) {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  max-width:76ch;
  margin:1.15rem 0 0;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.inter-links,.rules-related) :is(a,button) { margin:0; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(a.inter-ref,.inter-links a,.inter-links button,.rules-related a,.rules-related button):not(:disabled):is(:hover,:focus-visible) {
  border-color:var(--cbl-petrol);
  color:var(--cbl-field);
  background:var(--cbl-petrol);
  text-decoration:none;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(a.inter-ref,.inter-links a,.inter-links button,.rules-related a,.rules-related button):focus-visible {
  outline:3px solid var(--cbl-accent);
  outline-offset:3px;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(a.inter-ref,.inter-links a,.inter-links button,.rules-related a,.rules-related button) :is(code,kbd,.inter-code,.inter-command) {
  padding:0;
  color:inherit;
  background:transparent;
  font:inherit;
}

/* Named steps are key/value sequences: the CBL formula treatment keeps them
   distinct from ordinary prose without turning them into navigation. */
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-steps {
  box-sizing:border-box;
  max-width:76ch;
  margin:1rem 0 1.35rem;
  padding:15px 17px 15px 2.65rem;
  border-left:4px solid var(--cbl-gold);
  border-radius:0 10px 10px 0;
  color:var(--cbl-ink);
  background:var(--cbl-cream);
  font:400 .93rem/1.55 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-steps > li {
  padding:0 0 12px 4px;
  color:var(--cbl-ink);
  border-bottom:1px solid #e4dcc7;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-steps > li + li { padding-top:12px; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-steps > li:last-child { padding-bottom:0; border-bottom:0; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-steps > li::marker { color:var(--cbl-petrol); }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-steps > li > strong {
  margin-bottom:4px;
  color:var(--cbl-petrol);
  font:700 1rem/1.4 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-steps p { color:var(--cbl-ink); font:inherit; }

/* CBL-01 state comparisons for rule articles. Only the identity badge is a
   link; the surrounding card remains a quiet reading surface. */
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-section {
  max-width:76ch;
  margin:1.5rem 0;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-section > h4 {
  margin:0 0 .7rem;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-card {
  min-width:0;
  padding:14px;
  border:1px solid var(--cbl-line);
  border-radius:12px;
  background:var(--cbl-field);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-id {
  display:inline-flex;
  min-height:32px;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border:0;
  border-radius:999px;
  color:var(--cbl-petrol);
  background:var(--cbl-gold);
  font:800 .8rem/1.35 var(--font-ui);
  text-decoration:none;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-id:is(:hover,:focus-visible) {
  color:var(--cbl-field);
  background:var(--cbl-petrol);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-id:focus-visible {
  outline:3px solid var(--cbl-accent);
  outline-offset:3px;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-card h5 {
  margin:.65rem 0 .3rem;
  color:var(--cbl-petrol);
  font:700 1rem/1.4 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-card p {
  margin:0;
  color:var(--cbl-muted);
  font:400 .875rem/1.55 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-facts { margin-top:1.35rem; }

/* Examples use the CBL result card; limits and sources use its quiet ending. */
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-example,
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading blockquote {
  box-sizing:border-box;
  max-width:76ch;
  margin:1.25rem 0;
  padding:16px 18px;
  border:1px solid var(--cbl-petrol);
  border-radius:12px;
  color:var(--cbl-petrol);
  background:#f7fbfa;
  font:400 1.08rem/1.65 var(--font-editorial);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-example h4 { margin:0 0 .55rem; color:var(--cbl-petrol); }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-example p { color:inherit; font:inherit; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.rules-limits,details.rules-sources,.inter-technical) {
  box-sizing:border-box;
  max-width:76ch;
  margin:2rem 0 0;
  padding:1rem 0 0;
  border:0;
  border-top:1px solid var(--cbl-line);
  border-radius:0;
  color:var(--cbl-muted);
  background:transparent;
  font:400 .85rem/1.55 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(details.rules-sources,.inter-technical) > summary {
  min-height:31px;
  padding:5px 0 10px;
  color:var(--cbl-petrol);
  font:700 .875rem/1.45 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(details.rules-sources,.inter-technical)[open] > summary {
  margin-bottom:12px;
  border-bottom:1px solid var(--cbl-line);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.rules-limits,details.rules-sources,.inter-technical) p { color:inherit; font:inherit; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(details.rules-sources,.inter-technical) :is(a.button,button[data-open-doc]) {
  min-height:31px;
  padding:5px 10px;
  border:1px solid var(--cbl-line);
  border-radius:999px;
  color:var(--cbl-petrol-text);
  background:var(--cbl-field);
  font:650 .875rem/1.35 var(--font-ui);
}

/* Story conditions are key/value facts, examples are ordered CBL cards. */
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-facts {
  box-sizing:border-box;
  max-width:76ch;
  margin:1rem 0 1.35rem;
  padding:8px 17px;
  border-left:4px solid var(--cbl-gold);
  border-radius:0 10px 10px 0;
  background:var(--cbl-cream);
  font-family:var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-facts > div {
  border-bottom-color:#e4dcc7;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-facts dt { color:var(--cbl-petrol); font-size:.875rem; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-facts dd { color:var(--cbl-ink); font-size:.9rem; line-height:1.55; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-steps {
  display:grid;
  gap:12px;
  max-width:76ch;
  margin:1.2rem 0;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-steps > li {
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  gap:13px;
  padding:14px;
  border:1px solid var(--cbl-line);
  border-radius:12px;
  background:var(--cbl-field);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-step-number {
  border:0;
  color:var(--cbl-petrol);
  background:var(--cbl-gold);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-step-body h3 { margin:0 0 .35rem; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-step-body p {
  margin:0;
  color:var(--cbl-muted);
  font:400 .9rem/1.55 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-caution {
  box-sizing:border-box;
  max-width:76ch;
  margin:1rem 0 1.35rem;
  padding:15px 17px;
  border:0;
  border-left:4px solid var(--cbl-gold);
  border-radius:0 10px 10px 0;
  color:var(--cbl-muted);
  background:var(--cbl-cream);
  font:400 .9rem/1.55 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-holders {
  max-width:76ch;
  color:var(--cbl-ink);
  font:400 .9rem/1.55 var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-holders > li { border-bottom-color:#dce7e5; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-count-badge,
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-tag {
  border-color:var(--cbl-line);
  color:var(--cbl-petrol);
  background:var(--cbl-soft);
  font-family:var(--font-ui);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .mechanic-notes { max-width:76ch; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .mechanic-note {
  padding:16px;
  border:1px solid var(--cbl-line);
  border-radius:12px;
  background:var(--cbl-field);
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .condition-note { color:var(--cbl-muted); font:400 .875rem/1.55 var(--font-ui); }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.command-box,.flow) {
  box-sizing:border-box;
  max-width:76ch;
  margin:1.1rem 0 1.35rem;
  padding:16px 18px;
  overflow-x:auto;
  border:1px solid var(--cbl-line);
  border-radius:12px;
  color:#edf8f6;
  background:var(--cbl-petrol);
  font:600 .91rem/1.65 var(--font-code);
  white-space:pre-wrap;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .table-scroll {
  max-width:76ch;
  margin:1.1rem 0 1.35rem;
  border:1px solid var(--cbl-line);
  border-radius:12px;
}
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading table { font:400 .9rem/1.5 var(--font-ui); }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(th,td) { padding:10px 12px; border-bottom:1px solid #dce7e5; }
body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading th { color:var(--cbl-petrol); background:var(--cbl-soft); }

@media (max-width:700px) {
  body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .rules-state-grid { grid-template-columns:minmax(0,1fr); }
  body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-facts > div { grid-template-columns:minmax(0,1fr); gap:4px; }
  body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading .inter-steps > li { grid-template-columns:2rem minmax(0,1fr); gap:10px; }
}
@media print {
  body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading > :is(.rules-topic,.guide-addon) { max-width:none; font-size:10.5pt; line-height:1.55; }
  body:is([data-route="mechanics"],[data-route="combat"]) #guideBody.cbl-reading :is(.rules-example,.rules-steps,.rules-state-card,.inter-facts,.inter-steps > li,.mechanic-note,.table-scroll) { break-inside:avoid; }
}