/* Releases page. The two app teasers are UI teasers like the article ones
   (source: drafts/site/releases/teasers), then the page's own rules. */

/* ---------- tokenpanda: the popover, the weekly window lifted ----------
   The app's own language, literal on purpose: the terminal's dark glass, monospace,
   block bars in #b1b9f9 on #505370, the notch at the clock in #ededed, coral #d77757
   from the notch on when over pace. A line is 4/3 of the font, a cell 0.6 of it, as
   SF Mono 12 on a 16 line in the app. */
.tu--tp { font-family: "SF Mono", "Geist Mono", ui-monospace, Menlo, monospace; color: #e0e0e0; font-synthesis: none; }
.tu--tp .tu__base { inset: 0; }
.tu--tp .tp-l { height: var(--lh); white-space: pre; overflow: hidden; }
.tu--tp .tp-b { color: #ededed; font-weight: 500; }
.tu--tp .tp-d { color: #999999; }

/* the menu bar: the item (SF digits, a 5 cell bar, semibold when over pace) and the clock */
.tu--tp .tp-mb { position: absolute; left: calc(var(--u) * 272); top: calc(var(--u) * 7); display: flex; align-items: center; gap: calc(var(--u) * 12);
  font: 400 calc(var(--u) * 7.8) / 1 -apple-system, "SF Pro Text", system-ui, var(--font); font-variant-numeric: tabular-nums; color: #26272d; white-space: pre; }
.tu--tp .tp-item { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); font-weight: 600; }
.tu--tp .tp-mini { position: relative; display: block; width: calc(var(--u) * 16.2); height: calc(var(--u) * 5.4);
  background: linear-gradient(90deg, currentColor 60%, color-mix(in srgb, currentColor 28%, transparent) 60%); }

/* the popover, muted: the base keeps the app's layout at 0.6 of the item's scale */
.tu--tp .tp-pop { --cw: calc(var(--u) * 4.32); --lh: calc(var(--u) * 9.6); position: absolute; left: calc(var(--u) * 182); top: calc(var(--u) * 27); width: calc(var(--u) * 228); height: calc(var(--u) * 200);
  padding: calc(var(--u) * 7.2) calc(var(--u) * 6); border-radius: calc(var(--u) * 6); background: #1a1e2b; font-size: calc(var(--u) * 7.2);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(26,26,26,.12); color: #7c8091; }
.tu--tp .tp-pop .tp-b { color: #8f93a3; }
.tu--tp .tp-pop .tp-d { color: #5e6273; }
.tu--tp .tp-pop .tp-bar { opacity: .5; }
.tu--tp .tp-arrow { position: absolute; left: calc(var(--u) * 108); top: calc(var(--u) * -3.4); width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); transform: rotate(45deg);
  background: #1a1e2b; border-radius: calc(var(--u) * 1.2) 0 0 0; }
.tu--tp .tp-rule { position: relative; margin: 0 calc(var(--u) * -6); }
.tu--tp .tp-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--lh) / 8); background: #b1b9f9; opacity: .5; }
.tu--tp .tp-tab { color: #000; background: #b1b9f9; font-weight: 500; opacity: .6; }

/* block bars: cells from --a to --b, the notch two half cells wide on the elapsed share */
.tu--tp .tp-bar { position: relative; display: inline-block; vertical-align: top; width: calc(var(--cw) * var(--n)); height: calc(var(--lh) * .72); margin-top: calc(var(--lh) * .14); }
.tu--tp .tp-bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--cw) * var(--a)); width: calc(var(--cw) * (var(--b) - var(--a))); }
.tu--tp .tp-trk { background: #505370; }
.tu--tp .tp-fill { background: var(--hue, #b1b9f9); }
.tu--tp .tp-tick { background: #ededed; }
.tu--tp .tp-over { background: #d77757; }

/* the lifted part: the weekly window section in full colour, on the same glass */
.tu--tp .tp-win { --cw: calc(var(--u) * 5.6); --lh: calc(var(--u) * 12.44); left: calc(var(--u) * 22); top: calc(var(--u) * 69); width: calc(var(--u) * 276);
  padding: calc(var(--u) * 9) calc(var(--u) * 9) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); background: #1a1e2b; font-size: calc(var(--u) * 9.33);
  /* the popover's own hairline ring, so the lifted glass keeps its edge where it overlaps the base glass; then the shared lift */
  box-shadow: 0 0 0 calc(var(--u) * .6) rgba(255,255,255,.14), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(26,26,26,.06), 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(26,26,26,.13); }

/* ---------- Releases: one row per app, the spec sheet ----------
   One row per app on the 7 to 5 grid of the home Articles block: the teaser on
   the left, the article teaser's words on the right. Under 720 the row stacks
   like an article teaser. */
.rel-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(72px, 8vw, 120px); }
.rel-app { display: grid; gap: 22px; }
.rel-app__media { display: block; }
.rel-app__media .tu { max-width: none; }
.rel-app .teaser__media { max-width: none; margin: 0; }
.rel-app__words { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 720px) {
  .rel-app { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
}
@media (max-width: 719.98px) { .rel-app__media { max-width: 520px; } }

/* the name is the one link to the app's page; it reads like a teaser title */
.rel-name { color: inherit; text-decoration: none; transition: color var(--t-fast) ease; }
.rel-name:hover, .rel-name:focus-visible { color: var(--case-ink); }
.rel-name:hover .company__arrow, .rel-name:focus-visible .company__arrow { opacity: .6; transform: none; }
.rel-app .teaser__stand { margin-top: 0; }

/* Spec sheet: label and value on one line, ruled like the home index */
.rel-spec { margin: 6px 0 0; border-top: 1px solid var(--rule); }
.rel-spec > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 10px 0 11px; border-bottom: 1px solid var(--rule); font-size: var(--t-preview-body); line-height: 1.45; }
.rel-spec dt { color: var(--muted); }
.rel-spec dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.rel-cmd { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 6px 6px 6px 14px; border-radius: 10px; background: #FBF7EE; box-shadow: 0 0 0 1px var(--rule); }
.rel-cmd code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; color: var(--ink); }
.rel-cmd code::-webkit-scrollbar { display: none; }
.rel-cmd__copy { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--ink); color: #F5EFE2; font: 500 .82rem/1 var(--font); cursor: pointer; }
.rel-cmd__copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) { .rel-cmd__copy { min-height: 44px; } }
.rel-outs { display: flex; gap: 22px; margin: 18px 0 0; }
.rel-out { font-size: .92rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.rel-out:hover { color: var(--case-ink); }
/* a long install line scrolls inside its box; the fade says there is more */
@media (max-width: 519.98px) {
  .rel-cmd code { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}

/* the headline is one sentence, not two short lines; keep its last word off a line of its own */
.releases-page .hero__line { text-wrap: balance; }