/*
 * The rulebook as it appears inside the packet: the same rules as docs/rulebook-assets/rulebook.css,
 * scoped to .packet-rulebook and without the tokens and the page frame, which the packet shell owns.
 * Change the two files together so the standalone edition and the packet edition do not diverge.
 *
 * Every colour here reads a token, so this file follows the packet default (dark, light only when
 * the reader's system asks) without carrying a palette of its own. site/shell.css holds the two sets.
 */

/* ------------------------------------------------------------------ masthead */
.packet-rulebook .masthead{padding:0 0 20px;border-bottom:1px solid var(--line)}
.packet-rulebook .masthead .eyebrow{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font:400 13px/1.5 var(--font-body);letter-spacing:normal;text-transform:none}
.packet-rulebook .masthead h1{margin:10px 0 12px;font:600 30px/1.25 var(--font-body);letter-spacing:normal;text-wrap:balance}
.packet-rulebook .masthead p.lede,.packet-rulebook .masthead .lede p{margin:0 0 10px;max-width:var(--measure);color:var(--muted)}
.packet-rulebook .legend{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;margin-top:16px;color:var(--muted);font-size:13px}

/* ---------------------------------------------------------------- page frame */
.packet-rulebook .page{padding:28px 0 0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px}
.packet-rulebook .rail{position:sticky;top:calc(var(--site-header-height) + 16px);align-self:start;max-height:calc(100vh - var(--site-header-height) - 40px);overflow:auto}
.packet-rulebook .rail ol{list-style:none;margin:0;padding:0}
.packet-rulebook .rail li{margin:0}
.packet-rulebook .rail a{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;padding:5px 0;border:0;color:var(--muted);text-decoration:none;font-size:13px;line-height:1.4}
.packet-rulebook .rail a:hover{color:var(--accent);text-decoration:underline}
.packet-rulebook .rail a .tag{min-width:22px;padding:0 3px;font-size:11px;text-align:center}
.packet-rulebook main{min-width:0}
.packet-rulebook main p,.packet-rulebook main li{max-width:var(--measure)}
.packet-rulebook .rule-anchor{display:block;scroll-margin-top:calc(var(--site-header-height) + 16px)}

/* -------------------------------------------------------------------- rules */
.packet-rulebook .tag{display:inline-block;min-width:24px;padding:0 5px;border:1px solid var(--line-strong);border-radius:3px;color:var(--muted);font:500 12px/1.5 var(--font-mono);text-align:center;vertical-align:middle}
.packet-rulebook h2{display:flex;align-items:center;gap:10px;margin:48px 0 8px;font:600 22px/1.3 var(--font-body);letter-spacing:normal;text-wrap:balance;padding-top:20px;border-top:1px solid var(--line)}
.packet-rulebook h2:first-of-type{margin-top:8px;padding-top:0;border-top:0}
.packet-rulebook h3{margin:28px 0 8px;font:600 18px/1.35 var(--font-body);letter-spacing:normal}
.packet-rulebook h4{margin:20px 0 6px;font:600 16px/1.4 var(--font-body)}
.packet-rulebook .status-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px;color:var(--muted);font-size:13px}

.packet-rulebook .chip{display:inline-block;padding:1px 6px;border:1px solid var(--line-strong);border-radius:3px;color:var(--muted);background:none;font:400 12.5px/1.5 var(--font-body);letter-spacing:normal;text-transform:none;white-space:nowrap;vertical-align:baseline}
.packet-rulebook .chip.locked{color:var(--green);border-color:var(--green)}
.packet-rulebook .chip.proposed{color:var(--accent);border-color:var(--accent)}
.packet-rulebook .chip.open{color:var(--amber);border-color:var(--amber)}
.packet-rulebook .chip.example{color:var(--muted);border-color:var(--line-strong)}

.packet-rulebook .rules{margin:8px 0 0;border-bottom:1px solid var(--line)}
.packet-rulebook .rule{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.packet-rulebook .rule .id{color:var(--muted);font:500 12.5px/1.7 var(--font-mono)}
.packet-rulebook .rule .body{max-width:var(--measure)}
.packet-rulebook .rule .body p{margin:0 0 6px}
.packet-rulebook .rule .body p:last-child{margin-bottom:0}
.packet-rulebook .rule .body ul{margin:6px 0 0;padding-left:20px}
.packet-rulebook .rule .body li{margin:2px 0}

/* Dice notation keeps its colours, muted: readers use them to read a roll. */
.packet-rulebook .d{font-family:var(--font-mono);background:var(--code-bg);color:var(--ink);padding:1px 5px;border-radius:3px;font-size:.875em;white-space:nowrap}
.packet-rulebook .dm{font-family:var(--font-mono);font-size:.9em}
.packet-rulebook .plus{color:var(--plus);font-family:var(--font-mono)}
.packet-rulebook .minus{color:var(--minus);font-family:var(--font-mono)}

/* ------------------------------------------------------------------- tables */
.packet-rulebook .tbl{overflow-x:auto;margin:16px 0 8px}
.packet-rulebook table{border-collapse:collapse;width:100%;max-width:100%;display:block;overflow-x:auto;font-size:14px;font-variant-numeric:tabular-nums}
.packet-rulebook th,.packet-rulebook td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.packet-rulebook th{background:var(--surface);color:var(--ink);font:600 14px/1.4 var(--font-body);letter-spacing:normal;text-transform:none;white-space:nowrap}
.packet-rulebook td.n,.packet-rulebook th.n{text-align:right;font-family:var(--font-mono);font-size:13px}
.packet-rulebook td.k{font-weight:600;white-space:nowrap}
.packet-rulebook tr.total td{border-top:1px solid var(--line-strong);font-weight:600}

/* ---------------------------------------------------------- figures & notes */
.packet-rulebook figure{margin:24px 0;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
.packet-rulebook figure svg{max-width:100%;height:auto;display:block;margin:0 auto;color:var(--ink)}
.packet-rulebook figcaption{margin-top:12px;color:var(--muted);font-size:13px;max-width:var(--measure)}

.packet-rulebook .callout{margin:20px 0;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 4px 4px 0}
.packet-rulebook .callout h4{margin:0 0 8px;font:600 15px/1.4 var(--font-body)}
.packet-rulebook .callout p{margin:6px 0}
.packet-rulebook .callout p:last-child{margin-bottom:0}
.packet-rulebook .note{margin:20px 0;padding:12px 18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:0 4px 4px 0;font-size:15px}

.packet-rulebook .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:16px 0}
.packet-rulebook .card{padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.packet-rulebook .card h4{margin:0 0 4px;font:600 16px/1.35 var(--font-body)}
.packet-rulebook .card .sub{margin-bottom:8px;color:var(--muted);font:400 13px/1.5 var(--font-body);letter-spacing:normal;text-transform:none}
.packet-rulebook .card p{margin:6px 0;font-size:15px}
.packet-rulebook .card .stat{color:var(--muted);font-family:var(--font-mono);font-size:13px}

.packet-rulebook .sources{font-size:14px;columns:2;column-gap:32px}
.packet-rulebook .sources li{break-inside:avoid;margin-bottom:6px}

.packet-rulebook .masthead,.packet-rulebook .rule .body{min-width:0;overflow-wrap:anywhere}
.packet-rulebook .section-intro,.packet-rulebook .section-tail{min-width:0;overflow-wrap:anywhere}

@media (max-width:1050px){
  .packet-rulebook .page{grid-template-columns:1fr;gap:24px}
  .packet-rulebook .rail{position:static;max-height:none}
  .packet-rulebook .rail ol{display:flex;flex-wrap:wrap;gap:4px 14px}
  .packet-rulebook .rail a{padding:4px 0}
  .packet-rulebook .sources{columns:1}
}
@media (max-width:760px){
  .packet-rulebook .masthead h1{font-size:26px}
  .packet-rulebook h2{font-size:20px}
  .packet-rulebook .rule{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .packet-rulebook figure{padding:12px;margin-left:0;margin-right:0}
}