/* ALT-1 · /alternatives/<slug>/ . Designer's specs/alt-1 (alt1.css), adapted: the SEO-11 pieces it was drawn on top of are not in main,
   so this file only adds what seo.css does not already give. Site tokens only; no new colours, sizes or radii. Loaded before names.css. */
/* ---------- subject card (compare-card style, single, full width) ---------- */
.alt-subj{margin-top:20px;padding:20px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) auto;column-gap:28px;align-items:center}
.alt-subj .sx-app-top{align-items:center}
.alt-subj .sx-app-dev{flex-wrap:wrap;row-gap:4px}
.alt-subj .sx-app-dev .sx-stores{flex:none}
.alt-subj .alt-st{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-left:28px;border-left:1px solid var(--hair2)}
.alt-subj .sx-app-go{margin:0;white-space:normal;display:inline-flex;align-items:center;min-height:32px}
.alt-subj .sx-app-nm{line-height:1.15}
.alt-st .sx-stat .sx-label{margin:0 0 8px}
.alt-st .sx-stat-s{margin:6px 0 0}
/* ---------- list: the best-of table with Avg rating / Installs / Compare ---------- */
.sx-alt col.c-pos{width:52px}.sx-alt col.c-mv{width:84px}.sx-alt col.c-av{width:116px}.sx-alt col.c-in{width:124px}.sx-alt col.c-cp{width:108px}
.sx-alt.alt-nocmp col.c-cp{width:0}.sx-alt.alt-nocmp th.cp,.sx-alt.alt-nocmp td.cp{display:none}
/* one number per row (Designer §12): the live rank sits in the position slot, mono 600, same size as the /best/ numeral */
.sx-t.sx-alt tbody tr td.pos{color:var(--fg);font-weight:600}
.sx-alt td.pos .rk{font-size:13px;font-weight:600}
/* a 3-digit rank (#120) must fit the 52px slot: tighten the cell padding instead of widening the column */
.sx-alt th.pos,.sx-alt td.pos{padding-left:12px;padding-right:6px}
.sx-alt td.av,.sx-alt td.in{white-space:nowrap}
.sx-alt .sv{display:block}.sx-alt .sv+.sv{margin-top:2px}
.sx-alt .sv .v{font-weight:600;color:var(--fg)}
.sx-alt .sv .s{margin-left:6px;font-size:12px;color:var(--muted);font-weight:400}
/* "Not published" is wider than the Installs slot with its tag beside it: the tag drops under it */
.sx-alt .sv .na+.s{display:block;margin-left:0;line-height:1.3}
.sx-alt .star{color:var(--star);margin-left:1px;font-size:11px}
.sx-alt .na{font-size:12px;color:var(--muted)}
.alt-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sx-alt td.cp a,.alt-cmp{display:inline-flex;align-items:center;min-height:32px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.sx-alt td.cp a:hover,.alt-cmp:hover{text-decoration:underline}
.sx-alt .alt-ph{display:none}
@media (max-width:900px){
  .sx-alt col.c-pos{width:70px}
  .sx-alt col.c-mv,.sx-alt col.c-av,.sx-alt col.c-in,.sx-alt col.c-cp{width:0}
  .sx-alt th.mv,.sx-alt td.mv,.sx-alt th.av,.sx-alt td.av,.sx-alt th.in,.sx-alt td.in,.sx-alt th.cp,.sx-alt td.cp{display:none}
  .sx-alt th:first-child,.sx-alt td:first-child{padding-left:12px;padding-right:4px}
  .sx-alt th:last-child,.sx-alt td:last-child{padding-right:12px}
  .sx-alt td{padding-top:11px;padding-bottom:11px;vertical-align:top}
  .sx-alt td.pos{padding-top:13px}
  .sx-alt .sx-ac{align-items:flex-start;gap:10px}
  .sx-alt .sx-ac .sx-icon{width:30px;height:30px;margin-top:1px}
  .sx-alt .sx-nl .sx-stores{display:none}
  .sx-alt .sx-dev{display:flex;align-items:center;gap:6px;min-width:0}
  .sx-alt .sx-dev .ph-st{display:inline-flex;flex:none;order:-1}
  .sx-alt td.pos .rk{display:block;line-height:20px}
  .sx-alt .ph-only{display:block;margin-top:3px}
  .sx-alt .ph-only .chg{display:inline-block;padding:0 5px}
  /* phone stat line: each value with its store tag underneath, compare link last */
  .sx-alt .alt-ph{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 16px;margin-top:6px}
  .alt-c{display:inline-flex;flex-direction:column;font-variant-numeric:tabular-nums}
  .alt-c .v{font-size:13px;font-weight:600;line-height:1.35;color:var(--fg)}
  .alt-c .na{font-size:13px;line-height:1.35}
  .alt-c .s{font-size:11px;line-height:1.3;color:var(--muted)}
  .alt-c .star{color:var(--star);margin-left:1px;font-size:11px}
  .alt-cmp{margin-left:auto}
}
/* The subject card is one column up to 1023px: in three columns a long store name wraps to 3 lines between 901 and ~1000px. */
@media (max-width:1023px){
  .alt-subj{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:16px}
  .alt-subj .alt-st{padding:16px 0 0;border-left:0;border-top:1px solid var(--hair2)}
  .alt-subj .sx-app-top{flex-direction:row;align-items:center;gap:12px}.alt-subj .sx-app-nm{min-height:0}
}
@media (max-width:600px){.alt-subj{padding:14px}.alt-subj .alt-st{gap:12px}.alt-subj .sx-app-top .sx-icon{width:44px;height:44px}.alt-subj .sx-app-nm{font-size:17px;line-height:1.2}}
@media (max-width:360px){.sx-alt .alt-ph{column-gap:12px}.sx-alt td:first-child{padding-right:2px}.sx-alt col.c-pos{width:68px}}
/* ---------- the Alternatives link on app pages and compare pages ---------- */
.alt-rel{margin:-4px 0 12px;font-size:14px;display:flex;flex-wrap:wrap;gap:0 18px}
.alt-rel a{display:inline-flex;align-items:center;min-height:32px}
@media (max-width:480px){.alt-rel{flex-direction:column;gap:0}}
/* ---------- slots the Writer's v3 copy adds: summary, FAQ, best-of line, related pills (the SEO-11 pieces are not in main, so they live here) ---------- */
.alt-m{font-family:var(--mono);font-variant-ligatures:none;font-variant-numeric:tabular-nums;font-weight:600}
.alt-sum{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--fg);max-width:640px;text-wrap:pretty}
.alt-faq{padding:2px 20px}
.alt-faq>div{padding:14px 0}
.alt-faq>div+div{border-top:1px solid var(--hair2)}
.alt-faq h3{margin:0;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0}
.alt-faq p{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:720px}
.alt-faq .alt-m{color:var(--fg)}
.alt-best{margin:28px 0 0;font-size:14px}
.alt-best a{display:inline-flex;align-items:center;min-height:32px}
.alt-more{margin-top:12px}
.alt-more h2{margin:0 0 10px;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.alt-more .sx-links li{display:block;max-width:100%}
.alt-more .sx-links a{white-space:normal;height:auto;min-height:34px;padding-top:6px;padding-bottom:6px}
@media (max-width:600px){.alt-faq{padding:2px 14px}.alt-more .sx-links a{min-height:32px}}