/* Control panel additions on top of styles.css */

body.control-page { overflow: auto; }
.control-page .gate { height: auto; min-height: 100vh; }
.ctl { position: relative; z-index: 1; min-height: 100%; }
.ctl .bar { position: sticky; top: 0; z-index: 2; }
.ctl-back { color: var(--signal); font-size: 15px; }

.ctl-main { width: min(860px, 100%); margin: 0 auto; padding: 28px 16px 64px; }
.ctl-title { margin: 0; font: 600 26px/1.2 var(--ui); }
.ctl-stats { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.ctl-flash { min-height: 1.5em; margin: 12px 0 8px; font: 400 14px/1.5 var(--mono); color: var(--ok); }
.ctl-flash.bad { color: var(--c1); }

.ctl-card {
  margin-top: 16px; padding: 22px 22px 20px;
  background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.ctl-card h2 { margin: 0 0 14px; font: 600 17px/1.2 var(--ui); }
.ctl-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.ctl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ctl-row .ctl-note { margin: 0; }

.mode { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.mode-opt {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  color: var(--muted); font-size: 14px;
}
.mode-opt strong { display: block; color: var(--white); font: 600 15px/1.3 var(--ui); margin-bottom: 2px; }
.mode-opt:has(input:checked) { border-color: var(--nasa-red); background: rgba(224, 16, 47, .07); }
.mode-opt input { accent-color: var(--nasa-red); margin-top: 4px; }

.invite-form, .announce-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.invite-form label, .announce-form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.invite-form label:first-child, .announce-form .grow { flex: 1 1 220px; }
.ctl input, .ctl select, .ctl textarea {
  background: var(--space); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 9px 10px; color: var(--white); font: 400 15px/1.3 var(--ui);
}
.ctl textarea { resize: vertical; font-family: var(--mono); }
.ctl input[type="number"] { width: 90px; }
.ctl input:focus, .ctl select:focus, .ctl textarea:focus { border-color: var(--signal); outline: none; }

.new-invite {
  margin-top: 16px; padding: 16px; border: 1px dashed var(--nasa-red); border-radius: var(--r-md);
  background: rgba(224, 16, 47, .06);
}
.new-invite-note { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.new-code { margin: 0 0 12px; font: 500 clamp(18px, 3.5vw, 24px)/1.2 var(--mono); letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }
.new-invite-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 500 13px/1.2 var(--ui); color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line-strong); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td.mono { font-family: var(--mono); }
.tbl .acts { text-align: right; white-space: nowrap; }
.tbl .acts button {
  margin-left: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
}
.tbl .acts button:hover { color: var(--nasa-red); border-color: var(--nasa-red); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 12px/1.4 var(--mono); }
.pill.on { color: var(--ok); background: rgba(127, 224, 194, .1); }
.pill.off { color: var(--faint); background: rgba(111, 155, 255, .08); }

@media (max-width: 640px) {
  .mode { grid-template-columns: 1fr; }
  .ctl-back { display: none; }
}

/* iPhones zoom in on inputs under 16px */
@media (pointer: coarse) {
  .ctl input, .ctl select, .ctl textarea { font-size: 16px; }
}