:root{--bg:#f6f7f9;--card:#fff;--ink:#14181f;--mute:#5d6675;--line:#e1e5eb;--accent:#1d4ed8;--accent-ink:#fff;--ok:#16794a;--warn:#b45309;--bad:#b42318;--head:#eef1f6;--row:#f9fafc;--chip:#eef2ff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1319;--card:#171c24;--ink:#e8ecf2;--mute:#9aa4b4;--line:#2a313c;--accent:#6c97ff;--accent-ink:#0b1020;--ok:#4cc38a;--warn:#f0a53c;--bad:#ff7b72;--head:#1e2530;--row:#1a2029;--chip:#1f2a44}}:root[data-theme="dark"]{--bg:#0f1319;--card:#171c24;--ink:#e8ecf2;--mute:#9aa4b4;--line:#2a313c;--accent:#6c97ff;--accent-ink:#0b1020;--ok:#4cc38a;--warn:#f0a53c;--bad:#ff7b72;--head:#1e2530;--row:#1a2029;--chip:#1f2a44}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* country flags on Windows (no flag emoji there): a small flag-only font, used for the flag characters alone (unicode-range) */
@font-face{font-family:"Twemoji Country Flags";unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;src:url('/vendor/TwemojiCountryFlags.woff2') format('woff2');font-display:swap}
body{margin:0;font:14px/1.45 "Twemoji Country Flags",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
/* Inter (the website's font, our own copy, OFL licence beside it): the same clean letters on every phone and computer instead of
   each system's own; never heavier than bold (the face stops at 700) */
@font-face{font-family:Inter;src:url('/vendor/InterVariable.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
body{font-family:"Twemoji Country Flags",Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-feature-settings:"cv11";letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.hidden{display:none!important}

/* ---------- shell ---------- */
.layout{display:flex;min-height:100vh}
nav{width:200px;flex:none;background:var(--card);border-right:1px solid var(--line);padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
nav .brand{font-weight:700;font-size:16px;padding:4px 10px 14px;display:flex;align-items:center;justify-content:space-between}
nav .navbtn{display:none}
nav a{display:block;padding:7px 10px;border-radius:7px;color:var(--ink);text-decoration:none}
nav a:hover{background:var(--head)}nav a.on{background:var(--accent);color:var(--accent-ink)}
nav hr{border:0;border-top:1px solid var(--line);margin:10px 0}
nav .newbtn{margin:14px 6px 0}
main{flex:1;min-width:0;padding:20px 24px 60px}
h1{font-size:20px;margin:0 0 14px}h2{font-size:15px;margin:22px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.row.tight{gap:6px}.grow{flex:1}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stat{font-size:24px;font-weight:700}.mute{color:var(--mute)}.small{font-size:12px}

/* ---------- controls ---------- */
button,.btn{font:inherit;border:1px solid var(--btnline,var(--line));background:var(--card);color:var(--ink);padding:6px 12px;border-radius:var(--btnr,7px);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3;font-weight:var(--btnw)}
button:hover,.btn:hover{background:var(--head)}
button:disabled{opacity:.45;cursor:default}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.danger{color:var(--bad);border-color:var(--bad)}
button.mini{padding:3px 8px;font-size:12px}
input,select,textarea{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 8px;border-radius:7px;max-width:100%}
textarea{width:100%;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mute)}
label.inline{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--ink)}
.up{text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.chip{background:var(--chip);border-color:transparent;border-radius:99px;padding:3px 10px;font-size:12.5px}
.chip:hover{border-color:var(--accent)}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%}
th,td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:var(--head);font-weight:600;font-size:12px;position:sticky;top:0;cursor:default;z-index:1}
th.sort{cursor:pointer}td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:nth-child(even){background:var(--row)}tbody tr.click{cursor:pointer}tbody tr.click:hover{background:var(--head)}
tfoot td{font-weight:700;background:var(--head)}
.scroll{overflow:auto;max-height:none;border:1px solid var(--line);border-radius:10px;background:var(--card);-webkit-overflow-scrolling:touch}
.card table{display:block;overflow-x:auto}
.card .scroll table,.scroll table{display:table}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.pill.ok{background:color-mix(in srgb,var(--ok) 15%,transparent)}.pill.bad{background:color-mix(in srgb,var(--bad) 15%,transparent)}.pill.warn{background:color-mix(in srgb,var(--warn) 15%,transparent)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;padding:30px 12px;overflow:auto;z-index:10;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal.hidden,.toast.hidden{display:none}
.dialog{background:var(--card);border-radius:12px;padding:18px;width:min(980px,100%);border:1px solid var(--line)}
.dialog.wide{width:min(1100px,100%)}
.fgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 12px;padding:10px}legend{font-weight:600;padding:0 6px;font-size:12px;color:var(--mute)}
.demobar{background:var(--ink);color:var(--bg);text-align:center;font-size:13px;padding:7px 16px;line-height:1.4}.demobar a{color:inherit;text-decoration:underline;white-space:nowrap}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;z-index:20}
.login{max-width:360px;margin:14vh auto;padding:20px 16px}

/* ---------- flight form (Safelog "New flight" layout) ---------- */
.flightform .ffhead{position:sticky;top:-30px;background:var(--card);z-index:3;padding:12px 0 6px;margin:-12px 0 4px;box-shadow:0 8px 12px -10px rgba(0,0,0,.4)}
.fsec{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:visible}
.fsec>h2{margin:0;padding:7px 12px;background:var(--head);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.fsec>.chips,.fsec>.row,.fsec>.calc{padding:8px 12px 0}
.fsec>.chips:last-child,.fsec>.row:last-child{padding-bottom:10px}
.frow{display:grid;grid-template-columns:170px minmax(0,1fr);border-top:1px solid var(--line)}
.fsec>h2+.frow{border-top:0}
.flab{background:color-mix(in srgb,var(--head) 55%,transparent);padding:9px 12px;font-weight:600;font-size:13px;text-align:right}
.fval{padding:7px 10px;min-width:0}
.dur{display:inline-flex;gap:3px;align-items:center}
.dur input{width:68px;text-align:right;font-variant-numeric:tabular-nums}
.cnt{display:inline-flex;gap:3px;align-items:center}.cnt input{width:52px;text-align:center}
.tlab{color:var(--mute)}
.times input{width:76px;text-align:center;font-variant-numeric:tabular-nums}
.tz{align-self:flex-end}
.apbox{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apname{min-width:0}
.apdrop{position:absolute;left:0;top:36px;z-index:5;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);width:min(460px,80vw);max-height:300px;overflow:auto}
.apopt{padding:6px 10px;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apopt:hover,.apopt.sel{background:var(--head)}
.calc{font-size:13.5px;padding:10px 12px!important;margin:0;background:color-mix(in srgb,var(--accent) 9%,transparent);border-top:1px solid var(--line)}
.savebar{position:sticky;bottom:-30px;z-index:5;background:var(--card);padding:10px 0 40px;border-top:1px solid var(--line);box-shadow:0 -8px 16px -8px rgba(0,0,0,.35)}

/* ---------- print settings ---------- */
.pcols{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-top:10px}
.pcols label.inline{font-size:12.5px}

/* ---------- graphs ---------- */
.bar{display:flex;align-items:center;gap:8px;margin:3px 0}.bar .lbl{width:150px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar .fill{height:14px;background:var(--accent);border-radius:3px}
svg text{fill:var(--mute);font-size:10px}.chart rect.b{fill:var(--accent)}.chart rect.b2{fill:#16a085}.chart rect.b3{fill:#e08a1e}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.tabs button.on{background:var(--accent);color:var(--accent-ink)}

/* ---------- iPad / phone ---------- */
@media(max-width:900px){
  .layout{flex-direction:column}
  nav{width:auto;height:auto;position:sticky;top:0;z-index:8;border-right:0;border-bottom:1px solid var(--line);padding:8px 12px;flex-direction:row;align-items:center;gap:10px}
  nav .brand{padding:0;flex:1}
  nav .navbtn{display:inline-block;font-size:18px;padding:2px 10px}
  nav .navlinks{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);padding:8px 12px 12px;max-height:75vh;overflow:auto;box-shadow:0 10px 24px rgba(0,0,0,.15)}
  body.navopen nav .navlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}
  nav hr{display:none}
  nav .newbtn{margin:0;order:2}
  nav .brand{order:1}
  main{padding:14px 12px 60px}
  .modal{padding:0}
  .dialog,.dialog.wide{width:100%;min-height:100%;border-radius:0;border:0;padding:12px 12px 0}
  .flightform .ffhead{top:0;padding-top:12px;margin-top:-12px}
  .savebar{bottom:0;padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:600px){
  .frow{grid-template-columns:minmax(0,1fr)}
  .dialog,.flightform,.fsec{max-width:100vw;overflow-x:clip}
  .fval select{max-width:100%}
  .times input{width:64px}
  .flab{text-align:left;padding:6px 10px 0;background:none;font-size:12px;color:var(--mute)}
  .fval{padding:4px 10px 9px}
  .savebar button{flex:1 1 45%}
  h1{font-size:18px}
  .grid{grid-template-columns:1fr}
}

/* ---------- printable logbook pages (Safelog layout) ---------- */
.pages{margin-top:10px}
.page{background:#fff;color:#000;width:297mm;height:210mm;padding:7mm 8mm;margin:0 auto 16px;border:1px solid var(--line);display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.page .ph{display:flex;justify-content:space-between;align-items:flex-start;min-height:20mm;border-bottom:1px solid #999;margin-bottom:3mm}
.page .ptitle{font-family:'Times New Roman',serif;font-size:17px;line-height:1.25}
.page .paddr{font-size:8px;text-align:right;line-height:1.35}
.page table{table-layout:auto;width:100%;border-collapse:collapse;flex:1}
.page th,.page td{border:1px solid #333;padding:1.5px 3px;font-size:8px;color:#000;background:none;position:static;white-space:nowrap;text-align:center;height:5.2mm}
.page th{background:#e6e6e6;font-weight:normal;font-size:7.5px;white-space:normal;line-height:1.15}
.page td.n{text-align:center;font-variant-numeric:tabular-nums}
.page td.rem,.page th.rem{text-align:left;white-space:normal;width:32%;font-size:7.5px;overflow:hidden}
.page tbody tr:nth-child(even){background:none}
.page tfoot td{background:none;font-weight:normal;border-top:1.5px solid #000}
.page tfoot td.lbl{text-align:right;border:0;font-size:7.5px;position:relative}
.page tfoot td.lbl .cert{position:absolute;left:0;font-size:7px;font-weight:bold}
.page .pf{display:flex;justify-content:space-between;font-size:8px;font-weight:bold;margin-top:2mm}
.page .pno{background:#000;color:#fff;padding:2px 8px}
.page .gen{display:inline-block;margin-top:4px;font-size:7.5px}
@media print{
  @page{size:A4 landscape;margin:0}
  nav,.noprint,.toast,.modal{display:none!important}
  main{padding:0}body{background:#fff}.layout{display:block}
  .pages{margin:0}
  .page{border:0;margin:0;break-after:page;page-break-after:always}
}

/* ---------- approach list, attachments, records ---------- */
.aplist{padding:6px 12px 0}
.aprow{display:flex;gap:6px;align-items:center;margin-bottom:5px;flex-wrap:wrap}
.moretoggle{padding:6px 12px}
.atts{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px 0}
.att{position:relative;display:flex;align-items:center;gap:4px}
.att img{width:110px;height:82px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.att .doc{display:inline-block;padding:8px 10px;border:1px solid var(--line);border-radius:6px;text-decoration:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att button{position:absolute;top:2px;right:2px;padding:0 5px}
.chargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:10px}
.chargrid h3{font-size:12px;margin:0 0 4px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.chargrid label.inline{font-size:12.5px}
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--head);color:var(--mute);margin-left:4px;vertical-align:1px}
.flag{font-size:15px;margin-right:4px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gallery .att img{width:100%;height:120px}
#map{height:calc(100vh - 160px);min-height:420px;border-radius:10px;border:1px solid var(--line)}
.grid-edit input{width:100%;min-width:60px;padding:3px 5px;border-radius:4px}
.grid-edit td{padding:2px 3px}
.grid-edit tr.dirty td{background:color-mix(in srgb,var(--warn) 14%,transparent)}
.filters2{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.dur .x,.cnt .x{padding:2px 6px;color:var(--mute)}
.sugg{font-size:11.5px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--ok) 16%,transparent);border-color:transparent;white-space:nowrap}
.dur .link{padding:2px 5px;opacity:.55}.dur .link.on{opacity:1;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cnt{flex-wrap:wrap}.cnt .num{min-width:26px}
.chip.on{background:var(--accent);color:var(--accent-ink)}
.apflags{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 8px;border:1px dashed var(--line);border-radius:8px}
#localtimes{margin-top:4px}

/* ---------- logbook page (Safelog Flights) ---------- */
.views{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}.views .btn{font-size:13px}
.seg{display:inline-flex;gap:0}.seg>*{border-radius:0}.seg>*:first-child{border-radius:7px 0 0 7px}.seg>*:last-child{border-radius:0 7px 7px 0}.seg .on{background:var(--accent);color:var(--accent-ink)}
.lbt th.grp{text-align:center;border-left:1px solid var(--line)}
.lbt td.acts,.lbt th.acts{white-space:nowrap;padding:2px 4px;position:sticky;left:0;background:var(--card);z-index:2}
.lbt thead th.acts{z-index:3}
.ib{display:inline-block;border:0;background:none;padding:1px 2px;font-size:13px;line-height:1;cursor:pointer;text-decoration:none;opacity:.75}.ib:hover{opacity:1;background:var(--head)}
.lbt tr.bf td,.lbt tfoot tr.grand td{background:var(--head);font-weight:700}
.lbt tr.sched td{font-style:italic;color:var(--mute)}
.collist{max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px}
.colrow{display:flex;align-items:center;gap:6px;padding:3px 4px;border-bottom:1px solid var(--line)}
/* calendar */
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.cgrid.day{grid-template-columns:1fr}
.chead{font-weight:600;font-size:12px;color:var(--mute);text-align:center}
.cday{min-height:92px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px;overflow:hidden}.cday.out{opacity:.45}.cday.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cnum{font-size:11px;color:var(--mute);text-align:right}
.cev{display:block;font-size:11px;padding:1px 4px;margin:1px 0;border-radius:4px;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cev.f{background:color-mix(in srgb,var(--accent) 16%,transparent)}.cev.s{background:color-mix(in srgb,var(--warn) 18%,transparent)}.cev.m{background:color-mix(in srgb,var(--ok) 18%,transparent)}.cev.x{background:color-mix(in srgb,var(--bad) 16%,transparent)}
.cyear{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.cyear a{text-decoration:none;color:var(--ink)}
.freport th{text-align:left;width:220px;color:var(--mute);font-weight:600;background:none;position:static}
@media print{.freport{border:0}}


.fsec.collapsed .secbody{display:none}
.sectoggle{border:0;background:none;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.oplogo{height:18px;vertical-align:middle;margin-left:6px;border-radius:3px;background:#fff}.opname,.mfr{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-left:6px;color:var(--mute)}
.chip.fav{border-color:var(--warn)}.chip.star{opacity:.6}
.favbox{border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:6px;background:var(--bg)}.favlist{max-height:220px;overflow:auto;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.sigpad{display:block;width:100%;max-width:600px;height:160px;background:#fff;border:1px solid var(--line);border-radius:8px;margin:6px 0;touch-action:none}
.pickhead{position:sticky;top:0;background:var(--card);padding:6px;border-bottom:1px solid var(--line);display:grid;gap:6px}.pickhead .chip{padding:1px 6px;font-size:11px}
.actree{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px;align-items:start}
.treebox{display:grid;gap:8px}.treelist{max-height:46vh;overflow:auto;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px}.treelist a{padding:3px 8px;text-decoration:none;color:var(--ink);font-size:13px}.treelist a.on,.treelist a:hover{background:var(--head)}
.compact{columns:3 260px;font-size:12px}
@media(max-width:900px){.actree{grid-template-columns:1fr}}
/* space between a top button row and the box under it (report pages, airport page, etc.) */
main>.row,main>.noprint>.row,main>.noprint.row{margin-bottom:12px}
main>.row+.card,main>.row+.grid,main>.row+.scroll,main>.views+.card,main>.views+.scroll{margin-top:4px}
/* remarks popup on hover (tap / focus on touch screens) */
.lbt td.rmk{position:relative;min-width:300px;white-space:nowrap;overflow:visible;cursor:help}
.lbt td.rmk .rprev{color:var(--ink);font-size:12.5px;margin-right:6px;display:inline-block;max-width:230px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.rtag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1;padding:3px 6px;margin-right:3px;border-radius:99px;background:var(--head);color:var(--mute);border:1px solid var(--line);vertical-align:1px}
.rtag.warn{color:var(--warn);border-color:var(--warn)}
.rmkpop .rpl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:2px}
.rmkpop{display:none;position:absolute;right:0;top:100%;z-index:20;width:min(420px,80vw);white-space:normal;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px 12px;font-size:12.5px;text-align:left}
.rmkpop div+div{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.lbt td.rmk:hover .rmkpop,.lbt td.rmk:focus .rmkpop,.lbt td.rmk:focus-within .rmkpop{display:block}
.lbt tbody tr:nth-last-child(-n+4) .rmkpop{top:auto;bottom:100%}

/* ---------- print formats (Safelog report tree) ---------- */
.printlayout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:start}
@media(max-width:900px){.printlayout{grid-template-columns:1fr}}
.ppick{position:sticky;top:12px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 110px)}.ppick input[type=search]{width:100%}
.ptree{overflow:auto;font-size:13px;min-height:0}
.pform h2{margin:2px 0 0}.pform h3{margin:18px 0 6px;font-size:15px}
.pchosen{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pgo{display:flex;align-items:center;gap:12px;margin-top:12px}.pgo .primary{min-height:44px;padding:0 22px;font-size:16px}.pgo-end{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.pchecks{display:flex;flex-wrap:wrap;gap:6px 18px}
.psec{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.psec>summary{cursor:pointer;font-weight:600;min-height:36px;display:flex;align-items:center;gap:8px;list-style:none}.psec>summary::-webkit-details-marker{display:none}.psec>summary::before{content:'▸';color:var(--mute);transition:transform .15s}.psec[open]>summary::before{transform:rotate(90deg)}
#pchange{display:none}
@media(max-width:900px){.ppick{display:none;position:static;max-height:none;order:0}.ppick.open{display:flex}.ppick .ptree{max-height:60vh}#pchange{display:inline-flex}.printlayout>form{order:1}.printlayout{display:flex;flex-direction:column}}
.ptree details{margin:2px 0 2px 6px}.ptree summary{cursor:pointer;font-weight:600;padding:2px 0}
.ptree a{display:block;padding:3px 8px;margin-left:10px;border-radius:6px;text-decoration:none;color:var(--ink)}.ptree a.on,.ptree a:hover{background:var(--head)}
.page.fmt{display:flex;flex-direction:column}
.page.fmt table{table-layout:fixed;flex:1}
.page.fmt th{background:#e6e6e6;font-size:7px;padding:1px 2px;line-height:1.1;font-weight:600;white-space:normal}
.page.fmt th.dk{background:#111;color:#fff}
.page.fmt td{font-size:7.5px;padding:1px 3px;height:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page.fmt td.rem{white-space:normal;font-size:6.8px;line-height:1.15}
.page.fmt tr.cn td{background:#f2f2f2;font-weight:700;text-align:center;font-size:7px}
.page.fmt tr.bft td{font-weight:600}
.page.fmt tr.tot td{border-top:1.5px solid #000;font-weight:600}.page.fmt tr.tot td.lbl{text-align:right}
.page.fmt tr.grand td{border-top:1px solid #000;font-weight:800}
.page.fmt .ph{min-height:14mm}.page.fmt .pfmt{font-size:7px;color:#666;text-align:right}
.page.fmt .pf{display:flex;justify-content:space-between;align-items:flex-end;font-size:7.5px;margin-top:2mm}.page.fmt .sig{line-height:1.5}.page.fmt .addr{margin-top:2mm;font-size:7px}.page.fmt .gen{font-size:6px;color:#555}
.page.fmt.green th{background:#cfe3c8}.page.fmt.green tbody tr:nth-child(even) td{background:#eef6eb}.page.fmt.green{background:#f7fbf5}
.page.fmt.hand td{font-family:'Caveat','Segoe Print','Bradley Hand',cursive;font-size:10px}
.page.fmt.nogrid td{border-left:0;border-right:0;border-top:0;border-bottom:1px solid #ccc}
.page.fmt.low td{font-size:6.6px;padding:0 3px}
.page.fmt.portrait{width:210mm;height:297mm}
.rep{background:#fff;color:#000;padding:10mm;max-width:297mm;margin:0 auto;font-family:Arial,Helvetica,sans-serif;font-size:11px}
.rep h1{font-size:18px;margin:0}.rep h2{font-size:13px;margin:14px 0 6px}.rep .rh{border-bottom:1px solid #999;margin-bottom:8px;padding-bottom:6px}
.rep table.rt{border-collapse:collapse;width:100%;display:table}.rep table.rt th,.rep table.rt td{border:1px solid #999;padding:2px 5px;color:#000;background:none;position:static;font-size:10px}.rep table.rt th{background:#eee}
.rep table.rt.wide td,.rep table.rt.wide th{font-size:8px;padding:1px 3px}
.rep .cover{height:180mm;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10mm;border:3px double #000;text-align:center}
.cover .cvt{font:700 40px 'Times New Roman',serif;letter-spacing:.15em}.cover .cvn{font:28px 'Times New Roman',serif}.cover .cva{font-size:13px}.cover .cvr{font-size:12px;color:#444}
.rep .detail{border-bottom:1px solid #999;padding:6px 0;break-inside:avoid}.rep .detail h3{font-size:12px;margin:0 0 4px}.rep .dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 10px;font-size:9.5px}.rep .dimg{max-height:60mm;margin:4px 4px 0 0}
@media print{.rep{padding:0;max-width:none}.pages.portrait .page{width:auto}}
@page portraitpg{size:A4 portrait;margin:0}.page.fmt.portrait{page:portraitpg}
.page.fmt .plogo{height:12mm;display:block;margin-bottom:1mm}.page.fmt .sigrow{display:inline-flex;align-items:flex-end;gap:2mm;max-width:100%;margin-top:2mm}.page.fmt .sigline{position:relative;display:inline-block;flex:none;width:58mm;height:9mm;border-bottom:.5pt solid #000}.page.fmt .sigline .psig{position:absolute;left:3mm;bottom:.3mm;max-width:52mm;max-height:9.5mm;width:auto;height:auto;mix-blend-mode:multiply}
.netstat{font-size:11.5px;color:var(--mute);padding:8px 6px 0}.netstat.on{color:var(--ok)}.netstat.off{color:var(--bad)}.netstat.warn{color:var(--warn)}
.warn-card{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--card))}
@media(max-width:900px){.netstat{order:3;padding:0;flex-basis:100%}}
@supports(padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}nav{padding-top:max(8px,env(safe-area-inset-top))}}

/* logbook row actions: one clear Edit button + a "⋯" menu with labelled actions */
.rbtn{display:inline-flex;align-items:center;justify-content:center;min-height:30px;min-width:34px;padding:4px 10px;margin:0 2px;border:1px solid var(--line);border-radius:8px;background:var(--head);color:inherit;font-size:13px;font-weight:600;cursor:pointer}
.rbtn:hover,.rbtn:focus-visible{border-color:var(--accent,#6b8cff);outline:none}
.rbtn.more{font-size:18px;line-height:1;padding:2px 8px;letter-spacing:1px}
.lbt td.acts{padding:4px 6px}
.rowmenu{position:fixed;z-index:1000;min-width:240px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:6px}
.rowmenu .rmhead{font-size:12px;opacity:.7;padding:6px 10px 8px}
.rowmenu button,.rowmenu a{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:none;color:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.rowmenu button span,.rowmenu a span{width:22px;text-align:center;font-family:system-ui,sans-serif;color:var(--mute);font-variant-emoji:text}
.rowmenu button:hover,.rowmenu a:hover,.rowmenu button:focus-visible,.rowmenu a:focus-visible{background:var(--head);outline:none}
.rowmenu [data-m=trash]{color:var(--bad)}
.rowmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.actree>*{min-width:0}
.treebox select,.treebox input{max-width:100%}
/* touch screens (iPhone / iPad): every button at least a comfortable finger size */
@media(pointer:coarse){
  button,.btn{min-height:40px}
  button.mini,.chip,.rbtn{min-height:36px}
  .rbtn{min-width:44px}
}
/* logbook toolbar */
.lbbar{padding:10px 12px}
.lbrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lbrow.sub{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--mute);gap:6px 16px}
.lbrow.sub input[type=number]{width:72px}
.pager{display:inline-flex;align-items:center;gap:4px}
.pager button{min-width:38px;padding:6px 8px}
.pgl{padding:0 6px;white-space:nowrap}
nav .brand span{white-space:nowrap}
nav .newbtn{white-space:nowrap}
@media(max-width:600px){
  .views{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .views::-webkit-scrollbar{display:none}
  .views .btn{flex:none;white-space:nowrap}
  .lbrow .grow{display:none}
  .pager{width:100%;justify-content:space-between}
  .pager button{min-width:48px}
  main>.row>h1.grow{flex-basis:100%}
}
@media(max-width:900px){.pagenew{display:none}}
.lbt td.totl{white-space:nowrap}
nav details.navmore summary{cursor:pointer;padding:7px 10px;border-radius:7px;color:var(--mute);font-size:13px;font-weight:600;list-style:none}
nav details.navmore summary::-webkit-details-marker{display:none}
nav details.navmore summary{display:flex;align-items:center;justify-content:space-between}
nav details.navmore summary::after{content:'';width:12px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/12px 8px;transition:transform .15s}
nav details.navmore[open] summary::after{transform:rotate(180deg)}
nav details.navmore summary:hover{background:var(--head)}
nav details.navmore a{padding-left:24px;font-size:14px}
@media(max-width:900px){nav details.navmore{grid-column:1/-1}nav details.navmore[open]{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}nav details.navmore summary{grid-column:1/-1}nav details.navmore a{padding-left:10px}}
/* foldable column groups */
.gtog{background:none;border:0;padding:2px 4px;font:inherit;font-weight:700;color:inherit;cursor:pointer;min-height:0;border-radius:6px}
.gtog:hover{background:var(--line)}
.lbt th.coll{width:26px;min-width:26px;max-width:26px;padding:4px 0;vertical-align:top;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.lbt th.coll .gtog{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;font-size:11px}
.lbt th.coll .vlab{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;max-height:96px;overflow:hidden;text-overflow:ellipsis}
.lbt td.collc{width:26px;min-width:26px;max-width:26px;padding:0;background:var(--head);border-left:1px solid var(--line);border-right:1px solid var(--line)}
main label{max-width:100%}main label>input{max-width:100%}
@media(max-width:600px){.lbt .rbtn[data-a=edit]{display:none}}

/* one height for every box and button, so fields with a label above line up with the buttons next to them */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,button,.btn{min-height:36px;box-sizing:border-box}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;vertical-align:bottom}
button.mini,.chip{min-height:28px}
.row>label.inline,.lbrow>label.inline{min-height:36px}
.row>h1,.row>h2,.row>h3{margin-bottom:4px;align-self:center}
table input:not([type=checkbox]),table select,table button{min-height:0}
.lbt .rbtn{min-height:30px}
.gtog{min-height:0}
.worldbox{margin:10px 0}.worldbox label{font-size:13px;color:var(--ink)}.worldbox input{width:100%;max-width:520px;margin-top:4px}
.wres{margin-top:8px;max-height:260px;overflow:auto}.wres table{width:100%}.wres td{padding:4px 8px;font-size:13px}
/* dropdowns: our own chevron with room around it (the browser's one sat against the edge) */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
table select:not([multiple]):not([size]){padding-right:26px;background-position:right 8px center}
/* review fixes */
.dur{gap:6px}
.dur .link{font-size:11px;padding:2px 7px;min-width:52px;opacity:1;color:var(--mute)}
.dur .link.on{color:var(--accent)}
.dur .link:not(.on){color:var(--warn);border-color:var(--warn)}
td button+button,td .btn+button,td button+.btn,td button+a{margin-left:6px}
td a{vertical-align:middle}
.treebox{min-width:0}.treebox>*,.treebox label,.treebox select,.treelist{min-width:0;width:100%;box-sizing:border-box}
.row>button.mini,.row.tight>button.mini,.apbox>button.mini,.times button.mini{min-height:36px;min-width:36px}
main{padding-bottom:90px}
.dialog{padding-bottom:0}
td button,td .btn{vertical-align:middle}
/* summary cards under the logbook */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.scard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--row);display:flex;flex-direction:column;justify-content:center} /* centred in height when a row's cards share the tallest one's height */
.scard .sl{font-size:12px;color:var(--mute)}
.scard .sv{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.scard .sp{font-size:12px;color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums}
/* new flight button at the top of the side menu */
nav .newbtn{margin:0 6px 12px}
@media(max-width:900px){nav .newbtn{margin:0}}
.cnt{gap:6px}
.fgrid>label{justify-content:flex-end}.fgrid>label.inline{justify-content:flex-start;align-self:end;min-height:36px}
/* selected menu item: subtle, so it doesn't look like the New flight button */
nav a.on{background:var(--head);color:var(--accent);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
nav a.on:hover{background:var(--head)}
.pagenew{display:none}
/* filter forms laid out on a grid: equal widths, aligned rows */
.ffgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 12px;align-items:end}
.ffgrid input,.ffgrid select{width:100%}
.ffgrid .ffbtns{display:flex;gap:8px;grid-column:1/-1;justify-content:flex-start}
.fsum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.fsum::-webkit-details-marker{display:none}
.fsum::after{content:'';width:12px;height:8px;margin-left:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/12px 8px;transition:transform .15s}
details[open]>.fsum::after{transform:rotate(180deg)}
.scard .sl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* currency page */
.cuscol{display:none}body.curcust .cuscol{display:table-cell}
.card>table{width:100%}
td.curst{width:1%;white-space:nowrap;text-align:right;vertical-align:middle}
.pill.nodata{background:var(--head);color:var(--mute);border:1px dashed var(--line)}
.row>span:not(.grow):not(.seg):not(.chips),.row>.small,.row>.mute,.row>div.small{align-self:center}
/* phone: compact save bar (Save + Save-then-new + More), more summary cards per row, less clutter */
.svmore,#ff .savebar>.svmore{display:none}
.up::placeholder{text-transform:none}
@media(max-width:600px){
  .savebar{gap:8px}
  .savebar>button{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .savebar>.svmore,#ff .savebar>.svmore{display:inline-flex;flex:0 0 auto}
  .savebar:not(.more)>[data-next=new],.savebar:not(.more)>[data-next=ret],.savebar:not(.more)>#dup,.savebar:not(.more)>#del,.savebar:not(.more)>.grow{display:none}
  .savebar.more>button{flex:1 1 45%}
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .scard{padding:8px 10px}.scard .sv{font-size:17px}
  .card{padding:12px}
  .chips:has(>[data-l]){display:none}
}
.sml{display:none}
@media(max-width:600px){.lgl{display:none}.sml{display:inline}}
.row.tight.small{align-items:center}
/* disclosure buttons (Filter): word + chevron after it */
button.disc::after{content:'';width:12px;height:8px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/12px 8px;transition:transform .15s}
button.disc.open::after{transform:rotate(180deg)}
button.disc.open{border-color:var(--accent)}
.lbbar .jd{font-size:13px;color:var(--mute)}
.pgl input{width:64px;text-align:center;margin:0 4px}


.sectoggle{display:flex;align-items:center;gap:8px;width:100%}
.sectoggle::after{content:'';width:12px;height:8px;margin-left:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/12px 8px;transform:rotate(180deg);transition:transform .15s}
.fsec.collapsed .sectoggle::after{transform:none}
.gfold{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line);font-size:12px;line-height:1;color:var(--mute);margin-left:4px}
.sectoggle{min-height:0;justify-content:flex-start}

@media(max-width:900px){.lbbar .jdl,.lbbar .pgw{display:none}.lbbar .jd input{width:140px}.lbbar .lbrow{gap:6px}.pager button{min-width:36px;padding:6px}}

@media(max-width:600px){.netstat.on .nt{display:none}.netstat.on{flex-basis:auto;order:3}}
.treelist{max-height:none}
.pickhdr{padding:6px 10px 2px;border-top:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.04em}.regdrop{position:absolute;left:0;right:0;top:100%;z-index:30;max-width:520px}
/* list toolbars (People): one row of filters + compact A–Z strip + a selection bar that appears when rows are ticked */
.toolbar{padding:10px 12px}
.tbrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tbsearch{flex:1 1 220px;min-width:160px}
.azbar{display:flex;gap:4px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.azbar::-webkit-scrollbar{display:none}
.azbar .chip{min-height:28px;min-width:28px;padding:2px 6px;border-radius:6px;background:none;color:var(--mute);font-weight:600}
.azbar .chip:hover{background:var(--head);color:var(--ink)}
.azbar .chip.on{background:var(--accent);color:var(--accent-ink)}
.dmenu{position:relative}
.dmenu>summary{list-style:none;cursor:pointer}
.dmenu>summary::-webkit-details-marker{display:none}
.dmenu .dpanel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:12px;display:grid;gap:10px;min-width:220px}
.selbar{position:sticky;top:0;z-index:6;display:flex;gap:10px;align-items:center;margin:8px 0;padding:8px 12px;border:1px solid var(--accent);border-radius:10px;background:var(--card)}
.wt{display:block;font-size:13px;color:var(--ink)}.wt .mute{font-size:12px}
@media(max-width:600px){.tbrow>label.inline{flex:1 1 45%}.tbrow select{flex:1}.chips:has(>[data-l]){display:flex}}
/* logbook filter panel: grouped, aligned */
.fpanel{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:14px}
.fgroup{display:grid;gap:8px}
.fgl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.rngchips{display:flex;flex-wrap:wrap;gap:6px}
.chrow{display:flex;gap:8px;align-items:center}.chrow select{flex:1;min-width:0}.chrow label.inline{white-space:nowrap}
.fbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--line)}
/* row menu: every item left-aligned, icons same size and colour */
.rowmenu button{justify-content:flex-start;font:inherit;font-size:14px}
.rowmenu button span,.rowmenu a span{display:inline-flex;align-items:center;justify-content:center;width:22px;flex:none;color:var(--mute)}
.rowmenu [data-m=trash] span{color:var(--bad)}

/* page search: magnifying glass next to the title, box in a popup */
.pagesearch{position:relative;display:inline-flex;align-items:center;vertical-align:middle;margin-left:8px}
h1+.pagesearch{align-self:center}
.psbtn{min-height:34px;width:34px;padding:0;border-radius:50%;color:var(--mute)}
.psbtn:hover{color:var(--ink)}
.pagesearch.active .psbtn{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.pspop{position:absolute;left:0;top:calc(100% + 6px);z-index:25;width:min(340px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:10px;display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center}
.pspop input{width:100%}
/* the search button at the right end of a page's header: its box opens leftwards, never past the screen's edge */
@media(min-width:901px){.uhps .pspop,.uhead .pagesearch .pspop{left:auto;right:0}}
.pspop .psx{min-height:36px;width:36px;padding:0;color:var(--mute)}
.pspop .pscnt{grid-column:1/-1}.pspop .pscnt:empty{display:none}
@media(max-width:600px){.pspop{position:fixed;left:16px;right:16px;top:64px;width:auto}}
/* search in the menu / top bar */
.navsearch{display:flex;align-items:center;gap:8px;justify-content:flex-start;margin:0 6px 12px;color:var(--mute);background:none}
.navsearch:hover{color:var(--ink);background:var(--head)}
.navsearch.hidden{display:none}
h1 .pagesearch{font-size:14px;font-weight:400}
@media(max-width:900px){.navsearch{order:2;margin:0;width:38px;min-height:38px;padding:0;justify-content:center;border-radius:50%}.navsearch .nsl{display:none}.pagesearch .pspop{position:fixed;left:16px;right:16px;top:64px;width:auto}}
@media(min-width:901px){.navsearch{display:none!important}}
/* ===== New flight page, redesigned ===== */
.flightform .ffhead{display:grid;gap:4px}
.flightform .ffrow{align-items:center;flex-wrap:nowrap}
.flightform .ffrow h1{margin:0}
.ffsum{font-size:13px;color:var(--ink);padding:2px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favseg button{min-height:30px;font-size:12px;padding:4px 10px}
/* numbered steps */
.fsec.step>h2{display:flex;align-items:center;gap:10px}
.stepn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:0;flex:none}
.xhead{display:flex;align-items:center;gap:10px;margin:22px 2px 8px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.xhead .stepn{background:var(--head);color:var(--mute);border:1px solid var(--line)}
.xhead .small{text-transform:none;letter-spacing:0;font-weight:400}
/* departure | swap | arrival side by side */
.pair{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);border-bottom:1px solid var(--line)}
.pair>.frow{grid-template-columns:1fr;border-bottom:0}
.pair>.frow>.flab{text-align:left;background:none;padding:10px 12px 0;font-size:12px;color:var(--mute)}
.pair>.frow>.fval{padding:6px 12px 12px}
.pair .apbox input{width:120px;font-size:16px;font-weight:600;letter-spacing:.03em}
.swapcol{display:flex;align-items:center;justify-content:center;padding-top:28px}
.swapcol button{border-radius:50%;width:36px;min-width:36px;padding:0;font-size:16px}
/* bigger, clearer time boxes */
.flightform .times input{width:84px;font-size:16px;text-align:center;font-variant-numeric:tabular-nums}
.flightform .times .tz{align-self:end}
.flightform .calc{margin:0;border-radius:0 0 10px 10px}
/* quick-pick buttons: compact */
.flightform .fval .chips{margin-top:8px;gap:6px}
.flightform .fval .chip{font-size:12.5px}
@media(max-width:900px){
  .favseg{display:none}
}
@media(max-width:600px){
  /* one swipeable line of quick buttons on phones */
  .flightform .fval .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .flightform .fval .chips::-webkit-scrollbar{display:none}
  .flightform .fval .chip{flex:none}
  .pair{grid-template-columns:1fr}
  .swapcol{padding:0 12px 6px;justify-content:flex-start}
  .pair .apbox input{width:110px}
  .flightform .times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .flightform .times input{width:100%}
  .flightform .times .tz{grid-column:1/-1;width:100%}
  .ffsum{font-size:12px}
}

/* operator filter: one compact swipeable line */
.flightform .fval .opchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent)}
.flightform .fval .opchips::-webkit-scrollbar{display:none}
.flightform .opchips .chip{flex:none;background:none;border:1px solid var(--line);color:var(--mute)}
.flightform .opchips .chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* suggestions on empty boxes appear when that line is hovered or being edited */
.sugg.quiet{visibility:hidden}
.frow:hover .sugg.quiet,.frow:focus-within .sugg.quiet{visibility:visible}
/* the times row reads top-down like departure / arrival */
.pair+.frow{grid-template-columns:1fr}
.pair+.frow>.flab{text-align:left;background:none;padding:10px 12px 0;font-size:12px;color:var(--mute)}
.pair+.frow>.fval{padding:6px 12px 12px}
/* counters: [value] ✕ suggestion  + | 1 2 3 4 5 6 — quick numbers are secondary */
.cnt{gap:4px}
.cnt .mini.num{border-color:transparent;background:none;color:var(--mute);min-width:30px;padding:2px 4px}
.cnt .mini.num:hover{background:var(--head);color:var(--ink)}
.cnt .mini[data-inc]{margin-left:6px}
.cnt .mini[data-eq]{margin-left:6px}
/* worldwide lookup: one slim line */
.worldbox{padding:8px 12px;margin:8px 0}
.worldbox>label{flex-direction:row;align-items:center;gap:12px;position:relative}
.worldbox .wt{display:inline;white-space:nowrap;font-size:13px;font-weight:600;color:var(--mute)}
.worldbox input{flex:1;max-width:380px;margin:0}
.worldbox .wres:empty{display:none}
table .btn{min-height:0}table .btn.small,table button.small{font-size:12px;padding:5px 10px}
/* Aircraft / Airports / People: same page layout */
.phead{align-items:center;margin-bottom:6px}
.phead h1{margin:0}
.ptabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 12px;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs a{padding:9px 14px;color:var(--mute);text-decoration:none;font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ptabs a:hover{color:var(--ink)}
.ptabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.ptabs .tc{font-size:12px;color:var(--mute);font-weight:500;margin-left:4px}
.toolbar{margin:0 0 10px}
.toolbar .worldbox{border:0;padding:0;margin:10px 0 0;background:none;box-shadow:none}
.toolbar>.worldbox:first-child{margin-top:0}
.toolbar .tbrow+.worldbox{padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:600px){.phead{gap:6px}.phead h1{flex-basis:100%}.phead .btn,.phead button{font-size:13px;padding:6px 10px}}
.toolbar .worldbox{border-radius:0}
.tbrow select{max-width:220px}
.tbrow>label.inline{min-width:0}
@media(max-width:600px){
  .tbrow>label.inline{flex:1 1 100%}
  .tbrow>label.inline select{flex:1;min-width:0;max-width:none}
  .tbrow>label.inline:has(input[type=checkbox]){flex:1 1 auto}
  .toolbar .worldbox>label{flex-wrap:wrap}.toolbar .worldbox input{flex:1 1 100%;max-width:none}
}
.dmenu .dpanel{min-width:280px}.dmenu .dpanel form{flex-wrap:nowrap}
.dmenu:not([open]) .dpanel{display:none}
/* sections no longer clip their dropdowns; keep the rounded header */
.fsec>h2{border-radius:9px 9px 0 0}
.fsec.collapsed>h2{border-radius:9px}
.fsec>.calc:last-child,.fsec>*:last-child{border-bottom-left-radius:9px;border-bottom-right-radius:9px}
/* picker (…) window: compact header, room for the list */
.apdrop{max-height:min(420px,60vh);z-index:40}
.pickhead{gap:6px}
.pickhead .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px}
.pickhead .chips::-webkit-scrollbar{display:none}
.pickhead .chip,.pickhead button.chip{min-height:26px!important;min-width:24px;padding:2px 5px;font-size:11.5px;border-radius:6px;background:none;color:var(--mute);flex:none}
.pickhead .chip.on{background:var(--accent);color:var(--accent-ink)}
.pickhead select{min-height:30px;font-size:12.5px;padding-top:2px;padding-bottom:2px}
.pickhead label.inline{font-size:12.5px}
/* phone / iPad top bar: the menu panel must not be clipped by the bar (it was invisible on Android) */
@media(max-width:900px){nav{overflow:visible}nav .navlinks{z-index:30}}
/* picker letters: small, wrap on two short lines instead of scrolling */
.pickhead .chips{flex-wrap:wrap;overflow:visible}
@media(max-width:900px){nav details.navmore[open]::details-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}}
/* menu: the current page is a quiet highlight, no coloured bar */
nav a.on{background:var(--head);color:var(--ink);font-weight:600;box-shadow:none}
nav a.on:hover{background:var(--head)}
.cnt .nums{display:inline-flex;gap:2px;align-items:center}
@media(max-width:600px){.cnt{flex-wrap:wrap}.cnt .nums{flex-basis:100%;gap:4px}.cnt .mini.num{min-width:34px}}
/* picker window: search box first */
.pksearch{width:100%;font-size:16px}
.pickhead .azchips{margin:0}
.pkopts{gap:8px}
.pickhead .azchips{flex-wrap:wrap!important;overflow:visible!important}
/* "…" picker on phones: a full-screen panel (search on top, whole list, Close) — nothing hidden behind the save bar or keyboard */
.pktop{display:none}
@media(max-width:600px){
  .apdrop.pkwin:not(.hidden){position:fixed;inset:0;width:auto;max-height:none;height:100dvh;z-index:200;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}
  .apdrop.pkwin .pickhead{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}
  .apdrop.pkwin .pktop{display:flex;align-items:center;justify-content:space-between;font-size:16px}
  .apdrop.pkwin .apopt{padding:12px 14px;font-size:15px;white-space:normal;border-bottom:1px solid var(--line)}
}
.flightform .pickhead .chips{-webkit-mask-image:none;mask-image:none}
/* top bar icon buttons (menu, search): same size, crisp line icons */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.iconbtn:hover{background:var(--head)}
@media(max-width:900px){nav .navbtn{display:inline-flex}nav .navsearch{width:40px;min-height:40px;border-radius:10px}}
@media(min-width:901px){nav .navbtn{display:none}}
/* logbook: tapped row is highlighted; double-click / double-tap opens it */
.lbt tbody tr.picked td{background:color-mix(in srgb,var(--accent) 14%,var(--card))}
.lbt tbody tr{cursor:default}

nav .navbtn.iconbtn{padding:0;font-size:inherit}
/* logbook toolbar */
.jdbtn{display:none}
.pager{display:inline-flex;align-items:stretch;gap:0}
.pager>button{border-radius:0;margin-left:-1px;min-width:40px}
.pager>button:first-child{border-radius:9px 0 0 9px;margin-left:0}
.pager>button:last-child{border-radius:0 9px 9px 0}
.pager .pgl{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-left:-1px;background:var(--card);font-size:14px}
.pager .pgl input{width:56px;min-height:28px;padding:2px 4px;text-align:center}
.pager button:disabled{opacity:.35}
@media(max-width:900px){
  .lbbar .jd{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
  .lbbar .jdbtn{display:inline-flex;margin-left:auto}
  .lbbar .lbrow{gap:8px}
  .lbbar .lbsz{width:auto}
  .lbbar .pager{order:9;width:100%}
  .lbbar .pager>button{flex:1}
  .lbbar .pager .pgl{flex:2;justify-content:center}
}
.lbbar{position:relative}
/* phone header: the title can shrink, never overlaps the buttons */
nav .brand{min-width:0;gap:10px}
nav .brand .bt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){nav .brand .bmy{display:none}nav{gap:8px}nav .brand{flex:1 1 auto}}
@media(max-width:360px){nav .brand .bt{font-size:15px}}
/* table zoom control */
.zoomctl{display:inline-flex}
.zoomctl button{border-radius:0;margin-left:-1px;min-width:40px;padding:6px 8px;font-variant-numeric:tabular-nums}
.zoomctl button:first-child{border-radius:9px 0 0 9px;margin-left:0}
.zoomctl button:last-child{border-radius:0 9px 9px 0}
.zoomctl #lbzf{min-width:58px;font-size:13px}
.lbbar .zoomctl{order:0}
@media(max-width:900px){.lbbar .zoomctl{margin-left:0}}
/* foldable steps */
.fsec.step>h2{padding:0}
.fsec.step .steptog{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;min-height:40px;text-align:left;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.fsec.step.folded>:not(h2){display:none!important}
.fsec.step.folded .sectoggle::after{transform:none}
.fsec.step.folded>h2{border-radius:9px}
.stepsum{display:none;margin-left:6px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.fsec.step.folded .stepsum{display:block}
/* flight time: box ✕ auto, equal columns; suggestions only while you work on that line */
.sugg.quiet{display:none!important;visibility:visible}
.frow:hover .sugg.quiet,.frow:focus-within .sugg.quiet{display:inline-flex!important}
.dur{flex-wrap:nowrap}
.dur .link{min-width:0;padding:2px 6px;border:0;background:none;font-size:11px;text-decoration:underline dotted;text-underline-offset:3px}
.dur .link.on{color:var(--mute)}
.dur .link:not(.on){color:var(--warn);text-decoration:none;font-weight:600}
.fval>.row.tight:has(>.tlab>.dur){display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:8px 22px;align-items:end}
.fval>.row.tight:has(>.tlab>.dur)>.tlab{min-width:0}
@media(max-width:600px){.fval>.row.tight:has(>.tlab>.dur){grid-template-columns:1fr}}
.ssplit{display:flex;gap:10px;font-size:12px;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums}
.ssplit span{background:var(--head);border-radius:6px;padding:1px 6px}
/* side menu with icons; slim version (icons only) via the toggle at the top */
nav a{display:flex;align-items:center;gap:10px}
nav .ni{flex:none;opacity:.85}
nav .navmini-t{display:none}
@media(min-width:901px){
  nav .navmini-t{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;padding:0;border:0;background:none;color:var(--mute);border-radius:8px}
  nav .navmini-t:hover{background:var(--head);color:var(--ink)}
  nav .brand{justify-content:flex-start}
  nav{transition:width .15s}
  body.navmini nav{width:64px;padding:14px 8px}
  body.navmini nav .nl,body.navmini nav .bt,body.navmini nav .netstat .nt,body.navmini nav details.navmore summary{font-size:0}
  body.navmini nav .nl,body.navmini nav .bt{display:none}
  body.navmini nav .brand{justify-content:center;padding:4px 0 14px}
  body.navmini nav a{justify-content:center;padding:9px 0}
  body.navmini nav .newbtn{margin:0 0 12px;padding:6px 0;font-size:20px}
  body.navmini nav details.navmore summary{justify-content:center;padding:7px 0}
  body.navmini nav details.navmore summary::after{margin:0}
  body.navmini nav details.navmore a{padding-left:0}
  body.navmini nav .netstat{text-align:center;padding:8px 0 0}
}
.ssplit{display:grid;gap:1px;margin:4px 0 2px;font-size:12px}
.ssplit>div{display:flex;justify-content:space-between;gap:8px;background:none;padding:0}
.ssplit span{background:none;padding:0;color:var(--mute)}
.ssplit b{font-weight:600;font-variant-numeric:tabular-nums}
/* floating new-flight button (appears when the regular one scrolls out of view) */
.fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:9;width:52px;height:52px;min-width:52px;min-height:52px;border-radius:50%;padding:0;border:0;background:var(--accent);color:var(--accent-ink);font-size:28px;font-weight:400;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .15s,transform .15s}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:var(--accent);filter:brightness(1.1)}
body:has(#modal:not(.hidden)) .fab{display:none}
@media print{.fab{display:none}}
/* phone / iPad top bar: title + buttons keep their size; the status uses only the space left */
@media(max-width:900px){
  nav .brand{flex:0 1 auto;min-width:0}
  nav .netstat,nav .netstat.on{order:3;flex:1 1 0;min-width:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
  nav .newbtn,nav .navsearch,nav .navbtn{flex:none}
}
/* installed app: keep everything below the iPad / iPhone status bar and clear of rounded corners */
@media(display-mode:standalone){
  body{padding-top:env(safe-area-inset-top)}
  nav{top:env(safe-area-inset-top)}
  @media(min-width:901px){nav{height:calc(100vh - env(safe-area-inset-top))}}
  .modal{padding-top:max(30px,env(safe-area-inset-top))}
  @media(max-width:900px){.modal{padding-top:env(safe-area-inset-top)}}
  .fab{bottom:max(18px,calc(env(safe-area-inset-bottom) + 8px))}
}
@media(display-mode:standalone){nav{padding-top:8px}}
@media(display-mode:standalone) and (min-width:901px){nav{padding-top:14px}}
/* refresh button */
.refreshbtn{flex:none}
.refreshbtn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:901px){nav .refreshbtn{display:flex;width:auto;height:auto;min-height:36px;margin:0 6px 12px;padding:6px 10px;gap:8px;justify-content:flex-start;border-radius:8px;background:none;color:var(--mute)}nav .refreshbtn:hover{background:var(--head);color:var(--ink)}body.navmini nav .refreshbtn{justify-content:center;margin:0 0 12px}body.navmini nav .refreshbtn .nsl{display:none}}
@media(max-width:900px){nav .refreshbtn{order:2}nav .refreshbtn .nsl{display:none}}
/* installed app on iPad / iPhone: the status bar is see-through over the app's own colour; content always starts below it */
@media(display-mode:standalone){
  html{background:var(--bg)}
  body{padding-top:env(safe-area-inset-top)}
  body::before{content:'';position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top);background:var(--bg);z-index:100}
  @media(max-width:900px){body::before{background:var(--card)}}
}
/* iPadOS / iOS blur the area just under the status bar in home-screen apps: start the app clearly below it (iOS only — Android draws its own status bar) */
@supports(-webkit-touch-callout:none){@media(display-mode:standalone){
  body{padding-top:calc(max(env(safe-area-inset-top), 20px) + 14px)}
  body::before{height:calc(max(env(safe-area-inset-top), 20px) + 14px)}
  nav{top:calc(max(env(safe-area-inset-top), 20px) + 14px)}
  @media(min-width:901px){nav{height:calc(100vh - max(env(safe-area-inset-top), 20px) - 14px)}}
  .modal{padding-top:calc(max(env(safe-area-inset-top), 20px) + 18px)}
  /* the form scrolls under this strip, never visibly above its sticky header */
  .modal::before{content:'';position:fixed;left:0;right:0;top:0;height:calc(max(env(safe-area-inset-top), 20px) + 18px);background:var(--bg);z-index:6;pointer-events:none}
  @media(max-width:900px){.modal::before{background:var(--card)}}
}}

/* top bar: search lives next to each page title (one magnifier only) */
nav .navsearch{display:none!important}
.netstat{cursor:default}.netstat .ns{display:none}
@media(max-width:600px){
  nav .netstat .nt{display:none}
  nav .netstat .ns{display:inline;font-size:12px}
  nav .netstat{cursor:pointer;flex:0 1 auto;font-size:14px}
  /* phone logbook toolbar: Filter · Columns · date · rows on one line, pager below; pinch the table to zoom */
  .lbbar .zoomctl{display:none}
  .lbbar .jdbtn{margin-left:auto}
}

/* phone / iPad logbook toolbar: every control 36px high, same corners; symmetric pager */
@media(max-width:900px){
  .lbbar .jdbtn{width:40px;height:36px;min-height:36px;border-radius:7px}
  .lbbar .pager{height:36px}
  .lbbar .pager>button{flex:0 0 46px;height:36px;min-height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
  .lbbar .pager .pgl{flex:1;justify-content:center;padding:0 8px}
  .lbbar .pager .pgl input{width:52px;min-height:28px;height:28px;border:0;background:var(--head);border-radius:6px;font-weight:600}
}
.pager>button svg{display:block}
.pager .pgl{margin-left:0}
.pager .pgl input.jpg{height:26px;min-height:0;max-height:26px;align-self:center;padding:0 4px;border:0;background:var(--head);border-radius:6px;font-weight:600}
/* phone / iPad top bar: ☰ Logbook ………… ● ⟳ [+ New flight] — every control 36px, same corners */
@media(max-width:900px){
  nav .navbtn{order:-1}
  nav .brand{order:0}
  nav .netstat,nav .netstat.on{order:2;flex:0 1 auto;margin-left:auto;text-align:right}
  nav .refreshbtn{order:3}
  nav .newbtn{order:4}
  nav .navbtn.iconbtn,nav .refreshbtn.iconbtn{width:36px;height:36px;min-height:36px;border-radius:7px}
  nav .newbtn{height:36px;min-height:36px;border-radius:7px}
  .pagesearch>button,h1 .psbtn{width:34px;height:34px;min-height:34px;border-radius:7px}
}
nav .navbtn.iconbtn.iconbtn{width:36px;min-width:36px}
/* permanent "not saved yet" bar (changes waiting on this device) */
#pendbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#f59e0b;color:#1f1300;font-size:14px;box-shadow:0 -2px 10px rgba(0,0,0,.3)}
#pendbar .pbt{flex:1;min-width:0}
#pendbar button{flex:none;background:#1f1300;color:#fff;border-color:#1f1300;min-height:34px}
body.haspend{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body.haspend .fab{bottom:calc(74px + env(safe-area-inset-bottom))}
@media(min-width:901px){#pendbar{left:var(--navw,200px)}}
@media(max-width:600px){#pendbar .pbs{display:none}}
body:has(#modal:not(.hidden)) #pendbar{display:none}
body.haspend #toast{bottom:calc(76px + env(safe-area-inset-bottom))}
@media(max-width:600px){#pendbar .pbl{display:none}}
body.haspend #toast{z-index:95}
/* permanent status footer (replaces the status in the top bar / side menu) */
nav .netstat{display:none!important}
#pendbar{padding:7px 16px calc(7px + env(safe-area-inset-bottom));font-size:13px;gap:8px;min-height:40px;box-sizing:border-box}
#pendbar .pbt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pendbar.ok{background:var(--card);color:var(--mute);border-top:1px solid var(--line);box-shadow:none}
#pendbar.ok svg,#pendbar.ok b{color:var(--ok)}
#pendbar.pbtap{cursor:pointer}
.pqlist{display:flex;flex-direction:column;gap:8px}.pqrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}.pqrow s{opacity:.6}.pqh{display:flex;align-items:center;gap:8px}
#pendbar .pbclock{flex:none;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}#pendbar.ok .pbclock{color:var(--ink)}
#pendbar.off{background:#7f1d1d;color:#fff}
#pendbar.warn{background:#f59e0b;color:#1f1300;font-size:14px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
#pendbar .btn.small{background:#1f1300;color:#fff;border-color:#1f1300;min-height:34px;display:inline-flex;align-items:center}
body.hasfoot{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
body.hasfoot.haspend{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body.hasfoot .fab{bottom:calc(54px + env(safe-area-inset-bottom))}
body.hasfoot.haspend .fab{bottom:calc(74px + env(safe-area-inset-bottom))}
body.hasfoot #toast{bottom:calc(54px + env(safe-area-inset-bottom));z-index:95}
body.hasfoot.haspend #toast{bottom:calc(76px + env(safe-area-inset-bottom))}
@media(max-width:600px){#pendbar.warn .pbs{display:none}}
@media print{#pendbar{display:none}}
@media(max-width:600px){#pendbar.ok .pbs,#pendbar.off .pbs{display:inline}}
@media(max-width:900px){nav .refreshbtn{margin-left:auto}}
/* printed reports are white paper: light zebra rows, no page-search button in the report title */
.rep tbody tr:nth-child(even){background:#f4f4f4}
.rep .pagesearch,.rep .psbtn{display:none!important}
.rep table.rt.swa td{text-align:left;white-space:normal;vertical-align:top}
.rep table.rt.swa td:first-child{width:34%}
.rep table.rt.swa .small{font-size:9.5px;color:#333}
nav a.bt{color:inherit;text-decoration:none;cursor:pointer}nav a.bt:hover{text-decoration:none}
/* phone page headers (phoneHeads): title on its own line, then actions on one line aligned right */
@media(max-width:600px){
  main .phm{flex-wrap:wrap;align-items:center;gap:8px}
  main .phm>h1{flex:1 1 100%;margin-bottom:2px}
  main .phm>*:not(h1){flex:none}
  main .phm>h1+*{margin-left:auto}
  .pmore .dpanel{right:0;left:auto;min-width:220px;gap:6px}
  .pmore .dpanel .pmi{width:100%;justify-content:flex-start;text-align:left}
  /* long grey subtitles go under the title; the search button stays next to the title */
  main h1>.h1sub{display:block;margin-top:2px}
}
/* Totals toolbar: labelled selects in one card; on phones each control takes a full line, label + select aligned */
.ttools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
@media(max-width:600px){.ttools>label.inline{flex:1 1 100%;display:flex;align-items:center;gap:8px}.ttools>label.inline>select{flex:1;min-width:0}}
/* calendar toolbar */
.caltools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.calnav{display:flex;align-items:center;gap:8px;flex:1 1 auto}
.calnav .caltitle{flex:1;text-align:center;white-space:nowrap}
.calnav .iconbtn{width:36px;height:36px;min-height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:600px){.calseg{display:flex;width:100%}.calseg>.btn{flex:1;text-align:center;justify-content:center}.calnav{width:100%}}
.curtools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* checkride readiness: on phones each requirement is a stacked block (nothing cut off) */
.cks{display:none}
@media(max-width:600px){
  table.ckr thead{display:none}
  table.ckr tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line)}
  table.ckr td{display:block;border:0;padding:0;white-space:normal}
  table.ckr td.ckl{flex:1 1 100%;font-weight:600}
  table.ckr td.n{text-align:left}
  table.ckr td.small{flex:1 1 100%}
  .cks{display:inline;color:var(--mute)}
}
.tsd>summary{list-style:none;display:inline-flex;margin-bottom:8px}.tsd>summary::-webkit-details-marker{display:none}
@media(max-width:600px){
  table.ckr td.n:empty{display:none}
  /* header with no main (blue) action: "More" stays on the title line */
  main .phm:not(:has(> :nth-child(3)))>h1{flex:1 1 auto;min-width:0}
}
.flightform .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.flightform .duo>label{display:grid;gap:4px;min-width:0}.flightform .duo select{width:100%;min-width:0}
/* roster import preview */
.rlist{display:flex;flex-direction:column;gap:6px}
.rrow{border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.rrow.mute{opacity:.55}
.rrow .small{flex-basis:100%}
/* flights changed on two devices */
.cfd{display:flex;flex-direction:column;gap:6px}
.cfr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.cfr .cfl1{grid-column:1/-1;font-weight:600}
.card.gdwarn{border-color:var(--warn)}
.gdsteps{padding-left:22px;line-height:1.5}
.gdsteps li{margin-bottom:6px}
/* flight-number lookup */
.fncard{margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.fnimg{width:100%;max-height:140px;object-fit:cover;border-radius:8px;margin-bottom:6px}
.warnc{color:var(--warn)}
.fnrow{display:inline-flex;gap:8px;align-items:stretch;max-width:100%}
.fnrow #fnlook{white-space:nowrap}
/* flight cards (Logbook → Cards) and View flight */
.fcards{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.fcard.sched{border-style:dashed}
.fcard.big{cursor:default;margin-bottom:12px}
.fch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.fcm{border:0;background:transparent;color:var(--mute);font-size:20px;line-height:1;padding:2px 6px;min-height:0;cursor:pointer}
.fcr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:8px 0 6px}
.fca .fcc{font-size:26px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.fca.r{text-align:right}.fca.r .fcc{justify-content:flex-end}
.fct,.fcn{font-size:13px;color:var(--mute)}
.fcmid{text-align:center;min-width:90px}
.fcdur{font-weight:700;font-size:15px}
.fcline{position:relative;height:16px;color:var(--accent);display:flex;justify-content:center}
.fcline::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--line)}
.fcline svg{position:relative;background:var(--card);transform:rotate(90deg);padding:0 2px}
.fctags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ftag{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink);white-space:nowrap}
.fcrmk{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 100%}
.vfmap{height:clamp(220px,32vh,340px);border-radius:10px;margin:6px 0 10px;overflow:hidden}
.ootimes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-top:6px}
.ootimes span{display:block;font-size:11px;color:var(--mute);letter-spacing:.5px}
.ootimes b{font-size:17px}
.kvs{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.kv span{display:block;font-size:12px;color:var(--mute)}
.pre{white-space:pre-wrap}
@media(max-width:420px){.fca .fcc{font-size:22px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .vfmap .osmtiles{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}}:root[data-theme="dark"] .vfmap .osmtiles{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}

.vfmap .leaflet-control-attribution{background:rgba(0,0,0,.45);color:#ddd}
.vfmap .leaflet-control-attribution a{color:#ddd}
/* period chips */
.pchips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.pchip{min-height:32px;padding:4px 12px;border-radius:999px;font-size:13px}
.pchip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #map .osmtiles{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}}:root[data-theme="dark"] #map .osmtiles{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}
/* currency bars */
.cbars{display:flex;flex-direction:column;gap:12px}
.cbt{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cbr{text-align:right;font-weight:600;white-space:nowrap}
.cbr span{display:block;font-weight:400;font-size:12px;color:var(--mute)}
.cbtrack{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.cbtrack div{height:100%;border-radius:99px;background:var(--ok)}
.cbar.warn .cbtrack div{background:var(--warn)}.cbar.bad .cbtrack div{background:var(--bad)}.cbar.nd .cbtrack div{background:var(--mute)}
.cbar.bad .cbr{color:var(--bad)}.cbar.warn .cbr{color:var(--warn)}
.cbd{margin-top:4px}
/* overview */
.ovhero{text-align:center}
.ovbig{font-size:46px;font-weight:800;letter-spacing:1px;line-height:1.1}
.rings{display:flex;justify-content:space-around;gap:8px;margin:14px 0 6px;flex-wrap:wrap}
.ring{text-align:center}
.ring .rt{fill:none;stroke:var(--line);stroke-width:7}
.ring .rv{fill:none;stroke:var(--ok);stroke-width:7;stroke-linecap:round}
.ring.warn .rv{stroke:var(--warn)}.ring.bad .rv{stroke:var(--bad)}
.ring .r1{font-size:14px;font-weight:700;fill:var(--ink)}.ring .r2{font-size:9px;fill:var(--mute)}
.ring .rl{font-size:12px;color:var(--mute);margin-top:2px}
.ovstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ovstats span{display:block;font-size:12px;color:var(--mute)}.ovstats b{font-size:18px}
a.pill{text-decoration:none}
/* phone bottom tabs (test) */
#btabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
#btabs a,#btabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--mute);text-decoration:none;background:none;border:0;min-height:50px;padding:0}
#btabs a.on{color:var(--accent)}
#btabs .tnew{color:var(--accent-ink)}#btabs .tnew svg{background:var(--accent);border-radius:14px;padding:9px;width:44px;height:44px;box-sizing:border-box}
body.hastabs #pendbar{bottom:calc(58px + env(safe-area-inset-bottom))}
body.hastabs{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
body.hastabs #fab{display:none!important}
body:has(#modal:not(.hidden)) #btabs{display:none}
/* audit + history */
.aucheck{display:flex;flex-direction:column;padding:4px 0}
.aurow{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;text-decoration:none;color:var(--mute);border-bottom:1px solid var(--line)}
.aurow:last-child{border-bottom:0}.aurow.has{color:var(--ink)}.aurow.has b{color:var(--warn)}.aurow b{color:var(--ok)}
.auitem{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.auitem:last-child{border-bottom:0}
.hrow{padding:8px 0;border-bottom:1px solid var(--line)}.hrow:last-child{border-bottom:0}.hrow .mini{margin-top:4px}
#vfhist summary{cursor:pointer}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #map.leaflet-container,:root:not([data-theme="light"]) .vfmap.leaflet-container{background:#1b222c}}:root[data-theme="dark"] #map.leaflet-container,:root[data-theme="dark"] .vfmap.leaflet-container{background:#1b222c}
.rahead{padding:8px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.rahead.bad b{color:var(--bad)}.rahead.warn b{color:var(--warn)}
/* logbook toolbar on phones: row 1 = Filter · Table/Cards · Columns · date, row 2 = pager · page size */
.lbbreak{display:none}
.colic{display:none}
@media(max-width:600px){
  .lbbar .lbrow{gap:8px}
  .lbbar #ftoggle{flex:1 1 auto;justify-content:center}
  .lbbar .lbv{flex:1 1 auto;display:flex}.lbbar .lbv button{flex:1}
  .lbbar #colbtn{flex:0 0 44px;padding:0;display:inline-flex;align-items:center;justify-content:center}.lbbar #colbtn.hidden{display:none}
  .lbbar #colbtn .lbl{display:none}.lbbar .colic{display:block}
  .lbbar .jdbtn{margin-left:0;flex:0 0 44px;justify-content:center}
  .lbbar .zoomctl{display:none}
  .lbbar .lbbreak{display:block;order:8;flex-basis:100%;height:0}
  .lbbar .pager{order:9;flex:1 1 0;width:auto;min-width:0}
  .lbbar .lbsz{order:10;flex:0 0 74px}
}
/* currency toolbar on phones: row 1 = base date (+ Today), row 2 = Customize · List/Bars, then the note */
@media(max-width:600px){
  .curtools>label.inline{flex:1 1 100%;display:flex;align-items:center;gap:8px}.curtools>label.inline input{flex:1}
  .curtools>a.btn{flex:0 0 auto}
  .curtools #curcust{flex:1 1 0}
  .curtools .seg{flex:1 1 0;display:flex}.curtools .seg button{flex:1}
}
@media(max-width:600px){
  .lbbar .pager>button{flex:1 1 0;min-width:0;padding:6px 2px}
  .lbbar .pager .pgl{flex:2 1 auto;min-width:0;padding:0 6px;gap:4px}
  .lbbar .pager .pgl input{width:46px}
  .lbbar .pager{overflow:hidden}
}
/* desktop side menu: no Refresh button (changes are sent automatically; phones keep it in the top bar); brand never cut off */
@media(min-width:901px){
  nav .refreshbtn{display:none!important}
  nav .brand{gap:6px;padding-left:6px;padding-right:6px}
  nav .brand .bt{font-size:15px;overflow:visible}
}
@media(min-width:901px){nav .brand .bmy{display:none}nav .brand .bt{font-size:16px;overflow:hidden;text-overflow:clip}}
/* aircraft photos (planespotters.net) */
.acph{display:inline-block;width:72px;height:40px;border-radius:6px;background:var(--line);overflow:hidden;vertical-align:middle}
.acph.none{background:transparent}
.acph img{width:100%;height:100%;object-fit:cover;display:block}
.acph.big{display:block;width:100%;height:auto;min-height:0;background:transparent;margin:6px 0 10px}
.acph.big img{width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:10px} /* the whole photo, in its own shape */
.accred{display:block;font-size:12px;color:var(--mute);margin-top:4px;text-decoration:none}
.acph.big:empty{display:none}
.acph.big:empty{display:block;height:0}
/* Refresh lives in the bottom status bar, on every page and device (the top-bar / side-menu copy is hidden) */
nav .refreshbtn{display:none!important}
#pendbar .pbref{margin-left:auto;flex:none;width:38px;height:38px;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:transparent;border:1px solid currentColor;color:inherit;opacity:.85}
#pendbar .pbref.spin svg{animation:spin .8s linear infinite}
#pendbar .pbt{min-width:0}
/* side menu: + New flight and the menu items share the same left/right edges and corner radius */
@media(min-width:901px){nav .newbtn{margin:0 0 12px;border-radius:9px;box-sizing:border-box;width:100%}nav a{border-radius:9px}body.navmini nav .newbtn{margin:0 0 12px}}
/* tablets / phones top bar: + New flight stays at the right edge */
@media(max-width:900px){nav .brand{flex:1 1 auto}}
/* tablet headers that didn't fit: title · More · main action on one line */
main .tabm{flex-wrap:nowrap;align-items:center;gap:8px}
main .tabm>h1{flex:1 1 auto;min-width:0}
main .tabm>*:not(h1){flex:none}
.tabm .pmore .dpanel{right:0;left:auto;min-width:220px;gap:6px}
.tabm .pmore .dpanel .pmi{width:100%;justify-content:flex-start;text-align:left}
.azbar{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px;overflow:visible}
.azbar .chip{justify-content:center;padding:2px 0}
/* top bar on tablets / phones: menu · title on the left, + New flight on the right */
@media(max-width:900px){nav .brand{flex:1 1 auto;justify-content:flex-start}nav .newbtn{margin-left:auto}}
/* People toolbar on tablets: search on its own row, then Role · Sort · Include inactive · Display on one row */
@media(min-width:601px) and (max-width:1100px){#pq.tbsearch{flex:1 1 100%;max-width:none}}
/* A–Z strip: one even row on tablets and computers (phones keep the swipeable strip) */
@media(min-width:601px){.azbar{grid-template-columns:repeat(27,minmax(0,1fr))}}
@media(max-width:600px){.azbar{display:flex;overflow-x:auto}.azbar .chip{padding:2px 6px}}
.acphb{display:block;width:100%;height:100%;padding:0;border:0;background:none;min-height:0;cursor:zoom-in;border-radius:inherit}
.acbig{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.acbig figure{margin:0;max-width:96vw;text-align:center}
.acbig img{width:100%;height:auto;max-height:86vh;object-fit:contain;border-radius:10px}
.acbig figcaption{color:#ddd;font-size:14px;margin-top:10px}.acbig figcaption a{color:#9ec1ff}
.acbx{position:fixed;top:calc(12px + env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:22px;border:1px solid #666;background:#222;color:#fff;padding:0;display:inline-flex;align-items:center;justify-content:center}
/* FDP calculator */
.fdpform{display:flex;flex-direction:column;gap:10px}
.fdpform label:not(.inline){display:flex;flex-direction:column;gap:4px}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.fgrid2{grid-template-columns:1fr}}
.fdpform details summary{cursor:pointer;font-weight:600;padding:4px 0}
.fdpbig{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line)}
.fdpbig b{font-size:24px}.fdpbig.ok b{color:var(--ok)}.fdpbig.warn b{color:var(--warn)}.fdpbig.bad b{color:var(--bad)}
.fdpnotes{padding-left:18px;margin:0}.fdpnotes li{margin-bottom:6px}
/* logbook toolbar on tablets (iPad upright and sideways): row 1 = view tools, row 2 = compact pager · go to date · page size */
@media(min-width:601px) and (max-width:1180px){
  .lbbar .lbrow{align-items:center;gap:8px}
  .lbbar .lbrow .grow{display:none}
  .lbbar .lbbreak{display:block;order:8;flex-basis:100%;height:0}
  .lbbar .pager{order:9;width:auto;flex:0 0 auto}
  .lbbar .pager>button{flex:none;min-width:44px}
  .lbbar .pager .pgl{flex:none;padding:0 12px}
  .lbbar .jd,.lbbar .jdbtn{order:10;margin-left:auto}
  .lbbar .lbsz{order:11;width:auto}
}
.lbbar.cardsv .zoomctl{display:none}
/* View flight: space between the title row and the first card */
.modal .fcard.big{margin-top:12px}
/* Flight lookup key box: Save always visible next to the field */
#adbkey{min-width:0;flex:1 1 160px}
.vfmap.leaflet-container .leaflet-control-attribution{background:rgba(0,0,0,.5);color:#ddd;font-size:10px}
.vfmap.leaflet-container .leaflet-control-attribution a{color:#ddd}
.kv2{display:flex;justify-content:space-between;padding:4px 0}
.wxl{display:flex;flex-direction:column;gap:2px;margin-top:6px}.wxl code{white-space:pre-wrap;word-break:break-word;font-size:12.5px}
.crewh{margin:8px 0}
#vflay summary{cursor:pointer}
/* bulk-selection tick boxes only in "Select several" mode */
table .selc{display:none}
body.selmode table .selc{display:table-cell}
/* Refresh in the status bar: same look as the app's other icon buttons */
#pendbar .pbref{background:var(--card);border:1px solid var(--line);color:var(--mute);opacity:1;border-radius:10px;width:40px;height:40px}
#pendbar .pbref:hover{color:var(--ink)}
#pendbar.warn .pbref{background:#1f1300;border-color:#1f1300;color:#fff}
#pendbar .pbref svg,#pendbar.ok .pbref svg,#pendbar.off .pbref svg{color:var(--mute)!important;stroke:currentColor}
#pendbar.warn .pbref svg{color:#fff!important}
/* changes kept on this device, waiting to be sent: blue (orange stays for what needs you: missing information, sign-in, two versions) */
#pendbar.wait{background:#1d4ed8;color:#fff;font-size:14px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
#pendbar.wait button,#pendbar.wait .btn,#pendbar.wait .pbref{background:#0b1d4a;border-color:#0b1d4a;color:#fff}
#pendbar.wait svg,#pendbar.wait .pbref svg{color:#fff!important;stroke:currentColor}
@media(max-width:600px){#pendbar.wait .pbs{display:none}}
.netstat.wait{color:var(--accent)}
.fcwx{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mute)}
.fcwx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* edit pages: the button row sits inside the window with breathing room (the New flight form keeps its sticky save bar) */
.dialog>form:not(#ff){padding-bottom:16px}
.dialog>form:not(#ff)>.row:last-child{flex-wrap:wrap;gap:8px}
.dialog>.card:last-child,.dialog>details:last-child{margin-bottom:16px}
/* Aircraft, Airports and People lists: one table style — same header, row height, bold first column, tap a row to open it */
table.ltable{border-collapse:separate;border-spacing:0;width:100%}
table.ltable thead th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);font-weight:600;padding:10px 12px;white-space:nowrap;background:var(--head);text-align:left}
table.ltable thead th.n{text-align:right}
table.ltable tbody td{padding:10px 12px;vertical-align:middle;height:52px;border-top:1px solid var(--line)}
table.ltable tbody tr:nth-child(even){background:transparent}
table.ltable tbody tr.click:hover{background:var(--head)}
table.ltable tbody td:first-child:not(.selc) b,table.ltable tbody td.selc+td b{font-weight:700}
table.ltable td.n{font-variant-numeric:tabular-nums;text-align:right}
table.ltable .acph{width:64px;height:36px}
/* one height for every button and field in page headers and toolbars, so their boxes line up */
main .phead>.btn,main .phead>button,main .phead>details>summary.btn,main .toolbar .btn,main .toolbar button,main .toolbar select,main .toolbar input:not([type=checkbox]):not([type=radio]),main .lbbar button,main .lbbar select,main .lbbar input:not([type=checkbox]){height:40px;min-height:40px;box-sizing:border-box}
main .phead>details>summary.btn{display:inline-flex;align-items:center}
main .phead{align-items:center}
/* Logbook header like Aircraft / Airports / People: title · More · + New flight */
main .samehead .pagenew{display:inline-flex;align-items:center}
.pmore .dpanel details.dmenu{width:100%}.pmore .dpanel details.dmenu>summary{width:100%;justify-content:flex-start}
.pmore .dpanel details.dmenu>.dpanel{position:static;box-shadow:none;border:0;padding:6px 0 0}
/* logbook toolbar: every control 40 px tall so the boxes line up */
main .lbbar .lbrow button,main .lbbar .lbrow select,main .lbbar .lbrow input:not([type=checkbox]),main .lbbar .zoomctl button,main .lbbar .seg button,main .lbbar .pager>button{height:40px!important;min-height:40px!important;box-sizing:border-box}
main .lbbar .pager .pgl{height:40px;box-sizing:border-box}
/* desktop logbook toolbar: same two rows as tablets (view tools / pager · go to date · page size) */
@media(min-width:1181px){
  .lbbar .lbrow{align-items:center;gap:8px}.lbbar .lbrow .grow{display:none}
  .lbbar .lbbreak{display:block;order:8;flex-basis:100%;height:0}
  .lbbar .pager{order:9;width:auto;flex:0 0 auto}.lbbar .pager>button{flex:none;min-width:44px}.lbbar .pager .pgl{flex:none;padding:0 12px}
  .lbbar .jd,.lbbar .jdbtn{order:10;margin-left:auto}.lbbar .lbsz{order:11;width:auto}
}
/* phones: + New flight is already in the top bar */
@media(max-width:900px){main .samehead .pagenew{display:none!important}}
/* list tables: links inside cells look like the rest of the row */
table.ltable td a:not(.btn){color:inherit;text-decoration:none;font-weight:600}
table.ltable td a.ib{color:var(--mute)}
/* People A–Z on phones: all letters visible, three even rows */
@media(max-width:600px){.azbar{display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr));overflow:visible}.azbar .chip{padding:2px 0;justify-content:center}}
main .phm.samehead .pmore{margin-left:auto}
/* one toolbar for Logbook, Aircraft, Airports, People: search · Filter · Sort, other options in the Filter panel */
main .toolbar .tbrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
main .toolbar .tbrow .tbsearch,main .lbbar #lbq{flex:1 1 220px;min-width:160px;max-width:none}
main .toolbar .fbtn{flex:none}
main .toolbar .fpanel{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
main .toolbar .fpanel .ffgrid{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
main .toolbar .fpanel .azbar{margin-top:10px}
main .lbbar #lbq{order:-1}
@media(max-width:600px){main .toolbar .tbrow .tbsearch,main .lbbar #lbq{flex:1 1 100%}main .toolbar .tbrow>label.inline{flex:1 1 auto;display:flex;align-items:center;gap:8px}main .toolbar .tbrow>label.inline select{flex:1}}
main > .row > .btn,main > .row > button,main > .row > label > input:not([type=checkbox]),main > .row > label > select{height:40px;min-height:40px;box-sizing:border-box}
/* page headers on phones: one row — title (wraps if long) · ⋯ · main button */
@media(max-width:600px){
  main .phm{flex-wrap:nowrap!important;align-items:flex-start;gap:8px}
  main .phm>h1{flex:1 1 auto!important;min-width:0;margin:4px 0 0!important;font-size:21px;line-height:1.25;overflow-wrap:anywhere}
  main .phm>h1 .small{display:block;font-size:13px;font-weight:500}
  main .phm>*:not(h1){flex:none;margin-left:0!important}
  main .phm .pmore>summary{width:40px;padding:0;justify-content:center}
  main .phm .pmore .pml{display:none}
}
.pmore>summary{display:inline-flex;align-items:center;gap:6px}
.pmore>summary svg{flex:none}
@media(min-width:601px){.pmore>summary svg{display:none}}
/* page search (magnifier next to titles): same 40 px square as the other header buttons */
main h1 .pagesearch .psbtn,main .pagesearch .psbtn{width:40px;height:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;vertical-align:middle}
main h1 .pagesearch{margin-left:6px;vertical-align:middle}
@media(max-width:600px){main h1 .pagesearch .psbtn{width:36px;height:36px;min-height:36px}}
/* list tables: columns as narrow as their content, the spare width goes to the end of the row */
table.ltable th,table.ltable td{white-space:nowrap}
table.ltable th:last-child,table.ltable td:last-child{width:100%}
.tlrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.tolog{border-color:var(--warn)}
/* pop-up windows (View flight, edit pages, New flight): header buttons all 40 px and lined up */
.dialog .row>button,.dialog .row>a.btn,.dialog .row>.iconbtn,.dialog .ffrow>button,.dialog .ffrow>a.btn{height:40px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin-top:0;margin-bottom:0}
.dialog .row:has(>h1){align-items:center}
.dialog #vfmore{width:40px;padding:0}
/* Quick log: only Flight, Aircraft, Crew, Route and times, Takeoffs and landings */
.flightform.quick .fsec.step[data-step="5"],.flightform.quick .fsec.step[data-step="7"],.flightform.quick .fsec.step[data-step="8"],.flightform.quick .fsec:not(.step){display:none}
.qlnote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
/* OFP import list */
.ofplist{display:flex;flex-direction:column;gap:8px}
.ofprow{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.ofprow input{margin-top:3px;width:20px;height:20px;flex:none}
.ofprow:not(.on){opacity:.7}
.ofph{line-height:1.4}
.ofpres:empty{display:none}
.ofpres{margin-top:4px;color:var(--ok)}
label.ofprow{flex-direction:row;font-weight:normal}
.ofprow>div{min-width:0}
.nowrap{white-space:nowrap}
.ofpcard summary{cursor:pointer}
.ofpcard .kvs{margin-top:10px}

/* flight number + its two fill buttons: on phones the buttons share the line below */
.fnrow{flex-wrap:wrap}
.fnrow #ofpfill{white-space:nowrap}
@media (max-width:600px){.fnrow input[name=flight_number]{flex:1 1 100%}.fnrow button{flex:1 1 0;min-width:0}}
/* OFP summary line on flight cards */
.fcofp{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:12px;color:var(--mute)}
.fcofp b{color:var(--ink);font-size:11px;letter-spacing:.04em}
.fcofp span{white-space:nowrap}
/* year in review, badges, CV */
.yrgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
@media (max-width:600px){.yrgrid{grid-template-columns:repeat(2,1fr)}}
.yrt{display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--line);border-radius:10px;min-width:0}
.yrt b{font-size:22px;line-height:1.2}
.yrt span{font-size:12px;color:var(--mute)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.bdgs{display:flex;flex-wrap:wrap;gap:6px}
.bdg{min-width:44px;padding:6px 10px;border-radius:99px;border:1px solid var(--line);text-align:center;font-size:13px;color:var(--mute)}
.bdg.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.cvpage h3{margin:18px 0 6px}
@media print{.noprint,nav,.layout>nav,#pendbar,.tabbar,header{display:none!important}.cvpage{border:0;box-shadow:none}}
a.pchip{display:inline-flex;align-items:center;text-decoration:none;color:inherit;border:1px solid var(--line)}
/* track replay */
.replay{display:flex;align-items:center;gap:10px;margin-top:8px}
.replay input[type=range]{flex:1;min-width:0}
.replay .rplay{min-width:44px}
.replay .rinfo{white-space:nowrap;color:var(--mute);font-variant-numeric:tabular-nums}
/* keep each map's layers inside its own box, so a map on the page never shows through a pop-up */
.leaflet-container{z-index:0;isolation:isolate}
/* duplicate-flight warning above the save bar; icon chips */
.dupwarn{margin:10px 0 0;padding:10px 12px;border:1px solid var(--warn);border-radius:10px;background:color-mix(in srgb,var(--warn) 12%,transparent);font-size:14px;line-height:1.4}
.dupwarn a{margin-left:6px;font-weight:600}
.ichip{display:inline-flex;align-items:center;gap:6px}
/* thumb-sized ⋯ on flight cards (40 px target, same look) */
.fcm{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;margin:-8px -8px -8px 0}
/* Overview: last flight + Log next leg */
.nextleg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nextleg .grow{min-width:200px}
@media (max-width:600px){.nextleg button{flex:1 1 100%}}
/* quick screen: takeoffs / landings by the two toggles only (counters under "Show all fields") */
.flightform.quick .tlrows{display:none}
.flightform.quick .fsec.step[data-step="6"] .row.tight{margin:10px 12px!important}
/* warnings about entered times, under the block / night result */
.timewarn:empty{display:none}
.timewarn{display:flex;flex-direction:column;gap:6px;margin:8px 12px 4px}
.timewarn .tw{padding:8px 10px;border-radius:8px;font-size:14px;line-height:1.35;border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.timewarn .tw.stop{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent);font-weight:600}
/* ACARS photo buttons */
.acarsbtns{display:inline-flex;flex-wrap:wrap;gap:8px}
.acarsbtns label.btn{display:inline-flex;align-items:center;min-height:40px}
.acarsbtns.lead label.btn:first-child{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.nlbtns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:600px){.nlbtns{flex:1 1 100%}.nlbtns button{flex:1 1 0}}
/* Scan button (side menu, phone header) and page */
nav .scanbtn{margin:8px 6px 0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px}
@media(max-width:900px){nav .scanbtn{margin:0;order:2;min-width:44px;padding:0 10px}nav .scanbtn .nl{display:none}}
.scanbig{display:flex;gap:10px;flex-wrap:wrap}
.scanbig label.btn{flex:1 1 200px;min-height:56px;display:flex;align-items:center;justify-content:center;font-size:17px}
.scanpick{display:block;width:100%;text-align:left;margin-top:6px;min-height:44px}
.scanbig label.btn{flex-direction:row;gap:8px}
/* touch screens: the 1–6 quick numbers appear when you tap into that counter; chips get thumb-sized (40 px) */
@media (pointer:coarse){
  .cnt .nums{display:none}
  .cnt:focus-within .nums{display:inline-flex}
  .pchip,a.pchip{min-height:40px}
  .chip{min-height:40px}
}
/* name check */
.nc .ncrow{display:flex;align-items:center;gap:10px;min-height:44px}
.nc .ncrow input{width:20px;height:20px}
label.ncrow{flex-direction:row;font-weight:normal;justify-content:flex-start}
/* gallery tiles with documents (OFP PDFs, tracks): the name is cut with "…" inside its tile, clear of the remove button */
.gallery>*{min-width:0}
.gallery .att{min-width:0}
.gallery .att .doc{flex:1 1 auto;min-width:0;max-width:100%;padding-right:36px}
.att .doc{padding-right:34px}
/* side menu: New flight and Scan / Upload stacked with the same width and spacing as the menu items */
@media(min-width:901px){nav .newbtn{margin:0 6px 8px}nav .scanbtn{margin:0 6px 12px}}
/* Next leg / quick screen: no Extras section */
.flightform.quick .fsec.step[data-step="9"],.flightform.quick .stepx{display:none}
/* side menu: New flight, Scan / Upload and the menu items share the same left and right edges */
@media(min-width:901px){nav .newbtn,nav .scanbtn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-self:stretch;width:auto;margin-left:0;margin-right:0}}
/* phone header: New flight and the camera button the same height */
@media(max-width:900px){nav .newbtn,nav .scanbtn{min-height:40px;height:40px;box-sizing:border-box;display:inline-flex;align-items:center}}
.flightform.quick .xhead{display:none}
.acarsbtns label.btn{flex-direction:row;gap:6px}
.acarsbtns label.btn svg{margin-right:0!important}
.routecap{margin:-4px 0 10px}
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
.fcs{font-size:11px;line-height:1.2;color:var(--mute);font-variant-numeric:tabular-nums}
/* map: "Tap to zoom and move" (online only) */
.leaflet-container .mapexplore{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:500;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink);font-size:13px;white-space:nowrap}
.leaflet-container .mapexplore:disabled{opacity:.75}
/* phone: page tabs share the width (no tab hidden off the edge) */
@media(max-width:600px){.ptabs{overflow:visible}.ptabs a{flex:1 1 0;min-width:0;text-align:center;white-space:normal;padding:8px 4px;font-size:13px;line-height:1.25}}
/* file pickers look like the app's buttons, not the raw browser control */
input[type=file]{color:var(--mute);font:inherit;font-size:14px;max-width:100%}
input[type=file]::file-selector-button{min-height:40px;padding:0 16px;margin-right:12px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer}
/* logbook toolbar: the page-number control is 40 px like its buttons and neighbours, everything centred on one line (iPad portrait was 36 px) */
main .lbbar .pager{height:40px!important;box-sizing:border-box;align-self:center}
main .lbbar .lbrow{align-items:center}
/* touch screens (iPad sideways included): "go to date" is the calendar button, never the empty native date box (iPad Safari draws it blank and off-line) */
@media (pointer:coarse){
  .lbbar .jd{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
  .lbbar .jdbtn{display:inline-flex;order:10;margin-left:auto;align-self:center}
  .lbbar .lbsz{order:11;align-self:center}
}
/* scan: crew list review */
.crewlist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.crewrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.crewhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crewopts{display:flex;flex-direction:column;gap:8px}.crewopts label.inline{min-height:40px;display:flex;align-items:center;gap:10px}
.crewopts input{width:22px;height:22px}
.crewflds{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}.crewflds b{width:100%}.crewflds input{width:20px;height:20px}
.crewok{margin-top:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 6%,var(--card))}
/* approve what an OFP / ACARS / photo adds to a flight */
.fncard.approve .aplist{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.fncard.approve .aplist label.inline{min-height:40px;display:flex;align-items:center;gap:10px}
.fncard.approve .aplist input{width:22px;height:22px;flex:none}
.fncard.approve .aplist span{min-width:92px;color:var(--mute)}
.ofpwill{margin:6px 0 6px;padding-left:18px;display:flex;flex-direction:column;gap:2px}.ofpwill li{line-height:1.35}
/* inside the iPad / iPhone app (html.nativeapp): the app keeps the page below the status bar; the bottom status strip sits close to the home-indicator line */
html.nativeapp #pendbar{padding-bottom:max(8px,calc(env(safe-area-inset-bottom) - 8px))}
html.nativeapp .savebar{padding-bottom:max(8px,calc(env(safe-area-inset-bottom) - 8px))}
/* logbook search suggestions */
.lbqwrap{position:relative;display:flex;flex:1 1 220px;min-width:160px;order:-1}
.lbqwrap #lbq{flex:1 1 auto;width:100%;min-width:0}
@media(max-width:600px){.lbqwrap{flex:1 1 100%}}
.lbsug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.25);max-height:min(420px,55vh);overflow:auto;padding:4px}
.lbsi{display:flex;align-items:baseline;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);text-align:left;font-size:15px;justify-content:flex-start}
.lbsi:hover,.lbsi.on{background:var(--head)}
.lbsi .lbsk{flex:none;width:84px;font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px}
.lbsi.all b{font-weight:600}
/* "OFP PDF" button on flight cards */
.fcofp .ofpopen{display:inline-flex;align-items:center;gap:6px;min-height:32px;height:32px;padding:0 10px;font-size:13px;font-weight:600;border-radius:8px}
@media(pointer:coarse){.fcofp .ofpopen{min-height:36px;height:36px}}
/* fetched from an outside service (OpenSky, automatic weather, hexdb.io, registers) vs entered by you: light grey */
:root{--fetched:#7b8494}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--fetched:#a3acba}}:root[data-theme="dark"]{--fetched:#a3acba}
:root[data-theme="dark"]{--fetched:#a3acba}
.isfetched{color:var(--fetched)!important}
input.isfetched,textarea.isfetched{border-color:var(--fetched)!important;border-style:dashed!important}
.fetchleg{font-size:12px;color:var(--mute);margin-top:6px;text-align:center}
.wxl.isfetched code{color:var(--fetched)}
/* aircraft history line on the flight card: one wrapped line, never one piece per line */
.kv .acinfo{display:block;font-size:13px;font-weight:400;margin-top:3px;line-height:1.5;color:var(--mute)}
.kv .acinfo i{display:inline;font-style:normal}
.kv .acinfo .aci{white-space:nowrap}
.kv .acinfo .aci.isfetched{color:var(--fetched)}
/* People table: each column as wide as its content (no stretched Code column); the last column takes what's left */
table.ptable{width:auto;min-width:100%}
table.ptable th,table.ptable td{width:1%;white-space:nowrap;padding-right:22px}
table.ptable th:last-child,table.ptable td:last-child{width:auto}
table.ptable th:nth-child(4),table.ptable td:nth-child(4),table.ptable td:nth-child(3){white-space:normal;max-width:9.5em}
table.ptable td:nth-child(9),table.ptable td:nth-child(10){white-space:normal;max-width:10em}
/* ---------- Stats page (validated categorical palette, slots 1–6 in fixed order; single blue ramp for the heatmap) ---------- */
.vz,.vztip{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#008300;--q0:#eef1f5;--q1:#cfe0f6;--q2:#9ec2ee;--q3:#5f9ae3;--q4:#2a78d6;--q5:#1a4f94}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .vz,:root:not([data-theme="light"]) .vztip{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#008300;--q0:#1e2530;--q1:#1d3557;--q2:#24497d;--q3:#2c63aa;--q4:#3987e5;--q5:#8dbaf2}}:root[data-theme="dark"] .vz,:root[data-theme="dark"] .vztip{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#008300;--q0:#1e2530;--q1:#1d3557;--q2:#24497d;--q3:#2c63aa;--q4:#3987e5;--q5:#8dbaf2}
:root[data-theme="dark"] .vz,:root[data-theme="dark"] .vztip{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#008300;--q0:#1e2530;--q1:#1d3557;--q2:#24497d;--q3:#2c63aa;--q4:#3987e5;--q5:#8dbaf2}
.vztip .s1{background:var(--s1)}.vztip .s2{background:var(--s2)}.vztip .s3{background:var(--s3)}.vztip .s4{background:var(--s4)}.vz .s1{fill:var(--s1);background:var(--s1)}.vz .s2{fill:var(--s2);background:var(--s2)}.vz .s3{fill:var(--s3);background:var(--s3)}.vz .s4{fill:var(--s4);background:var(--s4)}.vz .s5{fill:var(--s5);background:var(--s5)}.vz .s6{fill:var(--s6);background:var(--s6)}.vz .s7{fill:var(--mute);background:var(--mute)}
.vz .card h2{margin:0 0 8px;font-size:17px}
.vzhero{display:flex;flex-direction:column;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--s1) 22%,var(--card)),var(--card) 70%)}
.vzhb{font-size:clamp(40px,9vw,64px);font-weight:800;line-height:1;letter-spacing:-1px}.vzhb small{font-size:.4em;font-weight:700;color:var(--mute)}
.vzhl2{color:var(--mute);margin-top:6px}
.vzherorow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.vzfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0}
.vzfact{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.vzhero .vzfact{background:color-mix(in srgb,var(--card) 70%,transparent)}
.vzfi{font-size:24px;line-height:1.2}.vzfb{font-size:22px;font-weight:800;line-height:1.15}.vzfl{font-size:13px;color:var(--mute)}.vzfs{font-size:12px;color:var(--mute);margin-top:3px}
.vzgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:12px}
.vzscroll{overflow-x:auto}.vzscroll svg{width:100%;height:auto;display:block}
.vz .vzgrid{stroke:var(--line);stroke-width:1}.vz .vzbase{stroke:var(--mute);stroke-width:1}.vz .vzax{fill:var(--mute);font-size:11px;color:var(--mute)}.vz .vzbig{fill:var(--ink);font-size:18px;font-weight:800}
.vz [data-tip]{cursor:default}.vz g[data-tip]:hover path,.vz g[data-tip]:hover rect[class]{opacity:.85}
.vzlegend{display:flex;gap:14px;font-size:13px;color:var(--mute);margin-bottom:6px}.vzlegend span{display:inline-flex;align-items:center;gap:6px}
.vzkey{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.vzh{display:flex;flex-direction:column;gap:6px}.vzhrow{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px;font-size:13px}
.vzhl{font-weight:600}.vzhbar{height:14px;background:var(--line);border-radius:4px;overflow:hidden}.vzhbar i{display:block;height:100%;border-radius:4px}.vzhv{font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.vzdonut{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.vzdonut path{stroke:var(--card);stroke-width:2}
.vzleg{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px;font-size:13px}.vzleg div{display:grid;grid-template-columns:12px 1fr auto 40px;gap:8px;align-items:center}.vzleg b{font-variant-numeric:tabular-nums}.vzleg em{font-style:normal;color:var(--mute);text-align:right}
.vzheat{display:grid;gap:3px;align-items:center}.vzheat i{display:block;aspect-ratio:1.6;border-radius:3px;min-height:12px}.vzheat .vzyr{text-align:right;padding-right:6px}.vzheat > span{text-align:center}
.vz .q0{background:var(--q0)}.vz .q1{background:var(--q1)}.vz .q2{background:var(--q2)}.vz .q3{background:var(--q3)}.vz .q4{background:var(--q4)}.vz .q5{background:var(--q5)}
.vzseqleg{display:flex;gap:4px;align-items:center;justify-content:flex-end;margin-top:8px}.vzseqleg i{width:16px;height:12px;border-radius:3px;display:block}
.vzflags{display:flex;flex-wrap:wrap;gap:8px}.vzflags span{background:var(--head);border-radius:16px;padding:4px 10px;font-size:13px}
.vztip{position:fixed;z-index:300;display:none;pointer-events:none;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:260px}
.vztip .vzkey{margin-right:6px;vertical-align:-1px}
.vzsec{font-size:15px;color:var(--mute);margin:18px 2px 8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.vzfi{color:var(--s1);line-height:0;padding-top:2px}.vzfi svg{display:block}
.vzhero .vzfi{color:var(--ink)}
.vzh.wide .vzhrow{grid-template-columns:minmax(90px,38%) 1fr auto}.vzh.wide .vzhl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.vz .vzline{fill:none;stroke:var(--s1);stroke-width:2}.vz .vzarea{fill:var(--s1);opacity:.14}.vz .vzmark{fill:var(--s2);stroke:var(--card);stroke-width:2}.vz .vzmarkt{fill:var(--ink);font-size:11px;font-weight:700}
.vzflags .vzov{font-weight:700;background:color-mix(in srgb,var(--s1) 22%,var(--head))}
#vzover{display:contents}
.vzworldbox{background:color-mix(in srgb,var(--s1) 6%,var(--card));border-radius:10px;overflow:hidden}
.vzworld{width:100%;height:auto;display:block}.vz .vzland{stroke:color-mix(in srgb,var(--mute) 45%,transparent);stroke-width:2.4;stroke-linecap:round;fill:none}
.vz .vzarc{fill:none;stroke:var(--s1);stroke-linecap:round}.vz .vzarc:hover{stroke:var(--s2);opacity:1!important}.vz .vzap{fill:var(--s2);stroke:var(--card);stroke-width:.6}
.vzclock{width:min(100%,300px);height:auto;display:block;margin:6px auto 0}.vz .vzface{fill:var(--head)}
.vztl{display:grid;gap:3px;align-items:center}.vztl i{display:block;height:14px;border-radius:3px;background:var(--q0)}.vztlk{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzdays{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:2px}.vzdays i{display:block;aspect-ratio:1;border-radius:2px;min-width:4px}
/* Stats: Totals · Graphs · Fun stats tabs */
.stabs{display:flex;margin:0 0 12px;max-width:640px;overflow-x:auto;scrollbar-width:none}.stabs::-webkit-scrollbar{display:none}.stabs .btn{flex:1 0 auto;text-align:center;justify-content:center;white-space:nowrap;padding-left:12px;padding-right:12px}
/* phones: the five tabs fit the width (no tab cut at the edge) */
@media(max-width:480px){.stabs .btn{flex:1 1 auto;padding-left:6px;padding-right:6px;font-size:14px;min-width:0}}
.testbanner{border-left:4px solid var(--fetched);padding:10px 14px;margin-bottom:12px}
.testlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px}.testlist a{padding:6px 0}

/* logbook on every screen: the toolbar is folded by default and opens from a button on the title line; the pages row repeats under the list (not sticky) */
.lbtog,.lbbot{display:none}
.lbtog{position:relative;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0}
.lbtog.open{background:var(--head)}
.lbtog.act::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.lbbot{margin-top:12px}
main .lbtog{display:inline-flex}main .lbbar.lbfold{display:none}main .lbbot{display:block}
@media print{.lbtog,.lbbot{display:none!important}}

/* flights saved on this device, not sent yet (no signal): the same cards, in the warning colour */
.pendhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 2px 8px;color:#3b82f6;font-size:14px} /* blue: waiting to be sent (as the bar and the cards) */
.pendhead .mini{margin-left:auto}
.fcard.pendcard{--pendbg:color-mix(in srgb,#2563eb 10%,var(--card));border-color:#3b82f6;background:var(--pendbg)} /* blue: saved on this device, not sent yet (the bar's colour); orange is for what needs you */
.fcard.pendcard .fcline svg{background:var(--pendbg)}
.pendhead+.fcards{margin-bottom:14px}

/* waiting for the logbook (shown after 0.4 s, see busy() in app.js): the page behind is blurred and dimmed, a spinning disk
   in the middle. Taps still reach the page (pointer-events: none), so a slow answer never locks the app. */
.busy{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s;
  background:color-mix(in srgb,var(--bg) 35%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body.isbusy .busy{opacity:1;visibility:visible;transition:opacity .15s}
.busyc{width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.busyd{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:busyspin .8s linear infinite;will-change:transform}
@keyframes busyspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.busyd{animation-duration:2.4s}.busy{transition:none}}
.busy .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media print{.busy{display:none!important}}

/* "Clear filter": next to the Filter button whenever a filter is on; on phones / in the app also on the logbook title line
   while the toolbar is folded */
.fclear{display:inline-flex;align-items:center;gap:6px;color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));white-space:nowrap}
.fclear svg{flex:none}
.lbclr{display:none}
@media(max-width:900px){main .lbclr:not(.hidden){display:inline-flex}}
html.nativeapp main .lbclr:not(.hidden){display:inline-flex}
#lbtog.open + .lbclr{display:none!important}
@media print{.fclear{display:none!important}}
/* flight cards: bigger text, one clear order (header · route · times · crew · flight time · remarks · OFP · weather) */
.fcard .fch{font-size:16px}.fcard .fchd b{color:var(--ink);font-weight:600}.fcard .fcac{color:var(--ink);font-weight:500}
.fca .fcc{font-size:28px}
.fcard .fcn{font-size:15px;color:var(--mute);min-height:1em}
.fcard .fcr{align-items:center}
.fcard .fcmid{align-self:center;text-align:center}
.fcard .fcdur{font-size:20px;line-height:1.1}
.fctimes{display:grid;gap:6px;margin-top:10px;padding:8px 0 2px;border-top:1px solid var(--line)}
.fctimes>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.fctimes>div:first-child{align-items:flex-start}.fctimes>div:last-child:not(:first-child){align-items:flex-end}
.fctimes span{font-size:12px;letter-spacing:.08em;color:var(--mute);font-weight:600}
.fctimes b{font-size:18.5px;font-variant-numeric:tabular-nums;font-weight:600}
.fctimes i{font-style:normal;font-size:13.5px;color:var(--mute);white-space:nowrap}
.fcwho{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:16.5px}
.fcrole{font-size:12.5px;letter-spacing:.06em;padding:2px 8px;border-radius:6px;background:var(--chip);color:var(--accent)}
.fcstats{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:16px;color:var(--mute)}
.fcstats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.fcstats .ftag{font-size:13px;padding:2px 9px;color:var(--ink)}
.fcard .fcrmk{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;margin-top:8px;font-size:15.5px;font-style:italic;color:var(--ink);opacity:.85}
.fclab{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--mute);padding-top:2px;min-width:30px}
.fcvals{display:flex;flex-wrap:wrap;gap:2px 12px;flex:1;min-width:0}
.fcard .fcofp{display:flex;align-items:flex-start;gap:10px;flex-wrap:nowrap;margin-top:10px;padding-top:8px;font-size:15px;color:var(--ink)}
.fcard .fcofp .ofpopen{display:inline-flex;align-items:center;gap:5px;min-height:26px;height:26px;padding:0 9px;font-size:12.5px;border-radius:7px;align-self:center}
.fcard .fcwx{flex-direction:row;align-items:flex-start;gap:10px;margin-top:8px;padding-top:8px;font-size:13.5px}
.fcard .fcwx .fcvals{flex-direction:column;gap:2px}
.fcard .fcwx .fcvals span{white-space:normal;overflow-wrap:anywhere}
/* times under their airport (OUT / IN, scheduled under), OFF / ON under the block time */
.fctm{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin-top:8px}
.fca.r .fctm{justify-content:flex-end}
.fctm span{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--mute)}
.fctm b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.fctm i{flex-basis:100%;font-style:normal;font-size:13px;color:var(--mute);white-space:nowrap}
.fcoo{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;margin-top:6px;font-size:13px;color:var(--mute)}
.fcoo b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.fcard .fcr{align-items:start}.fcard .fcmid{padding-top:4px}
/* role, crew and the flight's numbers on one line when there is room */
.fcmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.fcmeta .fcwho,.fcmeta .fcstats{margin:0}
.fcard .fcofp+.fcwx{border-top:0;padding-top:2px}
.fcard .fcofp .ofpopen{flex:none;margin-left:auto}
/* finish: chips for flight number / registration, accent route line, early-late, numbers strip, data panel for OFP + weather */
.fcard{border-radius:16px;box-shadow:0 1px 2px rgb(16 24 40/.05),0 3px 10px rgb(16 24 40/.04);transition:box-shadow .15s,border-color .15s}
@media(hover:hover){.fcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 6px 22px rgb(16 24 40/.10)}}
.fchd{display:inline-flex;align-items:center;gap:8px;min-width:0}
.fcfn{font-size:.86em;font-weight:600;color:var(--accent);background:var(--chip);padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.fcard .fcac{display:inline-flex;align-items:center;gap:8px;min-width:0}.fcac b{font-weight:600;white-space:nowrap}
.fcard .fch{flex-wrap:wrap;row-gap:4px}
.fcrt{display:inline-flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}
.fcreg{font:600 .8em ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;padding:2px 7px;border:1px solid var(--line);border-radius:6px;color:var(--ink);white-space:nowrap}
.fca .fcc{letter-spacing:.02em}
.fcard .fcline::before{border-top:0;height:2px;top:calc(50% - 1px);border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent) 22%,color-mix(in srgb,var(--accent) 50%,transparent) 78%,transparent)}
.fctm em{font-style:normal;font-weight:600}.fctm em.ok{color:var(--ok)}.fctm em.late{color:var(--warn)}
.fccrew{display:inline-flex;align-items:center;gap:6px;min-width:0}.fccrew svg{color:var(--mute);flex:none}
.fcard .fcstats{gap:8px 0;align-items:stretch}
.fcst{display:flex;flex-direction:column;gap:2px;padding:0 14px;border-left:1px solid var(--line)}.fcst:first-child{padding-left:0;border-left:0}
.fcst i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fcst b{font-size:16.5px;line-height:1.2}
.fcstats .ftag{align-self:center;margin-left:14px}
.fcard .fcrmk{font-style:italic;border-left:3px solid color-mix(in srgb,var(--accent) 35%,var(--line));padding:1px 0 1px 10px;margin-top:12px}
.fcard .fcofp,.fcard .fcwx{background:var(--row);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-top:12px}
.fcard .fcofp:has(+.fcwx){border-radius:10px 10px 0 0}.fcard .fcofp+.fcwx{border-top:1px dashed var(--line);border-radius:0 0 10px 10px;margin-top:0;padding-top:9px}
.fclab{background:var(--head);border-radius:5px;padding:2px 6px;text-align:center;min-width:0}
.fcvals i{font-style:normal;font-size:.78em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-right:5px}
.fcard.pendcard .fcofp,.fcard.pendcard .fcwx{background:color-mix(in srgb,#2563eb 6%,var(--card))}
.fcard .fcr{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.fctm i{white-space:normal}.fctm em{white-space:nowrap}
.fczone{margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fcard .fcofp{flex-wrap:wrap}.fcard .fcofp .fcvals{flex:1 1 200px}
@media(max-width:600px){.fcard .fcstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}.fcst,.fcst:first-child{border-left:0;padding:0}.fcstats .ftag{margin-left:0;justify-self:start}.fcmid{min-width:74px}.fca .fcn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* behind the card: the route on a faint map (centre, edges fading out) and a faint drawing of the aircraft family */
.fcard{position:relative;overflow:hidden;isolation:isolate}
.fcard>*{position:relative;z-index:1}
.fcard>.fcart{position:absolute;z-index:0;right:-34px;bottom:-26px;width:min(56%,380px);height:auto;color:color-mix(in srgb,var(--ink) 7%,transparent);fill:currentColor;pointer-events:none;transform:rotate(-8deg)}
.fcard .fcr{isolation:isolate}
.fcmap{position:absolute;z-index:-1;left:50%;top:50%;width:calc(100% + 40px);height:calc(100% + 40px);transform:translate(-50%,-50%);pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 80% 78% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 80% 78% at 50% 50%,#000 58%,transparent 100%)}
.fcard .fcr .fcn,.fcard .fctm,.fcard .fcdur{text-shadow:0 0 3px var(--card),0 0 8px var(--card),0 0 14px var(--card)}
.fcard.pendcard .fcr .fcn,.fcard.pendcard .fctm,.fcard.pendcard .fcdur{text-shadow:0 0 3px var(--pendbg),0 0 8px var(--pendbg)}
.fcmap use{fill:color-mix(in srgb,var(--ink) 6.5%,transparent)}
.fcmr{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;opacity:.28}
.fcmd{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;opacity:.38}
.fcpl{fill:color-mix(in srgb,var(--ink) 34%,transparent)}
.fcard .fcline svg,.fcard.pendcard .fcline svg{background:transparent}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .fcmap use{fill:color-mix(in srgb,var(--ink) 7%,transparent)}:root:not([data-theme="light"]) .fcard>.fcart{color:color-mix(in srgb,var(--ink) 8%,transparent)}}:root[data-theme="dark"] .fcmap use{fill:color-mix(in srgb,var(--ink) 7%,transparent)}:root[data-theme="dark"] .fcard>.fcart{color:color-mix(in srgb,var(--ink) 8%,transparent)}
/* the flight's page: titled sections, label-over-value tiles, the same finish as the cards */
.vft{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.vft .fcfn{font-size:.62em}
.vf .fcard.big{margin-bottom:12px}
.vf .vfrmk{display:block;-webkit-line-clamp:unset;overflow:visible}
.vfgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
.vf .card.vfsec,.vf details.card{border-radius:16px;padding:14px 16px;margin-bottom:12px}
.vfgrid .card.vfsec{margin-bottom:0}
.vfh{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.vfh span{font-weight:600;letter-spacing:.04em;text-transform:none;margin-left:6px;opacity:.85}
.vfac{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:20px}.vfac b{font-weight:700}.vfac .fcreg{font-size:14px}
.vfsec .acinfo{font-size:13.5px;color:var(--mute);margin-top:6px;line-height:1.5}.vfsec .acinfo i{font-style:normal}.vfsec .acinfo .aci.isfetched{color:var(--fetched)}
.vfsec .acphcard .acph.big{margin:12px 0 0}
.vf .kvs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 20px}
.vf .kv span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.vf .kv b{font-size:16.5px;font-weight:600;font-variant-numeric:tabular-nums}
.vf .vftiles .kv b{font-size:20px}
.vf .kv2{padding:8px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}.vf .kv2:first-of-type{border-top:0}
.vf .kv2 span{font-weight:600}
.vf .wxl{background:var(--row);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-top:8px}.vf .wxl code{font-size:13.5px}
.vf details.card>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}.vf details.card>summary::-webkit-details-marker{display:none}
.vf details.card>summary::after{content:'';margin-left:auto;width:12px;height:8px;flex:none;background:currentColor;opacity:.5;clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .15s}
.vf details.card[open]>summary::after{transform:rotate(180deg)}
.vf details.card>summary b{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.vf .ofpcard .kvs{margin-top:12px}
.vfcond{display:grid;gap:18px}.vfcond .vfsun .kv2:first-of-type{border-top:0}
.vf .fcard.big .fch{margin-bottom:2px}.vf .fcard.big .fchd{font-size:.8em;letter-spacing:.06em;text-transform:uppercase}
@media(min-width:700px){.vfcond{grid-template-columns:1.7fr 1fr;gap:28px}.vfgrid{grid-template-columns:1fr 1fr}.vfgrid .vfwide{grid-column:1/-1}.vf .card.vfsec,.vf details.card{padding:18px 20px}
  .vfh,.vf details.card>summary b{font-size:13px}.vf .kv span{font-size:12.5px}.vf .kv b{font-size:19px}.vf .vftiles .kv b{font-size:24px}.vfac{font-size:24px}.vf .kvs{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px 24px}
  .vf .wxl code{font-size:15.5px}.vf .kv2{font-size:17px}.vf .pre{font-size:17px}}
/* flight page: map across the top, the route as the title, the flight as a timeline (taxi / airborne / taxi in proportion) */
.vfbar{align-items:center;margin-bottom:10px}.vfwhen{font-size:14px;font-weight:600;color:var(--mute);letter-spacing:.02em}
.vf .vfhero{padding:16px 20px 18px}
.vfhero .vfmap{margin:-16px -20px 16px;border-radius:16px 16px 0 0;height:clamp(200px,30vh,320px)}
.vftitle{display:flex;flex-direction:column;gap:4px}
.vfroute{display:flex;align-items:center;gap:10px;font-size:30px;font-weight:700;letter-spacing:.02em}.vfroute>span{display:inline-flex;align-items:center;gap:8px}.vfroute svg{color:var(--accent);flex:none}
.vfroute .vfdur{margin-left:auto;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.vfcities{font-size:15px;color:var(--mute)}
.vfsub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:15px}.vfsub b{font-weight:600}
.vftl{margin-top:18px}
.vftop{position:relative;height:40px}
.vftp{display:flex;flex-direction:column;gap:1px}.vftp span{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--mute)}.vftp b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.vftp i{font-style:normal;font-size:13px;color:var(--mute);white-space:nowrap}.vftp i em{font-style:normal;font-weight:600;white-space:nowrap}.vftp i em.ok{color:var(--ok)}.vftp i em.late{color:var(--warn)}
.vftp.up{position:absolute;bottom:4px;left:clamp(0px,calc(var(--at) - 30px),calc(100% - 60px));flex-direction:row;align-items:baseline;gap:6px}.vftp.up b{font-size:15px}
.vfbar2{position:relative;display:flex;height:6px;border-radius:3px;gap:3px;margin:0 2px}
.vfbar2 .tx{background:color-mix(in srgb,var(--ink) 18%,transparent);border-radius:3px}.vfbar2 .air{background:var(--accent);border-radius:3px}
.vfdot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--card);border:2.5px solid var(--accent)}.vfdot.sm{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-width:2px}
.vfends{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;margin-top:10px}.vftp.r{align-items:flex-end;text-align:right}
.vfsum{text-align:center;font-size:14px;color:var(--mute);padding-top:2px;display:flex;flex-direction:column;align-items:center;gap:4px}.vfseg{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;white-space:nowrap}.vfsum b{color:var(--ink);font-weight:600}.vfsum .vfz{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:600px){.vfseg{flex-direction:column;align-items:center}}
.vfhero .fcmeta{margin-top:16px}
/* below the top card: plain sections on the page (hairlines and space, not boxes) */
.vf .card.vfsec,.vf details.card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px 4px;margin:0}
.vf .vfhero{margin-bottom:8px}
.vfgrid{gap:0 40px;margin:0}.vfgrid .card.vfsec{border-top:1px solid var(--line)}
.vf .vfh{margin-bottom:14px}
.vfsec .acphcard .acph.big{margin:14px 0 0}.vfsec .acphcard .acph.big img{max-height:220px;object-fit:cover;width:100%;border-radius:12px}
.vf .wxl{background:transparent;border:0;border-left:3px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:0;padding:2px 0 2px 12px;margin-top:10px}
.vfsrc{margin-top:12px;font-size:12px;color:var(--mute)}
.vf .kv .kvsub{display:block;font-size:13px;font-weight:500;color:var(--mute);margin-top:2px}
.vf details.card>summary{padding:2px 0}
@media(max-width:600px){.vfroute{font-size:24px}.vfroute .vfdur{font-size:20px}.vftp b{font-size:18px}.vfsum{font-size:12.5px}.vftp i{white-space:normal}}
@media(min-width:700px){.vfroute{font-size:36px}.vfroute .vfdur{font-size:30px}.vfcities,.vfsub{font-size:17px}.vftp b{font-size:24px}.vftp.up b{font-size:17px}.vftp i{font-size:15px}.vfsum{font-size:16px}}
/* flight page, final: grey page, the top card, then grouped lists (label left, value right) like the iPad's own settings */
.dialog:has(>.vf){background:var(--bg)}
.vf .vfhero{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 3px rgb(16 24 40/.06);padding:16px 20px 18px;margin-bottom:6px}
.vf .vfhero .vfmap{position:relative;margin:-16px -20px 16px;border-radius:18px 18px 0 0;height:clamp(220px,34vh,360px);overflow:hidden;background:var(--mapsea)}
:root{--mapsea:color-mix(in srgb,var(--accent) 7%,var(--card));--mapland:color-mix(in srgb,var(--ink) 4%,var(--card));--mapcoast:color-mix(in srgb,var(--ink) 16%,var(--card))}
.hmap{display:block}.hmap-sea{fill:var(--mapsea)}.hmap-land{fill:var(--mapland);stroke:var(--mapcoast);stroke-width:.6px;vector-effect:non-scaling-stroke}
.hmap-rt{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hmap-ap circle{fill:var(--card);stroke:var(--accent);stroke-width:3}.hmap-ap text{font:700 13px system-ui,-apple-system,sans-serif;letter-spacing:.04em;fill:var(--ink);paint-order:stroke;stroke:var(--mapsea);stroke-width:4px}
.hmap-pl{fill:var(--accent);stroke:var(--card);stroke-width:6px;paint-order:stroke}
.vfmapbtns{position:absolute;right:10px;bottom:10px;display:flex;gap:8px;z-index:500}.vfmapbtns .mini{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;box-shadow:0 1px 3px rgb(0 0 0/.12)}
.vfmap.live{background:var(--head)}
.vcols{display:grid;grid-template-columns:1fr;gap:0 18px}
.vgrp{margin-top:18px}.vgrp>h3{font-size:13px;font-weight:600;color:var(--mute);margin:0 0 7px 14px;letter-spacing:.01em}
.vbox{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;min-height:48px;box-sizing:border-box}
.vbox>.vrow+.vrow,.vbox>.vph+.vrow,.vbox>div+.vrow,#vfwx+.vrow,.vwx+.vwx{border-top:1px solid var(--line)}
.vrow>span{color:var(--mute);font-size:15px}.vrow>b{font-weight:600;font-size:16px;text-align:right;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end}
.vrow>b>i{font-style:normal;font-weight:500;font-size:13px;color:var(--mute);margin-top:1px}.vrow>b:has(.vav){flex-direction:row;align-items:center;gap:8px}
.vmute{color:var(--mute);font-weight:500;font-style:normal;font-size:12.5px}
.vav{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--chip);color:var(--accent);font:700 11px system-ui;font-style:normal;letter-spacing:.02em;flex:none}
.vacx:empty{display:none}.vacx{color:var(--mute);font-size:14px}.vacx .acinfo{font-size:14px;color:var(--mute)}.vacx .acinfo i{font-style:normal}.vacx .acinfo .aci.isfetched{color:var(--fetched)}
.vph .acph.big{margin:0;border-radius:0}.vph .acph.big img{border-radius:0;max-height:240px;width:100%;object-fit:cover}
.vtext{padding:14px 16px;font-size:15px}
.vnote{padding:10px 16px 12px;font-size:12px;color:var(--mute);border-top:1px solid var(--line)}
.vnote.row{align-items:center;gap:10px}
.vwx{padding:12px 16px}.vwxh{display:flex;align-items:baseline;gap:8px}.vwxh b{font-size:16px;letter-spacing:.03em}.vwxh span{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}.vwxh i{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--mute)}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.vchips span{font-size:13.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--head);white-space:nowrap}
.vchips .vc-wx{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--warn)}
.vwx code{display:block;margin-top:8px;font-size:12px;color:var(--mute);white-space:pre-wrap;word-break:break-word}.vwx code.isfetched{color:var(--fetched)}
.vf details.ofpcard,.vf #vfhist{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:18px}
.vf details.ofpcard>summary,.vf #vfhist>summary{flex-wrap:wrap;row-gap:2px}.vf details.ofpcard>summary b,.vf #vfhist>summary b{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.vf .ofpiss{flex-basis:100%;order:3}
.vf .kv span{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mute);margin-bottom:2px}.vf .kv b{font-size:16px}
.vf .vfrmk{margin-top:16px}
@media(min-width:760px){.vwxs{display:grid;grid-template-columns:1fr 1fr}.vwxs>.vwx+.vwx{border-top:0;border-left:1px solid var(--line)}.vwxs>.vnote{grid-column:1/-1}.vcols{grid-template-columns:1fr 1fr}.vrow>span{font-size:15.5px}.vrow>b{font-size:17px}.vgrp>h3{font-size:13.5px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--mapsea:color-mix(in srgb,var(--accent) 6%,var(--card));--mapland:color-mix(in srgb,var(--ink) 7%,var(--card));--mapcoast:color-mix(in srgb,var(--ink) 18%,var(--card))}}:root[data-theme="dark"]{--mapsea:color-mix(in srgb,var(--accent) 6%,var(--card));--mapland:color-mix(in srgb,var(--ink) 7%,var(--card));--mapcoast:color-mix(in srgb,var(--ink) 18%,var(--card))}
/* iPad and computer: room to spare, so the cards read at arm's length (a cockpit mount, a desk) */
@media(min-width:700px){.fcard{padding:16px 20px}.fcard .fch{font-size:18px}.fca .fcc{font-size:36px}.fcard .fcn{font-size:17.5px}.fcard .fct{font-size:16px}.fcard .fcdur{font-size:25px}.fcmid{min-width:130px}
  .fctimes{margin-top:12px;padding-top:10px}.fctimes span{font-size:13.5px}.fctimes b{font-size:23px}.fctimes i{font-size:15.5px}
  .fcwho{font-size:19px;margin-top:12px}.fcrole{font-size:14.5px;padding:3px 10px}.fcstats{font-size:18.5px;gap:6px 22px;margin-top:8px}.fcstats .ftag{font-size:15px}
  .fcard .fcrmk{font-size:17.5px}.fclab{font-size:13.5px;min-width:38px;padding-top:3px}.fcard .fcofp{font-size:17.5px;margin-top:12px;padding-top:10px}.fcvals{gap:4px 16px}
  .fcard .fcofp .ofpopen{font-size:15px;min-height:34px;height:34px;padding:0 12px}.fcard .fcwx{font-size:16px;margin-top:10px;padding-top:10px}}
@media(min-width:700px){.fctm{margin-top:10px;gap:0 8px}.fctm span{font-size:13.5px}.fctm b{font-size:23px}.fctm i{font-size:15.5px}.fcoo{font-size:16px;margin-top:8px;gap:0 14px}
  .fcmeta{margin-top:14px;padding-top:12px;gap:8px 28px}
  .fcmeta .fcstats{margin-left:auto}.fcst{padding:0 18px}.fcst i{font-size:12.5px}.fcst b{font-size:21px}.fcreg{font-size:.78em}.fcard .fcofp,.fcard .fcwx{padding:11px 16px}}
/* iPad (touch, wide): menu, page titles and their buttons, and the base text bigger */
@media(pointer:coarse) and (min-width:700px){body{font-size:15px}
  nav .brand{font-size:19px}nav a{font-size:17.5px;padding:11px 12px}nav details.navmore summary{font-size:15.5px;padding:11px 12px}nav details.navmore a{font-size:16.5px}
  nav .newbtn,nav .navsearch{font-size:17px;min-height:48px}nav a svg,nav .newbtn svg{width:20px;height:20px}
  h1{font-size:24px}main>.row button,main>.row .btn,main>.row .iconbtn{font-size:16.5px;min-height:46px}main>.row .iconbtn{width:46px;min-width:46px}}
@media(pointer:coarse) and (min-width:901px){nav{width:236px}}
@media(min-width:1000px){.fcard .fcwx .fcvals{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}}
@media(max-width:420px){.fca .fcc{font-size:24px}.fcard .fch{font-size:14.5px}.fcard .fcwx{font-size:12px}}
@media(max-width:375px){.fca .fcc{font-size:21px}.fcard .fcn{font-size:13px}}
.blogo{flex:none;display:inline-block;vertical-align:middle;color:var(--accent-ink)}
/* flight page: bigger text (phone, then iPad / computer) */
.vrow{padding:14px 16px;min-height:54px}.vrow>span{font-size:16.5px}.vrow>b{font-size:18px}.vrow>b>i{font-size:14px}.vmute{font-size:13.5px}
.vgrp>h3{font-size:14.5px}.vtext{font-size:16.5px}.vnote{font-size:13.5px}
.vwxh b{font-size:18px}.vwxh span,.vwxh i{font-size:14px}.vchips span{font-size:15px;padding:4px 11px}.vwx code{font-size:13.5px}
.vf .kv span{font-size:14px}.vf .kv b{font-size:18px}.vf details.ofpcard>summary b,.vf #vfhist>summary b{font-size:17px}.vf details.ofpcard>summary .small{font-size:14px}
.vf .vfrmk{font-size:17px}.vfcities{font-size:16.5px}.vfsub{font-size:16.5px}.vftp b{font-size:21px}.vftp i{font-size:14px}.vfsum{font-size:14.5px}.vftp span{font-size:12px}
.hmap-ap text{font-size:15px}.vfwhen{font-size:15.5px}
@media(min-width:760px){.vrow{padding:15px 18px;min-height:58px}.vrow>span{font-size:18px}.vrow>b{font-size:20px}.vrow>b>i{font-size:15px}.vgrp>h3{font-size:15.5px}.vtext{font-size:18px}.vnote{font-size:14px}
  .vwxh b{font-size:20px}.vwxh span,.vwxh i{font-size:15px}.vchips span{font-size:16.5px}.vwx code{font-size:14.5px}
  .vf .kv span{font-size:15px}.vf .kv b{font-size:20px}.vf details.ofpcard>summary b,.vf #vfhist>summary b{font-size:18.5px}.vf details.ofpcard>summary .small{font-size:15px}
  .vf .vfrmk{font-size:19.5px}.vfroute{font-size:42px}.vfroute .vfdur{font-size:34px}.vfcities,.vfsub{font-size:19px}.vftp b{font-size:28px}.vftp.up b{font-size:19px}.vftp i{font-size:16.5px}.vftp span{font-size:13px}.vfsum{font-size:17.5px}
  .hmap-ap text{font-size:17px}.vfwhen{font-size:17px}}
.vzhl small{display:block;font-size:12px;color:var(--mute);font-weight:400;margin-top:1px}
.fcfn i{font-style:normal;font-weight:700;letter-spacing:.04em;opacity:.8}
.vzhl small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}.vzhrow:has(.vzhl small) .vzhl{white-space:normal;overflow:visible}
/* phone / small iPad menu: one clean list — one line per item, same height, readable, nothing wraps */
@media(max-width:900px){
  body.navopen nav .navlinks{display:flex;flex-direction:column;gap:2px;padding:8px 10px 12px;max-height:calc(100dvh - 72px);overflow:auto}
  nav .navlinks a{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 14px;font-size:16.5px;white-space:nowrap;border-radius:10px}
  nav .navlinks a svg{width:20px;height:20px;flex:none}
  nav details.navmore{display:block;margin-top:4px;border-top:1px solid var(--line);padding-top:4px}
  nav details.navmore[open]::details-content{display:flex;flex-direction:column;gap:2px}
  nav details.navmore>summary{min-height:44px;padding:0 14px;font-size:14px;letter-spacing:.02em}
  nav details.navmore a{padding-left:14px;font-size:16.5px}
  nav .brand .bt{font-size:18px}}
/* flight page tiles: a grid of small cards (two across on a phone, four on iPad / computer) */
.vtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.vt{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;min-height:98px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden}
.vt.w2,.vtwx>.vwx{grid-column:1/-1}
.vth{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.vth svg{flex:none;color:var(--accent)}.vth .fcrole{margin-left:auto;letter-spacing:.04em}
.vtv{font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:auto;overflow-wrap:anywhere}.vtv .fcreg{font-size:14px;vertical-align:middle}
.vts{font-size:13.5px;color:var(--mute);line-height:1.35}
.vtsec{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 4px -2px}.vtsec b{font-size:15px}.vtsec span{font-size:13px;color:var(--mute)}.vtsec .btn{margin-left:auto}
.vtpp{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:17px}.vtpp b{font-weight:600}.vtpp span{margin-left:auto;font-size:13.5px;color:var(--mute)}
.vav.you{background:var(--accent);color:var(--accent-ink);font-size:9.5px}
.vtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.vtags span{font-size:13px;padding:3px 10px;border-radius:999px;background:var(--head)}
.vtac .vph{margin:-12px -14px 8px}.vtac .vph .acph.big{margin:0}.vtac .vph .acph.big img{border-radius:0;max-height:200px;width:100%;object-fit:cover}
.vtac .vacx{font-size:13.5px;color:var(--mute);margin-top:2px}.vtac .vacx:empty{display:none}.vtac .vacx .acinfo i{font-style:normal}.vtac .vacx .aci.isfetched{color:var(--fetched)}
.vtsr{display:flex;align-items:center;gap:14px;margin-top:8px;font-size:18px;font-variant-numeric:tabular-nums}.vtsr b{min-width:58px}.vtsr span{display:inline-flex;align-items:center;gap:5px;font-weight:600}.vtsr svg{color:var(--mute)}
.vtwx{display:contents}.vtwx>.vwx{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px}.vtwx>.vnote,.vtwx>.vnote.row{grid-column:1/-1;border:0;padding:0 4px}
.vtmel{font-size:14.5px;margin-top:6px}.vtmel b{font-weight:600}
.vtsun .vts{margin-top:8px}
@media(min-width:760px){.vtiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.vt{padding:14px 16px;min-height:112px}.vt.w2,.vtwx>.vwx{grid-column:span 2}
  .vth{font-size:12.5px}.vtv{font-size:30px}.vts{font-size:14.5px}.vtpp{font-size:19px}.vtsr{font-size:20px}.vtsec b{font-size:16.5px}.vtac .vph{margin:-14px -16px 10px}}
/* flight page tiles, balanced: each tile's width comes from the row-filling layout (--s2 on the phone, --s4 on iPad / computer) */
.vtiles>.vt,.vtwx>.vt{grid-column:span var(--s2,1)}
.vtiles>.vt.vtfull,.vtwx>.vwx.vtfull{grid-column:1/-1}
.vt{justify-content:center}.vt:has(.vph, .vtsec){justify-content:flex-start}.vt .vtv{margin-top:6px} /* a tile's contents centred in height (tiles in a row share the tallest one's height); a tile with a photo or sections starts at the top */
.vtsrs{display:flex;flex-wrap:wrap;gap:4px 34px}.vtsun .vtsr{margin-top:6px}
.vtcrew .vtpp:first-of-type{margin-top:10px}
@media(min-width:760px){.vtiles>.vt,.vtwx>.vt{grid-column:span var(--s4,1)}.vtiles>.vt.vtfull,.vtwx>.vwx.vtfull{grid-column:1/-1}}
/* New flight + Scan / Upload on one line in the side menu (the scan button becomes a square icon next to it); top bar unchanged */
.navact{display:contents}
@media(min-width:901px){nav .navact{display:flex;gap:8px;margin:0 0 12px;align-items:stretch}
  nav .navact .newbtn{flex:1 1 auto;margin:0;min-width:0}
  nav .navact .scanbtn{flex:none;margin:0;width:42px;padding:0;min-height:0}nav .navact .scanbtn .nl{display:none}nav .navact .scanbtn svg{width:20px;height:20px}
  body.navmini nav .navact{flex-direction:column}body.navmini nav .navact .scanbtn{width:auto;min-height:40px}}
@media(min-width:901px) and (pointer:coarse){nav .navact .scanbtn{width:48px}}
@media(pointer:coarse) and (min-width:700px) and (max-width:900px){nav .scanbtn{min-height:48px;height:48px;min-width:48px}nav .scanbtn svg{width:20px;height:20px}}
/* flight page tiles on 12 fine columns (spans come from the layout: a row that isn't full shares its space evenly) */
.vtiles{grid-template-columns:repeat(12,minmax(0,1fr))}
.vtiles>.vt,.vtwx>.vt{grid-column:span var(--s2,12)}
.vt.w2,.vtwx>.vwx{grid-column:1/-1}
@media(min-width:760px){.vtiles{grid-template-columns:repeat(12,minmax(0,1fr))}.vtiles>.vt,.vtwx>.vt{grid-column:span var(--s4,12)}.vt.w2,.vtwx>.vwx{grid-column:span 6}.vtiles>.vt.vtfull,.vtwx>.vwx.vtfull{grid-column:1/-1}}
/* aircraft tile: the photo edge to edge on top, a fixed height, the credit small over its bottom edge */
.vtac .vph .acph.big{position:relative}.vtac .vph .acphb{display:block}
.vtac .vph .acph.big img{height:190px;max-height:none}
.vtac .vph .accred{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 12px 6px;font-size:11px;line-height:1.2;color:#fff;background:linear-gradient(transparent,rgb(0 0 0/.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:760px){.vtac .vph .acph.big img{height:210px}}
/* flight page hero: the map is the card's background — open on top, then fading under the route, the times and the timeline */
.vf .vfhero.bgmap{--hv:clamp(150px,24vh,250px);position:relative;isolation:isolate;overflow:hidden;padding-top:var(--hv)}
.vf .vfhero.bgmap>.vfmap{position:absolute;inset:0;z-index:-1;margin:0;height:auto;border-radius:inherit}
.vf .vfhero.bgmap>.vfmap::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0,transparent calc(var(--hv) - 90px),color-mix(in srgb,var(--card) 78%,transparent) calc(var(--hv) + 6px),color-mix(in srgb,var(--card) 88%,transparent) calc(var(--hv) + 120px),color-mix(in srgb,var(--card) 90%,transparent) 100%)}
.vf .vfhero.bgmap .vfmapbtns{top:12px;right:12px;bottom:auto;z-index:2}
.vf .vfhero.bgmap .vfmapbtns .mini{background:color-mix(in srgb,var(--card) 85%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vf .vfhero.bgmap .vfroute,.vf .vfhero.bgmap .vfcities{text-shadow:0 0 2px var(--card),0 0 10px var(--card),0 0 18px var(--card)}
@media(min-width:700px){.vf .vfhero.bgmap{--hv:clamp(190px,26vh,280px)}}
/* photos and files on the flight page: thumbnails side by side, the remove button on each */
.vatts{padding:0;gap:10px}.vatts .att img{width:132px;height:99px;border-radius:10px}
.vatts .att button{top:6px;right:6px;background:color-mix(in srgb,var(--card) 85%,transparent);border-radius:999px;width:26px;height:26px;min-height:0;padding:0;line-height:1}
.vatts .att .doc{display:inline-flex;align-items:center;min-height:44px;padding:8px 40px 8px 12px;border-radius:10px;box-sizing:border-box}
.vatts .att:has(.doc) button{top:50%;transform:translateY(-50%)}
/* aircraft tile with a photo: the photo fills the tile, the aircraft written over its darkened lower part (tap the photo to enlarge) */
.vtac:has(.vph){position:relative;isolation:isolate;min-height:190px;justify-content:flex-end;border-color:transparent;color:#fff}
.vtac:has(.vph) .vph{position:absolute;inset:0;margin:0;z-index:-1}
.vtac:has(.vph) .vph .acph.big,.vtac:has(.vph) .vph .acphb{height:100%}
.vtac:has(.vph) .vph .acph.big img{height:100%;width:100%;object-fit:cover;max-height:none}
.vtac:has(.vph) .vph::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgb(0 0 0/0) 30%,rgb(0 0 0/.35) 55%,rgb(0 0 0/.78))}
.vtac:has(.vph)>:not(.vph){pointer-events:none}.vtac:has(.vph) a{pointer-events:auto}
.vtac:has(.vph) .vth,.vtac:has(.vph) .vth svg{color:rgb(255 255 255/.85)}.vtac:has(.vph) .vts,.vtac:has(.vph) .vacx{color:rgb(255 255 255/.82)}
.vtac:has(.vph) .fcreg{color:#fff;border-color:rgb(255 255 255/.5);background:rgb(0 0 0/.25)}
.vtac:has(.vph) .vph .accred{top:0;right:0;bottom:auto;left:auto;max-width:72%;padding:4px 10px;border-radius:0 0 0 10px;background:rgb(0 0 0/.4);font-size:10.5px}
@media(min-width:760px){.vtac:has(.vph){min-height:220px}}
.vbox>.vatts,.vatts{padding:10px}
/* no photo of this aircraft or its type: a drawing of the exact type, in colour, on a sky gradient */
.acph.big.gfx{display:block;height:100%}
.acgfx{position:relative;height:100%;min-height:160px}.acgfx svg{display:block;width:100%;height:100%}
.acgfx .g1{stop-color:color-mix(in srgb,var(--accent) 88%,#fff)}.acgfx .g2{stop-color:color-mix(in srgb,var(--accent) 55%,#0b1020)}
.acgfx .acgc circle{stroke:rgb(255 255 255/.13);stroke-width:1.5}
.acgfx .acgpl{fill:rgb(255 255 255/.94);filter:drop-shadow(0 6px 10px rgb(0 0 0/.25))}
.acgfx>span{position:absolute;top:0;right:0;padding:4px 10px;border-radius:0 0 0 10px;background:rgb(0 0 0/.3);color:#fff;font-size:10.5px}
.vtac:has(.vph) .vph .acgfx{height:100%}
.acph:not(.big) .acgfx{min-height:0}.acph:not(.big) .acgfx>span{display:none} /* offline drawing in the small table thumbnails */
.vtac:has(.gfx) .vph::after{background:linear-gradient(to bottom,rgb(0 0 0/0) 45%,rgb(0 0 0/.5))}
/* crew tile: each person on a row (avatar, name, role under the name), thin lines between, tags at the bottom — fills its height */
.vtcrew .vtpp{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center;margin-top:0;padding:10px 0;border-top:1px solid var(--line)}
.vtcrew .vth+.vtpp{margin-top:8px;border-top:0}
.vtcrew .vtpp .vav{grid-row:1/3;width:40px;height:40px;font-size:14px}
.vtcrew .vtpp b{font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtcrew .vtpp span{margin-left:0;grid-column:2;font-size:13.5px}
.vtcrew .vtags{margin-top:auto;padding-top:8px}
.vav.you{font-size:11px}
@media(min-width:760px){.vtcrew .vtpp b{font-size:20px}.vtac:has(.vph){min-height:200px}}
@media(min-width:760px){.vtac:has(.vph){min-height:270px}.vtac:has(.vph) .vtv{font-size:36px}.vtac:has(.vph) .vts{font-size:15.5px}
  .vtcrew .vtpp{padding:14px 0}.vtcrew .vtpp .vav{width:46px;height:46px;font-size:15px}.vtcrew .vtpp span{font-size:14.5px}}
/* Import your logbook */
.imlead{margin:-4px 0 14px}
.imdrop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px;border:2px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent) 5%,var(--card));cursor:pointer;text-align:center;color:var(--accent)}
.imdrop.on{background:color-mix(in srgb,var(--accent) 12%,var(--card))}.imdrop input{position:absolute;opacity:0;width:1px;height:1px}.imdrop b{font-size:19px;color:var(--ink)}.imdrop span{color:var(--mute);font-size:14.5px}
.imfound{margin-top:16px}.imsrc{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.imsrc b{font-size:20px}
.imopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 14px;margin:14px 0 6px}.imopts label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--mute)}.imopts select{font-size:15px}
.imfound h3{font-size:15px;margin:16px 0 6px}
.imprev td,.imprev th{white-space:nowrap;font-size:14px}.imprev tr.imbad td{background:color-mix(in srgb,#e5484d 9%,transparent)}
.imwarn{color:#c2410c;font-size:14px}.imok{color:#15803d;font-weight:600}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .imwarn{color:#fb923c}:root:not([data-theme="light"]) .imok{color:#4ade80}}:root[data-theme="dark"] .imwarn{color:#fb923c}:root[data-theme="dark"] .imok{color:#4ade80}
.imcols{margin-top:12px}.imcols summary{cursor:pointer;font-size:14.5px}.imcolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px;margin-top:10px}
.imcolgrid label{display:flex;flex-direction:column;gap:3px;font-size:13.5px}.imcolgrid label span{display:flex;gap:8px;justify-content:space-between}.imcolgrid i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.imtot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.imtot>div:first-child{display:flex;flex-direction:column}.imtot b{font-size:24px;font-variant-numeric:tabular-nums}
.imtot label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--mute)}.imtot input{width:150px}
.imgo{margin-top:16px;gap:12px;flex-wrap:wrap}
.imlikely{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--head);max-height:320px;overflow:auto}.imlikely label{font-size:14px;padding:3px 0}
.imhow{margin-top:16px}.imhow p{margin:10px 0}
.imalt{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.imalt .card{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;margin:0}
.imdone h2{margin-top:0}
/* Schedule */
.sclink{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px}
.scimp .seg{margin-bottom:10px}.scimp textarea{width:100%;box-sizing:border-box;font:14px ui-monospace,Menlo,monospace}
.scday h3{font-size:14px;font-weight:600;color:var(--mute);margin:18px 4px 6px;letter-spacing:.01em}.scday .card{padding:4px 14px;margin:0}
.tolog h2{margin:0 0 6px;font-size:17px}
.scrow{display:grid;grid-template-columns:64px minmax(0,1fr) 110px auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.card>.scrow:first-child,.tolog h2+.scrow{border-top:0}
.scrow.dh{opacity:.72}
.sct{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}.sct b{font-size:19px}.sct span{font-size:12.5px;color:var(--mute)}.sct.r{text-align:right}
.scr{display:flex;align-items:center;gap:8px;font-size:19px}.scr i{flex:1;max-width:120px;height:2px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent));border-radius:2px}
.scs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--mute);margin-top:3px}
.sca{display:flex;gap:6px}
@media(max-width:600px){.scrow{grid-template-columns:52px minmax(0,1fr) 64px;row-gap:8px}.sca{grid-column:1/-1;justify-content:flex-end}.sct b,.scr{font-size:17px}}
/* Paper logbook */
.pppage{margin-top:14px}.ppimg{display:block;width:100%;max-height:260px;object-fit:contain;background:var(--head);border-radius:10px;margin:10px 0;cursor:zoom-in}.ppimg.big{max-height:none;cursor:zoom-out}
.ppgrid{border-collapse:collapse}.ppgrid th{font-size:12px;white-space:nowrap;padding:4px 6px}.ppgrid td{padding:2px}.ppgrid input{width:78px;font-size:14px;padding:5px 6px;box-sizing:border-box}
.ppgrid td:nth-child(1) input{width:96px}.ppgrid td:nth-child(4) input,.ppgrid td:nth-child(5) input{width:120px}.ppgrid td:nth-child(19) input{width:160px}
.ppgrid td.ppflag input{background:color-mix(in srgb,#f59e0b 22%,var(--card));border-color:#f59e0b}
/* Schedule: month calendar (always shown first) and accepted schedules */
.sccal{padding:12px 14px}.scch{display:flex;align-items:center;gap:8px;margin-bottom:8px}.scch b{font-size:18px;min-width:150px;text-align:center}.scch .iconbtn{font-size:22px;line-height:1;width:36px;height:36px}
.scgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.scwd{font-size:12px;font-weight:600;color:var(--mute);text-align:center;padding:2px 0}
.scd{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-height:88px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;overflow:hidden}
.scd.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.scd.today .scn{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px}
.scd.on{background:color-mix(in srgb,var(--accent) 10%,var(--card))}.scn{font-size:13px;font-weight:600;align-self:flex-start}
.scf{font-size:11.5px;line-height:1.25;padding:2px 4px;border-radius:5px;background:color-mix(in srgb,var(--accent) 16%,var(--card));color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scf b{font-weight:600}
.scf.lg{background:var(--head);color:var(--mute)}.scf.dh{opacity:.6;font-style:italic}.scmore{font-size:11px;color:var(--mute)}
.scdots{display:none;gap:3px;margin-top:auto}.scdots i,.sclegend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent)}.scdots i.lg,.sclegend i.lg{background:color-mix(in srgb,var(--ink) 30%,transparent)}
.sclegend{display:flex;gap:14px;font-size:12.5px;color:var(--mute);margin-top:8px}.sclegend span{display:inline-flex;align-items:center;gap:5px}
.scrow.lg{cursor:pointer;opacity:.85}
@media(max-width:600px){.scd{min-height:52px;padding:4px}.scf,.scmore{display:none}.scdots{display:flex}.scch b{font-size:16px;min-width:120px}}
.rsrc{margin-top:14px}.rsg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.rsgh{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);width:100%}
.rsc{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:inherit;font:inherit;font-size:14px;text-align:left;cursor:pointer;max-width:100%}
.rsc i{font-style:normal;font-size:11.5px;color:var(--mute)}.rsc.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.rshow{margin:10px 0;padding:10px 14px;border-radius:12px;background:var(--head)}.rshow p{margin:4px 0 0}
.schead{font-size:17px;margin:22px 4px 0}
/* Schedule calendar: a day's legs as a chain of airports, trips as a band across the days, nights away */
.scd{position:relative}.scd.has .scn{margin-bottom:2px}
.scchain{display:flex;flex-wrap:wrap;align-items:center;column-gap:2px;font-size:12.5px;font-weight:700;line-height:1.2;letter-spacing:.02em}.scchain i{font-style:normal;font-weight:400;color:var(--mute)}
.scmeta{font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scnight{display:inline-flex;align-items:center;gap:3px;margin-top:auto;font-size:11.5px;color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.scd.lgday .scchain{color:var(--mute);font-weight:600}
.scd.tone,.scd.tstart,.scd.tmid,.scd.tend{border-bottom:4px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.scd.tstart,.scd.tmid,.scd.tend{background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.scd.tmid,.scd.tend{border-top-left-radius:4px;border-bottom-left-radius:4px}.scd.tstart,.scd.tmid{border-top-right-radius:4px;border-bottom-right-radius:4px}
.sclegend i.trip{width:16px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--accent) 60%,transparent)}
.scdots b{font-size:11px;font-weight:700;color:var(--accent)}.scdots svg{color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
@media(max-width:600px){.scchain,.scmeta,.scnight{display:none}.scdots{display:flex;align-items:center;gap:3px}}
/* first steps on the Overview */
.startc h2{margin:0;font-size:18px}.startg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.startb{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--card));text-decoration:none;color:inherit}
.startb b{font-size:16.5px;color:var(--accent)}.startb span{font-size:13.5px;color:var(--mute)}
.scbar{position:relative;display:block;height:5px;margin-top:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.scbar i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--accent);box-shadow:0 0 0 1px var(--card)}.scbar i.lg{background:color-mix(in srgb,var(--ink) 35%,transparent)}
@media(max-width:600px){.scbar{display:block;height:4px;margin-top:auto}.scd .scdots{margin-top:2px}}
.scdest{display:none}
@media(max-width:600px){.scdest{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--ink)}.scd.lgday .scdest{color:var(--mute)}}
.pill.ai{background:color-mix(in srgb,#8b5cf6 18%,var(--card));color:#7c3aed}.scai{margin-top:10px}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.ai{color:#c4b5fd}}:root[data-theme="dark"] .pill.ai{color:#c4b5fd}
/* Schedule spacing: calendar, the chosen day, the import panel, the list each in their own block */
#scdaybox:not(:empty){margin-top:14px}#scpanel:not([hidden]){margin-top:16px}#scpanel .scimp{margin:0}.sclink,.scclr{margin-top:12px}
.scempty{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
.rsrc summary{cursor:pointer;padding:6px 0}.rsrc[open] summary{margin-bottom:6px}
.scsrc{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute);font-size:13px}
/* Schedule: logged flights in green, scheduled in blue */
:root{--logged:#16a34a}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--logged:#4ade80}}:root[data-theme="dark"]{--logged:#4ade80}:root[data-theme="dark"]{--logged:#4ade80}
.scf.lg{background:color-mix(in srgb,var(--logged) 18%,var(--card));color:var(--ink)}
.scbar i.lg,.scdots i.lg,.sclegend i.lg{background:var(--logged)}
.scd.lgday{background:color-mix(in srgb,var(--logged) 7%,var(--card));border-color:color-mix(in srgb,var(--logged) 35%,var(--line))}.scd.lgday .scchain{color:var(--ink);font-weight:700}
.sclg{position:absolute;top:5px;right:5px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--logged);color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .sclg{color:#06210f}}:root[data-theme="dark"] .sclg{color:#06210f}
.scrow.lg{opacity:1;border-left:3px solid var(--logged);padding-left:10px}
.lgpill{display:inline-flex;align-items:center;gap:3px;margin-top:2px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--logged) 18%,var(--card));color:var(--logged);font-size:11.5px;font-weight:700}
@media(max-width:600px){.sclg{width:14px;height:14px;top:3px;right:3px}.sclg svg{width:9px;height:9px}}
/* Schedule: calendar-link card (name, auto-sync, actions, read details folded) and wide leg rows */
.sclink{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center}
.sclh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}.sclm{grid-column:1}.sclb{grid-column:2;grid-row:1/3;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill.scsync{background:color-mix(in srgb,var(--logged) 16%,var(--card));color:var(--logged);font-size:11.5px}
.screp{grid-column:1/-1;margin-top:4px}.screp summary{cursor:pointer;width:max-content}
@media(max-width:600px){.sclink{grid-template-columns:1fr}.sclb{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:6px}}
.sccrew{display:inline-flex;align-items:center;gap:4px}.sccrew svg{width:14px;height:14px}
@media(min-width:601px){.scrow{grid-template-columns:64px minmax(0,560px) 96px minmax(0,1fr)}.sca{justify-self:end}.scr i{max-width:none}}
.tlb{display:flex;gap:6px;flex:none}
details.navmore .navcur{margin-left:6px;font-weight:600;color:var(--accent);text-transform:none;letter-spacing:0}details.navmore[open] .navcur{display:none}body.navmini details.navmore .navcur{display:none}
details.navmore>summary .navcur{margin-right:auto;margin-left:2px}
/* Flights to log: same look as the Schedule rows, an amber edge instead of an outlined box */
.card.tolog{border-color:var(--line);border-left:4px solid var(--warn);padding:12px 16px 6px}
.tlh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}.tlh h2{margin:0;font-size:17px}
.tlcount{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:color-mix(in srgb,var(--warn) 20%,var(--card));color:var(--warn);font-weight:700;font-size:12.5px}
.tlrow2{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}.tlrow2 .scm{max-width:620px}.tlrow2 .tlb button{white-space:nowrap}
.tld{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}.tld b{font-size:17px;white-space:nowrap}.tld span{font-size:12.5px;color:var(--mute)}
.tlrow2 .tlb{justify-self:end}.tlrow2 .scr i{max-width:none}.tlmore{padding:8px 0}
@media(max-width:600px){.tlrow2{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.tld{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:6px}.tld b{font-size:15px}.tlrow2 .scr{font-size:17px}.tlrow2 .tlb{grid-column:1/-1;justify-self:end}.tlh .small{flex-basis:100%}}
#scpanel:not([hidden]){margin:16px 0}.scih{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.scih h2{margin:0;font-size:17px}
/* flight page: the map shows across the whole card (framed like the logbook cards), a light even tint; text keeps a soft halo */
.vf .vfhero.bgmap>.vfmap::after{background:linear-gradient(to bottom,color-mix(in srgb,var(--card) 8%,transparent) 0,color-mix(in srgb,var(--card) 30%,transparent) 50%,color-mix(in srgb,var(--card) 52%,transparent) 100%)}
.vf .vfhero.bgmap .vfsub,.vf .vfhero.bgmap .fcline,.vf .vfhero.bgmap .fctm,.vf .vfhero.bgmap .fcoo,.vf .vfhero.bgmap .vfdur,.vf .vfhero.bgmap .fetchleg,.vf .vfhero.bgmap .vfrmk{text-shadow:0 0 2px var(--card),0 0 8px var(--card),0 0 16px var(--card)}
/* Settings: sections with a menu, calmer cards, the Appearance switch */
.setp{max-width:1120px}.setp>h1{margin-bottom:6px}
.setwrap{display:block}.setnav{display:flex;gap:6px;overflow-x:auto;position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0 10px;margin:0 -2px;scrollbar-width:none}.setnav::-webkit-scrollbar{display:none}
.setnav button{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;font-size:14px;min-height:0}
.setnav button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.setsech{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);margin:22px 4px 8px}
.setsec{scroll-margin-top:64px}.setsec .card{margin:0 0 12px;padding:16px 18px;border-radius:14px}
.setsec .card>h2:first-child{font-size:16.5px;margin:0 0 2px}.setsub{margin:0 0 12px}
.setsec .card .fgrid{gap:12px 16px}
@media(min-width:1000px){.setwrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;align-items:start}
  .setnav{flex-direction:column;position:sticky;top:16px;padding:0;margin:20px 0 0;background:none}.setnav button{text-align:left;border-color:transparent;background:none;border-radius:10px;padding:9px 12px}
  .setnav button:hover{background:var(--head)}.setnav button.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-color:transparent}.setsec{scroll-margin-top:16px}}
.themeseg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:600px}
.themeseg button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-weight:600;font-size:14.5px;min-height:0}
.themeseg button[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent)}
.setnav button{display:flex;justify-content:flex-start;text-align:left;width:auto}@media(max-width:999px){.setnav button{justify-content:center}}
.setsech.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}.setsec:first-child .card{margin-top:16px}
/* Photos and documents: preview tiles in a grid that always fits the screen, grouped by month */
.gbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 6px}.gbar input{flex:1 1 240px;min-width:0}
.gmh{font-size:15px;margin:18px 2px 8px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media(min-width:900px){.ggrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.gtile{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gth{position:relative;display:block;aspect-ratio:4/5;background:color-mix(in srgb,var(--ink) 5%,var(--card));overflow:hidden}
.gth.ph{aspect-ratio:4/3}
.gth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .2s}
.gth.ok img{opacity:1}.gth.ok .gph{display:none}
.gph{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute)}
.gkind{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink)}
.gmeta{display:flex;flex-direction:column;gap:1px;padding:8px 10px 10px;font-size:13px;min-width:0}.gmeta b{font-size:13.5px}
.gmeta span{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gname{font-size:12px}
.gdel{position:absolute;top:6px;right:6px;width:28px;height:28px;min-height:0;padding:0;border-radius:999px;line-height:1;background:color-mix(in srgb,var(--card) 85%,transparent);border:1px solid var(--line);opacity:.85}
@media(hover:hover){.gdel{opacity:0}.gtile:hover .gdel{opacity:.9}}
details.navmore>summary .navcur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.empmiss{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:11.5px;font-weight:600;color:var(--warn);text-decoration:none;white-space:nowrap}.empmiss:hover{text-decoration:underline}.empno{font-weight:500;color:var(--mute);font-size:.82em}
.scme{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-left:4px solid var(--accent)}.scme>div{flex:1 1 300px}
/* roster changes: the card on Schedule, the banner on Overview / Logbook, flights the roster dropped */
.scchg{border-left:4px solid var(--accent)}.scchg h2{margin:0;font-size:17px}
.chl{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line);font-size:14px}.chl:first-of-type{border-top:0}
.chk{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;min-width:58px;text-align:center;background:var(--head)}
.chk.chn{background:color-mix(in srgb,var(--accent) 16%,var(--card));color:var(--accent)}.chk.cht{background:color-mix(in srgb,var(--warn) 18%,var(--card));color:var(--warn)}
.chk.chg{background:color-mix(in srgb,var(--bad) 16%,var(--card));color:var(--bad)}.chk.chb{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.chban{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;color:var(--ink);border-left:4px solid var(--accent)}.chban span{color:var(--mute)}
.scrow.gone .scr b{text-decoration:line-through;text-decoration-color:var(--bad)}.pill.gonep{background:color-mix(in srgb,var(--bad) 15%,var(--card));color:var(--bad)}
@media(min-width:601px){.scrow{grid-template-columns:64px minmax(0,1fr) 96px auto}.scrow .scm{max-width:560px}}
/* Flights to log: the logbook cards themselves on a faded amber background, Log it / Dismiss along the foot */
section.tolog{margin:0 0 16px}section.tolog .tlh{margin:4px 2px 8px}
.tlcards .fcard{background:color-mix(in srgb,var(--warn) 7%,var(--card));border-color:color-mix(in srgb,var(--warn) 25%,var(--line));cursor:pointer}
.tlcards .tlfoot{border-top-color:color-mix(in srgb,var(--warn) 20%,var(--line))}
.tlfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px -4px -4px;padding:10px 4px 2px;border-top:1px solid var(--line);position:relative;z-index:1}
.tlst{font-size:13px;font-weight:600;color:var(--warn)}
/* what a recent flight still lacks: an amber line on the card, a mark in the table */
.fcmiss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px -4px -4px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--warn) 12%,var(--card));color:var(--warn);font-size:13px;position:relative;z-index:1}
.fcmiss span{flex:1;min-width:0}.fcmiss b{font-weight:700}
.savebar:has(.missbar){flex-wrap:wrap}.savebar .missbar{order:-1;flex:1 1 100%}.savebar .missbar button{flex:none;white-space:nowrap}
.missbar{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--warn) 12%,var(--card));color:var(--warn);font-size:13.5px}
/* the ACARS photo row: only in "New flight from ACARS" (slower than typing the times) */
.flightform:not(.acarsmode) .acarsrow{display:none!important}
.missbar.float{position:fixed;left:12px;right:12px;z-index:200;box-shadow:0 4px 18px rgba(0,0,0,.35);background:color-mix(in srgb,var(--warn) 18%,var(--card))}
.missbar.done{background:color-mix(in srgb,var(--ok) 12%,var(--card));color:var(--ok)}
.flightform input.missf{border-color:var(--warn);box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 8%,var(--card))}
.flightform .row.missf{outline:2px solid var(--warn);outline-offset:3px;border-radius:10px}
/* a whole row of a section framed as missing (Takeoffs and landings: I flew the takeoff / landing): the frame inside the row, never over the
   section's edges, with the same space above and below the buttons (the row alone has space only above them) */
.flightform .fsec>.row.missf{outline-offset:-4px;padding:12px 16px!important;margin:0!important}
.missdot{display:inline-grid;place-items:center;width:22px;height:22px;min-height:22px;padding:0;margin-right:4px;border-radius:50%;border:0;background:var(--warn);color:#fff;font-weight:800;font-size:13px;line-height:1;vertical-align:middle;cursor:pointer}
.tlfoot .tlb{margin-left:auto}

/* very wide screens: two flight cards side by side */
/* two side by side from an iPad in landscape up (Maxime 2026-11-07: "try 2 cards by width in landscape on iPad"), three on a very wide screen */
@media(min-width:1700px),(min-width:1100px) and (orientation:landscape){.fcards:not(.tlcards){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.fcards:not(.tlcards)>.pendhead{grid-column:1/-1}
  .fcards:not(.tlcards)>.fcard{display:flex;flex-direction:column}.fcards:not(.tlcards)>.fcard>*{order:3}.fcards:not(.tlcards)>.fcard>.fch,.fcards:not(.tlcards)>.fcard>.fcr{order:0}.fcards:not(.tlcards)>.fcard>.fcrmk{order:1}
  .fcards:not(.tlcards)>.fcard>.fcmeta{order:2;margin-top:auto}.fcards:not(.tlcards)>.fcard>.fcr{margin-bottom:14px}}
/* two columns: both cards of a row the same height, the remark under the route, the crew and counts line at the same height at the bottom */
@media(min-width:1700px){.tlcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
/* flight page, wide screens: like the logbook cards — no open band on top, the map underneath the whole card, the route between the texts; Explore map under the times */
@media(min-width:700px){.vf .vfhero.bgmap{--hv:0px;padding-top:20px;padding-bottom:52px}.vf .vfhero.bgmap .vfmapbtns{top:auto;bottom:12px;right:14px}}
/* flight page: the map is the background of the whole page (behind the top card and every tile); tiles see-through with a soft blur */
.vf:has(.vfhero.bgmap){position:relative;isolation:isolate}
.vf .vfhero.bgmap{position:static;overflow:visible;isolation:auto;background:transparent;border-color:transparent;box-shadow:none}
.vf .vfhero.bgmap>.vfmap{position:absolute;inset:-6px;z-index:-1;border-radius:14px;overflow:hidden}
.vf .vfhero.bgmap>.vfmap::after{background:linear-gradient(to bottom,color-mix(in srgb,var(--card) 6%,transparent) 0,color-mix(in srgb,var(--card) 22%,transparent) 30%,color-mix(in srgb,var(--card) 40%,transparent) 100%)}
.vf .vfhero.bgmap .vfmapbtns{top:calc(var(--herob,300px) - 50px)!important;bottom:auto!important;right:14px;z-index:3}
.vf .vfhero.bgmap .vfbtnroom{height:44px} /* no remarks: the row the Explore map button sits in, so it never covers the IN time */
.vf:has(.vfhero.bgmap) :is(.vt,.vtsec>.vt,details.card,.vwx){background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vf:has(.vfhero.bgmap) .vfbar{position:relative;z-index:1}

/* Log a flight: roomier and easier to read on every screen. Same fields, same order, same buttons: only sizes and spacing change */
.flightform{font-size:15px}
.flightform .fsec{margin-bottom:18px}
.flightform .fsec.step .steptog{min-height:50px;padding:10px 16px;font-size:14px}
.flightform .stepn{width:28px;height:28px;font-size:14px}
.flightform .flab{font-size:14px;line-height:1.35}
.flightform input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),.flightform select,.flightform textarea{font-size:16px;min-height:44px;padding:9px 12px}
.flightform textarea{line-height:1.45}
.flightform .dur{gap:6px}
.flightform .dur input{width:86px}
.flightform .tlab{font-size:13px}
.flightform .dur .x{min-height:36px;min-width:32px;font-size:14px}
.flightform .dur .link{font-size:12.5px}
.flightform .fval .chip{font-size:14px;padding:6px 13px;min-height:34px}
.flightform .fval .chips{gap:8px;margin-top:10px}
.flightform .row{gap:10px}
.flightform .fval>.row.tight:has(>.tlab>.dur){gap:12px 28px}
.flightform .savebar button{min-height:46px;font-size:15px;padding:10px 16px}
@media(min-width:901px){
  .flightform button.mini{font-size:14px;padding:6px 11px}
  .flightform .frow{grid-template-columns:200px minmax(0,1fr)}
  .flightform .flab{padding:16px 18px}
  .flightform .fval{padding:12px 16px}
  .flightform .fval input[type=text]:not([data-dur]),.flightform .fval input:not([type]):not([data-dur]),.flightform .fval input[type=date]{min-width:190px}
}

/* file viewer (OFP PDF, photos): full screen inside the app, Back at the top */
#docview{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column}
#docview .dvbar{display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));background:var(--card);border-bottom:1px solid var(--line)}
#docview .dvback{font-size:15px;padding:8px 14px;font-weight:600}
#docview .dvname{font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#docview .dvbody{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px}
#docview .dvbody img{width:100%;max-width:1000px;height:auto;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
#docview .dvwait{padding:30px}
body.dvopen{overflow:hidden}
@media print{#docview{display:none!important}}
/* phone: the Flight number buttons share the width and wrap their text, never squeezed to nothing (text was printed over each other) */
@media (max-width:600px){.fnrow button{flex:1 1 auto;min-width:min-content;white-space:normal!important}.fnrow .acarsbtns{display:flex;flex:1 1 100%}.fnrow .acarsbtns label.btn{flex:1 1 auto;justify-content:center}}

/* Import / Export page */
.iesec{margin:22px 0 8px;font-size:19px}.exbig{font-size:16px;padding:12px 18px}.exlist{margin:12px 0 6px;padding-left:20px;line-height:1.6}.exrow{gap:10px;flex-wrap:wrap}.exmore{margin-top:10px}.exmore summary{cursor:pointer;padding:6px 0}.exopts{padding:8px 0 2px}.exfmts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}

/* Logbook table: the page scrolls as usual; once the column names leave the screen, a copy of them stays pinned at the top (#lbhead) */
#lbhead{position:fixed;z-index:60;overflow:hidden;background:var(--head);box-shadow:0 6px 10px -8px rgba(0,0,0,.45);border-bottom:1px solid var(--line)}
#lbhead .lbhcopy{position:relative}#lbhead .lbhc{position:absolute;display:flex;box-sizing:border-box;overflow:hidden;background:var(--head)}#lbhead .lbhc.acts{z-index:2}
@media print{#lbhead{display:none}}
/* + New flight is in the side menu (and the phone's top bar): not repeated on the page */
main .pagenew{display:none!important}
/* page header buttons: one height (44 px), the search / filter toggle a 44 × 44 square */
main > .row:first-child > .btn,main > .row:first-child > button,main > .row:first-child > details > summary.btn,main .phead > .btn,main .phead > button,main .phead > details > summary.btn{height:44px!important;min-height:44px!important;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
main > .row > .lbtog,main .phead > .lbtog{width:44px!important;min-width:44px!important;max-width:44px;height:44px!important;min-height:44px!important;padding:0!important;flex:0 0 44px;align-self:center;aspect-ratio:auto}

/* All tools: a small tag on pages still in testing */
.tlink{padding:3px 0}.tstag{font-size:11px;padding:1px 7px;margin-left:6px;vertical-align:middle;background:var(--chip);color:var(--mute)}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 24px}.toolgrp h3{font-size:14px;margin:12px 0 4px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
/* Settings → Pilots */
.pltab{width:100%}.pltab td,.pltab th{vertical-align:top;padding:8px 6px}.pltab .mini{margin-left:6px}
.plreqh{font-size:15px;margin:6px 0 8px}.plreqs{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.plreq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:10px}

/* Aircraft, People and Airports as cards (Cards / Table switch in the toolbar). The table markup stays (same rows, same clicks,
   same selection boxes): each row becomes a card in a grid */
.viewseg{flex:none}.viewseg button{min-width:64px}
.scroll:has(> table.cardgrid){overflow:visible;max-height:none;border:0;background:none;box-shadow:none}
table.ltable.cardgrid{display:block;border:0}
table.ltable.cardgrid thead{display:none}
table.ltable.cardgrid tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
table.ltable.cardgrid tbody tr.gcrow{display:flex;position:relative;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
table.ltable.cardgrid tbody tr.gcrow:hover{background:var(--card);transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.10);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
table.ltable.cardgrid tbody tr.gcrow.mute{opacity:.6}
table.ltable.cardgrid tbody td{display:block;height:auto;padding:0;border:0}
table.ltable.cardgrid tbody td.selc{display:none;position:absolute;top:10px;left:10px;z-index:2}
body.selmode table.ltable.cardgrid tbody td.selc{display:block}
body.selmode table.ltable.cardgrid tbody td.selc input{width:22px;height:22px}
table.ltable.cardgrid td.gcard{flex:1;min-width:0;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px}
table.ltable.cardgrid .gcard .gcph{display:block;width:calc(100% + 32px);height:132px;margin:-16px -16px 2px;border-radius:0;background:color-mix(in srgb,var(--accent) 8%,var(--head))}
.gcard .gcph.none{display:none}
table.ltable.cardgrid .gcard .gcph img{width:100%;height:132px;object-fit:cover;border-radius:0}
.gcard .gcph .acgfx,.gcard .gcph .acgfx svg{display:block;width:100%;height:132px;min-height:0}
.gchead{display:flex;align-items:flex-start;gap:12px;min-width:0}
.gcid{flex:1;min-width:0}
.gctitle{font-size:20px;font-weight:800;letter-spacing:.3px;line-height:1.15;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gctitle .flag{font-size:16px}
.gciata{font-size:12px;font-weight:700;color:var(--mute);background:var(--head);border-radius:6px;padding:2px 6px;letter-spacing:.5px}
.gcsub{color:var(--mute);font-size:13.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcsub .badge{font-size:10.5px;vertical-align:1px}
.gcmute{font-size:12.5px}
.gchead .oplogo{height:22px;width:auto;flex:none;margin-top:2px}
.gchead .ib{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--mute);background:var(--head)}
.gchead .ib:hover{color:var(--accent)}
.gcnote{font-size:13px;color:var(--mute)}.gcnote b{color:var(--ink)}
.gcchips{display:flex;flex-wrap:wrap;gap:5px}
.gcav{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;letter-spacing:.5px;color:hsl(var(--h) 55% 32%);background:hsl(var(--h) 70% 90%)}
.gcbar{height:6px;border-radius:99px;background:var(--head);overflow:hidden}
.gcbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#60a5fa),var(--accent))}
.gcstats{display:flex;justify-content:space-between;gap:10px;margin-top:auto}.gcstats div:last-child{text-align:right}
.gcstats div{min-width:0}
.gcstats b{display:block;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcstats span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .gcav{color:hsl(var(--h) 80% 82%);background:hsl(var(--h) 35% 24%)}:root:not([data-theme="light"]) table.ltable.cardgrid tbody tr.gcrow{box-shadow:none}}
:root[data-theme="dark"] .gcav{color:hsl(var(--h) 80% 82%);background:hsl(var(--h) 35% 24%)}:root[data-theme="dark"] table.ltable.cardgrid tbody tr.gcrow{box-shadow:none}
@media(max-width:600px){table.ltable.cardgrid tbody{grid-template-columns:1fr;gap:10px}.gctitle{font-size:18px}
  /* page titles never break inside a word ("Peopl e"): the title takes its own line above the buttons */
  main .phead h1{white-space:nowrap;flex:1 0 100%}}
.gchead.gcperson{align-items:center}

/* ---------- badges (public/badges.js) ---------- */
.t-bronze{--tc:#c27a3a}.t-silver{--tc:#94a3b8}.t-gold{--tc:#e0a10b}.t-platinum{--tc:#38bdf8}.t-legend{--tc:#a855f7}
.bgprog{height:8px;border-radius:99px;background:var(--head);overflow:hidden;margin:6px 0 4px}
.bgprog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#ec4899 55%,#8b5cf6);transform-origin:left;animation:bgfill 1.1s cubic-bezier(.2,.8,.2,1) both}
.bgprog.big{height:10px}
@keyframes bgfill{from{transform:scaleX(0)}}
.bgtiers{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--mute);margin-top:6px}
.bgtiers span{display:inline-flex;align-items:center;gap:6px}
.bgtiers i{width:10px;height:10px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 30%,transparent)}
/* a medal you can tap */
.bgm{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:16px;text-align:center;position:relative;
  animation:bgin .55s cubic-bezier(.2,1.4,.4,1) backwards;animation-delay:calc(var(--k,0) * 45ms);transition:background .15s}
.bgm:hover,.bgm:focus-visible{background:var(--head)}
.bgm:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bgm span{font-size:12.5px;font-weight:650;line-height:1.25;max-width:110px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bgm small{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.bgm .medal{transition:transform .35s cubic-bezier(.2,1.4,.4,1),filter .2s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.bgm:hover .medal{transform:translateY(-4px) rotate(-6deg) scale(1.08)}
.medal:not(.locked){filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--tc) 45%,transparent))}
.medal.locked{filter:grayscale(1) opacity(.45)}
.bgm.off span{color:var(--mute);font-weight:550}
@keyframes bgin{from{opacity:0;transform:scale(.6) translateY(10px)}}
/* the shine that crosses an earned medal now and then (and on hover) */
:is(.bglatest,.bgrow) .bgm:not(.off)::after{content:"";position:absolute;top:10px;left:50%;width:84px;height:84px;margin-left:-42px;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;mix-blend-mode:overlay;animation:bgshine 6s ease-in-out infinite;animation-delay:calc(var(--k,0) * 270ms + 1s)}
.bgrow .bgm:not(.off)::after{width:72px;height:72px;margin-left:-36px}
.bgm:hover::after{animation:bgshine .9s ease-out}
@keyframes bgshine{0%,70%{background-position:150% 0}100%{background-position:-60% 0}}
/* Overview card */
.bgcard .bgsum{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 10px;margin:10px 0 4px}
.bgcard .bgsum b{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1}
.bgcard .bgsum span{color:var(--mute)}.bgcard .bgsum .bgprog,.bgcard .bgsum .bgtiers{grid-column:1/-1}
.bgrow{display:flex;gap:4px;overflow-x:auto;padding:6px 2px 8px;margin:4px -6px 0;scrollbar-width:none;scroll-snap-type:x proximity}
.bgrow::-webkit-scrollbar{display:none}.bgrow .bgm{flex:0 0 104px;scroll-snap-align:start}
.bgnextup{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;display:grid;gap:6px}
.bgnx{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:12px}
.bgnx:hover{background:var(--head)}.bgnx b{font-size:14px}.bgnx .bgprog{height:6px;margin:5px 0 2px}
/* Badges page */
.bghero .bgheronum{display:flex;align-items:baseline;gap:10px}.bghero .bgheronum b{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px}.bghero .bgheronum span{color:var(--mute)}
.bgsec h2{margin:22px 0 6px}
/* Badges page: hundreds of medals (each a shadowed SVG) — sections off the screen are not drawn until scrolled to (memory and battery) */
.bgsec:not(.bglatest):not(.bgnextsec){content-visibility:auto;contain-intrinsic-size:auto 640px}
.bggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:4px}
@media(max-width:600px){.bggrid{grid-template-columns:repeat(3,1fr)}.bgm span{font-size:12px}}
/* detail and celebration (in the pop-up) */
.dialog.bgdialog{max-width:440px;text-align:center;overflow:hidden;position:relative;padding-bottom:18px}
/* the badge pop-ups stay a card in the middle, on phones too (other pop-ups fill the phone screen) */
.modal:has(> .dialog.bgdialog){align-items:center;padding:16px}
.modal > .dialog.bgdialog{min-height:0;width:min(440px,100%);border-radius:20px;border:1px solid var(--line);padding:18px 16px 18px}
.bginfo,.bgcele{position:relative;padding:8px 6px 4px}
.bginfo h1,.bgcele h1{margin:6px 0 4px;font-size:24px}.bginfo p,.bgcele p{margin:4px 0;color:var(--mute)}
.bgwhen{font-weight:650;color:var(--ink)!important}
.bgclose{position:absolute;right:0;top:0;width:40px;height:40px;font-size:24px;line-height:1;padding:0}
.bgbig{display:flex;justify-content:center;margin:6px 0 4px;position:relative;z-index:1}
.bgbig .medal{filter:drop-shadow(0 14px 28px color-mix(in srgb,var(--tc) 55%,transparent))}
.bgtier{display:inline-block;padding:3px 12px;border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--tc);background:color-mix(in srgb,var(--tc) 16%,transparent)}
.bgkick{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);position:relative;z-index:1;animation:bgup .5s .15s both;padding:0 46px} /* clear of the close button (it hid the end of "You have earned 163 badges" on phones) */
.bgcele .bgbig.pop .medal{animation:bgpop 1.1s cubic-bezier(.2,1.2,.3,1) both}
.bgcele h1,.bgcele p,.bgcele .bgtier,.bgcele .row{position:relative;z-index:1;animation:bgup .5s both}.bgcele .bgtier{animation-delay:.55s}.bgcele h1{animation-delay:.65s}.bgcele p{animation-delay:.75s}.bgcele .row{animation-delay:.9s}
@keyframes bgpop{0%{opacity:0;transform:scale(.2) rotateY(-540deg)}60%{opacity:1;transform:scale(1.18) rotateY(15deg)}80%{transform:scale(.96) rotateY(-6deg)}100%{transform:scale(1) rotateY(0)}}
@keyframes bgup{from{opacity:0;transform:translateY(12px)}}
.bgrays{position:absolute;left:50%;top:150px;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 22%,transparent) 0 10deg,transparent 10deg 22deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:bgspin 14s linear infinite,bgfade .8s both}
@keyframes bgspin{to{transform:rotate(360deg)}}@keyframes bgfade{from{opacity:0}}
.bgconf{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.bgconf i{position:absolute;top:-14px;left:50%;width:8px;height:13px;border-radius:2px;opacity:0;animation:bgfall 2.4s cubic-bezier(.25,.6,.4,1) var(--d) forwards}
.bgconf i:nth-child(3n){width:7px;height:7px;border-radius:50%}
@keyframes bgfall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(calc(var(--x) * 230px),520px) rotate(var(--r))}}
.bginfo .bgbig.shine .medal{animation:bgwobble 1.2s cubic-bezier(.2,1.2,.3,1) both}
@keyframes bgwobble{0%{transform:scale(.7) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.bgm,.bgprog i,.bgkick,.bgcele *,.bginfo .medal,.bgrays{animation:none!important}.bgm::after{display:none}.bgm:hover .medal{transform:none}}
/* cards: wider on big screens; people's names a little smaller and on up to two lines rather than cut */
@media(min-width:601px){table.ltable.cardgrid tbody{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.gcperson .gctitle{font-size:17px;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.2}
.gctitle{font-size:18px}
/* chips with an icon ("I flew the takeoff / landing"): icon and words centred on one line */
.chip.ichip{display:inline-flex;align-items:center;gap:6px;line-height:1.2}
.chip.ichip svg{flex:none;display:block;transform:translateY(-1px)}
/* Settings → Pilots */
.plauto{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.plreq{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.plreq .mini{min-height:36px;padding:4px 14px}
.okt{color:var(--ok)}.warnt{color:var(--warn)}
.pladd{margin-top:12px}.pladd summary{cursor:pointer;color:var(--accent)}
/* the pilot list on a phone: one card per pilot (name, status, storage, buttons), nothing off the screen */
@media(max-width:600px){
  .pltab,.pltab tbody,.pltab tr,.pltab td{display:block;width:auto}.pltab thead{display:none}
  .pltab tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:var(--card)}
  .pltab td{padding:3px 0;border:0;text-align:left!important}
  .pltab td.n:last-child{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.pltab td.n:last-child .mini{min-height:38px;padding:4px 14px}}
/* paper logbook import: the list of things to check under each page */
.ppnotes{margin-top:10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--warn) 10%,var(--card));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line))}
.ppnotes b{color:var(--warn)}.ppnotes ul{margin:6px 0 0;padding-left:20px}.ppnotes li{margin:3px 0;font-size:13.5px}
/* Settings → Server keys */
.keyrow{padding:10px 0;border-top:1px solid var(--line)}.keyrow:first-of-type{border-top:0}
.keyhd{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.keyin{margin-top:8px;gap:8px;flex-wrap:nowrap}.keyin input{flex:1;min-width:0}
.keylist{margin-top:10px}.keylist .keyrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0}
/* the key field: several lines (App Store Connect), what is typed hidden like a password */
#keyone{flex:1;min-width:0;min-height:44px;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:13px;-webkit-text-security:disc;text-security:disc}
.bgcele .bgclose{z-index:3}
.trlist{display:flex;flex-direction:column;gap:8px}.tritem>.grow{min-width:0;overflow-wrap:anywhere}.tritem{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0}.tritem .primary{flex:none;min-height:40px}
/* page tabs: four or more don't fit a phone side by side; they slide sideways instead (the last one fades at the edge) */
.ptabs:has(>a:nth-child(4)){overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.ptabs:has(>a:nth-child(4))>a{flex:none;white-space:nowrap;padding:8px 12px}
/* New flight date: the month jumps only where there is room (phones keep the day arrows) */
@media(max-width:600px){button.mini[data-month]{display:none}}
.applock{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
.alk{max-width:340px;width:100%;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:stretch}.alk svg{align-self:center;color:var(--accent)}.alk h1{margin:0;font-size:24px}
.alkf{display:flex;gap:8px}.alkf input{flex:1;font-size:22px;letter-spacing:6px;text-align:center;min-height:48px}.alk .primary,.alkf button{min-height:48px}
body.locked{overflow:hidden}
.hlpask .row{gap:8px}.hlpask input{min-height:44px}.hlpsec{margin:8px 0;padding:12px 16px}.hlpsec summary{cursor:pointer;min-height:32px}.hlpa p{margin:6px 0 0;line-height:1.55}
@media print{.testbanner{display:none!important}}
.askcard .row{gap:8px}.askcard input{min-height:44px}.askans{margin-top:10px;font-size:17px;line-height:1.5;font-weight:600}
/* Overview first tile: the total on the left and the limit rings on the right on wide screens; stacked on phones; rings scale */
.ovtop{display:grid;gap:14px;align-items:center}.ovpill{margin-top:10px}
.ovhero .rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;justify-items:center;margin:6px 0 4px}
.ovhero .ring{width:100%;max-width:170px}.ovhero .ring svg{display:block;width:100%;height:auto}
.ovhero .ring .rt,.ovhero .ring .rv{stroke-width:6}.ovhero .ring .r1{font-size:12.5px;letter-spacing:-.2px}.ovhero .ring .r2{font-size:8.5px}.ovhero .ring .rl{font-size:13px}
.ovref{text-align:center;margin-top:4px}
@media(min-width:760px){.ovtop{grid-template-columns:minmax(230px,2fr) 3fr;gap:28px}.ovtotal{text-align:left;padding-left:8px}.ovhero .ovbig{font-size:52px}}
/* Print: on phones the layout list opens over the page (full screen, search on top, Close) instead of above the options */
.ppickh{display:none}
@media(max-width:900px){.ppick.open{position:fixed;inset:0;z-index:70;border-radius:0;margin:0;max-height:none;padding:calc(12px + env(safe-area-inset-top)) 16px 16px;overflow:auto;display:flex}
  .ppick.open .ppickh{display:flex;align-items:center;justify-content:space-between;gap:12px}.ppick.open .ptree{max-height:none;flex:1}body.ppopen{overflow:hidden}}
/* a printout wider than the screen scrolls inside its own frame: the page, the side menu and the bottom bar stay put */
@media screen{.pages{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}}
.testbar{background:#b45309;color:#fff}
/* the test logbook: an orange-tinted menu and a "TEST LOGBOOK" label in the bottom status bar (nothing added on top of the page) */
/* in the menu, the pages that are not in the live logbook (still in testing) are in orange */
nav a.navtest,nav a.navtest svg{color:#ea8a1a}nav a.navtest .nl::after{content:'test';margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,#ea8a1a 22%,transparent)}
body.testsite #pendbar::before{content:'TEST LOGBOOK';flex:none;background:#b45309;color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.5px;padding:4px 8px;border-radius:6px}
@media(max-width:600px){body.testsite #pendbar::before{content:'TEST'}}
.curauth{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px}.curauth select{min-height:44px;font-size:16px;flex:1 1 260px;max-width:420px}.curauth .small{flex:1 1 100%}
/* Currency and limits: a hero (authority, summary, date), then a grid of cards, one per rule */
.curhero{display:flex;flex-direction:column;gap:12px}.curhero select{min-height:48px;font-size:17px;font-weight:600;flex:none;width:100%;max-width:520px}
.curhero>label{font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.5px}.cursum{display:flex;flex-wrap:wrap;gap:8px}.cursum .pill{font-size:14px;padding:6px 12px}
.curdate{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cursech{margin:22px 0 10px;font-size:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.cursech span{font-size:13px;font-weight:400;color:var(--mute)}
.curgrp{margin:14px 0 8px;font-size:14px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px}
.curgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.curcard{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.curcard{color:var(--ink)}.curcard.cc-warn{border-left-color:var(--warn)}.curcard.cc-bad{border-left-color:var(--bad)}.curcard.cc-nd{border-left-color:var(--line)}
.cch{display:flex;justify-content:space-between;align-items:center;gap:6px 8px;flex-wrap:wrap}.ccst{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ok)}
.curcard.cc-warn .ccst{color:var(--warn)}.curcard.cc-bad .ccst{color:var(--bad)}.curcard.cc-nd .ccst{color:var(--mute)}.ccref{font-size:11.5px;color:var(--mute);background:var(--head);padding:2px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cct{font-weight:700;font-size:15px;line-height:1.3}.ccd{font-size:12.5px;color:var(--mute);line-height:1.35}
.ccv{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px}.ccv b{font-size:28px;line-height:1}.ccv>span{color:var(--mute);font-size:13px}.ccv .ccw{margin-left:auto}
.ccbar{height:8px;border-radius:99px;background:var(--head);overflow:hidden}.ccbar i{display:block;height:100%;background:var(--ok);border-radius:99px}.curcard.cc-warn .ccbar i{background:var(--warn)}.curcard.cc-bad .ccbar i{background:var(--bad)}
.ccf{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px}.ccf a{white-space:nowrap}
.curmore>summary{cursor:pointer;font-weight:700;min-height:36px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.curset{display:flex;flex-direction:column;margin-top:10px}.cursetrow{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}.cursetrow .grow{min-width:200px}
/* Currency: the warning banner stays in view; the authority / date choice folds into one line */
.cursum2{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;margin:0 0 12px;box-shadow:0 4px 14px rgba(0,0,0,.08);border:1px solid}
.cursum2 b{display:block;font-size:17px}.cursum2 span{font-size:13px;opacity:.85}.cursum2 .csi{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;color:#fff;opacity:1}
.cursum2.ok{background:color-mix(in srgb,var(--ok) 12%,var(--card));border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.cursum2.ok .csi{background:var(--ok)}.cursum2.ok b{color:var(--ok)}
.cursum2.warn{background:color-mix(in srgb,var(--warn) 14%,var(--card));border-color:color-mix(in srgb,var(--warn) 45%,transparent)}.cursum2.warn .csi{background:var(--warn)}.cursum2.warn b{color:var(--warn)}
.cursum2.bad{background:color-mix(in srgb,var(--bad) 12%,var(--card));border-color:color-mix(in srgb,var(--bad) 45%,transparent)}.cursum2.bad .csi{background:var(--bad)}.cursum2.bad b{color:var(--bad)}
@media(max-width:900px){.cursum2{top:4px}}
.curpick>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:40px}.curpick>summary::-webkit-details-marker{display:none}
.curpick .cpk{font-weight:700;font-size:16px}.curpick .cpch{margin-left:auto;color:var(--accent);font-weight:600}.curpick[open] .cpch{visibility:hidden}.curpick .curhero{margin-top:12px}
.cursum2 .cstoday{margin-left:auto;flex:none}
.curings .rings{max-width:560px;margin:6px auto 4px}
.simchk{display:grid;gap:8px}.simchk select{max-width:100%}.simbox{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}.simbox .small{flex-basis:100%}
/* Currency: one slim bar — the warning, then the authority and the date, usable straight away (no panel to open). Wide screens: one
   line, kept in view; phones: the warning stays in view, the two controls on one row under it */
.curbar{display:contents}
.curctl{display:flex;gap:10px;align-items:flex-end;padding:10px 12px;margin:0 0 12px}
.curf{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}.curf>span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.curfa{flex:1 1 auto}.curfa select{width:100%;min-width:0}.curfd{flex:0 0 auto}.curfd input{width:150px}
.curf select,.curf input{height:42px;min-height:42px;box-sizing:border-box}
@media(max-width:600px){.curfd input{width:128px;padding-left:8px;padding-right:6px}.curctl{gap:8px;padding:10px}}
@media(min-width:900px){.curbar{position:sticky;top:8px;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,470px);gap:12px;align-items:stretch;margin:0 0 14px}
  .curbar>.cursum2{position:static;margin:0;min-height:0}.curbar>.curctl{margin:0;box-shadow:0 4px 14px rgba(0,0,0,.08)}}
/* Stats → Totals: the summary tile */
.sthero{display:grid;gap:16px;padding:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card) 70%);border-color:color-mix(in srgb,var(--accent) 30%,var(--line,transparent))}
.sthl{display:flex;flex-direction:column;justify-content:center;min-width:0}
.sthk{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.stbig{font-size:44px;font-weight:800;line-height:1.05;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.sthsub{color:var(--mute);margin-top:4px}
.stgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stt{background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.stt span{font-size:12.5px;color:var(--mute)}.stt b{font-size:20px;font-variant-numeric:tabular-nums}.stt small{font-size:12px;color:var(--mute)}
@media(min-width:760px){.sthero{padding:24px 26px}.stbig{font-size:56px}.stgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1180px){.sthero{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px}.sthl{padding-right:8px}}
/* Print: the data tick boxes, grouped by the printed heading */
.pcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:6px}
.pcolg{border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin:0;min-width:0;align-self:start} /* as much space under the title as under the last box */.pcolg legend{font-weight:700;font-size:13px;padding:0 4px}
.pcolg label.inline{display:flex;margin:4px 0;gap:6px;align-items:center}
.phide{display:none!important}.prepcols{margin:10px 0}.prepcols .pcols{margin-top:8px}
/* Totals: one Settings box, closed by default */
.tset>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:40px}.tset>summary::-webkit-details-marker{display:none}
.tset .tsetv{color:var(--mute);min-width:0}.tset .tsetch{margin-left:auto;color:var(--accent);font-weight:600}.tset .tso,.tset[open] .tsc{display:none}.tset[open] .tso{display:inline}.tset .tsetch{white-space:nowrap;padding:4px 2px}
.tset .tsetin{margin-top:12px;display:grid;gap:12px}.tset .tfil{border-top:1px solid var(--line);padding-top:10px}
.bgsort{margin-top:8px}.bglatest{border-bottom:1px solid var(--line);padding-bottom:6px}
/* Log a flight on a short screen (iPad with the keyboard up): the form fits the space above the keyboard, Save in a slim top bar */
.dialog .ffrow>.ffsave,.ffsave,.ffsvm{display:none}
html.ffshort .modal:has(#ff){padding:0;bottom:auto;top:var(--vvt,0);height:var(--vvh,100%)}
html.ffshort .modal>.dialog:has(#ff){border-radius:0;margin:0;max-width:none;width:100%;min-height:100%;padding-top:0}
html.ffshort .flightform .ffhead{top:0;margin:0 0 8px;padding:8px 0 6px;gap:2px}
html.ffshort .flightform .ffhead h1{font-size:19px;margin:0}
html.ffshort .flightform .ffrow{gap:8px;flex-wrap:nowrap;align-items:center}
html.ffshort .flightform .ffrow button,html.ffshort .ffsvm>summary{min-height:38px;padding:6px 14px;font-size:15px}
html.ffshort .dialog .ffrow>.ffsave{display:inline-flex}html.ffshort .ffsvm{display:block;position:relative}
html.ffshort .ffsvm>summary{list-style:none;cursor:pointer;white-space:nowrap}html.ffshort .ffsvm>summary::-webkit-details-marker{display:none}
html.ffshort .ffsvm .dmenu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:6px;display:grid;gap:4px;min-width:230px}
html.ffshort .ffsvm .dmenu-list button{text-align:left;justify-content:flex-start}
html.ffshort .flightform .favseg button{font-size:12px;padding:4px 8px;min-height:30px}
html.ffshort .flightform .ffsum{font-size:13px}
html.ffshort .flightform .fsec{margin-bottom:10px}
html.ffshort .flightform .fsec.step .steptog{min-height:40px;padding:6px 12px}
html.ffshort .flightform .frow{grid-template-columns:140px minmax(0,1fr)}
html.ffshort .flightform .flab{padding:10px 12px;font-size:13px}
html.ffshort .flightform .fval{padding:6px 12px}
html.ffshort .flightform input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),html.ffshort .flightform select{min-height:38px;padding:6px 10px}
html.ffshort .flightform .fval .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:6px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
html.ffshort .flightform .fval .chips::-webkit-scrollbar{display:none}
html.ffshort .flightform .fval .chip{flex:none;min-height:40px;padding:4px 11px} /* 40 px to tap, also in the compact form (was 30) */
html.ffshort .flightform .savebar{position:static;box-shadow:none;padding:12px 0 16px}
@media(max-width:600px){html.ffshort .flightform .frow{grid-template-columns:minmax(0,1fr)}html.ffshort .flightform .ffhead h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}html.ffshort .flightform .ffrow button,html.ffshort .ffsvm>summary{padding:6px 10px;font-size:14px}html.ffshort .flightform .ffrow{flex-wrap:wrap}}
.tset .tsetlinks{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:10px}
/* one-row quick picks (keyboard mode) never push past their column (e.g. into the ⇄ swap button) */
html.ffshort .flightform .frow,html.ffshort .flightform .fval,html.ffshort .pair>.frow{min-width:0}
html.ffshort .pair>.frow{grid-template-columns:minmax(0,1fr)}
html.ffshort .flightform .fval .chips{max-width:100%}
.bgnextgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}.bgnextsec{border-bottom:1px solid var(--line);padding-bottom:8px}
/* Totals: aircraft, simulator and the two together, said plainly */
.sthsim{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:14px;color:var(--mute)}.sthsim b{color:var(--ink);font-variant-numeric:tabular-nums}
.scard.sflight{grid-column:1/-1}.s3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 4px}
.s3>div{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--line) 35%,transparent)}.s3 span{font-size:12.5px;color:var(--mute)}.s3 b{font-size:22px;font-variant-numeric:tabular-nums}
.s3 .s3a{background:color-mix(in srgb,var(--accent) 12%,var(--card))}.s3 .s3a b{font-size:26px}
.scard .sv small{font-size:12px;font-weight:500;color:var(--mute);margin-left:4px}.scard .ssim{font-size:12.5px;color:var(--mute);margin:2px 0}
@media(max-width:600px){.s3{grid-template-columns:1fr}.s3 b{font-size:20px}}
tr.tsa>*{background:color-mix(in srgb,var(--accent) 9%,var(--card))}tr.tst>*{border-bottom:2px solid var(--line)}
/* Test logbook first (2026-10-25): the Currency warning and its authority / date bar scroll away with the page instead of staying
   pinned. Live too since 2026-10-25 (Maxime's OK) */
.cursum2,.curbar>.cursum2{position:static}
@media(min-width:900px){.curbar{position:static}}
/* Test logbook first (2026-10-25): side menu on iPad / desktop. The footer's space sat below .layout, so on reaching the end of a
   page the pinned menu was pushed up (gap above the footer, last item cut). The same space now sits inside the page (main), so
   .layout reaches the bottom and the menu stays whole. Touch screens: a tapped item no longer stays highlighted like a second
   selection (hover sticks on iPad). Live too since 2026-10-25 (Maxime's OK) */
@media(min-width:901px){
  body.hasfoot{padding-bottom:0}
  body.hasfoot main{padding-bottom:calc(134px + env(safe-area-inset-bottom))}
  body.hasfoot.haspend main{padding-bottom:calc(154px + env(safe-area-inset-bottom))}
}
@media(hover:none){nav a:not(.on):hover,nav details.navmore summary:hover{background:none}}
/* One header on every page, like Stats: tabs · count · (room) · sliders · More · main action; the title for screen readers only.
   Phones: the count and the buttons on one line, the tabs full width under them */
main .uhead.uhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px}
main .uhead.uhead>*{flex:none;margin-left:0!important}
main .uhead.uhead>h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0!important;padding:0}
main .uhead.uhead>.uhgrow{flex:1 1 0;min-width:0}
main .uhead.uhead>.uhtabs{flex:0 1 auto;min-width:0}
main .uhead .uhcount{white-space:nowrap;font-size:13px}
main .uhead.uhead:not(:has(>:not(h1,.uhgrow,.hidden))){margin:0}
body .uhtabs{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0}
body .uhtabs>.stabs{margin:0;max-width:none}
body .uhtabs>.seg{margin:0!important} /* tabs moved into the header drop their old inline gap (Badges: margin-top 12px put them below the Back chevron) */
body .uhtabs>.uhview:not(:first-child){margin-left:auto}
body .uhtabs .seg>*{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;box-sizing:border-box}
body .uhtabs .ptabs{border-bottom:0;gap:0;overflow-x:auto}
body .uhtabs .ptabs a.btn{border:1px solid var(--line);margin:0 0 0 -1px;color:var(--ink);font-weight:500;font-size:14px}
body .uhtabs .ptabs a.btn:first-child{margin-left:0}
body .uhtabs .ptabs a.btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
body .uhtabs .ptabs a.btn.on .tc{color:inherit;opacity:.8}
body .uhead .uhsum{white-space:nowrap;align-self:center}
body .curbar{grid-template-columns:minmax(0,1fr)} /* its authority / date controls now open under the header */
@media(max-width:600px){body .uhtabs>.seg{display:flex;flex:1 1 100%}body .uhtabs>.seg>*{flex:1 1 0;min-width:0;padding:4px 6px;white-space:normal;text-align:center;line-height:1.2;font-size:13.5px}
  body .uhtabs>.ptabs:has(>a:nth-child(5)){overflow-x:auto}body .uhtabs>.ptabs:has(>a:nth-child(5))>a{flex:none;white-space:nowrap;padding:0 12px}
  body .uhtabs>.uhview:not(:first-child){margin-left:0}
  main .uhead.uhead>.uhtabs{order:10;flex:1 1 100%}}
/* Layout sweep 2026-10-25: space between the FDP rule choice and the advisory note; between the rule cards and "Other rules" */
.fdprules{margin:0 0 14px}
.curgrid+details.curmore,.curgrid+.curother{margin-top:14px}
/* Fold-outs: every arrow on the right, like the rest of the app (set on summaries that still had the browser's ▶ on the left) */
summary.sumr{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer}
summary.sumr::-webkit-details-marker{display:none}
summary.sumr::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .15s}
details[open]>summary.sumr::after{transform:rotate(-135deg) translateY(-2px)}
@media(prefers-reduced-motion:reduce){summary.sumr::after{transition:none}}
/* One header per page: the tabs and one sliders button; everything else in the panel the sliders open (Maxime 2026-10-25) */
main .uhead.uhead>.uftog{margin-left:auto!important}
.uhpanel{display:grid;gap:12px;margin:0 0 14px}
.uhpanel>.uhacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.uhpanel>.uhacts>*{margin:0}
.uhpanel>.card{margin:0}
#filters>.uhacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
#filters.lbfold>.uhacts{display:none}
/* the sliders panel: Totals' settings without their own fold line; the page's intro and notes at the end */
.uhpanel>details.tset>summary{display:none}.uhpanel>details.tset{margin:0}
.uhpanel>.uhinfo{display:grid;gap:8px}.uhpanel>.uhinfo>*{margin:0}
main .uhead.uhead>.pagesearch,main .uhead.uhead>.uhps{margin-left:auto!important}
main .uhead.uhead>.pagesearch+.uftog{margin-left:0!important}
main .uhead.uhead>.uhfind{margin-left:auto!important}main .uhead.uhead>.uhfind+.uftog{margin-left:0!important}
.uhfind,.uhead .psbtn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}
.uhfind.act{color:var(--accent)}
/* the + (the page's add action) between the magnifier and the sliders */
main .uhead.uhead>.uhplus{min-width:40px;min-height:40px;padding:0 9px;font-size:22px;font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center}
main .uhead.uhead>.pagesearch~.uhplus,main .uhead.uhead>.uhfind~.uhplus{margin-left:0!important}
main .uhead.uhead>.uhplus:first-of-type{margin-left:auto}
.uhpanel>.uhacts>.uhview{margin:0}
/* the sliders open a drop-down from the top right of the header (closed on every page, closes on a tap elsewhere) */
main .uhead.uhead{position:relative}
main .uhead.uhead>.uhpanel{position:absolute!important;top:calc(100% + 6px);right:0;z-index:30;width:min(640px,calc(100vw - 32px));max-height:min(72vh,720px);overflow:auto;margin:0;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.28);display:grid;gap:12px}
main .uhead.uhead>.uhpanel[hidden]{display:none}
main .uhead.uhead>.uhpanel>.card{box-shadow:none;border:0;padding:0;background:none}
main .uhead.uhead>.uhpanel .toolbar{flex-wrap:wrap}
@media(max-width:600px){main .uhead.uhead>.uhpanel{left:0;right:0;width:auto}}
/* side menu: every page listed, no "More" fold (Maxime 2026-10-25) */
nav details.navflat>summary{display:none}
/* header tabs: when they don't fit, they scroll sideways in their row */
body .uhtabs{min-width:0;max-width:100%}
body .uhtabs>.seg,body .uhtabs>.stabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body .uhtabs>.seg::-webkit-scrollbar,body .uhtabs>.stabs::-webkit-scrollbar{display:none}
body .uhtabs>.seg>*,body .uhtabs>.stabs>*{flex:none;white-space:nowrap}
main .uhead.uhead>.uhtabs{flex:0 1 auto;min-width:0;overflow:hidden}
@media(max-width:600px){body .uhtabs>.seg>*,body .uhtabs>.stabs>*{flex:none;padding:0 12px}}
/* Logbook: its sliders open the same drop-down as every page */
main .uhead.uhead>#filters.uhdrop{position:absolute!important;top:calc(100% + 6px);right:0;z-index:30;width:min(680px,calc(100vw - 32px));max-height:min(72vh,720px);overflow:auto;margin:0;padding:14px;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.28)}
main .uhead.uhead>#filters.uhdrop.lbfold{display:none}
@media(max-width:600px){main .uhead.uhead>#filters.uhdrop{left:0;right:0;width:auto}}
main .uhead.uhead>.uhfind{margin-left:auto}
/* the drop-down: same groups in the same order on every page */
.uhpanel .uhgrp{display:grid;gap:6px}
.uhpanel .uhlab{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.uhpanel .uhgb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.uhpanel .uhg-set>.uhgb{display:grid;gap:10px}.uhpanel .uhg-set>.uhgb>*{margin:0;min-width:0}
.uhpanel .uhacts>.uhgb>*{margin:0}
.uhpanel>.uhinfo{border-top:1px solid var(--line);padding-top:10px;font-size:13px;color:var(--mute)}
/* a tab on every page (its name when it has no sections); phones: the tabs as one drop-down */
.uhtabsel{display:none;min-height:40px;font-weight:600;max-width:100%}
.uhname>a.btn.on{cursor:default;pointer-events:none}
@media(max-width:600px){body .uhtabs:has(>.uhtabsel)>.stabs,body .uhtabs:has(>.uhtabsel)>.seg{display:none!important}
  body .uhtabs>.uhtabsel{display:block;flex:1 1 auto;min-width:0;width:100%}
  main .uhead.uhead>.uhtabs:has(>.uhtabsel){flex:1 1 0;order:0}}
.uhname{min-width:0;max-width:100%}.uhname>a.btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
main .uhead.uhead:has(.uhtabsel)>.uhgrow{display:none}@media(max-width:600px){main .uhead.uhead>.uhtabs:has(>.uhtabsel){flex:1 1 0!important;min-width:0}main .uhead.uhead>.uhtabs:has(>.uhtabsel)~*:not(.uhpanel):not(#filters){flex:none}}
/* tabs that don't fit: one good-looking drop-down showing the current tab */
.uhtabs.uhtfold>.stabs,.uhtabs.uhtfold>.seg{display:none!important}
.uhtabs.uhtfold>.uhtabsel{display:block}
.uhtabsel{appearance:none;-webkit-appearance:none;height:42px;padding:0 40px 0 16px;border-radius:12px;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--accent);font-size:15px;font-weight:700;cursor:pointer;min-width:180px;max-width:100%;text-overflow:ellipsis}
.uhtabsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the right-hand buttons sit together: the tabs push them to the right */
main .uhead.uhead>.uhtabs{margin-right:auto}
main .uhead.uhead>.uftog,main .uhead.uhead>.uhfind,main .uhead.uhead>.uhplus,main .uhead.uhead>.pagesearch{margin-left:0!important}
main .uhead.uhead>.uhgrow{flex:0 0 0;display:none}
/* tabs never clipped: they fit, or the row shows the drop-down instead */
main .uhead.uhead>.uhtabs{overflow:visible}
body .uhtabs>.seg,body .uhtabs>.stabs{overflow:visible}
@media(max-width:600px){main .uhead.uhead>.uhtabs{order:0!important;flex:1 1 0!important;min-width:0}
  body .uhtabs>.stabs.uhname{display:flex}body .uhtabs>.stabs.uhname>a{flex:0 1 auto;min-width:0}}
main .uhead.uhead{flex-wrap:nowrap}
/* pages without sections: their title with the menu icon, in the place of the tabs */
.uhtabs>.uhname{display:flex;align-items:center;gap:12px;min-width:0;height:42px}
.uhname .uhnic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--card))}
.uhname .uhntx{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:600px){.uhname .uhntx{font-size:19px}.uhname .uhnic{width:34px;height:34px}}
.uhtabs .ptabs,.uhtabs .stabs{-webkit-mask-image:none!important;mask-image:none!important}
/* the ✕ on every notice */
.hasdx{position:relative;padding-right:46px!important}
.dxbtn{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:32px;height:32px;min-height:0;padding:0;border-radius:50%;border:0;background:transparent;color:inherit;opacity:.65;font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer}
.dxbtn:hover,.dxbtn:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.chban .chlink{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:inherit;text-decoration:none;flex:1;min-width:0}
.card.chban{display:flex;align-items:center}
/* Graphs (new page, test logbook first): the chart roles as custom properties, light and dark. Categorical slots validated on the
   cards (#fff light, #171c24 dark); the calendar's blue ramp validated as an ordinal ramp (--ordinal) in both modes; "Other" grey */
.g2,.g2tip{--g1:#2a78d6;--g2:#eb6834;--g3:#1baf7a;--g4:#eda100;--g5:#e87ba4;--g6:#008300;--g7:#6250d6;--g8:#e34948;--g0:#a3a9b4;--gq0:#edf0f4;--gq1:#86b6ef;--gq2:#3987e5;--gq3:#256abf;--gq4:#184f95;--gq5:#0d366b;--ggrid:#edf0f3;--gbase:#c3c8d0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .g2,:root:not([data-theme="light"]) .g2tip{--g1:#3987e5;--g2:#d95926;--g3:#199e70;--g4:#c98500;--g5:#d55181;--g6:#008300;--g7:#9085e9;--g8:#e66767;--g0:#5a6372;--gq0:#232a35;--gq1:#184f95;--gq2:#256abf;--gq3:#3987e5;--gq4:#6da7ec;--gq5:#9ec5f4;--ggrid:#242b35;--gbase:#3b4350}}
:root[data-theme="dark"] .g2,:root[data-theme="dark"] .g2tip{--g1:#3987e5;--g2:#d95926;--g3:#199e70;--g4:#c98500;--g5:#d55181;--g6:#008300;--g7:#9085e9;--g8:#e66767;--g0:#5a6372;--gq0:#232a35;--gq1:#184f95;--gq2:#256abf;--gq3:#3987e5;--gq4:#6da7ec;--gq5:#9ec5f4;--ggrid:#242b35;--gbase:#3b4350}
.g2 .c0,.g2tip .c0{fill:var(--g0);background:var(--g0)}.g2 .c1,.g2tip .c1{fill:var(--g1);background:var(--g1)}.g2 .c2,.g2tip .c2{fill:var(--g2);background:var(--g2)}.g2 .c3,.g2tip .c3{fill:var(--g3);background:var(--g3)}.g2 .c4,.g2tip .c4{fill:var(--g4);background:var(--g4)}.g2 .c5,.g2tip .c5{fill:var(--g5);background:var(--g5)}.g2 .c6,.g2tip .c6{fill:var(--g6);background:var(--g6)}.g2 .c7,.g2tip .c7{fill:var(--g7);background:var(--g7)}.g2 .c8,.g2tip .c8{fill:var(--g8);background:var(--g8)}
.g2 .l1{stroke:var(--g1)}.g2 .l2{stroke:var(--g2)}.g2 .l3{stroke:var(--g3)}
.g2 .q0{fill:var(--gq0)}.g2 .q1{fill:var(--gq1)}.g2 .q2{fill:var(--gq2)}.g2 .q3{fill:var(--gq3)}.g2 .q4{fill:var(--gq4)}.g2 .q5{fill:var(--gq5)}
.g2tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.g2tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0;container-type:inline-size}
.g2tile.hero{grid-column:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 14%,var(--card)),var(--card) 75%)}
.g2tl{font-size:13px;color:var(--mute)}.g2tval{font-size:24px;font-weight:700;line-height:1.15;margin-top:4px;color:var(--ink);overflow-wrap:anywhere}.g2tval small{white-space:nowrap}.g2tile:not(.hero) .g2tval{font-size:clamp(17px,15cqi,24px)} /* a narrow tile: the figure and its unit still on one line */.g2tval small{font-size:.55em;font-weight:600;color:var(--mute)}
.g2tile.hero .g2tval{font-size:clamp(40px,10vw,52px);letter-spacing:-.5px}
@media(min-width:1200px){.g2tiles{grid-template-columns:2fr repeat(6,1fr)}.g2tile.hero{grid-column:auto}.g2tile:not(.hero) .g2tval{font-size:19px}} /* wide screens: the seven figures on one row, the hours first and widest */.g2ts{font-size:12px;color:var(--mute);margin-top:3px}
.g2note{font-size:13px;color:var(--mute);margin:-4px 2px 14px}
.g2grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;margin-bottom:14px}.g2grid2>.card{margin:0}
.g2card h2{margin:0;font-size:16px}.g2sub{margin:3px 0 10px;font-size:13px;color:var(--mute);line-height:1.35}
.g2c{width:100%;min-height:40px;overflow:hidden}
.g2svg{display:block;max-width:100%;height:auto;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.g2 .g2svg text{font-size:11px;fill:var(--mute)}.g2 .g2svg .g2ax{font-variant-numeric:tabular-nums}
.g2 .g2grid{stroke:var(--ggrid);stroke-width:1}.g2 .g2base{stroke:var(--gbase);stroke-width:1}.g2 .g2hit{fill:transparent}
.g2 g.g2hl>:not(.g2hit),.g2 .g2cell.g2hl{opacity:.75}
.g2 .g2ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.g2 .g2area{opacity:.1;pointer-events:none}
.g2 .g2xh{stroke:var(--mute);stroke-width:1;pointer-events:none}.g2 .g2xd{stroke:var(--card);stroke-width:2;pointer-events:none}
.g2 .g2ms{fill:var(--ink);stroke:var(--card);stroke-width:2;pointer-events:none}.g2 .g2svg .g2msl{fill:var(--ink);font-weight:700;font-size:12px}.g2 .g2svg .g2msd{fill:var(--mute)}
.g2 .g2svg .g2lbl,.g2 .g2svg .g2val{fill:var(--ink);font-size:12px}.g2 .g2svg .g2val{font-variant-numeric:tabular-nums}.g2 .g2svg .g2k{font-weight:600;fill:var(--ink)}.g2 .g2svg .g2p{fill:var(--mute);font-size:11px}.g2 .g2svg .g2end{font-weight:700}
.g2 .g2med{stroke:var(--ink);stroke-width:1}.g2 .g2svg .g2medt{fill:var(--ink);font-weight:600}
.g2leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--mute);margin:0 0 8px}.g2leg span{display:inline-flex;align-items:center;gap:6px}
.g2sw{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}.g2lk{width:14px;height:3px;border-radius:2px;display:inline-block;flex:none}
.g2tip{position:fixed;z-index:300;display:none;pointer-events:none;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:280px}
.g2tt{font-size:12px;color:var(--mute);margin-bottom:3px}.g2tr{display:flex;align-items:center;gap:6px;line-height:1.5}.g2tr b{font-variant-numeric:tabular-nums}.g2tr span{color:var(--mute)}
.g2tv{margin-top:8px}.g2tv summary{font-size:13px;color:var(--mute);cursor:pointer;width:max-content}.g2tvb{margin-top:6px}.g2tvb table{font-size:13px}
.g2none{color:var(--mute);font-size:14px;margin:14px 0}
.g2empty{text-align:center;padding:36px 16px}.g2empty h2{margin:8px 0}.g2ei{color:var(--g1);display:flex;justify-content:center}.g2ei svg{width:40px;height:40px}
details.g2tables>summary{font-weight:600;cursor:pointer}details.g2tables h2{font-size:15px}
/* Fun stats on the test logbook: the charts the new Graphs page shows (with the period chips) are not repeated here (Maxime 2026-10-25:
   "remove duplicates"); live keeps them until the new Graphs page goes live */
.vz .vzdup{display:none}
/* Map of every flight: the map fills the page, a glass summary card top left, style and buttons top right, the year replay at the
   bottom, zoom bottom right; full screen covers the whole window. Its settings (period, type, colour, labels) are in the sliders drop-down */
.mapopts{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.mapflt{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 14px;align-items:end}
.maphd{grid-column:1/-1;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:-4px}
.mapopts label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mute);min-width:0}
.mapopts label>span{font-weight:600}
.mapopts label.inline{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px;align-self:center}
.mapopts select,.mapopts input[type=search]{width:100%;min-width:0;min-height:40px;border-radius:10px}
.mapwrap{container:mapw/inline-size;position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 1px 2px rgb(16 24 40/.05),0 6px 18px rgb(16 24 40/.06);background:#e5e5e3}
.mapwrap[data-base="dark"]{background:#242424}.mapwrap[data-base="sat"]{background:#0b1320}
.mapwrap>#map{display:block}
.mapwrap #map.bigmap{height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:440px;border:0;border-radius:0;background:#e5e5e3}
.mapwrap[data-base="dark"] #map.bigmap{background:#242424}.mapwrap[data-base="sat"] #map.bigmap{background:#0b1320}
.mapsum,.mapctl>*,.maptime{background:color-mix(in srgb,var(--card) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 4px 16px rgb(0 0 0/.14);color:var(--ink)}
.mapsum{position:absolute;top:12px;left:12px;z-index:800;display:grid;grid-template-columns:repeat(4,auto);gap:10px 18px;padding:12px 16px;border-radius:14px;max-width:calc(100% - 24px)}
.mapsum>div{display:flex;flex-direction:column;min-width:0}
.mapsum>.mapchips,.mapsum>.maplegend{flex-direction:row}
.mapsum .mapchips span,.mapsum .maplegend span,.mapsum .mapclr span{text-transform:none;letter-spacing:0;font-size:inherit;color:inherit}
.mapsum b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.mapsum span{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.mapsum .wide{grid-column:span 2;padding-top:8px;border-top:1px solid var(--line)}
.mapsum .wide b{font-size:16px}.mapsum .wide span{text-transform:none;letter-spacing:0;font-size:12.5px}
.mapctl{position:absolute;top:12px;right:12px;z-index:800;display:flex;gap:8px;align-items:center}
.mapctl>button{width:40px;height:40px;border-radius:12px;font-size:18px;display:grid;place-items:center;padding:0;cursor:pointer}.mapctl>button:hover{color:var(--accent)}
.mapctl .mapstyle{display:flex;border-radius:12px;padding:3px;gap:2px}
.mapctl .mapstyle button{border:0;background:none;color:var(--ink);font-size:13.5px;font-weight:600;padding:7px 11px;border-radius:9px;cursor:pointer;min-height:34px}
.mapctl .mapstyle button.on{background:var(--accent);color:#fff}
.maptime{position:absolute;left:12px;right:64px;bottom:14px;z-index:800;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:14px;max-width:640px}
.maptime #mplay{width:38px;height:38px;border-radius:50%;padding:0;flex:none;font-size:15px;display:grid;place-items:center}
.maptime input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.maptime b{font-variant-numeric:tabular-nums;white-space:nowrap;min-width:84px;text-align:right}
.mapwrap .leaflet-control-zoom{border:0;box-shadow:0 4px 16px rgb(0 0 0/.14);border-radius:12px;overflow:hidden;margin:0 12px 14px 0}
.mapwrap .leaflet-control-zoom a{width:38px;height:38px;line-height:38px;background:var(--card);color:var(--ink);border-color:var(--line)}
.mapwrap .leaflet-control-attribution{background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--mute);font-size:10px}
.mapwrap .leaflet-control-attribution a{color:var(--mute)}
.mapwrap .leaflet-bottom.leaflet-right{display:flex;flex-direction:column;align-items:flex-end}
.mapwrap .leaflet-popup-content-wrapper,.mapwrap .leaflet-popup-tip{background:var(--card);color:var(--ink);box-shadow:0 6px 24px rgb(0 0 0/.22)}
.mapwrap .leaflet-popup-content-wrapper{border-radius:14px}.mapwrap .leaflet-popup-content{margin:12px 16px;font-size:14px;line-height:1.45}
.mapwrap .leaflet-container a.leaflet-popup-close-button{color:var(--mute)}
.mappop{margin-top:10px}
.leaflet-tooltip.maptip{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px;box-shadow:0 4px 16px rgb(0 0 0/.18)}
.leaflet-tooltip.maptip::before{display:none}
.leaflet-tooltip.maplab{background:none;border:0;box-shadow:none;padding:0;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#1f2937;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.leaflet-tooltip.maplab::before{display:none}
.mapwrap[data-base="dark"] .leaflet-tooltip.maplab,.mapwrap[data-base="sat"] .leaflet-tooltip.maplab{color:#f8fafc;text-shadow:0 0 3px #000,0 0 3px #000,0 0 2px #000}
.mapwrap.mapfull{position:fixed;inset:0;z-index:3000;border-radius:0;border:0;display:flex;flex-direction:column}
.mapwrap.mapfull #map.bigmap{flex:1;height:auto;min-height:0}
.mapwrap.mapfull .maptime{bottom:max(14px,env(safe-area-inset-bottom))}.mapwrap.mapfull .mapctl{top:max(12px,env(safe-area-inset-top))}
body.mapfullon{overflow:hidden}
/* a map narrower than the summary card and the style buttons side by side (iPad portrait with the menu): the card goes under the buttons */
@media(min-width:701px){@container mapw (max-width:900px){.mapsum{top:64px}}}
@media(max-width:700px){
  .mapwrap #map.bigmap{height:calc(100vh - 210px);height:calc(100dvh - 210px);min-height:420px}
  .mapsum{top:auto;bottom:66px;left:8px;right:8px;max-width:none;grid-template-columns:repeat(4,1fr);gap:6px 10px;padding:9px 12px}
  .mapsum b{font-size:16px}.mapsum span{font-size:10px}
  .mapsum .wide{grid-column:span 2}.mapsum .wide b{font-size:13.5px}.mapsum .wide span{font-size:11px;white-space:normal}
  .mapctl{top:8px;right:8px;left:8px;justify-content:flex-end}
  .mapctl .mapstyle button{padding:6px 8px;font-size:12.5px}
  .mapctl>button{width:36px;height:36px}
  .maptime{left:8px;right:8px;bottom:10px;max-width:none}
  .mapwrap .leaflet-control-zoom{display:none}
  .mapopts select{min-width:0;width:100%}.mapopts label{flex:1 1 100%}
}
/* the map's summary card: active filters as chips (tap to remove), what is picked, the longest route (tap to go there), the colour key */
.mapchips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.mapchips button,.mapclr{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:5px 10px 5px 12px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);cursor:pointer;min-height:30px}
.mapchips button span,.mapclr span[aria-hidden]{font-size:11px;opacity:.75}
.mapchips button:hover,.mapclr:hover{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.mapclr{grid-column:1/-1;justify-self:start;background:var(--accent);color:#fff}.mapclr:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}
.mapsum .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mapsum .mlong{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:8px 0 0;color:inherit;cursor:pointer;font:inherit}
.mapsum .mlong:hover b{color:var(--accent)}
.maplegend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 6px;padding-top:8px;border-top:1px solid var(--line);max-width:420px}
.maplegend button{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:none;color:var(--ink);font-size:12.5px;padding:3px 8px;border-radius:999px;cursor:pointer}
.maplegend button:hover{background:var(--chip)}.maplegend button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.maplegend button i{width:10px;height:10px;border-radius:50%;flex:none}
.mapsum .maplegend.grad{align-items:center;gap:6px 8px;font-size:12px;color:var(--mute);flex-wrap:wrap}.mapsum .maplegend.grad span{color:var(--mute)}
.maplegend.grad i{flex:1;height:6px;border-radius:3px;min-width:80px}
.mapwrap .mappopw .leaflet-popup-content{min-width:220px}
.maptop{display:flex;flex-direction:column;margin:10px 0 2px;border-top:1px solid var(--line)}
.maptop button{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 2px;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.maptop button:hover{background:var(--chip)}.maptop button .mute{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.maptop button b{font-variant-numeric:tabular-nums}
.mappop{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:700px){.mapsum .wide{display:none}.mapflt{grid-template-columns:1fr 1fr}.maplegend{max-height:64px;overflow:auto}.mapchips button{font-size:12px;min-height:28px}}
.mapwrap .mappopw .leaflet-popup-content{overflow:auto;overscroll-behavior:contain}
/* phones: what is picked opens in a sheet at the bottom of the map (in place of the summary), with its close button */
.mapsheet{position:absolute;left:8px;right:8px;bottom:66px;z-index:850;max-height:min(52%,420px);overflow:auto;overscroll-behavior:contain;padding:14px 16px 12px;border-radius:16px;background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 8px 28px rgb(0 0 0/.22);font-size:14.5px;line-height:1.45;color:var(--ink)}
.mapsheet[hidden]{display:none}
.mapsheetx{position:sticky;top:0;float:right;width:34px;height:34px;margin:-6px -8px 0 8px;border-radius:50%;border:0;background:var(--chip);color:var(--ink);font-size:14px;cursor:pointer}
.mapwrap.sheeton .mapsum{display:none}
.mapwrap:not(:has(.maptime)) .mapsheet{bottom:10px}
/* "Flights to log" title: amber pen icon, the title, a solid count pill, all on one centre line; the hint on the right (under it on phones) */
section.tolog .tlh{align-items:center;gap:10px}
.tlic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.tlh h2{line-height:1.2}
.tlcount{min-width:24px;height:24px;padding:0 8px;border-radius:12px;background:var(--warn);color:#1f1300;font-size:13px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 1px 0 rgb(0 0 0/.08)}
.tlsub{line-height:1.3}
@media(max-width:600px){.tlsub{flex-basis:100%;margin-left:40px;margin-top:-4px}}
/* Aircraft types as cards (Aircraft → Aircraft types): photo on top, the type, its maker and model, hours bar, four numbers, last flown + its flights */
table.tcards .gctitle{font-size:21px}
table.tcards .gcsub{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tcmm{color:var(--mute);font-size:13px}
.tcfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.tcfoot .mini{text-decoration:none}
.maplegend em{flex-basis:100%;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mapsum .maplegend.grad i{flex:1 1 120px}
/* a map's own layers (Leaflet panes up to 700, its buttons 800-1000, the overlays) stay inside it: the sliders drop-down and dialogs open above */
.mapwrap,.leaflet-container{isolation:isolate}
.maphd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mapclear{text-transform:none;letter-spacing:0;font-weight:600}
.mapchips .mapchipall{background:none;color:var(--mute);text-decoration:underline;padding:5px 6px}
.uhpanel>.uhclear{justify-self:start;font-weight:600}
/* the flight video: the canvas (or the finished video) at the size of the dialog, a progress line, the buttons */
.vidfmt{margin:6px 0 10px}
.vidstage{display:grid;place-items:center;background:#050913;border-radius:14px;overflow:hidden;max-height:62vh}
.vidstage canvas,.vidstage video{display:block;max-width:100%;max-height:62vh;width:auto;height:auto}
.vidstage [hidden]{display:none}
.vidbar{height:4px;border-radius:2px;background:var(--line);margin:10px 0;overflow:hidden}.vidbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.vidacts{gap:8px;flex-wrap:wrap}
/* a shared logbook (read only): its bar on top, and nothing that changes anything or shows documents */
.sharebar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:color-mix(in srgb,var(--accent) 14%,var(--card));border-bottom:1px solid var(--line);font-size:14px}
body.shareview .newbtn,body.shareview .scanbtn,body.shareview .fab,body.shareview .uhplus,body.shareview .selbtn,body.shareview .fcm,body.shareview [data-cm],body.shareview .fcmiss,body.shareview section.tolog,
body.shareview #vfedit,body.shareview #vfmore,body.shareview .vfnotes,body.shareview .vfatt,body.shareview .vffiles,body.shareview .chban,body.shareview .uhacts,body.shareview .tlfoot,body.shareview #btabs .tnew,body.shareview .refreshbtn,body.shareview .navsearch{display:none!important}
body.shareview [data-arow],body.shareview [data-trow],body.shareview [data-aprow]{pointer-events:none}body.shareview [data-arow] a,body.shareview [data-trow] a,body.shareview [data-aprow] a{pointer-events:auto}
.sharepin form{display:flex;gap:8px;margin:10px 0}.sharepin input{flex:1 1 0;min-width:0;width:100%;box-sizing:border-box;font-size:24px;letter-spacing:.3em;text-align:center;min-height:52px}.sharepin button{flex:none;min-height:52px;padding:0 20px}/* the PIN box shrinks: Open stays inside the card (it stuck out on iPad) */
.shform{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:10px 0}.shform label:not(.inline){display:flex;flex-direction:column;gap:4px}
.shnew{border-color:var(--accent);margin:8px 0}.shrow{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}.shrow code{word-break:break-all;font-size:12.5px;flex:1;min-width:0}.shpin{font-size:22px;letter-spacing:.2em}
.viddlg .vidhead{margin-bottom:6px}.viddlg>p{margin:0 0 12px}.viddlg .vidfmt{margin:0 0 12px}.viddlg .vidacts{margin-top:4px}
.mapclear[hidden],.uhpanel [hidden].mini{display:none!important}
/* hidden means hidden, whatever a button or box sets as its display (a [hidden] Clear filters / Download showed anyway) */
[hidden]{display:none!important}
/* type cards: the photographer credit (required by Wikimedia) on the photo, small, at its foot */
table.tcards .gcph{position:relative;overflow:hidden}
table.tcards .gcph .accred{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 10px 5px;font-size:10.5px;line-height:1.2;color:#fff;background:linear-gradient(transparent,rgb(0 0 0/.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* dialogs: above everything (the header, the side menu, a map in full screen), centred on the screen, short questions narrow
   (Maxime 2026-10-26: the "Reject …?" question sat at the top, 980 px wide, over the menu and the sliders button) */
.modal{z-index:3500}.busy{z-index:3600}.toast{z-index:3700}
/* opened from inside a pop-up (a flight's PDF / photo, the aircraft's big photo): above it, under the busy sign and the messages */
#docview,.acbig{z-index:3550}
.modal>.dialog{margin-block:auto}
.modal>.dialog:not(:has(form, table, input, select, textarea, canvas, video, .fcard, .scroll, .card, img, svg, .vgrp, .vidstage)){width:min(560px,100%)}
/* inner space at the bottom of every dialog (the "Reject" buttons sat on its bottom border); the flight form keeps its own save bar */
.modal>.dialog:not(:has(#ff)){padding-bottom:18px}
.modal>.dialog>:last-child{margin-bottom:0}
/* a fold-out menu inside the sliders drop-down opens in place on its own line (no pop-up over a pop-up: "My characteristics" covered CSV export on phones) */
.uhpanel .dmenu[open]{flex-basis:100%}
.uhpanel .dmenu .dpanel{position:static;box-shadow:none;margin-top:8px;min-width:0;width:auto}
/* phones: the map's summary and details clear the replay bar (they touched it) */
@media(max-width:700px){.mapsum{bottom:78px}.mapsheet{bottom:78px}}

/* Settings, redesigned (2026-10-26): sections with an icon, a title and what they are for; the side list with icons (a row of pills on phones);
   roomier cards, fields that line up, one-line labels where they fit */
.setp>h1{margin-bottom:6px}
.setsech{display:flex;align-items:center;gap:14px;margin:34px 2px 14px;text-transform:none;letter-spacing:0;color:var(--ink)}
.setsec:first-child .setsech{margin-top:12px}
.setsech h2{font-size:20px;margin:0;letter-spacing:-.01em}.setsech p{margin:2px 0 0;color:var(--mute);font-size:14px;font-weight:400}
.setic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.setic svg{width:20px;height:20px}
.setsec .card{padding:20px 22px;border-radius:16px;margin:0 0 14px;box-shadow:0 1px 2px rgb(16 24 40/.04)}
.setsec .card>h2:first-child{font-size:17px;margin:0 0 4px}.setsec .card>h2.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.setsec .card .setsub{margin:0 0 16px;font-size:13.5px}
.setsec .card .fgrid,.setsec .card .ffgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 18px;align-items:end}
.setsec .card label{font-size:13.5px}
.setsec .card select,.setsec .card input:not([type=checkbox]):not([type=radio]),.setsec .card textarea{border-radius:10px}
.setsec .card button.primary,.setsec .card .btn.primary{min-height:40px}
.setnav button{display:flex;align-items:center;gap:8px}.setnav button svg{flex:none;opacity:.8}
.setnav button.on svg{opacity:1}
@media(min-width:1000px){.setwrap{grid-template-columns:220px minmax(0,1fr);gap:32px}.setnav{gap:2px}.setnav button{padding:10px 12px;font-size:14.5px;font-weight:500}}
@media(max-width:999px){.setnav button{padding:8px 13px}.setsech h2{font-size:18px}.setic{width:36px;height:36px}}
@media(max-width:600px){.setsec .card{padding:16px}.setsec .card .fgrid,.setsec .card .ffgrid{grid-template-columns:1fr 1fr}.setsech p{font-size:13px}}
/* phones: settings fields in one column, never wider than their card (the second column ran off the edge) */
.setsec .card .fgrid>*,.setsec .card .ffgrid>*{min-width:0}.setsec .card .fgrid select,.setsec .card .fgrid input:not([type=checkbox]):not([type=radio]),.setsec .card .ffgrid select,.setsec .card .ffgrid input:not([type=checkbox]):not([type=radio]){max-width:100%;min-width:0;width:100%}
/* a tick box keeps its own size, its words right next to it (the read-only box sat at the far left, its words at the far right) */
.setsec .card input[type=checkbox],.setsec .card input[type=radio]{flex:none;width:auto;margin:0}.setsec .card label.inline{gap:10px;line-height:1.35}
.setchecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 18px;margin-top:6px}.setchecks>label.inline{min-height:40px;font-size:14px}
@media(max-width:600px){.setsec .card .fgrid,.setsec .card .ffgrid{grid-template-columns:minmax(0,1fr)}}

/* Flights to log (2026-10-28 redesign): a short to-do list above the logbook, one slim row per flight — not logbook cards */
section.tolog.tl2{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px 16px 6px;margin:0 0 18px}
section.tolog.tl2 .tlh{display:flex;align-items:center;gap:10px;margin:0 0 4px;flex-wrap:nowrap}section.tolog.tl2 .tlsub{margin:0;flex-basis:auto;white-space:nowrap}
section.tolog.tl2 .tlh h2{margin:0;font-size:17px}
section.tolog.tl2 .tlcount{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.tl2 .tllist{display:flex;flex-direction:column}
.tl2 .tlitem{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.tl2 .tlitem.hidden{display:none}
.tl2 .tlitem:first-child{border-top:0}
.tl2 .tlitem:hover .tlroute b{color:var(--accent)}
.tl2 .tld{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;border-radius:12px;background:var(--head);line-height:1.05;box-sizing:border-box}
.tl2 .tld b{font-size:20px;font-weight:800}.tl2 .tld span{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--accent)}.tl2 .tld small{font-size:11px;color:var(--mute)}
.tl2 .tlmain{min-width:0;display:flex;flex-direction:column;gap:3px}
.tl2 .tlroute{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tl2 .tlroute b{font-size:18px;font-weight:800;letter-spacing:.3px}
.tl2 .tlar{color:var(--mute)}
.tl2 .tlfn{font-size:13px;font-weight:700;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.tl2 .tlsub2{font-size:13.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl2 .tlstat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.tl2 .tlstat i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tl2 .tlstat.ready{color:var(--ok)}.tl2 .tlstat.soon{color:var(--accent)}.tl2 .tlstat.air{color:var(--accent)}
.tl2 .tlb{display:flex;align-items:center;gap:8px}
.tl2 .tlb button{min-height:40px;padding:0 16px;border-radius:10px}
.tl2 .tlb .tlnot{background:transparent;border-color:transparent;color:var(--mute)}.tl2 .tlb .tlnot:hover{color:var(--ink);background:var(--head)}
.tl2 .tlall{display:block;width:100%;margin:2px 0 8px;background:transparent;border:0;color:var(--accent);font-weight:600;min-height:40px}
.tlafter{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);margin:0 4px 10px}
@media(max-width:600px){
  section.tolog.tl2{padding:12px 12px 4px}
  .tl2 .tlitem{grid-template-columns:48px minmax(0,1fr);gap:4px 12px}
  .tl2 .tld{width:48px;height:52px;grid-column:1;grid-row:1 / span 2;flex-direction:column;align-items:center;gap:0}.tl2 .tld b{font-size:18px}
  .tl2 .tlmain{grid-column:2;grid-row:1}
  .tl2 .tlsub2{white-space:normal}
  .tl2 .tlb{grid-column:2;grid-row:2;justify-content:flex-start;justify-self:stretch}
  section.tolog.tl2 .tlsub{flex-basis:auto;margin:0}
  .tl2 .tlb .primary{flex:1}
}

/* a flight saved on this device, not sent yet: blue like the bar at the bottom, and said in words */
.pendtag{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:999px;background:#1d4ed8;color:#fff;font-size:12px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.pendtag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85}
table.lbt tr.pendrow td{background:color-mix(in srgb,#2563eb 10%,var(--card))}table.lbt tr.pendrow td:first-child{box-shadow:inset 3px 0 0 #3b82f6}

/* "Clear filter" next to the magnifier while a filter is on (2026-10-28) */
.uhead .uhclr{min-height:44px;border-radius:12px;padding:0 14px;font-weight:600}
.uhead .uhclr[hidden]{display:none!important}
.uhead .uhclr .uhcs{display:none}
@media(max-width:600px){.uhead .uhclr{padding:0 12px}.uhead .uhclr .uhcl{display:none}.uhead .uhclr .uhcs{display:inline}}

/* shared logbook (2026-10-29): whose logbook it is at the top and in the footer; the ready-made Printouts page */
.sharebar .shname{font-weight:700}.sharebar .shmeta{color:var(--mute)}
#pendbar.sharefoot .pbt b{font-weight:700}
.shpintro{margin:0 0 12px;max-width:70ch;color:var(--mute)}.shpper{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}.shpper a{display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-size:14px}.shpper a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.shpcount{margin:0 0 10px;min-height:1.2em}
h2.shpg{font-size:15px;margin:18px 0 8px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.shpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.shpcard{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:76px;box-sizing:border-box;padding:14px 40px 14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none}
.shpcard b{font-size:15.5px}.shpcard span{font-size:13px;color:var(--mute);line-height:1.35}.shpcard i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:22px;color:var(--mute)}
.shpcard:hover,.shpcard:focus-visible{border-color:var(--accent)}
@media(max-width:600px){.shpgrid{grid-template-columns:minmax(0,1fr)}}
.pf .pfname{font-size:8pt;color:#555;align-self:flex-end;margin:0 8px}.repfoot{margin:18px 0 0;padding-top:8px;border-top:1px solid #ccc;font-size:9pt;color:#555}
@media(max-width:600px){.sharebar>span{min-width:0}.sharebar .shmeta{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* a shared logbook's table: no Actions column (Edit / ⋯ did nothing there but showed) */
body.shareview .lbt th.acts,body.shareview .lbt td.acts,body.shareview #lbhead .lbhc.acts{display:none!important}
/* Print / PDF redone (2026-10-29): one column of cards, a sheet to choose the printout, one Create printout bar */
.printlayout{display:block!important;max-width:980px}
.pform{display:flex;flex-direction:column;gap:14px}
.pform .pcard{margin:0;padding:18px 20px;border-radius:16px}
.pform .pcard>h3,.pform .pdata h3{font-size:15px;margin:18px 0 10px}.pform .pcard>h3:first-child{margin-top:0}
.pck{font-size:12.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.pchead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}.pform .pchead h2{margin:0;font-size:20px;flex:1 1 240px;min-width:0;line-height:1.25}
.pform .pnote{margin:6px 0 0}
.precent{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.pchip{display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;text-decoration:none;font-weight:500;cursor:pointer;line-height:1.2;text-align:left}
.pchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.pper{display:flex;flex-wrap:wrap;gap:8px}
.prange{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.prange label{display:flex;flex-direction:column;gap:4px;font-size:13px}.prange[hidden]{display:none}
.prange input{min-height:40px}
.pfilt{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 16px;margin-top:16px;align-items:end}
.pfilt>label{display:flex;flex-direction:column;gap:4px;font-size:13px;min-width:0}.pfilt select{width:100%;min-width:0;min-height:40px}
.psim{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;font-size:13px}
.pseg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;align-self:flex-start;max-width:100%}
.pseg label{display:flex;margin:0;position:relative}.pseg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pseg span{display:flex;align-items:center;min-height:38px;padding:0 14px;font-size:14px;cursor:pointer;border-left:1px solid var(--line);white-space:nowrap}
.pseg label:first-child span{border-left:0}
.pseg input:checked+span{background:var(--accent);color:var(--accent-ink);font-weight:600}
.pseg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
.pimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pimg{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.pimgv{flex:none;width:96px;height:64px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box}
.pimgv img{max-width:100%;max-height:100%;object-fit:contain}.pimgv .mute{color:#667;text-align:center;padding:4px}
.pimgb{display:flex;flex-direction:column;gap:6px;min-width:0}.pimga{display:flex;gap:6px;flex-wrap:wrap}
.pbar{position:sticky;bottom:calc(60px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 6px 24px rgb(0 0 0/.14)}
.pbar .pcount{flex:1;min-width:0;font-size:14px;color:var(--mute)}.pbar .pcount b{color:var(--ink)}
.pbar .primary{min-height:46px;padding:0 24px;font-size:16px;flex:none}
.ppick[hidden]{display:none!important}
.ppick{position:fixed!important;inset:0;top:0!important;z-index:3000;display:flex!important;align-items:center;justify-content:center;background:rgb(0 0 0/.45);padding:24px;max-height:none!important;margin:0;box-sizing:border-box}
.ppbox{display:flex;flex-direction:column;gap:10px;width:min(720px,100%);height:min(86vh,900px);max-height:100%;background:var(--card);border-radius:18px;padding:18px;box-sizing:border-box;box-shadow:0 20px 60px rgb(0 0 0/.35)}
.ppick .ppickh{display:flex!important;align-items:center;justify-content:space-between;gap:12px}.ppick .ppickh b{font-size:17px}
.ppick input[type=search]{width:100%;min-height:44px;font-size:16px;box-sizing:border-box}
.ppick .ptree{overflow:auto;flex:1;min-height:0;max-height:none!important;-webkit-overflow-scrolling:touch;font-size:14.5px}
.ppsec h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);margin:16px 0 4px}.ppsec:first-child h3{margin-top:2px}
.ptree a.ppitem{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:6px 12px;margin:0;border-radius:10px;color:var(--ink);text-decoration:none;box-sizing:border-box}
.ptree a.ppitem:hover{background:var(--head)}.ptree a.ppitem.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ppon{font-size:12px;color:var(--accent);flex:none}
.ptree a.ppitem[hidden],.ppsec[hidden]{display:none}
body.ppopen{overflow:hidden}
@media(max-width:600px){.ppick{padding:0}.ppbox{width:100%;height:100%;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom))}
  .pform .pcard{padding:16px}.pbar{padding:10px 12px;gap:10px}.pbar .primary{padding:0 16px}.pseg{display:flex;align-self:stretch}.pseg label{flex:1}.pseg span{justify-content:center;padding:0 6px;width:100%}}
@media print{.pbar,.ppick{display:none!important}}
.ptool{position:sticky;top:0;z-index:20;background:var(--bg);padding:8px 0;margin:0 0 8px;align-items:center}.pempty{max-width:560px}.pempty p{margin:6px 0 12px}
.pform .pchosen{display:block}.pform #pchange{display:inline-flex;flex:none}
@media print{main .pages{zoom:1!important}.ptfit{display:none}}
@media(max-width:600px){.ptool{position:static;gap:8px}.ptool>.btn,.ptool>button{min-height:40px;padding:0 12px;font-size:14px}}
.pcard.pchosen{display:block}.pchosen #pchange{display:inline-flex;flex:none}.printlayout>.pcard{padding:18px 20px;border-radius:16px}
/* printout pages like a PDF viewer (2026-10-29): first / previous / page / next / last, floating above the footer */
.ptnav{position:fixed;z-index:40;bottom:calc(64px + env(safe-area-inset-bottom));left:calc(var(--navw,0px) + (100vw - var(--navw,0px)) / 2);transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 28px rgb(0 0 0/.22)}
.ptnav button{min-width:44px;min-height:44px;border-radius:99px;font-size:18px;padding:0;display:flex;align-items:center;justify-content:center}
.ptnav button:disabled{opacity:.35}
.ptnav select{min-height:44px;border-radius:99px;padding:0 12px;font-size:15px;max-width:44vw}
@media screen{.pages{padding-bottom:84px}.rep{overflow-x:auto;max-width:100%;box-sizing:border-box}}
@media print{.ptnav{display:none!important}.pages{padding-bottom:0}}
/* the signature pad */
.sgpad{position:fixed;inset:0;z-index:3100;background:rgb(0 0 0/.5);display:flex;align-items:center;justify-content:center;padding:16px}
.sigbox{background:var(--card);border-radius:18px;padding:16px;width:min(760px,100%);max-height:100%;overflow:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}.sgpad{box-sizing:border-box}
.sighead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.sighead b{font-size:17px}
.sigbox canvas{width:100%;aspect-ratio:3/1;height:auto;background:#fff;border:2px dashed var(--line);border-radius:12px;touch-action:none;cursor:crosshair;box-sizing:border-box}
.sigbtns{display:flex;gap:8px;align-items:center}.sigbtns .grow{flex:1}
.repsig{margin:24px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:9pt}.repsig img{max-height:60px;max-width:240px}
/* New person from the New flight page (2026-10-29) */
.pkadd{border:1px solid var(--accent);border-radius:12px;padding:12px;margin:8px 0;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.pkaddg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.pkaddg label{display:flex;flex-direction:column;gap:4px;font-size:13px}.pkaddg input{min-height:40px;width:100%;box-sizing:border-box}
.pkaddb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pkaddb .grow{flex:1}
.pktop .pkaddbtn{margin-left:auto}
/* (with the form open: the A–Z and sort rows step aside, the form fits above a phone's keyboard) */
.apdrop:has(.pkadd) .azchips,.apdrop:has(.pkadd) .pkopts{display:none}
@media(max-width:600px){.pkaddg{grid-template-columns:1fr 1fr}.pkaddg label:last-child{grid-column:1/-1}.pkadd{padding:10px;gap:8px}}
/* your photo (2026-10-30): Settings, and a shared logbook (drawn, never an image file) */
.mephrow{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}.mephv{flex:none;width:112px;height:112px;border-radius:14px;overflow:hidden;background:var(--head);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.mephv img{width:100%;height:100%;object-fit:cover}.mephb{flex:1 1 240px;min-width:0}.mephb p{margin:0 0 10px}
.shpilot{display:flex;align-items:center;gap:16px;padding:16px 18px;margin:0 0 14px}.shpilot b{display:block;font-size:19px}.shpilot span.mute{font-size:13.5px}
.shpav,.shbav{flex:none;display:inline-flex;border-radius:50%;overflow:hidden;background:var(--head)}.shpav{width:96px;height:96px}.shbav{width:28px;height:28px;vertical-align:middle;margin-right:8px}
.shphc{display:block;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none}
@media print{.shphc{display:none}}
/* share links on a phone: each link a small block (who, status, dates, buttons) — no sideways scrolling to reach Show link & PIN */
@media(max-width:1180px){.shtable thead{display:none}.shtable,.shtable tbody{display:block;min-width:0!important;width:100%}.shtable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 4px;border-bottom:1px solid var(--line)}
  .shtable td{display:block;padding:0!important;border:0!important;min-width:0}.shtable td:nth-child(3)::before{content:'Until ';color:var(--mute)}.shtable td:nth-child(4)::before{content:'Opened ';color:var(--mute)}.shtable td:nth-child(5):not(:empty)::before{content:'Last ';color:var(--mute)}
  .shtable td:last-child{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.shtable td:last-child:empty{display:none}}
/* the intro page of a logbook printout (2026-10-30): the first page on its own, so each spread's two pages face each other */
.page.fmt.intro{justify-content:space-between}.page.fmt.intro .iin{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4mm}
.page.fmt.intro .ilogo{max-height:22mm;max-width:80mm}.page.fmt.intro .ik{font-size:26pt;font-weight:700;letter-spacing:.12em}.page.fmt.intro .iname{font-size:18pt}.page.fmt.intro .iaddr{font-size:9pt;color:#333}
.page.fmt.intro .isum{border-collapse:collapse;font-size:10pt;margin-top:6mm;min-width:110mm}.page.fmt.intro .isum td{border:none;border-bottom:.5pt solid #bbb;padding:1.6mm 3mm;text-align:left}.page.fmt.intro .isum td:first-child{color:#555;width:55%}
.page.fmt.intro .inote{font-size:8pt;color:#666;margin-top:4mm}
.page.fmt td.rem .remc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-height:2.35em;word-break:break-word}
.page.fmt.intro table.isum{flex:none;table-layout:auto;width:auto;height:auto}.page.fmt.intro table.isum td{height:auto;font-size:10pt;white-space:normal;overflow:visible;border:none;border-bottom:.5pt solid #bbb;padding:1.6mm 3mm;text-align:left}
.page.fmt.pfit th,.page.fmt.pfit td{font-size:calc(7.2px * var(--pk,1))!important;padding-top:calc(1px * var(--pk,1))!important;padding-bottom:0!important;line-height:1.05!important;height:auto!important}
.page.fmt.pfit .pf{margin-top:calc(2mm * var(--pk,1))}.page.fmt.pfit .ph{min-height:calc(14mm * var(--pk,1))}
/* cards as one continuous list with a date bar (2026-10-30, "like Google Photos") */
main.cstream .pager,main.cstream .jd,main.cstream .lbbreak,main.cstream #lbbot{display:none!important}
.fstream .fmon{margin:0 0 6px}.fstream .fmonh{position:sticky;top:var(--fmtop,0px);z-index:3;margin:14px 0 8px;padding:6px 2px;font-size:15px;font-weight:700;background:var(--bg)}
.fstream .fsent{min-height:40px;display:flex;align-items:center;justify-content:center;padding:10px 0 24px}
.fstream.withscrub{padding-right:30px}
.fscrub{position:fixed;z-index:30;right:2px;top:calc(var(--fstop,120px));bottom:calc(64px + env(safe-area-inset-bottom));width:34px;touch-action:none;cursor:ns-resize;--fsy:0%}
.fscrub .fsrail{position:absolute;inset:0;border-right:2px solid color-mix(in srgb,var(--mute) 30%,transparent)}
.fscrub .fsy{position:absolute;right:6px;transform:translateY(-50%);font-size:10.5px;color:var(--mute);font-weight:600;letter-spacing:-.01em;pointer-events:none}
.fscrub .fsthumb{position:absolute;right:-4px;top:var(--fsy);transform:translateY(-50%);width:10px;height:28px;border-radius:6px;background:var(--accent);box-shadow:0 1px 4px rgb(0 0 0/.25)}
.fscrub.on .fsthumb{width:14px}
.fscrub .fsbub{position:absolute;right:40px;top:clamp(16px,var(--fsy),calc(100% - 16px));transform:translateY(-50%);white-space:nowrap;padding:6px 12px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;box-shadow:0 4px 14px rgb(0 0 0/.25)}
@media print{.fscrub{display:none!important}}
.shmod .shfld{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}.shmod .shlab{font-size:13px;color:var(--mute);font-weight:600}
.shmod .shval{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.shmod #shlink{flex:1 1 260px;min-width:0;font:13.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;resize:none;padding:8px 10px;border-radius:10px}
.shmod .shpin{font-size:30px;letter-spacing:.25em;font-variant-numeric:tabular-nums}
.modal .acown{margin:8px 0 12px;align-items:center;gap:10px;flex-wrap:wrap}.modal .acph.gcph.big{display:block;aspect-ratio:2/1;border-radius:12px;overflow:hidden;margin:6px 0}.modal .acph.gcph.big img{width:100%;height:100%;object-fit:cover}
#fstop.fsent{min-height:0;padding:0}.fstream .fmon:first-child .fmonh{margin-top:2px}
/* cards: three side by side on a large screen, each wide enough to show everything (Maxime 2026-10-30) */
@media(min-width:1700px){.fcards:not(.tlcards){grid-template-columns:repeat(auto-fill,minmax(max(440px,calc((100% - 20px) / 3)),1fr))}} /* never more than 3 per row (Maxime 2026-10-30) */
/* the city under each airport: never cut on a phone ("Fort Lauderdale…"), it takes a second line instead (Maxime 2026-10-30: "don't hide any info") */
@media(max-width:600px){.fcard .fca .fcn{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;line-height:1.2}}
.fscrub .fsthumb{top:clamp(14px,var(--fsy),calc(100% - 14px))} /* the month shown while scrolling: left of the year labels, never half above the bar (Maxime 2026-11-03) */
.acwiki{display:inline-flex;align-items:center;gap:6px;margin:8px 0 4px;font-weight:600;min-height:32px}
/* Stats → Totals: recent periods and month by month */
.stperiods .stgrid{margin-top:4px}.stper{text-decoration:none;color:inherit}.stper:hover{border-color:var(--accent)}
.stmh{margin:18px 0 8px;font-size:16px}.stmyears{margin-bottom:8px}
.stmon{display:flex;flex-direction:column}
.stmr{display:grid;grid-template-columns:minmax(6.5em,9em) minmax(40px,1fr) 4.6em 3.6em;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;min-height:40px}
a.stmr:hover{background:var(--chip)}.stmr b{text-align:right;font-variant-numeric:tabular-nums}.stmr small{color:var(--mute);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stmn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stmbest{font-style:normal;font-size:11px;font-weight:700;color:var(--accent);margin-left:4px}
.stmbar{height:10px;border-radius:5px;background:color-mix(in srgb,var(--accent) 10%,transparent);overflow:hidden}.stmbar i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.stmfut{opacity:.45}.stmtot{border-bottom:0;font-weight:700}
@media(max-width:420px){.stmr{grid-template-columns:minmax(5.6em,7em) minmax(30px,1fr) 4.2em 3.2em;gap:8px}}
.planbn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px}.planbn.bad{border-color:var(--bad)}
.planopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:10px 0}
.planbuy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;min-height:56px;text-align:left}.planbuy span{font-weight:400;font-size:13px;opacity:.9}
.planlinks{gap:12px;align-items:center;flex-wrap:wrap}
/* signatures: on a flight, the signer's page (share address) */
.vsig{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.vsig+.vsig{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.vsig img{width:180px;max-width:45%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.sgsets{border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:4px;margin:0 0 10px}.sgsets legend{font-size:13px;color:var(--mute);padding:0 4px}
.signpage{max-width:760px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px}
.signnote{font-style:italic;margin:0}.signflights{display:flex;flex-direction:column}.signf{padding:10px 0;border-bottom:1px solid var(--line)}.signf:last-child{border-bottom:0}
.signfh{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}.signfh span{color:var(--mute)}.signfr{margin:2px 0}
.signcert{margin:10px 0;align-items:flex-start;gap:10px;min-height:44px}.signcert input{width:22px;height:22px;flex:none;margin-top:2px}
#signimg{height:70px;width:auto;max-width:60%;background:#fff;border:1px solid var(--line);border-radius:8px}
.remrow{flex-wrap:wrap;gap:6px 14px;align-items:center;margin:8px 0}.remrow .inline{min-height:36px}
#vfsig .vbox{padding:12px 14px}#vfsig .vbox .row{gap:8px 12px;align-items:center;flex-wrap:wrap}#vfsigs:not(:empty){margin-bottom:12px}#sglist>:last-child{margin-bottom:0}
.page.fmt td.rem .remc.remc1{-webkit-line-clamp:1;line-clamp:1;max-height:1.2em}
.page.fmt td.sgsc{text-align:left!important;vertical-align:middle;padding:1px 6px!important;border-top-color:transparent!important;white-space:normal}.page.fmt td.sgsc .rsig{display:flex;align-items:center;gap:8px;min-width:0}.page.fmt td.sgsc .rsig+.rsig{margin-top:2px}
.page.fmt td.sgsc .rsig img{height:2.4em;width:auto;max-width:22%;flex:none;mix-blend-mode:multiply}.page.fmt td.sgsc .rsigt{line-height:1.25;min-width:0;overflow-wrap:anywhere}.page.fmt td.sgsc .rsige{font-style:italic}
.page.fmt tr.sgr td{border-bottom-color:transparent!important}.page.fmt tr.sgr2.sgrmid td{border-bottom-color:transparent!important}
/* airport cards: the world map behind, the airport's dot (Maxime 2026-11-07) */
table.ltable.cardgrid tbody tr.gcrow.apmapped{isolation:isolate}
svg.apmap{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
svg.apmap use{fill:color-mix(in srgb,var(--ink) 7%,transparent)}
svg.apmap .apring{fill:none;stroke:color-mix(in srgb,var(--accent) 55%,transparent)}svg.apmap .apdot{fill:var(--accent)}
tr.apmapped>td.gcard{position:relative;isolation:isolate}tr.apmapped>td.gcard>:not(svg.apmap){position:relative;z-index:1} /* the map is inside the card's cell: a table row keeps only its cells */
/* the ⋯ menu and the signature pad above an open window (.modal 3500, a document 3550), under the busy sign and messages (3600+): the menu
   opened behind the flight window, so the ⋯ of an open flight seemed to do nothing (Maxime 2026-11-07, iPad) */
.rowmenu{z-index:3560}.sgpad{z-index:3580}
.signend{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.signend p{margin:0;font-size:16px;line-height:1.45}
.signpage.inperson{padding:0;max-width:none}
.vfrow{gap:8px;flex-wrap:nowrap}.vfrow input{flex:1;min-width:0;font-size:20px;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}.vres{margin-top:12px}
.sgcode{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.page.fmt .pf .sgnote{font-size:6.5px;color:#444;margin-bottom:2px}
.page.fmt tr.sgr2 td{border-top-color:transparent!important}
.shlist{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line)}
.shitem{padding:10px 2px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}.shitem .shih{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.shitem .shname{font-size:15px;min-width:0;overflow-wrap:anywhere}
.shitem .mini{min-height:34px}.shitem .shcancel{border-color:transparent;background:none;color:var(--bad)}.shitem .shcancel:hover{background:color-mix(in srgb,var(--bad) 8%,transparent)}
.shitem.past{opacity:.75}.shpast{margin-top:6px}.shpast>summary{cursor:pointer;min-height:40px;display:flex;align-items:center;color:var(--mute);font-weight:600}
/* Ask for a signature (Maxime 2026-11-08: "the signature page send looks ugly"): even space between the fields; the main action first and
   full width on phones; the "Link ready" screen: a check, what was asked, the link on one line, Send / Copy the message / Email */
.sgform{display:flex;flex-direction:column;gap:14px}.sgform>h1,.sgform>p{margin:0}.sgform .sgsets{margin:0}
.sgbtns{display:flex;flex-direction:column;gap:10px;margin-top:6px}.sgbtns>button{min-height:46px;width:100%}
.sgbtns .sgcancel{border-color:transparent;background:none;color:var(--mute)}
@media(min-width:600px){.sgbtns{flex-direction:row-reverse;align-items:center}.sgbtns>button{width:auto}.sgbtns .sgcancel{margin-right:auto}}
.sgform.sgsent{gap:16px}
.sgready{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px}.sgready h1{margin:4px 0 0}.sgready p{margin:0;color:var(--mute)}
.sgok{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.sgok svg{width:28px;height:28px}
.sgsum{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--head)}
.sgsum>div{display:flex;justify-content:space-between;gap:12px;font-size:15px}.sgsum>div span{color:var(--mute)}.sgsum>div b{text-align:right}
.sgsum .sglinkin{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mute);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px;width:100%;text-overflow:ellipsis;margin-top:2px}
.sgsend{display:flex;flex-direction:column;gap:10px}.sgsend>*{min-height:48px;width:100%;gap:8px;font-weight:600}
@media(min-width:600px){.sgsend{flex-direction:row}.sgsend>*{flex:1;width:auto}}
.sgafter{margin:0;text-align:center}.sgdone{display:flex;justify-content:center}.sgdone button{min-width:140px;min-height:44px}
.signpage form.card{display:flex;flex-direction:column;gap:14px}.signpage form.card>h2,.signpage form.card>p{margin:0}.signpage .fgrid2{gap:14px}
.signpage form.card>.row:has(#signgo){margin-top:4px!important}.signpage #signgo{min-height:48px;min-width:180px}
.vsig .sgrm{margin-top:8px;color:var(--mute)}
.vcfl{display:flex;flex-direction:column;gap:6px;margin:10px 0}.vcfl>div{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.signdone{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.signdone h1,.signdone p{margin:0}
.sgcert{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px dashed var(--line);border-radius:12px;padding:12px 16px;background:var(--head);width:100%}.sgcert>span:first-child{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);font-weight:700}.sgcert b{font:700 20px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.fcsig{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:13px;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ink)}.fcsig span{color:var(--ok)}
.rtag.sgtag{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ink);margin-right:6px}
.tsrow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;column-gap:12px;row-gap:2px;margin-top:6px}.tsrow input[type=range]{flex:1;min-width:0;height:32px}.tsa{font-weight:700;color:var(--mute);font-size:14px}.tsa.big{font-size:24px}.tsrow output{min-width:3.2em;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
/* the back button, first in every page's header (not on the first page) */
.uhead>.uhback{flex:none;width:44px;height:44px;padding:0;border-radius:12px;display:inline-grid;place-items:center;margin-right:2px}
/* Back at the top of the signature windows (Maxime 2026-11-08: "I don't see the back button when ask for signature") */
.mback{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px 0 8px;border-radius:12px;font-weight:600}
.signpage.inperson>.mback{margin-bottom:4px}
@media(max-width:600px){main .uhead>.uhback{width:40px;height:40px;margin-right:0}main .uhead.uhead{column-gap:8px}} /* phones: the Back button leaves the section drop-down room to read */

/* the text size steps under the slider, 100% marked (Maxime 2026-11-08: "here should show a 100% line") */
.tsticks{grid-column:2;display:flex;justify-content:space-between;padding:0 8px;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.tsticks span{position:relative;width:0;display:flex;justify-content:center;white-space:nowrap;padding-top:9px}.tsticks span::before{content:"";position:absolute;top:0;left:0;width:1.5px;height:7px;border-radius:1px;background:currentColor;opacity:.6}
.tsticks span.tsdef{color:var(--ink);font-weight:700}.tsticks span.tsdef::before{height:9px;width:2px;opacity:1;background:var(--accent)}
.tsticks span:first-child{justify-content:flex-start}.tsticks span:last-child{justify-content:flex-end}
/* the Back button: a quiet chevron the height of the tabs next to it (Maxime 2026-11-08: "seriously") */
.uhead>.uhback{width:40px;height:40px;border-radius:10px;background:transparent;border-color:transparent;color:var(--accent)}.uhead>.uhback:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* printouts: the signature line on the right, next to the remarks (Maxime 2026-11-08: "better layout should be on the right") */
.page.fmt td.sgsc .rsig{flex-direction:row-reverse;justify-content:flex-start}.page.fmt td.sgsc .rsigt{text-align:right;max-width:78%}
/* Cards by month (2026-11-08, test first): a band per month with its days that stays on top until the next month; one card a row,
   two side by side when each has 480 px (Maxime: "one flight per line or 2 flight if enough space") */
.ftrips .fstream{container-type:inline-size}
.fstream .fmonh.ftband{position:sticky;top:var(--fmtop,0px);z-index:3;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;background:linear-gradient(var(--bg) 0,var(--bg) calc(100% - 18px),color-mix(in srgb,var(--bg) 0%,transparent));border:0;border-radius:0;padding:8px 2px 20px;margin:6px 0 -6px;box-shadow:none;pointer-events:none;min-width:0}
.fstream .fmonh.ftband>*{pointer-events:auto}.ftband>b{flex:none;font-size:16px;font-weight:800;text-transform:capitalize;min-width:9.5em}
.ftdays{flex:1 1 1000px;position:relative;display:flex;justify-content:space-between;gap:2px;min-width:0;max-width:1100px;margin-left:auto;overflow-x:auto;scrollbar-width:none;padding:4px 6px 2px;scroll-padding-inline:6px} /* room for the ring round a day: the first one was cut in half; the band a strip fading into the cards, not a box (Maxime 2026-11-08: "shouldn't be a box", "should be a fading strip") */.ftdays::-webkit-scrollbar{display:none}
.ftd{flex:1 0 30px;max-width:40px;height:44px;min-width:0;border:0;padding:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;color:var(--mute);font:inherit;font-variant-numeric:tabular-nums}
.ftd small{font-size:9.5px;line-height:1;font-weight:600;opacity:.7;text-transform:uppercase}
.ftd i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600}
.ftd.we i{opacity:.7}
button.ftd.f{cursor:pointer;color:var(--ink)}button.ftd.f i{background:var(--accent);color:var(--accent-ink);font-weight:800;opacity:1}
/* night flying days the same colour as the others (Maxime 2026-11-10: "i dont like the different date color") */
button.ftd.f.cur i{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}button.ftd.f.cur small{color:var(--ink);opacity:1}
.ftdays:has(.ftd:nth-child(29)){scroll-snap-type:x proximity}.ftd{scroll-snap-align:start}
button.ftd.f:hover i{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.ftd.td i{box-shadow:inset 0 0 0 2px var(--accent)}button.ftd.f.td i{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.fcard.fcflash{outline:3px solid var(--accent);outline-offset:2px}
.ftrips .fcards:not(.tlcards){display:flex!important;flex-direction:column}
@container (min-width:980px){.ftrips .fcards:not(.tlcards){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}}
@media(max-width:700px){.ftband>b{min-width:0}.ftdays{flex-basis:100%;justify-content:flex-start;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}.ftdays::-webkit-scrollbar{display:none}.ftd{flex:0 0 30px;scroll-snap-align:start}}
/* Print / PDF on a wide screen (Maxime 2026-11-08: "why is print page not on full width, the print page is ugly"): two columns, the
   printout, flights, logo / signature and Create on the left (Create stays in view), the columns to print on the right */
@media(min-width:1300px){.printlayout{max-width:none!important}
  #pfo.pform{display:grid;grid-template-columns:minmax(420px,560px) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;gap:14px 18px;align-items:start}
  #pfo.pform>*{grid-column:1}#pfo.pform>.pchosen{grid-row:1}#pfo.pform>.pflights{grid-row:2}#pfo.pform>.plogosig{grid-row:3}
  #pfo.pform>.pbar{grid-row:4;position:sticky;bottom:12px}#pfo.pform>.pdata{grid-column:2;grid-row:1/6}
  #pfo .plogosig .pimgs{grid-template-columns:minmax(0,1fr)}}
/* the signature never cut off at the page's right edge (Maxime 2026-11-08: "cutout"): room on the right, the picture scaled into its line */
.page.fmt td.sgsc{padding-right:10px!important;overflow:hidden}.page.fmt td.sgsc .rsig{max-width:100%}.page.fmt td.sgsc .rsig img{max-height:2.2em;max-width:20%;object-fit:contain;margin-right:2px}

/* the signature on a printout: over the grid's extra lines, on the right, on a white label that hides only the lines under it */
.page.fmt td.sganc{position:relative;overflow:visible!important}
.page.fmt .sgover{position:absolute;right:4px;top:1px;width:max-content;max-width:170mm;background:#fff;padding:1px 6px;border-radius:3px;text-align:left;white-space:normal;z-index:1}
.page.fmt .sgover .rsig{display:flex;flex-direction:row-reverse;align-items:center;gap:8px}.page.fmt .sgover .rsig+.rsig{margin-top:2px}
.page.fmt .sgover .rsig img{height:2.2em;width:auto;max-width:40mm;object-fit:contain;flex:none;mix-blend-mode:multiply}
.page.fmt .sgover .rsigt{line-height:1.25;text-align:right;overflow-wrap:anywhere}.page.fmt .sgover .rsige{font-style:italic}

/* ---------- clean look (html.clean, set in index.html; live for everyone since 2026-11-09) ----------
   Maxime: "a bit childish, not as clean as the competitors". Calmer: the font tops out at bold (no black 800/900: the Inter face
   above stops at 700), grey chips instead of lavender bubbles, quick picks as small rounded boxes, section titles in plain words
   (no capitals, no blue number discs), flat cards with less rounding, no colour washes behind the big numbers. */
html.clean{--chip:color-mix(in srgb,var(--ink) 6%,var(--card))}
html.clean .chip,html.clean .pchip{border:1px solid var(--line);background:var(--card);border-radius:8px;font-weight:500}
html.clean .chip:hover,html.clean .pchip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
html.clean .fcfn{background:none;padding:0 2px;color:var(--mute)}
html.clean .fcrole{letter-spacing:.02em;font-weight:600}
html.clean .fsec>h2{background:none;text-transform:none;letter-spacing:-.01em;font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
html.clean .flightform .fsec.step .steptog{font-size:15.5px}
html.clean .stepn,html.clean .flightform .stepn{width:auto;height:auto;min-width:1.4em;border-radius:0;background:none;color:var(--mute);border:0;font-size:inherit;font-weight:500;justify-content:flex-start}
html.clean .fsec{border-radius:12px}html.clean .fsec>h2{border-radius:11px 11px 0 0}
html.clean .card{border-radius:12px}
html.clean .fcard{border-radius:12px;box-shadow:0 1px 2px rgb(16 24 40/.04)}
html.clean .sthero,html.clean .g2tile.hero,html.clean .vzhero{background:var(--card)}
html.clean .uhname .uhntx{font-weight:700;letter-spacing:-.02em}
html.clean h1,html.clean h2,html.clean h3{letter-spacing:-.015em}
html.clean .uhtabsel{border-color:var(--line);background-color:var(--card);color:var(--ink);font-weight:600}
html.clean .uhname .uhnic{background:none;color:var(--mute)}
html.clean .sthero{border-color:var(--line)}
html.clean .stt,html.clean .g2tile{border:0;background:color-mix(in srgb,var(--ink) 3.5%,var(--card));border-radius:10px}
html.clean .sthk,html.clean .bgkick{color:var(--mute);font-weight:600;letter-spacing:.06em}
html.clean .startb{border-color:var(--line);background:var(--card)}
html.clean .vav{font-family:inherit;font-weight:600}
html.clean .vav.you{background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent)}
/* buttons, clean look (Maxime: "the buttons don't look professional enough"): quiet hairline buttons with a soft shadow, a
   primary with a little depth, icon buttons in the headers with no frame (grey on hover), a clear focus ring for the keyboard */
html.clean{--btnline:color-mix(in srgb,var(--ink) 14%,transparent);--btnr:8px;--btnw:500}
html.clean .btn:not(.on):not(.scanbtn),html.clean .card button:not([class]),html.clean .fsec button:not([class]),html.clean .modal button:not([class]){box-shadow:0 1px 2px rgb(16 24 40/.06)}
html.clean button:focus-visible,html.clean .btn:focus-visible,html.clean a:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:2px}
html.clean button.primary,html.clean .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 82%,#000);font-weight:600;box-shadow:0 1px 2px rgb(16 24 40/.14),inset 0 1px 0 rgb(255 255 255/.16)}
html.clean button.primary:hover,html.clean .btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);border-color:color-mix(in srgb,var(--accent) 70%,#000)}
html.clean button.danger{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
html.clean .iconbtn,html.clean main .uhead button.uhplus,html.clean main .uhead .uhfind,html.clean main .uhead>button:not(.primary),html.clean nav .scanbtn,html.clean .uhacts>button,html.clean .uhead .pagesearch:not(.active) .psbtn{border-color:transparent;background-color:transparent;box-shadow:none}
html.clean .iconbtn:hover,html.clean main .uhead button.uhplus:hover,html.clean main .uhead .uhfind:hover,html.clean main .uhead>button:not(.primary):hover,html.clean nav .scanbtn:hover,html.clean .uhacts>button:hover,html.clean .uhead .pagesearch:not(.active) .psbtn:hover{background-color:color-mix(in srgb,var(--ink) 6%,transparent);border-color:transparent}
html.clean main .uhead.uhead>.uhplus{font-weight:400}
/* Share read only: one calm column, the form, what they also see as a list with a line each, your links below */
.shx{max-width:680px;display:grid;gap:30px;font-size:14.5px;color:var(--ink)}
#shcard:has(.shx){max-width:760px;padding:22px 24px}
.shh{font-size:17px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.shlead{margin:0 0 18px;color:var(--mute);font-size:14px;line-height:1.5}
.shgrid{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:12px}
.shf{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--mute)}
.shf input,.shf select{width:100%;min-height:42px;font-size:15px;color:var(--ink)}
.shinc{border:1px solid var(--line);border-radius:10px;margin:18px 0 0;padding:0 0 2px;min-width:0}
.shinc legend{font-size:13px;font-weight:500;color:var(--mute);padding:0 6px;margin-left:10px}
#shf .shopt{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:12px;padding:10px 14px;min-height:50px;cursor:pointer;margin:0;width:100%}
.shopt+.shopt{border-top:1px solid var(--line)}
#shf .shopt input{width:18px;min-width:18px;height:18px;min-height:0;margin:0;flex:none;accent-color:var(--accent)}
.shopt>span{display:flex;flex-direction:column;gap:1px;min-width:0}.shopt b{font-weight:500;font-size:14.5px;color:var(--ink)}.shopt small{font-size:12.5px;color:var(--mute)}
.shnever{font-size:12.5px;line-height:1.5;color:var(--mute);margin:12px 2px 0}
.shact{display:flex;justify-content:flex-end;margin-top:18px}.shact .primary{min-height:42px;padding:0 20px}
.shlinks .shlist{margin-top:10px}.shx .shitem .small{font-size:12.5px}
@media(max-width:560px){#shcard:has(.shx){padding:16px}.shgrid{grid-template-columns:1fr}.shact .primary{width:100%}}
/* day strip: the ring round the chosen day (4 px outside the circle) never touches the weekday letter above it (Maxime 2026-11-09) */
.ftdays .ftd{gap:8px;height:auto;padding:1px 0 6px}

/* ---------- night blue (test logbook preview, html.glass) ----------
   Maxime 2026-11-09, pointing at the website's "Flights to log" card: "use this design for a preview of the test interface, not
   exactly like this but same style". Deep navy page, cards that glow blue at the top-left and fade to navy, darker glassy panels
   inside, chips of frosted white, the main button white with navy letters. Test logbook only, whatever the light/dark setting. */
:root.glass.glass{--bg:#070b17;--card:#0e1531;--ink:#eef2ff;--mute:#9eabd8;--line:rgba(255,255,255,.09);--accent:#6f95ff;--accent-ink:#0b1a5c;--ok:#4cd39a;--warn:#f5b04a;--bad:#ff8a80;--head:#121b3d;--row:#0c1330;--chip:rgba(255,255,255,.08);--btnline:rgba(255,255,255,.14);color-scheme:dark}
html.glass body{background:radial-gradient(1200px 700px at 10% -10%,#16245e 0%,transparent 60%),#070b17;background-attachment:fixed}
html.glass nav{background:rgba(8,12,28,.92);border-color:rgba(255,255,255,.06)}
html.glass .card,html.glass .fcard,html.glass .fsec,html.glass .curcard,html.glass table.ltable.cardgrid tbody tr.gcrow,html.glass .vt,html.glass .gtile,html.glass .vbox,html.glass section.tolog.tl2,html.glass .shpcard,html.glass .ppbox,html.glass .vzfact{background:linear-gradient(160deg,#16235a 0%,#0e1531 46%,#0b112a 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 24px -20px rgba(31,70,255,.45)}
html.glass .fcard:hover{border-color:rgba(140,170,255,.28)}
html.glass .sthero,html.glass .vfhero,html.glass .g2tile.hero,html.glass .vzhero{background:radial-gradient(120% 95% at 15% 0%,#3561ff 0%,#1b2f9e 40%,#0e1640 100%);border-color:rgba(255,255,255,.1);box-shadow:0 30px 60px -30px rgba(47,91,255,.7)}
html.glass .stt,html.glass .g2tile,html.glass .fcvals,html.glass .xcard{background:rgba(8,14,46,.55);border:1px solid rgba(255,255,255,.08)}
html.glass .fsec>h2{border-color:rgba(255,255,255,.08)}
html.glass input,html.glass select,html.glass textarea{background:rgba(6,10,28,.6);border-color:rgba(255,255,255,.14);color:var(--ink)}
html.glass .chip,html.glass .pchip,html.glass .ftag,html.glass .fcreg,html.glass .fcrole{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#dfe6ff}
html.glass button:not(.ftd):hover,html.glass .btn:hover{background-color:rgba(255,255,255,.1)}
html.glass button.primary,html.glass .btn.primary,html.glass nav .newbtn{background:#fff;color:#0b1a5c;border-color:#fff;box-shadow:0 10px 24px -14px rgba(120,150,255,.8)}
html.glass button.primary:hover,html.glass .btn.primary:hover{background:#e8edff}
html.glass .iconbtn,html.glass main .uhead>button:not(.primary),html.glass .uhfind,html.glass nav .scanbtn{background-color:transparent}
html.glass nav a.on{background:rgba(111,149,255,.18);color:#fff}
html.glass .uhtabsel{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink)}
html.glass #pendbar{background:#080c1b;border-color:rgba(255,255,255,.08)}
html.glass .fstream .fmonh.ftband{background:rgba(14,22,56,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.glass .sthero,html.glass .vfhero,html.glass .g2tile.hero,html.glass .vzhero{background:radial-gradient(120% 95% at 15% 0%,#2a4fe0 0%,#192c95 42%,#0e1640 100%)}
html.glass .sthero .sthk,html.glass .sthero .sthsub,html.glass .sthero>span,html.glass .sthero span,html.glass .vfhero .vfcities,html.glass .vfhero .mute{color:#d6e0ff}
html.glass main .uhead button.uhplus,html.glass main .uhead.uhead>.uhplus{color:var(--ink);background-color:transparent}
html.glass .mapwrap{background:#0b1128}
/* Totals on a wide screen (Maxime 2026-11-09 on a 2000 px screen: "this looks weird", three very long tiles a row): as many
   tiles a row as fit at a comfortable width */
@media(min-width:1400px){.stgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
html.glass .mapctl .mapstyle button.on{color:var(--accent-ink)}
/* night blue, round two (the full review of every page, 2026-11-09): one card recipe everywhere, a calmer hero, the aircraft
   drawing in navy, the map tinted navy, avatars, links, tick boxes, scrollbars, the theme tiles, the currency alert */
html.glass .sthero,html.glass .vfhero,html.glass .g2tile.hero,html.glass .vzhero{background:radial-gradient(120% 95% at 15% 0%,#2442b4 0%,#172a80 42%,#0e1640 100%);box-shadow:0 14px 34px -24px rgba(47,91,255,.6)}
html.glass .acgfx .g1{stop-color:#22388f}html.glass .acgfx .g2{stop-color:#0b1330}html.glass .acgfx .acgpl{fill:rgb(255 255 255/.86)}
html.glass .mapwrap .leaflet-tile-pane{filter:brightness(.8) sepia(.5) hue-rotate(185deg) saturate(2.4)}
html.glass .mapwrap .leaflet-control-attribution{background:rgba(8,12,28,.75);color:#9eabd8}html.glass .mapwrap .leaflet-control-attribution a{color:#b9c7ff}
html.glass .gcav{color:#dbe4ff;background:rgba(111,149,255,.18);font-weight:700}
html.glass main a:not(.btn):not([class*="btn"]){color:#a9bdff;text-decoration-color:rgba(169,189,255,.4);text-underline-offset:3px}
html.glass input[type=checkbox]{accent-color:#6f95ff}
html.glass *{scrollbar-color:#2a3a6e transparent}
html.glass .themeseg button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
html.glass .themeseg button[aria-checked="true"]{background:rgba(111,149,255,.16);border-color:#6f95ff;color:#dbe4ff}
html.glass .cursum2.bad,html.glass .cursum2.warn{background:linear-gradient(160deg,#16235a,#0e1531);border-color:rgba(255,255,255,.08);border-left:3px solid var(--bad)}
html.glass .pimgv:not(:has(img)){background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2)}html.glass .pimgv:not(:has(img)) .mute{color:var(--mute)}
html.glass main .uhead button.uhplus,html.glass main .uhead.uhead>.uhplus{border-color:transparent;box-shadow:none}
html.glass .bgprog i,html.glass .gcbar i{background:linear-gradient(90deg,#4f7bff,#9db4ff)}
html.glass .fstream .fmonh.ftband{border-radius:14px;margin-bottom:12px;padding:10px 14px}
/* a flight still waiting to be sent keeps its own colour under night blue (amber, as in the other looks) */
html.glass .fcard.pendcard{background:linear-gradient(160deg,#3b2c12 0%,#1c1a2e 55%,#0b112a 100%);background-color:#2a2214;border-color:rgba(245,176,74,.38)}

/* flight page weather: one card per airport, its forecast (TAF) under its METAR (2026-11-10) */
.vtaf{margin-top:10px;border-top:1px solid var(--line)}.vtaf>summary{list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0 0;cursor:pointer;min-height:32px}.vtaf>summary::-webkit-details-marker{display:none}
.vtaf>summary span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.vtaf>summary em{font-style:normal;font-size:13px;color:var(--mute)}
.vtaf>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(-45deg);transition:transform .15s}.vtaf[open]>summary::after{transform:rotate(45deg)}
.vtaf code{display:block;margin-top:8px;white-space:normal;overflow-wrap:anywhere}
.vnometar{margin:6px 0 0;color:var(--mute);font-size:13px}
/* the name in the menu: BLUE HOUR small over Logbook, the A3 icon (Blue Hour Logbook, 2026-11-10) */
nav .brand .bname{display:inline-flex;flex-direction:column;line-height:1;vertical-align:middle}nav .brand .bname small{font-size:8.5px;font-weight:600;letter-spacing:.2em;color:var(--accent);margin-bottom:2px}
nav .brand img.blogo{border-radius:7px}
nav .brand .bname .bmy{display:none} /* under BLUE HOUR the name is just Logbook, at every width */

/* ---------- Welcome (a new pilot's first steps, 2026-11-14): the blue-hour sky of the logo behind, illustrated paths ---------- */
.wl{position:relative;max-width:760px;margin:0 auto;padding:8px 2px 40px}
.wl::before{content:"";position:absolute;left:50%;top:-40px;width:min(1100px,140vw);height:560px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 100%,rgba(143,168,255,.55) 0%,rgba(84,120,242,.28) 35%,transparent 70%),linear-gradient(180deg,#0b1650 0%,#1d3496 62%,#3b5fe0 86%,#0b1128 100%);
  -webkit-mask-image:radial-gradient(60% 100% at 50% 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);mask-image:radial-gradient(60% 100% at 50% 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);border-radius:0} /* a glow that fades out on every side, no edge (Maxime 2026-11-15: "background look odd": the arched bottom cut across the cards) */
.wl::after{content:"";position:absolute;left:50%;top:-40px;width:min(1100px,140vw);height:300px;transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:.8;
  background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 12%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 30%,#dfe6ff 50%,transparent 51%),radial-gradient(1px 1px at 63% 9%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 78% 24%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 40%,#fff 50%,transparent 51%);animation:wltw 6s ease-in-out infinite alternate}
@keyframes wltw{from{opacity:.55}to{opacity:.95}}
@keyframes wlin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wl>*{animation:wlin .55s cubic-bezier(.2,.7,.2,1) both}.wl>*:nth-child(2){animation-delay:.05s}.wl>*:nth-child(3){animation-delay:.1s}.wl>*:nth-child(4){animation-delay:.15s}
@media(prefers-reduced-motion:reduce){.wl>*,.wl::after{animation:none}}
.wlsteps{display:flex;gap:6px;justify-content:center;margin:6px 0 4px}.wlsteps i{width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.22)}.wlsteps i.on{background:#fff}
.wlskip{position:absolute;right:6px;top:4px;color:#dbe4ff;font-size:14px;text-decoration:none;padding:8px 10px}
.wlhero{text-align:center;color:#fff;padding:26px 8px 18px}.wlhero img{border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 18px 40px -12px rgba(0,0,0,.6)}
.wlhero h1{margin:16px 0 6px;font-size:clamp(26px,5.4vw,36px);letter-spacing:-.03em;color:#fff}.wlhero p{margin:0 auto;max-width:460px;color:#dbe4ff;font-size:16.5px}
.wlh{font-size:clamp(24px,4.6vw,32px);letter-spacing:-.03em;margin:30px 0 6px;color:#fff;text-align:center}.wllead{text-align:center;color:#dbe4ff;max-width:560px;margin:0 auto 22px;font-size:15.5px}
.wlcard{padding:20px;display:grid;gap:14px}.wlcard h2{margin:0;font-size:17px}.wlcard label{display:grid;gap:6px;font-weight:600;font-size:14px}.wlcard label .small{font-weight:400}
.wlcard input,.wlcard select{min-height:46px;font-size:16px}.wlcard input.bad{border-color:var(--bad)}
.wlfly{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.wlfly legend{font-weight:600;font-size:14px;margin-bottom:8px;padding:0}
.wlchip{position:relative;display:inline-flex}.wlchip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;min-height:0;cursor:pointer}.wlchip span{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-weight:500;cursor:pointer}
.wlchip input:checked+span{background:#fff;color:#0b1a5c;border-color:#fff}.wlchip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.wlact{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.wlact.center{justify-content:center;margin-top:18px}.wlact .primary{min-height:46px;padding:0 22px}.btn.lg{min-height:52px;padding:0 28px;font-size:17px}
.wlpaths{display:grid;gap:14px}
.wlpath{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto 1fr;column-gap:16px;align-items:center;padding:16px;border-radius:18px;text-decoration:none;color:var(--ink);
  background:linear-gradient(160deg,#1a2a6e 0%,#0e1531 55%,#0b112a 100%);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -26px rgba(47,91,255,.8);transition:transform .2s,border-color .2s}
.wlpath:hover,.wlpath:focus-visible{transform:translateY(-2px);border-color:rgba(157,180,255,.55)}
.wlpath svg{grid-row:1/3;width:120px;height:90px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}.wlpath b{font-size:18px;align-self:end}.wlpath span{color:var(--mute);font-size:14.5px;align-self:start}
.wlhead{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;margin:26px 0 18px}.wlhead svg{width:120px;height:90px}.wlhead .wlh,.wlhead .wllead{text-align:left;margin-left:0}.wlhead .wlh{margin-top:0}
.wlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wltips{margin:0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}.wltips li::marker{color:var(--accent);font-weight:700}
.wlapps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.wlapp{min-height:44px;border-radius:12px}.wlapp.on{background:#fff;color:#0b1a5c;border-color:#fff}
.wldrop{margin-top:4px}
.wlnext{list-style:none;padding:20px}.wlnext li{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}.wlnext li:last-child{border-bottom:0}.wlnext li span{color:var(--mute);font-size:14.5px}
@media(max-width:560px){.wlpath{grid-template-columns:84px 1fr;column-gap:12px;padding:14px}.wlpath svg{width:84px;height:64px}.wlhead{grid-template-columns:76px 1fr;gap:12px}.wlhead svg{width:76px;height:58px}.wlhead .wlh{font-size:22px}}
.wl .btn,.wl button{min-height:44px}.wl input:not([type=radio]):not([type=file]),.wl select{min-height:46px}
/* the welcome's own sizes win over the general card / form rules (they made the chips a grid and the fields 36 px) */
.wl .wlcard label.wlchip{display:inline-flex;gap:0}.wl .wlcard input:not([type=radio]):not([type=file]),.wl .wlcard select{min-height:46px;height:auto}
.wl .wlcard .wlchip input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0}
main .wl .wlcard input:not([type=radio]):not([type=file]):not([type=checkbox]),main .wl .wlcard select{min-height:46px}
/* the sky behind the Welcome is wider than the page on purpose: clipped, so the phone's view never drifts sideways or down (a tap landed
   on the chip below the one touched) */
main:has(.wl){overflow-x:clip}.wl::before,.wl::after{max-width:100vw}

/* ---------- Calendar view of the logbook (2026-11-15) ---------- */
.lbcal{margin-top:10px}
.cv{position:relative;border-radius:22px;padding:18px 16px 16px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 70% at 15% -10%,rgba(84,120,242,.35),transparent 60%),radial-gradient(90% 60% at 100% 0%,rgba(143,168,255,.16),transparent 60%),linear-gradient(170deg,#121c4a 0%,#0c1434 55%,#0a1028 100%);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -30px rgba(31,70,255,.6)}
.cv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;background-image:radial-gradient(1.2px 1.2px at 8% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 33% 6%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 71% 9%,#dfe6ff 50%,transparent 51%),radial-gradient(1px 1px at 90% 18%,#fff 50%,transparent 51%);animation:cvtw 5s ease-in-out infinite alternate}
@keyframes cvtw{from{opacity:.35}to{opacity:.75}}
.cvhead{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.cvtitle{flex:1;min-width:0;text-align:left;margin:0 0 0 4px;font-size:clamp(22px,4.4vw,30px);letter-spacing:-.03em;color:#fff;white-space:nowrap}.cvtitle small{font-size:.62em;font-weight:500;color:#9db4ff;letter-spacing:0}
.cvnav{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.06)!important;box-shadow:none!important;color:#fff;display:grid;place-items:center;transition:transform .15s,background-color .15s}
.cvnav:hover{background:rgba(255,255,255,.14)!important}.cvnav:active{transform:scale(.92)}
.cvtoday-b{min-height:40px;border-radius:999px;padding:0 16px;font-size:14px;font-weight:600;color:#fff!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important}
.cvtoday-b:hover{background:rgba(255,255,255,.14)!important}
/* the year ribbon */
.cvyear{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin:0 0 14px}
.cvym{position:relative;height:44px;min-height:44px;padding:0;border-radius:9px;border:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.04)!important;box-shadow:none!important;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.cvym i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--f) * 100%);background:linear-gradient(0deg,#3b5fe0,#8ea8ff);opacity:.85;transform-origin:bottom;animation:cvgrow .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 35ms)}
.cvym span{position:relative;font-size:11px;font-weight:600;color:#dbe4ff;padding-bottom:4px}
.cvym.on{border-color:#fff!important;box-shadow:0 0 0 2px rgba(255,255,255,.5),0 6px 18px -6px rgba(143,168,255,.9)!important}
@keyframes cvgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* the month's numbers */
.cvstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}
.cvst{border-radius:14px;padding:10px 12px;background:rgba(8,14,46,.5);border:1px solid rgba(255,255,255,.07)}
.cvst b{display:block;font-size:clamp(18px,3.6vw,24px);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}.cvst span{font-size:12px;color:#9eabd8}
/* the days: the month in a grid that grows with the day's legs (a 12-leg day is simply taller) */
.lbcal{container-type:inline-size}
.cvgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:6px}
.cvwd{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7d8bbd;padding:2px 8px 4px}.cvws{display:none}
.cvd{position:relative;min-width:0;min-height:96px;height:auto;padding:7px 8px 8px;border-radius:12px;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n h" "l l";align-content:start;gap:6px 6px;
  border:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.03)!important;color:#cdd6f7;
  animation:cvpop .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 12ms);transition:border-color .18s,background-color .18s}
.cvpad{background:none!important;border-color:transparent!important;animation:none;cursor:default}
@keyframes cvpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cvd:hover:not(.cvpad){border-color:rgba(157,180,255,.5)!important}
.cvn{grid-area:n;display:inline-grid;place-items:center;min-width:24px;height:24px;margin:-2px 0 0 -3px;border-radius:12px;font-size:13.5px;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cvd.cvfut:not(.cvsch) .cvn{color:#8f9cc8}
.cvd.cvtoday .cvn{background:#fff;color:#0b1a5c}
.cvh{grid-area:h;justify-self:end;align-self:center;font-size:12px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cvlegs{grid-area:l;display:grid;gap:3px;min-width:0}
.cvleg{display:flex;align-items:center;gap:3px;min-width:0;font-size:12px;line-height:1.3;color:#e6ebff;font-variant-numeric:tabular-nums;white-space:nowrap}
.cvleg b{flex:none;font-weight:600}.cvleg i{font-style:normal;color:#7d8bbd}
.cvleg em{margin-left:auto;padding-left:4px;min-width:0;overflow:hidden;font-style:normal;color:#aebcf0}
.cvd.cvone .cvh{display:none}
.cvleg .cvmoon{margin-left:2px}
.cvleg.s{color:#9eabd8;font-style:italic}.cvleg.s b{font-weight:500}.cvleg.s em{font-style:italic}
.cvdots{grid-area:l;display:none}
/* the hours of a day: a calm tint and a bar along its top, five steps */
.cvd.cvl1{background:rgba(84,120,242,.09)!important;box-shadow:inset 0 3px 0 rgba(110,140,255,.45)!important}
.cvd.cvl2{background:rgba(84,120,242,.14)!important;box-shadow:inset 0 3px 0 rgba(110,140,255,.65)!important}
.cvd.cvl3{background:rgba(84,120,242,.19)!important;box-shadow:inset 0 3px 0 #6c8bff!important}
.cvd.cvl4{background:rgba(84,120,242,.25)!important;box-shadow:inset 0 3px 0 #94adff!important}
.cvd.cvl5{background:rgba(84,120,242,.32)!important;box-shadow:inset 0 3px 0 #c9d6ff!important}
.cvd.cvsch{border:1.5px dashed rgba(157,180,255,.55)!important;background:rgba(84,120,242,.05)!important}
.cvd.cvsel{border-color:#fff!important}
.cvmoon{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;box-shadow:inset -3px -1px 0 0 #ffe9a8;transform:rotate(-20deg);text-decoration:none}
.cvlegend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:#9eabd8}.cvlegend>i{width:16px;height:10px;border-radius:3px}
.cvlegend i.cvl1{background:rgba(110,140,255,.45)}.cvlegend i.cvl2{background:rgba(110,140,255,.65)}.cvlegend i.cvl3{background:#6c8bff}.cvlegend i.cvl4{background:#94adff}.cvlegend i.cvl5{background:#c9d6ff}
.cvlg2{display:inline-flex;align-items:center;gap:5px;margin-left:10px}.cvdash{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px dashed rgba(157,180,255,.8)}
/* a month slides in from the side it came from */
.cv.cvslide .cvgrid,.cv.cvslide .cvtitle,.cv.cvslide .cvstats{animation:cvin .45s cubic-bezier(.2,.8,.2,1) both}
.cv.cvslidep .cvgrid,.cv.cvslidep .cvtitle,.cv.cvslidep .cvstats{animation:cvinp .45s cubic-bezier(.2,.8,.2,1) both}
.cv.cvslide .cvd,.cv.cvslidep .cvd{animation-duration:.3s}
@keyframes cvin{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes cvinp{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
/* the day's flights (a panel), and the phone's list of every day under the month */
.cvday{margin-top:14px;border-radius:18px;padding:14px;background:rgba(8,14,46,.65);border:1px solid rgba(255,255,255,.1);display:grid;gap:8px}
.cvday.cvup{animation:cvup .4s cubic-bezier(.2,.8,.2,1) both}@keyframes cvup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cvdayh{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px}
.cvfl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 10px;align-items:center;text-align:left;min-height:52px;padding:9px 14px;border-radius:12px;
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important;color:#fff;box-shadow:none!important}
.cvfl.s{border-style:dashed!important;color:#c3cdf2}
.cvfr{display:flex;align-items:center;gap:8px;font-size:16px;min-width:0}.cvfr b{font-weight:650}.cvfr i{flex:0 1 44px;height:2px;border-radius:2px;background:linear-gradient(90deg,#8ea8ff,#fff)}
.cvfm{grid-column:1;font-size:12.5px;color:#9eabd8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cvft{grid-column:2;grid-row:1/3;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.cvnew{justify-self:start}.cvnone{margin:0}
.cvag{display:none}
/* phones (the calendar narrower than 640px): each day shows one dot per leg; every day's legs are listed under the month */
@container (max-width:639px){
  .cvgrid{gap:4px}
  .cvwd{text-align:center;padding:2px 0 4px;letter-spacing:.04em}.cvwl{display:none}.cvws{display:inline}
  .cvd{min-height:0;aspect-ratio:1/1.18;padding:4px 3px 4px;border-radius:9px;grid-template-columns:1fr;grid-template-areas:"n" "l" "h";justify-items:center;align-content:space-between;gap:2px;text-align:center}
  .cvn{margin:0;font-size:12.5px;min-width:22px;height:22px;border-radius:11px}
  .cvh,.cvd.cvone .cvh{display:block;justify-self:center;font-size:9.5px;font-weight:600;color:#c9d3f5}
  .cvlegs{display:none}
  .cvdots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:34px}
  .cvdots i{width:4px;height:4px;border-radius:50%;background:#dbe4ff}.cvdots i.nt{background:#ffe9a8}.cvdots i.s{background:none;box-shadow:inset 0 0 0 1px #9db4ff}
  .cvd.cvl1,.cvd.cvl2{box-shadow:inset 0 2px 0 rgba(110,140,255,.6)!important}.cvd.cvl3,.cvd.cvl4,.cvd.cvl5{box-shadow:inset 0 2px 0 #94adff!important}
  .cvag{display:grid;gap:14px;margin-top:16px}
  .cvagd{display:grid;gap:6px;scroll-margin-top:84px;border-radius:14px}
  .cvagd.cvflash{animation:cvflash 1.2s ease-out}@keyframes cvflash{0%{box-shadow:0 0 0 3px rgba(255,255,255,.7)}100%{box-shadow:0 0 0 3px rgba(255,255,255,0)}}
  .cvagh{display:flex;align-items:center;gap:10px;padding:0 2px;color:#9eabd8;font-size:13px}
  .cvagn{display:inline-flex;align-items:baseline;gap:6px;color:#fff}.cvagn b{font-size:20px;letter-spacing:-.02em}.cvagn small{font-size:13px;color:#9db4ff;font-weight:600}
  .cvagt .cvagn b{background:#fff;color:#0b1a5c;border-radius:14px;padding:0 8px}
  .cvagm{color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
  .cvlg2{margin-left:4px}
}
@container (min-width:640px) and (max-width:899px){.cvd{padding:6px 5px 7px}.cvleg{font-size:10px;gap:1px;letter-spacing:-.02em}.cvleg em{padding-left:2px}.cvh{font-size:11px}.cvwd{padding:2px 5px 4px}}
@media(max-width:560px){.cv{padding:14px 10px 12px;border-radius:18px}.cvstats{grid-template-columns:repeat(2,minmax(0,1fr))}.cvyear{gap:3px}.cvym{height:34px;min-height:34px}}
@media(prefers-reduced-motion:reduce){.cv::before,.cvym i,.cvd,.cv.cvslide .cvgrid,.cv.cvslidep .cvgrid,.cvday.cvup,.cv.cvslide .cvtitle,.cv.cvslide .cvstats,.cvagd.cvflash{animation:none}}

/* Import in the Welcome look (2026-11-15) */
.imwl{max-width:760px}.imwl .wlhead{margin-top:10px}.imwl .iesec{margin:0}.imwl .wlpaths{margin-bottom:6px}
.imwl .imapph{margin-top:34px}.imwl #imhowsel .wlcard{margin-bottom:14px}.imwl .wldrop{margin-top:6px}
/* the cards stay readable on the light look too (their background is always the dark blue-hour gradient) */
.wlpath{color:#fff}.wlpath b{color:#fff}.wlpath span{color:#b9c4ea}
.iesec.imanchor{height:0;margin:0;padding:0;overflow:hidden;border:0} /* the tabs' anchor; the title is the Welcome-style one */

/* ---------- Report a problem (2026-11-15) ---------- */
.spwl{max-width:720px}
.wl .wlcard textarea#sptext{min-height:150px;font-size:16px;line-height:1.45;resize:vertical;font-weight:400}
.spshots{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.spshots>.small{flex-basis:100%;margin-top:-4px}
.spthumbs{display:contents}
.spthumb{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.25);flex:none}
.spthumb img{width:100%;height:100%;object-fit:cover;display:block}
.spthumb .iconbtn{position:absolute;top:3px;right:3px;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border-radius:50%;background:rgba(8,14,46,.8)!important;color:#fff;border:1px solid rgba(255,255,255,.3)!important;display:grid;place-items:center}
.wl .wlcard label.spadd{display:inline-flex!important;flex-direction:row;align-items:center;gap:8px;min-height:46px;padding:0 16px;font-weight:600;cursor:pointer}
.wl .wlcard label.spadd[hidden]{display:none}
.wl .wlcard label.spdet{display:flex!important;flex-direction:row;align-items:flex-start;gap:12px;font-weight:600;cursor:pointer}
.wl .wlcard label.spdet input{width:22px!important;height:22px!important;min-height:22px!important;flex:none;margin:1px 0 0;accent-color:#6c8bff}
.spdet span{display:grid;gap:2px}.spdet small{font-weight:400;font-size:13px;opacity:.75}
.sperr{margin:0;padding:10px 12px;border-radius:10px;background:rgba(255,107,107,.14);border:1px solid rgba(255,107,107,.5);border-left:4px solid #ff6b6b;color:inherit;font-size:14px;font-weight:600}
.spmail{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-top:14px}.spmail a{font-weight:600}
.spdone{text-align:center;justify-items:center;padding:30px 20px;animation:cvup .45s cubic-bezier(.2,.8,.2,1) both}
.spdone h2{font-size:21px}.spdone p{margin:0}.spdone .wlact{justify-content:center}
.spok{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b1a5c;box-shadow:0 10px 30px -8px rgba(143,168,255,.9)}
@media(prefers-reduced-motion:reduce){.spdone{animation:none}}

/* airport cards with the airport from above (test logbook, 2026-11-15): a photo across the top of the card, faded in once loaded */
.gcard.apsatc .apmap{display:none}
.apsatw{position:relative;aspect-ratio:2/1;max-height:190px;width:100%;margin:0 0 14px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--card)),var(--card))}
.apsatw .apsat{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}.apsatw.on .apsat{opacity:1}
.apsatw::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.apsatw .apsatcr{position:absolute;right:8px;bottom:6px;font-size:9.5px;color:#fff;background:rgba(0,0,0,.45);padding:1px 6px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .35s}.apsatw.on .apsatcr{opacity:1}
.apbig{position:relative;display:block;width:100%;aspect-ratio:16/9;max-height:62vh;margin:12px 0 4px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--card)),var(--card))}
.apbig img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}.apbig.on img{opacity:1}
.apbig .apsatcr{position:absolute;right:10px;bottom:8px;font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:2px 8px;border-radius:7px}
#modal .dialog .apbig{margin:0 0 14px}