:root {
  --black: #000;
  --box: #6b7176;
  --box-dim: #33383c;
  --fill: #14181b;
  --white: #ffffff;
  --grey: #8c959b;
  --dim: #5a6167;
  --cyan: #00d8e8;
  --green: #16e04a;
  --magenta: #ff3ee0;
  --amber: #ffb400;
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --bar: 30px;
  --keys: 34px;
}

* {
  box-sizing: border-box;
  border-radius: 0;
}

body {
  margin: 0;
  padding: calc(var(--bar) + 10px) 0 calc(var(--keys) + 10px);
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: calc(100% - 20px);
  margin-inline: auto;
}

/* ---------- top data bar ---------- */

.databar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--bar);
  display: flex;
  align-items: stretch;
  background: var(--black);
  border-bottom: 1px solid var(--box);
}

.databar > * {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--box);
  white-space: nowrap;
}

.databar .spacer {
  flex: 1;
  padding: 0;
  border-right: 0;
}

.databar .page {
  color: var(--cyan);
}

/* Engaged-mode flag, same idea as AP / FD on the PFD. */
.ann {
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.databar > .ann {
  padding: 0 8px;
}

.win__bar .ann,
.strip .ann {
  display: inline-grid;
  place-items: center;
  height: 14px;
  padding: 0 4px;
  border: 1px solid var(--green);
  font-size: 9px;
  line-height: 1;
}

.databar .tally {
  gap: 6px;
  color: var(--grey);
  border-right: 1px solid var(--box);
}

.databar .tally b {
  color: var(--white);
  font-weight: 400;
}

.databar .clock {
  border-right: 0;
  gap: 8px;
  color: var(--grey);
}

.databar .clock b {
  color: var(--white);
  font-weight: 400;
}

/* ---------- windows ---------- */

.win {
  border: 1px solid var(--box);
  background: var(--black);
}

.win__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 22px;
  padding: 0 7px;
  background: var(--fill);
  border-bottom: 1px solid var(--box);
}

.win__lead {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.win__title {
  font-weight: 700;
  letter-spacing: 0.08em;
}

.win__meta {
  color: var(--grey);
  font-size: 11px;
}

.status {
  padding: 10px;
  color: var(--grey);
  border: 1px solid var(--box-dim);
}

.status--fail {
  color: var(--amber);
  border-color: var(--amber);
}

/* ---------- field grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}

.field:hover,
.field:focus-within {
  outline: 1px solid var(--cyan);
}

.field__view {
  position: relative;
  background: var(--black);
}

.field__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.field__track::-webkit-scrollbar {
  display: none;
}

.field__track img,
.field__track video {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* A clip sits on its own first frame until it is asked to run. */
.field__track video {
  background: var(--black);
}

.field__track img,
.field__track video {
  cursor: zoom-in;
}

/* ---------- detail view ---------- */

/* A panel laid over the grid rather than a blackout, so the page it was
   opened from stays in view around it. It hugs the frame: the only chrome is
   the bar above and the keys below. */
.lens {
  width: fit-content;
  max-width: min(94vw, 900px);
  height: fit-content;
  max-height: 94vh;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--box);
  background: var(--black);
  color: var(--white);
}

.lens:not([open]) {
  display: none;
}

.lens[open] {
  display: flex;
  flex-direction: column;
}

.lens::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

/* Same shape as the bar at the top of the page, so the field being read is
   named in the place the eye already goes. Zero width with a full-width floor
   keeps a long town name from stretching the panel past its photo. */
.lens__bar {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  width: 0;
  min-width: 100%;
  height: var(--bar);
  border-bottom: 1px solid var(--box);
}

.lens__bar > * {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-right: 1px solid var(--box);
  white-space: nowrap;
}

/* The display above would otherwise outrank the browser's own rule for
   hidden, leaving the clip flag showing over a still. */
.lens__bar > [hidden] {
  display: none;
}

.lens__lead b {
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lens__town {
  color: var(--cyan);
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--bar);
}

.lens__spacer {
  flex: 1;
  min-width: 0;
  padding: 0;
  border-right: 0;
}

.lens__date,
.lens__seat {
  color: var(--grey);
}

.lens__seat {
  color: var(--white);
}

.lens__shut {
  border: 0;
  border-left: 1px solid var(--box);
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.lens__shut:hover,
.lens__shut:focus-visible {
  background: var(--cyan);
  color: var(--black);
}

.lens__stage {
  display: grid;
  place-items: center;
  padding: 8px;
}

/* The dialog takes focus itself, so no key looks pressed on opening. */
.lens:focus {
  outline: none;
}

/* Never blown up past what the export wrote, so a frame stays as sharp here
   as the file allows, and uncropped, which is the point of opening it. The
   caps leave room for the bar, the keys and the padding around it. */
.lens__shot {
  display: block;
  max-width: min(94vw - 18px, 882px);
  max-height: calc(94vh - 82px);
  width: auto;
  height: auto;
}

.lens__shot[hidden] {
  display: none;
}

.lens__flag {
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.lens__keys {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 0 0 auto;
  width: 0;
  min-width: 100%;
  height: var(--keys);
  padding: 4px 10px;
  border-top: 1px solid var(--box);
}

.lens__keys .sk {
  flex: 0 0 96px;
  font-size: 13px;
}

.lens__tally {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 0.08em;
}

@media (max-width: 440px) {
  .lens__keys .sk {
    flex: 0 0 72px;
  }

  .lens__town {
    display: none;
  }
}

.field__clip {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--box);
}

.field__count {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--box);
}

.field__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 24px;
  padding: 0 3px 0 7px;
  border-top: 1px solid var(--box);
}

.field__name {
  color: var(--cyan);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field__keys {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.field__keys button {
  width: 24px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--box);
  background: var(--fill);
  color: var(--white);
  font-family: var(--sans);
  font-size: 9px;
  cursor: pointer;
}

.field__keys button:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--black);
}

/* ---------- fields without a photo ---------- */

.strip {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.strip li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.strip b {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.strip span {
  color: var(--cyan);
  font-size: 11px;
}

/* Magenta, not amber: a note is a highlight, not a caution. */
.strip em {
  color: var(--magenta);
  font-style: normal;
  font-size: 11px;
}

.fold {
  margin-top: 8px;
  color: var(--dim);
}

.fold[hidden] {
  display: none;
}

.fold summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.fold summary::-webkit-details-marker {
  display: none;
}

.fold summary::before {
  content: "\25B8";
  color: var(--grey);
}

.fold[open] summary::before {
  content: "\25BE";
}

.fold summary b {
  color: var(--grey);
  font-weight: 400;
}

.fold .strip {
  margin-top: 6px;
}

.fold .strip b,
.fold .strip span {
  color: var(--grey);
}

/* ---------- maneuvers sheet ---------- */

.sheet {
  overflow: auto;
  max-height: calc(100vh - var(--bar) - var(--keys) - 54px);
  scrollbar-width: thin;
  scrollbar-color: var(--box) var(--fill);
}

/* Separate borders, because Chrome will not make cells sticky in a collapsed table. */
.sheet table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  /* Keep the declared column widths and let the sheet scroll instead of squeezing. */
  width: max-content;
}

.sheet th,
.sheet td {
  border-right: 1px solid var(--box-dim);
  border-bottom: 1px solid var(--box-dim);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  width: 250px;
}

/* Column headers and row labels stay pinned while the sheet scrolls. */
.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fill);
  border-bottom-color: var(--box);
  color: var(--cyan);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  vertical-align: bottom;
}

.sheet .rowlabel {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 150px;
  background: var(--black);
  border-right-color: var(--box);
  color: var(--cyan);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.sheet thead .rowlabel {
  z-index: 3;
  background: var(--fill);
}

.sheet .section th {
  width: auto;
  background: var(--fill);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom-color: var(--box);
}

/* The section name rides along so it stays readable in far-right columns. */
.sheet .section span {
  position: sticky;
  left: 8px;
  display: inline-block;
}

.sheet tbody td {
  color: var(--white);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0.01em;
}

.sheet tbody tr:hover td {
  background: #0b0e10;
}

.sheet .line + .line {
  margin-top: 0.5em;
}

/* Numbered steps keep the "1)" and "A." shape of the source sheet. */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  padding-left: 1.9em;
  text-indent: -1.9em;
}

.steps > li::before {
  content: counter(step) ")";
  display: inline-block;
  width: 1.9em;
  text-indent: 0;
}

.steps .substeps {
  margin: 0;
  padding: 0 0 0 1.6em;
  list-style: none;
  counter-reset: substep;
  text-indent: 0;
}

.steps .substeps > li {
  counter-increment: substep;
  padding-left: 1.7em;
  text-indent: -1.7em;
}

.steps .substeps > li::before {
  content: counter(substep, upper-alpha) ".";
  display: inline-block;
  width: 1.7em;
  text-indent: 0;
}

/* ---------- softkeys ---------- */

.softkeys {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  height: var(--keys);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 4px 10px;
  background: var(--black);
  border-top: 1px solid var(--box);
}

.sk {
  display: grid;
  place-items: center;
  border: 1px solid var(--box);
  background: var(--fill);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.sk--on {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.sk--off {
  color: var(--dim);
  border-color: var(--box-dim);
  background: transparent;
}

button.sk {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: inherit;
  cursor: pointer;
  padding: 0;
}

button.sk:hover,
button.sk:focus-visible,
a.sk:hover,
a.sk:focus-visible {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--black);
}

.viewkeys {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-bottom: 6px;
}

.viewkeys[hidden] {
  display: none;
}

.viewkeys .sk {
  height: 16px;
  padding: 0 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.sk--blank {
  border-color: var(--box-dim);
  background: transparent;
}

:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  /* Dropping the blanks leaves the seven keys that actually navigate. */
  .softkeys {
    grid-template-columns: repeat(7, 1fr);
  }

  .sk--blank {
    display: none;
  }

  .databar .tally {
    display: none;
  }

  .sheet th,
  .sheet td {
    width: 220px;
  }

  .sheet .rowlabel {
    width: 110px;
  }
}

/* Seven keys stop fitting across, so the bar runs two rows deep and --keys
   grows to match: it also reserves the body's bottom padding, and without
   that the second row would sit below the viewport. */
@media (max-width: 440px) {
  :root {
    --keys: 50px;
  }

  .softkeys {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .field__track {
    scroll-behavior: auto;
  }
}