/* /work capabilities in evidence — on ink: the programme × discipline table (dots, counts and shares at the foot) beside
   the capability pages the programmes drew on. Every figure is counted from the projects; tokens only. */
.wrk-caps__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:56px;align-items:start}
.wrk-caps__mx{grid-column:1 / span 7;min-width:0}
.wrk-caps__used{grid-column:9 / -1;min-width:0}
.wrk-caps__scroll{outline-offset:4px}

/* ---------- the matrix ---------- */
.wrk-mx{width:100%;border-collapse:collapse;table-layout:fixed}
.wrk-mx th,.wrk-mx td{padding:0;font-weight:400;text-align:left}
.wrk-mx thead th{padding:0 0 14px;border-bottom:1px solid var(--on-ink-line);vertical-align:bottom}
.wrk-mx__ph{width:auto;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-3)}
.wrk-mx__dh{width:12%;text-align:center}
.wrk-mx__dn{display:block;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;color:var(--on-ink-3)}
.wrk-mx__ds{display:inline-flex;align-items:center;justify-content:center;min-height:30px;margin-top:2px;font-size:var(--t-xs);font-weight:500;color:var(--on-ink-2);text-decoration:none;
  transition:color var(--d1) var(--e-io)}
.wrk-mx__ds:hover{color:var(--on-ink);text-decoration:underline;text-decoration-color:var(--on-ink-3);text-underline-offset:4px}
.wrk-mx__dsr{display:none}
.wrk-mx tbody tr{border-bottom:1px solid var(--on-ink-line)}
.wrk-mx__p a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:baseline;min-height:44px;padding:11px 12px 11px 0;color:var(--on-ink);text-decoration:none}
.wrk-mx__pn{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.08em;color:var(--on-ink-3);font-variant-numeric:tabular-nums}
.wrk-mx__pt{font-family:var(--f-h);font-size:var(--t-h4);font-weight:500;line-height:1.35;letter-spacing:-.006em}
.wrk-mx__p a:hover .wrk-mx__pt{text-decoration:underline;text-decoration-color:var(--on-ink-3);text-underline-offset:4px}
.wrk-mx__c{position:relative;text-align:center;vertical-align:middle;transition:background var(--d1) var(--e-io)}
.wrk-mx__dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--blue);vertical-align:middle;transition:transform var(--d2) var(--e)}
.wrk-mx__c:not(.is-on)::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--on-ink-line);vertical-align:middle}
.wrk-mx tfoot th,.wrk-mx tfoot td{padding:16px 0 0;vertical-align:top}
.wrk-mx__ft{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-3);padding-top:22px}
.wrk-mx__t{text-align:center}
.wrk-mx__t b{display:block;font-family:var(--f-h);font-size:clamp(1.5rem,2.2vw,2rem);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--on-ink);font-variant-numeric:tabular-nums}
.wrk-mx__of{display:block;margin-top:5px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--on-ink-3)}
.wrk-mx__bar{position:relative;display:block;width:60%;height:3px;margin:10px auto 0;border-radius:2px;background:var(--on-ink-line);overflow:hidden}
.wrk-mx__bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 100%);border-radius:2px;background:var(--blue)}
/* the crosshair: a row and a column lit together (caps.js adds .is-row / .is-col) */
.wrk-mx tbody tr.is-row,.wrk-mx .is-col{background:var(--on-ink-card)}
.wrk-mx td.is-col.is-hit .wrk-mx__dot{transform:scale(1.5)}
.wrk-mx__read{min-height:44px;margin-top:16px;padding:12px 14px;border-radius:var(--r-sm);background:var(--on-ink-card);box-shadow:inset 0 0 0 1px var(--on-ink-line);
  font-family:var(--f);font-size:var(--t-xs);line-height:1.5;letter-spacing:.02em;color:var(--on-ink-2)}
.wrk-mx__read.is-on{color:var(--on-ink)}
.wrk-mx__legend{display:none;list-style:none;margin:18px 0 0;padding:0;flex-wrap:wrap;gap:6px}
.wrk-mx__legend a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--on-ink-line);
  font-size:var(--t-xs);font-weight:500;color:var(--on-ink-2);text-decoration:none}
.wrk-mx__legend span{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;color:var(--on-ink-3)}

/* ---------- capabilities drawn on ---------- */
.wrk-caps__used .wrk-kicker{margin-bottom:8px}
.wrk-caps__ul{max-width:44ch;margin-bottom:22px;font-size:var(--t-sm);line-height:1.6;color:var(--on-ink-2)}
.wrk-cu{list-style:none;margin:0;padding:0;border-top:1px solid var(--on-ink-line)}
.wrk-cu__i{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:8px;padding:14px 0;border-bottom:1px solid var(--on-ink-line)}
.wrk-cu__h{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.wrk-cu__t{font-family:var(--f-h);font-size:var(--t-h4);font-weight:500;line-height:1.35;color:var(--on-ink);text-decoration:none}
a.wrk-cu__t:hover{text-decoration:underline;text-decoration-color:var(--on-ink-3);text-underline-offset:4px}
.wrk-cu__d{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-3)}
.wrk-cu__bar{grid-column:1 / -1;position:relative;display:block;height:3px;border-radius:2px;background:var(--on-ink-line);overflow:hidden}
.wrk-cu__bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 100%);border-radius:2px;background:var(--blue)}
.wrk-cu__n{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--on-ink-3)}
.wrk-cu__ps{display:flex;flex-wrap:wrap;gap:4px}
.wrk-cu__ps a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;padding:0 6px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--on-ink-line);
  color:var(--on-ink-2);text-decoration:none;font-variant-numeric:tabular-nums;transition:background var(--d1) var(--e-io),color var(--d1) var(--e-io)}
.wrk-cu__ps a:hover,.wrk-cu__ps a:focus-visible{background:var(--paper);color:var(--ink)}
.wrk-cu__more{margin-top:16px}
.wrk-cu__more summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:var(--t-sm);font-weight:500;color:var(--on-ink);list-style:none}
.wrk-cu__more summary::-webkit-details-marker{display:none}
.wrk-cu__more summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--on-ink-line);font-family:var(--f);color:var(--on-ink-2)}
.wrk-cu__more[open] summary::before{content:"–"}
.wrk-cu__more ul{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--on-ink-line)}
.wrk-cu__more li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid var(--on-ink-line);font-size:var(--t-sm)}
.wrk-cu__more a,.wrk-cu__more li span{display:inline-flex;align-items:center;min-height:44px;color:var(--on-ink-2);text-decoration:none}
.wrk-cu__more a:hover{color:var(--on-ink)}
.wrk-cu__more b{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;color:var(--on-ink-3)}

@media (max-width:1100px){
  .wrk-caps__mx{grid-column:1 / -1}
  .wrk-caps__used{grid-column:1 / span 9}
}
@media (max-width:860px){.wrk-caps__used{grid-column:1 / -1}}
@media (max-width:640px){
  /* the table keeps its shape: numbers head the columns, the legend names them (and links them) */
  .wrk-mx{min-width:330px}
  .wrk-mx__dh{width:30px}
  .wrk-mx__ds{display:none}
  .wrk-mx__dsr{display:inline}
  .wrk-mx__p a{grid-template-columns:24px minmax(0,1fr);gap:6px;padding-right:8px}
  .wrk-mx__pt{font-size:var(--t-sm)}
  .wrk-mx__t b{font-size:1.3rem}
  .wrk-mx__of{display:none}
  .wrk-mx__bar{width:70%}
  .wrk-mx__legend{display:flex}
  .wrk-cu__ps a{min-width:44px;height:44px}
  .wrk-cu__t{padding-block:12px;margin-block:-12px}            /* a 44px target; padding and margin cancel, so wrapping never overlaps */
}
@media (hover:none){.wrk-mx__read{display:none}}
@media (prefers-reduced-motion:reduce){.wrk-mx__dot{transition:none}}

/* touch screens (phones and tablets): 44px tap targets (integrator, responsive pass) */
@media (pointer:coarse){
  .wrk-cu__t{display:flex;align-items:center;min-height:44px}
  .wrk-mx__ds,.wrk-cu__ps a{min-height:44px;min-width:24px;justify-content:center}
}