/* ==========================================================================
   TPM Labs — per-app colour
   apps.theomerino.com

   The handoff's colour rule, made data-driven: "TPM Labs is a neutral gallery;
   apps are the coloured exhibits. A future app brings its own colours into the
   same three slots. The frame does not change."

   Those three slots, and ONLY those three, are themed here:
     1. .card__art     the artwork gradient
     2. .icon          the icon tile
     3. .feature__glow the wash beneath the card

   No launcher chrome — background, nav pill, panel, text, buttons, borders —
   is touched. Round & Round keeps styles.css's values as the default; each
   further app overrides via [data-app="<id>"], set by launcher.js.

   PROTOTYPE NOTE: this file is additive so styles.css stays untouched. When
   Redrum stops being a placeholder, the natural home for this is styles.css
   alongside Round & Round's own gradients.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Two featured cards need air between them. Matches the rail's 34px rhythm,
   and clears the glow's -22px/-28px bleed.
   -------------------------------------------------------------------------- */

.feature + .feature { margin-top: 34px; }

@media (min-width: 760px) {
  .feature + .feature { margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   Redrum — red and blue, where Round & Round is green/blue/red-orange.
   Same gradient geometry and opacities as styles.css, different hues, so the
   two cards read as siblings rather than as two different designs.
   -------------------------------------------------------------------------- */

[data-app="redrum"] .icon {
  background:
    radial-gradient(120% 100% at 20% 10%, oklch(0.52 0.20 25 / .82), transparent 62%),
    radial-gradient(110% 100% at 90% 95%, oklch(0.45 0.16 264 / .68), transparent 64%),
    #0d1216;
}

[data-app="redrum"] .card__art {
  background:
    radial-gradient(110% 90% at 8% 4%, oklch(0.50 0.20 25 / .58), transparent 58%),
    radial-gradient(90% 80% at 96% 10%, oklch(0.44 0.16 264 / .52), transparent 60%),
    radial-gradient(100% 100% at 58% 112%, oklch(0.42 0.17 12 / .44), transparent 62%),
    linear-gradient(180deg, #0d1216, #080b0e);
}

[data-app="redrum"] .feature__glow {
  background:
    radial-gradient(58% 74% at 58% 42%, oklch(0.50 0.19 25 / .46), transparent 70%),
    radial-gradient(46% 60% at 84% 62%, oklch(0.44 0.16 264 / .34), transparent 72%);
}

/* --------------------------------------------------------------------------
   BUG FIX — the berth would not retire.

   launcher.js sets `berthEl.hidden = apps.length > 1`, but `.berth` carries
   `display: flex` in styles.css, and an author `display` beats the browser's
   `[hidden] { display: none }`. So the berth stayed visible with the attribute
   correctly set. styles.css already guards `.launch[hidden]` for exactly this
   reason; `.berth` was never given the same guard, and the bug was unreachable
   while there was only one app.

   This rule belongs in styles.css next to `.launch[hidden]`. It lives here only
   so styles.css stays untouched during the prototype.
   -------------------------------------------------------------------------- */

.berth[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Artwork crop — approved hero assets

   Both heroes are 1448 x 1086 (4:3). The artwork slot is never 4:3, so
   object-fit: cover always trims one axis. These rules only set WHERE that
   trim falls; the images themselves are untouched.

   Slot shapes (from styles.css):
     < 760px      full width minus 44, fixed 264px tall   — wide banner
     760–1179px   full width minus 408, min 420px tall    — portrait when the
                  viewport is under ~968px, landscape above it
     >= 1180px    up to 804 wide, min 560px tall          — landscape

   Round & Round is radially symmetrical about its bull, so the inherited
   centre position is already the right answer at every width and no override
   is needed.
   -------------------------------------------------------------------------- */

/* Redrum's subject sits right of centre: the struck figure and its dart run
   from roughly 40% to 84% across the source. A centred crop in the narrow
   portrait slot between 760 and ~968px clips the red flight off the right
   edge. Biasing the crop right keeps the whole dart — the thing the picture is
   about — and lets the crowd behind it run off the left edge instead, which is
   how the group reads anyway.

   Above ~968px the slot is wider than 4:3, so the full width of the image is
   already shown and this value has no effect. It is scoped to the band where
   it does. */
@media (min-width: 760px) and (max-width: 1179px) {
  [data-app="redrum"] .card__art img { object-position: 66% 50%; }
}