/* RC Pilot App — outdoor / high-sun theme
   High contrast, large tap targets, bold type for direct-sunlight readability. */

:root {
  --navy: #0b1f3a;
  --navy-2: #12335c;
  --orange: #ff6a00;
  --orange-dark: #cc5500;
  --sky: #1f8fd6;
  --white: #ffffff;
  --cream: #fff8ee;
  --green: #1f9e4a;
  --red: #d3241f;
  --amber: #f2a900;
  --grey: #5a6472;
  --radius: 14px;
  --shadow: 0 4px 14px rgba(0,0,0,0.35);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes slideRight {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}

/* Combines the pulse scale with the marker's own translateY(-50%) vertical
   centering — a plain `animation: pulse` here would silently replace the
   inline transform for the whole animation duration (CSS animations own
   the animated property outright, they don't compose with an element's
   static transform), which is exactly what made the marker drift off the
   bar's centerline: the scale keyframes had no translateY component, so
   the marker rendered top-aligned to the track's center instead of
   vertically centered on it. */
@keyframes progressPlanePulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.15); }
}
.progress-plane {
  animation: progressPlanePulse 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.radar-sweep {
  animation: radarSweep 4s linear infinite;
  transform-origin: 50% 50%;
}
.radar-blip-pulse {
  animation: pulse 2s ease-in-out infinite;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Segoe UI", Roboto, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--navy);
  font-size: 17px;
  -webkit-user-select: none; user-select: none;
  /* Without this, a downward swipe at the top of the page (body is the
     actual scroll container here — there's no dedicated inner scroller)
     triggers the browser/PWA's native pull-to-refresh, reloading the
     whole app and dropping all in-memory state. That's the "app keeps
     refreshing on a down swipe" bug — a platform gesture, not anything
     this app's own JS was doing. contain (not none) still allows normal
     scrolling, it just stops the overscroll from bubbling up into a
     page-reload gesture. */
  overscroll-behavior-y: contain;
}

#app { max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--cream); display: flex; flex-direction: column; }

button {
  font-family: inherit; cursor: pointer; border: none; border-radius: var(--radius);
  font-weight: 700; touch-action: manipulation;
}

.hidden { display: none !important; }

/* ---- Splash / Welcome ---- */
.splash-screen {
  height: 100vh; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--navy); color: var(--white);
  gap: 18px; text-align: center; padding: 24px;
}
.splash-screen h1 { font-size: 28px; margin: 0; line-height: 1.2; }
.splash-screen .subtitle { color: var(--amber); font-weight: 800; letter-spacing: 2px; font-size: 18px; }
/* Second badge shown at the bottom of the post-login Welcome screen only.
   Its own artwork has a few white corner slivers outside the drawn circle
   (it isn't a transparent PNG), so it's clipped to a circle here rather
   than shown as a white-cornered square on the navy background. */
.welcome-badge {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  margin-top: 4px; box-shadow: var(--shadow);
}

/* ---- Login ---- */
.login-screen { padding: 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.login-screen label { font-weight: 700; font-size: 14px; margin-top: 8px; }
.login-screen input, .login-screen select {
  padding: 14px; border-radius: var(--radius); border: 2px solid var(--navy-2);
  font-size: 17px; background: var(--white);
}
.pw-field { position: relative; display: flex; }
.pw-field input { width: 100%; padding-right: 52px !important; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--navy-2); cursor: pointer;
}
.pw-toggle:active { color: var(--orange); }

/* ---- On/off pill switch (App Settings feature flags) ---- */
.flag-switch { position: relative; display: inline-block; width: 56px; height: 32px; flex-shrink: 0; }
.flag-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.flag-switch .track {
  position: absolute; inset: 0; background: var(--grey); border-radius: 999px; transition: background 0.15s ease;
}
.flag-switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.15s ease;
}
.flag-switch input:checked ~ .track { background: var(--green); }
.flag-switch input:checked ~ .thumb { transform: translateX(24px); }
.flag-switch input:disabled ~ .track { opacity: 0.5; }
.btn-primary {
  background: var(--orange); color: var(--white); padding: 18px; font-size: 19px;
  border-radius: var(--radius); box-shadow: var(--shadow); min-height: 60px;
}
.btn-secondary {
  background: var(--navy-2); color: var(--white); padding: 14px; font-size: 16px; min-height: 52px;
}
.btn-outline {
  background: var(--white); color: var(--navy); border: 2px solid var(--navy-2) !important;
  padding: 12px; font-size: 15px; min-height: 48px;
}
/* Hangar Marketplace shortcut — green so it reads as its own distinct
   action next to the orange "+ Add Aircraft" primary button, not a lower-
   priority variant of it. */
.btn-market {
  background: var(--green); color: var(--white); padding: 12px; font-size: 15px; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* Marketplace off (MARKETPLACE_ENABLED false, app.js) — greyed out and
   inert rather than hidden, so pilots know the feature exists but isn't
   available right now instead of it silently vanishing. */
.btn-market-disabled { background: var(--grey); color: rgba(255,255,255,0.35); cursor: not-allowed; }
.btn-maintenance-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: var(--white); font-weight: 800; font-size: 15px; border-radius: inherit;
}

/* Home screen's extra role-based links (My Students, Club Progress, etc.)
   render 0-4 buttons depending on the user's roles, so they're laid out as
   an even-width grid rather than relying on inline wrapping, which left
   ragged row breaks and mismatched button widths. */
.link-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.link-grid .btn-outline {
  width: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; line-height: 1.3;
}

/* ---- Header / Nav ---- */
header.topbar {
  background: var(--navy); color: var(--white); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10;
}
header.topbar .title { font-size: 20px; font-weight: 800; }
/* Base badge, usable anywhere (unread counts on Home/Follows/User Admin
   buttons, not just the topbar level chip) — header.topbar .badge only
   used to exist scoped to the header, so a bare .badge used on a white
   page background rendered with no padding/shape/color at all. */
.badge { display: inline-block; background: var(--orange); color: var(--white); border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 700; }

main { flex: 1; padding: 14px 14px 90px; overflow-y: auto; overflow-x: hidden; }

/* Swipe feedback: the incoming tab slides in from the side it swiped from,
   so a left/right swipe visibly reads as sideways paging rather than a
   silent content swap. Tab-bar taps skip this (shell() only adds the class
   when attachSwipeNav sets swipeSlideDir first). */
@keyframes slide-in-from-right { from { transform: translateX(36px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slide-in-from-left { from { transform: translateX(-36px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
main.slide-left { animation: slide-in-from-right 0.22s ease-out; }
main.slide-right { animation: slide-in-from-left 0.22s ease-out; }

/* Pattern/Large Scale Aerobatics tab: drops down from the top of the
   screen like a drawer being pulled down, instead of the instant content
   swap every other tab uses — only on entering the tab (see
   competitionDrawerEnter in app.js), never on re-renders within it. */
@keyframes drawer-drop-in { from { transform: translateY(-100vh); } to { transform: translateY(0); } }
main.drawer-drop { animation: drawer-drop-in 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  main.drawer-drop { animation: none; }
}

nav.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 520px; margin: 0 auto;
  background: var(--navy); display: flex; padding: 8px 2px;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.3); z-index: 10;
}
/* The tabbar's icons have to fit the narrowest phone, so each one takes an
   equal share of the bar and is allowed to shrink (min-width:0) instead of
   overflowing off-screen. */
nav.tabbar button {
  background: transparent; color: #b9c6da; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 3px; font-size: 10px;
  padding: 6px 1px; flex: 1 1 0; min-width: 0; overflow: hidden;
  white-space: nowrap; letter-spacing: -0.2px;
}
nav.tabbar button .icon { display: block; }
nav.tabbar button .icon svg { width: 25px; height: 25px; display: block; }
nav.tabbar button.active { color: var(--orange); }

/* Lucky-draw entry reminder — non-blocking, auto-dismisses, sits above the
   tabbar so it never blocks navigation. */
.toast {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(20px);
  max-width: min(90vw, 480px); background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: 30px; font-weight: 700; font-size: 14px; text-align: center;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .25s ease, transform .25s ease;
  z-index: 50; cursor: pointer;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Larger, closable variant for notices worth reading in full (e.g. the
   marketplace open-bid reminder) rather than glanced at and dismissed. */
.toast.toast-large {
  max-width: min(94vw, 560px); padding: 18px 24px; border-radius: 22px;
  font-size: 16px; line-height: 1.4; display: flex; align-items: center; gap: 14px;
  cursor: default;
}
.toast-close {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.18); color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
  .toast.toast-large {
    max-width: 94vw; padding: 22px 26px; font-size: 18px; border-radius: 26px;
  }
  .toast-close { width: 38px; height: 38px; font-size: 18px; }
}

/* Home's Quick Actions: everything past Tap to Fly collapses by default to
   save space, expanding smoothly on tap rather than jumping open. */
.qa-collapsible {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}
.qa-collapsible.expanded { max-height: 500px; }
.qa-toggle-chevron {
  display: inline-block; transition: transform .25s ease;
}
.qa-toggle-chevron.expanded { transform: rotate(180deg); }

/* ---- Cards ---- */
.card {
  background: var(--white); border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow); border: 1px solid #e7ddce;
}
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { line-height: 1.5; }

/* ---- Sponsor banner: discreet, dismissible ad slot on Home ---- */
.sponsor-banner-close {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* ---- Field weather card: sky background + animated windsock ---- */
.weather-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #4fa8e8 0%, #8fc9f0 55%, #cfe9fb 100%);
  border: 1px solid #3f8fd0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.weather-card:active { transform: scale(0.98); }
.weather-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.weather-card .wx-open-hint {
  position: relative; z-index: 2; margin: 8px 0 0; font-size: 12px; font-weight: 700;
  color: var(--navy-2); opacity: 0.75;
}
.weather-card h3, .weather-card p { color: var(--navy); position: relative; z-index: 2; }
.weather-card .wx-clouds { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.weather-card .wx-cloud {
  position: absolute; background: #fff; border-radius: 50%;
  opacity: 0.9; filter: blur(0.5px);
  box-shadow: 20px 4px 0 -2px #fff, 40px 0 0 -4px #fff, -18px 6px 0 -6px #fff;
}
.weather-card .wx-cloud1 { width: 46px; height: 22px; top: 14px; left: -60px; animation: wx-drift 26s linear infinite; }
.weather-card .wx-cloud2 { width: 34px; height: 16px; top: 40px; left: -120px; animation: wx-drift 34s linear infinite; animation-delay: -10s; }
.weather-card .wx-cloud3 { width: 26px; height: 13px; top: 4px; left: -180px; animation: wx-drift 20s linear infinite; animation-delay: -6s; }
@keyframes wx-drift { from { transform: translateX(0); } to { transform: translateX(340px); } }
@media (prefers-reduced-motion: reduce) {
  .weather-card .wx-cloud, .weather-card .ws-flutter, .weather-card .ws-base { animation: none !important; }
}

.windsock-wrap { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.windsock-svg { width: 46px; height: 60px; overflow: visible; flex-shrink: 0; }
.ws-base { transition: transform 0.6s ease; }
.ws-flutter { --ws-amp: 5deg; animation-name: ws-flutter; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes ws-flutter {
  0%, 100% { transform: rotate(calc(-1 * var(--ws-amp))); }
  50% { transform: rotate(var(--ws-amp)); }
}
.ws-label { font-weight: 700; color: var(--navy); font-size: 14px; }

/* ---- Big flight-control screen ---- */
.fly-screen { text-align: center; padding: 10px; }
.plane-photo {
  width: 100%; height: 20vh; min-height: 140px; border-radius: var(--radius);
  background: var(--navy-2) center/cover no-repeat; display: flex; align-items: center;
  justify-content: center; color: var(--white); font-size: 56px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.big-btn {
  width: 100%; padding: 34px; font-size: 26px; border-radius: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow); min-height: 100px; position: relative; overflow: hidden;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
/* Hold-to-confirm fill: a lightening overlay that sweeps left-to-right over
   the hold duration, so pulling the phone out of a pocket mid-fill and
   letting go cancels before LANDED/CRASHED can fire by accident. */
.big-btn .hold-fill { position: absolute; inset: 0; width: 0%; background: rgba(255,255,255,0.4); pointer-events: none; }
.big-btn .hold-caption { display: block; font-size: 13px; font-weight: 700; opacity: 0.85; margin-top: 2px; }
.big-btn.fly { background: var(--orange); color: var(--white); }
.big-btn.maiden { background: var(--red); color: var(--white); }
.big-btn.landed { background: var(--green); color: var(--white); }
.big-btn.crashed { background: var(--red); color: var(--white); }
/* Fun flight is navy, not red — red is reserved for crash/danger. */
.big-btn.fun { background: var(--navy); color: var(--white); }
/* Log a Flight (post-flight, untimed entry) gets its own colour — sky blue,
   unused elsewhere in the big-btn set — so it reads as clearly distinct
   from the live-timer TAP TO TIME FLIGHT button next to it. */
.big-btn.logflight { background: var(--sky); color: var(--white); }
.timer { font-size: 32px; font-weight: 800; color: var(--navy); margin: 10px 0; }

/* Logbook badge for flights logged after the fact via "Log a Flight" —
   same sky blue as the button that creates them. */
.flight-unverified { background: rgba(244, 114, 128, 0.18) !important; border-left: 4px solid rgba(225, 80, 100, 0.7); }
.tag-unverified { display: inline-block; background: rgba(225, 80, 100, 0.9); color: var(--white); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; margin-left: 6px; }
.tag-postflight { display: inline-block; background: var(--sky); color: var(--white); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; margin-left: 6px; }
/* Pattern practice flight (allocated from the Competition caller) — amber,
   distinct from the sky-blue post-flight-log tag above. */
.tag-pattern { display: inline-block; background: var(--amber); color: var(--navy); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; margin-left: 6px; }
/* Live, judged Competition Event flight (not a solo practice caller run) —
   green, distinct from both tags above so a real scored contest flight
   stands out at a glance in the logbook. */
.tag-competition { display: inline-block; background: var(--green); color: var(--white); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; margin-left: 6px; }

/* ---- Competition caller screen — one maneuver at a time, as large as
   possible for daylight readability at arm's length while calling. ---- */
.caller-screen {
  text-align: center; padding: 10px; display: flex; flex-direction: column;
  min-height: calc(100vh - 160px); justify-content: center;
}
/* A figure with an Aresti icon (Large Scale Aerobatics) plus its usually-
   longer name runs noticeably taller than a plain Pattern maneuver name —
   tall enough on a phone screen that vertical-centering the whole block
   pushes the icon half above the fold instead of leaving room to scroll to
   it. Top-align and let the page scroll instead, same as any other screen. */
.caller-screen:has(.caller-aresti) { justify-content: flex-start; padding-top: 4px; }
.caller-screen:has(.caller-aresti) .caller-maneuver { font-size: 32px; margin: 10px 0 4px; }
.caller-progress { font-size: 16px; color: var(--navy); font-weight: 700; margin-bottom: 12px; }
.caller-maneuver { font-size: 44px; font-weight: 800; line-height: 1.1; margin: 20px 0 4px; }
.caller-kf { font-size: 18px; color: var(--grey); margin-bottom: 24px; }
/* Large Scale Aerobatics has no name/notation line above this — the K is
   the only text identifying the figure alongside its icon, so give it more
   presence than Pattern's supporting KF line gets under a full name. */
.caller-kf-primary { font-size: 26px; font-weight: 800; color: var(--navy); margin: 8px 0 24px; }

/* ---- Large Scale Aerobatics — Aresti figure icons. PNGs traced from the
   real IMAC/OpenAero "Known" sequence sheets (icons/aresti/, see data.js
   aiImg) — this just sizes the icon within the caller slot. ---- */
.caller-aresti { width: min(70vw, 260px); max-height: 30vh; margin: 4px auto 8px; }
.caller-aresti img { max-height: 30vh; width: 100%; height: auto; object-fit: contain; }

/* ---- Lists ---- */
.list-item {
  display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: var(--radius);
  padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); border: 1px solid #e7ddce;
}
.list-item.selected { border: 2px solid var(--orange); }
/* Zebra-stripe alternate rows in any list of .list-item siblings so long
   lists (event rows, member rows, heat rows, etc.) stay easy to scan. */
.list-item:nth-of-type(even):not(.hangar-sold) { background: #f4ecd8; }
.list-item img, .list-item .thumb {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--navy-2);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 26px;
}
.list-item .meta { flex: 1; }
.list-item .meta .name { font-weight: 800; font-size: 16px; }
.list-item .meta .sub { color: var(--grey); font-size: 13px; }
.list-item.hangar-sold { background: #e2e2e2; }
.list-item.hangar-sold .thumb img { filter: grayscale(1); opacity: 0.6; }
.list-item.hangar-sold .meta .name { color: var(--grey); }
.hangar-sold-banner { color: var(--red); font-weight: 800; font-size: 13px; margin-top: 2px; }

/* ---- Chips / tags ---- */
.tier-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 800; color: var(--white); }
.tier-Beginner { background: var(--green); }
.tier-Intermediate { background: var(--sky); }
.tier-Advanced { background: var(--orange-dark); }
.tier-Pro { background: var(--red); }

/* Locked proficiency level — visibly greyed, but still tappable so the app can
   explain what unlocks it rather than silently doing nothing. */
.btn-secondary.locked { background: #9aa6b6; color: #f0f3f7; }

/* ---- Photo gallery ---- */
.icon-inline { display: inline-block; vertical-align: -6px; }
.icon-inline svg { width: 20px; height: 20px; }
/* The generated icon set is full-colour, not currentColor like the hand-drawn
   nav icons — on ANY button colour (orange, navy, red, green) a same- or
   close-toned icon loses contrast. A white backing disc fixes it everywhere,
   not just the loudest offenders, without needing per-icon colour variants. */
.icon-inline img {
  width: 30px; height: 30px; object-fit: contain; vertical-align: -8px;
  background: rgba(255,255,255,0.92); border-radius: 50%; padding: 4px; box-sizing: content-box;
}
.icon-inline.icon-lg img { width: 48px; height: 48px; vertical-align: -14px; padding: 6px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery-tile {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid #e7ddce; display: flex; flex-direction: column;
  position: relative;
}
.gallery-tile > img { width: 100%; height: 130px; object-fit: cover; display: block; cursor: zoom-in; }
.gallery-cap { padding: 8px 10px; font-size: 13px; font-weight: 700; flex: 1; }
.gallery-cap .gallery-date { display: block; font-weight: 400; color: var(--grey); font-size: 12px; }
/* Super-admin-only control, so it's deliberately unobtrusive — a small
   corner overlay on the thumbnail, not a full-width bar under every photo
   every member sees. Still a real 36px tap target, just not a stretched one. */
.gallery-tile .gal-del {
  position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; min-height: 0;
  padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(20,26,36,0.72) !important; border: none !important; box-shadow: var(--shadow);
}
.gallery-tile .gal-del .icon-inline img { width: 18px; height: 18px; background: transparent; padding: 0; }

/* Collapsible month/year gallery folders — same chevron-toggle pattern as
   Learn's theory sections. */
.gallery-folder-header {
  width: 100%; background: none; border: none; padding: 0; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer; text-align: left;
}

/* Full-screen photo view — darker than a normal modal so the picture carries. */
.modal-backdrop.photo-viewer { background: rgba(4,12,24,0.94); cursor: zoom-out; }

/* Read-only jet rating shown in the logbook for flights logged before this
   was simplified away from the post-flight review flow. */
.jet-score { display: inline-flex; gap: 2px; vertical-align: middle; color: #c9d2de; }
.jet-score svg { width: 18px; height: 18px; display: block; }

/* ---- Inline flight-test scoring ---- */
.flight-item { background: #f7f3ea; border-radius: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid #e7ddce; }
.flight-item.item-passed { background: #eaf6ee; border-color: #b9e3c6; }
.flight-item.item-exhausted { background: #fbecea; border-color: #f0c4bd; }
.flight-item-title { font-weight: 700; margin-bottom: 8px; }
.attempt-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.attempt-row.pass .attempt-badge { color: var(--green); font-weight: 700; }
.attempt-row.fail .attempt-badge { color: var(--red); font-weight: 700; }
.attempt-badge { display: inline-flex; align-items: center; gap: 4px; }
.attempt-badge svg { width: 16px; height: 16px; }
.attempt-buttons { display: flex; gap: 8px; }
.attempt-btn {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px;
  font-weight: 800; font-size: 15px; min-height: 44px; color: var(--white);
}
.attempt-btn svg { width: 20px; height: 20px; }
.attempt-btn.pass { background: var(--green); }
.attempt-btn.fail { background: var(--red); }
.attempt-note { color: var(--red); font-size: 13px; margin: 6px 0 0; }
.jet-score .lit { color: var(--orange); }

.level-chip { display: inline-block; padding: 6px 14px; border-radius: 14px; font-weight: 800; background: var(--navy); color: var(--white); font-size: 14px; }

/* ---- Hangar Marketplace ---- */
.mkt-badge { display: inline-block; background: var(--green); color: var(--white); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 10px; }
.mkt-badge.reserve-not-met { background: var(--amber); color: var(--navy); }
.mkt-badge.ended { background: var(--grey); }
.mkt-badge.sold { background: var(--red); }
.mkt-badge.part { background: var(--sky); }
.mkt-bid-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.mkt-bid-row:last-child { border-bottom: none; }
.mkt-bid-row .mkt-bid-amount { font-weight: 800; color: var(--navy); }
.mkt-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.mkt-toggle button { flex: 1; }
@keyframes mkt-toggle-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.85); background: rgba(255, 106, 0, 0.16); }
  70% { box-shadow: 0 0 0 12px rgba(255, 106, 0, 0); background: rgba(255, 106, 0, 0.16); }
  100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); background: var(--white); }
}
.mkt-toggle button.active { animation: mkt-toggle-pulse 1.6s ease-out infinite; }
.mkt-winner-banner { background: var(--green); color: var(--white); padding: 14px; border-radius: 12px; font-weight: 700; }
.mkt-sold-note { border: 2px solid var(--red); }
.mkt-card-delete { position: absolute; top: 10px; right: 10px; padding: 6px 8px !important; min-height: auto !important; border-color: var(--red) !important; }

/* ---- Quiz ---- */
.quiz-option {
  display: block; width: 100%; text-align: left; background: var(--white); border: 2px solid var(--navy-2);
  color: var(--navy); padding: 14px; border-radius: var(--radius); margin-bottom: 10px; font-size: 16px;
}
.quiz-option.correct { background: var(--green); color: var(--white); border-color: var(--green); }
.quiz-option.wrong { background: var(--red); color: var(--white); border-color: var(--red); }

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(11,31,58,0.75); display: flex; align-items: center;
  justify-content: center; padding: 20px; z-index: 50;
}
.modal {
  background: var(--white); border-radius: 18px; padding: 22px; max-width: 460px; width: 100%;
  max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal h2 { margin-top: 0; }
.modal .actions { display: flex; gap: 10px; margin-top: 18px; }
.modal .actions button { flex: 1; padding: 16px; font-size: 16px; }

/* Small tappable "what does this mean?" icon sat inline after a form label —
   a real button (not just `title=`) since this is a touch-first field app
   and hover tooltips never fire on a phone. */
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 4px; vertical-align: -4px;
  border-radius: 50%; border: 2px solid var(--sky); color: var(--sky);
  background: none; font: 700 13px/1 sans-serif; padding: 0; cursor: pointer;
}

/* ---- More sheet: a side drawer instead of a centered pop-in modal ----
   Only the More button uses this — every other modal in the app keeps the
   plain .modal-backdrop/.modal centered treatment above. Slides in from
   the right (where the More tab sits in the bottom bar) rather than
   appearing all at once. */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(11,31,58,0.75); z-index: 50;
  display: flex; justify-content: flex-end;
}
.drawer-panel {
  background: var(--white); width: min(78vw, 320px); height: 100%;
  padding: 22px; box-shadow: -6px 0 20px rgba(0,0,0,0.3);
  overflow-y: auto; box-sizing: border-box;
  animation: drawer-slide-in 0.25s ease-out;
}
.drawer-panel.closing { animation: drawer-slide-out 0.2s ease-in forwards; }
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes drawer-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-panel.closing { animation: none; }
}

/* ---- Celebration ---- */
.celebration {
  position: fixed; inset: 0; background: rgba(255,106,0,0.96); color: var(--white); z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 30px;
}
.celebration .emoji { font-size: 80px; }
.celebration h1 { font-size: 30px; margin: 0; }

/* ---- Route map ---- */
.route-map { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 10px 0; }
.route-node {
  width: 100%; background: var(--navy); color: var(--white); padding: 18px; border-radius: var(--radius);
  text-align: center; font-size: 18px; font-weight: 800; box-shadow: var(--shadow);
}
.route-node.done { background: var(--green); }
.route-node.current { background: var(--orange); }
.route-arrow { font-size: 24px; color: var(--navy-2); }

/* ---- Checklist ---- */
.checklist-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; }
.checklist-item input { width: 24px; height: 24px; }

/* ---- Stats ---- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Three-up totals (flights / air time / crashes) — smaller numerals so
   values like "1h 24m" still fit on a 320px phone. */
.stat-grid.three { grid-template-columns: repeat(3, 1fr); }
.stat-grid.three .stat-box { padding: 12px 6px; }
.stat-grid.three .num { font-size: 20px; }
.stat-box { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 16px; text-align: center; }
.stat-box .num { font-size: 28px; font-weight: 800; color: var(--orange); }
.stat-box .lbl { font-size: 12px; color: #c8d3e2; }

table.logbook-register { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
table.logbook-register th, table.logbook-register td { padding: 10px 12px; text-align: left; }
table.logbook-register thead th { background: var(--navy); color: var(--white); position: sticky; top: 0; }
table.logbook-register tbody tr:nth-child(even) { background: #f3f0ea; }
table.logbook-register tbody tr:nth-child(odd) { background: #fff; }

textarea { width: 100%; padding: 12px; border-radius: var(--radius); border: 2px solid var(--navy-2); font-size: 15px; font-family: inherit; min-height: 90px; }

body.notes-expanded-active { overflow: hidden; }

.notes-expand-panel {
  display: none;
  position: fixed;
  top: 5vh; left: 5vw; right: 5vw; bottom: 5vh;
  width: 90vw; height: 90vh;
  z-index: 1000;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  padding: 16px;
  box-sizing: border-box;
  flex-direction: column;
}
.notes-expand-panel.notes-panel-open { display: flex; }

.notes-expand-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0; }

.notes-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  flex-shrink: 0;
}

.notes-list { overflow-y: auto; flex: 1; }
.note-entry { border-bottom: 1px solid #e4ddce; padding: 10px 0; }
.note-entry:last-child { border-bottom: none; }
.note-date { font-weight: 700; color: var(--navy); font-size: 13px; margin-bottom: 4px; }
.note-text { white-space: pre-wrap; }

/* Unread dot on the News tab icon */
nav.tabbar button .icon { position: relative; }
.news-tab-dot {
  position: absolute; top: -2px; right: -4px; width: 11px; height: 11px;
  background: var(--orange); border: 2px solid var(--navy); border-radius: 50%;
}

/* Show and Shine */
.shine-photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; display: block; background: #e8eaed; }
.shine-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; color: var(--white); }
.shine-entries { background: var(--sky); }
.shine-voting { background: var(--orange); }
.shine-closed { background: #5a6472; }
.shine-winner { border: 3px solid #d4af37; }

/* Fly-in Event Home card: clean banner photo (16:7, same shape as the crop step) with the chip over it, and a navy info strip underneath */
.fly-in-chip { align-self: flex-start; background: var(--orange); color: var(--white); font-weight: 800; font-size: 15px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* Fly-in Event: Finalise Vote bar is fixed just above the tab bar (a sticky bar can't work here: main has overflow:auto) */
.fly-in-finalise { position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto; box-sizing: border-box; z-index: 9; background: var(--white); border-top: 3px solid var(--orange); border-radius: 14px 14px 0 0; padding: 12px 16px; box-shadow: 0 -4px 14px rgba(0,0,0,0.18); }
.fly-in-finalise p { margin: 0 0 8px; }

/* Fly-in Event winner splash (reuses the .celebration overlay) */
.fly-in-win { overflow-y: auto; }
.fly-in-win-emoji { font-size: 44px; letter-spacing: 6px; animation: fly-in-pop 0.7s ease-out both; }
.fly-in-win h1 { font-size: 40px; animation: fly-in-pop 0.7s ease-out 0.1s both; }
.fly-in-win-photo { width: 100%; max-width: 320px; max-height: 38vh; object-fit: cover; border-radius: 14px; border: 4px solid var(--white); box-shadow: 0 6px 22px rgba(0,0,0,0.35); animation: fly-in-pop 0.7s ease-out 0.2s both; }
@keyframes fly-in-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fly-in-win-emoji, .fly-in-win h1, .fly-in-win-photo { animation: none; } }

/* Fly-in Event: full-screen "View Vote" */
.fly-in-vote-view { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; color: var(--white); }
.fly-in-vote-view img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.fly-in-vote-loading { margin: auto; }
.fly-in-vote-top { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; font-weight: 800; font-size: 18px; background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)); position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.fly-in-vote-top button { background: rgba(255,255,255,0.18); color: var(--white); border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 20px; cursor: pointer; }
.fly-in-vote-bottom { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; background: rgba(0,0,0,0.85); }
.fly-in-vote-bottom h2 { margin: 0; font-size: 22px; }
.fly-in-vote-bottom p { margin: 2px 0 10px; color: #c8d3e2; }
.fly-in-vote-bottom .btn-outline { width: 100%; background: transparent; color: var(--white); border-color: var(--white) !important; }

/* Fly-in Event: live countdown to voting close, on the Home card on the event day */
.fly-in-countdown { margin: 4px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.shine-home-card .fly-in-countdown { margin: -2px 0 10px; color: var(--orange-dark, #c4560a); font-size: 15px; }

.fly-in-card { border-radius: 14px; overflow: hidden; margin-bottom: 14px; cursor: pointer; box-shadow: var(--shadow); background: var(--navy); color: var(--white); }
.fly-in-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.fly-in-banner { position: relative; aspect-ratio: 16 / 7; background-size: cover; background-position: center; background-color: var(--navy); }
.fly-in-banner .fly-in-chip { position: absolute; left: 12px; bottom: 12px; }
.fly-in-card-strip { padding: 10px 14px 12px; }
.fly-in-card-strip h3 { margin: 0; font-size: 18px; line-height: 1.2; color: var(--white); }
.fly-in-card-strip p { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #c8d3e2; }
.fly-in-card-strip .fly-in-countdown { color: #ffb066; font-size: 15px; margin-top: 4px; }


/* Events hub */
.eh-tab.on { background: var(--navy); color: var(--white); }
.events-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.events-chip { border: 2px solid var(--navy-2, #12335c); background: var(--white); color: var(--navy); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 40px; }
.events-chip.on { background: var(--orange); border-color: var(--orange); color: var(--white); }
.events-month { margin: 16px 4px 8px; font-size: 15px; color: #5a6472; text-transform: uppercase; letter-spacing: 0.04em; }
.events-row { display: flex; gap: 12px; align-items: center; background: var(--white); border-radius: 14px; padding: 10px; margin-bottom: 10px; box-shadow: var(--shadow); cursor: pointer; }
.events-row:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.events-thumb { flex: 0 0 84px; height: 56px; border-radius: 10px; background: var(--navy) center/cover; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.events-info { min-width: 0; flex: 1; }
.events-name { font-weight: 800; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.events-sub { font-size: 13px; color: #5a6472; margin-top: 2px; }
.events-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.events-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cream); color: var(--navy); }
.events-tag-hot { background: var(--orange); color: var(--white); }

/* Club chat */
.chat-day { text-align: center; font-size: 12px; font-weight: 700; color: #5a6472; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.chat-msg { max-width: 86%; background: var(--white); border-radius: 14px 14px 14px 4px; padding: 8px 12px; margin: 6px auto 6px 0; box-shadow: var(--shadow); }
.chat-msg.mine { margin: 6px 0 6px auto; background: #fde9d9; border-radius: 14px 14px 4px 14px; }
.chat-meta { font-size: 12px; color: #5a6472; display: flex; align-items: center; gap: 4px; }
.chat-meta strong { color: var(--navy); }
.chat-more { margin-left: auto; border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 4px 8px; cursor: pointer; color: #5a6472; min-height: 32px; }
.chat-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.chat-photo { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin-top: 6px; object-fit: cover; }
.chat-photo-wait { background: var(--cream); color: #5a6472; padding: 24px 12px; text-align: center; font-size: 13px; }
.chat-composer { position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto; box-sizing: border-box; z-index: 9; background: var(--white); border-top: 3px solid var(--orange); padding: 10px 12px; box-shadow: 0 -4px 14px rgba(0,0,0,0.18); }
.chat-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-row textarea { flex: 1; min-width: 0; resize: none; padding: 10px 12px; border-radius: 12px; border: 2px solid #12335c; font: inherit; font-size: 16px; max-height: 90px; box-sizing: border-box; }
.chat-icon-btn { border: 2px solid #12335c; background: var(--white); border-radius: 12px; font-size: 20px; min-width: 46px; min-height: 46px; cursor: pointer; }
.chat-row .btn-primary { width: auto; padding: 0 18px; min-height: 46px; }
.chat-pending { position: relative; display: inline-block; margin-bottom: 8px; }
.chat-pending img { max-height: 90px; border-radius: 10px; display: block; }
.chat-pending button { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--navy); color: var(--white); cursor: pointer; }

/* Home events carousel: native scroll-snap (finger swipe), dots, auto-advance in JS */
.events-carousel-wrap { margin-bottom: 14px; }
.events-carousel { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.events-carousel::-webkit-scrollbar { display: none; }
.events-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; display: flex; }
.events-slide > .fly-in-card, .events-slide > .card { width: 100%; margin-bottom: 0; box-sizing: border-box; }
.events-slide > .card { display: flex; flex-direction: column; justify-content: center; }
.events-dots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.events-dot { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.events-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c3cbd6; transition: background 0.2s, transform 0.2s; }
.events-dot.on::before { background: var(--orange); transform: scale(1.25); }
.events-dot:focus-visible { outline: 3px solid var(--orange); outline-offset: -2px; border-radius: 50%; }

/* Fly-in Event Share: icon only, in a circle, bottom-right of the navy strip (not on the picture) */
.fly-in-card-strip { position: relative; padding-right: 70px; min-height: 68px; display: flex; flex-direction: column; justify-content: center; }
.fly-in-card-strip .fly-in-share { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.35); cursor: pointer; }
.fly-in-share-plain { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 2px solid var(--navy-2, #12335c); background: var(--white); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fly-in-share .icon-inline, .fly-in-share-plain .icon-inline { display: inline-flex; margin: 0; }
.fly-in-share svg, .fly-in-share-plain svg { width: 22px; height: 22px; }
.fly-in-share:focus-visible, .fly-in-share-plain:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Leaderboard follow button — round icon to the right of the pilot's name */
.lb-follow { margin-left: auto; flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #12335c; background: #fff; color: #12335c; font-size: 22px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lb-follow .icon-inline { width: 26px; height: 26px; }
.lb-follow-requested { background: #f4efe2; }
.lb-follow-following { background: #12335c; color: #fff; }

/* Fly-in line-up: compact rows with a small tappable thumbnail */
.shine-heading { margin: 10px 4px 4px; font-size: 15px; }
.shine-row { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 8px; margin-bottom: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.shine-thumb { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: 8px; background: #e8eaed; cursor: zoom-in; }
.shine-thumb-lg { width: 96px; height: 96px; }
.shine-row-main { flex: 1; min-width: 0; }
.shine-row-title { font-weight: 800; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.shine-row-no { color: #5a6472; font-weight: 700; }
.shine-row-sub { color: #5a6472; font-size: 14px; margin: 1px 0 4px; }
.shine-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shine-row-actions p { margin: 0 !important; }
.shine-row-actions button { width: auto !important; margin: 0 !important; padding: 6px 10px !important; min-height: 36px !important; font-size: 13px !important; }
.shine-row.shine-winner { background: #fff6e0; }

/* Likes */
.like-btn { border: 0; background: #f1eee6; border-radius: 14px; padding: 2px 10px; font-size: 15px; font-weight: 700; color: #12335c; cursor: pointer; margin-left: 6px; min-height: 28px; vertical-align: middle; }
.like-btn.liked { background: #fde3e3; }
.like-btn:disabled { cursor: default; opacity: .85; }
.gallery-like { position: absolute; right: 6px; top: 6px; }
.gallery-like .like-btn { background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.25); margin: 0; }

/* New-version notice */
#update-banner { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  background: #12335c; color: #fff; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; font-weight: 700; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
#update-banner button { border: 0; border-radius: 10px; min-height: 40px; padding: 0 14px; font-weight: 800; font-size: 15px; cursor: pointer; background: #e8702a; color: #fff; }
#update-banner #update-later { background: transparent; color: #fff; padding: 0 8px; }

.fp-like { margin-left: auto; flex: none; align-self: center; }

/* "NEW" chip on a menu item */
.new-chip { display: inline-block; border: 2px solid #e8702a; color: #e8702a; background: #fff; border-radius: 10px; padding: 0 7px; margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: .5px; line-height: 16px; vertical-align: middle; }

/* Unread club-chat count above the More tab */
.more-tab-count { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: var(--red); color: #fff; border: 2px solid var(--navy); font-size: 11px; font-weight: 800; line-height: 14px; text-align: center; }

/* Group logos and the "My chats" list */
.grp-logo { flex: none; border-radius: 50%; object-fit: cover; background: #e8eaed; display: inline-block; }
.grp-logo-ph { text-align: center; background: #e3edf8; }
.mc-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 2px solid #12335c; border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit; }
.mc-main { flex: 1; min-width: 0; }