/* SkyView examples. The Control Tower is light, The Flight Deck is dark, as in the SkyView app.
   Level colors match the app: 1 red, 2 yellow, 3 green, 4 purple, always paired with a word. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Public Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45}
.sv{max-width:1440px;margin:0 auto;padding:32px 40px 40px;display:flex;flex-direction:column;gap:20px}
.sv>*{min-width:0}
h1,h2,h3{margin:0}
table{width:100%;border-collapse:collapse}
.scroll{overflow-x:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- shared header and example switcher ---------- */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.top .who{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 520px}
.brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.brand .name{font-size:16px}
.brand .name a{font-weight:700;text-decoration:none}
.brand .flag{font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.top .desc{font-size:15px}
.acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.acts>*{white-space:nowrap}
.dates{display:flex;flex-direction:column;gap:2px;text-align:right;font-size:13px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none}
.orgs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px}
.orgs .lbl{font-weight:600;margin-right:4px}
.orgs a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;text-decoration:none;font-weight:600}
.drift{padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px}

/* =================== The Control Tower (light) =================== */
body.ct{background:#F4F3EF;color:#17162B}
.ct a{color:#534AB7}.ct a:hover{color:#3C3489}
.ct .brand,.ct .top .desc,.ct .dates{color:#55536A}
.ct .brand .name{color:#17162B}
.ct h1{font-family:"Newsreader",Georgia,serif;font-size:42px;font-weight:600;line-height:1.05}
.ct h2{font-family:"Newsreader",Georgia,serif;font-size:24px;font-weight:600}
.ct .dates b{color:#17162B}
.ct .btn.primary{background:#534AB7;color:#fff}.ct .btn.primary:hover{background:#3C3489;color:#fff}
.ct .orgs .lbl{color:#55536A}
.ct .orgs a{background:#fff;border:1px solid #E2E0EA;color:#17162B}
.ct .orgs a[aria-current="page"]{background:#26215C;border-color:#26215C;color:#F4F3EF}
.ct .drift{background:#FCEFD2;color:#7A4E00}
.ct .panel{display:flex;flex-direction:column;gap:12px;padding:24px 28px;background:#fff;border:1px solid #E2E0EA;border-radius:12px}
.ct .panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.ct .sub{font-size:13px;color:#55536A}
.bl{display:flex;align-items:center;gap:40px;padding:24px 28px;background:#26215C;color:#F4F3EF;border-radius:14px;flex-wrap:wrap}
.bl .txt{flex:1 1 520px;display:flex;flex-direction:column;gap:8px}
.bl .lbl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C8C3F0}
.bl .line{font-family:"Newsreader",Georgia,serif;font-size:24px;line-height:1.35}
.bl .nums{display:grid;grid-template-columns:repeat(3,auto);gap:4px 40px;font-size:13px;color:#C8C3F0}
.bl .nums b{display:block;font-size:34px;font-weight:700;color:#fff;line-height:1.1}
.bl .of{grid-column:1/-1;margin-top:8px;font-size:12px}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#55536A}
.mat th{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#55536A;text-align:left;padding:8px 10px;border-bottom:1px solid #E2E0EA}
.mat td{padding:10px;border-bottom:1px solid #ECEAF2;font-size:14px;vertical-align:middle}
.mat th:first-child,.mat td:first-child{padding-left:0}
.mat td.cat{font-weight:600;min-width:200px}
.mat td.cat span{font-weight:400;color:#77758A;margin-left:4px;font-size:12px}
.mat td.muted{color:#55536A}
.mat td:nth-child(3){white-space:nowrap}
.mat td.blk{min-width:240px}
.mat td.na{color:#55536A;font-style:italic}
.mat tr.na td.cat{color:#77758A}
.lvl{display:flex;align-items:center;gap:10px;white-space:nowrap}
.pips{display:inline-flex;gap:3px}
.pips i{width:22px;height:8px;border-radius:2px;background:#E6E4F2}
.pips.l1 i:nth-child(-n+1){background:#B42318}
.pips.l2 i:nth-child(-n+2){background:#DDA21A}
.pips.l3 i:nth-child(-n+3){background:#3E9850}
.pips.l4 i:nth-child(-n+4){background:#5A4FC4}
.lvl b{font-weight:600}
.ct .chip.prov{background:#ECEAF8;color:#3C3489;font-size:11px;letter-spacing:.06em}
.note-line{font-size:13px;color:#55536A}
.gates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gate{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:#F4F3EF;border-radius:10px}
.gate .g-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gate .svc{font-size:20px;font-weight:700}
.gate .tag{font-size:13px;color:#55536A}
.gate .short{font-size:14px}
.gate .why{font-size:13px;color:#55536A}
.chip.met{background:#E3F2E3;color:#0F5F0F}
.chip.cond{background:#FCEFD2;color:#7A4E00}
.chip.road{background:#ECEAF8;color:#3C3489}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.list{display:flex;flex-direction:column}
.list .row{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid #ECEAF2}
.list .row:last-child{border-bottom:0}
.list .row .t{font-weight:600}
.list .row .b{font-size:14px;color:#55536A}
.rule{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid #ECEAF2}
.rule:last-child{border-bottom:0}
.rule .r-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rule .r-name{font-weight:700}
.rule .area{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#55536A}
.rule .area b{font-weight:600;color:#17162B;white-space:nowrap}
.chip.bad{background:#F9E0E0;color:#9E1F1F}
.chip.ok{background:#E3F2E3;color:#0F5F0F}
.ct .foot{color:#77758A}

/* =================== The Flight Deck (dark) =================== */
body.fd{background:#0F0E17;color:#F1F0F6}
.fd a{color:#B7B1F0}.fd a:hover{color:#D8D4FA}
.fd .brand,.fd .top .desc,.fd .dates{color:#A09DB5}
.fd .brand .name{color:#F1F0F6}
.fd h1{font-size:30px;font-weight:700}
.fd h2{font-size:18px;font-weight:600}
.fd .btn.primary{background:#9C94F0;color:#0F0E17}.fd .btn.primary:hover{background:#B7B1F0;color:#0F0E17}
.fd .orgs .lbl{color:#A09DB5}
.fd .orgs a{background:#1A1926;border:1px solid #3A3850;color:#F1F0F6}
.fd .orgs a[aria-current="page"]{background:#9C94F0;border-color:#9C94F0;color:#0F0E17}
.fd .drift{background:#3A2E10;color:#F5B83A}
.fd .box{display:flex;flex-direction:column;gap:12px;padding:20px;background:#1A1926;border:1px solid #2B2A3B;border-radius:12px;min-width:0}
.fd .box-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.fd .sub{font-size:12px;color:#A09DB5}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.kpi{display:flex;flex-direction:column;gap:6px;padding:16px;background:#1A1926;border:1px solid #2B2A3B;border-radius:12px}
.kpi .k{font-size:13px;font-weight:600;color:#C9C6DA}
.kpi .v{font-size:30px;font-weight:700;line-height:1}
.kpi .s{font-size:12px;color:#A09DB5}
.kpi.pass .v{color:#6FD06F}.kpi.fail .v{color:#F08A8A}.kpi.defer .v{color:#9C94F0}
.split{display:grid;grid-template-columns:8fr 4fr;gap:12px}
.split>*{min-width:0}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.road-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px;font-size:13px;color:#C9C6DA}
.fd .chip.cond{background:#3A2E10;color:#F5B83A}
.fd .chip.road{background:#2A2650;color:#B7B1F0}
.fd .chip.met{background:#16301A;color:#6FD06F}
.rm{table-layout:fixed;min-width:640px}
.rm th:nth-child(1){width:64px}.rm th:nth-child(2){width:118px}.rm th:nth-child(4){width:150px}.rm th:nth-child(5){width:96px}
.rm th{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#A09DB5;text-align:left;padding:6px 8px;border-bottom:1px solid #2B2A3B}
.rm td{padding:8px;border-bottom:1px solid #232232;font-size:14px;vertical-align:top}
.rm th:first-child,.rm td:first-child{padding-left:0}
.rm td.q{color:#A09DB5;white-space:nowrap}
.rm td.c{white-space:nowrap}
.rm td.f{min-width:260px}
.rm td.o{color:#C9C6DA;min-width:110px}
.st{display:inline-flex;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.st.fail{background:#3D1C1C;color:#F08A8A}
.st.defer{background:#2A2650;color:#B7B1F0}
.lifts{display:flex;flex-direction:column;gap:8px;padding-top:10px}
.lifts .t{font-size:13px;color:#C9C6DA;font-weight:600}
.lifts .chips{display:flex;flex-wrap:wrap;gap:6px}
.lifts .chips span{padding:4px 10px;border-radius:6px;background:#232232;border:1px solid #2B2A3B;font-size:12px;color:#C9C6DA}
.lifts .chips b{font-family:"IBM Plex Mono",ui-monospace,monospace;color:#F1F0F6;margin-right:4px}
.dq{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#232232;border-left:3px solid #9C94F0;border-radius:6px}
.dq .d-top{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.dq .due{font-family:"IBM Plex Mono",ui-monospace,monospace;color:#F5B83A;white-space:nowrap}
.dq .who2{font-size:13px;color:#C9C6DA}
.dq .blk{font-size:12px;color:#A09DB5}
.cred{display:flex;flex-direction:column}
.cred div{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid #232232;font-size:14px}
.cred div:last-child{border-bottom:0}
.cred b{font-family:"IBM Plex Mono",ui-monospace,monospace;color:#6FD06F;font-weight:500;min-width:40px}
.cov{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid #232232}
.cov:last-child{border-bottom:0}
.cov .c-top{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.cov .c-top b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;white-space:nowrap}
.bar{height:6px;border-radius:3px;background:#2B2A3B;overflow:hidden}
.bar i{display:block;height:100%;background:#9C94F0}
.cov .n{font-size:12px;color:#A09DB5}
.cov .items{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.cov .items span{padding:2px 8px;border-radius:999px}
.cov .items .y{background:#16301A;color:#6FD06F}.cov .items .x{background:#3D1C1C;color:#F08A8A}
.com div.r{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #232232;font-size:14px}
.com div.r:last-child{border-bottom:0}
.com .v{font-family:"IBM Plex Mono",ui-monospace,monospace;white-space:nowrap;text-align:right}
.com .v.missing{color:#F08A8A}.com .v.partial{color:#F5B83A}.com .v.met{color:#F1F0F6}
.com .rn{font-size:12px;color:#A09DB5}
.loop{display:flex;flex-direction:column;gap:6px;font-size:14px}
.loop .arrow{color:#A09DB5;padding-left:8px}
.fd .foot{color:#A09DB5}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
 .gates{grid-template-columns:repeat(2,minmax(0,1fr))}
 .three{grid-template-columns:1fr}
 .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
 .split{grid-template-columns:1fr}
 .fd .three{grid-template-columns:1fr}
}
@media (max-width:700px){
 .sv{padding:20px 16px 28px;gap:16px}
 .ct h1{font-size:32px}.fd h1{font-size:26px}
 .dates{text-align:left}
 .acts{gap:10px}
 .bl{padding:20px;gap:20px}
 .bl .line{font-size:20px}
 .bl .nums{gap:4px 24px}
 .ct .panel{padding:18px 16px}
 .gates{grid-template-columns:1fr}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kpi .v{font-size:26px}
 .fd .box{padding:16px}
}
@media print{
 .orgs,.acts .btn{display:none}
}