/* Sign in / Make an account / Get a code panels, shared by the account page and the join page (account-panels.js). */
  .signin-tabs { display: flex; gap: 8px; margin: 8px 0 20px; }
  .signin-tabs button { flex: 1; font: inherit; font-size: 1.1rem; font-weight: 600; padding: 14px 10px; border-radius: 10px; border: 2px solid var(--line-strong, #9aa); background: transparent; color: inherit; cursor: pointer; }
  .signin-tabs button[aria-selected="true"] { background: var(--blue, #004b39); border-color: var(--blue, #004b39); color: var(--on-blue, #fff); }
  .signin-panel input[type=email], .signin-panel input[type=password], .signin-panel input[type=text] { font-size: 1.15rem; padding: 14px; width: 100%; box-sizing: border-box; border-radius: 12px; border: 2px solid var(--line-strong, #9aa); }
  .signin-panel label { display: block; margin-top: 14px; font-weight: 600; font-size: 1.05rem; }
  /* One password box, with a big Show / Hide button beside it (no second "type it again" box). */
  .signin-panel .pw-row { display: flex; gap: 8px; align-items: stretch; }
  .signin-panel .pw-row input { flex: 1; min-width: 0; }
  .signin-panel .pw-show { flex: none; min-width: 92px; min-height: 52px; padding: 0 16px; font: inherit; font-size: 1.1rem; font-weight: 700; border-radius: 12px; border: 2px solid var(--blue, #004b39); background: transparent; color: var(--blue, #004b39); cursor: pointer; }
  .signin-panel .pw-show:hover { background: rgb(0 75 57 / .06); }
  .signin-panel .pw-show:focus-visible { outline: 3px solid var(--blue, #004b39); outline-offset: 2px; }
  /* Every box shows the same ring when in use: on the account page the email and code boxes only changed border colour
     (portal/styles.css), weaker than the password box beside them (a11y re-check 2026-10-31). */
  .signin-panel input:focus { outline: 3px solid var(--blue, #004b39); outline-offset: 1px; }
  .signin-panel .btn { font-size: 1.15rem; padding: 16px 22px; width: 100%; }
  .link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--blue, #004b39); text-decoration: underline; cursor: pointer; text-align: left; }
.ap-status { margin-top: 18px; padding: 14px 16px; border-radius: 10px; border: 2px solid; font-size: 1.1rem; line-height: 1.5; }
.ap-status.error { background: #fef2f2; border-color: #b91c1c; color: #7f1d1d; }
.ap-status.info { background: #ecfdf5; border-color: #00634b; color: #064e3b; }
/* Empty: kept in the page (so screen readers are listening when words arrive) but takes no room. Beats .status. */
.ap-status:empty { margin: 0; padding: 0; border: 0; min-height: 0; background: none; }
.signin-panel h2 { margin: 0 0 6px; }
.signin-panel .actions { margin-top: 18px; }
/* "Forgot your password" is what a locked-out customer needs most, so it is a full-width secondary
   button, not small underlined text (senior walkthrough 2026-10-31, finding #4). */
.signin-panel p:has(> [data-forgot]) { margin-top: 14px; }
.signin-panel .link-button[data-forgot] { display: block; width: 100%; min-height: 52px; padding: 12px 16px; box-sizing: border-box; border: 2px solid var(--blue, #004b39); border-radius: 12px; text-align: center; text-decoration: none; font-size: 17px; font-weight: 600; line-height: 1.35; }
.signin-panel .link-button[data-forgot]:hover { background: rgb(0 75 57 / .06); }
.signin-panel .link-button { min-height: 44px; font-size: 17px; }
/* Where the 6 numbers are going, in big type, and a nudge for the common email slips (gmial.com, .con). */
.signin-panel .ap-sendto { margin: 10px 0 0; font-size: 1.3rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.signin-panel .ap-sendto strong { color: var(--blue, #004b39); }
.signin-panel .ap-typo { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; border: 2px solid #b45309; background: #fffbeb; color: #78350f; font-size: 1.1rem; line-height: 1.45; overflow-wrap: anywhere; }
.signin-panel .ap-typo .link-button { font-weight: 700; color: #78350f; }
/* Two links side by side, or one under the other on a phone, with no dot left hanging at a line end. */
.signin-panel .ap-links { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 0; }
.signin-panel .ap-links[hidden] { display: none; }
/* Join page (tabs: false): one form with a small link to the other, instead of two big tabs. */
.signin-tabs[hidden] { display: none; }
.signin-panel .ap-switch { margin: 0 0 4px; font-size: 1.05rem; }
.signin-panel .ap-switch .link-button { font-weight: 700; }