/* ============================================================
   THE GILDED ORRERY — plate primitives
   Shared across the hub and every module. The vocabulary of
   the skin: the chart-plate frame that borders the viewport,
   foil-stamped type, engraved rules, corner ticks, chips and
   readouts.

   Depends on shared/css/tokens.css.
   ============================================================ */

/* ── THE PLATE FRAME ────────────────────────────────────────
   Every page is a plate from the atlas, so every page carries
   its border: a hairline rule inset from the viewport edge,
   with a tick at each corner and frost blooming inward. Fixed,
   inert, and behind nothing that matters. */

.plate-frame {
  position: fixed;
  top: var(--frame-inset);
  left: var(--frame-inset);
  right: var(--frame-inset);
  bottom: calc(var(--frame-inset) + var(--feed-h, 0px));
  z-index: 6;
  pointer-events: none;
  border: 1px solid var(--rule-faint);
}

/* corner ticks — eight hairlines, one background each */
.plate-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(var(--brass), var(--brass)), linear-gradient(var(--brass), var(--brass)),
    linear-gradient(var(--brass), var(--brass)), linear-gradient(var(--brass), var(--brass)),
    linear-gradient(var(--brass), var(--brass)), linear-gradient(var(--brass), var(--brass)),
    linear-gradient(var(--brass), var(--brass)), linear-gradient(var(--brass), var(--brass));
  background-size:
    22px 1px, 1px 22px,
    22px 1px, 1px 22px,
    22px 1px, 1px 22px,
    22px 1px, 1px 22px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
  opacity: 0.85;
}

/* frost creeping in from the corners of the plate */
.plate-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(ellipse 34% 28% at 0% 0%, rgba(var(--frost-rgb), 0.10), transparent 72%),
    radial-gradient(ellipse 34% 28% at 100% 0%, rgba(var(--frost-rgb), 0.07), transparent 72%),
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(var(--frost-rgb), 0.08), transparent 72%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(var(--frost-rgb), 0.10), transparent 72%);
  animation: frost-breathe 42s ease-in-out infinite alternate;
}
@keyframes frost-breathe {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* ── PLATE GRAIN ────────────────────────────────────────────
   Paper tooth over the whole page. Low enough that it reads as
   surface rather than noise. */

.plate-grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 160px 160px;
}

/* ── FOIL TYPE ──────────────────────────────────────────────
   Rolled gold across the glyphs. `.foil-sweep` drags the
   specular band through on hover or on cue. */

.foil {
  background: var(--foil);
  background-size: 220% 100%;
  background-position: 34% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foil-cold {
  background: var(--foil-cold);
  background-size: 220% 100%;
  background-position: 34% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foil-sweep {
  transition: background-position 0.9s var(--ease);
}
.foil-sweep:hover,
.foil-sweep:focus-visible,
.sweep-host:hover .foil-sweep,
.sweep-host:focus-visible .foil-sweep {
  background-position: 100% 0;
}

/* ── ENGRAVED LABELS ────────────────────────────────────────
   Small caps set in mono with air between them. The site's
   entire label voice. */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-indent: var(--track-label);
  text-transform: uppercase;
  color: var(--ash);
}

.readout {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--ash);
}
.readout b,
.readout strong,
.readout .lit {
  font-weight: 500;
  color: var(--brass-pale);
}

/* ── RULES ──────────────────────────────────────────────────
   A rule that fades is the engraving running out of plate. */

.rule-h {
  height: 1px;
  background: linear-gradient(90deg, var(--rule-strong), var(--rule-faint) 62%, transparent);
}
.rule-h.rule-double {
  height: 3px;
  background:
    linear-gradient(90deg, var(--rule-strong), var(--rule-faint) 62%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, var(--rule-faint), transparent 46%) bottom / 100% 1px no-repeat;
}

/* ── CHIPS ──────────────────────────────────────────────────
   System tags: which world a tool belongs to. Cut corners, not
   pills — pills belong to the skin we retired. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: rgba(198, 151, 73, 0.05);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-pale);
  white-space: nowrap;
}
.chip[data-system="PF2E"]  { color: var(--brass-pale);   border-color: rgba(198, 151, 73, 0.34); }
.chip[data-system="SF2E"]  { color: var(--verdigris-lit); border-color: rgba(63, 158, 139, 0.38); background: rgba(63, 158, 139, 0.06); }
.chip[data-system="TOOL"]  { color: var(--frost);        border-color: rgba(188, 214, 228, 0.24); background: rgba(188, 214, 228, 0.04); }
.chip[data-system="GAME"]  { color: var(--crit);         border-color: rgba(207, 91, 60, 0.34);  background: rgba(207, 91, 60, 0.06); }

/* ── SELECTION, FOCUS, SCROLLBAR ────────────────────────────
   Small surfaces, but they are the ones that betray a theme
   that stopped at the hero. */

::selection {
  background: rgba(198, 151, 73, 0.30);
  color: var(--ivory);
}

:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 3px;
}

* { scrollbar-color: var(--brass-dim) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-void); }
::-webkit-scrollbar-thumb {
  background: var(--brass-deep);
  border: 3px solid var(--ink-void);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--brass-dim); }

@media (prefers-reduced-motion: reduce) {
  .plate-frame::after { animation: none; opacity: 0.8; }
  .foil-sweep { transition: none; }
}