:root {
  /* QFA100 house colours. Unofficial, Qantas-inspired: brand red on a
     near-black flight deck grey, with steel for everything that is only
     information. Red is kept for the brand and for what is live or active,
     never for ordinary text, so it still means something when it appears. */
  --bg: #0b0f14;
  --bg-deep: #080d13;
  --card: #151d26;
  --card2: #1f2937;
  --line: #2f3d4d;
  --hair: #1e2832;
  --text: #ffffff;
  --muted: #9aabbd;
  --dim: #6c7f93;
  --accent: #e4002b;
  --accent-deep: #ba0c2f;
  --accent-soft: rgba(228, 0, 43, 0.13);
  --brand: linear-gradient(110deg, #ba0c2f, #e4002b);
  --link: #a7c3dc;
  --ok: #2ec27e;
  --warn: #f0a63c;
  --bad: #ef4444;
  --info: #4f9bf0;
  --top-h: 58px;
  --tabs-h: 62px;
  --nav-w: 228px;
  --r: 10px;
  --r-sm: 6px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* A little height behind the top of the page so it is not a flat black. */
  background: var(--bg) radial-gradient(1100px 520px at 50% -240px, #131c26 0%, rgba(19, 28, 38, 0) 70%) no-repeat;
  color: var(--text);
  font: 16px/1.45 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

a {
  color: var(--link);
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}
h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* Sub-headings read like the headings on an ops form: small, spaced out,
   and ruled off across the rest of the line. */
h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hair);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.tiny {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tiny a {
  text-decoration: underline;
}
.sub {
  font-size: 0.82rem;
  color: var(--muted);
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}

/* ---- Shell ---- */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: rgba(8, 13, 19, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* The stripe along the bottom of the header, like one down the side of an
   aeroplane. It is the only piece of pure brand on the page. */
.top::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--brand);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  line-height: 1.2;
}
.brand .mark {
  flex: none;
  width: 19px;
  height: 26px;
  background: var(--brand);
  clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%);
}
.brand-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand .tiny {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-name {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: var(--card);
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--top-h) + env(safe-area-inset-top) + 16px) max(16px, env(safe-area-inset-right))
    calc(var(--tabs-h) + env(safe-area-inset-bottom) + 24px) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(8, 13, 19, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hair);
}
.tabs a {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--dim);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tabs a .icon {
  width: 21px;
  height: 21px;
}
.tabs a.on {
  color: var(--text);
}
/* Seven tabs will not take seven labels on a phone. Below this width the bar
   is icons only; the words stay in the page for a screen reader to read out,
   and come back as soon as there is room (and in the sidebar from 900px). */
@media (max-width: 519px) {
  .tabs a span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tabs a .icon {
    width: 25px;
    height: 25px;
  }
}
/* The tab you are on carries the stripe, so the brand marks your place. */
.tabs a.on::before {
  content: '';
  position: absolute;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--brand);
}

/* Signed off at the foot of the side nav; no room for it on a phone. */
.nav-foot {
  display: none;
}

@media (min-width: 900px) {
  .nav-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 16px 12px 6px;
    border-top: 1px solid var(--hair);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.14em;
    color: var(--dim);
  }
  .nav-foot .mark {
    flex: none;
    width: 12px;
    height: 18px;
    background: var(--brand);
    clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%);
    opacity: 0.8;
  }
  .tabs {
    inset: calc(var(--top-h) + env(safe-area-inset-top)) auto 0 0;
    width: var(--nav-w);
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 14px 12px;
    background: var(--bg-deep);
    border-top: 0;
    border-right: 1px solid var(--hair);
  }
  .tabs a {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
  }
  .tabs a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
  }
  /* On the side the stripe runs down the edge of the item instead. */
  .tabs a.on {
    background: var(--accent-soft);
  }
  .tabs a.on::before {
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 2px;
    height: auto;
  }
  main {
    padding-bottom: 40px;
    padding-left: calc(var(--nav-w) + 28px);
    padding-right: 28px;
    max-width: calc(var(--nav-w) + 920px);
  }
}

/* ---- Cards ---- */

.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The label at the top of a list is ruled off, like a heading on a form. */
.card-head > .tiny:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dim);
}
.card-head > .tiny:first-child::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hair);
}
.card-head,
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  padding: 6px 0;
}

.badge {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}
.badge.ok {
  border-color: rgba(46, 194, 126, 0.45);
  background: rgba(46, 194, 126, 0.12);
  color: var(--ok);
}
.badge.info {
  border-color: rgba(79, 155, 240, 0.45);
  background: rgba(79, 155, 240, 0.12);
  color: var(--info);
}
.badge.warn {
  border-color: rgba(240, 166, 60, 0.45);
  background: rgba(240, 166, 60, 0.12);
  color: var(--warn);
}
.badge.bad {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.14);
  color: var(--bad);
}
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.apt {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.route-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.plane {
  width: 26px;
  height: 26px;
  color: var(--accent);
  transform: rotate(45deg);
}
.bar {
  width: 90%;
  height: 3px;
  border-radius: 99px;
  background: var(--card2);
  overflow: hidden;
}
.bar div {
  height: 100%;
  border-radius: 99px;
  background: var(--brand);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}
.metric {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 10px 11px;
}
.metric-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.note strong {
  color: var(--text);
}
.note.warn {
  color: var(--warn);
}
.note.ok {
  color: var(--ok);
}

.sector-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.big {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 0.88rem;
  color: var(--text);
}
.banner > span {
  flex: 1;
}
.banner.warn {
  border-left-color: var(--warn);
  background: rgba(240, 166, 60, 0.08);
  color: var(--warn);
}
.banner.bad {
  border-left-color: var(--bad);
  background: rgba(239, 68, 68, 0.1);
  color: var(--bad);
}
.banner.info {
  border-left-color: var(--info);
  background: rgba(79, 155, 240, 0.08);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 900px) {
  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tile {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
  min-width: 0;
}
.tile:hover {
  border-color: var(--line);
}
.tile .icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.tile-t {
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---- Buttons and forms ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: var(--text);
  background: var(--card2);
  white-space: nowrap;
}
.btn.primary {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn.ghost {
  background: transparent;
  border-color: var(--line);
}
.btn.danger {
  background: transparent;
  border-color: var(--bad);
  color: var(--bad);
}
.btn:disabled {
  opacity: 0.6;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.btn-row > .btn {
  flex: 1;
}
.btn-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn.spin .icon {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form {
  gap: 14px;
}
.form.inline {
  flex-direction: row;
  align-items: flex-end;
}
.form.inline .field {
  flex: 1;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 0;
}
input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* stops iOS zooming in on focus */
}
textarea {
  resize: vertical;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.check input {
  width: 22px;
  min-height: 22px;
  height: 22px;
  accent-color: var(--accent);
}
.form-error {
  margin: 0;
  color: var(--bad);
  font-size: 0.88rem;
}

/* ---- Lists ---- */

.list {
  gap: 0;
  padding: 8px 16px;
}
.list .card-head {
  padding: 8px 0;
}
.list .note {
  padding: 12px 0;
}
.list-day {
  padding: 13px 0 5px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
  color: var(--text);
}
.row:first-child,
.list-day + .row {
  border-top: 0;
}
.row.past {
  opacity: 0.55;
}
.row-main {
  min-width: 0;
}
.row-t {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.table th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.table th,
.table td {
  padding: 8px 8px 8px 0;
  border-top: 1px solid var(--card2);
}
.table thead th {
  border-top: 0;
}

.metar {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg);
  font: 0.85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kvs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.kv {
  display: flex;
  flex-direction: column;
  background: var(--card2);
  border-radius: 10px;
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}
.kv span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ---- Checklists ---- */

.cl-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cl-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.chip-n {
  display: none;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

@media (min-width: 900px) {
  .cl-layout.solo {
    display: block;
  }
  .cl-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  /* On a wide screen the row of checklists stands up into a list. */
  .chip-row {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding: 8px;
    border: 1px solid var(--hair);
    border-radius: var(--r);
    background: var(--card);
  }
  .chip-row .chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border-radius: var(--r-sm);
  }
  .chip-n {
    display: inline;
  }
  .chip.on .chip-n {
    color: rgba(255, 255, 255, 0.75);
  }
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 2px 16px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar {
  display: none;
}
.chip-t {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.chip.done {
  color: var(--ok);
}
.chip.on {
  background: var(--brand);
  color: #fff;
}
.chip .icon {
  width: 16px;
  height: 16px;
}

.cl {
  padding: 16px 0 0;
  overflow: hidden;
}
.cl .card-head {
  padding: 0 16px;
}
.cl-items {
  display: flex;
  flex-direction: column;
}
.cl-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--card2);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cl-box {
  width: 28px;
  height: 28px;
  border: 2px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b0f14;
}
.cl-ch {
  font-weight: 500;
}
.cl-re {
  max-width: 46vw;
  font-weight: 700;
  text-align: right;
  color: var(--link);
}
.cl-item.on {
  background: rgba(46, 194, 126, 0.07);
}
.cl-item.on .cl-box {
  background: var(--ok);
  border-color: var(--ok);
}
.cl-item.on .cl-ch,
.cl-item.on .cl-re {
  color: var(--ok);
}
.cl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card2);
}
.cl-status {
  font-size: 0.85rem;
  color: var(--muted);
}
.cl-foot.done {
  background: rgba(46, 194, 126, 0.14);
}
.cl-foot.done .cl-status {
  color: var(--ok);
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn.spin .icon {
    animation: none;
  }
}

.row > .right {
  flex: none;
  white-space: nowrap;
}

/* ---- Sign-in ---- */

.locked .tabs,
.locked .top-right .icon-btn {
  display: none;
}
.locked main {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-bottom: 32px;
  max-width: 460px;
}
.login {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 4vh;
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
/* The team's logo carries its own black field, so it sits on the page as a
   tile rather than floating. */
.login-brand img {
  border-radius: 18px;
}
.login-logo {
  width: min(230px, 62vw);
  height: auto;
}
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--bg-deep);
}
.seg button {
  min-height: 38px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.seg button.on {
  background: var(--brand);
  color: #fff;
}
/* Bidding has closed, so the choices are there to read, not to press. */
.seg button:disabled {
  cursor: default;
  opacity: 0.55;
}

/* ---- Roster ---- */

fieldset {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
fieldset:disabled input,
fieldset:disabled textarea {
  opacity: 0.75;
}
.btn.small {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.8rem;
}
.report {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card2);
}
.report > span:last-child {
  display: flex;
  flex-direction: column;
}
.crew-line {
  color: var(--text);
}
.sub strong {
  color: var(--text);
}

/* ---- Admin ---- */

/* Who you are signed in as, and the two places only you go. */
.who {
  position: relative;
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card2);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.avatar[aria-expanded='true'] {
  border-color: var(--accent);
}
body.efb .avatar,
.editor .avatar {
  background: var(--accent-soft);
  border-color: rgba(228, 0, 43, 0.5);
}
.locked .who {
  display: none;
}
.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-deep);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.menu[hidden] {
  display: none;
}
.menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 6px;
}
.menu-name {
  font-weight: 700;
}
.menu a,
.menu button {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.menu a:hover,
.menu button:hover {
  background: rgba(255, 255, 255, 0.05);
}
.menu #who-out {
  color: var(--muted);
}
.seg a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-weight: 650;
}
.seg a:hover {
  color: var(--text);
}
.seg a.on {
  background: var(--brand);
  color: #fff;
}
.seg.on-card {
  background: var(--card);
}
.slot-card {
  gap: 10px;
}
.slot-card.short {
  border-left: 3px solid var(--warn);
}
.slot-card.ok {
  border-left: 3px solid var(--ok);
}
.slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.crew-edit {
  padding: 12px 0;
  border-top: 1px solid var(--card2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crew-edit:first-of-type {
  border-top: 0;
}
.legend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 0.85rem;
}
.legend dt {
  font-weight: 600;
}
.legend dd {
  margin: 0;
  color: var(--muted);
}

.role-select {
  flex: none;
  width: auto;
  max-width: 46%;
}

.brand {
  min-width: 0;
}
.brand .tiny {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-right {
  flex: none;
}

.form .list {
  padding: 0;
}

/* ---- Availability and auto roster ---- */

.seg.tabs4,
.seg.tabs5 {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.seg.tabs4 a,
.seg.tabs5 a {
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.86rem;
  text-align: center;
}
.seg.three {
  grid-template-columns: repeat(3, 1fr);
}
.seg button.assumed {
  background: var(--card2);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg button.on.prefer {
  background: rgba(46, 194, 126, 0.2);
  color: var(--ok);
}
.seg button.on.available {
  background: rgba(79, 155, 240, 0.2);
  color: var(--info);
}
.seg button.on.unavailable {
  background: rgba(239, 68, 68, 0.2);
  color: var(--bad);
}
.avail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--card2);
}
.avail:first-child {
  border-top: 0;
}
.field .tiny {
  letter-spacing: 0;
}

.clock-sim {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--dim);
  white-space: nowrap;
}

/* MEL verdict on the tech log */
.mel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: 10px;
}
.mel.ok {
  border-left-color: var(--ok);
}
.mel.bad {
  border-left-color: var(--bad);
}
.mel-text {
  margin: 0;
  white-space: pre-line;
  line-height: 1.45;
}

/* A list row that is a button (MEL search results) */
button.row {
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* MEL procedures, folded under the verdict */
.mel-proc {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.mel-proc summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
}
.mel-proc p {
  margin: 8px 0 0;
  line-height: 1.45;
}
.mel-proc p.step {
  padding-left: 1.6em;
  text-indent: -1.6em;
}
.mel-proc p.loud {
  color: var(--warn);
}
.mel-scroll {
  overflow-x: auto;
  margin-top: 8px;
}
.mel-table {
  border-collapse: collapse;
  font-size: 0.85em;
}
.mel-table td {
  border: 1px solid var(--line);
  padding: 3px 8px;
  white-space: nowrap;
}
.mel > * {
  min-width: 0;
}


/* Who is flying what (Admin → Balance) */
.tally {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.tally th,
.tally td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--card2);
  text-align: left;
  white-space: nowrap;
}
.tally th:first-child,
.tally td:first-child {
  width: 99%;
  white-space: normal;
  padding-left: 0;
}
.tally th:last-child,
.tally td:last-child {
  padding-right: 0;
}
.tally th {
  color: var(--dim);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tally .num {
  text-align: right;
}
.tally tr.dim td {
  opacity: 0.55;
}
.warn-text {
  color: var(--warn);
}
.ok-text {
  color: var(--ok);
}
/* A row whose buttons sit under the text on a narrow screen */
.row .btn-row {
  flex: none;
}

/* A shared tablet strapped to the flight deck: bigger targets, no personal
   content, and a brand line that says which device you are looking at. */
body.efb .brand .tiny {
  color: var(--accent);
}
body.efb .row {
  padding: 15px 0;
}
body.efb .btn,
body.efb select,
body.efb input,
body.efb textarea {
  min-height: 48px;
}
body.efb .tabs a {
  font-size: 0.64rem;
}

/* Stamping off and on blocks on the flight deck: two big boxes side by side */
.stamps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0;
}
.stamp-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 110px;
  padding: 12px;
  border: 2px dashed var(--dim);
  border-radius: 12px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.stamp-box strong {
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.stamp-box.done {
  border-style: solid;
  border-color: var(--ok);
}
.stamp-box:disabled {
  opacity: 0.45;
  cursor: default;
}
.stamp-box.editing {
  cursor: default;
  border-style: solid;
  border-color: var(--link);
}
.stamp-box.editing input[name='time'] {
  width: 100%;
  max-width: 8ch;
  font-size: 1.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stamp-box.editing .btn-row {
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Map: where the aeroplane is, and the route around the world ---- */

.map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  background: var(--bg-deep);
}
.map-sea {
  fill: var(--bg-deep);
}
.map-land {
  fill: #16202b;
  stroke: #263443;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill-rule: evenodd;
}
/* A leg still to fly is faint; one already flown is solid; the one being
   flown now is the brand red, because it is the live one. */
.map-leg {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.map-leg.done {
  stroke: var(--link);
  stroke-dasharray: none;
  opacity: 0.8;
}
.map-leg.active {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: none;
  opacity: 1;
}
.map-mark circle {
  fill: var(--card2);
  stroke: var(--muted);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.map-mark text {
  fill: var(--text);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: var(--bg-deep);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.map-mark.dep circle {
  stroke: var(--link);
}
.map-mark.arr circle {
  fill: var(--accent);
  stroke: var(--accent);
}
.map-plane path {
  fill: var(--text);
  stroke: var(--bg-deep);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.map-wrap {
  position: relative;
  margin: 10px 0 2px;
}
/* A line of figures sitting on the map itself, so the card stays compact. */
.map-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
}

/* Ops board: four counts across the top, each a way in */
.ops-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
}
.ops-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  text-align: center;
}
.ops-n {
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ops-tile.ok .ops-n {
  color: var(--dim);
}
.ops-tile.warn {
  border-color: rgba(240, 166, 60, 0.45);
}
.ops-tile.warn .ops-n {
  color: var(--warn);
}
.ops-tile.bad {
  border-color: rgba(239, 68, 68, 0.5);
}
.ops-tile.bad .ops-n {
  color: var(--bad);
}
.ops-tiles + .card {
  margin-top: 4px;
}

/* Asking to be put on the home screen */
.card.install {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-color: rgba(79, 155, 240, 0.4);
}
.card.install img {
  flex: none;
  border-radius: 10px;
}
.install-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.install-main h2 {
  margin: 0;
}
.install-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.install-steps strong {
  color: var(--text);
}
/* The Share and plus glyphs sit on the line with the words. */
.icon.ios-share {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  color: var(--link);
}

/* The email and password a new account was made with, shown once */
.made {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(79, 155, 240, 0.45);
  border-radius: var(--r-sm);
  background: rgba(79, 155, 240, 0.08);
}
.made .kvs {
  margin-top: 8px;
}
.made .kv strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* ATIS as published, under the controllers working the airport */
.atis {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
}
.atis .card-head {
  margin-bottom: 6px;
}

/* Logbook: figures line up, and your own row is marked */
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.logbook td:first-child {
  font-weight: 600;
}
.logbook tr.mine td {
  background: var(--accent-soft);
}

/* Empty seats on the roster: dashed slots where the crew would be */
.row-main.grow {
  flex: 1;
}
.seat-slots {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.seat-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.seat-slot:hover:not(:disabled) {
  border-color: var(--link);
  background: var(--card2);
}
.seat-slot:disabled {
  cursor: default;
  opacity: 0.5;
}
.seat-duty {
  margin-right: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}
.seat-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  color: var(--link);
  font-weight: 600;
}
.seat-go svg {
  width: 14px;
  height: 14px;
}
.seat-slot.asked {
  border-style: solid;
  border-color: rgba(79, 155, 240, 0.45);
  background: rgba(79, 155, 240, 0.08);
  opacity: 1;
}
.seat-slot.asked .seat-duty {
  color: var(--info);
}

/* A published time that the running has moved on from */
.dim-time {
  color: var(--dim);
  text-decoration: line-through;
  font-weight: 500;
}

/* Search and navigation for non-normal checklists. */
.qrh-search { display: grid; gap: 8px; margin-bottom: 14px; }
.qrh-layout .chip[hidden] { display: none; }
@media (min-width: 900px) {
  .qrh-layout > .chip-row { max-height: 75vh; overflow-y: auto; }
  .qrh-layout .chip-t { white-space: normal; }
}
/* Match normal checklist rows; give prose and decisions room to breathe. */
.qrh-card > .tiny, .qrh-card > .note { margin: 0; padding: 12px 16px; }
.qrh-card > .btn, .qrh-card > .btn-row { margin: 12px 16px; }
.qrh-card .card-head { align-items: flex-start; gap: 16px; }
.qrh-card .card-head h2 { min-width: 0; overflow-wrap: anywhere; }
.qrh-card .card-head .badge { flex-shrink: 0; }
.qrh-block { scroll-margin-top: 110px; border-top: 1px solid var(--card2); }
.qrh-block:focus { outline: 2px solid var(--link); outline-offset: -2px; }
.qrh-check { border-top: 0; line-height: 1.55; grid-template-columns: 28px minmax(0, 1fr) auto; padding: 16px; min-height: 72px; }
.qrh-check:not(:has(.cl-re)) { grid-template-columns: 28px minmax(0, 1fr); }
.qrh-check .cl-ch { overflow-wrap: anywhere; }
.qrh-check .cl-re { max-width: min(240px, 35vw); overflow-wrap: anywhere; }
.qrh-number { color: var(--muted); font-weight: 600; }
.qrh-text { padding: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.qrh-branch > .qrh-text { background: var(--card2); font-weight: 700; color: var(--text); }
.qrh-option { background: var(--card2); }
.qrh-option .cl-box { border-radius: 50%; }
.qrh-note .qrh-text { margin: 12px 16px; padding: 12px 16px; border-left: 3px solid var(--link); background: var(--card2); border-radius: 4px; }
.qrh-context { color: var(--muted); }
.qrh-divider, .qrh-end { color: var(--muted); font-weight: 600; }
.qrh-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px; }
.qrh-finish { margin: 0 16px 16px; }
.qrh-muted { opacity: 0.4; }
.qrh-block button:disabled { cursor: default; }
@media (max-width: 600px) {
  .qrh-card .card-head { flex-wrap: wrap; gap: 8px; }
  .qrh-check { grid-template-columns: 28px minmax(0, 1fr); }
  .qrh-check .cl-re { grid-column: 2; text-align: left; max-width: none; }
  .qrh-links .btn { white-space: normal; text-align: left; }
}

/* System groups replace the long non-normal checklist strip. */
.qrh-library { position: relative; max-height: 38vh; overflow-y: auto; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); }
.qrh-system + .qrh-system { border-top: 1px solid var(--hair); }
.qrh-system[hidden] { display: none; }
.qrh-system summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 600; }
.qrh-system summary::before { content: '›'; color: var(--muted); }
.qrh-system[open] summary::before { transform: rotate(90deg); }
.qrh-system summary > span:first-of-type { flex: 1; }
.qrh-system-list { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 10px; }
.qrh-library .chip { display: flex; justify-content: space-between; width: 100%; gap: 12px; padding: 12px; border-radius: var(--r-sm); }
.qrh-library .chip-t { white-space: normal; overflow-wrap: anywhere; }
.qrh-library .chip-n { display: inline; flex-shrink: 0; font-size: 0.75rem; }
@media (min-width: 900px) { .qrh-library { max-height: 75vh; } }