/* 63-guests.css — Promotions › Guest line.
   Built entirely on the token layer in 00-tokens.css and on the shared
   primitives (.panel, .card-grid, .btn, .chip, .badge, .switch, .form-row).
   Only what is genuinely specific to putting a caller on air lives here.

   Red is reserved for the ON AIR lamp, so a live caller is signalled with the
   accent + a filled state chip + a moving element, never with red. */

/* Inline SVG icons carry no intrinsic size, and the board's `.ico` sizing is
   scoped per section (#sec-codes, #sec-radio) rather than global — so a new
   pane MUST size its own or every icon renders at the SVG default and blows
   its button up to a tile. */
#pane-guests .ico{
  width:13px; height:13px; flex:none; vertical-align:-2px; margin-right:6px;
}
#pane-guests .btn.danger .ico{ margin-right:0; }

/* ---- sub-tabs (Campaigns | Guest line) ---- */
.promo-subnav{
  display:flex; gap:var(--s2); align-items:center;
  border-bottom:1px solid var(--line); margin-bottom:var(--s5);
}
.promo-subnav .subtab{
  appearance:none; background:none; border:0; cursor:pointer;
  font:600 var(--fs-sm)/1 var(--font-body); letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
  padding:var(--s3) var(--s4); border-bottom:2px solid transparent;
  transition:color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.promo-subnav .subtab:hover{ color:var(--text); }
.promo-subnav .subtab.on{ color:var(--accent-bright); border-bottom-color:var(--accent); }
.promo-subnav .subtab:focus-visible{
  outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:var(--radius-sm);
}

/* ---- the line's master bar ---- */
.gp-bar{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding:var(--s4) var(--s5); margin-bottom:var(--s4);
}
.gp-bar .spacer{ flex:1 1 auto; }
.gp-phone{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--fs-sm)/1 var(--font-mono); color:var(--accent-bright);
  padding:var(--s2) var(--s3); border:1px solid var(--accent-line);
  border-radius:var(--radius-sm); background:var(--accent-well);
}
.gp-phone .ico{ width:14px; height:14px; }
.gp-inline{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:500 var(--fs-xs)/1 var(--font-body); color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.gp-inline input{ width:4.5rem; }
.gp-closed-note{ margin:calc(var(--s2) * -1) 0 var(--s4); }

/* ---- who is on the mic ---- */
.gp-onair{ margin:var(--s5) 0; }
.gp-onair .bucket-head{ display:flex; align-items:center; gap:var(--s2); }
.gp-onair .bucket-head .ico{ width:15px; height:15px; color:var(--accent-bright); }
.gp-caller-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

.gp-caller{
  background:var(--panel-face); border:1px solid var(--accent-line);
  border-radius:var(--radius); padding:var(--s4);
  box-shadow:var(--shadow-2), inset 0 0 0 1px var(--accent-ghost);
  display:flex; flex-direction:column; gap:var(--s3);
  position:relative; overflow:hidden;
}
/* A slow sweep along the top edge: the one moving thing on the page, so "a
   human being is talking on your station right now" is visible peripherally. */
.gp-caller::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  background-size:40% 100%; background-repeat:no-repeat;
  animation:gp-sweep 2.4s linear infinite;
}
@keyframes gp-sweep{ from{ background-position:-40% 0; } to{ background-position:140% 0; } }
.gp-caller.muted{ border-color:var(--line-strong); box-shadow:var(--shadow-1); }
.gp-caller.muted::before{ animation:none; background:var(--line-strong); }

.gp-caller-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.gp-caller-num{ font:600 var(--fs-lg)/1 var(--font-mono); color:var(--text); }
.gp-caller-meta{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.gp-caller-actions{ display:flex; gap:var(--s2); flex-wrap:wrap; }

/* ---- pass cards ---- */
.gp-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 23rem), 1fr)); }

.gp-card{
  background:var(--panel-face); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s4);
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:var(--s3);
  transition:border-color var(--t-fast) var(--ease-out);
}
.gp-card.dim{ opacity:.72; }
.gp-card.hot{ border-color:var(--accent-line); box-shadow:var(--shadow-2); }
.gp-card-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.gp-label{ font:600 var(--fs-md)/1.2 var(--font-body); color:var(--text); }

/* The code is the product. It gets the recessed readout treatment the
   transmitter strip uses for now-playing, at display size, because an operator
   reads it off the screen and says it into a live microphone. */
.gp-code-well{
  background:var(--surface-0); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); box-shadow:var(--well-inset);
  padding:var(--s3) var(--s4);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  flex-wrap:wrap;
}
.gp-code{
  font:700 var(--fs-d3)/1 var(--font-mono);
  letter-spacing:.08em; color:var(--accent-bright);
  text-shadow:0 0 18px var(--accent-glow);
  word-break:break-word;
}
.gp-dtmf{
  font:500 var(--fs-2xs)/1 var(--font-mono); color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}

.gp-countdown{ font:500 var(--fs-sm)/1 var(--font-mono); color:var(--muted); }
.gp-countdown b{ color:var(--text); font-weight:600; }
.gp-countdown.urgent b{ color:var(--warn); }

.gp-meta{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.gp-actions{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin-top:auto; }

/* ---- forms ---- */
.gp-form, .gp-gameform{ display:flex; flex-direction:column; gap:var(--s3); }
.gp-editform{ margin-top:var(--s3); border-top:1px dashed var(--line); padding-top:var(--s4); }
.gp-new{ margin-bottom:var(--s5); padding:var(--s5); }

.gp-rules{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:var(--s4); margin:0; display:flex; flex-direction:column; gap:var(--s3);
  background:var(--surface-1);
}
/* Stack every field label above its control. Scoped to the labels that ARE
   field labels — .gp-check and .gp-day are also <label>s but lay their own
   checkbox out in a row, and an id-scoped `label{display:block}` would beat
   their class rule and break both. */
#pane-guests .gp-form > label,
#pane-guests .gp-gameform > label,
#pane-guests .gp-rules > label,
#pane-guests .form-row label,
#pane-guests .r-days > label{
  display:block; margin-bottom:var(--s2);
}
#pane-guests .form-row > div{ display:flex; flex-direction:column; }
#pane-guests .form-row input,
#pane-guests .form-row select,
#pane-guests .gp-rules > input{ width:100%; }

.gp-rules legend{
  font:600 var(--fs-2xs)/1 var(--font-body); text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); padding:0 var(--s2);
}
/* Folded = not part of this preset. Hidden, but the value is still submitted,
   so switching preset never silently drops a rule already set. */
.folded{ display:none !important; }

.help-inline{ font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0; }

.gp-codeedit{ display:flex; gap:var(--s2); align-items:stretch; }
.gp-codeedit input{ flex:1 1 auto; font-family:var(--font-mono); letter-spacing:.06em; }
.gp-codeedit .btn{ flex:0 0 auto; display:inline-flex; align-items:center; }

.gp-days{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.gp-day{
  display:inline-flex; align-items:center; gap:var(--s1);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:var(--s2) var(--s3); cursor:pointer;
  font:500 var(--fs-xs)/1 var(--font-body); color:var(--muted);
  min-height:36px;
}
.gp-day:has(input:checked){
  border-color:var(--accent-line); background:var(--accent-well); color:var(--accent-bright);
}
.gp-day input{ accent-color:var(--accent); }

.gp-check{
  display:flex; align-items:center; gap:var(--s3); cursor:pointer;
  font:400 var(--fs-sm)/1.3 var(--font-body); color:var(--text); min-height:36px;
}
.gp-check input{ accent-color:var(--accent); width:16px; height:16px; flex:0 0 auto; }

.gp-formbtns{ display:flex; gap:var(--s3); flex-wrap:wrap; }

/* ---- games ---- */
.gp-games{ margin-top:var(--s6); }
.gp-games .bucket-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.gp-game-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.gp-game{
  background:var(--panel-face); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3); box-shadow:var(--shadow-1);
}
.gp-game.dim{ opacity:.72; }
.gp-question{
  font:400 var(--fs-sm)/1.45 var(--font-body); color:var(--muted);
  border-left:2px solid var(--accent-line); padding-left:var(--s3);
}

/* ---- motion / responsive ---- */
@media (prefers-reduced-motion: reduce){
  .gp-caller::before{ animation:none; background:var(--accent); }
  .promo-subnav .subtab{ transition:none; }
}
@media (max-width: 640px){
  .gp-bar{ gap:var(--s3); }
  .gp-bar .spacer{ display:none; }
  .gp-code{ font-size:var(--fs-d4); }
}

/* ---- X account (#sec-xaccount) ---- */
#sec-xaccount .xa-panel{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); max-width:46rem; }
#sec-xaccount .xa-state{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }
#sec-xaccount .xa-form{ display:flex; flex-direction:column; gap:var(--s3); }
#sec-xaccount label{ display:block; margin-bottom:var(--s2); }
#sec-xaccount input, #sec-xaccount select{ width:100%; }
#sec-xaccount .form-row > div{ display:flex; flex-direction:column; }
#sec-xaccount .xa-picker{
  display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4);
}
#sec-xaccount .xa-picker label{ margin:0; white-space:nowrap; }
#sec-xaccount .xa-picker select{ width:auto; min-width:12rem; }
#sec-xaccount .xa-note{ max-width:46rem; margin-top:var(--s4); }