/* Get the apps (/apps/): two app cards and the install steps. Tokens only, so light and dark resolve together. */
.apps { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; padding-block: 8px 24px; }
.apps-head { display: grid; gap: 8px; max-width: 60ch; }
.apps-head h1 { font: var(--k-display-s); }
.apps-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 840px) { .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-card { display: grid; gap: 16px; align-content: start; padding: 24px; border-radius: var(--k-radius-xl); }
.app-card--field { background: var(--k-inverse-surface); color: var(--k-on-inverse-surface); border-color: transparent; }
.app-card--field .app-meta, .app-card--field .app-sha summary { color: color-mix(in srgb, var(--k-on-inverse-surface) 72%, transparent); }
.app-card--field .app-sha code { background: color-mix(in srgb, var(--k-on-inverse-surface) 10%, transparent); }
.app-card--field .btn { background: var(--k-accent); color: var(--k-on-accent); }
.app-top { display: flex; align-items: center; gap: 16px; }
.app-icon { width: 56px; height: 56px; border-radius: var(--k-radius-md); background: var(--k-bg); padding: 8px; flex: none; }
.app-card h2 { font: var(--k-headline-s); }
.app-meta { font: var(--k-label-m); color: var(--k-fg-muted); margin-top: 4px; }
.app-blurb { font: var(--k-body-l); max-width: 46ch; }
.app-get { justify-self: start; min-height: var(--k-touch); }
.app-sha summary { cursor: pointer; font: var(--k-label-m); color: var(--k-fg-muted); min-height: 32px; display: flex; align-items: center; }
.app-sha code { display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--k-radius-sm); background: var(--k-surface-high);
  font-size: 12px; overflow-wrap: anywhere; }
.apps-steps { display: grid; gap: 12px; padding: 24px; }
.apps-steps h2 { font: var(--k-title-l); }
.apps-steps ol { display: grid; gap: 10px; padding-left: 1.4em; font: var(--k-body-m); }
.apps-back { font: var(--k-body-m); }
@media (max-width: 599px) { .app-card, .apps-steps { padding: 16px; } .app-get { justify-self: stretch; } }
.apps-grid > .card + .card, .apps > .card + .card { margin-top: 0; }  /* the grid gap spaces them */
.apps-steps p { font: var(--k-body-m); }