/**
 * The institutions directory — dressed in the site's own design language.
 *
 * The first version of this file reproduced sacscoc.org/institutions/ component
 * by component: heavily rounded outlined panels with their titles notched into
 * the top border, a type scale of its own, everything centred. Dropped into the
 * Cirlot theme it read as a page from another site pasted into this one.
 *
 * So the reference is now the theme itself — the same language the rest of the
 * site is built in (see /insights-research/):
 *
 *   · no boxes. Sections are separated by space and a hairline rule, never by
 *     an outlined rounded panel.
 *   · lists are rows: a Montserrat title in navy, a gold arrow, a 1px divider.
 *   · headings are left-aligned Montserrat, not centred notches.
 *   · one measure — the theme's 1200px container — and real air above and below.
 *   · the only round things are the controls and the buttons, which is exactly
 *     where the theme rounds things too (its header search, its pill buttons).
 *
 * ── Colour and type come from the theme, not from here ──────────────────────
 *
 * Every token below reads an Elementor global first and only falls back to a
 * literal if the site has none:
 *
 *   --e-global-color-primary    #003A5D  navy
 *   --e-global-color-secondary  #4D758E  muted blue
 *   --e-global-color-accent     #CC9F53  gold
 *   --e-global-color-text       #454545  body copy
 *   --e-global-typography-primary-*      Montserrat 600, the heading face
 *
 * Re-branding the site therefore re-brands the directory, with no edit here.
 * A theme without Elementor gets the literals, which are the SACSCOC palette.
 *
 * ── Three contexts, one set of tokens ────────────────────────────────────────
 *
 * .sacscoc-directory and .sacscoc-single are not just the two page templates —
 * they are this stylesheet's two scoping classes, carrying every token, reset
 * and component style below. [sacscoc_institutions_search] reuses the first of
 * them on the wrapper it puts around a standalone search form (see
 * .sacscoc-search-standalone, and sacscoc_inst_search_shortcode() in
 * includes/frontend.php), purely so that wrapper gets the same tokens, the same
 * element reset, the same button/control/link styling as the form does inside
 * the ordinary two-column directory — without also carrying the
 * `data-sacscoc-directory` attribute that tells assets/js/directory.js "this is
 * a results region to initialise". Only the <form> inside carries that marker.
 */

.sacscoc-directory,
.sacscoc-single {
  /* Palette — the theme's own globals, with the SACSCOC values as fallback. */
  --sacscoc-navy: var(--e-global-color-primary, #003a5d);
  --sacscoc-blue: var(--e-global-color-secondary, #4d758e);
  --sacscoc-gold: var(--e-global-color-accent, #cc9f53);
  --sacscoc-ink: var(--e-global-color-text, #454545);
  --sacscoc-muted: #686868;
  --sacscoc-error: #c1272d;

  /* Rules and tints are stated as ink over the page rather than as the theme's
     literal greys (#ECECEC, #DFDFDF, #F7F7F7). Those greys are those greys only
     on a white page; on a theme with a tinted background they disappear. As
     percentages of black they land on the same values on white and keep working
     everywhere else. */
  --sacscoc-line: rgba(0, 0, 0, 0.09);
  --sacscoc-line-strong: rgba(0, 0, 0, 0.16);
  --sacscoc-surface: rgba(0, 0, 0, 0.03);

  /* Type. Used as `var(--sacscoc-font-heading), sans-serif`, which resolves two
     ways on purpose: with an Elementor kit it becomes `"Montserrat", sans-serif`
     — the theme's face, with a real fallback if the webfont has not loaded, so a
     heading can never drop to the browser's default serif. Without a kit it
     becomes `inherit, sans-serif`, which is not valid CSS, so the declaration is
     dropped and the heading simply keeps the theme's own font. */
  --sacscoc-font-heading: var(--e-global-typography-primary-font-family, inherit);
  --sacscoc-font-heading-weight: var(--e-global-typography-primary-font-weight, 600);

  /* A scale that lands on the theme's: body 17px, row titles 22px, section
     headings 32px, page title 44px at the top end — fluid, and bounded in px
     so it can neither shrink to nothing nor inflate with an oversized theme. */
  --sacscoc-text: clamp(15px, 0.3vw + 14px, 17px);
  --sacscoc-text-sm: clamp(13px, 0.2vw + 12.4px, 14px);
  --sacscoc-label: clamp(12px, 0.15vw + 11.5px, 13px);
  --sacscoc-name: clamp(18px, 0.6vw + 16px, 22px);
  --sacscoc-subheading: clamp(19px, 0.7vw + 16.5px, 22px);
  --sacscoc-heading: clamp(24px, 1.4vw + 19px, 32px);
  --sacscoc-title: clamp(30px, 2.6vw + 20px, 44px);

  /* Vertical rhythm: the gap between two sections. */
  --sacscoc-gap: clamp(32px, 4vw, 56px);
  --sacscoc-radius: 6px;

  color: var(--sacscoc-ink);
  font-size: var(--sacscoc-text);
  line-height: 1.6;
}

.sacscoc-directory *,
.sacscoc-single * { box-sizing: border-box; }

/* ── Standing up to the theme's own element rules ────────────────
   Astra styles `.entry-content p`, `.entry-content ul` and friends at (0,1,1),
   which beats a plain class — and the shortcode renders inside .entry-content.
   So every paragraph in a result row was picking up the theme's 1.75em bottom
   margin and pushing the rows apart. Zeroing them here at (0,2,0) — the root
   class doubled, which costs nothing and needs no !important — puts spacing
   back in this file's hands; everything that wants a margin asks for one below,
   at the same weight. The About block is prose rather than layout, so its
   spacing is handed back at the end of the file. */
.sacscoc-directory.sacscoc-directory :where(p, ul, ol, li, dl, dt, dd, address, table, td, th, figure),
.sacscoc-single.sacscoc-single :where(p, ul, ol, li, dl, dt, dd, address, table, td, th, figure) {
  margin: 0;
  padding: 0;
}

/* ── Icons ───────────────────────────────────────────────────────
   Inline SVG that inherits its size from the type beside it and its colour
   from `currentColor`, so an icon is never out of step with its label. Gold is
   applied only where the icon is an accent — headings and field labels — and
   links keep the icon in the link's own colour so it reads as part of it. */

.sacscoc-icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.14em;
}

.sacscoc-icon--heading {
  width: 1.05em;
  height: 1.05em;
  color: var(--sacscoc-gold);
}

.sacscoc-icon--empty {
  width: 1.6em;
  height: 1.6em;
  margin-right: 10px;
  color: var(--sacscoc-line-strong);
  stroke-width: 1.5;
}

/* Air above and below, so the directory never butts up against the page banner
   or the footer the way it did inside the theme's zero-padding container. The
   embedded record needs the same: the generous page padding it gets on its own
   page is set per page in PHP and does not follow it into a shortcode. */
.sacscoc-directory,
.sacscoc-single--embedded { margin: clamp(32px, 5vw, 72px) 0; }

/* One measure — the theme's own 1200px container — centred inside whatever
   full-width section it is dropped into. The directory itself always carries
   this (templates/directory.php); a standalone search panel opts in per
   instance, since it is not always paired with a directory below it that it
   should line up with — see the `contain_width` argument of
   sacscoc_inst_render_search() in includes/frontend.php. */
.sacscoc-contain-width {
  max-width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* ── Sections ────────────────────────────────────────────────────
   What used to be `.sacscoc-block`: an outlined rounded panel. Now just a
   region of the page — no border, no radius, no background. Spacing does the
   separating, the way it does everywhere else on the site. */

.sacscoc-block {
  position: relative;
  padding: 0;
  margin: 0 0 var(--sacscoc-gap);
  border: 0;
}

.sacscoc-block:last-child { margin-bottom: 0; }

/* Section titles: left-aligned Montserrat navy over a hairline rule — the
   theme's "Latest News" treatment, not a title notched into a border. */
.sacscoc-directory .sacscoc-block__heading,
.sacscoc-single .sacscoc-block__heading {
  position: static;
  top: auto;
  margin: 0 0 20px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--sacscoc-line);
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-heading);
  font-weight: var(--sacscoc-font-heading-weight);
  line-height: 1.2;
  text-align: left;
  color: var(--sacscoc-navy);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The span survives from the notched version, where it masked the border. It
   is a plain inline box now. */
.sacscoc-block__heading > span {
  padding: 0;
  background: none;
}

/* The institution name is the page's h1: the theme's own display size, and no
   rule under it — the "as of" line and the intro carry it instead. */
.sacscoc-directory .sacscoc-block__heading--title,
.sacscoc-single .sacscoc-block__heading--title {
  display: block;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--sacscoc-title);
  font-weight: var(--sacscoc-font-heading-weight);
  line-height: 1.12;
  text-wrap: balance;
}

.sacscoc-directory .sacscoc-block__subheading,
.sacscoc-single .sacscoc-block__subheading {
  margin: 32px 0 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--sacscoc-line);
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-subheading);
  font-weight: var(--sacscoc-font-heading-weight);
  line-height: 1.3;
  text-align: left;
  color: var(--sacscoc-navy);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sacscoc-block--no-heading > .sacscoc-block__subheading:first-child,
.sacscoc-block__heading + .sacscoc-block__subheading { margin-top: 0; }

/* ── Directory layout ────────────────────────────────────────────
   Results left, filters right, as on the current directory. Source order is
   search-then-results so the keyboard reaches the filters first; the visual
   swap happens here. The aside is a fixed measure rather than a percentage —
   a filter column does not want to grow with the viewport. */

.sacscoc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 0 clamp(32px, 4vw, 64px);
  align-items: start;
}

.sacscoc-layout__aside { grid-column: 2; grid-row: 1; }
.sacscoc-layout__main  { grid-column: 1; grid-row: 1; min-width: 0; }

/* No results: one column, the search panel at a sane measure, and the message
   under it — the results column is still in the page, because that is where the
   message is. The class comes from the template rather than from :has(), which
   would have needed an @supports fallback that could not tell this case apart
   from the two-column one. */
.sacscoc-layout--solo { grid-template-columns: minmax(0, 1fr); }
.sacscoc-layout--solo .sacscoc-layout__aside { grid-column: 1; max-width: 520px; }
.sacscoc-layout--solo .sacscoc-layout__main { grid-column: 1; grid-row: 2; }

/* [sacscoc_institutions show_search="no"]: no <aside> is rendered at all — the
   form lives elsewhere, in its own [sacscoc_institutions_search] — so the
   grid's reserved second column has to be told to go away rather than sit
   there empty. Results simply take the full width. */
.sacscoc-layout--no-search { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 899px) {
  .sacscoc-layout { grid-template-columns: minmax(0, 1fr); }
  .sacscoc-layout__aside { grid-column: 1; grid-row: 1; }
  .sacscoc-layout__main  { grid-column: 1; grid-row: 2; margin-top: var(--sacscoc-gap); }
}

/* ── Search panel ────────────────────────────────────────────────
   A flat tint, not an outlined card: the same #F7F7F7 the theme uses for its
   alternating page sections. */

.sacscoc-search {
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--sacscoc-surface);
  border-radius: var(--sacscoc-radius);
}

.sacscoc-directory .sacscoc-search .sacscoc-block__heading {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sacscoc-line-strong);
  font-size: var(--sacscoc-subheading);
}

.sacscoc-search__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.sacscoc-field { margin: 0; }

.sacscoc-directory .sacscoc-field__label,
.sacscoc-single .sacscoc-field__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--sacscoc-navy);
}

/* Controls keep a pill, which is the one place the theme rounds anything: its
   header search field and its buttons. */
.sacscoc-directory .sacscoc-control,
.sacscoc-single .sacscoc-control {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--sacscoc-line-strong);
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--sacscoc-text-sm);
  line-height: 44px;
  color: var(--sacscoc-ink);
  background-color: #fff;
  box-shadow: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sacscoc-directory .sacscoc-control::placeholder,
.sacscoc-single .sacscoc-control::placeholder { color: var(--sacscoc-muted); opacity: 1; }

.sacscoc-directory .sacscoc-control:focus,
.sacscoc-single .sacscoc-control:focus {
  outline: none;
  border-color: var(--sacscoc-blue);
  box-shadow: 0 0 0 3px rgba(77, 117, 142, 0.15);
}

.sacscoc-directory .sacscoc-control--select,
.sacscoc-single .sacscoc-control--select {
  appearance: none;
  padding-right: 44px;
  /* The chevron is inline so there is no image request and no broken icon if
     the plugin directory moves. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234d758e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 18px;
}

.sacscoc-directory .sacscoc-search__actions,
.sacscoc-single .sacscoc-search__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 24px 0 0;
}

/* ── Buttons ─────────────────────────────────────────────────────
   The theme's pill: uppercase Montserrat, letter-spaced, navy or gold. */

.sacscoc-directory .sacscoc-btn,
.sacscoc-single .sacscoc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 13px 28px;
  border: 1px solid var(--sacscoc-navy);
  border-radius: 999px;
  background: var(--sacscoc-navy);
  color: #fff;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.sacscoc-directory .sacscoc-btn:hover,
.sacscoc-single .sacscoc-btn:hover,
.sacscoc-directory .sacscoc-btn:focus,
.sacscoc-single .sacscoc-btn:focus,
.sacscoc-directory .sacscoc-btn:active,
.sacscoc-single .sacscoc-btn:active {
  background: var(--sacscoc-gold);
  border-color: var(--sacscoc-gold);
  color: #fff;
  outline: 0;
}

/* Back and the history toggle are secondary: outlined, filling in on hover. */
.sacscoc-single .sacscoc-btn--back,
.sacscoc-single .sacscoc-btn--toggle,
.sacscoc-directory .sacscoc-btn--back,
.sacscoc-directory .sacscoc-btn--toggle {
  background: transparent;
  color: var(--sacscoc-navy);
}

.sacscoc-directory .sacscoc-back,
.sacscoc-single .sacscoc-back { margin: 0 0 clamp(24px, 3vw, 36px); }

/* ── Links ───────────────────────────────────────────────────────
   The old gold "+" prefix is gone; the theme marks its links with a trailing
   gold arrow, and so do these. */

.sacscoc-directory .sacscoc-plus-link,
.sacscoc-single .sacscoc-plus-link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-text-sm);
  font-weight: 600;
  color: var(--sacscoc-blue);
  text-decoration: none;
}

.sacscoc-directory .sacscoc-plus-link:hover,
.sacscoc-single .sacscoc-plus-link:hover,
.sacscoc-directory .sacscoc-plus-link:focus,
.sacscoc-single .sacscoc-plus-link:focus {
  color: var(--sacscoc-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sacscoc-directory .sacscoc-plus-link .sacscoc-icon,
.sacscoc-single .sacscoc-plus-link .sacscoc-icon {
  color: var(--sacscoc-gold);
  transition: transform 0.15s ease-in-out;
}

.sacscoc-directory .sacscoc-plus-link:hover .sacscoc-icon,
.sacscoc-single .sacscoc-plus-link:hover .sacscoc-icon { transform: translateX(2px); }

.sacscoc-directory .sacscoc-links,
.sacscoc-single .sacscoc-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 0;
}

.sacscoc-links--inline { flex-direction: row; flex-wrap: wrap; gap: 12px 32px; }

/* ── Results ─────────────────────────────────────────────────────
   A heading row, then rows divided by hairlines — the theme's news list. */

.sacscoc-directory .sacscoc-results__meta,
.sacscoc-single .sacscoc-results__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin: 0 0 14px;
}

.sacscoc-results__hint,
.sacscoc-results__count {
  margin: 0;
  font-size: var(--sacscoc-text-sm);
  color: var(--sacscoc-muted);
}

.sacscoc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sacscoc-line);
}

/* A whole row is the click target. The row is a positioned container with a
   full-bleed link stretched across it, so the target is the whole row without
   nesting the other links inside an anchor. */
.sacscoc-directory .sacscoc-result {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--sacscoc-line);
  transition: background-color 0.15s ease-in-out;
}

.sacscoc-result:hover,
.sacscoc-result:focus-within { background-color: var(--sacscoc-surface); }

.sacscoc-result:hover .sacscoc-result__name,
.sacscoc-result:focus-within .sacscoc-result__name { color: var(--sacscoc-blue); }

.sacscoc-result__hit { position: absolute; inset: 0; z-index: 1; }

.sacscoc-result__hit:focus-visible {
  outline: 2px solid var(--sacscoc-blue);
  outline-offset: -2px;
}

.sacscoc-result__identity {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Title, gold arrow, both moving together on hover — the theme's row title. */
.sacscoc-result__name {
  margin: 0;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-name);
  font-weight: 500;
  line-height: 1.3;
  color: var(--sacscoc-navy);
}

.sacscoc-result__former {
  margin: 0;
  font-size: var(--sacscoc-text-sm);
  color: var(--sacscoc-muted);
}

/* Above the full-bleed hit area, so these stay independently clickable. */
.sacscoc-result__site,
.sacscoc-result__sanction {
  position: relative;
  z-index: 2;
  align-self: flex-start;
}

.sacscoc-directory .sacscoc-result__sanction { margin: 2px 0 0; font-size: var(--sacscoc-text-sm); }

.sacscoc-result__facts {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  font-size: var(--sacscoc-text-sm);
}

/* ── Key/value pairs ─────────────────────────────────────────── */

.sacscoc-kv { margin: 0; flex: 1 1 8rem; min-width: 0; }
.sacscoc-kv > div { display: flex; gap: 5px; align-items: baseline; }
.sacscoc-kv dt { margin: 0; font-weight: 600; color: var(--sacscoc-navy); }
.sacscoc-kv dt::after { content: ":"; }
.sacscoc-kv dd { margin: 0; color: var(--sacscoc-muted); }

/* ── Detail: the record's fields ─────────────────────────────────
   A data sheet, not a bulleted list: a small letter-spaced label over its
   value, in two columns. */

.sacscoc-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 4px clamp(32px, 4vw, 64px);
}

.sacscoc-col { min-width: 0; }

.sacscoc-directory .sacscoc-plus-list,
.sacscoc-single .sacscoc-plus-list {
  margin: 0 0 22px;
  padding: 0;
  position: relative;
}

.sacscoc-plus-list:last-child { margin-bottom: 0; }

.sacscoc-directory .sacscoc-plus-list > dt,
.sacscoc-single .sacscoc-plus-list > dt {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--sacscoc-navy);
}

.sacscoc-plus-list > dt .sacscoc-icon {
  width: 15px;
  height: 15px;
  color: var(--sacscoc-gold);
}

.sacscoc-plus-list > dd { margin: 0; }
.sacscoc-plus-list > dd > span { display: block; }
.sacscoc-plus-list address { font-style: normal; }
.sacscoc-plus-list address span { display: block; }

.sacscoc-plus-list .sacscoc-plus-link { margin-top: 6px; }

.sacscoc-directory .sacscoc-asof,
.sacscoc-single .sacscoc-asof {
  margin: 0 0 20px;
  font-size: var(--sacscoc-text-sm);
  color: var(--sacscoc-muted);
}

.sacscoc-former { display: inline-block; }
.sacscoc-directory .sacscoc-intro,
.sacscoc-single .sacscoc-intro { margin: 0 0 8px; max-width: 68ch; }
.sacscoc-directory .sacscoc-staff,
.sacscoc-single .sacscoc-staff { margin: 0 0 4px; font-size: var(--sacscoc-name); font-family: var(--sacscoc-font-heading), sans-serif; font-weight: 500; color: var(--sacscoc-navy); }
.sacscoc-staff strong { font-weight: inherit; }

/* ── History ─────────────────────────────────────────────────── */

.sacscoc-history { margin-top: 32px; }

.sacscoc-history > summary {
  display: inline-flex;
  list-style: none;
  margin: 0;
}

.sacscoc-history > summary::-webkit-details-marker { display: none; }
.sacscoc-history > summary::after { content: "\25BE"; letter-spacing: 0; }
.sacscoc-history[open] > summary::after { content: "\25B4"; }

.sacscoc-directory .sacscoc-history__title,
.sacscoc-single .sacscoc-history__title {
  margin: 28px 0 10px;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-subheading);
  font-weight: var(--sacscoc-font-heading-weight);
  color: var(--sacscoc-navy);
  text-align: left;
}

.sacscoc-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--sacscoc-text-sm);
}

.sacscoc-directory .sacscoc-table td,
.sacscoc-single .sacscoc-table td {
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--sacscoc-line);
}

.sacscoc-table tr:last-child td { border-bottom: none; }

/* ── Level hint ──────────────────────────────────────────────────
   The "i" beside a degree-level numeral, and the tooltip it shows.

   That tooltip used to be the browser's own: a `title` attribute on this span
   and nothing else. Three things were wrong with that, and they are exactly
   what was reported. The delay before a native tooltip appears belongs to the
   browser and cannot be set from a page — roughly a second in Chrome, longer
   again in Firefox, and longer still when the pointer arrives slowly, which is
   the "sometimes ten seconds, sometimes never" of the bug report. `title` is
   also not shown on keyboard focus by any browser, so making the span
   focusable — which it already was — bought nothing. And it cannot be styled,
   positioned or wrapped, so a two-line explanation renders as one long strip.

   So the tooltip is a real element now (`.sacscoc-hint__bubble`, printed by
   templates/results.php and templates/institution.php), shown on `:hover` and
   on `:focus-visible`, with no transition and no delay: it is there on the
   frame the pointer arrives. `aria-hidden` on the bubble and an `aria-label`
   carrying the same text on the hint itself keep it to one announcement rather
   than two. No JavaScript is involved, so it cannot be late, cannot fail to
   initialise, and works identically on markup that arrives by AJAX — which
   every result row after the first search does. */

.sacscoc-directory .sacscoc-hint,
.sacscoc-single .sacscoc-hint {
  position: relative;

  /* Above `.sacscoc-result__hit`, the invisible full-bleed link that makes a
     whole result row clickable (z-index 1, a few rules up). That overlay sits
     on top of everything in the row, so the pointer that looks like it is over
     the "i" is really over the link — which is why the tooltip never appeared
     in the results list at all, with the old `title` attribute or with this
     one. Lifting the hint over it hands the pointer back. The row stays
     clickable everywhere else, and clicking the "i" itself no longer follows
     the link, which is right: it is a control, not part of the row's target. */
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fixed px rather than em: at 0.75em of a 14px fact this became a 10px disc
     with a glyph in it that read as a stray mark rather than as an "i". */
  width: 18px;
  height: 18px;
  margin-left: 0.4em;
  border: 1px solid var(--sacscoc-line-strong);
  border-radius: 50%;
  background: var(--sacscoc-surface);
  color: var(--sacscoc-blue);
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

.sacscoc-directory .sacscoc-hint:focus-visible,
.sacscoc-single .sacscoc-hint:focus-visible {
  outline: 2px solid var(--sacscoc-blue);
  outline-offset: 2px;
}

/* The bubble itself.

   `display: none` rather than `visibility: hidden`, which was the first
   attempt: an absolutely positioned box that is merely invisible still counts
   towards the page's scrollable area, and 280px of hidden tooltip hanging off
   the right of a result row gave a 375px phone a 537px-wide document and a
   horizontal scrollbar. `display: none` takes it out of layout entirely.

   `pointer-events: none` so it can never swallow a click on whatever it
   covers. No transition and no delay anywhere — the whole complaint about the
   old one was that it took its time. */
.sacscoc-directory .sacscoc-hint__bubble,
.sacscoc-single .sacscoc-hint__bubble {
  position: absolute;
  bottom: calc(100% + 9px);
  z-index: 30;

  /* Anchored to the hint's left edge and grown rightwards, not centred on it.
     A centred bubble is prettier and is wrong here: these hints sit at the
     start of a column, and half of a 280px bubble is wider than the page's
     own gutter, so centring put its left edge off-screen — measured at -74px
     on a 375px-wide phone. Growing rightwards from a marker that is itself
     never nearer the left edge than the gutter cannot do that, and the space
     to its right is the rest of the column. Pure CSS cannot know where in the
     viewport it has landed, so the fix is a placement that does not need to
     know. */
  left: -10px;
  right: auto;

  /* Nudged back on screen when that placement still runs past an edge — a
     narrow phone with the hint over on the right of a result row. The nudge
     is set by assets/js/directory.js and is 0 without it, so the tooltip is
     complete and usable with no JavaScript at all; the script only stops the
     rare one from being clipped. */
  transform: translateX(var(--sacscoc-tip-shift, 0px));

  /* Sized to its text, up to a comfortable reading width, and never wider than
     the viewport on a phone. `max-content` is what stops a three-word tip from
     being stretched to the full max-width. */
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));

  padding: 9px 11px;
  border-radius: var(--sacscoc-radius);
  background: var(--sacscoc-navy);
  color: #fff;

  /* The "i" is set in the heading face at 11/700; the tip is a sentence and
     wants none of that, so size, weight and slant are restated below rather
     than inherited from the disc. */
  font-size: var(--sacscoc-text-sm);
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  cursor: default;

  display: none;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* The little arrow, drawn as a rotated corner of the same navy, sitting under
   the "i" the bubble belongs to. */
.sacscoc-directory .sacscoc-hint__bubble::after,
.sacscoc-single .sacscoc-hint__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 15px;
  width: 9px;
  height: 9px;
  margin: -5px 0 0;
  background: inherit;

  /* The arrow keeps pointing at the "i" when the bubble is nudged: the shift
     is applied to the bubble and taken straight back off the arrow. */
  transform: translateX(calc(-1 * var(--sacscoc-tip-shift, 0px))) rotate(45deg);
}

/* Hover for a mouse, focus for a keyboard — and `:focus` as well as
   `:focus-visible`, because tapping the hint on a touch screen focuses it
   without the browser considering that "visible" focus. That tap is the only
   way to read the tip on a phone, so it has to be one of the triggers. */
.sacscoc-directory .sacscoc-hint:hover .sacscoc-hint__bubble,
.sacscoc-directory .sacscoc-hint:focus .sacscoc-hint__bubble,
.sacscoc-directory .sacscoc-hint:focus-within .sacscoc-hint__bubble,
.sacscoc-single .sacscoc-hint:hover .sacscoc-hint__bubble,
.sacscoc-single .sacscoc-hint:focus .sacscoc-hint__bubble,
.sacscoc-single .sacscoc-hint:focus-within .sacscoc-hint__bubble {
  display: block;
}

.sacscoc-hint__note { display: block; margin-top: 2px; font-size: var(--sacscoc-text-sm); color: var(--sacscoc-muted); }

/* ── Reviews / meetings ──────────────────────────────────────── */

.sacscoc-meetings {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sacscoc-text-sm);
}

.sacscoc-meetings li {
  padding: 10px 0;
  border-bottom: 1px solid var(--sacscoc-line);
}

.sacscoc-meetings li:last-child { border-bottom: none; }

/* ── Off-campus instructional sites ─────────────────────────────── */

.sacscoc-sites-legend {
  margin-bottom: 20px;
  font-size: var(--sacscoc-text-sm);
  color: var(--sacscoc-muted);
}

.sacscoc-sites-legend h3 {
  margin: 16px 0 6px;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-text-sm);
  font-weight: var(--sacscoc-font-heading-weight);
  color: var(--sacscoc-navy);
}

.sacscoc-sites-legend h3:first-child { margin-top: 0; }


.sacscoc-sites {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.sacscoc-site {
  padding: 14px 0;
  border-bottom: 1px solid var(--sacscoc-line);
  font-size: var(--sacscoc-text-sm);
}

.sacscoc-site:last-child { border-bottom: none; }
.sacscoc-site__name { display: block; margin-bottom: 4px; }
.sacscoc-site address { font-style: normal; }
.sacscoc-site address span { display: block; }

.sacscoc-site__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 0;
  color: var(--sacscoc-muted);
}

/* ── States ──────────────────────────────────────────────────── */

.sacscoc-error { color: var(--sacscoc-error); }

.sacscoc-directory .sacscoc-alert,
.sacscoc-single .sacscoc-alert {
  margin: 20px 0 0;
  color: var(--sacscoc-error);
}

/* ── Pagination ──────────────────────────────────────────────── */

.sacscoc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}

.sacscoc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--sacscoc-blue);
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.sacscoc-pagination .page-numbers:hover { background: var(--sacscoc-surface); color: var(--sacscoc-navy); }

.sacscoc-pagination .page-numbers.current {
  background: var(--sacscoc-navy);
  color: #fff;
}

.sacscoc-pagination .page-numbers.dots { color: var(--sacscoc-muted); }
.sacscoc-pagination .page-numbers.dots:hover { background: none; }

.sacscoc-pagination .prev,
.sacscoc-pagination .next { letter-spacing: 0.06em; text-transform: uppercase; }

/* ── About block ─────────────────────────────────────────────── */

.sacscoc-about {
  margin-top: var(--sacscoc-gap);
  padding-top: var(--sacscoc-gap);
  border-top: 1px solid var(--sacscoc-line);
  font-size: var(--sacscoc-text-sm);
  color: var(--sacscoc-muted);
}

.sacscoc-single .sacscoc-about > *:first-child { margin-top: 0; }
.sacscoc-single .sacscoc-about > *:last-child { margin-bottom: 0; }

.sacscoc-single .sacscoc-about h2,
.sacscoc-single .sacscoc-about h3 {
  margin: 1.4em 0 0.5em;
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-size: var(--sacscoc-subheading);
  font-weight: var(--sacscoc-font-heading-weight);
  color: var(--sacscoc-navy);
}

/* ── Prose ────────────────────────────────────────────────────────
   Regions whose content is HTML this plugin did not write: the About SACSCOC
   block and the Off-campus Instructional Sites legend, both of which come from
   Institutions → Settings and both of which contain real headings, paragraphs
   and bulleted lists.

   The element reset at the top of this file zeroes `margin` and `padding` on
   every p/ul/ol/li inside `.sacscoc-directory` / `.sacscoc-single`. That is
   right for the lists this file lays out itself — `.sacscoc-list`,
   `.sacscoc-sites`, `.sacscoc-meetings` each set `list-style: none` and build
   their own rows — and wrong for prose: with `padding-left: 0` the markers are
   drawn outside the list's own box, hanging into the margin to the left of the
   text. That is the "bullets pushed too far left" on the institution pages,
   and it is this plugin's doing, not Astra's: `.sacscoc-sites-legend ul` did
   ask for `padding-left: 1.2em`, but at (0,1,1) it lost to the reset's (0,2,0)
   and never applied.

   So the indent is handed back here, once, for anything marked `.sacscoc-prose`
   — at (0,3,0), which beats the reset without `!important`, and scoped inside
   the plugin's own two wrappers, so not one selector here can reach a list the
   theme owns. `list-style` is stated as well as the padding: a theme that sets
   `ul { list-style: none }` for its own menus would otherwise leave these
   lists indented with nothing to indent from. */

.sacscoc-directory.sacscoc-directory .sacscoc-prose :where(p, ul, ol, dl, table),
.sacscoc-single.sacscoc-single .sacscoc-prose :where(p, ul, ol, dl, table) {
  margin: 0 0 1.1em;
}

.sacscoc-directory.sacscoc-directory .sacscoc-prose :where(ul, ol),
.sacscoc-single.sacscoc-single .sacscoc-prose :where(ul, ol) {
  padding-left: 1.4em;
}

.sacscoc-directory.sacscoc-directory .sacscoc-prose :where(li),
.sacscoc-single.sacscoc-single .sacscoc-prose :where(li) {
  margin: 0 0 0.4em;
  padding: 0;
}

/* Nested lists close up against their parent item rather than restating the
   1.1em gap that separates two blocks of prose. */
.sacscoc-directory.sacscoc-directory .sacscoc-prose :where(li) :where(ul, ol),
.sacscoc-single.sacscoc-single .sacscoc-prose :where(li) :where(ul, ol) {
  margin: 0.4em 0 0;
}

.sacscoc-prose :where(ul) { list-style: disc outside; }
.sacscoc-prose :where(ol) { list-style: decimal outside; }
.sacscoc-prose :where(ul ul) { list-style: circle outside; }
.sacscoc-prose :where(ul ul ul) { list-style: square outside; }

/* Narrow screens get the same indent, not a smaller one: a bullet needs the
   same room to sit clear of its text at any width, and halving it here is what
   makes a list look subtly broken on a phone and correct on a laptop. */

/* The Off-campus sites legend is tighter than ordinary prose — it is a key to
   two vocabularies, read at a glance, not something anyone reads through.
   Same (0,3,0) as the rules above and after them, so this is the pair that
   decides it; at its original `.sacscoc-sites-legend ul` (0,1,1) it lost to
   the element reset and never applied at all. */
.sacscoc-directory.sacscoc-directory .sacscoc-sites-legend :where(ul, ol),
.sacscoc-single.sacscoc-single .sacscoc-sites-legend :where(ul, ol) { margin: 0 0 8px; }
.sacscoc-directory.sacscoc-directory .sacscoc-sites-legend :where(li),
.sacscoc-single.sacscoc-single .sacscoc-sites-legend :where(li) { margin: 0 0 6px; }

/* ── Housekeeping ────────────────────────────────────────────── */

.sacscoc-directory img,
.sacscoc-single img { max-width: 100%; height: auto; }

.sacscoc-notice { margin: 20px 0; }

@media (prefers-reduced-motion: reduce) {
  .sacscoc-directory *,
  .sacscoc-single * { transition: none !important; animation: none !important; }
}

@media (max-width: 599px) {
  .sacscoc-directory .sacscoc-result { padding: 18px 0; gap: 8px 20px; }
  .sacscoc-list { margin: 0; }
}

/* ── Clearable filters and live state ─────────────────────────────
   The × sits inside the control's own box, so it never changes the field's
   height or the panel's rhythm when it appears and disappears. */

.sacscoc-field__control {
  position: relative;
  display: block;
}

.sacscoc-directory .sacscoc-field__control .sacscoc-control { padding-right: 44px; }
.sacscoc-directory .sacscoc-field__control .sacscoc-control--select { padding-right: 66px; }

.sacscoc-directory .sacscoc-field__clear {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sacscoc-line);
  color: var(--sacscoc-navy);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Clear of the select's own chevron. */
.sacscoc-directory .sacscoc-control--select ~ .sacscoc-field__clear { right: 42px; }

.sacscoc-directory .sacscoc-field__clear:hover,
.sacscoc-directory .sacscoc-field__clear:focus-visible {
  background: var(--sacscoc-navy);
  color: #fff;
}

/* Once the script is running, filtering is live and the button is noise — in
   the two-column panel. It is left in the DOM and reachable, so a mid-session
   script failure still leaves a form that submits.
   The one-column bar keeps its button: there it is part of the shape of the
   bar, and pressing it simply applies the filters at once.
   Scoped to the form itself (`is-live`/`--stacked` are added to the <form> by
   assets/js/directory.js and templates/search-form.php, never to an ancestor
   directory) because the form is not always nested inside one — a
   [sacscoc_institutions_search] form on its own has no .sacscoc-directory
   ancestor to key off at all. */
.sacscoc-search.is-live:not(.sacscoc-search--stacked) [data-sacscoc-submit] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sacscoc-directory .sacscoc-reset { font-size: var(--sacscoc-text-sm); }
.sacscoc-directory .sacscoc-reset.is-hidden { display: none; }

/* ── Loading ─────────────────────────────────────────────────────
   The results stay visible and legible while a new set is fetched; only their
   opacity drops, so the page never collapses to a blank column and jumps back. */

.sacscoc-results-region { transition: opacity 0.15s ease-in-out; }

.sacscoc-directory.is-loading .sacscoc-results-region {
  opacity: 0.45;
  pointer-events: none;
}

.sacscoc-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--sacscoc-line-strong);
  border-top-color: var(--sacscoc-navy);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.sacscoc-spinner.is-active {
  opacity: 1;
  animation: sacscoc-spin 0.7s linear infinite;
}

@keyframes sacscoc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sacscoc-spinner.is-active { animation: none; }
}

.sacscoc-directory .sacscoc-empty,
.sacscoc-single .sacscoc-empty {
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--sacscoc-gap) 0;
  color: var(--sacscoc-muted);
}

/* ── The one-column layout ───────────────────────────────────────
   Last in the file on purpose: these rules restate parts of the panel, the
   controls and the button at the same specificity, so source order is what
   decides them. Moving this block higher would silently give the two-column
   styles back.

   Two independent things share this name. `.sacscoc-layout--stacked` is the
   directory's own grid — chosen in Institutions → Settings, or per page with
   `[sacscoc_institutions layout="one-column"]` — putting its inline search
   above the results instead of beside them. `.sacscoc-search--stacked` is the
   search FORM's own shape — a single bar instead of a panel — and is scoped to
   the form itself rather than to any ancestor, which is what lets the same bar
   apply to a form that is not part of a directory at all: the Institutions
   Search block/[sacscoc_institutions_search] offers it as its own Layout
   control (Vertical/Horizontal), independent of where the form ends up living.
   The directory's inline form still gets `--stacked` exactly when the overall
   page layout is one-column, same as before — the two just no longer require
   each other. */

.sacscoc-layout--stacked { grid-template-columns: minmax(0, 1fr); }
.sacscoc-layout--stacked .sacscoc-layout__aside { grid-column: 1; grid-row: 1; max-width: none; }
.sacscoc-layout--stacked .sacscoc-layout__main { grid-column: 1; grid-row: 2; margin-top: var(--sacscoc-gap); }

/* The bar carries its own edges, so the tinted panel goes. The form itself is
   the row: the strip of fields, then the button welded to the end of it. */
.sacscoc-search--stacked {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Visually hidden rather than removed: on the directory's inline bar the
   page's own title already names the search, matching the site's own Find an
   Institution page, where the bar sits under the page heading with no label of
   its own. A standalone search block in the same layout keeps that same look
   on purpose — a bar reads as a search bar without needing a caption — and the
   heading stays in the markup for anyone who is not looking at the page. */
.sacscoc-search--stacked .sacscoc-block__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One strip: fields divided by hairlines rather than separated by gaps. */
.sacscoc-search--stacked .sacscoc-search__fields {
  flex: 1 1 480px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--sacscoc-line-strong);
  background: #fff;
}

.sacscoc-search--stacked .sacscoc-field {
  flex: 1 1 190px;
  min-width: 0;
  border-left: 1px solid var(--sacscoc-line);
}

.sacscoc-search--stacked .sacscoc-field:first-child { border-left: 0; }

/* Labels are read, not seen: the fields say what they are through their
   placeholder and their "Any …" first option, exactly as on the reference. */
.sacscoc-search--stacked .sacscoc-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sacscoc-search--stacked .sacscoc-control {
  height: 54px;
  border: 0;
  border-radius: 0;
  font-size: var(--sacscoc-text);
}

.sacscoc-search--stacked .sacscoc-control:focus {
  box-shadow: inset 0 0 0 2px var(--sacscoc-blue);
}

.sacscoc-search--stacked .sacscoc-search__actions {
  flex: 0 0 auto;
  align-items: center;
  gap: 0 18px;
  margin: 0;
}

.sacscoc-search--stacked .sacscoc-btn {
  align-self: stretch;
  min-height: 54px;
  border-radius: 0;
  font-size: var(--sacscoc-text-sm);
}

/* ── Nothing sits to the right of the Search button ──────────────
   The bar's whole shape is one strip of fields with the button welded to the
   end of it, so the button has to be flush with the bar's right edge. Two
   things were quietly breaking that, and both of them read as the bar's
   contents being pushed left inside their own box:

     · the spinner is `opacity: 0` when idle, not `display: none`, so it still
       occupied 16px plus the actions row's 18px gap — 34px of dead space past
       the button, on every page load, measured at a 1200px bar;
     · the Reset link comes after the button in source order, so the moment a
       filter became active it appeared to the button's right and shoved the
       button further left again.

   The spinner comes out of flow entirely and sits over the button, which
   opens a gap for it only while it is actually spinning; the Reset link is
   reordered to the button's left. Both are scoped to the bar — the vertical
   panel is a stack of rows with no right edge to be flush with, and it keeps
   the plain row it always had. */

.sacscoc-search--stacked .sacscoc-reset { order: -1; margin-left: 0; }

.sacscoc-search--stacked .sacscoc-search__actions { position: relative; }

.sacscoc-search--stacked .sacscoc-spinner {
  position: absolute;
  top: 50%;
  right: 18px;
  margin: 0;
  transform: translateY(-50%);

  /* It sits on the navy button now, not on the page. */
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
}

/* The shared keyframe animates `transform` outright, which would throw away
   the centring above; this one carries it through every frame. */
.sacscoc-search--stacked .sacscoc-spinner.is-active {
  animation: sacscoc-spin-centred 0.7s linear infinite;
}

@keyframes sacscoc-spin-centred {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Room for it, only while it is there. A browser without `:has()` skips just
   this — the spinner overlaps the end of the label for the fraction of a
   second a filter is in flight, and the resting bar, which is what was
   actually wrong, is correct everywhere. */
.sacscoc-search--stacked .sacscoc-btn { transition: padding-right 0.15s ease-in-out; }
.sacscoc-search--stacked:has(.sacscoc-spinner.is-active) .sacscoc-btn { padding-right: 52px; }

@media (prefers-reduced-motion: reduce) {
  .sacscoc-search--stacked .sacscoc-spinner.is-active { animation: none; }
}

@media (max-width: 719px) {
  /* Too narrow for a strip: back to stacked fields, each with its label. */
  .sacscoc-search--stacked .sacscoc-search__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    border: 0;
    background: none;
  }

  .sacscoc-search--stacked .sacscoc-field { border-left: 0; }

  .sacscoc-search--stacked .sacscoc-field__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 7px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  .sacscoc-search--stacked .sacscoc-control {
    border: 1px solid var(--sacscoc-line-strong);
    border-radius: 999px;
  }

  .sacscoc-search--stacked.sacscoc-search { display: block; }
  .sacscoc-search--stacked .sacscoc-search__actions { margin-top: 22px; }
  .sacscoc-search--stacked .sacscoc-btn { border-radius: 999px; }
}

/* ── Typeahead / on-search dropdown ─────────────────────────────────
   [sacscoc_institutions results="on-search"]: built for a navbar or a hero,
   where a directory's own two-column grid and results section have nowhere
   to go. The form stays exactly where the page put it; matches float below
   it as a dropdown, and nothing else on the page moves when it opens or
   closes — see the "on-search" branch of templates/directory.php for the
   markup this styles, and templates/results.php for what actually prints
   inside it.

   ── Visibility, and why it is two separate signals ──
   `.is-empty` on the panel itself is "nothing has been asked" — set in PHP
   for the very first paint (before any script runs) and kept in step by
   assets/js/directory.js on every keystroke after. `.is-closed` on the
   wrapper is "the visitor dismissed it" — Escape, or a click outside — and is
   JavaScript-only, since there is nothing to dismiss before a script exists
   to dismiss it. Either one hides the same panel; neither depends on the
   other, which is what lets Escape close a dropdown that still has real
   matches in it, and typing again reopen it without re-fetching them. */

.sacscoc-directory.sacscoc-directory--dropdown {
  /* The 32–72px "air above and below" every other directory carries is
     right for a section of the page; this is not one. */
  margin: 0;
}

.sacscoc-typeahead { position: relative; }

.sacscoc-typeahead .sacscoc-results-region {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;

  background: #fff;
  border: 1px solid var(--sacscoc-line-strong);
  border-radius: var(--sacscoc-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);

  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 6px;
}

.sacscoc-typeahead .sacscoc-results-region.is-empty,
.sacscoc-typeahead.is-closed .sacscoc-results-region {
  display: none;
}

/* The paired-elsewhere fallback ([sacscoc_institutions show_search="no"
   results="on-search"], matched at runtime to a separate
   [sacscoc_institutions_search] placed elsewhere on the page): there is no
   form here to float under, so this stays an ordinary card in the page's own
   flow instead of an overlay — same compact rows, same hide-when-empty. */
.sacscoc-typeahead__panel--inline {
  margin-top: var(--sacscoc-gap);
  background: #fff;
  border: 1px solid var(--sacscoc-line-strong);
  border-radius: var(--sacscoc-radius);
  padding: 6px;
}

.sacscoc-typeahead__panel--inline.is-empty { display: none; }

/* ── The compact rows themselves ─────────────────────────────────── */

.sacscoc-typeahead__list { list-style: none; margin: 0; padding: 0; }

.sacscoc-typeahead__item + .sacscoc-typeahead__item { border-top: 1px solid var(--sacscoc-line); }

/* The row is a flex line: name+location on the left, a chevron on the right
   naming the row's own action ("this goes somewhere") the way the plain text
   next to it cannot. `justify-content: space-between` rather than `gap`
   alone, so a short name does not leave the chevron stranded in the middle
   of the row. */
.sacscoc-typeahead__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: calc(var(--sacscoc-radius) - 2px);
  color: inherit;
  text-decoration: none;
}

.sacscoc-typeahead__link:hover,
.sacscoc-typeahead__link:focus-visible {
  background: var(--sacscoc-surface);
}

.sacscoc-typeahead__link:focus-visible {
  outline: 2px solid var(--sacscoc-blue);
  outline-offset: -2px;
}

.sacscoc-typeahead__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sacscoc-typeahead__name {
  font-family: var(--sacscoc-font-heading), sans-serif;
  font-weight: var(--sacscoc-font-heading-weight);
  color: var(--sacscoc-navy);
  font-size: var(--sacscoc-text-sm);
}

.sacscoc-typeahead__meta { font-size: var(--sacscoc-label); color: var(--sacscoc-muted); }

.sacscoc-typeahead__chevron {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  color: var(--sacscoc-line-strong);
  transition: transform 0.12s ease-in-out, color 0.12s ease-in-out;
}

/* The same "nudge toward where it points" hover the plugin's other
   go-somewhere links already use (.sacscoc-plus-link) — one language for
   "this is going to take you somewhere," not two. */
.sacscoc-typeahead__link:hover .sacscoc-typeahead__chevron,
.sacscoc-typeahead__link:focus-visible .sacscoc-typeahead__chevron {
  transform: translateX(2px);
  color: var(--sacscoc-blue);
}

.sacscoc-typeahead__empty,
.sacscoc-typeahead__more {
  margin: 0;
  padding: 12px;
  font-size: var(--sacscoc-text-sm);
  color: var(--sacscoc-muted);
}

.sacscoc-typeahead__more {
  border-top: 1px solid var(--sacscoc-line);
  font-style: italic;
}


/* Standalone search visual API. Only an explicit visual option enables these
   component rules; directory results and existing embeds keep their styles. */
.sacscoc-institution-search {
  --sacscoc-search-field-height: 2.875rem;
  --sacscoc-search-field-gap: 1.125rem;
  --sacscoc-search-label-gap: .4375rem;
  --sacscoc-search-label-size: .8125rem;
  --sacscoc-search-field-size: .875rem;
  --sacscoc-search-padding: clamp(1.25rem, 2.5vw, 1.75rem);
  --sacscoc-search-margin: clamp(2rem, 5vw, 4.5rem);
  --sacscoc-search-actions-gap: 1.5rem;
  --sacscoc-search-max-width: 75rem;
  --sacscoc-search-text: var(--sacscoc-ink);
  --sacscoc-search-label: var(--sacscoc-navy);
  --sacscoc-search-surface: var(--sacscoc-surface);
  --sacscoc-search-field-bg: #fff;
  --sacscoc-search-field-text: #323b43;
  --sacscoc-search-placeholder: #586570;
  --sacscoc-search-border: #778792;
  --sacscoc-search-focus: var(--sacscoc-navy);
  --sacscoc-search-button-bg: var(--sacscoc-navy);
  --sacscoc-search-button-text: #fff;
  min-width: 0;
  max-width: 100%;
}

.sacscoc-institution-search.sacscoc-contain-width {
  max-width: min(1200px, 100%);
}

.sacscoc-institution-search--width-auto {
  width: fit-content;
  max-width: 100%;
}

.sacscoc-institution-search--width-contained {
  width: 100%;
  max-width: min(var(--sacscoc-search-max-width), 100%);
  margin-inline: auto;
}

.sacscoc-institution-search--width-full {
  width: 100%;
  max-width: 100%;
}

.sacscoc-institution-search--theme-light {
  --sacscoc-search-text: var(--sacscoc-ink);
  --sacscoc-search-label: var(--sacscoc-navy);
}

.sacscoc-institution-search--theme-dark {
  --sacscoc-search-text: #fff;
  --sacscoc-search-label: #fff;
  --sacscoc-search-surface: transparent;
  --sacscoc-search-border: #a5b6c2;
  --sacscoc-search-focus: #fff;
  --sacscoc-search-button-bg: var(--sacscoc-gold);
  --sacscoc-search-button-text: var(--sacscoc-navy);
}

.sacscoc-institution-search--size-compact {
  --sacscoc-search-field-height: 2.5rem;
  --sacscoc-search-field-gap: .625rem;
  --sacscoc-search-label-gap: .25rem;
  --sacscoc-search-label-size: .75rem;
  --sacscoc-search-field-size: .875rem;
  --sacscoc-search-padding: .875rem;
  --sacscoc-search-margin: .5rem;
  --sacscoc-search-actions-gap: .75rem;
}

.sacscoc-institution-search--size-large {
  --sacscoc-search-field-height: 3.5rem;
  --sacscoc-search-field-gap: 1.25rem;
  --sacscoc-search-label-gap: .5rem;
  --sacscoc-search-label-size: .875rem;
  --sacscoc-search-field-size: 1.0625rem;
  --sacscoc-search-padding: clamp(1.5rem, 3vw, 2rem);
  --sacscoc-search-actions-gap: 1.5rem;
}

.sacscoc-institution-search--visual.sacscoc-institution-search {
  margin-block: var(--sacscoc-search-margin);
  color: var(--sacscoc-search-text);
}

.sacscoc-institution-search--visual .sacscoc-search {
  display: block;
  min-width: 0;
  margin: 0;
  padding: var(--sacscoc-search-padding);
  background: var(--sacscoc-search-surface);
  border-radius: var(--sacscoc-radius);
}

.sacscoc-institution-search--visual .sacscoc-search .sacscoc-block__heading {
  color: var(--sacscoc-search-label);
  border-color: var(--sacscoc-search-border);
  margin-bottom: var(--sacscoc-search-field-gap);
  padding-bottom: var(--sacscoc-search-field-gap);
}

.sacscoc-institution-search--visual .sacscoc-search__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sacscoc-search-field-gap);
  min-width: 0;
  border: 0;
  background: transparent;
}

.sacscoc-institution-search--visual .sacscoc-field {
  min-width: 0;
  border: 0;
}

.sacscoc-institution-search--visual .sacscoc-field__label {
  color: var(--sacscoc-search-label);
  font-size: var(--sacscoc-search-label-size);
  margin-bottom: var(--sacscoc-search-label-gap);
  letter-spacing: .035em;
}

.sacscoc-institution-search--visual .sacscoc-search .sacscoc-control {
  min-width: 0;
  max-width: 100%;
  height: var(--sacscoc-search-field-height);
  min-height: var(--sacscoc-search-field-height);
  padding-block: 0;
  border: 1px solid var(--sacscoc-search-border);
  border-radius: 999px;
  background-color: var(--sacscoc-search-field-bg);
  color: var(--sacscoc-search-field-text);
  font-size: var(--sacscoc-search-field-size);
  line-height: normal;
}

.sacscoc-institution-search--visual .sacscoc-search .sacscoc-control::placeholder {
  color: var(--sacscoc-search-placeholder);
  opacity: 1;
}

.sacscoc-institution-search--visual .sacscoc-search .sacscoc-search__actions {
  display: flex;
  gap: .75rem;
  margin-top: var(--sacscoc-search-actions-gap);
  align-items: center;
}

.sacscoc-institution-search--visual .sacscoc-search .sacscoc-btn {
  min-height: var(--sacscoc-search-field-height);
  padding: .625rem 1.5rem;
  border-radius: 999px;
  background: var(--sacscoc-search-button-bg);
  border-color: var(--sacscoc-search-button-bg);
  color: var(--sacscoc-search-button-text);
  font-size: var(--sacscoc-search-label-size);
}

.sacscoc-institution-search--visual .sacscoc-search .sacscoc-btn:hover {
  background: var(--sacscoc-search-button-text);
  color: var(--sacscoc-search-button-bg);
}

.sacscoc-institution-search--visual .sacscoc-search :is(.sacscoc-control, button, a):focus-visible {
  outline: 3px solid var(--sacscoc-search-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--sacscoc-search-field-bg);
}

.sacscoc-institution-search--theme-dark .sacscoc-search .sacscoc-reset {
  color: var(--sacscoc-search-label);
  text-decoration: underline;
}

/* Hidden labels remain associated with uniquely identified fields. The yes
   rule also restores labels hidden by the legacy horizontal treatment. */
.sacscoc-institution-search--labels-yes .sacscoc-search .sacscoc-field__label {
  position: static;
  margin: 0 0 var(--sacscoc-search-label-gap);
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

.sacscoc-institution-search--labels-no .sacscoc-search .sacscoc-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 720px) {
  .sacscoc-institution-search--visual.sacscoc-institution-search--layout-horizontal .sacscoc-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sacscoc-search-field-gap);
  }

  .sacscoc-institution-search--visual.sacscoc-institution-search--layout-horizontal .sacscoc-search__fields {
    flex: 1 1 38rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    align-items: end;
  }

  .sacscoc-institution-search--visual.sacscoc-institution-search--layout-horizontal .sacscoc-search__actions {
    flex: 0 1 auto;
    margin: 0;
  }
}

@media (max-width: 719px) {
  .sacscoc-institution-search--visual .sacscoc-search .sacscoc-control {
    font-size: max(1rem, var(--sacscoc-search-field-size));
  }

  .sacscoc-institution-search--visual .sacscoc-search .sacscoc-btn {
    width: 100%;
  }
}