/* The room's queue (tickets/T58-la-file-de-la-salle.md).

   A column on the right, over the page since T146 (it made room for itself
   before), folded to a rail until it is asked for. Under 1024 there is no room to give: it folds to a strip at the foot
   of the page, and unfolds as a sheet from the bottom. The bench in the bar
   marks who is at the decks (at the end of this file). */

/* On the root: the page reads them too, to make room. */
:root {
  --jam-w: 360px;       /* the column, its 12 of air included */
  /* A spring, written out: it settles past its mark by ~4 % and comes back,
     once — the glass arrives, it does not bounce (Liquid Glass, asked 25/09). */
  --jam-spring: linear(0, 0.06 3%, 0.23 6.5%, 0.45 10.5%, 0.68 15%, 0.87 19.7%, 0.985 24.5%, 1.03 28.5%, 1.042 32%, 1.036 36%, 1.018 42%, 1.002 50%, 0.996 58%, 0.998 70%, 1);
}
.jam[hidden] { display: none; }

/* The same glass, lent to the record's card and the account (lib/glass.js):
   while a sheet travels, a pane wearing its material moves from the key to
   the card, and the card lays its own material down until the pane is gone. */
.glass { position: fixed; pointer-events: none; corner-shape: squircle; }
.is-bare { background: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- The column: a pane of glass that grows out of its capsule ----------
   The box is always the column's full size and lets the pointer through; what
   moves is the glass under the content — one element, its edges and corners
   travelling from the capsule to the pane on the spring. Nothing inside is
   ever re-laid out: the card is drawn at its final width from the start and
   only comes into focus once the glass is there. */
.jam {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1;   /* the page's rung, later in the body: over the page, under MORE, the card and the account (T146) */
  width: var(--jam-w);
  pointer-events: none;
  /* Where the glass is folded, and unfolded. */
  --g-top: 32px; --g-right: 12px; --g-bottom: calc(100% - 32px - 136px); --g-left: calc(100% - 12px - 40px); --g-r: 20px;
}
.jam.is-unfolded { --g-top: 12px; --g-right: 12px; --g-bottom: 12px; --g-left: 12px; --g-r: 24px; }

.jam__glass {
  position: absolute;
  top: var(--g-top); right: var(--g-right); bottom: var(--g-bottom); left: var(--g-left);
  border-radius: var(--g-r);
  corner-shape: squircle;
  /* The material of the house's other sheets, to the letter (about.css,
     drawer.css): 90 % of the page's own colour over a light blur, a hairline,
     a soft drop. No light from the top edge — neither of the others has one. */
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--ink-muted), 0 4px 40px rgba(0, 0, 0, 0.06);
  /* Folding back: quicker, and no spring — it goes home, it does not land. */
  transition: top 0.42s var(--ease-soft), right 0.42s var(--ease-soft), bottom 0.42s var(--ease-soft), left 0.42s var(--ease-soft), border-radius 0.42s var(--ease-soft);
}
.jam.is-unfolded .jam__glass {
  transition: top 0.72s var(--jam-spring), right 0.72s var(--jam-spring), bottom 0.72s var(--jam-spring), left 0.72s var(--jam-spring), border-radius 0.72s var(--jam-spring);
}

/* OVER THE PAGE, UNDER EVERY SHEET (T146). Docked, the column used to take
   its 360 from the page — the stage slid left, the mood shrank, MORE, the
   record's card and the account all stood aside for it. It no longer moves
   anything: it lies over the page's right edge, folded to its capsule until it
   is asked for, and every other sheet opens over it (z 2 and 3 to its 1). */
/* MORE has no paper of its own — the page sinks under a blur instead — so
   the Jam sinks with the page, the same blur on the same clock (more.css). */
.jam { transition: filter 0.8s var(--ease-soft), opacity 0.8s ease; }
body.is-more .jam { filter: blur(8px); opacity: 0.4; pointer-events: none; }
body.is-more .jam * { pointer-events: none !important; }
/* The capsule's face: a led, the word on its side, how many are waiting. It
   goes first when the glass opens, and comes back once the glass is home. */
.jam__tab {
  position: absolute; top: 32px; right: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 40px; height: 136px; padding: 16px 0;
  color: var(--ink);
  pointer-events: auto;
  transition: opacity 0.3s ease 0.3s, visibility 0s linear 0s;
}
.jam.is-unfolded .jam__tab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
.jam__tab-word { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.jam__tab-n { font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.jam__tab-n:empty { display: none; }
.jam__tab-next { display: none; }
.jam__tab-chev { margin-top: auto; }
@media (hover: hover) { .jam__tab:hover { color: var(--primary); } }
/* The led says the room can add: lit while open, the control's grey once the
   queue is only playing out. */
.jam__led { flex: none; }
.jam.is-open .jam__led { background: var(--primary); animation: jam-live 2.4s ease-in-out infinite alternate; }

/* The card: at its final size from the first frame, out of focus until the
   glass is under it, then each part comes into focus in turn. */
.jam__card {
  position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Its title and cross on the line of MORE's (more.css): the bar starts at
     --pad-top from the window, the card 12 under it. */
  padding: calc(var(--pad-top) - 12px) 24px 24px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  visibility: hidden;
  transition: visibility 0s linear 0.2s;
}
.jam.is-unfolded .jam__card { visibility: visible; pointer-events: auto; transition: none; }
.jam__card::-webkit-scrollbar { display: none; }
.jam__card > * {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px) scale(0.985);
  transform-origin: top right;
  /* Out over the road, not in a blink under it, and on the house's clock. */
  transition: opacity var(--part-out) ease-in, filter var(--part-out) ease-in, transform var(--part-out) ease-in;
}
/* ONE SHAPE FOR AN ARRIVING PART, everywhere. It used to be three moves on
   three clocks and two curves — opacity on 0.42 soft, the blur on 0.5, the
   rise on 0.6 and the SPRING — while lib/glass.js gave the other two sheets
   one move on one. Three sub-animations inside a fourth is what "le contenu
   apparaît différemment selon les modales" was (27/09). One duration, one
   curve, for everything a part does. */
.jam.is-unfolded .jam__card > * {
  opacity: 1; filter: none; transform: none;
  transition: opacity var(--part-in) var(--ease-soft) var(--d), filter var(--part-in) var(--ease-soft) var(--d), transform var(--part-in) var(--ease-soft) var(--d);
}
.jam__card > :nth-child(1) { --d: var(--part-lead); }
.jam__card > :nth-child(2) { --d: calc(var(--part-lead) + var(--part-step)); }
.jam__card > :nth-child(3) { --d: calc(var(--part-lead) + 2 * var(--part-step)); }
.jam__card > :nth-child(n + 4) { --d: calc(var(--part-lead) + 3 * var(--part-step)); }

.jam__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.jam__heading { display: grid; gap: 10px; }
/* A row as tall as the cross, the word in its middle — as in MORE's bar. */
.jam__title { display: flex; align-items: center; gap: 8px; min-height: 24px; font: 500 14px/16px var(--font-ui); letter-spacing: -0.035em; text-box: trim-both cap alphabetic; }
.jam__state { font-size: 12px; line-height: 16px; }
/* The way out, as every sheet of the house draws it: the close glyph at 24
   (about.css, drawer.css). Folding the column is closing it. */
.jam__close { position: relative; display: block; width: 24px; height: 24px; flex: none; color: var(--ink); }
.jam__close .icon { width: 24px; height: 24px; }
.jam__close::before { content: ""; position: absolute; inset: -10px; }   /* 44 for a finger */
@media (hover: hover) { .jam__close:hover { color: var(--primary); } }

/* ---------- Under 1024: a pill in the bar, a sheet that grows out of it ----------
   No column and no strip: the Jam is a pill in the top bar, beside the bench
   (asked 25/09). Unfolding, the glass starts exactly where the pill is
   (--pill-*, measured by jam.js at that moment) and grows into the sheet under
   the bar; folding, it shrinks back into the pill and goes out. */
.jam-pill { display: none; }
@media (max-width: 1023px) {
  .jam {
    top: 0; left: 0; width: auto;
    --g-top: var(--pill-top, 24px); --g-left: var(--pill-left, 50%);
    --g-right: calc(100% - var(--pill-left, 50%) - var(--pill-w, 64px));
    --g-bottom: calc(100% - var(--pill-top, 24px) - var(--pill-h, 24px));
    /* The pill's own shape, written as HALF ITS HEIGHT and not as radius/full.
       On the box it is a capsule either way — the browser clamps a corner to
       half the shorter side. But the corner is on the road with the box, and a
       999 travelling from the pill to a full screen stays bigger than half of
       everything it passes through: for the first tenth of a second the glass
       was a black EGG the size of a third of the page, crossing the record.
       Seen on a phone, 27/09. Twelve is the same capsule here and never over-
       rounds anything on the way. */
    --g-r: calc(var(--pill-h, 24px) / 2);
  }
  .jam.is-unfolded { --g-top: 64px; --g-right: 0px; --g-bottom: 0px; --g-left: 0px; --g-r: 28px 28px 0 0; }
  /* Folded, the glass is the pill's own size and sits under it: out of sight,
     it goes after it has shrunk home; unfolding, it is there at once. */
  .jam__glass { opacity: 0; transition: top var(--sheet-out) var(--ease-home), right var(--sheet-out) var(--ease-home), bottom var(--sheet-out) var(--ease-home), left var(--sheet-out) var(--ease-home), border-radius var(--sheet-out) var(--ease-home), opacity 0.12s linear calc(var(--sheet-out) - 0.06s); }
  .jam.is-unfolded .jam__glass { opacity: 1; transition: top var(--sheet-in) var(--jam-spring), right var(--sheet-in) var(--jam-spring), bottom var(--sheet-in) var(--jam-spring), left var(--sheet-in) var(--jam-spring), border-radius var(--sheet-in) var(--jam-spring), opacity 0s; }
  .jam__tab { display: none; }
  /* THE SHEET IS CUT TO THE GLASS, all the way down (27/09: "les animations de
     fermeture sont trop abstraites"). A sheet folding into a pill is ONE
     object: the card is clipped to the glass's own box, so what is written on
     it is EATEN as the box goes home instead of blinking out under it. A clip
     and not a box: a card whose width moved would re-wrap its text on every
     frame.
     Its own measures, and not `--g-*`: a percentage in `inset()` is read
     against the CARD, and the card starts 64 under the bar while the glass is
     measured against the window. The card's top is always 0 here — the pill
     stands above it, so the clip closes on the card's own top edge, which is
     the way the pill is. */
  .jam {
    --cut-right: calc(100% - var(--pill-left, 50%) - var(--pill-w, 64px));
    --cut-bottom: calc(100% + 64px - var(--pill-top, 24px) - var(--pill-h, 24px));
    --cut-left: var(--pill-left, 50%);
  }
  .jam.is-unfolded { --cut-right: 0px; --cut-bottom: 0px; --cut-left: 0px; }
  .jam__card {
    top: 64px; right: 0; bottom: 0; left: 0;
    padding: 24px 24px max(24px, env(safe-area-inset-bottom));
    clip-path: inset(0 var(--cut-right) var(--cut-bottom) var(--cut-left) round var(--g-r));
    /* It stays on screen for the whole road now — hidden at 0.2 s there was
       nothing left for the clip to eat. */
    transition: clip-path var(--sheet-out) var(--ease-home), visibility 0s linear var(--sheet-out);
  }
  .jam.is-unfolded .jam__card { clip-path: inset(0 round 28px 28px 0 0); transition: clip-path var(--sheet-in) var(--jam-spring); }
  .jam__card > * { transform-origin: top center; transform: translateY(-8px) scale(0.985); }

  .jam-pill:not([hidden]) {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px 0 8px;
    border-radius: 999px;   /* radius/full (DESIGN.md): a pill is a shape, not a corner rounded a lot */
    font-size: 10px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
    transition: box-shadow 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
  }
  .jam-pill::before { content: ""; position: absolute; inset: -10px -4px; }   /* 44 for a finger */
  .jam-pill > .led { width: 6px; height: 6px; }
  .jam-pill.is-on > .led { background: var(--primary); animation: jam-live 2.4s ease-in-out infinite alternate; }
  .jam-pill[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
  .jam-pill__n { font-variant-numeric: tabular-nums; color: var(--primary); }
  .jam-pill__n:empty { display: none; }
  .jam-pill__n.is-new { animation: jam-count 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes jam-count { from { transform: translateY(6px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
  /* Somebody put a track in: the outline breathes the house colour, once. */
  .jam-pill.is-new { animation: jam-pill-breath 1.6s var(--ease-soft) both; }
  @keyframes jam-pill-breath {
    0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }
    35% { box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
  }
  /* Who, and what — under the pill for three seconds, the bench's whisper. */
  .jam-pill__said {
    position: absolute; top: calc(100% + 12px); right: 0;
    font-size: 12px; line-height: 16px; letter-spacing: normal; text-transform: none; white-space: nowrap;
    max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
    color: var(--ink);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
  }
  .jam-pill__said.is-on { opacity: 1; transform: none; }
}
/* On a phone the pill is out of the bar, at the end of the mood's line (T146,
   Figma 1582:8820): jam.js moves it into the stage, the mood keeps it room. */
@media (max-width: 640px) {
  .stage { position: relative; }
  .stage > .jam-pill:not([hidden]) { position: absolute; top: -4px; right: 0; }   /* the 24 pill on the mood's trimmed cap line */
  .stage:has(> .jam-pill:not([hidden])) > .headline { padding-right: 80px; }
}

/* The way shown once, to a listener who tunes in while the room is at the
   decks: the glass breathes the house colour three times, slowly. Never a flash. */
.jam.is-calling .jam__glass { animation: jam-call 1.6s var(--ease-soft) 3; }
@keyframes jam-call { 0%, 100% { background-color: color-mix(in srgb, var(--bg) 90%, transparent); } 50% { background-color: color-mix(in srgb, var(--primary) 22%, var(--bg)); } }

/* ---------- The add ---------- */
.jam__add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }   /* one column held to the sheet: a long title scrolls, it never widens the form (21/10) */
.jam__add[hidden] { display: none; }
.jam__field {
  display: flex; align-items: center; gap: 8px;
  height: var(--control-height); min-height: var(--control-height); padding: 0 20px;   /* every field is size/control (T64); min-height: the card's column squeezed it to 47.3 */
  border-radius: 999px;   /* the house field, a key (T72, style.css) */
  background: var(--control);
  box-shadow: var(--field-up);
  transition: box-shadow 120ms ease;
  cursor: text;
}
.jam__field:focus-within { box-shadow: var(--field-down); }
@media (hover: hover) { .jam__field:not(:focus-within):hover { box-shadow: var(--field-lift); } }
.jam__field > * { transition: transform 80ms ease; }
.jam__field:focus-within > * { transform: translateY(2px); }
.jam__input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: none; color: var(--ink);
  font: 500 14px/16px var(--font-ui); letter-spacing: -0.02em;
  outline: none;
}
/* The hint in the field is a hint, off by nature: nothing is typed yet. 40 %
   of the ink, every field's (T64): --ink-muted's 18 % read at 1.9:1 on the
   control grey, which is a hint nobody reads. */
.jam__input::placeholder { color: var(--ink); opacity: 0.4; }
@media (pointer: coarse) { .jam__input { font-size: 16px; } }   /* 16: iOS zooms into anything smaller */
/* No blur on a finger's screen, coming or going: a filter there is a render
   pass the GPU may not have room for (more.css's own rule), and a word blurred
   in flight is mush, not glass. The fade and the rise say it. */
@media (pointer: coarse) { .jam__card > * { filter: none; } }
.jam__err { font-size: 12px; line-height: 16px; color: var(--primary); }
.jam__err[hidden] { display: none; }

.jam__found { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.jam__found[hidden] { display: none; }
.jam__hit {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 6px; border-radius: var(--radius); text-align: left; color: var(--ink);
}
.jam__hit:focus-visible { background: color-mix(in srgb, var(--control) 70%, transparent); outline: none; }
@media (hover: hover) { .jam__hit:hover { background: color-mix(in srgb, var(--control) 70%, transparent); } }

/* The card that says where it lands — the question and the key that answers
   it. Its head is a row of the queue, measure for measure (asked 25/09): the
   40 sleeve, 12 to the credits, the one line, and where it lands in the
   meta's place; then the keys. 6 of padding, so its sleeve stands over theirs. */
.jam__preview {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 6px; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--ink-muted);
  animation: jam-row-in 0.4s var(--ease-soft) both;
}
.jam__preview[hidden] { display: none; }
.jam__preview .jam__cover { width: 40px; height: 40px; }
.jam__yes { grid-column: 1 / -1; display: flex; gap: 4px; }
.jam__yes .btn--primary { flex: 1; }
.jam__where { font-size: 10px; line-height: 16px; text-transform: uppercase; }   /* the row's meta line: 10 in capitals, in ink (CLAUDE.md) */
.jam__preview.is-looking .jam__cover { animation: jam-breathe 1.2s ease-in-out infinite alternate; }
@keyframes jam-breathe { to { opacity: 0.5; } }

/* ---------- The queue ---------- */
.jam__queue { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.jam__row {
  position: relative;
  display: grid;
  /* Two lines beside a 40 sleeve (asked 25/09: a track took three lines and
     64 of height; it takes 52 now) — 12 to the credits. */
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 6px;
  border-radius: var(--radius);
}
.jam__row:has(.jam__remove) { grid-template-columns: 40px minmax(0, 1fr) 16px; }
.jam__row .jam__cover { width: 40px; height: 40px; }
/* What is on the air leads, a hair apart from what waits. */
.jam__row.is-air { margin-bottom: 8px; box-shadow: 0 0 0 1px var(--ink-muted); }
.jam__row.is-new { animation: jam-row-in 0.6s var(--ease-soft) both; }
.jam__row.is-just { background: color-mix(in srgb, var(--primary) 10%, transparent); transition: background 2s var(--ease-soft); }
@keyframes jam-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The third line: who, then when — the name gives way, the time never does. */
.jam__meta { display: flex; align-items: center; gap: 6px; min-width: 0; height: 16px; }
.jam__meta .jam__led { width: 6px; height: 6px; background: var(--primary); animation: jam-live 2.4s ease-in-out infinite alternate; }
.jam__meta .face { flex: none; width: 12px; height: 12px; }
@keyframes jam-live { from { opacity: 1; } to { opacity: 0.45; } }

.jam__cover {
  position: relative; overflow: hidden; flex: none;
  width: 48px; height: 48px;
  border-radius: var(--radius-sleeve);
  background: var(--sleeve-ghost);
}
.jam__cover--hit { width: 32px; height: 32px; }
.jam__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jam__art[hidden] { display: none; }

.jam__credits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
/* Title — artist, one .track row of the stage (stage.css): 12/16 capitals,
   both in ink (CLAUDE.md: the artist is not "secondary"), a dash between.
   A line that does not fit scrolls (lib/marquee.js) and fades at its edges
   rather than stopping on a cut letter. */
.jam__line { height: 16px; }
.jam__by::before { content: " — "; }
.jam__by:empty { display: none; }   /* "Looking for it …": no artist yet, no dash */
.jam__line .track__text:has(> .track__scroll[data-overflow]:not([data-overflow=""])) {
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 24px), transparent);
  padding-left: 12px; margin-left: -12px;   /* the left fade sits in the 12 before the first letter: at rest, nothing is dimmed */
  /* A mask cuts at the box, and the house trims the box to the capitals'
     height (text-box): 4 of room above and below, taken back by the margin. */
  padding-block: 4px; margin-block: -4px;
}
.jam__hit .jam__line { flex: 1; min-width: 0; }
/* A state, in the size the house gives a state beside a row (.row__count):
   10 in capitals, in ink — the led says on the air, not a colour. */
.jam__when { flex: none; font-size: 10px; line-height: 16px; text-transform: uppercase; }
.jam__when::before { content: "·"; margin-right: 6px; }
.jam__when.is-off { color: var(--ink-muted); }

.jam__name { min-width: 0; font-size: 10px; line-height: 16px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Yours, the bench's way (bench.css .bench__you). */
.jam__you { flex: none; font-size: 10px; line-height: 16px; text-transform: uppercase; color: var(--primary); }

.jam__remove { position: relative; width: 16px; height: 16px; color: var(--ink); }
.jam__remove::before { content: ""; position: absolute; inset: -14px; }   /* 44 for a finger */
.jam__remove .icon { display: block; }
@media (hover: hover) { .jam__remove:hover { color: var(--primary); } }

.jam__then { font-size: 12px; line-height: 16px; margin-top: auto; padding-top: 4px; }

@media (max-width: 640px) {
}

/* ---------- The bench at the decks ---------- */
/* A face with a track in line carries a disc at its right corner (the heart
   has the left one, bench.css); the face whose record is on is ringed. */
.bench__face.is-dj::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; z-index: 1;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, var(--bg) 0 1.5px, var(--primary) 2px);
  box-shadow: 0 0 0 1.5px var(--bg);
}
.bench__face.is-playing { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .jam__card, .jam.is-unfolded .jam__card, .jam__row.is-new, .jam__preview, .jam__led, .jam.is-open .jam__led, .jam__preview.is-looking .jam__cover { animation: none; }
  .jam__glass, .jam.is-unfolded .jam__glass, .jam__tab, .jam.is-unfolded .jam__tab { transition: none; }
  .jam__card, .jam.is-unfolded .jam__card { transition: none; }   /* the cut lands at once, like everything else here */
  .jam__card > *, .jam.is-unfolded .jam__card > * { filter: none; transform: none; transition: opacity 0.2s linear; }
  .jam.is-calling .jam__glass, .jam-pill.is-new, .jam-pill__n.is-new, .jam-pill.is-on > .led { animation: none; }
  .jam-pill__said { transform: none; transition: opacity 0.5s linear; }
}