/* rules.css — additions for the Rules sub-site (spec 2.0).
   Loaded after base.css and reusing its custom properties, so light/dark and
   the sidebar layout come for free; only the rule-specific furniture lives
   here: the fact panel, rule chips, the symbol grid and the coverage tiles. */

:root {
  --rule-bg:   #f4f6fa;
  --rule-bd:   #cfd8e8;
  --ok-fg:     #1a7f4b;
  --ok-bg:     #e8f6ee;
  --no-fg:     #b03a24;
  --no-bg:     #fbeceb;
  --skel-fg:   #6b6f7a;
  --skel-bg:   #eeeff3;
}
:root[data-theme-active="dark"] {
  --rule-bg:   #1d2029;
  --rule-bd:   #333a49;
  --ok-fg:     #55c78d;
  --ok-bg:     #16281f;
  --no-fg:     #ff8b71;
  --no-bg:     #2a1c19;
  --skel-fg:   #9aa0ad;
  --skel-bg:   #23252c;
}

/* ---- sidebar: topics contain sections contain constructs ---------------- */

.nav-count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nav-cat-title { display: flex; align-items: center; gap: .45rem; width: 100%; }

.nav-sec { border-left: 1px solid var(--border); margin: .1rem 0 .1rem .55rem; }
.nav-sec-title {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--muted);
  text-align: left; padding: .22rem .5rem .22rem .6rem;
  text-transform: lowercase; letter-spacing: .01em;
}
.nav-sec-title:hover { color: var(--fg); }
.nav-sec-body { display: none; }
.nav-sec.open > .nav-sec-body { display: block; }
.nav-sec-body ul { list-style: none; margin: 0; padding: 0 0 .2rem .6rem; }
.nav-sec-body a { display: block; padding: .15rem .5rem; font-size: .82rem; }
.nav-sec-body code { font-size: .82rem; background: none; padding: 0; }

.nav-extra {
  display: flex; flex-direction: column; gap: .1rem;
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border);
}
.nav-extra a { font-size: .82rem; padding: .2rem .5rem; color: var(--muted); }
.nav-extra a:hover { color: var(--accent); }

/* ---- the fact panel ----------------------------------------------------- */

.facts {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1.1rem 0 1.4rem;
  padding: .9rem 1rem;
  background: var(--rule-bg);
  border: 1px solid var(--rule-bd);
  border-radius: 10px;
}
.facts-sym code {
  font-size: 1.5rem; font-weight: 600;
  background: none; padding: 0; color: var(--fg);
}
.facts-chips { display: flex; gap: .4rem; flex-wrap: wrap; }

.chip {
  font-size: .72rem; padding: .18rem .5rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--muted);
  white-space: nowrap;
}
.chip b { color: var(--fg); font-family: var(--mono, ui-monospace, monospace); }
.chip-cat  { text-transform: lowercase; }
.chip-prec { border-color: var(--rule-bd); }
.chip-ok   { color: var(--ok-fg); background: var(--ok-bg); border-color: transparent; }
.chip-no   { color: var(--no-fg); background: var(--no-bg); border-color: transparent; }

.status.st-skel { background: var(--skel-bg); color: var(--skel-fg); }

/* ---- rules -------------------------------------------------------------- */

h2.sec {
  margin-top: 2.2rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.15rem; letter-spacing: .01em;
}
h3.rule {
  display: flex; align-items: baseline; gap: .55rem;
  margin-top: 1.6rem; font-size: 1rem;
}
.rule-id {
  flex: none;
  font: 600 .72rem/1.5 var(--mono, ui-monospace, monospace);
  padding: .1rem .42rem; border-radius: 5px;
  background: var(--accent); color: var(--accent-fg);
  text-decoration: none;
}
.rule-id:hover { filter: brightness(1.1); }

.toc {
  margin: 1.2rem 0 1.8rem; padding: .8rem 1rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
}
.toc-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .45rem; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: .12rem 0; }
.toc a { display: flex; gap: .5rem; font-size: .88rem; }
.toc-id { flex: none; width: 2.1rem; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); font-size: .78rem; }

pre.bad {
  border-left: 3px solid var(--no-fg);
  background: var(--no-bg);
}

.crumbs { font-size: .78rem; color: var(--muted); margin-bottom: .5rem; }

/* ---- grids -------------------------------------------------------------- */

.sym-grid {
  display: grid; gap: .5rem; margin: .9rem 0 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.sym-card {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); text-decoration: none;
  border-left: 3px solid var(--border);
}
.sym-card:hover { border-color: var(--accent); }
.sym-card code { background: none; padding: 0; font-size: .95rem; font-weight: 600; }
.sym-sub { font-size: .7rem; color: var(--muted); }
.sym-card.s-written  { border-left-color: var(--ok-fg); }
.sym-card.s-partial  { border-left-color: #c99a2e; }
.sym-card.s-gap      { border-left-color: var(--no-fg); }

.topic-grid {
  display: grid; gap: .7rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.topic-card {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-bg); text-decoration: none;
}
.topic-card:hover { border-color: var(--accent); }
.topic-card b { font-size: 1rem; }
.topic-card span { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.topic-card i { font-size: .7rem; color: var(--muted); font-style: normal; }

.cov-tiles {
  display: grid; gap: .6rem; margin: 1.2rem 0 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.tile {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .8rem .6rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-bg); text-align: center;
}
.tile b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tile span { font-size: .72rem; color: var(--muted); }

.bar { height: .5rem; border-radius: 999px; background: var(--code-bg); min-width: 7rem; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--ok-fg); }

table.symtable code { background: none; padding: 0; font-weight: 600; }
table.symtable td { font-size: .85rem; }

.lede { font-size: 1.05rem; color: var(--muted); line-height: 1.6; }

/* base.css collapses .nav-cat-body with a single 0fr/1fr grid track, which
   assumes one child. This nav puts several .nav-sec blocks in one body, so the
   extras land in implicit auto rows the 0fr never constrains — sections stayed
   open and the chevrons did nothing. Opt this sidebar out of the grid entirely
   and use the same show/hide the .nav-sec level already uses. Scoped to
   body.rules so the spec's own single-<ul> nav keeps its animation. */
body.rules .nav-cat-body { display: block; }
body.rules .nav-cat:not(.open) > .nav-cat-body { display: none; }
body.rules .nav-cat-body > .nav-sec { overflow: visible; min-height: 0; }

.nav-name {
  margin-left: .4rem; font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-sec-body a { display: flex; align-items: baseline; }

.chip-doc { color: var(--accent); border-color: var(--border); text-decoration: none; }
.chip-doc:hover { border-color: var(--accent); }

/* ---- observed-behaviour matrix ------------------------------------------ */

table.mx { font-size: .82rem; }
table.mx td, table.mx th { vertical-align: top; }
table.mx code { background: none; padding: 0; }
.mx-same { color: var(--fg); }
.mx-rej  { color: var(--muted); }
.mx-rej span { font-size: .76rem; }
tr.mx-differ { background: var(--no-bg); }
tr.mx-differ .mx-a::before { content: "Raku++ "; color: var(--muted); font-size: .7rem; }
tr.mx-differ .mx-b::before { content: "Rakudo "; color: var(--muted); font-size: .7rem; }
.mx-note { font-size: .85rem; color: var(--muted); }

/* ---- type pages: three-way examples ------------------------------------- */

.status.st-ref { background: var(--rule-bg); color: var(--muted); }
.ex-block { margin: 1.1rem 0 1.6rem; }
.ex-verdict { font-size: .78rem; margin: .35rem 0 0; }
.v-ok   { color: var(--ok-fg); }
.v-diff { color: var(--no-fg); }
.v-skip { color: var(--muted); }
.three-way { border: 1px solid var(--rule-bd); border-radius: 8px; padding: .6rem .8rem; margin-top: .4rem; }
.tw-row { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; align-items: start; margin: .25rem 0; }
.tw-l { font-size: .72rem; color: var(--muted); padding-top: .35rem; }
.tw-row pre { margin: 0; background: var(--out-bg); border-radius: 5px; padding: .35rem .5rem; overflow-x: auto; }
.tw-kp pre { background: var(--no-bg); }
@media (max-width: 40rem) { .tw-row { grid-template-columns: 1fr; gap: .1rem; } }

/* ---- divergence overview ------------------------------------------------ */

.dot.st-all { background: #8250df; }
table.dv { font-size: .82rem; width: 100%; }
table.dv th.num, table.dv td.num { text-align: right; width: 3.2rem; font-variant-numeric: tabular-nums; }
table.dv td.num { color: var(--muted); }
.n-ok    { color: var(--ok-fg) !important; }
.n-bad   { color: var(--no-fg) !important; font-weight: 600; }
.n-drift { color: #b58900 !important; }
.n-all   { color: #8250df !important; }
.dv-name code { background: none; padding: 0; font-weight: 600; }
.dv-cat { font-size: .68rem; color: var(--muted); }
.dv-dots { line-height: 1; }
.dv-dots .dot { margin-right: 1px; }

.dot.st-rakudo { background: #2a78d6; }
.n-rakudo { color: #2a78d6 !important; }

.ruling { margin-top: .5rem; padding: .55rem .8rem; border-left: 3px solid var(--accent);
          background: var(--rule-bg); border-radius: 0 6px 6px 0; }
.ruling-note { font-size: .82rem; margin: .25rem 0 0; line-height: 1.5; }
.v-pending { color: #8250df; }

svg.hc { width: 100%; max-width: 40rem; height: auto; margin: .6rem 0 1.4rem; }
.hc-ax { stroke: var(--border); stroke-width: 1; }
.hc-lab { fill: var(--muted); font-size: 10px; }

/* One colour per verdict for the "Over time" chart, declared once and worn by
   every rendering of it: the build-time SVG polyline, its legend swatch, and the
   interactive chart theme/chart.js draws over the top (lines, markers, legend
   chips). These are the SAME colours as the .dot legend and the .n-* table
   columns on the divergences page — a chart that recoloured `all-differ` grey
   would be claiming "not run" to anyone reading the page as a whole. */
/* The interactive chart replaces the static one in place, so it has to take up
   the same room — .dash-svg is otherwise unbounded and the swap would reflow the
   page from the prose measure to the full column width. */
#rules-history { max-width: 40rem; }

.vh-ok     { --vh: var(--ok-fg); }
.vh-bad    { --vh: var(--no-fg); }
.vh-drift  { --vh: #b58900; }
.vh-rakudo { --vh: #2a78d6; }
.vh-all    { --vh: #8250df; }
svg.hc polyline.vh-ok, svg.hc polyline.vh-bad, svg.hc polyline.vh-drift,
svg.hc polyline.vh-rakudo, svg.hc polyline.vh-all,
.dash-line.vh-ok, .dash-line.vh-bad, .dash-line.vh-drift,
.dash-line.vh-rakudo, .dash-line.vh-all { stroke: var(--vh); }
.dash-dot.vh-ok, .dash-dot.vh-bad, .dash-dot.vh-drift,
.dash-dot.vh-rakudo, .dash-dot.vh-all { fill: var(--vh); }
.dot.vh-ok, .dot.vh-bad, .dot.vh-drift, .dot.vh-rakudo, .dot.vh-all,
.dash-swatch.vh-ok, .dash-swatch.vh-bad, .dash-swatch.vh-drift,
.dash-swatch.vh-rakudo, .dash-swatch.vh-all { background: var(--vh); }

/* The Rules pages carry material the Spec's prose column was never sized for:
   the behaviour matrix, three-way example blocks, and the divergence grid whose
   dot strips run to a hundred dots. 50rem forces those into a scroll bar for no
   reason, so the column is wider here. Prose still reads at a sane measure
   because the long-form text lives on hand-written rule pages, which are mostly
   paragraphs inside this width rather than filling it. */
body.rules { --maxw: 66rem; }
body.rules .content > p,
body.rules .content > ul,
body.rules .content > ol,
body.rules .content > blockquote { max-width: 46rem; }

/* Support chips, graded by how strong the evidence actually is. */
.chip-warn { color: #8a6100; background: #fdf3d7; border-color: transparent; }
.chip-weak { color: var(--muted); background: var(--skel-bg); border-color: transparent; }
:root[data-theme-active="dark"] .chip-warn { color: #e3b341; background: #2a2213; }

/* A claimed divergence: asserted to differ between the engines, and checked. */
.diverge { margin: .8rem 0; }
.diverge-tag {
  display: inline-block; font-size: .68rem; padding: .1rem .45rem;
  border-radius: 5px; background: var(--no-bg); color: var(--no-fg); margin-bottom: .25rem;
}
.diverge pre { margin: 0; border-left: 3px solid var(--no-fg); }