/* =============================================================================
   Root — Setup & Reference Utility · styles
   Themed from the Root rulebooks (Leder Games):
     · The Law of Root (Oct 2025): parchment pages, Luminari section headings, the woodcut rosette frame and
       illuminated ROOT letters of its cover, the red page-number leaf, the red-pencil margin sketches.
     · Learning to Play: purple Luminari sub-heads, "1st / 2nd" ordinal setup steps with a fleuron,
       cream callouts with stepped corner knots, framed "Example" boxes with the title on the rule,
       the red VP ribbon, the tan "Daylight" phase strip with its orange edge, dotted paths between clearings,
       round clearings, » bullets, and the faction head icons (RootFactionFont).
   Body text ≥ 16px; WCAG AA contrast (pairs checked with tools/contrast.py); visible focus.
   ============================================================================= */
/* Fondamento draws the em and en dash like a hyphen: borrow them from a system serif in headings */
@font-face { font-family: "RT Dash"; src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"); unicode-range: U+2013-2014; }

@counter-style rt-ordinal {      /* suffix only: 1st 2nd 3rd 4th … 11th 12th 13th … 21st … (cycles every 100) */
  system: cyclic;
  symbols: "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th" "st" "nd" "rd" "th" "th" "th" "th" "th" "th" "th";
  suffix: "";
}

:root {
  /* paper (sampled from the Law's page texture and the LtP callouts) */
  --paper: #f8f0d4;          /* median of images/parchment.webp; darkest texture pixel #f0eabd */
  --paper-lt: #fffdf0;       /* control faces */
  --cream: #fffbdc;          /* LtP callout fill */
  --tan: #fce8ba;            /* LtP paper strip (phase banner, table heads) */
  --tan-hover: #f9e1a8;
  /* ink */
  --ink: #231f20;            /* Law text colour */
  --ink-2: #4a4038;
  --ink-3: #6b5a45;          /* citations, hints: 5.4:1 on the darkest paper */
  --line-2: #7a6a50;         /* control borders: 4.3:1 on paper */
  --path: #b09b70;           /* dotted paths (decorative dividers) */
  /* accents */
  --plum: #402779;           /* LtP sub-heading purple — selected states, sub-heads */
  --plum-deep: #2a1856;
  --plum-tint: #e9e1f3;      /* text on plum (9.3:1) */
  --leaf: #6b0d0e;           /* the page-number leaf */
  --ribbon: #a83220;         /* the VP ribbon, darkened for cream text (6.4:1) */
  --ribbon-deep: #8a2615;
  --marquise: #e2772c;       /* orange edge of the phase strip (decorative) */
  --focus: #1d4f9a;          /* Daylight blue, darkened: 6.5:1 on paper */
  --ok: #2b6620;
  --warn: #9b1c1c;
  --mark: #fde463;           /* rabbit yellow from the ROOT letters */
  --measure: 70ch;
  --f-head: "RT Dash", "Fondamento", "Palatino Linotype", Palatino, Georgia, serif;
  --f-body: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
  /* LtP callout corner knots (stepped corner + small square), drawn over the box border by a ::before */
  --knot-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0H14V9.5H9.5V14H0Z' fill='%23f8f0d4'/%3E%3Cpath d='M16 .75H14V9.5H9.5V14H.75V16' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3Crect x='4.75' y='4.75' width='4.75' height='4.75' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3C/svg%3E");
  --knot-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg transform='matrix(-1 0 0 1 16 0)'%3E%3Cpath d='M0 0H14V9.5H9.5V14H0Z' fill='%23f8f0d4'/%3E%3Cpath d='M16 .75H14V9.5H9.5V14H.75V16' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3Crect x='4.75' y='4.75' width='4.75' height='4.75' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --knot-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg transform='matrix(1 0 0 -1 0 16)'%3E%3Cpath d='M0 0H14V9.5H9.5V14H0Z' fill='%23f8f0d4'/%3E%3Cpath d='M16 .75H14V9.5H9.5V14H.75V16' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3Crect x='4.75' y='4.75' width='4.75' height='4.75' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --knot-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg transform='matrix(-1 0 0 -1 16 16)'%3E%3Cpath d='M0 0H14V9.5H9.5V14H0Z' fill='%23f8f0d4'/%3E%3Cpath d='M16 .75H14V9.5H9.5V14H.75V16' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3Crect x='4.75' y='4.75' width='4.75' height='4.75' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --knots: var(--knot-tl) left top / 16px 16px no-repeat, var(--knot-tr) right top / 16px 16px no-repeat,
           var(--knot-bl) left bottom / 16px 16px no-repeat, var(--knot-br) right bottom / 16px 16px no-repeat;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper) url("../images/parchment.webp") repeat;
  background-size: 400px 400px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
b, strong { font-weight: 700; }
a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.muted { color: var(--ink-3); }
.hint { font-family: var(--f-body); font-weight: 400; font-size: 0.875rem; color: var(--ink-3); font-style: italic; letter-spacing: 0; }
.hint.inline { align-self: center; margin-left: 4px; }

.skip { position: absolute; left: -9999px; top: 10px; z-index: 20; padding: 10px 16px; background: var(--plum); color: var(--cream); font-weight: 700; text-decoration: none; }
.skip:focus { left: 12px; }
#setup-sec:focus { outline: none; }

/* knot frames: a ::before laid over the border (the element needs position: relative and a 1.5px border) */
.inline-note::before, .cfgnotes p::before, #teachBtn::before, .rsearch-wrap::before {
  content: ""; position: absolute; inset: -1.5px; pointer-events: none; background: var(--knots);
}

/* ---------- masthead: the Law of Root cover ---------- */
.topbar {
  position: relative;
  background:
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(255, 252, 238, 0.75), rgba(255, 252, 238, 0) 70%),
    linear-gradient(to bottom, rgba(241, 221, 166, 0.35), rgba(241, 221, 166, 0) 30%, rgba(241, 221, 166, 0) 70%, rgba(241, 221, 166, 0.35));
}
.band {                               /* the cover frame's woodcut rosettes (Law p.1) */
  height: 36px;
  background: url("../images/band-rosette.webp") repeat-x left center / 127px 36px;
}
.hero {
  max-width: 940px; margin: 0 auto; padding: 22px 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-areas: "title art" "tag art";
  column-gap: 40px; row-gap: 14px;
  align-items: center;
}
.hero-title { grid-area: title; align-self: end; }
.brand-title { margin: 0; font-weight: 400; line-height: 1; }
.logo { display: block; width: 380px; max-width: 100%; height: auto; }
.brand-sub {
  display: block; margin-top: 10px;
  font-family: var(--f-head); font-weight: 400; font-size: 1.85rem; line-height: 1.15; letter-spacing: 0.01em; color: var(--ink);
}
.tagline { grid-area: tag; align-self: start; max-width: 62ch; color: var(--ink-2); }
.tagline .tag-lead { display: block; font-size: 1rem; line-height: 1.6; }
.tagline .tag-hook { display: block; margin-top: 10px; font-family: var(--f-head); font-size: 1.4rem; line-height: 1.3; color: var(--plum); }
.boxart {                             /* set in like the Walking Through Root booklet on LtP p.3 */
  grid-area: art; justify-self: end;
  width: 270px; padding: 7px; border-radius: 14px;
  background: #fff;
  transform: rotate(2.5deg);
  box-shadow: 0 1px 1px rgba(60, 40, 10, 0.15), 0 12px 26px -8px rgba(70, 45, 10, 0.5);
}
.boxart img { display: block; width: 100%; height: auto; border-radius: 9px; }

/* ---------- sections: Law-style numbered headings, the number in the page-number leaf ---------- */
main { max-width: 940px; margin: 0 auto; padding: 10px 24px 48px; counter-reset: sec; }
.sec { margin-top: 60px; }
.sec:first-child { margin-top: 34px; }
.sec > h2 {
  counter-increment: sec;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-head); font-weight: 400; font-size: 2.3rem; line-height: 1.15; color: var(--ink);
  margin-bottom: 6px;
}
.sec > h2::before {
  content: counter(sec);
  flex: none; display: grid; place-items: center;
  width: 41px; height: 56px; padding: 11px 6px 0 0;
  background: url("../images/leaf.webp") center / contain no-repeat;
  font-family: var(--f-body); font-size: 1.05rem; font-weight: 700; line-height: 1; color: #fff;
}
.sec-note { color: var(--ink-2); font-style: italic; margin: 0 0 22px; max-width: var(--measure); }

/* ---------- configurator ---------- */
.cfg { display: flex; flex-direction: column; }
.cfg > div { padding: 18px 0 20px; border-top: 2px dotted var(--path); }
.cfg > div:first-child { border-top: 0; padding-top: 4px; }
.cfg > div:empty, .cfg > .cfgnotes:empty { display: none; }
.cfg-label {
  display: block; margin-bottom: 10px;
  font-family: var(--f-head); font-weight: 400; font-size: 1.45rem; line-height: 1.25; color: var(--plum);
}
.chips, .mods, .pbtns, .mode-grid, .fchips, .optchips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip, .mode-btn, .mod, .pbtn, .fchip, .ochip, .subbtn, .mixbtn {
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--paper-lt);
  border: 1.5px solid var(--line-2); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(90, 65, 20, 0.14);
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.chip:hover, .mode-btn:hover, .mod:hover, .pbtn:hover, .fchip:hover, .ochip:hover, .subbtn:hover, .mixbtn:hover {
  border-color: var(--plum); background: #fff8dd; box-shadow: 0 0 0 1px var(--plum);
}
/* selected: plum fill, deeper border and a check mark */
.chip.on, .mode-btn.on, .mod.on, .pbtn.on, .fchip.on, .ochip.on, .subbtn.on {
  background: var(--plum); border-color: var(--plum-deep); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(255, 251, 220, 0.28), 0 1px 0 rgba(42, 24, 86, 0.4);
}
.chip.on:hover, .mode-btn.on:hover, .mod.on:hover, .fchip.on:hover, .ochip.on:hover, .subbtn.on:hover { background: var(--plum-deep); }
.chip.on::before, .mode-btn.on b::before, .mod.on .mod-name::before, .fchip.on b::before, .ochip.on::before, .subbtn.on::before {
  content: "✓\00a0"; font-family: var(--f-body); font-weight: 700;
}
/* unavailable: dashed, transparent, muted (still ≥ 4.5:1) */
.chip.off, .mode-btn.off, .mod.off, .pbtn.off, .fchip.off, .ochip.off, .subbtn.off {
  cursor: not-allowed; color: var(--ink-3); background: rgba(255, 253, 240, 0.35);
  border-style: dashed; border-color: var(--line-2); box-shadow: none;
}
.chip.off:hover, .mode-btn.off:hover, .mod.off:hover, .pbtn.off:hover, .fchip.off:hover, .ochip.off:hover, .subbtn.off:hover { box-shadow: none; background: rgba(255, 253, 240, 0.35); }
.chip.lock { cursor: default; }
/* selected but locked (the base game, the Walkthrough's fixed factions): keep the selected look */
.chip.on.off, .fchip.on.off, .pbtn.on.off, .mode-btn.on.off, .chip.on.off:hover, .fchip.on.off:hover, .pbtn.on.off:hover, .mode-btn.on.off:hover {
  background: var(--plum); border-color: var(--plum-deep); border-style: solid; color: var(--cream); cursor: default;
}
.chip { padding: 7px 13px; display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; }
.chip b { font-size: 1rem; line-height: 1.25; }
.chip span { font-size: 0.8125rem; line-height: 1.3; color: var(--ink-3); }
.chip.on span, .chip.on.off span { color: var(--plum-tint); }
.chip.on { flex-direction: row; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: flex-start; column-gap: 0; }
.chip.on b { flex: 0 1 auto; }
.chip.on span { flex-basis: 100%; padding-left: 1.05em; }
.chip-sep {
  flex-basis: 100%; margin: 8px 0 0 2px;
  font-family: var(--f-head); font-size: 1.15rem; color: var(--ink-2);
}

.mode-btn { flex: 1 1 230px; padding: 12px 15px 13px; }
.mode-btn b { display: block; font-family: var(--f-head); font-weight: 400; font-size: 1.35rem; line-height: 1.25; margin-bottom: 3px; }
.mode-btn span { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.mode-btn.on span, .mode-btn.on.off span { color: var(--plum-tint); }
.mode-btn.off span { color: var(--ink-3); }
.subopts { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 12px; }
.subopts:empty { display: none; }
.sublabel { font-family: var(--f-head); font-size: 1.15rem; color: var(--ink-2); margin-right: 2px; }
.subbtn { padding: 8px 14px; font-size: 0.9375rem; min-height: 44px; }

/* players: round clearings joined by a dotted path (LtP map diagrams) */
.pbtns { position: relative; gap: 20px; align-items: center; }
.pbtns::before {
  content: ""; position: absolute; left: 24px; top: 23px; width: 272px; height: 0;
  border-top: 3px dotted var(--ink-3); z-index: 0; pointer-events: none;
}
.pbtn {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--ink); text-align: center;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.pbtn.on { box-shadow: 0 0 0 3px var(--paper-lt), 0 0 0 5px var(--plum); }
.pbtn.off, .pbtn.off:hover { border-color: var(--line-2); background: #f7efd3; }

.reachbar {
  margin-bottom: 12px; padding: 8px 14px; max-width: calc(var(--measure) + 4ch);
  font-size: 1rem; line-height: 1.55; color: var(--ink);
  background: var(--tan); border-left: 6px solid var(--marquise);
}
.reachbar .ok { color: var(--ok); font-weight: 700; }
.reachbar .warn, .warn { color: var(--warn); font-weight: 700; }
.reachbar .muted { color: var(--ink-2); }

/* faction chips: the faction's head icon (RootFactionFont, Law faction headings) */
.fchip {
  display: inline-grid; grid-template-columns: 30px auto; column-gap: 9px; align-items: center;
  padding: 6px 13px 6px 8px; min-height: 50px;
}
.fchip::before {
  content: ""; grid-column: 1; grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 50%;
  background: url("../images/factions.webp") no-repeat 1px 1px / 364px 28px;
}
.fchip.on::before { background-color: var(--paper-lt); box-shadow: 0 0 0 1.5px var(--plum-tint); }
.fchip.off::before { opacity: 0.5; filter: grayscale(0.7); }
.fchip.on.off::before { opacity: 1; filter: none; }
.fchip > * { grid-column: 2; }
.fchip b { font-size: 1rem; line-height: 1.25; }
.fchip span { font-size: 0.8125rem; line-height: 1.3; color: var(--ink-3); }
.fchip.on span, .fchip.on.off span { color: var(--plum-tint); }
.fx-marquise::before  { background-position: 1px 1px; }
.fx-eyrie::before     { background-position: -27px 1px; }
.fx-alliance::before  { background-position: -55px 1px; }
.fx-vagabond::before, .fx-vagabond2::before { background-position: -83px 1px; }
.fx-lizard::before    { background-position: -111px 1px; }
.fx-riverfolk::before { background-position: -139px 1px; }
.fx-duchy::before     { background-position: -167px 1px; }
.fx-corvid::before    { background-position: -195px 1px; }
.fx-hundreds::before  { background-position: -223px 1px; }
.fx-keepers::before   { background-position: -251px 1px; }
.fx-diaspora::before  { background-position: -279px 1px; }
.fx-council::before   { background-position: -307px 1px; }
.fx-knaves::before    { background-position: -335px 1px; }
.botmark {
  justify-self: start; margin-top: 2px; padding: 0 6px; border-radius: 3px;
  font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.45;
  color: var(--cream); background: var(--ink-2);
}
.fchip.on .botmark { color: var(--plum-deep); background: var(--cream); }

.mixes { margin-top: 14px; border: 1.5px solid var(--line-2); border-radius: 6px; background: rgba(255, 253, 240, 0.7); }
.mixes summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; align-items: center; min-height: 48px; padding: 10px 14px 10px 38px;
  font-weight: 700;
}
.mixes summary::-webkit-details-marker { display: none; }
.mixes summary::before {
  content: ""; position: absolute; left: 15px; top: 50%; width: 9px; height: 9px;
  border-right: 2.5px solid var(--leaf); border-bottom: 2.5px solid var(--leaf);
  transform: translateY(-65%) rotate(-45deg); transition: transform .15s;
}
.mixes[open] summary::before { transform: translateY(-75%) rotate(45deg); }
.mixes summary:hover { background: rgba(252, 232, 186, 0.6); }
#mixlist { display: flex; flex-direction: column; gap: 7px; padding: 4px 14px 14px; }
#mixlist .hint { font-size: 0.9375rem; }
.mixbtn { padding: 9px 13px; font-size: 1rem; line-height: 1.5; }
.mixbtn .torch { color: #9a4f00; }
.mixbtn .muted { color: var(--ink-3); }
.mixbtn .mixsrc { color: var(--ink-3); font-size: 0.875rem; font-style: italic; white-space: nowrap; }

.mod { flex: 1 1 260px; padding: 12px 15px 13px; }
.mod-name { display: block; font-family: var(--f-head); font-weight: 400; font-size: 1.3rem; line-height: 1.25; margin-bottom: 3px; }
.mod-sum { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.mod.on .mod-sum { color: var(--plum-tint); }
.mod.off .mod-sum { color: var(--ink-3); }

.opts { display: flex; flex-direction: column; gap: 16px; }
.optrow { display: flex; flex-direction: column; gap: 7px; }
.optlabel { font-size: 1rem; color: var(--ink-2); }
.ochip { padding: 7px 13px; font-size: 0.9375rem; min-height: 44px; }
.optsub { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 2px; }
.optsel {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 8px 10px; min-height: 44px; max-width: 100%;
  background-color: var(--paper-lt); border: 1.5px solid var(--line-2); border-radius: 6px;
}
.optsel:hover { border-color: var(--plum); }
.optcheck { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; min-height: 44px; cursor: pointer; }
.optcheck input { width: 20px; height: 20px; accent-color: var(--plum); }

/* configuration notes: an LtP callout with a leaf */
.cfgnotes { display: flex; flex-direction: column; gap: 10px; }
.cfgnotes p {
  position: relative; max-width: calc(var(--measure) + 6ch);
  padding: 10px 16px 10px 44px; font-size: 1rem; line-height: 1.55; color: var(--ink);
  background: var(--cream) url("../images/leaf.webp") no-repeat 15px 12px / 15px auto;
  border: 1.5px solid var(--ink);
}

/* ---------- setup ---------- */
.teach-bar { margin: 4px 0 26px; }
#teachBtn {                           /* the LtP red VP ribbon */
  position: relative;
  font-family: var(--f-head); font-size: 1.35rem; font-weight: 400; line-height: 1.2;
  padding: 10px 26px 11px; min-height: 48px; cursor: pointer;
  color: var(--cream); background: var(--ribbon);
  border: 1.5px solid var(--ink); border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 251, 220, 0.18);
}
#teachBtn:hover { background: var(--ribbon-deep); }

#setup { counter-reset: stepn; }
.phase { margin-top: 34px; }
.phase:first-child { margin-top: 4px; }
.phase-title {                        /* the faction board's tan phase strip with its orange edge */
  width: fit-content; min-width: min(100%, 440px); max-width: 100%;
  margin-bottom: 4px; padding: 8px 46px 9px 16px;
  font-family: var(--f-head); font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--ink);
  background: var(--tan); border-left: 8px solid var(--marquise);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
}
.step {
  counter-increment: stepn;
  display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 14px;
  padding: 18px 0 20px; border-bottom: 2px dotted var(--path);
}
.phase .step:last-child { border-bottom: 0; }
.step-num {                           /* LtP p.4: "1st" with a fleuron under the suffix */
  position: relative; padding-right: 25px; min-height: 56px;
  font-family: var(--f-body); font-size: 2.45rem; font-weight: 400; line-height: 1; color: var(--ink); text-align: right;
  background: url("../images/fleuron.webp") no-repeat right 0 top 22px / 24px auto;
}
.step-num::after {
  content: counter(stepn, rt-ordinal);
  position: absolute; right: 1px; top: -1px;
  font-family: var(--f-head); font-size: 1.05rem; line-height: 1;
}
.step-body { min-width: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 6px; }
.step-head h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.step-text { max-width: var(--measure); }
.step-text p { margin: 4px 0 8px; }
.step-text ul, .step-text ol, .ref-body ul, .ref-body ol, .teach-panel ul, .teach-panel ol { margin: 4px 0 8px 1.35em; }
.step-text ul, .ref-body ul, .teach-panel ul { list-style: none; }
.step-text ul > li, .ref-body ul > li, .teach-panel ul > li { position: relative; }
.step-text ul > li::before, .ref-body ul > li::before, .teach-panel ul > li::before {
  content: "»"; position: absolute; left: -1.1em; top: 0; font-weight: 700; color: var(--leaf);
}
.step-text li, .ref-body li, .teach-panel li { margin-bottom: 5px; }
.step-text li ul, .ref-body li ul, .step-text li ol, .ref-body li ol { margin-top: 5px; }
.inline-note {
  position: relative; margin: 10px 0 8px; padding: 9px 16px;
  font-size: 1rem; line-height: 1.55; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--ink);
}
/* bots: clearing priority charts (Law of Rootbotics p.2–3) */
.prio-fig { margin: 10px 0 8px; max-width: 340px; }
.prio-fig img { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); background: var(--cream); }
.prio-fig figcaption { margin-top: 5px; font-size: 0.9375rem; font-style: italic; color: var(--ink-2); }
ol.prio-list { margin-top: 4px; }
@media (min-width: 640px) { ol.prio-list { columns: 2; column-gap: 2em; } ol.prio-list li { break-inside: avoid; } }

/* source tags: one colour per box */
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 3px;
  font-family: var(--f-body); font-size: 0.8125rem; font-weight: 700; font-style: normal; letter-spacing: 0.02em; line-height: 1.6;
  white-space: nowrap; border: 1px solid rgba(35, 31, 32, 0.28);
  background: #f2e2bf; color: #5a3c10;
}
.tag-base { background: #fbe1c9; color: #6b2d08; }        /* autumn orange */
.tag-riverfolk { background: #d2eeeb; color: #0e4d48; }   /* otter teal */
.tag-underworld { background: #e7def2; color: #45266d; }  /* corvid purple */
.tag-marauder { background: #f8d8d4; color: #7d1419; }    /* rat red */
.tag-homeland { background: #e8eac4; color: #474b0e; }    /* frog olive */
.tag-clockwork { background: #e3e3e1; color: #2e3236; border-style: dashed; border-color: rgba(35, 31, 32, 0.55); }   /* iron */
.tag-extra, .tag-mod { background: #f2e2bf; color: #5a3c10; }
.tag-adv { background: #2f2a2b; color: #fffbdc; border-color: #2f2a2b; }
.tag-walk { background: #d9e6f6; color: #1b3f6e; }        /* blue jay */

.src-line { margin-top: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); font-style: italic; }
.src-line::before { content: "Source\00a0·\00a0"; font-style: normal; font-variant: small-caps; letter-spacing: 0.05em; }

/* ---------- teaching script: an LtP "Example" frame, title on the rule ---------- */
.teach-panel {
  position: relative; margin: 30px 0 34px; padding: 0 26px 22px;
  max-width: calc(var(--measure) + 56px);
  background: var(--cream);
  border: 1.5px solid var(--ink); border-top: 0;
}
.teach-panel[hidden] { display: none; }
.teach-top {
  display: grid; grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr); align-items: start; column-gap: 12px;
  margin: -1.05rem -26px 6px;
}
.teach-top::before, .teach-top::after { content: ""; grid-row: 1; margin-top: 1.05rem; border-top: 1.5px solid var(--ink); }
.teach-top::before { grid-column: 1; }
.teach-top::after { grid-column: 3; }
.teach-top h3 {
  grid-column: 2; grid-row: 1; text-align: center;
  font-family: var(--f-head); font-weight: 400; font-size: 1.6rem; line-height: 2.1rem; color: var(--ink);
}
.teach-copy {
  grid-column: 1 / -1; grid-row: 2; justify-self: end; margin: 6px 26px 0 0;
  font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--ink);
  padding: 7px 14px; min-height: 44px; cursor: pointer;
  background: var(--paper-lt); border: 1.5px solid var(--line-2); border-radius: 6px;
}
.teach-copy:hover { border-color: var(--plum); box-shadow: 0 0 0 1px var(--plum); }
.teach-note {
  min-height: 112px; padding-right: 128px; margin: 6px 0 10px;
  font-style: italic; color: var(--ink-2); font-size: 1rem;
  background: url("../images/sketch-scroll.webp") no-repeat right 4px top 0 / 108px auto;
}
.teach-panel h4 { margin: 20px 0 6px; font-family: var(--f-head); font-weight: 400; font-size: 1.5rem; line-height: 1.25; color: var(--plum); }
.teach-panel p { margin-bottom: 10px; }

/* ---------- components glossary + rulebook search tokens (also feed .aid-srch) ---------- */
#components, .aid-srch {
  --comp-surface: #fffbdc; --comp-fig: #fcf8e8; --comp-ink: #231f20; --comp-muted: #5c4d3c; --comp-line: #7a6a50;
  --comp-accent: #402779; --comp-accent-ink: #fffbdc;
  --comp-head-font: "Libre Baskerville", Baskerville, Georgia, serif; --comp-radius: 6px;
  --srch-mark: #fde463;
}
#components #aid-comp .aid-comp-set-h {
  font-family: var(--f-head); font-weight: 400; font-size: 1.4rem; color: var(--plum);
  border-bottom: 2px dotted var(--path);
}
#components #aid-comp .aid-comp-set-meta { font-family: var(--f-body); }
#components #aid-comp .aid-comp-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }   /* the wide Baskerville needs a wider card */

/* ---------- rules reference: Law of Root sections ---------- */
#reference { border-top: 2px dotted var(--path); }
.ref { border-bottom: 2px dotted var(--path); }
.ref summary {
  cursor: pointer; list-style: none; position: relative;
  display: flex; align-items: center; min-height: 52px; padding: 11px 12px 11px 42px;
  font-family: var(--f-head); font-weight: 400; font-size: 1.4rem; line-height: 1.25; color: var(--ink);
}
.ref summary::-webkit-details-marker { display: none; }
.ref summary::before {
  content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid var(--leaf); border-bottom: 2.5px solid var(--leaf);
  transform: translateY(-60%) rotate(-45deg); transition: transform .15s;
}
.ref[open] > summary::before { transform: translateY(-75%) rotate(45deg); }
.ref summary:hover { background: rgba(252, 232, 186, 0.65); }
.ref[open] > summary { color: var(--plum); }
.ref-body { padding: 2px 12px 24px 42px; max-width: calc(var(--measure) + 54px); }
.ref-body h4 {                        /* Law sub-section heads: "4.1 Craft" in small capitals */
  margin: 18px 0 5px; font-family: var(--f-body); font-weight: 400; font-size: 1.125rem; line-height: 1.35;
  font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink);
}
.ref-body p { margin-bottom: 9px; }
table.rt { border-collapse: collapse; width: 100%; margin: 8px 0 12px; font-size: 1rem; line-height: 1.45; display: block; overflow-x: auto; }
table.rt th, table.rt td { border: 1px solid #9c8a66; padding: 6px 9px; vertical-align: top; text-align: left; }
table.rt th { background: var(--tan); font-weight: 700; }
table.rt td { background: rgba(255, 253, 240, 0.6); }
table.rt tr.sel td { background: #fdf0b4; font-weight: 700; }
/* rulebook icons (css/icons.css) in reference tables: on a phone the three-column Moods table stacks every
   icon + item-name pair (name under its icon), so the column is uniform and the table still fits the screen */
@media (max-width: 480px) { table.rt-moods .aid-pair { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; } }

/* ---------- rulebook search ---------- */
.rsearch-wrap { position: relative; margin-bottom: 18px; max-width: calc(var(--measure) + 56px); }
#rsearch {
  display: block; width: 100%; min-height: 52px;
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  padding: 11px 14px 11px 46px;
  background: var(--paper-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='9' cy='9' r='6.5' fill='none' stroke='%23402779' stroke-width='2.2'/%3E%3Cpath d='M14 14l6 6' stroke='%23402779' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 15px center / 20px 20px;
  border: 1.5px solid var(--ink); border-radius: 0;
}
#rsearch::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; }
#rsearch:focus-visible { outline-offset: 3px; }
#rresults { max-width: calc(var(--measure) + 56px); }
.rhint { color: var(--ink-2); font-style: italic; }
.rhit {
  padding: 12px 15px 13px;
  background: rgba(255, 253, 240, 0.85);
  border: 1px solid #b7a37c; border-left: 4px solid var(--plum); border-radius: 4px;
}
.rhit-src, .rhit-page { font-size: 0.875rem; color: var(--ink-3); }
.rhit-text { font-size: 1rem; line-height: 1.6; }
.rhit-text mark, .aid-srch mark { background: var(--mark); color: var(--ink); padding: 0 2px; border-radius: 2px; }
#rresults.aid-srch .aid-srch-h {
  font-family: var(--f-head); font-weight: 400; font-size: 1.45rem; color: var(--plum);
  border-bottom: 2px dotted var(--path);
}

/* ---------- footer ---------- */
.footer { margin-top: 30px; padding: 0 24px 34px; text-align: center; color: var(--ink-2); }
.footer .band { margin: 0 -24px 18px; }
.foot-fox { display: block; width: 170px; height: auto; margin: 0 auto 12px; }
.footer p { max-width: 68ch; margin: 0 auto; font-size: 0.9375rem; line-height: 1.6; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .band { height: 22px; background-size: 78px 22px; }
  .hero {
    padding: 12px 16px 15px; column-gap: 14px; row-gap: 9px;
    grid-template-columns: minmax(0, 1fr) 92px;
    grid-template-areas: "title art" "tag tag";
  }
  .hero-title { align-self: center; }
  .logo { width: 236px; }
  .brand-sub { font-size: 1.15rem; margin-top: 6px; white-space: nowrap; }
  .boxart { width: 92px; padding: 4px; border-radius: 9px; transform: rotate(3deg); align-self: center; }
  .tagline .tag-lead { line-height: 1.5; }
  .boxart img { border-radius: 6px; }
  .tagline .tag-hook { font-size: 1.2rem; margin-top: 4px; }
  main { padding: 6px 16px 36px; }
  .sec { margin-top: 46px; }
  .sec:first-child { margin-top: 26px; }
  .sec > h2 { font-size: 1.85rem; gap: 11px; }
  .sec > h2::before { width: 33px; height: 45px; padding: 9px 5px 0 0; font-size: 0.95rem; }
  .sec-note { margin-left: 0; }
  .teach-bar { margin-left: 0; }
  .cfg-label { font-size: 1.3rem; }
  .mode-btn, .mod { flex-basis: 100%; }
  .phase-title { font-size: 1.35rem; min-width: 0; }
  .step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; }
  .step-num { font-size: 1.9rem; padding-right: 20px; min-height: 46px; background-position: right 0 top 17px; background-size: 19px auto; }
  .step-num::after { font-size: 0.95rem; }
  .teach-panel { padding: 0 15px 16px; }
  .teach-top { margin: -0.9rem -15px 6px; column-gap: 8px; }
  .teach-top::before, .teach-top::after { margin-top: 0.9rem; }
  .teach-top h3 { font-size: 1.3rem; line-height: 1.8rem; }
  .teach-copy { margin-right: 15px; }
  .teach-note { padding-right: 78px; min-height: 76px; background-size: 70px auto; }
  .ref summary { font-size: 1.22rem; padding-left: 34px; }
  .ref summary::before { left: 11px; }
  .ref-body { padding: 2px 2px 20px 10px; }
  .footer { padding: 0 16px 28px; }
  .footer .band { margin: 0 -16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}