/* epass-only components, kept out of the three files ported verbatim from
   nativeweb so those stay diffable against their source. Everything here is a
   class epass's flows need and nativeweb's single-form sign-in never had. */

/* The lede under a card title: one line of instruction, quieter than the title
   and quieter than the controls under it. */
.auth-card__lede {
  font-size: 13.5px;
  color: var(--t2);
  text-align: center;
  margin: -6px 0 0;
}

/* A method choice is a button, not a radio, so the whole step survives with
   scripting off (see the note in Render/LoginPage.cs). Shape from the handoff's
   EpassMethodCard: icon chip, title + description, chevron. .btn lays its
   children out in a row and forbids wrapping, so the text column undoes that
   for itself. */
.method-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
  color: var(--t1);
  box-shadow: var(--sh1);
  text-align: left;
  white-space: normal;
}

.method-card--highlight {
  background: var(--ac-dim);
  border-color: var(--ac);
}

.method-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--rl);
  background: var(--s3);
  color: var(--t2);
}

.method-card--highlight .method-card__icon {
  background: var(--ac-dim);
  color: var(--ac);
}

.method-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.method-card__title,
.method-card__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
}

.method-card__desc,
.method-card__hint {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--t2);
}

.method-card__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--rfull);
  background: var(--ac);
  color: var(--on-ac);
}

.method-card > .ico:last-child {
  flex-shrink: 0;
  color: var(--t3);
}

/* The way back out of a step. Reads as a link but keeps a button's hit area,
   so it never competes with the primary action above it. */
.btn--ghost {
  background: transparent;
  color: var(--t2);
}

.btn--ghost:hover {
  background: var(--s3);
  color: var(--t1);
}

/* One place in the flows is a real navigation rather than an action -- "Back to
   sign in" on the reset card -- so it is an <a>, not a form. The global a:hover
   rule underlines it, which on something shaped like a button reads as a
   rendering fault. */
a.btn:hover {
  text-decoration: none;
}

/* A form inside an auth card stacks its own children the way the card stacks
   its children. .auth-card's gap only reaches its DIRECT children, so until the
   reset card no form here had more than one field and nothing showed: the three
   fields butted together and each label read as belonging to the input above it
   rather than the one below -- observed 2026-08-30 in
   tmp/passphrase-reset/shots/code.png. Hidden inputs (the antiforgery token, the
   step marker, the readonly username) are display:none and so are not flex
   items, which is why this leaves the single-field forms alone. */
.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- v1 handoff component families ------------------------------------- */
/* Everything below is the handoff's shared library (epass-shared.jsx) in the
   green tokens: same shapes, sizes and hierarchy, none of its colours. */

.ico {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ac);
}

.logo__mark {
  display: block;
  flex-shrink: 0;
}

.logo__word {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--t1);
}

/* Button shape, as the v2 canvas's Btn: the --rm stop, the body face, a 1px
   edge. This restates .btn for the whole app rather than adding a variant --
   there is one button shape, and --rfull is left for the things that really are
   pills (the method-card badge and .chip, both the canvas's Tag). */
.btn {
  font-family: var(--font-body);
  font-size: 14.5px;
  letter-spacing: normal;
  padding: 12px 20px;
  border-radius: var(--rm);
  border-width: 1px;
}

.btn--primary {
  box-shadow: 0 0 28px var(--ac-glow);
}

.btn--secondary {
  background: var(--s3);
  border-color: var(--bd2);
  color: var(--t1);
}

.btn--ghost {
  border-color: var(--bd);
}

.btn--sm {
  font-size: 13px;
  padding: 8px 15px;
}

.btn--lg {
  font-size: 15px;
  padding: 14px 22px;
}

/* Inputs, as the canvas's Input: on the raised surface rather than sunk into
   --s2, at the --rm stop, with room for a leading icon. 46px rather than the
   canvas's 38 -- that is desktop density, and under 44 the tap target fails on
   a phone, which is the width this card is laid out for first. */
.input {
  font-size: 15px;
  min-height: 46px;
  padding: 12px 14px;
  background: var(--s1);
  border-width: 1px;
  border-radius: var(--rm);
  box-shadow: var(--sh1);
}

.field__control {
  position: relative;
}

.field--icon .input {
  padding-left: 44px;
}

.field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  line-height: 0;
  pointer-events: none;
}

/* A label the placeholder already says: kept for assistive tech, not drawn. */
.field__label--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border: 1px solid var(--bd2);
  border-radius: var(--rfull);
  background: var(--s3);
  color: var(--t2);
}

.chip--ac {
  background: var(--ac-dim);
  border-color: var(--ac-bd);
  color: var(--ac);
}

.chip--ok {
  background: var(--ok-dim);
  border-color: var(--ac-bd);
  color: var(--ok-fg);
}

.chip--warn {
  background: var(--warn-dim);
  border-color: transparent;
  color: var(--warn);
}

.chip--err {
  background: var(--err-dim);
  border-color: transparent;
  color: var(--err-fg);
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--t3);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* The 4-dot progress the AuthFlowPrototype draws above every step. */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
}

.stepper__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--s3);
  flex-shrink: 0;
}

.stepper__line {
  flex: 1;
  height: 1px;
  background: var(--bd);
}

.stepper__dot--on {
  background: var(--ac);
}

.stepper__line--on {
  background: var(--ac);
}

/* One input standing in for the handoff's six boxes: letter-spaced monospace
   so each digit sits in its own visual cell, and still a single field so it
   works with scripting off and with a password manager's autofill. */
.code-input {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.55em;
  text-align: center;
  text-indent: 0.55em;
  min-height: 64px;
}

.code-input--err,
.code-input--err:focus {
  border-color: var(--err);
  box-shadow: 0 0 0 3px var(--err-dim);
  color: var(--err);
}

/* The /login/link card on a device with no sign-in in progress: the code to
   read off and type elsewhere, set like the input it will be typed into. */
.link-code {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-align: center;
  text-indent: 0.4em;
  margin: 16px 0;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: var(--on-ac);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.avatar--sm {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

/* A row in any settings or devices list: icon chip, title + meta, actions. */
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--s2);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
}

.list-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--rm);
  background: var(--s3);
  color: var(--t2);
}

.list-row__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.list-row__title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: break-word;
}

.list-row__meta {
  font-size: 12.5px;
  color: var(--t2);
}

.list-row__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* --- Shell and responsive rule ------------------------------------------ */
/* The handoff frames every end-user screen at 390 wide. Under 480px the auth
   card gives up its chrome and the content sits on the page like the
   prototype; from 480px up it is a card centred on the background, which is
   what a desktop needs a 390-wide column to look like. Signed-in pages widen
   to a 720 column at 768px, where the bottom tab bar hands over to the top
   bar. Those are the only two breakpoints. */
.auth-board {
  padding: 24px 16px;
  align-items: flex-start;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 24px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.auth-card__logo {
  justify-content: flex-start;
  margin-bottom: 18px;
}

.auth-card__title {
  text-align: left;
}

.auth-card__lede {
  text-align: left;
}

@media (min-width: 480px) {
  .auth-board {
    align-items: center;
    padding: 40px 24px;
  }

  .auth-card {
    padding: 34px 34px 30px;
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: var(--rxx);
    box-shadow: var(--sh2);
  }
}

.app-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  height: 72px;
  padding-top: 10px;
  background: var(--s1);
  border-top: 1px solid var(--bd);
}

.tab-bar__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--t3);
  text-decoration: none;
}

.tab-bar__item:hover {
  color: var(--t2);
  text-decoration: none;
}

.tab-bar__item--active,
.tab-bar__item--active:hover {
  color: var(--ac);
}

.top-nav {
  display: none;
}

@media (min-width: 768px) {
  .tab-bar {
    display: none;
  }

  .app-shell {
    padding: 28px 24px 60px;
  }

  .top-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 12px 24px;
    background: var(--s1);
    border-bottom: 1px solid var(--bd);
  }

  .top-nav__brand {
    display: inline-flex;
  }

  .top-nav__brand:hover {
    text-decoration: none;
  }

  .top-nav__links {
    display: flex;
    flex: 1;
    gap: 6px;
  }

  .top-nav__link {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--t2);
    padding: 8px 12px;
    border-radius: var(--rm);
  }

  .top-nav__link:hover {
    color: var(--t1);
    background: var(--s3);
    text-decoration: none;
  }

  .top-nav__link--active,
  .top-nav__link--active:hover {
    color: var(--ac);
    background: var(--ac-dim);
  }

  .top-nav__signout {
    margin: 0;
  }
}

/* --- Auth-step furniture --------------------------------------------------- */
/* The "← Back" above a step, the footer line under a card, and the big icon
   that heads the passkey, locked and two-factor states. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--t2);
  cursor: pointer;
}

.back-link:hover {
  color: var(--t1);
}

.auth-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--t3);
  text-align: center;
}

.auth-card__foot a {
  color: var(--ac);
  font-weight: 500;
}

.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 76px;
  height: 76px;
  margin: 4px 0 6px;
  border-radius: 50%;
  background: var(--s2);
  border: 1px solid var(--bd2);
  color: var(--t2);
}

.state-icon--ac {
  background: var(--ac-dim);
  border-color: var(--ac-bd);
  color: var(--ac);
  box-shadow: 0 0 0 8px var(--ac-glow);
}

.state-icon--err {
  background: var(--err-dim);
  border-color: transparent;
  color: var(--err);
}

.auth-card__lede strong {
  color: var(--t1);
  font-weight: 500;
}

/* The "1 of 2" beside the logo on the register cards, and the @ that stands in
   for an icon on the username field. */
.auth-card__logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-label {
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--t3);
}

.field__icon--at {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
}

a.back-link:hover {
  text-decoration: none;
}

/* --- Consent (OAuthConsent + EmbedHostedPage) and the device flow --------- */
.consent__brands {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--t3);
}

.consent__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--rl);
  background: var(--s2);
  border: 1px solid var(--bd2);
  overflow: hidden;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
}

.consent__brand--epass {
  color: var(--ac);
  background: var(--ac-dim);
  border-color: var(--ac-bd);
}

.consent__brand .oauth-consent__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.consent__site {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -8px 0 0;
  font-size: 12.5px;
  color: var(--t3);
}

.consent__scopes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consent__scope {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--rm);
}

.consent__scope > .ico:first-child {
  color: var(--ok-fg);
}

.consent__scope > span {
  flex: 1;
}

.consent__scope > .ico:last-child {
  color: var(--ok);
}

.consent__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--t3);
}

.consent__note .ico {
  margin-top: 2px;
}

.consent__user .list-row__title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t2);
}

.consent__user .list-row__meta {
  color: var(--t1);
}

.state-icon--warn {
  background: var(--warn-dim);
  border-color: transparent;
  color: var(--warn);
}

.consent__aside {
  display: none;
}

@media (min-width: 960px) {
  .auth-board--consent {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 440px);
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .consent__aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 34px;
  }

  .consent__aside-line {
    margin: 0;
    font-size: 15px;
    color: var(--t2);
  }

  .consent__aside-line strong {
    color: var(--t1);
  }

  .consent__aside-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    color: var(--t3);
  }
}

/* ---- Profile (/home) ---------------------------------------------------- */
.profile { display: flex; flex-direction: column; gap: 20px; }
.profile__head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 4px; text-align: center; }
.profile__head .avatar { width: 72px; height: 72px; font-size: 28px; }
.profile__name { margin: 8px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.profile__handle { margin: 0; color: var(--t2); font-size: 14px; }
.profile__signout { margin-top: 4px; }
.list-row--link { text-decoration: none; color: inherit; }
.list-row--link:hover { background: var(--s2); border-color: var(--ac); }
.list-row__title .chip { margin-left: 6px; vertical-align: middle; }
.list-row__actions .btn { padding: 6px 10px; font-size: 13px; }

/* ---- Devices (/settings/devices) ----------------------------------------- */
.settings-list__row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
/* A user-agent string has no natural break points, so without this it wraps one
   word per line beside the Sign out button on a phone. */
.settings-list__item > div { min-width: 0; overflow-wrap: anywhere; }
.settings-list__item > form { flex: none; }
.chip { white-space: nowrap; }
/* On a phone the action drops under the text instead of squeezing it. */
@media (max-width: 479px) {
  .settings-list__item { flex-wrap: wrap; }
  .settings-list__item > div { flex: 1 1 100%; }
  .settings-list__item > form { margin-left: auto; }
}
.settings-list__row .list-row__icon { flex: none; }
.settings-badge--warn { color: var(--warn); border-color: var(--warn); }

/* ---- TOTP setup QR --------------------------------------------------------- */
.qr { width: 200px; max-width: 100%; padding: 10px; margin: 4px 0 12px; background: #fff; border-radius: var(--rm); }
.qr svg { display: block; width: 100%; height: auto; }

/* The delete-account form is the one folded form with two fields and a hint
   under one of them. components.css styles .settings-list__rename > form as a
   flex row -- built for one small input beside a button -- and in that row the
   passphrase field lands beside the confirmation field with both labels
   wrapped. This stacks them. Here rather than in components.css because that
   file stays diffable against nativeweb. */
.settings-list__rename--stacked > form {
  display: block;
  max-width: 320px;
}

.settings-list__rename--stacked > form .field {
  margin-bottom: 12px;
}