/* Same neutral, mobile-readable teaching component in every module */
.cl-colour-key {position:relative;margin:9px 12px 13px;padding:0;border:1px solid #5d9f9a;border-radius:11px;background:#f4faf8;color:#16323b;font:inherit;z-index:3;max-width:100%}
.cl-colour-key summary{padding:11px 15px;cursor:pointer;font-weight:750;font-size:clamp(15px,1.7vw,18px);list-style-position:inside;color:#153d45}
.cl-colour-key summary small{font-size:.78em;font-weight:500}
.cl-colour-key .cl-colour-inner{padding:6px 16px 16px;font-size:clamp(14px,1.2vw,16px);line-height:1.5}
.cl-colour-key p{margin:5px 0 14px;color:#20434b}
.cl-colour-key .cl-colour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px}
.cl-colour-key .cl-colour-grid label{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px;border:1px solid #c7d9d5;border-radius:7px;background:white;color:#18383c;font-size:13px;font-weight:650}
.cl-colour-key .cl-colour-grid input{width:37px;height:32px;padding:1px;border:1px solid #50656b;background:#fff;border-radius:5px;flex:none;cursor:pointer}
.cl-colour-key .cl-colour-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px}
.cl-colour-key .cl-colour-actions a{color:#075d65;text-decoration:underline!important}
.cl-colour-key .cl-colour-actions button{border:1px solid #277078;border-radius:7px;background:#fff;color:#16474b;padding:9px 12px;cursor:pointer;font-size:14px}
.cl-colour-key *:focus-visible{outline:3px solid #c87813;outline-offset:2px}
@media(max-width:540px){.cl-colour-key{margin:8px 4px}.cl-colour-key .cl-colour-inner{padding:6px 10px 12px}.cl-colour-key .cl-colour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-colour-key .cl-colour-grid label{font-size:12px;min-width:0;overflow-wrap:anywhere}}