/* /rules only (Sep 29): larger section titles and an "On this page" contents, filled and driven by
   js/rules-toc.js. Every selector hangs off .rules-body or .rules-toc, which only rules.html carries.

   Wide (1200px and up): a sticky contents rail in its own left column. The sections move into the
   column beside it, so the rail never sits over content and the hairlines start where the text does.
   Narrower: one slim "current section" bar that sticks under the nav once the sections begin and
   opens the full list on tap. It takes no height in the flow (it overlays the first section's empty
   top padding), so nothing moves when it appears.

   The layout is gated on html.js (set in the head before first paint): without script there is no
   list to show, so the page renders exactly as it did before. */

.rules-body { --rt-w: clamp(184px, 13vw, 212px); --rt-gap: clamp(36px, 3vw, 56px); --rt-bar: 48px; }

/* ============ Section titles ============
   The marker's italic serif, at heading size and full ink: the one line that says where you are. */
.rules-body > .sec h2.marker {
  font: italic 300 clamp(22px, 1vw + 14px, 28px)/1.25 var(--serif); letter-spacing: .005em;
  color: rgb(var(--ink-hi)); text-wrap: balance;
}

/* ============ Contents ============ */
.rules-toc { display: none; }
html.js .rules-toc { display: block; }
.rules-toc-list { list-style: none; margin: 0; padding: 0; }
.rules-toc-list a { display: flex; align-items: baseline; font-family: var(--mono); text-transform: uppercase; transition: color .2s ease-out, border-color .2s ease-out; }
.rules-toc-list .n, .rules-toc-cur .n { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.rules-toc-list .l { min-width: 0; }
@media (hover: hover) { .rules-toc-list a:hover { opacity: 1; color: rgba(var(--ink), .92); } }
.rules-toc-list a.is-active, .rules-toc-list a.is-active .n { color: rgb(var(--acc)); }

/* ---------- Wide: the rail ---------- */
@media (min-width: 1200px) {
  html.js .rules-body { display: grid; grid-template-columns: calc(var(--gx) + var(--rt-w)) minmax(0, 1fr); column-gap: var(--rt-gap); }
  html.js .rules-body > .sec { grid-column: 2; padding-left: 0; min-width: 0; }
  /* Spans every section row, so the sticky list inside it travels the whole rulebook and stops at the FAQ. */
  html.js .rules-toc { grid-column: 1; grid-row: 1 / span 60; min-width: 0; padding-left: var(--gx); }
  .rules-toc-btn { display: none; }
  .rules-toc-in {
    position: sticky; top: calc(var(--promo-h, 0px) + var(--rt-nav, 113px) + 22px); margin: var(--sec-y) 0 48px -4px; padding: 4px;
    max-height: calc(100vh - var(--promo-h, 0px) - var(--rt-nav, 113px) - 44px); overflow-y: auto; scrollbar-width: none;
  }
  .rules-toc-in::-webkit-scrollbar { display: none; }
  .rules-toc-kicker { padding-bottom: 14px; font: 400 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink), .5); }
  .rules-toc-list { border-left: 1px solid var(--hairline); }
  .rules-toc-list a { gap: 10px; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 1px solid transparent; font-size: 11px; line-height: 1.4; letter-spacing: .04em; color: rgba(var(--ink), .56); }
  .rules-toc-list .n { color: rgba(var(--ink), .38); }
  .rules-toc-list a.is-active { border-left-color: rgb(var(--acc)); }
}

/* ---------- Narrower: the current-section bar ---------- */
@media (max-width: 1199.98px) {
  html.js .rules-toc {
    position: sticky; top: calc(var(--promo-h, 0px) + var(--rt-nav, 88px)); z-index: 38; height: var(--rt-bar); margin-bottom: calc(-1 * var(--rt-bar));
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition: top .42s cubic-bezier(.22,.61,.36,1), opacity .22s ease-out, transform .22s ease-out, visibility 0s .22s;
  }
  /* Follows the nav: under it while it shows, at the top (under the sale bar, --promo-h) while it is tucked away. */
  html.js .rules-toc.is-nav-hidden { top: var(--promo-h, 0px); }
  html.js .rules-toc.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: top .42s cubic-bezier(.22,.61,.36,1), opacity .22s ease-out, transform .22s ease-out, visibility 0s 0s; }
  .rules-toc-kicker { display: none; }
  .rules-toc-btn {
    display: flex; align-items: center; gap: 16px; width: 100%; height: var(--rt-bar); margin: 0; padding: 0 var(--gx);
    appearance: none; -webkit-appearance: none; border: 0; border-radius: 0;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    background: rgba(0,0,0,.88); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    color: rgba(var(--ink), .9); font: 400 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer;
  }
  .rules-toc-cur { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; }
  .rules-toc-cur .n { color: rgb(var(--acc)); }
  .rules-toc-cur .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rules-toc-btn .plus { flex: 0 0 auto; color: rgba(var(--ink), .48); font: 300 22px/1 var(--serif); letter-spacing: 0; transition: transform .2s ease-out; }
  .rules-toc.is-open .rules-toc-btn .plus { transform: rotate(45deg); }
  .rules-toc-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 2px var(--gx) 14px;
    background: rgba(0,0,0,.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--hairline);
    max-height: calc(100vh - var(--promo-h, 0px) - var(--rt-nav, 88px) - var(--rt-bar) - 16px); max-height: calc(100dvh - var(--promo-h, 0px) - var(--rt-nav, 88px) - var(--rt-bar) - 16px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .rules-toc.is-nav-hidden .rules-toc-list { max-height: calc(100vh - var(--promo-h, 0px) - var(--rt-bar) - 16px); max-height: calc(100dvh - var(--promo-h, 0px) - var(--rt-bar) - 16px); }
  .rules-toc.is-open .rules-toc-list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .rules-toc-list a { gap: 14px; padding: 11px 0; border-top: 1px solid var(--hairline-soft); font-size: 12px; line-height: 1.3; letter-spacing: .1em; color: rgba(var(--ink), .72); }
  .rules-toc-list li:first-child a { border-top: 0; }
  .rules-toc-list .n { color: rgba(var(--acc), .7); }
  /* Jumps clear the nav and the bar. */
  html.js .rules-body > .sec[id] { scroll-margin-top: calc(var(--rt-nav, 88px) + var(--rt-bar) + 8px) !important; }
}
/* Two columns in the open list once there is room, first half down the left (the hero menu's order). */
@media (min-width: 700px) and (max-width: 1199.98px) {
  .rules-toc.is-open .rules-toc-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--rt-rows, 8), auto); grid-auto-flow: column; column-gap: 40px; }
  .rules-toc-list li.rt-col-top a { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rules-toc, html.js .rules-toc.is-shown { transform: none; }
}