/* The pilot picker on the splash screen. Cards come from the event registry,
   so this file only cares how one card is laid out — the panel around them is
   part of the rack, and overlay.css draws that. */

/* The count beside the label. It is the one number on this panel nobody has
   to earn, and it is here because the box below stopped growing: a fixed
   height with more cards than fit needs to say how many more. */
.pilot h2 .pcount {
  margin-left: auto;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* The room, dealt into pages that do not grow. Every other panel on the deck
   is as tall as what is in it, and this one used to be too — fine at four
   pilots, and at twelve it would push the board and the book off a laptop
   without anybody deciding it should.

   It was a scroll box for a while, which held the height and lost the room:
   nobody drags a list on a splash screen, so the fifth pilot may as well not
   have been there. Now it is four to a page on a track that slides, and the
   whole track lives in the DOM — which is what makes the panel the same height
   on every page, since the tallest page sets it once and nothing moves after.

   The clip is the window. Pages either side of this one are laid out at their
   full width and simply are not in it. */
.pilotdeck { position: relative; }
.pilotroll { overflow: hidden; }
.pilottrack {
  display: flex;
  align-items: stretch;
  transition: transform 0.42s cubic-bezier(0.22, 0.75, 0.24, 1);
}
/* auto-fill, not auto-fit: one pilot gets a card the size of a card, rather
   than one card the width of the panel */
.pilot .pilots {
  flex: 0 0 100%;
  /* a flex item will not go below its own content without this, and a page
     that will not shrink pushes its cards out through the clip */
  min-width: 0;
  display: grid;
  /* min() rather than a bare 11rem: on a panel narrower than one card, the
     track becomes the panel instead of overflowing it by the difference */
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: 0.5rem;
  align-content: start;
  /* the cards keep their own edges off the clip, and a page that is not the
     one showing is still laid out so the track knows how tall to be */
  padding: 0.15rem 0.2rem;
}

/* The pager. Two arrows, a dot per page and the count between them — the
   count because a row of dots stops being countable at about six, and the
   dots because an arrow on its own never says how much room is left. */
.pilotpager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.pstep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  padding: 0;
  background: rgba(12, 5, 24, 0.34);
  border: 1px solid rgba(160, 75, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
  color: var(--cyan);
  cursor: pointer;
  transition: border-color 0.16s, color 0.16s, background 0.16s, box-shadow 0.16s;
}
.pstep .ic { width: 0.9rem; height: 0.9rem; transform: rotate(180deg); }
.pstep.next .ic { transform: none; }
.pstep:hover:not(:disabled) {
  border-color: var(--cyan);
  background: rgba(33, 243, 255, 0.12);
  box-shadow: 0 0 14px rgba(33, 243, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* Kept in place rather than hidden at the ends, so the two buttons never move
   under a thumb that is pressing one of them repeatedly. */
.pstep:disabled { opacity: 0.28; cursor: default; }
.pdots { display: flex; align-items: center; gap: 0.32rem; margin-right: auto; }
.pdot {
  width: 0.42rem;
  height: 0.42rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(160, 75, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pdot:hover { background: rgba(33, 243, 255, 0.7); }
.pdot.on {
  background: var(--cyan);
  transform: scale(1.5);
  box-shadow: 0 0 9px rgba(33, 243, 255, 0.65);
}
.pof {
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.pof i { font-style: normal; opacity: 0.5; margin: 0 0.12rem; }
.pilotcard {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.7rem;
  /* Same material as the panel it sits in, one layer up. No second blur: the
     panel has a filter on it, which makes it a backdrop root, so a nested
     backdrop-filter would only ever sample the frost it is already standing
     on. A lit top edge is what does the work at this size anyway. */
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.012) 58%),
    rgba(12, 5, 24, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(160, 75, 255, 0.35);
  color: var(--dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pilotcard:hover:not(:disabled) {
  border-color: rgba(33, 243, 255, 0.6);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pilotcard.on {
  border-color: var(--cyan);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 58%),
    rgba(33, 243, 255, 0.09);
  color: var(--ink);
  box-shadow: 0 0 18px rgba(33, 243, 255, 0.22),
              inset 0 0 22px rgba(33, 243, 255, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Locked to a git identity: still the seat, just not a choice. */
.pilotcard:disabled { cursor: default; opacity: 1; }
.pilotcard.on:disabled {
  border-color: var(--lime);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 58%),
    rgba(182, 255, 61, 0.07);
  box-shadow: 0 0 18px rgba(182, 255, 61, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pilotcard.on:disabled .pname { color: var(--lime); }

.pilotcard .pname {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--ink);
}
/* Two small numbers used to sit under a name in two shades of small: how many
   events this pilot has out, and how many rules they have bent. Both read as
   "0.6rem, amber-ish" at a glance, which is no help at all when one of them is
   a boast and the other is a sentence. So each gets a glyph, and the glyph is
   the thing you actually read — teeth for an event, a bent rule for a bend. */
.pilotcard .pmeta {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.pilotcard .pmeta .ic { width: 0.78rem; height: 0.78rem; }
/* A pilot with nothing out yet gets the outline of an event and no glow: the
   card says "no events written", and it should look like an empty rack. */
.pilotcard .pmeta .cold { opacity: 0.5; filter: none; }
.pilotcard:not(.on) .pmeta { color: var(--dim); }

/* The service record: versions landed and flights on the board, counted off
   the record by machines. A boast in the same quiet voice as the rest of the
   card - the loud version is the trim the hull wears in the field. */
/* Two facts and a dot between them, which is a line and a half on a phone. A
   grid rather than a row: the words need to wrap for the card to narrow, and
   in a flex row they wrap by leaving the chevron behind on a line of its own.
   Two columns puts the chevron beside the block instead of beside the first
   line of it. */
.pilotcard .pserv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.34rem;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
/* nudged down to sit on the first line of the words rather than above them */
.pilotcard .pserv .ic { width: 0.72rem; height: 0.72rem; margin-top: 0.06rem; }
.pilotcard:not(.on) .pserv { color: var(--dim); }

/* Only ever there for a pilot who has bent something. GR12. Three is where
   their own events stop sparing them, so three is where it stops being an
   annotation and starts being lit. */
.pilotcard .pbends {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
}
.pilotcard .pbends .ic { width: 0.72rem; height: 0.72rem; }
.pilotcard .pbends.hot {
  color: var(--magenta);
  text-shadow: 0 0 9px currentColor;
}
.pilotcard .pbends.hot .ic { animation: bendpulse 2.4s ease-in-out infinite; }
@keyframes bendpulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.pilotarmed {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.55rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--magenta);
  text-shadow: 0 0 10px currentColor;
  font-variant-numeric: tabular-nums;
}
.pilotarmed .ic { width: 0.85rem; height: 0.85rem; }
/* Something out there is actually pointed at this seat. The crosshair closes
   in and lets go, once every three seconds, which is the whole animation
   budget this screen needed to stop being a list of facts. */
.pilotarmed.live .ic { animation: aimlock 3s ease-in-out infinite; }
@keyframes aimlock {
  0%, 70%, 100% { transform: none; opacity: 1; }
  80% { transform: scale(0.82) rotate(45deg); opacity: 0.75; }
  90% { transform: scale(1.08) rotate(90deg); }
}
.pilotnote {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--dim);
  text-wrap: pretty;
}

/* The note explains the one rule the whole cabinet turns on, and it used to be
   the first thing dropped because the splash was one column and everything was
   fighting for the fold. In a right-hand column with the seats under it there
   is room for it on any screen worth reading it on. */
@media (max-height: 700px) {
  .pilotnote { display: none; }
}
@media (max-height: 940px) {
  .pilotcard { padding: 0.4rem 0.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pilotcard .pbends.hot .ic, .pilotarmed.live .ic { animation: none; }
  /* the page still turns, it just arrives rather than travelling */
  .pilottrack { transition: none; }
  .pdot { transition: none; }
}