/* Overrides on vendor/bulma.min.css: only what Bulma has no utility or
   component for.

   The palette and typography blocks below are shared **verbatim** with the
   Headlight Hub (`../hub-app/app/static/styles.css`) and with the brand guide
   transcribed in `.claude/rules/brand.md`. They are copied rather than
   imported because the two services deploy independently and a shared
   stylesheet would version-couple them for a block of custom properties; the
   cost is drift, and the rule is that a change to a brand token happens in
   both repositories in the same release. Everything after the typography
   block is this app's own and has no counterpart there. */

/* Brand palette (Headlight_ID_BrandGuide.pdf). Each value is one of the
   guide's swatches, as the HSL triple Bulma computes its light/dark/soft/
   bold/on-scheme shades from — so nothing downstream declares a colour.

   The guide's neutrals are two families and the themes take one each: Navy /
   Park Royal / Savory Blue are one cool ramp (226deg at 36%) and become dark
   mode's ground, surfaces and borders; Bone and Rhino are the warm pair and
   become light mode's. Hence a scheme hue and saturation per theme, rather
   than one theme being a lightness flip of the other.

   The guide has no green and no amber, so success and warning stay Bulma's. */

/* Also matched on `data-theme="light"` islands, not just `:root`. There are
   none left in the app — the login card was the last, and it is dark now —
   but Bulma's own [data-theme=light] restates its entire default palette
   (teal primary, cool scheme hue, Inter), so one added later would drop back
   to stock Bulma inside it without this. Kept as the guard. Same specificity
   as Bulma's rule, and this sheet loads second, so it wins in both places.
   The dark media block below is already written to stand down for an
   explicit light theme. */
:root,
[data-theme="light"] {
  /* Vermillion. Components read *-invert-l (applied at the colour's own
     hue), never the composite *-invert, so overriding that is a no-op — and
     Bulma's near-black invert is what keeps a solid vermillion button
     legible, white on #FD4641 being 3.4:1. */
  --bulma-primary-h: 2deg;
  --bulma-primary-s: 98%;
  --bulma-primary-l: 62%;
  /* Vermillion as *text* on a light ground; at full strength it is 3.3:1 on
     Bone. Bulma's own values (21%/41%) are computed for its default teal and
     are wrong both ways here — 41% is darker than the navy it would sit on. */
  --bulma-primary-on-scheme-l: 45%;

  /* Ruddy Blue's hue and saturation. Its own 74% is a light-on-dark accent
     that can't carry white text, so the fill sits at 56% and each theme sets
     its own text lightness below — dark mode's landing on Ruddy Blue exactly. */
  --bulma-link-h: 226deg;
  --bulma-link-s: 92%;
  --bulma-link-l: 56%;

  /* Crimson. It differs from the vermillion primary in saturation (59% vs
     98%), not just lightness, which is what keeps a Delete button from
     reading as a New one. Lifted from Crimson's 32% so a fill separates from
     the navy ground, and inverted to white — Bulma's computed near-black
     invert only works on its much lighter default red. The tinted form
     (`is-danger is-light`, every Revoke/Remove link) computes to a blush
     with #6B211E text, which is Crimson itself. */
  --bulma-danger-h: 2deg;
  --bulma-danger-s: 59%;
  --bulma-danger-l: 38%;
  --bulma-danger-invert-l: 100%;

  /* Powder Blue. Its dark-scheme shade computes back to Powder Blue and its
     light-scheme shade to Slate: the guide's two blues are already a pair. */
  --bulma-info-h: 196deg;
  --bulma-info-s: 66%;
  --bulma-info-l: 71%;

  /* The neutral `is-light` button (Edit, Cancel, Back) on Bone's hue. Bulma
     holds --bulma-light-l at 90% in both themes, so no per-theme value is
     needed — but it must clear the Bone page ground, hence the darker chip. */
  --bulma-light-h: 51deg;
  --bulma-light-s: 24%;

  /* Light theme: Bone ground, white cards, Rhino-family greys. Bulma derives
     the body background from --bulma-scheme-main (the cards' white); pointing
     it at Bone is what floats every bordered card on the guide's warm ground. */
  --bulma-scheme-h: 51;
  --bulma-scheme-s: 14%;
  --bulma-body-background-color: hsl(51deg, 100%, 96%);

  /* Navy ink on that warm ground — the text ramp keeps the cool hue rather
     than following the surfaces. */
  --bulma-text-h: 226deg;
  --bulma-text-s: 20%;

  /* Link text on a light ground, one step down from the solid fill. */
  --bulma-link-on-scheme-l: 50%;
}

/* Dark theme, applied twice on purpose: once for a viewer whose OS asks for
   it, once for the `data-theme="dark"` islands (navbar shell, login brand
   panel) that are dark on a light page too. Bulma's own [data-theme=dark]
   leaves scheme-h/s inherited — here Bone's warm pair — so the islands need
   the whole list, and a media query cannot cover them.

   The ladder is the guide's, not Bulma's 9/11/13/14%: Navy is the ground,
   Park Royal the raised surfaces, borders between Park Royal and Savory Blue.
   Text is the warm half on the cool ground, as every page of the guide sets
   it: Bone for anything strong (the logo, titles and the active nav link all
   read --bulma-text-strong), a low-saturation warm grey for body. Bone is set
   outright because the saturation making #FFFCEB a warm white at 96% makes it
   yellow at 74%. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bulma-scheme-h: 226;
    --bulma-scheme-s: 36%;

    --bulma-scheme-main-l: 11.5%; /* Navy #131828 */
    --bulma-scheme-main-bis-l: 15%;
    --bulma-scheme-main-ter-l: 18.5%; /* Park Royal #1E2640 */
    --bulma-background-l: 18.5%;
    --bulma-border-weak-l: 24%;
    --bulma-border-l: 30%;

    /* Back to Bulma's own rule — the Bone override above is light-mode only. */
    --bulma-body-background-color: var(--bulma-scheme-main);

    --bulma-text-h: 48deg;
    --bulma-text-s: 12%;
    --bulma-text-l: 74%;
    --bulma-text-weak-l: 56%;
    --bulma-text-strong: hsl(51deg, 100%, 96%); /* Bone */
    --bulma-text-title: hsl(51deg, 100%, 96%);

    /* Ruddy Blue #7897FF, which is what 226deg/92% resolves to here. */
    --bulma-link-on-scheme-l: 73.5%;

    /* On navy, Vermillion needs no adjusting to read as text (5.1:1). */
    --bulma-primary-on-scheme-l: 62%;
  }
}

/* The same list, for the dark islands on a light page. See the media block
   above for why each value is what it is, and keep the two in step. */
[data-theme="dark"] {
  --bulma-scheme-h: 226;
  --bulma-scheme-s: 36%;

  --bulma-scheme-main-l: 11.5%; /* Navy #131828 */
  --bulma-scheme-main-bis-l: 15%;
  --bulma-scheme-main-ter-l: 18.5%; /* Park Royal #1E2640 */
  --bulma-background-l: 18.5%;
  --bulma-border-weak-l: 24%;
  --bulma-border-l: 30%;

  /* Back to Bulma's own rule — the Bone override above is light-mode only. */
  --bulma-body-background-color: var(--bulma-scheme-main);

  --bulma-text-h: 48deg;
  --bulma-text-s: 12%;
  --bulma-text-l: 74%;
  --bulma-text-weak-l: 56%;
  --bulma-text-strong: hsl(51deg, 100%, 96%); /* Bone */
  --bulma-text-title: hsl(51deg, 100%, 96%);

  /* Ruddy Blue #7897FF, which is what 226deg/92% resolves to here. */
  --bulma-link-on-scheme-l: 73.5%;

  /* On navy, Vermillion needs no adjusting to read as text (5.1:1). */
  --bulma-primary-on-scheme-l: 62%;
}

/* Typography (Headlight_ID_BrandGuide.pdf). Gotham Book is bodycopy (400),
   Bold is headlines (700), Ultra is the super headline (800) — the 404
   numeral, the app's only display type. The weights are declared here rather
   than taken from the files: the desktop family ships each cut as its own
   family with its own usWeightClass (325/400/500), so declaring them is what
   lets one `font-family: Gotham` resolve all three, and what makes the
   font-weight 600 the pills use resolve up to Bold instead of synthesising.
   Self-hosted, no font CDN; no italics, since no template uses one. See
   vendor/gotham/README.md. */

@font-face {
  font-family: "Gotham";
  src: url("/static/vendor/gotham/gotham-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/static/vendor/gotham/gotham-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("/static/vendor/gotham/gotham-ultra.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Light islands too — see the palette block above. */
:root,
[data-theme="light"] {
  /* Bulma's own stack, named so the two places Gotham is not (below) can ask
     for it, and so a missing woff2 falls back to what the app used before
     rather than to a browser serif. */
  --hl-family-ui: Inter, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu,
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bulma-family-primary: "Gotham", var(--hl-family-ui);
  --bulma-family-secondary: "Gotham", var(--hl-family-ui);
}

/* Bulma gives `button` font-family: inherit but leaves these three to the
   browser's own UI font. The mono exceptions set --bulma-family-code on a
   class, so they outrank this. */
input,
select,
textarea {
  font-family: inherit;
}

/* Sticky footer: the footer (see base.html) is the last child of <body>, so
   the column lives there rather than on a wrapper div. On a page shorter
   than the viewport, .app-main's flex-grow is what keeps the footer at the
   bottom of the screen rather than floating up under the content. */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1 0 auto;
}

.container {
  max-width: 860px;
}

/* Navbar "shell". `data-theme="dark"` on it (see base.html) scopes Bulma's
   dark theme to just this element — that's what lets the single-colour
   Headlight logo sit directly on it and stay legible no matter which theme
   the content area itself is in.

   No link rules, unlike the Hub's: this nav has one child and it is the
   brand. If a second destination ever lands here, take the Hub's
   `.app-nav-link` block rather than inventing a different active state. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand-name {
  letter-spacing: 0.02em;
}

.logo-mark {
  height: 20px;
  width: auto;
  /* fill is currentColor, so it tracks whatever scheme it renders in — no
     light/dark override, and no background chip to keep it legible. */
  color: var(--bulma-text-strong);
  flex-shrink: 0;
  display: block;
}

/* Page footer (partials/version.html). Bulma's .footer is built for a fat
   marketing footer; this is a one-line strip, and it needs a border rather
   than a fill since .footer's default background is the page's own colour. */

.app-footer {
  padding: 1rem 1.5rem;
  background: transparent;
  border-top: 1px solid var(--bulma-border-weak);
  flex-shrink: 0;
}

.app-version {
  font-family: var(--bulma-family-code);
  font-size: 0.68rem;
  color: var(--bulma-text-weak);
  flex-shrink: 0;
}

/* The arrival report (templates/home.html), and the two error pages, which
   borrow its type scale so a 404 reads as the same app rather than a
   different one. */

.arrival {
  padding: 1.5rem 0 3rem;
}

.arrival-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* -on-scheme, not the flat --bulma-primary the display numeral uses: this
     is 0.75rem bold, so it owes 4.5:1 rather than display type's 3:1. */
  color: var(--bulma-primary-on-scheme);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The host itself, and the largest thing on the page on purpose — it is the
   one fact the page exists to deliver. Monospace rather than Gotham: this is
   an address someone may need to compare character by character against a DNS
   record, which is exactly the job the system mono stack is for and display
   type is not (see the brand guide's rule 3).

   `overflow-wrap: anywhere` because a Host header is whatever a client sent,
   and a 200-character one must wrap rather than widen the page. */
.arrival-host {
  margin: 0.4rem 0 1rem;
  font-family: var(--bulma-family-code);
  font-size: clamp(1.5rem, 5.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bulma-text-strong);
  overflow-wrap: anywhere;
}

.arrival-label {
  color: var(--bulma-primary-on-scheme);
}

.arrival-lede {
  color: var(--bulma-text);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 44rem;
}

/* The error pages' display numeral. Gotham Ultra (800) is the guide's "super
   headline" cut and this is the only place in the app that reaches for it. */
.arrival-code {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(5.5rem, 15vw, 8.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(110deg, var(--bulma-primary) 10%, var(--bulma-link-text) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.arrival-title {
  margin-bottom: 0.75rem;
  color: var(--bulma-text-strong);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* The facts table. A <dl> rather than a <table>: these are four labelled
   values, not rows of anything. Two columns on a wide screen, stacked below
   the phone breakpoint. */
.arrival-facts {
  margin-top: 2rem;
  border-top: 1px solid var(--bulma-border-weak);
}

.arrival-fact {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--bulma-border-weak);
}

.arrival-fact dt {
  color: var(--bulma-text-weak);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: center;
}

.arrival-fact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The database half of the page, boxed so an outage reads as one half of the
   page failing rather than the page failing. Each state gets an accent on the
   left edge and nothing else — the colour is the only difference, so the four
   share every other rule. */
.arrival-site {
  margin-top: 2rem;
}

.arrival-site-status {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--bulma-radius);
  border-left: 3px solid var(--bulma-border);
  background: var(--bulma-scheme-main-bis);
  color: var(--bulma-text);
  line-height: 1.55;
}

.arrival-site-status .icon {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.arrival-site-status.is-known {
  border-left-color: var(--bulma-primary);
}

.arrival-site-status.is-error {
  border-left-color: var(--bulma-danger);
}

.arrival-site-status.is-disabled,
.arrival-site-status.is-unknown {
  border-left-color: var(--bulma-border);
}

/* `minmax(0, …)` above rather than bare track sizes: a bare `1fr` is
   `minmax(auto, 1fr)`, whose minimum is the content's min-content width, and
   an unbroken 200-character Host header would push the column past the
   viewport before `overflow-wrap` got a say. */
@media screen and (max-width: 768px) {
  .arrival-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}