/* Shared layout for the two tabs and the methodology page (Vital City, light). */
:root{
  --vc-black:#050507; --vc-white:#fff; --vc-chartreuse:#dde44c; --vc-orange:#ff7c53;
  --vc-magenta:#e7466d; --vc-cerulean:#217ebe; --vc-cloud:#dddddd; --vc-paper:#f7f7f4;
  --ink:rgba(5,5,7,.92); --ink2:rgba(5,5,7,.68); --muted:rgba(5,5,7,.5); --hair:rgba(5,5,7,.12);
  --font:'Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--vc-paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--vc-cerulean)}
.top{background:var(--vc-white);border-top:4px solid var(--vc-chartreuse);border-bottom:1px solid var(--hair);padding:12px 20px 0}
.kicker{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;flex-wrap:wrap}
.kicker .k-series{background:var(--vc-chartreuse);color:var(--vc-black);padding:3px 7px}
.kicker .k-slash{color:var(--muted);font-weight:400;margin:0 7px}
.kicker .k-topic{color:var(--muted);font-weight:800}
.title{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.1;margin:8px 0 10px}
.tabs{display:flex;gap:2px;margin-top:4px}
.tabs a{font-size:12px;font-weight:800;letter-spacing:.03em;text-decoration:none;color:var(--ink2);padding:9px 14px;border:1px solid var(--hair);border-bottom:none;background:var(--vc-paper)}
.tabs a.cur{background:var(--vc-black);color:var(--vc-white);border-color:var(--vc-black)}
.frame{font-size:15px;line-height:1.5;color:var(--ink2);margin:0;max-width:780px}
.frame b{color:var(--vc-black)}
.layout{display:grid;grid-template-columns:300px 1fr;gap:0;min-height:calc(100vh - 128px)}
.controls{background:var(--vc-white);border-right:1px solid var(--hair);padding:16px 18px}
.ctl{margin-bottom:16px}
.ctl-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);margin-bottom:7px}
.ctl-label b{font-size:14px;color:var(--vc-black);letter-spacing:0}
select{width:100%;font:600 13px var(--font);padding:9px 10px;border:1px solid var(--hair);border-radius:0;background:var(--vc-white);color:var(--vc-black)}
.toggle{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;padding:8px 10px;border:1px solid var(--hair);margin-bottom:7px;cursor:pointer;background:var(--vc-white)}
.toggle input{width:16px;height:16px;margin:0;accent-color:var(--vc-black)}
.slider{width:100%;accent-color:var(--vc-black)}
.ends{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--muted);margin-top:3px}
.presets{display:flex;gap:5px;margin-bottom:8px}
.presets button{flex:1;font:800 10px var(--font);letter-spacing:.02em;text-transform:uppercase;padding:7px 4px;border:1px solid var(--hair);background:var(--vc-white);color:var(--ink2);cursor:pointer;line-height:1.25}
.presets button b{display:block;font-size:12.5px;color:var(--vc-black)}
.presets button.on{border-color:var(--vc-black);box-shadow:inset 0 0 0 1px var(--vc-black)}
.note{font-size:11px;color:var(--muted);line-height:1.45;margin:6px 0 0}
.legend .cap{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.legend .row{display:flex;align-items:center;gap:8px;font-size:11.5px;margin:3px 0;font-variant-numeric:tabular-nums}
.legend .sw{width:22px;height:13px;border:1px solid var(--hair);flex:none}
.credit{font-size:11px;color:var(--muted);line-height:1.5;margin-top:14px}
.draft-badge{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:1200;background:#050507;color:#dde44c;
  font:800 10px var(--font);letter-spacing:.16em;text-transform:uppercase;padding:5px 16px;border:1px solid #dde44c;border-top:none;white-space:nowrap}
@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .controls{border-right:none;border-bottom:1px solid var(--hair)}
  .title{font-size:22px}
  .draft-badge{font-size:8px;letter-spacing:.1em;padding:4px 9px}
}