/* Shared chrome for the public pages (landing, login, verify, offline, privacy, booking, manage, offer, stop).
   Loaded on top of base.css. Named login.css because the login page owns it. No inline styles anywhere (CSP). */

:root { --ease: cubic-bezier(.2, .7, .2, 1); --narrow: 520px; }

body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.tnum { font-variant-numeric: tabular-nums; }

/* header controls */
.topbar .wrap { max-width: var(--max); }
.topbar .brand { font-size: 19px; }
.nav-link { color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; padding: 10px 6px; min-height: 44px; display: inline-flex; align-items: center; }
.nav-link:hover { color: var(--text); }
.topbar .seg button { min-height: 32px; min-width: 38px; }
.theme-btn { position: relative; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: 50%; flex: none; }
.theme-btn::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1.5px solid var(--muted); background: linear-gradient(90deg, var(--muted) 50%, transparent 50%); transition: border-color .15s; }
.theme-btn:hover::before { border-color: var(--text); }
.theme-btn:focus-visible { outline-offset: -4px; }

/* narrow single-purpose pages */
.narrow { width: 100%; max-width: var(--narrow); margin: 0 auto; padding: 40px var(--gutter) 72px; }
.narrow h1 { font-size: clamp(1.75rem, 6vw, 2.3rem); margin-bottom: .4em; }
.lede { color: var(--muted); font-size: 17px; line-height: 1.55; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel + .panel, .panel + .btn-row, .panel + p { margin-top: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 auto; }
.link-btn { appearance: none; background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--muted); font: 600 14px/1.3 var(--font); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: pointer; text-align: left; }
.link-btn:hover { color: var(--text); }

/* status states */
.state { text-align: center; padding: 56px 8px; }
.state .ring { width: 56px; height: 56px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; border: 5px solid var(--accent); }
.state .ring.ring-quiet { border-color: var(--line-strong); }
.state .ring svg { width: 26px; height: 26px; stroke: var(--text); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.state h1 { font-size: clamp(1.6rem, 5.5vw, 2.1rem); }
.state p { color: var(--muted); max-width: 40ch; margin-left: auto; margin-right: auto; }
.state .btn-row { justify-content: center; margin-top: 24px; }
.state .btn-row .btn { flex: 0 1 auto; }
.spinner { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* notices */
.notice { border: 1px solid var(--line-strong); border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.notice-error { border-left-color: var(--accent); color: var(--text); }
.notice-ok { border-left-color: var(--ok); color: var(--text); }
.notice + .notice { margin-top: 10px; }
.notice a { color: var(--text); }

/* key/value summary */
.kv { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kv > div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* footer */
.site-foot { border-top: 1px solid var(--line); margin-top: auto; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 18px; padding-bottom: 22px; font-size: 14px; color: var(--muted); }
.site-foot a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.site-foot a:hover { color: var(--text); }
.site-foot .grow { flex: 1 1 0; }
.ios-hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* forms */
.panel form .btn-primary { margin-top: 18px; }
.devlink { display: block; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px; word-break: break-all; }

/* page entrance */
@media (prefers-reduced-motion: no-preference) {
  .narrow > *, .state > * { animation: rise .5s var(--ease) both; }
  .narrow > *:nth-child(2) { animation-delay: .05s; }
  .narrow > *:nth-child(3) { animation-delay: .1s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  .narrow { padding-top: 72px; }
  .panel { padding: 28px; }
}

/* sign-in / sign-up */
.auth-tabs { display: flex; width: 100%; margin: 6px 0 14px; padding: 3px; }
.auth-tabs button { flex: 1; min-height: 40px; font-size: 14px; }
.auth-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.check input { margin-top: 1px; }
.check a { color: var(--text); }