/* The development bar. Loaded only by shared/_dev_bar, which renders only in
   development — nothing here reaches a guest, and nothing here obeys DESIGN.md.

   It looks like a debug tool ON PURPOSE: system font, square corners, a magenta
   rule. A control styled like the product is a control that survives into a
   screenshot without anyone noticing it does not belong. */

.devbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  background: #17171b;
  border-top: 2px solid #ff2d95;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}

/* ONE LINE, ALWAYS. The status line gained a "Matrix" link and started wrapping
   to two rows at 375px, which pushes the bar up over the screen underneath it —
   the bar's own rule is that it must not eat pixels a 375x667 review needs. The
   guest name is what gives, because it is the one part you can also read on the
   screen itself. */
.devbar__now {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.devbar__who {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.devbar__tag {
  background: #ff2d95;
  color: #17171b;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 1px 5px;
}

.devbar__sep { color: #6b6b76; }

/* button_to renders a <form>, so every control needs the form flattened as well
   as the button styled — otherwise each one takes a block's worth of height. */
.devbar form { display: inline; margin: 0; }

.devbar__toggle,
.devbar__btn {
  font: inherit;
  color: #fff;
  background: #2c2c34;
  border: 1px solid #45454f;
  border-radius: 0;
  padding: 3px 7px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.devbar__toggle { padding: 3px 9px; }

/* A link, not a button_to, so it carries no form — `margin-left: auto` moves to
   it because it is now the first thing on the right of the status line. */
.devbar__link { margin-left: auto; text-decoration: none; display: inline-block; }

.devbar__btn--on { background: #ff2d95; border-color: #ff2d95; color: #17171b; font-weight: 700; }
.devbar__btn--warn { border-color: #ff6b3d; color: #ff9d7a; }

.devbar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.devbar__label {
  width: 52px;
  flex: none;
  color: #8f8f9c;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* THE WALKTHROUGH MATRIX (/dev). Same debug aesthetic as the bar above and for
   the same reason: it must never be mistaken for the product in a screenshot.

   Sits on its own dark ground rather than the app's green, because it renders
   inside the normal layout and half of DESIGN.md's type would otherwise leak in. */

.devmx {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  background: #17171b;
  border: 2px solid #ff2d95;
  padding: 10px;
  margin: 0 0 96px;
}

.devmx__h {
  font: 700 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ff2d95;
  margin: 0 0 6px;
}

.devmx__sub { color: #8f8f9c; margin: 0 0 10px; max-width: 46ch; }
.devmx__sub:last-child { margin: 10px 0 0; }

/* ALL SIX COLUMNS MUST FIT AT 375px. The first build let the grid scroll
   horizontally and two of the five user columns were off-screen — a matrix you
   have to scroll to see is a list, and the whole point of the shape is reading a
   row against a column. So the headers WRAP instead, at 11px, and the row header
   keeps its narrow column. The x-scroll stays as a floor for a 320px phone. */
.devmx__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.devmx__grid { border-collapse: collapse; table-layout: fixed; width: 100%; }

.devmx__grid th,
.devmx__grid td {
  border: 1px solid #45454f;
  padding: 3px;
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}

/* 62px, not 74: the content box inside .devmx is 307px on an SE, so the row
   header is exactly what the five cells cannot have. */
.devmx__corner { border-color: transparent; width: 62px; }
.devmx__col { width: auto; }
.devmx__axis { color: #6b6b76; font-size: 10px; }

.devmx__col, .devmx__row { background: #2c2c34; }
.devmx__col--on, .devmx__row--on { background: #3a2233; border-color: #ff2d95; }

/* Every cell says what it is on the same line as the thing it labels, which is
   the app's own rule (CLAUDE.md) and holds here for the same reason: "Half"
   alone would need a key, and a key is one more thing to hold in your head. */
/* 10px and 9px are what let the longest label in each register — "Watching"
   and "half a ballot" — sit inside a 50px column without breaking mid-word. */
.devmx__name { display: block; color: #fff; font-size: 10px; overflow-wrap: break-word; }
.devmx__what { display: block; color: #8f8f9c; font-size: 9px; line-height: 1.25; overflow-wrap: break-word; }

.devmx__cell { text-align: center; }

/* 44px is the app's floor for a guest tap target and there is no reason to make
   a walkthrough harder to drive than the thing it walks through. */
.devmx__go {
  font: inherit;
  font-size: 11px;
  color: #fff;
  background: #2c2c34;
  border: 1px solid #45454f;
  border-radius: 0;
  width: 100%;
  min-height: 34px;
  padding: 6px 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.devmx__go:hover { background: #ff2d95; border-color: #ff2d95; color: #17171b; font-weight: 700; }

.devmx__here {
  display: block;
  text-align: center;
  font-size: 11px;
  padding: 6px 2px;
  background: #ff2d95;
  color: #17171b;
  font-weight: 700;
}

.devmx__dead { color: #45454f; }

.devmx__who { color: #ff2d95; font-weight: 700; }