/* Our alternative beside the usual programs (AW2 and SQ3, William 2026-10-17). In the store's own
   tokens (--st-*), so both of its looks wear it. js/alternatives.js draws it. Nothing here is told
   by colour alone: the placeholder says "Ours — coming" in words and sits apart from the real thing. */

/* AW2: a program in the Library's Windows programs is a row: the program's own button, and our mark
   as a badge in its top right corner, 44px to press. The badge sits above the icon's corner, clear of
   the icon (centred) and the name (below), so the centre of the program's button stays free to press
   and the mark can only belong to its own program. Rows with no mark look exactly as before. */
.wp-grid:has(.wp-row) { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.wp-row { position: relative; display: grid; min-width: 0; }
.wp-row > .wp-tile { min-width: 0; }
.alt-mark { position: absolute; top: 0; right: 0; z-index: 1; }
.alt-mark { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.alt-mark img { width: 28px; height: 28px; padding: 4px; box-sizing: border-box; object-fit: contain; border-radius: 50%;
  background: color-mix(in srgb, var(--st-light) 10%, transparent); border: 1px solid color-mix(in srgb, var(--st-mint) 45%, transparent); }
.alt-mark:hover img, .alt-mark:focus-visible img { background: color-mix(in srgb, var(--st-mint) 22%, transparent); }
.alt-mark:focus-visible { outline: 2px solid var(--st-sky); outline-offset: -3px; }

/* SQ3: on a third-party tile, a line under the name; and the same on its page */
.st-tile .alt-line { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--st-mint-text); overflow-wrap: anywhere; }
.st-tile .alt-line.coming { color: var(--st-muted); font-weight: 400; }
@media (max-width: 320px) { .st-tile .alt-line { display: none; } }   /* the one-line watch tiles have no room; the page says it */

.st-alt { padding: 12px; border: 1px solid color-mix(in srgb, var(--st-mint) 25%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--st-mint) 5%, transparent); }
.st-alt h3 { color: var(--st-mint-text); }
.st-alt p { margin: 0; color: var(--st-muted); font-size: 13px; }
.st-alt-link b { white-space: normal; }
/* the placeholder: greyed, dashed, no button, no price */
.st-alt[data-alt="coming"] { border-style: dashed; border-color: color-mix(in srgb, var(--st-muted) 45%, transparent); background: transparent; }
.st-alt[data-alt="coming"] h3 { color: var(--st-muted); }
.alt-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.alt-pill { padding: 3px 10px; border: 1px dashed color-mix(in srgb, var(--st-muted) 60%, transparent); border-radius: 999px; color: var(--st-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.alt-ph p { flex: 1 1 220px; min-width: 0; }