/* planespottr visual system. Layout and behavior remain in app.css. */
@font-face {
 font-family: "Space Grotesk";
 src: url("../fonts/space-grotesk/SpaceGrotesk-variable.ttf") format("truetype");
 font-weight: 300 700;
 font-style: normal;
 font-display: swap;
}
:root {
 --brand: #409faa;
 --brand-dark: #226b74;
 --brand-soft: #e6f3f3;
 --accent: #e9b85a;
 --ink: #19343a;
 --muted: #63777b;
 --canvas: #f5f7f6;
 --border: #dde6e4;
 --shadow-sm: 0 3px 14px rgba(25,52,58,.045);
 --shadow-lg: 0 20px 60px rgba(25,52,58,.19);
 --display-font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1, h2, h3, .page-heading, .flight-route-large, .detail-route,
.metric-value, .leader-score > strong, .leader-rank, .spot-value-heading strong,
.nav-points-pill strong, .profile-copy > strong, .hero-proof strong,
.map-card-route, .avatar { font-family: var(--display-font); font-weight: 700; }
h1, h2, h3 { text-wrap: balance; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
::selection { background: #c6e8e7; color: var(--ink); }

/* Shared chrome: familiar placement, quieter controls. */
.topbar { background: var(--brand); box-shadow: none; border-bottom: 1px solid rgba(25,52,58,.08); }
.brand img { width: 174px; height: auto; }
.nav-points-pill { min-height: 32px; padding-inline: 11px; background: #226b74; border: 1px solid rgba(255,255,255,.25); box-shadow: none; }
.nav-points-pill strong { font-size: 14px; }
.nav-points-label { color: #e4f3f4; }
.desktop-nav-link { color: #163b41; font-size: 14px; border-radius: 10px; }
.desktop-nav-link { white-space: nowrap; }
.desktop-nav-link:hover, .desktop-nav-link.active { background: #226b74; color: white; }
.bottom-nav { box-shadow: 0 -2px 12px rgba(25,52,58,.04); }
.bottom-nav-link { position: relative; color: #61767b; gap: 4px; font-size: 10px; font-weight: 650; }
.bottom-nav-link.active { color: var(--brand-dark); }
.bottom-nav-link.active::before { content: ""; position: absolute; top: 7px; left: calc(50% - 23px); width: 46px; height: 28px; border-radius: 9px; background: var(--brand-soft); }
.bottom-nav-link svg, .bottom-nav-link > span:not(.nav-badge) { position: relative; }
.bottom-nav-link svg { stroke-width: 1.7; }
.nav-badge { z-index: 1; }

/* Type, surfaces, actions. Dark text on brand teal keeps contrast readable. */
.page-shell { padding-top: 28px; }
.page-heading { font-size: clamp(29px, 6vw, 38px); letter-spacing: -.045em; line-height: 1.12; }
.page-subheading { margin-top: 8px; font-size: 14px; line-height: 1.55; }
.section-card, .social-spot-card { border-radius: 20px; box-shadow: var(--shadow-sm); }
.btn { border-radius: 10px; font-weight: 700; transition: background .15s, box-shadow .15s; }
.btn-primary, .search-submit, .filter-chip.active, .pwa-install-done { background: var(--brand); color: #102f34; }
.btn-primary:hover, .search-submit:hover { background: var(--brand-dark); color: #fff; }
.btn-secondary { background: var(--brand-soft); color: var(--brand-dark); }
.btn-secondary:hover { background: #d5ebeb; }
.filter-chip { border-radius: 10px; height: 36px; background: transparent; font-size: 12px; }
.filter-chip.active { border-color: var(--brand); }
.search-input { border-radius: 12px; box-shadow: none; }
.search-submit { border-radius: 8px; }
.search-input:focus, .auth-form input:focus, .settings-dialog-form input:focus { box-shadow: 0 0 0 3px rgba(64,159,170,.16); }
.back-button { font-size: 13px; margin-bottom: 16px; }
.page-alert, .form-alert { border-radius: 12px; }

/* Map: compact instrument panel. Preserve sheet sizing and anchoring. */
.flight-sheet { border-radius: 24px 24px 0 0; }
.flight-sheet-content { padding-top: 24px; }
.sheet-close { width: 34px; height: 34px; top: 8px; right: 8px; background: var(--canvas); }
.flight-sheet-hero { gap: 12px; }
.flight-sheet-hero > div { min-width: 0; padding-right: 10px; }
.flight-number { font-size: 12px; letter-spacing: .07em; }
.flight-route-large { font-size: 27px; letter-spacing: -.045em; }
.flight-route-cities { font-weight: 500; }
.flight-identity { font-size: 12px; }
.flight-metrics { gap: 7px; margin-block: 18px 14px; }
.metric { border: 1px solid #e6edeb; border-radius: 10px; background: #f5f8f7; }
.metric-label { font-size: 9px; letter-spacing: .09em; }
.metric-value { font-size: 16px; margin-top: 5px; }
.history-pill, .special-livery-pill { font-size: 11px; padding: 7px 10px; font-weight: 700; }
.history-row { gap: 6px; }
.sheet-actions .btn { min-height: 46px; }
.location-status { border-radius: 12px; background: rgba(25,52,58,.95); }
.spot-save-summary { background: var(--brand-soft); }

/* My Log and profiles: a personal collection, not a dense dashboard. */
.profile-header { position: relative; padding: 22px 18px; background: linear-gradient(115deg, #e6f3f3, #fff 85%); border-color: #cfe4e3; box-shadow: none; }
.profile-header .avatar { border: 4px solid white; box-shadow: 0 0 0 1px rgba(25,52,58,.07); }
.profile-copy h1 { font-size: 25px; letter-spacing: -.04em; }
.profile-copy p { font-size: 12px; line-height: 1.5; }
.profile-copy > strong { display: inline-block; margin-top: 6px; font-size: 14px; }
.log-toolbar { background: rgba(245,247,246,.97); padding-top: 20px; }
.log-title-row { margin-bottom: 18px; }
.result-count { font-size: 11px; }
.spot-grid { gap: 12px; }
.spot-card { border-radius: 15px; box-shadow: none; }
.spot-card-body { padding: 12px 11px 14px; }
.spot-card-flight { font-size: 14px; }
.spot-card-route { font-family: var(--display-font); font-size: 15px; letter-spacing: -.025em; }
.spot-card-reg, .spot-card-date { font-size: 11px; }
.spot-card-date { margin-top: 8px; }
.spot-value-chip { border-radius: 6px; background: var(--brand-soft); padding: 5px 7px; font-size: 10px; font-weight: 700; }
.spot-card-livery-row { padding-left: 11px; }
.spot-card:hover { box-shadow: 0 8px 24px rgba(25,52,58,.09); }
.log-status { padding-block: 60px; font-size: 14px; }

/* Friends: photo-led cards with a clear social footer. */
.social-subnav { gap: 10px; margin: 18px 0; }
.social-subnav a { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: white; font-size: 12px; }
.social-feed { gap: 24px; }
.social-card-user { padding: 15px 16px; gap: 11px; }
.social-card-user .avatar { width: 38px; height: 38px; font-size: 12px; }
.social-card-user strong { font-size: 13px; }
.social-card-user small { margin-top: 2px; }
.social-card-details { padding: 18px 17px 14px; gap: 7px; }
.social-card-details .spot-card-flight { font-family: var(--display-font); font-size: 19px; }
.social-card-route { font-family: var(--display-font); font-size: 22px; letter-spacing: -.035em; }
.social-card-aircraft { font-weight: 500; }
.social-card-livery-row { padding: 0 17px 16px; }
.shared-history { background: #f8faf9; padding: 13px 17px; }
.social-actions { padding: 13px 17px; }
.shared-history-label { font-size: 9px; letter-spacing: .09em; }
.social-empty { border: 1px dashed #cbdcda; background: #fff; border-radius: 20px; padding: 38px 22px; }
.social-empty h2 { font-size: 24px; letter-spacing: -.04em; }
.social-empty p { font-size: 14px; line-height: 1.6; }
.person-row { padding: 16px; }
.request-banner { border-radius: 12px; }
.comment { border: 1px solid #e7eeec; background: #f7f9f8; padding: 14px; }
.comment-copy p { font-size: 14px; line-height: 1.55; }

/* Leaders: achievement without overpowering identity. */
.leaders-shell > div:first-child { padding: 22px; border-radius: 20px; background: #e6f3f3; border: 1px solid #cfe4e3; }
.leader-controls { gap: 6px; }
.leader-controls.period .filter-chip { border-color: transparent; }
.leader-controls.period .filter-chip.active { background: #e6f3f3; color: var(--brand-dark); }
.leaderboard { box-shadow: none; }
.leader-row { min-height: 84px; padding: 14px 12px; gap: 10px; }
.leader-row:hover { background: #f1f7f5; }
.leader-row.current-user { background: #eaf5f4; box-shadow: inset 3px 0 var(--brand); }
.leader-rank { font-size: 16px; }
.leader-row:first-child .leader-rank { color: #8e651d; background: #fff0cb; padding-block: 8px; border-radius: 10px; }
.leader-person > strong { font-size: 13px; }
.leader-score > strong { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.leader-score small { font-size: 9px; }

/* Details: consistent modules, generous rhythm, legible supporting data. */
.detail-layout, .detail-side { gap: 18px; }
.detail-summary { padding: 22px; }
.detail-flight-number { letter-spacing: -.055em; }
.detail-kicker, .fact-label { font-size: 10px; letter-spacing: .1em; }
.detail-meta { font-size: 13px; line-height: 1.5; }
.detail-route { margin-top: 8px; }
.detail-section { padding: 20px; }
.detail-section h2 { font-size: 21px; letter-spacing: -.035em; }
.fact { padding: 17px 15px; }
.fact-value { margin-top: 7px; font-size: 15px; }
.spot-value-panel { background: #edf7f5; border-color: #d2e6e2; }
.spot-value-heading strong { font-size: 34px; }
.spot-value-heading small { background: white; }
.calculation-table { margin: 18px -20px -20px; }
.calculation-table > div { padding: 12px 20px; background: rgba(255,255,255,.85); line-height: 1.45; }
.detail-record-actions .btn { font-size: 12px; }
.note-card { font-size: 14px; line-height: 1.5; }
.spotting-history { margin-top: 18px; }

/* Settings and forms: tidy grouping and comfortable tap targets. */
.settings-shell { max-width: 868px; }
.settings-grid { gap: 18px; margin-top: 24px; }
.settings-card { padding: 22px; }
.settings-card h2 { font-size: 23px; letter-spacing: -.04em; }
.settings-card p { font-size: 13px; line-height: 1.6; }
.settings-divider { margin-block: 21px; }
.settings-toggle strong { font-size: 14px; font-weight: 650; }
.settings-toggle small { line-height: 1.5; }
.settings-toggle input { background: #819699; }
.settings-toggle input:checked { background: var(--brand-dark); }
.settings-toggle:has(#highlight-spotted) strong::before,
.settings-toggle:has(#highlight-flown) strong::before,
.settings-toggle:has(#highlight-special-livery) strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: #e9ae28; }
.settings-toggle:has(#highlight-flown) strong::before { background: #d95050; }
.settings-toggle:has(#highlight-special-livery) strong::before { background: #407ed2; }
.map-style-option { border-radius: 12px; padding: 14px 12px; }
.account-actions { margin: 18px -22px -6px; }
.account-action { padding: 15px 22px; min-height: 72px; }
.account-action:last-child { border-bottom: 0; }
.account-action strong { font-size: 14px; font-weight: 650; }
.account-action small { font-size: 12px; }
.settings-dialog { border-radius: 22px; }
.settings-dialog-form { padding: 25px; }
.settings-dialog-heading h2 { font-size: 26px; }
.settings-account-footer { margin-top: 22px; }
.settings-standalone-action { font-size: 14px; border-radius: 12px; }
.settings-standalone-action.danger { background: transparent; border-color: transparent; }
.report-form { padding: 22px; }
.report-form fieldset { gap: 16px; }
input[type=radio], input[type=checkbox] { accent-color: var(--brand-dark); }

/* Sign-in and onboarding use the app's calm visual language. */
.auth-body { background: radial-gradient(ellipse at 10% 10%, #d9efec, transparent 50%), #f3f7f5; }
.auth-logo { width: min(245px, 70vw); margin-bottom: 32px; }
.auth-card { padding: 30px; border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 16px 60px rgba(25,52,58,.07); }
.auth-card h1 { font-size: 33px; line-height: 1.15; }
.auth-card > p { font-size: 14px; line-height: 1.6; }
.auth-form { gap: 10px; }
.auth-form input, .settings-dialog-form input { background: #fafcfb; border-radius: 10px; }
.auth-form .btn { min-height: 48px; margin-top: 12px; }
.field-hint { line-height: 1.5; }
.setup-progress span { background: #d9e8e5; }
.setup-progress span.active { background: var(--brand); }
.pwa-install-sheet { color: var(--ink); }
.pwa-install-banner { background: #226b74; }
.pwa-install-steps li { background: var(--canvas); border-color: var(--border); }
.pwa-install-steps li::before { background: var(--brand-soft); color: var(--brand-dark); }

@media (min-width: 768px) {
 .brand img { width: 208px; }
 .page-shell { padding-top: 38px; }
 .flight-sheet { border-radius: 20px; }
 .flight-sheet-content { padding: 24px 20px 20px; }
 .profile-header { padding: 26px; }
 .profile-copy h1 { font-size: 29px; }
 .spot-grid { gap: 18px; }
 .map-style-options { grid-template-columns: 1fr 1fr; }
 .settings-card { padding: 26px; }
 .settings-card .account-actions { margin-inline: -26px; }
 .settings-card .account-action { padding-inline: 26px; }
 .leaders-shell > div:first-child { padding: 30px; }
 .leader-row { padding-inline: 22px; gap: 16px; }
}
@media (max-width: 359px) {
 .brand img { width: 150px; }
 .nav-points-pill { padding-inline: 7px; }
 .leader-row { gap: 6px; padding-inline: 8px; grid-template-columns: 30px 34px minmax(0,1fr) auto; }
 .leader-row .avatar { width: 34px; height: 34px; }
 .leader-score > strong { font-size: 19px; }
 .auth-card { padding: 24px; }
 .metric { padding: 9px 8px; }
 .metric-value { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
 .brand img { width: 174px; }
 .desktop-nav { gap: 2px; }
 .desktop-nav-link { font-size: 13px; padding: 10px; }
 .log-controls { display: block; }
 .filter-row { margin-top: 12px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}