/* Fractara Wiki — shared stylesheet.
   The chrome mirrors the in-game HUD so the wiki reads as the same frame:
   slate plates, thin cool borders, gold spent only on titles, accents and the
   active state. Token values are lifted from
   packages/client/src/components/hud/hud-chrome.ts and the HUD components. */

:root {
  /* HUD plate stack, darkest to lightest */
  --hud-track: #050a18; /* meter track / page ground */
  --hud-slot-bottom: #080f1f; /* readout slot gradient, bottom */
  --hud-plate: #0b1221; /* panel base */
  --hud-slot-top: #0e1730; /* readout slot gradient, top */
  --hud-panel-top: #131c33; /* HUD bar gradient, top */
  --hud-frame-top: #16203a; /* raised frame gradient, top */
  --hud-inset: #1a2744;

  /* Borders */
  --hud-edge: #2a3855; /* hairline that separates a bar from the world */
  --hud-border-inner: #26344d;
  --hud-border-raised: #34435f;
  --hud-border-hover: #425473;

  /* Ink */
  --hud-gold: #c5a059; /* icons, active state, accents */
  --hud-gold-bright: #e8c46e;
  --hud-gold-dim: #8b6e32;
  --hud-title: #f3e5ab; /* pale gold — headings and emphasis */
  --hud-body: #b4c4dd;
  --hud-secondary: #8ba1c5;
  --hud-muted: #5d6f96;

  --hud-highlight: rgba(243, 229, 171, 0.06); /* inset top highlight */
  --hud-glow: rgba(197, 160, 89, 0.28);

  --measure: 68ch;
  --font-display: "Cinzel", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  background-color: var(--hud-track);
  background-image:
    radial-gradient(ellipse 70% 42% at 50% -8%, rgba(197, 160, 89, 0.08), transparent 70%),
    radial-gradient(ellipse 55% 38% at 88% 4%, rgba(112, 82, 199, 0.1), transparent 68%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--hud-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 350;
  overflow-x: hidden;
}

.skip-link {
  position: fixed;
  top: 0;
  left: -999px;
  z-index: 100;
  padding: 0.55rem 0.8rem;
  color: var(--hud-track);
  background: var(--hud-gold-bright);
}

.skip-link:focus {
  left: 0;
}

/* ---------- layout ---------- */

.shell {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}

/* The top bar is the HUD bar: panel gradient, hairline edge, gold on labels. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(to bottom, var(--hud-panel-top), var(--hud-plate));
  border-bottom: 1px solid var(--hud-edge);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  flex-wrap: wrap;
}

/* Brand emblem sits in a readout slot, exactly like the HUD's brand pill. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--hud-title);
  padding: 0.28rem 0.7rem 0.28rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--hud-edge);
  background: linear-gradient(to bottom, var(--hud-slot-top), var(--hud-slot-bottom));
  box-shadow: inset 0 1px 0 var(--hud-highlight);
}

.brand:hover {
  border-color: var(--hud-border-hover);
}

.brand img {
  width: 22px;
  height: 22px;
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.88rem;
  color: var(--hud-title);
}

.brand-suffix {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hud-gold);
  padding-left: 0.55rem;
  margin-left: 0.15rem;
  border-left: 1px solid var(--hud-edge);
}

.site-nav {
  display: flex;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Nav items are HUD buttons: slot plate, gold border + glow when engaged. */
.site-nav a {
  color: var(--hud-secondary);
  text-decoration: none;
  padding: 0.36rem 0.7rem;
  border-radius: 3px;
  border: 1px solid var(--hud-edge);
  background: linear-gradient(to bottom, var(--hud-slot-top), var(--hud-slot-bottom));
  box-shadow: inset 0 1px 0 var(--hud-highlight);
  transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--hud-title);
  border-color: var(--hud-border-hover);
}

.site-nav a[aria-current="page"] {
  color: var(--hud-title);
  border-color: rgba(197, 160, 89, 0.7);
  box-shadow:
    inset 0 1px 0 var(--hud-highlight),
    0 0 14px var(--hud-glow);
}

main {
  padding: clamp(2rem, 5vw, 3.25rem) 0 5rem;
}

/* Blume emits its semantic page title and frontmatter description before the
   MDX body. The bespoke HUD shell renders those in the page head, so only the
   generated duplicates are visually suppressed. They remain in Blume's raw
   Markdown and search artifacts. */
.blume-content > h1:first-child,
.blume-content > h1:first-child + p {
  display: none;
}

.prose {
  max-width: var(--measure);
}

/* Blume also owns a `.prose` utility. These higher-specificity rules keep its
   MDX semantics while restoring the wiki's established HUD typography. */
.blume-content .prose {
  max-width: var(--measure);
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.blume-content .prose p {
  margin: 0 0 1.05rem;
  color: inherit;
  font: inherit;
}

.page-head .lede.prose {
  max-width: var(--measure);
  color: var(--hud-secondary);
  font-size: 1.12rem;
  line-height: 1.6;
}

.blume-content .prose h3 {
  margin: 1.9rem 0 0.55rem;
  color: var(--hud-gold-bright);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.blume-content .prose strong {
  color: var(--hud-title);
  font-weight: 600;
}

.blume-content .prose code {
  color: var(--hud-secondary);
  background: var(--hud-track);
  border: 1px solid var(--hud-edge);
  border-radius: 3px;
  padding: 0.1em 0.38em;
}

/* ---------- type ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--hud-title);
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
}

h1 {
  font-size: clamp(1.95rem, 5vw, 2.85rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin: 3rem 0 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hud-edge);
}

h3 {
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  margin: 1.9rem 0 0.55rem;
  color: var(--hud-gold-bright);
}

.blume-heading-anchor {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0 0 1.05rem;
}

a {
  color: var(--hud-gold);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(197, 160, 89, 0.45);
}

a:hover {
  color: var(--hud-gold-bright);
  text-decoration-color: var(--hud-gold-bright);
}

strong {
  color: var(--hud-title);
  font-weight: 600;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

code {
  background: var(--hud-track);
  border: 1px solid var(--hud-edge);
  border-radius: 3px;
  padding: 0.1em 0.38em;
  color: var(--hud-secondary);
  overflow-wrap: anywhere;
}

.lede {
  font-size: 1.12rem;
  color: var(--hud-secondary);
  line-height: 1.6;
}

.eyebrow,
.breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hud-muted);
  margin-bottom: 0.85rem;
}

.breadcrumb a {
  color: var(--hud-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--hud-gold);
}

/* ---------- page furniture ---------- */

.page-head {
  border-bottom: 1px solid var(--hud-edge);
  padding-bottom: 1.5rem;
  margin-bottom: 2.1rem;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--hud-muted);
}

/* Status pills reuse the HUD badge language: slot plate, coloured hairline. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  border: 1px solid var(--hud-edge);
  background: linear-gradient(to bottom, var(--hud-slot-top), var(--hud-slot-bottom));
  box-shadow: inset 0 1px 0 var(--hud-highlight);
  color: var(--hud-secondary);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-proposal {
  color: #a68df0;
  border-color: rgba(112, 82, 199, 0.6);
}

.badge-live {
  color: var(--hud-gold);
  border-color: rgba(197, 160, 89, 0.7);
  box-shadow:
    inset 0 1px 0 var(--hud-highlight),
    0 0 14px var(--hud-glow);
}

/* A callout is a raised HUD frame with an inner plate. */
.callout {
  border: 1px solid var(--hud-border-raised);
  border-left: 3px solid var(--hud-gold);
  background: linear-gradient(to bottom, var(--hud-frame-top), var(--hud-plate));
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  margin: 1.7rem 0;
  font-size: 0.94rem;
  color: var(--hud-secondary);
  box-shadow: inset 0 1px 0 var(--hud-highlight);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hud-gold);
  margin-bottom: 0.4rem;
}

.callout-rift {
  border-left-color: #7052c7;
}

.callout-rift .callout-title {
  color: #a68df0;
}

/* ---------- tables ---------- */

/* Table shell = HUD frame; head row = readout slot; rows = meter tracks. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hud-border-raised);
  border-radius: 8px;
  background: var(--hud-plate);
  margin: 1.7rem 0;
  box-shadow:
    inset 0 1px 0 var(--hud-highlight),
    0 8px 22px rgba(0, 0, 0, 0.35);
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-size: 0.92rem;
}

caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.78rem;
  color: var(--hud-muted);
  padding: 0.8rem 1.1rem 0.9rem;
  border-top: 1px solid var(--hud-edge);
}

thead th {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hud-gold);
  text-align: left;
  padding: 0.8rem 1.1rem;
  background: linear-gradient(to bottom, var(--hud-slot-top), var(--hud-slot-bottom));
  border-bottom: 1px solid var(--hud-edge);
  white-space: nowrap;
}

thead th.num {
  text-align: right;
}

tbody th,
tbody td {
  padding: 0.68rem 1.1rem;
  border-bottom: 1px solid rgba(42, 56, 85, 0.5);
  vertical-align: baseline;
  text-align: left;
  font-weight: 400;
}

tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td {
  background: rgba(5, 10, 24, 0.5);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover th,
tbody tr:hover td {
  background: rgba(197, 160, 89, 0.06);
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mob-name {
  color: var(--hud-title);
  font-weight: 600;
  white-space: nowrap;
}

.species-id {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.71rem;
  font-weight: 400;
  color: var(--hud-muted);
  margin-top: 0.1rem;
}

.current {
  color: var(--hud-muted);
}

.proposed {
  color: var(--hud-title);
  font-weight: 600;
}

.factor {
  display: inline-block;
  min-width: 3rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--hud-gold);
}

td.note {
  color: var(--hud-secondary);
  font-size: 0.87rem;
}

/* Left rail marks the proposed tier band, the way HUD meters colour a track. */
tbody tr > :first-child {
  border-left: 3px solid transparent;
}

tbody tr[data-band="short"] > :first-child {
  border-left-color: var(--hud-muted);
}

tbody tr[data-band="mid"] > :first-child {
  border-left-color: var(--hud-gold-dim);
}

tbody tr[data-band="long"] > :first-child {
  border-left-color: var(--hud-gold);
}

tbody tr[data-band="rare"] > :first-child {
  border-left-color: #7052c7;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.78rem;
  color: var(--hud-muted);
  margin: -0.5rem 0 2rem;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.legend i {
  width: 3px;
  height: 0.9rem;
  border-radius: 2px;
  display: inline-block;
}

/* ---------- index cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.card {
  display: block;
  height: 100%;
  border: 1px solid var(--hud-edge);
  border-radius: 8px;
  background: linear-gradient(to bottom, var(--hud-slot-top), var(--hud-slot-bottom));
  box-shadow: inset 0 1px 0 var(--hud-highlight);
  padding: 1.2rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.card:hover {
  border-color: rgba(197, 160, 89, 0.7);
  box-shadow:
    inset 0 1px 0 var(--hud-highlight),
    0 0 14px var(--hud-glow);
  transform: translateY(-1px);
}

.card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--hud-title);
}

.card p,
.card-copy {
  display: block;
  margin: 0;
  font-size: 0.87rem;
  color: var(--hud-secondary);
  line-height: 1.5;
}

.card .badge {
  margin-top: 0.85rem;
}

.card.is-empty {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--hud-edge);
  background: linear-gradient(to bottom, var(--hud-plate), var(--hud-track));
  padding: 1.8rem 0 2.6rem;
  font-size: 0.8rem;
  color: var(--hud-muted);
}

.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  justify-content: space-between;
}

.site-footer a {
  color: var(--hud-secondary);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--hud-gold);
}

@media (max-width: 40rem) {
  body {
    font-size: 16px;
  }

  .site-header .shell {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .site-nav {
    gap: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card,
  .site-nav a {
    transition: none;
  }
}