/* 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. */

/* ---------- MORE's menu, and the phone's settings (tickets/T146-le-telephone-respire.md) ----------
   Figma 1582:8534. Four lines at every width — Suggest, What's been on,
   Report, About — each with its pixelarticons pictogram drawn at the size of
   its title (40 on the desktop, 24 on the phone); the foot's signature went
   into About. The phone also carries two framed groups at the column's foot,
   Appearance and Audio: the bar gave them up. */
/* Hard left inside, at every width: the menu reads down its pictograms, not
   around a centre — but the block itself is centred in the column (T148), as
   wide as its longest line. `.more > .menu` to beat the column's width: 100%. */
.more > .menu { align-self: center; align-items: flex-start; width: max-content; max-width: 100%; }
/* The frame's sizes at 1440 × 800, times --k past it like the rest of the
   page (large.css): 32 a title and its pictogram, 24 between lines (T148). */
.menu { gap: calc(24px * var(--k, 1)); margin-top: calc(88px * var(--k, 1)); }
.menu__item { display: flex; align-items: center; gap: calc(12px * var(--k, 1)); text-align: left; }
.menu__icon { display: block; flex: none; width: calc(32px * var(--k, 1)); height: calc(32px * var(--k, 1)); }
.menu__title { font-size: calc(32px * var(--k, 1)); line-height: calc(32px * var(--k, 1)); }
.settings { display: none; }

/* About: a few lines, set like a page's body, and the signature. */
.colophon:not([hidden]) {
  display: grid; gap: 16px; align-self: flex-start; width: 100%; max-width: 480px; margin-top: 88px;
  font-size: 16px; line-height: 24px;
  animation: surface 0.9s var(--ease-soft) both;
}
.colophon[hidden] { display: none; }
.colophon__sign { margin-top: 8px; font-size: 14px; line-height: 16px; }

@media (max-width: 640px) {
  .more { padding-inline: 32px; }
  .menu { gap: 40px; margin-top: 40px; }
  .menu__item { gap: 12px; }
  .menu__icon { width: 24px; height: 24px; }
  .menu__title { font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }

  /* The two groups, side by side at the foot: margin-top auto in the column's
     own flex, as the signature did — the column scrolls, a corner would too. */
  .settings:not([hidden]) {
    display: flex; align-items: flex-start; gap: 32px;   /* together, not spread: one panel of settings */
    align-self: stretch; margin-top: auto; padding-top: 40px;
  }
  .settings__group { display: grid; gap: 16px; }
  .settings__group[hidden] { display: none; }
  .settings__label { font: 500 14px/16px var(--font-ui); letter-spacing: -0.035em; text-box: trim-both cap alphabetic; }
  .settings__box {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px 10px;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
  }
  /* The moon and the sparkles, held by a line: the voyage is a night. */
  .settings__night { display: flex; align-items: center; }
  .settings__night > .settings__key + .settings__key::before {
    content: ""; position: absolute; right: 100%; top: 27.5px; width: 12px; height: 1px;
    background: color-mix(in srgb, var(--ink) 16%, transparent);
  }
  .settings__night > .settings__key + .settings__key { margin-left: 12px; }
  /* …and the line goes primary while the voyage is on: the two are one. */
  .settings__night:has([data-look="immersive"][aria-pressed="true"]) > .settings__key + .settings__key::before { background: var(--primary); }
  /* A led 4 above each key: the one lit says which. */
  .settings__key { position: relative; display: grid; justify-items: center; row-gap: 4px; }
  .settings__key:has(> [aria-pressed="true"]) > .led { background: var(--primary); }
  .settings__key[hidden] { display: none; }
  .settings .btn--small { height: 32px; }
  .settings__glyph { width: 32px; padding: 0; }
  .settings__word { padding: 0 8px; }
  /* The key that is on is the house colour (Key · pressed, 1582:8643). */
  .settings .btn[aria-pressed="true"] { background: var(--primary-solid); color: var(--on-primary); }

  .colophon:not([hidden]) { max-width: none; margin-top: 40px; animation-name: surface-flat; }
}