/* ==========================================================================
   The flashing section

   Its own file, and its own visual weight, because installing the firmware is
   the one step where a reader is holding hardware, following along, and can get
   stuck. Everything here is in service of being readable at arm's length with a
   board in one hand: larger type than the body, numerals you can find your place
   by, and steps that stay legible on a phone propped against a keyboard.

   Reads semantic tokens only. No hex value belongs here.
   ========================================================================== */

@layer components {

/* The whole section sits on a raised panel with an accent edge, so it reads as
   the destination on this page rather than as one more heading. */
.flash-panel {
  padding: clamp(var(--step-5), 4vw, var(--step-8));
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-border-strong);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
}

.flash-sub {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--step-3);
}

/* --------------------------------------------------------------------------
   The steps

   An ordered list rather than a set of divs, so it is still a numbered sequence
   to a screen reader and still readable with styles off. The counter is drawn
   rather than using ::marker, because a marker cannot be given a box.
   -------------------------------------------------------------------------- */
.flash-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: flash-step;
}

/* The numeral is positioned rather than laid out as a grid column, and this is
   load-bearing. As a grid the step's own inline children each became a grid
   item, so every key span was thrown onto a row of its own and the note under
   step four collapsed into a column two words wide. A step is one paragraph of
   running text with a marker beside it, so it is laid out as one. */
.flash-steps > li {
  counter-increment: flash-step;
  position: relative;
  max-width: none;
  padding-block: var(--step-4);
  padding-left: calc(2.75rem + var(--step-4));
  border-top: var(--hairline) solid var(--color-border);
  font-size: var(--size-lg);
  line-height: 1.4;
  color: var(--color-text);
}

.flash-steps > li:first-child { border-top: 0; padding-top: 0; }

.flash-steps > li::before {
  content: counter(flash-step);
  position: absolute;
  left: 0;
  top: var(--step-4);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--size-base);
  font-weight: 600;
  color: var(--color-page);
  background: var(--color-accent);
  border-radius: 50%;
}

.flash-steps > li:first-child::before { top: 0; }

/* A note under a step, for the detail that would otherwise bloat the step. */
.flash-note {
  display: block;
  margin-top: var(--step-2);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

/* The button labels on the board are physical objects the reader is looking
   for, so they are set as keys rather than as bold words. */
.flash-key {
  display: inline-block;
  padding: 0.1em 0.45em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-high);
  border: var(--hairline) solid var(--color-border-strong);
  border-radius: var(--radius-tight);
}

/* --------------------------------------------------------------------------
   Before you start
   -------------------------------------------------------------------------- */
/* Three boxes, and they stay three across from a tablet up. At a 15rem minimum
   a 768px screen fits only two and the third drops alone onto its own row,
   which reads as an afterthought rather than as the third of three. */
.flash-needs {
  display: grid;
  gap: var(--step-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-bottom: var(--step-7);
}

.flash-need {
  padding: var(--step-4);
  background: var(--color-surface-alt);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.flash-need strong { display: block; margin-bottom: var(--step-1); color: var(--color-text); }


/* --------------------------------------------------------------------------
   The installer

   Sits at the foot of the panel, below the six steps, because it is the thing
   the steps are for. Its own rule above it separates the reading from the
   doing.
   -------------------------------------------------------------------------- */
.flash-install {
  margin-top: var(--step-7);
  padding-top: var(--step-6);
  border-top: var(--hairline) solid var(--color-border);
}

/* The install button is a custom element with a shadow root. Its own button is
   replaced by the page's, through the activate slot, so the only thing styled
   here is how the element sits in the flow. */
.flash-install esp-web-install-button { display: inline-block; }

/* The disclaimer gate sits above the button and holds it disabled until it is
   ticked. The dimmed state has to read as "not yet" rather than as broken, so
   it keeps the button's own shape and only loses its contrast. */
.flash-install .consent {
  max-width: var(--measure);
  margin-bottom: var(--step-5);
}

.flash-install .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.flash-install-note {
  margin-top: var(--step-4);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.flash-install-note:empty { display: none; }

/* An outcome, stated once and plainly. The left rule carries the signal, which
   is the same licence the safety callout takes: the meaning is identical. */
.flash-banner {
  margin-top: var(--step-5);
  padding: var(--step-4) var(--step-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-inline-width: 4px;
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.flash-banner-ok    { border-color: var(--glucose-ok); }
.flash-banner-error { border-color: var(--glucose-low); }

.flash-banner strong { display: block; margin-bottom: var(--step-2); color: var(--color-text); }

.flash-banner .btn { margin-top: var(--step-4); }

/* The manual path, for a browser with no Web Serial and for anyone who would
   rather drive esptool themselves. */
.flash-manual { margin-top: var(--step-5); }

.flash-manual code {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
}

.flash-manual pre {
  margin-top: var(--step-4);
  padding: var(--step-4);
  overflow-x: auto;
  background: var(--color-surface-alt);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   The console

   Structure only: the grid, the sizes and the states. Everything that makes it
   look like a machined thing lives in the surface sheet loaded on this page,
   so this file stays readable with the skin removed.
   -------------------------------------------------------------------------- */
.flash-console { position: relative; }

.flash-console-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--step-3);
}

.flash-console-head .flash-sub { margin-bottom: var(--step-3); }

/* The lamp and its word. State is never the colour alone: the label beside it
   says the same thing in text. */
.flash-lamp {
  display: inline-flex;
  align-items: center;
  gap: var(--step-2);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.flash-lamp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

/* The status window. One line of phase text, sunk into the panel. */
.flash-glass {
  margin-bottom: var(--step-5);
  padding: var(--step-4) var(--step-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  border: var(--hairline) solid var(--color-border-strong);
}

.flash-glass-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.flash-glass .flash-install-note { margin-top: var(--step-2); }

.flash-console-body {
  display: grid;
  gap: var(--step-6);
  align-items: start;
}

@media (min-width: 48rem) {
  .flash-console-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* The pre-flight list and the post-flash list are plain lists on purpose. */
.flash-list {
  margin: var(--step-3) 0 0;
  padding-left: 1.1em;
  font-size: var(--size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.flash-list li + li { margin-top: var(--step-2); }

.flash-preflight { padding-top: var(--step-1); }

/* The gate, its word, and the reason the key is locked. */
.flash-ack-state {
  margin: var(--step-2) 0 var(--step-5);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.flash-why {
  margin-top: var(--step-3);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.flash-why[hidden] { display: none; }

/* One big key. It is the only thing on the page a reader presses while holding
   hardware, so it is finger-sized at every width and full width when the
   console has folded to one column. */
.flash-key-install {
  min-height: 3.25rem;
  font-size: var(--size-base);
}

.flash-install esp-web-install-button { display: block; }

@media (max-width: 40rem) {
  .flash-key-install { width: 100%; }
}

/* The corner fixings. Decorative, and hidden from assistive technology in the
   markup; sized here so the skin only has to fill them. */
.flash-screw {
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.flash-screw-tl { top: var(--step-3); left: var(--step-3); }
.flash-screw-tr { top: var(--step-3); right: var(--step-3); }
.flash-screw-bl { bottom: var(--step-3); left: var(--step-3); }
.flash-screw-br { bottom: var(--step-3); right: var(--step-3); }

/* --------------------------------------------------------------------------
   The parts and specification slabs

   A flat surface under a table, so the reading sits on something plainer than
   the panel around it. The table itself is not styled here.
   -------------------------------------------------------------------------- */
.build-slab {
  padding: var(--step-4);
  background: var(--color-surface-alt);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-card);
}

} /* @layer components */