/* wgf-materials.css - the /materials/ hub + /material/<slug>-<id>/ detail surfaces.
 *
 * 2026-09-03: lifted verbatim-in-behaviour out of material_app._MATERIAL_CSS, which was an
 * inline <style> block in shell output (doc 18 s4 bans that: "extra_css + an existing family
 * sheet"). Three things changed on the way across:
 *   1. every rule is scoped under .mat-page, so this sheet can no longer restyle
 *      .wgf-section / .section-heading for the rest of the site;
 *   2. every gradient fill is gone (doc 18 s4 bans gradients and glows) - the stone-tile
 *      header scrim is now a flat inset shadow and the row hover is a flat gold tint;
 *   3. every hardcoded colour is a palette token from static/css/_tokens.css. No green.
 *
 * Art used here, all first-party and ls-verified 2026-09-03:
 *   /assets/ui/128-redbutton-{left-cap,right-cap,_128-redbutton-center}[-pressed].png
 *   /assets/ui/classhall-stone-tile.png
 * The quality rings (.wgf-qborder--*) live in wgf-chrome.css, which these pages already link.
 */

.mat-page { max-width: 1100px; margin: 0 auto; padding: 0 1.1rem; }
.mat-page .wgf-section { margin: 1.8rem 0; }
.mat-page .section-heading {
  font-family: var(--font-game, 'Cinzel', serif);
  font-variant: small-caps;
  letter-spacing: .03em;
  color: var(--wgf-gold);
  font-size: 1.4rem;
  margin: 0 0 .8rem;
}

/* ── detail hero: the icon seated in its real AH quality ring beside the name ── */
.mat-page .mat-hero { display: flex; gap: 1.1rem; align-items: center; margin: 1rem 0 .4rem; }
.mat-page .mat-hero-art { flex: 0 0 auto; }
.mat-page .mat-hero-type { color: var(--wgf-muted); margin: .2rem 0 0; font-size: .95rem; }
.mat-page .mat-hero .wgf-seo-h1 { margin: 0; }

/* ── live market ── */
.mat-page .mat-price-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mat-page .mat-price-card {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem 1rem;
  border: 1px solid var(--wgf-well-edge);
  border-radius: 4px;
  background: var(--wgf-well);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.mat-page .mat-price-label {
  color: var(--wgf-gold-muted);
  font-family: var(--font-game, serif);
  font-variant: small-caps; font-size: .8rem; letter-spacing: .04em;
}
.mat-page .mat-price-val { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mat-page .mat-supply { display: flex; gap: 1.1rem; color: var(--wgf-text); font-size: .95rem; }
.mat-page .mat-stat b { color: var(--wgf-text); }
.mat-page .mat-na { color: var(--wgf-muted); }
.mat-page .mat-fresh { margin: .7rem 0; }
.mat-page .mat-chart { margin: 1rem 0; }
.mat-page .mat-note { color: var(--wgf-muted); font-size: .88rem; margin: .7rem 0 0; }
.mat-page .mat-note a { color: var(--wgf-gold-link); }
.mat-page .mat-chart-collecting { color: var(--wgf-muted); }

/* ── datamined facts table ── */
.mat-page .mat-facts-wrap { overflow-x: auto; }
.mat-page .mat-facts-table { width: 100%; max-width: 620px; border-collapse: collapse; }
.mat-page .mat-facts-table th,
.mat-page .mat-facts-table td {
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--wgf-metal-soft);
  text-align: left;
  vertical-align: top;
}
.mat-page .mat-facts-table th {
  width: 42%;
  color: var(--wgf-gold-muted);
  font-family: var(--font-game, 'Cinzel', serif);
  font-variant: small-caps; font-weight: 700; letter-spacing: .03em;
}
.mat-page .mat-facts-table td { color: var(--wgf-text); font-variant-numeric: tabular-nums; }
.mat-page .mat-facts-table tr:last-child th,
.mat-page .mat-facts-table tr:last-child td { border-bottom: 0; }

/* ── sources (gathering / drops / quests) ── */
.mat-page .mat-src-group { margin: 0 0 1.1rem; }
.mat-page .mat-src-head {
  font-family: var(--font-game, 'Cinzel', serif);
  font-variant: small-caps; color: var(--wgf-gold-muted);
  font-size: 1.02rem; margin: 0 0 .4rem;
}
.mat-page .mat-src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mat-page .mat-src { margin: 0; }
.mat-page .mat-src > a,
.mat-page .mat-src { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.mat-page .mat-src > a { padding: .35rem .5rem; border: 1px solid var(--wgf-metal-soft); border-radius: 3px; background: var(--wgf-well); }
.mat-page .mat-src > a:hover { border-color: var(--wgf-gold-accent); }
.mat-page .mat-src__name { color: var(--wgf-gold-link); }
.mat-page .mat-src__sub { color: var(--wgf-muted); font-size: .86rem; }
.mat-page .mat-src__sub a { color: var(--wgf-gold-link); }
.mat-page .mat-ic { border-radius: 3px; border: 1px solid rgba(0, 0, 0, .6); background: #000; flex: 0 0 auto; }

/* ── zone map composite ── */
.mat-page .mat-map { margin: 0; }
.mat-page .mat-map img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--wgf-metal); border-radius: 4px; background: #000;
}
.mat-page .mat-map figcaption { color: var(--wgf-muted); font-size: .86rem; margin: .5rem 0 0; }
.mat-page .mat-map figcaption a { color: var(--wgf-gold-link); }

/* ── recipe lists ── */
.mat-page .mat-rec-group { margin: 0 0 1rem; }
.mat-page .mat-rec-head {
  font-family: var(--font-game, 'Cinzel', serif);
  font-variant: small-caps; color: var(--wgf-gold-muted);
  font-size: 1.02rem; margin: 0 0 .35rem;
}
.mat-page .mat-rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.mat-page .mat-rec-list li { margin: 0; }
.mat-page a.mat-rec { display: inline-flex; align-items: center; gap: .4rem; color: var(--wgf-gold-link); text-decoration: none; }
.mat-page a.mat-rec:hover { text-decoration: underline; }
.mat-page .mat-prose p { margin: 0 0 1rem; color: var(--wgf-text); line-height: 1.7; max-width: 760px; }

/* ── price cohort ── */
.mat-page .mat-cohort__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .3rem .9rem;
}
.mat-page .mat-cohort__row {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .45rem; border-bottom: 1px solid var(--wgf-border-neutral-soft);
}
.mat-page .mat-cohort__name { flex: 1 1 auto; min-width: 0; }
.mat-page .mat-cohort__name a { color: var(--wgf-gold-link); text-decoration: none; }
.mat-page .mat-cohort__name a:hover { text-decoration: underline; }
.mat-page .mat-cohort__price { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ── cross-links: squared tooltip plates, no pills, no gradients ── */
.mat-page .mat-xgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.mat-page .mat-xcard {
  display: block; text-decoration: none;
  background: var(--wgf-panel);
  border: 1px solid var(--wgf-metal); border-radius: 4px;
  padding: 1rem 1.1rem;
  transition: border-color var(--motion-fast, .12s) var(--ease-standard, ease);
}
.mat-page .mat-xcard:hover { border-color: var(--wgf-gold); }
.mat-page .mat-xcard b {
  display: block;
  font-family: var(--font-game, 'Cinzel', serif);
  font-variant: small-caps; color: var(--wgf-gold); margin-bottom: .25rem;
}
.mat-page .mat-xcard span { color: var(--wgf-muted); font-size: .88rem; }

/* ── INDEX HERO: the title block sits directly on the Undermine backdrop ── */
.mat-page .wgf-seo-hero {
  max-width: none; margin: 0; padding: 1.3rem 0 .5rem;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.mat-page .wgf-seo-hero .wgf-seo-eyebrow { text-shadow: var(--text-ink-outline); }
.mat-page .wgf-seo-hero .wgf-seo-h1 { text-shadow: var(--text-ink-outline); }
.mat-page .wgf-seo-hero .wgf-seo-sub { color: var(--wgf-text); text-shadow: 0 1px 3px rgba(0, 0, 0, .92); }

/* ── CATEGORY TABS: the client 128-redbutton slices, dimmed at rest, pressed when current ── */
.mat-page .mat-cats { margin: 1.2rem 0; }
.mat-page .mat-cats .section-heading { font-size: 1.05rem; margin-bottom: .5rem; }
.mat-page .mat-facets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.mat-page .mat-facet {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  height: 32px; padding: 0 14px; border: 0; border-radius: 0;
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-muted);
  font-family: var(--font-game, 'Cinzel', serif);
  font-size: .9rem; font-weight: 700; font-variant: small-caps; letter-spacing: .03em;
  line-height: 1; text-shadow: var(--text-ink-outline); text-decoration: none; cursor: pointer;
  filter: brightness(.7) saturate(.9);
  transition: filter var(--motion-fast, .12s) var(--ease-standard, ease),
              color var(--motion-fast, .12s) var(--ease-standard, ease);
}
.mat-page .mat-facet:hover { filter: brightness(1) saturate(1); color: var(--wgf-gold-bright); }
.mat-page .mat-facet:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mat-page .mat-facet__ic { border-radius: 2px; flex: 0 0 auto; }
.mat-page .mat-facet.is-active {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  filter: brightness(1) saturate(1);
  color: var(--wgf-gold-bright);
  transform: translateY(1px);
}

/* ── INDEX TABLE: the in-game journal inside the .wgf-window frame ── */
.mat-page .mat-table { width: 100%; border-collapse: collapse; margin: 0; }
.mat-page .mat-table thead th {
  position: sticky; top: 0; text-align: left; padding: .6rem .8rem;
  color: var(--wgf-gold);
  font-family: var(--font-game, 'Cinzel', serif);
  font-weight: 700; font-size: .82rem; font-variant: small-caps; letter-spacing: .04em;
  text-shadow: var(--text-ink-outline);
  background: url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat, var(--wgf-plate-hi);
  /* flat scrim over the real stone tile - an inset shade, never a gradient */
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .5);
  border-bottom: 1px solid var(--wgf-metal);
}
.mat-page .mat-table tbody tr { background: rgba(8, 8, 10, .34); }
.mat-page .mat-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .24); }
.mat-page .mat-table td {
  padding: .5rem .8rem;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}
.mat-page .mat-table td.mat-price-col { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mat-page .mat-table tbody tr:hover td {
  background-color: rgba(var(--wgf-gold-rgb), .09);
  box-shadow: inset 0 0 0 1px rgba(var(--wgf-gold-rgb), .20);
}
.mat-page .mat-row-name { display: flex; align-items: center; gap: .55rem; }
.mat-page .mat-row-name img { border-radius: 3px; border: 1px solid rgba(0, 0, 0, .6); background: #000; }
.mat-page .mat-row-name a { color: var(--wgf-gold-link); text-decoration: none; }
.mat-page .mat-row-name a:hover { text-decoration: underline; }

/* ── PAGER: layout only; the control chrome is the shared component (wgf-pagination.css) ── */
.mat-page .mat-pager { margin: 1.2rem 0 2rem; }
.mat-page .mat-pager__count { margin: 0 0 .55rem; color: var(--wgf-text); font-size: .88rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .92); }

/* ── HUB IDENTITY: the icon sits in the client's metal quality ring (wgf-chrome.css) ── */
.mat-page .mat-hubhero { display: flex; gap: 1rem; align-items: flex-start; }
.mat-page .mat-hubhero__art { flex: 0 0 auto; padding-top: .35rem; }
.mat-page .mat-hubhero__text { min-width: 0; }
.mat-page .mat-hubhero .wgf-seo-sub { max-width: 68ch; }
/* The hub wears the same round metal ring as an item icon, one size up so it reads
   next to an h1. Art and rule both live in wgf-chrome.css; this only scales them. */
.mat-page .mat-hubhero .wgf-qborder { width: 64px; height: 64px; }
.mat-page .mat-hubhero .wgf-qborder__icon { width: 46px; height: 46px; }

/* ── HUB SUMMARY BOARD: three client windows, the few things worth reading first ── */
.mat-page .mat-board { margin: 1.4rem 0; }
.mat-page .mat-board__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem;
}
.mat-page .mat-board__panel { margin: 0; }
.mat-page .mat-board__panel .mat-cohort__list { grid-template-columns: 1fr; }
.mat-page .mat-board__note {
  margin: .6rem 0 0; color: var(--wgf-muted); font-size: .84rem; line-height: 1.45;
}
.mat-page .mat-board__stock { font-variant-numeric: tabular-nums; color: var(--wgf-text); }

/* ── CATEGORY FACTS TABLE: what the whole set contains, ten rows ── */
.mat-page .mat-cattable { margin: 1.4rem 0; }
.mat-page .mat-tablewrap { overflow-x: auto; }
.mat-page .mat-cat-table td { vertical-align: middle; }
.mat-page .mat-cat-table tr.is-active td { box-shadow: inset 2px 0 0 var(--wgf-gold-accent); }
.mat-page .mat-cat-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--wgf-gold-link); text-decoration: none;
}
.mat-page .mat-cat-link:hover { text-decoration: underline; }
.mat-page .mat-cat-ic { border-radius: 2px; flex: 0 0 auto; }
.mat-page .mat-cat-item { display: inline-flex; align-items: center; gap: .45rem; }
.mat-page .mat-cat-item a { color: var(--wgf-gold-link); text-decoration: none; }
.mat-page .mat-cat-item a:hover { text-decoration: underline; }
.mat-page .mat-cat-coin { display: block; font-variant-numeric: tabular-nums; font-size: .86rem; }
.mat-page .mat-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mat-page .mat-table th.mat-num { text-align: right; }

/* ── LONG LIST: the demand marker. A flat bronze rule, no pill glow, no green ── */
.mat-page .mat-uses-col { white-space: nowrap; }
.mat-page .mat-demand {
  display: inline-block; padding: .05rem .4rem;
  border: 1px solid var(--wgf-metal-soft); border-radius: 2px;
  color: var(--wgf-gold-muted); font-size: .78rem; font-variant: small-caps; letter-spacing: .03em;
}

/* ── THE FULL LIST, BEHIND ITS CONTROL (2026-09-04) ──────────────────────────────
   /materials/ measured 292,392 bytes through the public edge and 230,309 of them were
   one 250-row table. The rows per page dropped to 100 and the list moved inside a
   <details> whose <summary> IS the window's title bar - so there is still exactly one
   title bar, and the rows stay in the served HTML (collapsed, not removed) so the tail
   keeps its internal links. Flat metal only: no gradient, no glow, no green. */
.mat-page .mat-dirsec { margin: 1.6rem 0 0; }
.mat-page .mat-dir__sub { margin: 0 0 .7rem; color: var(--wgf-muted); font-size: .9rem; }
.mat-page .mat-dir { margin: 0; }
.mat-page .mat-dir__summary {
  justify-content: space-between; gap: .8rem; text-align: left;
  cursor: pointer; list-style: none; user-select: none;
}
.mat-page .mat-dir__summary::-webkit-details-marker { display: none; }
.mat-page .mat-dir__summary:hover { color: var(--wgf-gold-bright); }
.mat-page .mat-dir__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Disclosure caret drawn from borders - a shape, not an icon file and not an emoji. */
.mat-page .mat-dir__label::before {
  content: ""; display: inline-block; margin-right: .5rem;
  border: .34em solid transparent; border-left-color: currentColor;
  transform: translateY(.05em);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.mat-page .mat-dir[open] > .mat-dir__summary .mat-dir__label::before {
  transform: rotate(90deg) translateX(.05em);
}
.mat-page .mat-dir__count {
  flex: 0 0 auto; color: var(--wgf-gold-muted);
  font-family: var(--font-game); font-size: .8rem; font-variant: small-caps;
  letter-spacing: .03em; white-space: nowrap;
}
.mat-page .mat-dir__showing { margin: 0 0 .6rem; }
@media (max-width: 560px) {
  .mat-page .mat-dir__summary { flex-wrap: wrap; }
  .mat-page .mat-dir__count { width: 100%; }
}