/* GoTo Player "Will it work on my TV?" page: /iptv-player-for-smart-tv/ (11 Nov 2026).
   Loaded after /assets/home-b.css and /assets/pages-b.css. Those two files give the tokens, the header and footer,
   buttons, cards, the ticket, the small TVs, the device picture, the FAQ boxes, the page title block and the jump list.
   This file adds only the checker: the tiles, the answer cards, the "easy fix" box and two small layouts.
   Phone first: the base rules are for 360 px, then 600 px and 900 px. No fixed heights around text. */

:root {
  --warn: #f5c76a;   /* "Not directly": amber. 11.8 to 1 on the card */
  --stop: #ff9d8f;   /* "Not on Apple TV": soft red. 9.4 to 1 on the card */
}

/* ---------- Top block: title, jump list and the checker in one piece ---------- */
/* The glow has a fixed height, so it does not move when an answer opens and the block grows. */
.chk-hero { padding-bottom: 40px; background:
  radial-gradient(92% 320px at 50% 0, rgba(200, 245, 106, .15), transparent 72%),
  linear-gradient(180deg, var(--deep), var(--bg) 460px); }
.chk-in { display: flex; flex-direction: column; align-items: center; }
.chk-in .jump { order: 3; }   /* phones: the tiles come before the jump list, like the ticket on the download page */
.chk { width: 100%; min-width: 0; margin-top: 24px; scroll-margin-top: 8px; }
.chk-q { font-size: 1.5rem; text-align: center; }

/* ---------- Tiles: one big button per TV, two in a row on phones ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 56rem; margin: 16px auto 0; }
.tiles li { display: flex; min-width: 0; }
.tile { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 104px; padding: 14px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; text-wrap: balance; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
.tile-i { width: 36px; height: 36px; color: var(--accent); stroke-width: 1.4; }   /* 1.4 in a 24 box drawn at 36 px = about 2.1 px on screen */
.tile:active { border-color: var(--accent); background: rgba(200, 245, 106, .1); }
/* The chosen tile: lime edge and a tick in the corner (not colour alone). The script sets aria-expanded. */
.tile[aria-expanded="true"] { border-color: var(--accent); background: rgba(200, 245, 106, .1); box-shadow: inset 0 0 0 1px var(--accent); }
.tile[aria-expanded="true"]::before { content: ""; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.tile[aria-expanded="true"]::after { content: ""; position: absolute; top: 12px; right: 16px; width: 6px; height: 11px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk-hint { margin-top: 16px; color: var(--muted); font-size: 1rem; text-align: center; }

/* ---------- Answer cards ---------- */
/* Without the script every card shows, one under the other. With it, all but the chosen one carry the hidden attribute. */
.answers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: 40rem; margin: 16px auto 0; }
.answer { min-width: 0; padding: 20px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: left; scroll-margin: 8px 0 16px; }
.answer.is-yes { border-color: #3a4a22; background: linear-gradient(160deg, rgba(200, 245, 106, .08), rgba(200, 245, 106, 0) 58%), var(--surface); }
.answer-tv { color: var(--muted); font: 600 .8125rem/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.answer > p { margin-top: 12px; color: var(--muted); }
.answer > p a, .answer .qa-a a { overflow-wrap: anywhere; }

/* The verdict: a round sign with its own shape (tick, turn arrow, cross, question mark) and big words */
.answer > .verdict { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--text); font: 700 clamp(1.5rem, 7vw, 1.875rem)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.verdict-i { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 2px solid transparent; border-radius: 50%; }
.verdict-i .i { stroke-width: 2.25; }
.is-yes .verdict-i { background: var(--accent); color: var(--accent-ink); }
.is-detour .verdict-i { border-color: var(--warn); background: rgba(245, 199, 106, .1); color: var(--warn); }
.is-no .verdict-i { border-color: var(--stop); background: rgba(255, 157, 143, .1); color: var(--stop); }
.is-ask .verdict-i { border-style: dashed; border-color: var(--border-strong); color: var(--text); }

/* Fire TV: the Vega OS warning, and the closed "Not sure which one you have?" box */
.answer > .answer-note { padding: 12px; border: 1px solid rgba(245, 199, 106, .4); border-radius: var(--radius-sm); background: rgba(245, 199, 106, .07); font-size: 1rem; line-height: 1.5; }
.answer-note strong { color: var(--warn); }
.answer .more { background: var(--surface-2); }
.answer .more summary { min-height: 48px; font-size: 1rem; }
.answer .more .qa-a { grid-template-columns: minmax(0, 1fr); font-size: 1rem; line-height: 1.5; }

/* The easy fix: a small drawing (a stick going into a TV) beside one sentence */
.fix { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 2px dashed rgba(169, 179, 184, .5); border-radius: var(--radius-sm); }
.fix-pic { display: block; width: 72px; height: 48px; fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fix p { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.fix strong { display: block; }

/* The next step: one button, centred on phones */
.answer > .answer-next { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; text-align: center; }
.answer-next .btn { width: 100%; max-width: 420px; }
.answer .ticket { margin: 12px auto 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }   /* a softer shadow than in the hero: the ticket lies on a card here */
.steps-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 1rem; font-weight: 600; }
html:not(.js) .answers [data-copy] { display: none; }   /* no script, no dead "Copy code" button: the code and the link stay */

/* ---------- The app on a TV: two small TVs side by side ---------- */
.tv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 56rem; margin: 0 auto; }
.tv-pair + .tv-note { margin-top: 16px; }

/* ---------- Phone, tablet or PC instead? ---------- */
#devices .lineup { max-width: 480px; }   /* a little smaller than on the home page: this is a side note here */
#devices .dev-phone { border-radius: clamp(13px, 3.6vw, 19px); }
#devices .dev-phone img { border-radius: clamp(10px, 3vw, 16px); }
.devices-line { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* Very small phones (under 360 px): the drawing stands above its sentence */
@media (max-width: 359.98px) {
  .fix { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- From 600 px ---------- */
@media (min-width: 600px) {
  .chk-hero { padding-bottom: 56px; }
  .chk-in .jump { order: 0; }   /* room enough: the jump list sits under the title, as on the other pages */
  .chk { margin-top: 32px; }
  .chk-q { font-size: 1.75rem; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; }
  .tile { min-height: 128px; padding: 16px 12px; }
  .tile-i { width: 40px; height: 40px; }
  .answers { margin-top: 24px; }
  .answer { padding: 24px; }
  .fix { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .fix-pic { width: 96px; height: 64px; stroke-width: 1.5; }
  .answer .ticket-mini .ticket-stub { padding: 16px; }   /* the code keeps its room beside the button in a 564 px card */
  .tv-pair { gap: 24px; }
}

/* ---------- From 900 px ---------- */
@media (min-width: 900px) {
  .chk-hero { padding-bottom: 72px; }
  .chk-q { font-size: 2rem; }
  .tiles { gap: 16px; }
  .tile { font-size: 1.0625rem; }
}

/* ---------- Hover (mouse only) ---------- */
@media (hover: hover) {
  .tile:hover { border-color: var(--accent); background: rgba(200, 245, 106, .07); }
  .tile[aria-expanded="true"]:hover { background: rgba(200, 245, 106, .1); }
}

/* ---------- Motion: small and calm, only for people who have not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tile { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .tile:active { transform: scale(.975); }
  .answer { animation: answer-in .3s cubic-bezier(.2, .7, .2, 1) both; }
  .verdict-i { animation: verdict-pop .4s cubic-bezier(.2, 1.4, .4, 1) .05s both; }
  @keyframes answer-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes verdict-pop { from { transform: scale(.5); } to { transform: none; } }
}