/* Station-specific styles. The shared palette and primitives come from
   styles.css; this adds the account cards and the ON/OFF switch.
   Built for someone non-technical: states must be readable across the room. */

/* Two columns, so four accounts form a tidy 2×2 instead of 3-then-1. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 62rem) { .cards { grid-template-columns: 1fr; } }

/* The connection fields hold URLs and a 64-char key: give them the room, and
   let them be selected for copy-paste. */
.card .field input[readonly] {
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
}
.card .field { align-items: stretch; flex-direction: column; gap: .25rem; }
.card .field > span:first-child { font-size: .8rem; }

.account { margin-bottom: 0; }

.account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.account-head h2 { margin-bottom: .15rem; }
.acct-number { margin: 0; }

/* A real switch, not a checkbox: the whole point of this screen is ON/OFF. */
.switch { display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.slider {
  width: 2.9rem; height: 1.6rem; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  position: relative; transition: background .15s ease, border-color .15s ease;
  flex: none;
}
.slider::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--muted); transition: transform .15s ease, background .15s ease;
}
.switch input:checked + .slider { background: color-mix(in srgb, var(--ok) 30%, var(--panel-2)); border-color: var(--ok); }
.switch input:checked + .slider::after { transform: translateX(1.3rem); background: var(--ok); }
.switch input:disabled + .slider { opacity: .4; cursor: not-allowed; }
.switch-text { font-size: .78rem; color: var(--muted); min-width: 2.2rem; font-weight: 600; }
.switch input:checked ~ .switch-text { color: var(--ok); }

/* One line that says what this account is doing. Colour carries the meaning. */
.acct-state {
  margin: .9rem 0 .4rem;
  padding: .5rem .7rem;
  border-radius: 7px;
  background: var(--panel-2);
  border-left: 3px solid var(--muted);
  font-size: .9rem;
}
.acct-state.ready      { border-left-color: var(--ok);   color: var(--ok); }
.acct-state.needs-login{ border-left-color: var(--bad);  color: var(--bad); }
.acct-state.off        { border-left-color: var(--muted); color: var(--muted); }
.acct-state.working    { border-left-color: var(--accent); color: var(--accent); }

.acct-stats { margin: .3rem 0 .2rem; }
.acct-advanced { margin-top: .8rem; }
.acct-advanced summary { cursor: pointer; }
.acct-advanced .field span:first-child { min-width: 8rem; }
.acct-advanced input { width: 12rem; }

/* Busy accounts should not be clickable twice. */
.account.busy { opacity: .75; pointer-events: none; }