/* Sign-in page only (/private/login/). Tokens and components from design/ui.css, layout and .rows from style.css. */
[hidden] { display: none !important; }  /* the page shows one part at a time (login.js); display: grid / block below must not undo it */
.login { display: grid; place-items: center; min-height: 55vh; }
.login .ui-card { width: min(100%, 22rem); padding: 28px 24px 22px; text-align: center; }
.login .lock { color: var(--ui-muted); }
.login h2 { margin: 10px 0 4px; }
.note { margin: 0 0 14px; color: var(--ui-ink-2); font-size: var(--ui-text-sm); }
.login .note { margin-bottom: 18px; }

.btn {
  padding: .45rem .9rem; border: 1px solid var(--ui-grid); border-radius: 8px; background: var(--ui-page); color: var(--ui-ink);
  font: 500 var(--ui-text-sm)/1.4 var(--ui-font); cursor: pointer; transition: background-color .15s, opacity .15s;
}
.btn:hover { background: var(--ui-surface-2); }
.btn.primary { border-color: transparent; background: var(--ui-ink); color: var(--ui-page); }
.btn.primary:hover { opacity: .85; background: var(--ui-ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: .2rem .6rem; font-size: var(--ui-text-xs); }
.login .btn { width: 100%; }

.field { display: block; margin: 0 0 14px; text-align: left; color: var(--ui-ink-2); font-size: var(--ui-text-xs); }
.field input, .linkbox input {
  display: block; width: 100%; margin-top: 4px; padding: .45rem .6rem; border: 1px solid var(--ui-grid); border-radius: 8px;
  background: var(--ui-page); color: var(--ui-ink); font: var(--ui-text-sm)/1.4 var(--ui-font);
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* header: a back button before the title on the Access page */
.title-row { display: flex; align-items: center; gap: 12px; }
.back { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ui-surface); color: var(--ui-ink-2); transition: background-color .15s, color .15s; }
.back:hover { background: var(--ui-surface-2); color: var(--ui-ink); }

/* cards: a title with an action on its right; the passkeys' "add" part under their list */
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem .75rem; flex-wrap: wrap; margin-bottom: 4px; }
.card-head h2 { margin: 0; }
.add { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ui-grid); }
.add .note { margin: 10px 0 0; font-size: var(--ui-text-xs); color: var(--ui-muted); }
.linkbox { display: flex; gap: 8px; margin: 10px 0 0; }
.linkbox input { margin: 0; flex: 1; min-width: 0; font-size: var(--ui-text-xs); }
.msg { min-height: 1.3em; margin: 6px 0 0; font-size: var(--ui-text-sm); color: var(--ui-ink-2); }
.msg.bad { color: var(--ui-down); }


/* the Access page: one column, passkeys first, the machine's own logins under them */
.manage { display: grid; gap: var(--ui-gap); max-width: 46rem; margin: 0 auto; }
.tag { margin-left: .5rem; padding: 0 .45rem; border-radius: 999px; background: var(--ui-surface-2); color: var(--ui-ink-2); font-size: var(--ui-text-xs); font-weight: 500; }
.signed { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--ui-grid); color: var(--ui-ink-2); font-size: var(--ui-text-sm); }
.rows .mute { color: var(--ui-muted); }