/* District instruments: page styles layered on /styles.css */
:root{
  --sky-deep:#1A8CBF;
  --blue-50:#E6F4FB;
  --blue-300:#8FCDEB;
  --blue-700:#1A8CBF;
  --navy-700:#002140;
  --font-body:'Work Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Work Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --tint-1:#EBF0F4;
  --tint-2:#E2F2FA;
  --tint-3:#CDE9F6;
  --tint-4:#B5DEF2;
}

/* ---------- main page: instrument link rows ---------- */
a.wwm-cardhd{padding:16px 4px}
a.wwm-cardhd:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:12px}
.wwm-headline{transition:color .2s}
a.wwm-cardhd:hover .wwm-headline{color:var(--sky-deep)}
.wwm-open{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;background:#fff;color:var(--navy);border:1.5px solid rgba(0,33,64,.22);font-size:13.5px;font-weight:700;white-space:nowrap;transition:border-color .2s,color .2s}
.wwm-open svg{width:15px;height:15px;flex:none;transition:transform .2s}
a.wwm-cardhd:hover .wwm-open{border-color:var(--sky);color:var(--sky-deep)}
a.wwm-cardhd:hover .wwm-open svg{transform:translateX(3px)}
a.pway:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ---------- instrument page hero ---------- */
.inst-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--electric);opacity:.85;transition:opacity .2s,color .2s}
.inst-back:hover{opacity:1;color:#fff}
.inst-back svg{width:16px;height:16px;flex:none;transition:transform .2s}
.inst-back:hover svg{transform:translateX(-3px)}
.inst-hero .mega{font-size:clamp(36px,5.6vw,76px)}
.inst-hero .sub{max-width:58ch}
.inst-hero .cycle-card{min-width:min(200px,100%)}
.inst-hero .cycle-card .cyc-dates{font-size:17px}

/* ---------- instrument page body ---------- */
.sec.inst-body{padding-top:clamp(44px,7vh,80px);overflow:visible}
.di-body{color:var(--ink)}

.di-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:30px 0 12px;padding:14px 22px;border-radius:16px;background:linear-gradient(150deg,var(--navy),var(--ink) 78%);color:#fff;scroll-margin-top:150px}
.di-body>.di-bar:first-child{margin-top:0}
.di-bar-name{font-size:16px;font-weight:700;letter-spacing:-.01em}
.di-bar-meta{flex-shrink:0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--electric)}

.di-rows{display:flex;flex-direction:column;gap:10px}
.di-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:10px;align-items:stretch}

.di-name{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:16px 18px;border-radius:16px;background:#fff;border:1.5px solid var(--hairline-l);text-align:left;font-family:inherit;color:inherit}
button.di-name{cursor:pointer;transition:border-color .2s,box-shadow .2s}
button.di-name:hover{border-color:var(--sky);box-shadow:0 8px 22px rgba(39,170,225,.14)}
button.di-name:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.di-nc-top{display:flex;gap:10px;align-items:baseline}
.di-nn{flex-shrink:0;font-size:12px;font-weight:700;color:var(--sky);font-variant-numeric:tabular-nums}
.di-nt{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.005em;color:var(--navy)}
.di-nl{font-size:12.5px;font-weight:600;color:var(--sky-deep)}

.di-stmt{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;padding:16px 22px;border-radius:16px;background:linear-gradient(135deg,rgba(39,170,225,.09),rgba(39,170,225,.03));border:1px solid rgba(39,170,225,.18)}
.di-stmt-q{font-size:17px;line-height:1.55;color:var(--ink)}
.di-stmt-tag{align-self:flex-start;padding:4px 12px;border-radius:100px;background:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep)}
.di-stmt-d{font-size:15px;line-height:1.55;color:var(--mut-l)}
.di-roles{display:flex;flex-wrap:wrap;gap:8px}
.di-role{padding:7px 16px;border-radius:100px;background:#fff;border:1px solid rgba(39,170,225,.35);font-size:14px;font-weight:600;color:var(--navy)}
.di-role.di-more{border-style:dashed;color:var(--mut-l)}

.di-puzzle{margin:0 0 28px;overflow-x:auto;scrollbar-width:thin}
.di-puzzle svg{display:block;width:100%;overflow:visible}
.di-puzzle g.di-jump{cursor:pointer;transition:opacity .25s}
.di-puzzle g.di-jump:hover,.di-puzzle g.di-jump:focus-visible{opacity:.7;outline:none}

.di-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:8px}
.di-density{display:inline-flex;gap:4px;padding:5px;border-radius:100px;background:#fff;border:1px solid var(--hairline-l);box-shadow:0 6px 18px rgba(0,33,64,.08)}
.di-density button{padding:9px 22px;border:0;border-radius:100px;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--navy);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.di-density button[aria-pressed="true"]{background:var(--grad-cta);color:#fff;box-shadow:0 6px 16px rgba(39,170,225,.4)}
.di-collapse{padding:8px 14px;border:0;border-radius:100px;background:transparent;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--sky-deep);cursor:pointer}
.di-collapse:hover{background:rgba(39,170,225,.1)}
.di-collapse[hidden]{display:none}

.di-head{position:sticky;top:62px;z-index:40;display:grid;grid-template-columns:260px repeat(4,minmax(0,1fr));gap:8px;padding:12px 0 10px;background:var(--paper)}
.di-head-label{display:flex;align-items:flex-end;padding:0 4px 6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-l)}
.di-tier{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--hairline-l)}
.di-tier-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l)}
.di-tier-v{font-size:13px;font-weight:700;line-height:1.3;color:var(--navy)}
.di-sw{flex-shrink:0;width:12px;height:12px;border-radius:4px}
.di-sw-1{background:var(--tint-1);border:1px solid #C6D1DA}
.di-sw-2{background:var(--tint-2);border:1px solid #A9D9F0}
.di-sw-3{background:var(--tint-3);border:1px solid #84C8E9}
.di-sw-4{background:var(--tint-4);border:1px solid #5DB8E3}

.di-matrix .di-rows{gap:8px;margin-top:8px}
.di-matrix .di-bar+.di-rows{margin-top:0}
.di-mrow{display:grid;grid-template-columns:260px repeat(4,minmax(0,1fr));gap:8px;align-items:stretch;scroll-margin-top:150px}
.di-mrow.open .di-name{border-color:var(--sky)}
.di-cell{min-width:0;padding:13px 15px;border-radius:14px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}
.di-cell:hover{border-color:rgba(39,170,225,.45)}
.di-cell-1{background:var(--tint-1)}
.di-cell-2{background:var(--tint-2)}
.di-cell-3{background:var(--tint-3)}
.di-cell-4{background:var(--tint-4)}
.di-cell-k{display:none;margin-bottom:4px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l)}
.di-cell-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5;color:#33475A}
.di-read .di-cell-t,.di-mrow.open .di-cell-t{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:13.5px;line-height:1.6;color:var(--ink)}

.di-stem{display:none;grid-template-columns:260px minmax(0,1fr);gap:8px}
.di-mrow.open+.di-stem{display:grid}
.di-stem-box{padding:16px 20px;border-radius:14px;background:rgba(39,170,225,.1);border:1px solid rgba(39,170,225,.2)}
.di-stem-k{margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep)}
.di-stem-t{font-size:15px;line-height:1.6;color:var(--navy)}

.di-score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.di-score-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-width:0;padding:32px 26px 26px;border-radius:20px;background:#fff;border:1.5px solid var(--hairline-l);box-shadow:var(--shadow-card)}
.di-score-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--grad-cta)}
.di-score-dim{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.di-score-dim-k{padding:4px 12px;border-radius:100px;background:rgba(39,170,225,.1);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-deep)}
.di-score-q{font-size:clamp(19px,1.8vw,22px);font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--navy)}
.di-score-lead{font-size:13.5px;font-weight:600;color:var(--mut-l)}
.di-moves{list-style:none;display:flex;flex-direction:column;gap:8px}
.di-moves li{display:flex;gap:12px;align-items:baseline;padding:12px 16px;border-radius:12px;background:var(--paper);font-size:15px;font-weight:600;color:var(--navy)}

@media(max-width:820px){
  .di-row,.di-mrow,.di-stem{grid-template-columns:minmax(0,1fr)}
  .di-stem>div:first-child{display:none}
  .di-head{display:none}
  .di-cell-k{display:block}
  .di-score-grid{grid-template-columns:minmax(0,1fr)}
  .di-puzzle svg{min-width:var(--puzzle-min,760px)}
}
@media(max-width:560px){
  a.wwm-cardhd{flex-direction:column;align-items:flex-start;gap:12px}
  .di-bar{padding:12px 18px}
}
@media(prefers-reduced-motion:reduce){
  .di-density button,.di-cell,button.di-name,.wwm-open,.wwm-open svg,.inst-back svg{transition:none}
}