/* public/src/css/passes.css
   UPCOMING PASSES - the card beside the Live Sky Tracker.

   Loaded after tracker.css on the front page, because .trackerrow and
   .passes-slot are tracker.css's grid and this sheet only fills the slot it
   leaves. Nothing here changes that grid.

   No hex literal anywhere: every colour is a token measured in DESIGN.md's
   table and re-measured by `npm run contrast`. This card introduces NO new
   colour pair - the four class colours, --ink-dim, --signal and --edge on
   --panel, plus --ink-dim and --signal on --panel-lift for the footer note,
   are all already in that table. */

/* The card fills the slot's full height so it stands beside the tracker as
   one object rather than floating at the top of an empty column, which is
   what the mockup draws. Two rules do it: the slot stretches to the row's
   height, and .pc-note's margin-top:auto pushes the note to the foot so the
   slack lands between the rows and the note rather than under the card.

   align-self is the ONE property this sheet sets on the slot, and it is not a
   change to the row: .trackerrow's align-items:start (tracker.css, and not
   ours to touch) leaves both columns at their natural height, so without this
   the card ends where its rows end and floats at the top of an empty column.
   align-self overrides the alignment for THIS grid item only - the tracker
   column is untouched, and below 56rem the row is one column and this is a
   no-op. */
.passes-slot{display:flex;align-self:stretch}
.pc{
  display:flex;flex-direction:column;width:100%;margin-top:0;
}

/* -- header ------------------------------------------------------------ */

.pc-hd{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  border-bottom:1px solid var(--edge);padding-bottom:.75rem;margin:0 0 .35rem;
}
.pc-title{
  display:flex;align-items:center;gap:.5rem;margin:0;min-width:0;
  font-family:var(--f-data);font-size:var(--step-0);line-height:1.2;
  letter-spacing:.06em;text-transform:uppercase;color:var(--signal);
}
.pc-clock{width:1.15rem;height:1.15rem;flex:0 0 auto}
.pc-all{
  flex:0 0 auto;font-family:var(--f-data);font-size:var(--step--1);
  letter-spacing:.04em;color:var(--signal);text-decoration:none;
  border-bottom:1px solid var(--edge);padding-bottom:1px;
}
.pc-all:hover,.pc-all:focus-visible{border-bottom-color:var(--signal)}

/* -- the rows ---------------------------------------------------------- */

/* The list takes the slack. Beside an 822px tracker four rows would otherwise
   sit in the top third of the card with a third of a metre of nothing under
   them; letting the list grow and each row grow with it fills the card the
   way the mockup does, with the hairline borders reading as bands. */
.pc-list{list-style:none;margin:0;padding:0;flex:1 1 auto;display:flex;flex-direction:column}

/* Two rows and three columns:
       badge   name / description        time
       badge   Max Alt / Rises           countdown-column spanned
   The stats get their own row spanning the name and time columns because
   inside the middle column alone they wrap - the card is ~277px of content at
   1440, and `Max Alt: 35°  Rises WNW` does not fit in the ~165px left after
   the badge and the clock. Wrapped, it put the badge and the time out of line
   with the name, which is the first thing that reads as broken.

   minmax(0,1fr) on the middle column is what stops a long object name pushing
   the countdown off the card at 390px - without it the name's intrinsic width
   wins and the row overflows sideways. */
.pc-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"badge head when" "badge stats stats";
  align-items:center;align-content:center;column-gap:.7rem;row-gap:.2rem;
  /* Grow into the slack, but only so far. Uncapped, four rows beside an
     822px tracker become four 150px bands with the content marooned in the
     middle of each and the hairline borders floating in space. Capped, the
     rows read as generous rather than stretched, and what slack is left over
     lands above the note where a gap is normal. */
  flex:1 1 auto;max-height:8.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--edge);
}
.pc-row:last-child{border-bottom:0}

.pc-badge{
  grid-area:badge;
  display:grid;place-items:center;width:2.2rem;height:2.2rem;flex:0 0 auto;
  border:1px solid currentColor;border-radius:50%;
}
.pc-glyph{width:1.25rem;height:1.25rem;display:block}

.pc-body{grid-area:head;display:flex;flex-direction:column;gap:.1rem;min-width:0}

/* The name carries the row's class colour, so it is inherited from .pc-row
   below rather than set here. */
.pc-name{
  font-family:var(--f-data);font-size:var(--step-0);line-height:1.25;
  letter-spacing:.02em;
  /* Real catalogue names run long (COSMO-SKYMED 1, SL-16 R/B DEB). One line,
     clipped, rather than a two-line name that shoves the stats out of the
     card. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* The description wraps rather than clipping, unlike the name above it. The
   four class lines all fit on one line at both viewports; the unknown row's
   `Unidentified (Maybe aliens?)` does not, and a description is a sentence -
   half of one with an ellipsis says less than two short lines do. The name
   clips instead because a truncated identifier is still a usable label and a
   two-line name would shove the stats out of the row. */
.pc-desc{
  color:var(--ink-dim);font-size:var(--step--1);line-height:1.35;
}
.pc-stats{
  grid-area:stats;min-width:0;
  display:flex;flex-wrap:wrap;gap:.15rem .9rem;
  font-family:var(--f-data);font-size:var(--step--1);line-height:1.4;
  color:var(--ink-dim);
}

.pc-when{
  grid-area:when;
  display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;
  flex:0 0 auto;text-align:right;
}
.pc-time{
  font-family:var(--f-data);font-size:var(--step-0);line-height:1.25;
  /* Class colour, like the name. */
}
.pc-count,.pc-filed{
  font-family:var(--f-data);font-size:var(--step--1);line-height:1.3;
  color:var(--ink-dim);
  /* The digits are the one thing on this card that changes every second.
     Tabular figures stop the whole column jittering sideways as 9 becomes 0,
     which is the difference between a countdown and a twitch. */
  font-variant-numeric:tabular-nums;
}

/* The class colour, once, on the row. The badge border is currentColor and
   the name and time inherit, so one declaration paints all three - and the
   short names are tracker.css's, so a row and its blip on the dome are the
   same colour by construction. */
.pc-row.pay{color:var(--sky)}
.pc-row.star{color:var(--iris)}
.pc-row.rkt{color:var(--amber)}
.pc-row.deb{color:var(--rose)}
.pc-row.unk{color:var(--rose)}

/* -- the silent states ------------------------------------------------- */

.pc-quiet{
  margin:1.2rem 0;font-family:var(--f-data);font-size:var(--step--1);
  line-height:1.6;letter-spacing:.04em;color:var(--ink-dim);
}

/* -- the note (Marginalia, and last) ----------------------------------- */

/* margin-top:auto pins it to the bottom of the card however tall the slot
   is, which is what makes the card the same height as the tracker with the
   note along its foot rather than a gap under the rows. */
.pc-note{
  display:flex;align-items:center;gap:.75rem;margin-top:auto;
  border:1px solid var(--edge);border-radius:var(--radius);
  background:var(--panel-lift);padding:.7rem .85rem;
}
.pc-alien{width:2.4rem;height:2.4rem;flex:0 0 auto;display:block}
.pc-note-l{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pc-psst{
  font-family:var(--f-hand);font-size:var(--step-1);line-height:1.15;
  color:var(--signal);
}
.pc-just{
  font-family:var(--f-hand);font-size:var(--step-0);line-height:1.2;
  color:var(--ink-dim);
}

/* -- print ------------------------------------------------------------- */

/* The site prints as paper. This card is glass - live times and a countdown
   that is wrong the moment ink hits the page - so it does not go on it. */
@media print{
  .pc{display:none}
}