:root{ --navy:#050F1C; --navy2:#0B1F35; --panel:#0E2438; --panel2:#122B42; --gold:#5AA8FF; --gold-b:#8CC3FF; /* brand accent: Stratos (see brand/BRAND.md) */ --text:#D8E0EA; --dim:#8A99AB; --line:rgba(90,168,255,.22); --line2:rgba(255,255,255,.07); --good:#4FB286; --warn:#E0A43A; --crit:#E0605A; --sea:#071526; --land:#10273D; --border:#1C3957; --hi:#FFFFFF; --topbar:rgba(5,15,28,.94); --hover:rgba(255,255,255,.03); --scrim:rgba(3,9,17,.78); --tip-bg:#FFFFFF; --tip-fg:#050F1C; --plane:#FFFFFF; --plane-edge:transparent; --fill-soft:rgba(90,168,255,.12); --shadow:rgba(0,0,0,.45); --av-bg:30%; --av-fg:88%; --av-bd:42%; --nt-bg:#1B2440; --nt-bd:#2C3A66; --nt-fg:#C9D3FF; color-scheme:dark; } /* Day palette (slate-navy accent; gold stays with night): follows the system appearance unless Settings picks one (data-theme on ). */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --navy:#F5F4F1; --navy2:#FFFFFF; --panel:#FFFFFF; --panel2:#F3F2EE; --gold:#1F7AE0; --gold-b:#1760B8; --text:#1F2A37; --dim:#5E6977; --line:rgba(31,122,224,.22); --line2:rgba(15,30,50,.10); --good:#1E8A5A; --warn:#B26B00; --crit:#C2372F; --sea:#E3E6E8; --land:#FCFBF9; --border:#C8CBCF; --hi:#0B1F35; --topbar:rgba(245,244,241,.94); --hover:rgba(15,30,50,.04); --scrim:rgba(20,30,45,.40); --tip-bg:#0B1F35; --tip-fg:#FFFFFF; --plane:#34486A; --plane-edge:#FFFFFF; --fill-soft:rgba(31,122,224,.08); --shadow:rgba(20,30,45,.18); --av-bg:88%; --av-fg:28%; --av-bd:74%; --nt-bg:#1F2A4A; --nt-bd:#1F2A4A; --nt-fg:#FFFFFF; color-scheme:light; } } :root[data-theme="light"]{ --navy:#F5F4F1; --navy2:#FFFFFF; --panel:#FFFFFF; --panel2:#F3F2EE; --gold:#1F7AE0; --gold-b:#1760B8; --text:#1F2A37; --dim:#5E6977; --line:rgba(31,122,224,.22); --line2:rgba(15,30,50,.10); --good:#1E8A5A; --warn:#B26B00; --crit:#C2372F; --sea:#E3E6E8; --land:#FCFBF9; --border:#C8CBCF; --hi:#0B1F35; --topbar:rgba(245,244,241,.94); --hover:rgba(15,30,50,.04); --scrim:rgba(20,30,45,.40); --tip-bg:#0B1F35; --tip-fg:#FFFFFF; --plane:#34486A; --plane-edge:#FFFFFF; --fill-soft:rgba(31,122,224,.08); --shadow:rgba(20,30,45,.18); --av-bg:88%; --av-fg:28%; --av-bd:74%; --nt-bg:#1F2A4A; --nt-bd:#1F2A4A; --nt-fg:#FFFFFF; color-scheme:light; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--navy);color:var(--text);font-family:Lato,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh} body.lock{overflow:hidden} .wrap{width:min(1180px,calc(100% - 32px));margin:0 auto} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} .dim{color:var(--dim)} a.lk{text-decoration:none;border-bottom:1px solid var(--line)} a.lk:hover{color:var(--hi);border-color:var(--gold)} /* top bar + nav */ .top{position:sticky;top:0;z-index:20;background:var(--topbar);backdrop-filter:blur(12px); border-bottom:1px solid var(--line2)} .top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0} .mark{font-weight:900;letter-spacing:2.4px;font-size:13px;color:var(--hi);text-decoration:none;white-space:nowrap} .mark span{color:var(--gold)} .nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{padding:7px 11px;border-radius:3px;text-decoration:none;font-size:11.5px;font-weight:700;letter-spacing:1.4px; text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .2s,background .2s} .nav a:hover{color:var(--hi)} .nav a.on{color:var(--gold-b);background:var(--fill-soft)} .meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--dim)} .btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line); border-radius:3px;background:transparent;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:1.3px; text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s} .btn:hover{border-color:var(--gold);color:var(--hi)} .btn:disabled{opacity:.5;cursor:default} h1{font-weight:900;font-size:clamp(28px,4.4vw,44px);letter-spacing:1.5px;color:var(--hi);margin:34px 0 4px} .sub{color:var(--dim);font-size:14px;margin-bottom:26px} h2{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px} h2 a{float:right;color:var(--dim);text-decoration:none;letter-spacing:1.4px} h2 a:hover{color:var(--hi)} section{margin-bottom:34px} .card{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:20px 22px} /* stat tiles */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .tile{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:16px 18px} .tile small{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)} .tile b{display:block;font-size:26px;font-weight:900;color:var(--hi);margin-top:4px;font-variant-numeric:tabular-nums} .tile i{font-style:normal;font-size:12px;color:var(--dim)} .tile.hl{border-color:var(--line)} .tile.hl b{color:var(--gold-b)} .tiles.sm .tile{padding:12px 14px} .tiles.sm .tile b{font-size:19px} /* limits */ .limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .lim{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:16px 18px} .lim-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .lim-h small{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)} .st{font-size:11px;font-weight:700;letter-spacing:.8px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor} .st.good{color:var(--good)} .st.warn{color:var(--warn)} .st.crit{color:var(--crit)} .lim b{display:block;font-size:24px;font-weight:900;color:var(--hi);margin:6px 0 10px;font-variant-numeric:tabular-nums} .lim b i{font-style:normal;font-size:13px;font-weight:400;color:var(--dim)} .meter{height:6px;border-radius:3px;background:var(--line2);overflow:hidden} .meter i{display:block;height:100%;border-radius:3px;background:var(--gold)} .meter.warn i{background:var(--warn)} .meter.crit i{background:var(--crit)} .lim p{font-size:12px;color:var(--dim);margin-top:8px} /* bar chart */ .chart{position:relative} .chart svg{display:block;width:100%;height:auto;overflow:visible} .chart .ax{font-size:10.5px;fill:var(--dim)} .chart .grid{stroke:var(--line2);stroke-width:1} .chart .bar{fill:var(--gold)} .chart .hit{fill:transparent;cursor:default} .chart g.on .bar{fill:var(--gold-b)} .tip{position:absolute;pointer-events:none;background:var(--tip-bg);color:var(--tip-fg);border-radius:4px;padding:7px 10px; font-size:12px;line-height:1.35;box-shadow:0 8px 24px var(--shadow);white-space:nowrap;opacity:0;transition:opacity .12s; transform:translate(-50%,-100%);z-index:200} .tip b{display:block;font-size:14px} /* breakdowns */ .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .rank{list-style:none} .rank li{display:grid;grid-template-columns:minmax(70px,auto) 1fr auto;align-items:center;gap:10px;padding:5px 0;font-size:13px} .rank .k{font-weight:700;color:var(--hi);white-space:nowrap;text-decoration:none} a.k:hover{color:var(--gold-b)} .rank .v{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;min-width:48px} .rank .b{height:6px;border-radius:0 3px 3px 0;background:var(--gold);opacity:.85;min-width:2px} /* filters + tables */ .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px} .filters input,.filters select,.sel{height:36px;background:var(--panel);border:1px solid var(--line2);border-radius:3px;padding:0 12px; font-size:13px;outline:none} .filters input{flex:1;min-width:200px} .filters input:focus,.filters select:focus,.sel:focus{border-color:var(--gold)} select option{background:var(--navy2)} .count{font-size:12px;color:var(--dim);margin-bottom:8px} .tbl-wrap{overflow-x:auto} .tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums} .tbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim); padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl th[data-sort]{cursor:pointer} .tbl th[data-sort]:hover,.tbl th.sorted{color:var(--gold-b)} .tbl td{padding:10px 10px;border-bottom:1px solid var(--line2);white-space:nowrap} .tbl tr.row{cursor:pointer} .tbl tr.row:hover td{background:var(--hover)} .tbl .num{text-align:right} .tbl .strong{font-weight:700;color:var(--hi)} .tbl .rt{font-weight:700;color:var(--hi)} .tbl .rt span{color:var(--gold);padding:0 4px} .tbl .rt .fno{display:inline-block;min-width:62px;margin-right:8px;font-weight:700;color:var(--gold-b);letter-spacing:.3px} .tbl .wrap-ok{white-space:normal;min-width:180px} .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.8px;padding:2px 6px;border-radius:2px; border:1px solid var(--line);color:var(--gold-b);margin-left:6px;vertical-align:1px} .pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:12px;color:var(--dim)} .pager.pager-top{justify-content:flex-start;margin:0 0 12px} .pager .btn{min-width:34px;justify-content:center;padding:0 10px} .pager .sel{height:32px;padding:0 8px;font-size:12.5px;font-variant-numeric:tabular-nums} .pager .per{margin-left:auto} .years{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px} .years .yr{height:30px;padding:0 12px;border:1px solid var(--line2);border-radius:15px;background:transparent;color:var(--dim);cursor:pointer; font-size:12px;font-weight:700;letter-spacing:.6px;font-variant-numeric:tabular-nums} .years .yr:hover{border-color:var(--gold);color:var(--hi)} .years .yr.on{border-color:var(--gold);background:var(--fill-soft);color:var(--gold-b)} /* aircraft cards */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .ac{background:var(--panel);border:1px solid var(--line2);border-radius:6px;overflow:hidden;cursor:pointer; transition:border-color .2s,transform .2s;text-align:left;padding:0} .ac:hover{border-color:var(--line);transform:translateY(-2px)} .ac .ph{aspect-ratio:3/2;background:var(--navy2) center/cover no-repeat;position:relative} .ac .ph::after{content:"✈";position:absolute;inset:0;display:grid;place-items:center;color:var(--line);font-size:34px} .ac .ph.has::after{content:none} .ac .bd{padding:12px 14px} .ac .rg{font-size:18px;font-weight:900;letter-spacing:1px;color:var(--hi)} .ac .ty{font-size:12px;color:var(--gold-b);margin-bottom:6px} .ac .nm{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums} /* aircraft list */ .actbl .acreg{font-weight:900;letter-spacing:.6px;color:var(--hi);margin-right:8px} .acbar{display:inline-block;width:70px;height:5px;border-radius:3px;background:var(--line2);margin-right:10px;vertical-align:middle;overflow:hidden} .acbar i{display:block;height:100%;background:var(--gold);border-radius:3px} @media (max-width:720px){ .acbar{display:none} } /* modal */ .mdl{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px; background:var(--scrim);backdrop-filter:blur(6px);overflow-y:auto;opacity:0;transition:opacity .22s} .mdl.open{opacity:1} .mdl-box{position:relative;width:min(1000px,100%);background:var(--navy2);border:1px solid var(--line);border-radius:8px; box-shadow:0 30px 80px var(--shadow);transform:translateY(14px);transition:transform .25s;margin:auto 0} .mdl.open .mdl-box{transform:none} .mdl-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 16px;border-bottom:1px solid var(--line2)} .mdl-hd h3{font-size:24px;font-weight:900;letter-spacing:1px;color:var(--hi);line-height:1.2} .mdl-hd h3 span{color:var(--gold)} .mdl-hd p{font-size:13px;color:var(--dim);margin-top:4px} .mdl-x{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--text); font-size:22px;font-weight:300;cursor:pointer;line-height:1} .mdl-x:hover{border-color:var(--gold);color:var(--hi)} .mdl-bd{padding:20px 22px 24px} .mdl-box.bare>.mdl-x{position:absolute;top:18px;right:22px;z-index:2;background:var(--panel)} .fbar{display:flex;align-items:center;gap:10px;min-height:36px;margin:-2px 50px 14px 0;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums} .fbar .btn{height:32px} .fs-date{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin-bottom:8px} .mdl-bd section{margin-bottom:24px} .mdl-bd section:last-child{margin-bottom:0} .split{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start} .kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px} .kv dt{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);padding-top:2px} .kv dd{color:var(--hi)} .kv dd .dim{font-size:12px} .photo{border-radius:6px;overflow:hidden;background:var(--panel)} .photo img{display:block;width:100%;height:auto} .photo figcaption{font-size:11.5px;color:var(--dim);padding:8px 10px} .photo figcaption a{color:var(--gold-b)} .thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto} .thumbs img{height:56px;border-radius:3px;cursor:pointer;opacity:.7;border:1px solid transparent} .thumbs img.on,.thumbs img:hover{opacity:1;border-color:var(--gold)} .ext{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} /* maps */ .map{position:relative;background:var(--sea);overflow:hidden} .map svg{display:block;width:100%;height:auto} .map .land path{fill:var(--land);stroke:var(--border);stroke-width:.6;vector-effect:non-scaling-stroke} .map .route{fill:none;stroke:var(--gold);stroke-linecap:round} .map .route-hit{fill:none;stroke:transparent;stroke-width:10;cursor:default} .map .ghost{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:3 5;opacity:.45} .map .trail{fill:none;stroke:var(--gold-b);stroke-width:1.6;stroke-linecap:round} .map .trail.big{stroke-width:2.6} .map .apt{fill:var(--gold-b);stroke:var(--sea);stroke-width:1.5;transition:r .35s} .map .apt-hit{fill:transparent;cursor:pointer} .map .home{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.8} .map .lbl{font-size:12px;font-weight:700;letter-spacing:1px;fill:var(--hi);paint-order:stroke;stroke:var(--sea);stroke-width:3px} .map .lbl.big{font-size:15px} .map .plane{fill:var(--plane);stroke:var(--plane-edge);stroke-width:.8;stroke-linejoin:round;paint-order:stroke} .map .pulse{fill:none;stroke:var(--gold-b);stroke-width:1.5} .map-card{padding:0;overflow:hidden} .map-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line2)} .map-bar select{height:32px;background:var(--navy2);border:1px solid var(--line2);border-radius:3px;padding:0 8px;font-size:12px;outline:none} .map-bar input[type=range]{flex:1;min-width:140px;accent-color:var(--gold)} .map-clock{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;line-height:1.25} .map-clock b{display:block;font-size:15px;color:var(--hi)} .map-clock span{font-size:11.5px;color:var(--dim)} .map-note{padding:10px 16px;font-size:11.5px;color:var(--dim);border-top:1px solid var(--line2)} .map-fit{position:absolute;right:12px;top:12px;background:var(--panel);height:28px;font-size:10.5px} .mini-map{border-radius:6px;overflow:hidden;border:1px solid var(--line2)} .state{padding:80px 0;text-align:center;color:var(--dim)} .state b{display:block;color:var(--hi);font-size:18px;margin-bottom:8px} .state small{display:block;margin-top:14px;font-size:12px;opacity:.8} footer{padding:28px 0 40px;font-size:12px;color:var(--dim);border-top:1px solid var(--line2)} /* flight detail: route strip + cards */ .fstrip{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:18px 22px;margin-bottom:18px; background:var(--panel);border:1px solid var(--line);border-radius:8px;position:relative;overflow:hidden} .fstrip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)} .fs-end{min-width:0} .fs-end.r{text-align:right} .fs-code{display:inline-block;font-size:36px;font-weight:900;letter-spacing:2px;line-height:1;color:var(--hi);text-decoration:none} a.fs-code:hover{color:var(--gold-b)} .fs-code.sm{font-size:20px} .fs-city{font-size:13px;color:var(--dim);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fs-time{font-size:22px;font-weight:700;color:var(--hi);margin-top:10px;font-variant-numeric:tabular-nums} .fs-time small{display:block;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin-top:2px} .fs-mid{text-align:center;min-width:170px} .fs-fno{display:inline-block;font-size:13px;font-weight:900;letter-spacing:1.6px;color:var(--gold-b);text-decoration:none; border:1px solid var(--line);border-radius:3px;padding:3px 10px} a.fs-fno:hover{border-color:var(--gold)} .fs-line{display:flex;align-items:center;gap:8px;margin:10px 0 8px} .fs-line i{flex:1;height:0;border-top:2px dashed var(--line)} .fs-line svg{width:22px;height:22px;fill:var(--gold)} .fs-dur{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums} .fs-dur b{color:var(--hi);font-size:14px} .fcards{display:grid;grid-template-columns:1fr 1fr;gap:10px} .fc{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:12px 14px;min-width:0} .fc.wide{grid-column:1/-1} .fc h4,.fnote h4{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim);margin-bottom:8px} .fc-big{font-size:20px;font-weight:900;letter-spacing:.5px} .fc-big a{text-decoration:none;color:var(--hi)} .fc-big a:hover{color:var(--gold-b)} .fc-sub{font-size:12px;color:var(--dim);margin-top:4px} .fr{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:2px 0;font-variant-numeric:tabular-nums} .fr span{color:var(--dim)} .fr b{font-weight:700;color:var(--text)} .fr b.hl{color:var(--hi)} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;padding:3px 8px;border-radius:3px;border:1px solid var(--line2);color:var(--dim)} .chip.on{border-color:var(--line);color:var(--gold-b);background:var(--fill-soft)} .tl{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 12px;align-items:baseline;font-variant-numeric:tabular-nums} .tl small{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)} .tl b{font-size:18px;font-weight:900;color:var(--hi)} .op>span{display:block;font-size:12px;color:var(--dim);margin:0 0 5px} .op>span:empty{display:none} .op>div{margin-bottom:10px} .op>div:last-child{margin-bottom:0} .crew{display:flex;align-items:center;gap:10px;padding:4px 0} .crew .cn{flex:1;min-width:0;font-size:13.5px} .fnote{margin-top:12px;font-size:13.5px} .fnote p{color:var(--text)} @media (max-width:720px){ .fstrip{grid-template-columns:1fr 1fr;padding:14px 16px} .mdl-box.bare>.mdl-x{top:14px;right:16px} .fbar .btn{padding:0 10px} .fs-mid{grid-column:1/-1;grid-row:2;min-width:0} .fs-code{font-size:28px} .fs-time{font-size:18px} .fcards{grid-template-columns:1fr} } /* data changes */ .tag.warn{border-color:rgba(224,96,90,.55);color:var(--crit)} .warnbox{border:1px solid rgba(224,96,90,.55);background:rgba(224,96,90,.07);border-radius:6px;padding:10px 14px;margin:6px 0 12px;font-size:13px} .warnbox b{display:block;color:var(--crit);margin-bottom:4px} .warnbox p{margin-top:4px} .tag.edit{border-color:rgba(224,164,58,.45);color:var(--warn)} .chg{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.8px;padding:2px 7px;border-radius:2px;border:1px solid var(--line);color:var(--gold-b)} .chg.past{border-color:rgba(224,164,58,.5);color:var(--warn);background:rgba(224,164,58,.08)} .chg.del{border-color:rgba(224,96,90,.5);color:var(--crit)} .chg.ok{border-color:rgba(79,178,134,.45);color:var(--good)} .ver{border:1px solid var(--line2);border-radius:6px;padding:10px 12px;margin-top:8px;font-size:13px} .ver.past{border-color:rgba(224,164,58,.4);background:rgba(224,164,58,.04)} .ver-h{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center} .ver-h .dim{font-size:12px;margin-left:auto} .diff{border-collapse:collapse;margin-top:8px;font-size:12.5px} .tbl .diff th,.tbl .diff td{border:0;background:transparent;white-space:normal;letter-spacing:0;text-transform:none;font-size:12.5px} .diff th{text-align:left;font-weight:700;color:var(--dim);padding:3px 12px 3px 0;white-space:nowrap;vertical-align:top;width:1%} .diff td{padding:3px 6px;vertical-align:top} .diff .from{color:var(--crit);text-decoration:line-through;text-decoration-color:rgba(224,96,90,.5)} .diff .to{color:var(--good)} .diff .arrow{color:var(--dim);width:1%} .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:300;background:var(--panel2);color:var(--hi);border:1px solid var(--line); border-radius:4px;padding:10px 16px;font-size:13px;box-shadow:0 10px 30px var(--shadow);opacity:0;transition:opacity .25s,transform .25s;max-width:calc(100% - 32px)} .toast.on{opacity:1;transform:translate(-50%,0)} .toast.warn{border-color:rgba(224,164,58,.6)} .sync-row td{vertical-align:top} .sync-row.open td{background:var(--panel2)} .sync-det td{background:var(--panel2);white-space:normal;padding:4px 10px 16px} @media (max-width:1440px){ .meta .asof{display:none} } @media (max-width:860px){ .top-in{flex-wrap:wrap;gap:8px 16px} .nav{order:3;width:100%;margin:0 -4px} .split{grid-template-columns:1fr} } @media (max-width:720px){ .tbl .hide-m{display:none} .card{padding:16px} .mdl{padding:0} .mdl-box{border-radius:0;border:0;min-height:100%} .mdl-hd,.mdl-bd{padding-left:16px;padding-right:16px} } /* avatars: a stable colour per person, gold for me */ .av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;letter-spacing:.3px; background:hsl(var(--h,210) 38% var(--av-bg));color:hsl(var(--h,210) 55% var(--av-fg));border:1px solid hsl(var(--h,210) 38% var(--av-bd))} .av.me{background:var(--gold);color:var(--navy);border-color:var(--gold-b)} /* flight list */ .fl{container-type:inline-size;border-top:1px solid var(--line2)} .fl-mon{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 4px 8px;border-bottom:1px solid var(--line)} .fl-mon b{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)} .fl-mon span{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums} .fl-row{--acc:var(--gold);position:relative;display:grid;grid-template-columns:58px minmax(300px,2.4fr) minmax(0,3fr) 64px; align-items:center;gap:14px 24px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line2);cursor:pointer;outline:none; font-variant-numeric:tabular-nums;transition:background .15s} .fl-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--acc);opacity:.75} .fl-row.ga{--acc:var(--good)} .fl-row.sim{--acc:var(--dim)} .fl-row:hover,.fl-row:focus-visible{background:var(--hover)} .fl-row:focus-visible{box-shadow:inset 0 0 0 1px var(--gold)} .fl-date{line-height:1.15} .fl-date b{display:block;font-size:22px;font-weight:900;color:var(--hi)} .fl-date span{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text)} .fl-date small{font-size:11px;color:var(--dim)} .fl-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,1.1fr) minmax(0,1fr);align-items:center;gap:10px;min-width:0} .fl-end{min-width:0} .fl-end.r{text-align:right} .fl-apt{display:flex;align-items:center;gap:6px;white-space:nowrap} .fl-end.r .fl-apt{justify-content:flex-end} .fl-flag{font-size:15px;line-height:1} .flag-svg{display:inline-block;width:1.33em;height:1em;vertical-align:-.15em} .fl-apt b{font-size:16px;font-weight:900;letter-spacing:.8px;color:var(--hi)} .fl-apt i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--gold-b);background:var(--fill-soft);border-radius:3px;padding:1px 5px} .fl-city{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .fl-mid{text-align:center;min-width:0} .fl-fno{display:inline-block;font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:1.2px;color:var(--gold-b);margin-bottom:2px} .fl-line{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--text)} .fl-line i{flex:1;min-width:8px;border-top:1.5px dashed var(--line)} .fl-line svg{width:14px;height:14px;fill:var(--gold);flex:none} .fl-sim{grid-column:1/-1} .fl-sim b{display:block;font-size:16px;font-weight:900;letter-spacing:.8px;color:var(--hi)} .fl-sim span{font-size:12px;color:var(--dim)} .fl-meta{display:grid;grid-template-columns:minmax(120px,1fr) 108px minmax(140px,1.3fr);align-items:center;gap:14px;min-width:0} .fl-ac{min-width:0} .fl-ac div{display:flex;align-items:center;gap:6px} .fl-ac b{font-size:14px;font-weight:900;letter-spacing:.6px;color:var(--hi);white-space:nowrap} .fl-ac small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ty{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.8px;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--gold-b);vertical-align:3px} .fc-big .ty{font-size:11px} .fl-crew{display:flex;align-items:flex-start;gap:6px} .fl-p{display:flex;flex-direction:column;align-items:center;gap:2px;width:32px} .fl-p small{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--dim)} .fl-more{font-size:11px;color:var(--dim);align-self:center} .fl-chips{display:flex;flex-wrap:wrap;gap:4px} .ch{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:10px;border:1px solid var(--line2);color:var(--dim);white-space:nowrap} .ch.role{border-color:var(--line);color:var(--gold-b)} .ch.role.pic{background:var(--gold);border-color:var(--gold);color:var(--navy)} .ch.night{background:var(--nt-bg);border-color:var(--nt-bd);color:var(--nt-fg)} .ch.pf{border-color:rgba(79,178,134,.5);color:var(--good);background:rgba(79,178,134,.10)} .ch.pm{color:var(--dim)} .ch.tagc{border-style:dashed} .ch.edit{border-color:rgba(224,164,58,.5);color:var(--warn)} .ch.warn{border-color:rgba(224,96,90,.55);color:var(--crit)} .fl-time{text-align:right;line-height:1.15} .fl-time b{display:block;font-size:20px;font-weight:900;color:var(--hi)} .fl-time small{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dim)} .fl-empty{padding:24px 10px;color:var(--dim)} @container (max-width:1020px){ .fl-row{grid-template-columns:52px minmax(0,1fr) 60px;grid-template-areas:"date route time" "date meta time";row-gap:8px} .fl-date{grid-area:date;align-self:start} .fl-route{grid-area:route} .fl-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:6px 14px} .fl-ac{display:flex;align-items:baseline;gap:8px} .fl-p small{display:none} .fl-p{width:auto} .fl-crew{gap:3px} .fl-crew .av{width:24px;height:24px;font-size:9.5px} .fl-time{grid-area:time;align-self:start} } @container (max-width:520px){ .fl-row{grid-template-columns:40px minmax(0,1fr) 50px;gap:10px;padding-left:12px} .fl-date b{font-size:18px} .fl-date span{font-size:9.5px;letter-spacing:.4px} .fl-route{grid-template-columns:auto minmax(50px,1fr) auto;gap:6px} .fl-city,.fl-apt i,.fl-crew{display:none} .fl-apt b{font-size:14px} .fl-line span{display:none} .fl-time b{font-size:16px} } /* totals band */ .totals{display:flex;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line2);border-radius:8px;margin-bottom:14px;overflow:hidden} .tt{flex:1 1 104px;padding:12px 10px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:1px 0 0 var(--line2),0 1px 0 var(--line2)} .tt b{display:block;font-size:19px;font-weight:900;color:var(--hi);letter-spacing:.3px} .tt small{font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim)} .tt.hl{background:var(--fill-soft)} .tt.hl b{color:var(--gold-b);font-size:22px} /* buttons */ .btn.pri{background:var(--gold);border-color:var(--gold);color:var(--navy)} .btn.pri:hover{background:var(--gold-b);border-color:var(--gold-b);color:var(--navy)} .btn.sm{height:24px;padding:0 8px;font-size:10px;margin-left:6px} .ch.site{border-color:rgba(79,178,134,.5);color:var(--good)} .warnt{color:var(--warn)} /* flight popup: entry actions */ .facts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);font-size:12.5px} .facts>div{display:flex;gap:8px;margin-left:auto} /* entry form */ .ef{display:flex;flex-direction:column;gap:14px} .ef-kind{margin-bottom:-2px} .ef-kind .chip,.ef-duty .chip{cursor:pointer;background:transparent;font:inherit;font-size:11.5px;font-weight:700;padding:6px 14px} .ef .ef-sec{margin:0;background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:12px 14px 14px} .ef-sec h4{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .ef-sec h4 em{font-style:normal;letter-spacing:1px;margin-left:6px} .ef-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px} .ef-grid.times{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))} .ef-grid.counts{grid-template-columns:repeat(4,minmax(70px,110px))} .ef-f{display:flex;flex-direction:column;gap:4px;min-width:0} .ef-f>span{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)} .ef input,.ef select,.ef textarea{width:100%;height:36px;background:var(--navy2);border:1px solid var(--line2);border-radius:3px;padding:0 10px;font-size:14px;outline:none;font-variant-numeric:tabular-nums} .ef textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.4} .ef input:focus,.ef select:focus,.ef textarea:focus{border-color:var(--gold)} .ef input.up{text-transform:uppercase} .ef input.auto{color:var(--gold-b)} html .ef input.auto{background:var(--fill-soft);border-color:var(--line)} /* worked out, not typed */ .ef input:disabled{opacity:.75} .ef-f.hl input{font-weight:900;font-size:15px} .ef-apt .warn{color:var(--warn)} .ef-crews{display:flex;flex-direction:column;gap:8px} .ef-crew,.ef-appr{display:grid;grid-template-columns:minmax(0,1fr) 170px 36px;gap:8px;align-items:center} .ef-appr{grid-template-columns:130px 90px 100px 36px} .ef-x{width:36px;height:36px;padding:0;justify-content:center;font-size:18px} .ef-add{margin-top:10px} .ef-op{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end} .ef-apprs{display:flex;flex-direction:column;gap:8px;margin-top:12px} .ef-apprs:empty{margin-top:0} .ef-err{border:1px solid rgba(224,96,90,.55);background:rgba(224,96,90,.08);color:var(--crit);border-radius:4px;padding:8px 12px;font-size:13px} .ef-foot{position:sticky;bottom:-24px;display:flex;align-items:center;gap:10px;padding:12px 0 2px;background:var(--navy2);border-top:1px solid var(--line2)} .ef-sum{margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums} .ef-f>span{display:flex;align-items:center;gap:6px} .ef-reset{margin-left:auto;border:1px solid var(--line);background:var(--fill-soft);color:var(--gold-b);border-radius:999px;font:inherit;font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:1px 7px;cursor:pointer} .ef-reset[hidden]{display:none} .ef-danger{display:flex;justify-content:center;padding:4px 0 20px} .ef-del{border-color:rgba(224,96,90,.5);color:var(--crit)} .ef-del:hover{border-color:var(--crit);color:var(--crit)} .ef .ef-simo{display:none} .ef.is-sim .ef-simo{display:flex} .ef.is-sim .ef-ac{display:none} @media (max-width:720px){ .ef-crew{grid-template-columns:minmax(0,1fr) 120px 36px} .ef-appr{grid-template-columns:1fr 70px 80px 36px} .ef-grid.counts{grid-template-columns:repeat(2,1fr)} /* footer: one compact row — Cancel beside a wide Save */ .ef-foot{bottom:0;display:grid;grid-template-columns:110px 1fr;gap:8px;padding:10px 0 calc(10px + env(safe-area-inset-bottom))} .ef-foot .ef-sum{display:none} .ef-foot .btn{justify-content:center;height:44px} } /* date fields: iOS gives them an intrinsic width that overflows narrow grid cells */ .ef input[type=date]{min-width:0;display:block;-webkit-appearance:none;appearance:none;text-align:left} .ef input[type=date]::-webkit-date-and-time-value{text-align:left} .ef-f{min-width:0} /* ---------- Liquid Glass ---------- The logbook's only style: translucent, blurred panels over a soft colour field, large radii, pill controls, a floating top bar and the system font. Night by default; day follows the system appearance or the choice in Settings (data-theme="light" / "dark" on ). */ :root{ --glass-blur:blur(26px) saturate(185%); --panel:var(--glass); --panel2:var(--glass-2); --navy2:var(--glass-strong); --r:22px; --r-sm:14px; --glass:rgba(38,42,54,.46); --glass-2:rgba(38,42,54,.30); --glass-strong:rgba(26,29,38,.72); --glass-bd:rgba(255,255,255,.13); --glass-edge:rgba(0,0,0,.3); --glass-sheet:rgba(24,27,35,.92); --glass-hl:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04); --glass-sh:0 16px 48px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); --topbar:rgba(30,33,42,.55); --line2:rgba(255,255,255,.08); --hover:rgba(255,255,255,.05); --field:radial-gradient(60% 50% at 10% 5%, rgba(200,120,60,.30), transparent 70%), radial-gradient(55% 45% at 92% 10%, rgba(60,100,200,.38), transparent 70%), radial-gradient(60% 55% at 75% 90%, rgba(130,70,190,.32), transparent 70%), radial-gradient(55% 50% at 8% 88%, rgba(30,140,130,.30), transparent 70%), #0A0D13; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --glass:rgba(255,255,255,.50); --glass-2:rgba(255,255,255,.34); --glass-strong:rgba(255,255,255,.74); --glass-bd:rgba(255,255,255,.72); --glass-edge:rgba(20,30,50,.08); --glass-sheet:rgba(248,248,250,.9); --glass-hl:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35); --glass-sh:0 12px 40px rgba(40,50,80,.12), 0 1px 3px rgba(40,50,80,.06); --topbar:rgba(255,255,255,.55); --line2:rgba(20,30,50,.08); --hover:rgba(255,255,255,.45); --field:radial-gradient(60% 50% at 10% 5%, rgba(255,196,160,.60), transparent 70%), radial-gradient(55% 45% at 92% 10%, rgba(150,190,255,.55), transparent 70%), radial-gradient(60% 55% at 75% 90%, rgba(205,175,255,.50), transparent 70%), radial-gradient(55% 50% at 8% 88%, rgba(150,225,210,.50), transparent 70%), #EEF0F3; } } :root[data-theme="light"]{ --glass:rgba(255,255,255,.50); --glass-2:rgba(255,255,255,.34); --glass-strong:rgba(255,255,255,.74); --glass-bd:rgba(255,255,255,.72); --glass-edge:rgba(20,30,50,.08); --glass-sheet:rgba(248,248,250,.9); --glass-hl:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35); --glass-sh:0 12px 40px rgba(40,50,80,.12), 0 1px 3px rgba(40,50,80,.06); --topbar:rgba(255,255,255,.55); --line2:rgba(20,30,50,.08); --hover:rgba(255,255,255,.45); --field:radial-gradient(60% 50% at 10% 5%, rgba(255,196,160,.60), transparent 70%), radial-gradient(55% 45% at 92% 10%, rgba(150,190,255,.55), transparent 70%), radial-gradient(60% 55% at 75% 90%, rgba(205,175,255,.50), transparent 70%), radial-gradient(55% 50% at 8% 88%, rgba(150,225,210,.50), transparent 70%), #EEF0F3; } html body{background:transparent;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em} html body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--field)} html h1{font-weight:800;letter-spacing:-.02em} html h2,html .tile small,html .fl-mon b{letter-spacing:.08em} /* the glass material */ html :is(.card,.tile,.lim,.fc,.ef .ef-sec,.totals,.fstrip,.ac,.map-card,.photo,.ver,.fl,.tbl-wrap,.years .yr,.pager .btn,.toast){ background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd);box-shadow:var(--glass-hl),var(--glass-sh)} html :is(.card,.tile,.lim,.totals,.fstrip,.ac,.map-card,.photo,.fl,.tbl-wrap){border-radius:var(--r)} html :is(.fc,.ef .ef-sec,.ver){border-radius:var(--r-sm)} html .fl{border-top:1px solid var(--glass-bd);overflow:hidden;padding:0 6px} html .fl-row{border-radius:14px;border-bottom-color:var(--line2)} html .fl-row:hover{background:var(--hover)} html .fl-mon{border-bottom-color:var(--line2);padding-left:10px;padding-right:10px} html .tbl-wrap{padding:0 6px} html .fstrip::before{display:none} html .tt{box-shadow:1px 0 0 var(--line2),0 1px 0 var(--line2)} html .tile.hl,html .tt.hl{background:var(--fill-soft)} /* floating top bar */ html .top{position:sticky;top:10px;margin:10px auto 0;width:min(1212px,calc(100% - 20px));border-radius:26px; border:1px solid var(--glass-bd);box-shadow:var(--glass-hl),var(--glass-sh);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} html .top-in{width:calc(100% - 28px);padding:8px 0} html .nav a{border-radius:999px;letter-spacing:.06em} html .nav a.on{background:var(--glass-strong);box-shadow:var(--glass-hl),0 2px 8px rgba(0,0,0,.08)} /* pill controls and soft fields */ html .btn{border-radius:999px;background:var(--glass-2);border-color:var(--glass-bd);box-shadow:var(--glass-hl);letter-spacing:.06em; -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)} html .btn.pri{background:var(--gold);border-color:transparent;color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.14)} html :is(.filters input,.filters select,.sel,.ef input,.ef select,.ef textarea,.map-bar select){border-radius:12px;background:var(--glass-2); border-color:var(--glass-bd);box-shadow:inset 0 1px 2px rgba(0,0,0,.05)} html .filters input{border-radius:999px;padding:0 16px} html :is(.chip,.ch,.tag,.chg){border-radius:999px} html .chip.on{background:var(--glass-strong)} html .years .yr.on{background:var(--glass-strong);color:var(--hi);border-color:var(--glass-bd)} /* sheets */ html .mdl{background:rgba(0,0,0,.26);-webkit-backdrop-filter:none;backdrop-filter:none} html .mdl-box{border-radius:30px;background:var(--glass-sheet);border:1px solid var(--glass-bd); box-shadow:var(--glass-hl),0 30px 90px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(40px) saturate(190%);backdrop-filter:blur(40px) saturate(190%)} html .mdl-hd{border-bottom-color:var(--line2)} html .mdl-x{border-radius:50%;background:var(--glass-2);border-color:var(--glass-bd)} html .ef-foot{background:var(--glass-sheet);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:18px} html .map,html .mini-map{border-radius:18px} html .map-card .map{border-radius:0} html .toast{border-radius:999px;color:var(--hi)} html footer{border-top-color:var(--line2)} @media (max-width:720px){ html .top{top:6px;width:calc(100% - 12px);border-radius:22px} html .mdl-box{border-radius:26px 26px 0 0;margin-top:20px} } html .pager.pager-top{margin-bottom:14px} /* ---------- settings: grouped lists ---------- */ .wrap.narrow{width:min(760px,calc(100% - 32px))} .st-g{margin-bottom:26px} .st-g h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 8px 16px} .st-card{background:var(--panel);border:1px solid var(--line2);border-radius:18px;overflow:hidden} .st-row{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 16px;position:relative;width:100%; background:none;border:0;color:var(--text);font:inherit;text-align:left;text-decoration:none} .st-row+.st-row::before{content:"";position:absolute;top:0;right:0;left:16px;border-top:1px solid var(--line2)} .st-row:has(.st-ic)+.st-row::before{left:62px} .st-row.tap{cursor:pointer;transition:background .15s} .st-row.tap:hover{background:var(--hover)} .st-row.tap:active{background:var(--fill-soft)} .st-row:disabled{opacity:.55} .st-ic{flex:none;width:32px;height:32px;display:grid;place-items:center} .st-ic svg{width:26px;height:26px;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .st-l{flex:1;min-width:0;font-size:16px;color:var(--hi)} .st-l small{display:block;font-size:12.5px;color:var(--dim);margin-top:1px} .st-r{flex:none;display:flex;align-items:center;gap:6px;color:var(--dim);font-size:15px;font-variant-numeric:tabular-nums} .st-chev{flex:none;width:18px;height:18px;fill:none;stroke:var(--dim);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7} .st-row.danger .st-l{color:var(--crit)} .st-foot{font-size:12.5px;color:var(--dim);margin:8px 16px 0} .st-ver{text-align:center;font-size:12.5px;color:var(--dim);margin:6px 0 30px} .st-sel{height:34px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);padding:0 10px;font-size:14px;color:var(--hi)} .st-num{display:flex;align-items:center;gap:6px} .st-num input{width:74px;height:34px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);padding:0 10px;font-size:15px;text-align:right;color:var(--hi);font-variant-numeric:tabular-nums} /* segmented control */ .seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--line2);gap:2px} .seg button{border:0;background:none;color:var(--text);font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap} .seg button.on{background:var(--navy2);color:var(--hi);box-shadow:0 1px 3px rgba(0,0,0,.18)} /* switch */ .sw{position:relative;display:inline-block;width:51px;height:31px;flex:none} .sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1} .sw i{position:absolute;inset:0;border-radius:16px;background:var(--line2);transition:background .2s} .sw i::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s} .sw input:checked+i{background:var(--good)} .sw input:checked+i::after{transform:translateX(20px)} .sw input:focus-visible+i{outline:2px solid var(--gold);outline-offset:2px} @media (max-width:560px){ .st-row.wide{flex-wrap:wrap} .st-row.wide .st-r{width:100%;padding-left:46px} .st-row.wide .seg{width:100%} .st-row.wide .seg button{flex:1} } html .st-card{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-bd);box-shadow:var(--glass-hl),var(--glass-sh);border-radius:24px} html .seg{background:var(--glass-2)} html .seg button.on{background:var(--glass-strong)} /* ---------- phone tab bar ---------- */ .tabbar{display:none} @media (max-width:720px){ body{padding-bottom:calc(88px + env(safe-area-inset-bottom))} .tabbar{display:flex;position:fixed;z-index:30;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom)); justify-content:space-around;padding:6px;border-radius:30px;background:var(--topbar);border:1px solid var(--line2); -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 10px 30px var(--shadow)} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;border-radius:24px;color:var(--text);text-decoration:none;font-size:10.5px;font-weight:700} .tabbar svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tabbar a.on{color:var(--gold-b);background:var(--fill-soft)} .top .nav{display:none} .top-in{flex-wrap:nowrap} .mdl{padding-bottom:0} .toast{bottom:calc(96px + env(safe-area-inset-bottom))} html .tabbar{background:var(--glass);border-color:var(--glass-bd);box-shadow:var(--glass-hl),var(--glass-sh)} html .tabbar a.on{background:var(--glass-strong);color:var(--hi)} } @media print{ .tabbar{display:none} } /* top bar: phones keep it inside the screen */ html,body{overflow-x:clip} .mark b{font-weight:inherit} .mark{min-width:0;overflow:hidden;text-overflow:ellipsis} @media (max-width:720px){ .top-in{gap:8px} .mark{font-size:12px;letter-spacing:1.8px} .meta{gap:8px;flex:none} #addf{height:36px} } /* ---------- Flights page: calmer on phones ---------- */ .ftoggle{display:none;position:relative;width:40px;height:40px;padding:0;justify-content:center;flex:none} .ftoggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .ftoggle i{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--gold);display:none} .ftoggle.on i{display:block} .fmore{display:contents} @media (max-width:720px){ .m-hide{display:none} h1{margin-top:22px} .filters{flex-wrap:wrap;gap:8px} .filters input{min-width:0;flex:1} .ftoggle{display:inline-flex} .fmore{display:none;width:100%;grid-template-columns:1fr 1fr;gap:8px} .filters.open .fmore{display:grid} .fmore #exp{grid-column:1/-1} .fmore select{width:100%;min-width:0} /* totals: one swipeable row */ .totals{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch} .totals::-webkit-scrollbar{display:none} .tt{flex:0 0 auto;min-width:88px;padding:9px 12px;scroll-snap-align:start} .tt b{font-size:15px} .tt.hl b{font-size:17px} .tt small{font-size:8.5px;letter-spacing:1px} /* paging: ‹ page › only (rows per page lives in Settings; the year filter replaces the year chips) */ .years,.pager .ends,.pager .per{display:none} /* rows: the chips nearly every airline sector carries add nothing on a small screen */ .fl-chips .ch.mp,.fl-chips .ch.ifr{display:none} .pager.pager-top{margin-bottom:8px} .pager .sel.pg{flex:1;min-width:0} } /* ---------- entry form: compact ---------- */ .ef{gap:10px} html .ef .ef-sec{padding:10px 12px 12px} .ef-sec h4{display:flex;align-items:center;gap:8px;margin-bottom:8px} .ef-kind{display:flex;align-items:center;gap:6px} .ef-kind .dim{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:1.2px} .ef-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px 10px} .ef-grid.times{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))} .ef-grid.notes{grid-template-columns:minmax(120px,1fr) 3fr} .ef-grid [hidden]{display:none} .ef input,.ef select{height:34px} .ef textarea{min-height:34px} .ef-f>span{font-size:9.5px;letter-spacing:1px} .ef-route{display:flex;flex-direction:column;gap:8px} .ef-leg{display:grid;grid-template-columns:minmax(0,150px) minmax(0,120px) minmax(0,120px);gap:4px 10px} .ef-leg .ef-apt{grid-column:1/-1;font-size:11.5px;color:var(--dim);min-height:0} .ef-leg .ef-apt:empty{display:none} .ef-air input{opacity:.85} .ef-more{margin-left:auto;border:0;background:none;color:var(--gold-b);font:inherit;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;padding:0} .ef-op{gap:10px 18px;align-items:flex-end} .ef-grid.counts{grid-template-columns:repeat(4,minmax(60px,84px))} .ef-apprs{margin-top:8px;gap:6px} .ef-add{margin-top:8px;height:28px;font-size:10px} .ef-crews{gap:6px} @media (max-width:720px){ .ef-grid{grid-template-columns:1fr 1fr} .ef-grid.times{grid-template-columns:repeat(3,1fr)} .ef-grid.notes{grid-template-columns:1fr} .ef-grid.counts{grid-template-columns:repeat(4,1fr)} .ef-leg{grid-template-columns:1.1fr 1fr 1fr} .ef input,.ef select{height:38px;font-size:16px} /* 16px: iOS does not zoom into the field */ } .ef-fnohit{margin-top:8px;font-size:12px;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px} .ef-fnohit b{color:var(--hi)} .ef-fnohit[hidden]{display:none} .ef-fnohit .ef-more{margin-left:0} .av.pic{padding:0;overflow:hidden;background:var(--panel2)} .av.pic img{width:100%;height:100%;object-fit:cover;display:block} /* people: details card and edit form */ .pname{display:inline-flex;align-items:center;gap:10px} .pname .av{width:28px;height:28px;font-size:10px} .pcard{display:flex;gap:16px;align-items:flex-start} .pphoto{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--line2)} .pphoto.none{display:grid;place-items:center;background:var(--panel2);color:var(--dim);font-size:28px;font-weight:900} .pbody{flex:1;min-width:0} .pnotes{font-size:13.5px;margin-bottom:10px;white-space:normal} .pe-top{display:flex;align-items:center;gap:14px} .pe-ph{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--panel2);display:grid;place-items:center;flex:none;border:1px solid var(--line2)} .pe-ph img{width:100%;height:100%;object-fit:cover} .pe-ph span{font-size:11px;color:var(--dim)} .pe-phb{display:flex;gap:8px;flex-wrap:wrap} .ef-wide{grid-column:1/-1} /* settings sub-pages: back link */ .st-back{display:inline-flex;align-items:center;gap:2px;margin:26px 0 -18px;color:var(--gold-b);text-decoration:none;font-size:15px;font-weight:600} .st-back .st-chev.back{transform:rotate(180deg);stroke:var(--gold-b);opacity:1;width:20px;height:20px} .st-back:hover{color:var(--hi)} @media (max-width:720px){ .st-back{margin-top:16px;margin-bottom:-14px} } /* ---------- CoolLogbook: accounts, offline, admin ---------- */ .ef-f.wide{grid-column:1/-1} .offline{margin:0 0 16px;padding:10px 14px;border:1px solid var(--warn);border-radius:6px;color:var(--warn);font-size:13px} .state.welcome .welcome-a{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px} .auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px} .auth-box{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:28px 24px} .auth-mark{display:block;text-align:center;font-size:18px;letter-spacing:3px;color:var(--hi);text-decoration:none;margin-bottom:6px} .auth-mark b{color:var(--gold)} .auth-box h1{font-size:20px;text-align:center;margin-bottom:18px;font-weight:700} .auth-box p.sub{text-align:center;margin-bottom:18px} .auth-box form{display:flex;flex-direction:column;gap:12px} .auth-box label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)} .auth-box input{height:42px;background:var(--navy);border:1px solid var(--line2);border-radius:6px;padding:0 12px;color:var(--text);font:inherit;font-size:15px;letter-spacing:0;text-transform:none} .auth-box input:focus{outline:none;border-color:var(--gold)} .auth-box .btn{height:42px;justify-content:center;font-size:14px} .auth-box .err{color:var(--crit);font-size:13px;min-height:1em} .auth-box .foot{margin-top:16px;text-align:center;font-size:13px;color:var(--dim)} .auth-box small.hint{font-size:12px;color:var(--dim);letter-spacing:0;text-transform:none;font-weight:400} .adm{width:100%;border-collapse:collapse;font-size:13px} .adm th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);padding:8px;border-bottom:1px solid var(--line)} .adm td{padding:8px;border-bottom:1px solid var(--line2);vertical-align:top} .adm td .btn{height:28px;font-size:11px} .adm-wrap{overflow-x:auto;margin-bottom:28px} .linkbox{display:flex;gap:8px;margin:10px 0} .linkbox input{flex:1;min-width:0;height:34px;background:var(--navy);border:1px solid var(--line2);border-radius:4px;padding:0 10px;color:var(--text);font:inherit;font-size:12px} .pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;border:1px solid var(--line)} .pill.off{color:var(--crit);border-color:var(--crit)} /* brand lockup in the top bar: dark artwork by default, light artwork on the day palette */ .mark{display:inline-flex;align-items:center} .mark img{height:22px;width:auto;display:block} .mark .lg-l{display:none} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .mark .lg-d{display:none} :root:not([data-theme="dark"]) .mark .lg-l{display:block} } :root[data-theme="light"] .mark .lg-d{display:none} :root[data-theme="light"] .mark .lg-l{display:block} @media (max-width:560px){ .mark img{height:19px} } .auth-mark img{height:30px;width:auto;margin:0 auto} .auth-mark{display:flex;justify-content:center;margin-bottom:14px} /* ---------- import old logbooks (import.html) ---------- */ .imp-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0 28px} @media (max-width:760px){.imp-pick{grid-template-columns:1fr}} .imp-src{background:var(--glass,var(--panel));border:1px solid var(--glass-bd,var(--line2));border-radius:var(--r,14px);padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--glass-hl,none),var(--glass-sh,none)} .imp-src h2{margin:0} .imp-src p{font-size:14px;color:var(--dim)} .imp-src .seg{align-self:flex-start} .imp-hint{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} .imp-hint input{height:36px;border-radius:12px;border:1px solid var(--glass-bd,var(--line2));background:var(--glass-2,var(--panel));padding:0 12px;color:var(--text);font:inherit;font-size:14px;text-transform:none;letter-spacing:0} .imp-btn{align-self:flex-start;cursor:pointer} .imp-blk{background:var(--glass,var(--panel));border:1px solid var(--glass-bd,var(--line2));border-radius:var(--r,14px);margin-bottom:18px;overflow:hidden;box-shadow:var(--glass-hl,none),var(--glass-sh,none)} .imp-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line2)} .imp-hd b{color:var(--hi);word-break:break-all} .imp-count{font-size:13px;color:var(--dim);margin-left:8px} .imp-count i{font-style:normal}.imp-count .err{color:var(--crit)}.imp-count .warn{color:var(--warn)} .imp-fmt{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto} .imp-fmt .sel{height:32px;font-size:13px} .imp-fmt input.sel{width:70px} .imp-body{padding:14px 16px;min-width:0} .imp-body.photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:16px;align-items:start} @media (max-width:1000px){.imp-body.photo{grid-template-columns:1fr}} .imp-imgs{display:flex;flex-direction:column;gap:8px;position:sticky;top:84px} .imp-imgs img{width:100%;border-radius:10px;display:block;border:1px solid var(--line2)} .imp-rows{min-width:0} .imp-note{font-size:13px;color:var(--dim);margin:0 0 10px} .imp-wait{display:flex;align-items:center;gap:10px;color:var(--dim)} .spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--gold);animation:spin .8s linear infinite;vertical-align:-3px;margin-right:6px} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spin{animation:none}} .imp-check{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--dim);margin-bottom:10px} .imp-check .chip{font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line)} .imp-check .chip.ok{color:var(--good);border-color:var(--good)} .imp-check .chip.bad{color:var(--crit);border-color:var(--crit)} .imp-grid{overflow-x:auto;border:1px solid var(--line2);border-radius:10px} .imp-grid table{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums} .imp-grid th{position:sticky;top:0;background:var(--glass-sheet,var(--panel2));text-align:left;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:6px 4px;white-space:nowrap} .imp-grid td{padding:2px;border-top:1px solid var(--line2)} .imp-grid td input:not([type=checkbox]){height:28px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text);font:inherit;padding:0 5px} .imp-grid td input:not([type=checkbox]):focus{outline:none;border-color:var(--gold);background:var(--glass-2,var(--panel))} .imp-grid td input.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)} .imp-grid td input.error{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent)} .imp-grid tr.dup td input:not([type=checkbox]){opacity:.55} .imp-grid td:first-child{padding:0 6px} .btn.sm{height:26px;padding:0 9px;font-size:12px} .pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;border:1px solid var(--line);white-space:nowrap} .pill.ok{color:var(--good);border-color:var(--good)} .pill.warn{color:var(--warn);border-color:var(--warn)} .pill.err{color:var(--crit);border-color:var(--crit)} .pill.dup{color:var(--dim)} .imp-map p{margin:0 0 12px;font-size:14px} .imp-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:14px} .imp-cols label{display:flex;flex-direction:column;gap:4px;font-size:13px;min-width:0} .imp-cols label span{font-weight:700;color:var(--hi);overflow:hidden;text-overflow:ellipsis} .imp-cols small{display:block;font-weight:400;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .imp-bar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; padding:12px 16px;border-radius:18px;background:var(--glass-sheet,var(--panel));border:1px solid var(--glass-bd,var(--line));box-shadow:var(--glass-hl,none),var(--glass-sh,0 8px 24px rgba(0,0,0,.2)); -webkit-backdrop-filter:var(--glass-blur,none);backdrop-filter:var(--glass-blur,none);font-size:14px;margin-bottom:90px} .imp-src .seg{flex-wrap:wrap;max-width:100%} @media (max-width:1000px){.imp-imgs{position:static}} @media (max-width:720px){.imp-bar{bottom:calc(92px + env(safe-area-inset-bottom,0px))}} /* dashboard: profile prompt, recency references, document cards */ .card.setup{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px} .card.setup b{color:var(--hi);font-size:16px} .card.setup p{color:var(--dim);font-size:14px;margin-top:4px;max-width:62ch} .setup-a{display:flex;flex-wrap:wrap;gap:8px} .lim .ref{white-space:nowrap;opacity:.8} a.lim.doc-lim{text-decoration:none;color:inherit;display:block} a.lim.doc-lim b{font-size:18px} .ef .chk{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0;font-weight:400} .ef label.chk{flex-direction:row;align-items:center;gap:8px} .ef .chk label{display:flex;align-items:center;gap:6px} html .ef input[type=checkbox]{width:16px;height:16px;min-width:0;padding:0;margin:0;flex:none;border-radius:4px;box-shadow:none;accent-color:var(--gold)} .ef .chk label,.ef label.chk{font-size:14px;color:var(--text);font-weight:400;letter-spacing:0;text-transform:none} .bk-note{font-size:14px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);margin:0 0 16px} .bk-note.ok{border-color:var(--good);color:var(--good)} .bk-note.bad{border-color:var(--crit);color:var(--crit)} /* top bar: UTC clock and the log-flight button */ .utc{display:inline-flex;align-items:baseline;gap:1px;font-variant-numeric:tabular-nums;color:var(--hi);white-space:nowrap;letter-spacing:.02em} .utc b{font-size:15px;font-weight:700} .utc .utc-s{font-size:12px;color:var(--dim);font-weight:600} .utc i{font-style:normal;font-size:12px;font-weight:800;color:var(--gold);margin-left:2px} .utc .utc-d{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--dim);margin-right:8px} .logbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 4px;border:0;border-radius:999px;cursor:pointer; background:var(--gold);color:var(--navy);font:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.16);transition:transform .15s,box-shadow .15s} .logbtn .lb-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);overflow:hidden} .logbtn svg{width:16px;height:16px;fill:currentColor;transform:rotate(45deg);transition:transform .35s cubic-bezier(.3,.7,.2,1)} .logbtn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.22);transform:translateY(-1px)} .logbtn:hover svg{transform:translate(3px,-3px) rotate(45deg)} .logbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media (prefers-reduced-motion:reduce){.logbtn,.logbtn svg{transition:none}} @media (max-width:900px){.utc .utc-d{display:none}} @media (max-width:720px){ .utc .utc-s{display:none} .logbtn{padding:0 4px;height:38px} .logbtn .lb-ic{width:30px;height:30px} .logbtn .lb-t{display:none} }