/* One sheet of the player's design system (tickets/T19-room-for-two.md).
   style.css keeps the fonts, the tokens and the reset; every area has its
   own file from there, linked in index.html in this order — the cascade is
   the order of the <link>s, not of a bundler. A ticket works in its sheet.
   No @import: it serialises the requests, which is the cost being avoided. */

/* ---------- Small desktop: the narrow frame ---------- */
/* Figma frame `Radio · Small Desktop` (1024 x 606) against `Radio · Desktop`
   (1440 x 760): the whole package — 56 margin, the 40px headline, the 100
   sleeve, a 288 credits column — is what the 1024 WIDTH is drawn for. It is a
   width decision, and only a width decision: a wide window that is merely
   short keeps the big type (see the height ladder below). */
@media (min-width: 641px) and (max-width: 1024px) {
  :root { --margin: 56px; --pad-bottom: 59px; }
  .schedule { display: none; }   /* the 1024 frame does not carry the row, at any height */
  .stage { margin-top: 48px; }
  /* `Display/Interstitial` is its own style, not the 100 shrunk: 40/40 and -1 %
     of tracking where the big one carries -3. The cap here; programme.js fits
     under it, and sets the tracking with the size. */
  .stage { --headline-max: 40px; }
  .cover { width: 100px; height: 100px; }
  /* 16 between the rows instead of 20: the 48 grab still clears the graduation
     by 2.5 (it overhangs the rail by 13.5, T64). */
  .volume { row-gap: 16px; }
}

/* ---------- Between the two frames ----------------------------------------
   There used to be a step here: the 40px type from 1025 to 1199, because a
   long mood at 100 ran off the window under ~1160. The size is fitted to the
   room now (player/programme.js), which is what that step was guessing at. */

/* The place and the temperature go at the same step, not at 900. The right
   group is 590 wide at full content once the bench (T41) and a whole name sit
   in it — against a deck of 299 and 160 of margin, the clock was against
   STEREO at ~1030. Under 1200 they are the two items the bar can best do
   without: the clock says when, the theme and the people are commands. */
@media (max-width: 1199px) {
  .meta__place, .meta__temp { display: none; }
}

/* ---------- A window short on height ---------- */
/* The page gives up rows in the order the height stops paying for them, and
   nothing sooner. Measured on the desktop layout at 1440: everything down to
   780, then the schedule is the row that no longer fits; without it the 100px
   headline and the 127 sleeve still hold to 671, the elastic stage margin
   closing from 116 to 32 on the way. Below that, and only there, the height
   borrows the 1024 frame's type and sleeve. */
@media (min-width: 641px) and (max-height: 779px) {
  .schedule { display: none; }
}
@media (min-width: 641px) and (max-height: 670px) {
  :root { --pad-bottom: 59px; }
  .stage { margin-top: 48px; --headline-max: 40px; }
  .cover { width: 100px; height: 100px; }
  .volume { row-gap: 16px; }
}

/* Under ~900 the deck and the meta no longer fit on one line: the bar gives up
   what the phone gives up — the middle volume presets (the place and the
   temperature went already, under 1200). */
@media (min-width: 641px) and (max-width: 900px) {
  .steps .hit:not([data-level="0"]):not([data-level="100"]) { display: none; }
  /* MONO and STEREO both stay: they were two words reading out the output, and
     they are two keys now (tickets/T14). A key you cannot reach is not a key —
     and there is room for the pair here. The phone still keeps one. */
  /* No floor under the row any more. It held a 400 spread for the clock,
     the theme and the account key once the place and the temperature were
     gone — but they go under 1200 now (above), and with the bench (T41) the
     row is wide enough on its own. A floor with nothing to fill it pushed the
     clock to the left end of an empty 400 (seen at 790). The row hugs its
     content and sits against the right margin, as the bar lays it out. */
}


/* ---------- Phone ---------- */
/* Up to 640, not 540: between the two the desktop row had no room left —
   the headline pushed the sleeve against it and the title was cut to a few
   letters. The phone's column holds it at every width up to there. */
@media (max-width: 640px) {
  .bar { height: 24px; }
  .deck { gap: 12px; }
  .hit { color: var(--ink); }
  /* The bar breathes (T146, Figma 1580:7335): the radio on the left, the bench
     and the account on the right, nothing else. The output and the theme went
     to the foot of MORE (css/settings.css); the fader is the volume. */
  .transport, .steps, .mode, .theme-toggle { display: none; }
  .deck { align-self: flex-start; }
  .meta > *:not(.theme) { display: none; }
  /* The 400 floor of page.css is the spread of the desktop frame's four items:
     here there is one left, and a floor wider than the bar itself is not a
     spread — it is a box that starts under the deck, with the theme keys drawn
     on top of STEREO. The floor goes, the group hugs the right edge. */
  .meta { width: auto; min-width: 0; }
  .schedule { display: none; }
  /* Figma `Radio · Mobile — Light` (1500:7014, 393 x 852), and T45
     (tickets/T45-le-disque-passe-devant.md): the record is the object of the
     page. The mood steps down to `Display/Interstitial`, the sleeve takes the
     whole column, and the keys and the rail stand together at the foot. */
  .stage { flex-direction: column; align-items: stretch; gap: 0; margin-top: 24px; min-height: 0; }   /* cap line on 76 (84 until T146) */
  .headline { font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
  .now { flex: 1; min-height: 0; flex-direction: column; align-items: stretch; gap: 24px; margin-top: 32px; }   /* the sleeve on 124; 24 to the credits (asked 24/09 — 12 read as one block) */
  /* Square, and as wide as the column — 329 on the frame. The height is what
     gives on a short window (the width follows it, through the ratio); on a tall
     one it stops at the column's width and the rest of the room opens above the
     volume, not inside the sleeve. */
  .cover {
    flex: 1 1 auto;
    align-self: start;   /* stretch would take the width and drop the ratio */
    aspect-ratio: 1;
    width: auto;
    height: auto;
    min-height: 96px;
    max-height: calc(100vw - 2 * var(--margin));
  }
  /* The credits and their two keys are stage.css's, at every width (T45). On a
     finger's screen the keys do not wait under a pointer: there is none. */
  .track { flex: none; width: auto; }
  .track__keys { opacity: 1; }
  /* The least room between the record and the controls is 24 here (40 until
     T146), and the rail is 24 above the keys (36): every pixel the foot gives
     back is a pixel of sleeve, and the sleeve wants the whole column. */
  .volume { margin-top: 24px; }
  .actions { margin-top: 24px; }
}

/* The name in the bar is the last thing that arrived and the first that goes:
   the header is already full at 900, and the face is what identifies — a name
   that pushes the clock out of the bar says less than no name at all
   (tickets/T25-the-bar-knows-you.md). Under 641 the whole .meta row is down to
   the theme and this key, so there is nothing left to give. */
@media (max-width: 900px) {
  .hit--me .me__name { display: none; }   /* over drawer.css, which is linked after this sheet */
}