/* Dominia — HUD chrome.
 *
 * Field-commander instrument marks: corner brackets, graduations, registration ticks. Drawn
 * from the reference sheet, but translated into this brand rather than copied out of it — the
 * source art is cyan-on-black with glows and filled panels, and we have five colours, hairlines,
 * and no glow. What survives translation is the GRAMMAR: a frame is marked at its corners
 * rather than boxed, instruments carry graduations, and everything is drawn at hairline weight.
 *
 * Every mark here is background-image on an element that already exists, so none of it costs a
 * DOM node and none of it is in the way of a pointer.
 */

/* ---------------------------------------------------------------- corner brackets

   Eight one-pixel bars, two per corner. `--hud-arm` sets how far they reach and `--hud-line`
   what they are drawn in, so the same class serves a full-screen frame and a 228px panel. */

/* The two dials are read with fallbacks rather than declared here. Declaring them would give
   this class the same specificity as the element setting them, and — loading later — it would
   win, which is how a frame that asked for 22px arms quietly got 14. */
.hud-corners {
  background-image:
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0),
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0),
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0),
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0);
  background-size:
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px),
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px),
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px),
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
}

/* Two corners only — for panels that already carry a full border and would read as over-drawn
   with four. Top-left and bottom-right: enough to say "instrument", not enough to say "sticker". */
.hud-corners--two {
  background-image:
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0),
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0);
  background-size:
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px),
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px);
  background-position: left top, left top, right bottom, right bottom;
}

/* Left pair — top-left and bottom-left. The comms panel already carries a full border on all
   four sides, so four brackets would read as over-drawn in exactly the way the note above
   describes; marking only the leading edge says "this side is the instrument's spine" and lets
   the border do the rest. Same two dials, so it sizes and colours like the others. */
.hud-corners--left {
  background-image:
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0),
    linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0), linear-gradient(var(--hud-line, var(--hairline-strong)) 0 0);
  background-size:
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px),
    var(--hud-arm, 14px) 1px, 1px var(--hud-arm, 14px);
  background-position: left top, left top, left bottom, left bottom;
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- graduations

   A ruled edge. Used on the corporates and access progress rails, where it turns a bare rule
   into a scale you are moving along. */

.hud-ticks {
  background-image: repeating-linear-gradient(
    to right,
    var(--hairline-strong) 0 1px,
    transparent 1px 40px
  );
}

/* ---------------------------------------------------------------- readout

   Small mono chrome that sits on a frame rather than in the layout: coordinates, a status word,
   a count. Slate, so it reads as an instrument label and never competes with the copy. */

.hud-readout {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: var(--s-3);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-label-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-label-wide);
  color: var(--slate);
  pointer-events: none;
}

/* The separator between fields is a rule, not a bullet — the brand has no decorative glyphs. */
.hud-readout span + span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-right: var(--s-3);
  vertical-align: middle;
  background: var(--hairline-strong);
}