/* /software/go-live: the phone mockup of the Go Live screen.
   Drawn in HTML/CSS (not a screenshot) so it stays sharp at any size. The app
   itself is dark whatever the site theme is, so the screen colours below are
   fixed on purpose and do not follow the light/dark tokens. Colours and wording
   mirror the real screen (ktyt-voice-admin public/golive.php), minus the
   station's name. */
.gl-aside{display:grid;gap:28px}
/* Share buttons: same look as the news pages (news.css), which this page does not load. */
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 26px}
.share-bar span{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.share-bar a,.share-bar button{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;color:var(--heading);background:none;cursor:pointer}
.share-bar a:hover,.share-bar button:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.share-bar .share-native{padding:10px 26px;font-size:16px;border-color:var(--blue);background:var(--blue);color:#fff}
.share-bar [hidden]{display:none}
.share-bar:last-child{margin:30px 0 0}
.content-grid .share-bar+h2{margin-top:0}
.gl-figure{margin:0;text-align:center}
.gl-figure figcaption{color:var(--muted,#5b6b7b);font-size:14px;margin-top:12px}

.gl-phone{position:relative;width:280px;max-width:100%;margin:0 auto;padding:12px;border-radius:44px;
  background:#0a0c10;box-shadow:0 0 0 2px #2a2f38,0 24px 50px rgba(8,20,35,.35);text-align:left}
.gl-phone:before{content:'';position:absolute;top:20px;left:50%;width:84px;height:22px;margin-left:-42px;
  border-radius:12px;background:#0a0c10;z-index:2}
.gl-screen{border-radius:33px;overflow:hidden;background:#101318;color:#eef1f5;
  font:12px/1.35 system-ui,-apple-system,Roboto,sans-serif;padding:44px 12px 18px}
.gl-status{position:absolute;top:22px;left:38px;right:38px;display:flex;justify-content:space-between;
  font:600 11px system-ui,sans-serif;color:#eef1f5;z-index:1}
.gl-screen h3{font-size:18px;margin:0 0 10px;color:#eef1f5}
.gl-card{background:#1b2029;border-radius:8px;padding:10px;margin-bottom:9px}
.gl-card h4{font-size:13px;margin:0 0 6px;color:#eef1f5}
.gl-big{font-size:13px;font-weight:700;margin:0 0 6px}
.gl-hint{color:#9aa3b2;font-size:10.5px;margin:5px 0 0}
.gl-ok{color:#59d17f;font-weight:600;margin:0 0 5px}
.gl-banner{background:#1f7a3a;color:#fff;text-align:center;font-weight:700;font-size:12.5px;padding:9px 6px;
  border-radius:6px;margin:6px 0}
.gl-meter{position:relative;height:14px;background:#0b0d11;border-radius:3px;overflow:hidden}
.gl-meter span{position:absolute;top:0;bottom:0}
.gl-meter .lvl{left:0;width:71%;background:#1f7a3a;animation:gl-talk 1.6s ease-in-out infinite}
.gl-meter .orange{left:75%;width:2px;background:#ff9f1a}
.gl-meter .redm{left:87.5%;width:2px;background:#ff3b4e}
@keyframes gl-talk{0%,100%{width:58%}20%{width:72%}45%{width:64%}70%{width:74%}85%{width:61%}}
.gl-btn{display:block;width:100%;border-radius:6px;padding:10px 6px;margin-top:7px;color:#fff;text-align:center;
  font:700 12.5px system-ui,sans-serif;background:#565d6b}
.gl-btn.red{background:#a32338}.gl-btn.green{background:#1f7a3a}
.gl-who{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center;padding:6px 0;border-top:1px solid #2a2f3a}
.gl-who:first-of-type{border-top:0;padding-top:0}
.gl-who b{font-size:12px}
.gl-who em{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;border-radius:5px;padding:4px 7px;background:#a32338}
.gl-who em.muted{background:#565d6b}
.gl-who i{grid-column:1/span 2;display:block;height:6px;background:#0b0d11;border-radius:2px;overflow:hidden}
.gl-who i span{display:block;height:100%;background:#1f7a3a}

@media(prefers-reduced-motion:reduce){.gl-meter .lvl{animation:none}}
/* Single column on narrow screens: show the phone before the copy. */
@media(max-width:850px){.gl-aside{order:-1}}
@media(max-width:340px){.gl-phone{width:250px}}