/* course-filter.css  The public filter bar (course-filter.js). Uses the site colours; dark values under :root[data-theme=dark]. */
.xcf{--xf-fg:var(--navy,#0b1c2d);--xf-mut:#3d4f63;--xf-bg:#fff;--xf-bd:#8795a5;--xf-acc:#1d6b8a;--xf-onacc:#fff;--xf-soft:#eaf3f7;
  margin:0 0 1rem;padding:.7rem .8rem;border:1px solid var(--xf-bd);border-radius:12px;background:var(--xf-bg);color:var(--xf-fg);font-size:.88rem;line-height:1.35;max-width:100%}
:root[data-theme=dark] .xcf{--xf-fg:#e8eef5;--xf-mut:#b6c3d1;--xf-bg:#10202f;--xf-bd:#5b6b7c;--xf-acc:#4fb3d6;--xf-onacc:#0b1c2d;--xf-soft:#192b3c}
.xcf[hidden],.xcf [hidden],.xcf-empty[hidden]{display:none!important}
.xcf-hide{display:none!important}
.xcf *{box-sizing:border-box}
.xcf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.xcf-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.xcf-search{flex:1 1 200px;min-width:0}
.xcf input[type=search],.xcf select,.xcf input[type=date]{width:100%;min-height:44px;padding:.4rem .65rem;border:1px solid var(--xf-bd);border-radius:10px;background:var(--xf-bg);color:var(--xf-fg);font:inherit}
.xcf-sort{flex:0 1 190px}
.xcf-prim,.xcf-more{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:.65rem}
.xcf-more{padding-top:.65rem;border-top:1px dashed var(--xf-bd)}
.xcf-group{display:flex;flex-direction:column;gap:.3rem;min-width:0;max-width:100%}
.xcf-lbl{font-weight:700;font-size:.78rem;color:var(--xf-mut);text-transform:uppercase;letter-spacing:.03em}
.xcf-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.xcf-chip{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.3rem .8rem;border:1px solid var(--xf-bd);border-radius:999px;background:var(--xf-bg);color:var(--xf-fg);font:inherit;font-size:.85rem;cursor:pointer;touch-action:manipulation;list-style:none}
.xcf-chip::-webkit-details-marker{display:none}
.xcf-chip:hover{border-color:var(--xf-acc)}
.xcf-chip[aria-pressed=true],.xcf-on{background:var(--xf-acc);border-color:var(--xf-acc);color:var(--xf-onacc)}
.xcf :focus-visible{outline:3px solid #ff8a00;outline-offset:2px}
.xcf-dd{position:relative}
.xcf-dd-btn::after{content:"\25BE";font-size:.8em}
.xcf-n{display:inline-block;min-width:1.3em;padding:0 .35em;border-radius:999px;background:var(--xf-acc);color:var(--xf-onacc);font-size:.75rem;text-align:center}
.xcf-pop{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:min(280px,86vw);max-height:300px;overflow:auto;padding:.5rem;border:1px solid var(--xf-bd);border-radius:12px;background:var(--xf-bg);box-shadow:0 10px 28px rgba(11,28,45,.25)}
.xcf-pop-x{display:none}
.xcf-opt,.xcf-tg{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.1rem .3rem;cursor:pointer}
.xcf-opt input,.xcf-tg input[type=checkbox]{width:20px;height:20px;accent-color:var(--xf-acc);flex:0 0 auto}
.xcf-misc{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.xcf-date input{width:auto}
.xcf-rng{display:flex;flex-direction:column;gap:.15rem;min-width:min(260px,80vw)}
.xcf-rng input[type=range]{width:100%;min-height:32px;accent-color:var(--xf-acc)}
.xcf-rv{font-weight:700;color:var(--xf-fg)}
.xcf-status{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin-top:.65rem;min-height:44px}
.xcf-count{font-weight:700;color:var(--xf-mut)}
.xcf-active{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.xcf-active .xcf-chip{min-height:36px;padding:.15rem .65rem}
.xcf-clear{min-height:44px;padding:.2rem .5rem;border:0;background:none;color:var(--xf-acc);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
:root:not([data-theme=dark]) .xcf-clear{color:#14566f}
.xcf-empty{margin:0 0 1rem;padding:1.2rem;border:1px dashed var(--navy,#0b1c2d);border-radius:12px;text-align:center;background:#fff;color:#0b1c2d}
:root[data-theme=dark] .xcf-empty{background:#10202f;color:#e8eef5;border-color:#5b6b7c}
.xcf-empty-h{font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
.xcf-empty-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.8rem}
.xcf-ghost{background:transparent;border:1px solid currentColor;color:inherit}
@media (max-width:520px){.xcf{padding:.6rem}.xcf-sort{flex:1 1 100%}.xcf-pop{position:fixed;z-index:420;left:5vw;right:5vw;top:auto;bottom:10px;width:auto;max-height:55vh}.xcf-pop-x{display:block;margin:0 0 .3rem auto}}
@media (prefers-reduced-motion:reduce){.xcf *{transition:none!important}}
.xcf[data-xcf=courses]{max-width:860px}