/* screens.css — the few genuine per-screen overrides (frontend.md §13).
   First entry: the offline page (frontend.md §8.2), which needs its own
   full-viewport centring layout that no shared component provides. */

.offline-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: max(24px, env(safe-area-inset-left));
}
.offline-screen__logo {
  opacity: .4;
  margin-bottom: 16px;
}

/* Login screen (frontend.md §7.1) -- F10 */
.login-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.login-screen__brand {
  text-align: center;
  padding-top: var(--space-12);
}
.login-screen__logo {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto var(--space-4);
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px;
}
.login-screen__field-block { margin-top: var(--space-8); }
.login-screen__toggle { text-align: center; margin-top: var(--space-2); }
.login-screen__pin-label { text-align: center; margin-top: var(--space-5); }
.login-screen__error {
  color: var(--danger);
  font-size: 15px;
  text-align: center;
  margin: var(--space-2) 0 0;
}
.login-screen__forgot { text-align: center; padding: var(--space-5) 0 var(--space-6); }
/* Tablet/desktop (§12): .field is width:100% of its parent, so without
   a cap the phone/member-number/PIN-text field stretches to the full
   content width on a wide screen -- same cap as .money-form (F26), so
   every form on the app reads the same width at a given breakpoint. */
@media (min-width: 768px) { .login-screen, .auth-screen { max-width:720px; margin-inline:auto; } }
@media (min-width: 1200px) { .login-screen, .auth-screen { max-width:560px; } }

/* Registration / reset screens (build-prompt v2 §6.2) -- F11 */
.auth-screen { padding: var(--space-6) 0; }
.auth-screen__field-block { margin-top: var(--space-5); }
.auth-screen__field-error {
  color: var(--danger);
  font-size: 13px;
  margin: var(--space-1) 0 0;
}
.auth-screen__error {
  color: var(--danger);
  font-size: 15px;
  margin: 0 0 var(--space-4);
}
.auth-screen__support { margin-top: var(--space-2); }
.auth-screen__submit { width: 100%; margin-top: var(--space-6); }
.auth-screen__toggle { text-align: center; margin-top: var(--space-2); }
.auth-screen__pin-label { text-align: center; margin: var(--space-5) 0; }
.auth-screen__resend { margin-top: var(--space-6); }

/* Dashboard (frontend.md §7.2, §12) -- F15 */
.dashboard { display:flex; flex-direction:column; gap:var(--space-6); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-2); }
.def-row { display:flex; justify-content:space-between; gap:var(--space-3); padding:12px var(--space-4); }
.def-row + .def-row { border-top:1px solid var(--border); }
.def-row__label { color:var(--text-muted); }
.detail-actions { display:flex; gap:var(--space-3); margin:var(--space-6) 0; }
.detail-actions .btn { width:auto; flex:1; }
.row--actions .btn { width:auto; flex:1; }
.pull-spinner { display:flex; align-items:center; justify-content:center; height:0; overflow:hidden;
  color:var(--brand); transition:height var(--dur) var(--ease); }
.pull-spinner[data-active="true"] { height:64px; }
.pull-spinner__icon { width:24px; height:24px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite; }

/* Session-dead (F14) + processing (F19) -- centred, chromeless states. */
.session-dead-screen, .processing-screen {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.session-dead-screen svg { color: var(--brand); }

/* Accounts + Loans lists (frontend.md §7.3/§7.7, D90): hero + cards. */
.balance-card__count{display:block;margin-top:6px;font-size:34px;line-height:1.05;font-weight:700}
.card-grid{display:grid;gap:var(--space-3)}
.item-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:border-color var(--dur-fast) var(--ease)}
.item-card--alert{box-shadow:inset 4px 0 0 var(--warn)}
.item-card__head{display:flex;align-items:center;gap:var(--space-3);color:inherit;text-decoration:none}
.item-card__id{flex:1;min-width:0;display:flex;flex-direction:column}
.item-card__title{font-size:16px;font-weight:600}
.item-card__actions{display:flex;gap:var(--space-2);justify-content:flex-end}
.item-card__actions .btn,.pay-menu summary{width:auto;min-height:44px;padding:0 18px;font-size:15px}
.pay-menu summary{display:flex;margin-left:auto;width:fit-content;list-style:none;cursor:pointer}
.pay-menu summary::-webkit-details-marker{display:none}
.pay-menu p{margin:var(--space-3) 0 var(--space-2);text-align:right}
.monogram{flex:none;width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;color:var(--on-brand);
  background:linear-gradient(135deg,var(--brand),color-mix(in oklab,var(--brand),black 22%))}
.facts{margin:0;padding-top:var(--space-3);border-top:1px solid var(--border);display:grid;gap:6px;font-size:15px}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.facts dt{color:var(--text-muted)}
.facts dd{margin:0}
.item-card--alert .facts div:first-child dt{color:var(--warn);font-weight:600}
.quick__label{text-align:center}
.btn,.quick__item,.tab{text-decoration:none}
@media (hover:hover){.item-card:hover{border-color:var(--border-strong)}}
@media (min-width:768px){.card-grid{grid-template-columns:repeat(2,1fr)}}

/* Submit feedback (D92, app.js): §5.1's loading button; PIN dots pulse. */
.btn[aria-busy="true"]{pointer-events:none}
form[data-busy] .pin-dots{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

/* Statement (frontend.md §7.4) -- F18 */
.day-header { position:sticky; top:56px; background:var(--bg); padding:8px 0; z-index:1; }

/* Promo carousel (D51) -- snap-scroll, no JS. */
.promo{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;margin-top:var(--space-6);scroll-snap-type:x mandatory}
.promo__card{flex:0 0 78%;scroll-snap-align:start;border-radius:var(--radius-lg);padding:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}

/* Transfer's Savings/Loans tab (D54): an inactive-tab row still counts
   toward the total, it's just not shown -- distinct from `hidden`. */
.transfer-row--tab-hidden { display: none; }

/* Print ("Share / Save as PDF") -- counts against the 25KB CSS budget by
   design (specs/tech-design.md); no separately-loaded/exempt file. */
@media print {
  .app-bar, .tab-bar, .btn { display:none; }
  body { background:#fff; color:#0F172A; }
}