/* SprinklerDude UI kit — Step 1: design system (designed in Fable).
   Copied unmodified from sprinklerdude-01-design-system.html, sections 1–3.
   Game-specific glue lives in style.css; replace this file as a whole when the kit changes. */
/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand colors (given) */
  --sd-ink: #14181b;
  --sd-lime: #b8f24a;
  --sd-lime-dark: #7fb51e;
  --sd-blue: #2f80c0;
  --sd-red: #c8323e;
  --sd-green: #2e8b3e;

  /* Neutrals */
  --sd-black: #000000;
  --sd-paper: #ffffff;
  --sd-paper-2: #f2f4ef;      /* inset areas, table heads, disabled */
  --sd-line: #d3d8cf;         /* hairlines inside a panel */
  --sd-ink-soft: #4a545c;     /* secondary text, 7.7:1 on paper */
  --sd-ink-raised: #262d32;   /* raised surface on ink */

  /* Text-safe shades: brand hues darkened to pass AA as small text on paper */
  --sd-green-text: #1f6b2c;   /* 6.6:1 */
  --sd-blue-text: #1f5f94;    /* 6.6:1 */
  --sd-red-text: #a3222d;     /* 7.4:1 */
  --sd-amber-text: #7a5200;   /* prices, 6.9:1 */

  /* Support color for the "medium" state and money */
  --sd-amber: #f2b632;

  /* Tints: callout and chip backgrounds (ink text on all of them) */
  --sd-lime-tint: #eef9d6;
  --sd-green-tint: #e2f3e5;
  --sd-blue-tint: #e4f0f9;
  --sd-red-tint: #fbe6e8;
  --sd-amber-tint: #fff4cf;

  /* Alphas */
  --sd-scrim: rgba(20, 24, 27, 0.62);
  --sd-ink-a20: rgba(20, 24, 27, 0.2);
  --sd-ink-a35: rgba(20, 24, 27, 0.35);

  /* Roles */
  --sd-focus: var(--sd-blue);       /* >= 3:1 on paper, lime and ink */
  --sd-edge: var(--sd-ink);         /* outline + hard shadow color; swapped on ink surfaces */

  /* Type families (system only) */
  --sd-font-display: "Avenir Next Condensed", "Roboto Condensed", "Bahnschrift",
    "Arial Narrow", "sans-serif-condensed", Impact, system-ui, sans-serif;
  --sd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* Font sizes */
  --sd-fs-xs: 0.75rem;    /* 12 — fine print */
  --sd-fs-sm: 0.875rem;   /* 14 — secondary text, chips */
  --sd-fs-md: 1rem;       /* 16 — body */
  --sd-fs-lg: 1.125rem;   /* 18 — button labels, lead text */
  --sd-fs-xl: 1.375rem;   /* 22 — section heads, totals */
  --sd-fs-2xl: 1.75rem;   /* 28 — panel titles (desktop) */
  --sd-fs-3xl: 2.5rem;    /* 40 — title screen, big numbers */

  --sd-lh: 1.45;
  --sd-lh-tight: 1.1;
  --sd-track: 0.035em;    /* letter-spacing for uppercase display type */

  /* Radii */
  --sd-r-sm: 6px;
  --sd-r-md: 10px;
  --sd-r-lg: 16px;
  --sd-r-pill: 999px;

  /* Outlines */
  --sd-bw: 2px;
  --sd-bw-heavy: 3px;

  /* Shadows: hard and offset, like a die-cut vinyl decal */
  --sd-shadow-btn: 0 4px 0 var(--sd-edge);
  --sd-shadow-btn-sm: 0 3px 0 var(--sd-edge);
  --sd-shadow-pressed: 0 1px 0 var(--sd-edge);
  --sd-shadow-card: 4px 4px 0 var(--sd-ink);
  --sd-shadow-panel: 0 6px 0 var(--sd-ink), 0 16px 32px var(--sd-ink-a35);
  --sd-shadow-float: 0 2px 0 var(--sd-ink), 0 4px 10px var(--sd-ink-a35); /* HUD, step 2 */

  /* Spacing */
  --sd-sp-1: 4px;
  --sd-sp-2: 8px;
  --sd-sp-3: 12px;
  --sd-sp-4: 16px;
  --sd-sp-5: 24px;
  --sd-sp-6: 32px;

  /* Sizing + motion */
  --sd-tap: 44px;
  --sd-dur: 110ms;

  /* Style-guide chrome only (stand-in for the canvas behind a panel) */
  --doc-grass: #6aa857;
  --doc-grass-2: #5c9a4b;
  --doc-walk: #dcd8cc;
  --doc-road: #4b535a;
}

/* 2. BASE + FOCUS ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-md);
  line-height: var(--sd-lh);
  color: var(--sd-ink);
  background: var(--sd-paper-2);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sd-focus);
  outline-offset: 2px;
}

/* Shared display-type treatment */
.sd-display,
.sd-btn,
.sd-tab,
.sd-panel__title {
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--sd-track);
}

/* Any ink-backed area (title screen, pause menu, panel header) */
.sd-surface-ink {
  --sd-edge: var(--sd-black);
  background: var(--sd-ink);
  color: var(--sd-paper);
}

/* Image slot: swap for <img> when the logos are dropped in */
.sd-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: var(--sd-bw) dashed currentColor;
  border-radius: var(--sd-r-sm);
  font-size: var(--sd-fs-xs);
  font-weight: 700;
  line-height: var(--sd-lh-tight);
  text-align: center;
}

/* 3. COMPONENTS ------------------------------------------------------------ */

/* 3.1 Buttons -------------------------------------------------------------- */
.sd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-sp-2);
  min-height: var(--sd-tap);
  padding: 0 var(--sd-sp-5);
  border: var(--sd-bw) solid var(--sd-edge);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-size: var(--sd-fs-lg);
  line-height: var(--sd-lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sd-shadow-btn);
  transition: transform var(--sd-dur) ease-out, box-shadow var(--sd-dur) ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sd-btn--primary { background: var(--sd-lime); }
.sd-btn--danger  { background: var(--sd-red); color: var(--sd-paper); }
.sd-btn--block   { display: flex; width: 100%; }

@media (hover: hover) {
  .sd-btn:hover { transform: translateY(-1px); }
  .sd-btn--primary:hover { background: var(--sd-lime-tint); }
  .sd-btn--secondary:hover { background: var(--sd-lime-tint); }
  .sd-btn--danger:hover { background: var(--sd-red-text); }
}
.sd-btn:active {
  transform: translateY(3px);
  box-shadow: var(--sd-shadow-pressed);
}

/* Small: 32px tall to the eye, 44px to the finger */
.sd-btn--sm {
  min-height: 32px;
  padding: 0 var(--sd-sp-3);
  border-radius: var(--sd-r-sm);
  font-size: var(--sd-fs-md);
  box-shadow: var(--sd-shadow-btn-sm);
}
.sd-btn--sm::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.sd-btn--sm:active { transform: translateY(2px); }

/* Disabled / locked: flat, dashed, no shadow, so it reads without color */
.sd-btn:disabled,
.sd-btn[aria-disabled="true"] {
  background: var(--sd-paper-2);
  color: var(--sd-ink-soft);
  border-style: dashed;
  border-color: var(--sd-ink-soft);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.sd-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-sp-3) var(--sd-sp-3);
  align-items: center;
}

/* 3.2 Panel card + header -------------------------------------------------- */
/* In the game: .sd-scrim is position:fixed; inset:0 and centers one .sd-panel */
.sd-scrim {
  display: grid;
  place-items: center;
  padding: var(--sd-sp-2);
  background: var(--sd-scrim);
}
.sd-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  max-height: 100%;
  overflow: hidden;
  border: var(--sd-bw-heavy) solid var(--sd-ink);
  border-radius: var(--sd-r-lg);
  background: var(--sd-paper);
  box-shadow: var(--sd-shadow-panel);
}
.sd-panel--narrow { max-width: 460px; }

.sd-panel__header {
  display: flex;
  align-items: center;
  gap: var(--sd-sp-3);
  flex: none;
  padding: var(--sd-sp-2) var(--sd-sp-2) var(--sd-sp-2) var(--sd-sp-4);
  background: var(--sd-ink);
  color: var(--sd-paper);
  /* the two stripes under the SprinklerDude wordmark */
  box-shadow: inset 0 -4px 0 var(--sd-blue), inset 0 -8px 0 var(--sd-lime);
  padding-bottom: calc(var(--sd-sp-2) + 8px);
}
.sd-panel__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--sd-fs-xl);
  font-style: italic;
  line-height: var(--sd-lh-tight);
  overflow-wrap: anywhere;
}
.sd-panel__close {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sd-tap);
  height: var(--sd-tap);
  padding: 0;
  border: var(--sd-bw) solid var(--sd-paper);
  border-radius: var(--sd-r-md);
  background: var(--sd-ink);
  color: var(--sd-paper);
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-xl);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.sd-panel__close:focus-visible { outline-color: var(--sd-lime); }
@media (hover: hover) {
  .sd-panel__close:hover { background: var(--sd-paper); color: var(--sd-ink); }
}
.sd-panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sd-sp-4);
  -webkit-overflow-scrolling: touch;
}
.sd-panel__body > :first-child { margin-top: 0; }
.sd-panel__body > :last-child { margin-bottom: 0; }
.sd-panel__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sd-sp-3);
  flex: none;
  padding: var(--sd-sp-3) var(--sd-sp-4) calc(var(--sd-sp-3) + 4px);
  border-top: var(--sd-bw) solid var(--sd-ink);
  background: var(--sd-paper-2);
}

@media (min-width: 600px) {
  .sd-scrim { padding: var(--sd-sp-5); }
  .sd-panel__header { padding-left: var(--sd-sp-5); }
  .sd-panel__title { font-size: var(--sd-fs-2xl); }
  .sd-panel__body { padding: var(--sd-sp-5); }
  .sd-panel__footer { padding-left: var(--sd-sp-5); padding-right: var(--sd-sp-5); }
}
@media (max-width: 599px) {
  .sd-panel__footer .sd-btn { flex: 1 1 auto; }
}

/* 3.3 Tabs ----------------------------------------------------------------- */
/* Markup: role="tablist" > button role="tab" aria-selected="true|false" */
.sd-tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--sd-sp-1);
  overflow-x: auto;
  padding: 0 var(--sd-sp-1);
  border-bottom: var(--sd-bw-heavy) solid var(--sd-ink);
  scrollbar-width: thin;
}
.sd-tab {
  flex: none;
  min-height: var(--sd-tap);
  margin-top: 6px;
  padding: 0 var(--sd-sp-4);
  border: var(--sd-bw) solid var(--sd-ink);
  border-bottom: 0;
  border-radius: var(--sd-r-md) var(--sd-r-md) 0 0;
  background: var(--sd-paper-2);
  color: var(--sd-ink-soft);
  font-size: var(--sd-fs-md);
  white-space: nowrap;
  cursor: pointer;
}
.sd-tab[aria-selected="true"] {
  min-height: calc(var(--sd-tap) + 6px);   /* stands taller, not just greener */
  margin-top: 0;
  background: var(--sd-lime);
  color: var(--sd-ink);
}
.sd-tab:focus-visible { outline-offset: -5px; }
@media (hover: hover) {
  .sd-tab[aria-selected="false"]:hover { background: var(--sd-lime-tint); color: var(--sd-ink); }
}

/* 3.4 Chips / pills -------------------------------------------------------- */
/* Read-only by default. For a tappable chip use <button class="sd-chip sd-chip--tap">. */
.sd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-sp-1);
  min-height: 28px;
  padding: 0 var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-pill);
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  font-size: var(--sd-fs-sm);
  font-weight: 700;
  line-height: var(--sd-lh-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sd-chip--money  { background: var(--sd-amber-tint); }
.sd-chip--energy { background: var(--sd-green-tint); }
.sd-chip--lime   { background: var(--sd-lime); }
.sd-chip--blue   { background: var(--sd-blue-tint); }
.sd-chip--red    { background: var(--sd-red-tint); }
.sd-chip--ink    { background: var(--sd-ink); color: var(--sd-lime); }
.sd-chip--locked {
  background: var(--sd-paper-2);
  color: var(--sd-ink-soft);
  border-style: dashed;
  border-color: var(--sd-ink-soft);
}
.sd-chip--tap {
  position: relative;
  min-height: 32px;
  cursor: pointer;
}
.sd-chip--tap::after { content: ""; position: absolute; inset: -8px -2px; }

.sd-chip-row { display: flex; flex-wrap: wrap; gap: var(--sd-sp-2); }

/* 3.5 Callouts ------------------------------------------------------------- */
/* The marker is a utility-marking flag, the kind techs stick next to every head. */
.sd-callout {
  --sd-callout-accent: var(--sd-blue);
  --sd-callout-word: var(--sd-blue-text);
  display: flex;
  align-items: flex-start;
  gap: var(--sd-sp-3);
  padding: var(--sd-sp-3) var(--sd-sp-4) var(--sd-sp-3) var(--sd-sp-3);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-blue-tint);
}
.sd-callout--good {
  --sd-callout-accent: var(--sd-lime);
  --sd-callout-word: var(--sd-green-text);
  background: var(--sd-lime-tint);
}
.sd-callout--bad {
  --sd-callout-accent: var(--sd-red);
  --sd-callout-word: var(--sd-red-text);
  background: var(--sd-red-tint);
}
.sd-callout__flag {
  position: relative;
  flex: none;
  width: 24px;
  height: 34px;
  margin-top: 2px;
}
.sd-callout__flag::before {         /* wire stake */
  content: "";
  position: absolute;
  left: 2px; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--sd-r-sm);
  background: var(--sd-ink);
}
.sd-callout__flag::after {          /* flag */
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 19px; height: 15px;
  border: var(--sd-bw) solid var(--sd-ink);
  border-left: 0;
  background: var(--sd-callout-accent);
}
.sd-callout__title {
  margin: 0;
  font-size: var(--sd-fs-md);
  font-weight: 800;
  line-height: 1.3;
}
.sd-callout__word { color: var(--sd-callout-word); }   /* "Tip", "Nice", "Watch out" */
.sd-callout__body { flex: 1; min-width: 0; align-self: center; }
.sd-callout__text { margin: var(--sd-sp-1) 0 0; }
.sd-callout__action { margin-top: var(--sd-sp-3); padding-bottom: 4px; }

/* 3.6 Table ---------------------------------------------------------------- */
.sd-table-wrap {
  overflow-x: auto;
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper);
}
.sd-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.sd-table caption {
  padding: var(--sd-sp-3) var(--sd-sp-4);
  border-bottom: var(--sd-bw) solid var(--sd-ink);
  background: var(--sd-ink);
  color: var(--sd-paper);
  font-size: var(--sd-fs-md);
  font-weight: 800;
  text-align: left;
}
.sd-table th,
.sd-table td {
  padding: 10px var(--sd-sp-4);
  border-bottom: 1px solid var(--sd-line);
  text-align: left;
  vertical-align: baseline;
}
.sd-table thead th {
  border-bottom: var(--sd-bw) solid var(--sd-ink);
  background: var(--sd-paper-2);
  font-size: var(--sd-fs-sm);
  font-weight: 800;
}
.sd-table tbody th { font-weight: 400; }
.sd-table tbody tr:last-child > * { border-bottom: 0; }
.sd-table .sd-num { text-align: right; white-space: nowrap; }
.sd-table tfoot th,
.sd-table tfoot td {
  border-top: var(--sd-bw-heavy) solid var(--sd-ink);
  border-bottom: 0;
  background: var(--sd-lime-tint);
  font-size: var(--sd-fs-xl);
  font-weight: 800;
}
/* Test-result cells: the mark and a spoken label carry pass/fail, color backs it up */
.sd-table__goal,
.sd-table__sub {
  display: block;
  font-size: var(--sd-fs-sm);
  font-weight: 400;
  color: var(--sd-ink-soft);
}
.sd-mark { font-weight: 800; }
.sd-mark--pass { color: var(--sd-green-text); }
.sd-mark--fail { color: var(--sd-red-text); }
.sd-vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3.7 Progress bar --------------------------------------------------------- */
/* Engine sets style="--sd-value: 61%" and aria-valuenow. */
.sd-meter__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sd-sp-3);
  margin-bottom: var(--sd-sp-1);
  font-size: var(--sd-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sd-progress {
  --sd-progress-fill: var(--sd-lime);
  position: relative;
  height: 20px;
  overflow: hidden;
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-pill);
  background: var(--sd-paper-2);
}
.sd-progress__fill {
  display: block;
  width: var(--sd-value, 0%);
  height: 100%;
  background: var(--sd-progress-fill);
  box-shadow: 2px 0 0 var(--sd-ink);          /* crisp leading edge */
  transition: width 300ms ease-out;
}
.sd-progress::after {                           /* graduated marks every 10%, like a catch can */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(10% - 1px),
    var(--sd-ink-a20) calc(10% - 1px), var(--sd-ink-a20) 10%);
  pointer-events: none;
}
.sd-progress--mid  { --sd-progress-fill: var(--sd-amber); }
.sd-progress--low  { --sd-progress-fill: var(--sd-red); }
.sd-progress--blue { --sd-progress-fill: var(--sd-blue); }
.sd-progress--sm   { height: 12px; }

/* Running state (a test in progress): water moving through the fill */
.sd-progress.is-running .sd-progress__fill {
  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 sd-flow { to { background-position: 44px 0; } }

@media (prefers-reduced-motion: reduce) {
  .sd-btn,
  .sd-progress__fill { transition: none; }
  .sd-btn:hover,
  .sd-btn:active { transform: none; }
  .sd-progress.is-running .sd-progress__fill { animation: none; }
}