/* ══════════════════════════════════════════════════════════════════════════
   DISCOVERY  ·  the filter panel, the shortlist and the comparison ledger
   ══════════════════════════════════════════════════════════════════════════

   Added 2026-09-08, for `/colleges` and `/compare`.

   ⚠️ IT INHERITS RATHER THAN RE-BRANDS. `edulibrary-refined.css` is the record's
   editorial pass — warm paper, navy ink, rust for action, document-like surfaces
   — and it loads AFTER this file, so every colour here resolves through the
   `--edu-*` tokens it sets rather than through hex of its own. That is what
   keeps these surfaces in step with the pages around them in both themes, and it
   is why there is no palette in this file.

   ⚠️ Loaded in the page's `styles` slot, AFTER `ice-directory.css`, because the
   filter panel's grid is widened here from four columns to six and the two
   selectors are the same strength. Order is the only thing separating them.

   ── One type scale, used everywhere below ──────────────────────────────────

     micro   0.6875rem / 600 / 0.06em tracking / uppercase   a label on a label
     small   0.8125rem / 400                                 provenance, counts
     body    0.9375rem / 400                                 values, prose
     lead    1.0625rem / 600                                 a column heading
     title   1.125rem  / 700 / -0.01em                       a section heading

   The record's existing surfaces already use the first four; this file adds
   nothing to the scale, which is the whole point of writing it down.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ SCOPED TO THE PAGE, NOT TO THE COMPONENTS, and it was the other way round
   for one build. A custom property is inherited, so a token defined on
   `.cdir-filter` is invisible to `.ccard__save` and to `.cdir__empty-reset`,
   which are somewhere else in the tree — and `border: 1px solid var(--disc-line)`
   with `--disc-line` undefined is invalid at computed-value time, so the whole
   declaration is dropped and the control renders as bare text. That is exactly
   how the save button shipped with no border for one afternoon.

   `.edu` is the body class, and `edulibrary-refined.css` defines the `--edu-*`
   values on the same selector LATER in the cascade. That is fine: custom
   properties resolve at computed-value time, so these read the final `--edu-*`
   rather than whatever was defined when this file was parsed. The `--ice-*`
   fallbacks are for the case where the refined pass is ever removed. */
.edu {
  --disc-micro: 0.6875rem;
  --disc-small: 0.8125rem;
  --disc-body: 0.9375rem;
  --disc-ink: var(--edu-ink, var(--ice-color-text));
  --disc-muted: var(--edu-muted, var(--ice-color-text-muted));
  --disc-line: var(--edu-line, var(--ice-color-border, rgb(15 23 42 / 14%)));
  --disc-surface: var(--edu-surface, var(--ice-color-bg));
  --disc-accent: var(--edu-accent, var(--ice-color-action, #2f5ba8));
  --disc-radius: 12px;
}

/* ══ 1 · the filter panel ════════════════════════════════════════════════ */

/* Six controls now, not three. The search box keeps a row of its own on every
   width because it is the control people reach for first; the five selects pair
   up on a phone and sit three-across on a desktop. */
.cdir-filter[data-ready="true"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.875rem;
  align-items: end;
}

.cdir-filter__field--q { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .cdir-filter[data-ready="true"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The count line and the reset control share the last row and sit apart. */
.cdir-filter__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0;
  padding-block-start: 0.25rem;
}

.cdir-filter .cdir-filter__count {
  margin: 0;
  padding: 0;
  font-size: var(--disc-small);
  font-variant-numeric: tabular-nums;
  color: var(--disc-muted);
  white-space: normal;
}

.cdir-filter__reset,
.cdir__empty-reset {
  min-height:44px;
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: var(--disc-small);
  font-weight: 600;
  color: var(--disc-accent);
  background: none;
  border: 1px solid var(--disc-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 140ms var(--edu-ease, ease), background-color 140ms var(--edu-ease, ease);
}

.cdir-filter__reset:hover,
.cdir__empty-reset:hover { border-color: var(--disc-accent); background: rgb(169 75 45 / 8%); }

.cdir-filter__reset:focus-visible,
.cdir__empty-reset:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

.cdir-filter__reset[hidden] { display: none; }

/* The sentence that says what a derived filter is and is not. Small, but it is
   the difference between a filter and a claim, so it is on the page rather than
   in a doc. */
.cdir-filter__fine {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--disc-line);
  max-inline-size: 78ch;
  font-size: var(--disc-small);
  line-height: 1.55;
  color: var(--disc-muted);
}

/* ══ 2 · the empty state ════════════════════════════════════════════════ */

.cdir__empty { display: grid; gap: 0.6rem; justify-items: center; text-align: center; }
.cdir__empty[hidden] { display: none; }
.cdir__empty-head { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--disc-ink); }
.cdir__empty-filters,
.cdir__empty-help { margin: 0; max-inline-size: 56ch; font-size: var(--disc-body); }
.cdir__empty-filters:empty { display: none; }
.cdir__empty-reset { margin-block-start: 0.35rem; }

/* ══ 3 · the save control on a card ═════════════════════════════════════ */

/* ── The card's right-hand column ──────────────────────────────────────────
   ⚠️ IT IS BUILT BY THE SCRIPT, NOT BY THE BUILD, and that is a byte decision
   rather than an aesthetic one. A wrapper element rendered server-side would
   cost about 43 KB across 1,458 cards on a page that two rounds of trimming
   already took from 1,069 KB down to 969 KB. The script is creating the save
   button anyway, so it creates the column and moves the existing "Unchecked"
   flag into it in the same pass.

   Without the script the flag stays exactly where the build put it and the card
   is the one that has shipped since 2026-09-07.

   Why a column at all: at three cards across a 1080px column there are about
   245px to share between the name, the place, a 68px flag and a 54px control.
   Side by side that leaves the name 99px and wraps something on every card;
   stacked, the two controls share one 68px column and the name keeps 165px. */
.ccard__aside {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  align-self: center;
}

/* The body has to absorb the leftover width, or the aside is not pushed to the
   edge and the card's ragged right returns. */
.ccard__body { flex: 1 1 auto; }

.ccard__leadmark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--edu-navy, #17304a);
  color: var(--ice-color-on-accent, #fff);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .03em;
}
.ccard--lead { background: color-mix(in srgb, var(--ice-color-text-accent) 5%, var(--ice-color-bg)); }
.ccard--lead .ccard__flag { max-width: 76px; text-align: center; line-height: 1.2; }
.ccard__leadname { margin: 0; color: var(--ice-color-text); font-size: 1rem; font-weight: 650; line-height: 1.35; }
.ccard--lead .ccard__leadlink { color: var(--ice-color-action, #2F5BA8); font-size: .75rem; font-weight: 720; letter-spacing: .035em; text-transform: uppercase; }

/* ⚠️ `position: relative` and a z-index, because `.ccard__link::after` covers
   the whole card so a thumb can hit it anywhere. Without these the save button
   is underneath that overlay and cannot be pressed at all. */
.ccard__save {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height:44px;
  padding:0.55rem 0.8rem;
  font: inherit;
  font-size:13px;
  font-weight: 650;
  letter-spacing:0;
  text-transform:none;
  color: var(--disc-muted);
  background: none;
  border: 1px solid var(--disc-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms var(--edu-ease, ease), border-color 140ms var(--edu-ease, ease),
              background-color 140ms var(--edu-ease, ease);
}

.ccard__save:hover { color: var(--disc-accent); border-color: var(--disc-accent); }
.ccard__save:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

/* ⚠️ THE PRESSED PAIR IS STATED PER THEME, because navy-on-navy is invisible.
   In dark, `--edu-navy` resolves to the graphite brand surface and
   `--edu-surface` to the graphite card — two dark values, so a saved control
   would have been a dark label on a dark plate. Each theme names a fill and the
   ink that is measured against it. */
.ccard__save[aria-pressed="true"] {
  color: var(--edu-surface, #fff);
  background: var(--edu-navy, #17304a);
  border-color: var(--edu-navy, #17304a);
}

html[data-theme="dark"] .ccard__save[aria-pressed="true"] {
  color: var(--ice-color-on-accent);
  background: var(--ice-color-accent);
  border-color: var(--ice-color-accent);
}

/* Inside the column the flag is a label and the control is a control, so the
   flag loses the top margin it needed as a flex sibling. */
.ccard__aside .ccard__flag { margin-block-start: 0; align-self: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .ccard__save, .cdir-filter__reset, .cdir__empty-reset { transition: none; }
}

/* ══ 4 · the sticky directory bar ═══════════════════════════════════════ */

/* Sticky to the bottom of the viewport while the directory is on screen, so
   neither the filters nor the shortlist scrolls away under 1,458 cards. Sticky
   rather than fixed: a fixed bar is positioned against the viewport and is the
   usual cause of the horizontal overflow `npm run audit:header` fails the build
   on at 1440px. */
.cdir-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--disc-line);
  border-radius: var(--disc-radius);
  background: var(--disc-surface);
  box-shadow: 0 10px 30px rgb(28 42 56 / 14%);
}

.cdir-bar[hidden], .cdir-bar__state[hidden] { display: none; }

/* Two regions, so the second is visibly a second thing rather than more of the
   first. */
.cdir-bar__state + .cshort {
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--disc-line);
}

.cdir-bar__state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.cdir-bar__count {
  margin: 0;
  font-size: var(--disc-small);
  font-variant-numeric: tabular-nums;
  color: var(--disc-ink);
}

.cdir-bar__actions { display: flex; align-items: baseline; gap: 0.85rem; }

.cdir-bar__link,
.cdir-bar__clear {
  font: inherit;
  font-size: var(--disc-small);
  color: var(--disc-accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cdir-bar__link:focus-visible,
.cdir-bar__clear:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

.cshort { display: grid; gap: 0.7rem; }
.cshort[hidden] { display: none; }

.cshort__title {
  margin: 0;
  font-size: var(--disc-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--disc-muted);
}

.cshort__note { margin: 0.2rem 0 0; font-size: var(--disc-small); color: var(--disc-muted); }

/* ⚠️ THE CHIP ROW DOES NOT WRAP, AT ANY WIDTH, AND THAT IS THE WHOLE POINT.
   The rule below used to be `flex-wrap: wrap` here and `nowrap` only inside the
   699px block, whose comment reads "a sticky bar that grows with the shortlist
   can swallow a phone screen". The reasoning was right and the width limit was
   not: `.cdir-bar` is `position: sticky; bottom: 12px` and sits BEFORE the card
   list in the DOM, so a bottom-sticky box is only ever shifted upward — it pins
   over the results while the page is near the top. Wrapped, it grew with the
   shortlist without any bound.

   Measured at the 12-college cap on a 1280x800 viewport: the bar was 538px tall,
   two thirds of the screen, and `document.elementFromPoint()` at the centre of
   the first card's Save control returned `.cshort__item`. A reader with a full
   shortlist could not press Save on the first result — the tray was on top of
   it. It swallowed a desktop screen too; it just took twelve chips to do it.

   Bounding the row is the file's own existing answer, applied at the width the
   comment above never covered. The structural fix — a bottom-sticky element
   belongs at the END of its containing block — is a markup change that would
   put the bar 1,458 tab stops after the controls it belongs with, and is
   recorded for the shared-CSS pass rather than done here. */
.cshort__list {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  gap: 6px;
  margin: 0;
  padding: 0 0 2px;
}

.cshort__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  max-inline-size: 100%;
  padding: 0.28rem 0.3rem 0.28rem 0.6rem;
  font-size: var(--disc-small);
  border: 1px solid var(--disc-line);
  border-radius: 999px;
  background: var(--edu-paper, transparent);
}

.cshort__name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 22ch;
  color: var(--disc-ink);
}

.cshort__drop {
  flex: 0 0 auto;
  inline-size: 22px;
  block-size: 22px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--disc-muted);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.cshort__drop:hover { color: var(--disc-accent); background: rgb(169 75 45 / 10%); }
.cshort__drop:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 1px; }

.cshort__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }

.cshort__go {
  padding: 0.45rem 0.9rem;
  font-size: var(--disc-body);
  font-weight: 650;
  text-decoration: none;
  color: var(--edu-surface, #fff) !important;
  background: var(--disc-accent);
  border-radius: 999px;
}

/* A filter rather than a second hex: `--disc-accent` is a dark rust in light
   and a light terracotta in dark, and one hover colour cannot serve both. */
.cshort__go:hover { filter: brightness(0.92); }
.cshort__go:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

.cshort__clear {
  font: inherit;
  font-size: var(--disc-small);
  color: var(--disc-muted);
  background: none;
  border: 0;
  padding: 0.45rem 0.2rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cshort__clear:hover { color: var(--disc-ink); }
.cshort__clear:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

@media (min-width: 720px) {
  .cshort {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
  }
  .cshort__text { grid-column: 1; }
  .cshort__list { grid-column: 2; }
  .cshort__actions { grid-column: 3; justify-content: flex-end; }
}

/* ══ 5 · the comparison ledger ══════════════════════════════════════════ */

.cled-status {
  margin: 1.5rem 0 0;
  font-size: var(--disc-small);
  color: var(--disc-muted);
}

.cled-shell[hidden], .cled-empty[hidden] { display: none; }

.cled-head { margin: 1.25rem 0 0.9rem; }
.cled-head__title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--disc-ink); }
.cled-head__note { margin: 0.35rem 0 0; max-inline-size: 68ch; font-size: var(--disc-small); color: var(--disc-muted); }

/* ⚠️ `overflow-x` on a WRAPPER, never on the table or the page. Three columns
   plus the stub is wider than a 390px phone, and a scroller that is a child of
   the content column cannot extend the document — which is the horizontal
   overflow `audit:header` fails on at every width. */
.cled-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  max-inline-size: 100%;
  border: 1px solid var(--disc-line);
  border-radius: var(--disc-radius);
  background: var(--disc-surface);
}

.cled {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: var(--disc-body);
}

.cled__caption {
  /* Read by a screen reader, not drawn: the visible heading above already says
     this, and printing it twice is noise for everyone who can see it. */
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ⚠️ EVERY ONE OF THESE RESETS IS LOAD-BEARING. This block was called `.cmp`
   for one afternoon, which is the name `site-20260716b.css` already uses for the
   college site's own comparison table — including
   `.cmp th { background: var(--navy-deep); color: #fff; text-transform: uppercase }`
   above 760px. The ledger rendered with an unreadable navy stub column until it
   was renamed. It is `.cled` now, and these declarations exist so that a future
   collision or a global `th` rule cannot silently repaint it either. */
.cled th, .cled td {
  vertical-align: top;
  text-align: start;
  padding: 0.85rem 0.9rem;
  border-block-end: 1px solid var(--disc-line);
  font-weight: 400;
  font-size: var(--disc-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--disc-ink);
  background: var(--disc-surface);
}

/* The stub column stays put while the columns scroll under it. Without it a
   reader who has scrolled to the third college no longer knows which row is
   which. */
/* ⚠️ `th.` and `td.` prefixes throughout this block, because the reset above is
   `.cled th, .cled td` — one class plus one type — and outranks a bare class.
   Without them the stub plate and the hatched blank both lose to the reset and
   every cell renders the same flat surface, which is the one thing this table
   must not do. */
.cled th.cled__stub {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  inline-size: 11.5rem;
  min-inline-size: 11.5rem;
  display: grid;
  gap: 2px;
  background: var(--edu-paper, var(--disc-surface));
  border-inline-end: 1px solid var(--disc-line);
  font-weight: 400;
}

.cled th.cled__stub--corner { background: var(--edu-paper, var(--disc-surface)); }

.cled__stub-label { font-size: var(--disc-body); font-weight: 650; color: var(--disc-ink); }

.cled__stub-count {
  font-size: var(--disc-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--disc-muted);
  font-variant-numeric: tabular-nums;
}

.cled__stub-note { font-size: var(--disc-small); line-height: 1.45; color: var(--disc-muted); }

.cled th.cled__col { min-inline-size: 12.5rem; font-weight: 400; }

.cled__col-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.cled__col-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cled__col-name:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

.cled__col-place { margin: 0.25rem 0 0.6rem; font-size: var(--disc-small); color: var(--disc-muted); }

.cled__drop {
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: var(--disc-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--disc-muted);
  background: none;
  border: 1px solid var(--disc-line);
  border-radius: 999px;
  cursor: pointer;
}

.cled__drop:hover { color: var(--disc-accent); border-color: var(--disc-accent); }
.cled__drop:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

.cled__value { display: block; line-height: 1.5; color: var(--disc-ink); }
.cled__value--link { word-break: break-word; }
.cled__value--draft { color: var(--edu-accent, #a94b2d); font-weight: 600; }

.cled__src { margin: 0.3rem 0 0; font-size: var(--disc-micro); line-height: 1.5; color: var(--disc-muted); }
.cled__src-link { color: inherit; }
.cled__read { font-variant-numeric: tabular-nums; }

.cled__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.cled__items--plain { margin-block-start: 0.4rem; gap: 0.15rem; font-size: var(--disc-small); color: var(--disc-muted); }
.cled__item { min-inline-size: 0; }
.cled__item-label { display: block; font-size: var(--disc-micro); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--disc-muted); }

/* ── the signature: a blank that was designed rather than left over ────────
   This is the record's whole position drawn once. A directory fills an empty
   cell with an estimate, a dash, or "contact the college". This one says the
   institution has published nothing, in the page's own voice, on a plate that
   is visibly a different material from a filled cell. */
.cled td.cled__cell--blank {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 7px,
      var(--disc-line) 7px 8px
    );
  background-clip: padding-box;
}

.cled__blank {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: var(--disc-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--disc-muted);
  background: var(--disc-surface);
  border-radius: 999px;
}

/* A row nobody publishes reads as one statement rather than three shrugs. */
.cled__row--empty .cled__stub-count { color: var(--edu-accent, #a94b2d); }

.cled-picker { display: grid; gap: 0.5rem; margin: 1.1rem 0 0; }
.cled-picker__note { margin: 0; font-size: var(--disc-small); color: var(--disc-muted); }
.cled-picker__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }

.cled-picker__add {
  padding: 0.32rem 0.7rem;
  font: inherit;
  font-size: var(--disc-small);
  color: var(--disc-ink);
  background: none;
  border: 1px solid var(--disc-line);
  border-radius: 999px;
  cursor: pointer;
}

.cled-picker__add:hover { border-color: var(--disc-accent); color: var(--disc-accent); }
.cled-picker__add:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }
.cled-picker__back { margin: 0.25rem 0 0; font-size: var(--disc-small); }

.cled-empty {
  margin: 1.25rem 0 0;
  padding: clamp(20px, 4vw, 32px);
  border:0;
  border-top:2px solid var(--edu-accent);
  border-bottom:1px solid var(--disc-line);
  border-radius:0;
  background:var(--edu-paper);
}

.cled-empty h2 { margin: 0 0 0.5rem; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--disc-ink); }
.cled-empty p { margin: 0 0 0.75rem; max-inline-size: 64ch; font-size: var(--disc-body); line-height: 1.65; color: var(--disc-ink); }
.cled-empty p:last-child { margin-block-end: 0; }

.cled-empty code {
  padding: 0.1rem 0.35rem;
  font-size: 0.875em;
  border-radius: 6px;
  background: var(--edu-paper, rgb(15 23 42 / 5%));
}

.cled-empty__go {
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:0.5rem 1rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--edu-surface, #fff) !important;
  background: var(--disc-accent);
  border-radius:8px;
}

.cled-empty__go:hover { filter: brightness(0.92); }
.cled-empty__go:focus-visible { outline: 2px solid var(--disc-accent); outline-offset: 2px; }

.cled-noscript {
  color: var(--disc-ink);
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--disc-line);
  border-radius: var(--disc-radius);
  background: var(--disc-surface);
  font-size: var(--disc-body);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .cled th.cled__stub { inline-size: 8.5rem; min-inline-size: 8.5rem; padding-inline: 0.7rem; }
  .cled th.cled__col { min-inline-size: 11rem; }
  .cled th, .cled td { padding: 0.7rem; }
  .cdir-bar { padding: 0.8rem; bottom: 8px; }
  .cshort__name { max-inline-size: 16ch; }
  /* The chip row's sideways scroll is the base rule now — see `.cshort__list`
     above. It was only ever needed here because the bar swallows a phone screen
     fastest, not because it stops swallowing a desktop one. */
}