/* Rules page: page-only layout. Components and colours come from system.css. */

/* ---------------------------------------------------------------- hero */
.rules-hero { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); padding-block: 36px 40px; }
.rules-hero-copy > * + * { margin-top: 20px; }
.rules-hero-copy > .shout { margin-top: 10px; }
.rules-hero-copy > .row { margin-top: 28px; }
@media (min-width: 1100px) {
  .rules-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: end; padding-block: 64px 72px; }
  .rules-hero .shout { font-size: clamp(54px, 8.4vw, 148px); }
}

/* the split as a poster: one bar, three figures */
.split { min-width: 0; }
.split > .cap-up { margin-bottom: 12px; }
.split-bar { display: flex; height: 56px; gap: 4px; }
.split-bar > i { flex: 1 1 var(--share); min-width: 0; border-radius: 3px; box-shadow: inset 0 0 0 3px var(--ink); }
.split-bar > i[data-part="captain"] { background: var(--ink); }
.split-bar > i[data-part="dowry"] { background: var(--chalk); }
.split-bar > i[data-part="protocol"] { background: repeating-linear-gradient(135deg, var(--deck) 0 6px, var(--ink) 6px 9px); }
.split-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.split-item { min-width: 0; padding-top: 12px; border-top: 3px solid var(--ink); }
.split-item > span { display: block; }
.split-item > .fig { font-size: clamp(44px, 12vw, 96px); line-height: 0.85; }
.split-name { margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.split-item > .cap { margin-top: 6px; }
@media (min-width: 1100px) { .split-item > .fig { font-size: clamp(64px, 6.4vw, 104px); } .split-bar { height: 72px; } }

/* ---------------------------------------------------------------- worked example */
.example-head { display: grid; gap: 16px; margin-bottom: 32px; }
@media (min-width: 900px) { .example-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 40px; margin-bottom: 48px; } }
.example-cards { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .example-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ex-card { display: flex; flex-direction: column; min-width: 0; padding: 24px 20px; }
@media (min-width: 900px) { .ex-card { padding: 36px; } }
.ex-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.ex-no { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 0.8; color: var(--accent); font-variant-numeric: tabular-nums; }
.paper .ex-no { color: var(--fg); opacity: 0.28; }
.ex-head > .sub { flex: 1 1 auto; min-width: 0; font-size: 32px; }
.ex-text { margin-top: 18px; font-size: 16px; color: var(--fg-2); max-width: 56ch; }
.ex-rows { margin-top: 20px; border-top: 2px solid var(--rule); }
.ex-rows > div > :first-child { min-width: 0; color: var(--fg-2); }
.ex-rows > div > :last-child { flex: 0 0 auto; white-space: nowrap; }
.ex-rows > div[data-tone="strong"] > * { color: var(--fg); font-weight: 700; }
.ex-rows > div[data-tone="down"] > :last-child { color: var(--down); }
.ex-result { margin-top: auto; padding-top: 22px; display: grid; gap: 8px; }
.ex-rows + .ex-result { border-top: 2px solid var(--rule); }
.ex-result > .fig { line-height: 0.9; }
.board .ex-result > .fig:not(.up) { color: var(--accent); }
.ex-card .ex-rows { margin-bottom: 24px; }

/* ---------------------------------------------------------------- sections + index */
.rules-layout { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.rules-index > .cap-up { margin-bottom: 12px; }
.rules-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border-top: 2px solid var(--rule); }
.rules-index a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-weight: 600; font-size: 15px; line-height: 1.25; text-decoration: none; }
.rules-index a > .num { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; opacity: 0.5; }
.rules-index a:hover { text-decoration: underline; }
.rules-index a[aria-current] > .num { opacity: 1; }
@media (max-width: 479px) { .rules-index ol { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) {
  .rules-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; align-items: start; }
  .rules-index { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - var(--demo-h) - 48px); overflow-y: auto; }
  .rules-index ol { grid-template-columns: minmax(0, 1fr); }
  .rules-index a[aria-current] { box-shadow: inset 4px 0 0 var(--ink); padding-left: 14px; font-weight: 700; }
}

.rule { scroll-margin-top: calc(var(--header-h) + 16px); }
.rule + .rule { margin-top: 56px; }
@media (min-width: 900px) { .rule + .rule { margin-top: 88px; } }
.rule-head { display: flex; align-items: flex-end; gap: 16px; padding-top: 14px; border-top: 3px solid var(--rule); margin-bottom: 20px; }
.rule-no { flex: 0 0 auto; font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 7vw, 96px); line-height: 0.78; opacity: 0.32; font-variant-numeric: tabular-nums; }
.rule-head > .head { min-width: 0; overflow-wrap: anywhere; }
.rule-body { font-size: 17px; line-height: 1.5; }
.rule-body ul > li { max-width: 72ch; }
.rule-body ul > li + li { margin-top: 14px; }
@media (min-width: 900px) { .rule-body { font-size: 18px; padding: 40px 44px; } }
.rule-extra { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--rule); }
.rule-code { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--surface-2); font-weight: 600; font-size: 15px; }
dl.rule-extra { padding-top: 8px; }
@media (max-width: 639px) { dl.rule-extra > div { flex-direction: column; gap: 4px; } dl.rule-extra dd { text-align: left; } }

/* ---------------------------------------------------------------- closing */
.totals-head { align-items: flex-end; margin-bottom: 24px; }
.totals-head > .cap { max-width: 48ch; }
.rules-cta { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: 56px; }
.rules-cta-title { font-size: clamp(48px, 7.4vw, 124px); margin-bottom: 20px; }
.rules-cta-mark { display: none; }
@media (min-width: 900px) {
  .rules-cta { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); margin-top: 96px; gap: 40px; }
  .rules-cta-mark { display: block; justify-self: end; width: min(100%, 340px); aspect-ratio: 1 / 1; }
  .rules-cta-mark svg { width: 100%; height: auto; }
}