/* navigator.html */
.nav-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start;padding-top:18px}
#q h2{margin:0 0 6px}
.qset{border:0;border-top:1px solid var(--line);margin:16px 0 0;padding:14px 0 0;min-width:0}
.qset legend{font:700 16px var(--font-head);padding:0 8px 0 0;float:left;width:100%}
.qset legend+*{clear:both}
.qset p.small{margin:4px 0 8px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;margin:4px 0;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:15px;background:var(--bg)}
.opt:hover{border-color:var(--brand)}
.opt input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--brand)}
.opt:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--bg))}
.result{position:sticky;top:76px;display:grid;gap:14px;max-height:calc(100vh - 92px);overflow:auto;padding-right:2px}
.rcard h3{margin:0 0 8px}
.vtop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.verdict{font:700 15px var(--font-head);padding:5px 14px;border-radius:999px}
.verdict.in{background:hsl(222 70% 50%/.14);color:var(--brand)}
.verdict.out{background:hsl(150 60% 45%/.16);color:hsl(150 60% 26%)}
.verdict.unclear{background:var(--chip);color:var(--muted)}
:root[data-theme="dark"] .verdict.out{color:hsl(150 60% 72%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .verdict.out{color:hsl(150 60% 72%)}}
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ritem{border:1px solid var(--line);border-left-width:4px;border-radius:12px;padding:10px 14px;background:var(--bg)}
.ritem.stop{border-left-color:var(--accent)}
.ritem.check{border-left-color:hsl(38 90% 50%)}
.ritem.do{border-left-color:var(--brand)}
.ritem h4{margin:2px 0 4px;font:700 15px var(--font-head)}
.ritem p{margin:0;font-size:14px}
.rtop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.who{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
@media (max-width:900px){
  .nav-grid{grid-template-columns:1fr}
  .result{position:static;max-height:none;overflow:visible}
}

/* ---- cloud navigator additions ---- */
.qset .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px}
.qset .opt{margin:0}
.ctl{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px}
.ctl .field{min-width:200px;flex:1}
.ctl input[type=search],.field input[type=number],.field select{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit}
.hint{font-size:12.5px;color:var(--muted)}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table.map{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
table.map th,table.map td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
table.map thead th{position:sticky;top:0;background:var(--chip);font:700 12px var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
table.map tr:last-child td{border-bottom:0}
table.map td.cap b{display:block;font-size:15px}
table.map td.cap span{color:var(--muted);font-size:13px}
table.map .svc{display:block;margin:0 0 3px}
table.map tr.cat td{background:var(--bg);font:700 13px var(--font-head);color:var(--brand);text-transform:uppercase;letter-spacing:.06em}
table.map .cite{margin-left:6px}
.pv-aws{--pc:30 90% 45%}.pv-azure{--pc:205 85% 45%}.pv-gcp{--pc:145 60% 35%}
table.map th.pv,.pvtag{color:hsl(var(--pc))}
.mapnote{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.archgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 9px;border-radius:999px;background:hsl(222 70% 50%/.12);color:var(--brand)}
.diag{overflow:auto;padding:12px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px;border:1.5px solid}
.tl2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart{width:100%;height:auto;display:block}
.chart .ax{stroke:var(--line)}.chart .lbl{fill:var(--muted);font:12px var(--font-body)}
.chart .l1{stroke:hsl(30 90% 48%);fill:none;stroke-width:2.5}.chart .l2{stroke:var(--brand);fill:none;stroke-width:2.5}
.key{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin:8px 0 0}.key i{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 12px}
.kpi div{background:var(--chip);border-radius:12px;padding:10px 14px}.kpi b{display:block;font:700 22px var(--font-head)}.kpi span{font-size:12.5px;color:var(--muted)}
.pillrow{display:flex;gap:6px;flex-wrap:wrap}
.rank{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.rank li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.rank li.best{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--bg))}
.rank h4{margin:0 0 4px;font:700 16px var(--font-head)}
.rank .nm{font-size:13px;color:var(--muted);margin-top:6px}
@media (max-width:760px){.archgrid,.tl2{grid-template-columns:1fr}}