/* Ratably — the signed-in application and its sign-in pages.
   Same Redline tokens as ratably.css (the shared components are in components.css); this adds the
   app nav, the page-hiding rule the guard uses, and the card the sign-in, sign-up and
   forgot-password pages sit in. */

/* The guard adds app-pending to <html> before anything paints, when there is some sign
   of a session; ratably-app-shell.js removes it once the server confirms. If that script
   never runs (blocked, offline) the page shows after 6 seconds rather than staying blank:
   it is static markup, and the API is the real gate. */
.app-pending body { visibility: hidden; animation: app-reveal 0s 6s forwards }
@keyframes app-reveal { to { visibility: visible } }

/* app nav */
.app-nav-bar .wrap { flex-wrap: nowrap; gap: 16px }
.app-nav { margin-left: 8px; gap: 22px; flex-wrap: nowrap; white-space: nowrap }
.app-nav a, .app-menu-links a { text-decoration: none; color: var(--ink2); padding-block: 4px; border-bottom: 2px solid transparent }
.app-nav a:hover, .app-menu-links a:hover { color: var(--ink) }
.app-account { margin-left: auto; flex-wrap: nowrap; white-space: nowrap }
.app-chip { font: 500 .82rem var(--mono); text-decoration: none; padding: .35em .8em; border: 1.5px solid var(--green); border-radius: 99px; color: var(--green); background: var(--green-soft); white-space: nowrap }
.app-chip:hover { background: var(--green); color: #fff }
.app-buy { white-space: nowrap; text-decoration: none }
/* the menu's own Buy link: the one filled row in the disclosure */
.nav-menu-panel a.app-menu-buy { justify-content: center; margin: 12px clamp(16px, 4vw, 40px) 4px; width: auto; min-height: 44px; padding: 0 16px;
  background: var(--ink); color: #fff; font-weight: 600; border: 0; border-radius: 4px }
.nav-menu-panel a.app-menu-buy:hover { background: var(--ink); filter: brightness(1.25) }

/* the current page: the shell names it in data-nav; the script also sets aria-current */
[data-nav="home"] [data-nav-link="home"],
[data-nav="upload"] [data-nav-link="upload"],
[data-nav="checks"] [data-nav-link="checks"],
[data-nav="billing"] [data-nav-link="billing"],
[data-nav="account"] [data-nav-link="account"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--green) }

/* between 720 and 900 px the five links still fit: tighten them and drop the email (chip and Sign out stay) */
@media (max-width: 900px) {
  .app-nav { gap: 14px }
  .app-nav-bar .wrap { gap: 12px }
  .app-nav-bar .nav-email { display: none }
}

@media (max-width: 800px) { .app-nav { margin-left: 0; gap: 12px; font-size: .9rem } }

/* phones: the links, the email and Sign out move into the disclosure (the look is .nav-menu in
   ratably.css); the chip stays in the bar */
.app-menu { display: none }
.app-menu .app-menu-links a { border-bottom: 0; padding-block: 0 }
[data-nav="home"].app-menu-links [data-nav-link="home"],
[data-nav="upload"].app-menu-links [data-nav-link="upload"],
[data-nav="checks"].app-menu-links [data-nav-link="checks"],
[data-nav="billing"].app-menu-links [data-nav-link="billing"],
[data-nav="account"].app-menu-links [data-nav-link="account"] { box-shadow: inset 3px 0 0 var(--green); background: var(--green-soft) }
@media (max-width: 720px) {
  .nav nav.app-nav { display: none }
  .app-menu { display: block }
  #appSignOutBtn { display: none }
}

.app-main { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 88px); min-height: 60vh }

/* sign-in, sign-up, forgot-password, and the payment-received card (the auth shell) */
.auth-top .wrap { padding-block: 18px }
.auth-main { display: grid; justify-items: center; padding-block: clamp(20px, 6vw, 64px) clamp(40px, 8vw, 96px) }
.auth-card { width: min(440px, 100%); background: var(--sheet); border: 1px solid var(--rule); padding: clamp(20px, 5vw, 32px) }
.auth-card h1 { font-size: var(--h1-app); line-height: 1.1; margin-bottom: 20px }
.auth-card h1 + .auth-lede { margin: -10px 0 20px; color: var(--ink2); font-size: .95rem }
.auth-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem }
.auth-form label.clickwrap { display: grid; font-weight: 400 }
.auth-form .btn { width: 100% }
.auth-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; font-size: .92rem }
.auth-links a { color: var(--green) }
.auth-card.receipt { text-align: center }
.auth-card.receipt h1 { margin-bottom: 12px }
.auth-card.receipt p { color: var(--ink2); margin-bottom: 14px; font-size: .95rem }
.auth-card.receipt .receipt-who { font: 500 .85rem var(--mono); overflow-wrap: anywhere }
.receipt-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--green-soft); color: var(--green); font: 700 1.6rem/1 var(--body) }
.receipt-mark.bad { background: rgba(198, 54, 44, .08); color: var(--red) }
#status:not(:empty) { margin-top: 16px; padding: 10px 12px; font-size: .9rem; border: 1px solid }
#status.error { border-color: var(--red); background: rgba(198, 54, 44, .07); color: var(--red) }
#status.ok { border-color: var(--green); background: var(--green-soft); color: var(--green) }
.receipt-actions { display: grid; gap: 12px; justify-items: center; margin-top: 22px }
.receipt-actions .btn-primary { width: 100% }
.receipt-actions a:not(.btn) { color: var(--green); font-weight: 600 }