/*
  "Standby" — a daylight control panel.

  The whole interface is monospaced. That is the one deliberate risk here: this is an
  instrument for making a machine's output look human, so its own surface is unapologetically
  machine, and a fixed character grid makes message length legible as the physical quantity
  that actually drives the typing delay.

  One accent colour, signal orange, and it is spent only on things that have not happened yet
  — the standby lamp, the countdown, a warning. Everything already sent goes grey.
*/

:root {
  --ground: #d9ddd4;
  --panel: #e8ebe3;
  --ink: #1d211c;
  --dim: #5e6459;
  --rule: #b7beaf;
  --signal: #c0521a;
  --done: #79826f;
  --fault: #a3231c;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --micro: 0.6875rem;
  --body: 0.875rem;

  --gap: 1.5rem;
  --edge: max(1.5rem, env(safe-area-inset-left));
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #171a15;
    --panel: #1f241c;
    --ink: #e4e8dd;
    --dim: #8c947f;
    --rule: #333a2e;
    --signal: #e2762c;
    --done: #6d7663;
    --fault: #d9564e;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.25em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ---- micro labels -------------------------------------------------------- */

.label {
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  display: block;
}

.note {
  font-size: var(--micro);
  color: var(--dim);
  letter-spacing: 0.02em;
}

/* ---- shell --------------------------------------------------------------- */

.shell {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--edge) 5rem;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem var(--gap);
  align-items: baseline;
  justify-content: space-between;
  padding: 1.75rem 0 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.masthead__name {
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin: 0;
  font-weight: 500;
}

.masthead__right {
  display: flex;
  align-items: center;
  gap: var(--gap);
  font-size: var(--micro);
  letter-spacing: 0.06em;
}

/* ---- status lamp --------------------------------------------------------- */

.lamp {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dim);
  flex: none;
  display: inline-block;
}

.lamp--standby {
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent);
}

.lamp--sent {
  background: var(--done);
}

.lamp--fault {
  background: var(--fault);
}

.lamp--off {
  background: transparent;
  border: 1px solid var(--rule);
}

.session {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dim);
}

/* ---- banner -------------------------------------------------------------- */

.banner {
  margin-top: var(--gap);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 8%, var(--panel));
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.banner__body {
  margin: 0;
}

.banner__body strong {
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- next up ------------------------------------------------------------- */

.next {
  margin-top: 2.5rem;
}

.next__card {
  margin-top: 0.6rem;
  padding: 1.5rem;
  background: var(--panel);
  border-left: 2px solid var(--signal);
}

.next__count {
  font-size: clamp(2.25rem, 8.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 500;
}

.next__meta {
  margin: 0.7rem 0 0;
  color: var(--dim);
}

.next__text {
  margin: 1.1rem 0 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.next__actions {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ---- queue --------------------------------------------------------------- */

.queue {
  margin-top: 3rem;
}

.queue__list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.queue__row {
  display: grid;
  grid-template-columns: 0.5rem 6.5rem 1fr auto auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.queue__row .lamp {
  align-self: center;
}

.queue__state {
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
}

.queue__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue__when {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--micro);
}

.queue__row--fault .queue__state {
  color: var(--fault);
}

/* Edit and cancel on a waiting row. Quiet — the row is a log entry first; these are
   there when you look for them rather than competing with the state word. */
.queue__actions {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
}

.queue__actions a,
.queue__actions button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--dim);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.25em;
}

.queue__actions a:hover,
.queue__actions button:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.empty {
  margin-top: 0.6rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
  color: var(--dim);
}

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

.button {
  font: inherit;
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.button:hover {
  background: var(--ink);
  color: var(--ground);
}

.button--primary {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--panel);
}

.button--primary:hover {
  background: transparent;
  color: var(--signal);
}

.button--quiet {
  border-color: var(--rule);
  color: var(--dim);
}

.button--quiet:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.field {
  display: block;
  margin-top: 1.6rem;
}

.field__control,
.field textarea,
.field input {
  font: inherit;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.7rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 0;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--signal);
  outline: none;
}

.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.row > * {
  flex: 1 1 12rem;
}

/* ---- the typing meter: the one thing this page is remembered by ---------- */

.meter {
  font-size: var(--micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- warnings and errors ------------------------------------------------- */

.warnings {
  margin-top: 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--signal);
}

.warnings ul {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
}

.warnings li + li {
  margin-top: 0.4rem;
}

.confirm {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.confirm input {
  margin: 0.15rem 0 0;
  accent-color: var(--signal);
}

/* Validation spans render even with nothing in them; an empty one must not paint a rule. */
.error:empty {
  display: none;
}

.error {
  margin-top: 1.25rem;
  color: var(--fault);
  border-left: 2px solid var(--fault);
  padding-left: 0.8rem;
}

/* ---- sign in ------------------------------------------------------------- */

.gate {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--edge);
}

.gate__inner {
  width: min(26rem, 100%);
}

.gate__clock {
  font-size: clamp(3rem, 13vw, 6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 500;
}

.gate__zone {
  margin: 0.5rem 0 0;
}

.gate__form {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
}

.gate__submit {
  margin-top: 1.5rem;
  width: 100%;
}

/* ---- compose ------------------------------------------------------------- */

.compose {
  margin-top: 2.5rem;
  max-width: 44rem;
}

.compose__actions {
  margin-top: 2.25rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 34rem) {
  .queue__row {
    grid-template-columns: 0.5rem 1fr;
    row-gap: 0.35rem;
  }

  .queue__when {
    grid-column: 2;
  }

  .queue__actions {
    grid-column: 2;
  }

  .queue__text {
    grid-column: 2;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}