/*
 * VAR Portal theme — matches vanamersfoortracing.nl.
 * All brand tokens live here as CSS custom properties; Bootstrap is overridden
 * to match. Change a value here and it propagates across the portal.
 */

:root {
  /* Brand colours.
     These are the reference portal's tokens, value for value (its index.css
     @theme block), so a screen built here and a screen built there land on the
     same colour. The orange is NOT the one sampled from VAR-orange-flat.pdf —
     the reference runs a hotter, less red orange, and matching it matters more
     than matching the print swatch. */
  --var-orange: #f55702;       /* --primary */
  --var-orange-alt: #ff5200;   /* --accent / --ring; the hover, brighter */
  --var-black: #1a1a1a;        /* --sidebar: the header bar */
  --var-dark: #202020;         /* --background */
  --var-fg: #f5f5f5;           /* --foreground: body text, not pure white */
  --var-grey: #484848;
  --var-grey-muted: #a3a3a3;   /* --muted-foreground */
  --var-light: #f2f2f2;
  --var-white: #ffffff;
  --var-footer: #1a1a1a;
  --var-green: #24ba4b;

  /* Surface scale, mapped onto the reference's card/secondary/muted steps.
     Borders there are white at low alpha rather than a grey hex, so they sit
     correctly on any surface instead of only on the one they were picked for. */
  --var-surface: #2a2a2a;                        /* --card / --popover */
  --var-surface-2: #2e2e2e;                      /* --secondary / --muted */
  --var-raised: #2e2e2e;
  --var-sunken: #1a1a1a;
  --var-line: rgba(255, 255, 255, 0.1);          /* --border */
  --var-line-strong: rgba(255, 255, 255, 0.15);  /* --input */
  --var-dim: #a3a3a3;

  /* Status accents. Named because they mean something, not because of how
     they look — "danger" stays danger if the red is ever retuned. */
  --var-danger: #ef4444;                         /* --destructive */
  --var-danger-line: rgba(239, 68, 68, 0.3);
  --var-danger-text: #ef4444;
  --var-warn: #e8b13a;

  /* Typography */
  --var-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --var-heading-spacing: 1px;

  /* Layout */
  --var-container-max: 1400px;
  --var-header-height: 48px;

  /* Map Bootstrap's theme onto VAR tokens */
  --bs-primary: var(--var-orange);
  --bs-body-bg: var(--var-dark);
  --bs-body-color: var(--var-fg);
  --bs-body-font-family: var(--var-font);
  --bs-link-color: var(--var-orange);
  --bs-link-hover-color: var(--var-orange-alt);
  /* Bootstrap's default secondary/tertiary colours are near-black — unreadable
     on the dark theme. Remap them to the readable brand grey so utilities like
     .text-muted / .text-secondary stay legible everywhere. */
  --bs-secondary-color: var(--var-grey-muted);
  --bs-secondary-color-rgb: 171, 171, 171;
  --bs-tertiary-color: var(--var-dim);
  --bs-emphasis-color: var(--var-white);
}

/* --- Base ----------------------------------------------------------------- */

/* One knob for the whole portal's text size. Every size in this file, in
   accounts.css and in the sections' own <style> blocks is expressed in rem, so
   raising the root raises all of them together and keeps every proportion —
   rather than each screen being nudged separately and drifting apart. The
   reference portal is a Tailwind app running on the browser default, so this
   sits at 16px too — every rem below then means the same thing in both. */
html {
  font-size: 16px;
}

body {
  font-family: var(--var-font);
  background-color: var(--var-dark);
  color: var(--var-fg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.heading {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--var-heading-spacing);
}

/* Opt out of the brand's uppercase. Section titles shout because they are
   signage; a person's name is not signage, and "LUDOVICO DI LORENZO" wrapped
   over two lines reads worse than the name does. */
.var-plain-heading {
  text-transform: none;
  letter-spacing: 0;
}

.container-var {
  max-width: var(--var-container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* --- Header --------------------------------------------------------------- */
.var-header {
  background-color: var(--var-black);
  border-bottom: 1px solid var(--var-line);
  min-height: var(--var-header-height);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* The brand: the drawn wordmark beside one typed word, on a bar 48px tall
   with 1rem of side padding (the reference's h-12 px-4). */
.var-header .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  opacity: 0.9;
  transition: opacity 0.15s ease;
  text-decoration: none;
}

.var-header .navbar-brand:hover {
  opacity: 1;
}

/* 10px, the reference's h-[10px]. Smaller than the cap height of the word
   beside it on purpose: the drawn wordmark has no descenders and no side
   bearing, so matching it to the type's cap height makes it read as the
   larger of the two. */
.var-header .brand-wordmark {
  height: 0.625rem;
  width: auto;
  display: block;
}

.var-header .brand-accent {
  color: var(--var-orange-alt);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: 0.875rem;
  line-height: 1;
}

/* The header carries no nav links any more: the brand is Home and your own
   name is User Management, so the collapsing menu, its toggler and the old
   user-menu span all went with them. The identity strip is in accounts.css. */

/* Release string in the header — present on every screen, never shouting. */
.var-version {
  color: var(--var-grey-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--var-line);
  padding: 0.125rem 0.5rem;
}

/* Update-available banner: offered, never forced. */
.var-update-banner {
  background: var(--var-orange);
  color: var(--var-white);
  font-size: 0.9rem;
  padding: 0.6rem 0;
}

.var-update-banner .btn-outline-light {
  border-radius: 0;
}

/* --- Print: summary and roll-up views save cleanly as PDF (spec §9) ------- */
@media print {
  .var-header,
  .var-footer,
  .var-update-banner,
  .wb-sidebar,
  .wb-context,
  .no-print {
    display: none !important;
  }

  body,
  .wb-work,
  .wb-work .container-var {
    background: #fff !important;
    color: #000 !important;
  }

  .table,
  .table-dark {
    --bs-table-bg: #fff;
    --bs-table-color: #000;
    --bs-table-striped-bg: #f4f4f4;
    --bs-table-striped-color: #000;
    border-color: #999;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  .print-header {
    display: block !important;
    border-bottom: 2px solid var(--var-orange);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }
}

/* --- Buttons (signature black -> orange hover) ---------------------------- */
.btn-var {
  background-color: var(--var-black);
  color: var(--var-white);
  border: 1px solid var(--var-line-strong);
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.75px;
  padding: 0.65rem 1.6rem;
  transition: background-color 0.18s ease-in-out, color 0.18s ease-in-out,
    border-color 0.18s ease-in-out;
}

.btn-var:hover,
.btn-var:focus {
  background-color: var(--var-orange);
  border-color: var(--var-orange);
  color: var(--var-white);
}

.btn-var-outline {
  background-color: transparent;
  color: var(--var-white);
  border: 2px solid var(--var-white);
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.75px;
  padding: 0.6rem 1.6rem;
  transition: all 0.18s ease-in-out;
}

.btn-var-outline:hover,
.btn-var-outline:focus {
  background-color: var(--var-orange);
  border-color: var(--var-orange);
  color: var(--var-white);
}

/* The toolbar in the top-right of a section page: one or two buttons that must
   match each other exactly. `.btn-var` carries its own padding, which overrides
   `.btn-sm`, so the size is set on the group rather than per button — otherwise
   a ghost next to a solid one is a few pixels short and it shows. */
.var-tools {
  display: flex;
  gap: 0.5rem;
}

.var-tools .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.75px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.62rem 1.15rem;
  border-width: 1px;
}

.var-tools .btn i {
  font-size: 0.9rem;
  line-height: 1;
}

/* The quieter half of the pair: a way back, or a sideways step. Reads as a
   button without competing with the one action the page is really for. */
.btn-ghost {
  background-color: transparent;
  color: #c8c8c8;
  border: 1px solid var(--var-line-strong);
  transition: border-color 0.18s ease-in-out, color 0.18s ease-in-out,
    background-color 0.18s ease-in-out;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color: #241a17;
  border-color: var(--var-orange);
  color: var(--var-white);
}

.btn-ghost i {
  color: var(--var-orange);
}

/* --- Section bands -------------------------------------------------------- */
.band {
  padding: 3.5rem 0;
}
.band-light { background-color: var(--var-light); color: var(--var-grey); }
.band-white { background-color: var(--var-white); color: var(--var-grey); }
.band-black { background-color: var(--var-black); color: var(--var-white); }
.band-dark { background-color: var(--var-dark); color: var(--var-white); }
.band-orange { background-color: var(--var-orange); color: var(--var-white); }

.band-light h1, .band-light h2, .band-light h3,
.band-white h1, .band-white h2, .band-white h3 {
  color: var(--var-black);
}

/* --- Hero ----------------------------------------------------------------- */
/* Ported from the reference's Index: pt-12 pb-10, a 4rem emblem, the identity
   at text-sm mt-4, and a 4rem x 2px rule at mt-3. */
.var-hero {
  background-color: var(--var-dark);
  text-align: center;
  padding: 3rem 0 2.5rem;
}

/* --- The homepage, on exactly one screen ----------------------------------
   The launcher is the only screen whose whole job is to be looked at once and
   chosen from, so it is the one screen that must never scroll — a section
   below the fold is a section nobody opens.

   The frame: one column the height of the viewport less the sticky header,
   the hero taking what it needs and the launcher slot taking the rest. The
   slot is a *size container*, which means the browser measures the leftover
   height for us and the tiles are sized against `cqh` — a real number, not a
   sum of paddings we would have to keep in step by hand every time a section
   is added. dvh so a phone's address bar doesn't cost us a scrollbar. */
.home-fit {
  height: calc(100vh - var(--var-header-height));
  height: calc(100dvh - var(--var-header-height));
  display: flex;
  flex-direction: column;
}

.home-launcher-slot {
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
}

/* The homepage's hero, sized in em off this one font-size so it shrinks as a
   piece on a short window rather than crowding the launcher below it. It takes
   its share of the window directly — the launcher then measures what is left
   and fits itself into it, so the two do not have to agree on a total.

   The divisor gives the hero about a fifth of the screen; 1rem is the designed
   size, reached at roughly a 970px window, and below 0.62rem the identity line
   stops being readable and the hero simply stops shrinking. 50px is the sticky
   header plus the hero's own 2px rule, the two things in the column that never
   scale.

   vh first and dvh second, for the browsers that don't know dvh — an unknown
   unit invalidates the whole clamp, which would leave the block at its
   inherited 16px rather than merely mis-measuring a phone's address bar.

   Only the homepage opts in: the section pages set their own hero padding and
   must not be dragged along. */
.var-hero-home {
  font-size: clamp(0.62rem, calc((100vh - 50px) / 57), 1rem);
  font-size: clamp(0.62rem, calc((100dvh - 50px) / 57), 1rem);
  padding: 3em 0 2.5em;
}

.var-hero .hero-emblem {
  height: 4rem;
  width: auto;
}

/* The block uppercases; the job overrides it back to capitalised — which is
   why the reference reads "LUDOVICO DI LORENZO · Admin" and not "· ADMIN". */
.var-hero .hero-identity {
  color: var(--var-grey-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin: 1rem 0 0;
}

.var-hero .identity-tier,
.var-hero .identity-category,
.var-hero .identity-role {
  text-transform: capitalize;
}

/* The header spaces its separators with the flex gap it already has; the hero
   is a line of text, so here the dot carries its own. */
.var-hero .identity-sep {
  margin: 0 0.5rem;
}

.var-hero .hero-rule {
  width: 4rem;
  height: 2px;
  background-color: var(--var-orange);
  margin: 0.75rem auto 0;
}

/* The homepage's re-statements of the three rules above, in em so they follow
   .var-hero-home's font-size. They have to sit *after* the rules they replace:
   same specificity, so it is the order that decides. */
.var-hero-home .hero-emblem { height: 4em; }

.var-hero-home .hero-identity {
  font-size: 0.875em;
  line-height: 1.43;
  margin-top: 1em;
}

.var-hero-home .identity-sep { margin: 0 0.5em; }
.var-hero-home .hero-rule { margin-top: 0.75em; }

/* The launcher column, ported: max-w-4xl, gap-12 between sections, pb-16.
   Everything inside it — titles, tiles, icons and every gap between them — is
   written in em off this one font-size, so the column gives uniformly rather
   than any one piece being singled out when a section is added.

   The column is 48.6em tall as written (three sections at 12.1em, two 3.1em
   gaps, and the 2em + 4em the block is padded by), so dividing the slot by
   52.8 fits it with about 8% to spare. 1rem is the designed size, reached once
   the slot is around 640px; below 0.4rem a tile stops being a target and the
   page is allowed to overflow rather than shrink further.

   The vh line first is the fallback for browsers without container queries: an
   unknown unit invalidates the whole declaration, so they keep the estimate —
   the same arithmetic done by hand, header and hero included. */
.band-launcher {
  font-size: clamp(0.4rem, calc((100vh - 50px) / 68), 1rem);
  font-size: clamp(0.4rem, calc((100dvh - 50px) / 68), 1rem);
  font-size: clamp(0.4rem, calc(100cqh / 52.8), 1rem);
  padding: 0 1.5rem 4em;
  max-width: 56rem;
  margin-inline: auto;
}

/* The reference keeps a slot between the hero and the launcher for an admin's
   pending sign-up requests — a max-w-4xl px-6 block with mb-8. The panel draws
   nothing when the queue is empty, but the slot still holds its bottom margin,
   so an administrator's launcher starts 2rem lower than everyone else's. We
   have no panel (the count rides on the name in the header instead), only the
   offset, so that the two portals line up screen for screen. */
.band-launcher-admin {
  padding-top: 2em;
}

.band-launcher .section-title {
  text-align: center;
  font-size: 1.25em;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 1.2em;
}

/* The only gap between two sections: the grid above carries no bottom margin,
   so this one number is the whole rhythm of the column. */
.band-launcher .section-title-next {
  margin-top: 2.5em;
}

/* --- Feature tiles (homepage launcher) ------------------------------------ */
/* A direct port of the reference's ModuleCard:
     flex flex-col items-center justify-center gap-3
     border border-border bg-card p-8 min-w-[180px]
   Note min-width, not width: the tile is sized by its content with a floor, so
   a long name widens its own tile instead of wrapping inside a fixed box. And
   note what is absent — no radius, no shadow, no hover lift, no top rule. */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.feature-tile {
  background-color: var(--var-surface);
  color: var(--var-grey-muted);
  min-width: 180px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2rem;
  border: 1px solid var(--var-line);
  cursor: default;
}

/* The sprite element itself must never take layout space. */
.var-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* size-6 inside a size-12 chip, as the reference sets it. */
/* inline-block, not block: several of these sit mid-sentence — the verified
   mark after a name, the icon inside a button — and a block-level SVG there
   breaks the line. Flex and grid parents ignore the difference. */
.var-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}

.var-icon-sm {
  width: 1rem;
  height: 1rem;
}

.var-icon-xs {
  width: 0.875rem;
  height: 0.875rem;
}

.feature-tile .feature-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--var-orange);
  background-color: rgba(245, 87, 2, 0.1);
  border: 1px solid rgba(245, 87, 2, 0.3);
}

.feature-tile .feature-title {
  color: var(--var-fg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0;
}

/* The reference's Button, variant="outline" size="sm", ported from its cva
   definition rather than eyeballed: h-9, text-sm/font-medium (the card then
   overrides to text-xs), an --input border on --background, filling with
   --accent on hover, and a 98% press. rounded-md resolves to 0 because
   --radius is 0. */
.feature-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 1.5rem;
  font-family: var(--var-font);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--var-fg);
  background-color: var(--var-dark);
  border: 1px solid var(--var-line-strong);
  transition: all 0.1s ease-in-out;
}

.feature-open:hover,
.feature-open:focus {
  background-color: var(--var-orange-alt);
  border-color: var(--var-orange-alt);
  color: var(--var-white);
  text-decoration: none;
}

.feature-open:active {
  transform: scale(0.98);
}

/* ModuleCard's optional count: text-sm text-muted-foreground, and nothing
   else — no rule above it, no weight, no hover colour. It sits in the card's
   gap-3 flow like any other child. */
.feature-count {
  color: var(--var-grey-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.feature-grid-start {
  justify-content: flex-start;
}

/* A tile that *is* its link, rather than a card with a button in it. The whole
   card takes the pointer, lifts a little and lights its border and its icon —
   the only hover in the portal, and it is here because this is the only screen
   whose entire job is choosing one of these. */
.feature-tile-link {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition:
    transform 0.12s ease-out,
    border-color 0.12s ease-out,
    background-color 0.12s ease-out;
}

.feature-tile-link:hover,
.feature-tile-link:focus-visible {
  /* z-index so the lit border of the tile under the pointer is never drawn
     underneath the plain border of the one beside it. */
  z-index: 1;
  transform: scale(1.04);
  background-color: var(--var-dark);
  border-color: var(--var-orange);
  text-decoration: none;
}

.feature-tile-link:hover .feature-icon,
.feature-tile-link:focus-visible .feature-icon {
  background-color: rgba(245, 87, 2, 0.2);
  border-color: var(--var-orange);
}

.feature-tile-link:active {
  transform: scale(1.01);
}

/* The lift is decoration; the border and the icon still say which tile you are
   on without it. */
@media (prefers-reduced-motion: reduce) {
  .feature-tile-link,
  .feature-tile-link:hover,
  .feature-tile-link:focus-visible,
  .feature-tile-link:active {
    transform: none;
    transition: none;
  }
}

/* The launcher's copy of the tile, restated in em so it scales with the column
   (see .band-launcher). Every tile is the same size on purpose: a width in em
   rather than a min-width, so "Knowledge Assistant" no longer draws itself a
   wider card than "LLTD", and a title slot two lines deep whether the name
   needs two lines or one, so the row below it starts at the same height in
   every section. Scoped, so the Garage hub's content-sized tiles are left as
   they are. */
.band-launcher .feature-grid { gap: 1em; }

.band-launcher .feature-tile {
  width: 11em;
  min-width: 0;
  gap: 0.6em;
  padding: 1.5em 0.75em;
}

.band-launcher .feature-tile .feature-icon {
  width: 2.75em;
  height: 2.75em;
}

.band-launcher .feature-tile .var-icon {
  width: 1.4em;
  height: 1.4em;
}

.band-launcher .feature-tile .feature-title {
  font-size: 0.875em;
  line-height: 1.43;
  min-height: 2.86em; /* two lines, always */
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-empty {
  color: var(--var-grey-muted);
  text-align: center;
  width: 100%;
}

/* --- Inner page shell ----------------------------------------------------- */
/* The reference gives every section page the same frame: p-6 max-w-4xl mx-auto,
   with an h1 at text-2xl/600/tracking-tight. Named here so a new page inherits
   it instead of inventing its own margins. */
.page-shell {
  padding: 1.5rem;
  max-width: 56rem;
  margin-inline: auto;
}

.page-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}

.page-title-sub {
  color: var(--var-grey-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0.25rem 0 0;
  text-transform: none;
  letter-spacing: 0;
}

/* A section that is registered but not written yet. Says so plainly and in the
   portal's own materials — a page dressed up as the finished tool would only
   invite somebody to try using it. */
.var-placeholder {
  background-color: var(--var-surface);
  border: 1px solid var(--var-line);
  color: var(--var-grey-muted);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}

.var-placeholder-icon {
  width: 2rem;
  height: 2rem;
  color: var(--var-orange);
  margin-bottom: 1rem;
}

.var-placeholder-lead {
  color: var(--var-fg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

/* --- Footer --------------------------------------------------------------- */
/* Sits on the page rather than under it: a lighter bar across the bottom of
   every screen pulls the eye down to a copyright line nobody needs to read. */
.var-footer {
  background-color: var(--var-dark);
  border-top: 1px solid var(--var-line);
  color: var(--var-dim);
  padding: 1.15rem 0;
  font-size: 0.76rem;
  flex-shrink: 0;
}

.var-footer a { color: var(--var-dim); }
.var-footer a:hover { color: var(--var-orange); }

/* The signed-out screens moved to their own split-screen shell and live in
   accounts.css; the single centred card they used to be is gone. */

/* --- Forms --------------------------------------------------------------- */
.var-form-card {
  background-color: var(--var-surface);
  border: 1px solid var(--var-line);
  border-radius: 8px;
  padding: 1.75rem;
}
.var-form-card .form-section-title,
.var-form-section-title {
  color: var(--var-orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
form .form-label {
  color: var(--var-light);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.form-control,
.form-select {
  background-color: var(--var-sunken);
  border: 1px solid var(--var-line-strong);
  color: var(--var-white);
  border-radius: 5px;
  padding: 0.5rem 0.7rem;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--var-sunken);
  border-color: var(--var-orange);
  box-shadow: 0 0 0 0.15rem rgba(230, 67, 37, 0.2);
  color: var(--var-white);
}
.form-control::placeholder {
  color: var(--var-dim);
}
.form-select option {
  background-color: var(--var-sunken);
  color: var(--var-white);
}
.form-text {
  color: var(--var-grey-muted);
  font-size: 0.84rem;
}
.var-form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--var-line);
}

/* --- Badges --------------------------------------------------------------- */
.badge-var {
  background-color: var(--var-orange);
  color: var(--var-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0;
  font-weight: 700;
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 768px) {
  .feature-tile { width: 100%; }
}

/* --- Keyboard focus -------------------------------------------------------
   Every interactive thing in the portal is a real link or button, so it can
   all be reached with Tab — but until now nothing showed *where* you were.
   :focus-visible rather than :focus, so the ring appears for keyboard users
   and never after a mouse click.

   SVG links need their own treatment — an outline on an SVG element is drawn
   in user units, which at the size the car is shown would be a hairline — so
   the car page lights the shape instead. See .cp:focus-visible there. */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--var-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inside a dark panel the ring needs a dark gap around it to stay readable. */
.band-dark :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--var-orange);
  box-shadow: 0 0 0 4px rgba(230, 67, 37, 0.18);
}