/* The night: a queue runs from 21:00 to 08:00 under a sky that darkens, then dawns.
   An illustration in the page's own style (site.css tokens). The small cards borrow Kelvin's dark card look
   (src/labharness/web/static/app.css: .approval, .alert, the cards). Sizes are in em on a root whose font-size
   follows the container, so the picture scales like an image; below 440px it shortens labels and gives the cards
   more room. */

.kd-night {
  --n-text: var(--text, #f2f5f9);
  --n-text-2: rgba(242, 245, 249, 0.68);
  --n-dim: #8f99a5;                        /* small labels: about 6:1 on the frame */
  --n-accent: var(--accent, #5aa2e6);
  --n-snow: var(--snow, #8cc4f2);
  --n-ice: var(--ice, #e8f2fc);
  --n-ok: var(--ok, #46c48a);
  --n-frame: var(--bg-raise, #0d1016);
  /* Kelvin's dark cards */
  --k-card: #17212b; --k-card-line: #2e3b49; --k-raised: #19232e; --k-line: #24303c; --k-line-strong: #3b4a5a;
  --k-text: #e6edf4; --k-text-2: #c2ccd6; --k-muted: #8d9aa8; --k-code: #0b1016;
  --k-accent: #5aa2e6; --k-accent-ink: #08111a;
  --k-ok: #3fb950; --k-warn: #e3b341; --k-warn-bg: #2b2412; --k-warn-line: #8f6f1c;
  --k-danger: #ef5350; --k-danger-soft: rgba(239, 83, 80, 0.12);

  position: relative;
  container-type: inline-size;
  text-align: left;
}
.kd-night [hidden] { display: none !important; }
.kd-night svg { display: block; flex: none; }
.kd-night-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.kd-night-frame {
  --pad: 1.4em;
  position: relative;
  font: 400 clamp(12px, 2.05cqw, 13.5px) / 1.45 var(--font, system-ui, sans-serif);
  color: var(--n-text);
  background: var(--n-frame);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.kd-night-stage { display: flex; flex-direction: column; transition: opacity 0.6s var(--ease, ease); }
.kd-night-stage.out { opacity: 0; }
.kd-night-stage.snap, .kd-night-stage.snap * { transition: none !important; animation: none !important; }

/* ---------- the sky ---------- */

.kd-night-sky {
  position: relative; flex: none; height: 11em; overflow: hidden;
  background: linear-gradient(180deg, #0e2139 0%, #1b385a 55%, #33557a 100%);   /* dusk */
}
.kd-night-sky > i { position: absolute; inset: 0; pointer-events: none; }
.kd-night-sky-night { opacity: 0; background: linear-gradient(180deg, #03060b 0%, #060c17 55%, #0b1628 100%); }
.kd-night-sky-dawn { opacity: 0; background: linear-gradient(180deg, #1a2d47 0%, #46647f 52%, #9fb3c6 100%); }
.kd-night-glow.west { background: radial-gradient(55% 85% at 0% 100%, rgba(236, 170, 122, 0.3), transparent 72%); }
.kd-night-glow.east { opacity: 0; background: radial-gradient(65% 95% at 100% 100%, rgba(253, 228, 198, 0.55), transparent 70%); }

.kd-night-stars { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.kd-night-stars i { position: absolute; border-radius: 50%; background: #eef4fb; }
.kd-night-stars i.kd-night-tw { animation: kd-night-twinkle 5s ease-in-out infinite; }
@keyframes kd-night-twinkle { 50% { opacity: 0.2; } }

.kd-night-moonbox { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.kd-night-moon { width: 1.35em; height: 1.35em; fill: #e6eef8; opacity: 0.85; }

.kd-night-clock { position: absolute; left: var(--pad); top: 1em; display: grid; gap: 0.15em; }
.kd-night-time {
  font-weight: 300; font-size: 2.6em; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.kd-night-date { font-size: max(11px, 0.86em); color: rgba(242, 245, 249, 0.74); }

/* the phone: a ring when Kelvin tells it something */
.kd-night-phone { position: absolute; right: calc(var(--pad) - 0.3em); top: 0.95em; display: flex; align-items: center; gap: 0.5em; }
.kd-night-glyph { position: relative; width: 2em; height: 2em; display: grid; place-items: center; color: rgba(242, 245, 249, 0.82); }
.kd-night-glyph .kd-night-ico { width: 1.45em; height: 1.45em; stroke-width: 1.5; transition: color 0.3s; }
.kd-night-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--n-snow); opacity: 0; }
.kd-night-phone.ping .kd-night-ring { animation: kd-night-ring 1.5s var(--ease, ease-out) both; }
.kd-night-phone.ping .kd-night-ring + .kd-night-ring { animation-delay: 0.4s; }
@keyframes kd-night-ring { from { transform: scale(0.75); opacity: 0.9; } to { transform: scale(2.3); opacity: 0; } }
.kd-night-phone.ping .kd-night-glyph { animation: kd-night-lit 2.6s ease both; }
@keyframes kd-night-lit { 0%, 100% { color: rgba(242, 245, 249, 0.82); } 12%, 70% { color: var(--n-snow); } }
.kd-night-cap { font-size: max(11px, 0.86em); color: var(--n-text); white-space: nowrap; opacity: 0; }
.kd-night-phone.ping .kd-night-cap { animation: kd-night-cap 2.6s ease both; }
@keyframes kd-night-cap {
  0% { opacity: 0; transform: translateX(0.5em); }
  14%, 72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* ---------- the timeline ---------- */

.kd-night-chart { position: relative; flex: none; padding: 0 var(--pad); }
.kd-night-grid { position: absolute; left: var(--pad); right: var(--pad); top: 0; bottom: 0; pointer-events: none; }
.kd-night-grid i { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.035); }
.kd-night-grid i.mid { background: rgba(255, 255, 255, 0.07); }

.kd-night-axis { position: relative; height: 2.25em; }
.kd-night-tick { position: absolute; top: 0; width: 1px; height: 0.45em; margin-left: -0.5px; background: rgba(255, 255, 255, 0.3); }
.kd-night-tick.mid { height: 0.75em; background: rgba(255, 255, 255, 0.5); }
.kd-night-hour {
  position: absolute; z-index: 2; top: 0.85em; transform: translateX(-50%); padding: 0 0.2em;
  font: 400 max(11px, 0.82em) / 1 var(--mono, ui-monospace, monospace); color: var(--n-dim); white-space: nowrap;
  background: var(--n-frame);
}
.kd-night-hour.first { padding-left: 0; }
.kd-night-hour.last { padding-right: 0; }
.kd-night-hour.first { transform: none; }
.kd-night-hour.last { transform: translateX(-100%); }

.kd-night-lanes { position: relative; display: grid; grid-template-rows: repeat(4, 4.2em); align-items: center; }
.kd-night-lane { display: grid; gap: 0.45em; min-width: 0; }
.kd-night-label {
  display: flex; align-items: center; gap: 0.55em; min-width: 0;
  font: 400 max(11px, 0.9em) / 1.25 var(--mono, ui-monospace, monospace);
}
/* the label's words sit over the playhead and the hour lines, which pass behind them */
.kd-night-label > * { position: relative; z-index: 2; background: var(--n-frame); }
.kd-night-st {
  flex: none; width: 1.05em; height: 1.05em; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2); display: grid; place-items: center; color: var(--n-ok);
}
.kd-night-st .kd-night-ico { width: 0.78em; height: 0.78em; stroke-width: 3.2; opacity: 0; }
.kd-night-lane[data-state="run"] .kd-night-st {
  border-color: rgba(90, 162, 230, 0.25); border-top-color: var(--n-accent);
  animation: kd-night-spin 0.9s linear infinite;
}
.kd-night-lane[data-state="done"] .kd-night-st { border-color: transparent; background: #162d29; }
.kd-night-lane[data-state="done"] .kd-night-st .kd-night-ico { opacity: 1; }
@keyframes kd-night-spin { to { transform: rotate(1turn); } }
.kd-night-num { flex: none; color: var(--n-dim); }
.kd-night-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--n-text); transition: color 0.4s; }
.kd-night-args { color: var(--n-text-2); }
.kd-night-lane[data-state="wait"] .kd-night-name { color: var(--n-text-2); }
.kd-night-count { margin-left: auto; flex: none; padding-left: 0.6em; color: var(--n-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-night-count b { font-weight: 400; transition: color 0.4s; }
.kd-night-lane[data-state="run"] .kd-night-count b { color: var(--n-accent); }
.kd-night-lane[data-state="done"] .kd-night-count b { color: var(--n-text); }

.kd-night-track { position: relative; height: 0.5em; }
.kd-night-bar { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 99px; background: rgba(90, 162, 230, 0.16); overflow: hidden; }
.kd-night-bar.wait { background: rgba(140, 196, 242, 0.14); }
.kd-night-fill {
  position: absolute; inset: 0; background: var(--n-accent);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform; transition: background-color 0.6s;
}
.kd-night-bar.wait .kd-night-fill { background: var(--n-snow); }
.kd-night-lane[data-state="done"] .kd-night-fill { background: #4a86c2; }
.kd-night-lane[data-state="done"] .kd-night-bar.wait .kd-night-fill { background: #79a9d3; }

/* the alarm's mark on the field sweep, at 02:13 */
.kd-night-pin {
  position: absolute; z-index: 3; top: 50%; width: 0.95em; height: 0.95em; margin: -0.475em 0 0 -0.475em; border-radius: 50%;
  background: var(--k-danger); border: 0.16em solid var(--k-danger); box-shadow: 0 0 0 0.18em var(--n-frame);
  opacity: 0; transform: scale(0.3);
  transition: opacity 0.25s, transform 0.45s var(--ease, ease), background-color 0.6s, border-color 0.6s;
}
.kd-night-pin::after { content: ""; position: absolute; inset: -0.16em; border-radius: 50%; border: 1px solid var(--k-danger); opacity: 0; }
.kd-night-pin.on { opacity: 1; transform: none; }
.kd-night-pin.on:not(.cleared)::after { animation: kd-night-alarm 1.3s ease-out infinite; }
@keyframes kd-night-alarm { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.7); opacity: 0; } }
/* cleared: a quiet ring that stays where it happened */
.kd-night-pin.cleared { background: var(--n-frame); border-color: #a4afbc; }

/* the playhead: a line from the horizon down through the rows */
.kd-night-phbox { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); top: 0; bottom: 0.2em; pointer-events: none; }
.kd-night-ph { position: absolute; inset: 0; will-change: transform; transition: opacity 0.8s; }
.kd-night-ph::before {
  content: ""; position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(232, 242, 252, 0.8), rgba(232, 242, 252, 0.16));
}
.kd-night-ph::after {
  content: ""; position: absolute; left: -0.32em; top: -0.32em; width: 0.64em; height: 0.64em; border-radius: 50%;
  background: var(--n-ice); box-shadow: 0 0 0 0.22em rgba(232, 242, 252, 0.14);
}
.kd-night-ph.gone { opacity: 0; }

/* ---------- below the rows: the cards ---------- */

.kd-night-slot { position: relative; flex: none; height: 9.8em; margin: 0.8em var(--pad) var(--pad); }

.kd-night-row, .kd-night-alert, .kd-night-appr, .kd-night-acct {
  background: var(--k-card); border: 1px solid var(--k-card-line); border-radius: 0.8em; color: var(--k-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 30px -18px rgba(0, 0, 0, 0.75);
}
.kd-night-notes {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.5em;
  opacity: 0; transition: opacity 0.45s var(--ease, ease);
}
.kd-night-notes.on { opacity: 1; }
.kd-night-notes.on.away { opacity: 0; transition-duration: 0.35s; }
.kd-night-area { position: relative; min-height: 0; }
.kd-night-area > * { position: absolute; left: 0; right: 0; bottom: 0; }

.kd-night-row { display: flex; align-items: center; gap: 0.6em; min-width: 0; padding: 0.6em 0.85em; font-size: 0.95em; }
.kd-night-row-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kd-night-aside { margin-left: auto; flex: none; padding-left: 0.4em; color: var(--k-muted); white-space: nowrap; }
.kd-night-aside.ok { color: var(--k-ok); font-weight: 600; }
.kd-night-aside.kd-night-mono { font: max(11px, 0.88em) var(--mono, ui-monospace, monospace); }
.kd-night-mark { position: relative; flex: none; width: 1em; height: 1em; border-radius: 50%; display: grid; place-items: center; color: #0b1016; }
.kd-night-mark .kd-night-ico { width: 0.72em; height: 0.72em; stroke-width: 3.4; opacity: 0; }
.kd-night-mark.run { border: 1.5px solid rgba(90, 162, 230, 0.28); border-top-color: var(--k-accent); animation: kd-night-spin 0.9s linear infinite; }
.kd-night-mark.done { background: var(--k-ok); }
.kd-night-mark.done .kd-night-ico { opacity: 1; }
.kd-night-mark.live { width: 0.55em; height: 0.55em; margin: 0 0.22em; background: var(--k-ok); box-shadow: 0 0 0 0.22em rgba(63, 185, 80, 0.18); }
.kd-night-status .kd-night-row-text { transition: color 0.3s; }
.kd-night-status.fin .kd-night-row-text { animation: kd-night-in 0.5s var(--ease, ease) both; }
@keyframes kd-night-in { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }

.kd-night-watch { transition: opacity 0.3s, transform 0.3s; }
.kd-night-watch.away { opacity: 0; transform: translateY(0.3em); }

/* the alarm, as Kelvin's notice row shows it: on until a person says Got it, marked when it cleared */
.kd-night-alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.2em 0.65em;
  padding: 0.7em 0.85em;
  background: linear-gradient(var(--k-danger-soft), var(--k-danger-soft)), var(--n-frame);
  border-color: rgba(239, 83, 80, 0.7);
  opacity: 0; transform: translateY(0.6em);
  transition: opacity 0.35s var(--ease, ease), transform 0.45s var(--ease, ease), background-color 0.6s, border-color 0.6s;
}
.kd-night-alert.on { opacity: 1; transform: none; }
.kd-night-alert > .kd-night-ico { width: 1.2em; height: 1.2em; margin-top: 0.1em; color: var(--k-danger); transition: color 0.6s; }
.kd-night-alert-body { display: grid; gap: 0.12em; min-width: 0; }
.kd-night-alert-body b { font-weight: 600; }
.kd-night-act { color: var(--k-text-2); font-size: 0.95em; opacity: 0; transform: translateY(0.25em); transition: opacity 0.35s, transform 0.35s; }
.kd-night-act.on { opacity: 1; transform: none; }
.kd-night-when { color: var(--k-muted); font-size: max(11px, 0.86em); font-variant-numeric: tabular-nums; }
.kd-night-alert.cleared { background: var(--k-card); border-color: var(--k-card-line); }
.kd-night-alert.cleared > .kd-night-ico { color: var(--k-muted); }
.kd-night-gotit { align-self: center; font-size: max(11px, 0.86em); padding: 0.5em 0.8em; }

/* the queue's one approval: Kelvin's amber card */
.kd-night-appr {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.55em; padding: 0.8em 0.95em 0.85em;
  background: var(--k-warn-bg); border-color: var(--k-warn-line);
  opacity: 0; transform: translateY(0.7em);
  transition: opacity 0.4s var(--ease, ease), transform 0.5s var(--ease, ease), background-color 0.4s, border-color 0.4s;
}
.kd-night-appr.on { opacity: 1; transform: none; }
.kd-night-appr.done { background: var(--k-card); border-color: var(--k-card-line); }
.kd-night-appr-title { display: flex; align-items: center; gap: 0.55em; font-weight: 600; min-width: 0; }
.kd-night-appr-title .kd-night-ico { width: 1.25em; height: 1.25em; color: var(--k-warn); }
.kd-night-appr-line { margin: 0; color: var(--k-text-2); font-size: 0.95em; }
.kd-night-nw { white-space: nowrap; }
.kd-night-appr code {
  font: max(11px, 0.88em) var(--mono, ui-monospace, monospace); color: var(--k-text);
  background: var(--k-code); border: 1px solid var(--k-line); border-radius: 0.35em; padding: 0.02em 0.35em;
}
.kd-night-acct code { font: max(11px, 0.92em) var(--mono, ui-monospace, monospace); color: var(--k-text-2); }
.kd-night-appr-act { display: flex; align-items: center; gap: 0.55em; min-height: 2.35em; }
.kd-night-btn {
  display: inline-block; font: 500 0.95em / 1 var(--font, system-ui, sans-serif); padding: 0.6em 1.05em; border-radius: 0.55em;
  border: 1px solid var(--k-line-strong); background: var(--k-raised); color: var(--k-text);
  transition: transform 0.15s, filter 0.15s;
}
.kd-night-btn.primary { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-accent-ink); font-weight: 600; }
.kd-night-btn.pressed { transform: scale(0.94); filter: brightness(1.15); }
.kd-night-dur { margin-left: auto; color: var(--k-muted); font-size: max(11px, 0.88em); }
.kd-night-verdict { display: inline-flex; align-items: center; gap: 0.4em; color: var(--k-ok); font-weight: 600; animation: kd-night-in 0.35s var(--ease, ease) both; }
.kd-night-verdict .kd-night-ico { width: 1.1em; height: 1.1em; stroke-width: 2.4; }

/* the night's account */
.kd-night-acct {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.85em 1em 0.95em;
  opacity: 0; transform: translateY(1.4em);
  transition: opacity 0.6s var(--ease, ease), transform 0.8s var(--ease, ease);
}
.kd-night-acct.on { opacity: 1; transform: none; }
.kd-night-acct-head { display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.6em; min-width: 0; }
.kd-night-acct-head img { width: 1.45em; height: 1.45em; border-radius: 0.38em; }
.kd-night-acct-head b { font-weight: 600; font-size: 1.05em; white-space: nowrap; }
.kd-night-acct-head > span { margin-left: auto; padding-left: 0.5em; color: var(--k-muted); font-size: max(11px, 0.86em); white-space: nowrap; }
.kd-night-acct-list {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3em 1.4em; color: var(--k-text-2);
}
.kd-night-acct-list li { position: relative; padding-left: 0.95em; }
.kd-night-acct-list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 0.38em; height: 0.38em; border-radius: 50%; background: var(--k-ok); }
.kd-night-acct-list li.alarm { grid-column: 1 / -1; }
.kd-night-acct-list li.alarm::before { background: var(--k-warn); }
.kd-night-acct-list b { color: var(--k-text); font-weight: 600; }

/* ---------- phones and narrow columns ---------- */

@container (max-width: 440px) {
  .kd-night-frame { --pad: 1.05em; }
  .kd-night-sky { height: 8em; }
  .kd-night-time { font-size: 2.25em; }
  .kd-night-num, .kd-night-of, .kd-night-mm, .kd-night-gotit, .kd-night-watch .kd-night-aside, .kd-night-long { display: none; }
  .kd-night-lanes { grid-template-rows: repeat(4, 3.5em); }
  .kd-night-slot { height: 12.8em; margin-top: 0.7em; }
  .kd-night-acct { padding: 0.75em 0.85em 0.8em; }
  .kd-night-acct-head { margin-bottom: 0.45em; }
  .kd-night-acct-list { grid-template-columns: minmax(0, 1fr); gap: 0.1em; line-height: 1.38; }
  .kd-night-acct-list li::before { top: 0.52em; }
  /* the queue's state on two lines, always, so the row keeps its height when it changes */
  .kd-night-status { flex-wrap: wrap; row-gap: 0.1em; }
  .kd-night-status .kd-night-aside { flex-basis: 100%; margin-left: 0; padding-left: 1.6em; }
}

@media (prefers-reduced-motion: reduce) {
  .kd-night *, .kd-night *::before, .kd-night *::after { animation: none !important; transition: none !important; }
}