/* ---------- The shape of the record (tickets/T46-la-silhouette-dans-la-fiche.md) ----------
   The middle of the record's card (css/about.css), which T38 left empty for
   this. The desk draws the same five axes with shadcn (T43); here it is the
   page's hand: one ink for the shape, a grid that is a line and not a word,
   square vertices because the house draws in pixels, and the numbers written
   in the UI face the rest of the card uses.
   ------------------------------------------------------------------------ */
.shape { display: grid; gap: 16px; }
.shape[hidden] { display: none; }
.shape__chart { display: block; width: 100%; height: auto; overflow: visible; }
/* Drawn at its own size and no bigger: the viewBox is 280 wide, so a card
   stretched by a phone sheet would blow the words up with it (T46). Flush left,
   like every line of the card. */
.shape__chart { max-width: 280px; }
.shape__chart[hidden], .shape__tags:empty { display: none; }
/* Tags or shape (T65): both panes in the one cell, the hidden one kept for its
   height — the card doesn't jump when the key changes. Without tabs (only one
   was read) nothing is hidden, and the lone pane takes the cell. */
.shape__panes { display: grid; }
.shape__panes > * { grid-area: 1 / 1; align-self: start; }
.shape[data-pane="chart"] .shape__tags,
.shape[data-pane="tags"] .shape__chart { visibility: hidden; }
/* The shape grows in again each time its key is pressed, as on the card's opening. */
.shape[data-pane="tags"] .shape__body { animation: none; }
/* The desk's stickers — mood filled, genres outlined, then tempo and key —
   `.badge` is the wheel card's own (css/crate.css), flush left here. */
.shape__tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Who put it forward, under the stickers: the credits' row at the card's
   height (css/about.css), a face where the others have an icon. */
.shape__by { height: 16px; }
.shape__by .face { width: 16px; height: 16px; }
.shape__by .track__text { overflow: hidden; text-overflow: ellipsis; }

/* A line, not a text: the ink at a whisper, which is not `--ink-muted`'s
   meaning (style.css) — that one says "not on the air", and a grid is on. */
.shape__grid { fill: none; stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 1; }
.shape__grid polygon:last-of-type { stroke: color-mix(in srgb, var(--ink) 28%, transparent); }

.shape__area {
  fill: color-mix(in srgb, var(--primary) 16%, transparent);
  stroke: var(--primary);
  stroke-width: 1.5;
  stroke-linejoin: miter;
}
.shape__dot { fill: var(--primary); }
/* It unfolds from the centre, once, when the card has settled. */
.shape__body { transform-origin: 140px 120px; animation: shape-in 0.6s var(--ease-soft) 0.12s both; }
@keyframes shape-in { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }

.shape__labels text { font-family: var(--font-ui); fill: var(--ink); }
.shape__word { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.shape__num { font-size: 12px; font-weight: 500; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .shape__body { animation: none; }
}


/* The card on a phone is a set height (css/about.css) and everything in it
   has to fit, with no scroll: the shape is what gives way. Its cell takes what
   the head, the thumb and the report leave, and the chart is drawn at that
   height — 224 at most, its own — rather than pushing the report off the foot.
   Flush left still: the width follows the height (T65). */
@media (max-width: 640px) {
  .shape { display: flex; flex-direction: column; min-height: 0; }   /* a column: the panes take the rest whether "by" and the tabs are there or not */
  .shape__panes { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .shape__chart { height: 100%; width: auto; max-height: 224px; }
}