/* pg-outbox: a blueprint, not a dashboard.
   ---------------------------------------------------------------------------
   The subject is a line that must not break. Two writes that have to hold
   together, and what the world looks like when they come apart. So the page
   borrows from technical drawing: cool paper, one weight of ink, and a
   vocabulary of exactly three states.

     accent  steel. Committed, consistent, holding.
     bad     rust. Come apart. Not an alarm colour, because the whole point is
             that this failure is quiet: nothing goes red in production, an
             order is simply never picked.
     warn    brass. Survivable but needs knowing about: a duplicate, a retry.

   Low chroma throughout, same rule as every page on this account. A saturated
   accent on a dark background is where generated design lands by default, and
   it makes a page about database transactions look like a crypto dashboard.

   base.css owns the chrome. This file owns the colours and the scenes. */

:root {
  --ground:    #16191C;
  --surface:   #1E2226;
  --surface-2: #262B30;
  --line:      #343A40;
  --text:      #DDE1E4;
  --dim:       #858D94;

  --accent: #6E97A6;   /* committed, consistent */
  --warn:   #A89253;   /* duplicate, retry     */
  --bad:    #AB6350;   /* came apart           */

  --glow: rgba(221, 225, 228, 0.03);
}

:root[data-theme="light"] {
  --ground:    #E4E6E8;
  --surface:   #F1F2F3;
  --surface-2: #D9DCDE;
  --line:      #C2C6C9;
  --text:      #1D2124;
  --dim:       #61676B;

  --accent: #365E6C;
  --warn:   #6C5722;
  --bad:    #8C4131;

  --glow: rgba(29, 33, 36, 0.03);
}

/* ------------------------------------------------------------------ field */

/* What the glass panels have to blur.

   A blur over a flat colour gives back the flat colour, so glass on a page
   with a plain background is an expensive way to draw nothing. The panels need
   structure behind them, and on a page borrowing from technical drawing the
   honest structure is the drawing grid: a fine square rule, with two cool
   pools where a drafting lamp would fall.

   The grid is 28px, small enough that a 20px blur dissolves it into an even
   tone under a panel and large enough to read as squared paper in the margins.
   That contrast between the two is the whole effect: the panel looks like
   frosted glass laid on a drawing, because it is.

   `background-attachment: fixed` keeps the drawing still while the page moves
   over it, which is what makes the panels read as sitting on the sheet rather
   than as carrying a texture of their own.

   Painted on `body` rather than a fixed `::before` at `z-index: -1`. That
   pattern needs the whole ancestor chain to stay free of stacking contexts,
   and the first `opacity` or `transform` added anywhere above it swallows the
   layer silently. A background has no such dependency. */
body {
  background-image:
    radial-gradient(ellipse 55% 42% at 88% -5%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 45% at 8% 22%, color-mix(in srgb, var(--warn) 8%, transparent), transparent 72%),
    repeating-linear-gradient(
      to right,
      transparent 0 27px,
      color-mix(in srgb, var(--line) 24%, transparent) 27px 28px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 27px,
      color-mix(in srgb, var(--line) 24%, transparent) 27px 28px
    );
  background-attachment: fixed;
}

:root[data-theme="light"] body {
  /* Blueprint in daylight is a print rather than a screen, so the grid carries
     more and the pools drop back to a tint. */
  background-image:
    radial-gradient(ellipse 55% 42% at 88% -5%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 45% at 8% 22%, color-mix(in srgb, var(--warn) 7%, transparent), transparent 72%),
    repeating-linear-gradient(
      to right,
      transparent 0 27px,
      color-mix(in srgb, var(--line) 34%, transparent) 27px 28px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 27px,
      color-mix(in srgb, var(--line) 34%, transparent) 27px 28px
    );
}

/* ------------------------------------------------------------------- hero */

/* Two rules and a break in one of them: the whole project as one mark. */
.seam {
  position: relative;
  height: 22px;
  margin-top: 3.5rem;
}
.seam i {
  position: absolute;
  height: 2px;
  background: var(--line);
  top: 6px;
}
.seam i:nth-child(1) { left: 0; right: 52%; }
.seam i:nth-child(2) { left: 56%; right: 0; top: 14px; }
.seam::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 4px;
  width: 4px;
  height: 6px;
  background: var(--bad);
}

/* ------------------------------------------------------------------ scene */

/* The scene is the pane. Everything inside it draws on the glass rather than
   blurring separately, so the drawing grid behind bends once and stays even
   under the steps. */
.scene {
  margin-top: 1.6rem;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 22px 50px -34px var(--shadow);
}

.scene-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.scene-bar .grow { flex: 1 1 auto; }

.tally {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.tally b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tally.is-good b { color: var(--accent); }
.tally.is-bad b { color: var(--bad); }

/* Approach picker. Tabs rather than a dropdown, because the three approaches
   are meant to be compared, and a dropdown hides two of them. */
.tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tab {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--ground);
  background: var(--accent);
  border-color: var(--accent);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.switch .track {
  width: 2.3rem;
  height: 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ground);
  position: relative;
  transition: border-color 0.2s;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--dim);
  transition: transform 0.2s, background-color 0.2s;
}
.switch[aria-pressed="true"] { color: var(--accent); }
.switch[aria-pressed="true"] .track { border-color: var(--accent); }
.switch[aria-pressed="true"] .track::after {
  background: var(--accent);
  transform: translateX(1.15rem);
}

/* ------------------------------------------------------------- scene one */

.timeline {
  display: grid;
  grid-template-columns: 1fr 15rem;
  gap: 0;
}
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; }
  .state { border-left: 0 !important; border-top: 1px solid var(--line); }
}

.steps {
  margin: 0;
  padding: 0.9rem;
  list-style: none;
  display: grid;
  gap: 0.15rem;
  /* Fixed so the panel does not grow step by step and shove the page down
     while somebody is reading it. Same rule as the recon terminal. */
  min-height: 15.5rem;
  align-content: start;
}
.steps li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.32rem 0.35rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.79rem;
  color: var(--dim);
  opacity: 0.3;
  transition: opacity 0.3s, color 0.3s, background-color 0.3s;
}
.steps li em {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--dim) 70%, transparent);
}
.steps li.on { opacity: 1; color: var(--text); }
.steps li.on.now { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.steps li.on.crash { color: var(--bad); }
.steps li.on.crash em { color: var(--bad); }

/* Inside the scene, so no blur of its own: a backdrop-filter within a
   backdrop-filter samples the parent pane and comes out muddy. A translucent
   fill on the pane it already sits on does the same job for nothing. */
.state {
  border-left: 1px solid var(--line);
  padding: 0.9rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  background: color-mix(in srgb, var(--ground) 55%, transparent);
}

.cell {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.cell strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.2rem;
}
.cell span {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--dim);
  transition: color 0.3s;
}
.cell[data-value="good"] span { color: var(--accent); }
.cell[data-value="bad"] span { color: var(--bad); }

.verdict-bar {
  margin-top: 0.2rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  /* Bold, because this line is the answer. At regular weight, uppercase mono
     at 0.7rem reads as a caption whatever colour it is. */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dim);
  opacity: 0;
  transition: opacity 0.35s, color 0.35s, border-color 0.35s;
}
.verdict-bar.shown { opacity: 1; }
.verdict-bar[data-verdict="ok"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.verdict-bar[data-verdict="broken"] {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 50%, transparent);
}

/* ------------------------------------------------------------- scene two */

/* Sixty events as sixty marks. A number would state the bug; sixty marks with
   ten of them doubled show it, and the doubling is the whole finding. */
.grid60 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.15rem, 1fr));
  gap: 4px;
  padding: 0.9rem;
}
.pip {
  aspect-ratio: 1;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: transparent;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.pip.sent {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: var(--accent);
}
/* A doubled event: the same mark, twice over, which is exactly how it looks
   downstream. Two shipments for one order. */
.pip.twice {
  background: color-mix(in srgb, var(--bad) 55%, transparent);
  border-color: var(--bad);
  box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--bad) 45%, transparent);
}

.relay-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 0.9rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--dim);
}
.relay-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.relay-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid var(--line);
}
.relay-legend i.k-sent { background: color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
.relay-legend i.k-twice { background: color-mix(in srgb, var(--bad) 55%, transparent); border-color: var(--bad); }

/* ------------------------------------------------------------------- code */

.sql {
  margin: 1.2rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--dim);
  white-space: pre;
}
.sql b { color: var(--accent); font-weight: 400; }
.sql u { color: var(--bad); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  /* With motion off nothing is revealed over time, so every step is already in
     its end state and the argument still lands. */
  .steps li { opacity: 1; }
  .verdict-bar { opacity: 1; }
}