/* The brand palette is owned by the Android theme
   (`android/app/src/main/java/eu/disclab/app/ui/theme/Color.kt`) and shown by the
   logo: cyan on #121A22. Cyan is the *only* accent — the greens and the lone
   blue that used to live here belonged to no brand.

   The app is dark and this site is light, so one cyan cannot do both jobs:
   #4DD8FF is 10.5:1 on the dark panel but 1.6:1 on the page, which is why the
   deep cyan exists. Pick by what the colour sits on, not by what it is for. */
:root {
  color-scheme: light;
  /* Neutrals: cool, keyed to the brand's ink. The old off-whites were tinted
     green to sit under a green accent. */
  --bg: #f6f8f9;
  --surface: #ffffff;
  --surface-strong: #121a22; /* DiscLabBg — the ink of the app and the logo */
  --text: #172027;
  --muted: #60707a;
  --line: #d9dee2;
  --tint: #e4f2f8; /* cyan-tinted wash: nav hover, active rows */
  --tint-sunk: #eef2f5; /* the band that sits under the page */

  --cyan: #4dd8ff; /* DiscLabPrimaryCyan — brand primary; dark surfaces only */
  --cyan-deep: #0e7490; /* DiscLabMutedCyan — the accent on light surfaces */

  /* Semantics, from the brand's amber and coral. Both are darkened here: the app
     shows them on #121A22, where they are bright enough; on this page the source
     values read 2.0:1 and 3.5:1, so they would be decoration, not a warning. */
  --amber: #8a5a00;
  --red: #be1236;
  --shadow: 0 12px 35px rgba(16, 24, 32, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
}

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 14px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid rgba(217, 222, 226, 0.86);
  background: rgba(246, 248, 249, 0.92);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--surface-strong);
  font-size: 1.05rem;
  font-weight: 740;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
}

.site-nav a {
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
}

.site-nav a[aria-current="page"],
.site-nav a:hover {
  color: var(--text);
  background: var(--tint);
}

/* The nav sign-out form renders an inline-block button so it sits on the nav
   row like the links. The .nav-login CTA reuses the primary button affordance. */
.nav-signout {
  display: inline-flex;
  margin-left: 6px;
}

.nav-login {
  margin-left: 6px;
}

.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px clamp(18px, 5vw, 72px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--tint-sunk);
}

.site-footer div {
  display: grid;
  gap: 5px;
}

.site-footer strong {
  color: var(--surface-strong);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.68fr);
  align-items: stretch;
  gap: clamp(24px, 5vw, 64px);
  min-height: calc(100svh - 72px);
  padding: clamp(44px, 7vw, 92px) clamp(18px, 5vw, 72px) clamp(28px, 5vw, 64px);
}

.hero-copy {
  align-self: center;
  max-width: 820px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--cyan-deep);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

.hero h1 {
  max-width: 900px;
  margin: 0;
  color: var(--surface-strong);
  font-size: clamp(3.2rem, 8.6vw, 7.4rem);
  line-height: 0.94;
  letter-spacing: 0;
}

.hero-text {
  max-width: 720px;
  margin: 28px 0 0;
  color: #35444d;
  font-size: clamp(1.1rem, 2vw, 1.38rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.signup-form {
  max-width: 560px;
  margin-top: 32px;
}

.signup-lead {
  margin: 0 0 12px;
  color: var(--surface-strong);
  font-size: 1.05rem;
  font-weight: 700;
}

.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signup-row input {
  flex: 1 1 240px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 14px;
  color: var(--text);
  background: white;
  font: inherit;
}

.signup-consent {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.signup-note {
  margin: 10px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.signup-note.ok {
  color: var(--cyan-deep);
}

.signup-note.error {
  color: var(--red);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 7px;
  padding: 0 16px;
  font-weight: 700;
  text-decoration: none;
}

.button.primary {
  color: white;
  background: var(--surface-strong);
}

.button.secondary {
  color: var(--surface-strong);
  border: 1px solid var(--line);
  background: white;
}

button.button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

button.button.secondary {
  border: 1px solid var(--line);
}

button.button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.hero-panel {
  align-self: end;
  min-height: 430px;
  border-radius: 8px;
  padding: clamp(18px, 4vw, 34px);
  color: white;
  /* Brand cyan washing into the deep cyan, over the brand ink. The lower stop
     used to be the green. */
  background:
    linear-gradient(145deg, rgba(77, 216, 255, 0.16), rgba(14, 116, 144, 0.32)),
    var(--surface-strong);
  box-shadow: var(--shadow);
}

.throw-card {
  display: grid;
  align-content: space-between;
  gap: 24px;
}

.panel-label {
  display: block;
  margin-bottom: 18px;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 780;
  text-transform: uppercase;
}

.throw-card strong {
  display: block;
  font-size: clamp(4.8rem, 9vw, 7.2rem);
  line-height: 0.9;
}

.throw-card p {
  max-width: 280px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.5;
}

.throw-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.throw-stats div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.throw-stats dt,
.throw-stats dd {
  margin: 0;
}

.throw-stats dt {
  color: rgba(255, 255, 255, 0.64);
}

.throw-stats dd {
  font-weight: 760;
  text-align: right;
}

.flow-list {
  display: grid;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 720;
}

.flow-list span {
  color: var(--cyan);
  font-size: 0.78rem;
}

.content-band,
.page-shell {
  padding: clamp(34px, 5vw, 72px) clamp(18px, 5vw, 72px);
}

.split-band {
  border-top: 1px solid var(--line);
  background: var(--tint-sunk);
}

.page-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.page-shell.narrow {
  max-width: 820px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 24px;
}

.section-heading.compact {
  margin-bottom: 28px;
}

.section-heading h1,
.section-heading h2 {
  margin: 0;
  color: var(--surface-strong);
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0;
}

.section-heading p:not(.eyebrow) {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.updated {
  margin-top: 12px;
  color: var(--cyan-deep) !important;
  font-size: 0.92rem !important;
  font-weight: 720;
}

.feature-grid,
.metric-grid,
.endpoint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature-grid article,
.endpoint-grid article,
.metric,
.task-list,
.health-list,
.document {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.05);
}

.feature-grid article,
.endpoint-grid article {
  padding: 22px;
}

.feature-grid h3,
.endpoint-grid strong {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.feature-grid p,
.endpoint-grid p,
.metric p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.endpoint-grid article {
  display: grid;
  gap: 9px;
  min-height: 164px;
}

.endpoint-grid span {
  width: fit-content;
  border-radius: 4px;
  padding: 3px 7px;
  color: white;
  background: var(--cyan-deep);
  font-size: 0.76rem;
  font-weight: 800;
}

.endpoint-grid strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

.metric {
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 20px;
}

.metric span {
  color: var(--muted);
  font-size: 0.9rem;
}

.metric strong {
  font-size: 2.4rem;
  line-height: 1;
}

.table-section {
  margin-top: 24px;
}

.analytics-dashboard {
  margin: 42px 0 56px;
}

.analytics-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.analytics-tables table {
  min-width: 420px;
}

.owner-tools-heading {
  margin-top: 48px;
}

.table-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.table-heading h2 {
  margin: 0;
}

.table-heading span {
  color: var(--amber);
  font-size: 0.9rem;
  font-weight: 720;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 760;
  text-transform: uppercase;
}

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

.muted-cell {
  color: var(--muted);
  font-size: 0.86rem;
}

.task-list,
.health-list {
  display: grid;
  margin: 0;
  padding: 0;
}

.task-list div,
.health-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}

.task-list div:last-child,
.health-list div:last-child {
  border-bottom: 0;
}

.task-list span,
.health-list dd {
  margin: 0;
  color: var(--muted);
}

.health-list dt {
  font-weight: 760;
}

.document {
  display: grid;
}

.document section {
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.document section:last-child {
  border-bottom: 0;
}

.document h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.document p {
  margin: 0 0 12px;
  color: #35444d;
  line-height: 1.65;
}

.document p:last-child {
  margin-bottom: 0;
}

.panel-form {
  display: grid;
  gap: 16px;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.05);
}

.backoffice-form {
  max-width: none;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
}

.backoffice-nav,
.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.backoffice-nav a {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 13px;
  color: var(--surface-strong);
  background: white;
  font-weight: 720;
  text-decoration: none;
}

.backoffice-nav a[aria-current="page"],
.backoffice-nav a:hover {
  border-color: #a8d5e8;
  background: var(--tint);
}

.backoffice-nav form {
  margin-left: auto;
}

.pagination {
  justify-content: flex-end;
  margin-top: 14px;
  margin-bottom: 0;
}

.pagination span:not(.button) {
  color: var(--muted);
  font-weight: 720;
}

.disabled-link {
  pointer-events: none;
  opacity: 0.48;
}

.panel-form label {
  display: grid;
  gap: 7px;
}

.panel-form label span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.panel-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--text);
  background: white;
  font: inherit;
}

.notice {
  display: grid;
  gap: 4px;
  max-width: 620px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  background: white;
}

.notice span {
  color: var(--muted);
}

.notice.danger {
  border-color: #ecc0c9;
  background: #fef5f7;
}

.compact-button {
  min-height: 36px;
  padding: 0 11px;
}

/* --- TechDisc upload (on /throws) ---------------------------------------- */

.techdisc-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.05);
}

.techdisc-upload-label {
  display: grid;
  gap: 3px;
  font-weight: 700;
}

.techdisc-upload-label .muted-cell {
  font-weight: 400;
}

.techdisc-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.techdisc-recon {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.techdisc-recon div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.techdisc-recon div:last-child {
  border-bottom: 0;
}

.techdisc-recon dt {
  color: var(--muted);
}

.techdisc-recon dd {
  margin: 0;
  font-weight: 720;
}

/* --- Throw list (/throws) ------------------------------------------------- */

.throw-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 14px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.05);
}

.throw-filter label {
  display: grid;
  gap: 7px;
}

.throw-filter label span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  text-transform: uppercase;
}

.throw-filter input,
.throw-filter select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--text);
  background: white;
  font: inherit;
}

.throw-filter-actions {
  display: flex;
  gap: 10px;
}

.throw-table td {
  vertical-align: top;
}

.session-row td {
  padding: 12px 16px;
  background: var(--tint-sunk);
  border-bottom: 1px solid var(--line);
}

.session-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 720;
  color: var(--surface-strong);
}

.session-meta {
  margin-left: 12px;
  color: var(--muted);
  font-size: 0.86rem;
}

.throw-time a {
  font-weight: 720;
  text-decoration: none;
  color: var(--cyan-deep);
}

.throw-time .ordinal {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.measurement div {
  white-space: nowrap;
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 760;
}

.status-detected {
  color: #0e6b3f;
  background: #dff3e7;
}

.status-rejected {
  color: var(--amber);
  background: #f7ecd6;
}

.status-analysis_failed {
  color: var(--red);
  background: #fbe0e6;
}

.badge-techdisc {
  display: inline-block;
  margin-left: 6px;
  border-radius: 4px;
  padding: 2px 7px;
  color: white;
  background: var(--cyan-deep);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.clips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.8rem;
  font-weight: 640;
  white-space: nowrap;
}

.chip-view {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.chip-ok {
  border-color: #a9dcc0;
  background: #eef8f2;
}

.chip-awaiting {
  border-color: #e6d3a6;
  background: #fbf4e4;
}

.chip-pending {
  border-color: #cdd6db;
  background: var(--tint-sunk);
}

.chip-none {
  border-color: var(--line);
  background: white;
  color: var(--muted);
}

@media (max-width: 840px) {
  .throw-filter {
    grid-template-columns: 1fr;
  }
}

/* ---- Per-throw detail page --------------------------------------------- */
.throw-detail {
  display: grid;
  gap: 22px;
  max-width: 1080px;
}

.throw-detail .card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.back-link {
  color: var(--cyan-deep);
  font-size: 0.9rem;
  font-weight: 640;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.detail-header h1 {
  margin: 4px 0 0;
  color: var(--surface-strong);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.05;
}
.detail-time { margin: 8px 0 0; color: var(--muted); }
.detail-header-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}
.meta-line { color: var(--muted); font-size: 0.88rem; }

.status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.status-chip.ok { background: #e2f5eb; color: #0f6b43; border-color: #b9e6cf; }
.status-chip.warn { background: #fbf1dc; color: var(--amber); border-color: #ecd9ad; }
.status-chip.danger { background: #fef5f7; color: var(--red); border-color: #ecc0c9; }
.status-chip.muted { background: var(--tint-sunk); color: var(--muted); border-color: var(--line); }

.section-title {
  margin: 6px 0 -4px;
  color: var(--surface-strong);
  font-size: 1.25rem;
}
.section-title.flush { margin: 0 0 14px; }
.subhead { margin: 22px 0 12px; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Stat tiles */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.stat-tile {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.stat-label { color: var(--muted); font-size: 0.82rem; font-weight: 640; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-value { color: var(--cyan-deep); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 760; line-height: 1; }
.stat-unit { margin-left: 5px; color: var(--muted); font-size: 0.9rem; font-weight: 620; }
.stat-sub { color: var(--muted); font-size: 0.86rem; }
.stat-tile.is-status .stat-value { color: var(--amber); font-size: 1.15rem; font-weight: 700; }
.stat-token {
  align-self: start;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--tint-sunk);
  border-radius: 6px;
  padding: 2px 6px;
}

/* TechDisc comparison */
.reference-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reference-badge { background: var(--tint); color: var(--cyan-deep); border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; font-weight: 680; }
.reference-meta { margin: 4px 0 16px; color: var(--muted); font-size: 0.88rem; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare-table th, .compare-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.compare-table thead th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 680; }
.compare-table tbody th { font-weight: 640; color: var(--text); }
.compare-table td:nth-child(2) { font-weight: 720; }
.cell-unit { color: var(--muted); font-size: 0.82rem; }
.cell-token { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; color: var(--amber); }
.delta { font-weight: 720; color: var(--cyan-deep); }
.reference-only-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ref-only { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--tint-sunk); }
.ref-only-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
.ref-only-value { font-size: 1.2rem; font-weight: 720; color: var(--surface-strong); }
.reference-notes { margin: 16px 0 0; color: var(--muted); font-style: italic; }

/* Flight viewer */
.viewer-embed { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.9fr); gap: 20px; align-items: start; }
.viewer-canvas-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #fbfdfe, #eef4f7); }
.viewer-canvas { display: block; width: 100%; height: auto; }
.viewer-controls { display: grid; gap: 16px; align-content: start; }
.pill-toggle { display: inline-flex; padding: 4px; gap: 4px; background: var(--tint-sunk); border-radius: 999px; border: 1px solid var(--line); width: max-content; }
.pill-toggle[hidden] { display: none; }
.pill { border: none; background: transparent; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 640; color: var(--muted); cursor: pointer; }
.pill.is-active { background: var(--surface); color: var(--surface-strong); box-shadow: 0 1px 3px rgba(16,24,32,0.14); }
.viewer-inputs { display: grid; gap: 10px; }
.viewer-inputs-head { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.viewer-input { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-size: 0.9rem; }
.viewer-input input { width: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; background: white; color: var(--text); }

/* Footage */
.clip-list { display: grid; gap: 16px; }
.clip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.clip-head strong { display: block; color: var(--surface-strong); font-size: 1.05rem; }
.clip-file { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.clip-video { width: 100%; max-height: 460px; border-radius: 10px; background: #000; }
.clip-noplayer { display: grid; gap: 4px; border: 1px dashed var(--line); border-radius: 10px; padding: 22px; text-align: center; background: var(--tint-sunk); }
.clip-noplayer-title { font-weight: 680; color: var(--text); }
.clip-noplayer-sub { color: var(--muted); font-size: 0.85rem; }
.clip-noplayer code, .clip-noplayer-sub code { font-family: ui-monospace, Menlo, monospace; }
.clip-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 16px 0 0; }
.clip-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.clip-facts dt { color: var(--muted); font-size: 0.85rem; }
.clip-facts dd { margin: 0; font-weight: 620; text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Coaching placeholder */
.coaching-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coaching-lead { margin: 6px 0 18px; color: var(--muted); max-width: 640px; }
.coaching-preview { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--tint-sunk); }
.coaching-fault-skeleton { display: grid; gap: 12px; opacity: 0.7; }
.severity-chip { width: max-content; background: #fbf1dc; color: var(--amber); border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; font-weight: 680; }
.skeleton-title { font-weight: 720; color: var(--surface-strong); font-size: 1.05rem; }
.coaching-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.coaching-col-head { display: block; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.skeleton-line { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--line), #e9eef1, var(--line)); }
.coaching-footage-row { display: flex; gap: 10px; }
.footage-tag { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; color: var(--muted); }

/* Raw record */
.raw-record summary { cursor: pointer; font-weight: 680; color: var(--surface-strong); }
.raw-json { overflow-x: auto; margin: 14px 0 0; padding: 16px; border-radius: 10px; background: var(--surface-strong); color: #dbe6ee; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; line-height: 1.5; }

@media (max-width: 900px) {
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-only-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-embed { grid-template-columns: 1fr; }
  .coaching-cols { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .clip-facts { grid-template-columns: 1fr; }
  .detail-header-meta { justify-items: start; text-align: left; }
}

@media (max-width: 840px) {
  .site-header {
    position: static;
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    width: 100%;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.4rem);
  }

  .hero-panel {
    min-height: 340px;
  }

  .feature-grid,
  .metric-grid,
  .endpoint-grid {
    grid-template-columns: 1fr;
  }

  .backoffice-form {
    grid-template-columns: 1fr;
  }

  .analytics-tables {
    grid-template-columns: 1fr;
  }

  .backoffice-nav form {
    width: 100%;
    margin-left: 0;
  }

  .site-footer {
    flex-direction: column;
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}