:root{
  --navy:#0A1E3A; --deep:#061426; --card:#0F2A4A; --card2:#0C2340; --line:#1E3A6B;
  --teal:#00B4D8; --sky:#E8F4F8; --dim:#8CA8C4; --faint:#5A7796;
  --ok:#2BB673; --warn:#FF8C42; --bad:#E84A4A; --gold:#FFD166;
  --pad:16px; --wrap:600px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(circle at 50% -10%, #143156 0%, var(--navy) 55%, var(--deep) 100%);
  background-attachment:fixed;
  color:var(--sky); min-height:100%; padding:0 0 96px;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior-y:contain;
}
input,textarea{user-select:text;-webkit-user-select:text;}
button{font-family:inherit;}

/* ---------------- top bar ---------------- */
.top{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, var(--deep) 0%, rgba(6,20,38,.96) 100%);
  backdrop-filter:blur(8px);
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--pad) 12px;
  border-bottom:1px solid var(--line);
}
.top-inner{max-width:var(--wrap);margin:0 auto;}
.topbar-row{display:flex;align-items:center;gap:10px;min-height:34px;}
.brand{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--teal);font-weight:800;}
h1{font-size:21px;font-weight:900;margin:2px 0 0;letter-spacing:.3px;line-height:1.2;flex:1;
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sub{font-size:12px;color:var(--dim);margin-top:2px;letter-spacing:.5px;}
.iconbtn{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--sky);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.iconbtn:active{background:rgba(0,180,216,.18);}
.iconbtn.ghost{border-color:transparent;background:transparent;}

/* ---------------- progress ---------------- */
.progress{height:10px;background:#0a1c34;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:10px;}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),#3EE0AC);transition:width .25s ease;border-radius:8px;}
.progress-fill.done{background:linear-gradient(90deg,var(--ok),#7BE0A4);}
.count{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;
  font-size:12px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;}
.count .n{color:var(--sky);font-weight:900;font-size:14px;}
.count .n.done{color:var(--ok);}

main{max-width:var(--wrap);margin:0 auto;padding:var(--pad);}
.view{display:none;} .view.active{display:block;}

/* ---------------- cards / groups ---------------- */
.group{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden;}
.group.emergency{border-color:var(--bad);box-shadow:0 0 0 1px rgba(232,74,74,.25);}
.group > h2{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);
  font-weight:800;margin:0;padding:13px 16px 8px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;
}
.group.emergency > h2{color:var(--bad);}
.group > h2 .g-count{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:1px;flex:0 0 auto;}
.group > h2 .g-count.done{color:var(--ok);}

/* ---------------- checklist rows ---------------- */
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-top:1px solid rgba(30,58,107,.45);cursor:pointer;transition:background .1s;min-height:54px;}
.row:active{background:rgba(0,180,216,.08);}
.row.next{background:rgba(0,180,216,.07);box-shadow:inset 3px 0 0 var(--teal);}
.box{flex:0 0 24px;width:24px;height:24px;border-radius:6px;border:2px solid #4A6E9C;background:transparent;
  display:flex;align-items:center;justify-content:center;transition:.15s;}
.box svg{width:16px;height:16px;stroke:var(--deep);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .1s;}
.row.done .box{background:var(--teal);border-color:var(--teal);}
.row.done .box svg{opacity:1;}
.row-text{flex:1;min-width:0;}
.label{font-size:16px;font-weight:600;color:var(--sky);line-height:1.25;word-wrap:break-word;}
.response{font-size:13px;font-weight:800;color:var(--gold);letter-spacing:1.2px;text-transform:uppercase;margin-top:3px;}
.note{font-size:12px;color:var(--dim);margin-top:3px;line-height:1.3;}
.row.done .label{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--teal);}
.row.done .response{color:#8a7a4a;}

/* ---------------- library ---------------- */
.cl-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:12px;cursor:pointer;display:flex;align-items:center;gap:12px;
}
.cl-card:active{background:#123157;}
.cl-icon{flex:0 0 42px;height:42px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:20px;background:rgba(0,180,216,.12);border:1px solid var(--line);}
.cl-body{flex:1;min-width:0;}
.cl-name{font-size:16px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-meta{font-size:12px;color:var(--dim);margin-top:3px;letter-spacing:.3px;}
.cl-bar{height:5px;background:#0a1c34;border-radius:4px;overflow:hidden;margin-top:8px;}
.cl-bar > div{height:100%;background:var(--teal);border-radius:4px;}
.cl-bar > div.done{background:var(--ok);}
.cl-go{flex:0 0 auto;color:var(--faint);font-size:20px;}

/* ---------------- buttons ---------------- */
.btn{
  display:block;width:100%;padding:15px;border-radius:12px;border:1px solid var(--teal);
  background:var(--teal);color:var(--deep);font-weight:800;font-size:15px;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;margin-bottom:10px;text-align:center;
}
.btn:active{filter:brightness(.88);}
.btn.secondary{background:transparent;color:var(--teal);}
.btn.warn{background:transparent;border-color:var(--warn);color:var(--warn);}
.btn.warn.confirming{background:var(--warn);color:var(--deep);}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad);}
.btn.danger.confirming{background:var(--bad);color:#fff;}
.btn:disabled{opacity:.45;cursor:default;}
.btn-row{display:flex;gap:10px;} .btn-row .btn{margin-bottom:10px;}

/* ---------------- forms ---------------- */
label.f{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--teal);font-weight:800;margin:14px 0 6px;}
input.f,textarea.f,select.f{
  width:100%;padding:13px 14px;font-size:15px;background:#08152A;border:1px solid var(--line);
  border-radius:10px;color:var(--sky);font-family:inherit;
}
textarea.f{min-height:190px;resize:vertical;line-height:1.5;font-size:14px;}
textarea.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13px;}
input.f:focus,textarea.f:focus,select.f:focus{outline:none;border-color:var(--teal);}
input.f::placeholder,textarea.f::placeholder{color:#4A6E9C;}
.hint{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.45;}

/* ---------------- tabs ---------------- */
.tabs{display:flex;gap:6px;background:#08152A;border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:16px;}
.tabs button{flex:1;padding:11px 4px;border:none;background:transparent;color:var(--dim);
  font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;border-radius:8px;cursor:pointer;}
.tabs button.active{background:var(--teal);color:var(--deep);}
.tabpane{display:none;} .tabpane.active{display:block;}

/* ---------------- misc ---------------- */
.banner{padding:13px 15px;border-radius:12px;margin-bottom:14px;font-size:13px;line-height:1.5;}
.banner.ok{background:rgba(43,182,115,.12);border:1px solid var(--ok);color:#8ee7b8;}
.banner.warnb{background:rgba(255,140,66,.1);border:1px solid var(--warn);color:#ffc79b;}
.banner.info{background:rgba(0,180,216,.09);border:1px solid var(--line);color:var(--dim);}
.done-banner{max-width:var(--wrap);margin:12px auto;padding:14px 16px;text-align:center;
  background:rgba(43,182,115,.12);border:1px solid var(--ok);border-radius:12px;color:var(--ok);
  font-weight:800;letter-spacing:2px;text-transform:uppercase;display:none;}
.done-banner.show{display:block;}
.empty{text-align:center;padding:44px 20px;color:var(--dim);}
.empty .big{font-size:44px;margin-bottom:12px;opacity:.6;}
.sec-title{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);
  font-weight:800;margin:22px 0 10px;}
footer{max-width:var(--wrap);margin:26px auto 0;padding:0 var(--pad);text-align:center;
  font-size:11px;color:var(--faint);letter-spacing:1px;}
footer a{color:var(--dim);text-decoration:none;}

/* editor rows */
.ed-item{display:flex;gap:8px;align-items:flex-start;padding:9px 16px;border-top:1px solid rgba(30,58,107,.45);}
.ed-item input{flex:1;padding:10px 11px;font-size:14px;background:#08152A;border:1px solid var(--line);
  border-radius:8px;color:var(--sky);font-family:inherit;min-width:0;}
.ed-item input.resp{flex:0 0 34%;color:var(--gold);text-transform:uppercase;font-weight:700;font-size:13px;}
.ed-item input:focus{outline:none;border-color:var(--teal);}
.xbtn{flex:0 0 34px;width:34px;height:38px;border-radius:8px;border:none;background:transparent;
  color:var(--faint);font-size:19px;cursor:pointer;}
.xbtn:active{background:rgba(232,74,74,.15);color:var(--bad);}
.addbar{padding:11px 16px;}
.linkbtn{background:none;border:none;color:var(--teal);font-weight:700;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;padding:6px 0;}
.grp-title-in{width:100%;padding:11px 13px;font-size:14px;font-weight:800;background:#08152A;
  border:1px solid var(--line);border-radius:9px;color:var(--teal);letter-spacing:2px;text-transform:uppercase;}
.grp-title-in:focus{outline:none;border-color:var(--teal);}

/* history */
.run{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px;}
.run-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.run-name{font-weight:800;font-size:15px;}
.run-score{font-weight:900;font-size:14px;color:var(--teal);flex:0 0 auto;}
.run-score.full{color:var(--ok);}
.run-date{font-size:12px;color:var(--dim);margin-top:4px;}

/* overlay */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(6,20,38,.93);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:26px;}
.overlay.show{display:flex;}
.ovbox{max-width:340px;width:100%;text-align:center;}
.spinner{width:44px;height:44px;margin:0 auto 18px;border:3px solid rgba(0,180,216,.25);
  border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ovtext{font-weight:700;letter-spacing:1px;margin-bottom:8px;}
.ovsub{font-size:12px;color:var(--dim);}

.fab-wrap{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(6,20,38,0) 0%,rgba(6,20,38,.92) 38%);pointer-events:none;}
.fab-inner{max-width:var(--wrap);margin:0 auto;pointer-events:auto;}
.fab-inner .btn{margin-bottom:0;box-shadow:0 6px 20px rgba(0,0,0,.4);}

/* ============ v2.1 — bigger back button ============ */
.backbtn{
  flex:0 0 auto;min-height:46px;padding:0 16px 0 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--sky);
  font-size:15px;font-weight:800;letter-spacing:.5px;cursor:pointer;
  display:flex;align-items:center;gap:2px;
}
.backbtn:active{background:rgba(0,180,216,.2);border-color:var(--teal);}
.top .topbar-row h1{font-size:19px;}

/* ============ paged aviation view ============ */
#pageNav{margin-bottom:14px;}
.dots{display:flex;gap:5px;justify-content:center;margin-bottom:10px;}
/* Flex-shrink rather than wrap: 13 pages must still read as one row of progress. */
.dot{
  flex:1 1 0;min-width:8px;max-width:28px;height:6px;border-radius:3px;border:none;
  padding:0;cursor:pointer;background:#1E3A6B;transition:background .15s;
}
.dot.on{background:var(--teal);}
.dot.emerg{background:#5c2230;}
.dot.emerg.on{background:var(--bad);}
.pagerow{display:flex;align-items:stretch;gap:10px;}
.pagebtn{
  flex:0 0 62px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--teal);font-size:28px;font-weight:800;
  cursor:pointer;min-height:58px;
}
.pagebtn:active:not(:disabled){background:rgba(0,180,216,.2);}
.pagebtn:disabled{opacity:.28;color:var(--dim);cursor:default;}
.pagelabel{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:0;
}
.pl-title{font-size:14px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--sky);text-align:center;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.pl-sub{font-size:11px;color:var(--dim);letter-spacing:1px;margin-top:3px;}

/* ============ comms — readback boxes ============ */
.rb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px 14px;}
.rb-cell.wide{grid-column:1 / -1;}
.rb-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);
  font-weight:800;margin-bottom:5px;}
.rb-input{
  width:100%;padding:13px 12px;font-size:19px;font-weight:800;letter-spacing:1px;
  background:#08152A;border:1px solid var(--line);border-radius:10px;color:var(--gold);
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;text-align:center;
}
.rb-input:focus{outline:none;border-color:var(--teal);background:#0a1a33;}
.rb-input::placeholder{color:#3d5a80;font-weight:600;letter-spacing:.5px;}
.rb-static{
  padding:12px;font-size:18px;font-weight:800;letter-spacing:1px;color:var(--gold);
  background:#08152A;border:1px solid var(--line);border-radius:10px;text-align:center;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/* ============ comms — RT scripts ============ */
.group.script > h2{padding-bottom:12px;}
.script-body{padding:0 16px 14px;border-top:1px solid rgba(30,58,107,.45);}
.script-when{font-size:12px;color:var(--dim);line-height:1.5;padding:10px 0 4px;font-style:italic;}
.rt{display:flex;gap:9px;align-items:flex-start;padding:8px 0;}
.rt-who{
  flex:0 0 40px;font-size:10px;font-weight:900;letter-spacing:1px;padding:3px 0;
  text-align:center;border-radius:5px;margin-top:2px;
}
.rt-you .rt-who{background:rgba(0,180,216,.18);color:var(--teal);}
.rt-atc .rt-who{background:rgba(140,168,196,.14);color:var(--dim);}
.rt-text{flex:1;font-size:15px;line-height:1.45;}
.rt-you .rt-text{color:var(--sky);font-weight:600;}
.rt-atc .rt-text{color:var(--dim);}

/* ============ FREDA ============ */
.freda-letter{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;background:rgba(0,180,216,.16);
  color:var(--teal);font-weight:900;font-size:14px;margin-right:10px;vertical-align:-6px;
}
.row.done .freda-letter{background:rgba(43,182,115,.18);color:var(--ok);}

/* ============ saved run — read only ============ */
.row.ro{cursor:default;}
.row.ro:active{background:transparent;}
.run.tappable{cursor:pointer;}
.run.tappable:active{background:#123157;}
.run-go{font-size:12px;color:var(--teal);font-weight:700;letter-spacing:.5px;margin-top:8px;}