/* xddev · xd.dev */

:root {
  /* The intro video's own colours: cream on #111111 */
  --bg: #111111;
  --surface: #181818;
  --surface-2: #202020;
  --surface-3: #2a2a2a;
  --line: rgba(246, 242, 237, 0.09);
  --outline: rgba(246, 242, 237, 0.12);
  --text: #f6f2ed;
  --muted: #a8a39b;
  --faint: #8c877f;

  --max: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;

  /* Chamfered corner, same angle as the cut on the logo's "d" ascenders */
  --cut: 12px;
  --chamfer: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) * 0.72));
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 0.6em 1em;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
}
.skip:focus { top: 12px; }

/* Holds the logo symbols that <use href="#logo"> draws */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

/* On the home page the header floats, clear, over the hero, and fills in
   once the hero has scrolled away (is-past) */
.site-header.is-over {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color 0.25s, border-color 0.25s;
}

.site-header.is-over.is-past {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

/* The header spans the whole window: the face sits in the top-left corner and
   the links in the top-right, not at the edges of the content column */
.site-header .header-row {
  width: auto;
  padding-inline: var(--gutter);
}

/* The XD face, top left: always the way back to the hero */
.face-link {
  display: inline-flex;
  padding-block: 8px;
  color: var(--text);
}

.face {
  display: block;
  width: 32px;
  height: auto;
}

.site-header.is-over .face-link {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
}

.site-header.is-over.is-past .face-link {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.25s, transform 0.25s, visibility 0s;
}

@media (prefers-reduced-motion: no-preference) {
  .face { transition: transform 0.2s ease; }
  .face-link:hover .face { transform: rotate(-10deg) scale(1.08); }
}

.site-header nav {
  display: flex;
  gap: clamp(18px, 3vw, 28px);
  margin-left: auto;
}

.site-header nav a {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--text); }

.site-header nav { align-items: center; }

/* Home hero: outlined wordmarks drift behind the intro */

/* The hero fills the first screen, so our mission starts below the fold */
.hero-mq {
  position: relative;
  isolation: isolate;
  display: grid;
  background: var(--bg);
  place-items: center;
  min-height: max(480px, 100vh);
  min-height: max(480px, 100svh);
  overflow: hidden;
}

/* Scrolling this out of view (about 100px down) brings the face into the header */
.mq-sentinel {
  position: absolute;
  top: 100px;
  left: 0;
  width: 1px;
  height: 1px;
}

/* The rows sit in a band about half the hero's height, so on tall screens they
   spread out instead of bunching in the middle. Around the logo they fade out
   to nothing, sized from the logo itself, so it always has clear space. */
.mq-rows {
  --mq-gap: clamp(20px, 4vw, 48px);
  --logo-w: min(76vw, 600px);
  --row-h: max(35px, 4.69vw);
  --clear: radial-gradient(calc(var(--logo-w) * 0.95) calc(var(--logo-w) * 0.5) at 50% 50%, transparent 60%, #000 100%);
  position: absolute;
  inset: -12% -20%;
  display: grid;
  align-content: center;
  gap: max(clamp(10px, 2.4vw, 26px), calc((50svh - 5 * var(--row-h)) / 4));
  color: var(--outline);
  transform: rotate(-8deg);
  pointer-events: none;
  -webkit-mask-image: var(--clear);
  mask-image: var(--clear);
}

/* Each track holds its logos twice, and the trailing padding matches the gap,
   so sliding it by exactly half its width lands on an identical frame. */
.mq-track {
  display: flex;
  gap: var(--mq-gap);
  width: max-content;
  padding-right: var(--mq-gap);
}

/* 20vw per logo, eight per set: a set is always wider than the rows' area
   (140% of the hero plus the row offsets), so the strip never runs out on
   wide screens, even halfway through its drift. */
.mq-track svg {
  flex: none;
  width: max(150px, 20vw);
  height: auto;
}

.mq-row:nth-child(2) { margin-left: -90px; }
.mq-row:nth-child(3) { margin-left: -180px; }
.mq-row:nth-child(4) { margin-left: -270px; }
.mq-row:nth-child(5) { margin-left: -360px; }

/* Odd rows drift left, even rows drift right. Each track holds still until
   its row comes out, then starts drifting the moment its row starts moving
   (same stagger), so the entrance runs straight into the drift. */
@media (prefers-reduced-motion: no-preference) {
  .mq-track {
    animation: mq-drift 60s linear calc(var(--i) * 120ms) infinite;
    animation-play-state: paused;
  }
  .mq-row:nth-child(even) .mq-track { animation-direction: reverse; animation-duration: 75s; }
  .is-revealed .mq-track { animation-play-state: running; }
}

/* Until the intro has formed the wordmark, only the intro shows. Then the rows
   come out one after another, each from the side it drifts away from: odd
   rows from the right (they drift left), even rows from the left (they drift
   right). The tagline and header links fade in with them. Rows slide with
   translate while the tracks inside them drift with transform, so the two
   add up: the slide eases out into the steady drift. */
.mq-row {
  --from: 28vw;
  opacity: 0;
  translate: var(--from) 0;
  transition: opacity 0.3s ease, translate 0.3s ease;
}
.mq-row:nth-child(even) { --from: -28vw; }
.mq-row:nth-child(1) { --i: 0; }
.mq-row:nth-child(2) { --i: 1; }
.mq-row:nth-child(3) { --i: 2; }
.mq-row:nth-child(4) { --i: 3; }
.mq-row:nth-child(5) { --i: 4; }

.is-revealed .mq-row {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.8s ease calc(var(--i) * 120ms),
    translate 1.2s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 120ms);
}

.hero-mq .tagline {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-mq.is-revealed .tagline {
  opacity: 1;
  transition: opacity 0.8s ease 0.35s;
}

.site-header.is-over nav { transition: opacity 0.8s ease 0.5s; }
body:has(.hero-mq:not(.is-revealed)) .site-header.is-over nav {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* If the intro never reports that it has ended, show everything after 4s
   anyway. */
@keyframes mq-show { to { opacity: 1; translate: 0 0; } }
.hero-mq:not(.is-revealed) :is(.mq-row, .tagline),
body:has(.hero-mq:not(.is-revealed)) .site-header.is-over nav {
  animation: mq-show 0.8s ease 4s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .mq-row,
  .hero-mq .tagline,
  .site-header.is-over nav {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
    animation: none !important;
  }
}

@keyframes mq-drift { to { transform: translateX(-50%); } }

/* No z-index here: the video has to blend with the hero itself */
.mq-center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 56px);
  text-align: center;
}

.mq-stage {
  position: relative;
  width: min(76vw, 600px);
  aspect-ratio: 1008 / 332;
}

/* MP4 has no transparency, so the intro is encoded on pure black and blended
   with lighten: each pixel keeps whichever is lighter, the video or the page.
   The black disappears in every browser (dark greys in video vary between
   browsers; pure black doesn't), leaving just the logo. */
.mq-intro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  mix-blend-mode: lighten;
}

/* Where the wordmark sits in the video's last frame (1008x332): x 24, y 66.5,
   960 wide. Measured by overlaying the two; they match at 98.9% overlap. */
.mq-final {
  position: absolute;
  left: 2.381%;
  top: 20.03%;
  width: 95.238%;
  height: auto;
  color: var(--text);
  opacity: 0;
}

/* When the intro ends, the vector wordmark fades in on top of the video's
   last frame, and only then does the video go. Fading both at once would make
   the logo dip in brightness halfway through, which reads as a flicker. */
.mq-stage.is-done .mq-final { opacity: 1; transition: opacity 0.25s; }
.mq-stage.is-done .mq-intro { visibility: hidden; transition: visibility 0s 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .mq-intro { display: none; }
  .mq-final { opacity: 1; transition: none; }
}

.tagline {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Section labels, shared by our mission and the games page */

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Our mission: a screen of its own under the hero, centred like the hero */

.mission {
  display: grid;
  place-items: center;
  min-height: max(480px, 100vh);
  min-height: max(480px, 100svh);
  padding-block: clamp(72px, 12vw, 160px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.mission-in {
  display: grid;
  justify-items: center;
}

/* One line at every width: the line is about 14.7em wide, so it is sized to
   the column (with a little to spare) up to 3rem */
.mission-title {
  margin-top: clamp(20px, 3vw, 28px);
  font-size: min(3rem, (100vw - 2 * var(--gutter)) / 15.2);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.1;
  letter-spacing: -0.035em;
  -webkit-text-stroke: max(1px, 0.03em) transparent;
}

/* Inline boxes can't move, so the two halves are inline blocks */
.mission-title span { display: inline-block; }

.mission-text {
  max-width: 42ch;
  margin-top: clamp(24px, 3vw, 32px);
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.mission .actions { justify-content: center; }

/* The first time the line comes into view (is-seen): "Impossible," fades in
   as an outline, like the logos drifting behind the hero. A beat later "then
   obvious." lands solid, and "Impossible," fills in with it. The words and the
   button follow. Until then (is-waiting) all of it is hidden. */
.mission.is-waiting :is(.section-label, .mission-a, .mission-b, .mission-text, .actions) {
  opacity: 0;
}
.mission.is-waiting .mission-a {
  color: transparent;
  -webkit-text-stroke-color: rgba(246, 242, 237, 0.6);
}
.mission.is-waiting .mission-b { translate: 0 0.4em; }
.mission.is-waiting :is(.mission-text, .actions) { translate: 0 12px; }

.mission.is-seen :is(.section-label, .mission-a, .mission-b, .mission-text, .actions) {
  opacity: 1;
  translate: 0 0;
}
.mission.is-seen .section-label { transition: opacity 0.6s ease; }
.mission.is-seen .mission-a {
  color: var(--text);
  -webkit-text-stroke-color: transparent;
  transition:
    opacity 0.6s ease 0.1s,
    color 0.5s ease 1.3s,
    -webkit-text-stroke-color 0.5s ease 1.3s;
}
.mission.is-seen .mission-b {
  transition:
    opacity 0.5s ease 1.2s,
    translate 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}
.mission.is-seen .mission-text { transition: opacity 0.8s ease 2s, translate 0.8s ease 2s; }
.mission.is-seen .actions { transition: opacity 0.8s ease 2.2s, translate 0.8s ease 2.2s; }

/* Games: the carousel at /games/, and each game's own page */

.games {
  padding-block: clamp(64px, 10vw, 120px) clamp(72px, 11vw, 136px);
}
.games .section-label { margin-bottom: clamp(24px, 4vw, 40px); }

.car-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.car-art svg {
  width: 40%;
  height: auto;
  color: rgba(246, 242, 237, 0.16);
}

/* The carousel: game cards in a row that scrolls left to right and snaps */

.car-track {
  --edge: max(var(--gutter), (100% - var(--max)) / 2);
  display: flex;
  gap: 20px;
  padding: 4px var(--edge) 12px;
  scroll-padding-inline: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: no-preference) {
  .car-track { scroll-behavior: smooth; }
}

/* With several games each card leaves the next one peeking in; a lone card
   takes the full width */
.car-card {
  flex: 0 0 min(88%, 980px);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  scroll-snap-align: start;
  scroll-margin-top: var(--header-h);
}
.car-card:only-child { flex-basis: 100%; }

.car-art {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  background: var(--bg);
}
.car-art img { width: min(100%, 420px); }

.car-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(28px, 4vw, 56px);
}

.car-meta {
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.car-name {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.car-blurb {
  max-width: 46ch;
  color: var(--muted);
  text-wrap: pretty;
}

.car-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 10px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.car-facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.car-facts dd {
  margin: 4px 0 0;
  font-weight: 700;
}

.car-name a { text-decoration: none; }
.car-name a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }

.car-note {
  max-width: 46ch;
  color: var(--faint);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.car-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.car-actions form { margin: 0; }
.car-actions button.btn { border: 0; font-family: inherit; cursor: pointer; }

.car-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.car-btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font: 400 1.375rem/1 inherit;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
}
.car-btn:hover:not(:disabled) { background: var(--surface-2); }
.car-btn:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 760px) {
  .car-card { grid-template-columns: 1fr; }
  .car-art { padding: 28px; }
  .car-art img { width: min(100%, 280px); }
}

/* Who is signed in, on a game's page */

.account {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
}

.account-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.account-handle { color: var(--muted); }

/* A player's fight data (/fe/data/): what a record holds, then each fight */

.records .section-label a { color: inherit; text-decoration: none; }
.records .section-label a:hover { color: var(--text); }
.records .car-blurb { max-width: 64ch; margin-top: 20px; }
.records .car-note { margin-top: 16px; }
.records .car-actions { margin-top: 20px; }

.record-list {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.record {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  color: var(--muted);
  font-size: 0.875rem;
}

.record-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.record-who {
  margin-top: 6px;
  font-weight: 700;
  text-wrap: pretty;
}

.record-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 14px 0 0;
}
.record-counts dt {
  font-size: 0.6875rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.record-counts dd { margin: 2px 0 0; font-weight: 700; }

.record-download {
  display: inline-block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.875rem;
}
.record-download:hover { color: var(--text); }

.record-account { margin-top: 32px; }

.records-heading {
  margin-top: 48px;
  font-size: 1.25rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}
.records-heading + .car-note { margin-top: 10px; }
.records-heading + .record-list { margin-top: 16px; }

.message-list {
  display: grid;
  gap: 2px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.message {
  display: grid;
  grid-template-columns: 13em minmax(0, 1fr);
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.message time { color: var(--faint); font-size: 0.875rem; }
.message p { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .message { grid-template-columns: 1fr; }
}

.danger-zone {
  margin-top: 56px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* 404 */

.notfound {
  padding-block: clamp(96px, 14vw, 168px) clamp(72px, 10vw, 128px);
}

.eyebrow {
  margin-bottom: 24px;
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.display {
  max-width: 14ch;
  font-size: clamp(2.5rem, 8vw, 6.25rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.lede {
  max-width: 40ch;
  margin-top: 28px;
  color: var(--muted);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 112%;
  text-decoration: none;
  clip-path: var(--chamfer);
  transition: background-color 0.15s, color 0.15s;
}
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }

.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #ddd8d0; }

.btn-quiet { background: var(--surface-2); color: var(--text); }
.btn-danger { background: #c8423a; color: var(--text); }
.btn-danger:hover { background: #b23a33; }
.actions form, .car-actions form { margin: 0; }
.actions button.btn { border: 0; font-family: inherit; cursor: pointer; }
.btn-quiet:hover { background: var(--surface-3); }

/* Footer */

.site-footer { border-top: 1px solid var(--line); }

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding-block: 20px;
  color: var(--faint);
  font-size: 0.75rem;
}

/* The admin panel (/admin/) */

.admin .section-label { margin-bottom: 14px; }

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.admin-nav a { color: var(--muted); font-weight: 600; text-decoration: none; }
.admin-nav a:hover, .admin-nav a[aria-current="page"] { color: var(--text); }
.admin-badge {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: 1px;
}

.admin .car-facts { margin-top: 18px; }

.admin-faint { color: var(--faint); }

.admin-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.admin-search input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.admin-search button.btn { border: 0; font-family: inherit; cursor: pointer; }
.admin-search select, .admin-search input[type="number"] {
  padding: 10px 14px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.admin-search input[type="number"] { flex: 0 1 200px; }
.admin-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.admin-search + .car-note { max-width: 72ch; margin-top: 16px; }

.admin-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.admin-table th {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}
.admin-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table a { color: var(--text); }
@media (max-width: 640px) {
  .admin-table { display: block; overflow-x: auto; }
}

/* The values editor (/admin/values/) */

.values-flash {
  max-width: 72ch;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: var(--surface);
}
.values-flash ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.values-problem { border-color: rgba(255, 120, 100, 0.5); }

.values-note { max-width: 72ch; }
.values-form { margin-top: 20px; }
.values-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.values-bar input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.values-bar button.btn { border: 0; font-family: inherit; cursor: pointer; }

.values-section { border-bottom: 1px solid var(--line); }
.values-section summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.values-section summary::-webkit-details-marker { display: none; }
.values-section summary::before { content: "+"; width: 1ch; color: var(--faint); }
.values-section[open] summary::before { content: "–"; }
.values-rows { padding-bottom: 12px; }

.value-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(60px, 140px) 160px;
  align-items: center;
  gap: 12px;
  padding: 5px 0 5px 20px;
  font-size: 0.9375rem;
}
.value-row[hidden] { display: none; }
.value-row:hover { background: var(--surface); }
.value-name { overflow-wrap: anywhere; color: var(--muted); }
.value-default { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.value-row input, .value-row select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.value-row.is-changed .value-name { color: var(--text); font-weight: 600; }
.value-row.is-changed input, .value-row.is-changed select { border-color: var(--text); }
@media (max-width: 640px) {
  .value-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .value-default { display: none; }
}

/* Every balance patch (/admin/values/history/) */

.patch-list { margin: 24px 0 0; padding: 0; list-style: none; }
.patch { padding: 18px 0; border-top: 1px solid var(--line); }
.patch header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.patch h2 { margin: 0; font-size: 1.125rem; }
.patch header form { margin-left: auto; }
.patch header button.btn { border: 0; font-family: inherit; cursor: pointer; }
.patch-note { max-width: 72ch; margin: 8px 0 0; }
.patch-changes { margin-top: 8px; font-variant-numeric: tabular-nums; }
.patch-changes td { padding: 6px 12px 6px 0; }
.patch-changes td:first-child { width: 60%; overflow-wrap: anywhere; color: var(--muted); }
.patch-changes td:nth-child(2)::after { content: "  →"; }