/* Strategy list — logo tiles and row alignment.

   Owner request (2026-10-06): a higher-quality logo for every strategy, rows
   aligned perfectly, and the upgraded look of bingoagain.org's product tiles.
   The palette stays the house gold and the two-column layout is untouched —
   only the strategy rows change. Loaded after polish.css.

   Each logo is a filled "app icon" tile (gold gradient, top highlight, soft
   drop) holding one crisp SVG glyph drawn on a 24px grid in index.html, so
   every mark has the same weight and optical size. */

/* ── the logo tile ────────────────────────────────────────────────────────── */
.strategy-icon.strategy-logo-tile {
  width: 32px;
  height: 32px;
  border-radius: 9.5px;
  font-size: 0;
  color: #2a1704;
  background:
    radial-gradient(120% 90% at 22% 10%, rgba(255, 247, 220, .78), transparent 46%),
    linear-gradient(155deg, #ffdc90 0%, #f2b84a 40%, #c98a27 76%, #a56816 100%);
  border: 1px solid rgba(255, 224, 156, .58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 3px rgba(110, 62, 6, .32),
    0 3px 10px rgba(212, 150, 40, .26),
    0 0 0 1px rgba(0, 0, 0, .35);
}
.strategy-logo-tile .strategy-logo {
  display: block;
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 0 rgba(255, 238, 196, .45));
}

/* ── one grid per row, the same four columns on every row ─────────────────
   name+description | video | Guide | toggle. A row without a video keeps its
   invisible slot (strategy_videos.js) and a row without a Guide keeps the
   empty column, so the toggles and pills line up down the whole list. */
.strategy-list .strategy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 44px 36px;
  align-items: center;
  column-gap: 6px;
  min-height: 68px;           /* every card the height of a two-line one */
  padding: 10px 11px;
  border-radius: 11px;
}
.strategy-list .strategy-row > .strategy-row-left { grid-column: 1; grid-row: 1; gap: 9px; min-width: 0; }
.strategy-list .strategy-row > .rob-yt-btn,
.strategy-list .strategy-row > .rob-yt-slot { grid-column: 2; grid-row: 1; width: 24px; margin: 0; }
.strategy-list .strategy-row > .btn-how-to-use {
  grid-column: 3; grid-row: 1;
  width: 44px; margin: 0; padding: 3px 0; text-align: center; font-size: 9px;
}
.strategy-list .strategy-row > .toggle-switch { grid-column: 4; grid-row: 1; margin-top: 0; justify-self: end; }
.strategy-list .strategy-row > .strategy-oos-pill { grid-column: 2 / 5; grid-row: 1; justify-self: end; margin-left: 0; }

/* the card itself: a soft vertical gradient and a warmer edge once unlocked */
.strategy-list .strategy-row.unlocked {
  border-color: rgba(198, 140, 44, .46);
  background:
    radial-gradient(circle at 6% 50%, rgba(232, 172, 70, .10), transparent 40%),
    linear-gradient(180deg, rgba(34, 24, 8, .74), rgba(16, 11, 3, .74));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .06);
}
.strategy-list .strategy-row.unlocked:hover { border-color: rgba(232, 178, 80, .66); }

/* ── the name is never cut: a long one wraps and the status badge follows it
   in the text flow, so it can never strand on a line of its own ───────────── */
.strategy-list .strategy-info { flex: 1; min-width: 0; }
.strategy-list .strategy-name {
  display: block;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .005em;
  /* a two-line name splits evenly ("Auto Differs / Search OFF") instead of
     leaving the badge alone on the second line */
  text-wrap: balance;
}
.strategy-list .strategy-name > .strategy-name-text { margin-right: 5px; }
.strategy-list .strategy-name > :not(.strategy-name-text) {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 4px;
  white-space: nowrap;
}
.strategy-list .strategy-name > .badge-sm { font-size: 8px; padding: 1px 5px; letter-spacing: .04em; }
/* descriptions are never cut (some carry the price); the card's min-height
   keeps the usual one- and two-line rows identical */
.strategy-list .strategy-desc {
  line-height: 1.35;
  margin-top: 2px;
}

/* the Guide pill in house gold rather than the stray violet */
.strategy-list .strategy-row .btn-how-to-use {
  color: #f1cd84;
  background: rgba(226, 182, 104, .08);
  border-color: rgba(226, 182, 104, .34);
}
.strategy-list .strategy-row .btn-how-to-use:hover {
  color: #ffe2a6;
  background: rgba(226, 182, 104, .16);
  border-color: rgba(232, 178, 80, .62);
  box-shadow: 0 0 10px rgba(226, 166, 58, .22);
}

@media (max-width: 560px) {
  /* an out-of-service pill drops to its own full-width line on a phone */
  .strategy-list .strategy-row { row-gap: 6px; }
  .strategy-list .strategy-row > .strategy-oos-pill { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; text-align: center; }
}
@media (max-width: 520px) {
  .strategy-list .strategy-row > .btn-how-to-use { padding: 2px 0; }
}

/* ── phones: the bank icon alone in the nav bar ─────────────────────────────
   mobile.css hides the wordmark at 430px and below, but premium.css (loaded
   after it) puts it back, which pushed Logout off the bar on some phones.
   Owner request (2026-10-06): on phones show only the logo. */
@media (max-width: 600px) {
  nav.nav .nav-brand .nav-brand-text { display: none; }
}