/* Race guide on the guild site — the manual's grammar on top of umami-theme.css, like umami-atlas.css:
   square corners, specs as plates with a double hairline and a gold top rule, ruled tables, game icons in
   gold-edged frames, tabs and a class picker. Loaded only on race-guide.html. */

body { font-variant-numeric: tabular-nums; }

/* Opening like its sister tools (Jonathan 13-10: "tilpas lidt mere til hjemmesiden"): the atlas's dark hero band
   across the full width, a display title at the size of Race atlas and Forever vs Classic, an 18px standfirst. */
.hero { position: relative; padding-top: 56px !important; padding-bottom: 28px !important; background: var(--hero-bg);
  box-shadow: 0 0 0 100vmax var(--hero-bg); clip-path: inset(0 -100vmax); }
.hero h1 { font-size: clamp(34px, 5vw, 56px) !important; line-height: 1.05 !important; margin: 0 0 16px !important; }
.hero .lede { font-size: 18px; line-height: 1.6; max-width: 60ch; }
.hero .eyebrow { margin: 14px 0 0 !important; }
/* "Note" in the site's own voice: blue small caps, as on every chapter page (globals.css .notice). */
.note b.mark { color: #86a6f0 !important; }
/* The verdict is a plate, like the spec cards below it: dark ground, hairline frame, gold rule on top. */
table.over { background: #10141f; border: 1px solid #2b3242; border-top: 2px solid var(--gold); }
table.over thead th:first-child, table.over tbody th { padding-left: 16px !important; }
table.over thead th:last-child, table.over td:last-child { padding-right: 16px !important; }
table.over tbody tr:hover { background: color-mix(in srgb, #86a6f0 6%, #10141f); }

/* Specs and the worked example become plates: dark ground, double hairline frame, a gold rule on top. */
.spec, .example {
  background: #10141f !important;
  border: 1px solid #2b3242 !important;
  border-top: 2px solid var(--gold) !important;
  box-shadow: inset 0 0 0 5px #10141f, inset 0 0 0 6px #232a3a, 0 14px 32px rgba(0, 0, 0, .35) !important;
}
.spec > h4 { color: var(--ink); }
/* The class heading is a chapter opening: icon + name over ONE rule (ink, so it does not double the plate's
   gold top rule right below it). */
.cls-head { border-bottom: 0 !important; margin-bottom: 16px !important; padding-bottom: 0 !important; }   /* the plate below carries the rule (review 10-10) */
.cls-head h3 { font-size: 30px !important; }
/* The answer: a gold rule beside the verdict sentence (gold is for rules); "close" specs keep the warning colour. */
.answer { border-left: 2px solid var(--gold) !important; }
.answer.warn { border-left-color: var(--warn) !important; }
.answer .big { font-size: 18px !important; font-weight: 400; }   /* Public Sans: figures are never Marcellus (DESIGN.md, Type) */
.spec .mini { margin-top: 4px; }
/* The verdict table: spec names as row heads in ink, links in blue. */
table.over tbody th.spec-name { font-weight: 400; }
/* Evidence labels: quiet, not gold (gold is for rules and numbers). */
.ev { color: var(--ink-3) !important; border-color: #2a3040 !important; }
/* On wide screens the verdict keeps its column heads in view while you scroll the 28 specs. */
@media (min-width: 641px) { table.over thead th { position: sticky; top: 51px; z-index: 5; background: #10141f; } }

/* Ruled tables: ink rules, no boxes (DESIGN.md, Components). */
table.ruled thead th { border-bottom-color: #ebe5d6 !important; font-family: "Public Sans", system-ui, sans-serif !important; }
table.ruled td, table.ruled tbody th { border-bottom-color: #2a3040 !important; }
.over a { color: #86a6f0; }

/* Icons: gold-edged like in-game buttons. */
.ug-icon { display: block; border: 1px solid #8a7038; box-shadow: 0 0 0 1px #000, 0 3px 10px rgba(0, 0, 0, .45); background: #000; border-radius: 3px; }
.ug-inline { display: inline-block; vertical-align: -4px; margin-right: 7px; border-radius: 2px; box-shadow: 0 0 0 1px #000; }
.crest.ug-has-icon { border: 0 !important; width: auto !important; height: auto !important; }
.ug-mono { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; vertical-align: -4px; border: 1px solid var(--gold); color: var(--gold); font: 400 11px/1 "Marcellus SC", "Marcellus", serif; }

/* ---- Tabs (umami-guide.js): the verdict, class by class, how it works, weak points ---- */
.ug-tabs { position: sticky; top: 0; z-index: 20; background: rgba(13, 16, 24, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid #ebe5d6; }
.ug-tabs-in { max-width: 980px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 0 4px; }
.ug-tab { font: 400 19px/1.2 "Marcellus", "Palatino Linotype", serif; background: transparent; color: var(--ink-2); border: 0; border-bottom: 3px solid transparent; padding: 14px 14px 12px; cursor: pointer; }
.ug-tab:hover { color: var(--ink); }
.ug-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
section.ch.ug-off { display: none !important; }
/* A jump to a spec or class lands below the sticky tab bar, not under it. */
.spec, .cls-block, section.ch { scroll-margin-top: 72px; }
.hero::after { display: none; }   /* the tab bar's ink rule takes the place of the hero's own rule */

/* Class picker: the nine class icons; the current one gets the gilded marker, like the current thumb tab. */
.ug-picker { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: 0 0 32px; }
.ug-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; background: transparent; color: #86a6f0; border: 1px solid #86a6f0; border-radius: 0; padding: 8px 4px 7px;
  font: 600 13px/1 "Public Sans", system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.ug-pick:hover { background: color-mix(in srgb, #86a6f0 9%, #0d1018); }
.ug-pick[aria-pressed="true"] { background: #d2ae5c; border-color: #d2ae5c; color: #14100a; }
.cls-block.ug-off { display: none !important; }

/* Sources at the foot: folded, like the other tools. */
.ug-src summary { cursor: pointer; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; }

/* Short tab names on phones (umami-guide.js writes both). */
.ug-tab .s { display: none; }
@media (max-width: 860px) { .ug-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ug-tab { font-size: 16px; padding: 12px 6px 10px; }
  .ug-tab .l { display: none; } .ug-tab .s { display: inline; }
  .ug-tabs-in { flex-wrap: nowrap; gap: 0; padding: 0 8px; justify-content: space-between; }
  .ug-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ug-pick { flex-direction: row; justify-content: flex-start; padding: 5px 6px; font-size: 11.5px; }
  .ug-pick .ug-icon { width: 24px; height: 24px; }
  .ug-pick { min-height: 44px; }
  .cls-head h3 { font-size: 26px !important; }
  .answer .big { font-size: 17px !important; }
}