/* ==========================================================================
   SPRINKLERDUDE UI KIT — STEP 2: HUD
   Paste at the end of sd-kit.css (or load right after it).
   Covers ARCHITECTURE.md section 4: #3 HUD and #22 Drive caption.

   Two looks, one rule:
     ink plates with a white die-cut edge  = things you read
     white or tinted keys with a hard shadow = things you press

   Layout follows the size of .sd-viewport (put that class on #app), using
   container queries. Browsers without them get the phone layout everywhere.
   ========================================================================== */

/* 4.0 Tokens --------------------------------------------------------------- */
:root {
  /* HUD surfaces */
  --sd-hud-plate: rgba(20, 24, 27, 0.92);   /* read-only plate over the map */
  --sd-hud-cut: rgba(255, 255, 255, 0.9);   /* die-cut edge, keeps plates visible on asphalt */
  --sd-hud-soft: #c9d1d6;                   /* secondary text on a plate, 11:1 */
  --sd-hud-key: var(--sd-ink-raised);       /* tool button face */
  --sd-hud-key-hover: #36414a;
  --sd-hud-key-line: #5b6872;
  --sd-violet: #6a2fb8;                     /* Water Sense badge, white text 7.7:1 */

  /* Joystick */
  --sd-joy-base: rgba(20, 24, 27, 0.34);
  --sd-joy-base-active: rgba(20, 24, 27, 0.58);

  /* Viewer legend swatches: these match the colors the canvas draws */
  --sd-viz-dry: #ffb15c;
  --sd-viz-dry-ink: #5a2800;
  --sd-viz-wet: #3a86e0;
  --sd-viz-over: #f0627a;
  --sd-viz-over-ink: #5a0010;

  /* Type */
  --sd-fs-2xs: 0.6875rem;                   /* 11 — tool names and key numbers */

  /* Shadows */
  --sd-shadow-key: 0 3px 0 var(--sd-ink);
  --sd-shadow-key-pressed: 0 1px 0 var(--sd-ink);
  --sd-shadow-plate: 0 2px 8px var(--sd-ink-a35);

  /* Sizes */
  --sd-hud-inset: 10px;                     /* distance from the screen edge */
  --sd-hud-gap: 6px;
  --sd-hud-read: 32px;                      /* height of a read-only pill */
  --sd-hud-objective-max: 520px;
  --sd-hud-cluster-max: 520px;              /* right-hand cluster, desktop */
  --sd-hud-cluster-max-sm: 400px;           /* right-hand cluster, phone landscape */
  --sd-tool-w: 60px;
  --sd-tool-h: 56px;
  --sd-tool-w-sm: 54px;
  --sd-tool-h-sm: 48px;
  --sd-joy-size: 120px;
  --sd-joy-size-sm: 104px;
  --sd-joy-knob: 52px;
  --sd-interact-size: 96px;
  --sd-interact-size-sm: 84px;

  /* Notch and home-bar insets */
  --sd-safe-t: env(safe-area-inset-top, 0px);
  --sd-safe-r: env(safe-area-inset-right, 0px);
  --sd-safe-b: env(safe-area-inset-bottom, 0px);
  --sd-safe-l: env(safe-area-inset-left, 0px);
}

/* 4.1 Viewport + HUD shell -------------------------------------------------- */
.sd-viewport { container: sd-viewport / size; }

.sd-hud {
  --sd-joy: var(--sd-joy-size);
  --sd-interact: var(--sd-interact-size);
  --sd-edge-l: calc(var(--sd-hud-inset) + var(--sd-safe-l));
  --sd-edge-r: calc(var(--sd-hud-inset) + var(--sd-safe-r));
  --sd-edge-b: calc(var(--sd-hud-inset) + var(--sd-safe-b));
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--sd-font-body);
  line-height: var(--sd-lh-tight);
  color: var(--sd-paper);
}

/* Focus that survives any ground color: white inside, blue outside */
.sd-hud :focus-visible {
  outline: 3px solid var(--sd-paper);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--sd-focus);
}

/* The shared plate look */
.sd-hud-objective,
.sd-hud-zone,
.sd-hud-sense,
.sd-hud-test,
.sd-hud-legend,
.sd-hud-prompt,
.sd-hud-toollabel,
.sd-toolbar {
  border: var(--sd-bw) solid var(--sd-hud-cut);
  background: var(--sd-hud-plate);
  color: var(--sd-paper);
  box-shadow: var(--sd-shadow-plate);
  pointer-events: auto;
}

/* 4.2 Top area ------------------------------------------------------------- */
/* Phone portrait (the base): one 44px row of keys, then the readouts.
     [ $40 ][ ⚡94 ]        [💬][📓][🗺][☰]
     [ zone status ............ ][ sense ]
     [ objective ....................... ]
     [ test bar ] [ legend ]                 (only while they are showing)   */
.sd-hud__top {
  position: absolute;
  top: calc(var(--sd-hud-inset) + var(--sd-safe-t));
  left: var(--sd-edge-l);
  right: var(--sd-edge-r);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-hud-gap);
  pointer-events: none;
}
.sd-hud__left,
.sd-hud__right { display: contents; }

.sd-hud__stats {
  order: 1;
  display: flex;
  gap: var(--sd-hud-gap);
  margin-right: auto;
}
.sd-hud__buttons {
  order: 2;
  display: flex;
  gap: var(--sd-hud-gap);
}
.sd-hud__status {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-hud-gap);
  min-width: 0;
}
.sd-hud-objective { order: 4; flex: 1 1 100%; }
.sd-hud-test      { order: 5; flex: 1 1 100%; }
.sd-hud-legend    { order: 6; flex: 0 1 auto; }

/* 4.3 Objective ------------------------------------------------------------ */
.sd-hud-objective {
  min-width: 0;
  max-width: var(--sd-hud-objective-max);
  padding: var(--sd-sp-2) var(--sd-sp-3) var(--sd-sp-2) calc(var(--sd-sp-3) + 5px);
  border-radius: var(--sd-r-md);
  background-image: linear-gradient(var(--sd-lime), var(--sd-lime));   /* lime spine */
  background-size: 5px 100%;
  background-repeat: no-repeat;
  font-size: var(--sd-fs-sm);
  font-weight: 600;
  line-height: 1.35;
}
.sd-hud-objective__label {       /* runs in with the text, so it costs no extra line */
  margin-right: 0.4em;
  color: var(--sd-lime);
  font-weight: 800;
}

/* 4.4 Zone status pill ----------------------------------------------------- */
.sd-hud-zone,
.sd-hud-sense {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--sd-hud-read);
  padding: var(--sd-sp-1) var(--sd-sp-3);
  border-radius: var(--sd-r-lg);     /* a full pill on one line, still tidy on two */
  font-size: var(--sd-fs-sm);
  font-weight: 700;
}
.sd-hud-zone { flex: 0 1 auto; }     /* long zone names wrap; they are never cut off */
.sd-hud-zone.is-running {
  background-color: var(--sd-blue-text);
  background-image: repeating-linear-gradient(115deg,
    transparent 0, transparent 10px,
    var(--sd-ink-a20) 10px, var(--sd-ink-a20) 20px);
  background-size: 44px 100%;
  animation: sd-flow 900ms linear infinite;    /* keyframes are in the kit */
}
.sd-hud-sense {
  flex: none;
  background: var(--sd-violet);
  white-space: nowrap;
}

/* 4.5 Money and energy ----------------------------------------------------- */
.sd-hud-stat {
  --sd-stat-fill: var(--sd-green);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-sp-1);
  min-width: var(--sd-tap);
  min-height: 40px;
  padding: 0 var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-pill);
  background-color: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: var(--sd-lh-tight);
  white-space: nowrap;
  box-shadow: var(--sd-shadow-key);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sd-hud-stat::before {             /* 44px to the finger */
  content: "";
  position: absolute;
  inset: -4px 0;
}
.sd-hud-stat:active {
  transform: translateY(2px);
  box-shadow: var(--sd-shadow-key-pressed);
}
.sd-hud-stat--money { background-color: var(--sd-amber-tint); }

/* Energy carries a small gauge along its bottom edge.
   Engine sets style="--sd-value: 94%" plus .is-mid (21–45) or .is-low (20 or below). */
.sd-hud-stat--energy {
  padding-bottom: 5px;
  background-color: var(--sd-green-tint);
  background-image:
    linear-gradient(to right,
      var(--sd-stat-fill) 0, var(--sd-stat-fill) var(--sd-value, 100%),
      var(--sd-ink-a20) var(--sd-value, 100%));
  background-size: calc(100% - 22px) 4px;
  background-position: 50% calc(100% - 4px);
  background-repeat: no-repeat;
}
.sd-hud-stat--energy.is-mid {
  --sd-stat-fill: var(--sd-amber-text);
  background-color: var(--sd-amber-tint);
}
.sd-hud-stat--energy.is-low {
  --sd-stat-fill: var(--sd-red);
  border-color: var(--sd-red-text);
  background-color: var(--sd-red-tint);
  color: var(--sd-red-text);
}
.sd-hud-stat--energy.is-low::after {    /* a mark, not just a color, for "low" */
  content: "▼";
  font-size: var(--sd-fs-xs);
}

/* 4.6 Gus, Journal, Map, Menu ---------------------------------------------- */
.sd-hud-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-hud-gap);
  min-width: var(--sd-tap);
  min-height: var(--sd-tap);
  padding: 0;
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-sm);
  font-weight: 800;
  line-height: var(--sd-lh-tight);
  box-shadow: var(--sd-shadow-key);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sd-hud-btn__icon { font-size: var(--sd-fs-lg); line-height: 1; }
.sd-hud-btn__label { display: none; }        /* shown from 900px wide, see 4.12 */
@media (hover: hover) {
  .sd-hud-btn:hover,
  .sd-hud-stat--money:hover { background-color: var(--sd-lime-tint); }
}
.sd-hud-btn:active {
  transform: translateY(2px);
  box-shadow: var(--sd-shadow-key-pressed);
}

/* 4.7 Catch-can test bar --------------------------------------------------- */
/* Holds a kit .sd-progress.sd-progress--sm and a .sd-btn--sm. */
.sd-hud-test {
  --sd-edge: var(--sd-black);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-sp-2) var(--sd-sp-3);
  padding: var(--sd-sp-2) var(--sd-sp-3) calc(var(--sd-sp-2) + 3px);
  border-radius: var(--sd-r-md);
  font-size: var(--sd-fs-sm);
  font-weight: 700;
}
.sd-hud-test__text { flex: 0 1 auto; }
.sd-hud-test .sd-progress { flex: 1 1 90px; }

/* 4.8 Viewer legend -------------------------------------------------------- */
.sd-hud-legend {
  max-width: 100%;
  padding: var(--sd-sp-2) var(--sd-sp-3);
  border-radius: var(--sd-r-md);
  font-size: var(--sd-fs-sm);
  line-height: 1.3;
}
.sd-hud-legend__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-sp-1) var(--sd-sp-2);
  font-weight: 700;
}
.sd-hud-legend__sw {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--sd-r-sm);
  font-size: var(--sd-fs-xs);
  font-weight: 900;
  line-height: 1;
}
.sd-hud-legend__sw:not(:first-child) { margin-left: var(--sd-sp-2); }
.sd-hud-legend__sw--dry  { background: var(--sd-viz-dry);  color: var(--sd-viz-dry-ink); }
.sd-hud-legend__sw--wet  { background: var(--sd-viz-wet); }
.sd-hud-legend__sw--over { background: var(--sd-viz-over); color: var(--sd-viz-over-ink); }
.sd-hud-legend__live { margin-top: var(--sd-sp-1); color: var(--sd-hud-soft); }
.sd-hud-legend__live:empty { display: none; }

/* 4.9 Bottom: prompt, tool label, toolbar ---------------------------------- */
.sd-hud__bottom {
  position: absolute;
  left: 50%;
  bottom: var(--sd-edge-b);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-hud-gap);
  width: max-content;
  max-width: calc(100% - 2 * var(--sd-hud-inset));
  pointer-events: none;
}
/* Phones in portrait: sits just above the joystick and Interact button */
.touch .sd-hud__bottom {
  bottom: calc(var(--sd-edge-b) + var(--sd-joy) + var(--sd-sp-3));
}

/* Interaction prompt, and the drive caption (#22), which is the same piece */
.sd-hud-prompt {
  max-width: 100%;
  min-height: 36px;
  padding: var(--sd-sp-1) var(--sd-sp-4);
  border-color: var(--sd-lime);
  border-radius: var(--sd-r-lg);
  display: flex;
  align-items: center;
  gap: var(--sd-sp-2);
  font-size: var(--sd-fs-md);
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}
.sd-hud-prompt__key {              /* <kbd>E</kbd> */
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--sd-sp-1);
  border-radius: var(--sd-r-sm);
  background: var(--sd-lime);
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-sm);
  font-weight: 800;
  line-height: 1;
}

/* "Tool: Adjustment tool": a tab on top of the toolbar */
.sd-hud-toollabel {
  margin-bottom: calc(-1 * var(--sd-hud-gap) - var(--sd-bw));
  padding: 3px var(--sd-sp-3) 4px;
  border-bottom: 0;
  border-radius: var(--sd-r-md) var(--sd-r-md) 0 0;
  box-shadow: none;
  font-size: var(--sd-fs-xs);
  font-weight: 700;
  pointer-events: none;
}
.sd-hud-toollabel:empty,
.touch .sd-hud-toollabel { display: none; }   /* on touch the names are on the buttons */

.sd-toolbar {
  display: flex;
  gap: var(--sd-sp-1);
  max-width: 100%;
  padding: var(--sd-hud-gap);
  border-radius: var(--sd-r-lg);
}
.sd-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 1 var(--sd-tool-w);
  width: var(--sd-tool-w);
  min-width: var(--sd-tap);
  height: var(--sd-tool-h);
  padding: 2px;
  border: var(--sd-bw) solid var(--sd-hud-key-line);
  border-radius: var(--sd-r-md);
  background: var(--sd-hud-key);
  color: var(--sd-paper);
  font-family: var(--sd-font-body);
  cursor: pointer;
  transition: transform var(--sd-dur) ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sd-tool svg { width: 24px; height: 24px; flex: none; }
.sd-tool__key {
  position: absolute;
  top: 2px;
  left: 5px;
  color: var(--sd-hud-soft);
  font-size: var(--sd-fs-2xs);
  font-weight: 700;
}
.touch .sd-tool__key { display: none; }       /* no number keys on a phone */
.touch .sd-tool { height: var(--sd-tool-h-sm); }
.sd-tool__name {
  font-size: var(--sd-fs-2xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
@media (hover: hover) {
  .sd-tool:hover { background: var(--sd-hud-key-hover); }
}
/* Selected: lime, and lifted out of the row so it reads without color */
.sd-tool[aria-pressed="true"] {
  border-color: var(--sd-paper);
  background: var(--sd-lime);
  color: var(--sd-ink);
  transform: translateY(-5px);
  box-shadow: 0 5px 0 var(--sd-black);
}
.sd-tool[aria-pressed="true"] .sd-tool__key { color: var(--sd-ink); }
.sd-tool:disabled {
  border-style: dashed;
  background: transparent;
  color: var(--sd-hud-soft);
  cursor: not-allowed;
}

/* 4.10 Phone controls ------------------------------------------------------ */
.sd-joystick,
.sd-interact { display: none; }
.touch .sd-joystick,
.touch .sd-interact { display: block; }

.sd-joystick {
  position: absolute;
  left: calc(var(--sd-edge-l) + var(--sd-sp-1));
  bottom: calc(var(--sd-edge-b) + var(--sd-sp-1));
  width: var(--sd-joy);
  height: var(--sd-joy);
  border: var(--sd-bw-heavy) solid var(--sd-hud-cut);
  border-radius: 50%;
  background: var(--sd-joy-base);
  pointer-events: auto;
  touch-action: none;
}
.sd-joystick.is-active { background: var(--sd-joy-base-active); }
.sd-joystick__knob {               /* engine moves it with an inline transform */
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sd-joy-knob);
  height: var(--sd-joy-knob);
  border: var(--sd-bw-heavy) solid var(--sd-ink);
  border-radius: 50%;
  background: var(--sd-paper);
  transform: translate(-50%, -50%);
}
.sd-joystick.is-active .sd-joystick__knob { background: var(--sd-lime); }

.sd-interact {
  position: absolute;
  right: calc(var(--sd-edge-r) + var(--sd-sp-1));
  bottom: calc(var(--sd-edge-b) + var(--sd-sp-3));
  width: var(--sd-interact);
  height: var(--sd-interact);
  padding: 0;
  border: var(--sd-bw-heavy) solid var(--sd-ink);
  border-radius: 50%;
  background: var(--sd-lime);
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-size: var(--sd-fs-md);
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: var(--sd-shadow-btn);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sd-interact:active {
  transform: translateY(3px);
  box-shadow: var(--sd-shadow-pressed);
}
.sd-interact:disabled {
  border-style: dashed;
  border-color: var(--sd-ink-soft);
  background: var(--sd-paper-2);
  color: var(--sd-ink-soft);
  box-shadow: none;
}

/* 4.11 Two columns: 600px and wider (phone landscape, tablet, desktop) ------ */
@container sd-viewport (min-width: 600px) {
  .sd-hud__top {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sd-sp-3);
  }
  .sd-hud__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sd-hud-gap);
    flex: 0 1 var(--sd-hud-objective-max);
    min-width: 0;
  }
  .sd-hud__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sd-hud-gap);
    flex: 0 1 auto;
    max-width: var(--sd-hud-cluster-max-sm);
  }
  .sd-hud-objective,
  .sd-hud-legend { order: 0; flex: none; max-width: 100%; }
  .sd-hud__status { flex: 0 1 auto; justify-content: flex-end; }
  .sd-hud__stats { margin-right: 0; }
  .sd-hud-test { flex: 0 1 300px; }

  /* Room for the toolbar between the joystick and the Interact button */
  .touch .sd-hud__bottom {
    bottom: var(--sd-edge-b);
    max-width: calc(100% - 2 * (var(--sd-joy) + 3 * var(--sd-hud-inset)));
  }
}

/* 4.12 Desktop: button labels and a roomier objective ---------------------- */
@container sd-viewport (min-width: 900px) and (min-height: 521px) {
  .sd-hud__right { max-width: var(--sd-hud-cluster-max); }
  .sd-hud__status { order: 0; }               /* zone and money share the first line */
  .sd-hud-objective { font-size: var(--sd-fs-md); }
  .sd-hud-btn { padding: 0 var(--sd-sp-3); }
  .sd-hud-btn__label { display: inline; }
}

/* 4.13 Short screens: phone landscape -------------------------------------- */
@container sd-viewport (max-height: 520px) {
  .sd-hud {
    --sd-joy: var(--sd-joy-size-sm);
    --sd-interact: var(--sd-interact-size-sm);
  }
  .sd-hud-toollabel { display: none; }        /* the tool names stay on the buttons */
  .sd-tool {
    flex-basis: var(--sd-tool-w-sm);
    width: var(--sd-tool-w-sm);
    height: var(--sd-tool-h-sm);
  }
  .sd-tool svg { width: 20px; height: 20px; }
  .sd-interact { font-size: var(--sd-fs-sm); }
}

/* 4.14 Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sd-hud-zone.is-running { animation: none; }
  .sd-tool { transition: none; }
  .sd-hud-btn:active,
  .sd-hud-stat:active,
  .sd-interact:active { transform: none; }
}