/* 62-promo.css — PROMO section (#sec-promo): campaigns that promote projects
   on air. Fully on-system: chassis recipe (--panel-face + bezel), recessed
   wells (--well-inset), state chips from the 30-panels grammar, machined
   switches from 20-console. Only promo-specific dress lives here.
   Amber accent only — red stays reserved for the ON AIR lamp.
   NOTE: the phone-in guest-pass sub-UI (.gp-*) renders inside this section
   and leans on the shared primitives (.panel/.card/.btn/.chip/.form-row…);
   keep those strong before adding anything promo-local. */

#sec-promo > .sec-head::before{ content:"11/"; }

/* ---- master bar: rocker + count + new-promo key ---- */
.promo-bar{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin:14px 0 18px;
  padding:10px 14px;
  background:var(--panel-face);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--bezel), var(--shadow-1);
  min-height:56px;
}
.promo-bar .spacer{ flex:1; }

/* ---- schedule buckets (timer / rotation / top-of-hour) ---- */
.promo-bucket{ margin-bottom:22px; }
.bucket-head{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:var(--s2);
}
/* amber tick at the head of each bucket rule, echoing panel titles */
.bucket-head::before{
  content:"";
  width:14px; height:2px; flex:none;
  background:var(--accent-dim);
}

.promo-grid{ grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }

/* ---- campaign card ---- */
.promo-card{
  background:var(--panel-face);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--bezel), var(--shadow-1);
  padding:14px 16px;
  display:flex; flex-direction:column; gap:var(--s2);
  transition:border-color .15s, box-shadow .15s, opacity .15s;
}
.promo-card:hover{ border-color:var(--line-strong); box-shadow:var(--bezel), var(--shadow-2); }
/* disabled campaign dims as a block; controls stay crisp enough to re-arm */
.promo-card.off{ opacity:.6; }
.promo-card.off:hover{ opacity:.85; }

.promo-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.promo-name{
  font-family:var(--font-display);
  font-weight:700; font-size:17px;
  letter-spacing:.04em;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.promo-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.promo-script{ color:var(--muted); font-size:var(--fs-sm); line-height:1.45; }

/* attached code word — recessed mono well, echoes the Codes ticket language */
.promo-code{
  font-size:12px; color:var(--text);
  background:var(--input-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--well-inset);
  padding:6px 9px;
}
.promo-code b{
  color:var(--accent);
  font-family:var(--font-mono);
  letter-spacing:.1em;
}

.promo-actions{ display:flex; align-items:center; gap:var(--s2); margin-top:4px; flex-wrap:wrap; }
.promo-actions .switch{ margin-right:auto; }

/* ---- create / edit forms ---- */
.promo-editform, .promo-new{ margin-top:var(--s3); }
.promo-form label{
  display:block;
  font-size:var(--fs-2xs);
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted);
  margin:12px 0 5px;
}
/* inputs inherit the recessed-well treatment from 00-tokens; promo only
   stretches them to the column */
.promo-form input, .promo-form select, .promo-form textarea{ width:100%; }
.promo-form textarea{ font-family:inherit; line-height:1.5; }
/* paired fields sit two-up; global .form-row is a flex row, promo's is a grid
   of equal columns — scoped so the two never fight */
.promo-form .form-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s3); margin-top:0;
}
.promo-formbtns{ display:flex; gap:10px; margin-top:var(--s4); }

@media (max-width:640px){
  .promo-form .form-row{ grid-template-columns:1fr; }
  .promo-grid{ grid-template-columns:1fr; }
}