/* home.css — the home screen. */
/* The globe card (screens/homeglobe.js): the Globe screen's read-out in small —
   the next flight on a turning Earth, the last month flown under it. Dark in
   either theme, like the screen it opens. */
.hg{--gl-ink:#f4f6fa;--gl-dim:#7d889c;--gl-faint:#4b5569;--gl-line:rgba(255,255,255,.09);
  --gl-card:rgba(255,255,255,.035);--gl-amber:#ffb020;
  --gl-mono:"SF Mono","Geist Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  position:relative;margin:4px 0 14px;border-radius:18px;overflow:hidden;background:#04060b;color:var(--gl-ink);
  border:1px solid rgba(255,255,255,.06);cursor:pointer;isolation:isolate;
  font-family:-apple-system,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,system-ui,sans-serif}
.hg:focus-visible{outline:2px solid var(--gl-amber);outline-offset:2px}
.hg-sky{position:relative;height:210px;overflow:hidden}
.hg-snap{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
/* The planet is bigger than the card and sits off its far edge — the side
   away from the words — so it rises into the card instead of being framed. */
.hg-canvas{position:absolute;top:-30px;height:300px;width:70%;inset-inline-end:-10%}
/* WebGL and CSS paint the same black a shade apart on iPhone (a hard seam where
   the canvas met the card, iOS 27 simulator), so the canvas fades into the card
   on the side that faces the words. */
.hg-canvas{-webkit-mask-image:linear-gradient(to right,#000 55%,transparent);mask-image:linear-gradient(to right,#000 55%,transparent)}
[dir=ltr] .hg-canvas{-webkit-mask-image:linear-gradient(to left,#000 55%,transparent);mask-image:linear-gradient(to left,#000 55%,transparent)}
.hg-canvas canvas{display:block}
/* The words over the planet, on the reading side, with the sky dimmed under them. */
.hg-top{position:absolute;top:0;inset-inline-start:0;width:74%;height:210px;padding:16px 16px 0;pointer-events:none;
  background:linear-gradient(to left,rgba(4,6,11,.92) 40%,rgba(4,6,11,0))}
[dir=ltr] .hg-top{background:linear-gradient(to right,rgba(4,6,11,.92) 40%,rgba(4,6,11,0))}
.hg-r{font:600 26px/1.15 var(--gl-mono);letter-spacing:.04em;margin-top:8px}
.hg-w{font:500 12px/1.4 var(--gl-mono);color:var(--gl-dim);margin-top:4px}
.hg-l{font-size:12.5px;line-height:1.45;color:#ffe3a3;margin-top:10px;max-width:230px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* The read-out stays inside the sky: on a narrow phone the sunrise line ran
   past the card's divider (iOS 27 simulator). */
.hg-top{max-height:210px;overflow:hidden}
.hg-bot{padding:12px 14px 14px;border-top:1px solid var(--gl-line);background:linear-gradient(#04060b,#070a12)}
.hg-m{font:600 10px/1.2 var(--gl-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gl-dim);margin-bottom:8px}
.hg .gl-eye{white-space:nowrap}
.hg .gl-grid{margin-top:0;max-width:none}
.hg .gl-tick{max-width:none}
/* The same block on Home, where it is a link into the Salary screen rather
   than that screen's own headline. */
.paylead{cursor:pointer;transition:border-color .15s,transform .1s}
.paylead:hover{border-color:var(--acc)}
.paylead:active{transform:scale(.995)}
.paylead:focus-visible{outline:2px solid var(--acc-txt);outline-offset:2px}
.paylead .v{font-size:38px}
@media(min-width:760px){.paylead .v{font-size:42px}}
/* ── the Now card ── */
.nowcard{position:relative;border:1px solid var(--line);border-radius:16px;padding:15px 16px 14px;margin-bottom:16px;cursor:pointer;background:var(--surface);transition:border-color .15s,transform .1s}
.nowcard:hover{border-color:var(--acc)}
.nowcard:active{transform:scale(.995)}
.nowcard .tag{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
.nowcard .big{font-family:var(--mono);font-size:38px;font-weight:800;line-height:1.05;margin:5px 0 2px;color:var(--txt)}
.nowcard .line{font-size:14px;font-weight:700;color:var(--txt)}
.nowcard .line .ar{color:var(--faint);font-weight:600;font-family:var(--mono);margin-left:5px}
.nowcard .line em{font-style:normal;font-size:11px;color:var(--faint);font-weight:600}
.nowcard .sub{font-size:11px;color:var(--faint);font-family:var(--mono);margin-top:5px;line-height:1.5}
/* The state colours the card, so it is recognisable before it is read. */
.nowcard.nf-air{border-color:rgba(13,156,103,.45);background:linear-gradient(135deg,rgba(13,156,103,.12),transparent 62%)}
.nowcard.nf-air .big{color:var(--air)}
.nowcard.nf-hot{border-color:rgba(255,90,60,.5);background:linear-gradient(135deg,rgba(255,90,60,.14),transparent 62%)}
.nowcard.nf-hot .big{color:var(--acc)}
.nowcard.nf-warm{border-color:rgba(255,202,74,.42);background:linear-gradient(135deg,rgba(255,202,74,.11),transparent 62%)}
.nowcard.nf-lay{border-color:rgba(90,140,255,.42);background:linear-gradient(135deg,rgba(90,140,255,.12),transparent 62%)}
@media(max-width:620px){.nowcard .big{font-size:32px}}
/* ── the next-duty destination teaser ── */
.nowdest{display:flex;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px;margin:-6px 0 16px;overflow:hidden}
.nowdest .ph{flex:0 0 84px;width:84px;height:84px;border-radius:12px;background-size:cover;background-position:center}
.nowdest .nd-bd{flex:1;min-width:0}
.nowdest .nd-city{font-weight:700;font-size:13px}
.nowdest .nd-ex{font-size:12px;color:var(--dim);margin-top:3px;line-height:1.4}
.nowdest .nd-h{font-size:10px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);margin-top:8px}
.nowdest .evl{margin-top:3px}
.nowdest .ev{font-size:12px;margin-top:2px}
.nowdest .ev .s{color:var(--faint);font-weight:500}
/* ── Hebrew, right to left ────────────────────────────────────────────────
   dir="rtl" flips the flex rows, the tab bar and the cards by itself. What must
   NOT flip is the aviation text inside them: a route, a flight number, a Zulu
   time or a figure reads left to right in every language on the flight deck,
   and left to the bidi algorithm "TLV → PVG 06:15z" can come out in pieces.
   Each such run is isolated as its own left-to-right island. */
/* the Today board — one duty as an airport departure board */
.tboard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 14px;cursor:pointer;font-variant-numeric:tabular-nums}
.tboard:active{transform:scale(.995)}
.tb-report{display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line2);margin-bottom:4px}
.tb-lbl{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.tb-report b.tb-time{font-size:24px;font-weight:700;color:var(--txt)}
.tb-report b.tb-time small{font-size:11px;font-weight:500;color:var(--faint);margin-inline-start:4px;font-family:inherit}
.tb-z{color:var(--dim);font-size:13px;margin-inline-start:auto}
.tb-time,.tb-code{font-family:var(--mono)}
.tb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:10px;align-items:center;padding:6px 0;font-size:14px;border-bottom:1px dashed var(--line2)}
.tb-row .tb-code:first-child{color:var(--flt);font-weight:700}
.tb-row.dh .tb-code:first-child{color:var(--dh)}
.tb-row small{font-size:10px;color:var(--dh)}
.tb-head{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding:4px 0 2px;border-bottom:0}
.tb-head span:last-child,.tb-row .tb-time{text-align:end}
.tb-facts{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:9px;font-size:12px;color:var(--dim)}
.tb-fact b{color:var(--txt);font-family:var(--mono);font-weight:600;margin-inline-start:3px}
.tb-fact small{color:var(--faint);margin-inline-start:5px}
.tb-fact.ok b{color:var(--air)}
.tb-fact.bad b{color:var(--bad)}
/* Open bids on Home, and their count on the Bids tab. */
.bidsnote{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--acc);
  border-radius:14px;padding:12px 14px;margin:0 0 14px;cursor:pointer}
.bidsnote .ic{color:var(--acc-txt);line-height:0}
.bidsnote .tx{flex:1;min-width:0}
.bidsnote .tx b{display:block}
.bidsnote .tx small{color:var(--dim)}
.bidsnote .go{color:var(--faint);font-size:20px}
/* The net on Home, masked until the eye is pressed. */
.paylead .v{display:flex;align-items:center;justify-content:center;gap:12px}
.pmask{font-variant-numeric:tabular-nums;cursor:pointer;display:inline-block;
  transition:color .25s ease,text-shadow .25s ease,opacity .25s ease;-webkit-user-select:none;user-select:none}
.pmask:not(.shown){letter-spacing:.04em;opacity:.8}
/* While the board spins: the figures light up in the accent. */
.pmask.flipping{color:var(--acc-txt);text-shadow:0 0 14px color-mix(in srgb,var(--acc) 55%,transparent)}
/* And land with a small pop. */
@keyframes cc-land{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.pmask.landed{animation:cc-land .32s cubic-bezier(.3,1.6,.5,1)}
.peye{flex:none;width:36px;height:36px;display:inline-grid;place-items:center;border-radius:999px;
  background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;padding:0;
  transition:color .2s ease,border-color .2s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
.peye.on{color:var(--acc-txt);border-color:var(--acc);transform:rotateY(180deg)}
.peye:active{transform:scale(.9)}
.peye.on:active{transform:rotateY(180deg) scale(.9)}
.peye svg{display:block}
@media (prefers-reduced-motion:reduce){.peye,.pmask{transition:none}.peye.on{transform:none}}