/* ═══════════════════════════════════════════════════════════════════════════════
   SELECT — the one dropdown in the Course in a Box interface.

   A native <select> is the only control on these screens the browser draws
   itself: on macOS it arrives with a double-chevron and its own chrome, on
   Windows with a different one again, and neither answers to the tokens every
   other control here uses. Next to a styled input it reads as a piece of a
   different application.

   The native element STAYS in the DOM and remains the source of truth — value,
   options, change events, form participation. This is a skin over it, mounted by
   select.js, so no call site had to change and nothing breaks if the script never
   runs: an unenhanced page just shows the ordinary select.
   ═══════════════════════════════════════════════════════════════════════════════ */

.ciab-select{ position:relative;display:inline-flex;vertical-align:middle;max-width:100%; }

/* Hidden from sight and from the pointer, but still the element every existing
   handler reads. Not display:none — that would drop it from form submission and
   from the accessibility tree entirely, and some of these live inside <form>. */
.ciab-select > select{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap; }

.cs-btn{ display:inline-flex;align-items:center;gap:9px;width:100%;min-width:0;
  font:inherit;font-size:12.5px;font-weight:500;line-height:1.2;color:var(--fg);
  background:var(--bg-input);border:1px solid var(--line-strong);border-radius:8px;
  padding:8px 11px;cursor:pointer;text-align:left;
  transition:border-color .12s,background .12s,color .12s; }
.cs-btn:hover{ border-color:var(--fg-dim);background:var(--bg-hover,var(--bg-input)); }
.cs-btn:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent); }
.cs-btn[aria-expanded="true"]{ border-color:var(--accent); }
.cs-btn[disabled]{ opacity:.55;cursor:not-allowed; }
.cs-label{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
/* ONE chevron, ours, rotating on open — not the platform's double arrow. */
.cs-caret{ flex:0 0 auto;width:13px;height:13px;color:var(--fg-dim);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),color .12s; }
.cs-btn:hover .cs-caret{ color:var(--fg-muted); }
.cs-btn[aria-expanded="true"] .cs-caret{ transform:rotate(180deg);color:var(--accent); }

.cs-menu{ position:absolute;z-index:10060;top:calc(100% + 5px);left:0;min-width:100%;
  max-height:min(320px,60vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-raised,#141414);border:1px solid var(--line-strong);
  border-radius:10px;padding:5px;box-shadow:0 14px 42px rgba(0,0,0,.42);
  animation:csRise .14s cubic-bezier(.2,.8,.2,1); }
/* Flipped when there is no room below. Set by select.js, which measures. */
.cs-menu.up{ top:auto;bottom:calc(100% + 5px);transform-origin:bottom center; }
.cs-menu[hidden]{ display:none; }
@keyframes csRise{ from{ opacity:0;transform:translateY(-4px) } to{ opacity:1;transform:none } }

.cs-opt{ display:flex;align-items:center;gap:9px;width:100%;font:inherit;font-size:12.5px;
  color:var(--fg-muted);background:transparent;border:0;border-radius:7px;
  padding:8px 10px;cursor:pointer;text-align:left;line-height:1.35; }
.cs-opt:hover,.cs-opt.active{ background:var(--bg-hover,var(--bg-input));color:var(--fg); }
.cs-opt[aria-selected="true"]{ color:var(--fg);font-weight:550; }
.cs-opt[disabled]{ opacity:.45;cursor:not-allowed; }
.cs-opt-text{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
/* The tick marks the CURRENT value; `active` is only where the keyboard is. Two
   different facts, so they never share a treatment. */
.cs-tick{ flex:0 0 auto;width:13px;height:13px;opacity:0;color:var(--accent); }
.cs-opt[aria-selected="true"] .cs-tick{ opacity:1; }
.cs-group{ padding:9px 10px 4px;font-size:10.5px;font-weight:650;letter-spacing:.055em;
  text-transform:uppercase;color:var(--fg-dim); }

/* The date filter that sits in a card header: smaller, quieter, no fill until
   you go near it, because it is a refinement of the list rather than a field. */
.ciab-select.is-filter .cs-btn{ background:transparent;border-color:var(--line);
  font-size:12px;padding:6px 10px;color:var(--fg-muted); }
.ciab-select.is-filter .cs-btn:hover{ color:var(--fg);border-color:var(--line-strong);
  background:var(--bg-input); }

@media (prefers-reduced-motion:reduce){
  .cs-caret{ transition:none; }
  .cs-menu{ animation:none; }
}