/* ---------- sign-in to a library server: built from the card's own parts, so every theme restyles it ---------- */
#card.signin { width: min(410px, 100%); padding: 40px 28px 30px; gap: 20px; }
#card.signin .head { text-align: center; }
#card.signin .head h2 { font-size: 22px; }
#card.signin .head .pill { margin-bottom: 10px; text-transform: none; letter-spacing: 0.02em; font-family: var(--mono); }
#card.signin .head button.pill { padding: 0; border: 0; background: none; cursor: pointer; }
#card.signin .head button.pill:hover { text-decoration: underline; text-underline-offset: 3px; }
#card.signin .head button.pill:focus-visible, #card.signin .node-pick:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 4px; }
#card.signin .head .sub { margin-top: 6px; }
#card.signin .fields { display: flex; flex-direction: column; gap: 16px; }
#card.signin hr.hdivider { width: 100%; height: 1px; margin: 6px 0; border: 0; background: var(--border); }
#card.signin input.text { padding: 11px 12px; }
#card.signin .node-url-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: -16px; max-height: 200px; transition: max-height 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease, visibility 0s; }
#card.signin .node-help { display: block; line-height: 12px; font-size: 11px; text-align: right; color: var(--muted); text-decoration: underline; }
#card.signin .node-help:hover { color: var(--fg); }
#card.signin .node-url-group:not(.no-help) + .note { margin-top: 12px; } /* the help link hangs into the gap above: keep the note clear of it */
@media (prefers-reduced-motion: reduce) { #card.signin .node-url-group { transition: none !important; } }
/* Both cards: one column until a node other than this server is picked, then the second column opens up. */
#card.signin.two-col { width: min(440px, 100%); transition: width 0.35s ease; }
#card.signin.two-col.expanded { width: min(720px, 100%); }
#card.signin.two-col.register { width: min(484px, 100%); } /* Create your account: 10% wider than sign-in */
#card.signin.two-col.register.expanded { width: min(792px, 100%); }
#card.signin .cols { display: grid; grid-template-columns: 1fr 1px 0fr; gap: 0; align-items: start; transition: grid-template-columns 0.35s ease, gap 0.35s ease; }
#card.signin.expanded .cols { grid-template-columns: 1fr 1px 1fr; gap: 28px; }
#card.signin hr.vdivider { align-self: stretch; width: 1px; height: auto; margin: 0; border: 0; background: var(--border); }
#card.signin .cols > .fields:last-child { min-width: 0; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity 0.25s ease, max-height 0.35s ease, visibility 0s 0.35s; }
#card.signin.expanded .cols > .fields:last-child { max-height: 520px; overflow: visible; visibility: visible; opacity: 1; transition: opacity 0.3s ease 0.1s, max-height 0.35s ease, visibility 0s; }
#card.signin .cols > hr.vdivider { max-height: 0; opacity: 0; transition: opacity 0.25s ease; }
#card.signin.expanded .cols > hr.vdivider { max-height: none; opacity: 1; transition: opacity 0.3s ease 0.1s; }
@media (max-width: 640px) {
  #card.signin .cols, #card.signin.expanded .cols { grid-template-columns: 1fr; gap: 16px; }
  #card.signin hr.vdivider { width: 100%; height: 1px; }
  #card.signin:not(.expanded) .cols > :not(:first-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) { #card.signin.two-col, #card.signin .cols, #card.signin .cols > * { transition: none !important; } }
.actions.stack { flex-direction: column; flex-wrap: nowrap; justify-content: stretch; }
.actions.stack button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; }
.actions.stack button svg { width: 18px; height: 18px; flex: none; }
#card.signin .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
#card.signin .or::before, #card.signin .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#card.signin .err { text-align: center; }
#card.signin .note { text-align: left; line-height: 1.5; }
/* The error-reports choice on the create-account form: a compact box, not a full settings row. */
#card.signin label.toggle:has(#pw-reports) { gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
#card.signin label.toggle:has(#pw-reports) input { width: 14px; height: 14px; margin-top: 2px; }
#card.signin label.toggle:has(#pw-reports) .desc { font-size: 12px; line-height: 1.4; }
#card.signin .foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
#card.signin .foot.center { justify-content: center; gap: 20px; }
/* Bitwarden-style footer: where the account lives. It opens the node picker. */
#card.signin .foot.accessing { justify-content: center; gap: 6px; color: var(--muted); font-size: 12px; }
#card.signin .foot.accessing strong { font-weight: 600; }
/* The "Tinker node" row: the current node's name as a link, with a chevron, that opens the picker. */
#card.signin .node-pick { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--fg); font-size: 14px; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#card.signin .node-pick::after { content: ""; flex: none; width: 5px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
#card.signin .node-pick:hover { color: var(--accent); }
/* The node picker, under the "Tinker node" row: one radio per node type, a plain hint under each. The head pill, that row's link and the footer open it. */
#card.signin .access-menu { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; }
#card.signin .access-menu[hidden] { display: none; }
#card.signin .access-menu .sub { margin: 0; color: var(--muted); font-size: 12px; }
#card.signin .access-menu label.toggle { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; cursor: pointer; }
/* One line per option: the hint sits beside the name and wraps under it only when the card is narrow. */
#card.signin .access-menu label.toggle > span { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
#card.signin .access-menu .desc { font-size: 12px; }
/* The node row reads as a setting: its label at the left, the current node as a link at the right. */
#card.signin label.node-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }

#card.signin .link { padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#card.signin .link:hover, #card.signin .link:focus-visible { color: var(--accent); outline: none; }
#card.signin .forgot { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 13px; }
#card.signin .link:disabled { opacity: .5; cursor: default; }
.signin-code {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 20px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: min(var(--slot-radius), 14px);
  font: 600 30px/1.2 var(--mono);
  letter-spacing: 0.1em;
}
.signin-code + .actions { justify-content: center; }
.signin-code .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
#card.signin .node-url-group.no-help { margin-bottom: 0; }
#card.signin .node-url-group.no-help .node-help { display: none; }
/* The log-in and create-your-account cards: pill buttons (the browser sign-ins, then Continue), the icon at the
   left and the label centred, as on the web. Theme colours only, so every theme restyles them. */
#card.signin .actions.pills button { border-radius: 999px; padding: 12px 18px; font-weight: 600; }
#card.signin .actions.stack.pills { gap: 12px; }
#card.signin .actions.stack.pills button { position: relative; background: transparent; border-color: color-mix(in srgb, var(--fg) 25%, transparent); }
#card.signin .actions.stack.pills button:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
#card.signin .actions.stack.pills button svg { position: absolute; left: 20px; }
#card.signin .actions.pills:not(.stack) { flex-wrap: nowrap; }
#card.signin .actions.pills:not(.stack) button { flex: 1; }
#card.signin .actions.pills #pw-back[hidden] { display: none; }
#card.signin input#pw-email { border-radius: 999px; padding-inline: 18px; }
#card.signin .foot.ask { margin: 0; color: var(--muted); }
#card.signin .foot.ask .link.strong { color: var(--fg); }
#card.signin .foot.ask .link.strong:hover { color: var(--accent); }
/* Run offline: the same pill as the browser sign-ins, set apart from the rest by a little space. */
#card.signin .actions.stack.pills.offline { margin-top: 12px; }
/* A browser sign-in the server has not turned on: shown, greyed out. */
#card.signin .actions.stack.pills button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: transparent; }