/* ---------------------------------------------------------------------------
   MeshDTN theme for the flasher.

   ⚠ LOADED LAST, AND IT OVERRIDES RATHER THAN REPLACES.
   `beer.css` is the upstream component library and `flasher.css` is upstream's
   own styling. Neither is edited: this file restates the surfaces, text and
   accents in MeshDTN's palette so the two can be updated independently and a
   future upstream import does not have to be un-merged.

   The palette is the site's own, copied from `assets/css/site.css` rather than
   guessed, so the flasher and the pages around it cannot drift apart.

   No external requests: system fonts only, no CDN, no trackers — the same rule
   `site.css` states at its head.
   --------------------------------------------------------------------------- */

:root,
body {
  --bg:        #06080e;
  --bg-deep:   #07090d;
  --bg-panel:  #0b1119;
  --bg-raise:  #101825;

  --ink:       #e9eff7;
  --ink-soft:  #b9c6d6;
  --muted:     #8a9ab0;
  --faint:     #64748b;

  --cyan:      #22d3ee;
  --teal:      #2dd4bf;
  --blue:      #3b82f6;
  --amber:     #fbbf24;
  --rose:      #fb7185;
  --green:     #34d399;

  --line:      rgba(150, 185, 225, 0.13);
  --line-soft: rgba(150, 185, 225, 0.07);
  --glow:      rgba(34, 211, 238, 0.18);
  --grad: linear-gradient(100deg, var(--teal) 0%, var(--cyan) 42%, var(--blue) 100%);

  --r:    14px;
  --r-lg: 20px;
  --r-sm: 8px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* beer.css reads these; naming them here is what re-skins its components
     without touching the library itself. */
  --primary: var(--cyan);
  --on-primary: #06080e;
  --surface: var(--bg-panel);
  --surface-variant: var(--bg-raise);
  --on-surface: var(--ink);
  --outline: var(--line);
  --background: var(--bg);

  /* The shared header's `.wrap` needs these; site.css defines them too. */
  --wrap:   1200px;
  --narrow:  820px;
}

/* > ### **⚠ `body` IS A FLEX CONTAINER, SO A FULL-WIDTH HEADER NEEDS THIS.**
   >
   > **[V] 2026-09-07, measured:** beer.css makes `body` `display:flex`, so a
   > site header placed before `#app` is laid out as a flex ITEM BESIDE it --
   > `301 x 914` hard against the left edge, with the flasher squeezed into the
   > rest. Forcing the column direction puts the header on top, full width,
   > without taking it out of flow. */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  flex-direction: column;
}

body > #app {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* The shared header is sticky on the site; inside beer.css's flex body it must
   also refuse to be squeezed. */
body > header.nav { flex: 0 0 auto; width: 100%; }

/* ---------- surfaces ---------- */

article, .card, dialog, .surface, nav.drawer, .page {
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

article:hover, .card:hover { border-color: var(--glow); }

/* ---------- type ---------- */

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -0.02em; }
h5, h6 { font-weight: 600; }
p, span, div, label, li { color: var(--ink-soft); }
small, .small, .helper, .tooltip { color: var(--muted); }
a { color: var(--cyan); }
a:hover { color: var(--teal); }

/* ---------- controls ---------- */

button, .button {
  border-radius: var(--r-sm);
  font-family: var(--sans);
  letter-spacing: -0.005em;
}

button.fill, .button.fill, button:not(.border):not(.transparent) {
  background: var(--grad);
  color: #06080e;
  border: 0;
  font-weight: 600;
}

button.border, .button.border {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

button.border:hover, .button.border:hover { border-color: var(--cyan); }

button:disabled, .button:disabled { opacity: 0.4; }

select, input, textarea {
  background: var(--bg-raise);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* ---------- progress and state ---------- */

progress, .progress { accent-color: var(--cyan); }
progress::-webkit-progress-value { background: var(--grad); }
progress::-moz-progress-bar { background: var(--cyan); }

.error, .danger { color: var(--rose); }
.success, .ok { color: var(--green); }
.warn, .warning { color: var(--amber); }

/* ---------- the brand bar the site wears ---------- */



/* A device card's artwork sits on a light-on-dark surface upstream assumed
   was white. Without this the SVGs vanish into the panel. */
img.device { background: var(--bg-raise); border-radius: var(--r-sm); padding: 6px; }