/* =====================================================================
   AIR INDIA VIRTUAL — Design System
   Aligned to the official 2023 Air India brand guidelines ("The Vista"):
   • Primary red, aubergine purple, antique gold (chakra)
   • Bespoke font "Air India Sans" → web fallback "Outfit" / "DM Sans"
   • Window of Possibilities — gold rounded window arch as core motif
   ===================================================================== */

:root {
  /* ----- Brand palette (sampled from the 2023 brand book) ----- */
  --ai-red:           #DA192F;   /* "Air India Red" — bold, vivid */
  --ai-red-bright:    #ED2738;
  --ai-red-deep:      #A8101F;
  --ai-aubergine:     #4A1B41;   /* premium aubergine */
  --ai-aubergine-br:  #6B2A60;
  --ai-aubergine-dp:  #2D0F26;
  --ai-gold:          #C7A56C;   /* antique chakra gold */
  --ai-gold-bright:   #E4C988;
  --ai-gold-deep:     #876C3B;
  --ai-cream:         #F8F1E4;
  --ai-cream-dim:     #C9C2B5;
  --ai-ivory:         #FBF7EE;
  --ai-pink-tint:     #F5E0E3;

  /* keep legacy aliases */
  --ai-purple:        var(--ai-aubergine);
  --ai-purple-bright: var(--ai-aubergine-br);
  --ai-purple-deep:   var(--ai-aubergine-dp);

  /* ----- Dark surfaces (default theme) ----- */
  --bg:               #0A0709;
  --bg-grad:          radial-gradient(at 14% 8%, rgba(74,27,65,.30) 0%, transparent 42%),
                      radial-gradient(at 92% 12%, rgba(218,25,47,.15) 0%, transparent 38%),
                      radial-gradient(at 50% 100%, rgba(199,165,108,.05) 0%, transparent 50%),
                      #0A0709;
  --surface:          #141012;
  --surface-2:        #1C1719;
  --surface-3:        #251E20;
  --surface-glass:    rgba(28,23,25,.72);
  --border:           rgba(245,240,232,.08);
  --border-strong:    rgba(245,240,232,.16);
  --border-red:       rgba(218,25,47,.34);
  --border-gold:      rgba(199,165,108,.32);

  /* ----- Text ----- */
  --text:             #F8F1E4;
  --text-dim:         rgba(248,241,228,.66);
  --text-mute:        rgba(248,241,228,.42);
  --text-faint:       rgba(248,241,228,.22);

  /* ----- Status ----- */
  --ok:               #4ADE80;
  --warn:             #FBBF24;
  --bad:              #F87171;
  --info:             #60A5FA;

  /* ----- Typography -----
     Air India Sans is proprietary. We list it FIRST so if the user drops
     the AIS font into /assets/fonts and @font-face declares it, it'll win
     automatically. Otherwise Mukta + Inter give the closest AI feel.       */
  --font-display:     "Air India Sans", "Mukta", "Inter Tight", "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:        "Air India Sans", "Mukta", "Inter", "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:        "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ----- Spacing ----- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ----- Radius (more rounded per AI brand) ----- */
  --r-sm: 8px; --r: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;

  /* ----- Shadow ----- */
  --shadow-sm:        0 1px 2px rgba(0,0,0,.4);
  --shadow:           0 4px 16px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:        0 12px 48px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
  --shadow-red:       0 8px 32px rgba(218,25,47,.28);
  --shadow-gold:      0 8px 32px rgba(199,165,108,.22);

  /* ----- Motion ----- */
  --ease:             cubic-bezier(.2,.7,.2,1);
  --ease-emph:        cubic-bezier(.16,1,.3,1);
  --t-fast:           120ms;
  --t:                220ms;
  --t-slow:           420ms;

  /* ----- Layout ----- */
  --nav-w:            232px;
  --topbar-h:         60px;
  --content-max:      1480px;
}

/* ===== LIGHT THEME (toggleable) — matches airindia.com booking page ===== */
html[data-theme="light"] {
  --bg:               #F4F1EC;
  --bg-grad:          radial-gradient(at 12% 8%, rgba(218,25,47,.05) 0%, transparent 42%),
                      radial-gradient(at 92% 12%, rgba(74,27,65,.04) 0%, transparent 38%),
                      #F4F1EC;
  --surface:          #FFFFFF;
  --surface-2:        #FBF8F3;
  --surface-3:        #F4F0E8;
  --surface-glass:    rgba(255,255,255,.85);
  --border:           rgba(20,16,18,.10);
  --border-strong:    rgba(20,16,18,.18);
  --text:             #1A0F12;
  --text-dim:         rgba(26,15,18,.66);
  --text-mute:        rgba(26,15,18,.45);
  --text-faint:       rgba(26,15,18,.25);
  --ai-cream:         #1A0F12;
  --ai-gold-bright:   #876C28;
}
html[data-theme="light"] body { color: #1A0F12; }
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F3 100%);
  border-right: 1px solid rgba(20,16,18,.08);
}
html[data-theme="light"] .nav-item.active {
  background: linear-gradient(90deg, rgba(218,25,47,.08), transparent);
  color: #1A0F12;
}
html[data-theme="light"] .nav-group-title { color: rgba(26,15,18,.5); }
html[data-theme="light"] .topbar { background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(20,16,18,.08); }
html[data-theme="light"] .topbar .breadcrumb .page-title { color: #1A0F12; }
html[data-theme="light"] .topbar .clock { color: #1A0F12; }
html[data-theme="light"] .topbar .iconbtn { border-color: rgba(20,16,18,.12); color: #5a3340; }
html[data-theme="light"] .card { background: #FFFFFF; border-color: rgba(20,16,18,.08); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); }
html[data-theme="light"] .card-glass { background: rgba(255,255,255,.85); border-color: rgba(20,16,18,.10); }
html[data-theme="light"] .input, html[data-theme="light"] .select, html[data-theme="light"] .textarea {
  background: #FFFFFF; border-color: rgba(20,16,18,.16); color: #1A0F12;
}
html[data-theme="light"] .input:focus { border-color: var(--ai-red); }
html[data-theme="light"] .input::placeholder { color: rgba(26,15,18,.4); }
html[data-theme="light"] .ac-chip { background: #FFFFFF; border-color: rgba(20,16,18,.14); color: #1A0F12; }
html[data-theme="light"] .ac-chip:hover { border-color: rgba(20,16,18,.3); }
html[data-theme="light"] .ac-chip.on { color: #FFFFFF; }
html[data-theme="light"] .pill { background: rgba(218,25,47,.06); color: #1A0F12; border-color: rgba(20,16,18,.1); }
html[data-theme="light"] .pill-gold { background: rgba(199,165,108,.14); color: #876C28; border-color: rgba(199,165,108,.4); }
html[data-theme="light"] .pill-red { background: rgba(218,25,47,.10); color: var(--ai-red); border-color: rgba(218,25,47,.3); }
html[data-theme="light"] .label { color: rgba(26,15,18,.55); }
html[data-theme="light"] .display { color: #1A0F12; }
html[data-theme="light"] .text-mute { color: rgba(26,15,18,.5); }
html[data-theme="light"] .text-dim { color: rgba(26,15,18,.7); }
html[data-theme="light"] .h2, html[data-theme="light"] .h3, html[data-theme="light"] .section-title h2 { color: #1A0F12; }
html[data-theme="light"] .stat-value, html[data-theme="light"] .kpi .val { color: #1A0F12; }
html[data-theme="light"] .gold-rule { background: linear-gradient(90deg, transparent, rgba(199,165,108,.6), transparent); }
html[data-theme="light"] .doc-card { background: #FFFFFF; border-color: rgba(20,16,18,.08); }
html[data-theme="light"] .doc-card .doc-title { color: #1A0F12; }
html[data-theme="light"] .news-card { background: #FFFFFF; border-color: rgba(20,16,18,.08); }
html[data-theme="light"] .news-card h3 { color: #1A0F12; }
html[data-theme="light"] .roster-day { background: #FFFFFF; border-color: rgba(20,16,18,.08); }
html[data-theme="light"] .tbl th { color: rgba(26,15,18,.55); }
html[data-theme="light"] .tbl td { color: #1A0F12; }
html[data-theme="light"] .tbl tr:hover td { background: rgba(218,25,47,.03); }
html[data-theme="light"] .metar-block { background: #1A0F12; color: #F4F1EC; }
html[data-theme="light"] .note-callout { background: rgba(218,25,47,.05); color: rgba(26,15,18,.7); }
html[data-theme="light"] .note-callout b { color: var(--ai-red); }
html[data-theme="light"] .hero-card { background: linear-gradient(135deg, #FFFFFF 0%, #FBF8F3 100%); border-color: rgba(199,165,108,.4); box-shadow: 0 8px 32px rgba(0,0,0,.06); }
html[data-theme="light"] .hero-card h1 { color: #1A0F12; }
html[data-theme="light"] .hero-card .eyebrow { color: var(--ai-red); }
html[data-theme="light"] .hero-card .meta-item .val { color: #1A0F12; }
html[data-theme="light"] .flight-card { background: #FFFFFF; border-color: rgba(20,16,18,.08); }
html[data-theme="light"] .flight-card.active { background: linear-gradient(135deg, #FFFFFF 0%, rgba(218,25,47,.04) 100%); }
html[data-theme="light"] .flight-card .head .left .fno { color: #1A0F12; }
html[data-theme="light"] .flight-card .ap .code { color: #1A0F12; }
html[data-theme="light"] .sidebar-foot .pname { color: #1A0F12; }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(20,16,18,.18); }

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ai-red); color: var(--ai-cream); }

/* ----- Scrollbar ----- */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(245,240,232,.08); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(245,240,232,.18); }

/* ----- Typography ----- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6vw, 64px); line-height: 1.02; letter-spacing: -.025em; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -.015em; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.text-gold { color: var(--ai-gold-bright); }
.text-red { color: var(--ai-red-bright); }

/* ----- Primitives ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.card-glass {
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.divider { height: 1px; background: var(--border); margin: var(--s-6) 0; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 99px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .005em;
  transition: all var(--t) var(--ease);
  border: 1px solid transparent;
  position: relative; overflow: hidden;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(180deg, var(--ai-red-bright), var(--ai-red));
  /* Always white text on the red gradient — `--ai-cream` flips dark in light theme,
     which produced a low-contrast button. Use a literal cream instead. */
  color: #F8F1E4;
  box-shadow: 0 6px 20px rgba(218,25,47,.32),
              inset 0 1px 0 rgba(255,255,255,.18),
              inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #FFFFFF; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(218,25,47,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:active { transform: translateY(0); }

/* Liquid-glass button — frosted, refractive */
.btn-glass {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--ai-cream);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 20px rgba(0,0,0,.18),
              inset 0 1px 0 rgba(255,255,255,.22),
              inset 0 -1px 0 rgba(0,0,0,.12);
  position: relative; overflow: hidden;
}
.btn-glass::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%);
  transform: translateX(-100%); transition: transform .6s var(--ease);
  pointer-events: none;
}
.btn-glass:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.btn-glass:hover::before { transform: translateX(100%); }
.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(245,240,232,.06); border-color: var(--text-dim); }
.btn-gold {
  background: var(--ai-gold);
  color: #1A1414;
  box-shadow: 0 6px 20px rgba(199,165,108,.32);
}
.btn-gold:hover { transform: translateY(-1px); }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-lg { padding: 14px 26px; font-size: 14px; }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.active { background: rgba(245,240,232,.07); border-color: var(--text-dim); }

/* ----- Inputs ----- */
.input, .select, .textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text);
  transition: all var(--t) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ai-gold);
  background: var(--surface-3);
}
.input::placeholder { color: var(--text-faint); }
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.field { margin-bottom: var(--s-4); }

/* ----- Badge / pill / chip ----- */
.badge, .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  background: rgba(245,240,232,.04);
}
.pill-red    { color: var(--ai-red-bright);  border-color: var(--border-red);  background: rgba(218,25,47,.08); }
.pill-gold   { color: var(--ai-gold-bright); border-color: var(--border-gold); background: rgba(199,165,108,.06); }
.pill-ok     { color: var(--ok); border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.06); }
.pill-warn   { color: var(--warn); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); }
.pill-aubergine { color: var(--ai-aubergine-br); border-color: rgba(74,27,65,.5); background: rgba(74,27,65,.18); }

/* ----- Stat helpers ----- */
.stat-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
.stat-value { font-family: var(--font-display); font-weight:600; font-size: 38px; line-height: 1; margin-top: 8px; letter-spacing: -.02em; }

/* ----- Animations ----- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(199,165,108,.3); } 50% { box-shadow: 0 0 0 8px rgba(199,165,108,0); } }

.spin { animation: spin 1s linear infinite; }
.pulse { animation: pulse 1.6s var(--ease) infinite; }
.fade-up { animation: fadeUp var(--t-slow) var(--ease-emph) both; }
.fade-in { animation: fadeIn var(--t-slow) var(--ease) both; }

/* ----- Layout helpers ----- */
.row { display: flex; gap: var(--s-3); align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1100px) {
  .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

/* ----- Tooltip ----- */
.tt { position: relative; }
.tt::after {
  content: attr(data-tt);
  /* Default tooltip drops DOWN below the trigger — never goes off the top of the
     viewport for elements in the top bar. Opt in to upward via .tt-up. */
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--surface-3); color: var(--text); padding: 5px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 11px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--t) var(--ease);
  z-index: 50;
}
.tt.tt-up::after { top: auto; bottom: calc(100% + 8px); }
.tt:hover::after { opacity: 1; }

/* ----- Utility ----- */
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.center { display: flex; align-items: center; justify-content: center; }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }
.p-3 { padding: var(--s-3); } .p-4 { padding: var(--s-4); } .p-5 { padding: var(--s-5); } .p-6 { padding: var(--s-6); }
.full { width: 100%; }
.uppercase { text-transform: uppercase; letter-spacing: .12em; }
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--ai-gold), transparent); margin: 14px 0; opacity: .35; }

.maharaja-silhouette {
  filter: drop-shadow(0 0 22px rgba(199,165,108,.5));
}

/* ===== Mobile / iPad responsive baseline ===== */
@media (max-width: 720px) {
  body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
  .h1 { font-size: clamp(34px, 8vw, 48px); }
  .h2 { font-size: clamp(24px, 6vw, 32px); }
  .card { padding: var(--s-4); border-radius: var(--r); }
  .btn { padding: 12px 18px; font-size: 14px; min-height: 44px; }
  .input, .select, .textarea { padding: 13px 14px; font-size: 16px; min-height: 44px; }
}
@media (max-width: 480px) {
  .content { padding: 16px 14px 80px !important; }
  .hero-card { padding: 22px 18px !important; border-radius: 18px !important; }
  .hero-card h1 { font-size: 28px !important; }
  .hero-card .hero-meta { gap: 14px !important; }
  .flight-card { padding: 16px 18px !important; border-radius: 16px !important; }
  .flight-card .head .left .fno { font-size: 22px !important; }
  .flight-card .ap .code { font-size: 24px !important; }
  .topbar { padding: 0 16px !important; }
  .topbar .clock-grp { gap: 8px !important; }
  .topbar .clock { font-size: 11px !important; }
  .topbar .iconbtn { width: 32px; height: 32px; }
  .section-title { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-title h2 { font-size: 18px !important; }
  .kpi { padding: 14px 16px !important; }
  .kpi .val { font-size: 28px !important; }
  .map-host { height: 380px !important; min-height: 320px !important; }
  .map-host.tall { height: 60vh !important; }
  .roster-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .roster-day { padding: 10px !important; min-height: 90px !important; }
  .roster-day .day-num { font-size: 18px !important; }
  .nav-line { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* iPad portrait/landscape sweet spot */
@media (min-width: 481px) and (max-width: 1024px) {
  .content { padding: 22px 20px 60px !important; }
  .map-host { height: 460px !important; }
  .map-host.tall { height: 64vh !important; }
}

/* ====================================================================
   Book Roster — airport autocomplete + multi-sector picker styles
   ==================================================================== */
.airport-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  /* Solid surface — was leaking the section-title underneath through.
     Layered colour + opaque fallback so the next section never bleeds in. */
  background: #14080C;
  background: var(--surface, #14080C);
  border: 1px solid var(--border);
  border-radius: 12px;
  z-index: 200;
  max-height: 280px;
  overflow: auto;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  display: none;
}
.airport-drop .airport-row {
  display: grid;
  grid-template-columns: 50px 1fr auto 70px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12.5px;
  color: var(--text);
}
.airport-drop .airport-row:hover { background: rgba(255,225,89,.08); }
.airport-drop .airport-row:last-child { border-bottom: 0; }
.airport-drop .iata { font-family: var(--font-mono); font-weight: 700; color: var(--ai-gold); }
.airport-drop .city { color: var(--text); }
.airport-drop .name { color: var(--text-mute); font-size: 11px; }
.airport-drop .icao { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); text-align: right; }

html[data-theme="light"] .airport-drop {
  background: #FFFFFF;
  border-color: rgba(20,16,18,.14);
  box-shadow: 0 24px 48px rgba(0,0,0,.16);
}
html[data-theme="light"] .airport-drop .airport-row { color: #1A0F12; border-bottom-color: rgba(20,16,18,.06); }
html[data-theme="light"] .airport-drop .airport-row:hover { background: rgba(199,165,108,.12); }
html[data-theme="light"] .airport-drop .iata { color: #876C28; }
html[data-theme="light"] .airport-drop .name,
html[data-theme="light"] .airport-drop .icao { color: rgba(26,15,18,.55); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .airport-drop .airport-row { grid-template-columns: 44px 1fr 60px; }
  .airport-drop .name { display: none; }
}

/* ====================================================================
   AIR INDIA NEWSROOM page styles — mirrors airindia.com/in/en/newsroom
   ==================================================================== */
.newsroom-bar {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(20,16,18,.08);
  border-radius: 16px;
  margin-bottom: 22px;
}
.newsroom-brand { display: flex; align-items: center; gap: 12px; }
.newsroom-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .26em;
  color: #1A0F12; padding-left: 12px; border-left: 1px solid rgba(20,16,18,.18);
}
.newsroom-nav { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; justify-content: center; }
.newsroom-nav a {
  color: #1A0F12; font-weight: 600; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.newsroom-nav a:hover { border-bottom-color: #DA192F; }
.newsroom-actions { display: flex; gap: 14px; }
.newsroom-actions .link { color: #1A0F12; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.newsroom-actions .link:hover { color: #DA192F; }

.newsroom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: #FFFFFF;
  border: 1px solid rgba(20,16,18,.08);
  border-radius: 16px;
  overflow: hidden;
}
.newsroom-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  text-decoration: none;
  color: #1A0F12;
  border-right: 1px solid rgba(20,16,18,.08);
  border-bottom: 1px solid rgba(20,16,18,.08);
  transition: background .15s ease;
}
.newsroom-card:nth-child(2n) { border-right: 0; }
.newsroom-card:hover { background: #F8F6F2; }
.newsroom-card-art { min-height: 140px; overflow: hidden; }
.newsroom-card-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.newsroom-cat {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: #DA192F; font-weight: 600;
}
.newsroom-title {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  line-height: 1.32; color: #1A0F12; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.newsroom-date {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: rgba(26,15,18,.55); margin-top: auto;
}

/* Dark mode tweaks for the Newsroom (still white cards — Air India style) */
html[data-theme="dark"] .newsroom-bar,
html[data-theme="dark"] .newsroom-grid { /* keep white — airindia.com uses white in both modes */ }

@media (max-width: 980px) {
  .newsroom-grid { grid-template-columns: 1fr; }
  .newsroom-card { border-right: 0; }
  .newsroom-card { grid-template-columns: 120px 1fr; }
  .newsroom-card-art { min-height: 100px; }
}

/* ====================================================================
   Onboarding Maharaja toasts
   ==================================================================== */
.onb-toast {
  position: fixed;
  right: 22px; bottom: 100px;
  z-index: 8500;
  max-width: 380px;
  width: 92vw;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.onb-toast.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.onb-card {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  padding: 16px 18px 14px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 30px rgba(199,165,108,.12);
  position: relative;
}
.onb-figure {
  width: 64px; height: 80px;
  display: flex; align-items: flex-end; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(218,25,47,.18), rgba(199,165,108,.08));
}
.onb-figure img { width: 60px; height: auto; object-fit: contain; }
.onb-body { min-width: 0; }
.onb-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em;
  color: var(--ai-gold-bright); text-transform: uppercase; margin-bottom: 6px;
}
.onb-title {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--text); margin-bottom: 6px;
}
.onb-text {
  font-size: 12.5px; line-height: 1.55; color: var(--text-mute);
  margin-bottom: 12px;
}
.onb-text b { color: var(--ai-gold-bright); }
.onb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.onb-close {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--text-mute); font-size: 13px;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
}
.onb-close:hover { background: rgba(255,255,255,.12); color: var(--text); }

html[data-theme="light"] .onb-card {
  background: #FFFFFF;
  border-color: rgba(199,165,108,.5);
  box-shadow: 0 20px 50px rgba(20,16,18,.18);
}
html[data-theme="light"] .onb-title { color: #1A0F12; }
html[data-theme="light"] .onb-text { color: rgba(26,15,18,.7); }
html[data-theme="light"] .onb-close { background: rgba(20,16,18,.04); color: rgba(26,15,18,.6); }

@media (max-width: 480px) {
  .onb-toast { right: 12px; left: 12px; bottom: 90px; max-width: none; width: auto; }
}

/* Newsroom card needs to look like a button without button defaults */
.newsroom-card { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; width: 100%; }
.newsroom-card { display: grid; grid-template-columns: 200px 1fr; }
.newsroom-card:focus-visible { outline: 2px solid var(--ai-red); outline-offset: -2px; }

/* In-app newsroom reader */
.newsroom-reader {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(8, 6, 8, .72);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .22s ease;
}
.newsroom-reader.in { opacity: 1; }
.newsroom-reader-card {
  background: #FFFFFF;
  color: #1A0F12;
  width: min(880px, 100%);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
  position: relative;
  display: grid;
  grid-template-rows: 240px 1fr;
  transform: translateY(20px);
  transition: transform .25s var(--ease-emph);
}
.newsroom-reader.in .newsroom-reader-card { transform: translateY(0); }
.newsroom-reader-art { overflow: hidden; }
.newsroom-reader-art > div { height: 100%; }
.newsroom-reader-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #FFFFFF;
  border: 0; cursor: pointer; font-size: 16px;
  display: grid; place-items: center;
  z-index: 5;
}
.newsroom-reader-close:hover { background: rgba(0,0,0,.8); }
.newsroom-reader-body {
  padding: 28px 34px 24px;
  overflow-y: auto;
  font-family: var(--font-sans);
  color: #1A0F12;
}
.newsroom-reader-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.2;
  margin: 8px 0 12px;
}
.newsroom-reader-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; color: rgba(26,15,18,.55);
  margin-bottom: 18px;
}
.newsroom-reader-text { font-size: 14.5px; line-height: 1.7; color: #2A1B22; }
.newsroom-reader-text p { margin: 0 0 14px; }
.newsroom-reader-footer {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(20,16,18,.1);
}
.newsroom-reader-source {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; color: rgba(26,15,18,.45);
}
@media (max-width: 720px) {
  .newsroom-reader-card { grid-template-rows: 160px 1fr; }
  .newsroom-reader-body { padding: 18px 20px; }
}

/* ====================================================================
   Ranks ladder + Crew list + Liveries
   ==================================================================== */
.rank-ladder { display: grid; gap: 12px; margin-top: 12px; }
.rank-tier {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 22px; opacity: .55;
  transition: opacity .15s ease, border-color .15s ease;
}
.rank-tier.achieved { opacity: 1; border-color: rgba(199,165,108,.5); box-shadow: 0 0 0 1px rgba(199,165,108,.18) inset; }
.rank-tier-head { display: flex; align-items: center; gap: 18px; }
.rank-roman {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(218,25,47,.14); border: 1px solid var(--border-red);
  color: var(--ai-red-bright);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.rank-tier.achieved .rank-roman { background: linear-gradient(135deg, #E0B65F, #876C28); color: #1A0F12; border-color: var(--ai-gold); }
.rank-label { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.rank-min { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: .12em; }
.rank-badge {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #E0B65F, #876C28);
  color: #1A0F12; display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.rank-desc { color: var(--text-mute); font-size: 13px; line-height: 1.55; margin-top: 12px; padding-left: 66px; }

.crew-table {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; margin-top: 14px;
}
.crew-row {
  display: grid;
  grid-template-columns: 80px 1.8fr 1fr 60px 1.6fr 90px;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(245,240,232,.06);
  align-items: center;
  font-size: 13px;
}
/* 5-col variant after Type-rating column removal */
.crew-table-5col .crew-row { grid-template-columns: 90px 2fr 1fr 80px 110px; }
.crew-row:last-child { border-bottom: 0; }
.crew-row > div:nth-child(2) { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.crew-row > div:nth-child(2) .crew-avatar {
  grid-row: span 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #DA192F, #4A1B41); color: #FFFFFF;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
}
.crew-row > div:nth-child(2) .crew-name { font-weight: 600; color: var(--text); }
.crew-row > div:nth-child(2) .crew-email { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.crew-row.crew-head { color: var(--text-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.02); }
.crew-row.is-admin { background: rgba(255,225,89,.03); }
.crew-row.crew-head > div:nth-child(2) { display: block; }

@media (max-width: 900px) {
  .crew-row { grid-template-columns: 1fr; gap: 4px; padding: 14px; }
  .crew-row.crew-head { display: none; }
}

.livery-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform .15s ease, border-color .15s ease;
}
.livery-card:hover { transform: translateY(-2px); border-color: var(--border-gold); }
.livery-art {
  height: 130px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 12px;
}
.livery-art::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 60%);
}
.livery-art-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  color: #FFFFFF; background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 99px;
  position: relative; z-index: 1;
}
.livery-body { padding: 14px 16px 16px; }
.livery-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--text); }
.livery-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); margin-top: 6px; }

/* Light-mode tweaks */
html[data-theme="light"] .rank-tier { background: #FFFFFF; border-color: rgba(20,16,18,.08); }
html[data-theme="light"] .rank-label { color: #1A0F12; }
html[data-theme="light"] .crew-table { background: #FFFFFF; border-color: rgba(20,16,18,.08); }
html[data-theme="light"] .crew-row { border-bottom-color: rgba(20,16,18,.06); }
html[data-theme="light"] .crew-row > div:nth-child(2) .crew-name { color: #1A0F12; }
html[data-theme="light"] .livery-card { background: #FFFFFF; border-color: rgba(20,16,18,.08); }
html[data-theme="light"] .livery-title { color: #1A0F12; }

/* Hotel filter chips already use .ac-chip */
.hotel-card { transition: transform .12s ease, border-color .12s ease; }
.hotel-card:hover { transform: translateY(-2px); border-color: var(--border-gold); }

/* ====================================================================
   Network Globe — Mapbox/MapLibre map + side panel
   ==================================================================== */
.ng-host {
  position: relative;
  height: 72vh;
  min-height: 520px;
  border-radius: 18px;
  overflow: hidden;
  background: #050307;
  border: 1px solid var(--border);
}
.aiva-popup .maplibregl-popup-content {
  background: rgba(8,5,7,.94);
  color: #F8F1E4;
  border: 1px solid rgba(218,25,47,.4);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-family: var(--font-sans);
}
.aiva-popup .aiva-popup-sub { font-family: var(--font-mono); font-size: 10.5px; color: rgba(248,241,228,.55); }
.aiva-popup .maplibregl-popup-tip { display: none; }

.ng-side {
  position: absolute;
  right: 14px; top: 14px; bottom: 14px;
  width: 340px; max-width: 92%;
  background: rgba(10,7,9,.92);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(218,25,47,.4);
  border-radius: 16px;
  color: #F8F1E4;
  display: flex; flex-direction: column;
  transform: translateX(110%);
  opacity: 0;
  transition: transform .25s var(--ease-emph), opacity .15s ease;
  z-index: 5;
  overflow: hidden;
  min-height: 0;   /* allow inner flex children to shrink + scroll */
}
.ng-side.open { transform: translateX(0); opacity: 1; }

/* Compact city photo header */
.ng-side-photo {
  height: 86px;
  background-size: cover; background-position: center;
  background-color: rgba(168,16,31,.25);
  position: relative;
  flex-shrink: 0;
}
.ng-side-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,7,9,.05) 0%, rgba(10,7,9,.5) 55%, rgba(10,7,9,.94) 100%);
}
/* Fallback when no curated photo exists — clean Air India red gradient */
.ng-side-photo-fallback {
  background:
    radial-gradient(ellipse at top right, rgba(255,225,89,.18), transparent 60%),
    linear-gradient(135deg, #5A0815, #A8101F);
}

.ng-side-head {
  padding: 0 18px 12px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
  position: relative; margin-top: -34px;
  z-index: 1;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.ng-side-code {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -.01em;
  line-height: 1;
}
.ng-side-name {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--text);
  margin-top: 4px; font-weight: 500;
}
.ng-side-city {
  font-family: var(--font-sans);
  font-size: 11px; color: var(--text-mute);
  margin-top: 1px;
}
.ng-side-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 0; color: #F8F1E4; font-size: 13px;
  cursor: pointer;
}
.ng-side-close:hover { background: rgba(255,255,255,.14); }
.ng-side-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.ng-side-stats > div { text-align: center; }
.ng-side-stats .lbl {
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: .22em; color: var(--text-mute);
  text-transform: uppercase;
}
.ng-side-stats .val {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  color: var(--ai-gold-bright);
  margin-top: 3px; line-height: 1;
}
.ng-side-tabs {
  display: flex; gap: 0;
  padding: 8px 14px 0;
  flex-shrink: 0;
}
.ng-side-tab {
  flex: 1;
  padding: 7px 0;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-mute);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  cursor: pointer;
}
.ng-side-tab.on { color: var(--ai-gold-bright); border-bottom-color: var(--ai-gold); }
.ng-side-list {
  flex: 1 1 auto; min-height: 0;          /* critical: lets flex child shrink */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.ng-side-list::-webkit-scrollbar { width: 6px; }
.ng-side-list::-webkit-scrollbar-thumb { background: rgba(255,225,89,.25); border-radius: 3px; }
.ng-side-list::-webkit-scrollbar-track { background: transparent; }
.ng-side-row {
  display: grid; grid-template-columns: 22px 58px 1fr 50px 52px 22px; gap: 8px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px; color: var(--text);
  text-decoration: none;
  background: transparent; border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.ng-side-row:hover { background: rgba(255,225,89,.08); border-color: rgba(255,225,89,.2); }
.ng-side-row.on { background: rgba(255,225,89,.16); border-color: rgba(255,225,89,.55); }
.ng-side-row.on .ng-add { background: var(--ai-gold-bright); color: #1A1414; }
.ng-side-row.on .ng-add::before { content: '✓'; }
.ng-side-row.on .ng-add { font-size: 13px; }
.ng-side-row.on .ng-add > .raw { display: none; }
.ng-arrow { font-weight: 700; font-size: 14px; }
.ng-arrow.ng-out { color: #4ADE80; }
.ng-arrow.ng-in  { color: #60A5FA; }
.ng-row-fno { color: var(--text); }
.ng-rt { color: var(--ai-gold-bright); font-family: var(--font-mono); font-size: 12px; }
.ng-time { color: var(--text-mute); font-size: 11px; }
.ng-add {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: var(--text); font-size: 14px; font-weight: 700; line-height: 1;
  transition: all .15s;
}
.ng-side-row:hover .ng-add { background: rgba(255,225,89,.2); border-color: rgba(255,225,89,.4); color: var(--ai-gold-bright); }

/* Bottom CTA when basket has flights — compact text link, not a chunky pill */
.ng-basket-cta {
  border-top: 1px solid rgba(255,225,89,.2);
  background: rgba(255,225,89,.04);
  padding: 8px 14px;
  flex-shrink: 0;
}
.ng-basket-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ng-basket-count {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; color: var(--ai-gold-bright);
  text-transform: uppercase;
}
.ng-basket-btn {
  color: var(--ai-gold-bright);
  background: transparent;
  padding: 4px 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,225,89,.5);
  transition: color .15s, border-color .15s;
}
.ng-basket-btn:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

@media (max-width: 700px) {
  .ng-side { right: 10px; left: 10px; width: auto; top: 60%; }
  .ng-host { height: 80vh; }
}

/* Newsroom nav tabs - active state */
.newsroom-nav a.on { border-bottom-color: #DA192F; color: #DA192F; }
.newsroom-nav a { cursor: pointer; }

/* Profile picture circle */
.prof-pic {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DA192F, #4A1B41);
  border: 3px solid var(--ai-gold);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.prof-pic-initials {
  font-family: var(--font-display); font-size: 48px; font-weight: 700; color: #FFFFFF;
}

/* ====================================================================
   Light-mode fixes — accessibility patches for the new pages
   ==================================================================== */
/* Type rating chips & hotel filter chips: ensure visible borders & text in light theme */
html[data-theme="light"] .ac-chip {
  background: #FFFFFF;
  border-color: rgba(20,16,18,.22);
  color: #1A0F12;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
html[data-theme="light"] .ac-chip:hover { background: rgba(218,25,47,.06); }
html[data-theme="light"] .ac-chip.on {
  background: #DA192F;
  border-color: #DA192F;
  color: #FFFFFF !important;
  font-weight: 600;
}
html[data-theme="light"] .ac-chip.on span { color: rgba(255,255,255,.85) !important; }

/* Newsroom theming — works in BOTH light and dark mode */
html[data-theme="dark"] .newsroom-bar,
html[data-theme="dark"] .newsroom-grid {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .newsroom-eyebrow { color: #F8F1E4; border-left-color: rgba(248,241,228,.18); }
html[data-theme="dark"] .newsroom-nav a { color: #F8F1E4; }
html[data-theme="dark"] .newsroom-nav a:hover,
html[data-theme="dark"] .newsroom-nav a.on { border-bottom-color: #E0B65F; color: #E0B65F; }
html[data-theme="dark"] .newsroom-actions .link { color: #F8F1E4; }
html[data-theme="dark"] .newsroom-actions .link:hover { color: #E0B65F; }
html[data-theme="dark"] .newsroom-card { border-color: rgba(248,241,228,.06); color: #F8F1E4; }
html[data-theme="dark"] .newsroom-card:hover { background: rgba(255,225,89,.04); }
html[data-theme="dark"] .newsroom-cat { color: #E0B65F; }
html[data-theme="dark"] .newsroom-title { color: #F8F1E4; }
html[data-theme="dark"] .newsroom-date { color: rgba(248,241,228,.5); }

/* The newsroom page CSS file declared white-background — neutralize that for dark mode */
.newsroom-bar { background: var(--surface, #FFFFFF); }
.newsroom-grid { background: var(--surface, #FFFFFF); }

/* Profile picture in light mode */
html[data-theme="light"] .prof-pic { border-color: #876C28; }

/* Roster map host should fit theme too */
html[data-theme="light"] .ng-host { background: #E9EEF1; border-color: rgba(20,16,18,.08); }

/* Selected hotel filter chip — also force contrast (covered by .ac-chip.on above) */

/* Hoppie message log */
.hop-log { display: flex; flex-direction: column; gap: 8px; padding: 4px; max-height: 480px; overflow-y: auto; }
.hop-row { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.hop-row.hop-tx { border-left: 3px solid var(--ai-red); }
.hop-row.hop-rx { border-left: 3px solid var(--ai-gold); }
.hop-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text); }
.hop-body { font-family: var(--font-mono); font-size: 12px; color: var(--text); white-space: pre-wrap; margin: 8px 0 0; }
.hop-err { color: var(--ai-red-bright); font-size: 11px; margin-top: 6px; }

html[data-theme="light"] .hop-row { background: #FFFFFF; }
html[data-theme="light"] .hop-body { color: #1A0F12; }

/* Hoppie admin/pilot mode pill buttons */
.hop-mode-btn {
  background: transparent; border: 0; color: var(--text-mute);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  padding: 5px 14px; border-radius: 99px; cursor: pointer;
  text-transform: uppercase;
}
.hop-mode-btn.on { background: linear-gradient(135deg, #E0B65F, #876C28); color: #1A0F12; font-weight: 700; }
.hop-mode-btn:hover:not(.on) { color: var(--text); }

/* Sidebar logo replaces the old crest+name combo */
.sidebar-head.sidebar-head-logo {
  display: block;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .sidebar-head.sidebar-head-logo {
  /* Logo is colour PNG; nothing to invert. */
}

/* Review queue thumbnails */
.rq-files { display: flex; flex-wrap: wrap; gap: 10px; }
.rq-thumb {
  display: block; width: 180px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-gold);
  background: var(--surface-2);
  text-decoration: none; color: var(--text);
}
.rq-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.rq-thumb-cap { font-family: var(--font-mono); font-size: 10.5px; padding: 6px 8px; color: var(--text-mute); }
.rq-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size: 11.5px; text-decoration: none;
}
.rq-file:hover { border-color: var(--border-gold); }
html[data-theme="light"] .rq-thumb { background: #FFFFFF; }

/* Hotel card photo */
.hotel-img {
  width: 100%; height: 140px;
  background-size: cover; background-position: center;
  background-color: #1a1212;
  border-bottom: 1px solid var(--border);
}