/* Synthetic product surfaces.
   Every "screenshot" on this page is built from DOM, per docs/LANDING-DESIGN-LANGUAGE.md
   §4.6 — sharp at any DPI, animatable, and able to show the intended state of the
   product rather than whatever the app happens to look like on the day.

   The data is real in shape: N-numbers, Hobbs readings, 14 CFR citations, NOTAM-style
   identifiers and squawk severities all follow the app's own vocabulary. */

.frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

[data-surface="night"] .frame {
  background: var(--night-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 32px 72px rgba(0, 0, 0, 0.5);
}

.frame--lift {
  box-shadow: var(--shadow-lift);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

[data-surface="night"] .frame__bar {
  background: rgba(255, 255, 255, 0.02);
}

.frame__dots {
  display: flex;
  gap: 6px;
}

.frame__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-4);
}

.frame__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.frame__clock {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 7px;
}

.frame__clock .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--status-go);
}

.frame__body {
  padding: 18px;
}

/* ------------------------------------------------- shared console rows --- */

.krow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.krow + .krow {
  border-top: 1px solid var(--line);
}

.krow__k {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  color: var(--fg-2);
  min-width: 0;
}

.krow__v {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.krow__v--muted {
  color: var(--fg-3);
}

.tick {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
}

.tick--go {
  background: var(--go-bg);
  color: var(--status-go);
}

.tick--hold {
  background: var(--hold-bg);
  color: var(--status-hold);
}

.tick--caution {
  background: var(--caution-bg);
  color: var(--status-caution);
}

[data-surface="night"] .tick--go {
  background: rgba(95, 211, 160, 0.14);
}

[data-surface="night"] .tick--hold {
  background: rgba(255, 142, 132, 0.14);
}

[data-surface="night"] .tick--caution {
  background: rgba(240, 192, 105, 0.14);
}

.label {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------------------------------------------- hero: dispatch release --- */

.dispatch__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.dispatch__tail {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg);
}

.dispatch__meta {
  font-size: 0.75rem;
  color: var(--fg-3);
  margin-top: 3px;
}

.dispatch__checks {
  padding-block: 4px;
}

/* Sits on the tinted verdict panel, so it needs the body tier rather than the
   caption tier to clear AA against that background. */
.dispatch__cite {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-2);
}

.verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-control);
  background: var(--hold-bg);
  border: 1px solid rgba(168, 54, 47, 0.22);
}

[data-surface="night"] .verdict {
  background: rgba(255, 142, 132, 0.1);
  border-color: rgba(255, 142, 132, 0.28);
}

.verdict__word {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--status-hold);
}

.verdict__why {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-2);
}

.dispatch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mockbtn {
  height: 32px;
  padding-inline: 12px;
  /* Narrow columns were breaking these mid-phrase ("Shorten to / 0.6 h"),
     which reads as a layout bug rather than a button. */
  white-space: nowrap;
  border-radius: var(--r-control);
  border: 1px solid var(--line-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mockbtn--solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

[data-surface="night"] .mockbtn--solid {
  background: var(--on-night);
  border-color: var(--on-night);
  color: var(--night);
}

.mockbtn--quiet {
  border-color: transparent;
  color: var(--fg-3);
}

/* A single ambient loop: the blocking row pulses once every few seconds so the
   panel reads as live without anything moving. §5.5 caps this at two per page. */
@keyframes pulse-hold {
  0%,
  86%,
  100% {
    background: transparent;
  }
  92% {
    background: var(--hold-bg);
  }
}

.is-live .krow--blocking {
  animation: pulse-hold 6.5s var(--ease-io) infinite;
  border-radius: 4px;
  margin-inline: -8px;
  padding-inline: 8px;
}

/* ------------------------------------------------ night ops: the board --- */

.ops {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .ops {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.ops__left {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .ops__left {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}

.ops__right {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ops__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ops__tab {
  height: 26px;
  padding-inline: 10px;
  border-radius: 5px;
  font-size: 0.75rem;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}

.ops__tab.is-on {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
}

.ops__tab b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--status-caution);
}

.board {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.board__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  transition: background-color var(--t-hover) var(--ease-out);
}

.board__row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.board__tail {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg);
}

.board__type {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--fg-3);
  margin-top: 2px;
}

.board__who {
  font-size: 0.8125rem;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__when {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-3);
  margin-top: 2px;
}

.ops__panelcard {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.ops__panelhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* ---------------------------------------------------- pillar mock: LMS --- */

.progress-line {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 4px 0 18px;
}

.progress-line i {
  height: 4px;
  flex: 1;
  background: var(--line-strong);
  border-radius: 2px;
}

.progress-line i + i {
  margin-left: 3px;
}

.progress-line i.done {
  background: var(--accent);
}

.progress-line i.now {
  background: var(--accent);
  opacity: 0.45;
}

.lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}

.lesson + .lesson {
  border-top: 1px solid var(--line);
}

.lesson__code {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-3);
  width: 52px;
  flex: none;
}

.lesson__name {
  font-size: 0.8125rem;
  color: var(--fg-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson__grade {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-3);
}

/* ----------------------------------------------- pillar mock: schedule --- */

.sched {
  display: grid;
  grid-template-columns: 52px repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  overflow: hidden;
}

.sched__cell {
  background: var(--surface-2);
  min-height: 44px;
  padding: 6px;
  position: relative;
}

[data-surface="night"] .sched__cell {
  background: var(--night-2);
}

.sched__head {
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  text-transform: uppercase;
  min-height: 30px;
  display: flex;
  align-items: center;
}

.sched__time {
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--fg-3);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 8px;
  padding-top: 6px;
}

.blk {
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 0.6875rem;
  line-height: 1.25;
  height: 100%;
  border-left: 2px solid;
}

.blk__who {
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blk__sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--fg-3);
  margin-top: 2px;
}

.blk--go {
  background: var(--go-bg);
  border-color: var(--status-go);
}

.blk--caution {
  background: var(--caution-bg);
  border-color: var(--status-caution);
}

.blk--hold {
  background: var(--hold-bg);
  border-color: var(--status-hold);
}

.blk--quiet {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

[data-surface="night"] .blk--quiet {
  background: rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------- pillar mock: maintenance --- */

.gauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
}

.gauge + .gauge {
  border-top: 1px solid var(--line);
}

.gauge__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gauge__name {
  font-size: 0.8125rem;
  color: var(--fg-2);
}

.gauge__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.gauge__track {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.gauge__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--status-go);
}

.gauge__fill--caution {
  background: var(--status-caution);
}

.gauge__fill--hold {
  background: var(--status-hold);
}

/* ----------------------------------------------- pillar mock: billing ---- */

.ledger {
  display: flex;
  flex-direction: column;
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
}

.ledger__row + .ledger__row {
  border-top: 1px solid var(--line);
}

.ledger__what {
  font-size: 0.8125rem;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger__when {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--fg-3);
  margin-top: 2px;
}

.ledger__amt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.ledger__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}

.ledger__total b {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- stepper: visual ----- */

.stagepanel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface-2);
  padding: 26px;
  overflow: hidden;
  display: grid;
}

/* Faint arcing hairlines behind the stage — Rex's device, drawn rather than
   imported so it inherits the surface. */
.stagepanel::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(50% 50% at 20% 90%, transparent 49.6%, var(--rule) 49.8%, transparent 50.1%),
    radial-gradient(60% 60% at 90% 10%, transparent 49.7%, var(--rule) 49.9%, transparent 50.2%),
    radial-gradient(40% 40% at 70% 80%, transparent 49.7%, var(--rule) 49.9%, transparent 50.2%);
  pointer-events: none;
}

.stagecard {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  width: min(100%, 420px);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity var(--t-panel) var(--ease-io),
    transform var(--t-panel) var(--ease-io);
}

.stagecard.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ------------------------------------------------------ floating cards --- */

/* Depth by overlap, not by shadow — §4.7. */
.float {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-lift);
  padding: 12px 14px;
  max-width: 260px;
}

[data-surface="night"] .float {
  background: var(--night-3);
}

.float__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.float__title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg);
}

.float__text {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--fg-2);
}

/* Clears the console's own action row — the overlap should read as depth, not
   as something covering the thing you came to look at. */
.float--hero {
  right: -20px;
  bottom: -84px;
  max-width: 250px;
}

@media (max-width: 1039px) {
  .float--hero {
    right: 0;
    bottom: -60px;
    max-width: 224px;
  }
}

/* ---------------------------------------------------------- ai cards ----- */

.aicard__trace {
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  padding: 12px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aicard__line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--fg-3);
}

.aicard__line b {
  color: var(--accent);
  font-weight: 500;
  flex: none;
}