:root { color-scheme: dark; --blue: #4496F7; --base: #1F2124; --raised: #2E3034; --muted: #D4D7D8; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--base); color: #fff; font: 15px/1.55 'IBM Plex Sans', sans-serif; }
header, main { max-width: 1240px; margin: auto; padding: 28px 36px; }
/* Three columns, the outer two equal, so the title sits in the middle of the
   page rather than in the middle of what is left over. The third column is
   declared even while the account block is hidden, which is what keeps the
   title centred on the sign-in screen too. */
header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
         border-bottom: 1px solid #45484c; border-top: 3px solid var(--blue); }
header .brand { justify-self: start; display: block; height: auto; opacity: .92; }
header h1 { justify-self: center; }
header #identity { justify-self: end; }
h1 { font-size: 28px; margin: 0; font-weight: 500; letter-spacing: -.6px; }
h2 { font-size: 23px; margin: 0 0 10px; font-weight: 500; }
h3 { font-size: 18px; margin: 0 0 10px; }
p { color: var(--muted); margin: 8px 0 20px; }
.eyebrow, .mono, th, .badge { font-family: 'IBM Plex Mono', monospace; }
.eyebrow { font-size: 11px; letter-spacing: 2px; color: var(--blue); }
#identity { display: flex; gap: 18px; align-items: center; }
#account { color: var(--muted); font-size: 13px; }
#notice { min-height: 24px; margin: 0 0 18px; color: var(--muted); }
#notice.error { color: #ff9289; }
.card { background: var(--raised); border: 1px solid #45484c; border-radius: 10px; padding: 24px; margin: 0 0 20px; }
.login { max-width: 470px; margin: 30px auto 80px; }
.login h2 { margin-top: 10px; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
input, select, button { font: inherit; }
input, select { width: 100%; min-width: 0; background: var(--base); color: #fff; border: 1px solid #646970; border-radius: 5px; padding: 10px 12px; }
input::placeholder { color: #979DA4; }
input[type=file] { padding: 8px; }
button { border: 1px solid #727780; border-radius: 5px; background: transparent; color: #fff; padding: 9px 15px; cursor: pointer; }
button:hover { border-color: var(--blue); }
button.primary { background: var(--blue); border-color: var(--blue); color: #101c2b; font-weight: 600; }
button.danger { color: #ff9289; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
nav { display: flex; gap: 8px; border-bottom: 1px solid #45484c; margin-bottom: 30px; padding-bottom: 16px; }
nav button { border-color: transparent; }
nav [aria-current=page] { background: var(--raised); border-color: var(--blue); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.grid .card { margin: 0; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row > label { flex: 1; min-width: 120px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bitmap { width: 160px; height: 128px; image-rendering: pixelated; background: #000; border: 1px solid #52565d; border-radius: 3px; }
.preview { display: flex; gap: 24px; align-items: center; margin: 10px 0; }
.badge { font-size: 11px; color: var(--blue); }
.muted { color: var(--muted); }
small { color: var(--muted); }
details { border-top: 1px solid #52565d; margin-top: 24px; padding-top: 16px; }
summary { cursor: pointer; color: var(--muted); }
details p { margin-top: 16px; }
@media (max-width: 640px) {
  header, main { padding: 22px 18px; }
  /* Too narrow for three columns: the title drops under the mark. */
  header { grid-template-columns: 1fr auto; row-gap: 12px; }
  header h1 { grid-column: 1 / -1; justify-self: start; font-size: 22px; }
  #identity { align-items: flex-end; flex-direction: column; gap: 8px; }
  #account { max-width: 150px; overflow-wrap: anywhere; }
  .card { padding: 18px; }
}

/* The fleet as one list: a serial is a thing you scan down a column for. */
table { width: 100%; border-collapse: collapse; margin: 4px 0 20px; }
th { text-align: left; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #979DA4; font-weight: 400;
     padding: 0 14px 10px 0; border-bottom: 1px solid #45484c; white-space: nowrap; }
td { padding: 13px 14px 13px 0; border-bottom: 1px solid #33363a; vertical-align: top; font-size: 14px; }
tbody tr:hover { background: #26282c; }
td .actions { margin: 0; justify-content: flex-end; }
td .muted { color: #757b82; }

.search { gap: 0; flex: 1; min-width: 200px; max-width: 420px; }
.search input { padding-left: 14px; }
.row + table { margin-top: 14px; }

/* The three steps of publishing a mark, in the order they happen. */
.workflow { padding: 0; overflow: hidden; }
.step { padding: 24px; border-bottom: 1px solid #45484c; display: grid; gap: 16px; }
.step:last-child { border-bottom: 0; }
.step.locked { opacity: .45; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-head h3 { margin: 0; }
.step-number { font-family: 'IBM Plex Mono', monospace; font-size: 12px; width: 26px; height: 26px; flex: none;
               display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--blue); color: var(--blue); }
.step-hint { margin: -8px 0 0; font-size: 13.5px; }
.step > .actions { margin-top: 0; }

/* Picking one box out of the fleet, without leaving the workflow. */
.picker { display: grid; gap: 10px; }
.picker-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 36px; }
button.pick { font-size: 13px; padding: 7px 12px; }
button.pick[aria-pressed=true] { border-color: var(--blue); background: #16243a; color: #fff; }
.badge.bad { color: #ff9289; }

@media (max-width: 760px) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { border: 1px solid #45484c; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
  td { border: 0; padding: 4px 0; }
  td .actions { justify-content: flex-start; margin-top: 8px; }
}

/* A dropped set, one tile per airline: the code, the bitmap, the verdict. */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.result { display: grid; gap: 6px; justify-items: center; padding: 12px; border-radius: 8px;
          border: 1px solid #52565d; background: var(--base); text-align: center; }
.result .bitmap { width: 120px; height: 96px; }
/* No mark yet: the aircraft the box would be drawing a logo for, dimmed so a
   row that needs artwork reads as absence rather than as a pale logo. */
.bitmap.empty { display: grid; place-items: center; }
.bitmap.empty svg { width: 62%; fill: #464b53; }

.result:disabled { opacity: .55; cursor: default; }
.result[aria-pressed=true] { border-color: var(--blue); background: #16243a; }

/* The fold-out under a mark: which box to show it on. */
.send-mark { display: grid; gap: 12px; padding: 4px 0 10px; max-width: 520px; }
.send-mark .actions { margin-top: 0; }

/* A mark somebody is looking at on a wall right now. */
.badge.live { color: #3fd58f; }

/* A checkbox reads as a row, not as a stacked field. */
label.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }
label.check input { width: auto; flex: none; margin-top: 2px; }

/* The box a test is aimed at: a chip, so it cannot read as typed-in text. */
.chosen-box { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
              background: #16243a; border: 1px solid var(--blue); border-radius: 999px;
              padding: 8px 16px; width: fit-content; }
.chosen-box strong { font-size: 15px; letter-spacing: .04em; }
.chip-label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); }
button.link { border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: 13px; }
button.link:hover { color: #fff; border-color: transparent; }

/* The guide: a numbered walk-through with a picture of the panel per step. */
ol.guide { list-style: none; counter-reset: none; padding: 0; margin: 0; max-width: 62rem; }
ol.guide > li { margin: 0 0 2.5rem; padding: 0 0 2rem; border-bottom: 1px solid #2c3037; }
ol.guide > li:last-child { border-bottom: 0; }
ol.guide h3 { margin: 0 0 .35rem; }
ol.guide p { margin: .35rem 0; max-width: 46rem; }
/* Bordered, because the screenshots are of this page and would otherwise
   bleed into it. */
img.shot { display: block; margin: 1rem 0 0; max-width: 100%; border: 1px solid #3a3f47; border-radius: 4px; }
ul.guide-notes { max-width: 46rem; }
ul.guide-notes li { margin: .3rem 0; }