/*
 * 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,
   holding the hero and the launcher — and placing the two of them *together*.
   That last word is the whole composition. The obvious arrangement is the hero
   at the top and the launcher centred in whatever is left, and it is wrong: on
   a tall window every pixel of slack collects in the one place it is most
   visible, between the emblem and the first section title, and the screen
   reads as two unrelated halves with a hole between them. Placed as one block,
   the only gap between the two is the hero's own bottom padding, and the slack
   goes where nobody looks — above and below the whole thing.

   dvh so a phone's address bar doesn't cost us a scrollbar; the vh line before
   it is for browsers that don't know dvh. */
.home-fit {
  height: calc(100vh - var(--var-header-height));
  height: calc(100dvh - var(--var-header-height));
  display: flex;
  flex-direction: column;
}

/* Where the block sits, as a ratio rather than a rule. The two spacers take
   the slack between them, and --home-lift is how much of it goes above: a
   third of a share against a whole one, so a quarter above and three quarters
   below. It is *not* the centre. A screen you are meant to read from the top
   down wants its content above the middle — dead centre puts the emblem
   halfway down the window and the whole page reads as having sagged. This is
   the one number to turn if it ever wants moving: larger sinks it, 1 is the
   true centre, 0 pins it under the header.

   The ratio does the work of a justify-content and one thing more: the spacers
   grow from nothing, so they are only ever made of space the block did not
   want. On a window too short for even the smallest type they are simply zero,
   and the page overflows downwards where it can be scrolled to, rather than
   off the top and the bottom at once the way a centre would. */
.home-fit::before,
.home-fit::after {
  content: "";
  flex: 1 1 0;
  min-height: 0;
}

.home-fit::before {
  flex-grow: var(--home-lift, 0.34);
}

/* Neither half is ever squashed to make the pair fit: the launcher is fitted
   by measurement (see core/home.html) and the hero by its own clamp, and a
   flex shrink on top of either would undo both. The spacers above are
   pseudo-elements, so this leaves them alone. */
.home-fit > * {
  flex: none;
}

/* The launcher's wrapper earns its place by being a plain block: it gives the
   column back the full width a flex item with auto side margins would lose, so
   `max-width` and `margin-inline: auto` centre 56rem of column rather than
   shrinking it to whatever its widest section happens to be. */
.home-launcher-slot {
  min-width: 0;
}

/* 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.

   1em above rather than the 3em a hero gets elsewhere. That padding existed to
   hold the emblem off the header, and the emblem is nowhere near the header
   any more — the block is placed by .home-fit, so the space above it is
   already whatever the window had spare. Left at 3em it only pushed the emblem
   down until the composition sat visibly low. The 2.5em below is the whole gap
   between the rule and the first section title, and is doing real work. */
.var-hero-home {
  font-size: clamp(0.62rem, calc((100vh - 50px) / 57), 1rem);
  font-size: clamp(0.62rem, calc((100dvh - 50px) / 57), 1rem);
  padding: 1em 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 mx-auto. 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 size below is only an estimate, and it is the estimate that runs before
   the script in core/home.html measures the column and sets the exact figure
   as an inline style. It has to be close enough that nobody sees a reflow, and
   it must never be *too small* or the first paint is smaller than the final
   one, so it is deliberately about a tenth pessimistic.

   The arithmetic: a section costs 6.5em (a 2.75em title block over a 3.75em
   row of tiles) and 2em of gap above it, so a launcher of n sections is about
   8.5n em tall. The divisor here is 12.1n rather than 8.5n because it divides
   the *window*, not the launcher's own share of it: the header and the hero
   come out first, and at the sizes those settle to they are worth about a
   third again. The count comes from the template, so adding a section to the
   registry moves this number by itself; the fallback of 3 is for anything else
   that borrows the class. */
.band-launcher {
  --launcher-sections: 3;
  font-size: clamp(0.55rem, calc((100vh - 50px) / (var(--launcher-sections) * 12.1)), 1rem);
  font-size: clamp(0.55rem, calc((100dvh - 50px) / (var(--launcher-sections) * 12.1)), 1rem);
  padding: 0 1.5rem;
  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. The hero and the
   launcher are centred together now, so this reads as a little more air under
   an administrator's emblem — which is what it looks like over there too. */
.band-launcher-admin {
  padding-top: 2em;
}

/* Tighter under the title than it was: beside a 3.75em row of tiles, 1.2em of
   air made the heading look like it belonged to nothing in particular. */
.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 0.8em;
}

/* The only gap between two sections: the grid above carries no bottom margin,
   so this one number is the whole rhythm of the column. It has to stay clearly
   larger than the gap under a title, or the title starts to read as belonging
   to the section above it. */
.band-launcher .section-title-next {
  margin-top: 1.6em;
}

/* --- 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: the mark beside the name rather than above
   it, restated in em so it scales with the column (see .band-launcher).

   The card the reference draws is a good card and a poor row in a list of
   rows. Stacked, a tile spent 9em of a screen on one icon and one word, and
   most of that was the empty space a centred column needs to look deliberate —
   which is fine for three sections and impossible for six. Turned on its side
   the same tile is 3.75em, the whole launcher is a little over half the height
   it was, and the room that buys is what a new section is built out of.

   Everything else is kept. Every tile is still exactly the same size, a width
   in em rather than a min-width, so "Knowledge Assistant" does not draw itself
   a wider card than "LLTD". The height is the icon's, not the name's, so a
   name that wraps to two lines still leaves the row it is in flat. And 15.5em
   is chosen against the 53em column: three across with room to spare, which is
   the widest a section is likely to get.

   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: 15.5em;
  min-width: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.9em;
  padding: 0.75em 1em;
  text-align: left;
}

/* flex: none, because the chip is now a row's worth of neighbour to a name
   that may be long: without it a wrapping title squeezes the mark out of
   square. */
.band-launcher .feature-tile .feature-icon {
  width: 2.25em;
  height: 2.25em;
  flex: none;
}

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

/* No two-line floor any more — the icon is the taller of the two, so a name
   that wraps costs the row nothing. min-width: 0 so a long name wraps inside
   the tile instead of pushing it wider than its siblings. */
.band-launcher .feature-tile .feature-title {
  font-size: 0.8125em;
  line-height: 1.3;
  min-width: 0;
}

.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%; }

  /* One tile per line on a phone — a row of two 15.5em tiles side by side is
     narrower than the thumb aiming at it. The launcher rule is scoped, so it
     needs its own answer here rather than inheriting the one above. */
  .band-launcher .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);
}