/* One shared reading surface. No data widgets, new theme or chart dependency. */
#strategy { min-width: 0; }
#strategy .strategy-card { min-width: 0; padding-top: 24px; }
#strategy-guide { color: var(--sil-ink); font-size: 15px; line-height: 1.65; }
#strategy-guide p { max-width: 72ch; margin: 0; }
.rules-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rules-title h1 { margin: 0; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.rules-mode { flex: 0 0 auto; font-size: 12px; font-weight: 550; color: var(--sil-muted); }
#strategy-guide .rules-thesis { margin-top: 18px; max-width: 64ch; font-size: 19px; font-weight: 550; line-height: 1.55; text-wrap: pretty; }
#strategy-guide .rules-purpose { margin-top: 10px; color: var(--sil-muted); }
.rules-facts { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; margin: 24px 0 0; padding: 20px 0; border-block: 1px solid var(--sil-line); }
.rules-facts dt { color: var(--sil-muted); font-size: 12px; margin-bottom: 6px; }
.rules-facts dd { margin: 0; font-size: 14px; font-weight: 550; line-height: 1.5; }
.rules-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 40px; margin-top: 32px; align-items: start; }
.rules-body h2 { margin: 0; font-size: 20px; line-height: 1.35; letter-spacing: -.015em; }
#strategy-guide .rules-section-note { margin-top: 8px; color: var(--sil-muted); font-size: 13px; }
.rules-steps { margin: 16px 0 0; padding: 0; list-style: none; }
.rules-steps > li { border-top: 1px solid var(--sil-line); }
.rules-steps > li:last-child { border-bottom: 1px solid var(--sil-line); }
.rules-steps summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 12px; align-items: start; padding: 19px 0; cursor: pointer; list-style: none; }
#strategy-guide summary::-webkit-details-marker { display: none; }
.rules-rule-title { display: block; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
.rules-step-number { font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 3px; color: var(--sil-accent); }
.rules-answer { display: block; margin-top: 5px; color: var(--sil-muted); font-size: 14px; line-height: 1.65; }
#strategy-guide svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.rules-steps summary > svg { margin-top: 4px; color: var(--sil-muted); }
#strategy-guide details[open] > summary > svg { transform: rotate(90deg); }
.rules-detail { padding: 0 28px 20px 36px; font-size: 14px; }
#strategy-guide .rules-detail p + p { margin-top: 12px; }
.rules-scenarios { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; }
.rules-scenarios button { appearance: none; font: inherit; font-size: 13px; font-weight: 550; line-height: 1.35; min-height: 44px; padding: 9px 12px; border: 1px solid var(--sil-line); border-radius: 7px; color: var(--sil-ink); background: transparent; cursor: pointer; touch-action: manipulation; }
.rules-scenarios button[aria-pressed="true"] { color: var(--sil-accent); border-color: var(--sil-accent); background: var(--sil-wash); }
.rules-scenario-result { margin-top: 16px; padding: 20px; background: var(--sil-chrome); border-block: 1px solid var(--sil-line); min-height: 240px; }
.rules-scenario-result dl { margin: 0; }
.rules-scenario-result dl > div + div { margin-top: 18px; }
.rules-scenario-result dt { font-size: 12px; font-weight: 600; color: var(--sil-muted); }
.rules-scenario-result dd { margin: 4px 0 0; line-height: 1.6; font-size: 15px; }
.rules-scenario-result dl > div:last-child dd { font-weight: 550; }
#strategy-guide .rules-scenario-result > p { margin-top: 18px; font-size: 13px; color: var(--sil-muted); }
.rules-risk { margin-top: 26px; }
.rules-risk h3 { margin: 0; font-size: 15px; }
.rules-risk ul { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--sil-muted); }
.rules-risk li + li { margin-top: 10px; }
.rules-notes { margin-top: 32px; border-block: 1px solid var(--sil-line); }
.rules-notes > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; font-weight: 550; cursor: pointer; list-style: none; }
.rules-notes > div { padding-bottom: 20px; font-size: 14px; color: var(--sil-muted); }
#strategy-guide .rules-notes p + p { margin-top: 12px; }
.rules-next { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; }
.rules-next a { display: inline-flex; gap: 8px; align-items: center; color: var(--sil-accent); min-height: 44px; font-size: 14px; text-decoration: none; }
#strategy-guide :is(button, summary, a):focus-visible { outline: 2px solid var(--sil-accent); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) {
  .rules-steps summary:hover .rules-rule-title, .rules-notes > summary:hover, .rules-next a:hover { color: var(--sil-accent); }
  .rules-scenarios button:hover { background: var(--sil-wash); }
}
@media (max-width: 1180px) { .rules-body { grid-template-columns: 1fr; gap: 28px; } .rules-scenario-result { min-height: 0; } }
@media (max-width: 600px) {
  #strategy .strategy-card { padding: 16px 0 24px; }
  .rules-title { align-items: flex-start; gap: 10px; }
  .rules-title h1 { font-size: 23px; }
  .rules-mode { font-size: 11px; margin-top: 5px; }
  #strategy-guide .rules-thesis { font-size: 17px; margin-top: 16px; }
  #strategy-guide .rules-purpose { font-size: 14px; }
  .rules-facts { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; margin-top: 20px; }
  .rules-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .rules-facts dt { margin: 0; }
  .rules-facts dd { font-size: 13px; }
  .rules-body { margin-top: 24px; }
  .rules-body h2 { font-size: 19px; }
  .rules-steps summary { gap: 8px; grid-template-columns: 20px minmax(0,1fr) 16px; padding-block: 16px; }
  .rules-detail { padding-left: 28px; padding-right: 0; }
  .rules-scenario-result { padding: 16px; }
  .rules-scenarios button { flex: 1 1 auto; }
}
@media (forced-colors: active) {
  .rules-scenarios button[aria-pressed="true"] { border: 2px solid Highlight; color: Highlight; }
}