/* Rules of Redline Alley (#rules). Uses the shared theme tokens from index.html, so light and dark follow the site. */
.rl{gap:22px;padding-bottom:48px}
/* The site sets overflow-x:hidden on html and body, which turns body into a scroll box and stops sticky elements. clip keeps the no horizontal scroll guarantee without that side effect, on this page only. */
html:has(.rl),html:has(.rl) body{overflow-x:clip}
.rl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rl-head{display:grid;gap:12px;max-width:820px}
.rl-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem;color:var(--dim)}
@media (min-width:561px){.rl-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--dim);opacity:.5;margin-right:14px;vertical-align:middle;margin-left:-4px}}
.rl-meta a,.rl-lede a,.rl-sum a,.rl-body a{color:var(--brass);text-underline-offset:2px}
.rl-lede{color:var(--smoke);max-width:68ch}
.rl-actions{display:flex;gap:10px;flex-wrap:wrap}
.rl-sum{max-width:820px;background:var(--pit2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:grid;gap:12px}
.rl-sum h2{font-size:1.45rem}
.rl-sum ul{margin:0;padding-left:20px;display:grid;gap:8px}
.rl-sum li{color:var(--smoke)}
.rl-sum li b{color:var(--chalk)}
.rl-note{font-size:.82rem;color:var(--dim)}

.rl-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
.rl-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);max-height:calc(100vh - 124px);overflow:auto;display:grid;gap:10px;align-content:start;padding-right:4px}
.rl-search input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:999px;background:var(--pit);padding:8px 16px;font-size:.92rem}
.rl-search input:focus{outline:none;border-color:var(--brass)}
.rl-count{font-size:.78rem;color:var(--dim);min-height:0}
.rl-count:empty{display:none}
.rl-tocwrap summary{list-style:none;cursor:default;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);padding:4px 2px 8px}
.rl-tocwrap summary::-webkit-details-marker{display:none}
.rl-toc{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.rl-toc a{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:8px;text-decoration:none;font-size:.86rem;line-height:1.35;color:var(--smoke)}
.rl-toc a span{flex:none;width:20px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);font-size:.78rem}
.rl-toc a:hover{background:var(--pit2);color:var(--chalk)}
.rl-toc li.on a{background:color-mix(in srgb,var(--brass) 11%,transparent);color:var(--brass);font-weight:600}
.rl-toc li.on a span{color:var(--brass)}

.rl-body{min-width:0;max-width:780px;display:grid;gap:0}
.rl-sec{padding:26px 0 22px;border-top:1px solid var(--line);scroll-margin-top:calc(env(safe-area-inset-top,0px) + 104px);display:grid;gap:12px}
.rl-sec:first-child{border-top:0;padding-top:0}
.rl-sec h2{font-size:clamp(1.35rem,3vw,1.75rem);display:flex;gap:12px;align-items:baseline}
.rl-n{flex:none;font-family:var(--body);font-size:.8rem;font-weight:700;letter-spacing:0;color:var(--brass);min-width:28px;height:28px;border-radius:50%;border:1px solid color-mix(in srgb,var(--brass) 40%,var(--line));display:inline-grid;place-items:center;transform:translateY(-3px)}
.rl-sub{font-family:var(--body);font-size:.95rem;font-weight:700;letter-spacing:0;color:var(--chalk);margin-top:6px}
.rl-cl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;color:var(--smoke);overflow-wrap:anywhere}
.rl-cl b,.rl-list b{color:var(--chalk)}
.rl-cn{font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:600;color:var(--dim);padding-top:2px}
.rl-list{margin:-2px 0 2px 48px;padding-left:18px;display:grid;gap:7px;color:var(--smoke);overflow-wrap:anywhere}
.rl-list li::marker{color:var(--brass-deep)}
.rl-hit{background:color-mix(in srgb,var(--amber) 14%,transparent);border-radius:6px;box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 14%,transparent)}
.rl-empty{color:var(--dim);padding:20px 0}
.rl-end{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--dim)}

@media (max-width:900px){
  .rl-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .rl-side{position:static;max-height:none;overflow:visible;padding:0}
  .rl-tocwrap{border:1px solid var(--line);border-radius:12px;background:var(--pit);padding:6px 8px}
  .rl-tocwrap summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:4px 8px}
  .rl-tocwrap summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:4px;transition:transform .15s}
  .rl-tocwrap[open] summary::after{transform:rotate(225deg)}
  .rl-sec{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 80px)}
}
@media (max-width:560px){
  .rl-sum{padding:16px}
  .rl-cl{grid-template-columns:38px minmax(0,1fr)}
  .rl-list{margin-left:10px}
}

@media print{
  header.top,.ribbon,.mbar,.tabbar,footer,#cmpbar,.rl-side,.rl-actions{display:none !important}
  .rl-sum,.rl-sum *{border-color:#999 !important}
  .rl-sum{border-radius:0}
  html,body{background:#fff !important;color:#000 !important}
  .rl{padding:0;max-width:none}
  .rl *{color:#000 !important;background:transparent !important;box-shadow:none !important}
  .rl a{text-decoration:none}
  .rl-layout{display:block}
  .rl-sec{break-inside:auto;page-break-inside:auto;padding:14px 0}
  .rl-sec[hidden]{display:grid !important}
  .rl-sec h2{break-after:avoid;page-break-after:avoid}
  .rl-sum{border:1px solid #999}
  .rl-n{border-color:#999}
}