/* The console.
 *
 * The portal watches a robot type invoices on somebody else's screen, so it is
 * dressed as a bench instrument rather than a web app: lamp colours with fixed
 * meanings, a chart-recorder tape of recent runs, monospace for anything the
 * machine produced (run ids, invoice numbers, totals, the log) and a wide
 * grotesque for signage. Everything here is namespaced `cn-` so it sits beside
 * Unfold's Tailwind rather than fighting it.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens ------------------------------------------------------------- */
/* `html:root` rather than `:root` on purpose: Unfold's stylesheet is loaded
   after this one and sets its own custom properties at `:root`, so a plain
   `:root` here would be the loser of every tie. */

html:root {
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The lamps. One meaning each, everywhere, for ever: an operator learns
     these five colours once and then reads the whole portal by them. */
  --lamp-live: #0d8f8a; /* a run in flight, a live view */
  --lamp-done: #3c7a51; /* closed, confirmed, ready */
  --lamp-open: #b3730f; /* left open, waiting, needs a person */
  --lamp-refused: #ab3a2f; /* the ERP said no, or the run died */
  --lamp-idle: #7c8896; /* nothing is happening, and that is fine */

  --cn-surface: #ffffff;
  --cn-surface-sunk: #eff2f5;
  --cn-ink: #16202b;
  --cn-ink-soft: #5b6875;
  --cn-line: #d8dee5;
  --cn-line-strong: #b9c3cd;
  --cn-tape-ground: #e6ebf0;
  --cn-shadow: 0 1px 2px rgb(22 32 43 / 0.06), 0 8px 24px -12px rgb(22 32 43 / 0.18);
}

html.dark {
  --lamp-live: #2fbdb3;
  --lamp-done: #63b078;
  --lamp-open: #e0a53d;
  --lamp-refused: #e07567;
  --lamp-idle: #8a97a5;

  --cn-surface: #17212c;
  --cn-surface-sunk: #101821;
  --cn-ink: #e6edf4;
  --cn-ink-soft: #93a1b0;
  --cn-line: #27333f;
  --cn-line-strong: #3a4855;
  --cn-tape-ground: #0d141c;
  --cn-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 30px -18px rgb(0 0 0 / 0.8);
}

/* Page titles are signage: wide, tight, and quiet. Unfold sets size and
   weight with utility classes, so only the family and tracking are taken. */
#content h1,
#content h2,
.cn h1,
.cn h2,
.cn h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  letter-spacing: -0.015em;
}

/* --- the frame ---------------------------------------------------------- */

.cn {
  color: var(--cn-ink);
  max-width: 78rem;
}

.cn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cn-line);
}

.cn-head h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0.35rem 0 0;
}

.cn-head p {
  color: var(--cn-ink-soft);
  margin: 0.4rem 0 0;
  max-width: 46rem;
}

/* The eyebrow says what kind of thing this page is, in the machine's own
   voice — hence the mono and the rule that runs into it. */
.cn-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cn-ink-soft);
}

.cn-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--cn-line-strong);
}

.cn-eyebrow--bare::before {
  display: none;
}

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

.cn-card {
  position: relative;
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-radius: 10px;
  padding: 1.15rem 1.35rem 1.3rem;
  box-shadow: var(--cn-shadow);
}

.cn-card > h2,
.cn-card > .cn-eyebrow {
  margin: 0 0 0.85rem;
}

.cn-card > h2 {
  font-size: 0.95rem;
  font-weight: 600;
}

/* A card that is about one lamp wears it as a spine down its left edge. */
.cn-card[data-lamp] {
  border-left: 3px solid var(--lamp);
}

.cn-card[data-lamp="live"] { --lamp: var(--lamp-live); }
.cn-card[data-lamp="done"] { --lamp: var(--lamp-done); }
.cn-card[data-lamp="open"] { --lamp: var(--lamp-open); }
.cn-card[data-lamp="refused"] { --lamp: var(--lamp-refused); }
.cn-card[data-lamp="idle"] { --lamp: var(--lamp-idle); }

.cn-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: 1.25rem;
}

.cn-split {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  margin-bottom: 1.25rem;
}

/* --- readouts ----------------------------------------------------------- */

.cn-stat .cn-figure {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: block;
  margin: 0.15rem 0 0.4rem;
}

.cn-stat .cn-figure small {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cn-ink-soft);
  margin-left: 0.3rem;
}

.cn-stat .cn-under {
  font-size: 0.82rem;
  color: var(--cn-ink-soft);
  margin: 0;
}

.cn-stat .cn-under strong {
  color: var(--cn-ink);
  font-weight: 600;
}

/* Label/value pairs: what a run *is*. Values that came off the machine are
   set in mono so a run id never gets mistaken for prose. */
.cn-rows {
  display: grid;
  grid-template-columns: minmax(6.5rem, 10rem) 1fr;
  gap: 0.45rem 1.25rem;
  margin: 0;
}

.cn-rows dt {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cn-ink-soft);
  padding-top: 0.1rem;
}

.cn-rows dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cn-mono,
.cn-rows dd.cn-mono {
  font-family: var(--font-data);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

/* --- lamps and chips ---------------------------------------------------- */

.cn-lamp {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--lamp, var(--lamp-idle));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lamp, var(--lamp-idle)) 18%, transparent);
  flex: none;
}

.cn-lamp[data-lamp="live"] { --lamp: var(--lamp-live); }
.cn-lamp[data-lamp="done"] { --lamp: var(--lamp-done); }
.cn-lamp[data-lamp="open"] { --lamp: var(--lamp-open); }
.cn-lamp[data-lamp="refused"] { --lamp: var(--lamp-refused); }
.cn-lamp[data-lamp="idle"] { --lamp: var(--lamp-idle); }

.cn-lamp.is-pulsing {
  animation: cn-pulse 1.8s ease-out infinite;
}

@keyframes cn-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lamp) 55%, transparent); }
  70% { box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--lamp) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lamp) 0%, transparent); }
}

.cn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lamp, var(--lamp-idle)) 35%, transparent);
  background: color-mix(in srgb, var(--lamp, var(--lamp-idle)) 10%, transparent);
  color: color-mix(in srgb, var(--lamp, var(--lamp-idle)) 78%, var(--cn-ink));
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cn-chip[data-lamp="live"] { --lamp: var(--lamp-live); }
.cn-chip[data-lamp="done"] { --lamp: var(--lamp-done); }
.cn-chip[data-lamp="open"] { --lamp: var(--lamp-open); }
.cn-chip[data-lamp="refused"] { --lamp: var(--lamp-refused); }
.cn-chip[data-lamp="idle"] { --lamp: var(--lamp-idle); }

.cn-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* --- the tape ----------------------------------------------------------- */
/* The signature. One bar per run, oldest on the left, height for how much of
   the invoice went in, colour for how it ended: the shape of the day's work
   in one glance, and the thing this portal is remembered by. */

.cn-tape {
  --tape-height: 4.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
  height: var(--tape-height);
  padding: 0 0.15rem;
  background:
    linear-gradient(to right, var(--cn-tape-ground), var(--cn-tape-ground)) padding-box;
  border-radius: 6px;
  border-bottom: 1px solid var(--cn-line-strong);
  overflow: hidden;
}

/* Bars are capped and the row is justified to the ends, so the left edge is
   always the oldest run and the right edge always the newest — which is what
   the dates under the ends claim, at forty-eight runs or at five. Uncapped,
   a quiet day became four slabs and stopped reading as a tape; capped without
   the justification it became four hairlines in an empty trough, which read as
   nothing at all. */
.cn-tape-bar {
  --lamp: var(--lamp-idle);
  flex: 1 1 0;
  min-width: 3px;
  max-width: 2.5rem;
  height: var(--h, 20%);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--lamp) 65%, transparent),
    var(--lamp)
  );
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: cn-rise 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.cn-tape-bar[data-lamp="live"] { --lamp: var(--lamp-live); }
.cn-tape-bar[data-lamp="done"] { --lamp: var(--lamp-done); }
.cn-tape-bar[data-lamp="open"] { --lamp: var(--lamp-open); }
.cn-tape-bar[data-lamp="refused"] { --lamp: var(--lamp-refused); }
.cn-tape-bar[data-lamp="idle"] { --lamp: var(--lamp-idle); }

.cn-tape-bar.is-live {
  animation: cn-rise 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both,
    cn-blink 1.6s ease-in-out 0.5s infinite;
}

@keyframes cn-rise {
  from { transform: scaleY(0.02); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes cn-blink {
  50% { opacity: 0.45; }
}

.cn-tape-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cn-ink-soft);
  margin-top: 0.5rem;
}

.cn-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--cn-ink-soft);
}

.cn-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- progress ----------------------------------------------------------- */

.cn-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--cn-surface-sunk);
  overflow: hidden;
  border: 1px solid var(--cn-line);
}

.cn-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lamp, var(--lamp-live));
  transition: width 0.4s ease;
}

/* --- lists -------------------------------------------------------------- */

.cn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cn-list > li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--cn-line);
}

.cn-list > li:first-child {
  border-top: 0;
}

.cn-list .cn-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.cn-list .cn-said {
  display: block;
  color: var(--cn-ink-soft);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

.cn-empty {
  color: var(--cn-ink-soft);
  font-size: 0.88rem;
  padding: 0.5rem 0 0.2rem;
  margin: 0;
}

/* --- tables ------------------------------------------------------------- */
/* Read-only tables rendered into an admin field — the shipment's lines, the
   runs against it. Unfold styles the changelist but not what a `readonly_field`
   returns, so these arrive unstyled unless they say what they are. Ruled rather
   than boxed: an operator reconciling item codes against the ERP reads down one
   column, and vertical rules would cut that. */

.cn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cn-table th {
  text-align: left;
  font-family: var(--font-data);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cn-ink-soft);
  padding: 0 1.25rem 0.45rem 0;
  border-bottom: 1px solid var(--cn-line-strong);
  white-space: nowrap;
}

.cn-table td {
  padding: 0.45rem 1.25rem 0.45rem 0;
  border-bottom: 1px solid var(--cn-line);
  vertical-align: baseline;
}

.cn-table tr:last-child td {
  border-bottom: 0;
}

.cn-table th:last-child,
.cn-table td:last-child {
  padding-right: 0;
}

/* Anything the machine produced — item codes, quantities, run ids, invoice
   numbers — lines up in columns rather than drifting with the proportional
   font. */
.cn-table .cn-num,
.cn-table td.cn-mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

.cn-table .cn-num {
  text-align: right;
  padding-right: 1.6rem;
}

.cn-table th.cn-num {
  text-align: right;
}

/* A wide table inside a narrow admin field scrolls itself rather than pushing
   the page sideways. */
.cn-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* --- field blocks ------------------------------------------------------- */
/* What a `readonly_field` returns when it is a paragraph rather than a value:
   the live view and the recording, whether a run can be confirmed. */

.cn-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 44rem;
  line-height: 1.55;
}

/* Each line is lamp, then the thing, then — wrapped underneath — the caveat.
   The caveat takes the whole row so it reads as a footnote to the line above
   rather than as more of the same sentence. */
.cn-block > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;
}

.cn-block .cn-said {
  flex-basis: 100%;
  padding-left: 1.05rem;
  color: var(--cn-ink-soft);
  font-size: 0.85rem;
}

.cn-block strong {
  font-weight: 600;
}

/* --- notes -------------------------------------------------------------- */
/* An advisory, not a decoration: the lamp on the left is the same lamp the
   rest of the portal uses for that state. */

.cn-note {
  --lamp: var(--lamp-idle);
  border: 1px solid color-mix(in srgb, var(--lamp) 30%, var(--cn-line));
  border-left: 3px solid var(--lamp);
  background: color-mix(in srgb, var(--lamp) 7%, var(--cn-surface));
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.25rem;
}

.cn-note[data-lamp="live"] { --lamp: var(--lamp-live); }
.cn-note[data-lamp="done"] { --lamp: var(--lamp-done); }
.cn-note[data-lamp="open"] { --lamp: var(--lamp-open); }
.cn-note[data-lamp="refused"] { --lamp: var(--lamp-refused); }

.cn-note h2 {
  font-size: 0.72rem;
  font-family: var(--font-data);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lamp) 70%, var(--cn-ink));
  margin: 0 0 0.35rem;
}

.cn-note p {
  margin: 0;
  line-height: 1.55;
}

.cn-note p + p {
  margin-top: 0.5rem;
}

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

.cn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.cn-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--color-primary-600, #2a4fa8);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cn-button:hover {
  background: var(--color-primary-700, #22417f);
  color: #fff;
}

.cn-button:active {
  transform: translateY(1px);
}

.cn-button--danger {
  background: var(--lamp-refused);
}

.cn-button--danger:hover {
  background: color-mix(in srgb, var(--lamp-refused) 82%, black);
}

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

.cn-button--quiet:hover {
  background: var(--cn-surface-sunk);
  color: var(--cn-ink);
}

.cn-link {
  color: var(--color-primary-600, #2a4fa8);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.cn-link:hover {
  border-bottom-color: currentColor;
}

html.dark .cn-link {
  color: var(--color-primary-400, #8aa9ee);
}

:where(.cn) a:focus-visible,
:where(.cn) button:focus-visible,
:where(.cn) input:focus-visible,
:where(.cn) select:focus-visible {
  outline: 2px solid var(--color-primary-500, #3f68c4);
  outline-offset: 2px;
}

/* --- forms -------------------------------------------------------------- */

.cn-field {
  margin-bottom: 1.1rem;
}

.cn-field:last-child {
  margin-bottom: 0;
}

.cn-field > label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.cn-field input[type="text"],
.cn-field input[type="number"],
.cn-field select,
.cn-field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cn-line-strong);
  border-radius: 8px;
  background: var(--cn-surface);
  color: var(--cn-ink);
  font: inherit;
}

.cn-field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--cn-line);
  border-radius: 8px;
  background: var(--cn-surface-sunk);
}

.cn-field--check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
  accent-color: var(--color-primary-600, #2a4fa8);
  flex: none;
}

.cn-field--check > label {
  margin-bottom: 0;
}

.cn-help {
  display: block;
  color: var(--cn-ink-soft);
  font-size: 0.82rem;
  margin-top: 0.3rem;
  line-height: 1.5;
}

.cn-errors {
  color: var(--lamp-refused);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.cn-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* --- the log ------------------------------------------------------------ */
/* Ruled like a fan-fold listing, because that is what it is: the machine's own
   account of what it did, kept in the order it did it. */

.cn-log {
  --log-line: 1.45rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cn-line);
  border-radius: 10px;
  background: var(--cn-tape-ground);
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--cn-line) 45%, transparent) 0 var(--log-line),
    transparent var(--log-line) calc(var(--log-line) * 2)
  );
  background-position: 0 0.9rem;
  font-family: var(--font-data);
  font-size: 0.78rem;
  line-height: var(--log-line);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 70vh;
  color: var(--cn-ink);
}

/* The same paper, cut short: the tail of the log sitting inside a field on the
   run's own page, where it is evidence beside everything else rather than the
   whole subject of the page. */
.cn-log--inline {
  max-height: 22rem;
  max-width: 62rem;
  font-size: 0.74rem;
}

/* --- the screen --------------------------------------------------------- */

.cn-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--cn-line-strong);
  background: #0b0f14;
  box-shadow: var(--cn-shadow);
}

.cn-screen-frame {
  position: relative;
}

/* A live picture gets a hairline that says so, rather than a badge that
   covers part of the screen an operator is trying to read. */
.cn-screen-frame.is-live .cn-screen {
  border-color: color-mix(in srgb, var(--lamp-live) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lamp-live) 30%, transparent),
    var(--cn-shadow);
}

.cn-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1rem 0;
}

.cn-readout {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cn-readout .cn-key {
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cn-ink-soft);
}

.cn-readout .cn-value {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- entrance ----------------------------------------------------------- */
/* One short, ordered settle on load — the panels come up the way an instrument
   does. Nothing moves after that. */

.cn-enter {
  animation: cn-settle 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes cn-settle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-enter,
  .cn-tape-bar,
  .cn-tape-bar.is-live,
  .cn-lamp.is-pulsing {
    animation: none;
  }
  .cn-bar > i {
    transition: none;
  }
}

@media (max-width: 40rem) {
  .cn-rows {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .cn-rows dd {
    margin-bottom: 0.5rem;
  }
  .cn-head {
    align-items: flex-start;
  }
}