/* T11 reference (scripts/lib/templates/reference.mjs, ops/design/templates/reference/contract.md).
   Three modules. Lookup: a bar with the filter, count, index and red button, then 66ch
   entries and an aside; from 64rem the aside sits beside the entries, from 88rem the bar is a
   sticky rail on the left. Matrix: the quick answer at 5 of 12 columns beside the first table
   at 7 (sticky from 72rem); later tables below, in pairs from 64rem. Path: the steps at 7
   beside the dates, notes and FAQ at 5. Tables keep a row header and at most two value
   columns, so phones get a real table with no sideways scroll. Brand v2.1 tokens only; the
   page accent stays Classic yellow. */

.ref { padding-bottom: var(--s-6); }
.ref-head .wfg-page-head { padding-bottom: var(--s-3); }
.ref-head .wfg-page-meta a { display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--accent-text); }
.ref-head .wfg-page-meta { align-items: center; }
.ref-next { margin: var(--s-2) 0 0; }
.ref-next .wfg-btn { width: 100%; }
@media (min-width: 40.01rem) { .ref-next .wfg-btn { width: auto; } }
.ref-legend { max-width: var(--measure); font: 400 .85rem/1.5 var(--font-ui); color: var(--ink-3); }
.ref-legend b { font-weight: 400; color: var(--ink-2); }
.ref-legend a, .ref-meta a { color: var(--accent-text); }
.ref-block { min-width: 0; }
.ref-block > h2:first-child { margin-top: 0; }
.ref-block .wfg-facts { margin-bottom: var(--s-3); }
.ref-alias { display: block; }

/* ---------- EntryMeta ---------- */

.ref-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: .4rem 0 0; font: 400 .8rem/1.3 var(--font-ui); color: var(--ink-3); }
.ref-meta > a, .ref-meta .ref-owner a, .ref-table th a { display: inline-flex; align-items: center; min-height: 1.75rem; }
.ref-permalink { min-width: 1.75rem; justify-content: center; margin-left: auto; text-decoration: none; }

/* ---------- Lookup ---------- */

.ref-lookup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ref-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel); }
.ref-filter:not([hidden]) { display: contents; }
.ref-filter label { grid-column: 1; grid-row: 1; font: 400 .78rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ref-count { grid-column: 2; grid-row: 1; margin: 0; text-align: right; font: 400 .85rem/1.3 var(--font-ui); color: var(--ink-2); }
.ref-filter input, .ref-index, .ref-bar .ref-next { grid-column: 1 / -1; }
.ref-filter input { width: 100%; min-height: 2.75rem; padding: .5rem .7rem .5rem 2.2rem; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39c90' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7rem 50% / 1rem; border: 1px solid var(--line-control); border-radius: var(--r-ctl); color: var(--ink); font: 400 1rem/1.2 var(--font-body); }
.ref-filter input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ref-bar .ref-next { margin: 4px 0 0; }
/* position: relative keeps the links' visually-hidden commas (position: absolute) inside the
   scrolling strip; without it they escape the scroller and widen the page on phones, and a
   link to one entry then lands hundreds of pixels off. */
.ref-index ul { position: relative; display: flex; gap: 6px; margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; }
/* A row that scrolls sideways fades at its right edge, so the cut-off chip reads as "more". */
.ref-index ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
.ref-index a { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: 0 10px; border: 1px solid var(--line-control); border-radius: var(--r-ctl); font: 400 .9rem/1 var(--font-ui); white-space: nowrap; text-decoration: none; color: var(--ink); }
.ref-index small { font-size: .78rem; color: var(--ink-3); }
.ref-entries { min-width: 0; max-width: 66ch; }
.ref-group + .ref-group { margin-top: var(--s-5); }
.ref-group h2 { margin: 0 0 .4rem; font: var(--heading-weight) 1.9rem/1.2 var(--font-heading); letter-spacing: 0; color: var(--ink); }
.ref-entry { padding: 10px 0; border-top: 1px solid var(--hairline); scroll-margin-top: var(--s-4); }
.ref-entry h3 { margin: 0 0 .25rem; font: var(--heading-weight) 1.02rem/1.3 var(--font-heading); letter-spacing: 0; color: var(--ink); }
.ref-answer { margin: 0; color: var(--ink-2); }
.ref-entry:target, .ref-table tr:target > * { background: var(--panel-2); }
.ref-entry:target { padding-inline: 10px; box-shadow: inset 2px 0 0 var(--accent); }
.ref-table tr:target > th { box-shadow: inset 2px 0 0 var(--accent); }
.ref-entry[hidden], .ref-group[hidden], .ref-empty[hidden] { display: none; }
.ref-empty { padding: 12px 14px; border: 1px solid var(--edge); background: var(--panel); }
.ref-empty p { margin: 0 0 .5rem; }
.ref-empty p:last-child { margin: 0; }
.ref-aside { display: grid; gap: var(--s-4); min-width: 0; }
.ref-aside .ref-block h2 { font-size: 1.5rem; }
@media (min-width: 64rem) {
  .ref-lookup { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--s-5); }
  .ref-rail { grid-column: 1 / -1; }
  .ref-index ul { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ref-bar .ref-next .wfg-btn { width: auto; }
}
@media (min-width: 88rem) {
  .ref-lookup { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
  .ref-rail { grid-column: auto; position: sticky; top: var(--sticky-top); }
  .ref-index ul { flex-direction: column; }
  .ref-index a { justify-content: space-between; width: 100%; }
  .ref-index.is-terms ul { flex-flow: row wrap; }
  .ref-index.is-terms a { width: auto; }
  .ref-bar .ref-next .wfg-btn { width: 100%; }
}

/* ---------- Matrix ---------- */

.ref-top, .ref-matrices, .ref-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ref-matrices { margin-top: var(--s-4); }
@media (min-width: 64rem) { @container page (width >= 63rem) { .ref-matrices.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } }
@media (min-width: 72rem) { @container page (width >= 71rem) {
  .ref-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ref-top--path { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ref--matrix .ref-top > #answer { position: sticky; top: var(--sticky-top); }
  .ref-top .wfg-facts.is-compact .wfg-fact { gap: 1px 10px; padding-block: 6px; }
} }
.ref-table { width: 100%; }
.ref-table caption { padding: 8px var(--tbl-pad-x); caption-side: top; border-bottom: 1px solid var(--hairline); }
.ref-cap-tier { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: 4px; }
.ref-table th, .ref-table td { overflow-wrap: break-word; }
.ref-table tbody th { width: 30%; }
.ref-change, .ref-note, .ref-cell-tier { display: block; margin-top: 1px; font: 400 var(--tbl-fs-sub)/1.35 var(--font-ui); color: var(--ink-3); }
.ref-change[data-change="new"] { color: color-mix(in srgb, var(--new) 55%, var(--ink-3)); }
.ref-change[data-change="changed"] { color: color-mix(in srgb, var(--reworked) 55%, var(--ink-3)); }
.ref-cell-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.ref-na { font-style: italic; color: var(--ink-3); }
@media (max-width: 40rem) {
  .ref-table thead th { white-space: nowrap; }
  .ref-table tbody th { width: 26%; }
}
/* Reflow (styles.css, main): the phone sizes under 39rem of page (768 at 200% text). Under
   21.5rem (390 at 200% text, and phones under 344px, where a long word such as
   "transmogrifiers" ran the Classic Era table 5px past a 320 screen) three columns cannot
   fit, so each row becomes a block: the name, then each value under its column's label
   (data-label). */
@container page (width < 39rem) {
  .ref-table thead th { white-space: nowrap; }
  .ref-table tbody th { width: 26%; }
}
@container page (width < 21.5rem) {
  .ref-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ref-table, .ref-table caption, .ref-table tbody, .ref-table tr, .ref-table th, .ref-table td { display: block; width: auto; }
  .ref-table tbody tr { padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
  .ref-table tbody th, .ref-table td { width: auto; padding: 1px 0; border: 0; }
  .ref-table td[data-label]::before { content: attr(data-label); display: block; font: 400 .7rem/1.6 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
}

/* ---------- Path ---------- */

.ref-steps { margin: 0; padding: 0; list-style: none; }
.ref-step { padding: 8px 0; border-top: 1px solid var(--hairline); scroll-margin-top: var(--s-4); }
.ref-step:first-child { border-top: 0; padding-top: 0; }
.ref-step h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 .2rem; font: var(--heading-weight) 1.4rem/1.25 var(--font-heading); letter-spacing: 0; color: var(--ink); }
.ref-step-n { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--accent); font: 400 .9rem/1 var(--font-ui); color: var(--accent-text); }
.ref-step-body { margin-left: calc(1.6rem + 10px); }
.ref-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: .3rem 0 0; font: 400 .85rem/1.3 var(--font-ui); color: var(--ink-2); }
.ref-when b { font-weight: 400; padding: 1px 6px; border: 1px solid var(--line-control); color: var(--ink); }
.ref-when[data-state="open"] b { border-color: var(--accent); color: var(--accent-text); }
.ref-when[data-state="ended"] b { border-style: dashed; color: var(--ink-3); }
.ref-path-side { display: grid; gap: var(--s-5); min-width: 0; }
/* A route with the PartnerCta (/new-players): the path and the CTA under it share the left
   column, so the CTA follows the answer at every width (templates/reference.mjs). */
.ref-path-main { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.ref-cta { margin-top: var(--s-4); }
.ref-path-side .ref-block h2, .ref-path-side .wfg-faq > h2 { margin: 0 0 .25rem; font-size: 1.5rem; }
.ref-step-note { max-width: var(--measure); scroll-margin-top: var(--s-4); }
.ref-step-note h3 { margin: var(--s-3) 0 .25rem; font: var(--heading-weight) 1rem/1.3 var(--font-heading); letter-spacing: 0; }
.ref-step-note p { margin: 0; color: var(--ink-2); }

/* ---------- Below the answer ---------- */

.ref-lower { margin-top: var(--s-section); }
/* Lookup and path pages: the body's long-form notes, one reading column under the module. */
.ref-guide { display: grid; gap: var(--s-section); margin-top: var(--s-section); }
.ref-guide .prose { max-width: var(--measure); }
.ref-lower-main, .ref-lower-side { display: grid; gap: var(--s-section); min-width: 0; align-content: start; }
.ref-lower .prose { max-width: var(--measure); }
@media (min-width: 72rem) { .ref-lower:not(.is-single) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6); } }
.ref-end { margin-top: var(--s-section); }
.ref-end > .affiliate-break { margin-block: 0 var(--s-6); }
/* The lower page sits beside the shared table of contents (guideFrame): the grid takes the
   section gap, so the first block under the disclosure starts level with the rail. */
.ref-frame { margin-top: var(--s-section); }
.ref-frame > .article-column > :first-child,
.ref-frame > .article-column > .contents-collapsible + * { margin-top: 0; }
.ref-frame > .guide-aside { padding-top: 0; }