/* The redesigned sign-in / request-access screen (design 16 Sept 2026, owner's corrections in the brief).
   Loaded after login.css and applied to #entry once entry.js has rebuilt it (<main id="entry" class="entry entry2">).
   Everything here is scoped to .entry2, so the old rules in login.css stay inert rather than fighting these.

   Two rules shape the whole file:
   - Nothing scrolls (owner, 16 Sept). The screen is exactly one viewport tall and clipped; every state is sized to fit
     390x844 and 1440x900. The promise panel is the first thing dropped when there is no room for it.
   - Colours are the website's, not the app's navy: --accent is #315fe5 in tokens.css already. */

.entry.entry2 {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--card);
  --e-gap: 18px;
  --e-field: 48px;
  --e-otp-box: 52px;
  --e-otp-space: 12px;
  --e-card: 400px;
}

/* ---- the promise panel (left) ------------------------------------------------------------------------------ */
.entry2 .e-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 44px clamp(36px, 4.4vw, 76px);
  background: linear-gradient(145deg, var(--row-highlight), var(--accent-tint));
  color: var(--ink);
}
.entry2 .brand { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: var(--text-appbar); font-weight: var(--weight-brand); letter-spacing: var(--track-h1); text-decoration: none; }
.entry2 .brand img { border-radius: 9px; }
.entry2 .e-promise { margin: auto 0; max-width: 460px; }
.entry2 .e-eyebrow { display: flex; flex-direction: row; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--secondary); font-size: var(--text-meta); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
/* The dot is the shared .eyebrow motif from controls.css, whose `> span` rule draws every span as the dot: the label
   beside it has to say it is text. */
.entry2 .e-eyebrow > span:first-child { margin-right: 0; flex: none; }
.entry2 .e-eyebrow > span + span { width: auto; height: auto; margin: 0; border-radius: 0; background: none; }
/* "number" is part of the word beside it, not a second item in the row, so it must not take the row's gap. */
.entry2 .e-wide { display: inline; }
.entry2 .e-headline { margin: 0; font-size: clamp(32px, 3.2vw, 46px); font-weight: var(--weight-heading); line-height: 1.12; letter-spacing: var(--track-h1); }
.entry2 .e-sub { margin: 20px 0 0; max-width: 380px; color: var(--secondary); font-size: var(--text-patient); line-height: 1.6; }
.entry2 .e-points { list-style: none; margin: 30px 0 0; padding: 0; }
.entry2 .e-points li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.entry2 .e-points li::before { content: ''; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--accent); background: var(--card); }
.entry2 .e-points strong { display: block; font-size: var(--text-ui); font-weight: 600; color: var(--ink); line-height: 1.45; }
.entry2 .e-points span { display: block; margin-top: 3px; font-size: var(--text-ui); color: var(--secondary); line-height: 1.5; }
/* The one reassurance the recovery and request states carry: nothing already recorded is at risk. */
.entry2 .e-reassure { margin: 26px 0 0; padding: 14px 18px; border-radius: var(--radius-card); background: var(--card); color: var(--secondary); font-size: var(--text-ui); line-height: 1.5; display: flex; flex-direction: row; gap: 10px; align-items: flex-start; }
.entry2 .e-reassure::before { content: ''; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--signed-accent); flex: none; }
/* Footer: the help address only. "All systems operational" is a live claim we would have to keep true (owner). */
.entry2 .e-foot { margin: 0; color: var(--muted); font-size: var(--text-secondary); }
.entry2 .e-foot a { color: var(--accent-text); text-decoration: none; }
.entry2 .e-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the form column (right) -------------------------------------------------------------------------------- */
.entry2 .e-form { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 40px 48px; }
.entry2 .e-mobile-brand { display: none; }
/* The legacy names (.auth-card, .auth-heading, .entry-form, .auth-terms) are kept on this markup because android.js
   pages the card by them and two suites reach for them; the spacing they carry in login.css is replaced here. */
.entry2 #unlock-form { width: 100%; max-width: var(--e-card); margin: 0; padding: 0; display: flex; flex-direction: column; }
.entry2 .e-back { align-self: flex-start; margin: 0 0 16px; padding: 0; min-height: 0; border: 0; background: none; color: var(--accent-text); font-size: var(--text-ui); font-weight: 500; cursor: pointer; }
.entry2 .e-back:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.entry2 .e-heading { margin: 0 0 22px; }
.entry2 .e-heading-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
.entry2 #entry-title { margin: 0; font-size: var(--text-page-heading); font-weight: var(--weight-heading); line-height: 1.18; letter-spacing: var(--track-h1); color: var(--ink); }
.entry2 #entry-description { margin: 10px 0 0; color: var(--muted); font-size: var(--text-ui); line-height: 1.55; }
/* Request access / Sign in instead. It is the same control app.js already drives, moved beside the heading as the design has it. */
.entry2 #signup-switch { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.entry2[data-state="signin"] #signup-switch { border-color: transparent; background: none; color: var(--accent-text); padding: 0; }

/* Mobile / Email. Mobile is present but off, and says why the moment it is touched: never a dead control (owner). */
.entry2 .e-channel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 10px; background: var(--accent-tint); }
.entry2 .e-channel button { flex-direction: row; min-height: 38px; border: 0; border-radius: 7px; background: none; color: var(--secondary); font-size: var(--text-ui); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.entry2 .e-channel button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent); }
.entry2 .e-channel button[aria-disabled="true"] { color: var(--disabled); cursor: default; }
.entry2 .e-soon { padding: 1px 7px; border-radius: 999px; background: var(--accent-surface); color: var(--accent-strong); font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* On a narrow phone the pill reads "Mobile  Soon": the word "number" is the first thing to go, not the wrap. */
.entry2 .e-channel button { white-space: nowrap; }
@media (max-width: 430px) { .entry2 .e-wide { display: none; } }
.entry2 .e-note { margin: -10px 0 16px; color: var(--muted); font-size: var(--text-secondary); line-height: 1.5; }

/* ---- fields -------------------------------------------------------------------------------------------------- */
.entry2 .e-fields { display: flex; flex-direction: column; gap: var(--e-gap); }
.entry2 .e-fields label, .entry2 .e-label { display: block; margin: 0; color: var(--secondary); font-size: var(--text-ui); font-weight: 500; line-height: 1.4; }
.entry2 .e-fields label > input { margin-top: 8px; }
.entry2 .e-label { margin-bottom: 8px; }
.entry2 .e-fields input[type="text"], .entry2 .e-fields input[type="email"], .entry2 .e-fields input[type="password"], .entry2 .e-fields input[type="tel"] {
  width: 100%; min-height: var(--e-field); padding: 0 14px; border: 1px solid var(--input-border); border-radius: 10px;
  background: var(--input-bg); color: var(--ink); font: inherit; font-size: var(--text-ui); font-weight: 400;
}
.entry2 .e-fields input::placeholder { color: var(--hint); opacity: 1; }
.entry2 .e-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.entry2 .e-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* +91 is fixed: DocVoc is an Indian product, and staff ring the clinic back on this number. */
.entry2 .e-phone { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.entry2 .e-phone .e-cc { display: inline-flex; align-items: center; justify-content: center; min-height: var(--e-field); padding: 0 14px; border-radius: 10px; background: var(--accent-tint); color: var(--secondary); font-size: var(--text-ui); font-weight: 600; }
/* Password. "Forgot password?" reads beside the label but follows the field in the DOM, so the keyboard goes
   password -> Show -> forgot password -> sign in (test_verification_entry_browser.cjs asserts that order). */
.entry2 .e-password { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
.entry2 .e-password > label { grid-area: 1 / 1; margin-bottom: 8px; }
.entry2 .e-password > #forgot-password { grid-area: 1 / 2; justify-self: end; }
.entry2 .e-password > .e-inputwrap { grid-area: 2 / 1 / auto / -1; position: relative; }
.entry2 .e-password > #password-rule { grid-area: 3 / 1 / auto / -1; }
.entry2 #forgot-password { padding: 0; min-height: 0; border: 0; background: none; color: var(--accent-text); font-size: var(--text-secondary); font-weight: 500; text-decoration: none; cursor: pointer; }
.entry2 #forgot-password:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.entry2 .e-inputwrap input { padding-right: 68px; }
.entry2 .e-show { position: absolute; right: 8px; top: 0; height: var(--e-field); padding: 0 8px; min-height: 0; border: 0; background: none; color: var(--accent-text); font-size: var(--text-secondary); font-weight: 600; cursor: pointer; }
.entry2 .e-show:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.entry2 #password-rule { margin: 8px 0 0; color: var(--muted); font-size: var(--text-secondary); line-height: 1.45; }

/* ---- the six code boxes -------------------------------------------------------------------------------------- */
/* One real input (#otp-code, which app.js reads, focuses, and fills from a paste) drawn over six painted boxes:
   the caret, autofill and the one-time-code keyboard all keep working, and there is nothing to keep in sync. */
.entry2 .e-otp { position: relative; height: var(--e-otp-box); }
.entry2 .e-otp-boxes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, var(--e-otp-box)); gap: var(--e-otp-space); pointer-events: none; }
.entry2 .e-otp-boxes i { border: 1px solid var(--input-border); border-radius: 10px; background: var(--input-bg); }
.entry2 .e-fields #otp-code {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
  font-family: var(--font-mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums;
  /* A monospace digit is .6em wide; each box is one pitch apart, so the letter-spacing is the gap between digit centres. */
  --e-otp-char: 13.2px;
  letter-spacing: calc(var(--e-otp-box) + var(--e-otp-space) - var(--e-otp-char));
  text-indent: calc((var(--e-otp-box) - var(--e-otp-char)) / 2);
  caret-color: var(--accent);
}
.entry2 .e-fields #otp-code:focus { box-shadow: none; }
.entry2 .e-fields #otp-code::placeholder { color: transparent; }
.entry2 .e-otp:focus-within .e-otp-boxes i:first-child { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.entry2 .e-otp-hint { margin: 10px 0 0; color: var(--muted); font-size: var(--text-secondary); line-height: 1.45; }
/* Resend sits with the code, not with the button, so "Didn't get it?" is read where the code is typed. */
.entry2 .e-resend { margin: 8px 0 0; color: var(--muted); font-size: var(--text-secondary); }
.entry2 #otp-resend { padding: 0; min-height: 0; border: 0; background: none; color: var(--accent-text); font-size: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.entry2 #otp-resend:hover:not(:disabled) { background: none; text-decoration: underline; text-underline-offset: 3px; }
.entry2 #otp-resend:disabled { opacity: 1; color: var(--hint); cursor: default; }
/* A thumb needs more than the line of text it sits in. The padding is taken back off the row so the layout is unchanged. */
@media (max-width: 860px), (max-height: 819px) { .entry2 #otp-resend { min-height: 44px; padding: 0 6px; margin: -12px -6px; } }

/* ---- the primary button, the message, and the ways out ------------------------------------------------------- */
.entry2 #unlock { width: 100%; min-height: 52px; margin-top: 24px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: var(--text-patient); font-weight: 600; }
.entry2 #unlock:hover:not(:disabled) { background: var(--accent-hover); }
.entry2 #unlock:disabled { opacity: .55; }
.entry2 #unlock.is-processing:disabled { opacity: 1; cursor: progress; }
.entry2 #desktop-unlock, .entry2 #desktop-start-fresh { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--card); color: var(--secondary); font-size: var(--text-ui); font-weight: 500; }
.entry2 #entry-message { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.entry2[data-tone="bad"] #entry-message { color: var(--danger); }
.entry2[data-tone="good"] #entry-message { color: var(--signed-text); }
/* Never a dead end: whatever refused the clinician, the row under the message says what they can do next. */
.entry2 .e-ways { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.entry2 .e-ways:empty { display: none; }
.entry2 .e-ways button { min-height: 40px; padding: 0 14px; border: 1px solid var(--input-border); border-radius: 9px; background: var(--card); color: var(--ink); font-size: var(--text-secondary); font-weight: 600; }
.entry2 .e-ways button:hover { background: var(--accent-tint); }
/* Stay signed in, beside the reason codes are off when there is one. */
.entry2 .e-aside { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.entry2 .e-stay { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: var(--text-secondary); line-height: 1.4; cursor: pointer; }
.entry2 .e-stay input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.entry2 .e-stay strong { color: var(--ink); font-weight: 600; }
.entry2 #otp-note { margin: 0; text-align: right; color: var(--muted); font-size: var(--text-secondary); line-height: 1.4; }
.entry2 .auth-divider { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 18px 0 12px; color: var(--hint); font-size: var(--text-meta); }
.entry2 .auth-divider::before, .entry2 .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.entry2 #signin-otp { width: 100%; min-height: 46px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--card); color: var(--secondary); font-size: var(--text-ui); font-weight: 500; }
.entry2 #signin-otp:disabled { opacity: 1; color: var(--disabled); cursor: not-allowed; }
/* "New clinic? Request access" — the design's card. It is .auth-trial, which app.js already hides while requesting
   access or entering a code, so a request for access is never itself offered as a way in. */
.entry2 .auth-trial { display: block; width: 100%; margin: 16px 0 0; text-align: left; }
.entry2 .e-request { display: block; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--accent-tint); text-decoration: none; cursor: pointer; }
.entry2 .e-request:hover { background: var(--accent-tint-hover); }
.entry2 .e-request strong { display: block; color: var(--ink); font-size: var(--text-ui); font-weight: 600; }
.entry2 .e-request span { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-secondary); }
.entry2 .e-request::after { content: '›'; position: absolute; right: 18px; top: 50%; transform: translateY(-60%); color: var(--accent-text); font-size: 22px; line-height: 1; }
.entry2 .e-request { position: relative; padding-right: 44px; }
/* Both wrappers are invisible to layout until a short, wide window needs two columns. */
.entry2 .e-main, .entry2 .e-alt { display: contents; }
.entry2 .e-footer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
.entry2 .e-footer:not(:has(button:not([hidden]))) { display: none; }
.entry2 .e-footer button { min-height: 36px; padding: 0 10px; border: 0; background: none; color: var(--accent-text); font-size: var(--text-secondary); font-weight: 500; }
.entry2 .e-terms { width: 100%; max-width: var(--e-card); margin: 16px 0 0; text-align: left; color: var(--hint); font-size: var(--text-label); line-height: 1.6; }
.entry2 .e-terms a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }

/* A finished state (request received, reset sent, link expired): a mark, a sentence, and what happens next. */
.entry2 .e-mark { align-self: flex-start; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: var(--accent-tint); color: var(--accent); }
.entry2[data-state="received"] .e-mark, .entry2[data-state="sent"] .e-mark { background: color-mix(in srgb, var(--signed-accent) 28%, var(--card)); color: var(--signed-text); }
.entry2 .e-panelnote { margin: 18px 0 0; padding: 16px 18px; border-radius: var(--radius-card); background: var(--accent-tint); color: var(--secondary); font-size: var(--text-ui); line-height: 1.55; }

.entry2 .e-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.entry2 [hidden] { display: none !important; }

/* ---- phones, and any window too short for the promise ------------------------------------------------------- */
/* The promise sells DocVoc on docvoc.com; a clinician on the sign-in screen has already decided. Dropping it is what
   makes 390x844 fit without scrolling — the delivered design stacked it and came out 1800px tall. */
@media (max-width: 860px), (max-height: 819px) {
  .entry.entry2 { display: flex; flex-direction: column; --e-gap: 14px; --e-field: 46px; --e-otp-box: 46px; --e-otp-space: 9px; }
  .entry2 .e-panel { display: none; }
  .entry2 .e-form { flex: 1; min-height: 0; justify-content: flex-start; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .entry2 .e-mobile-brand { display: flex; width: 100%; max-width: var(--e-card); margin-bottom: 22px; font-size: var(--text-phone-heading); }
  /* Top-aligned under the brand mark, so the card sits in the same place whichever state is showing. */
  .entry2 #unlock-form { margin: 0; }
  .entry2 #entry-title { font-size: var(--text-recorded-heading); }
  .entry2 #unlock { min-height: 50px; margin-top: 20px; }
  .entry2 .e-heading { margin-bottom: 18px; }
  .entry2 .auth-divider { margin: 14px 0 10px; }
  .entry2 .auth-trial { margin-top: 12px; }
  .entry2 .e-request { padding: 14px 40px 14px 16px; }
  .entry2 .e-terms { margin-top: 10px; }
  /* "Already have an account? Sign in" needs a pill's worth of height beside a heading on a phone, and requesting access is
     the tallest state there is. Under the heading, as plain text, it costs a line instead. */
  .entry2[data-state="signup"] .e-heading-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .entry2[data-state="signup"] #signup-switch { padding: 0; min-height: 0; border-color: transparent; background: none; color: var(--accent-text); font-size: var(--text-secondary); white-space: normal; text-align: left; }
  /* A refusal adds a row of ways out; on a phone that row is what pushes a state over the viewport, so it is the
     one that gets tighter rather than the content above it. */
  .entry2 .e-ways { margin-top: 8px; gap: 8px; }
  .entry2 .e-ways button { min-height: 36px; padding: 0 12px; }
  .entry2 .e-aside { margin-top: 12px; }
}
/* A wide but short window — 1280x720 and most laptops — has room across, not down. Above it drops the promise panel and
   falls into the one-column phone layout, which needs 844px of height it does not have, so the form takes two columns
   instead: what you fill in on the left, the ways in and the alternatives on the right. Nothing is clipped and nothing
   is paged. This block follows the phone block deliberately, so it wins where both apply. */
@media (min-width: 861px) and (max-height: 819px) {
  .entry.entry2 { --e-gap: 14px; --e-field: 46px; --e-card: 760px; }
  .entry2 .e-form { justify-content: center; padding-block: 22px; }
  .entry2 .e-mobile-brand { margin-bottom: 16px; }
  /* The form on the left, the other ways in on the right, each a column of its own and both centred against each
     other — so "or … Email me a sign-in code … New clinic?" reads as the choice beside the form, not after it. */
  .entry2 #unlock-form { display: flex; flex-direction: row; align-items: center; gap: 44px; }
  .entry2 .e-main { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
  .entry2 .e-alt { display: flex; flex-direction: column; flex: 0 1 300px; min-width: 0; }
  .entry2 .auth-divider { margin: 0 0 12px; }
  .entry2 .auth-trial { margin-top: 12px; }
  .entry2 .e-terms { max-width: var(--e-card); margin-top: 14px; }
  /* Requesting access asks for six things, which is two rows too many down a single column here. Across the full width
     they sit three to a row: name, clinic, mobile — then email, password, confirm. `display: contents` lets the name and
     clinic pair join the same grid rather than nesting a second one inside it. */
  /* Requesting access has no alternatives standing beside it (app.js hides them), so it takes the whole width: the six
     things it asks for sit three to a row — name, clinic, mobile, then email, password, confirm. `display: contents`
     lets the name and clinic pair join that grid rather than nesting a second one inside it. */
  .entry2[data-state="signup"] #unlock-form { display: block; }
  .entry2[data-state="signup"] .e-main, .entry2[data-state="signup"] .e-alt { display: contents; }
  .entry2[data-state="signup"] .e-fields { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: var(--e-gap); align-items: start; }
  .entry2[data-state="signup"] #identity-fields { display: contents; }
}

/* A short desktop window (1280x800 and the rest): tighten before anything is taken away. */
@media (min-width: 861px) and (max-height: 900px) { .entry2 .e-form { padding-block: 24px; } .entry2 .e-panel { padding-block: 32px; } }
@media (max-height: 700px) { .entry.entry2 { --e-gap: 12px; --e-field: 44px; } .entry2 .e-heading { margin-bottom: 14px; } .entry2 #unlock { margin-top: 16px; min-height: 46px; } .entry2 .e-mobile-brand { margin-bottom: 14px; } }
@media (max-width: 360px) { .entry.entry2 { --e-otp-box: 42px; --e-otp-space: 7px; } .entry2 .e-pair { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .entry2 * { transition: none; } }