/* =================================================================
   sca-cases-list-remix.css
   ================================================================
   Scoped to .cx-root so it never leaks into the rest of your
   Squarespace page. Design tokens live on :root (safe namespacing
   via --cx- prefix on the custom vars).
   Replaces sca-cases-list.css + cases-filter.css for the remixed page.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=DM+Serif+Display&display=swap');

/* ===== Design tokens (safe global custom props with cx- prefix) ===== */
.cx-root {
  --cx-ink:        #253551;
  --cx-ink-2:      #3a4968;
  --cx-ink-inv:    #ffffff;
  --cx-paper:      #f6f8fc;
  --cx-paper-2:    #eef2f8;
  --cx-paper-3:    #d6dde9;
  --cx-rule:       #d6dde9;
  --cx-rule-2:     #bfc8d9;
  --cx-muted:      #6b7890;

  --cx-peri:       #7DA8F0;
  --cx-peri-ink:   #c8d4e4;
  --cx-peri-mute:  #8e9ab4;
  --cx-peri-soft:  #e9f0fb;
  /* Row hover — "powder" blue. Deliberately desaturated, distinct from
     paper (too blue-grey) and peri-soft (too close to filter chips). */
  --cx-row-hover:  #e5ecf4;

  --cx-r-sm: 6px;
  --cx-r:    10px;
  --cx-r-lg: 16px;
  --cx-r-xl: 22px;
  --cx-shadow-1: 0 1px 0 rgba(20,20,30,0.04), 0 1px 2px rgba(20,20,30,0.04);
  --cx-shadow-2: 0 1px 0 rgba(20,20,30,0.05), 0 8px 24px -10px rgba(20,20,30,0.08);
  --cx-ease: cubic-bezier(.2,.7,.2,1);

  /* Map to the generic vars the design code references */
  --ink:        var(--cx-ink);
  --ink-2:      var(--cx-ink-2);
  --ink-inv:    var(--cx-ink-inv);
  --paper:      var(--cx-paper);
  --paper-2:    var(--cx-paper-2);
  --paper-3:    var(--cx-paper-3);
  --rule:       var(--cx-rule);
  --rule-2:     var(--cx-rule-2);
  --muted:      var(--cx-muted);
  --peri:       var(--cx-peri);
  --peri-soft:  var(--cx-peri-soft);
  --peri-mute:  var(--cx-peri-mute);
}

/* ===== Root wrapper (full-bleed paper background, matching portal page) ===== */
.cx-root {
  /* Break out of Squarespace's content container so paper bg reaches the
     viewport edges — same pattern as .sca-cc in portal-design.css */
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--cx-paper);

  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0 80px;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cx-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

/* Inner shell: max-width container for actual content. All direct children
   of .cx-root live inside this so the background spans the viewport but the
   content itself stays aligned. */
.cx-root .cx-shell {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cx-root * { box-sizing: border-box; }
.cx-root a { color: inherit; text-decoration: none; }
.cx-root button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; }
.cx-root h1, .cx-root h2, .cx-root h3, .cx-root h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: "Poppins", sans-serif;
}
.cx-root h1 { letter-spacing: -0.025em; }

/* Inline SVG wrapper so width/height/currentColor all flow nicely */
.cx-root .cx-ico { display: inline-grid; place-items: center; vertical-align: middle; flex-shrink: 0; }
.cx-root .cx-ico svg { width: 100%; height: 100%; display: block; }

/* =======================================================
   Hero
   ======================================================= */
.cx-root .cx-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--cx-ink); color: #fff;
  border-radius: 18px; overflow: hidden;
  padding: 22px 32px;
  position: relative;
}
.cx-root .cx-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 200px at 100% 0%, rgba(125,168,240,0.28), transparent 60%),
    radial-gradient(500px 160px at 0% 100%, rgba(214,221,233,0.14), transparent 55%);
}
.cx-root .cx-hero-left { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cx-root .cx-eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cx-peri); font-weight: 600;
}
.cx-root .cx-hero h1 {
  font-family: "Poppins", sans-serif; font-size: clamp(28px, 3.5vw, 36px); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin: 0;
}
/* Dynamic mode word in the hero title — styled like a serif italic accent.
   The word ("written" / "videos" / "AI" etc.) reflects the active filter
   mode so the hero stays in sync with what's being browsed.
   Colour stays peri for all modes for now — video needs its own palette
   treatment (whole-page shift) when that's scoped, and AI gets plum when
   built. Single-colour for now avoids committing to colour tokens that
   might change. */
.cx-root .cx-hero-mode {
  font-family: "DM Serif Display", serif; font-weight: 400; font-style: italic;
  color: var(--cx-peri);
  letter-spacing: -0.01em; font-size: 1.05em;
}
.cx-root .cx-hero-sub { font-size: 15px; color: var(--cx-peri-mute); margin: 0; line-height: 1.45; }
.cx-root .cx-hero-sub b { color: var(--cx-paper-3); font-weight: 600; font-family: "DM Serif Display", serif; font-size: 18px; letter-spacing: 0; }
.cx-root .cx-hero-right { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }

.cx-root .cx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #fff;
  white-space: nowrap; transition: background .18s, color .18s, border-color .18s, transform .15s;
  cursor: pointer; text-decoration: none;
}
.cx-root .cx-btn-primary { background: #fff; color: var(--cx-ink); border-color: #fff; }
.cx-root .cx-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.22); }
.cx-root .cx-btn-ghost:hover { background: rgba(125,168,240,0.14); border-color: var(--cx-peri); color: var(--cx-peri); }

/* =======================================================
   Control bar
   ======================================================= */
/* =======================================================
   Control bar
   Flex-wrap layout (not grid) so individual items flow to
   the next line when there isn't enough horizontal room —
   instead of clipping off the right edge.
   Not sticky: design feels cleaner without a floating bar
   pinned over the card list.
   ======================================================= */
.cx-root .cx-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--cx-rule);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--cx-shadow-1);
}

/* Search grows to fill remaining row space, but can shrink below its
   content-size minimum so it never forces overflow. */
.cx-root .cx-controls .cx-search {
  flex: 1 1 280px;
  min-width: 0;
}

/* Keep the three trailing control groups at their natural width by default. */
.cx-root .cx-filterbtn-wrap,
.cx-root .cx-controls .cx-seg {
  flex: 0 0 auto;
}

/* At very narrow widths, stretch each control group to its own full-width
   row so nothing gets squeezed. */
@media (max-width: 720px) {
  .cx-root .cx-controls .cx-search,
  .cx-root .cx-filterbtn-wrap,
  .cx-root .cx-controls .cx-seg {
    flex: 1 1 100%;
  }
  .cx-root .cx-controls .cx-seg { justify-content: stretch; }
  .cx-root .cx-controls .cx-seg button { flex: 1; justify-content: center; }
  .cx-root .cx-filterbtn { width: 100%; justify-content: center; }
}

.cx-root .cx-search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--cx-paper); border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.cx-root .cx-search:focus-within { border-color: var(--cx-ink); background: #fff; }
.cx-root .cx-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 16px; color: var(--cx-ink); min-width: 0;
}
.cx-root .cx-search input::placeholder { color: var(--cx-muted); }
.cx-root .cx-search-clear {
  background: var(--cx-rule); border: 0; width: 20px; height: 20px;
  border-radius: 50%; color: var(--cx-ink); cursor: pointer; font-size: 16px;
  line-height: 1; display: grid; place-items: center;
}

/* Filter button */
.cx-root .cx-filterbtn-wrap { position: relative; }
.cx-root .cx-filterbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cx-paper); border: 1px solid transparent;
  padding: 11px 16px; border-radius: 10px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--cx-ink);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.cx-root .cx-filterbtn:hover { background: #fff; border-color: var(--cx-rule); }
.cx-root .cx-filterbtn.on { background: var(--cx-ink); color: #fff; border-color: var(--cx-ink); }
.cx-root .cx-filterbtn.on .cx-ico { color: var(--cx-peri); }
.cx-root .cx-filterbtn-count {
  background: var(--cx-peri); color: var(--cx-ink);
  font-family: "DM Serif Display", serif; font-size: 13px; font-weight: 400;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center; line-height: 1;
}

@keyframes cx-pop { from { opacity: 0; transform: translateY(-4px); } }

/* =======================================================
   Filter popover — styles apply at body level, since the
   popover is appended to document.body so it survives re-renders.
   Uses literal hex fallbacks in case CSS vars aren't in scope.
   ======================================================= */
.cx-filterpop {
  width: 320px; background: #fff; border-radius: 14px;
  border: 1px solid var(--cx-rule, #d6dde9);
  box-shadow: 0 18px 48px -12px rgba(20,28,46,0.22);
  overflow: hidden;
  animation: cx-pop .18s cubic-bezier(.2,.7,.2,1);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--cx-ink, #253551);
  font-size: 15px;
  line-height: 1.5;
}
.cx-filterpop * { box-sizing: border-box; }
.cx-filterpop-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--cx-rule, #d6dde9);
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cx-muted, #6b7890); font-weight: 600;
}
.cx-filterpop-reset {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--cx-peri, #7DA8F0);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  padding: 4px 0; font-family: "JetBrains Mono", monospace;
}
.cx-filterpop-reset:hover { color: var(--cx-ink, #253551); }
.cx-filterpop-rows { padding: 4px 0; }
.cx-filterrow {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 18px; cursor: pointer;
  transition: background .12s;
  margin: 0;
}
.cx-filterrow:hover { background: var(--cx-paper, #f6f8fc); }
.cx-filterrow-label {
  font-size: 15px; font-weight: 500; color: var(--cx-ink, #253551); line-height: 1.2;
}
.cx-filterrow-hint {
  font-size: 13px; color: var(--cx-muted, #6b7890); margin-top: 2px; line-height: 1.35;
}
.cx-switch {
  position: relative; width: 36px; height: 20px; border-radius: 999px;
  background: var(--cx-paper-3, #d6dde9); border: 0; cursor: pointer; padding: 0;
  transition: background .18s; flex-shrink: 0;
}
.cx-switch > span {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  display: block;
}
.cx-switch.on { background: var(--cx-ink, #253551); }
.cx-switch.on > span { transform: translateX(16px); background: var(--cx-peri, #7DA8F0); }

/* Segmented controls */
.cx-root .cx-seg {
  display: flex; gap: 2px; background: var(--cx-paper); border-radius: 10px; padding: 3px;
}
.cx-root .cx-seg button {
  background: transparent; border: 0; padding: 9px 16px; border-radius: 8px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--cx-muted);
  cursor: pointer; transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.cx-root .cx-seg button:hover { color: var(--cx-ink); }
.cx-root .cx-seg button.on { background: var(--cx-ink); color: #fff; }
.cx-root .cx-seg button.on .cx-ico { color: var(--cx-peri); }

.cx-root .cx-seg-view button { padding: 7px 10px; }
.cx-root .cx-seg-view .cx-seg-label { font-size: 14px; }
@media (max-width: 1080px) { .cx-root .cx-seg-view .cx-seg-label { display: none; } }

/* =======================================================
   Active filters strip
   ======================================================= */
.cx-root .cx-activefilters {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 2px 4px; min-height: 28px;
}
.cx-root .cx-activefilters-left { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cx-root .cx-activefilters-none {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  color: var(--cx-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.cx-root .cx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cx-peri-soft); color: var(--cx-ink);
  border: 1px solid rgba(125,168,240,0.35);
  border-radius: 999px; padding: 5px 6px 5px 12px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cx-root .cx-chip:hover { background: #fff; border-color: var(--cx-peri); }
.cx-root .cx-chip span {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cx-peri); color: var(--cx-ink);
  font-size: 13px; line-height: 1;
}
.cx-root .cx-activefilters-count {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  color: var(--cx-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.cx-root .cx-activefilters-count b {
  color: var(--cx-ink); font-family: "DM Serif Display", serif;
  font-size: 14px; font-weight: 400; letter-spacing: 0;
}

/* =======================================================
   Loading / empty
   ======================================================= */
.cx-root .cx-loading {
  padding: 32px 18px; text-align: center; color: var(--cx-muted);
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cx-root .cx-empty {
  padding: 40px 24px; text-align: center; background: #fff;
  border: 1px dashed var(--cx-rule-2); border-radius: 14px; color: var(--cx-muted);
  font-size: 15px;
}
.cx-root .cx-empty strong { display: block; color: var(--cx-ink); font-size: 17px; margin-bottom: 6px; }

/* =======================================================
   List view
   ======================================================= */
.cx-root .cx-list { display: flex; flex-direction: column; gap: 6px; }
.cx-root .cx-row {
  background: #fff; border: 1px solid var(--cx-rule); border-radius: 12px;
  overflow: hidden;
}
.cx-root .cx-row.open { border-color: var(--cx-ink); }
.cx-root .cx-row-head {
  display: grid; grid-template-columns: 24px 1fr 260px;
  align-items: center; gap: 14px; padding: 18px 20px;
  background: transparent; border: 0; font: inherit; color: inherit;
  width: 100%; cursor: pointer; text-align: left;
}
.cx-root .cx-row-head:hover { background: var(--cx-row-hover); }
.cx-root .cx-row.open .cx-row-head { background: var(--cx-ink); color: #fff; }
.cx-root .cx-row-chevron {
  font-size: 20px; color: var(--cx-muted); font-weight: 300;
  display: grid; place-items: center;
}
.cx-root .cx-row.open .cx-row-chevron { color: #fff; }
.cx-root .cx-row-title { font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.cx-root .cx-row-progress { display: flex; align-items: center; gap: 12px; }
.cx-root .cx-row-track {
  flex: 1; height: 5px; border-radius: 999px;
  background: #d6dde9; overflow: hidden; min-width: 120px;
}
.cx-root .cx-row.open .cx-row-track { background: rgba(255,255,255,0.15); }
.cx-root .cx-row-track > span {
  display: block; height: 100%;
  background: var(--cx-ink);
  border-radius: 999px;
  transition: background .25s ease;
}
.cx-root .cx-row.open .cx-row-track > span { background: var(--cx-paper-3); }

/* Progress-bar colour banding (Option B from the mockup).
   The fade goes peri → navy as completion rises, so at a glance you can
   tell a barely-started topic (light peri) from a nearly-done one (navy)
   without reading the count. The open-row override above wins (white on
   navy) when the row is expanded — these rules apply to collapsed rows. */
/* Progress bar — continuous gradient across the track.
   Key idea: the gradient (pale → peri → navy) is painted on the FILL span
   at full track width, then the width of the fill clips how much is shown.
   So at 10% you see only the first pale slice; at 50% you see up through
   peri; at 100% you see the whole journey ending in deep navy.
   We achieve "full track width gradient, only show 0→pct%" with
   background-size: 100% of the TRACK (set via a CSS custom property set
   on the track) + background-attachment semantics. Simpler alternative
   used here: gradient is applied to the fill with a fixed background-size
   pinned to the parent track's full width via `background-size: calc(...)`
   driven by the fill's own width being narrower. Because the fill's
   `width: N%` is of the track, setting `background-size: (100/N)*100%`
   of the fill gives us a gradient scaled so that the fill shows only its
   left-hand slice of the full spectrum. This is set as an inline style
   from JS, so the CSS here just handles the shared bits. */
.cx-root .cx-row:not(.open) .cx-row-track > span {
  background-image: linear-gradient(90deg,
    #7DA8F0 0%,
    #5d77a8 45%,
    #3a4968 75%,
    #253551 100%
  );
  background-repeat: no-repeat;
  background-position: left center;
}
.cx-root .cx-row-count {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--cx-muted); letter-spacing: 0.06em; white-space: nowrap;
}
.cx-root .cx-row.open .cx-row-count { color: rgba(255,255,255,0.8); }
.cx-root .cx-row-count b { color: var(--cx-ink); font-weight: 600; }
.cx-root .cx-row.open .cx-row-count b { color: #fff; }
.cx-root .cx-row-cases {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--cx-rule); background: var(--cx-paper);
}

/* =======================================================
   Case row (shared)
   ======================================================= */
.cx-root .cx-case {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--cx-rule);
  background: transparent; transition: background .15s;
  text-decoration: none; color: inherit;
}
.cx-root .cx-case:hover { background: var(--cx-row-hover); }
.cx-root .cx-case-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--cx-rule-2); background: #fff;
  display: grid; place-items: center; color: #fff;
  transition: background .15s, border-color .15s;
}
.cx-root .cx-case-check:hover { border-color: var(--cx-ink); }
/* Completed state — green, matching the old site's fa-square-check in green.
   The old --sca-green-light was #9ad6a9 / --sca-green-dark #2f7d3b; I'm using
   the same approachable medium-green (#4fbf67 → #1f7a3a on hover) so the
   cases list on this page feels identical to the rest of the site. */
.cx-root .cx-case-check.done {
  background: #4fbf67;
  border-color: #4fbf67;
}
.cx-root .cx-case-check.done:hover {
  background: #1f7a3a;
  border-color: #1f7a3a;
}
.cx-drawer-cases .cx-case-check.done {
  background: #4fbf67;
  border-color: #4fbf67;
}
.cx-drawer-cases .cx-case-check.done:hover {
  background: #1f7a3a;
  border-color: #1f7a3a;
}
.cx-root .cx-case-check svg { width: 12px; height: 12px; }
.cx-root .cx-case-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Case titles can wrap to two lines before truncating. Better than mid-word
   cutoff ("Hypertension in Pregnancy: Trave…") which is jarring to read. */
.cx-root .cx-case-title {
  font-size: 15px; color: var(--cx-ink); font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.cx-root .cx-case.done .cx-case-title { color: var(--cx-ink-2); }
.cx-root .cx-case-diag {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--cx-muted); letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-root .cx-case-meta { display: flex; align-items: center; gap: 14px; }

/* Video link — Font Awesome icon. Default colour matches the stars
   (rule-2 muted grey); hover darkens to ink navy. When the host site has
   Font Awesome Pro loaded, the font-weight shift gives a true light→solid
   swap on hover; on FA Free this is a colour-only transition because the
   regular/light weights aren't shipped. Either way looks clean. */
.cx-root .cx-case-video-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cx-rule-2);
  transition: color .15s;
  padding: 2px 4px;
}
.cx-root .cx-case-video-link:hover { color: var(--cx-ink); }
.cx-root .cx-case-video-ic {
  font-size: 18px;
  line-height: 1;
  transition: font-weight .15s;
}
/* With FA Pro loaded, fa-light on the <i> gives weight 300. On hover we
   bump to 900 which is fa-solid's weight, so the icon visually switches
   from outlined to filled. */
.cx-root .cx-case-video-link:hover .cx-case-video-ic {
  font-weight: 900;
}

/* Difficulty stars — Font Awesome, matches old site exactly */
.cx-root .cx-case-diff {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.cx-root .cx-case-star {
  font-size: 12px;
  color: var(--cx-rule-2);
  line-height: 1;
}
.cx-root .cx-case-star.on { color: var(--cx-peri); }

/* When a row is hovered, brighten icons — matches old hover behaviour */
.cx-root .cx-case:hover .cx-case-video-link,
.cx-root .cx-case:hover .cx-case-star { color: var(--cx-ink); }
.cx-root .cx-case:hover .cx-case-star.on { color: var(--cx-peri); }

/* =======================================================
   Grid view
   ======================================================= */
.cx-root .cx-grid {
  display: grid; gap: 14px;
  /* Clinical topics (default) — 4 cols at full width. Names like
     "Dermatology" / "Neurology" fit comfortably at ~280px per card. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Experience groups — names like "New presentation of undifferentiated
   disease" need more width. Drop to 3 cols so the title doesn't wrap
   into a 4-line block. */
.cx-root .cx-grid[data-kind="experience"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Responsive: collapse to fewer columns on narrower viewports. Experience
   groups collapse earlier because their cards start wider. */
@media (max-width: 1180px) {
  .cx-root .cx-grid                         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-root .cx-grid[data-kind="experience"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .cx-root .cx-grid,
  .cx-root .cx-grid[data-kind="experience"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .cx-root .cx-grid,
  .cx-root .cx-grid[data-kind="experience"] { grid-template-columns: 1fr; }
}
.cx-root .cx-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px; border-radius: 14px;
  background: #fff; border: 1px solid var(--cx-rule);
  cursor: pointer; text-align: left;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  font: inherit; color: inherit;
}
.cx-root .cx-card:hover {
  border-color: var(--cx-ink); transform: translateY(-2px);
  box-shadow: 0 10px 28px -16px rgba(37,53,81,0.28);
}
.cx-root .cx-card-top { display: flex; align-items: center; justify-content: space-between; }
.cx-root .cx-card-ring { position: relative; display: grid; place-items: center; }
.cx-root .cx-card-ring span {
  position: absolute; font-family: "DM Serif Display", serif; font-size: 15px;
  font-weight: 400; letter-spacing: -0.01em; color: var(--cx-peri);
}
.cx-root .cx-card-status {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--cx-peri-soft); color: var(--cx-ink-2);
}
.cx-root .cx-card-status.complete { background: var(--cx-ink); color: var(--cx-peri); }
.cx-root .cx-card-status.empty { background: var(--cx-paper-2); color: var(--cx-muted); }
.cx-root .cx-card-title {
  font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.015em; color: var(--cx-ink);
  text-wrap: balance; min-height: 2.5em;
}
.cx-root .cx-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--cx-muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.cx-root .cx-card-meta b { color: var(--cx-ink); font-weight: 400; font-family: "DM Serif Display", serif; font-size: 14px; letter-spacing: 0; text-transform: none; }
.cx-root .cx-card-go {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--cx-ink-2); transition: color .15s, transform .15s;
}
.cx-root .cx-card:hover .cx-card-go { color: var(--cx-ink); transform: translateX(3px); }

/* =======================================================
   Priority view
   ======================================================= */
.cx-root .cx-prio {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.cx-root .cx-prio-col {
  background: #fff; border: 1px solid var(--cx-rule); border-radius: 14px;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 12px;
  min-height: 300px;
}

/* Four column tones — matches the list-view progress gradient.
   Each must set background + border, and flip text colour where needed. */

/* Empty — untouched topics, paper/white — matches "no bar" in list view */
.cx-root .cx-prio-empty-tone {
  background: #fff;
  border-color: var(--cx-rule);
}

/* Peri — early progress — same tone as the peri section of the bar */
.cx-root .cx-prio-peri {
  background: var(--cx-peri-soft);
  border-color: rgba(125,168,240,0.3);
}

/* Steel — mid/late progress */
.cx-root .cx-prio-steel {
  background: #5d77a8;
  border-color: #5d77a8;
  color: #fff;
}

/* Ink — mastered, matches a full list-view bar */
.cx-root .cx-prio-ink {
  background: var(--cx-ink);
  border-color: var(--cx-ink);
  color: #fff;
}

/* --- Column header --- */
.cx-root .cx-prio-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cx-root .cx-prio-steel .cx-prio-head,
.cx-root .cx-prio-ink   .cx-prio-head { border-bottom-color: rgba(255,255,255,0.18); }

.cx-root .cx-prio-head h3 {
  font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em; margin: 0; line-height: 1;
}
.cx-root .cx-prio-empty-tone .cx-prio-head h3 { color: var(--cx-muted); }
.cx-root .cx-prio-peri       .cx-prio-head h3 { color: var(--cx-ink); }
.cx-root .cx-prio-steel      .cx-prio-head h3 { color: #fff; }
.cx-root .cx-prio-ink        .cx-prio-head h3 { color: #fff; font-style: italic; }

.cx-root .cx-prio-head p {
  font-size: 13px; color: currentColor; opacity: 0.7; margin: 4px 0 0; line-height: 1.4;
}
.cx-root .cx-prio-steel .cx-prio-head p,
.cx-root .cx-prio-ink   .cx-prio-head p { opacity: 0.8; }

.cx-root .cx-prio-n {
  font-family: "DM Serif Display", serif; font-size: 28px; line-height: 1;
  color: currentColor; opacity: 0.45;
}
.cx-root .cx-prio-steel .cx-prio-n,
.cx-root .cx-prio-ink   .cx-prio-n { color: #fff; opacity: 1; }

/* --- Items list --- */
.cx-root .cx-prio-items { display: flex; flex-direction: column; gap: 8px; }
.cx-root .cx-prio-empty {
  padding: 16px 10px; text-align: center; font-size: 13px;
  color: currentColor; opacity: 0.5;
  border: 1px dashed currentColor; border-radius: 10px;
  border-color: rgba(0,0,0,0.15);
}
.cx-root .cx-prio-steel .cx-prio-empty,
.cx-root .cx-prio-ink   .cx-prio-empty { border-color: rgba(255,255,255,0.25); }

/* Individual case buttons */
.cx-root .cx-prio-item {
  background: rgba(255,255,255,0.65);
  border: 1px solid transparent;
  border-radius: 10px; padding: 12px 14px;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  transition: background .15s, border-color .15s, transform .15s;
}
/* Dark-backed columns: case buttons get translucent white surface + white text */
.cx-root .cx-prio-steel .cx-prio-item,
.cx-root .cx-prio-ink   .cx-prio-item {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
/* Empty-tone (white) column: give buttons a faint paper fill so they don't melt into the card bg */
.cx-root .cx-prio-empty-tone .cx-prio-item { background: var(--cx-paper); }

.cx-root .cx-prio-item:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--cx-ink);
}
.cx-root .cx-prio-steel .cx-prio-item:hover,
.cx-root .cx-prio-ink   .cx-prio-item:hover {
  background: rgba(255,255,255,0.22);
  border-color: #fff;
}

.cx-root .cx-prio-item h4 {
  font-family: "Poppins", sans-serif; font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0; line-height: 1.3; text-wrap: balance;
  color: inherit;
}

/* Inline progress bar inside each case button */
.cx-root .cx-prio-line {
  height: 3px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden;
}
.cx-root .cx-prio-steel .cx-prio-line,
.cx-root .cx-prio-ink   .cx-prio-line { background: rgba(255,255,255,0.18); }
.cx-root .cx-prio-line > span { display: block; height: 100%; background: var(--cx-ink); border-radius: 999px; }
/* On dark columns use peri for the fill so it's visible against the translucent track */
.cx-root .cx-prio-steel .cx-prio-line > span,
.cx-root .cx-prio-ink   .cx-prio-line > span { background: var(--cx-peri); }
/* Empty & peri columns use ink for the fill — consistent with the scale */
.cx-root .cx-prio-peri .cx-prio-line > span { background: var(--cx-ink); }
.cx-root .cx-prio-empty-tone .cx-prio-line > span { background: var(--cx-ink); }

.cx-root .cx-prio-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.06em; opacity: 0.7;
  color: inherit;
}
.cx-root .cx-prio-steel .cx-prio-meta,
.cx-root .cx-prio-ink   .cx-prio-meta { opacity: 0.85; }

.cx-root .cx-prio-item b { font-family: "DM Serif Display", serif; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.cx-root .cx-prio-pct { font-family: "DM Serif Display", serif; font-size: 14px; opacity: 1; }

@media (max-width: 1180px) { .cx-root .cx-prio { grid-template-columns: repeat(2, 1fr); } }

/* =======================================================
   Drawer (grid / priority)
   ======================================================= */
.cx-drawer-wrap {
  position: fixed; inset: 0; background: rgba(20,28,46,0.5);
  backdrop-filter: blur(4px); z-index: 50;
  display: flex; justify-content: flex-end;
  animation: cx-fade .2s ease;
  font-family: "Poppins", sans-serif;
}
@keyframes cx-fade { from { opacity: 0; } }
.cx-drawer {
  width: min(900px, 100%); height: 100%; background: #fff;
  display: flex; flex-direction: column; gap: 0;
  animation: cx-slide .28s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  color: var(--cx-ink, #253551);
}
@keyframes cx-slide { from { transform: translateX(100%); } }
.cx-drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding: 28px 32px 16px;
  position: sticky; top: 0; background: #fff; z-index: 2;
  border-bottom: 1px solid var(--cx-rule, #d6dde9);
}
.cx-drawer-head .cx-eyebrow {
  color: var(--cx-muted, #6b7890);
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.cx-drawer-head h2 {
  font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; margin: 6px 0 4px;
  text-wrap: balance;
}
.cx-drawer-head p {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--cx-muted, #6b7890); letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
}
.cx-drawer-close {
  background: var(--cx-paper, #f6f8fc); border: 0; width: 36px; height: 36px;
  border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--cx-ink, #253551); flex-shrink: 0;
}
.cx-drawer-close:hover { background: var(--cx-paper-3, #d6dde9); }
.cx-drawer-bar {
  height: 3px; background: var(--cx-paper-2, #eef2f8); margin: 0;
  overflow: hidden;
}
.cx-drawer-bar > span {
  display: block; height: 100%;
  background-image: linear-gradient(90deg,
    #7DA8F0 0%,
    #5d77a8 45%,
    #3a4968 75%,
    #253551 100%
  );
  background-repeat: no-repeat;
  background-position: left center;
}
.cx-drawer-cases {
  flex: 1; overflow-y: auto; padding: 0 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; align-content: start;
  background: var(--cx-paper, #f6f8fc);
}
.cx-drawer-cases .cx-case {
  padding: 14px 24px; background: #fff;
  border-right: 1px solid var(--cx-rule, #d6dde9);
  border-bottom: 1px solid var(--cx-rule, #d6dde9);
  display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center;
  font-family: "Poppins", sans-serif; font-size: 15px; color: var(--cx-ink, #253551);
}
.cx-drawer-cases .cx-case:nth-child(even) { border-right: 0; }
.cx-drawer-cases .cx-case:hover { background: var(--cx-row-hover, #e5ecf4); }

/* Re-apply case-internal styles inside drawer (since it's outside .cx-root) */
.cx-drawer-cases .cx-case-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--cx-rule-2, #bfc8d9); background: #fff;
  display: grid; place-items: center; color: #fff;
  transition: background .15s, border-color .15s;
}
.cx-drawer-cases .cx-case-check:hover { border-color: var(--cx-ink, #253551); }
/* Drawer .cx-case-check.done green state is set earlier in the file so we don't duplicate here */
.cx-drawer-cases .cx-case-check svg { width: 12px; height: 12px; }
.cx-drawer-cases .cx-case-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-drawer-cases .cx-case-title {
  font-size: 15px; color: var(--cx-ink, #253551); font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.cx-drawer-cases .cx-case.done .cx-case-title { color: var(--cx-ink-2, #3a4968); }
.cx-drawer-cases .cx-case-diag {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--cx-muted, #6b7890); letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-drawer-cases .cx-case-meta { display: flex; align-items: center; gap: 14px; }
.cx-drawer-cases .cx-case-video-link {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cx-rule-2, #bfc8d9); transition: color .15s; padding: 2px 4px;
}
.cx-drawer-cases .cx-case-video-link:hover { color: var(--cx-ink, #253551); }
.cx-drawer-cases .cx-case-video-ic {
  font-size: 18px; line-height: 1;
  transition: font-weight .15s;
}
.cx-drawer-cases .cx-case-video-link:hover .cx-case-video-ic { font-weight: 900; }
.cx-drawer-cases .cx-case-diff { display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.cx-drawer-cases .cx-case-star { font-size: 12px; color: var(--cx-rule-2, #bfc8d9); line-height: 1; }
.cx-drawer-cases .cx-case-star.on { color: var(--cx-peri, #7DA8F0); }
.cx-drawer-cases .cx-case:hover .cx-case-video-link,
.cx-drawer-cases .cx-case:hover .cx-case-star { color: var(--cx-ink, #253551); }
.cx-drawer-cases .cx-case:hover .cx-case-star.on { color: var(--cx-peri, #7DA8F0); }

@media (max-width: 760px) {
  .cx-drawer-cases { grid-template-columns: 1fr; }
  .cx-drawer-cases .cx-case { border-right: 0; }
}

/* =======================================================
   Responsive
   ======================================================= */
@media (max-width: 860px) {
  .cx-root .cx-hero { grid-template-columns: 1fr; padding: 20px 22px; }
  .cx-root .cx-hero h1 { font-size: 24px; }
  .cx-root .cx-hero-right { width: 100%; }
  .cx-root .cx-row-head { grid-template-columns: 24px 1fr; }
  .cx-root .cx-row-progress { grid-column: 1 / -1; padding-left: 38px; }
  .cx-root .cx-row-cases { grid-template-columns: 1fr; }
  .cx-root .cx-prio { grid-template-columns: 1fr; }
}

/* =======================================================
   Select2 overrides — theme the multi-select to match the
   design's search-box look. Select2 renders its own wrapper
   DOM (.select2-container) as a sibling of the native select;
   these rules style that.
   ======================================================= */
.cx-root .cx-search {
  /* Let Select2 grow to fill; override the old input-padding look */
  padding: 6px 12px 6px 16px;
  min-height: 48px;
}
.cx-root .cx-search .select2-container {
  flex: 1;
  min-width: 0;
  font-family: inherit;
}
.cx-root .cx-search .select2-container--default .select2-selection--multiple {
  border: 0;
  background: transparent;
  min-height: 36px;
  padding: 0;
}
.cx-root .cx-search .select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border: 0;
}
.cx-root .cx-search .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.cx-root .cx-search .select2-selection__choice {
  background: var(--cx-peri-soft) !important;
  border: 1px solid rgba(125, 168, 240, 0.35) !important;
  color: var(--cx-ink) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.cx-root .cx-search .select2-selection__choice__remove {
  color: var(--cx-ink) !important;
  margin-right: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-weight: 700 !important;
  order: 2;
  font-size: 14px;
  line-height: 1;
}
.cx-root .cx-search .select2-selection__choice__remove:hover {
  background: transparent !important;
  color: var(--cx-ink) !important;
  opacity: 0.7;
}
.cx-root .cx-search .select2-selection__choice__display {
  padding: 0 !important;
}
.cx-root .cx-search .select2-search--inline {
  margin: 0;
}
.cx-root .cx-search .select2-search__field {
  font-family: inherit !important;
  font-size: 16px !important;
  color: var(--cx-ink) !important;
  padding: 6px 2px !important;
  margin-top: 0 !important;
  min-width: 180px !important;
  background: transparent !important;
}
.cx-root .cx-search .select2-search__field::placeholder {
  color: var(--cx-muted);
  font-style: normal;
}
.cx-root .cx-search .select2-selection__clear {
  font-size: 18px;
  color: var(--cx-muted);
  margin-right: 4px;
}

/* Dropdown panel (rendered at body level by default) */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--cx-rule, #d6dde9);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(20,28,46,0.18);
  overflow: hidden;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
}
.select2-container--default .select2-results__option {
  padding: 10px 14px;
  font-size: 15px;
  color: var(--cx-ink, #253551);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cx-ink, #253551) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--cx-peri-soft, #e9f0fb);
  color: var(--cx-ink, #253551);
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--cx-rule, #d6dde9) !important;
  border-radius: 8px;
  padding: 8px 12px !important;
  font-family: inherit;
  font-size: 14px;
}

/* =======================================================
   Inline login notice
   ======================================================= */
.cx-root .cx-login-notice {
  background: #fff;
  border: 1px solid var(--cx-rule);
  border-left: 3px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px !important;
  margin: 0 0 4px !important;
}
.cx-root .cx-login-notice[hidden] { display: none !important; }
.cx-root #scaInlineLoginLink:hover { text-decoration: underline; }

/* =======================================================
   Recently added section
   ======================================================= */
.cx-root .cx-recent {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Section break above — the Recently added grid is conceptually separate
     from the main cases list, so it needs real whitespace to read as its
     own section rather than a continuation. */
  margin-top: 48px;
}
.cx-root .cx-recent-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 2px;
}
.cx-root .cx-recent-head .cx-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cx-muted);
  margin-bottom: 6px;
}
.cx-root .cx-recent-head h3 {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cx-ink);
  line-height: 1;
  margin: 0;
}

/* 5x2 grid of thumbnails. No gaps matches portal aesthetic; the grid looks
   like a contact sheet rather than individual cards. */
.cx-root .cx-recent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--cx-rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cx-paper-2);
}
.cx-root .cx-recent-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Gradient fallback — shows through when the image 404s. The seed rotates
     gradients so missing images don't all look identical. */
  background-image: repeating-linear-gradient(45deg, rgba(37,53,81,0.04) 0 1px, transparent 1px 10px);
  background-color: var(--cx-paper-2);
  transition: transform .2s ease;
  cursor: pointer;
}
.cx-root .cx-recent-tile[data-seed="0"] { background-color: var(--cx-paper-2); }
.cx-root .cx-recent-tile[data-seed="1"] { background-color: var(--cx-peri-soft); }
.cx-root .cx-recent-tile[data-seed="2"] { background-color: var(--cx-paper-3); }
.cx-root .cx-recent-tile[data-seed="3"] { background-color: var(--cx-paper-2); }
.cx-root .cx-recent-tile[data-seed="4"] { background-color: var(--cx-paper-3); }

.cx-root .cx-recent-tile:hover { transform: scale(1.02); z-index: 1; }

.cx-root .cx-recent-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* No transition on the img itself — the scale is on the whole tile.
     Avoids double-compounded animation. */
}
.cx-root .cx-recent-num {
  position: absolute;
  top: 8px; left: 10px;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cx-ink-2);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 7px;
  border-radius: 4px;
  /* Stays readable whether image loaded or gradient is showing */
}

/* Responsive: drop to 4 cols, then 3, then 2 on narrower screens.
   Ten cases don't divide cleanly into 3 or 4, so the last row will be
   partial at those sizes — that's fine, better than tiny tiles. */
@media (max-width: 1100px) {
  .cx-root .cx-recent-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .cx-root .cx-recent-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .cx-root .cx-recent-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Collapsible name list — native <details> */
.cx-root .cx-recent-details {
  background: #fff;
  border: 1px solid var(--cx-rule);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.cx-root .cx-recent-summary {
  list-style: none; /* remove default disclosure triangle */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--cx-ink);
  user-select: none;
  transition: background .15s ease;
}
.cx-root .cx-recent-summary::-webkit-details-marker { display: none; }
.cx-root .cx-recent-summary:hover { background: var(--cx-row-hover); }
.cx-root .cx-recent-chev {
  font-size: 13px;
  color: var(--cx-muted);
  transition: transform .2s ease;
}
.cx-root .cx-recent-details[open] .cx-recent-chev { transform: rotate(180deg); }
.cx-root .cx-recent-details[open] .cx-recent-summary { border-bottom: 1px solid var(--cx-rule); }

.cx-root .cx-recent-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  counter-reset: recent-counter;
}
.cx-root .cx-recent-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  counter-increment: recent-counter;
  transition: background .12s ease;
  min-width: 0;
}
.cx-root .cx-recent-list li:hover { background: var(--cx-row-hover); }
.cx-root .cx-recent-list li::before {
  content: counter(recent-counter);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--cx-muted);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}
.cx-root .cx-recent-list li a {
  flex: 1;
  min-width: 0;
  color: var(--cx-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-root .cx-recent-list li a:hover { color: var(--cx-peri); text-decoration: underline; }
.cx-root .cx-recent-list-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cx-muted);
  background: var(--cx-paper);
  border: 1px solid var(--cx-rule);
  border-radius: 4px;
  padding: 3px 7px;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-root .cx-recent-list-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--cx-muted);
  flex-shrink: 0;
}

/* =======================================================
   Fixes after Select2 integration
   ======================================================= */

/* Prevent the kind-segment buttons from wrapping onto two lines */
.cx-root .cx-seg button { white-space: nowrap; }

/* On mobile the Select2 search field was forcing horizontal overflow.
   Let it shrink. */
@media (max-width: 860px) {
  .cx-root .cx-search .select2-search__field {
    min-width: 60px !important;
    width: 100% !important;
  }
  .cx-root { overflow-x: hidden; }
}

/* Make the Select2 clear-all (×) button less visually competitive with the
   per-chip × buttons; it's still there, just quieter. */
.cx-root .cx-search .select2-selection__clear {
  opacity: 0.5;
  transition: opacity .15s;
}
.cx-root .cx-search .select2-selection__clear:hover { opacity: 1; }