/* Play GTA SA online: layout for this page only (redesign, 3 Nov 2026).
   Colours, fonts, sizes, borders and shapes come from the tokens and components in ui.css (and the ID family's ids.css).
   play.js needs the first Play CIT button alone in its paragraph, with p.note right after it. */

/* sentences in lines of about 70 characters; boxes keep the full width */
.page-head .lede,.page>p,.page>ol,.qa dd{max-width:var(--maxw-text)}
.page>ol+p,.page>ul+p{margin-top:var(--sp-3)}
.page>h2{scroll-margin-top:var(--sp-4)}
.page>h3{margin:var(--sp-5) 0 var(--sp-2)}

/* the short version */
.short{margin-top:var(--sp-5);max-width:var(--maxw-text)}
.short ol{margin:0;padding-left:var(--sp-5)}
.short li+li{margin-top:var(--sp-2)}
.short-play{margin:var(--sp-4) 0 0}
.short .note{margin-top:var(--sp-3)}

/* section 1: "Works" and "Does not work" side by side. The heading word and the mark in front of each line
   say it too, so colour is never the only sign. */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3);max-width:calc(var(--maxw-text) + var(--sp-8))}
.fit-box{padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface)}
.fit-box h3{margin:0 0 var(--sp-2);font-size:var(--fs-md)}
.fit-box ul{margin:0;padding-left:var(--sp-5);color:var(--text)}
.fit-box li+li{margin-top:var(--sp-1)}
.fit-box p{margin:var(--sp-2) 0 0;color:var(--text-2)}
.fit-box.yes{border-color:var(--ok)}
.fit-box.yes h3,.fit-box.yes li::marker{color:var(--ok)}
.fit-box.yes ul{list-style-type:"\2713\00a0\00a0"}
.fit-box.no{border-color:var(--bad)}
.fit-box.no h3,.fit-box.no li::marker{color:var(--bad)}
.fit-box.no ul{list-style-type:"\2715\00a0\00a0"}
.fit+p{margin-top:var(--sp-4)}

/* section 2: the three help guides as a row of buttons */
.links{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.links li{margin:0;max-width:100%}
.links .btn{max-width:100%;white-space:normal;text-align:left}

/* section 3: the server address with its Copy button. "Copy" and "Copied" share one width, so nothing moves. */
.join-play{margin-top:var(--sp-3)}
.page>p+.code{margin-top:var(--sp-2)}
.page>.code{max-width:max(calc(50% - var(--sp-2)),24rem)}
.code-row{display:flex;align-items:center;gap:var(--sp-3)}
.code-row code{flex:1 1 auto;min-width:0;white-space:nowrap;font-size:var(--fs-md)}
.code-row .copy{flex:none;min-width:6.5em;justify-content:center}

/* the sides and the keys: two lists side by side */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start;margin-top:var(--sp-4)}
.pair h4{margin:0 0 var(--sp-2);font-size:var(--fs-md)}
.keys{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:0;border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.keys dt,.keys dd{margin:0;padding:var(--sp-2) var(--sp-4);border-top:var(--bw) solid var(--line);color:var(--text)}
.keys dt{font-weight:700}
.keys dt:first-child,.keys dt:first-child+dd{border-top:0}
.keys small{display:block;font-size:var(--fs-sm);color:var(--text-2)}
.pair+p{margin-top:var(--sp-4)}

/* questions */
.qa{margin:0}
.qa dt{margin-top:var(--sp-4);font-weight:700;color:var(--text)}
.qa dd{margin:var(--sp-1) 0 0;color:var(--text-2)}

/* "Where this comes from" stays closed until the heading is pressed */
.sources{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:var(--bw) solid var(--line)}
.sources summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;gap:var(--sp-2)}
.sources summary h2{display:inline;margin:0;font-size:var(--fs-lg);text-transform:none;letter-spacing:normal}
.sources ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-5)}
.sources li+li{margin-top:var(--sp-1)}
.sources p{margin-top:var(--sp-3);color:var(--text-2)}

@media (max-width:760px){
  .pair{grid-template-columns:1fr;gap:var(--sp-5)}
}
@media (max-width:620px){
  .fit{grid-template-columns:1fr}
  .page>.code{max-width:none}
  /* on a very narrow phone the Copy button goes under the address */
  .code-row{flex-wrap:wrap}
  .keys dt,.keys dd{padding:var(--sp-2) var(--sp-3)}
  .sources li a{display:inline-block;padding:var(--sp-2) 0}
}