/* excellentair Flights — dark console theme, premium pass.
   Brand: excellentair navy #232B67 (design package). One lifted blue accent for wayfinding. */
/* dark is the default; the header and the 48-hour strip keep it in the light theme too (a night deck over paper),
   and so does the welcome card after sign-in, whose roundel and step icons are white */
:root,[data-theme=light] .deck,[data-theme=light] .welcome{
  --hi:#fff; --fg:255,255,255; --well:7,11,24; --bad-ink:#FFB5B0; --field:rgba(0,0,0,.25);
  --brand:#232B67; --brand-deep:#10142E;
  --bg:#070B18; --bg-2:#0A1022; --surface:#0F162B; --surface-2:#141D36; --surface-3:#1B2543; --surface-hi:#222D50;
  --line:rgba(var(--fg),.075); --line-strong:rgba(var(--fg),.15); --line-soft:rgba(var(--fg),.045); --hairline:rgba(var(--fg),.06);
  --ink:#EEF2F9; --ink2:#B4C0D6; --ink3:#95A3BD; --ink4:#7A89A6;
  --accent:#6E93FF; --accent-2:#9DB6FF; --accent-ink:#0B1220; --accent-glow:rgba(110,147,255,.28);
  --good:#3CC98A; --good-bg:rgba(60,201,138,.12); --warn:#F2B84B; --warn-bg:rgba(242,184,75,.12);
  --bad:#F2665E; --bad-bg:rgba(242,102,94,.13); --soon:#E8A33C; --soon-bg:rgba(232,163,60,.12);
  --font-brand:'Marcellus', Georgia, serif;
  --font-ui:'Albert Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --card-grad:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);
  --shadow:0 1px 0 rgba(var(--fg),.05) inset, 0 12px 34px -20px rgba(0,0,0,.9);
  --shadow-hover:0 1px 0 rgba(var(--fg),.08) inset, 0 22px 50px -24px rgba(0,0,0,.95);
  --shadow-lift:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--fg),.06);
  --ease:cubic-bezier(.22,.61,.36,1); --r:14px; --r-lg:18px;
}
*{box-sizing:border-box}
html{color-scheme:dark}

/* ---------------------------------------------------------------- light: paper with a night deck (canvas option A, 2026-09-25) */
html[data-theme=light]{color-scheme:light;
  --hi:#10142E; --fg:16,20,46; --well:255,255,255; --bad-ink:#A8261F; --field:#FFFFFF;
  --bg:#F4F2ED; --bg-2:#EFECE5; --surface:#FFFFFF; --surface-2:#FAF9F6; --surface-3:#EFECE5; --surface-hi:#E8E5DD;
  --line:rgba(16,20,46,.10); --line-strong:rgba(16,20,46,.18); --line-soft:rgba(16,20,46,.06); --hairline:rgba(16,20,46,.08);
  --ink:#10142E; --ink2:#3B4466; --ink3:#5B6482; --ink4:#6B7390;
  --accent:#2F4FD8; --accent-2:#2A47C4; --accent-ink:#FFFFFF; --accent-glow:rgba(47,79,216,.22);
  --good:#1B8455; --good-bg:#E3F3EA; --warn:#A86400; --warn-bg:#FBEBD2;
  --bad:#C0362F; --bad-bg:#FBE4E2; --soon:#A86400; --soon-bg:#FBEBD2;
  --card-grad:#FFFFFF;
  --shadow:0 1px 2px rgba(16,20,46,.06),0 8px 24px -16px rgba(16,20,46,.18);
  --shadow-hover:0 1px 2px rgba(16,20,46,.08),0 14px 32px -18px rgba(16,20,46,.26);
  --shadow-lift:0 24px 60px -28px rgba(16,20,46,.35),0 0 0 1px rgba(16,20,46,.08)}
html[data-theme=light] body{background:var(--bg)}
html[data-theme=light] ::selection{color:#fff}
/* people's colours are picked for a dark page: deepen them on paper so initials stay readable */
/* primary buttons: the dark theme's light-blue gradient under white text is 2.9:1 on paper, the deep accent 6:1 */
html[data-theme=light] .btn.pri{background:var(--accent);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -10px var(--accent)}
html[data-theme=light] .btn.pri:hover{background:var(--accent-2)}
/* the sticky save bar is paper too, not a navy block with its hint at 2.5:1 */
html[data-theme=light] .ed-actions.sticky{background:var(--surface);box-shadow:var(--shadow-hover)}
html[data-theme=light] .avatar:not(.on){color:color-mix(in srgb,var(--c) 55%,#10142E);border-color:color-mix(in srgb,var(--c) 75%,#10142E);background:color-mix(in srgb,var(--c) 16%,#fff)}
body{margin:0;background:radial-gradient(120% 60% at 50% -10%,#121A3A 0%,var(--bg) 55%) fixed,var(--bg);color:var(--ink);font:14px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-2);text-decoration:none}a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
main{max-width:1440px;margin:0 auto;padding:18px 24px 56px}
footer{text-align:center;color:var(--ink4);font-size:12px;padding:26px;letter-spacing:.2px}
footer p{margin:0}footer .imprint{margin-top:6px;font-size:11.5px;color:var(--ink4);opacity:.85}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.1px}
.nw{white-space:nowrap}.rt{text-align:right}.w{color:var(--soon)}.hint{color:var(--ink3);font-size:12.5px}
.who{color:var(--ink4);font-size:12px}.dim{opacity:.5}
h1{font:400 26px/1.15 var(--font-brand);margin:0 0 12px;letter-spacing:.2px}h1 small,h2 small{font:12px var(--font-ui);color:var(--ink3);margin-left:8px}
h2{font:600 12px/1.2 var(--font-ui);margin:0 0 12px;color:var(--ink3);letter-spacing:1.2px;text-transform:uppercase}
.lede{margin:-4px 0 14px;color:var(--ink3);font-size:13px;max-width:70ch}.lede i{font-style:normal;color:var(--ink4);margin:0 6px}
::selection{background:var(--accent);color:var(--accent-ink)}
i.dot,.leg i{font-style:normal;color:var(--ink4)}

/* ---------------------------------------------------------------- logo */
.logo{display:inline-flex;align-items:center;gap:.28em;height:44px;color:var(--hi);font:400 40px/1 var(--font-brand);letter-spacing:-.01em}
.logo.nav{height:30px;font-size:27px}.logo.small{height:36px;font-size:33px}
.logo-roundel{height:1.05em;width:1.05em;display:block}
.logo-word{display:block;line-height:1;transform:translateY(.02em)}

.env{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:var(--surface-3);color:var(--ink)}
.env.env-clash{outline:2px dashed var(--bad);outline-offset:2px}
.env.env-production{background:var(--bad);color:#fff}.env.env-staging{background:var(--soon);color:#1a1200}.env.env-integration{background:var(--good);color:#04241a}.env.env-development{background:var(--surface-3);color:var(--ink2)}
button.lnk,a.lnk{background:none;border:0;color:var(--accent-2);cursor:pointer;font:inherit;padding:0;text-decoration:none}
button.lnk:hover,a.lnk:hover{text-decoration:underline}

/* ---------------------------------------------------------------- alerts & flashes */
.alerts{margin:0 0 14px}
.alert{display:flex;gap:12px;align-items:baseline;padding:10px 16px;border-radius:var(--r);background:var(--bad-bg);border:1px solid rgba(242,102,94,.35);margin-bottom:6px;font-size:12.5px}
.alert b{text-transform:capitalize;color:var(--bad)}.alert time{margin-left:auto;color:var(--ink3);font-family:var(--mono);font-size:12px}
.flash{padding:11px 16px;border-radius:var(--r);margin:0 0 14px;font-size:13px;border:1px solid var(--line);background:var(--surface)}
.flash.ok{background:var(--good-bg);border-color:rgba(60,201,138,.35)}
.flash.bad{background:var(--bad-bg);border-color:rgba(242,102,94,.35);color:var(--bad-ink)}
.al-mail{display:block;margin-top:3px;color:var(--ink3);font-size:12px}.al-mail.bad{color:var(--bad-ink)}

/* ---------------------------------------------------------------- page head, segmented filters */
.pagehead{display:flex;align-items:flex-start;gap:22px;margin:4px 0 16px;flex-wrap:wrap}
.pagehead h1{margin:0 0 4px}.pagehead .lede{margin:0}
.segments{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--surface);border:1px solid var(--line);margin-left:auto;align-self:center}
.segments a{text-decoration:none;color:var(--ink2);padding:7px 13px;border-radius:9px;font-size:13px;font-weight:600;transition:background .15s,color .15s}
.segments a:hover{color:var(--hi);text-decoration:none}
.segments a.on{background:var(--surface-hi);color:var(--hi);box-shadow:0 1px 0 rgba(var(--fg),.08) inset}
.segments b{margin-left:6px;color:var(--ink3);font-weight:600;font-variant-numeric:tabular-nums}.segments a.on b{color:var(--accent-2)}
.basis{align-self:center;color:var(--ink3);font-size:12px}.basis b{color:var(--ink);margin-left:4px}
.bar{display:flex;align-items:center;gap:18px;margin:0 0 14px;flex-wrap:wrap}.bar h1{margin:0}.bar .hint{margin-left:auto}
.filters{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.filters a{text-decoration:none;color:var(--ink2);padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600}
.filters a.on{background:var(--surface-3);color:var(--hi)}
.subnav{display:flex;gap:2px;margin:0 0 16px}.subnav a{text-decoration:none;color:var(--ink3);padding:7px 13px;border-radius:9px;font-weight:600;font-size:13px}
.subnav a.on{background:var(--surface);border:1px solid var(--line);color:var(--hi)}

/* ---------------------------------------------------------------- cards, tables, forms */
.card{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin:0 0 14px;box-shadow:var(--shadow)}
.card.narrow{max-width:480px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th{text-align:left;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--line-strong)}
.tbl td{padding:10px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}.tbl tr:hover td{background:rgba(var(--fg),.02)}
.tbl tr.tot td{font-weight:600;border-top:1px solid var(--line-strong)}
.tbl tr.bad td{background:var(--bad-bg)}.tbl tr.open td{background:var(--soon-bg)}.tbl td input{width:100%}
.kv{display:grid;grid-template-columns:190px 1fr;gap:7px 16px;margin:0}.kv dt{color:var(--ink3)}.kv dd{margin:0}
label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin:0 0 12px;letter-spacing:.2px}label small{font-weight:400;color:var(--ink4);margin-left:4px}
label.slot{display:flex;align-items:center;gap:8px}
input,select{display:block;width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:10px;font:inherit;background:rgba(var(--well),.6);color:var(--ink);margin-top:5px;transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover{border-color:rgba(var(--fg),.22)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:rgba(var(--well),.85)}
input::placeholder{color:var(--ink4)}
input[readonly]{background:var(--surface);color:var(--ink3)}input[type=checkbox]{width:auto;display:inline;margin:0;accent-color:var(--accent)}
select option{background:var(--surface-2)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}.grid7{display:grid;grid-template-columns:repeat(7,1fr) auto;gap:0 10px;align-items:end;margin:0 0 14px}
.span2{grid-column:span 2}.actions{display:flex;gap:8px;align-items:center;margin:0 0 10px}
form.inline{display:inline-flex;gap:6px;align-items:center}form.inline input{margin:0;width:auto}
.btn{display:inline-block;padding:8px 14px;border:1px solid var(--line-strong);border-radius:10px;background:linear-gradient(180deg,var(--surface-3),var(--surface-2));color:var(--ink);font:600 12.5px var(--font-ui);cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .08s,box-shadow .15s;box-shadow:0 1px 0 rgba(var(--fg),.06) inset}
.btn:hover{border-color:rgba(var(--fg),.26);text-decoration:none;background:linear-gradient(180deg,var(--surface-hi),var(--surface-3))}.btn:active{transform:translateY(1px)}
.btn.pri{background:linear-gradient(180deg,#7FA0FF,#6389F5);color:var(--accent-ink);border-color:transparent;box-shadow:0 1px 0 rgba(var(--fg),.35) inset,0 8px 18px -10px var(--accent)}.btn.pri:hover{background:linear-gradient(180deg,#93AEFF,#6E93FF)}
.btn.dgr{color:var(--bad-ink)}.btn.dgr:hover{background:var(--bad-bg);border-color:rgba(242,102,94,.4)}
.pill{display:inline-block;padding:3px 10px;border-radius:9px;font-size:12px;font-weight:700;background:var(--surface-3);color:var(--ink2);text-transform:capitalize;letter-spacing:.3px}
.pill.s-published,.pill.s-ok,.pill.o-ok{background:var(--good-bg);color:var(--good)}.pill.s-hold{background:var(--soon-bg);color:var(--soon)}
.pill.s-blocked,.pill.o-failed{background:var(--bad-bg);color:var(--bad)}.pill.o-skipped_unchanged{background:var(--surface-3)}
.pill.l-base{background:rgba(110,147,255,.16);color:var(--accent-2)}.pill.l-tax{background:var(--soon-bg);color:var(--soon)}.pill.l-fee{background:var(--good-bg);color:var(--good)}
.chip{display:inline-block;padding:2px 8px;border-radius:7px;border:1px solid var(--line-strong);font:600 12px var(--font-ui);color:var(--ink2);letter-spacing:.4px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.empty{padding:38px;text-align:center;color:var(--ink3);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-lg)}.empty b{display:block;color:var(--ink)}
.back{display:inline-block;margin:0 0 12px;font-size:13px;text-decoration:none}
.flag{display:inline-block;width:22px;height:16.5px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(var(--fg),.12);vertical-align:-2px}

/* ---------------------------------------------------------------- leg cards: the tail is the identifier */
.leg{display:grid;grid-template-columns:212px minmax(0,1fr) 268px;grid-template-areas:"hero route price" "hero edit actions" "bd bd bd";gap:8px 20px;align-items:center;
  padding:16px 20px 16px 8px;margin:0 0 12px;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.leg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink4)}
.leg::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 120% at 0% 50%,rgba(110,147,255,.07),transparent 60%)}
.leg:hover{border-color:var(--line-strong);transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.leg.s-published::before{background:var(--good)}.leg.s-hold::before{background:var(--soon)}.leg.s-blocked::before{background:var(--bad)}
.leg.s-blocked::after{background:radial-gradient(60% 120% at 0% 50%,rgba(242,102,94,.10),transparent 60%)}
.leg > *{position:relative;z-index:1}
.leg-route{grid-area:route;display:flex;flex-direction:column;gap:8px;min-width:0;padding:0 14px}
.leg-route .day{font-size:12px;color:var(--ink3);font-weight:600;letter-spacing:.2px}.leg-route .day .mono{color:var(--ink4);font-weight:400}
.leg-route .route{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,1.1fr) minmax(0,1fr);align-items:center;gap:16px}
.leg-route .apt{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"flag code" "flag sub" "flag time";column-gap:10px;row-gap:2px;align-items:center;min-width:0}
.leg-route .apt .flag{grid-area:flag;width:26px;height:19.5px;border-radius:3px;box-shadow:0 0 0 1px rgba(var(--fg),.12)}
.leg-route .apt.arr{grid-template-columns:1fr auto;grid-template-areas:"code flag" "sub flag" "time flag";text-align:right;justify-self:end}
.leg-route .apt.arr em u{margin:0 6px 0 0}.leg-route .apt.arr em{display:flex;justify-content:flex-end;gap:0}.leg-route .apt.arr em u{order:-1}
.leg-route .apt b{grid-area:code;font:700 30px/1 var(--font-ui);letter-spacing:.01em;color:var(--hi)}
.leg-route .apt small{grid-area:sub;font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg-route .apt em{grid-area:time;font-style:normal;font-size:13px;color:var(--ink2);font-weight:600}.leg-route .apt em u{text-decoration:none;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ink4);margin-left:6px}
.leg-route .arrow{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px}
.leg-route .arrow::before{content:"";width:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--ink3) 30%,var(--accent-2));position:relative}
.leg-route .arrow i{font-size:12px;color:var(--ink3);white-space:nowrap}
.leg-route .reason{font-size:12.5px;color:var(--bad-ink);padding:8px 12px;border-radius:10px;background:var(--bad-bg);border:1px solid rgba(242,102,94,.3);align-self:flex-start}
.leg-route .reason a{margin-left:8px;font-weight:600;color:var(--hi)}
.leg-price{grid-area:price;display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right;align-self:end;padding:36px 0 2px}
.leg-price .lbl{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink4)}.leg-price .lbl i{font-style:normal;color:var(--ink4);opacity:.8;margin-left:4px;text-transform:none;letter-spacing:0}
.leg-price .amount{display:inline-flex;flex-direction:column;align-items:flex-end;padding:8px 14px 7px;border-radius:12px;
  background:linear-gradient(180deg,var(--good-bg),color-mix(in srgb,var(--good-bg) 40%,transparent));border:1px solid color-mix(in srgb,var(--good) 30%,transparent)}
.leg-price .amount .pv-n{font-size:34px}.leg-price .amount .pv-c{font-size:17px}
.leg-price .calc{font-size:12px;color:var(--ink3);text-decoration:none}.leg-price .calc:hover{color:var(--accent-2)}
.leg-price .ovr{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;background:var(--soon-bg);color:var(--soon);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.leg-edit{grid-area:edit;padding:12px 14px 12px;border-radius:14px;background:rgba(var(--well),.55);border:1px solid var(--line);box-shadow:0 1px 0 rgba(var(--fg),.04) inset}
.deck-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.deck-head b{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink2)}.deck-head span{font-size:12px;color:var(--ink4)}
.fields{display:grid;gap:12px;align-items:start}                 /* its columns: see "the offer fields' columns" */
.field{margin:0;display:flex;flex-direction:column;gap:5px;min-width:0}
.field .fl{margin:0;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink2)}.field .fl i{font-style:normal;font-weight:500;color:var(--ink4);text-transform:none;letter-spacing:0;margin-left:5px}
.field .fi{position:relative;display:block}
.field input{margin:0;height:46px;padding:10px 12px;font:600 16px var(--font-ui);background:rgba(var(--fg),.04);border:1px solid var(--line-strong);border-radius:11px;color:var(--hi);font-variant-numeric:tabular-nums}
.field input::placeholder{color:var(--ink4);font-weight:500}
.field input:focus{background:rgba(110,147,255,.08);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.field .fi em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 12px var(--font-ui);letter-spacing:.6px;text-transform:uppercase;color:var(--ink4);pointer-events:none}
.field .fi em + input,.field .fi input:has(+ em){padding-right:56px}
.field .fi input{padding-right:58px}.field.wide .fi input{padding-right:12px}
.field small{font-size:12px;color:var(--ink4)}
.field.wide{grid-column:span 1}
.leg-actions{grid-area:actions;display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:end;min-width:0}
.leg-actions .who{text-align:right}.leg-actions .who i{font-style:normal;color:var(--ink4);margin:0 4px}
.leg-actions .btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.leg-actions .btn{min-width:0;text-align:center}

/* ---------------------------------------------------------------- aircraft imagery (T-tail icons) */
.tail-thumb{display:block;height:52px;width:auto;margin:-6px 0 2px -6px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.reg-cell{display:flex;align-items:center;gap:10px}.reg-cell .tail-thumb{height:40px;margin:0}.reg-cell input{margin:0}
.card.with-hero{position:relative;overflow:hidden;padding-right:380px;min-height:230px}
.card.with-hero .hero-img{position:absolute;right:0;top:-30px;height:290px;width:auto;pointer-events:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));mask-image:linear-gradient(90deg,transparent,#000 25%)}
.routehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:34px}
.routehead .flag{width:30px;height:22.5px;vertical-align:-3px}
.routehead .to{width:56px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ink3),var(--accent-2))}
.routehead small{font-size:12.5px}
.tails-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:0 0 14px}
.tails-gallery figure{margin:0;padding:12px 12px 12px;border-radius:var(--r-lg);background:radial-gradient(120% 90% at 30% 0%,#1B2760 0%,#0F1636 45%,var(--surface) 100%);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;text-align:center;transition:transform .2s var(--ease),border-color .2s}
.tails-gallery figure:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.tails-gallery img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
.tails-gallery figcaption{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:12px}
.tails-gallery figcaption b{font:800 15px var(--font-ui);color:var(--hi);letter-spacing:.06em}.tails-gallery figcaption span{color:var(--ink3);font-family:var(--mono);font-size:12px}
@media (max-width:1100px){.card.with-hero{padding-right:24px}.card.with-hero .hero-img{display:none}}

/* ---------------------------------------------------------------- status steps (the welcome card after sign-in) */
@keyframes fade{to{opacity:1}}
.boot-line{height:2px;background:var(--line-strong);border-radius:2px;overflow:hidden;margin:0 0 18px}
.boot-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px var(--accent-glow);transition:width .45s var(--ease)}
.boot-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13px}
.boot-steps li{display:grid;grid-template-columns:18px 118px 1fr;gap:12px;align-items:baseline;color:var(--ink4);transition:color .3s}
.boot-steps li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink4);justify-self:center;align-self:center;transition:all .3s var(--ease)}
.boot-steps li b{font-weight:600;color:var(--ink3)}.boot-steps li span{font-family:var(--mono);font-size:12px;color:var(--ink4);letter-spacing:-.1px}
.boot-steps li.active{color:var(--ink)}.boot-steps li.active b{color:var(--ink)}.boot-steps li.active span{color:var(--ink3)}
.boot-steps li.active::before{border-color:var(--accent-2);box-shadow:0 0 0 4px var(--accent-glow);animation:pulse-b 1s var(--ease) infinite}
.boot-steps li.done b{color:var(--ink2)}.boot-steps li.done span{color:var(--ink2)}
.boot-steps li.done::before{border-width:0;background:var(--good);box-shadow:0 0 10px rgba(60,201,138,.5)}
.boot-steps li.done.s-warn::before{background:var(--warn);box-shadow:0 0 10px rgba(242,184,75,.5)}.boot-steps li.done.s-warn span{color:var(--warn)}
.boot-steps li.done.s-fail::before{background:var(--bad);box-shadow:0 0 10px rgba(242,102,94,.5)}.boot-steps li.done.s-fail span{color:var(--bad-ink)}
.boot-steps.compact{gap:7px;font-size:12.5px}.boot-steps.compact li{grid-template-columns:16px 90px 1fr}
@keyframes pulse-b{0%,100%{box-shadow:0 0 0 3px var(--accent-glow)}50%{box-shadow:0 0 0 7px rgba(110,147,255,.08)}}
@keyframes sweep{to{transform:translateX(100%)}}

/* ---------------------------------------------------------------- welcome after sign-in */
.welcome{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(7,13,26,.86);backdrop-filter:blur(10px);transition:opacity .6s var(--ease)}
.welcome.out{opacity:0;pointer-events:none}
.welcome-card{width:min(380px,calc(100% - 40px));text-align:center;display:grid;justify-items:center;gap:14px;padding:30px;border-radius:20px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-lift)}
.welcome-card .logo{color:var(--hi)}
.welcome-card .boot-steps{width:100%;text-align:left}.welcome-card .boot-line{width:100%;margin:6px 0 0}
.welcome-title{font:400 18px var(--font-brand);color:var(--hi)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
}


/* ---------------------------------------------------------------- leg state: rail, tint, tag */
.leg::before{width:8px}
.leg.s-published{border-color:rgba(60,201,138,.28);background:linear-gradient(180deg,rgba(60,201,138,.10),rgba(60,201,138,.03) 40%),var(--card-grad)}
.leg.s-hold{border-color:rgba(232,163,60,.32);background:linear-gradient(180deg,rgba(232,163,60,.12),rgba(232,163,60,.03) 40%),var(--card-grad)}
.leg.s-blocked{border-color:rgba(242,102,94,.38);background:linear-gradient(180deg,rgba(242,102,94,.14),rgba(242,102,94,.04) 45%),var(--card-grad)}
.leg.s-published:hover{box-shadow:var(--shadow-hover),0 0 0 1px rgba(60,201,138,.25)}.leg.s-hold:hover{box-shadow:var(--shadow-hover),0 0 0 1px rgba(232,163,60,.3)}.leg.s-blocked:hover{box-shadow:var(--shadow-hover),0 0 0 1px rgba(242,102,94,.35)}
.state-tag{position:absolute;top:0;right:0;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;border-radius:0 0 0 14px;font-weight:800;letter-spacing:.4px}
.state-tag svg{width:16px;height:16px}
.state-tag .pill{background:transparent;padding:0;font-size:12px;color:inherit}
.state-tag.s-published{background:rgba(60,201,138,.18);color:var(--good)}
.state-tag.s-hold{background:rgba(232,163,60,.2);color:var(--soon)}
.state-tag.s-blocked{background:rgba(242,102,94,.22);color:var(--bad-ink)}

/* ---------------------------------------------------------------- route graphic and day timeline */
.leg-route .path{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;position:relative;padding-top:6px}
.leg-route .path .arc{width:100%;height:40px;overflow:visible}
.leg-route .path .track{fill:none;stroke:rgba(var(--fg),.14);stroke-width:2}
.leg-route .path circle{fill:var(--ink2)}
.leg-route .path .plane{position:absolute;top:-4px;left:50%;width:22px;height:22px;transform:translateX(-50%) rotate(90deg);fill:#fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.leg-route .path i{font-size:12px;color:var(--ink2);font-weight:600;white-space:nowrap;margin-top:-6px}.leg-route .path i u{text-decoration:none;color:var(--ink4);margin:0 3px}
/* ---------------------------------------------------------------- control deck */
.leg-actions{gap:10px}
.switch{display:inline-flex;padding:3px;border-radius:12px;background:rgba(var(--well),.6);border:1px solid var(--line-strong)}
.switch .sw{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;white-space:nowrap;border:0;border-radius:9px;background:transparent;color:var(--ink3);font:700 12.5px var(--font-ui);cursor:pointer;transition:background .15s,color .15s}
.switch .sw svg{width:14px;height:14px}
.switch .sw:hover:not(:disabled){color:var(--hi);background:rgba(var(--fg),.06)}
.switch .sw.on{color:#04241a;background:linear-gradient(180deg,#5ADBA0,#3CC98A);box-shadow:0 1px 0 rgba(var(--fg),.35) inset,0 6px 16px -8px var(--good);cursor:default}
.switch .sw.hold.on{color:#1a1200;background:linear-gradient(180deg,#F7C55A,#E8A33C);box-shadow:0 1px 0 rgba(var(--fg),.35) inset,0 6px 16px -8px var(--soon)}
.switch .sw:disabled{opacity:1}
.btn.save{display:inline-flex;align-items:center;gap:7px}.btn.save svg{width:14px;height:14px}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--ink2)}.btn.ghost:hover{background:rgba(var(--fg),.06)}

.leg-actions .btn{white-space:nowrap}

/* ---------------------------------------------------------------- breakdown panel inside the card */
.bd-toggle svg{width:14px;height:14px;transition:transform .2s var(--ease)}.bd-toggle{display:inline-flex;align-items:center;gap:6px}
.bd-toggle.open svg{transform:rotate(180deg)}.bd-toggle.open{background:rgba(var(--fg),.08);color:var(--hi)}
.leg-breakdown{grid-area:bd;margin-top:6px;padding:14px 16px 12px;border-radius:14px;background:rgba(var(--well),.5);border:1px solid var(--line)}
.leg-breakdown .bd{width:100%;border-collapse:collapse;font-size:13px}
.leg-breakdown .bd th{text-align:left;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4);padding:4px 8px 8px;border-bottom:1px solid var(--line)}
.leg-breakdown .bd td{padding:7px 8px;border-bottom:1px solid var(--line-soft)}
.leg-breakdown .bd tr.tot td{font-weight:600;border-top:1px solid var(--line);color:var(--ink2)}.leg-breakdown .bd tr.tot small{font-weight:400;color:var(--ink4)}
.leg-breakdown .bd tr.tx td{color:var(--hi);font-size:14px}.leg-breakdown .bd tr.w td{color:var(--soon)}
.bd-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:var(--ink4)}

/* ---------------------------------------------------------------- Flights identity: the name on its board */
.applogo{display:inline-flex;align-items:center;color:var(--hi);font-size:22px;line-height:1}
.applogo.nav{font-size:19px}
.applogo.small{font-size:34px}   /* the welcome card: seven tiles as wide as the small logo above them */
/* splash: the ticket slides in, then the seat outline draws itself */
.welcome-card .applogo{margin-top:-6px}

/* ---------------------------------------------------------------- console panel */
.console{display:grid;grid-template-columns:minmax(300px,1.5fr) repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px;position:relative}
.c-health,.c-tile{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow);padding:14px 16px;min-width:0;position:relative;overflow:hidden}
.c-health{display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.console .lamp{display:flex;align-items:center;gap:12px}
.console .lamp i{width:12px;height:12px;border-radius:50%;background:var(--ink4);box-shadow:0 0 0 4px rgba(var(--fg),.05);flex:none}
.console .lamp b{display:block;font:600 15px var(--font-ui);color:var(--hi)}.console .lamp span{font-size:12px;color:var(--ink4);letter-spacing:.3px}
.console.s-ok .lamp i{background:var(--good);box-shadow:0 0 0 4px var(--good-bg),0 0 18px var(--good);animation:pulse 2.4s var(--ease) infinite}
.console.s-soon .lamp i{background:var(--soon);box-shadow:0 0 0 4px var(--soon-bg)}
.console.s-warn .lamp i{background:var(--bad);box-shadow:0 0 0 4px var(--bad-bg),0 0 18px var(--bad)}
.console.s-none .lamp i{background:var(--ink4)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--good-bg),0 0 18px var(--good)}50%{box-shadow:0 0 0 8px rgba(60,201,138,.05),0 0 6px var(--good)}}
.mixbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:rgba(var(--fg),.06);gap:2px}
.mixbar i{display:block;min-width:0;transition:flex .6s var(--ease)}.mixbar i[style*="flex:0"],.mixbar i[style*="flex: 0"]{display:none}
.mixbar .pub,.mixlegend .pub{background:var(--good)}.mixbar .hold,.mixlegend .hold{background:var(--soon)}.mixbar .blk,.mixlegend .blk{background:var(--bad)}
.mixlegend{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--ink3)}
.mixlegend a{display:inline-flex;align-items:center;gap:6px;color:var(--ink3);text-decoration:none}.mixlegend a:hover{color:var(--hi)}
.mixlegend i{width:8px;height:8px;border-radius:2px;display:inline-block}.mixlegend b{color:var(--hi);font-variant-numeric:tabular-nums}
.c-tile{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
a.c-tile:hover{border-color:var(--line-strong);transform:translateY(-1px);text-decoration:none}
.c-tile .t-head{display:flex;align-items:center;gap:9px}.c-tile .t-head img,.c-tile .t-head svg{width:18px;height:18px;flex:none;color:var(--ink2)}
.c-tile .t-head b{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink2)}.c-tile .t-head span{margin-left:auto;font:600 13px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums}
.c-tile .t-body{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink3);flex:1}.c-tile .t-body b{color:var(--hi);font-weight:600}.c-tile .t-body a{color:var(--accent-2)}
.c-tile .t-body .err{color:var(--bad-ink)}
.c-tile.bad{border-color:rgba(242,102,94,.35);background:linear-gradient(180deg,rgba(242,102,94,.12),rgba(242,102,94,.03) 40%),var(--card-grad)}
.c-tile.alerts .t-head span{background:var(--surface-3);padding:1px 8px;border-radius:9px}.c-tile.alerts.bad .t-head span{background:var(--bad);color:#fff}
.t-act{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:2px;padding:7px 12px;border-radius:9px;border:1px solid var(--line-strong);background:rgba(var(--fg),.04);color:var(--ink);font:600 12px var(--font-ui);cursor:pointer;transition:background .15s,border-color .15s}
.t-act svg{width:13px;height:13px}.t-act:hover{background:rgba(110,147,255,.14);border-color:var(--accent)}
.t-act.busy{opacity:.7;pointer-events:none}.t-act.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.c-note{grid-column:1 / -1;padding:9px 14px;border-radius:10px;font-size:12.5px;border:1px solid var(--line);background:var(--surface)}
.c-note.wait{color:var(--accent-2);border-color:rgba(110,147,255,.35)}.c-note.ok{color:var(--good);border-color:rgba(60,201,138,.35)}.c-note.bad{color:var(--bad-ink);border-color:rgba(242,102,94,.4)}
@media (max-width:1100px){.console{grid-template-columns:1fr 1fr}.c-health{grid-column:1 / -1}}
@media (max-width:720px){.console{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- filter bar */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:0 0 12px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow)}
.filterbar .segments{margin:0}
.filterbar .segments a.k-published.on{background:var(--good-bg);color:var(--good)}.filterbar .segments a.k-hold.on{background:var(--soon-bg);color:var(--soon)}
.filterbar .segments a.k-blocked.on,.filterbar .segments a.k-attention.on{background:var(--bad-bg);color:var(--bad-ink)}
.filterbar .segments a.on b{color:inherit}
.filterbar .search{position:relative;flex:1 1 260px;margin:0;min-width:200px}
.filterbar .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink4)}
.filterbar .search input{margin:0;padding-left:34px;height:38px;border-radius:10px;font-size:13px}
.filterbar .sel{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink4)}
.filterbar .sel select{margin:0;height:38px;width:auto;font-size:13px;border-radius:10px;text-transform:none;letter-spacing:0}
.filterbar .chips{display:inline-flex;gap:4px;padding:3px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.filterbar .chip{border:0;background:transparent;color:var(--ink3);padding:6px 11px;border-radius:8px;font:600 12px var(--font-ui);cursor:pointer;letter-spacing:.2px}
.filterbar .chip:hover{color:var(--hi);background:rgba(var(--fg),.06)}.filterbar .chip.on{background:var(--surface-hi);color:var(--hi);box-shadow:0 1px 0 rgba(var(--fg),.08) inset}
.filterbar .clear{font-size:12.5px;color:var(--ink3);margin-left:auto}.filterbar .clear:hover{color:var(--hi)}
.active{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px;font-size:12.5px;color:var(--ink3)}
.active .tag{display:inline-flex;gap:5px;padding:4px 10px;border-radius:9px;background:rgba(110,147,255,.12);color:var(--accent-2);text-decoration:none;border:1px solid rgba(110,147,255,.3)}.active .tag b{color:var(--hi)}

/* ---------------------------------------------------------------- breakdown, grouped and graphical */
.leg-breakdown[hidden]{display:none}
.leg-breakdown{padding:16px 18px 12px;display:flex;flex-direction:column;gap:14px}
.bd-top{display:flex;flex-direction:column;gap:8px}
.bd-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;background:rgba(var(--fg),.05)}
.bd-bar i{display:block;min-width:4px;transition:flex .4s var(--ease)}
.bd-bar .l-base,.bd-legend .l-base,.bd-group.l-base header b::before{background:var(--accent)}
.bd-bar .l-tax,.bd-legend .l-tax,.bd-group.l-tax header b::before{background:var(--soon)}
.bd-bar .l-fee,.bd-legend .l-fee,.bd-group.l-fee header b::before{background:var(--good)}
.bd-legend{display:flex;gap:16px;font-size:12px;color:var(--ink3)}.bd-legend span{display:inline-flex;align-items:center;gap:6px}.bd-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.bd-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bd-group{border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.025);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bd-group header b{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--hi)}.bd-group header b::before{content:"";width:8px;height:8px;border-radius:2px;display:inline-block}
.bd-group header span{display:block;font-size:12px;color:var(--ink4);margin-top:3px;line-height:1.35}
.bd-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1}
.bd-group li{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--line-soft)}
.bd-group li b{display:block;font-size:13px;color:var(--ink)}.bd-group li small{display:block;color:var(--ink4);font-size:12px;margin-top:2px}
.bd-group li em{font-style:normal;color:var(--hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-group .none{margin:0;color:var(--ink4);font-size:12px;flex:1;padding:8px 0;border-top:1px solid var(--line-soft)}
.bd-group footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink4)}
.bd-group footer em{font-style:normal;color:var(--ink2);font-size:13px;letter-spacing:0;text-transform:none}
.bd-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.bd-totals .tot{border-radius:12px;border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:2px;background:rgba(var(--fg),.025)}
.bd-totals .tot span{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4)}
.bd-totals .tot b{font:700 22px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums}.bd-totals .tot small{font-size:12px;color:var(--ink4)}
.bd-totals .tot.tx{background:linear-gradient(180deg,rgba(110,147,255,.22),rgba(110,147,255,.08));border-color:rgba(110,147,255,.45)}
.bd-totals .tot.tx b{color:var(--hi);text-shadow:0 0 18px var(--accent-glow)}
.bd-totals .tot.ovr{border-color:rgba(232,163,60,.45);background:linear-gradient(180deg,rgba(232,163,60,.16),rgba(232,163,60,.05))}.bd-totals .tot.ovr b{color:var(--soon)}
@media (max-width:900px){.bd-groups{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- leg hero: tall tail with the identity superimposed */
.leg .state-tag{border-radius:0 0 0 14px}


/* ---------------------------------------------------------------- responsive: console and filters */
@media (max-width:1180px){.console{grid-template-columns:1fr 1fr}.c-health{grid-column:1 / -1}.c-tile.alerts{grid-column:1 / -1}}
@media (max-width:720px){.console{grid-template-columns:1fr}.c-tile.alerts{grid-column:auto}}
@media (max-width:900px){.filterbar .segments{flex-basis:100%;overflow-x:auto;scrollbar-width:none}.filterbar .search{flex-basis:100%}.filterbar .clear{margin-left:0}}
.filterbar .segments a{white-space:nowrap}
.pagehead{flex-wrap:wrap;gap:10px 18px}

/* ---------------------------------------------------------------- responsive: leg cards */
@media (max-width:1180px){
  .leg{grid-template-columns:184px minmax(0,1fr);grid-template-areas:"hero route" "hero price" "hero edit" "actions actions" "bd bd";gap:10px 18px}
  .leg-route{padding-top:30px}                                     /* clears the state ribbon in the corner */
  .leg-price{flex-direction:row;align-items:baseline;justify-content:flex-start;text-align:left;gap:10px;flex-wrap:wrap}
  .leg-price .lbl{order:1}.leg-price .amount{order:0}.leg-price .calc{order:2;margin-left:auto}
  .leg-actions{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .leg-actions .who{order:3;flex-basis:100%;text-align:left}
}
@media (max-width:860px){
  .leg{grid-template-columns:1fr;grid-template-areas:"hero" "route" "price" "edit" "actions" "bd";padding:0 16px 16px 8px;gap:12px}
  .leg-route{padding-top:0}
  .leg-route .route{gap:10px}.leg-route .path{min-width:100px}.leg-route .apt b{font-size:24px}
  .leg-actions .btns{justify-content:flex-start}
}
@media (max-width:520px){
  .leg-route .route{grid-template-columns:1fr;grid-template-areas:none}.leg-route .path{width:100%;min-width:0}.leg-route .path .arc{height:26px}
  .leg-price .amount .pv-n{font-size:26px}.leg-price .amount .pv-c{font-size:14px}
}

.c-tile .t-head img.lh{width:20px;height:20px}
.boot-steps li b .step-ic{width:12px;height:12px;object-fit:contain;vertical-align:-2px;margin-right:6px;opacity:.9}

/* ================================================================ people: avatars with a stable colour per person */
.avatar{--c:var(--ink3);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);font:800 12px var(--font-ui);letter-spacing:.04em;flex:none;text-decoration:none}
.avatar.sm{width:24px;height:24px;font-size:12px}
.avatar.sys{border-style:dashed;font-size:12px}
.avatar.on{background:var(--c);color:#0B1220;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
a.avatar:hover{text-decoration:none;transform:translateY(-1px)}
.people{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.people .avatar+.avatar{margin-left:-8px}
.people .hs-sum{margin-left:10px;font-size:12.5px;color:var(--ink3)}

/* ================================================================ price steppers and the reason field */
.fi.stepper{display:flex;align-items:stretch}
.fi.stepper input{flex:1;border-radius:0;text-align:center;padding-right:44px;padding-left:12px}
.fi.stepper .step{width:40px;border:1px solid var(--line-strong);background:rgba(var(--fg),.04);color:var(--ink2);font:600 18px/1 var(--font-ui);cursor:pointer;flex:none}
.fi.stepper .step:first-child{border-radius:11px 0 0 11px;border-right:0}.fi.stepper .step:last-of-type{border-radius:0 11px 11px 0;border-left:0}
.fi.stepper .step:hover{background:rgba(110,147,255,.16);color:var(--hi)}
.fi.stepper em{right:52px}
.field.note input{border-style:dashed}

/* ================================================================ change history: people, price line, events */
.leg-history{grid-column:1 / -1;padding:16px 18px 12px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);margin-top:4px}
.leg-history[hidden]{display:none}
.leg-history.open,.leg-breakdown.open{border-top:0;padding:0;margin:0}
.hs-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hs-now{display:flex;align-items:baseline;gap:10px}.hs-now span{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4)}.hs-now b{font:700 20px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums}.hs-now small{font-size:12px;color:var(--soon)}
.spark{position:relative;border-radius:12px;background:rgba(var(--fg),.025);border:1px solid var(--line);padding:10px 12px 6px}
.spark svg{display:block;width:100%;height:72px}
.spark .base{stroke:rgba(var(--fg),.18);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.spark .line{fill:none;stroke:var(--accent);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spark-marks{position:absolute;left:12px;right:12px;top:10px;height:72px;pointer-events:none}
.spark-marks .mk{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid var(--bg);box-shadow:0 0 0 2px var(--c);transform:translate(-50%,-50%);pointer-events:auto}
.spark-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--ink4);margin-top:4px;letter-spacing:.3px}
.hs-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hs-events li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:start;padding:8px 10px;border-radius:10px}
.hs-events li:hover{background:rgba(var(--fg),.03)}
.hs-events li.price{background:rgba(110,147,255,.06);border:1px solid rgba(110,147,255,.14)}
.hs-events li.sys .ev b{color:var(--ink3)}
.hs-events .ev-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px}.hs-events .ev-line b{color:var(--hi)}.hs-events .ev-line span{color:var(--ink3)}
.hs-events .ev-line em{font-style:normal;color:var(--ink2);padding:1px 7px;border-radius:6px;background:rgba(var(--fg),.05)}.hs-events .ev-line em.new{color:var(--hi);background:rgba(110,147,255,.18)}
.hs-events .arr{width:14px;height:8px;display:inline-block;background:linear-gradient(90deg,var(--ink4),var(--ink4)) center/100% 1.5px no-repeat;position:relative}
.hs-events .arr::after{content:"";position:absolute;right:0;top:1px;width:6px;height:6px;border-top:1.5px solid var(--ink4);border-right:1.5px solid var(--ink4);transform:rotate(45deg)}
.hs-events q{display:block;margin-top:4px;font-size:12.5px;color:var(--ink2);quotes:"“" "”";font-style:italic}
.hs-events time{font-size:12px;color:var(--ink4);white-space:nowrap;padding-top:3px}
.hs-events .ent{color:var(--accent-2);text-decoration:none;font-weight:600}.hs-events .ent:hover{color:var(--hi)}
.hs-toggle b{margin-left:4px;padding:0 6px;border-radius:7px;background:rgba(var(--fg),.1);font-size:12px}

/* ================================================================ activity page */
.people-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.people-filter .avatar+.avatar{margin-left:-6px}
.people-filter .tag{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:9px;background:rgba(110,147,255,.12);color:var(--hi);font-size:12px;margin-left:8px}.people-filter .tag a{color:var(--ink3);text-decoration:none}
.filterbar .count{margin-left:auto;font-size:12.5px;color:var(--ink3)}.filterbar .count .warn{font-style:normal;color:var(--soon)}
.filterbar a.chip{text-decoration:none}
.day{margin:0 0 18px}.day h2{margin:0 0 8px;padding:0 10px}
.hs-events.feed li{background:var(--card-grad);border:1px solid var(--line)}.hs-events.feed li.price{border-color:rgba(110,147,255,.3)}

/* ================================================================ leg detail */
.detail-head{padding-bottom:20px}
.detail-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px;max-width:900px}
.fact{border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.025);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.fact span{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4)}.fact b{font:700 20px var(--font-ui);color:var(--hi)}.fact small{font-size:12px;color:var(--ink4)}
.fact.tx{background:linear-gradient(180deg,rgba(110,147,255,.22),rgba(110,147,255,.08));border-color:rgba(110,147,255,.45)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin:0 0 14px}
.detail-grid .card{margin:0}
.detail-head .reason{margin:14px 0 0;font-size:12.5px;color:var(--bad-ink);padding:8px 12px;border-radius:10px;background:var(--bad-bg);border:1px solid rgba(242,102,94,.3);display:inline-block}
@media (max-width:1100px){.detail-grid{grid-template-columns:1fr}}

/* ================================================================ settings shell */
.setnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.setnav .tile{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow);color:var(--ink2);text-decoration:none;transition:border-color .15s,transform .15s}
.setnav .tile svg{grid-row:1 / span 2;width:30px;height:30px;color:var(--ink3);align-self:center}
.setnav .tile b{font-size:14px;color:var(--hi)}.setnav .tile span{font-size:12px;color:var(--ink4)}.setnav .tile span i{font-style:normal;color:var(--soon)}
.setnav .tile:hover{border-color:var(--line-strong);transform:translateY(-1px);text-decoration:none}
.setnav .tile.on{border-color:rgba(110,147,255,.5);background:linear-gradient(180deg,rgba(110,147,255,.16),rgba(110,147,255,.04) 60%),var(--card-grad)}.setnav .tile.on svg{color:var(--accent-2)}
.setnav .tile.warn:not(.on){border-color:rgba(232,163,60,.35)}
@media (max-width:900px){.setnav{grid-template-columns:1fr 1fr}}

/* ================================================================ pricing rules by layer */
.cconds{display:flex;gap:5px;flex-wrap:wrap}
.cchip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:7px;background:rgba(var(--fg),.06);border:1px solid var(--line);font-size:12px;color:var(--ink2)}.cchip .flag{width:14px;height:10.5px;border-radius:2px}.cchip.any{color:var(--ink4);border-style:dashed}
.vpill{display:inline-block;padding:2px 8px;border-radius:7px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:var(--surface-3);color:var(--ink2)}
.vpill.active{background:var(--good-bg);color:var(--good)}.vpill.upcoming{background:rgba(110,147,255,.16);color:var(--accent-2)}.vpill.expired{background:var(--bad-bg);color:var(--bad-ink)}

/* ================================================================ rule editor */
.rule-editor{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.rule-editor .card{margin:0}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.ed-head h1{margin:0}.ed-head .who{display:inline-flex;align-items:center;gap:8px}
.ed-sec{border:0;padding:14px 0;margin:0;border-top:1px solid var(--line-soft)}
.ed-sec legend{padding:0 0 10px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink2);font-weight:700}.ed-sec legend small{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink4);margin-left:8px}
.segs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.segs.small{display:inline-flex;gap:0;padding:3px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.seg{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.025);cursor:pointer;margin:0;color:var(--ink2)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg b{font-size:13px;color:var(--hi)}.seg small{font-size:12px;color:var(--ink4)}
.seg:has(input:checked){border-color:var(--accent);background:rgba(110,147,255,.14);box-shadow:0 0 0 3px var(--accent-glow)}
.seg.l-tax:has(input:checked){border-color:var(--soon);background:var(--soon-bg);box-shadow:0 0 0 3px rgba(232,163,60,.2)}.seg.l-fee:has(input:checked){border-color:var(--good);background:var(--good-bg);box-shadow:0 0 0 3px rgba(60,201,138,.2)}
.segs.small .seg{padding:7px 14px;border:0;background:transparent;border-radius:8px;box-shadow:none}.segs.small .seg b{font-size:12.5px;color:var(--ink3)}
.segs.small .seg:has(input:checked){background:var(--surface-hi);box-shadow:none}.segs.small .seg:has(input:checked) b{color:var(--hi)}
.ed-grid{display:grid;gap:12px}.ed-grid.amount{grid-template-columns:minmax(0,1.6fr) 180px 90px auto;align-items:end}
.ed-grid.matches{grid-template-columns:repeat(4,minmax(0,1fr))}.ed-grid.validity{grid-template-columns:200px 200px}.ed-grid.airports{grid-template-columns:100px 100px minmax(0,2fr) 90px minmax(0,1fr) 120px 120px}
.field input.big{font-size:22px;font-weight:700;height:52px}
.ed-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line-soft)}
.ed-actions.sticky{position:sticky;bottom:12px;padding:12px 16px;border-radius:14px;background:rgba(15,22,43,.92);border:1px solid var(--line);backdrop-filter:blur(10px)}
.delta{font-size:12px;font-weight:700;padding:1px 6px;border-radius:6px}.delta.up{background:var(--good-bg);color:var(--good)}.delta.down{background:var(--bad-bg);color:var(--bad-ink)}
@media (max-width:1100px){.rule-editor{grid-template-columns:1fr}.ed-grid.matches{grid-template-columns:1fr 1fr}.ed-grid.amount{grid-template-columns:1fr 1fr}}

/* ================================================================ aircraft cards */
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tailcard{display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow);overflow:hidden;margin:0}
.tailcard.inactive{opacity:.6}
.tc-hero{position:relative;padding:14px 14px 8px;display:flex;flex-direction:column;gap:6px;background:radial-gradient(120% 100% at 50% 100%,rgba(110,147,255,.18),transparent 60%),linear-gradient(180deg,rgba(var(--fg),.03),rgba(var(--well),.35));overflow:hidden}
/* the whole tail, stabiliser tips included, across the card under its registration (the -full render) */
.tc-hero img{display:block;width:100%;height:auto;aspect-ratio:1200/620;object-fit:contain;margin-top:-4px;filter:drop-shadow(0 14px 20px rgba(0,0,0,.55))}
.tc-hero .tc-reg{order:-1;align-self:flex-start;font:800 20px var(--font-ui);color:var(--hi);letter-spacing:.03em;padding-right:72px}
.tc-hero .tc-type{position:absolute;right:12px;top:12px;padding:3px 9px;border-radius:8px;background:rgba(var(--well),.7);border:1px solid var(--line-strong);font:700 12px var(--font-ui);color:var(--accent-2);letter-spacing:.6px}
.tc-hero.empty{min-height:150px;align-items:center;justify-content:center;border-bottom:1px dashed var(--line)}.tc-hero.empty .tc-reg{color:var(--ink4);font-size:16px;padding-right:0}
.tc-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px 4px}
.tc-fields .field input{height:40px;font-size:14px}
.tc-actions{display:flex;align-items:center;gap:8px;padding:10px 14px 14px}.tc-actions .grow{flex:1}
.toggle{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;font-size:12px;color:var(--ink2)}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle i{width:34px;height:20px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line-strong);position:relative;transition:background .15s}
.toggle i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--ink3);transition:transform .15s,background .15s}
.toggle:has(input:checked) i{background:rgba(60,201,138,.35);border-color:var(--good)}.toggle:has(input:checked) i::after{transform:translateX(14px);background:var(--good)}
/* the real radio or checkbox inside a .seg or .toggle is invisible, so keyboard focus shows on the control drawn for it */
.seg:has(input:focus-visible),.toggle:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.toggle{border-radius:6px}
.btn.dgr.ghost{border-color:rgba(242,102,94,.3)}

/* ================================================================ airport rows and account rows */
.apt-editor{margin:0 0 14px}.apt-editor h2{margin-bottom:12px}
.apt-rows{display:flex;flex-direction:column;gap:6px}
.apt-row{display:grid;grid-template-columns:36px 90px minmax(0,1.6fr) minmax(0,1fr) 150px auto;gap:16px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card-grad)}
.apt-row.bad{border-color:rgba(242,102,94,.35);background:linear-gradient(180deg,rgba(242,102,94,.1),rgba(242,102,94,.03)),var(--card-grad)}
.apt-row .flag{width:32px;height:24px;border-radius:4px;box-shadow:0 0 0 1px rgba(var(--fg),.12)}.apt-row .flag.none{display:inline-block;background:var(--surface-3)}
.ar-codes b{display:block;font:800 18px var(--font-ui);color:var(--hi);letter-spacing:.04em}.ar-codes small{color:var(--ink4)}
.ar-name b{display:block;font-size:13.5px;color:var(--hi)}.ar-name small{font-size:12px;color:var(--ink4)}
.ar-geo{font-size:12px;color:var(--ink3)}.ar-geo small{display:block;font-size:12px;color:var(--ink4);letter-spacing:.8px;text-transform:uppercase;font-family:var(--font-ui)}
.ar-actions{display:flex;gap:6px;justify-content:flex-end}.ar-actions .inline{display:inline}
.apt-row.user{grid-template-columns:36px minmax(0,1.6fr) 130px minmax(0,1fr) auto}
@media (max-width:900px){.apt-row{grid-template-columns:36px 80px minmax(0,1fr) auto}.ar-geo,.ar-state{display:none}.ed-grid.airports{grid-template-columns:1fr 1fr}}

/* ================================================================ general settings */
.gset header{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}.gset header h2{margin:0}.gset header span{font-size:12px;color:var(--ink4)}
.grow-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;padding:14px 0;border-top:1px solid var(--line-soft);align-items:start}
.gl b{display:block;font-size:13.5px;color:var(--hi);text-transform:capitalize}.gl small{display:block;font-size:12px;color:var(--ink3);margin:3px 0 6px;line-height:1.45}
.changed{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink4)}
.gi input,.gi textarea{margin:0}
textarea{display:block;width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:10px;font:inherit;background:rgba(var(--well),.6);color:var(--ink);resize:vertical;line-height:1.45}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
textarea.mono{font-family:var(--mono);font-size:12.5px}
@media (max-width:800px){.grow-row{grid-template-columns:1fr}}

/* ================================================================ uploads and alerts */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.tile-s{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tile-s>span{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink4)}.tile-s>span small{text-transform:none;letter-spacing:0;margin-left:6px}
.tile-s b{font:700 20px var(--font-ui);color:var(--hi)}.tile-s small{font-size:12px;color:var(--ink3)}
.tile-s.ok{border-color:rgba(60,201,138,.3)}.tile-s.bad{border-color:rgba(232,163,60,.35)}
.tile-s .dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin:0 4px 0 8px;vertical-align:1px}.tile-s .dot.ok{background:var(--good);margin-left:0}.tile-s .dot.bad{background:var(--bad)}.tile-s .dot.skip{background:var(--ink4)}
.bars{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:6px}
.bars i{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:var(--ink4);min-height:3px}.bars i.o-ok{background:var(--good)}.bars i.o-failed{background:var(--bad)}.bars i.o-skipped_unchanged{background:rgba(var(--fg),.14)}
.uplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.uplist li{display:grid;grid-template-columns:14px 170px auto auto 70px 190px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card-grad)}
.uplist li.none{display:block;border:0;background:none;padding:0}
.uplist .lamp{width:10px;height:10px;border-radius:50%;background:var(--ink4)}.uplist li.o-ok .lamp{background:var(--good);box-shadow:0 0 10px var(--good)}.uplist li.o-failed .lamp{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.uplist li.o-failed{border-color:rgba(242,102,94,.3)}
.up-when b{display:block;font-size:13px;color:var(--hi)}.up-when small{color:var(--ink4)}
.up-legs b{font:700 16px var(--font-ui);color:var(--hi)}.up-legs small{color:var(--ink4);margin-left:4px}
.up-hash small{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink4)}.up-hash code{color:var(--ink2)}
.up-msg{font-size:12.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-act .btn small{color:var(--ink4);margin-left:4px;font-weight:400}
.uplist.alerts li{grid-template-columns:14px 170px minmax(0,1fr) minmax(0,1.6fr) 150px}
.uplist.attempts li{grid-template-columns:14px 170px minmax(0,1fr) auto}     /* failed sign-ins: when, the email tried, from where */
.up-kind b{font-size:13px;color:var(--hi)}.up-cleared small{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink4)}
.alerts-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin:0 0 16px}
.alert-card{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-lg);border:1px solid rgba(242,102,94,.4);background:linear-gradient(180deg,rgba(242,102,94,.16),rgba(242,102,94,.04)),var(--card-grad)}
.alert-card .lamp{width:12px;height:12px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 4px var(--bad-bg),0 0 16px var(--bad);margin-top:4px;flex:none}
.alert-card b{display:block;color:var(--hi);font-size:14px}.alert-card span{display:block;font-size:12.5px;color:var(--ink2);margin:3px 0}.alert-card small{color:var(--ink4)}
/* narrower: the hash goes, and so does an accepted upload's message; a failed upload's reason and an
   alert's message move to a full-width line of their own (order puts them last). The email tried in
   a failed sign-in keeps its column */
@media (max-width:1100px){.tiles{grid-template-columns:1fr 1fr}.uplist li{grid-template-columns:14px 150px auto auto minmax(0,1fr) auto}.up-hash,.up-msg{display:none}
  .uplist.alerts li{grid-template-columns:14px 150px minmax(0,1fr) auto}.uplist.attempts li{grid-template-columns:14px 150px minmax(0,1fr) auto}
  .uplist.alerts .up-msg,.uplist li.o-failed .up-msg{display:block;grid-column:2 / -1;order:1;white-space:normal}
  .uplist.attempts li .up-msg{display:block;grid-column:auto;order:0;white-space:nowrap}}
/* phones: a row wraps instead of pushing Download off the screen */
@media (max-width:600px){
  .uplist li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .uplist .lamp{flex:none}.uplist .up-when{flex:1 1 auto;min-width:0}
  .uplist.alerts .up-msg,.uplist li.o-failed .up-msg{flex:1 1 100%;min-width:0}.uplist.attempts li .up-msg{flex:1 1 100%;order:1;white-space:normal;overflow-wrap:anywhere}
  .uplist .up-act{flex:1 1 100%;order:2}.uplist .up-act:empty{display:none}}
/* action deck: Save on its own row, the two panel toggles beneath */
.leg-actions .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:268px}
.leg-actions .btns .save{grid-column:1 / -1;justify-content:center}
.leg-actions .btns .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px}
.leg-actions .btns .btn svg{width:14px;height:14px;flex:none}
@media (max-width:1180px){.leg-actions .btns{grid-template-columns:auto auto auto;width:auto;max-width:none}.leg-actions .btns .save{grid-column:auto}}

/* ================================================================ offer deck: graphical fields */
.field .fl{display:flex;align-items:center;gap:6px}.field .fl svg{width:14px;height:14px;color:var(--accent-2);flex:none}
.seatrow{display:flex;gap:3px;margin-top:2px}
.seatrow .seat{width:14px;height:14px;fill:rgba(var(--fg),.12);transition:fill .15s}.seatrow .seat.on{fill:var(--accent)}
.fi.stepper input{padding-left:8px;padding-right:8px}
.fi.money .cur{position:absolute;left:46px;top:50%;transform:translateY(-50%);font:700 14px var(--font-ui);color:var(--accent-2);pointer-events:none;z-index:1}
.fi.money input{padding-left:26px;text-align:right;padding-right:10px}
.fi.icon svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink4);pointer-events:none}
.fi.icon input{padding-left:36px}
.field small .ovr{color:var(--soon);text-transform:uppercase;letter-spacing:.6px;font-size:12px}
.field.note input{border-style:dashed}
.field .fl{white-space:nowrap;min-width:0}.field .fl i{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* hints under the fields carry the explanation and may wrap; placeholders stay short */
.field small{line-height:1.4;white-space:normal}
.field input{font-size:15px}
.fi.icon input{padding-left:34px}
/* the offer fields' columns, one set per width and the only .fields columns in this file: an
   unconditional rule after the narrow ones would win at every width and cut the fields off on a phone */
.fields{grid-template-columns:196px 220px minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1180px){.fields{grid-template-columns:160px 210px minmax(0,1fr) minmax(0,1fr)}.field.wide{grid-column:span 2}}
@media (max-width:860px){.fields{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fields{grid-template-columns:1fr}.field.wide{grid-column:auto}}

/* ================================================================ partner tiles: the logos carry the indicator */
.c-tile.partner{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:10px;align-items:start;padding:14px 16px 14px 14px}
.c-tile.partner .badge{grid-row:1 / span 2;position:relative;width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#2A3670,#141B3F);box-shadow:0 10px 24px -12px rgba(0,0,0,.9),0 1px 0 rgba(var(--fg),.12) inset;border:1px solid rgba(var(--fg),.1)}
.c-tile.partner .badge img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.c-tile.partner .badge.lh{background:linear-gradient(160deg,#0B2168,#05164D)}
.c-tile.partner .badge.lh img{width:42px;height:42px}
.c-tile.partner .badge .lamp{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;background:var(--ink4);border:3px solid var(--surface)}
.c-tile.partner.s-ok .badge .lamp{background:var(--good);box-shadow:0 0 10px var(--good);animation:pulse-sm 2.4s var(--ease) infinite}
.c-tile.partner.s-soon .badge .lamp{background:var(--soon)}.c-tile.partner.s-warn .badge .lamp{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.c-tile.partner.s-warn .badge{border-color:rgba(242,102,94,.5)}.c-tile.partner.s-warn .badge img{filter:saturate(.3) brightness(.85)}
@keyframes pulse-sm{0%,100%{box-shadow:0 0 0 0 rgba(60,201,138,.5),0 0 10px var(--good)}50%{box-shadow:0 0 0 5px rgba(60,201,138,0),0 0 4px var(--good)}}
.c-tile.partner .t-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.c-tile.partner .t-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.c-tile.partner .t-head b{font:700 15px var(--font-ui);color:var(--hi);letter-spacing:0;text-transform:none}.c-tile.partner .t-head .sub{font-size:12px;color:var(--ink4);margin-left:0}
.c-tile.partner .t-status{font:600 13px var(--font-ui);color:var(--good)}
.c-tile.partner.s-soon .t-status{color:var(--soon)}.c-tile.partner.s-warn .t-status{color:var(--bad-ink)}.c-tile.partner.s-none .t-status{color:var(--ink3)}
.c-tile.partner .t-body{flex-direction:row;gap:12px;flex-wrap:wrap;font-size:12px}
.c-tile.partner .t-act{grid-column:2;margin-top:0}
.c-tile.partner.busy .badge .lamp,.c-tile.partner .t-act.busy~.badge .lamp{background:var(--accent)}
@media (max-width:720px){.c-tile.partner{grid-template-columns:52px minmax(0,1fr)}.c-tile.partner .badge{width:52px;height:52px;border-radius:14px}.c-tile.partner .badge img{width:30px;height:30px}}

/* ================================================================ per-leg cost lines */
.extras{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.ex-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink2)}.ex-label svg{width:13px;height:13px;color:var(--accent-2)}.ex-label i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink4)}
.ex-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 10px;border-radius:9px;border:1px solid var(--line-strong);background:rgba(var(--fg),.04);font-size:12px}
.ex-chip b{color:var(--hi);font-weight:600}.ex-chip em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}.ex-chip small{color:var(--ink4);font-size:12px}
.ex-chip.l-tax{border-color:rgba(232,163,60,.4);background:rgba(232,163,60,.08)}.ex-chip.l-fee{border-color:rgba(60,201,138,.4);background:rgba(60,201,138,.08)}
.ex-chip .ex-rm{border:0;background:transparent;color:var(--ink4);font-size:15px;line-height:1;cursor:pointer;padding:0 4px;border-radius:5px}.ex-chip .ex-rm:hover{color:var(--hi);background:var(--bad-bg)}
.ex-add{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ex-add input,.ex-add select{margin:0;height:34px;padding:6px 10px;font-size:13px;border-radius:9px;width:auto}
.ex-add input[name=name]{width:170px}.ex-add .ex-amt{position:relative}.ex-add .ex-amt input{width:96px;padding-left:24px;text-align:right}.ex-add .ex-amt .cur{position:absolute;left:9px;top:50%;transform:translateY(-50%);font:700 12px var(--font-ui);color:var(--accent-2)}
.ex-add select{padding-right:26px}
.btn.sm{padding:6px 12px;font-size:12.5px}
.bd-group li.extra{background:rgba(var(--fg),.03);margin:0 -6px;padding:7px 6px;border-radius:8px;border-top:0}
.xtag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:rgba(110,147,255,.18);color:var(--accent-2);vertical-align:1px}
@media (max-width:860px){.ex-add{margin-left:0;flex-wrap:wrap}}









































.btn.save .long{margin-left:0}




/* ================================================================ manual */
.manual{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.manual-toc{position:sticky;top:76px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-grad);font-size:12.5px;max-height:calc(100vh - 100px);overflow:auto}
.manual-toc ul{list-style:none;margin:0;padding:0}.manual-toc li{margin:0}.manual-toc > ul > li{margin:0 0 6px}
.manual-toc a{display:block;color:var(--ink2);text-decoration:none;padding:3px 0}.manual-toc a:hover{color:var(--hi)}
.manual-toc ul ul{padding-left:12px;border-left:1px solid var(--line-soft);margin:2px 0 6px}.manual-toc ul ul a{color:var(--ink3);font-size:12px}
.manual-body{min-width:0;max-width:960px}
.manual-body h2{font:400 26px/1.15 var(--font-brand);letter-spacing:.2px;text-transform:none;color:var(--hi);margin:36px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.manual-body h2:first-child{margin-top:0;border-top:0;padding-top:0}
.manual-body h3{font:600 15px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi);margin:24px 0 8px}
.manual-body p,.manual-body li{font-size:13.5px;line-height:1.6;color:var(--ink2)}.manual-body li{margin:0 0 4px}
.manual-body strong{color:var(--hi)}.manual-body code{font-family:var(--mono);font-size:12px;background:rgba(var(--fg),.06);padding:1px 6px;border-radius:5px}
.manual-body img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line-strong);box-shadow:var(--shadow-lift);margin:12px 0 18px}
.manual-body table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0 16px}.manual-body th{text-align:left;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--line)}
.manual-body td{padding:8px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink2);vertical-align:top}
.manual-body blockquote{margin:12px 0;padding:10px 14px;border-left:3px solid var(--accent);background:rgba(110,147,255,.08);border-radius:0 10px 10px 0}.manual-body blockquote p{margin:0}
@media (max-width:1000px){.manual{grid-template-columns:1fr}.manual-toc{position:static;max-height:none}}

/* ================================================================ aircraft type colours
   One hue per type, spread far apart and kept clear of the state colours (green published,
   amber on hold, red blocked) and of the accent blue, so a type is never read as a state.
   A variant such as CJ3+ slugs to cj3 and inherits the family colour. */
.t-cj1{--type:#6ED0F5}
.t-cj2{--type:#38C6DE}
.t-cj3{--type:#A98BFF}
.t-cj4{--type:#F58FC6}
.t-unknown{--type:var(--ink3)}
[data-theme=light] .t-cj1{--type:#0A6F96}[data-theme=light] .t-cj2{--type:#0B6E80}[data-theme=light] .t-cj3{--type:#5B3DC4}[data-theme=light] .t-cj4{--type:#B02A5B}

/* the type badge on a leg card: bigger than the call sign beside it, and tinted */

/* the type filter chips */
.filterbar .chip.type{font:700 13.5px var(--font-ui);letter-spacing:.08em;padding:7px 14px;color:var(--type,var(--ink3))}
.filterbar .chip.type:hover{color:var(--hi);background:color-mix(in srgb,var(--type,#fff) 18%,transparent)}
.filterbar .chip.type.on{color:var(--hi);background:color-mix(in srgb,var(--type,var(--accent)) 30%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--type,var(--accent)) 60%,transparent) inset}

/* aircraft card corner badge */
.tc-hero .tc-type{font:800 14px/1 var(--font-ui);letter-spacing:.1em;padding:6px 11px;border-radius:10px;
  color:var(--type,var(--accent-2));
  border-color:color-mix(in srgb,var(--type,var(--accent-2)) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--type,var(--accent-2)) 24%,rgba(var(--well),.8)),rgba(var(--well),.86))}

/* the aircraft-type condition on a pricing rule */
.cchip.type{font:700 12px var(--font-ui);letter-spacing:.06em;padding:3px 9px;color:var(--type,var(--ink2));
  border-color:color-mix(in srgb,var(--type,var(--line)) 45%,transparent);
  background:color-mix(in srgb,var(--type,#fff) 14%,transparent)}



/* ================================================================ the schedule, made legible
   Times, block time and distance were quieter than the airport codes and the price, which put the
   operationally useful numbers last. UTC leads because that is what the file, Leon and Lufthansa all
   speak; local sits beneath it as the human check. */
.leg-route .day{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink2);letter-spacing:.1px}
.leg-route .day svg{width:15px;height:15px;color:var(--ink4);flex:none}
.leg-route .day b{color:var(--hi);font-weight:700}
.leg-route .day .mono{color:var(--ink3);font-weight:400;font-size:12.5px}

/* the airport block: room between the flag, the code and the times */
.leg-route .apt{column-gap:13px;row-gap:4px}
.leg-route .apt.arr{column-gap:13px}
.leg-route .route{gap:18px}

/* UTC large, local small beneath it; tabular figures so departure and arrival line up */
.leg-route .apt em{font-style:normal;display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.2;padding-top:1px}
.leg-route .apt em u{text-decoration:none;font:700 22px/1.15 var(--font-ui);color:var(--hi);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:0}
.leg-route .apt em span{font:400 12px/1.2 var(--mono);color:var(--ink3);letter-spacing:-.02em;white-space:nowrap}
.leg-route .apt.arr em{align-items:flex-end;justify-content:flex-start;gap:1px}
.leg-route .apt.arr em u{order:0;margin:0}          /* the block stacks now, so the old mirror-order is wrong */
.leg-route .apt.arr em span{order:0}

/* block time and distance as two figures under the arc */
.leg-route .path i.meta{display:flex;align-items:center;gap:8px;margin-top:0;font-style:normal;white-space:nowrap}
.leg-route .path i.meta b{font:700 14px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums;
  padding:2px 9px;border-radius:8px;background:rgba(var(--fg),.07);border:1px solid var(--line)}
.leg-route .path i.meta span{font:600 12.5px var(--font-ui);color:var(--ink2);font-variant-numeric:tabular-nums}













/* ================================================================ the legs overview
   One row per leg, grouped by departure day; a row opens its full card in place. */
.nextfile{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--card-grad);color:var(--ink2);text-decoration:none;font-size:13px}
.nextfile svg{width:16px;height:16px;color:var(--ink3);flex:none}
.nextfile b{color:var(--hi)}.nextfile em{margin-left:auto;font-style:normal;color:var(--accent-2);font-weight:600}
.nextfile:hover{border-color:var(--line-strong);text-decoration:none}
.nextfile.pending{border-color:rgba(110,147,255,.45);background:linear-gradient(180deg,rgba(110,147,255,.14),rgba(110,147,255,.04)),var(--card-grad)}
.nextfile.pending svg{color:var(--accent-2)}

.filterbar details.more{position:relative}
.filterbar details.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;
  border-radius:10px;border:1px solid var(--line-strong);color:var(--ink2);font:600 13px var(--font-ui);user-select:none}
.filterbar details.more summary::-webkit-details-marker{display:none}
.filterbar details.more summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:4px}
.filterbar details.more[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.filterbar details.more summary b{padding:0 7px;border-radius:7px;background:var(--accent);color:var(--accent-ink);font-size:12px}
.filterbar details.more[open]{flex-basis:100%}
.filterbar details.more[open] summary{margin-bottom:10px}
.filterbar .more-body{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.attention-line{margin:0 0 12px;font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.lgroup{margin:0 0 18px}
.lgroup-head{margin:0 0 8px;font:600 15px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi);display:flex;align-items:baseline;gap:10px}
.lgroup-head small{font:400 13px var(--font-ui);color:var(--ink3);letter-spacing:0;text-transform:none;margin:0}
.ltable{display:flex;flex-direction:column;gap:6px}

.lrow{border-radius:12px;border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow);overflow:hidden;position:relative}
.lrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ink4)}
.lrow.s-published::before{background:var(--good)}.lrow.s-hold::before{background:var(--soon)}.lrow.s-blocked::before{background:var(--bad)}
.lrow.s-blocked{border-color:rgba(242,102,94,.35)}
.lrow:hover{border-color:var(--line-strong)}
.lrow.open{border-color:rgba(110,147,255,.5);border-bottom-left-radius:0;border-bottom-right-radius:0}
.lrow.dirty{border-color:rgba(232,163,60,.6)}

.lr{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;align-items:center;gap:16px;padding:8px 14px 8px 16px;
  grid-template-columns:150px minmax(150px,1.3fr) 118px 96px 80px 78px 120px minmax(110px,1fr) 18px}
.lr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.lr-tail{display:flex;align-items:center;gap:10px;min-width:0}
.lr-tail img{width:40px;height:44px;object-fit:cover;object-position:50% 38%;border-radius:8px;background:rgba(var(--fg),.04);flex:none}
.lr-tail > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.lr-tail b{font:700 15px var(--font-ui);color:var(--hi);letter-spacing:.02em}
.tpill{align-self:flex-start;padding:1px 8px;border-radius:7px;font:800 12px/1.5 var(--font-ui);letter-spacing:.08em;
  color:var(--type,var(--accent-2));background:color-mix(in srgb,var(--type,var(--accent-2)) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--type,var(--accent-2)) 45%,transparent)}
.lr-route{display:flex;align-items:center;gap:8px;min-width:0}
.lr-route b{font:700 20px var(--font-ui);color:var(--hi);letter-spacing:.02em}
.lr-route .flag{width:22px;height:16.5px;border-radius:3px;box-shadow:0 0 0 1px rgba(var(--fg),.12);flex:none}
.lr-route .arw{width:28px;height:2px;background:linear-gradient(90deg,var(--ink4),var(--accent-2));position:relative;flex:none}
.lr-route .arw::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:2px solid var(--accent-2);border-right:2px solid var(--accent-2);transform:rotate(45deg)}
.lr-dep{display:flex;flex-direction:column;gap:1px}
.lr-dep b{font:700 17px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums}
.lr-dep small{font-size:12px;color:var(--ink3);white-space:nowrap}
.lr-count{font:600 13px var(--font-ui);padding:3px 9px;border-radius:8px;justify-self:start;white-space:nowrap;
  background:rgba(var(--fg),.06);color:var(--ink2);font-variant-numeric:tabular-nums}
.lr-count.u-near{background:rgba(242,102,94,.16);color:var(--bad-ink)}
.lr-count.u-day{background:rgba(232,163,60,.14);color:var(--soon)}
.lr-count.u-gone{color:var(--ink3)}
.lr-block,.lr-seats{display:flex;flex-direction:column;gap:1px;font:600 14px var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.lr-block small,.lr-seats small{font:400 12px var(--font-ui);color:var(--ink3)}
.lr-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.lr-price .pv-n{font-size:19px}.lr-price .pv-c{font-size:12px}.lr-price .pv-cur{font-size:10px}
.lr-price .pv-note{font-size:11px;color:var(--soon);white-space:nowrap}
.lr-flags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.lr-chev{width:9px;height:9px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin-top:-4px;justify-self:end;transition:transform .15s}
.lrow.open .lr-chev{transform:rotate(-135deg);margin-top:4px}

.lflag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:8px;font:700 12px/1.4 var(--font-ui);white-space:nowrap;
  max-width:220px;overflow:hidden;text-overflow:ellipsis;background:rgba(var(--fg),.07);color:var(--ink2)}
.lflag.new{background:rgba(110,147,255,.2);color:var(--hi)}
.lflag.check{background:rgba(232,163,60,.16);color:var(--soon)}
.lflag.hold{background:rgba(232,163,60,.16);color:var(--soon)}
.lflag.blocked{background:var(--bad-bg);color:var(--bad-ink)}
.lflag.dirty{background:rgba(232,163,60,.9);color:#1a1200}

/* the card under an open row */
.ltable form.leg{margin:-7px 0 6px;border-top-left-radius:0;border-top-right-radius:0;border-color:rgba(110,147,255,.5)}
.ltable form.leg.dirty{border-color:rgba(232,163,60,.6)}
.dirty-note{align-self:flex-end;padding:3px 10px;border-radius:8px;background:rgba(232,163,60,.9);color:#1a1200;font:700 12px var(--font-ui)}
.checked-note{display:block;text-align:right;font-size:12px;color:var(--good)}
.checked-note.todo{color:var(--soon)}
.leg-price .amount .unsaved{display:block;font:italic 600 12px var(--font-ui);color:var(--soon);margin-top:4px;text-align:right}

@media (max-width:1300px){
  .lr{grid-template-columns:140px minmax(140px,1.3fr) 110px 90px 64px 110px minmax(90px,1fr) 18px}
  .lr-seats{display:none}
}
@media (max-width:1100px){
  .lr{grid-template-columns:130px minmax(130px,1fr) 104px 88px 104px 18px;grid-template-areas:"tail route dep count price chev" "flags flags flags flags flags flags";row-gap:6px}
  .lr-block{display:none}
  .lr-tail{grid-area:tail}.lr-route{grid-area:route}.lr-dep{grid-area:dep}.lr-count{grid-area:count}.lr-price{grid-area:price}.lr-chev{grid-area:chev}
  .lr-flags{grid-area:flags;justify-content:flex-start}.lr-flags:empty{display:none}
}
@media (max-width:760px){
  .lr{grid-template-columns:1fr auto;grid-template-areas:"tail price" "route route" "dep count" "flags flags";gap:8px}
  .lr-chev{display:none}
  .lr-count{justify-self:end}
}

.c-tile.partner.s-local .badge .lamp{background:var(--ink3)}
.c-tile.partner.s-local .t-status{color:var(--ink2)}
.notice.local{margin:0 0 14px;padding:12px 16px;border-radius:12px;border:1px solid rgba(149,163,189,.45);background:rgba(149,163,189,.08);color:var(--ink2);font-size:13px}
.notice.local b{color:var(--hi)}.notice.local code{color:var(--hi)}

/* the next file on the Uploads page */
.nextcard .nc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nextcard .nc-head h2{margin:0 0 4px}.nextcard .nc-head span{font-size:13px;color:var(--ink2)}
.ndiff{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ndiff li{display:grid;grid-template-columns:90px 120px 220px minmax(0,1fr);gap:14px;align-items:center;padding:9px 12px;border-radius:10px;
  background:rgba(var(--fg),.03);border:1px solid var(--line-soft);font-size:13px}
.ndiff .nd-kind{font:700 12px var(--font-ui);padding:2px 8px;border-radius:7px;justify-self:start}
.ndiff .add .nd-kind{background:var(--good-bg);color:var(--good)}
.ndiff .chg .nd-kind{background:rgba(110,147,255,.18);color:var(--accent-2)}
.ndiff .rem .nd-kind{background:var(--bad-bg);color:var(--bad-ink)}
.ndiff b{color:var(--hi)}.ndiff em{font-style:normal;color:var(--ink2);display:flex;flex-wrap:wrap;gap:10px}
.ndiff .nd-ch i{font-style:normal;color:var(--hi)}
@media (max-width:900px){.ndiff li{grid-template-columns:1fr 1fr}}

/* the hidden attribute always wins over a component's own display rule */
[hidden]{display:none !important}

.gl b{text-transform:none}

/* ================================================================ account page */
.acct{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:14px;align-items:start}
.acct .card{margin:0}
.acct-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}.acct-head h1{margin:0}.acct-head .lede{margin:2px 0 0}
.acct-head .avatar{width:44px;height:44px;font-size:14px}
.acct-head .warn{color:var(--soon);font-style:normal}
.confirm-box{margin:6px 0 14px;padding:12px 14px 2px;border-radius:12px;border:1px dashed rgba(110,147,255,.45);background:rgba(110,147,255,.06)}
.acct-more{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
.acct-more h2{margin:0 0 10px}
.acct-actions{display:flex;flex-wrap:wrap;gap:8px}
.acct-history h2{margin-bottom:10px}
@media (max-width:1000px){.acct{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- the 48-hour strip: its own sky, lighter than the deck */
:root{
  --tp-bg:linear-gradient(180deg,#131E3B 0%,#0E1731 100%); --tp-edge:rgba(157,182,255,.12); --tp-sep:rgba(157,182,255,.14);
  --tp-line:rgba(157,182,255,.26); --tp-tick:rgba(157,182,255,.22); --tp-tick-day:rgba(157,182,255,.36); --tp-band:rgba(157,182,255,.05);
  --tp-ink:#DCE5F7; --tp-dim:#93A5C9; --tp-faint:#8195BC; --tp-strong:#FFFFFF;
  --tp-dot:#7FA0FF; --tp-ring:#0F1832; --tp-dot-glow:rgba(127,160,255,.55); --tp-now:#9DB6FF; --tp-now-glow:rgba(157,182,255,.7); --tp-hold:#F2B84B;
  --tp-grid:rgba(157,182,255,.07); --tp-head:rgba(157,182,255,.1);
  --tp-bar:linear-gradient(180deg,rgba(138,168,255,.62),rgba(104,140,245,.36)); --tp-bar-edge:rgba(196,211,255,.6); --tp-bar-glow:rgba(110,147,255,.5);
  --tp-bar-hold:linear-gradient(180deg,rgba(246,194,98,.55),rgba(226,160,48,.3)); --tp-bar-hold-edge:rgba(250,212,140,.62); --tp-bar-hold-glow:rgba(242,184,75,.4);
  --tp-bar-bad:linear-gradient(180deg,rgba(246,120,112,.6),rgba(222,82,74,.34)); --tp-bar-bad-edge:rgba(255,176,168,.62); --tp-bar-bad-glow:rgba(242,102,94,.45)}
html[data-theme=light]{
  --tp-bg:linear-gradient(180deg,#E4EDFA 0%,#F2F6FC 100%); --tp-edge:rgba(31,63,140,.12); --tp-sep:rgba(31,63,140,.14);
  --tp-line:rgba(31,63,140,.22); --tp-tick:rgba(31,63,140,.2); --tp-tick-day:rgba(31,63,140,.34); --tp-band:rgba(47,79,216,.05);
  --tp-ink:#1A2548; --tp-dim:#4F5F84; --tp-faint:#56668C; --tp-strong:#10142E;
  --tp-dot:#2F4FD8; --tp-ring:#F2F6FC; --tp-dot-glow:rgba(47,79,216,.25); --tp-now:#2F4FD8; --tp-now-glow:rgba(47,79,216,.3); --tp-hold:#A86400;
  --tp-grid:rgba(31,63,140,.07); --tp-head:rgba(31,63,140,.1);
  --tp-bar:linear-gradient(180deg,rgba(47,79,216,.26),rgba(47,79,216,.14)); --tp-bar-edge:rgba(47,79,216,.55); --tp-bar-glow:rgba(47,79,216,.18);
  --tp-bar-hold:linear-gradient(180deg,rgba(168,100,0,.22),rgba(168,100,0,.1)); --tp-bar-hold-edge:rgba(168,100,0,.5); --tp-bar-hold-glow:rgba(168,100,0,.15);
  --tp-bar-bad:linear-gradient(180deg,rgba(192,54,47,.22),rgba(192,54,47,.1)); --tp-bar-bad-edge:rgba(192,54,47,.55); --tp-bar-bad-glow:rgba(192,54,47,.15)}

/* ================================================================ the deck
   The header as an instrument panel: push-button keys with a lamp for the page you are on, two
   annunciators for Leon and Lufthansa, and below it a 48-hour strip of the legs about to fly.
   Chosen from the menu bar canvas (E, warning states), 2026-09-24. */
.deck{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;height:72px;padding:0 24px;
  background:#0A0D17;border-top:1px solid rgba(var(--fg),.06);box-shadow:0 1px 0 #1B2543,0 10px 30px -18px rgba(0,0,0,.9)}
body.env-production .deck{box-shadow:inset 0 3px 0 var(--bad),0 1px 0 #1B2543,0 10px 30px -18px rgba(0,0,0,.9)}
.deck .env{flex:none}
.dk-brand{display:flex;flex-direction:column;gap:7px;flex:none;text-decoration:none}
.dk-brand:hover{text-decoration:none}
.dk-ea{display:flex;align-items:center;gap:8px;color:var(--hi);font:400 24px/1 var(--font-brand);letter-spacing:-.1px}
.dk-ea img{width:23px;height:23px;display:block}
.dk-el{display:flex;align-items:center;line-height:1}
.dk-el .sf{--sf-w:12.5px;--sf-h:18px;--sf-fs:12px;--sf-gap:1.5px;flex-wrap:nowrap}

.dk-keys,.dk-anns{display:flex;gap:5px;padding:4px;border-radius:11px;background:#05070D;
  box-shadow:0 2px 7px rgba(0,0,0,.85) inset,0 0 0 1px rgba(var(--fg),.045),0 1px 0 rgba(var(--fg),.05)}
.dk-keys{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.dk-keys::-webkit-scrollbar{display:none}
/* on a laptop or wider the keys never shrink into a hidden scroller: the Leon and Lufthansa modules
   give way instead (see .ann), so Manual and Offers stay in sight whatever else the header carries */
@media (min-width:1281px){.dk-keys{flex-shrink:0}}
/* A key: a sculpted face with an icon over its label and a lamp strip set into its lower edge. It
   stands proud of the panel until it is the page you are on; then it is pressed in and its lamp
   lights the face from below. */
.dk-key{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:60px;height:56px;box-sizing:border-box;
  padding:9px 13px 0;border-radius:8px;color:var(--ink3);text-decoration:none;font:700 11px/1 var(--font-ui);letter-spacing:1.25px;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#1F2744 0%,#161C32 58%,#12182B 100%);border:1px solid rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 -2px 0 rgba(0,0,0,.28) inset,0 3px 0 #03050B,0 5px 10px -2px rgba(0,0,0,.65);
  transition:color .15s,background .15s,transform .08s,box-shadow .08s}
.dk-key .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:opacity .15s,color .15s}
.dk-key .lb{display:block}
.dk-key .beta{font:700 8px/1 var(--font-ui);font-style:normal;letter-spacing:.8px;vertical-align:2px;margin-left:2px;padding:2px 4px;border-radius:4px;color:var(--warn);background:var(--warn-bg)}
.dk-key .lt{position:absolute;left:16px;right:16px;bottom:7px;height:3px;border-radius:2px;background:#070A14;
  box-shadow:0 1px 1px rgba(0,0,0,.9) inset,0 1px 0 rgba(255,255,255,.07);transition:background .2s,box-shadow .2s}
.dk-key:hover{color:var(--hi);text-decoration:none;background:linear-gradient(180deg,#252E4E 0%,#1A2139 58%,#151B30 100%)}
.dk-key:hover .ic{opacity:1}
.dk-key:hover .lt{background:rgba(110,147,255,.32)}
.dk-key:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 1px 0 #03050B,0 2px 4px -1px rgba(0,0,0,.6)}
.dk-key:focus-visible,.ann:focus-visible,.dk-me summary:focus-visible,.dk-leg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dk-key.on{color:#FFFFFF;transform:translateY(2px);border-color:rgba(110,147,255,.3);border-top-color:rgba(0,0,0,.4);
  background:radial-gradient(90% 70% at 50% 118%,rgba(110,147,255,.34),transparent 72%),linear-gradient(180deg,#121830 0%,#19213D 100%);
  box-shadow:0 3px 7px rgba(0,0,0,.65) inset,0 1px 0 #03050B,0 0 0 1px rgba(110,147,255,.08)}
.dk-key.on .ic{opacity:1;color:#B5C8FF;filter:drop-shadow(0 0 5px rgba(110,147,255,.55))}
.dk-key.on .lt{background:linear-gradient(90deg,#7FA0FF,#A9C0FF 50%,#7FA0FF);box-shadow:0 0 6px var(--accent),0 0 16px rgba(110,147,255,.6)}
.dk-key.warn .ic{color:var(--warn);opacity:1}
.dk-key.warn .lt{background:var(--warn);box-shadow:0 0 6px var(--warn),0 0 14px rgba(242,184,75,.5)}
.dk-key.on.warn{background:radial-gradient(90% 70% at 50% 118%,rgba(242,184,75,.28),transparent 72%),linear-gradient(180deg,#121830 0%,#19213D 100%)}
.dk-key .cnt{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--warn);color:#1A1200;
  font:800 11px/16px var(--font-ui);letter-spacing:0;text-align:center;box-shadow:0 0 0 2px #151B30,0 0 10px rgba(242,184,75,.5)}

.dk-anns{margin-left:auto;flex:0 1 auto;min-width:0}
/* Leon and Lufthansa as instrument modules: the source's emblem in a status ring, its name with a
   small lamp, and the reading on a recessed display lit in the state's colour. --c is the state:
   green in sync, amber getting old, red failing, slate not set up. The ring turns while a sync runs. */
.ann{--c:#7A89A6;--c-glow:rgba(122,137,166,.25);position:relative;container-type:inline-size;display:flex;align-items:center;gap:10px;width:184px;flex:0 1 auto;min-width:56px;height:56px;box-sizing:border-box;padding:0 10px 0 9px;border-radius:8px;
  cursor:pointer;text-align:left;font:inherit;color:var(--ink2);
  background:linear-gradient(180deg,#1C2340 0%,#141A2F 58%,#10152A 100%);border:1px solid rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 -2px 0 rgba(0,0,0,.28) inset,0 3px 0 #03050B,0 5px 10px -2px rgba(0,0,0,.65);transition:background .15s,transform .08s}
.ann:hover{background:linear-gradient(180deg,#222A4A 0%,#181F37 58%,#131930 100%)}
.ann:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 1px 0 #03050B}
.ann.s-ok{--c:#3CC98A;--c-glow:rgba(60,201,138,.45)}
.ann.s-soon{--c:#F2B84B;--c-glow:rgba(242,184,75,.45)}
.ann.s-warn{--c:#F2665E;--c-glow:rgba(242,102,94,.5)}
.ann.s-local{--c:#8FA3D6;--c-glow:rgba(143,163,214,.3)}
.ann-badge{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#253052,#0B1022 70%);box-shadow:0 0 0 2px var(--c),0 0 12px var(--c-glow),0 2px 4px rgba(0,0,0,.6) inset;transition:box-shadow .3s}
.ann-badge img{width:17px;height:17px;display:block;object-fit:contain}
.ann-badge::before{content:"";position:absolute;inset:-5px;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 60%,var(--c) 100%);-webkit-mask:radial-gradient(circle,transparent 20px,#000 21px);mask:radial-gradient(circle,transparent 20px,#000 21px)}
.ann.busy .ann-badge::before{opacity:1;animation:spin 1s linear infinite}
.ann-txt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.ann .nm{display:flex;align-items:center;justify-content:space-between;gap:6px;font:800 11px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:#E6ECFA}
.ann .led{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c),0 0 12px var(--c-glow)}
.ann.s-ok .led{animation:ann-breathe 2.8s ease-in-out infinite}
.ann.s-warn .led{animation:ann-blink 1s steps(2,start) infinite}
.ann .st{display:block;padding:4px 6px 3px;border-radius:4px;background:#04060C;box-shadow:0 1px 2px rgba(0,0,0,.9) inset,0 1px 0 rgba(255,255,255,.05);
  font:500 11px/1.1 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--c);text-shadow:0 0 6px var(--c-glow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann.busy{pointer-events:none}
.ann.busy .st{opacity:.75}
@keyframes ann-breathe{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes ann-blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.ann .led,.ann.busy .ann-badge::before{animation:none}}

.dk-me{position:relative;flex:none}
.dk-me summary{list-style:none;width:36px;height:36px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font:700 12px/1 var(--font-ui);letter-spacing:.5px}
.dk-me summary::-webkit-details-marker{display:none}
.dk-me[open] summary{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.dk-menu{position:absolute;right:0;top:calc(100% + 12px);width:250px;padding:6px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:2px;z-index:60}
.dk-who{margin:0 0 4px;padding:10px 10px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.dk-who b{color:var(--hi);font-size:14px}.dk-who span{color:var(--ink3);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.dk-menu a,.dk-menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;color:var(--ink2);font:600 13px var(--font-ui);background:none;border:0;cursor:pointer;text-decoration:none}
.dk-menu a:hover,.dk-menu button:hover{background:rgba(var(--fg),.06);color:var(--hi);text-decoration:none}
.dk-menu form{margin:0}

/* the 48-hour strip (canvas variant B, 2026-09-27): a clock, the two days with every flight as a bar from
   departure to landing on one of two rows, and the counts */
.dk-tape{display:flex;align-items:stretch;height:80px;padding:0 24px;background:var(--tp-bg);border-bottom:1px solid var(--tp-edge);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.dk-clock{width:112px;flex:none;display:flex;flex-direction:column;justify-content:center;gap:6px;padding-right:18px;border-right:1px solid var(--tp-sep)}
.dk-clock span{font:600 10px/1 var(--font-ui);letter-spacing:1.6px;color:var(--tp-faint)}
.dk-clock b{font:500 24px/1 var(--mono);color:var(--tp-strong);letter-spacing:-.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dk-clock em{font:500 10.5px/1 var(--font-ui);font-style:normal;letter-spacing:1.2px;color:var(--tp-dim);white-space:nowrap}
.dk-track{position:relative;flex:1 1 auto;min-width:0;margin-left:18px}
.dk-bands{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dk-band{position:absolute;top:0;bottom:0;width:50%;background:var(--tp-band)}
.dk-tick{position:absolute;top:26px;bottom:6px;width:1px;background:var(--tp-grid)}
.dk-tick.day{top:0;bottom:0;background:var(--tp-tick-day)}
.dk-tick em{position:absolute;top:-17px;left:5px;font:500 10.5px/1 var(--mono);font-style:normal;color:var(--tp-faint);white-space:nowrap}
.dk-tick.day em{top:10px;left:10px;font:600 10.5px/1 var(--font-ui);letter-spacing:1.4px;color:var(--tp-ink)}
.dk-tick.day em small{font:inherit;color:var(--tp-dim)}
.dk-now{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tp-now);box-shadow:0 0 12px var(--tp-now-glow);z-index:1}
.dk-now::before{content:"";position:absolute;left:-4px;top:0;border:5px solid transparent;border-top:6px solid var(--tp-now);border-bottom:0}
.dk-leg{position:absolute;top:34px;height:16px;min-width:8px;box-sizing:border-box;border-radius:5px;z-index:2;text-decoration:none;
  background:var(--tp-bar);border:1px solid var(--tp-bar-edge);box-shadow:0 0 14px -3px var(--tp-bar-glow);transition:filter .15s,box-shadow .15s,transform .15s var(--ease)}
.dk-leg.row-1{top:56px}
.dk-leg.s-hold{background:var(--tp-bar-hold);border-color:var(--tp-bar-hold-edge);box-shadow:0 0 14px -3px var(--tp-bar-hold-glow)}
.dk-leg.s-blocked{background:var(--tp-bar-bad);border-color:var(--tp-bar-bad-edge);box-shadow:0 0 14px -3px var(--tp-bar-bad-glow)}
.dk-leg:hover,.dk-leg:focus-visible{text-decoration:none;filter:brightness(1.18);transform:translateY(-1px);box-shadow:0 0 18px -2px var(--tp-bar-glow)}
.dk-leg .dk-bar{display:none}
.dk-lab{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;
  font:500 11px/1 var(--mono);letter-spacing:.2px;color:var(--tp-ink)}
.dk-lab em{font-style:normal;color:var(--tp-faint);margin-left:3px}
.dk-leg.lab-l .dk-lab{left:auto;right:calc(100% + 8px)}
.dk-leg.no-lab .dk-lab{display:none}
.dk-leg.s-hold .dk-lab{color:var(--tp-hold)}.dk-leg.s-blocked .dk-lab{color:var(--bad-ink)}
.dk-empty{position:absolute;left:16px;top:42px;font:500 11.5px/1 var(--mono);color:var(--tp-faint)}
.dk-tip{position:absolute;top:76px;width:max-content;min-width:240px;max-width:300px;box-sizing:border-box;padding:13px 15px;z-index:60;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-strong);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:9px;pointer-events:none}
.dk-tip .r{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dk-tip .rt{font:700 16px/1 var(--font-ui);color:var(--hi);letter-spacing:.3px}
.dk-tip .tag{font:700 11px/1 var(--font-ui);letter-spacing:.4px;padding:4px 8px;border-radius:999px;color:var(--good);background:var(--good-bg);white-space:nowrap}
.dk-tip .tag.s-hold{color:var(--warn);background:var(--warn-bg)}.dk-tip .tag.s-blocked{color:var(--bad-ink);background:var(--bad-bg)}
.dk-tip .tm{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.dk-tip .tm b{font:600 15px/1 var(--mono);color:var(--hi)}.dk-tip .tm span{font:500 12px/1 var(--mono);color:var(--ink3)}
.dk-tip .ft{display:flex;justify-content:space-between;gap:12px;padding-top:9px;border-top:1px solid var(--line)}
.dk-tip .rg{font:500 12px/1 var(--mono);color:var(--ink2);letter-spacing:.4px}.dk-tip .bk{font:500 12px/1 var(--mono);color:var(--ink4)}
.dk-tip .why{font-size:12px;line-height:1.35;color:var(--bad-ink)}
.dk-sum{flex:none;display:flex;align-items:center;gap:22px;padding-left:20px;margin-left:18px;border-left:1px solid var(--tp-sep)}
.dk-sum span{display:flex;flex-direction:column-reverse;gap:6px;white-space:nowrap;font:600 10px/1 var(--font-ui);letter-spacing:1.4px;color:var(--tp-faint);text-transform:uppercase}
.dk-sum span[hidden]{display:none}
.dk-sum b{font:500 22px/1 var(--mono);letter-spacing:0;color:var(--tp-strong)}.dk-sum .h b{color:var(--tp-hold)}.dk-sum .x b{color:var(--bad-ink)}

/* narrower screens: shed words before anything is clipped. Wider breakpoints first, so the narrower
   ones after them win */
@media (max-width:1600px){.dk-key{padding:9px 10px 0;min-width:56px;letter-spacing:1px}.deck{gap:14px}}
@media (max-width:1540px){.deck .env-development{display:none}}
@media (max-width:1400px){.dk-brand{flex-direction:row;align-items:center;gap:10px}.dk-ea span{display:none}.dk-ea img{width:26px;height:26px}
  .dk-el .sf{--sf-w:11px;--sf-h:16px;--sf-fs:10.5px}}
@media (max-width:1480px){                                      /* laptops: slimmer modules, the switch without room to spare */
  .ann{width:162px;gap:8px;padding:0 8px 0 7px}.ann-badge{width:30px;height:30px}.ann-badge img{width:15px;height:15px}
  .ann-badge::before{-webkit-mask:radial-gradient(circle,transparent 17px,#000 18px);mask:radial-gradient(circle,transparent 17px,#000 18px)}
  .ann .st{font-size:10.5px;letter-spacing:0;padding:3px 5px}}
@media (max-width:1280px){
  .ann{width:56px;padding:0;justify-content:center}
  .deck{gap:14px}.deck .env{letter-spacing:.4px;padding:4px 6px}
  .dk-key{padding:9px 8px 0;min-width:52px;letter-spacing:.5px}
  .dk-keys{scrollbar-width:thin;scrollbar-color:#2A3456 transparent}}   /* when the keys still do not fit, the row shows it scrolls */
/* A module too narrow for its name shows the ring alone. The name and reading stay for screen readers
   (and the title for the mouse), and the lamp stays on the ring's shoulder with a shape for the state, so the
   state is never told by colour alone: a solid dot in sync, a hollow ring getting old, a ! failing. */
@container (max-width:141px){
  .ann-badge{margin:0 auto}
  .ann-txt{position:absolute;inset:0;pointer-events:none}
  .ann .nm .t,.ann .st{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ann .led{position:absolute;left:calc(50% + 9px);top:calc(50% - 18px);width:9px;height:9px;box-shadow:0 0 0 2px #10152A,0 0 8px var(--c-glow)}
  .ann.s-soon .led{background:#10152A;border:2px solid var(--c);box-sizing:border-box}
  .ann.s-warn .led{width:14px;height:14px;left:calc(50% + 7px);top:calc(50% - 21px);display:flex;align-items:center;justify-content:center;font:900 11px/1 var(--font-ui);color:#1A0503}
  .ann.s-warn .led::after{content:"!"}
}
@media (max-width:1040px){.dk-sum{display:none}}
@media (max-width:900px){
  .deck{position:relative;flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:10px}.dk-keys{order:5;flex-basis:100%}
  .dk-tape{padding:0 16px}.dk-clock{width:74px;padding-right:12px}.dk-clock b{font-size:18px}.dk-clock em{display:none}.dk-track{margin-left:12px}}


/* ================================================================ price rules
   Base prices as a table, taxes and fees read as sentences, a builder that asks plain questions,
   and one real upcoming leg priced beside every screen so a rule is never edited blind. */
.pf.l-base,.pr-sec.l-base,.pr-dot.l-base,.pr-lines .l-base,.k-route,.k-base{--lc:var(--accent)}
.pf.l-tax,.pr-sec.l-tax,.pr-dot.l-tax,.pr-lines .l-tax,.k-tax{--lc:var(--soon)}
.pf.l-fee,.pr-sec.l-fee,.pr-dot.l-fee,.pr-lines .l-fee,.k-fee{--lc:var(--good)}

.pr-formula{display:flex;align-items:stretch;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.pr-formula .pf{flex:1 1 170px;display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card-grad);text-decoration:none}
.pr-formula a.pf:hover{border-color:var(--line-strong);text-decoration:none}
.pr-formula .pf b{display:flex;align-items:center;gap:8px;color:var(--hi);font-size:14px}
.pr-formula .pf b::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--lc,var(--ink3))}
.pr-formula .pf span{font-size:12px;color:var(--ink3);line-height:1.35}
.pr-formula .pf.total{background:rgba(110,147,255,.08);border-color:rgba(110,147,255,.35)}
.pr-formula .pf.total b::before{background:var(--hi);border-radius:50%}
.pr-formula>i{align-self:center;font:600 22px var(--font-ui);font-style:normal;color:var(--ink4)}

.pr-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.pr-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.pr-side{position:sticky;top:88px;min-width:0}
.pr-sec{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow);padding:18px 20px;scroll-margin-top:90px}
.pr-sec>header,.pr-group>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start;margin:0 0 14px}
.pr-sec>header h2{display:flex;align-items:center;gap:9px;margin:0;font:600 17px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.pr-sec>header h2 i{width:11px;height:11px;border-radius:3px;background:var(--lc)}
.pr-sec>header p,.pr-group>header p{grid-column:1;margin:0;font-size:13px;line-height:1.45;color:var(--ink3);max-width:78ch}
.pr-sec>header .btn,.pr-group>header .btn{grid-column:2;grid-row:1 / span 2;align-self:center;white-space:nowrap}
.pr-problems{padding:12px 16px;border-radius:12px;border:1px solid rgba(242,102,94,.45);background:var(--bad-bg);color:var(--bad-ink);font-size:13px}
.pr-problems ul{margin:6px 0 0;padding-left:18px}.pr-problems li{margin-top:3px}

.pr-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
.pr-table{width:100%;border-collapse:collapse}
.pr-table th,.pr-table td{padding:10px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
.pr-table tr:last-child>*{border-bottom:0}
.pr-table thead th{font:700 12px var(--font-ui);letter-spacing:1px;text-transform:uppercase;color:var(--ink3);background:rgba(var(--fg),.025);white-space:nowrap}
.pr-table tbody th{width:130px;white-space:nowrap}
.pr-table tbody th small{display:block;margin-top:5px;font-size:12px;font-weight:500;color:var(--ink4)}
.pr-cell{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--field);cursor:text;transition:border-color .15s,box-shadow .15s,background .15s;min-width:120px}
.pr-cell>span{font-weight:600;color:var(--ink3)}
.pr-cell input,.pr-cell input:focus,.pr-money input,.pr-money input:focus,.pr-cut input,.pr-cut input:focus{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:0}
.pr-cell input{flex:1;min-width:0;color:var(--hi);font:700 17px var(--font-ui);font-variant-numeric:tabular-nums}
.pr-cell:focus-within,.pr-money:focus-within,.pr-cut:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.pr-cell.empty{border-style:dashed;border-color:rgba(242,102,94,.5)}
.pr-cell.empty input::placeholder{color:var(--bad-ink);font-size:13px;font-weight:600}
.pr-cell.dirty{border-color:var(--warn);background:rgba(242,184,75,.08)}
.pr-table-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}
.pr-dirty{margin-right:auto;font-size:13px;color:var(--warn)}

.pr-bands{margin-top:14px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.02);scroll-margin-top:90px}
.pr-bands summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:12px 14px;font-size:13px;font-weight:600;color:var(--ink2)}
.pr-bands summary::-webkit-details-marker{display:none}
.pr-bands summary::before{content:"";width:7px;height:7px;border-right:1.6px solid var(--ink3);border-bottom:1.6px solid var(--ink3);transform:rotate(-45deg);align-self:center;transition:transform .15s}
.pr-bands[open] summary::before{transform:rotate(45deg)}
.pr-bands summary span{font:500 12px var(--mono);color:var(--ink4)}
.pr-bands form{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 14px 14px}
.pr-bands p{margin:0;font-size:13px;line-height:1.45;color:var(--ink3);max-width:78ch}
.pr-cuts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pr-cut0{font:600 13px var(--mono);color:var(--ink3);padding:0 4px}
.pr-cut{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:9px;border:1px solid var(--line-strong);background:var(--field)}
.pr-cut input{width:64px;color:var(--hi);font:600 14px var(--mono)}
.pr-cut span{font-size:12px;color:var(--ink4)}
.pr-cut.add{border-style:dashed}

.pr-group{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);scroll-margin-top:90px}
.pr-group h3{margin:0;font:600 15px var(--font-ui);color:var(--hi)}
.pr-empty{margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;color:var(--ink4);font-size:13px}
.pr-rule{display:grid;grid-template-columns:12px minmax(0,1fr) 140px 150px 30px;gap:14px;align-items:center;margin-top:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.02);color:inherit;text-decoration:none;transition:border-color .15s,background .15s}
.pr-rule:first-of-type{margin-top:0}
.pr-rule:hover{border-color:var(--line-strong);background:rgba(var(--fg),.045);text-decoration:none}
.pr-rule.ended{opacity:.55}
.pr-dot{width:10px;height:10px;border-radius:3px;background:var(--lc)}
.pr-rule-main b{display:block;margin-bottom:3px;font-size:14px;color:var(--hi)}
.pr-rule-main>span{font-size:13px;line-height:1.4;color:var(--ink2)}
.pr-rule-amt{text-align:right}.pr-rule-amt b{display:block;font:700 18px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums}.pr-rule-amt small{font-size:12px;color:var(--ink3)}
.pr-rule-when{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.pr-rule-when small{font-size:12px;color:var(--ink4)}

.pr-effect{display:flex;flex-direction:column;gap:12px}
.pr-words{padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--lc) 45%,transparent);background:color-mix(in srgb,var(--lc) 9%,transparent)}
.pr-words span{font:700 12px var(--font-ui);letter-spacing:1.2px;text-transform:uppercase;color:var(--lc)}
.pr-words p{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--hi)}
.pr-err{margin:0;padding:10px 14px;border-radius:12px;border:1px solid rgba(242,102,94,.45);background:var(--bad-bg);color:var(--bad-ink);font-size:13px;line-height:1.4}
.pr-ex,.pr-changes{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow)}
.pr-ex header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.pr-ex h3,.pr-changes h3{margin:0;font:700 12px var(--font-ui);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3)}
.pr-ex select.pr-leg{width:auto;max-width:250px;margin:0;padding:6px 9px;font-size:12px}
.pr-ex-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;font-size:12.5px;color:var(--ink3)}
.pr-ex-leg b{font-size:16px;color:var(--hi)}
.pr-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pr-lines li{display:grid;grid-template-columns:8px minmax(0,1fr) auto 58px;gap:10px;align-items:baseline;padding:7px 8px;border-radius:8px;font-size:13px}
.pr-lines li i{width:8px;height:8px;border-radius:2px;background:var(--lc);align-self:center}
.pr-lines li span{color:var(--ink2)}
.pr-lines li em{margin-left:6px;white-space:nowrap;font-style:normal;font-size:12px;font-weight:700;color:var(--accent-2)}
.pr-lines li b{color:var(--hi);text-align:right;font-variant-numeric:tabular-nums}
.pr-lines li small{font-size:12px;color:var(--ink4)}
.pr-lines li.mine{background:rgba(110,147,255,.12);box-shadow:inset 0 0 0 1px rgba(110,147,255,.45)}
.pr-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding:10px 8px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
.pr-total b{font:700 20px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums}.pr-total b small{font-size:12px;font-weight:600;color:var(--ink3)}
.pr-total.sub{margin-top:0;padding-top:4px;border-top:0}.pr-total.sub b{font-size:14px;color:var(--ink2)}
.pr-note{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink3)}
.pr-changes ol{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow:auto}
.pr-changes li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-soft);background:rgba(var(--fg),.03)}
.pc-leg b{display:block;font-size:13px;color:var(--hi)}.pc-leg small{font-size:12px;color:var(--ink4)}
.pc-price{display:flex;align-items:center;gap:6px}
.pc-price em{font:600 13px var(--mono);font-style:normal;color:var(--ink3)}.pc-price em.new{color:var(--hi)}.pc-price em.bad{color:var(--bad-ink)}
.pc-price .arr{width:12px;height:1.5px;background:var(--ink4)}
.pc-why{flex-basis:100%;font-size:12px;color:var(--bad-ink)}

.pr-builder{padding:22px 24px}
.pr-b-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.pr-b-head h1{margin:0}
.pr-b-head .who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink4)}
.pr-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 4px}
.pr-kind{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(var(--fg),.02);cursor:pointer;transition:border-color .15s,background .15s}
.pr-kind input{position:absolute;opacity:0;pointer-events:none}
.pr-kind b{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--hi)}.pr-kind b::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--lc)}
.pr-kind small{font-size:12px;color:var(--ink3)}
.pr-kind:has(input:checked){border-color:var(--lc);background:color-mix(in srgb,var(--lc) 12%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lc) 20%,transparent)}
.pr-kind:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pr-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--line-soft)}
.pr-step .n{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px var(--font-ui);color:var(--accent-2);background:rgba(110,147,255,.14);border:1px solid rgba(110,147,255,.35)}
.pr-step h2{margin:3px 0 10px;font:600 16px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.pr-step .hint{margin:8px 0 0;line-height:1.45;max-width:70ch}
.pr-amount{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-money{display:flex;align-items:center;gap:8px;width:220px;height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line-strong);background:var(--field)}
.pr-money>span{font:600 20px var(--font-ui);color:var(--ink3)}
.pr-money input{flex:1;min-width:0;color:var(--hi);font:700 24px var(--font-ui);font-variant-numeric:tabular-nums}
.pr-fixed{font-size:14px;font-weight:600;color:var(--ink2)}
.pr-route{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.pr-route label,.pr-when>label{display:flex;flex-direction:column;gap:2px}
.pr-route label span,.pr-when>label span{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink3)}
.pr-route input{width:190px;font:700 19px var(--mono);letter-spacing:1px;text-transform:uppercase}
.pr-route i{padding-bottom:10px;font-style:normal;font-size:22px;color:var(--ink4)}
.pr-conds{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pr-cond{border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.02);transition:border-color .15s,background .15s}
.pr-cond:has(.pr-cond-q input:checked){border-color:rgba(110,147,255,.45);background:rgba(110,147,255,.06)}
.pr-cond-q{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink2)}
.pr-cond-q input{width:18px;height:18px}
.pr-cond:has(.pr-cond-q input:checked) .pr-cond-q{color:var(--hi)}
.pr-cond-a{padding:0 14px 12px 42px}
.pr-cond:not(:has(.pr-cond-q input:checked)) .pr-cond-a{display:none}
.pr-cond-a>select,.pr-cond-a>input{width:min(320px,100%);margin:0}
.pr-chips{display:flex;flex-wrap:wrap;gap:8px}
.pr-chip{position:relative;cursor:pointer}.pr-chip input{position:absolute;opacity:0;pointer-events:none}
.pr-chip .cchip{padding:7px 14px;font-size:13px;border:1px solid transparent;opacity:.6;transition:opacity .15s}
.pr-chip:hover .cchip{opacity:.85}
.pr-chip input:checked+.cchip{opacity:1;border-color:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.pr-chip input:focus-visible+.cchip{outline:2px solid var(--accent);outline-offset:2px}
.pr-dist{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink3)}.pr-dist input{width:90px;margin:0}
.pr-name{width:min(460px,100%);margin:0}
.pr-when{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.pr-when input[type=date]{width:180px}
.pr-ends{display:flex;flex-direction:column;gap:6px}
.pr-radio{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);cursor:pointer}
.pr-radio input[type=radio]{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.pr-radio input[type=date]{margin:0}
.pr-ends .pr-radio:not(:has(input[type=radio]:checked)) input[type=date]{opacity:.4}
.pr-b-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line-soft)}
.pr-b-actions .dgr{margin-left:auto}
.pr-confirm{margin:0 0 14px;padding:16px 20px;border-color:rgba(242,102,94,.5)}
.pr-confirm h2{margin:0 0 6px;font:600 16px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.pr-confirm p{margin:0;font-size:13px;color:var(--ink2)}.pr-confirm form{display:flex;gap:8px;margin-top:12px}

@media (max-width:1150px){.pr-layout{grid-template-columns:minmax(0,1fr)}.pr-side{position:static}}
@media (max-width:760px){
  .pr-formula{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pr-formula>i{display:none}.pr-kinds{grid-template-columns:1fr}
  .pr-rule{grid-template-columns:12px minmax(0,1fr) auto}.pr-rule-when,.pr-rule-who{display:none}
  .pr-sec>header,.pr-group>header{grid-template-columns:1fr}.pr-sec>header .btn,.pr-group>header .btn{grid-column:1;grid-row:auto;justify-self:start}
  .pr-builder{padding:18px 16px}.pr-cond-a{padding-left:14px}}

/* the light/dark switch: one panel lighting switch, day to night. A recessed track with the sun at
   one end and the moon at the other; the knob slides across carrying the one in use, glowing amber
   by day and blue by night, with a few stars in the track at night. */
.dk-theme{display:flex;flex:none;padding:4px;border-radius:11px;background:#05070D;
  box-shadow:0 2px 7px rgba(0,0,0,.85) inset,0 0 0 1px rgba(255,255,255,.045),0 1px 0 rgba(255,255,255,.05)}
.dk-switch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100px;height:56px;box-sizing:border-box;padding:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#1F2744 0%,#161C32 58%,#12182B 100%);border:1px solid rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 -2px 0 rgba(0,0,0,.28) inset,0 3px 0 #03050B,0 5px 10px -2px rgba(0,0,0,.65);font:inherit}
.dk-switch:focus-visible{outline:2px solid #6E93FF;outline-offset:2px}
.sw-track{position:relative;display:block;width:72px;height:26px;border-radius:13px;background:#05070D;overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.9) inset,0 0 0 1px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.06);transition:background .35s}
.sw-end{position:absolute;top:6px;width:14px;height:14px;fill:none;stroke:#46506E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s}
.sw-end.sun{left:7px}.sw-end.moon{right:7px}
.sw-stars{position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(1px 1px at 18px 8px,#C9D6FF,transparent),radial-gradient(1px 1px at 30px 17px,#9DB6FF,transparent),radial-gradient(1.2px 1.2px at 42px 7px,#E2E9FF,transparent),radial-gradient(1px 1px at 12px 18px,#9DB6FF,transparent)}
.sw-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:transform .45s cubic-bezier(.3,1.35,.5,1),background .35s,box-shadow .35s}
.sw-knob svg{position:absolute;width:13px;height:13px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .45s}
.sw-caps{display:flex;gap:10px;font:800 9.5px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.sw-caps b{font-weight:800;color:#56607E;transition:color .3s,text-shadow .3s}
/* night (the default) */
.dk-switch .sw-track{background:linear-gradient(90deg,#05070D 30%,#0C1633)}
.dk-switch .sw-stars{opacity:1}
.dk-switch .sw-end.moon{opacity:0}
.dk-switch .sw-knob{transform:translateX(46px);background:radial-gradient(circle at 34% 30%,#E4EBFF 0%,#9DB6FF 45%,#4F6FE0 100%);
  box-shadow:0 0 0 1px rgba(10,16,40,.5),0 0 12px rgba(110,147,255,.75),0 2px 4px rgba(0,0,0,.6)}
.dk-switch .sw-knob .moon{stroke:#18244F;fill:#18244F;opacity:1}
.dk-switch .sw-knob .sun{stroke:#7A4A00;opacity:0;transform:rotate(-90deg)}
.dk-switch .sw-caps .d{color:#B5C8FF;text-shadow:0 0 8px rgba(110,147,255,.6)}
/* day */
[data-theme=light] .dk-switch .sw-track{background:linear-gradient(90deg,#2A2310,#05070D 70%)}
[data-theme=light] .dk-switch .sw-stars{opacity:0}
[data-theme=light] .dk-switch .sw-end.moon{opacity:1}
[data-theme=light] .dk-switch .sw-end.sun{opacity:0}
[data-theme=light] .dk-switch .sw-knob{transform:translateX(0);background:radial-gradient(circle at 34% 30%,#FFF4CC 0%,#F6C454 50%,#D08A12 100%);
  box-shadow:0 0 0 1px rgba(60,40,0,.5),0 0 12px rgba(246,196,84,.8),0 2px 4px rgba(0,0,0,.6)}
[data-theme=light] .dk-switch .sw-knob .sun{opacity:1;transform:rotate(0)}
[data-theme=light] .dk-switch .sw-knob .moon{opacity:0}
[data-theme=light] .dk-switch .sw-caps .d{color:#56607E;text-shadow:none}
[data-theme=light] .dk-switch .sw-caps .l{color:#F6C454;text-shadow:0 0 8px rgba(246,196,84,.55)}
.dk-switch:hover .sw-caps b{color:#8C97B6}
.dk-switch:hover .sw-caps .d,[data-theme=light] .dk-switch:hover .sw-caps .l{color:#FFFFFF}
[data-theme=light] .dk-switch:hover .sw-caps .d{color:#8C97B6}
@media (prefers-reduced-motion:reduce){.sw-knob,.sw-knob svg,.sw-track,.sw-stars{transition:none}}
/* laptops: the switch without room to spare. After the rules above, which would otherwise win */
@media (max-width:1480px){.dk-switch{width:84px}.sw-track{width:64px}.dk-switch .sw-knob{transform:translateX(38px)}}
@media (max-width:560px){.deck{gap:10px}.dk-switch{width:84px;height:44px;gap:0}.sw-caps{display:none}.ann{width:50px;min-width:50px;height:48px}}

/* ================================================================ broker offers (early access)
   Composer on the left, the email exactly as brokers get it on the right. */
.of-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 16px;flex-wrap:wrap}
.of-head h1{display:flex;align-items:center;gap:12px;margin:4px 0 6px}
.of-head .lede{margin:0}
.of-head-actions{display:flex;gap:8px}
.of-head-actions .btn b{margin-left:4px;color:var(--ink3)}
.of-early{font:700 12px/1 var(--font-ui);letter-spacing:.8px;text-transform:uppercase;padding:5px 8px;border-radius:7px;color:var(--warn);background:var(--warn-bg);border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent)}
.of-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:16px;align-items:start}
.of-layout.brokers{grid-template-columns:minmax(0,1fr) 400px}
.of-form,.of-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.of-step{padding:16px 18px}
.of-step h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 16px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.of-step h2 small{font-size:12px;font-weight:500;color:var(--ink3)}
.of-step h2 .n{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--accent-2);background:rgba(110,147,255,.14);border:1px solid rgba(110,147,255,.35)}
.of-step label{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink2)}
.of-step label small{font-weight:500;color:var(--ink4);margin-left:6px}
.of-manage{margin-left:auto;font-size:13px;font-weight:600}
.of-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:13px;color:var(--ink3)}
.of-legs,.of-brokers,.of-sent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.of-leg{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;border:1px solid var(--line);background:rgba(var(--fg),.02);transition:border-color .15s,background .15s}
.of-leg.on{border-color:rgba(110,147,255,.5);background:rgba(110,147,255,.07)}
.of-leg label{margin:0}
.of-pick{flex:1;display:flex !important;align-items:center;gap:12px;cursor:pointer;min-width:0}
.of-pick input,.of-brokers input{width:18px;height:18px;margin:0;flex:none}
.of-leg-when{display:flex;flex-direction:column;gap:2px;width:120px;flex:none}
.of-leg-when b{font:600 13px var(--mono);color:var(--hi)}.of-leg-when small{font-size:12px;color:var(--ink4);font-weight:500}
.of-leg-route{display:flex;flex-direction:column;gap:3px;min-width:0}
.of-leg-route b{font-size:16px;color:var(--hi);letter-spacing:.3px}.of-leg-route b i{font-style:normal;color:var(--accent)}
.of-leg-route small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink3)}
.of-price{display:flex !important;align-items:center;gap:6px;width:150px;flex:none;height:40px;padding:0 10px;border-radius:9px;border:1px solid var(--line-strong);background:var(--field)}
.of-price span{color:var(--ink3);font-weight:600}
.of-price input,.of-price input:focus{margin:0;padding:0;border:0;background:none;box-shadow:none;outline:0;color:var(--hi);font:700 15px var(--font-ui);font-variant-numeric:tabular-nums}
.of-price input::placeholder{color:var(--ink4);font-weight:600}
.of-price:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.of-leg:not(.on) .of-price{opacity:.45}
.of-mode-request .of-price{visibility:hidden}
.of-bk-tools{display:flex;gap:8px;margin-bottom:8px}.of-bk-tools input{margin:0}
.of-brokers{max-height:320px;overflow:auto}
.of-brokers label,.of-sent li{display:flex !important;align-items:center;gap:10px;margin:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line-soft);cursor:pointer}
.of-sent li{cursor:default}
.of-sent li.off{opacity:.55}
.of-brokers label:has(input:checked){border-color:rgba(110,147,255,.5);background:rgba(110,147,255,.07)}
.of-bk{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.of-bk b{font-size:14px;color:var(--hi)}.of-bk small{font-size:12px;font-weight:500;color:var(--ink3);overflow:hidden;text-overflow:ellipsis}
.of-note{font-style:italic}.of-err{color:var(--bad-ink) !important}
.of-st.sent{color:var(--good);background:var(--good-bg)}.of-st.saved{color:var(--accent-2);background:rgba(110,147,255,.14)}
.of-st.failed{color:var(--bad-ink);background:var(--bad-bg)}.of-st.test{color:var(--warn);background:var(--warn-bg)}
.of-none{margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;color:var(--ink3);font-size:13px}
.of-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 2px}
.of-actions .hint{flex-basis:100%;margin:0}
.of-send b{margin:0 1px}
.of-preview{position:sticky;top:88px;padding:0;overflow:hidden}
.of-preview header{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.of-preview header b{color:var(--hi);font-size:14px}.of-preview header small{color:var(--ink3);font-size:12px}
.of-frame{display:block;width:100%;height:calc(100vh - 150px);min-height:560px;border:0;background:#EFECE5}
.of-list{padding:6px}
.of-row{display:grid;grid-template-columns:150px minmax(0,1fr) 170px 40px;gap:14px;align-items:center;padding:12px 14px;border-radius:11px;color:inherit;text-decoration:none}
.of-row:hover{background:rgba(var(--fg),.04);text-decoration:none}
.of-row+.of-row{border-top:1px solid var(--line-soft)}
.of-when{font-size:12.5px;color:var(--ink3)}
.of-subj{display:flex;flex-direction:column;gap:3px;min-width:0}.of-subj b{color:var(--hi);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.of-subj small{font-size:12px;color:var(--ink3)}
.of-to{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.of-empty{padding:28px;text-align:center}.of-empty h2{margin-bottom:8px}.of-empty p{margin:0;color:var(--ink3)}
.acct-early{margin:14px 0 0;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent);border-radius:12px}
.acct-early legend{padding:0 6px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--warn)}
.acct-early legend small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink3);margin-left:6px}
.acct-early label small{display:block;margin:2px 0 0 26px;font-size:12px;color:var(--ink3)}
@media (max-width:1180px){.of-layout,.of-layout.brokers{grid-template-columns:minmax(0,1fr)}.of-preview{position:static}.of-frame{height:720px}}
@media (max-width:640px){.of-leg{flex-wrap:wrap}.of-price{width:100%}.of-leg-when{width:auto}.of-row{grid-template-columns:minmax(0,1fr) auto}.of-when,.of-by{display:none}}

/* ---------------------------------------------------------------- cabin seat picker (leg card) and seat dots (list) */
.cabinf .fl i{font-style:normal;font-weight:500;color:var(--ink3);margin-left:6px}
.cabin-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.cabin{position:relative;flex:none}
.cabin-img{position:absolute;left:0;display:block;transform:rotate(-90deg);transform-origin:top left;pointer-events:none;border-radius:4px}
/* Seat markers as cabin mood lighting: a seat on offer glows emerald through its cushion under a fine
   rim, its number on a glass medallion set in the middle of the seat; a seat held back goes grey
   under fine hatching, its medallion slate. */
.cseat{position:absolute;box-sizing:border-box;padding:0;cursor:pointer;border-radius:30% / 26%;
  background:radial-gradient(75% 70% at 50% 50%,rgba(52,211,153,.26),rgba(52,211,153,.07) 72%);
  border:1.5px solid rgba(110,231,183,.95);
  box-shadow:0 0 0 1px rgba(4,40,28,.35),0 0 18px 2px rgba(52,211,153,.42),inset 0 0 18px rgba(52,211,153,.32),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .2s,box-shadow .2s,border-color .2s}
.cseat b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;box-sizing:border-box;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:800 12px/1 var(--font-ui);letter-spacing:0;color:#FFFFFF;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.28),rgba(255,255,255,0) 42%),radial-gradient(circle,#0E3B2C 0%,#07231A 100%);
  border:1.5px solid #6EE7B7;box-shadow:0 0 0 3px rgba(4,30,22,.35),0 0 14px rgba(52,211,153,.65),0 4px 10px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:transform .2s cubic-bezier(.3,1.4,.5,1),background .2s,border-color .2s,box-shadow .2s}
.cseat:hover{background:radial-gradient(75% 70% at 50% 50%,rgba(52,211,153,.38),rgba(52,211,153,.12) 72%);
  box-shadow:0 0 0 1px rgba(4,40,28,.35),0 0 26px 4px rgba(52,211,153,.6),inset 0 0 22px rgba(52,211,153,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.cseat:hover b{transform:translate(-50%,-50%) scale(1.1)}
.cseat:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cseat.held{border:1.5px dashed rgba(203,211,230,.55);box-shadow:none;
  background:repeating-linear-gradient(135deg,rgba(9,13,26,.5) 0 5px,rgba(9,13,26,.28) 5px 10px);
  -webkit-backdrop-filter:grayscale(1) brightness(.7);backdrop-filter:grayscale(1) brightness(.7)}
.cseat.held b{color:rgba(226,231,242,.8);border-color:rgba(203,211,230,.6);
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),rgba(255,255,255,0) 42%),radial-gradient(circle,#343B55 0%,#232840 100%);
  box-shadow:0 0 0 3px rgba(9,13,26,.3),0 3px 8px rgba(0,0,0,.4)}
.cseat.held:hover{border-color:rgba(203,211,230,.9);background:repeating-linear-gradient(135deg,rgba(9,13,26,.36) 0 5px,rgba(9,13,26,.18) 5px 10px)}
.cabin-side{display:flex;flex-direction:column;gap:10px;min-width:170px}
.cabin-side p{margin:0;font-size:13px;color:var(--ink2)}
.cabin-side .cabin-n{font:700 26px/1 var(--font-ui);color:var(--hi);margin-right:4px}
.cabin-quick{display:flex;gap:6px}
.cabin-legend{display:flex;align-items:center;gap:6px;font-size:12px !important;color:var(--ink3) !important}
.cabin-legend .k{width:16px;height:12px;border-radius:4px;display:inline-block;box-sizing:border-box}.cabin-legend .k.on{background:rgba(52,211,153,.25);border:1.5px solid #6EE7B7;box-shadow:0 0 8px rgba(52,211,153,.6)}
.cabin-legend .k.off{background:repeating-linear-gradient(135deg,rgba(120,128,150,.5) 0 3px,rgba(120,128,150,.2) 3px 6px);border:1.5px dashed var(--ink3);margin-left:8px}
.sdots{display:flex;gap:2px;margin-bottom:3px}
.sdots i{width:6px;height:6px;border-radius:50%;box-sizing:border-box;border:1.3px solid var(--line-strong)}
.sdots i.on{background:var(--accent);border-color:var(--accent)}
.lr-seats b small{font:500 12px var(--font-ui);color:var(--ink3)}
.fields .field.cabinf{grid-column:1 / -1;order:9;padding-top:4px;border-top:1px solid var(--line-soft)}

/* ---------------------------------------------------------------- route map in the leg card's flight band
   The track over the land around it (elp.domain.routemap), fetched when the card opens and framed
   by splash.js inside --map-pad, the room kept clear for what is laid over it. */
:root{
  --map-sea:#091230; --map-land:#1C2B55; --map-coast:rgba(157,182,255,.5); --map-border:rgba(157,182,255,.22);
  --map-track:#9DB6FF; --map-glow:rgba(110,147,255,.45); --map-code:#FFFFFF; --map-halo:rgba(10,19,48,.9)}
html[data-theme=light]{
  --map-sea:#C9DAF0; --map-land:#FBFCFE; --map-coast:rgba(31,63,140,.4); --map-border:rgba(31,63,140,.2);
  --map-track:#2F4FD8; --map-glow:rgba(47,79,216,.22); --map-code:#10142E; --map-halo:rgba(247,249,253,.95)}
.rmap{position:absolute;inset:0;background:var(--map-sea);--map-pad:40px 80px 40px 520px}
.rmap svg{display:block;width:100%;height:100%}
.rmap[data-state=loading]{background:linear-gradient(100deg,transparent 30%,rgba(var(--fg),.05) 50%,transparent 70%) 0 0/200% 100%;animation:rm-wait 1.2s linear infinite}
@keyframes rm-wait{to{background-position:-200% 0}}
.rm-land{fill:var(--map-land)}
.rm-coast{fill:none;stroke:var(--map-coast);stroke-width:.8;stroke-linejoin:round}
.rm-border{fill:none;stroke:var(--map-border);stroke-width:.7;stroke-dasharray:3 2}
.rm-glow{fill:none;stroke:var(--map-glow);stroke-width:7;stroke-linecap:round}
.rm-track{fill:none;stroke:var(--map-track);stroke-width:2.2;stroke-linecap:round}
.rm-apt{fill:none;stroke:var(--map-track);stroke-width:11;stroke-linecap:round}
.rm-apt.hole{stroke:var(--map-sea);stroke-width:5}          /* departure an open ring, arrival a solid dot */
.rm-plane{fill:var(--map-track);filter:drop-shadow(0 0 3px var(--map-glow))}
.rm-trail{fill:none;stroke:var(--map-track);stroke-linecap:round;opacity:0;filter:brightness(1.35) drop-shadow(0 0 4px var(--map-track))}   /* the flight's wake, set by splash.js */
.rm-code{display:none}                            /* set as .rm-tag over the map instead */
/* the airport codes as a split-flap departures board: letters on flap tiles split across the middle,
   a small amber DEP or ARR beside them; the board stays dark in both themes, as a real one would */
.rm-tag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:7px;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,#15171D,#0B0C10);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.07) inset}
.rm-tag i{align-self:stretch;display:flex;align-items:center;padding:0 5px 0 4px;margin-right:1px;font:800 9px/1 var(--font-ui);letter-spacing:.14em;font-style:normal;
  color:#FFB938;text-shadow:0 0 6px rgba(255,185,56,.45);font-size:10px}
.rm-tag .sf{--sf-w:22px;--sf-h:30px;--sf-fs:18px;--sf-gap:3px}

/* ================================================================ leg card: the flight band
   Design A of the "Leg card redesign" canvas, chosen 2026-09-25. With the tail pictures gone the
   registration carries the aircraft: written large on the route map across the top of the card, the
   type's colour under it. Below, the route and the price, then the cabin with the offer beside it. */
/* a price: the whole number large, the cents small and lighter, the currency a small label (_price.html) */
.pv{display:inline-flex;align-items:baseline;gap:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pv b{font:700 1em/1 var(--font-ui);color:var(--hi);letter-spacing:-.01em}
.pv .pv-c{font-weight:600;color:var(--ink3)}
.pv .pv-cur{margin-left:5px;font:700 .5em/1 var(--font-ui);letter-spacing:.12em;color:var(--ink3)}
.plate{display:inline-flex;align-items:baseline;font:800 16px/1 var(--font-ui);letter-spacing:.04em;color:var(--hi);white-space:nowrap}
.plate i{font-style:normal;color:var(--ink4)}
.lr-tail{gap:8px}
.lr-tail > .plate{flex-direction:row;gap:0;padding:6px 9px 5px;border-radius:8px;font-size:17px;background:rgba(var(--well),.7);
  border:1px solid color-mix(in srgb,var(--type,var(--accent-2)) 50%,transparent)}
.lr-tail .tpill{align-self:center}
@media (min-width:1301px){.lr{grid-template-columns:170px minmax(150px,1.3fr) 118px 96px 80px 78px 120px minmax(110px,1fr) 18px}}
@media (max-width:1300px) and (min-width:1101px){.lr{grid-template-columns:160px minmax(140px,1.3fr) 110px 90px 64px 110px minmax(90px,1fr) 18px}}
@media (max-width:1100px) and (min-width:761px){.lr{grid-template-columns:150px minmax(130px,1fr) 104px 88px 104px 18px}}

.ltable form.leg{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.fb-band{position:relative;height:250px;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 120% at 80% 100%,rgba(110,147,255,.16),transparent 60%),rgba(var(--well),.35)}
.fb-band.with-map{background:var(--map-sea)}
.fb-band::after{content:"";position:absolute;inset:0 auto 0 0;z-index:0;width:540px;max-width:70%;pointer-events:none;   /* just past the name: the map beyond stays clear */
  background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 90%,transparent) 58%,transparent 100%)}
.fb-tail{position:absolute;right:6%;bottom:-18%;height:130%;width:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.6))}
.fb-id{position:absolute;left:32px;top:26px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:calc(100% - 64px)}
.fb-k{font:700 11px var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.plate.big{font-size:72px;line-height:.9;letter-spacing:.02em}
.fb-stripe{width:230px;max-width:100%;height:4px;border-radius:2px;background:var(--type,var(--accent))}
.fb-chips{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
.fb-chip{padding:5px 10px;border-radius:8px;background:rgba(var(--well),.72);border:1px solid rgba(var(--fg),.14);font:600 13px var(--font-ui);color:var(--ink2)}
.fb-chip.type{color:var(--type,var(--accent-2));border-color:color-mix(in srgb,var(--type,var(--accent-2)) 50%,transparent);font-weight:800;letter-spacing:.1em}
.fb-chip.strong{color:var(--hi);font-weight:700;letter-spacing:.06em}
.fb-order{font-size:12px;color:var(--ink3)}
.fb-band .state-tag{z-index:2}
.ltable form.leg::before{z-index:3;width:5px}       /* the state stripe runs down the map band too, as wide as the row's above it */

.fb-route{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:24px;padding:20px 32px;border-bottom:1px solid var(--line-soft)}
.fb-route > *,.fb-main > *,.ltable form.leg > *{grid-area:auto}   /* the old card's named areas mean nothing here */
.fb-route .leg-route{padding:0}
html[data-theme=light] .leg-route .path .plane{fill:var(--accent);filter:none}
.fb-route .leg-route .apt b{font-size:40px}
.fb-route .leg-route .apt em{font-size:15px}
.fb-route .leg-price{padding:0 0 0 24px;border-left:1px solid var(--line);align-self:stretch;justify-content:center}
.fb-route .leg-price .amount .pv-n{font-size:40px}.fb-route .leg-price .amount .pv-c{font-size:20px}

.fb-main{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:22px 32px 18px;align-items:start}
.fb-main.has-cabin{grid-template-columns:minmax(0,1fr) minmax(400px,460px)}
.fb-cabin{display:flex;flex-direction:column;gap:14px;min-width:0}
.fb-cabin .cabin{position:relative;width:100%;max-width:840px}
.fb-cabin .cabin-img{position:static;display:block;width:100%;height:auto;transform:none}
.fb-cabin .cseat b{width:30px;height:30px;font-size:13px}
.fb-cabin .cabin-side{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 20px;min-width:0}
.fb-cabin .cabin-side .cabin-n{font-size:30px}
.fb-main .leg-edit{align-self:start;min-width:0}
.fb-main.has-cabin .fields{grid-template-columns:1fr}
.fb-main.has-cabin .fields .field.wide{grid-column:auto}
.ltable form.leg > .extras{margin:0 32px;padding:12px 0 4px;border-top:1px solid var(--line-soft)}
.ltable form.leg > .leg-actions{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:14px 32px 20px}
.ltable form.leg > .leg-actions .switch{margin-right:auto}
.ltable form.leg > .leg-actions .btns{display:flex;flex-wrap:wrap;width:auto;max-width:none;justify-content:flex-end}
.ltable form.leg > .leg-breakdown,.ltable form.leg > .leg-history{margin:0 32px 24px}

@media (max-width:1180px){
  .fb-main.has-cabin{grid-template-columns:1fr}
  .fb-main.has-cabin .fields{grid-template-columns:1fr 1fr}
  .fb-route{grid-template-columns:1fr}
  .fb-route .leg-price{border-left:0;padding:14px 0 0;border-top:1px solid var(--line-soft);flex-direction:row;align-items:baseline;justify-content:flex-start;text-align:left;gap:12px;flex-wrap:wrap}
  .fb-band .rmap{--map-pad:36px 48px 36px 400px}
  .fb-band::after{width:420px}
  .fb-band .plate.big{font-size:56px}
}
@media (max-width:860px){
  .fb-band{height:320px}
  .fb-band .rmap{--map-pad:170px 24px 20px 24px}
  .fb-band::after{width:100%;max-width:none;background:linear-gradient(180deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 85%,transparent) 36%,transparent 58%)}
  .fb-id{left:18px;top:18px;gap:8px}
  .plate.big{font-size:52px}
  .fb-route,.fb-main{padding-left:16px;padding-right:16px}
  .fb-route .leg-route .apt b{font-size:30px}
  .fb-main.has-cabin .fields{grid-template-columns:1fr}
  .ltable form.leg > .extras,.ltable form.leg > .leg-breakdown,.ltable form.leg > .leg-history{margin-left:16px;margin-right:16px}
  .ltable form.leg > .leg-actions{padding:12px 16px 18px}
}

/* the airport names, as prominent as the codes: under the codes in the list row, and set large in
   the card's route line with the ICAO code as a small tag beside the time */
.lr-route{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.lr-codes{display:flex;align-items:center;gap:8px}
.lr-names{max-width:100%;font:600 12.5px/1.2 var(--font-ui);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-names i{font-style:normal;font-weight:500;color:var(--ink4);margin:0 2px}
.fb-route .leg-route .apt{grid-template-areas:"flag code" "flag nm" "flag sub" "flag time";row-gap:3px}
.fb-route .leg-route .apt.arr{grid-template-areas:"code flag" "nm flag" "sub flag" "time flag"}
.fb-route .leg-route .apt .nm{grid-area:nm;font:600 17px/1.25 var(--font-ui);color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.fb-route .leg-route .apt small{justify-self:start;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink3);padding:3px 6px;border-radius:5px;background:rgba(var(--fg),.06);margin:2px 0 4px}
.fb-route .leg-route .apt.arr small{justify-self:end}
@media (max-width:860px){.fb-route .leg-route .apt .nm{font-size:15px;max-width:200px}}

/* ================================================================ split-flap boards
   A departures board's letters: one tile each, split across the middle, warm-white letters on
   near-black; the board stays dark in both themes, as a real one would. Sized by --sf-w, --sf-h,
   --sf-fs and --sf-gap; splash.js flips them (window.splitFlap). */
.sf{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--sf-gap,2px);vertical-align:middle}
.sf .sf-t{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sf-w,19px);height:var(--sf-h,26px);
  border-radius:calc(var(--sf-h,26px) * .12);overflow:hidden;background:linear-gradient(180deg,#2A2D35 0%,#1E2027 49.5%,#141519 50.5%,#0F1013 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 1px 2px rgba(0,0,0,.6)}
.sf .sf-t::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(0,0,0,.85);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.sf .sf-t > span{font:700 var(--sf-fs,16px)/1 var(--font-ui);letter-spacing:0;color:#F3EEDF;text-shadow:0 1px 0 rgba(0,0,0,.6);transform-origin:50% 50%}
.sf .sf-t.acc > span{color:#9DB6FF}
.sf .sf-t.gap{width:calc(var(--sf-w,19px) * .45);background:none;box-shadow:none}.sf .sf-t.gap::after{display:none}
.sf .sf-t.tick > span{animation:sf-flap .065s linear}
/* the upper flap falls over the new letter, as on a mechanical board */
.sf .sf-t::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#30333C,#1E2027);transform-origin:50% 100%}
.sf .sf-t.tick::before{animation:sf-fall .065s linear}
@keyframes sf-fall{0%{opacity:1;transform:perspective(60px) rotateX(0);filter:brightness(1.15)}100%{opacity:1;transform:perspective(60px) rotateX(-90deg);filter:brightness(.45)}}
@keyframes sf-flap{0%{transform:perspective(70px) rotateX(0);filter:brightness(1)}50%{transform:perspective(70px) rotateX(-72deg);filter:brightness(.55)}100%{transform:perspective(70px) rotateX(0);filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.sf .sf-t.tick > span,.sf .sf-t.tick::before{animation:none}}
.sf .sf-w{display:inline-flex;gap:var(--sf-gap,2px);flex-wrap:nowrap}      /* a word's tiles stay together; lines wrap between words */
.sf-sr,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* .sr: read out, not seen */
/* the app's name on its board: in the header, on the sign-in page and on the welcome card */
.applogo .sf{--sf-w:.78em;--sf-h:1.1em;--sf-fs:.72em;--sf-gap:.08em;flex-wrap:nowrap}
/* the board's housing: the tiles on one grid in a dark frame, a blank tile for the space */
.sf.sf-board{flex-wrap:nowrap;padding:calc(var(--sf-h,26px) * .14);border-radius:calc(var(--sf-h,26px) * .2);
  background:linear-gradient(180deg,#121319 0%,#07080B 100%);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(0,0,0,.55),0 6px 18px -8px rgba(0,0,0,.8)}
.sf .sf-t.blank > span{visibility:hidden}
.default-save{position:absolute;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}   /* Enter saves (ops.html) */
/* the legs filter bar's default button: first in the form, so Enter in the search box applies the
   search; never seen */
.filterbar .fb-default{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;margin:-1px;border:0}
/* status.json cannot be reached: every lamp goes grey and the texts say since when, until it can */
.console.stale .lamp i,.console.stale .c-tile.partner .badge .lamp{background:var(--ink4);box-shadow:none;animation:none}
.console.stale .c-tile.partner .t-status{color:var(--ink3)}
/* a card's map that could not be had because the session ended */
.rmap .rm-hint{position:absolute;right:24px;bottom:16px;margin:0;max-width:280px;font:600 12.5px var(--font-ui);color:var(--ink3);text-align:right}

/* ---------------------------------------------------------------- sign-in (2026-09-27): an operations map beside a
   clean panel. The form is there from the first frame; the map draws itself in behind it. The map is a decoration
   of public airports around Memmingen, never our legs: the page is public. */
.gx-body{margin:0;background:#050913;overflow:hidden}
.gx{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,500px);background:#050913;color:var(--ink)}
.gx-visual{position:relative;overflow:hidden;background:radial-gradient(90% 80% at 55% 45%,#0C1737 0%,#070E22 55%,#050913 100%)}
.gx-map{position:absolute;inset:0;width:100%;height:100%;animation:gx-in 1.2s var(--ease) both}
.gx-land{fill:#0D1936}
.gx-coast{fill:none;stroke:#6E93FF;stroke-opacity:.32;stroke-width:.8px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.gx-border{fill:none;stroke:#8FA9FF;stroke-opacity:.14;stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
.gx-arc{fill:none;stroke:#6E93FF;stroke-opacity:.14;stroke-width:.45;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:gx-draw 1.5s var(--ease) calc(.2s + var(--i) * .07s) forwards}
.gx-trail{fill:none;stroke:#9DB6FF;stroke-opacity:.5;stroke-width:.6;stroke-linecap:butt}
.gx-plane{fill:#C9D7FF;fill-opacity:.8}
.gx-apt{opacity:0;animation:gx-show .5s var(--ease) calc(.15s + var(--i) * .04s) forwards}
.gx-apt .core{fill:#9FB2E0}
.gx-apt .ping{fill:none;stroke:#6E93FF;stroke-width:.6;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:gx-ping 6s ease-out calc(1s + var(--i) * .41s) infinite}
.gx-apt text{font:500 4.4px var(--mono);fill:#6A7DA8;letter-spacing:.35px}
.gx-apt.hub .core{fill:#E4EBFF}
.gx-apt.hub text{fill:#DCE4F7;font-weight:600;font-size:5.4px}
.gx-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(143,169,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(143,169,255,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(75% 70% at 55% 45%,#000 20%,transparent 100%)}
.gx-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,9,19,.96) 0%,rgba(5,9,19,.55) 30%,rgba(5,9,19,0) 55%),
             linear-gradient(180deg,rgba(5,9,19,.75) 0%,rgba(5,9,19,0) 22%),
             linear-gradient(90deg,rgba(5,9,19,0) 70%,rgba(5,9,19,.7) 100%)}
.gx-pitch{position:absolute;z-index:2;left:48px;right:48px;bottom:44px;animation:gx-rise .9s var(--ease) .1s both}
.gx-brand{display:grid;justify-items:start;gap:clamp(16px,2.4vh,26px);margin:0 0 clamp(28px,5vh,48px)}
.gx-brand .logo{height:clamp(56px,7.5vw,96px);font-size:clamp(50px,6.8vw,88px);filter:drop-shadow(0 14px 40px rgba(0,0,0,.6))}
.gx-brand .applogo{font-size:clamp(52px,6vw,82px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.55))}
.gx-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.gx-flow li{position:relative;padding-right:22px}
.gx-flow li:not(:last-child)::after{content:"";position:absolute;left:46px;right:10px;top:18px;height:1px;
  background:linear-gradient(90deg,transparent,#B7C8FF,transparent) no-repeat,rgba(110,147,255,.22);background-size:30% 100%,100% 100%;
  animation:gx-pipe 2.6s linear infinite}
.gx-flow li:nth-child(2)::after{animation-delay:1.3s}
.gx-node{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#BFD0FF;
  background:#0A1330;border:1px solid rgba(110,147,255,.3);box-shadow:0 0 20px -6px rgba(110,147,255,.6) inset}
.gx-node img,.gx-node svg{width:18px;height:18px;object-fit:contain}
.gx-flow b{display:block;margin-top:12px;font:600 14px var(--font-ui);color:#fff}
.gx-flow small{display:block;margin-top:3px;font-size:12px;color:var(--ink3)}

.gx-panel{position:relative;z-index:3;display:flex;flex-direction:column;min-width:0;padding:30px 48px 26px;overflow:auto;
  background:linear-gradient(180deg,#0C1328 0%,#080D1C 100%);box-shadow:-40px 0 80px -30px rgba(0,0,0,.7);animation:gx-slide .5s var(--ease) both}
.gx-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(110,147,255,0),rgba(110,147,255,.65) 35%,rgba(110,147,255,.15) 75%,rgba(110,147,255,0))}
.gx-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gx-env{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 10px;border-radius:999px;border:1px solid rgba(143,169,255,.2);
  font:500 10.5px/1.2 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2)}
.gx-env i{width:6px;height:6px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn)}
.gx-env.env-staging i{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.gx-env.env-production i{background:var(--good);box-shadow:0 0 8px var(--good)}
.gx-clock{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--mono)}
.gx-clock b{font-weight:500;font-size:14px;letter-spacing:.6px;color:#fff;font-variant-numeric:tabular-nums}
.gx-clock small{font-size:10px;letter-spacing:1.6px;color:var(--ink4)}
.gx-form{width:100%;max-width:392px;align-self:center;margin-top:auto;padding:36px 0 26px}
.gx-form h1{margin:0 0 26px;font:600 30px/1.1 var(--font-ui);letter-spacing:-.022em;color:#fff}
.gx-field{display:block;margin:0 0 16px}
.gx-field > span:first-child{display:block;margin:0 0 7px;font:500 12.5px var(--font-ui);color:var(--ink2)}
.gx-input{display:flex;align-items:center;height:50px;border-radius:12px;background:rgba(3,7,18,.65);border:1px solid rgba(143,169,255,.17);
  transition:border-color .15s,box-shadow .2s,background .15s}
.gx-input:hover{border-color:rgba(143,169,255,.3)}
.gx-input:focus-within{border-color:#6E93FF;background:rgba(6,11,26,.9);box-shadow:0 0 0 4px rgba(110,147,255,.15),0 0 28px -8px rgba(110,147,255,.55)}
.gx-input > svg{width:18px;height:18px;flex:none;margin-left:15px;color:var(--ink4);transition:color .15s}
.gx-input:focus-within > svg{color:#9DB6FF}
.gx-input input,.gx-input input:hover,.gx-input input:focus{flex:1;width:auto;min-width:0;height:100%;margin:0;padding:0 14px 0 12px;border:0;border-radius:0;
  background:transparent;box-shadow:none;outline:0;color:#fff;font:400 15px var(--font-ui)}
.gx-input input::placeholder{color:#5E6D8C}
.gx-input input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;transition:background-color 99999s}
.gx-peek{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-right:5px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink4);cursor:pointer}
.gx-peek:hover{color:#fff;background:rgba(255,255,255,.05)}.gx-peek[aria-pressed=true]{color:#9DB6FF}
.gx-peek:focus-visible{outline:2px solid #6E93FF;outline-offset:1px}
.gx-peek svg{width:18px;height:18px}
.gx-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;margin-top:10px;
  border:0;border-radius:12px;background:linear-gradient(180deg,#8AA8FF 0%,#5D84F6 100%);color:#06102C;font:650 15px var(--font-ui);cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 30px -12px rgba(110,147,255,.8);transition:transform .08s,box-shadow .2s,filter .2s}
.gx-go svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.gx-go:hover{filter:brightness(1.07);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 36px -12px rgba(110,147,255,.95)}
.gx-go:hover svg{transform:translateX(3px)}
.gx-go:active{transform:translateY(1px)}
.gx-go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gx-go::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%)}
.gx-form.busy .gx-go{pointer-events:none}.gx-form.busy .gx-go::after{animation:sweep 1.1s linear infinite}
.gx-status{min-height:18px;margin-top:12px;font:12px var(--mono);color:var(--ink3);text-align:center}
.gx-err{display:flex;gap:10px;align-items:flex-start;margin:0 0 20px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.45;
  background:rgba(242,102,94,.1);border:1px solid rgba(242,102,94,.35);color:#FFC2BD}
.gx-err svg{width:18px;height:18px;flex:none}
.gx-sys{position:relative;overflow:hidden;width:100%;max-width:392px;align-self:center;border-radius:16px;
  background:linear-gradient(180deg,rgba(143,169,255,.05),rgba(143,169,255,.015));border:1px solid rgba(143,169,255,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.8)}
.gx-sys::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--sys-c,#6E93FF),transparent);opacity:.7;transition:background .4s}
.gx-sys.s-ok{--sys-c:#3CC98A}.gx-sys.s-warn{--sys-c:#F2B84B}.gx-sys.s-fail{--sys-c:#F2665E}
.gx-sys-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px 11px;border-bottom:1px solid rgba(143,169,255,.08)}
.gx-live{display:inline-flex;align-items:center;gap:13px;font:500 10.5px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3)}
.gx-live i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--sys-c,#6E93FF);box-shadow:0 0 8px var(--sys-c,#6E93FF)}
.gx-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--sys-c,#6E93FF);animation:gx-radar 2.4s ease-out infinite}
.gx-sys-sum{font:500 11px var(--mono);color:var(--ink3);transition:color .3s}
.gx-sys-sum.s-ok{color:#6FE0AB}.gx-sys-sum.s-warn{color:var(--warn)}.gx-sys-sum.s-fail{color:var(--bad-ink)}
.gx-steps{list-style:none;margin:0;padding:6px 8px;display:grid}
.gx-steps li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:10px;transition:background .2s}
.gx-steps li:hover{background:rgba(143,169,255,.04)}
.gx-steps li + li::before{content:"";position:absolute;left:50px;right:8px;top:0;height:1px;background:rgba(143,169,255,.06)}
.gx-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#BFD0FF;background:#0A1330;border:1px solid rgba(143,169,255,.16)}
.gx-ic img{width:15px;height:15px;object-fit:contain}
.gx-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gx-tx{display:grid;gap:3px;min-width:0}
.gx-tx b{font-weight:600;font-size:13px;color:#fff;line-height:1.2}
.gx-tx small{font:11px/1.35 var(--mono);color:var(--ink4);overflow-wrap:anywhere}
.gx-steps li:not(.done) .gx-tx small{color:transparent;border-radius:4px;width:62%;
  background:linear-gradient(90deg,rgba(143,169,255,.06) 20%,rgba(143,169,255,.18) 50%,rgba(143,169,255,.06) 80%) 0 0/200% 100%;animation:gx-shimmer 1.3s linear infinite}
.gx-pill{display:inline-flex;align-items:center;gap:6px;min-width:22px;height:22px;padding:0 9px 0 8px;border-radius:999px;font:500 10px/1 var(--mono);font-style:normal;
  letter-spacing:.9px;text-transform:uppercase;color:var(--ink4);border:1px solid rgba(143,169,255,.14);background:rgba(143,169,255,.04)}
.gx-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(143,169,255,.35);animation:gx-blink 1s ease-in-out infinite}
.gx-steps li.done .gx-pill{animation:gx-pop .45s var(--ease) both}
.gx-steps li.done .gx-tx small{animation:gx-show .4s ease both;opacity:0}
.gx-steps li.s-ok .gx-pill{color:#6FE0AB;border-color:rgba(60,201,138,.35);background:rgba(60,201,138,.08)}
.gx-steps li.s-ok .gx-pill::before{background:#3CC98A;box-shadow:0 0 0 0 rgba(60,201,138,.6);animation:gx-beat 2.2s ease-out infinite}
.gx-steps li.s-warn .gx-pill{color:#F7C872;border-color:rgba(242,184,75,.35);background:rgba(242,184,75,.08)}
.gx-steps li.s-warn .gx-pill::before{background:#F2B84B;animation:none}
.gx-steps li.s-fail .gx-pill{color:#FFB5B0;border-color:rgba(242,102,94,.4);background:rgba(242,102,94,.1)}
.gx-steps li.s-fail .gx-pill::before{background:#F2665E;animation:gx-blink .8s ease-in-out infinite}
.gx-steps li.s-ok .gx-ic{border-color:rgba(60,201,138,.28)}.gx-steps li.s-warn .gx-ic{border-color:rgba(242,184,75,.3)}.gx-steps li.s-fail .gx-ic{border-color:rgba(242,102,94,.35)}
.gx-sys-foot{display:flex;align-items:center;gap:12px;padding:9px 16px 12px;font:10.5px var(--mono);color:var(--ink4);letter-spacing:.3px}
.gx-scan{flex:1;height:2px;border-radius:2px;background:rgba(143,169,255,.08);overflow:hidden}
.gx-scan i{display:block;width:34%;height:100%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sys-c,#6E93FF),transparent);
  animation:gx-sweep 2.8s ease-in-out infinite;opacity:.45}
.gx-sys.busy .gx-scan i{animation-duration:1s;opacity:1}
@keyframes gx-radar{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes gx-shimmer{to{background-position:-200% 0}}
@keyframes gx-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes gx-beat{0%{box-shadow:0 0 0 0 rgba(60,201,138,.55)}70%,100%{box-shadow:0 0 0 6px rgba(60,201,138,0)}}
@keyframes gx-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
.gx-foot{display:grid;gap:5px;margin-top:auto;padding-top:26px;font:500 10px/1.5 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--ink4)}
.gx-foot .imprint{font:400 11.5px var(--font-ui);letter-spacing:.1px;text-transform:none;opacity:.85}
@keyframes gx-in{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
@keyframes gx-draw{to{stroke-dashoffset:0}}
@keyframes gx-show{to{opacity:1}}
@keyframes gx-ping{0%{opacity:.35;transform:scale(.8)}60%,100%{opacity:0;transform:scale(4)}}
@keyframes gx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gx-slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes gx-blink{50%{opacity:.3}}
@keyframes gx-pipe{from{background-position:-60% 0,0 0}to{background-position:160% 0,0 0}}
@media (max-width:1100px){.gx{grid-template-columns:minmax(0,1fr) 420px}.gx-panel{padding:26px 34px 22px}}
@media (max-width:900px){
  .gx-body{overflow:auto}
  .gx{position:static;display:block;min-height:100vh}
  .gx-visual{height:300px}
  .gx-pitch{left:20px;right:20px;bottom:24px}.gx-brand{margin:0;gap:14px}.gx-brand .logo{height:52px;font-size:46px}.gx-brand .applogo{font-size:48px}.gx-flow{display:none}
  .gx-panel{padding:22px 20px 20px;box-shadow:none;animation:none}
  .gx-panel::before{top:0;left:0;right:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(110,147,255,.6),transparent)}
  .gx-form{padding:26px 0 22px}
}
@media (max-height:760px) and (min-width:901px){.gx-brand{margin-bottom:24px}.gx-form{padding:24px 0 18px}}
@media (prefers-reduced-motion:reduce){.gx-trail,.gx-plane,.gx-apt .ping{display:none}.gx-arc{stroke-dashoffset:0}.gx-flow li::after{animation:none}}

/* ---- two prices on the card: myIDTravel per seat, brokers for the whole aircraft ---- */
.field.prices{grid-column:span 2}
.fb-main.has-cabin .fields .field.prices{grid-column:auto}
.ptiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.ptile{--pt-tint:var(--accent-2);--pt-tint-rgb:110,147,255;position:relative;display:flex;flex-direction:column;gap:9px;min-width:0;padding:12px 12px 10px;border-radius:14px;
       border:1px solid var(--line);background:linear-gradient(180deg,rgba(var(--pt-tint-rgb),.07) 0%,rgba(var(--fg),.025) 42%,rgba(var(--fg),.015) 100%);overflow:hidden;
       transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ptile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--pt-tint),transparent 85%);opacity:.9}
.ptile.lh{--pt-tint:#F2C230;--pt-tint-rgb:242,194,48}
.ptile:focus-within{border-color:rgba(var(--pt-tint-rgb),.55);box-shadow:0 0 0 3px rgba(var(--pt-tint-rgb),.14),0 8px 24px -16px rgba(var(--pt-tint-rgb),.5)}
.pt-h{display:flex;align-items:center;gap:9px;margin:0;min-width:0;cursor:pointer}
.pt-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(var(--pt-tint-rgb),.25)}
.ptile.lh .pt-ic{background:#05164D}.ptile.lh .pt-ic img{width:16px;height:16px;display:block}
.ptile.br .pt-ic{background:rgba(var(--pt-tint-rgb),.16);color:var(--pt-tint)}.ptile.br .pt-ic svg{width:14px;height:14px}
.pt-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pt-t b{font:700 11px/1.2 var(--font-ui);letter-spacing:.7px;text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-t i{font:500 11px/1.2 var(--font-ui);font-style:normal;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-set{flex:none;padding:3px 7px;border-radius:999px;background:var(--soon-bg);color:var(--soon);font:700 9px/1.2 var(--font-ui);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.pt-amt{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 6px 6px 9px;border-radius:12px;border:1.5px solid rgba(var(--pt-tint-rgb),.55);
        background:linear-gradient(180deg,rgba(var(--pt-tint-rgb),.16),rgba(var(--pt-tint-rgb),.08));box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 24px -14px rgba(var(--pt-tint-rgb),.7);
        transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.pt-amt:hover{border-color:rgba(var(--pt-tint-rgb),.8)}
.ptile:focus-within .pt-amt{border-color:var(--pt-tint);background:linear-gradient(180deg,rgba(var(--pt-tint-rgb),.22),rgba(var(--pt-tint-rgb),.12));box-shadow:0 0 0 3px rgba(var(--pt-tint-rgb),.22),0 12px 28px -14px rgba(var(--pt-tint-rgb),.8)}
.pt-amt .cur{flex:none;font:800 14px/1 var(--font-ui);color:var(--pt-tint);letter-spacing:.02em}
.pt-amt input{flex:1;min-width:0;width:0;margin:0;padding:5px 0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
              font:800 20px/1 var(--font-ui);letter-spacing:-.03em;color:var(--hi);font-variant-numeric:tabular-nums;text-align:left}
.pt-amt input::placeholder{color:var(--ink2);font-weight:700;opacity:1}
.ptile.set .pt-amt input{color:var(--pt-tint)}
.ptile.set .pt-amt{border-color:rgba(var(--pt-tint-rgb),.85)}
.pt-steps{display:flex;flex-direction:column;gap:3px;flex:none}
.pt-steps .step{width:28px;height:18px;border-radius:6px;border:1px solid rgba(var(--pt-tint-rgb),.5);background:rgba(var(--pt-tint-rgb),.22);color:var(--hi);font:800 13px/1 var(--font-ui);cursor:pointer;padding:0;
                transition:background .15s var(--ease),color .15s var(--ease)}
.pt-steps .step:hover{background:var(--pt-tint);color:#0B1030;border-color:var(--pt-tint)}
.pt-steps .step:active{transform:translateY(1px)}
.ptile small{font-size:11px;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg-price .broker-line{display:inline-flex;align-items:baseline;gap:7px;margin-top:3px;font-size:12px;color:var(--ink3)}
.leg-price .broker-line em{font-style:normal;font:700 10.5px/1 var(--font-ui);letter-spacing:.7px;text-transform:uppercase;color:var(--ink4)}
.leg-price .broker-line i{font-style:normal;color:var(--ink4)}
.leg-price .broker-line .pv b{font-size:16px}.leg-price .broker-line .pv .pv-c{font-size:11px}.leg-price .broker-line .pv-cur{font-size:8px}
.leg-price .broker-line .ovr{margin-left:0;font-size:10px}
@media (max-width:720px){.ptiles{grid-template-columns:1fr}}

/* the composer's Download PDF button: an icon before the label */
.of-actions .of-pdf{display:inline-flex;align-items:center;gap:7px}
.of-actions .of-pdf svg{width:16px;height:16px;flex:none}

/* ---- engineering: previews only the engineer sees ---- */
.eng-pill{background:rgba(242,194,48,.14);color:#F2C230;border:1px solid rgba(242,194,48,.35);text-transform:none}
html[data-theme=light] .eng-pill{color:#8A6400;background:rgba(242,194,48,.18)}
.eng-list{display:flex;flex-direction:column;gap:12px;max-width:900px}
.eng-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px}
.eng-item h2{margin:0 0 4px;font:600 16px var(--font-ui);color:var(--hi);text-transform:none;letter-spacing:0}
.eng-item p{margin:0;color:var(--ink3);font-size:13px}
.eng-item .eng-state{margin-top:8px;font-size:12px;color:var(--ink4)}
/* a mark on what only the engineer sees for now */
.preview-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font:700 10px/1.4 var(--font-ui);letter-spacing:.6px;text-transform:uppercase;
             color:#F2C230;background:rgba(242,194,48,.12);border:1px solid rgba(242,194,48,.32);vertical-align:middle}
html[data-theme=light] .preview-tag{color:#8A6400}

/* ---- brokers (preview): filters, ticking, bulk actions, groups ---- */
.of-layout.bk-preview{grid-template-columns:minmax(0,1fr) 360px}
.bk-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bk-head h2{margin:0}
.bk-counts{margin:0;font-size:13px;color:var(--ink3)}.bk-counts b{color:var(--hi);font-variant-numeric:tabular-nums}.bk-counts i{font-style:normal;color:var(--ink4);margin:0 6px}
.bk-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 10px}
.bk-filters label{margin:0 !important}
.bk-filters .bk-q{flex:1 1 220px}.bk-filters .bk-q input{width:100%;margin:0}
.bk-filters select{margin:0;min-width:0;width:auto;height:38px;padding:7px 28px 7px 11px;font-size:13px}
.bk-bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.03)}
.bk-bulk select{margin:0;min-width:0;width:auto;height:34px;padding:5px 28px 5px 10px;font-size:13px}
.bk-bulk input[type=checkbox],.bk-row input[type=checkbox]{display:inline-block;width:auto;margin:0}
.bk-filters .bk-q input{height:38px}
.bk-bulk .bk-all{margin:0 !important;display:flex;align-items:center;padding:0 4px}
.bk-total{margin:12px 2px 6px;font-size:12px;color:var(--ink4)}
.bk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bk-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-soft)}
.bk-row:has(input:checked){border-color:rgba(110,147,255,.5);background:rgba(110,147,255,.07)}
.bk-row.off .bk-who b{color:var(--ink3)}
.bk-who{display:flex;flex-direction:column;min-width:0}
.bk-who b{font-size:14px;color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-who small{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:280px}
.bk-chip{display:inline-block;padding:2px 7px;border-radius:6px;font:600 11px/1.4 var(--font-ui);color:var(--ink2);background:rgba(var(--fg),.06);border:1px solid var(--line-soft);white-space:nowrap}
.bk-chip.leon{color:#9DB6FF;background:rgba(110,147,255,.12);border-color:rgba(110,147,255,.3)}
.bk-chip.grp{color:#7FD8B0;background:rgba(27,127,82,.14);border-color:rgba(27,127,82,.35)}
.bk-chip.gone{color:var(--bad-ink, #F28B82);background:var(--bad-bg);border-color:transparent}
html[data-theme=light] .bk-chip.leon{color:#2F4FD8}
html[data-theme=light] .bk-chip.grp{color:#1B7F52}
.bk-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-size:13px;color:var(--ink3)}
.bk-glist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.bk-glist li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-soft)}
.bk-glist a{display:flex;flex-direction:column;text-decoration:none;min-width:0}
.bk-glist a b{color:var(--hi);font-size:14px}.bk-glist a small{color:var(--ink3);font-size:12px}
.bk-glist form{margin:0}
.bk-gnew{display:flex;gap:8px}.bk-gnew input{flex:1;margin:0}
.bk-leon-note{display:flex;align-items:center;gap:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1100px){.of-layout.bk-preview{grid-template-columns:1fr}}
@media (max-width:720px){.bk-row{grid-template-columns:auto minmax(0,1fr) auto}.bk-row .avatar,.bk-row .bk-tags{display:none}}
/* the composer's groups (preview) */
.of-groups{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.of-groups label{display:inline-flex !important;align-items:center;gap:8px;margin:0 !important;padding:7px 12px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-weight:600;color:var(--ink2)}
.of-groups label small{font-weight:500;color:var(--ink4)}
.of-groups label:has(input:checked){border-color:rgba(27,127,82,.55);background:rgba(27,127,82,.12);color:var(--hi)}
.of-groups input{margin:0}
.of-limit{color:var(--soon)}
.of-sub{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:8px}
.eng-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 16px;padding:9px 14px;border-radius:12px;font-size:13px;
         border:1px solid rgba(242,194,48,.32);background:linear-gradient(90deg,rgba(242,194,48,.10),rgba(242,194,48,.03))}
.eng-bar-t{color:var(--ink3)}
.eng-bar a{color:var(--hi);font-weight:600;text-decoration:none}.eng-bar a:hover{text-decoration:underline}
.eng-bar .eng-bar-go{margin-left:auto;color:#F2C230;font-weight:600}
html[data-theme=light] .eng-bar .eng-bar-go{color:#8A6400}
.dk-key .pv-key{display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:#F2C230;box-shadow:0 0 0 3px rgba(242,194,48,.18);vertical-align:2px}
/* laptops: the keys a little narrower, so the Leon and Lufthansa modules keep their names */
@media (max-width:1480px) and (min-width:1281px){
  .deck{gap:10px;padding:0 16px}
  .dk-keys{gap:4px}
  .dk-key{padding-left:8px;padding-right:8px;min-width:54px;letter-spacing:.35px;font-size:10.5px}}
/* live broker filters: no Filter button needed; the list dims while the next one loads */
.bk-filters.live .bk-go{display:none}
.bk-results{transition:opacity .15s}
.bk-results.loading{opacity:.55}

/* ---- the check on the flight card (preview): what the price needs, and one green button for it ---- */
.chk{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:268px}
.chk-state{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0;font-size:12.5px;color:var(--ink3)}
.chk-state b{font-weight:700;color:var(--hi)}
.chk-state.todo b{color:var(--soon)}
.chk-state.ok{color:var(--ink3)}.chk-state.ok b{color:var(--good)}.chk-state.ok svg{width:15px;height:15px;color:var(--good)}
.chk-go{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 16px;border-radius:12px;border:0;
        font:800 14.5px/1 var(--font-ui);letter-spacing:.1px;color:#04241a;cursor:pointer;
        background:linear-gradient(180deg,#5ADBA0,#34C384);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 10px 22px -12px var(--good)}
.chk-go:hover{background:linear-gradient(180deg,#6BE4AD,#3CCB8C)}
.chk-go:active{transform:translateY(1px)}
.chk-go svg{width:18px;height:18px;flex:none}
.chk-go .edited{display:none}
form.leg.dirty .chk-go .clean{display:none}
form.leg.dirty .chk-go .edited{display:inline}
/* already checked: the button rests as a quiet confirmation until something is edited */
.chk-go.quiet{color:var(--good);background:rgba(27,127,82,.12);box-shadow:inset 0 0 0 1px rgba(60,201,138,.35);cursor:default}
.chk-go.quiet:hover{background:rgba(27,127,82,.16)}
form.leg.dirty .chk-go.quiet{color:#04241a;cursor:pointer;background:linear-gradient(180deg,#5ADBA0,#34C384);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 22px -12px var(--good)}
.leg-actions .btns.after-chk{grid-template-columns:1fr 1fr}
.leg-actions .btns.after-chk > :last-child:nth-child(odd){grid-column:1 / -1}
.lflag.checked{gap:4px;color:var(--good);background:rgba(27,127,82,.14)}
.lflag.checked svg{width:12px;height:12px}
/* the card's actions with the check (preview): switch and tools on the left, the check on the right */
.ltable form.leg > .leg-actions.has-chk{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,300px);
  grid-template-areas:"sw note chk" "tools tools chk";align-items:center;gap:12px 16px}
.leg-actions.has-chk .switch{grid-area:sw;margin:0}
.leg-actions.has-chk .dirty-note{grid-area:note;justify-self:start;align-self:center}
.leg-actions.has-chk .chk{grid-area:chk;max-width:none;align-self:center}
.leg-actions.has-chk .btns{grid-area:tools;justify-content:flex-start !important}
@media (max-width:820px){
  .ltable form.leg > .leg-actions.has-chk{grid-template-columns:1fr;grid-template-areas:"chk" "sw" "note" "tools"}}
/* the region base prices (preview) */
.rg-rows{display:flex;flex-direction:column;gap:8px;max-width:620px}
.rg-row{display:flex !important;align-items:center;justify-content:space-between;gap:16px;margin:0 !important;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.025)}
.rg-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.rg-name b{font-size:14px;color:var(--hi)}.rg-name small{font-size:12px;color:var(--ink3);font-weight:500}
.rg-row .pr-cell{flex:none;width:150px}
.pr-cell.falls-back{border-style:dashed}
.pr-cell.falls-back input::placeholder{color:var(--ink4);font-size:13px;font-weight:500}

/* broker offers: the Email and PDF tabs, and the PDF builder */
.of-tabs{margin:0;align-self:flex-end}
.of-tabs a{display:inline-flex;align-items:center;gap:6px}
.of-tabs .preview-tag{margin:0}
.segs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.of-step .segs.two .seg{display:flex;flex-direction:column;gap:4px;margin-top:0}
.of-step .segs.two .seg small{margin-left:0;line-height:1.4;font-weight:500}
.of-pdf-frame{background:#3B3F4A}
.of-pdf-empty{margin:0;padding:80px 32px;text-align:center;color:var(--ink3);font-size:14px;line-height:1.5}
.of-preview header .of-pdf-state{margin-left:auto}
/* the switchers inside a composer step: their options are labels, without the step's label spacing */
.of-step .segs .seg{margin-top:0}
.of-step .segs.small{align-items:center}
/* the PDF preview while the PDF is made: a sweeping bar under the header and a veil with a spinner */
.of-preview header{position:relative}
.of-preview header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;opacity:0;transition:opacity .2s;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 40%,#9DB6FF 50%,var(--accent) 60%,transparent 100%);background-size:200% 100%}
.of-preview.busy header::after{opacity:1;animation:of-sweep 1.1s linear infinite}
@keyframes of-sweep{from{background-position:100% 0}to{background-position:-100% 0}}
.of-pdf-busy{position:absolute;inset:47px 0 0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(10,14,32,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
.of-preview.busy .of-pdf-busy{opacity:1}
.of-pdf-busy b{font:600 13px var(--font-ui);color:var(--hi);letter-spacing:.2px}
.of-pdf-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(157,182,255,.22);border-top-color:var(--accent);animation:spin .8s linear infinite}
.of-preview.busy .of-pdf-empty{visibility:hidden}
@media (prefers-reduced-motion:reduce){.of-preview.busy header::after,.of-pdf-spin{animation:none}}

/* ================================================================ preview "app_shell": the cleaner shell
   A slim menu bar (text tabs with small icons, compact Leon and Lufthansa indicators, a small day and
   night switch) and the console as a status column at the side of the page. Everything here is
   scoped to body.shell2, which only the preview's viewers get; the markup and the live updates are
   the same as in the deck above. */
.shell2 .deck{height:58px;gap:16px;padding:0 20px;background:rgba(8,11,22,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-top:0;box-shadow:0 1px 0 rgba(255,255,255,.06),0 12px 28px -22px rgba(0,0,0,.9)}
body.env-production.shell2 .deck{box-shadow:inset 0 2px 0 var(--bad),0 1px 0 rgba(255,255,255,.06)}
/* the brand on one line: roundel, name, and the split-flap label set small */
.shell2 .dk-brand{flex-direction:row;align-items:center;gap:12px}
.shell2 .dk-ea{font-size:20px;gap:8px}.shell2 .dk-ea span{display:inline}
.shell2 .dk-ea img{width:22px;height:22px}
.shell2 .dk-el{padding-left:12px;border-left:1px solid rgba(255,255,255,.1)}
.shell2 .dk-el .sf{--sf-w:9.5px;--sf-h:14px;--sf-fs:9px;--sf-gap:1px}
.shell2 .deck .env{font-size:10px;letter-spacing:1.2px;padding:3px 7px;border-radius:5px}
/* the menu: text tabs, the icon beside the label, the page you are on as a soft pill */
.shell2 .dk-keys{gap:2px;padding:0;background:none;box-shadow:none;flex-shrink:1}
.shell2 .dk-key{flex-direction:row;align-items:center;gap:7px;min-width:0;height:34px;padding:0 11px;border-radius:9px;border:0;background:none;box-shadow:none;
  font:600 13px/1 var(--font-ui);letter-spacing:.1px;text-transform:none;color:#8F9BBA;transition:color .15s,background .15s}
.shell2 .dk-key .ic{width:15px;height:15px;opacity:.75}
.shell2 .dk-key .lt{display:none}
.shell2 .dk-key:hover{background:rgba(255,255,255,.055);color:#E6ECFA}
.shell2 .dk-key:active{transform:none;box-shadow:none}
.shell2 .dk-key.on{transform:none;color:#FFFFFF;background:rgba(110,147,255,.16);box-shadow:0 0 0 1px rgba(110,147,255,.22) inset}
.shell2 .dk-key.on .ic{color:#9DB6FF;filter:none;opacity:1}
.shell2 .dk-key.warn .ic{color:var(--warn)}
.shell2 .dk-key.on.warn{background:rgba(242,184,75,.14);box-shadow:0 0 0 1px rgba(242,184,75,.25) inset}
.shell2 .dk-key .beta{font-size:7.5px;padding:2px 4px;vertical-align:1px}
.shell2 .dk-key .cnt{position:static;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:700 10.5px/18px var(--font-ui);box-shadow:none;margin-left:-1px}
/* Leon and Lufthansa: small indicators, the emblem in a status ring and the name; the reading is in
   the title and in the status column */
.shell2 .dk-anns{gap:6px;padding:0;background:none;box-shadow:none;flex:none}
.shell2 .ann{container-type:normal;width:auto;min-width:0;height:34px;gap:8px;padding:0 12px 0 4px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);box-shadow:none;transition:background .15s,border-color .15s}
.shell2 .ann:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.shell2 .ann:active{transform:none;box-shadow:none}
.shell2 .ann-badge{width:26px;height:26px;margin:0;box-shadow:0 0 0 1.5px var(--c),0 0 8px var(--c-glow)}
.shell2 .ann-badge img{width:13px;height:13px}
.shell2 .ann-badge::before{inset:-4px;-webkit-mask:radial-gradient(circle,transparent 15px,#000 16px);mask:radial-gradient(circle,transparent 15px,#000 16px)}
.shell2 .ann-txt{position:static;flex-direction:row;align-items:center;gap:0;pointer-events:auto}
.shell2 .ann .nm{gap:7px;font:600 12.5px/1 var(--font-ui);letter-spacing:.1px;text-transform:none;color:#DCE3F5}
.shell2 .ann .nm .t{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.shell2 .ann .led{position:static;width:6px;height:6px;border:0;box-shadow:0 0 6px var(--c-glow)}
.shell2 .ann.s-warn .led{width:6px;height:6px}.shell2 .ann.s-warn .led::after{content:none}
.shell2 .ann .st{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the day and night switch, small */
.shell2 .dk-theme{padding:0;background:none;box-shadow:none}
.shell2 .dk-switch{width:auto;height:auto;padding:0;gap:0;background:none;border:0;box-shadow:none}
.shell2 .sw-caps{display:none}
.shell2 .sw-track{width:50px;height:24px;border-radius:12px}
.shell2 .sw-knob{width:20px;height:20px}
.shell2 .dk-switch .sw-knob{transform:translateX(26px)}
[data-theme=light] .shell2 .dk-switch .sw-knob{transform:translateX(0)}
.shell2 .sw-end{top:5px;width:13px;height:13px}.shell2 .sw-end.sun{left:6px}.shell2 .sw-end.moon{right:6px}
.shell2 .sw-knob svg{width:12px;height:12px}
.shell2 .dk-me summary{width:32px;height:32px;font-size:11.5px}

/* the page and the status column beside it */
.shell2 main.has-rail{max-width:1720px;display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:22px;align-items:start}
.shell2 .main-col{min-width:0}
.shell2 .rail{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.shell2 .rail .console{display:flex;flex-direction:column;gap:10px;margin:0}
.shell2 .rail .c-health,.shell2 .rail .c-tile{border-radius:14px;padding:13px 14px;box-shadow:var(--shadow)}
/* publisher */
.shell2 .rail .c-health{gap:12px}
.shell2 .rail .lamp{gap:10px}.shell2 .rail .lamp i{width:10px;height:10px}
.shell2 .rail .lamp b{font-size:14px}.shell2 .rail .lamp span{font-size:11.5px}
.shell2 .rail .mixlegend{display:flex;flex-direction:column;gap:5px}
.shell2 .rail .mixlegend a{font-size:12.5px}
/* Leon and Lufthansa */
.shell2 .rail .c-tile.partner{grid-template-columns:40px minmax(0,1fr);column-gap:12px;row-gap:10px;padding:13px 14px}
.shell2 .rail .c-tile.partner .badge{grid-row:1;width:40px;height:40px;border-radius:12px}
.shell2 .rail .c-tile.partner .badge img{width:23px;height:23px}
.shell2 .rail .c-tile.partner .badge.lh img{width:26px;height:26px}
.shell2 .rail .c-tile.partner .badge .lamp{width:12px;height:12px;right:-4px;bottom:-4px;border-width:2px}
.shell2 .rail .c-tile.partner .t-head b{font-size:14px}
.shell2 .rail .c-tile.partner .t-head .sub{font-size:11px}
.shell2 .rail .c-tile.partner .t-status{font-size:12.5px}
.shell2 .rail .c-tile.partner .t-body{flex-direction:column;gap:2px;font-size:12px;margin-top:2px}
.shell2 .rail .c-tile.partner .t-act{grid-column:1 / -1;justify-content:center;width:100%}
/* alerts */
.shell2 .rail .c-tile.alerts .t-body{font-size:12px}
.shell2 .rail .c-note{position:static;margin:0}

/* narrower screens: the column moves above the page as one compact row of boxes */
@media (max-width:1280px){
  .shell2 main.has-rail{display:block}
  .shell2 .rail{position:static;max-height:none;overflow:visible;margin-bottom:16px}
  .shell2 .rail .console{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .shell2 .rail .c-tile.partner .t-act{width:auto}
  .shell2 .dk-ea span{display:none}
}
@media (max-width:1700px){.shell2 .dk-key{padding:0 10px}.shell2 .dk-key .ic{display:none}}
@media (max-width:1500px){.shell2 .dk-el{display:none}}
@media (max-width:1100px){.shell2 .ann .nm .t{display:none}.shell2 .ann{padding:0 4px;gap:0}.shell2 .ann .led{display:none}}
@media (max-width:900px){
  .shell2 .deck{height:auto;padding:10px 16px}
  .shell2 .rail .console{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.shell2 .rail .console{grid-template-columns:1fr}}
/* beside the status column the page is narrower than the screen: the flight list follows the width of
   its own column (the screen-width rules above assume the full width, about 48px less than the screen) */
.shell2 .main-col{container:page / inline-size}
@container page (min-width:1253px){.shell2 .lr{grid-template-columns:170px minmax(150px,1.3fr) 118px 96px 80px 78px 120px minmax(110px,1fr) 18px}}
@container page (max-width:1252px){
  .shell2 .lr{grid-template-columns:140px minmax(140px,1.3fr) 120px 88px 64px 110px minmax(90px,1fr) 18px;grid-template-areas:none;row-gap:0}
  .shell2 .lr-seats{display:none}.shell2 .lr-block{display:flex}
}
@container page (max-width:1052px){
  .shell2 .lr{grid-template-columns:130px minmax(130px,1fr) 104px 88px 104px 18px;grid-template-areas:"tail route dep count price chev" "flags flags flags flags flags flags";row-gap:6px}
  .shell2 .lr-block{display:none}
  .shell2 .lr-tail{grid-area:tail}.shell2 .lr-route{grid-area:route}.shell2 .lr-dep{grid-area:dep}.shell2 .lr-count{grid-area:count}.shell2 .lr-price{grid-area:price}.shell2 .lr-chev{grid-area:chev}
  .shell2 .lr-flags{grid-area:flags;justify-content:flex-start}.shell2 .lr-flags:empty{display:none}
}
@container page (max-width:712px){
  .shell2 .lr{grid-template-columns:1fr auto;grid-template-areas:"tail price" "route route" "dep count" "flags flags";gap:8px}
  .shell2 .lr-chev{display:none}.shell2 .lr-count{justify-self:end}
}

/* ---------------------------------------------------------------- preview "offer_design": the flight picker
   The price shown as three equal choices with what each means, and each flight as a row with a drawn
   checkbox, the departure time large and the date under it. */
.pm{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.pm-cap{font:600 11px var(--font-ui);letter-spacing:1.3px;text-transform:uppercase;color:var(--ink4)}
.pm-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:rgba(var(--well),.55);border:1px solid var(--line)}
.of-step .pm-opt{position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--ink3);
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.pm-opt input{position:absolute;opacity:0;pointer-events:none}
.pm-opt svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.pm-opt span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-opt b{font:600 13.5px/1.2 var(--font-ui);color:var(--ink2)}
.pm-opt small{font:500 11.5px/1.3 var(--font-ui);color:var(--ink4);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-opt:hover{background:rgba(var(--fg),.04)}
.pm-opt:has(input:checked){background:linear-gradient(180deg,rgba(110,147,255,.22),rgba(110,147,255,.12));border-color:rgba(110,147,255,.45);
  box-shadow:0 6px 18px -10px rgba(110,147,255,.6)}
.pm-opt:has(input:checked) svg{color:var(--accent-2);opacity:1}
.pm-opt:has(input:checked) b{color:var(--hi)}
.pm-opt:has(input:checked) small{color:var(--ink3)}
.pm-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
html[data-theme=light] .pm-opt:has(input:checked){background:#fff;border-color:rgba(47,79,216,.45);box-shadow:0 4px 14px -8px rgba(47,79,216,.45)}
@media (max-width:760px){.pm-track{grid-template-columns:1fr}}

.of-legs.fx{gap:8px}
.of-legs.fx .of-leg{gap:14px;padding:12px 14px 12px 12px;border-radius:14px;background:rgba(var(--fg),.025);
  transition:border-color .15s,background .15s,box-shadow .15s}
.of-legs.fx .of-leg:hover{border-color:var(--line-strong)}
.of-legs.fx .of-leg.on{border-color:rgba(110,147,255,.55);background:rgba(110,147,255,.08);box-shadow:inset 3px 0 0 var(--accent)}
.of-legs.fx .of-pick{gap:16px}
/* the checkbox, drawn: a rounded square that fills with the accent and a white tick */
.of-legs.fx .of-pick input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin:0;border-radius:7px;cursor:pointer;
  border:1.5px solid var(--line-strong);background:rgba(var(--well),.6);transition:background .15s,border-color .15s,box-shadow .15s}
.of-legs.fx .of-pick input[type=checkbox]:hover{border-color:var(--accent)}
.of-legs.fx .of-pick input[type=checkbox]:checked{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat}
.of-legs.fx .of-pick input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fx-when{width:118px}
.fx-when b{font:700 19px/1.1 var(--mono);color:var(--hi);letter-spacing:-.3px}
.fx-when b em{font:600 12px var(--mono);font-style:normal;color:var(--ink4);margin-left:2px}
.fx-when small{font-size:12px;color:var(--ink3);white-space:nowrap}
.of-legs.fx .of-leg-route b{font-size:17px}
.of-legs.fx .of-price{width:148px;height:44px;border-radius:11px;padding:0 12px}
.of-legs.fx .of-price input{font-size:16px}
.of-legs.fx .of-leg:not(.on) .of-price{opacity:.5}

/* ---------------------------------------------------------------- preview "app_shell": the status column, subdued
   A neutral black panel, apart from the page: grey surfaces and text, no blue; only the states keep
   their colours. The same in the light theme, like the menu bar. */
.shell2 .rail{--hi:#F1F2F4;--fg:255,255,255;--well:0,0,0;--ink:#E4E5E8;--ink2:#B4B7BF;--ink3:#8B8F98;--ink4:#6C7079;
  --surface:#0D0E11;--surface-2:#121317;--surface-3:#1B1D22;--surface-hi:#22242A;
  --line:rgba(255,255,255,.07);--line-strong:rgba(255,255,255,.13);--card-grad:#101114;
  --accent:#D3D6DC;--accent-2:#C4C8D0;--accent-glow:rgba(255,255,255,.12);
  --good:#3CC98A;--good-bg:rgba(60,201,138,.12);--soon:#E8A33C;--soon-bg:rgba(232,163,60,.12);--warn:#F2B84B;--warn-bg:rgba(242,184,75,.12);
  --bad:#F2665E;--bad-bg:rgba(242,102,94,.13);--bad-ink:#FFB5B0;
  color-scheme:dark;color:var(--ink);padding:8px;border-radius:20px;background:#08090B;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
.shell2 .rail .c-health,.shell2 .rail .c-tile{background:#101114;border:1px solid rgba(255,255,255,.055);box-shadow:none;border-radius:13px}
.shell2 .rail .c-tile:hover{border-color:rgba(255,255,255,.12);transform:none}
.shell2 .rail .c-tile.bad{background:linear-gradient(180deg,rgba(242,102,94,.10),rgba(242,102,94,.02) 50%),#101114;border-color:rgba(242,102,94,.3)}
.shell2 .rail .mixbar{background:#1B1D22}
.shell2 .rail .c-tile.partner .badge,.shell2 .rail .c-tile.partner .badge.lh{background:linear-gradient(160deg,#23252B,#15161A);border-color:rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.shell2 .rail .c-tile.partner .badge .lamp{border-color:#101114}
.shell2 .rail .t-act{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--ink2)}
.shell2 .rail .t-act:hover{background:rgba(255,255,255,.08);color:var(--hi);border-color:rgba(255,255,255,.18)}
.shell2 .rail .c-tile .t-body a{color:var(--ink2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.shell2 .rail .c-tile.alerts .t-head span{background:#1B1D22}
.shell2 .rail .c-note{background:#101114;border-color:rgba(255,255,255,.08)}
@media (max-width:1280px){.shell2 .rail{padding:8px}}
.of-step .pm-opt small,.of-step .fx-when small{margin-left:0}

/* ---------------------------------------------------------------- preview "app_shell": the frame in neutral black
   The menu bar, the 48-hour strip and the status column share one subdued black, without the blue,
   in both themes, so the frame reads apart from the page it holds. Only the states keep colour. */
.shell2 .deck{background:rgba(9,10,12,.94);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.shell2 .dk-key{color:#8D9199}
.shell2 .dk-key:hover{background:rgba(255,255,255,.06);color:#ECEDF0}
.shell2 .dk-key.on{color:#FFFFFF;background:rgba(255,255,255,.11);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.shell2 .dk-key.on .ic{color:#FFFFFF}
.shell2 .dk-key .beta{color:#C9CCD3;background:rgba(255,255,255,.08)}
.shell2 .ann{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.shell2 .ann:hover{background:rgba(255,255,255,.08)}
.shell2 .ann-badge{background:radial-gradient(circle at 35% 30%,#2A2C32,#121316 70%)}
.shell2 .ann .nm{color:#E2E4E8}
.shell2 .dk-el{border-left-color:rgba(255,255,255,.1)}
.shell2 .dk-switch .sw-track{background:#111215}
.shell2 .dk-switch .sw-knob{background:radial-gradient(circle at 34% 30%,#FFFFFF 0%,#C9CCD3 50%,#8D9199 100%);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 10px rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.6)}
.shell2 .dk-switch .sw-knob .moon{stroke:#2A2C32;fill:#2A2C32}
[data-theme=light] .shell2 .dk-switch .sw-track{background:#1A1712}
.shell2 .dk-switch .sw-stars{opacity:.5}
/* the build, beside the environment; amber with "reload" when a newer one is out */
.dk-build{flex:none;font:500 10.5px/1 var(--mono);letter-spacing:.4px;color:#7D818A;padding:4px 7px;border-radius:5px;border:1px solid rgba(255,255,255,.08);white-space:nowrap}
.dk-build.new{color:#1A1200;background:#F2B84B;border-color:#F2B84B;cursor:pointer;font-weight:600}
footer .build{margin-top:6px;font:500 11px var(--mono);color:var(--ink4);letter-spacing:.3px}
@media (max-width:1280px){.dk-build:not(.new){display:none}}
/* the 48-hour strip: the same black, grey ticks and text, a white now line; published flights grey-white, on hold
   amber, blocked red */
.shell2 .dk-tape{--tp-bg:linear-gradient(180deg,#0E0F12 0%,#0B0C0E 100%);--tp-edge:rgba(255,255,255,.07);--tp-sep:rgba(255,255,255,.09);
  --tp-line:rgba(255,255,255,.2);--tp-tick:rgba(255,255,255,.14);--tp-tick-day:rgba(255,255,255,.22);--tp-band:rgba(255,255,255,.025);
  --tp-ink:#E2E4E8;--tp-dim:#9A9EA7;--tp-faint:#7D818A;--tp-strong:#FFFFFF;
  --tp-dot:#E2E4E8;--tp-ring:#0E0F12;--tp-dot-glow:rgba(255,255,255,.3);--tp-now:#FFFFFF;--tp-now-glow:rgba(255,255,255,.45);--tp-hold:#F2B84B;
  --tp-grid:rgba(255,255,255,.05);--tp-head:rgba(255,255,255,.07);
  --tp-bar:linear-gradient(180deg,rgba(226,228,232,.5),rgba(180,184,192,.28));--tp-bar-edge:rgba(240,241,244,.55);--tp-bar-glow:rgba(255,255,255,.18);
  --tp-bar-hold:linear-gradient(180deg,rgba(246,194,98,.55),rgba(226,160,48,.3));--tp-bar-hold-edge:rgba(250,212,140,.62);--tp-bar-hold-glow:rgba(242,184,75,.4);
  --tp-bar-bad:linear-gradient(180deg,rgba(246,120,112,.6),rgba(222,82,74,.34));--tp-bar-bad-edge:rgba(255,176,168,.62);--tp-bar-bad-glow:rgba(242,102,94,.45);
  --hi:#FFFFFF;--fg:255,255,255;--ink2:#C4C7CE;--ink3:#9A9EA7;--ink4:#7D818A;--bad-ink:#FFB5B0;--surface-2:#16171B;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.15);
  --good:#3CC98A;--good-bg:rgba(60,201,138,.12);--warn:#F2B84B;--warn-bg:rgba(242,184,75,.12);--bad-bg:rgba(242,102,94,.13);
  box-shadow:none}
/* the page between: in the dark theme a touch lighter and bluer than the frame, so the two read apart */
html:not([data-theme=light]) body.shell2{background:radial-gradient(120% 60% at 50% -10%,#141C3D 0%,#0B1022 55%) fixed,#0B1022}
.shell2 footer{border-top:1px solid var(--line);margin-top:8px}

/* ================================================================ preview "side_nav": the side menu
   The menu in a column on the left in sections, the environment and build under the name, the
   publisher, Leon and Lufthansa at its foot, the account and the day and night switch at the
   bottom. It folds to icons (body.sb-mini, remembered per browser) and slides in on a phone. The
   same subdued black as the rest of the frame, in both themes. */
body.side{--sb-w:240px}
body.side.sb-mini{--sb-w:68px}
.side .sb,.side .sb-pop,.side .sb-top{--hi:#F1F2F4;--fg:255,255,255;--well:0,0,0;--ink:#E4E5E8;--ink2:#B4B7BF;--ink3:#8B8F98;--ink4:#6C7079;
  --surface:#0D0E11;--surface-2:#121317;--surface-3:#1B1D22;--surface-hi:#22242A;--line:rgba(255,255,255,.07);--line-strong:rgba(255,255,255,.13);
  --card-grad:#101114;--accent:#D3D6DC;--accent-2:#C4C8D0;--accent-glow:rgba(255,255,255,.12);
  --good:#3CC98A;--good-bg:rgba(60,201,138,.12);--soon:#E8A33C;--soon-bg:rgba(232,163,60,.12);--warn:#F2B84B;--warn-bg:rgba(242,184,75,.12);
  --bad:#F2665E;--bad-bg:rgba(242,102,94,.13);--bad-ink:#FFB5B0;color-scheme:dark}
.side .sb{position:fixed;z-index:60;top:0;bottom:0;left:0;width:var(--sb-w);display:flex;flex-direction:column;background:#0A0B0D;
  border-right:1px solid rgba(255,255,255,.06);color:var(--ink);transition:width .2s var(--ease)}
.side .app-main{margin-left:var(--sb-w);min-width:0;transition:margin-left .2s var(--ease)}
.side main{max-width:1480px}
/* head: the name, the split-flap label under it, the fold button */
.side .sb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:18px 12px 10px 18px}
.side .sb .dk-brand{flex-direction:column;align-items:flex-start;gap:9px}
.side .sb .dk-ea{font-size:20px}.side .sb .dk-ea span{display:inline}.side .sb .dk-ea img{width:22px;height:22px}
.side .sb .dk-el{display:flex;padding-left:0;border-left:0}
.side .sb .dk-el .sf{--sf-w:10px;--sf-h:15px;--sf-fs:9.5px;--sf-gap:1px}
.sb-collapse{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:none;color:var(--ink3);cursor:pointer;transition:background .15s,color .15s,transform .2s}
.sb-collapse:hover{background:rgba(255,255,255,.07);color:var(--hi)}
.sb-collapse svg,.sb-burger svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side .sb-env{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 18px 10px}
.side .sb-env .env{font-size:10px;letter-spacing:1.2px;padding:3px 7px;border-radius:5px}
.side .sb-env .dk-build{display:inline-block}
/* the menu, in sections */
.side .sb-nav{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;padding:4px 10px 10px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;order:0;min-height:0}
.sb-sec{margin:14px 10px 6px;font:600 10.5px/1 var(--font-ui);letter-spacing:1.4px;text-transform:uppercase;color:var(--ink4);white-space:nowrap}
.sb-nav .sb-sec:first-child{margin-top:6px}
.side .sb .dk-key{flex:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:11px;width:100%;min-width:0;height:36px;padding:0 10px;
  border:0;border-radius:9px;background:none;box-shadow:none;transform:none;font:500 13.5px/1 var(--font-ui);letter-spacing:.1px;text-transform:none;color:#A3A7B0}
.side .sb .dk-key .ic{display:block;width:17px;height:17px;opacity:.75}
.side .sb .dk-key .lt{display:none}
.side .sb .dk-key .lb{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.side .sb .dk-key:hover{background:rgba(255,255,255,.06);color:#F1F2F4}
.side .sb .dk-key:hover .ic{opacity:1}
.side .sb .dk-key.on{background:rgba(255,255,255,.1);color:#FFFFFF;font-weight:600;box-shadow:inset 2px 0 0 #E4E5E8}
.side .sb .dk-key.on .ic{color:#FFFFFF;opacity:1;filter:none}
.side .sb .dk-key.warn .ic{color:var(--warn)}
.side .sb .dk-key .cnt{position:static;margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font:700 11px/20px var(--font-ui);box-shadow:none}
.side .sb .dk-key .beta{font-size:7.5px;padding:2px 4px;color:#C9CCD3;background:rgba(255,255,255,.08)}
/* status at the foot of the menu */
.side .sb-status{flex:none;padding:4px 10px 8px;border-top:1px solid rgba(255,255,255,.06)}
.side .sb-status .sb-sec{margin-top:12px}
.sb-pub{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sb-pub:hover,.sb-pub.on{background:rgba(255,255,255,.06)}
.sb-pub span{display:flex;flex-direction:column;gap:3px;min-width:0}
.sb-pub b{font:600 12.5px/1.2 var(--font-ui);color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-pub small{font:500 11px/1 var(--font-ui);color:var(--ink4)}
.sb-lamp{flex:none;width:9px;height:9px;margin:0 8px 0 9px;border-radius:50%;background:var(--ink4)}
.sb-pub.s-ok .sb-lamp{background:var(--good);box-shadow:0 0 8px var(--good)}
.sb-pub.s-soon .sb-lamp{background:var(--soon)}
.sb-pub.s-warn .sb-lamp{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.side .sb .dk-anns{display:flex;flex-direction:column;gap:2px;padding:0;margin:0;background:none;box-shadow:none;flex:none}
.side .sb .ann{container-type:normal;width:100%;min-width:0;height:auto;gap:11px;padding:7px 10px;border:0;border-radius:9px;background:none;box-shadow:none;transform:none}
.side .sb .ann:hover{background:rgba(255,255,255,.06)}
.side .sb .ann-badge{width:26px;height:26px;margin:0;box-shadow:0 0 0 1.5px var(--c),0 0 8px var(--c-glow)}
.side .sb .ann-badge img{width:13px;height:13px}
.side .sb .ann-txt{position:static;display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;pointer-events:auto}
.side .sb .ann .nm{justify-content:space-between;gap:6px;font:600 12.5px/1.2 var(--font-ui);letter-spacing:.1px;text-transform:none;color:var(--hi)}
.side .sb .ann .nm .t{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.side .sb .ann .led{position:static;width:6px;height:6px;border:0}
.side .sb .ann .st{position:static;width:auto;height:auto;clip:auto;display:block;padding:0;background:none;box-shadow:none;text-shadow:none;
  font:500 11px/1.2 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the account and the switch */
.side .sb-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px 14px;border-top:1px solid rgba(255,255,255,.06)}
.side .sb .dk-menu{top:auto;bottom:calc(100% + 10px);left:0;right:auto}
/* the full status, opened from the publisher line: the console beside the menu */
.side .sb-pop{position:fixed;z-index:70;top:auto;left:calc(var(--sb-w) + 12px);bottom:14px;width:320px;max-height:calc(100vh - 28px);overflow-y:auto;
  padding:8px;border-radius:18px;background:#08090B;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -20px rgba(0,0,0,.85)}
.side .sb-pop .console{display:flex;flex-direction:column;gap:10px;margin:0}
.side .sb-pop .c-tile.partner .t-act{width:100%}
/* the phone bar and the veil, for a narrow screen only */
.sb-top,.sb-veil{display:none}
/* folded to icons */
.side.sb-mini .sb .dk-ea span,.side.sb-mini .sb .dk-el,.side.sb-mini .sb-env,.side.sb-mini .sb .dk-key .lb,.side.sb-mini .sb-sec,
.side.sb-mini .sb .ann-txt,.side.sb-mini .sb-pub span{display:none}
.side.sb-mini .sb-head{flex-direction:column;align-items:center;padding:16px 0 8px;gap:12px}
.side.sb-mini .sb-collapse{transform:rotate(180deg)}
.side.sb-mini .sb-nav{padding:6px 10px}
.side.sb-mini .sb-nav .sb-sec+.dk-key{margin-top:0}
.side.sb-mini .sb .dk-key{justify-content:center;padding:0;position:relative}
.side.sb-mini .sb .dk-key .cnt{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;font-size:10px;line-height:16px}
.side.sb-mini .sb-nav .sb-sec{display:block;height:1px;margin:10px 8px;overflow:hidden;color:transparent;background:rgba(255,255,255,.07)}
.side.sb-mini .sb-nav .sb-sec:first-child{display:none}
.side.sb-mini .sb-status .sb-sec{display:none}
.side.sb-mini .sb .ann,.side.sb-mini .sb-pub{justify-content:center;padding:8px 0}
.side.sb-mini .sb-lamp{margin:0}
.side.sb-mini .sb-foot{flex-direction:column;gap:12px;padding:12px 0 14px}
.side.sb-mini .sb-pop{left:calc(var(--sb-w) + 10px)}
/* beside the menu the page is narrower: the email and PDF composers stack sooner */
@container page (max-width:1120px){.shell2 .of-layout{grid-template-columns:minmax(0,1fr)}.shell2 .of-preview{position:static}.shell2 .of-frame{height:720px}}
/* a phone or a narrow window: the menu slides in from the left over the page */
@media (max-width:900px){
  body.side,body.side.sb-mini{--sb-w:0px}
  .side .sb{width:264px;transform:translateX(-100%);transition:transform .22s var(--ease);box-shadow:20px 0 50px -20px rgba(0,0,0,.8)}
  .side.sb-open .sb{transform:none}
  .side .sb-collapse{display:none}
  .side .sb-top{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;background:#0A0B0D;border-bottom:1px solid rgba(255,255,255,.06)}
  .sb-burger{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:none;color:#E4E5E8;cursor:pointer}
  .sb-top-brand{display:flex;align-items:center;gap:8px;color:#fff;font:400 19px/1 var(--font-brand);text-decoration:none}
  .sb-top-brand img{width:20px;height:20px}
  .side .sb-veil{display:block;position:fixed;inset:0;z-index:58;background:rgba(0,0,0,.5)}
  .side .sb-veil[hidden]{display:none}
  .side .sb-pop{left:12px;right:12px;width:auto}
  /* unfolded on a phone whatever the laptop remembers */
  .side.sb-mini .sb .dk-ea span,.side.sb-mini .sb .dk-el,.side.sb-mini .sb .dk-key .lb,.side.sb-mini .sb .ann-txt,.side.sb-mini .sb-pub span{display:flex}
  .side.sb-mini .sb-env{display:flex}.side.sb-mini .sb-sec{display:block;height:auto;color:var(--ink4);background:none;margin:14px 10px 6px}
  .side.sb-mini .sb .dk-key{justify-content:flex-start;padding:0 10px}
  .side.sb-mini .sb-head{flex-direction:row;padding:18px 12px 10px 18px}
  .side.sb-mini .sb-foot{flex-direction:row;padding:10px 14px 14px}
}
.side .sb .ann{text-align:left}.side .sb .ann-txt{align-items:stretch}
.side .sb .ann .nm .t{display:inline}.side .sb .ann .led{display:block}
@media (max-width:900px){.side.sb-mini .sb .ann-txt{flex-direction:column}}
/* a sync's progress where the console is not on screen (the side menu, the offer composers) */
.sync-toast{position:fixed;z-index:80;left:calc(var(--sb-w,0px) + 16px);bottom:16px;max-width:420px;padding:11px 16px;border-radius:12px;
  background:#101114;color:#E4E5E8;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -16px rgba(0,0,0,.8);font:500 13px/1.45 var(--font-ui)}
.sync-toast.ok{border-color:rgba(60,201,138,.5)}.sync-toast.bad{border-color:rgba(242,102,94,.6);color:#FFD2CE}.sync-toast.wait{border-color:rgba(242,184,75,.45)}
.sync-toast[hidden]{display:none}
/* ending a region's price is a tick of its own, never an emptied box */
.rg-end{display:flex;align-items:center;gap:8px;margin:-2px 0 8px;font:500 12.5px var(--font-ui);color:var(--ink3);cursor:pointer}
.rg-end input{margin:0}.rg-end small{color:var(--ink4)}

/* ---------------------------------------------------------------- preview "instant_actions" */
.fx-instant .lrow{transition:opacity .25s,transform .25s}
.fx-instant form.leg.busy .leg-actions{pointer-events:none}
.fx-instant form.leg.busy .leg-actions button:not(.pressing){opacity:.55}
.fx-instant .leaving{opacity:0;transform:translateX(12px);transition:opacity .3s,transform .3s}
.fx-instant .just-saved{animation:fx-saved .9s var(--ease)}
@keyframes fx-saved{0%{box-shadow:0 0 0 0 rgba(60,201,138,.0)}25%{box-shadow:0 0 0 3px rgba(60,201,138,.35)}100%{box-shadow:0 0 0 0 rgba(60,201,138,0)}}
.fx-instant .pressing{position:relative;transform:translateY(1px)}
.fx-instant .pressing::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-7px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;opacity:.85}
.fx-instant .sw.pressing::after{right:6px}
.act-toasts{position:fixed;z-index:90;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;max-width:min(460px,calc(100vw - 36px))}
.act-toast{padding:11px 16px;border-radius:12px;background:#101114;color:#E8EAEE;border:1px solid rgba(255,255,255,.12);border-left:3px solid #3CC98A;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8);font:500 13px/1.45 var(--font-ui);animation:fx-in .22s var(--ease);transition:opacity .35s,transform .35s}
.act-toast.bad{border-left-color:#F2665E;color:#FFD9D5}
.act-toast.out{opacity:0;transform:translateY(6px)}
@keyframes fx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fx-instant .lrow,.act-toast{transition:none;animation:none}.fx-instant .pressing::after{animation:none}}
/* the list keeps its place while a card is redrawn: the script holds the flight where it was */
.fx-instant .ltable{overflow-anchor:none}

/* ================================================================ preview "calm_ui": the calmer interface
   Sentence-case headings instead of small spaced capitals, numbers in the normal typeface (order
   numbers stay monospaced), fewer explanations, the Lufthansa status once, grey aircraft type
   tags and one typeface for titles. body.calm is set only for whoever sees the preview. */
.calm{--mono:var(--font-ui);--font-brand:var(--font-ui)}
.calm :not(.pill, .env, .sf, .sf *){text-transform:none !important;letter-spacing:normal !important}
.calm .env{text-transform:capitalize !important;letter-spacing:normal !important}
.calm .mono,.calm time,.calm .dk-clock b,.calm .lr-dep b,.calm .pv,.calm .dk-sum b{font-variant-numeric:tabular-nums}
/* order numbers keep their own face: they are copied and compared character by character */
.calm .fb-order,.calm .leg-detail .mono.dim,.calm dd.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace !important}
/* the logo is the one serif left */
.calm .dk-ea,.calm .sb-top-brand,.calm .logo{font-family:'Marcellus',Georgia,serif}
.calm h1{font-weight:600;font-size:24px;letter-spacing:-.01em !important}
.calm .welcome-title,.calm .manual-body h2{font-weight:600}
/* small labels that were spaced capitals: quieter, normal case */
.calm h2{font-size:13.5px;font-weight:600;color:var(--ink2)}
/* fewer explanations */
.calm .lede,.calm .pr-formula,.calm .bd-group header span,.calm .bd-totals .tot small{display:none}
/* the Updates page: the last update, not a dashboard of empty measures */
.calm .tiles{grid-template-columns:minmax(0,360px)}
.calm .tiles .tile-s:not(:first-child){display:none}
/* the Lufthansa status once: in the menu; the 48-hour strip shows the flights alone */
.calm .dk-sum{display:none}
/* aircraft types in one quiet grey; the three states keep their colours */
.calm [class*="t-cj"],.calm .t-unknown{--type:var(--ink3)}
.calm .tpill,.calm .cchip.type,.calm .fb-chip.type{color:var(--ink2) !important;background:rgba(var(--fg),.06) !important;border-color:rgba(var(--fg),.14) !important}
/* the Activity log as sentences */
.calm .ev-sentence{display:block;margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.calm .ev-sentence > *{display:inline;margin:0;padding:0}
.calm .ev-sentence b{color:var(--hi);font-weight:600}
.calm .ev-sentence .ent{color:var(--accent-2)}
.calm .auto-toggle{margin-left:12px;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.calm .auto-toggle:hover{color:var(--hi)}
footer .build:only-child{margin:0}
.dirty-note .discard{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:2px;font:inherit;color:inherit}
.dirty-note .discard:hover{opacity:.8}
/* Remove price on a region: a quiet text button; once pressed, the row says what it means */
.rg-remove{margin:-2px 0 8px 2px}
.rg-remove-go,.rg-undo{all:unset;cursor:pointer;font:500 12.5px var(--font-ui);color:var(--ink3);text-decoration:underline;text-underline-offset:3px}
.rg-remove-go:hover,.rg-undo:hover{color:var(--hi)}
.rg-remove-go:focus-visible,.rg-undo:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.rg-removed{margin:0;font-size:12.5px;color:var(--soon)}
.rg-removed .rg-undo{color:var(--hi);margin-left:4px}
.rg-row.removed{opacity:.6}

/* copyright line and the legal notice */
.imprint a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:2px}
.imprint a:hover{color:var(--ink2)}
.legal{max-width:720px;margin:0 auto;padding:28px 32px}
.legal h1{margin:0 0 6px}
.legal h2{font-size:15px;margin:22px 0 6px}
.legal p{margin:0 0 8px;line-height:1.55;color:var(--ink2)}
@media (max-width:600px){.legal{padding:20px 16px}}

/* common passenger taxes, ready to add */
.txp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--fg),.02)}
.txp-main{display:grid;gap:3px;min-width:0}
.txp-main b{font-weight:600;color:var(--hi)}
.txp-main>span{font-size:13px;line-height:1.45;color:var(--ink2)}
.txp-main small{font-size:12px;color:var(--ink4)}
.txp-main small a{color:var(--ink3)}
.txp form{margin:0}
.txp-state{font-size:12.5px;color:var(--ink4)}
.txp.done{background:none;border-style:dashed}
@media (max-width:600px){.txp{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- route details on the map (preview route_on_map)
   On wider screens the DEP and ARR boards carry the airport's name, ICAO code and times, a line over
   the map the day, block time and distance, and the price runs in a slim row under the band. The
   route block stays in the page for screen readers, and shows again if the map cannot load. */
.rm-tag .rmi,.rm-trip{display:none}
@media (min-width:761px){
  .mapmerge .rm-tag.rich{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:3px;padding:4px}
  .mapmerge .rm-tag.rich.side{grid-template-columns:auto auto}
  .mapmerge .rm-tag.rich i{align-self:stretch}
  .mapmerge .rm-tag .rmi{display:grid;gap:3px;padding:3px 8px 3px 9px;margin-left:3px;border-left:1px solid rgba(255,255,255,.1);font-family:var(--font-ui)}
  .mapmerge .rm-tag.side .rmi{grid-column:1 / -1;margin:3px 0 0;padding:6px 6px 2px;border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .mapmerge .rmi-n{display:flex;align-items:center;gap:6px;max-width:200px}
  .mapmerge .rmi-n .flag{width:17px;height:12.75px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.18);flex:none}
  .mapmerge .rmi-n b{font:600 12.5px/1.2 var(--font-ui);color:#F2F4FA;overflow:hidden;text-overflow:ellipsis}
  .mapmerge .rmi-n small{font:500 10.5px var(--mono);color:rgba(242,244,250,.55);flex:none}
  .mapmerge .rmi-t{display:flex;align-items:baseline;gap:8px}
  .mapmerge .rmi-t u{text-decoration:none;font:700 15px/1 var(--font-ui);color:#FFFFFF;font-variant-numeric:tabular-nums}
  .mapmerge .rmi-t span{font:400 11.5px/1 var(--mono);color:rgba(242,244,250,.6);white-space:nowrap}
  .mapmerge .fb-band.with-map{height:290px}
  .mapmerge .rm-trip{position:absolute;left:32px;bottom:18px;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:9px;
    background:color-mix(in srgb,var(--map-sea) 78%,transparent);border:1px solid rgba(var(--fg),.12);backdrop-filter:blur(6px);
    font:600 12.5px var(--font-ui);color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
  .mapmerge .rm-trip svg{width:14px;height:14px;color:var(--ink4)}
  .mapmerge .rm-trip b{color:var(--hi);font-weight:700}
  .mapmerge .rm-trip .mono{font:400 11.5px var(--mono);color:var(--ink3)}
  .mapmerge .rm-trip i{font-style:normal;color:var(--ink4)}
  /* the map failed: no line over it, the route block as before */
  .mapmerge .fb-band:has(.rmap[data-failed]) .rm-trip{display:none}

  /* under a map that loaded (or is loading), the route block is for screen readers only */
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:12px 32px}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-route:not(:has(.reason)),
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-route > :is(.day,.route){
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-route{flex:1 1 100%;order:2}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-price{flex:1 1 auto;flex-direction:row;align-items:center;justify-content:flex-start;
    gap:6px 14px;flex-wrap:wrap;text-align:left;padding:0;border:0;align-self:auto}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-price .lbl{order:0}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-price .amount{order:1;padding:0}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-price .amount .pv-n{font-size:28px}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-price .amount .pv-c{font-size:15px}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-price .calc{order:2}
  .mapmerge .fb-band.with-map:not(:has(.rmap[data-failed])) + .fb-route .leg-price .broker-line{order:3;margin:0 0 0 auto}
}

/* the price tiles: the offer column is wide enough for two side by side, and when it is not (a narrow
   window, a zoomed page) they stack instead of cutting their words; "set by hand" sits in the line
   under the amount, not beside the name */
.field.prices{container-type:inline-size;min-width:0}
.ptile small{display:flex;align-items:center;gap:6px}
.ptile small .pt-set{padding:2px 6px}
@container (max-width:390px){.ptiles{grid-template-columns:1fr}}
@media (max-width:1180px){.fb-main.has-cabin .fields .field.prices{grid-column:1 / -1}}   /* the two boxes side by side, the remark and reason below */

/* ---------------------------------------------------------------- preview "clean_rows": the flight list
   One surface with hairline rows under a quiet header; plain type instead of plates and pills; the
   status a dot and a word. The columns follow the width of the list itself (container "flights"). */
body.rows2 .ltable{container:flights / inline-size;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
body.rows2 .lhead,body.rows2 .lr{grid-template-columns:130px minmax(170px,1.4fr) 150px 92px 76px 92px 130px minmax(120px,1fr) 14px;grid-template-areas:none;gap:16px;row-gap:0}
body.rows2 .lhead{display:grid;align-items:center;padding:9px 18px 8px;border-bottom:1px solid var(--line);background:rgba(var(--fg),.02);
  font:500 11.5px var(--font-ui);letter-spacing:.02em;color:var(--ink4);white-space:nowrap}
body.rows2 .lhead .lh-price{text-align:right}
body.rows2 .lrow{border:0;border-radius:0;box-shadow:none;background:none;border-bottom:1px solid var(--line-soft)}
body.rows2 .lrow:last-child,body.rows2 .lrow.open{border-bottom-color:transparent}
body.rows2 .lrow::before{display:none}
body.rows2 .lrow:hover{background:rgba(var(--fg),.025)}
body.rows2 .lrow.open{background:rgba(110,147,255,.07)}
body.rows2 .lrow.dirty{box-shadow:inset 3px 0 0 var(--soon)}
body.rows2 .lr{padding:11px 18px;min-height:58px}
/* every column present unless the list is too narrow for it, whatever the older screen-width rules say */
body.rows2 .lr-block,body.rows2 .lr-seats,body.rows2 .lr-flags,body.rows2 .lr-flags:empty{display:flex}body.rows2 .lr-chev{display:block}
body.rows2 .lr:focus-visible{border-radius:0}
/* aircraft: the registration in plain type, the type under it */
body.rows2 .lr-tail{flex-direction:column;align-items:flex-start;gap:2px}
body.rows2 .lr-tail > .plate{padding:0;border:0;background:none;font:600 14.5px/1.2 var(--font-ui);letter-spacing:.02em}
body.rows2 .lr-tail > .plate i{color:var(--ink3)}
body.rows2 .lr-tail .tpill{display:block;align-self:flex-start;min-width:0;height:auto;text-align:left;padding:0;border:0;background:none;box-shadow:none;font:500 12px/1.2 var(--font-ui);letter-spacing:.02em;color:var(--ink3)}
/* route */
body.rows2 .lr-route{gap:3px}
body.rows2 .lr-codes{gap:6px}
body.rows2 .lr-route b{font:600 15px/1.2 var(--font-ui);letter-spacing:.03em}
body.rows2 .lr-route .flag{width:16px;height:12px;border-radius:2px}
body.rows2 .lr-route .arw{width:14px;height:1px;margin:0 2px;background:var(--ink4)}
body.rows2 .lr-route .arw::after{top:-2.5px;width:5px;height:5px;border-width:1.5px;border-color:var(--ink4)}
body.rows2 .lr-names{font:400 12px/1.25 var(--font-ui);color:var(--ink3)}
body.rows2 .lr-names i{color:var(--ink4)}
/* departure, countdown, block */
body.rows2 .lr-dep{gap:3px}
body.rows2 .lr-dep b{font:600 15px/1.2 var(--font-ui)}
body.rows2 .lr-dep small{font-size:12px;color:var(--ink3)}
body.rows2 .lr-count{padding:0;background:none;border:0;font:500 12.5px var(--font-ui);color:var(--ink3);display:inline-flex;align-items:center;gap:6px}
body.rows2 .lr-count.u-near{color:var(--bad-ink)}
body.rows2 .lr-count.u-day{color:var(--soon)}
body.rows2 .lr-count.u-near::before,body.rows2 .lr-count.u-day::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
body.rows2 .lr-count.u-gone{color:var(--ink4)}
body.rows2 .lr-block,body.rows2 .lr-seats{gap:3px;font:500 14px/1.2 var(--font-ui)}
body.rows2 .lr-block small{font-size:12px;color:var(--ink3)}
/* seats: the count, and under it a thin bar in segments */
body.rows2 .lr-seats{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:5px}
body.rows2 .lr-seats b{font:500 14px/1.2 var(--font-ui)}
body.rows2 .lr-seats .sdots{display:flex;gap:2px;width:64px}
body.rows2 .lr-seats .sdots i{flex:1;height:3px;border-radius:2px;background:rgba(var(--fg),.12);box-shadow:none;width:auto;margin:0}
body.rows2 .lr-seats .sdots i.on{background:var(--accent-2)}
/* price */
body.rows2 .lr-price{gap:3px}
body.rows2 .lr-price .pv-n{font-size:15.5px}
body.rows2 .lr-price .pv b{font-weight:600}
body.rows2 .lr-price .pv-c{font-size:15.5px;font-weight:500}
body.rows2 .lr-price .pv-cur{font-size:9.5px}
body.rows2 .lr-price .pv-note{font:400 11.5px var(--font-ui);color:var(--ink3)}
/* status: a dot and a word */
body.rows2 .lr-flags{justify-content:flex-start;gap:4px 12px}
body.rows2 .lr-flags .lflag{gap:7px;padding:0;border-radius:0;background:none;font:500 12.5px/1.3 var(--font-ui);color:var(--ink2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
body.rows2 .lr-flags .lflag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink4)}
body.rows2 .lr-flags .lflag svg{display:none}
body.rows2 .lr-flags .lflag.checked::before{background:var(--good)}
body.rows2 .lr-flags .lflag.check::before,body.rows2 .lr-flags .lflag.hold::before{background:var(--soon)}
body.rows2 .lr-flags .lflag.blocked{color:var(--bad-ink);display:block;white-space:nowrap}
body.rows2 .lr-flags .lflag.blocked::before{display:inline-block;margin-right:7px;background:var(--bad);vertical-align:1px}
body.rows2 .lr-flags .lflag.new::before{background:var(--accent-2)}
body.rows2 .lr-flags .lflag.dirty{color:var(--soon)}
body.rows2 .lr-flags .lflag.dirty::before{background:var(--soon)}
body.rows2 .lr-chev{width:7px;height:7px;border-width:0 1.5px 1.5px 0;border-color:var(--ink4)}
/* the open card joins the list */
body.rows2 .ltable form.leg{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line);box-shadow:none}
body.rows2 .ltable form.leg:last-child{border-bottom:0}

/* the older list names each cell's place below 1100px (tail, route, ...); this table has no such
   names, and a cell with a name the grid lacks is put past the right edge: on an iPad the row
   showed only the block time and the channels (4 Nov 2026) */
body.rows2 .lr>*{grid-area:auto}           /* the phone layout below names them again, and comes later */
@container flights (max-width:1080px){
  body.rows2 .lhead,body.rows2 .lr{grid-template-columns:120px minmax(160px,1.4fr) 140px 88px 72px 120px minmax(110px,1fr) 14px}
  body.rows2 .lr-seats,body.rows2 .lhead .lh-seats{display:none}
  body.rows2 .lr-block{display:flex}
}
@container flights (max-width:880px){
  body.rows2 .lhead,body.rows2 .lr{grid-template-columns:110px minmax(140px,1fr) 130px 84px 110px minmax(90px,.8fr) 14px}
  body.rows2 .lr-block,body.rows2 .lhead .lh-block{display:none}
}
@container flights (max-width:660px){
  body.rows2 .lhead{display:none}
  body.rows2 .lr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tail price" "route route" "dep count" "flags flags";gap:8px 12px}
  body.rows2 .lr-tail{grid-area:tail;flex-direction:row;align-items:baseline;gap:8px}
  body.rows2 .lr-route{grid-area:route}body.rows2 .lr-dep{grid-area:dep}body.rows2 .lr-count{grid-area:count;justify-self:end}
  body.rows2 .lr-price{grid-area:price}body.rows2 .lr-flags{grid-area:flags}body.rows2 .lr-flags:empty{display:none}
  body.rows2 .lr-chev{display:none}
}

/* the published price is a figure to read, not a field: no box, so it cannot be taken for the
   editable price boxes in the offer column */
.leg-price .amount{padding:0;border:0;border-radius:0;background:none}
.pr-ended{margin:2px 4px 0;font-size:12.5px;color:var(--ink4)}
.pr-ended a{color:var(--ink3)}
.nextfile[hidden]{display:none}
/* the PDF builder: Download PDF at the top of the preview, beside the PDF it downloads */
.of-preview header{align-items:center}
.of-preview header .of-pdf-top{display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:8px 14px;font-size:13.5px;white-space:nowrap}
.of-preview header .of-pdf-top svg{width:16px;height:16px}
.of-preview header .of-pdf-state:empty{margin-left:auto}
button.of-pdf:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------------------------------------------------------------- the offer flight picker, as a list (preview "offer_design")
   One surface with hairline rows, like the flight list: the time, the route with the aircraft in plain
   words under it, notes as a dot and a word, and the price field at the right. The columns follow the
   list's own width (container "picker"). */
.of-legs.fx{container:picker / inline-size;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.of-legs.fx .of-leg{display:flex;align-items:center;gap:14px;padding:11px 14px 11px 12px;border:0;border-radius:0;background:none;box-shadow:none;
  border-bottom:1px solid var(--line-soft)}
.of-legs.fx .of-leg:last-child{border-bottom:0}
.of-legs.fx .of-leg:hover{background:rgba(var(--fg),.025);border-color:var(--line-soft)}
.of-legs.fx .of-leg.on{background:rgba(110,147,255,.07);box-shadow:inset 2px 0 0 var(--accent);border-color:var(--line-soft)}
.of-legs.fx .of-pick{flex:1;min-width:0;display:grid !important;grid-template-columns:20px 104px minmax(0,1fr);align-items:center;gap:0 14px;cursor:pointer}
.of-legs.fx .of-pick input[type=checkbox]{width:18px;height:18px;border-radius:5px;background-size:12px}
.of-legs.fx .of-pick input[type=checkbox]:checked{box-shadow:none}
.of-legs.fx .fx-when{width:auto;gap:3px}
.of-legs.fx .fx-when b{font:600 15px/1.2 var(--font-ui);letter-spacing:0;font-variant-numeric:tabular-nums}
.of-legs.fx .fx-when b em{font:500 11px var(--font-ui);margin-left:1px}
.of-legs.fx .fx-when small{font-size:12px;color:var(--ink3)}
.of-legs.fx .of-leg-route{gap:3px}
.of-legs.fx .of-leg-route b{font:600 15px/1.2 var(--font-ui);letter-spacing:.03em;white-space:nowrap}
.of-legs.fx .of-leg-route b i{color:var(--ink4);margin:0 2px}
.of-legs.fx .of-leg-route small{gap:0;font:400 12px/1.3 var(--font-ui);color:var(--ink3);flex-wrap:wrap}
.of-legs.fx .of-leg-route small .cchip{padding:0;border:0;background:none;box-shadow:none;font:600 12px/1.3 var(--font-ui);letter-spacing:.02em;color:var(--ink2);margin-right:6px}
/* notes: a dot and a word */
.of-legs.fx .of-flag{display:block;margin-top:1px;font-size:12px;color:var(--ink3)}
.of-legs.fx .of-flag .pill{display:inline-flex;align-items:center;gap:6px;padding:0;margin-right:3px;border:0;border-radius:0;background:none;box-shadow:none;
  font:600 12px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--ink2)}
.of-legs.fx .of-flag .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink4)}
.of-legs.fx .of-flag .pill.s-published::before{background:var(--accent-2)}
.of-legs.fx .of-flag .pill.s-hold::before{background:var(--soon)}
.of-legs.fx .of-flag .pill.s-blocked{color:var(--bad-ink)}.of-legs.fx .of-flag .pill.s-blocked::before{background:var(--bad)}
/* the price */
.of-legs.fx .of-price{width:118px;height:36px;padding:0 10px;border-radius:8px;gap:5px}
.of-legs.fx .of-price span{font-size:13px}
.of-legs.fx .of-price input{font:600 14.5px var(--font-ui);font-variant-numeric:tabular-nums}
.of-legs.fx .of-leg:not(.on) .of-price{opacity:.55}
/* a narrow list: the time over the route */
@container picker (max-width:430px){
  .of-legs.fx .of-pick{grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px}
  .of-legs.fx .of-pick input[type=checkbox]{grid-row:1 / span 2;align-self:start;margin-top:1px}
  /* the route, then the time, then the aircraft and any note: the route's lines join the row's grid */
  .of-legs.fx .of-leg-route{display:contents}
  .of-legs.fx .of-leg-route > *{grid-column:2}
  .of-legs.fx .of-leg-route > b{grid-row:1}
  .of-legs.fx .fx-when{grid-column:2;grid-row:2;flex-direction:row;align-items:baseline;gap:8px}
  .of-legs.fx .of-pick{grid-template-rows:none;grid-auto-flow:row}
  .of-legs.fx .of-price{width:104px}
}
/* seconds on the clock (preview "clock_seconds"): smaller and dimmer beside the hours and minutes */
.secs .dk-clock{width:136px}
.dk-clock #tape-sec{display:none}
.secs .dk-clock b{display:inline}
.secs .dk-clock #tape-sec{display:inline;margin-left:1px;font:500 15px/1 var(--mono);font-style:normal;color:var(--tp-dim);font-variant-numeric:tabular-nums}
.secs .dk-clock{display:grid;grid-template-columns:auto 1fr;align-content:center;align-items:baseline;row-gap:6px;column-gap:0}
.secs .dk-clock span,.secs .dk-clock em{grid-column:1 / -1}
.secs .dk-clock span{grid-row:1}.secs .dk-clock em{grid-row:3}
.secs .dk-clock b{grid-row:2;grid-column:1}.secs .dk-clock #tape-sec{grid-row:2;grid-column:2}
@media (max-width:760px){.secs .dk-clock{width:96px}.secs .dk-clock #tape-sec{font-size:12px}}
.dk-leg.lab-short .dk-lab em{display:none}

/* a flight kept off myIDTravel by the publishing rules: marked, not red; nothing to fix */
.lflag.blocked.policy{background:rgba(var(--fg),.07);color:var(--ink2)}
.leg-route .reason.policy{color:var(--ink2);background:rgba(var(--fg),.04);border-color:var(--line-strong)}
body.rows2 .lr-flags .lflag.blocked.policy{color:var(--ink2)}
body.rows2 .lr-flags .lflag.blocked.policy::before{background:var(--ink4)}
/* Settings, Aircraft: Leon's seat count beside the app's */
.tc-leon{display:block;margin-top:4px;font-size:12px;color:var(--soon)}
.tc-leon.dim{color:var(--ink4)}
.linkish{all:unset;cursor:pointer;margin-left:6px;font-weight:600;color:var(--hi);text-decoration:underline;text-underline-offset:2px}
.linkish:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.state-tag .pill.policy{background:rgba(var(--fg),.08);color:var(--ink2)}

/* a hot empty: a ferry still on option in Leon, read for brokers only */
.lflag.blocked.option{background:rgba(232,163,60,.16);color:var(--soon)}
body.rows2 .lr-flags .lflag.blocked.option{color:var(--soon)}
body.rows2 .lr-flags .lflag.blocked.option::before{background:var(--soon)}

/* an option (hot empty) is drawn faded on a striped ground, as Leon draws options */
:root{--stripes:repeating-linear-gradient(135deg,rgba(110,147,255,.085) 0 7px,transparent 7px 17px)}
html[data-theme=light]{--stripes:repeating-linear-gradient(135deg,rgba(47,79,216,.075) 0 7px,transparent 7px 17px)}
.lrow.is-option{background-image:var(--stripes) !important}            /* the row only; the open card is as any other */
.lrow.is-option .lr > :not(.lr-flags){opacity:.8}
.lrow.is-option:hover .lr > *,.lrow.is-option.open .lr > *{opacity:1}

/* a board that had to drop the route's details: the code alone, as the plain board */
.mapmerge .rm-tag.rich.plain{display:inline-flex}
.mapmerge .rm-tag.rich.plain .rmi{display:none}

/* ---------------------------------------------------------------- preview "channels": where each flight is out
   Three small marks before the status in the cleaner list: myIDTravel (the crane), offers to brokers
   (an envelope) and the broker feed to come (a socket). Lit when the flight is out that way. */
.lr-ch{display:none}
body.rows2.chn .lr-ch{display:flex;align-items:center;gap:6px}
.lr-ch .ch{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;opacity:.28;position:relative;font-style:normal}
.lr-ch .ch.on{opacity:1;background:rgba(var(--fg),.06)}
.lr-ch .ch.next{opacity:.8}
.lr-ch .ch.next::after{content:"";position:absolute;right:-2px;top:-2px;width:7px;height:7px;border-radius:50%;background:var(--soon);box-shadow:0 0 0 2px var(--surface)}
.lr-ch .ch img{width:15px;height:15px;display:block}
.lr-ch .ch svg{width:15px;height:15px;color:var(--ink2)}
.lr-ch .ch.on svg{color:var(--accent-2)}
/* each width band's columns, gaps included, add up to no more than the narrowest table it is
   used for, so Status never runs past the right edge: 1080 above 1080, 860 above 880, 660 above 660 */
body.rows2.chn .lhead,body.rows2.chn .lr{grid-template-columns:110px minmax(150px,1.4fr) 128px 84px 70px 80px 112px 76px minmax(130px,1fr) 14px;gap:14px}
@container flights (max-width:1080px){
  body.rows2.chn .lhead,body.rows2.chn .lr{grid-template-columns:96px minmax(140px,1.2fr) 112px 70px 60px 96px 72px minmax(104px,1fr) 14px;gap:12px}
}
@container flights (max-width:880px){
  body.rows2.chn .lhead,body.rows2.chn .lr{grid-template-columns:84px minmax(136px,1fr) 108px 92px 68px minmax(98px,1fr) 14px;gap:10px}
  body.rows2.chn .lr-count,body.rows2.chn .lhead>span:nth-child(4){display:none}
}
@container flights (max-width:660px){
  body.rows2.chn .lr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tail price" "route route" "dep count" "flags ch"}
  body.rows2.chn .lr-ch{grid-area:ch;justify-self:end}
}

/* ---- events (preview "events"): the list of occasions and the offer composer ---- */
.ev-editor h2{margin:0 0 14px;font:600 16px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.ed-grid.events{grid-template-columns:minmax(0,2fr) 160px 160px minmax(0,1fr) 110px 170px}
.ed-grid.events .field.wide{grid-column:1 / -1}
.ev-rows{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.ev-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 20px;margin:0}
.ev-row.on{border-color:rgba(60,201,138,.45)}
.ev-date{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0;border-radius:12px;background:rgba(var(--fg),.05);border:1px solid var(--line)}
.ev-date b{font:800 26px/1 var(--font-ui);color:var(--hi)}.ev-date small{font-size:12px;color:var(--ink3);margin-top:3px;white-space:nowrap}
.ev-date em{font-style:normal;font-size:12px;font-weight:700;color:var(--accent-2);margin-top:6px;white-space:nowrap}.ev-row.on .ev-date em{color:var(--good)}
.ev-what{min-width:0}.ev-what h2{margin:0 0 4px;font:600 18px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.ev-sub{margin:0;font-size:13px;color:var(--ink3)}.ev-note{color:var(--ink4)}
.ev-near{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;font-size:12px;color:var(--ink4)}
.ev-near .cchip b{color:var(--hi);letter-spacing:.04em}.ev-near .cchip small{color:var(--ink4)}
.ev-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ev-h{margin:6px 0 10px;font:600 16px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.segs.ev-types{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:12px}
.segs.ev-types b{display:flex;align-items:center;gap:8px}
.ed-grid.ev-route{grid-template-columns:140px 140px;margin-top:4px}
.ed-grid.ev-times{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr) 96px;margin-top:12px}
.ed-grid.ev-times .field input[type=date]{padding-left:10px;font-size:14px}
.ed-grid.ev-times .field input,.ed-grid.ev-acft .field input{padding-right:12px}
.ed-grid.ev-times .field input[name$=_time]{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ed-grid.ev-acft{grid-template-columns:minmax(0,1fr) 140px;margin-top:12px}
.ed-grid.ev-acft select{margin:0;height:46px;border-radius:11px;font:600 15px var(--font-ui)}
.ev-route2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ev-route2>*{min-width:0}
.ev-pick{padding:14px 14px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--fg),.025)}
.ev-pick.to{border-color:rgba(110,147,255,.35);background:rgba(110,147,255,.06)}
.ev-pick-head{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.ev-pick-head b{font:700 12px var(--font-ui);letter-spacing:.8px;text-transform:uppercase;color:var(--hi)}
.ev-pick-head small{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-pick.to .ev-pick-head b{color:var(--accent-2)}
.ev-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.ev-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;overflow:hidden;padding:10px 30px 9px 11px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);text-align:left;cursor:pointer;font-family:var(--font-ui);transition:border-color .15s,background .15s,box-shadow .15s}
.ev-tile:hover{border-color:rgba(110,147,255,.6);background:rgba(110,147,255,.08)}
.ev-tile.on{border-color:var(--accent);background:rgba(110,147,255,.16);box-shadow:0 0 0 3px var(--accent-glow)}
.ev-tile b{font:800 19px/1.1 var(--font-ui);letter-spacing:.06em;color:var(--hi)}
.ev-tile span,.ev-tile small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-tile span{font-size:12px;color:var(--ink2)}
.ev-tile small{font-size:11px;color:var(--ink4)}
.ev-tile.on small{color:var(--accent-2)}
.ev-tile .flag{position:absolute;top:10px;right:10px;width:16px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(var(--fg),.12)}
.ev-search{position:relative;margin:10px 0 0}
.ev-search input{margin:0;width:100%;height:44px;padding:8px 14px;font:600 15px var(--font-ui);border-radius:11px;background:rgba(var(--fg),.04);border:1px solid var(--line-strong)}
.ev-search input:focus{background:rgba(110,147,255,.08);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.ev-search input:not(:placeholder-shown){text-transform:uppercase;letter-spacing:.06em}
.ev-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:6px;list-style:none;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface-hi);box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.ev-sug[hidden]{display:none}
.ev-sug li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink2)}
.ev-sug li:hover,.ev-sug li.sel{background:rgba(110,147,255,.16);color:var(--hi)}
.ev-sug li b{font:800 14px var(--font-ui);letter-spacing:.06em;color:var(--hi);width:44px;flex:none}
.ev-sug li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-sug li small{color:var(--ink4);font-family:var(--mono);font-size:11.5px;flex:none}
.ev-sug li.none{color:var(--ink4);cursor:default}
.ev-pick .hint{margin:8px 0 0}
.ev-pick-head .ev-modes{margin-left:auto;display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--surface);border:1px solid var(--line)}
.ev-modes button{border:0;background:transparent;color:var(--ink3);padding:4px 10px;border-radius:7px;font:600 12px var(--font-ui);cursor:pointer}
.ev-modes button.on{background:var(--surface-hi);color:var(--hi);box-shadow:0 1px 0 rgba(var(--fg),.08)}
.ev-mode[hidden]{display:none}
.ev-regions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.ev-rchip{border:1px solid var(--line);background:var(--surface);color:var(--ink2);padding:6px 11px;border-radius:999px;font:600 12px var(--font-ui);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.ev-rchip:hover{border-color:rgba(110,147,255,.6);color:var(--hi)}
.ev-rchip.on{border-color:var(--accent);background:rgba(110,147,255,.18);color:var(--hi);box-shadow:0 0 0 3px var(--accent-glow)}
.ev-any{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 10px;padding:12px 14px;border-radius:12px;border:1px dashed rgba(110,147,255,.55);background:rgba(110,147,255,.08);color:var(--ink2);text-align:left;cursor:pointer;font-family:var(--font-ui);transition:border-color .15s,background .15s,box-shadow .15s}
.ev-any:hover{border-style:solid;border-color:var(--accent);background:rgba(110,147,255,.14)}
.ev-any.on{border-style:solid;border-color:var(--accent);background:rgba(110,147,255,.2);box-shadow:0 0 0 3px var(--accent-glow)}
.ev-any-ic{flex:none;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);font-size:14px}
.ev-any-t{display:flex;flex-direction:column;gap:2px;min-width:0}.ev-any-t b{font-size:13.5px;color:var(--hi)}.ev-any-t small{font-size:11.5px;color:var(--ink3);line-height:1.4}
.ev-chosen{margin-top:10px;grid-template-columns:minmax(0,260px)}
.ev-chosen .ev-tile.region b{font-size:14px;letter-spacing:.04em}
.ev-chosen[hidden]{display:none}
.ev-chosen .ev-tile{cursor:default}
.ev-chosen .ev-tile i{position:absolute;right:10px;bottom:9px;font-style:normal;font-size:11px;color:var(--accent-2)}
.ev-sug li img.flag{width:16px;height:12px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(var(--fg),.12)}
.ed-grid.ev-times{margin-top:14px}
@media (max-width:1300px){.ev-route2{grid-template-columns:1fr}}
.ev-price-row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ev-money{width:200px}.ev-money .fi .cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:700 15px var(--font-ui);color:var(--accent-2);pointer-events:none}
.ev-money .fi input{padding-left:30px;padding-right:12px;text-align:right;font-variant-numeric:tabular-nums}
.of-mode-request .ev-money{visibility:hidden}
@media (max-width:900px){.ev-row{grid-template-columns:72px minmax(0,1fr)}.ev-actions{grid-column:1 / -1;justify-content:flex-start}
  .ed-grid.events,.ed-grid.ev-times{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ev-leon{margin:-6px 0 14px}
.ev-src{font-size:11px;vertical-align:middle;color:var(--ink3)}
.of-head-actions .inline{display:inline}

.ev-splash{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(7,13,26,.72);backdrop-filter:blur(6px)}
.ev-splash[hidden]{display:none}
.ev-splash-card{width:min(520px,calc(100% - 32px));padding:26px 28px;border-radius:18px;background:var(--card-grad);border:1px solid var(--line-strong);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.ev-splash-card h2{margin:0 0 6px;font:600 18px var(--font-ui);letter-spacing:0;text-transform:none;color:var(--hi)}
.ev-splash-sub{margin:0 0 18px;font-size:13px;color:var(--ink3)}
.ev-splash-line{margin:0;font-size:13px;color:var(--ink2);min-height:18px}
.ev-splash-foot{display:flex;align-items:center;gap:12px;margin:16px 0 0;font-size:12.5px;color:var(--ink4)}

/* myID options (preview "myid_options"): the mark in the list and the switch above it */
/* a badge, not the dot of the other states: every published flight is on myIDTravel; an option is
   there only through the tag, which the badge says */
.lflag.onmyid{gap:4px;background:var(--good-bg);color:var(--good);box-shadow:inset 0 0 0 1px rgba(60,201,138,.45)}
.lflag.onmyid svg{width:12px;height:12px;flex:none}
.lflag.onmyid em{margin-left:3px;padding:0 4px;border-radius:4px;background:var(--good);color:var(--accent-ink);font:800 9.5px/1.5 var(--font-ui);font-style:normal;letter-spacing:.04em}
body.rows2 .lr-flags .lflag.onmyid{gap:4px;padding:2px 7px 2px 6px;border-radius:7px;background:var(--good-bg);color:var(--good);font-weight:700;margin-bottom:3px;overflow:visible}
body.rows2 .lr-flags .lflag.onmyid::before{display:none}
body.rows2 .lr-flags .lflag.onmyid svg{display:block}
.myid-switch{display:inline-flex;align-items:center;gap:9px;padding:0 12px;height:38px;border-radius:10px;border:1px solid var(--line);
  color:var(--ink2);text-decoration:none;font:500 13px var(--font-ui);white-space:nowrap;align-self:center}
.myid-switch:hover{border-color:var(--line-strong);color:var(--hi);text-decoration:none}
.myid-switch i{position:relative;width:28px;height:16px;border-radius:999px;background:rgba(var(--fg),.18);transition:background .15s;flex:none}
.myid-switch i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s}
.myid-switch.on i{background:var(--good)}
.myid-switch.on i::after{transform:translateX(12px)}
.myid-switch b{font-weight:700;color:var(--ink3)}

/* status as a coloured cell (preview "status_cells"): the whole cell says where the flight stands */
body.rows2 .lr-flags.st-cell{align-self:stretch;margin:-11px 0;padding:0 12px 0 13px;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:2px;border-left:3px solid var(--st);background:var(--st-bg);min-width:0}
body.rows2 .st-cell .st-main{display:flex;align-items:center;gap:6px;font:700 13px/1.25 var(--font-ui);color:var(--st);white-space:nowrap}
body.rows2 .st-cell small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1.3 var(--font-ui);color:var(--ink3)}
body.rows2 .st-cell em{padding:0 4px;border-radius:4px;background:var(--st);color:var(--accent-ink);font:800 9.5px/1.5 var(--font-ui);font-style:normal;letter-spacing:.04em}
body.rows2 .st-cell .st-new{padding:0 5px;border-radius:4px;background:rgba(110,147,255,.22);color:var(--accent-2);font:700 10px/1.5 var(--font-ui);font-style:normal}
body.rows2 .st-cell .lflag.dirty{margin-top:2px}
.st-on{--st:var(--good);--st-bg:rgba(60,201,138,.10)}
body.rows2 .st-on.st-unchecked small{color:var(--soon)}
.st-hold{--st:var(--soon);--st-bg:rgba(232,163,60,.10)}
.st-opt{--st:var(--ink2);--st-bg:rgba(var(--fg),.04)}
.st-kept{--st:var(--ink3);--st-bg:rgba(var(--fg),.03)}
.st-bad{--st:var(--bad-ink);--st-bg:var(--bad-bg)}
/* the columns are the channels table's (above); on a phone the cell is a band of its own */
@container flights (max-width:660px){
  body.rows2 .lr-flags.st-cell{margin:0;padding:6px 10px;border-radius:0 8px 8px 0}
}