/* New sign-in alerts (public/signin.js). The rows are Signed-in devices' own .dev-row, so the two
   lists read as one thing; only what those rows never needed is here. Theme tokens only. */

.si-list { display: flex; flex-direction: column; gap: 8px; }
.si-row { flex-wrap: wrap; }
.si-row.si-new { border-color: var(--danger-ring); }
/* "This device" stays one word-pair next to a long button, not "This / device". */
.si-row .dev-badge { white-space: nowrap; }
/* A row with a line of explanation (a move, a held password, a sign-in from somewhere new): the
   answers go under the words at every width, so the words and the list of links keep the row's
   width instead of a narrow column beside two buttons; the icon stays at the top. */
.si-row.si-long { align-items: flex-start; }
.si-row.si-long .dev-mid { flex: 1 1 calc(100% - 34px); }
.si-row.si-long .si-acts { margin-left: 34px; }
.si-held { font-size: var(--fs-md); color: var(--danger); margin-top: 2px; }
.si-ip { font-variant-numeric: tabular-nums; }
.si-nw { white-space: nowrap; }
.si-state {
  font-size: calc(var(--fs-xs) + var(--fs-half)); font-weight: var(--fw-semi); color: var(--mut);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: calc(1 * var(--sp)) calc(8 * var(--sp));
}
.si-acts { display: flex; gap: 8px; margin-left: auto; }
.si-acts .btn, .si-foot .btn, .si-after .btn { height: 30px; padding: 0 calc(12 * var(--sp)); font-size: calc(var(--fs-md) + var(--fs-half)); }
.si-after {
  margin: 0 0 12px; color: var(--text); font-size: calc(var(--fs-md) + var(--fs-half));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: calc(10 * var(--sp)) calc(12 * var(--sp)); border: 1px solid var(--danger-ring); border-radius: var(--r-sm);
}
.si-after > span { flex: 1 1 200px; }
.si-after.hidden { display: none; }
/* A moved session's links and frames: a plain list, each with its own Turn off. */
.si-made-h { font-size: var(--fs-md); color: var(--mut); margin-top: 6px; }
.si-made { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.si-made li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-md); }
.si-made-n { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.si-made .btn { height: 26px; padding: 0 calc(10 * var(--sp)); font-size: var(--fs-md); }
.si-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.si-foot:empty { display: none; }

/* A phone: the buttons go under the words rather than squeezing them to one word a line. */
@media (max-width: 560px) {
  .si-acts, .si-row.si-long .si-acts { margin-left: 0; width: 100%; }
  .si-acts .btn { flex: 1; }
}