/*
 * The sign-in screen (#orbit-session) and the account panel (#orbit-account), on the design tokens.
 * Both are scoped by id; apps/web/src/session.ts documents what they contain.
 */
body.orbit-locked > *:not(#orbit-session) { display: none !important; }
#orbit-session { display: none; }
body.orbit-locked #orbit-session {
  display: flex; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; gap: 64px;
  padding: 32px 16px; background: var(--ground);
}
/* Beside the card on a wide screen; on a phone the card alone. */
#orbit-session .os-about { max-width: 340px; color: var(--muted); font-size: var(--fs-body); line-height: 1.55; }
#orbit-session .os-about p { margin: 0 0 12px; }
#orbit-session .os-about .os-about-lead { color: var(--text); font-size: var(--fs-section); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 900px) { #orbit-session .os-about { display: none; } }
#orbit-session .os-card {
  width: 100%; max-width: 420px; background: var(--surface); color: var(--text);
  border-radius: var(--radius-card); padding: 32px;
}
#orbit-session .os-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-body); margin-bottom: 24px; }
#orbit-session .os-brand svg { width: 24px; height: 24px; flex: none; }
#orbit-session h1 { font-size: var(--fs-title); line-height: 1.2; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.01em; }
#orbit-account h2 { font-size: var(--fs-section); line-height: 1.25; font-weight: 600; margin: 0; }
#orbit-session h3, #orbit-account h3 { font-size: var(--fs-small); font-weight: 600; margin: 0 0 8px; }
#orbit-session p, #orbit-account p { margin: 0 0 12px; }
#orbit-session form, #orbit-account form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.os-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--text); }
.os-field input {
  font: inherit; font-weight: 400; font-size: var(--fs-body); min-height: var(--control-height); padding: 0 12px;
  border: 1px solid var(--control); border-radius: var(--radius-control); color: var(--text); background: var(--surface);
}
.os-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.os-primary, .os-ghost, .os-link, .os-danger {
  font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; border-radius: var(--radius-control);
}
.os-primary, .os-ghost, .os-danger { min-height: var(--control-height); padding: 0 16px; border: 0; }
.os-primary { background: var(--primary); color: var(--surface); }
.os-primary:hover { background: var(--text); }
.os-ghost { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
.os-ghost:hover { background: var(--active); }
.os-danger { background: var(--surface); color: var(--negative); border: 1px solid var(--control); }
.os-link { background: none; border: none; color: var(--accent); padding: 0; min-height: 28px; text-decoration: underline; }
#orbit-session button:focus-visible, #orbit-account button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#orbit-session button:disabled, #orbit-account button:disabled { opacity: 0.6; cursor: default; }
.os-links { font-size: var(--fs-small); display: flex; gap: 4px 16px; flex-wrap: wrap; }
.os-muted { color: var(--muted); font-size: var(--fs-small); }
.os-error { color: var(--negative); font-size: var(--fs-small); font-weight: 500; }
.os-error:empty, .os-ok:empty { display: none; }
.os-ok { color: var(--positive); font-size: var(--fs-small); font-weight: 500; }
.os-notice { background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-control); padding: 10px 12px; font-size: var(--fs-small); margin-bottom: 12px; }
.os-dev { margin-top: 24px; padding: 16px; background: var(--ground); border-radius: var(--radius-control); }
.os-dev p { color: var(--warning); font-size: var(--fs-small); }
.os-dev-list { display: flex; flex-wrap: wrap; gap: 8px; }
.os-qr { width: 180px; height: 180px; margin: 4px auto 8px; }
.os-qr svg { width: 100%; height: 100%; display: block; }
.os-key { display: block; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; /* taste-skill-ignore: a literal key */ font-size: var(--fs-small); letter-spacing: 1px; background: var(--ground); border-radius: var(--radius-control); padding: 8px; margin-bottom: 12px; word-break: break-all; }
.os-codes { columns: 2; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-small); background: var(--ground); border-radius: var(--radius-control); padding: 12px 12px 12px 32px; margin: 0 0 12px; }
#orbit-account {
  position: fixed; inset: 0; z-index: 120; background: rgba(27, 29, 31, 0.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto;
}
#orbit-account[hidden] { display: none; }
#orbit-account .os-dialog { width: 100%; max-width: 560px; background: var(--surface); color: var(--text); border-radius: var(--radius-card); padding: 24px; }
.os-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.os-section { border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 16px; }
.os-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
.os-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.os-badge { font-size: 12px; padding: 1px 8px; border-radius: var(--radius-chip); font-weight: 500; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); margin-left: 4px; }
.os-check { display: flex; gap: 8px; align-items: center; font-size: var(--fs-small); margin-bottom: 8px; }
.os-issued { background: var(--ground); border-radius: var(--radius-control); padding: 8px 12px; font-size: var(--fs-small); width: 100%; }
.os-inline { display: flex; gap: 8px; flex-wrap: wrap; }