/* ============================================================================
   Fly Alliance — Jet Card Member App
   app.css — the design system. See DESIGN.md for the reasoning behind it.

   The rules, in one place:
     · Orange is something you can act on. Blue is something we worked out.
     · Hairlines, not borders. Bars, not boxes. No card grids.
     · One fixed type scale, one spacing scale. No hand-typed gaps.
     · Section labels are structural, not decorative.
     · Every interactive element is ≥44px and has all its states.
   ========================================================================== */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/Montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/Montserrat-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/Montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/Montserrat-700.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/Montserrat-800.woff2') format('woff2')}

:root{
  color-scheme: only light;

  /* ---- Brand. From the Dec 2022 guidelines; these are the company's. ---- */
  --orange:#FA4616;
  --orange-deep:#D93A10;
  --blue:#418FDE;
  --sky:#5495CC;
  --ink:#101820;

  /* ---- Surfaces ---- */
  --paper:#FFFFFF;
  --wash:#F5F6F8;
  --line:#E3E6EA;
  --line-soft:#EDEFF2;
  --gray:#5B6169;              /* 5.9:1 on white */
  --gray-light:#868D96;        /* meta only, never body */

  --navy:#16202C;
  --navy-2:#1E2A38;
  --line-d:rgba(255,255,255,.13);
  --line-d-2:rgba(255,255,255,.18);   /* the builder's --fa-line-2 */
  --line-d-soft:rgba(255,255,255,.07);
  --dim:rgba(255,255,255,.66);
  --dim-2:rgba(255,255,255,.46);

  --green:#1B8A4B;

  /* ---- Space. 4px base. Nothing hand-typed. ---- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;
  --gutter:var(--s6);

  /* ---- Type. Fixed, not fluid. ---- */
  --t-cap:11px; --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:16.5px;
  --t-lg:18px;  --t-xl:21px; --t-2xl:26px; --t-3xl:31px;
  --t-fig:38px; --t-fig-lg:46px;

  --maxw:520px;
  --nav-h:60px;

  /* Safe areas behind variables. On hardware they come from the notch and the
     home indicator; on a desktop they are zero. Kept as variables so a future
     frame or kiosk shell can supply its own without touching every rule. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);           /* ease-out-quint */
  --fast:160ms; --mid:220ms; --slow:320ms;

  /* ---- Depth. Semantic, never arbitrary. ---- */
  --z-sticky:10; --z-nav:20; --z-scrim:30; --z-sheet:40; --z-toast:50;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat','Gotham',Arial,Helvetica,sans-serif;
  font-size:var(--t-base); line-height:1.55; color:var(--ink);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer; color:inherit}
a{color:inherit}

/* Focus is never removed, only replaced. Keyboard users and App Review both
   check this, and it costs nothing. */
:focus-visible{outline:2px solid var(--orange); outline-offset:2px; border-radius:2px}

/* ---------- Frame ------------------------------------------------------- */
/* #app needs a DEFINITE height, not a min-height. With only a min-height the
   flex children size to their content, the inner .scroll never scrolls, the
   document scrolls instead — and the top bar and bottom nav slide off the
   screen. That is the difference between a web page and an app, and it is a
   single word. */
html,body{overscroll-behavior:none}
body{overflow:hidden}

#stage{
  position:relative;
  width:100%; max-width:var(--maxw); margin:0 auto;
  height:100dvh;
}
@supports not (height:100dvh){ #stage{height:100vh} }

#app{
  position:relative;
  width:100%; height:100%;
  background:var(--paper);
  overflow:hidden;
  display:flex; flex-direction:column;
  isolation:isolate;
}

/* ---------- Desktop ------------------------------------------------------ */
/* A phone app in a laptop window. The app keeps phone proportions and centres;
   the page behind it goes dark so the eye lands on the app rather than on a
   column of white in a white window.

   Deliberately NOT a drawn phone. A device mockup looks like a presentation and
   this is a thing people have to use — and the frame made the app narrow enough
   on a 13" screen that it stopped being a fair view of it.

   The wheel-forwarding in app.js is what makes this usable: without it, most of
   a 1440px window is dead space where scrolling does nothing, which is exactly
   why this was unusable outside Chrome's device mode. */
@media (min-width:600px){
  body{
    background:#070B10;
    background-image:radial-gradient(120% 90% at 50% -10%, rgba(65,143,222,.10) 0%, rgba(65,143,222,0) 60%);
    display:grid; place-items:center; padding:var(--s5);
  }
  #stage{
    /* A PHONE shape, not a narrow web page. --maxw is 520px, which at a laptop
       window height comes out around 2:3 and reads as a squat tablet — the app
       has to stand up vertically or nothing about the layout is being judged
       fairly. 390 x 844 is the iPhone 15 logical size and the width every
       screen in here was designed against. */
    width:390px; max-width:none;
    height:min(844px, calc(100dvh - 40px));
    border-radius:20px; overflow:hidden;
    box-shadow:0 24px 70px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.07);
  }
  #app{border-radius:20px}

  /* Grab cursor, because on a desktop the app is draggable and nothing else
     says so. Set on the app rather than the body so the dark page around it
     still behaves like a page. */
  #app{cursor:grab}
  body.dragging, body.dragging #app{cursor:grabbing}
  body.dragging *{user-select:none}
}

/* ---------- Type -------------------------------------------------------- */
h1,h2,h3,h4{margin:0; line-height:1.12; letter-spacing:-.015em; text-wrap:balance}
h1{font-size:var(--t-3xl); font-weight:700}
h2{font-size:var(--t-2xl); font-weight:800}
h3{font-size:var(--t-xl);  font-weight:800}
h4{font-size:var(--t-lg);  font-weight:800; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}

/* Structural label. Small caps, muted, no rule — this is scaffolding, not
   decoration, so it must not compete with the thing it labels. */
.label{
  font-size:var(--t-cap); font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gray); display:block;
}
.dark .label,.on-dark .label,.label.d{color:var(--dim-2)}

/* The marketing pages' eyebrow: an orange dash, then the section name in caps.
   On the aircraft listing page it heads every section, and it is most of what
   makes that page read as considered — so it does the same job here. */
.eyebrow{
  display:flex; align-items:center; gap:var(--s3);
  font-size:var(--t-cap); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange);
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--orange); flex:0 0 auto}
.dark .eyebrow,.on-dark .eyebrow,.eyebrow.d{color:#F08A6B}
.dark .eyebrow::before,.eyebrow.d::before{background:var(--orange)}

.lead{font-size:var(--t-base); color:var(--gray); max-width:62ch}
.dark .lead,.on-dark .lead{color:var(--dim)}
.fine{font-size:var(--t-xs); line-height:1.5; color:var(--gray); max-width:64ch}
.dark .fine,.on-dark .fine{color:var(--dim)}
.strong{color:var(--ink); font-weight:700}
.dark .strong,.on-dark .strong{color:#fff}

/* ---------- Screen scaffolding ------------------------------------------ */
.screen{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--paper)}
.screen.dark{background:var(--ink); color:#fff}
.screen.dark .label{color:var(--dim-2)}

.scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch; scrollbar-width:none}
.scroll::-webkit-scrollbar{width:0}

.pad{padding-left:var(--gutter); padding-right:var(--gutter)}

/* Vertical rhythm. Sections separate at --s8; rows inside sit at --s4. */
.sec{padding-top:var(--s8)}
.sec:first-child{padding-top:var(--s6)}
.sec > * + *{margin-top:var(--s4)}
.sec > .label + *{margin-top:var(--s3)}
.stack > * + *{margin-top:var(--gap,var(--s5))}
.tail{height:calc(var(--nav-h) + var(--s9) + var(--sab))}
.tail.plain{height:var(--s9)}

/* ---------- Top bar ----------------------------------------------------- */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--s3);
  padding:calc(var(--sat) + var(--s3)) var(--s3) var(--s3);
  background:var(--paper); border-bottom:1px solid var(--line);
  position:relative; z-index:var(--z-sticky);
}
.dark .topbar{background:var(--ink); border-bottom-color:var(--line-d)}
.topbar.flush{border-bottom:0}
.topbar h4{flex:1; padding-inline:var(--s2); font-size:var(--t-md); font-weight:700; letter-spacing:-.005em}
.topbar .spacer{width:44px; flex:0 0 auto}

.iconbtn{
  width:44px; height:44px; flex:0 0 auto; position:relative;
  display:grid; place-items:center; border-radius:50%;
  color:var(--ink); transition:background var(--fast) var(--ease);
}
.dark .iconbtn,.on-dark .iconbtn{color:#fff}
@media (hover:hover){ .iconbtn:hover{background:var(--wash)} .dark .iconbtn:hover{background:rgba(255,255,255,.09)} }
.iconbtn:active{background:var(--wash)}
.dark .iconbtn:active{background:rgba(255,255,255,.12)}
.iconbtn .pip{
  position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 0 2px var(--paper);
}
.dark .iconbtn .pip{box-shadow:0 0 0 2px var(--ink)}

/* ---------- Rows -------------------------------------------------------- */
.rows{border-top:1px solid var(--line)}
.dark .rows,.rows.d{border-top-color:var(--line-d)}
.row{
  display:flex; align-items:center; gap:var(--s4);
  width:100%; text-align:left; min-height:60px;
  padding:var(--s4) 0; border-bottom:1px solid var(--line);
  transition:transform var(--mid) var(--ease), background var(--fast) var(--ease);
}
.dark .row,.rows.d .row{border-bottom-color:var(--line-d)}
.row > .body{flex:1; min-width:0}
.row .t{font-size:var(--t-base); font-weight:700; letter-spacing:-.005em; display:block}
.row .s{font-size:var(--t-sm); color:var(--gray); display:block; margin-top:2px; line-height:1.4}
.dark .row .s,.rows.d .row .s{color:var(--dim)}
.row .chev{color:var(--gray-light); flex:0 0 auto}
.dark .row .chev{color:var(--dim-2)}
button.row:active,a.row:active{transform:translateX(6px)}
@media (hover:hover){ button.row:hover .chev{color:var(--orange)} }

/* Key/value read-only row */
.kv{padding:var(--s4) 0; border-bottom:1px solid var(--line)}
.dark .kv,.rows.d .kv{border-bottom-color:var(--line-d)}
.kv .t{font-size:var(--t-md); font-weight:700; margin-top:var(--s1); display:block}
.kv .s{font-size:var(--t-sm); color:var(--gray); margin-top:2px; display:block}
.dark .kv .s{color:var(--dim)}

/* ---------- Bars: the replacement for boxed stat cards ------------------ */
.bar{display:block; height:4px; background:var(--line); position:relative; overflow:hidden; border-radius:2px}
.dark .bar,.bar.d{background:rgba(255,255,255,.15)}
/* The fill animates with transform, not width — a 900ms width transition on a
   dozen bars at once is layout thrash on an older phone. scaleX from the left
   edge is the same picture and costs one composited frame. */
.bar > i{position:absolute; inset:0; display:block; background:var(--blue); border-radius:2px;
         transform:scaleX(0); transform-origin:left center;
         transition:transform 900ms var(--ease)}
.bar.hot > i{background:var(--orange)}
@media (prefers-reduced-motion:reduce){ .bar > i{transition:none} }

/* ---------- Figures ----------------------------------------------------- */
.fig{font-size:var(--t-fig); font-weight:800; letter-spacing:-.03em; line-height:1}
.fig.lg{font-size:var(--t-fig-lg)}
.fig.sm{font-size:var(--t-xl)}
.fig .cur{font-size:.5em; font-weight:700; vertical-align:.42em; margin-right:1px; letter-spacing:0}

/* ---------- Buttons ----------------------------------------------------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; min-height:52px; padding:var(--s4) var(--s6);
  font-size:var(--t-sm); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease),
             transform var(--fast) var(--ease), opacity var(--fast);
}
@media (hover:hover){ .btn:hover{background:var(--orange); border-color:var(--orange)} }
.btn:active{background:var(--orange); border-color:var(--orange); transform:scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.32; pointer-events:none}
.btn.primary{background:var(--orange); border-color:var(--orange)}
.btn.primary:active{background:var(--orange-deep); border-color:var(--orange-deep)}
@media (hover:hover){ .btn.primary:hover{background:var(--orange-deep); border-color:var(--orange-deep)} }
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
@media (hover:hover){ .btn.ghost:hover{border-color:var(--ink); background:var(--wash)} }
.btn.ghost:active{border-color:var(--ink); background:var(--wash); color:var(--ink)}
.btn.light{background:#fff; color:var(--ink); border-color:#fff}
.btn.light:active{background:var(--orange); border-color:var(--orange); color:#fff}
.btn.ghost.on-d{background:transparent; color:#fff; border-color:var(--line-d)}
.btn.ghost.on-d:active{background:rgba(255,255,255,.08); color:#fff}
.btn.sm{min-height:44px; padding:var(--s3) var(--s4); font-size:var(--t-xs)}
.btn.danger{background:#B42318; color:#fff; border-color:#B42318}
.btn.danger:active{background:#912018; border-color:#912018}
.am-btns{display:flex; gap:var(--s2); justify-content:flex-end}
.btn.am-del{color:#B42318; border-color:#FDA29B}
.btn.am-del:active{background:#FEF3F2}
.btn.danger-ghost{background:transparent; color:#B42318; border-color:#FDA29B; margin-top:var(--s3)}
.btn.danger-ghost:active{background:#FEF3F2}
.btn-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}

.actionbar{
  flex:0 0 auto; padding:var(--s3) var(--gutter) calc(var(--s3) + var(--sab));
  border-top:1px solid var(--line); background:var(--paper);
}
.dark .actionbar{background:var(--ink); border-top-color:var(--line-d)}

/* Hairline arrow link — the one CTA shape carried over from the web pages. */
.qlink{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px;
  font-size:var(--t-sm); font-weight:700;
  color:var(--ink); border-bottom:1px solid var(--line);
  transition:gap var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.qlink .arw{color:var(--orange); display:flex}
.qlink:active,.qlink:hover{gap:var(--s4); border-bottom-color:var(--orange)}
.qlink.on-d{color:#fff; border-bottom-color:var(--line-d)}
.qlink.sm{min-height:32px; font-size:var(--t-xs)}

/* ---------- Fields: underline only, never a filled box ------------------ */
.field{position:relative; padding-top:var(--s5)}
.field > label{position:absolute; top:0; left:0; font-size:var(--t-cap); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
.dark .field > label{color:var(--dim-2)}
.field input,.field select,.field textarea{
  width:100%; padding:var(--s2) 0 var(--s3); min-height:44px;
  background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
  font-size:var(--t-md); font-weight:600; letter-spacing:-.005em; appearance:none;
  transition:border-color var(--fast) var(--ease);
}
.field textarea{resize:none; font-weight:500; font-size:var(--t-base); line-height:1.5; min-height:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-bottom-color:var(--orange)}
.field input::placeholder,.field textarea::placeholder{color:#9AA1A9; font-weight:500} /* 4.6:1 */
.dark .field input,.dark .field select,.dark .field textarea{color:#fff; border-bottom-color:var(--line-d)}
.dark .field input::placeholder{color:rgba(255,255,255,.45)}
/* Native date and time pickers on a dark field.
   :root sets `color-scheme: only light` — deliberately, it stops Chrome for
   Android auto-darkening the white surfaces — but that also forces the browser
   to draw the calendar and clock indicators in BLACK, which is invisible on the
   dark request flow. Overriding color-scheme on just these inputs flips the
   indicator (and the picker popup itself) to the dark set. The filter is the
   fallback for engines that ignore the override. */
.dark .field input[type="date"],
.dark .field input[type="time"],
.dark .field input[type="datetime-local"]{ color-scheme:dark }
.dark .field input::-webkit-calendar-picker-indicator{
  opacity:.75; cursor:pointer; padding:6px; margin-right:-6px;
}
.dark .field input::-webkit-calendar-picker-indicator:hover{ opacity:1 }
/* Safari renders the fields' own spin/step controls too. */
.dark .field input::-webkit-date-and-time-value{ text-align:left }

.field .hint{font-size:var(--t-xs); color:var(--gray); margin-top:var(--s2)}
.dark .field .hint{color:var(--dim)}
.field .err{font-size:var(--t-xs); color:var(--orange); font-weight:600; margin-top:var(--s2);
  display:flex; gap:var(--s2); align-items:center}
.field .err::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--orange); flex:0 0 auto}
.field.bad input{border-bottom-color:var(--orange)}
.field .reveal{position:absolute; right:0; bottom:0; width:44px; height:44px;
  display:grid; place-items:center; color:var(--gray)}
.dark .field .reveal{color:var(--dim)}

/* Segmented control */
.seg{display:flex; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.seg button{flex:1; min-height:46px; padding:var(--s3) var(--s2);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray); transition:background var(--fast) var(--ease), color var(--fast) var(--ease)}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff}
.dark .seg{border-color:var(--line-d)}
.dark .seg button{color:var(--dim)}
.dark .seg button + button{border-left-color:var(--line-d)}
.dark .seg button[aria-pressed="true"]{background:#fff; color:var(--ink)}

/* Stepper */
.stepper{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  border-bottom:1px solid var(--line); padding-bottom:var(--s3)}
.stepper .n{font-size:var(--t-fig); font-weight:800; letter-spacing:-.03em; line-height:1}
.stepper .ctrl{display:flex; gap:var(--s2)}
.stepper .ctrl button{width:48px; height:48px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast)}
.stepper .ctrl button:active{background:var(--ink); border-color:var(--ink); color:#fff}
@media (hover:hover){ .stepper .ctrl button:hover{border-color:var(--ink)} }
.stepper .ctrl button[disabled]{opacity:.28; pointer-events:none}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip{min-height:44px; padding:var(--s2) var(--s4); border:1px solid var(--line);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.02em; color:var(--ink);
  display:inline-flex; align-items:center;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast)}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
@media (hover:hover){ .chip:hover{border-color:var(--ink)} }
.chip:active{border-color:var(--ink)}
.dark .chip{border-color:var(--line-d); color:#fff}
.dark .chip[aria-pressed="true"]{background:#fff; color:var(--ink); border-color:#fff}

/* ---------- Route type -------------------------------------------------- */
.route{display:flex; align-items:center; gap:var(--s3); min-width:0}
.route .code{font-size:var(--t-2xl); font-weight:800; letter-spacing:-.025em; line-height:1}
.route .arw{color:var(--orange); flex:0 0 auto; display:flex}
.route.sm .code{font-size:var(--t-lg)}
.route.lg .code{font-size:var(--t-fig)}

/* ---------- Status ------------------------------------------------------ */
.status{display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-cap);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
.status::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto}
.status.confirmed{color:var(--green)}
.status.requested{color:var(--orange)}
.status.completed{color:var(--gray-light)}
.dark .status.completed{color:var(--dim-2)}

/* ---------- Aircraft plate ---------------------------------------------- */
/* The cutout sits on a soft radial ground, never inside a rounded rectangle.
   The plate is what stops a transparent PNG from looking like it is floating
   on nothing. */
.plate{position:relative; display:flex; align-items:center; justify-content:center;
  isolation:isolate; overflow:hidden}
.plate::before{content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(64% 74% at 46% 62%, rgba(65,143,222,.16) 0%, rgba(65,143,222,0) 72%)}
.plate.d::before{background:radial-gradient(64% 74% at 46% 62%, rgba(84,149,204,.28) 0%, rgba(84,149,204,0) 72%)}
.plate img{width:100%; height:auto; object-fit:contain}
/* Hero use: inset the aircraft so a wingtip never touches the gutter. */
.plate.hero{padding:var(--s3) 7% var(--s4)}
/* Ground shadow — a soft ellipse, not a drop shadow on the cutout itself */
.plate::after{content:''; position:absolute; left:14%; right:14%; bottom:12%; height:9px; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(16,24,32,.20) 0%, rgba(16,24,32,0) 74%)}
.plate.d::after{background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 74%)}

.acthumb{width:88px; flex:0 0 auto; padding:var(--s1) 0}

/* ---------- Category listing -------------------------------------------- */
/* The category screen is laid out like an aircraft listing on the website:
   dark hero, breadcrumb, the headline figure where a listing puts its price,
   then Highlights / Metrics / Interior / Connectivity down the page. */
.listing-hero{
  background:var(--ink); color:#fff; position:relative; overflow:hidden;
  padding-top:var(--s5); padding-bottom:var(--s3);
  background-image:radial-gradient(110% 80% at 84% 4%, rgba(65,143,222,.20) 0%, rgba(65,143,222,0) 62%);
}
.crumb{
  display:block; font-size:var(--t-cap); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim-2);
}
.crumb span{color:var(--orange); padding:0 4px}
.crumb b{color:var(--orange); font-weight:700}
.listing-t{
  margin-top:var(--s4); font-size:var(--t-2xl); font-weight:800;
  letter-spacing:-.02em; line-height:1.08; max-width:14ch;
}
/* Centred hero: the max-widths that keep the lines short must recentre too,
   or the type is centred inside a block still hugging the left gutter. */
.listing-hero .center .listing-t,
.listing-hero .center .listing-sub{margin-inline:auto}
.listing-hero .center .listing-price{justify-content:center}
.listing-price{display:flex; align-items:baseline; gap:var(--s2); margin-top:var(--s5)}
.listing-price .fig{
  font-size:var(--t-fig); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1;
}
.listing-price .cur{font-size:.58em; font-weight:700; margin-right:1px; vertical-align:.28em; color:var(--dim)}
.listing-price .per{font-size:var(--t-sm); color:var(--dim)}
/* Inset like .plate.hero, so a wingtip never runs off the edge of the frame. */
.listing-img{width:100%; margin-top:var(--s2); padding:0 6% var(--s2)}

/* Four figures under Highlights. A grid, not cards — hairlines only. */
.specgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:var(--s5); border-top:1px solid var(--line);
}
.spec{padding:var(--s4) 0; border-bottom:1px solid var(--line)}
.spec:nth-child(odd){padding-right:var(--s4)}
.spec:nth-child(even){padding-left:var(--s4); border-left:1px solid var(--line)}
.spec .v{
  display:block; margin-top:var(--s2); font-size:var(--t-xl); font-weight:800;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.spec.hot .v{color:var(--orange)}
.spec .s{display:block; margin-top:2px; font-size:var(--t-xs); color:var(--gray)}

.listing-sub{margin-top:var(--s3); font-size:var(--t-base); color:var(--dim); max-width:30ch; line-height:1.5}
.tag{
  display:inline-block; margin-top:var(--s4); padding:5px 11px; border-radius:4px;
  background:var(--orange); color:#fff; white-space:nowrap;
  font-size:var(--t-cap); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
/* The bar continues the hero instead of cutting a white strip across it. */
.topbar.on-ink{background:var(--ink); color:#fff; border-bottom:0}
.topbar.on-ink h4{color:#fff}
.topbar.on-ink .iconbtn{color:#fff}
.topbar.on-ink .iconbtn:active{background:rgba(255,255,255,.12)}

/* Four-up strip under the hero, straight off the listing page: figure, unit,
   caps label, hairline between. Four columns at phone width is tight but it is
   the shape that reads as a spec sheet — two rows of two reads as a form. */
.metricstrip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-d); margin-top:var(--s4);
}
/* Centred, to sit on the same axis as the centred hero above it. */
.metric{padding:var(--s4) 6px var(--s5); border-left:1px solid var(--line-d); min-width:0; text-align:center}
.metric:first-child{border-left:0}
.metric .v{
  display:block; font-size:var(--t-md); font-weight:800; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums; line-height:1.05; white-space:nowrap;
}
.metric .v .u{font-size:.62em; font-weight:600; color:var(--dim-2); margin-left:2px; letter-spacing:0}
.metric .label{
  display:block; margin-top:var(--s2); font-size:9px; letter-spacing:.10em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Two actions side by side under the hero. Stacks under 340px. */
.btnrow{display:flex; gap:var(--s3)}
.btnrow > .btn{flex:1; white-space:nowrap; padding-inline:var(--s3)}
@media (max-width:339px){ .btnrow{flex-direction:column} }

/* A row that is information, not a destination — no tap affordance. */
.row.static{cursor:default}

/* The member's monogram. An outlined square read as an empty placeholder; a
   filled one with the brand wash reads as a monogram. */
.mono{
  width:56px; height:56px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:10px; background:var(--ink); color:#fff;
  background-image:radial-gradient(100% 100% at 20% 0%, rgba(65,143,222,.42) 0%, rgba(65,143,222,0) 70%);
  font-weight:800; font-size:var(--t-lg); letter-spacing:.02em;
}
.row .s.tails{margin-top:var(--s2); color:var(--gray-light); font-variant-numeric:tabular-nums}
.acthumb.sm{width:56px}

/* ---------- Statement headline ------------------------------------------ */
/* The sentence under an eyebrow. Lifted from the listing page, where the
   eyebrow-plus-statement pair is most of why the page reads as considered
   rather than assembled. (.eyebrow itself is defined once, up in Type.) */
.statement{
  margin-top:var(--s4); font-size:var(--t-2xl); font-weight:800;
  letter-spacing:-.025em; line-height:1.1; max-width:17ch;
}
.sec > .eyebrow + .statement{margin-top:var(--s4)}

/* A full-bleed dark section, the way the listing page alternates light and
   dark down the page. */
.panel{margin-top:var(--s8); padding:var(--s8) 0}
.panel > .pad > * + *{margin-top:var(--s4)}
.panel.dark{background:var(--ink); color:#fff;
  background-image:radial-gradient(110% 90% at 88% 0%, rgba(65,143,222,.15) 0%, rgba(65,143,222,0) 60%)}

/* ---------- Range panel -------------------------------------------------- */
/* City pairs against the category's limit. Exactly the listing page's
   treatment: a blue-to-orange gradient for what it reaches, flat grey for what
   it does not, and a dashed orange marker at the limit. The gradient is the
   whole point — it is the two brand colours doing work rather than decorating. */
.rng{
  margin-top:var(--s5); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--paper);
}
.rng-head{
  padding:var(--s4) var(--s4) var(--s4); background:var(--wash);
  border-bottom:1px solid var(--line);
}
.rng-fig{
  display:block; font-size:var(--t-2xl); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1;
}
.rng-fig .u{font-size:.42em; font-weight:600; color:var(--gray); margin-left:6px; letter-spacing:0}
.rng-head .fine{display:block; margin-top:var(--s2)}
.rng-body{padding:var(--s2) var(--s4) var(--s7)}
/* The limit marker is positioned against THIS box, so its percentage and the
   bar percentages resolve against the same width. Anything else and the dashes
   land next to the limit rather than on it. */
.pairs{position:relative}

.pair{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0}
.pair + .pair{border-top:1px solid var(--line)}
.chk{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,138,90,.12); color:#1F8A5A;
}
.pair.no .chk{background:var(--wash); color:var(--gray-light)}
.pair-t{
  flex:0 0 31%; min-width:0; font-size:var(--t-sm); font-weight:700;
  letter-spacing:-.01em; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pair.no .pair-t{color:var(--gray-light); font-weight:600}
.track{flex:1; min-width:0; height:9px; border-radius:100px; background:#F5F7FA; overflow:hidden}
.fill{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg, var(--blue), var(--orange));
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.pair.no .fill{background:#D7DEE8}
.pair-nm{
  flex:0 0 auto; text-align:right; font-size:var(--t-sm); font-weight:800;
  font-variant-numeric:tabular-nums; min-width:62px;
}
.pair-nm .u{font-size:9.5px; font-weight:700; color:var(--gray); margin-left:3px; letter-spacing:.06em}
.pair.no .pair-nm{color:var(--gray-light)}

/* The dashed limit marker. It rides a ghost row with the same flex proportions
   as a real one, so its percentage and the bars' percentages resolve against
   exactly the same track width. */
.limit-lane{
  position:absolute; inset:0 0 -18px; display:flex; align-items:stretch;
  gap:var(--s3); pointer-events:none;
}
.limit-lane > .chk{background:none}
.limit-lane > .track{background:none; height:auto; overflow:visible; position:relative}
.limit{
  position:absolute; top:0; bottom:0; width:0; opacity:0;
  border-left:1px dashed var(--orange);
  transition:opacity 420ms var(--ease) 120ms;
}
.limit b{
  position:absolute; bottom:0; left:0; transform:translateX(-50%);
  white-space:nowrap; font-size:var(--t-cap); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--orange);
}
/* Near the right edge the centred label would run off the panel. */
.limit b.r{transform:translateX(-100%); padding-right:6px}

/* ---------- Cabin seats -------------------------------------------------- */
.seatbox{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s6); padding:var(--s4) var(--s4);
  border:1px solid var(--line-d); border-radius:10px; background:rgba(255,255,255,.04);
}
.seatfig{font-size:var(--t-fig); font-weight:800; letter-spacing:-.03em; line-height:1}
.seattxt{font-size:var(--t-sm); color:var(--dim); flex:1; min-width:8ch}
.seats{display:flex; gap:5px; flex-wrap:wrap}
.seats i{
  width:11px; height:13px; border-radius:2px 2px 3px 3px;
  background:rgba(255,255,255,.30); display:block;
}

/* ---------- Scroll reveal ------------------------------------------------ */
/* The listing page's reveal, same curve and duration. Once shown, always shown
   — a section that fades back out on the way up reads as a bug. */
.rv{opacity:0; transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none}
  .fill{transition:none}
}

/* ---------- Aircraft option --------------------------------------------- */
.opt{
  display:block; width:100%; text-align:left; position:relative;
  padding:var(--s4) 0 var(--s5); border-bottom:1px solid var(--line);
  transition:background var(--fast) var(--ease);
}
.opt:active{background:var(--wash)}
.opt .top{display:flex; align-items:flex-start; gap:var(--s4)}
.opt .nm{font-size:var(--t-lg); font-weight:800; letter-spacing:-.015em; display:block}
.opt .pr{font-size:var(--t-lg); font-weight:800; letter-spacing:-.02em; white-space:nowrap}
.opt .meta{font-size:var(--t-sm); color:var(--gray); line-height:1.45; display:block; margin-top:var(--s1)}
.opt .fleet{font-size:var(--t-xs); color:var(--ink); font-weight:600; display:block; margin-top:var(--s2)}
.opt .tag{font-size:var(--t-cap); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s3); color:var(--gray-light);
  background:none; padding:0; border-radius:0}
.opt .tag.on{color:var(--orange)}
.opt .sel{position:absolute; left:0; top:var(--s4); bottom:var(--s5); width:3px; background:var(--orange);
  transform:scaleY(0); transform-origin:top; transition:transform var(--mid) var(--ease)}
.opt[aria-pressed="true"]{padding-left:var(--s4)}
.opt[aria-pressed="true"] .sel{transform:scaleY(1)}
.opt.off{opacity:.4}

/* ---------- Search results ---------------------------------------------- */
.result{display:flex; align-items:center; gap:var(--s4); width:100%; text-align:left;
  min-height:60px; padding:var(--s3) 0; border-bottom:1px solid var(--line);
  transition:transform var(--mid) var(--ease)}
.result .code{font-size:var(--t-base); font-weight:800; letter-spacing:-.01em; width:52px; flex:0 0 auto}
.result .body{flex:1; min-width:0}
.result .nm{font-weight:600; font-size:var(--t-sm); line-height:1.3; display:block}
.result .ct{font-size:var(--t-xs); color:var(--gray); display:block; margin-top:1px}
.result:active{transform:translateX(6px)}

/* ---------- Progress rail ----------------------------------------------- */
.rail{display:flex; gap:var(--s1); padding:0 var(--gutter)}
.rail i{flex:1; height:2px; background:var(--line); display:block; border-radius:1px;
        transition:background var(--mid) var(--ease)}
.rail i.on{background:var(--orange)}

/* ---------- Bottom navigation ------------------------------------------- */
/* Five slots; the centre one is the primary action. The only filled orange
   element in the app, which is exactly why it is findable. */
.nav{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(5,1fr);
  align-items:end;
  border-top:1px solid var(--line); background:var(--paper);
  padding-bottom:var(--sab);
  position:relative; z-index:var(--z-nav);
}
.nav button{
  display:flex; flex-direction:column; align-items:center; gap:var(--s1);
  min-height:var(--nav-h); padding:var(--s2) var(--s1) var(--s3);
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray-light); position:relative;
  transition:color var(--fast) var(--ease);
}
.nav button[aria-current="page"]{color:var(--ink)}
.nav button[aria-current="page"]::before{
  content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:24px; height:2px; background:var(--orange);
}
.nav .fab{padding-top:0}
.nav .fab .disc{
  width:52px; height:52px; border-radius:50%; margin-top:-16px;
  background:var(--orange); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(250,70,22,.36);
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav .fab:active .disc{transform:scale(.93); background:var(--orange-deep)}
.nav .fab span:last-child{color:var(--orange)}
.nav .fab::before{display:none}

/* ---------- Sheets, scrim, toast ---------------------------------------- */
#overlay-root{position:absolute; inset:0; pointer-events:none; z-index:var(--z-sheet)}
.scrim{position:absolute; inset:0; background:rgba(8,14,20,.6); backdrop-filter:blur(2px);
  pointer-events:auto; animation:fade var(--mid) var(--ease) both; z-index:var(--z-scrim)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:90%;
  background:var(--paper); pointer-events:auto; z-index:var(--z-sheet);
  display:flex; flex-direction:column;
  border-radius:18px 18px 0 0; overflow:hidden;
  animation:rise var(--slow) var(--ease) both;
  padding-bottom:var(--sab);
}
@keyframes rise{from{transform:translateY(101%)}to{transform:none}}
.sheet-head{flex:0 0 auto; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s5) var(--s3) var(--s3) var(--gutter); border-bottom:1px solid var(--line)}
.sheet-head h3{flex:1; font-size:var(--t-xl)}
.sheet-body{flex:1; min-height:0; overflow-y:auto; padding:var(--s5) var(--gutter) var(--s6);
  scrollbar-width:none}
.sheet-body::-webkit-scrollbar{width:0}
.sheet-body > * + *{margin-top:var(--s5)}

#toast-root{position:absolute; left:0; right:0; bottom:0; z-index:var(--z-toast); pointer-events:none;
  padding:0 var(--gutter) calc(var(--nav-h) + var(--s4) + var(--sab))}
.toast{background:var(--ink); color:#fff; padding:var(--s4);
  display:flex; gap:var(--s3); align-items:center; font-size:var(--t-sm); font-weight:600;
  border-radius:4px; animation:rise var(--mid) var(--ease) both;
  box-shadow:0 8px 26px rgba(0,0,0,.28)}
.toast .tick{color:var(--orange); flex:0 0 auto; display:flex}

/* ---------- Quick actions ------------------------------------------------ */
/* Three equal actions on one hairline rule. Not cards — a rule with three
   columns, which is lighter and reads as one object. */
.qa{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-d)}
.qa button{display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  padding:var(--s5) var(--s2); color:#fff; min-height:44px;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.02em;
  transition:background var(--fast) var(--ease)}
.qa button + button{border-left:1px solid var(--line-d)}
.qa button:active{background:rgba(255,255,255,.06)}
.qa .ic{color:var(--sky); display:flex}

/* ---------- Map ---------------------------------------------------------
   Built to FlyAllianceAnimatedMapSpec.md. The route is the only saturated
   element; pins, labels and the aircraft stay neutral so the orange reads
   instantly. Stroke widths and dashes are pre-scaled into user units in the
   markup — vector-effect:non-scaling-stroke would make the browser measure
   dashes in screen units while getTotalLength() reports user units, and the
   aircraft would drift off the head of its own line.
   ------------------------------------------------------------------------ */
.map{width:100%; display:block; background:#0B1622}
.map .earth{image-rendering:auto}

.map .arc-glow{fill:none; stroke:rgba(250,70,22,.42); stroke-linecap:round;
  filter:blur(3px)}
.map .arc{fill:none; stroke:var(--orange); stroke-linecap:round; stroke-linejoin:round}

.map .halo{fill:rgba(250,70,22,.22)}
.map .pin{fill:#fff; stroke:var(--orange)}
.map .pinlbl{fill:#F4F6F8; stroke:#050D19; paint-order:stroke;
  font-family:inherit; font-weight:800; letter-spacing:.08em;
  text-anchor:middle; stroke-linejoin:round}

/* The distance caption lands after the line finishes drawing. */
.map .dist{opacity:0; transition:opacity 420ms var(--ease) 60ms}
.map .dist rect{fill:rgba(9,17,26,.86); stroke:rgba(255,255,255,.10); stroke-width:1;
  vector-effect:non-scaling-stroke}
.map .dist text{fill:#F4F6F8; font-family:inherit; font-weight:800; letter-spacing:.06em;
  text-anchor:middle; dominant-baseline:middle}

.map .plane{fill:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.85))}

@media (prefers-reduced-motion:reduce){
  .map .dist{transition:none; opacity:1}
}

/* ---------- Route legs --------------------------------------------------
   The Itinerary Builder's departure/arrival panel, rebuilt at phone width:
   one rounded panel, a rail joining the two legs that fades white to orange,
   a ring for the origin and a pin for the destination, and a swap control
   that spins on press.
   ------------------------------------------------------------------------ */
.legs{
  position:relative; border:1px solid var(--line-d-2); border-radius:14px;
  background:rgba(255,255,255,.04); overflow:hidden;
  transition:border-color var(--fast) var(--ease);
}
.legs::before{
  content:''; position:absolute; left:29px; top:62px; bottom:62px; width:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,.30), rgba(250,70,22,.75));
  pointer-events:none;
}
.leg{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:17px 18px; position:relative; min-height:78px;
  transition:background var(--fast) var(--ease);
}
.leg:active{background:rgba(250,70,22,.10)}
@media (hover:hover){ .leg:hover{background:rgba(255,255,255,.05)} }
.leg .ic{flex:none; width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%; z-index:1}
.leg .ring{width:11px; height:11px; border-radius:50%;
  border:2.5px solid var(--dim); background:var(--ink);
  box-shadow:0 0 0 4px var(--navy)}
.leg.set .ring{border-color:#fff}
.leg .pin{color:var(--dim-2); background:var(--navy); border-radius:50%;
  display:grid; place-items:center; width:20px; height:20px}
.leg.set .pin{color:var(--orange)}
.leg .txt{flex:1; min-width:0}
.leg .k{display:block; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(244,246,248,.42); font-weight:700; margin-bottom:7px; line-height:1}
.leg .t{display:block; font-size:16px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25}
.leg:not(.set) .t{color:var(--dim); font-weight:500}
.leg .s{display:block; font-size:12px; color:var(--dim); margin-top:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.leg .code{flex:none; font-size:15px; font-weight:800; letter-spacing:-.01em; color:#fff}

.swap{
  position:absolute; right:12px; top:50%; margin-top:-22px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy); border:1px solid var(--line-d-2);
  display:grid; place-items:center; color:var(--dim);
  transition:color var(--fast), transform var(--slow) var(--ease), border-color var(--fast);
}
.swap:active{color:#fff; border-color:rgba(255,255,255,.35); transform:rotate(180deg)}
@media (hover:hover){ .swap:hover{color:#fff; border-color:rgba(255,255,255,.35); transform:rotate(180deg)} }

/* Numbered step header — the builder's pattern, and the one place in this app
   where a numeral is information rather than decoration. */
.stephead{display:flex; align-items:flex-start; gap:13px}
.stephead .n{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:11.5px; font-weight:800; color:var(--dim);
  border:1px solid var(--line-d-2); background:rgba(255,255,255,.04);
}
.stephead .n.done{background:var(--orange); border-color:var(--orange); color:#fff}
.stephead .txt{min-width:0; padding-top:1px}
.stephead b{display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; color:#fff}
.stephead span{display:block; font-size:13px; color:var(--dim); margin-top:4px}

/* ---------- Activity bars ----------------------------------------------- */
.spark{display:flex; align-items:flex-end; gap:3px; height:56px}
.spark i{flex:1; background:var(--line); border-radius:1px; display:block; height:100%;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 700ms var(--ease)}
.spark i.on{background:var(--blue)}
.spark i.hot{background:var(--orange)}
@media (prefers-reduced-motion:reduce){ .spark i{transition:none} }

/* ---------- Dark variants for the request flow --------------------------
   The request flow is dark end to end, matching the Itinerary Builder. These
   are the same components, on the other surface. */
.dark .opt{border-bottom-color:var(--line-d)}
.dark .opt .nm,.dark .opt .pr{color:#fff}
.dark .opt .meta{color:var(--dim)}
.dark .opt .fleet{color:#fff}
.dark .opt .tag{color:var(--dim-2)}
.dark .opt .tag.on{color:var(--orange)}
.dark .opt:active{background:rgba(255,255,255,.05)}
.dark .stepper{border-bottom-color:var(--line-d)}
.dark .stepper .n{color:#fff}
.dark .stepper .ctrl button{border-color:var(--line-d-2); color:#fff}
.dark .stepper .ctrl button:active{background:#fff; border-color:#fff; color:var(--ink)}
.dark .kv .t{color:#fff}
.dark .result{border-bottom-color:var(--line-d)}
.dark .result .code,.dark .result .nm{color:#fff}
.dark .result .ct{color:var(--dim)}
.dark .rail i{background:rgba(255,255,255,.16)}
.dark .rail i.on{background:var(--orange)}
.dark .hr{background:var(--line-d)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}

/* ---------- Home ---------------------------------------------------------
   Two blocks, in the order a member checks them: what's left, and when am I
   next flying. The balance sits on the one dark plane; the trip gets the map
   and the room, because on the day it matters it is the whole screen.
   ------------------------------------------------------------------------ */
.hero{
  background:var(--ink); color:#fff; position:relative;
  /* A single wash of the brand blue across the top left, barely there. It
     stops the slab reading as a flat black rectangle without adding an
     element to look at. */
  background-image:radial-gradient(120% 90% at 8% -10%, rgba(65,143,222,.16) 0%, rgba(65,143,222,0) 58%);
}
/* The photographic front door. One of our own aeroplanes, our mark on it, and
   the member's name — the first thing they see every time they open the app.
   The scrim is what makes white type legible over a photograph we do not
   control: without it a bright sky at the wrong crop erases the welcome. */
.hero-photo{position:relative; isolation:isolate; overflow:hidden}
.hero-photo > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 54%; z-index:-2;
}
/* Light enough at the top that the aeroplane still reads behind the mark,
   heavy enough at the bottom that white type over it never has to be guessed
   at. Two gradients, because the name sits bottom-left and needs the corner. */
.hero-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,17,26,.46) 0%, rgba(9,17,26,.06) 30%,
                            rgba(16,24,32,.62) 74%, rgba(16,24,32,.94) 94%, var(--ink) 100%),
    linear-gradient(90deg, rgba(9,17,26,.42) 0%, rgba(9,17,26,0) 58%);
}
/* The bar rides ON the photograph — .topbar paints itself otherwise, which cuts
   a solid slab across the top of the image. */
.dark .topbar.hero-bar{position:relative; background:transparent}
.hero-logo{height:22px; width:auto; display:block}
/* Enough room under the logo that the aeroplane reads as a photograph rather
   than a texture behind the type. */
.hero-welcome{position:relative; padding-top:120px; padding-bottom:var(--s5)}
@media (max-height:700px){ .hero-welcome{padding-top:84px} }

.hero-name{
  display:block; margin-top:3px;
  font-size:var(--t-xl); font-weight:800; letter-spacing:-.02em; line-height:1.1;
  text-shadow:0 1px 18px rgba(9,17,26,.55);
}
.hero-acct{
  display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:600;
  letter-spacing:.01em; backdrop-filter:blur(4px);
}
.hero-bal{
  display:block; width:100%; text-align:left;
  transition:opacity var(--fast) var(--ease);
}
.hero-bal:active{opacity:.72}

/* The trip block. Hairline, not a card with a shadow — but it does get a
   radius, because the map inside it needs one. */
.trip{
  display:block; width:100%; text-align:left;
  margin-top:var(--s3);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--paper);
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.trip:active{transform:scale(.994); border-color:var(--gray-light)}
@media (hover:hover){ .trip:hover{border-color:var(--gray-light)} }
.trip-map{position:relative; display:block; overflow:hidden; background:var(--navy)}
.trip-map .map{display:block}
.trip-body{display:block; padding:var(--s5) var(--s5) var(--s5)}
.trip-v{
  display:block; margin-top:var(--s1); margin-bottom:1px;
  font-size:var(--t-md); font-weight:800; letter-spacing:-.01em;
}

/* The countdown, over the map's bottom-left corner. */
.trip-when{
  position:absolute; left:var(--s3); bottom:var(--s3); z-index:2;
  padding:6px 11px; border-radius:5px;
  background:rgba(9,17,26,.86); border:1px solid rgba(255,255,255,.10);
  color:#F4F6F8; font-size:var(--t-cap); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
.trip-when.now{background:var(--orange); border-color:var(--orange); color:#fff}

/* Empty state — the map still shows, with the reason it is empty over it. */
.trip-map .trip-empty{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s1); text-align:center; padding:var(--s5);
  background:linear-gradient(180deg,rgba(9,17,26,.30) 0%,rgba(9,17,26,.62) 100%);
}
.trip-empty-t{font-size:var(--t-md); font-weight:800; color:#fff; letter-spacing:-.01em}
.trip-empty-s{font-size:var(--t-xs); color:rgba(255,255,255,.72)}
.trip-map{border-radius:12px}

/* ---------- Utility ------------------------------------------------------ */
.hr{height:1px; background:var(--line); border:0; margin:0}
.dark .hr,.hr.d{background:var(--line-d)}
.between{display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.between.top{align-items:flex-start}
.grow{flex:1; min-width:0}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.spin{width:18px; height:18px; border:2px solid rgba(255,255,255,.28); border-top-color:#fff;
  border-radius:50%; animation:sp .7s linear infinite}
.btn.ghost .spin,.btn.light .spin{border-color:rgba(16,24,32,.24); border-top-color:var(--ink)}
@keyframes sp{to{transform:rotate(360deg)}}

/* Screens arrive; they do not perform. One short fade-up, nothing staggered. */
.screen{animation:arrive var(--mid) var(--ease) both}
@keyframes arrive{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen,.sheet,.toast{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- Login ------------------------------------------------------- */
/* The first screen anyone sees, including a reviewer who has never opened the
   app before. It carries more colour than the rest of the app on purpose: two
   brand washes on the near-black, orange low and sky blue high, so the ground
   has depth without a single decorative element on it.

   The washes are fixed to the screen rather than the scroll container — they
   are the room, not the content, and a gradient that scrolls away reads as a
   picture that slipped. */
.screen.login{position:relative; isolation:isolate; overflow:hidden}
.screen.login::before,
.screen.login::after{content:''; position:absolute; z-index:-1; pointer-events:none}
/* Sky blue, high and left. The quieter half of the blue — see DESIGN.md. */
.screen.login::before{
  inset:-20% -30% auto -40%; height:78%;
  background:radial-gradient(58% 62% at 34% 30%, rgba(84,149,204,.34) 0%, rgba(84,149,204,0) 70%);
}
/* Orange, low and right, and deliberately weaker: orange is the action colour
   in this app, and the loudest orange on this screen has to be the button. */
.screen.login::after{
  inset:auto -35% -22% -10%; height:70%;
  background:radial-gradient(56% 60% at 68% 72%, rgba(250,70,22,.30) 0%, rgba(250,70,22,0) 72%);
}

.login-body{
  padding-top:calc(var(--sat) + var(--s9));
  min-height:100%;
  display:flex; flex-direction:column;
}
.login-logo{width:176px; height:auto; margin-inline:auto}
/* The eyebrow centres here, so its leading dash has to sit under the words
   rather than beside them. */
.dark .eyebrow.login-eyebrow{
  justify-content:center; margin-top:var(--s4);
  color:var(--sky); letter-spacing:.24em;
}
.login-eyebrow::before{display:none}

/* One orange mark on the headline. Cheaper than a rule and it echoes the
   "Setting the new standard." lockup on the company overview. */
.screen.login h1 .dot{color:var(--orange)}

/* Fields sit on a faint raised plane so the form reads as one object against
   the washes instead of six loose lines. */
.screen.login form{
  margin-top:var(--s7); padding:var(--s6) var(--s5) var(--s5);
  border:1px solid var(--line-d); border-radius:14px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(2px);
}
.screen.login .field input{border-bottom-color:rgba(255,255,255,.20)}
.screen.login .field input:focus{border-bottom-color:var(--orange)}

/* The demo credential, shown only in demo builds. Sky blue rather than orange:
   it is information, not an action. */
.demo-key{
  margin-top:var(--s7); padding:var(--s4) var(--s5);
  border:1px solid rgba(84,149,204,.34); border-radius:12px;
  background:rgba(84,149,204,.10);
}
.dark .demo-key .eyebrow{color:var(--sky)}
.demo-key .eyebrow::before{background:var(--sky)}
.demo-rows{display:grid; gap:var(--s2); margin-top:var(--s3)}
.demo-rows span{
  display:flex; align-items:baseline; gap:var(--s3);
  font-size:var(--t-sm); font-weight:700; color:#fff;
}
.demo-rows b{
  flex:0 0 92px; font-size:var(--t-cap); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim-2);
}
.demo-key .qlink{margin-top:var(--s3)}

/* ---------- Demo-only: explore-a-member picker -------------------------- */
/* Mirrors the old portal's "Select a Member": one tap enters as any roster
     member so a reviewer feels the range. Shown only when window.FA_DEMO. */
.demo-explore{margin-top:var(--s6)}
.demo-explore .eyebrow{color:var(--sky)}
.demo-explore .eyebrow::before{background:var(--sky)}
.explore-list{display:grid; gap:var(--s3); margin-top:var(--s4)}
.explore-card{
  display:flex; align-items:center; gap:var(--s4); width:100%;
  padding:var(--s3) var(--s4); border-radius:12px; text-align:left; min-height:0;
  border:1px solid var(--line-d); background:rgba(255,255,255,.05);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
@media (hover:hover){ .explore-card:hover{background:rgba(255,255,255,.09); border-color:rgba(84,149,204,.5)} }
.explore-card:active{transform:scale(.99)}
.ec-avatar{
  flex:0 0 auto; width:40px; height:40px; border-radius:9px;
  display:grid; place-items:center; font-size:var(--t-sm); font-weight:800; letter-spacing:.06em;
  color:#fff; background:linear-gradient(135deg, var(--sky), var(--orange));
}
.ec-text{display:flex; flex-direction:column; min-width:0; gap:2px}
.ec-text b{font-size:var(--t-base); font-weight:700; color:#fff; line-height:1.15}
.ec-text span{font-size:var(--t-cap); letter-spacing:.03em; color:var(--dim); text-transform:capitalize}
.ec-go{margin-left:auto; color:var(--dim-2); display:inline-flex}

/* ---------- Dollars / hours toggle -------------------------------------- */
/* Small, on the card face, next to the caption it changes. A segmented control
   rather than a switch: a switch implies on/off, and neither of these is off. */
.unit-toggle{
  display:inline-flex; flex:0 0 auto; padding:2px; border-radius:100px;
  background:rgba(255,255,255,.09); border:1px solid var(--line-d);
}
.unit-toggle button{
  padding:6px 13px; border-radius:100px; min-height:0;
  font-size:var(--t-cap); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.unit-toggle button[aria-pressed="true"]{background:var(--orange); color:#fff}
@media (hover:hover){ .unit-toggle button:not([aria-pressed="true"]):hover{color:#fff} }
/* The unit after a figure — "hrs" sits at the same optical weight as the "$". */
.fig .cur.unit{font-size:.42em; margin-left:6px; margin-right:0; vertical-align:.18em; letter-spacing:0}

/* ---------- Support: the people ----------------------------------------- */
.people{margin-top:var(--s5); border-top:1px solid var(--line)}
.person{display:flex; gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid var(--line)}
.person > .grow{min-width:0}
.person .t{font-size:var(--t-base); font-weight:700; display:block}
.person .s{font-size:var(--t-sm); color:var(--gray); display:block; margin-top:2px; line-height:1.45}
.person-acts{display:flex; gap:var(--s5); margin-top:var(--s3)}
.person-acts .qlink{display:inline-flex; align-items:center; gap:6px}
/* The assigned advisor reads first — a hairline of orange down the left, and
   the tag. The other two are the desk behind them, not lesser people. */
.lead-person{
  margin-left:calc(var(--s4) * -1); padding-left:var(--s4);
  border-left:2px solid var(--orange);
}
.mono.sm{width:44px; height:44px; font-size:var(--t-base); border-radius:8px}
.tag.sm{margin-top:0; padding:4px 9px; font-size:9.5px; letter-spacing:.1em}

/* ============================================================================
   Admin console (staff only) — a DESKTOP back-office. Everything here is scoped
   to body.fa-admin, so the member app (a phone-shaped column) is untouched.
   ========================================================================== */

/* Break out of the phone frame — full viewport, no rounded shell, real page. */
body.fa-admin{ background:var(--paper); }
@media (min-width:600px){
  body.fa-admin{ display:block; place-items:initial; padding:0; background:var(--paper); background-image:none; }
  body.fa-admin #stage{ width:100vw; max-width:none; height:100dvh; border-radius:0; box-shadow:none; }
  body.fa-admin #app{ border-radius:0; cursor:auto; }
  body.fa-admin.dragging, body.fa-admin.dragging *{ cursor:auto; user-select:auto; }
}
body.fa-admin #app{ height:100%; }

/* Status pills (used across the tables). */
.astatus{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:100px; background:var(--gray-light); color:var(--gray); white-space:nowrap}
.astatus.active,.astatus.completed,.astatus.filed{background:#E4F3EC; color:#1B7A46}
.astatus.pending,.astatus.scheduled,.astatus.requested,.astatus.reviewing,.astatus.approved,.astatus.changed{background:#FBF0DC; color:#8A5A0B}
.astatus.inactive,.astatus.cancelled,.astatus.declined,.astatus.deleted{background:#F3E7E5; color:#9B3B2C}

/* "LOW" balance flag — orange, quiet but unmissable in the balance column. */
.am-low{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.05em;
  padding:1px 6px; border-radius:100px; background:#FBE2D3; color:#B4531A; vertical-align:middle}
/* Permission chips on the authorized-logins table. */
.am-perm{display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:100px;
  background:var(--gray-light); color:var(--ink); margin-right:2px; white-space:nowrap}

/* Admin data-entry forms read as real fields: boxed inputs, and dropdowns that
   obviously look like dropdowns (a border + a chevron), not plain underlined text. */
body.fa-admin #overlay-root .field input:not([type="checkbox"]):not([type="radio"]),
body.fa-admin #overlay-root .field select,
body.fa-admin #overlay-root .field textarea{
  border:1px solid var(--line); border-radius:9px; padding:11px 13px; min-height:46px;
  background-color:#fff; transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
body.fa-admin #overlay-root .field textarea{min-height:64px; padding:11px 13px}
body.fa-admin #overlay-root .field select{
  padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; background-size:16px;
}
body.fa-admin #overlay-root .field input:not([type="checkbox"]):not([type="radio"]):focus,
body.fa-admin #overlay-root .field select:focus,
body.fa-admin #overlay-root .field textarea:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(250,70,22,.12)}

/* Segmented control — for a small set of choices (e.g. trip type), so the options
   are all visible and one tap picks. */
.segmented{display:flex; gap:6px; margin-top:6px}
.segmented button{flex:1; min-height:44px; padding:8px 10px; border:1px solid var(--line);
  border-radius:9px; background:#fff; font:inherit; font-weight:700; font-size:var(--t-sm);
  color:var(--gray); cursor:pointer; transition:all var(--fast) var(--ease)}
.segmented button:hover{border-color:#C7CDD4}
.segmented button.on{background:var(--orange); border-color:var(--orange); color:#fff}

/* Desktop admin modals can be tall (preferences, add login): show a real
   scrollbar so it's obvious there's more below the fold. */
body.fa-admin #overlay-root .sheet-body{scrollbar-width:thin; scrollbar-color:#C2C8D0 transparent}
body.fa-admin #overlay-root .sheet-body::-webkit-scrollbar{width:12px}
body.fa-admin #overlay-root .sheet-body::-webkit-scrollbar-thumb{
  background:#C2C8D0; border-radius:12px; border:3px solid #fff}
body.fa-admin #overlay-root .sheet-body::-webkit-scrollbar-thumb:hover{background:#A7AEB8}

/* A stacked group of checkboxes with its own label (e.g. "What they can do") —
   NOT inside .field, so native checkboxes render normally. */
.achecks{display:flex; flex-direction:column; gap:10px; padding-top:var(--s5)}
.achecks-label{font-size:var(--t-cap); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray); margin-bottom:2px}
.achecks .acheck{margin-top:0; font-size:var(--t-base); color:var(--ink); cursor:pointer}
.achecks input[type="checkbox"]{width:18px; height:18px; accent-color:var(--orange); flex:0 0 auto; cursor:pointer}
/* Member preferences on the admin detail. */
.am-pref{display:grid; grid-template-columns:150px 1fr; gap:var(--s4); padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--t-sm)}
.am-pref:last-child{border-bottom:0}
.am-pref-k{color:var(--gray); font-weight:600}
.am-pref-v{color:var(--ink); line-height:1.5; overflow-wrap:anywhere}
.am-pref.alert .am-pref-k{color:#B4531A}
.am-pref.alert .am-pref-v{color:#B4531A; font-weight:600}
@media (max-width:820px){ .am-pref{grid-template-columns:1fr; gap:2px} }
.act-row{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding:9px 0; border-bottom:1px solid var(--line); font-size:var(--t-sm)}
.act-row:last-child{border-bottom:0}
.act-main{color:var(--ink); line-height:1.5}
.act-main b{font-weight:700}
.act-role{display:inline-block; margin:0 4px; padding:1px 7px; border-radius:999px;
  background:var(--line); color:var(--gray); font-size:11px; font-weight:600; vertical-align:middle}
.act-role.staff{background:#E7F0FA; color:#2C6FB0}
.act-do{color:var(--gray)}
.act-detail{color:var(--ink); font-weight:600}
.act-when{color:var(--gray); font-size:var(--t-cap); white-space:nowrap; flex:0 0 auto}
.er-prow{border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:10px}
.er-pname{width:100%; box-sizing:border-box; font-size:var(--t-base)}
.er-prow-btm{display:flex; gap:8px; align-items:center; margin-top:8px}
.er-pdob{flex:1 1 auto; min-width:0; box-sizing:border-box}
.er-prm{flex:0 0 44px; width:44px; min-width:44px; padding:0; text-align:center}

/* Shell: sidebar + main. */
.admin-shell{display:flex; height:100%; min-height:0; background:var(--paper)}
.admin-side{flex:0 0 232px; display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s5) var(--s4); background:var(--ink); color:#fff}
.as-brand{font-weight:700; font-size:var(--t-md); letter-spacing:-.01em; padding:0 var(--s3) var(--s4)}
.as-brand b{color:var(--orange); font-weight:800}
.as-nav{display:flex; flex-direction:column; gap:4px}
.as-link{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:11px var(--s3); border-radius:9px; color:rgba(255,255,255,.72); font-weight:600; font-size:var(--t-sm);
  text-align:left; min-height:0; transition:background var(--fast) var(--ease), color var(--fast) var(--ease)}
@media (hover:hover){ .as-link:hover{background:rgba(255,255,255,.07); color:#fff} }
.as-link.on{background:rgba(255,255,255,.10); color:#fff}
.as-badge{background:var(--orange); color:#fff; font-size:11px; font-weight:800; border-radius:100px; padding:1px 8px; min-width:20px; text-align:center}
.as-foot{margin-top:auto; display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s4)}
.as-who{display:flex; align-items:center; gap:var(--s3)}
.as-who .mono.sm{background:rgba(255,255,255,.14); color:#fff; width:38px; height:38px}
.as-who b{display:block; font-size:var(--t-sm); color:#fff}
.as-who span span{display:block; font-size:var(--t-cap); color:rgba(255,255,255,.5)}
.as-foot .qlink{color:rgba(255,255,255,.6); text-align:left}
@media (hover:hover){ .as-foot .qlink:hover{color:#fff} }

.admin-main{flex:1 1 auto; min-width:0; overflow:auto; padding:var(--s6) var(--s7)}

.am-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5); flex-wrap:wrap}
.am-head h2{font-size:var(--t-2xl); font-weight:700}
.am-metrics{color:var(--gray); font-size:var(--t-sm); margin-top:4px}
.am-search{flex:0 0 340px; max-width:100%; border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; font-size:var(--t-base); background:#fff; color:var(--ink)}
.am-search:focus{outline:0; border-color:var(--orange)}
.am-head-actions{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.am-head-actions .btn.sm{white-space:nowrap}

/* Tables. */
.am-tablewrap{border:1px solid var(--line); border-radius:12px; overflow:auto; background:#fff}
.am-tablewrap.flush{border:0; border-radius:0}
.am-table{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.am-table th{position:sticky; top:0; background:#fff; text-align:left; font-size:var(--t-cap); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gray); padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; z-index:1}
.am-table td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink)}
.am-table tbody tr:last-child td{border-bottom:0}
.am-table.compact td,.am-table.compact th{padding:10px 14px}
.am-table td.num,.am-table th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.am-table td.num.pos{color:#1B7A46; font-weight:700}
.am-table tbody tr[data-act]{cursor:pointer; transition:background var(--fast) var(--ease)}
@media (hover:hover){ .am-table tbody tr[data-act]:hover{background:var(--wash)} }
.am-name{display:flex; align-items:center; gap:var(--s3); font-weight:600}
.am-name .mono.sm{width:34px; height:34px; font-size:var(--t-cap); flex:0 0 auto}
.am-sub{display:block; color:var(--gray); font-size:var(--t-cap); font-weight:400; margin-top:1px}
.am-empty{padding:var(--s6); text-align:center; color:var(--gray)}
.am-foot-note{color:var(--gray); font-size:var(--t-cap); margin-top:var(--s3)}
.am-actions{display:flex; gap:var(--s2); justify-content:flex-end; white-space:nowrap}

/* Member detail. */
.am-back{color:var(--gray); font-weight:600; font-size:var(--t-sm); margin-bottom:var(--s4); min-height:0; padding:0}
@media (hover:hover){ .am-back:hover{color:var(--orange)} }
.am-detail-head{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5); flex-wrap:wrap}
.am-detail-head h2{font-size:var(--t-xl); font-weight:700}
.am-memno{margin-left:auto; color:var(--gray); font-size:var(--t-sm); font-variant-numeric:tabular-nums}
.am-detail-head .am-activate{flex:0 0 auto; width:auto}
.am-actv{font:700 11px/1 system-ui; letter-spacing:.6px; text-transform:uppercase; padding:5px 9px; border-radius:999px}
.am-actv.on{background:rgba(30,150,90,.12); color:#1a8f56}
.am-actv.off{background:rgba(250,70,22,.10); color:var(--orange)}
.am-detail{display:grid; grid-template-columns:340px 1fr; gap:var(--s5); align-items:start}
.am-col{display:flex; flex-direction:column; gap:var(--s5); min-width:0}
.am-panel{border:1px solid var(--line); border-radius:12px; background:#fff; padding:var(--s5)}
.am-panel > .between{margin-bottom:var(--s3)}
.am-panel-t{font-weight:700; font-size:var(--t-base)}
.am-bal{font-size:var(--t-2xl); font-weight:800; letter-spacing:-.02em; margin-top:var(--s2); white-space:nowrap}
.am-bal-sub{color:var(--gray); font-size:var(--t-sm); margin-top:2px}
.am-kv{display:flex; justify-content:space-between; gap:var(--s4); padding:9px 0; border-bottom:1px solid var(--line); font-size:var(--t-sm)}
.am-kv:last-child{border-bottom:0}
.am-kv span{color:var(--gray)}
.am-kv b{font-weight:600; text-align:right; overflow-wrap:anywhere}
/* "Add to calendar" pill on the Birthday / Member-since rows — a real tappable
   chip in the brand orange, not a faint text link, so the desk actually sees it. */
.cal-chip{display:inline-flex; align-items:center; gap:6px; margin-left:10px; vertical-align:middle;
  padding:5px 11px; border:1px solid var(--orange); border-radius:999px; background:rgba(250,70,22,.09);
  color:var(--orange); font-size:var(--t-xs); font-weight:600; line-height:1; cursor:pointer;
  white-space:nowrap; -webkit-appearance:none; appearance:none}
.cal-chip svg{width:14px; height:14px; stroke:currentColor}
.cal-chip:active,.cal-chip:hover{background:var(--orange); color:#fff}
.am-panel .am-tablewrap.flush{margin:0 calc(var(--s5) * -1) calc(var(--s5) * -1); width:auto}
.am-panel .am-tablewrap.flush .am-table td:first-child,.am-panel .am-tablewrap.flush .am-table th:first-child{padding-left:var(--s5)}
.am-panel .am-tablewrap.flush .am-table td:last-child,.am-panel .am-tablewrap.flush .am-table th:last-child{padding-right:var(--s5)}

/* Sheets become centered modals on a desktop admin screen. */
@keyframes pop{from{opacity:0; transform:translate(-50%,-46%) scale(.98)}
  to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
@media (min-width:600px){
  body.fa-admin #overlay-root .sheet{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(560px, calc(100vw - 48px)); max-height:calc(100dvh - 64px);
    border-radius:16px; bottom:auto; padding-bottom:0;
    /* Override the base bottom-sheet "rise" — its fill:both ends on
       transform:none, which cancels the centering transform above and
       drops the modal low, off the bottom of the screen. */
    animation:pop var(--fast) var(--ease) both}
  body.fa-admin #overlay-root .scrim{background:rgba(10,16,22,.5)}
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.acheck{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); color:var(--ink); margin-top:var(--s3)}
.acheck input{width:auto; flex:0 0 auto}
/* Airport / aircraft autocomplete + multi-leg editor (admin flight sheets). */
.ac-field{position:relative}
.ac-list{margin-top:6px; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:auto;
  max-height:220px; box-shadow:0 8px 24px rgba(16,24,32,.12)}
.ac-list[hidden]{display:none}
.ac-opt{display:flex; gap:10px; align-items:baseline; width:100%; text-align:left; padding:10px 12px;
  border:0; border-bottom:1px solid var(--line); background:#fff; cursor:pointer; font-size:var(--t-sm); color:var(--ink)}
.ac-opt:last-child{border-bottom:0}
.ac-opt b{font-weight:700; flex:0 0 auto; min-width:44px}
.ac-opt span{color:var(--gray); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (hover:hover){ .ac-opt:hover{background:var(--wash)} }
.trip-extra:empty{display:none}
.trip-extra{margin-top:var(--s3)}
.trip-lbl{font-size:12px; font-weight:700; color:#5495CC; text-transform:uppercase; letter-spacing:1px; margin:2px 0 6px}
.leg-row{display:flex; gap:var(--s3); align-items:flex-end; margin-bottom:var(--s3)}
.leg-grow{flex:1 1 auto; min-width:0}
.leg-date{flex:0 0 148px}
.leg-rm{flex:0 0 42px; width:42px; min-height:44px; padding:0}
.leg-card{border:1px solid var(--line); border-radius:12px; padding:12px 12px 4px; margin-bottom:var(--s3); background:#FBFCFD}
.leg-card .grid2{margin-bottom:var(--s3)}
.leg-card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.leg-card-t{font-size:12px; font-weight:700; color:#101820; text-transform:uppercase; letter-spacing:1px}
.leg-card .leg-rm{min-height:32px; width:32px; flex:0 0 32px}
.leg-hint{font-size:12px; color:#868D96; line-height:1.5; margin-top:6px}
/* Segment boxes — one full box per leg (origin→destination + its own details). */
.seg-box{border:1px solid var(--line); border-radius:14px; padding:14px 14px 4px; margin-bottom:var(--s4); background:#FBFCFD}
.seg-box .grid2{margin-bottom:var(--s3)}
.seg-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.seg-t{font-size:var(--t-sm); font-weight:800; color:#101820}
.seg-box .seg-rm{min-height:30px; width:30px; flex:0 0 30px; padding:0}
.field > label .optn{display:inline; width:auto; padding:0; border:0; color:#98A0A8; font-weight:500; text-transform:none; letter-spacing:0; font-size:.92em}
.seg-nofet{align-self:end; padding-bottom:12px}
.seg-add-row{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s3)}
#at-route, #et-route, #er-route{background:#EEF2F6; color:#5B6169}
.er-warn{background:#FEF3F2; border:1px solid #FDA29B; color:#B42318; border-radius:10px;
  padding:11px 13px; font-size:var(--t-sm); line-height:1.5; margin-top:2px}
.er-warn b{font-weight:700}
.er-warn:empty{display:none; padding:0; border:0}
.cred-box{border:1px solid var(--line); border-radius:12px; padding:4px 14px; margin-top:var(--s4)}
.cred-row{display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  padding:12px 0; border-bottom:1px solid var(--line)}
.cred-row:last-child{border-bottom:0}
.cred-row span{color:var(--gray); font-size:var(--t-sm)}
.cred-row b{font-weight:700; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; user-select:all}

/* Narrow window (tablet / small laptop) — sidebar to top, tables scroll. */
@media (max-width:820px){
  .admin-shell{flex-direction:column}
  .admin-side{flex:0 0 auto; flex-direction:row; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4)}
  .as-brand{padding:0}
  .as-nav{flex-direction:row}
  .as-foot{margin:0 0 0 auto; flex-direction:row; align-items:center; gap:var(--s4); padding:0}
  .as-who .mono.sm{display:none}
  .admin-main{padding:var(--s5)}
  .am-detail{grid-template-columns:1fr}
}

/* Phone — the desk console is desktop-first, but an admin may open it on their
   phone. Wrap the top bar (brand + account on line 1, a scrollable nav on line
   2), let every wide table scroll sideways, and stack the detail header. */
@media (max-width:560px){
  .admin-side{flex-wrap:wrap; align-items:center; gap:8px; padding:10px var(--s4)}
  .as-brand{flex:1 1 auto; font-size:var(--t-base); padding:0}
  .as-who{display:none}                       /* name/avatar off — save space */
  /* Account actions on their own right-aligned row so they never bleed off. */
  .as-foot{order:2; flex:1 1 100%; margin:0; gap:18px; justify-content:flex-end}
  .as-foot .qlink{font-size:var(--t-sm)}
  .as-nav{order:3; flex:1 1 100%; overflow-x:auto; gap:6px; padding-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .as-nav::-webkit-scrollbar{display:none}
  .as-link{flex:0 0 auto; white-space:nowrap; padding:8px 12px}
  .admin-main{padding:var(--s4)}
  .am-head{gap:var(--s3)}
  .am-head h2{font-size:var(--t-xl)}
  .am-search{flex:1 1 100%; order:3}          /* search on its own full-width line */
  .am-head-actions{flex:1 1 100%}
  .am-detail{gap:var(--s4)}
  .am-detail-head{gap:8px}
  .am-detail-head h2{font-size:var(--t-lg); flex:1 1 100%}
  .am-memno{order:9; flex:1 1 100%; margin-left:0}
  .am-bal{font-size:var(--t-xl)}
  body.fa-admin .grid2{grid-template-columns:1fr}   /* form fields stack in sheets */
  .am-table th,.am-table td{padding:11px 12px}
  .am-table.compact th,.am-table.compact td{padding:9px 11px}
}

/* Admin buttons size to their label, not the container. */
.am-panel .btn, .am-actions .btn, .am-head .btn{width:auto; flex:0 0 auto}
.am-panel .between .btn.sm{min-height:36px; padding:8px 14px}