/* excellentair Per diems: the look of the live Flights app (eca.flights), copied, not shared.
   Sven, 2026-10-31: "MENU BAR NEEDS TO LOOK EXACTLY LIKE ACTUAL INTERFACE ON ECA.-FLIGHTS (LIVE VERSION)".
   The rules under "Flights" are Flights' app.css as it stands, in both themes and with its class
   names: the tokens, the frame (the side menu, and the top menu bar as the alternative), the
   split-flap board, the day and night switch, the account menu, the status lines, cards, tables,
   buttons, pills, forms, flashes and the sign-in page. The live app runs as body.shell2.side.calm
   (its app_shell, side_nav and calm_ui looks), and so does this one. Rules under "per diems" are
   new and use only Flights' tokens. */

/* ---------------------------------------------------------------- typefaces, served by the app (SIL Open Font License, fonts/OFL-*.txt) */
@font-face{font-family:'Albert Sans';src:url(fonts/AlbertSans-Regular.ttf) format('truetype');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Albert Sans';src:url(fonts/AlbertSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Albert Sans';src:url(fonts/AlbertSans-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Albert Sans';src:url(fonts/AlbertSans-Bold.ttf) format('truetype');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-Medium.ttf) format('truetype');font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-Bold.ttf) format('truetype');font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:'Marcellus';src:url(fonts/Marcellus-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ================================================================ Flights: tokens and base
   dark is the default; the menu keeps it in the light theme too (a night frame over paper) */
:root,[data-theme=light] .deck{
  --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}
/* 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)}
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}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------------------------------------------------------------- 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-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-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)}

/* ---------------------------------------------------------------- flashes */
.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)}

/* ---------------------------------------------------------------- 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}
.kv{display:grid;grid-template-columns:190px 1fr;gap:7px 16px;margin:0}.kv dt{color:var(--ink3)}.kv dd{margin:0}
.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%}
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}
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)}
.actions{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.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)}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--ink2)}.btn.ghost:hover{background:rgba(var(--fg),.06)}
.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-ok{background:var(--good-bg);color:var(--good)}.pill.s-hold{background:var(--soon-bg);color:var(--soon)}
.pill.s-blocked{background:var(--bad-bg);color:var(--bad)}
.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}
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)}
.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 hidden attribute always wins over a component's own display rule */
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
}
@keyframes sweep{to{transform:translateX(100%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================================================================ Flights: the deck, the top menu bar's markup
   The header as an instrument panel: push-button keys with a lamp for the page you are on, and the status
   lines as instrument modules. Under the side menu's look (body.shell2) it is the slim top menu bar. */
.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 .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}

/* 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:900px){
  .deck{position:relative;flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:10px}.dk-keys{order:5;flex-basis:100%}}
/* 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}}

/* 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}}

/* ================================================================ Flights: 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; frame.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}
.applogo{display:inline-flex;align-items:center;color:var(--hi);font-size:22px;line-height:1}

/* ================================================================ Flights: the sign-in page
   The company and the app's name on the left, a clean panel with the form on the right. */
.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-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-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-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-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-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-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}}
@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}}

/* ================================================================ Flights: the cleaner frame (its "app_shell" look, body.shell2)
   A slim menu bar (text tabs with small icons, compact status lines, a small day and night switch). */
.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}
.shell2 .main-col{min-width:0}
@media (max-width:1280px){.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}}
/* the page's layouts follow its own width (container queries), beside the side menu too */
.shell2 .main-col{container:page / inline-size}

/* ---------------------------------------------------------------- the frame in neutral black
   The menu bar and the side menu 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}
@media (max-width:1280px){.dk-build:not(.new){display: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}

/* ================================================================ Flights: the side menu (its "side_nav" look, body.side)
   The menu in a column on the left in sections, the environment and build under the name, the
   status 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)}
.sb-me-name{flex:1;min-width:0;font:500 12.5px/1.3 var(--font-ui);color:var(--hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side.sb-mini .sb-me-name,.shell2:not(.side) .sb-me-name{display:none}
.side .sb .dk-menu{top:auto;bottom:calc(100% + 10px);left:0;right:auto}
/* 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}
/* 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}
  /* 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}}

/* ================================================================ Flights: the calmer interface (its "calm_ui" look, body.calm)
   Sentence-case headings instead of small spaced capitals, numbers in the normal typeface, and one
   typeface for titles; the logo keeps its serif. */
.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{font-variant-numeric:tabular-nums}
/* 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}
/* small labels that were spaced capitals: quieter, normal case */
.calm h2{font-size:13.5px;font-weight:600;color:var(--ink2)}

/* 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}}

/* ================================================================ per diems
   What this app adds to Flights' frame, on its tokens. Flights' status lines are buttons that read
   Leon or update Lufthansa; here a line is a link where it leads somewhere and a plain line where it
   does not, and an emblem can be a drawing in the status ring. */
.sb-pub:hover,a.ann:hover{text-decoration:none}
span.ann{cursor:default}
.shell2 .dk-anns span.ann:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.side .sb span.ann:hover{background:none}
.ann-badge svg{width:17px;height:17px;display:block;fill:none;stroke:#E6ECFA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shell2 .ann-badge svg,.side .sb .ann-badge svg{width:13px;height:13px}

/* ---------------------------------------------------------------- the month: the days and, beside them, a column that stays in view (deck mockup)
   The grid is named for the view (view-table, view-calendar, view-journey; each view's own sheet lays it
   out further). A view that places the figures and the map itself has no side column (no-side): the
   days take the width, and the day panel opens beside them. */
.pd-month{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,34%,440px);gap:16px;align-items:start}
.pd-month.no-side:not(.pn-open){grid-template-columns:minmax(0,1fr)}
.pd-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;min-width:0;
  max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding-bottom:2px}
/* the column stays in view; on a short screen it scrolls on its own. Beside the side menu nothing is pinned above it, under the top menu bar 58px */
.side .pd-side{top:18px;max-height:calc(100vh - 36px)}
.shell2:not(.side) .pd-side{top:76px;max-height:calc(100vh - 92px)}
@media (max-width:1100px){.pd-month{grid-template-columns:minmax(0,1fr) 300px;gap:14px}}

/* ---------------------------------------------------------------- plain tables in a card, and the form for one day on its own
   page, which the day panel (S4) does without script */
.card > table{width:100%;border-collapse:collapse;font-size:13px}
.card > table th{text-align:left;font-size:12px;font-weight:600;color:var(--ink3);padding:8px 10px;border-bottom:1px solid var(--line-strong)}
.card > table td{padding:10px;border-bottom:1px solid var(--line-soft)}
.num,.card > table th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
fieldset{border:1px solid var(--line);border-radius:12px;margin:14px 0;padding:6px 14px}
legend{font-size:12px;font-weight:600;color:var(--ink2);padding:0 6px}
label.tick{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;font-weight:500;margin:10px 0}
label.tick small{flex-basis:100%;margin-left:0;padding-left:24px}
.btn.danger{color:var(--bad-ink)}.btn.danger:hover{background:var(--bad-bg);border-color:rgba(242,102,94,.4)}
/* submitting (S8): one line and the button, or the submitted state with the PDF to download */
.pd-submit p{margin:0 0 12px;font-size:13.5px;color:var(--ink2)}.pd-submit p:last-child{margin-bottom:0}
.pd-submit form,.pd-submit .actions{margin:0}
.pd-submit .actions{flex-wrap:wrap;gap:8px 14px}
.pd-earlier{font-size:12.5px;color:var(--ink3)}

/* ================================================================ Flights: the page head, segments, the flight list, prices, the
   48-hour strip and the route map's colours
   Flights' app.css as it stands, with its class names, so the month reads like Flights' Flights page:
   the title over a segmented switch, the list as one surface with hairline rows under a quiet header
   (its "clean_rows" look, body.rows2), and the strip across the top of the page. */
.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}
.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)}
.segments a{white-space:nowrap}
.pagehead{flex-wrap:wrap;gap:10px 18px}
.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)}
.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:hover{border-color:var(--line-strong)}
.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.blocked{background:var(--bad-bg);color:var(--bad-ink)}
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{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{border-bottom-color:transparent}
body.rows2 .lrow::before{display:none}
body.rows2 .lrow:hover{background:rgba(var(--fg),.025)}
/* a row's route: the codes with their flags, the airports' names under them; and its price, right-aligned */
.lr-route{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0}
.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-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-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
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-names{font:400 12px/1.25 var(--font-ui);color:var(--ink3)}
body.rows2 .lr-price{gap:3px}
/* the route map's colours, in both themes */
: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)}
/* the 48-hour strip (canvas variant B, 2026-09-27): a clock, the days with every flight as a bar from
   departure to landing, and the counts; dark in both themes, in the frame's black */
.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-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.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-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-empty{position:absolute;left:16px;top:42px;font:500 11.5px/1 var(--mono);color:var(--tp-faint)}
.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}
.calm .dk-clock b{font-variant-numeric:tabular-nums}
@media (max-width:900px){.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}}

/* ================================================================ per diems: the month (plan 1b, S3)
   On the Flights rules above, plain and simple (the spec's "Plain and simple"): Flights' parts in its
   tokens, no glow, no gradients and no glass of its own; colour only where it means something: red
   for a day that cannot be paid, amber for something to check, the accent for what is selected.
   Five sizes of type: 11px (column heads, the strip's numbers, the rail's amounts), 12.5px (names,
   notes, links), 13.5px (dates, times, labels, figures), 15.5px (codes and amounts) and 24px (the
   heading and the total); what is read first in one white (--hi). */
.flag.none{display:inline-block;width:16px;height:12px;background:none;box-shadow:none}   /* no flag: the place it would take */

/* ---------------------------------------------------------------- the month strip: Flights' strip, today where it has its clock, one plain bar per trip */
.pd-tape .dk-clock{gap:7px}
.pd-tape .dk-clock span{font:500 11px/1 var(--font-ui);letter-spacing:0;color:var(--tp-faint)}
.pd-tape .dk-clock b{font:600 15.5px/1 var(--font-ui);letter-spacing:0;color:var(--tp-strong)}
.pd-tape .dk-tick{top:22px;bottom:4px;width:var(--dw);background:none;border-left:1px solid var(--tp-grid)}
.pd-tape .dk-tick.day{top:22px;bottom:4px;background:none;border-left-color:var(--tp-tick-day)}
.pd-tape .dk-tick em,.pd-tape .dk-tick.day em{top:-15px;left:0;right:0;text-align:center;font:500 11px/1 var(--font-ui);letter-spacing:0;color:var(--tp-faint);font-variant-numeric:tabular-nums}
.pd-tape .dk-tick.day em{color:var(--tp-ink)}
.pd-tape .dk-now{box-shadow:none}
/* a trip: Flights' bar of a flight, 16px high; each day in it a link, the day without a rate a red stretch.
   The bar clips nothing, since its label sits under it: the days at its ends are rounded with it */
.pd-tape .dk-leg.tp-trip{top:31px;display:flex;box-shadow:none}
.pd-tape .dk-leg.tp-trip:hover{transform:none;filter:none}
.tp-d{flex:1 1 0;min-width:0;text-decoration:none}
a.tp-d:hover,.tp-d.hl{background:rgba(255,255,255,.22);text-decoration:none}
.tp-d.blocked{background:var(--tp-bar-bad)}
.tp-d:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}
.tp-d:nth-last-child(2){border-top-right-radius:4px;border-bottom-right-radius:4px}   /* the bar's last child is its label */
.tp-d:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pd-tape .dk-lab{left:2px;top:calc(100% + 6px);transform:none;font:500 11px/1 var(--font-ui);color:var(--tp-ink)}

/* ---------------------------------------------------------------- the head: the month as Flights' heading with its one pill, the homebase, the view switch */
.pd-head{align-items:flex-end;justify-content:space-between;margin:2px 0 14px}
.pd-title{display:flex;flex-direction:column;gap:6px;min-width:0}
.pd-title h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.pd-head .pill{text-transform:none}
.pill.s-sent{background:var(--good-bg);color:var(--good)}
.pd-who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px}
.pd-who b{font-weight:600;color:var(--ink2)}
.pd-who .flag{width:16px;height:12px;border-radius:2px}
.pd-views{margin:0}
.pd-views button{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:0;border-radius:9px;background:none;cursor:pointer;
  font:600 13.5px var(--font-ui);color:var(--ink2);white-space:nowrap;transition:background .15s,color .15s}
.pd-views button:hover{color:var(--hi)}
.pd-views button.on{background:var(--surface-hi);color:var(--hi);box-shadow:0 1px 0 rgba(var(--fg),.08) inset}
.pd-views button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pd-views svg,.pd-step svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pd-views svg{width:15px;height:15px;opacity:.8}

/* the year's months as Flights' segments: each its short name and what it pays, the month shown selected
   (its total is the card's); the arrows on either side go on into the year before and the year after */
.pd-rail{display:flex;align-items:stretch;gap:6px;margin:0 0 14px}
.pd-rail .segments{flex:1;display:flex;min-width:0;margin:0;align-self:auto}
.pd-rail .segments a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px;font-size:13.5px;line-height:1.2}
.pd-rail .segments a small{min-height:11px;max-width:100%;overflow:hidden;font:500 11px/1 var(--font-ui);color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-step{flex:none;display:grid;place-items:center;width:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);text-decoration:none}
.pd-step:hover{color:var(--hi);border-color:var(--line-strong);text-decoration:none}
.pd-step svg{width:16px;height:16px;stroke-width:2.2}
/* a submitted month: the line under the rail with the PDF to download (S8), and Reopen for an administrator (S10) */
.pd-lock{margin:0 0 14px;padding:12px 16px}
.pd-lock p{margin:0;font-size:13.5px;color:var(--ink2)}
.pd-lock .actions,.pd-lock form{margin:0}.pd-lock .actions{margin-top:10px;flex-wrap:wrap;gap:8px 14px}
.pd-soon{margin:0 0 14px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-size:13.5px;color:var(--ink2)}
.pd-soon p{margin:0}

/* ---------------------------------------------------------------- the Table view: Flights' list, a hairline row a day, the whole row the link */
body.rows2 .ltable.pd-days{container:days / inline-size;overflow:clip}
.pd-dhead,.pd-row,.pd-trip{display:grid;grid-template-columns:80px minmax(120px,1fr) 80px 84px 88px 84px;gap:14px;align-items:center}
body.rows2 .lhead.pd-dhead{position:sticky;top:0;z-index:6;padding:9px 16px 8px;background:var(--surface);font-size:11px}
.shell2:not(.side) .lhead.pd-dhead{top:58px}
.pd-row{position:relative;min-height:56px;padding:8px 16px;color:var(--hi);text-decoration:none;transition:background .15s}
a.pd-row:hover{text-decoration:none}
a.pd-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pd-row.nil{min-height:36px;padding-top:6px;padding-bottom:6px}
.pd-date{font:500 13.5px/1.2 var(--font-ui);color:var(--hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-row.nil .pd-date{color:var(--ink3)}
.pd-none{grid-column:2 / -1;color:var(--ink4)}
body.rows2 .pd-row .lr-route b{font-size:15.5px}
body.rows2 .pd-row .lr-names{max-width:100%;font-size:12.5px}
.pd-times{display:flex;flex-direction:column;gap:2px;font:500 13.5px/1.2 var(--font-ui);color:var(--hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-times small{font:inherit;color:var(--ink3)}
/* the meals provided, each a letter on a quiet tile; none provided, nothing */
.pd-meals{display:flex;gap:4px}
.pd-meal{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:rgba(var(--fg),.08);font:600 11px/1 var(--font-ui);font-style:normal;color:var(--hi)}
.pd-kind{min-width:0;font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-amt{font:600 15.5px/1.2 var(--font-ui);color:var(--hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-amt.zero{color:var(--ink4)}
.pd-note{grid-column:2 / -1;margin-top:-2px;font-size:12.5px;line-height:1.35}
.pd-note.bad{color:var(--bad-ink)}
.pd-note.look{color:var(--soon)}
body.rows2 .pd-row.blocked{background:var(--bad-bg)}
body.rows2 .pd-row.hl{background:rgba(var(--fg),.045)}
/* a trip of several days: a plain head above its days, as Flights heads a group of flights, its amount in the Amount column */
.pd-trip{padding:16px 16px 6px;border-bottom:1px solid var(--line-soft)}
.pd-trip-when{grid-column:1 / -2;display:flex;align-items:baseline;gap:10px;min-width:0;white-space:nowrap}
.pd-trip-when b{font:600 15.5px var(--font-ui);color:var(--hi)}
.pd-trip-when small{font:400 13.5px var(--font-ui);color:var(--ink3)}
.pd-trip-amt{grid-column:-2 / -1;justify-self:end;font:600 15.5px var(--font-ui);color:var(--hi);white-space:nowrap;font-variant-numeric:tabular-nums}
/* the table follows its own width: beside the side menu and the side column, the meals go first, then the times */
@container days (max-width:660px){
  .pd-dhead,.pd-row,.pd-trip{grid-template-columns:76px minmax(110px,1fr) 76px 88px 80px;gap:12px}
  .pd-dhead .h-meals,.pd-row .pd-meals{display:none}
}
@container days (max-width:520px){
  .pd-dhead,.pd-row,.pd-trip{grid-template-columns:72px minmax(100px,1fr) 84px 76px;gap:10px}
  .pd-row,body.rows2 .lhead.pd-dhead,.pd-trip{padding-left:12px;padding-right:12px}
  .pd-dhead .h-times,.pd-row .pd-times{display:none}
}

/* ---------------------------------------------------------------- beside the days: the total, the figures as label and value, what there is to fix */
.pd-fig{margin:0;padding:18px 20px}
.pd-fig h2{margin:0 0 4px}
.pd-total{margin:0 0 14px;font:600 24px/1.15 var(--font-ui);color:var(--hi);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pd-kv{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;font-size:13.5px}
.pd-kv dd{text-align:right;color:var(--hi);font-variant-numeric:tabular-nums}
.pd-kv dd span{color:var(--ink3)}
.pd-countries{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink3)}
.pd-ready{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.pd-fig h2 + .pd-ready{margin-top:6px;padding-top:0;border-top:0}       /* a month with nothing entered */
.pd-ready a{font-weight:600}
.pd-ready .bad{color:var(--bad-ink);font-weight:600}
.pd-ready .look{color:var(--soon);font-weight:600}

/* ---------------------------------------------------------------- the month on the map */
.card.pd-mapcard{margin:0;padding:16px 0 0;overflow:hidden}
.pd-mapcard h2{margin:0 20px 12px}
.pd-maphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 20px 12px}
.pd-maphead h2{margin:0}
.pd-maplegs button{padding:4px 10px;font-size:12.5px}
.pd-mapbox{aspect-ratio:var(--map-aspect,4 / 3);border-top:1px solid var(--line)}   /* the shape the map was cut to (_map.html) */
.pd-off{margin:0;padding:9px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.pd-off.hl{color:var(--hi)}
/* the map itself (_map.html, map.js): Flights' colours; thin solid tracks, line widths in screen pixels
   through --k, the map units per pixel map.js measures; small dots, a ring for the homebase, the codes
   as small plain labels */
.pm{position:relative;overflow:hidden;background:var(--map-sea)}
.pm-svg{--k:2.3;display:block;width:100%;height:100%}
.pm-land{fill:var(--map-land)}
.pm-coast{fill:none;stroke:var(--map-coast);stroke-width:.8;stroke-linejoin:round}
.pm-border{fill:none;stroke:var(--map-border);stroke-width:.7;stroke-dasharray:3 2}
.pm-leg{fill:none;stroke:var(--map-track);stroke-width:calc(var(--k) * 1.25px);stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:opacity .2s}
.pm.has-hl .pm-leg{opacity:.25}
.pm.has-hl .pm-leg.hl{opacity:1}
.pm-path{fill:none;stroke:none}
.pm-plane{fill:var(--map-code);opacity:0;pointer-events:none}
.pm-stop{cursor:pointer;transition:opacity .2s}
.pm-hit{fill:transparent}
.pm-dot{fill:var(--map-track)}
.pm-stop.home .pm-dot{fill:var(--map-sea);stroke:var(--map-code);stroke-width:calc(var(--k) * 1.5px)}
.pm-stop.hl .pm-dot{fill:var(--map-code)}
.pm.has-hl .pm-stop:not(.hl):not(.home){opacity:.45}
.pm-tags{position:absolute;inset:0;pointer-events:none}
.pm-tag{position:absolute;transform:translate(6px,-50%);font:600 11px/12px var(--font-ui);letter-spacing:.03em;color:var(--map-code);white-space:nowrap;
  text-shadow:-1px 0 var(--map-halo),1px 0 var(--map-halo),0 -1px var(--map-halo),0 1px var(--map-halo);transition:opacity .2s}
.pm.placed .pm-tag{transform:none}
.pm-tag.off{opacity:0}
.pm.has-hl .pm-tag{opacity:.35}
.pm.has-hl .pm-tag.off{opacity:0}
.pm-tag.hl,.pm.has-hl .pm-tag.hl{opacity:1}

/* ---------------------------------------------------------------- narrower: the page follows its own width beside the side menu */
@container page (max-width:840px){
  .pd-month{grid-template-columns:minmax(0,1fr) 290px;gap:14px}
}
@container page (max-width:660px){
  .pd-month{grid-template-columns:minmax(0,1fr)}
  .side .pd-side,.shell2 .pd-side,.pd-side{position:static;max-height:none;overflow:visible}
  .pd-head{align-items:flex-start}
  .pd-views{margin-left:0}
  .pd-rail .segments a small{display:none}
}

/* ================================================================ per diems: the day panel (plan 1b, S4)
   One day's form beside the month, on Flights' tokens, plain and simple: top to bottom the date with
   the arrows and close, the place question, the times only where the day needs them, the meals
   provided, More; at the foot, always in sight, what the day pays and Save. While it is open it
   takes the place of the figures and the map, so the days stay in view; it runs the height of the
   window. The day in it is marked in the table and the strip, in the accent. The same five sizes of
   type as the month. */
/* panel.js keeps its height to what is left of the window below its top (--pn-h), so the foot is in sight from the start */
.pd-panel{grid-column:2;grid-row:1;position:sticky;top:18px;height:var(--pn-h,calc(100vh - 36px));min-height:440px;min-width:0}
.shell2:not(.side) .pd-panel{top:76px;height:var(--pn-h,calc(100vh - 92px))}
.pd-month.pn-open .pd-side{display:none}
.pd-panel.in .pn{animation:pn-in .2s var(--ease)}
@keyframes pn-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
body.rows2 .pd-row.sel{background:rgba(110,147,255,.12)}
html[data-theme=light] body.rows2 .pd-row.sel{background:rgba(47,79,216,.08)}
.pd-row.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.tp-d.sel{box-shadow:inset 0 0 0 2px var(--accent-2)}

.pn{height:100%;display:flex;flex-direction:column;margin:0;background:var(--card-grad);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.pn-head{display:flex;align-items:center;gap:6px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line-soft)}
.pn .pn-title{flex:1;min-width:0;margin:0;font:600 15.5px/1.2 var(--font-ui);color:var(--hi)}
.ib{width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:9px;border:1px solid var(--line-strong);background:rgba(var(--fg),.03);
  color:var(--ink2);cursor:pointer;flex:none;transition:background .15s,color .15s,border-color .15s}
.ib:hover{background:rgba(var(--fg),.08);color:var(--hi);border-color:rgba(var(--fg),.26)}
.ib:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ib:disabled{opacity:.35;cursor:default}
.ib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.pn-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 8px;scrollbar-width:thin}
.pn-err{margin:0 0 14px;padding:9px 12px;border-radius:10px;background:var(--bad-bg);border:1px solid rgba(242,102,94,.4);color:var(--bad-ink);font-size:12.5px}
.pn-lock{margin:0 0 14px;font-size:13.5px;color:var(--ink2)}
.pn-leon{margin:0 0 14px;font-size:12.5px;font-weight:600;color:var(--soon)}
.pn .field{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;min-width:0}
.pn .fl{display:block;margin:0;padding:0;font:600 13.5px var(--font-ui);color:var(--hi)}
.pn .field .fi{position:relative;display:block}
.pn .field input{margin:0;height:40px;padding:8px 12px;font:600 15.5px var(--font-ui);background:rgba(var(--fg),.04);border:1px solid var(--line-strong);border-radius:10px;color:var(--hi);font-variant-numeric:tabular-nums}
.pn .field input::placeholder{color:var(--ink4);font-weight:400}
.pn .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.pn .field input:disabled{opacity:.7}
/* the place: the code with its flag in the box, the airport in one line under it; the code it opens
   with is selected quietly, a value rather than a highlight */
.pl .fi input{height:44px;padding:0 14px 0 46px;letter-spacing:.04em}
.pl .fi input::placeholder{letter-spacing:normal}
.pl .fi input::selection{background:rgba(110,147,255,.3);color:inherit}
html[data-theme=light] .pl .fi input::selection{background:rgba(47,79,216,.16);color:inherit}
.pl-flag > .flag,.pl-flag > .fl-none{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:16.5px;border-radius:3px;pointer-events:none}
.fl-none{display:inline-block;width:20px;height:15px}
.pl.bad .fi input{border-color:rgba(242,102,94,.7);background:var(--bad-bg)}
.pl-who{margin:0;font-size:12.5px;color:var(--ink2)}
.pl-who:empty{display:none}
.pl-near{margin:0;padding:8px 10px;border-radius:10px;background:var(--soon-bg);color:var(--hi);font-size:12.5px;line-height:1.6}
.pl-near .qk{margin:0 2px;vertical-align:1px}
.pl-quick{display:flex;flex-wrap:wrap;gap:6px}
.qk{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:8px;border:1px solid var(--line-strong);background:rgba(var(--fg),.03);
  color:var(--ink2);font:500 12.5px/1 var(--font-ui);cursor:pointer}
.qk b{font:600 12.5px var(--font-ui);color:var(--hi);letter-spacing:.04em}
.qk .flag,.qk .fl-none{width:15px;height:11.25px}
.qk span{color:var(--ink3)}
.qk:hover{border-color:var(--accent);color:var(--hi)}
.qk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the airports offered as the pilot types: the code, the name (the town where the name lacks it), the country */
.sug{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);margin:0;padding:5px;list-style:none;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-lift);max-height:330px;overflow-y:auto}
.sug li{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink2)}
.sug li .flag,.sug li .fl-none{width:20px;height:15px}
.sug li b{font:600 13.5px var(--font-ui);color:var(--hi);letter-spacing:.04em}
.sug li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug li span em{font-style:normal;color:var(--ink4);margin-left:4px}
.sug li small{font-size:11px;color:var(--ink4);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.sug li.act,.sug li:hover{background:rgba(110,147,255,.16);color:var(--hi)}
html[data-theme=light] .sug li.act,html[data-theme=light] .sug li:hover{background:rgba(47,79,216,.09)}
.sug .grp{display:block;padding:7px 8px 3px;font:600 11px/1 var(--font-ui);color:var(--ink4);cursor:default}
.sug .grp:hover{background:none}
/* the airports after the groups: a line, since a heading over them would be wrong */
.sug .sep{display:block;height:1px;margin:4px 8px;padding:0;border-radius:0;background:var(--line);cursor:default}
.sug .sep:hover{background:var(--line)}
/* the times, only on the day of leaving and the day of coming back; what is missing said under them, in amber */
.tms{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tms:not(:has(> label:not([hidden]))){display:none}
.pn-check{margin:-6px 0 16px;font-size:12.5px;line-height:1.35;color:var(--soon)}
.pn-link{all:unset;display:inline-block;font:500 12.5px var(--font-ui);color:var(--accent-2);cursor:pointer}
.pn-link:hover{text-decoration:underline;text-underline-offset:2px}
.pn-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.pn-link[hidden]{display:none}
/* the meals and the marks under More: a list of switches, a name and Flights' toggle; breakfast says
   "usual" while it follows the rule */
.pn fieldset{border:0;margin:0 0 16px;padding:0;min-width:0}
.pn legend.fl{margin:0 0 8px}
.chs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pn-sw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:9px 12px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;font:500 13.5px var(--font-ui);color:var(--hi)}
.pn-sw:last-child{border-bottom:0}
.pn-sw input{position:absolute;opacity:0;pointer-events:none}
.pn-sw > b{font-weight:500;color:var(--hi)}
.pn-sw > small{margin:0 auto 0 -2px;font:400 12.5px var(--font-ui);color:var(--ink3)}
.pn-sw > small[hidden]{display:none}
.pn-sw .tg{flex:none;width:30px;height:18px;border-radius:9px;background:var(--surface-3);border:1px solid var(--line-strong);position:relative;transition:background .15s,border-color .15s}
.pn-sw .tg::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ink3);transition:transform .15s,background .15s}
.pn-sw:has(input:checked) .tg{background:rgba(110,147,255,.35);border-color:var(--accent)}
.pn-sw:has(input:checked) .tg::after{transform:translateX(12px);background:var(--accent)}
.pn-sw:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.pn-sw:has(input:disabled){cursor:default;opacity:.7}
.pn-meals .pn-link{margin-top:8px}
/* More, closed, its line naming only what is on under it */
.pn-more{margin:0 0 12px}
.pn-more summary{display:flex;align-items:baseline;gap:8px;padding:2px 0 8px;cursor:pointer;list-style:none;font:600 13.5px var(--font-ui);color:var(--hi)}
.pn-more summary::-webkit-details-marker{display:none}
.pn-more summary::before{content:"";width:6px;height:6px;border-right:1.6px solid var(--ink3);border-bottom:1.6px solid var(--ink3);transform:rotate(-45deg);margin-right:2px;transition:transform .15s;align-self:center}
.pn-more[open] summary::before{transform:rotate(45deg)}
.pn-more summary small{font:400 12.5px var(--font-ui);color:var(--ink3)}
.pn-more summary small:empty,.pn-more[open] summary small{display:none}
.pn-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* the foot, always in sight: what the day pays, the month's total only when it changes, Save */
.pn-foot{display:flex;flex-direction:column;gap:10px;padding:12px 18px 14px;border-top:1px solid var(--line-soft)}
.pn-pay{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pn-pay .how{min-width:0}
.pn-pay .how b{display:block;font:600 13.5px var(--font-ui);color:var(--hi)}
.pn-pay .how span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.pn-pay .amt{font:600 15.5px/1 var(--font-ui);color:var(--hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.pn-pay.zero .amt{color:var(--ink4)}
.pn-pay.bad .how b,.pn-pay.bad .how span{color:var(--bad-ink)}
.pn-pay.idle .how b{font-weight:500;color:var(--ink2)}
.pn-total{margin:0;font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.pn-total b{font-weight:600;color:var(--hi)}
.pn-btns{display:flex;align-items:center;gap:8px}
.pn-btns .grow{flex:1}
.pn-btns .btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding-top:0;padding-bottom:0;white-space:nowrap}
.pn-btns .btn.pri .kbd{border-color:currentColor;background:none;color:inherit;opacity:.65;line-height:14px}
.pn.busy .pn-btns .btn{opacity:.65;pointer-events:none}
.kbd{display:inline-block;min-width:18px;padding:0 5px;border-radius:5px;border:1px solid var(--line-strong);border-bottom-width:2px;background:rgba(var(--fg),.035);
  font:600 11px/16px var(--font-ui);color:var(--ink3);text-align:center;font-style:normal}
/* a saved day says so at the foot of the window, with Undo (Flights' act-toast) */
.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;pointer-events:auto;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8);font:500 13.5px/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)}
.act-toast .undo{all:unset;cursor:pointer;margin-left:12px;font-weight:700;color:#9DB6FF;text-decoration:underline;text-underline-offset:2px}
.act-toast .undo:focus-visible{outline:2px solid #9DB6FF;outline-offset:2px;border-radius:3px}
@keyframes fx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pd-panel.in .pn,.act-toast{animation:none;transition:none}}
/* the panel narrow, at 1024 wide: a button never breaks its words; Clear day drops to a line of its own */
@container page (max-width:840px){
  .pn-btns{flex-wrap:wrap}
  .pn-btns .btn.ghost{margin-left:auto}
}
/* a narrow window: the panel over the page */
@container page (max-width:660px){
  .pd-panel{position:fixed;inset:0;z-index:70;height:auto;min-height:0;padding:10px}
  .pd-month.pn-open .pd-side{display:flex}
}

/* ================================================================ per diems: Add a trip (plan 1b, S5)
   The trip form in the day panel's frame (.pn), plain and simple: "Left home" and "Back home" as the
   browser's own date fields with the times typed as in the day panel, a row per night named by its
   date with the airport search the place field has, More as in the day panel, then what the trip
   pays as a short table; at the foot, always in sight, the lines on the times missing, the days
   replaced and the month run into, the trip's dates and total, each month's total only where it
   changes, Save and Cancel. The button that opens it sits by the view switch in the month's head, in
   Flights' button style. */
.pd-head .tf-add{align-self:center;margin-left:auto;white-space:nowrap}
/* Fill in from Leon (plan 2): the button beside Add a trip; the window over the whole page (L8b) with
   the proposal as one table, a row per trip and the switches in their columns; the waiting frame */
.pd-head .lf-fill{align-self:center;white-space:nowrap}
.lf-line{margin:0;font-size:13.5px;color:var(--ink2)}
.pd-panel.pd-overlay{position:fixed;inset:0;z-index:80;height:auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,10,24,.62)}
.pd-panel.pd-overlay .pn{width:min(1160px,100%);height:min(88vh,940px);box-shadow:0 30px 80px -30px rgba(0,0,0,.75)}
.pd-month.pn-open.lf-open .pd-side{display:flex}
.lf-grid{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink2)}
.lf-grid th{text-align:left;font:500 11.5px var(--font-ui);letter-spacing:.02em;color:var(--ink4);padding:6px 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.lf-grid td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.lf-grid th.num,.lf-grid td.num{text-align:right}
.lf-grid tr.lf-trip td{padding:18px 10px 6px}
.lf-grid .lf-trip-when b{font:600 14.5px var(--font-ui);color:var(--hi)}
.lf-grid .lf-trip-when small{margin-left:8px;font:400 12.5px var(--font-ui);color:var(--ink3)}
.lf-grid tr.lf-sub td{padding:7px 10px 9px;border-top:1px solid var(--line-strong);border-bottom:0;background:rgba(var(--fg),.035)}
.lf-grid tr.lf-sub td.lf-sub-lab{text-align:right;font:500 12px var(--font-ui);color:var(--ink3)}
.lf-grid td.lf-trip-amt{font:600 14px var(--font-ui);color:var(--hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.lf-grid td.lf-date{white-space:nowrap;color:var(--ink3)}
.lf-grid td.lf-place b{font:600 13.5px var(--font-ui);color:var(--hi);letter-spacing:.03em}
.lf-grid td.lf-place small{display:block;color:var(--ink3);font-size:11.5px;line-height:1.3}
.lf-grid td.lf-place .flag,.lf-grid td.lf-place .fl-none{width:16px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.lf-grid td.lf-time{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--hi);font-weight:600}
.lf-grid td.lf-sw-cell{text-align:center;width:72px}
.lf-grid td.lf-sw-cell .lf-sw{justify-content:center}
.lf-grid td.lf-kind{white-space:nowrap;color:var(--ink3)}
.lf-grid td.lf-kind.travel{color:var(--hi);font-weight:600}
.lf-grid tr:has(td.lf-kind.travel) td.lf-date{color:var(--hi);font-weight:600}
.lf-grid td.amt{font:600 13.5px var(--font-ui);color:var(--hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.lf-grid tr.bad td.amt,.lf-grid tr.bad td.lf-kind{color:var(--bad-ink)}
.lf-grid tr.changed td.lf-date{color:var(--soon)}
.lf-sw{position:relative;display:inline-flex;align-items:center;gap:5px;margin:0;cursor:pointer;font:500 11px/1 var(--font-ui);color:var(--ink3);white-space:nowrap}
.lf-sw input{position:absolute;opacity:0;pointer-events:none}
.lf-sw .tg{flex:none;width:28px;height:16px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line-strong);position:relative;transition:background .15s,border-color .15s}
.lf-sw .tg::after{content:"";position:absolute;left:1px;top:1px;width:12px;height:12px;border-radius:50%;background:var(--ink3);transition:transform .15s,background .15s}
.lf-sw:has(input:checked){color:var(--hi)}
.lf-sw:has(input:checked) .tg{background:rgba(110,147,255,.35);border-color:var(--accent)}
.lf-sw:has(input:checked) .tg::after{transform:translateX(12px);background:var(--accent)}
.lf-sw:has(input:focus-visible) .tg{outline:2px solid var(--accent);outline-offset:2px}
.lf.asking [data-amount],.lf.asking [data-trip-total],.lf.asking [data-say="total"],.lf.asking [data-say="after"]{opacity:.5;transition:opacity .15s}
.pd-kind.travel{color:var(--hi);font-weight:600}
.lf-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:200px;color:var(--ink2);font-size:13.5px}
.lf-wait p{margin:0}
.lf-ring{display:block;width:28px;height:28px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--accent);animation:spin .9s linear infinite}
.pn.busy .pn-btns .btn.pri{position:relative;color:transparent}
.pn.busy .pn-btns .btn.pri .kbd{visibility:hidden}
.pn.busy .pn-btns .btn.pri::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .9s linear infinite}
@media (prefers-reduced-motion:reduce){.lf-ring,.pn.busy .pn-btns .btn.pri::after{animation:none}}
.pd-head .tf-add+.pd-views{margin-left:0}
.tf-dt{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:8px}
.pn .tf-dt input{padding:0 10px;font-weight:500;font-size:13.5px}
.pn .tf-dt input[type=text]{font-weight:600;font-size:15.5px}
.tf-nights legend.fl{margin:0 0 8px}
.tf-night.field{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 8px}
.tf-night .fl{font-weight:500;color:var(--ink2);white-space:nowrap}
.tf-night .fi input{height:40px}
.tf-night .sug{z-index:6}
.tf-pays{width:100%;margin:4px 0 12px;border-collapse:collapse;font-size:12.5px;color:var(--ink2)}
.tf-pays td{padding:6px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tf-pays tr:last-child td{border-bottom:0}
.tf-pays td:first-child{white-space:nowrap;color:var(--ink3);padding-right:10px}
.tf-pays td b{font:600 13.5px var(--font-ui);color:var(--hi);letter-spacing:.03em}
.tf-pays td .flag,.tf-pays td .fl-none{width:16px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.tf-pays td.amt{text-align:right;white-space:nowrap;color:var(--hi);font-variant-numeric:tabular-nums}
.tf-pays tr.bad b,.tf-pays tr.bad td{color:var(--bad-ink)}
.tf-note{margin:0;font-size:12.5px;line-height:1.35;color:var(--ink3)}
.tf-note.look{color:var(--soon)}
.pn-link.tf-from{margin:0 0 12px}
/* the same form on a page of its own, without script: it flows with the page */
.tf-page{padding:0}
.tf-page .pn{height:auto;border:0;box-shadow:none;background:none}
/* narrower: the heading on its own line, the button and the view switch together under it, at the right */
@container page (max-width:840px){
  .pd-head:has(.tf-add) .pd-title{flex-basis:100%}
}

/* ================================================================ per diems: the Year screen (plan 1b, S9)
   The year's months and its tax summary as two of the card tables above, on Flights' tokens: the
   years either side as plain buttons beside the heading, a submitted month's PDF link after its pill,
   the totals as the last row. */
.pd-years{margin:0;align-self:center}
.pd-year > table td{padding:8px 10px}
.pd-year td .flag{width:16px;height:12px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.pd-year td small{color:var(--ink3)}.pd-year td small::before{content:"· "}   /* a city's country after it */
.pd-year td .pill{text-transform:none}
.pd-year td .pill + a{margin-left:8px;font-size:12.5px}
.pd-year tbody tr:last-child td{border-bottom:0}
.pd-year tr.tot td{font-weight:600;color:var(--hi);border-top:1px solid var(--line-strong)}
.pd-year .pd-verdict{margin:14px 0 0;font-size:13.5px;color:var(--hi)}
.pd-year .pd-note{margin:8px 0 14px;font-size:12.5px;line-height:1.5;color:var(--ink3);max-width:90ch}
.pd-year .actions{margin:0}
/* narrower, beside the side menu at 1024 wide: the nine columns closer, the headers on two lines, a city's country under its name */
@container page (max-width:840px){
  .pd-year > table{font-size:12.5px}
  .pd-year > table th,.pd-year > table td{padding:7px 6px}
  .pd-year > table th.num{white-space:normal}
  .pd-year td small{display:block}.pd-year td small::before{content:none}      /* under the city, without the dot */
}

/* ================================================================ per diems: the administrator's screens (plan 1b, S10)
   Lists in Flights' table style, one line per pilot, sign-in, year, region or airport under a quiet
   header, the name the link; forms in Flights' form style, one card each, two side by side where a
   page has two; the pay rules as the day panel's switches; a region changed in its own row. */
.ad-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ad-table th{text-align:left;font:500 11.5px var(--font-ui);letter-spacing:.02em;color:var(--ink4);padding:9px 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ad-table td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink)}
.ad-leon tr.bad td{color:var(--ink3)}
.ad-leon .ad-note{display:block;font-size:12px;color:var(--bad-ink)}
.ad-leon input[type=checkbox]{width:16px;height:16px}
.ad-list form .actions{padding:12px 10px 0}
.ad-table tbody tr:last-child td{border-bottom:0}
.ad-table tbody tr:hover td{background:rgba(var(--fg),.02)}
.ad-table td b{font-weight:600;color:var(--hi)}
.ad-table td a{color:inherit}.ad-table td a:hover{text-decoration:none}.ad-table td a:hover b{color:var(--accent-2)}
.ad-table td small{display:block;font-size:12px;color:var(--ink3)}
.ad-table td b + small{display:inline;margin-left:8px}
.ad-table td .flag{width:18px;height:13.5px;border-radius:2px;margin-right:7px;vertical-align:-2px}
.ad-table .none{color:var(--ink4)}
.ad-table .warn{color:var(--soon)}.ad-table .warn a{color:inherit}
.ad-table th.num,.ad-table td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ad-table tr.on td{background:rgba(110,147,255,.07)}
html[data-theme=light] .ad-table tr.on td{background:rgba(47,79,216,.06)}
.ad-table td input,.ad-table td select{margin:0;padding:7px 9px;font-size:13.5px}
.ad-table td.num input{width:84px;text-align:right;font-variant-numeric:tabular-nums}
.ad-table th.ad-act,.ad-table td.ad-act{white-space:nowrap;text-align:right;width:1%}
.ad-table .ad-act .btn{margin-left:6px}
.ad-table td.ad-edit-region{min-width:200px}
.ad-table td.ad-edit-region small{display:inline;margin-left:8px}
.ad-naming{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ad-naming input,.ad-naming select{flex:1 1 150px;min-width:0}
.card.ad-list{padding:6px 14px;overflow-x:auto}
.pagehead h1 .flag{margin-right:9px;vertical-align:-1px}
.card.ad-list > h2{margin:12px 0 4px;padding:0 10px}
.ad-find{display:flex;gap:8px;align-items:center;margin-left:auto}
.ad-find input{margin:0;width:260px;padding:8px 11px}
.pagehead .ad-find + .btn,.pagehead .ad-back{align-self:center}
.ad-form{max-width:600px}
.ad-form .actions{margin:4px 0 0}
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.ad-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin:0 0 14px}
.ad-two .card{margin:0;max-width:none}
.ad-line{margin:-4px 0 14px;font-size:13px;color:var(--ink3)}
.ad-line .warn,.lede .warn{color:var(--soon)}
.ad-place{position:relative;display:block}
.ad-place .sug{top:calc(100% + 4px)}
.ad-who{display:block;margin:6px 0 0;font-size:12.5px;font-weight:400;color:var(--ink2);min-height:1.2em}
.ad-who .flag{width:16px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.ad-switch{border:1px solid var(--line);border-radius:10px;margin:0 0 12px}
.ad-rules .chs{margin:0 0 16px}
.ad-rule > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-rule > span b{font-weight:500;color:var(--hi)}
.ad-rule > span small{font-size:12.5px;color:var(--ink3)}
.ad-hint{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--ink2);max-width:70ch}
.ad-year{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.ad-year h2{flex:1;margin:0}
.ad-months{padding:16px 14px 6px}
@media (max-width:1100px){.ad-two{grid-template-columns:minmax(0,1fr)}.ad-two .card{max-width:600px}}