/* ══════════════════════════════════════════════════════════════════════════
   /ai-courses/provider — the `.acp-` DELTA on /ai-directory's design system.
   --------------------------------------------------------------------------
   REBUILT 2026-08-21. The page renders `.v2x acx acp` and wears THREE sheets
   in this order (the order is load-bearing — see the blade header):

     public-partials-styles.css        the `.v2x` TOKEN layer
     v2-public-directory-listing.css   `.dir-*`  — hero, facet rail, toolbar,
                                       cards, rails, pagination, empty state
     public-ai-courses.css             `.acx-*`  — the courses delta: the icon
                                       plate, the flag, the signal strip, the
                                       filter chips, the about panel
     THIS FILE                         `.acp-*`  — only what the two above do
                                       not already carry

   WHAT THIS REPLACED: the `.cpd-` kit, 84 rules of hand-rolled hero / card /
   panel chrome with `background:#fff` hardcoded on six components. Nothing
   else read it — `.v2x.atd.atdx.cpd` on /compare is a different kit that never
   loaded this file — so it is gone with the blade.

   ⚠ ADD NOTHING HERE THAT THE SHARED SHEETS ALREADY CARRY. Every rule below
     exists because the provider directory has a component the courses listing
     does not: a brand monogram, a type explorer, a comparison table, a
     collections grid, and an insights panel under the rail. A card, a pill, a
     button or a band head written here would drift the moment the shared sheet
     moves — which is exactly what happened to the kit this replaced.

   SECTIONS
     §MONO   the brand monogram inside the shared `.acx-plate`
     §TYPES  the provider-type explorer above the lab
     §PCARD  the four card deltas a provider needs and a course does not
     §INS    the four-up insights strip at the head of the comparison band
     §CMP    the side-by-side comparison table
     §COL    the collections grid
     §RESP   the responsive fixes the above need
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══ §MONO — the brand monogram ════════════════════════════════════════════
   Every `ai_course_providers.logo` is NULL and every row carries a real
   `brand_color`, so the plate is the BRAND and the glyph is its initial.

   ⚠ THE ACCENT IS THE PLATE, NEVER THE LETTER. `.acx-plate` (public-ai-
   courses.css §PLATE) paints a white scrim over the raw hex and sets the glyph
   to the sheet's own guaranteed ink; the eight brand colours in the table
   today include #03EF62 at 1.8:1 as ink on white, which is unreadable, and
   #02262B at 16:1, which is nearly black — saturation is not luminance. The
   letter therefore INHERITS from the plate and must not be given a colour
   here. Sizing is all this section is for.

   The shared sheet already ships `.dir-tc-mono` / `.dir-lc-mono`, but both
   paint `color:var(--dtc-ink-dark)` — the per-card tone cycle, which would
   overwrite the plate's ink and put us back on the contrast floor above. Hence
   a separate class rather than a reuse. */
.v2x.acp .acp-mono{
  display:grid;place-items:center;width:100%;height:100%;
  font-weight:800;line-height:1;letter-spacing:-.03em;
  color:inherit;text-transform:uppercase}
.v2x.acp .dir-tc-logo  .acp-mono{font-size:27px}
.v2x.acp .dir-lc-logo  .acp-mono{font-size:21px}
.v2x.acp .dir-tr-lg    .acp-mono{font-size:13px}
.v2x.acp .dir-hh-tile  .acp-mono{font-size:30px}
.v2x.acp .acp-mono.is-sm{font-size:15px}

/* A real logo, the day one is uploaded, wins over the monogram without a
   markup change: the blade prints whichever exists, and both fit the same box. */
.v2x.acp .acp-plateimg{width:64%;height:64%;object-fit:contain;display:block}


/* ═══ §TYPES — the provider-type explorer ═══════════════════════════════════
   A SHORTCUT into the rail's Provider Type facet, not a second filter: tapping
   one sets `types` to exactly that key, so the rail's checkbox lights up with
   it and the two can never disagree.

   It is a horizontal snap row rather than a wrapped grid, so eight types read
   as one strip at every width instead of reflowing into a 3-2-3 block. Tones
   cycle over the SIX `.dir-fx-dot` carries — the tightest palette any shared
   component here uses — so a type never lands on a colour the facet rail
   cannot draw beside it. */
.v2x.acp .acp-types{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 12px;margin:0 0 -4px;
  scrollbar-width:none;-ms-overflow-style:none}
.v2x.acp .acp-types::-webkit-scrollbar{display:none}

.v2x.acp .acp-type{
  --acp-t:#3680ED;--acp-tsoft:#eaf1fe;
  position:relative;flex:1 1 0;min-width:132px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:14px 14px 13px;border:1px solid var(--v2-line);border-radius:16px;
  background:#fff;color:var(--v2-ink);text-align:left;cursor:pointer;
  font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(16,24,40,.04);
  transition:transform .24s var(--ease-out),border-color .2s ease,box-shadow .24s ease,background .2s ease}
body.theme-dark .v2x.acp .acp-type{background:rgba(29,29,34,.9);border-color:var(--dk-line,rgba(255,255,255,.10))}

.v2x.acp .acp-type-ic{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--acp-tsoft);color:var(--acp-t);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
  transition:transform .28s var(--ease-spring),background .2s ease,color .2s ease}
.v2x.acp .acp-type-ic svg{width:18px;height:18px}
body.theme-dark .v2x.acp .acp-type-ic{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}

.v2x.acp .acp-type-nm{
  font-size:12.5px;font-weight:720;letter-spacing:-.012em;line-height:1.3;
  color:var(--v2-ink)}
.v2x.acp .acp-type-ct{
  position:absolute;top:13px;right:13px;
  min-width:22px;height:20px;padding:0 6px;border-radius:7px;
  display:inline-grid;place-items:center;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;
  background:var(--acp-tsoft);color:var(--acp-t)}

@media (hover:hover){
  .v2x.acp .acp-type:hover{
    transform:translateY(-3px);border-color:transparent;
    box-shadow:0 16px 30px -16px rgba(16,24,40,.34)}
  .v2x.acp .acp-type:hover .acp-type-ic{transform:scale(1.08)}
}
.v2x.acp .acp-type:focus-visible{outline:none;border-color:var(--acp-t);box-shadow:0 0 0 3px var(--acp-tsoft)}

/* Selected. The tile fills with its own tone rather than the brand blue, or
   seven of the eight would light up the same colour and the strip would stop
   reading as a palette. */
.v2x.acp .acp-type.is-on{
  background:var(--acp-t);border-color:transparent;
  box-shadow:0 14px 26px -14px var(--acp-t)}
.v2x.acp .acp-type.is-on .acp-type-nm{color:#fff}
.v2x.acp .acp-type.is-on .acp-type-ic{background:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.v2x.acp .acp-type.is-on .acp-type-ct{background:rgba(255,255,255,.24);color:#fff}
body.theme-dark .v2x.acp .acp-type.is-on{box-shadow:0 14px 26px -16px rgba(0,0,0,.9)}

/* The six `.dir-fx-dot` tones, in the rail's own order. */
.v2x.acp .acp-type[data-tone="emerald"]{--acp-t:#059669;--acp-tsoft:#dcfce7}
.v2x.acp .acp-type[data-tone="blue"]   {--acp-t:#3680ED;--acp-tsoft:#eaf1fe}
.v2x.acp .acp-type[data-tone="violet"] {--acp-t:#7C3AED;--acp-tsoft:#f3ecff}
.v2x.acp .acp-type[data-tone="amber"]  {--acp-t:#B45309;--acp-tsoft:#fef3c7}
.v2x.acp .acp-type[data-tone="cyan"]   {--acp-t:#0891B2;--acp-tsoft:#cffafe}
.v2x.acp .acp-type[data-tone="rose"]   {--acp-t:#DB2777;--acp-tsoft:#fce7f3}
body.theme-dark .v2x.acp .acp-type[data-tone="emerald"]{--acp-t:#34D399;--acp-tsoft:rgba(16,185,129,.16)}
body.theme-dark .v2x.acp .acp-type[data-tone="blue"]   {--acp-t:#60A4F5;--acp-tsoft:rgba(54,128,237,.16)}
body.theme-dark .v2x.acp .acp-type[data-tone="violet"] {--acp-t:#A78BFA;--acp-tsoft:rgba(139,92,246,.16)}
body.theme-dark .v2x.acp .acp-type[data-tone="amber"]  {--acp-t:#FBBF24;--acp-tsoft:rgba(245,158,11,.16)}
body.theme-dark .v2x.acp .acp-type[data-tone="cyan"]   {--acp-t:#22D3EE;--acp-tsoft:rgba(6,182,212,.16)}
body.theme-dark .v2x.acp .acp-type[data-tone="rose"]   {--acp-t:#F472B6;--acp-tsoft:rgba(236,72,153,.16)}
/* Filled tiles need a light ink on a mid-tone fill in dark mode too. */
body.theme-dark .v2x.acp .acp-type.is-on .acp-type-nm,
body.theme-dark .v2x.acp .acp-type.is-on .acp-type-ic,
body.theme-dark .v2x.acp .acp-type.is-on .acp-type-ct{color:#0F1117}


/* ═══ §PCARD — the provider card deltas ═════════════════════════════════════
   The card IS `.dir-tc` / `.dir-lc` from the shared sheet. Four things differ,
   and only those four are written here. */

/* 1 · The website host, under the name. A provider's domain is the one field
      that tells two similarly-named platforms apart at a glance. */
.v2x.acp .acp-host{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  margin:6px 0 0;font-size:11.5px;font-weight:600;color:var(--v2-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2x.acp .acp-host svg{width:12px;height:12px;flex:0 0 auto;opacity:.75}

/* 2 · The category chips. Real links to the course category, so they must not
      inherit the card's own overlay link — hence the z-index lift, which the
      shared sheet only grants to direct children of `.dir-tc`. */
.v2x.acp .acp-cats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;
  position:relative;z-index:2}
.v2x.acp .dir-lc .acp-cats{justify-content:flex-start}
.v2x.acp .acp-cat{
  padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:700;
  line-height:1.5;text-decoration:none;white-space:nowrap;
  background:var(--dtc-bg);color:var(--dtc-ink-dark);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  transition:background .18s ease,color .18s ease,transform .2s var(--ease-spring)}
.v2x.acp a.acp-cat:hover{background:var(--dtc-ink);color:#fff;text-decoration:none;transform:translateY(-1px)}
body.theme-dark .v2x.acp .acp-cat{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
body.theme-dark .v2x.acp a.acp-cat:hover{color:#0F1117}

/* 3 · The tile card's CTA row. `.dir-tc-btn` is `margin-top:auto`, which is
      what holds every button on one baseline in a row of unequal cards — a
      sibling with its own top margin beats it and the row reads as stretched
      (see §CTA in public-deals.css for the same defect). The wrapper takes the
      auto margin and the button drops it. */
.v2x.acp .acp-tcta{display:flex;width:100%;margin-top:auto;padding-top:14px}
.v2x.acp .acp-tcta .dir-tc-btn{margin-top:0}

/* 4 · NOTHING for the list row's figure strip, deliberately. It wears
      `.dir-lc-meta` rather than `.acx-strip`, exactly as /ai-courses' own list
      partial does: `.acx-strip` is `justify-content:center`, which is right on
      the centred tile card and pushes the figures into the middle of a
      left-aligned row. `.dir-lc-meta` is the shared sheet's left-aligned twin
      and `.v2x.acx .dir-lc .acx-fig{font-size:11px}` still reaches the figures
      inside it, so the row costs no rule here at all. */


/* ═══ §INS — the insights strip ════════════════════════════════════════════
   Four superlatives — most courses, highest rated, most students, verified
   count — as a four-up strip at the head of the comparison band.

   ⚠ IT USED TO SIT IN THE RIGHT RAIL, AND THAT IS WHY IT DOES NOT ANY MORE.
   §NOTR in public-dir-bands.css sets `.v2x .dir-tr { display: none }` for
   every vertical (2026-08-18, deliberate), so anything placed inside that
   aside is removed from the layout AND from the accessibility tree. The rail
   markup itself stays in the blade so this page rejoins the family the day
   §NOTR is deleted — but real content cannot live inside it.

   It leads the comparison band rather than standing alone because it answers
   the same question the table does, one row at a time: who leads on what.
   ═══════════════════════════════════════════════════════════════════════════ */
.v2x.acp .acp-inswrap{margin:0 0 20px}
.v2x.acp .acp-ins-hd{
  display:block;margin:0 0 10px;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--v2-muted)}

.v2x.acp .acp-ins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.v2x.acp .acp-ins-row{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:13px 15px;border:1px solid var(--v2-line);border-radius:16px;background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(16,24,40,.04);
  transition:transform .22s var(--ease-out),box-shadow .22s ease,border-color .2s ease}
body.theme-dark .v2x.acp .acp-ins-row{background:rgba(29,29,34,.9);border-color:var(--dk-line,rgba(255,255,255,.10))}
@media (hover:hover){
  .v2x.acp .acp-ins-row:hover{transform:translateY(-2px);border-color:transparent;box-shadow:0 16px 30px -18px var(--acp-i,#3680ED)}
}

.v2x.acp .acp-ins-ic{
  flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;
  border-radius:11px;background:var(--acp-i-soft,#eaf1fe);color:var(--acp-i,#3680ED)}
.v2x.acp .acp-ins-ic svg{width:17px;height:17px}
.v2x.acp .acp-ins-row[data-tone="blue"]   {--acp-i:#3680ED;--acp-i-soft:#eaf1fe}
.v2x.acp .acp-ins-row[data-tone="amber"]  {--acp-i:#B45309;--acp-i-soft:#fef3c7}
.v2x.acp .acp-ins-row[data-tone="violet"] {--acp-i:#7C3AED;--acp-i-soft:#f3ecff}
.v2x.acp .acp-ins-row[data-tone="emerald"]{--acp-i:#059669;--acp-i-soft:#dcfce7}
body.theme-dark .v2x.acp .acp-ins-row[data-tone="blue"]   {--acp-i:#60A4F5;--acp-i-soft:rgba(54,128,237,.16)}
body.theme-dark .v2x.acp .acp-ins-row[data-tone="amber"]  {--acp-i:#FBBF24;--acp-i-soft:rgba(245,158,11,.16)}
body.theme-dark .v2x.acp .acp-ins-row[data-tone="violet"] {--acp-i:#A78BFA;--acp-i-soft:rgba(139,92,246,.16)}
body.theme-dark .v2x.acp .acp-ins-row[data-tone="emerald"]{--acp-i:#34D399;--acp-i-soft:rgba(16,185,129,.16)}

.v2x.acp .acp-ins-tx{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.v2x.acp .acp-ins-cap{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--v2-muted)}
.v2x.acp .acp-ins-val{
  font-size:14px;font-weight:780;letter-spacing:-.014em;color:var(--v2-ink);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2x.acp a.acp-ins-val:hover{color:var(--brand-blue);text-decoration:none}
.v2x.acp .acp-ins-val small{font-weight:640;color:var(--v2-muted);font-size:12px;margin-left:5px}

/* ═══ §CMP — the comparison table ═══════════════════════════════════════════
   A REAL table element, not a grid of divs: this is tabular data with a header
   row, and a screen reader should be told so. It scrolls inside its own
   wrapper rather than pushing the page wide — the shell is capped at 1600px
   and a six-row table with five columns overflows below ~900. */
.v2x.acp .acp-cmp-wrap{
  overflow-x:auto;border:1px solid var(--v2-line);border-radius:20px;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(16,24,40,.04),0 18px 40px -30px rgba(16,24,40,.4)}
body.theme-dark .v2x.acp .acp-cmp-wrap{background:rgba(29,29,34,.9);border-color:var(--dk-line,rgba(255,255,255,.10))}

.v2x.acp .acp-cmp{width:100%;min-width:660px;border-collapse:collapse;font-size:13.5px}
.v2x.acp .acp-cmp th,
.v2x.acp .acp-cmp td{padding:13px 16px;text-align:left;vertical-align:middle}
.v2x.acp .acp-cmp thead th{
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v2-muted);background:var(--v2-accent-soft2);
  border-bottom:1px solid var(--v2-line);white-space:nowrap}
body.theme-dark .v2x.acp .acp-cmp thead th{background:rgba(54,128,237,.08);border-color:var(--dk-line,rgba(255,255,255,.10))}
.v2x.acp .acp-cmp tbody tr{border-top:1px solid var(--v2-line);transition:background .18s ease}
body.theme-dark .v2x.acp .acp-cmp tbody tr{border-color:var(--dk-line-soft,rgba(255,255,255,.06))}
.v2x.acp .acp-cmp tbody tr:first-child{border-top:0}
@media (hover:hover){.v2x.acp .acp-cmp tbody tr:hover{background:var(--v2-accent-soft2)}}
body.theme-dark .v2x.acp .acp-cmp tbody tr:hover{background:rgba(54,128,237,.07)}

/* Numeric columns are tabular so the digits line up down the column — the
   whole point of putting these six providers in a table. */
.v2x.acp .acp-cmp .acp-cmp-n{font-variant-numeric:tabular-nums;font-weight:760;color:var(--v2-ink);white-space:nowrap}
.v2x.acp .acp-cmp .acp-cmp-nm{display:flex;align-items:center;gap:10px;min-width:0}
.v2x.acp .acp-cmp .acp-cmp-lg{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;overflow:hidden}
.v2x.acp .acp-cmp .acp-cmp-lnk{
  font-weight:780;letter-spacing:-.014em;color:var(--v2-ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2x.acp .acp-cmp .acp-cmp-lnk:hover{color:var(--brand-blue);text-decoration:none}
.v2x.acp .acp-cmp .acp-cmp-rt{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;font-weight:760;color:var(--v2-ink)}
.v2x.acp .acp-cmp .acp-cmp-rt svg{width:13px;height:13px;color:var(--warning)}
.v2x.acp .acp-cmp .acp-cmp-dash{color:#b7bdc9;font-weight:600}
body.theme-dark .v2x.acp .acp-cmp .acp-cmp-dash{color:#5a6274}

/* The bar behind the catalogue figure. Width is set inline from the row's own
   share of the largest catalogue, so the column can be READ as a chart without
   a second element per row. */
.v2x.acp .acp-cmp-bar{position:relative;display:block;height:6px;margin-top:6px;border-radius:99px;background:var(--v2-line);overflow:hidden}
.v2x.acp .acp-cmp-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light))}
body.theme-dark .v2x.acp .acp-cmp-bar{background:rgba(255,255,255,.09)}


/* ═══ §COL — the collections grid ═══════════════════════════════════════════
   Six shortcuts, each a real filtered URL. Four to a row on a laptop; the
   arrow is the affordance, so the whole tile is the link. */
.v2x.acp .acp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.v2x.acp .acp-col{
  --acp-c:#3680ED;--acp-c-soft:#eaf1fe;
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:18px 46px 18px 18px;border:1px solid var(--v2-line);border-radius:18px;
  background:#fff;text-decoration:none;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(16,24,40,.04);
  transition:transform .24s var(--ease-out),border-color .2s ease,box-shadow .24s ease}
body.theme-dark .v2x.acp .acp-col{background:rgba(29,29,34,.9);border-color:var(--dk-line,rgba(255,255,255,.10))}

/* The tone wash. Its own pseudo rather than a `background` shorthand on the
   card: the base sheets' dark-mode card rule resets background-image at (0,3,1)
   and a wash written into the shorthand would vanish after dark while looking
   perfect by day. */
.v2x.acp .acp-col::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0,var(--acp-c-soft) 0%,transparent 62%);
  opacity:.85;transition:opacity .24s ease}
body.theme-dark .v2x.acp .acp-col::before{opacity:.5}
.v2x.acp .acp-col > *{position:relative;z-index:1}

.v2x.acp .acp-col-nm{font-size:14px;font-weight:780;letter-spacing:-.016em;color:var(--v2-ink);line-height:1.35}
.v2x.acp .acp-col-ds{font-size:12.5px;line-height:1.55;color:var(--v2-muted);margin:0}
.v2x.acp .acp-col-arr{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);z-index:1;
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--acp-c-soft);color:var(--acp-c);
  transition:transform .24s var(--ease-out),background .2s ease,color .2s ease}
.v2x.acp .acp-col-arr svg{width:14px;height:14px}

@media (hover:hover){
  .v2x.acp .acp-col:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 20px 38px -20px var(--acp-c)}
  .v2x.acp .acp-col:hover::before{opacity:1}
  .v2x.acp .acp-col:hover .acp-col-arr{background:var(--acp-c);color:#fff;transform:translateY(-50%) translateX(3px)}
}
.v2x.acp .acp-col:focus-visible{outline:none;border-color:var(--acp-c);box-shadow:0 0 0 3px var(--acp-c-soft)}

.v2x.acp .acp-col[data-tone="blue"]   {--acp-c:#3680ED;--acp-c-soft:#eaf1fe}
.v2x.acp .acp-col[data-tone="violet"] {--acp-c:#7C3AED;--acp-c-soft:#f3ecff}
.v2x.acp .acp-col[data-tone="emerald"]{--acp-c:#059669;--acp-c-soft:#dcfce7}
.v2x.acp .acp-col[data-tone="amber"]  {--acp-c:#B45309;--acp-c-soft:#fef3c7}
.v2x.acp .acp-col[data-tone="rose"]   {--acp-c:#DB2777;--acp-c-soft:#fce7f3}
.v2x.acp .acp-col[data-tone="cyan"]   {--acp-c:#0891B2;--acp-c-soft:#cffafe}
body.theme-dark .v2x.acp .acp-col[data-tone="blue"]   {--acp-c:#60A4F5;--acp-c-soft:rgba(54,128,237,.22)}
body.theme-dark .v2x.acp .acp-col[data-tone="violet"] {--acp-c:#A78BFA;--acp-c-soft:rgba(139,92,246,.22)}
body.theme-dark .v2x.acp .acp-col[data-tone="emerald"]{--acp-c:#34D399;--acp-c-soft:rgba(16,185,129,.22)}
body.theme-dark .v2x.acp .acp-col[data-tone="amber"]  {--acp-c:#FBBF24;--acp-c-soft:rgba(245,158,11,.22)}
body.theme-dark .v2x.acp .acp-col[data-tone="rose"]   {--acp-c:#F472B6;--acp-c-soft:rgba(236,72,153,.22)}
body.theme-dark .v2x.acp .acp-col[data-tone="cyan"]   {--acp-c:#22D3EE;--acp-c-soft:rgba(6,182,212,.22)}


/* ═══ §RESP — responsive ════════════════════════════════════════════════════
   Breakpoints are the shared sheet's, not new ones: 1180 / 820 / 560 are where
   `.dir-cards` steps down, so a delta that stepped somewhere else would put the
   type strip and the collections out of phase with the grid beside them. */
@media (max-width:1180px){
  .v2x.acp .acp-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2x.acp .acp-ins{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .v2x.acp .acp-type{min-width:124px}
  .v2x.acp .acp-cmp{min-width:600px}
}
@media (max-width:560px){
  .v2x.acp .acp-cols{grid-template-columns:1fr}
  .v2x.acp .acp-type{min-width:118px;padding:12px 12px 11px}
  .v2x.acp .acp-type-nm{font-size:12px}
  .v2x.acp .acp-ins{grid-template-columns:1fr}
}


/* ═══ §DARKFIX — the (0,3,1) dark card rule ═════════════════════════════════
   `body.theme-dark .v2x.acp .acp-type` is (0,3,1): the `body` type selector
   gives it one element over `.v2x.acp .acp-type.is-on`'s (0,3,0), so the
   SELECTED tile kept the unselected dark surface and only its ink flipped —
   dark text on a dark card. It looked perfect in light mode, which is exactly
   how the same defect has shipped before in the base sheets.

   Re-declared at (0,4,1) rather than reordered, because source order cannot
   settle a specificity tie that is not a tie. `background-color`, not the
   `background` shorthand: the shorthand would also reset background-image and
   take the tile's sheen with it. */
body.theme-dark .v2x.acp .acp-type.is-on{
  background-color:var(--acp-t);border-color:transparent}
body.theme-dark .v2x.acp .acp-type.is-on .acp-type-ic{background:rgba(0,0,0,.22)}
body.theme-dark .v2x.acp .acp-type.is-on .acp-type-ct{background:rgba(0,0,0,.2)}


/* ═══ §PROSE — the about panel's paragraph rhythm ═══════════════════════════
   `.acx-about-box p` is `margin:0` in public-ai-courses.css because on a
   course hub the panel holds exactly ONE paragraph — the taxonomy row's
   description. This band holds the long-form SEO body, split on blank lines,
   so it is three or more and they ran together as a wall of text.

   `p + p` rather than a blanket `margin-bottom`: the last paragraph must not
   push the panel's own 26px padding out to 42px, and the shared rule stays
   correct everywhere it is already used. (0,3,2) against the shared rule's
   (0,3,1), so it wins on specificity rather than on load order. */
.v2x.acp .acx-about-box p + p{margin-top:14px}


/* ═══════════════════════════════════════════════════════════════════════════
   §ACPLOGO — the provider mark fills its plate                   (2026-08-25)
   ═══════════════════════════════════════════════════════════════════════════
   `.acp-plateimg` is the provider's uploaded logo sitting in the directory's
   own `.dir-tc-logo` / `.dir-lc-logo` plate, and it was the one thing on this
   page still inset. §TCLOGO (public-dir-bands.css) took every OTHER mark in
   those plates to 100% back in 2026-08-19, but it targets `.dir-tc-logo img`
   at (0,2,1) and this class sits on the <img> itself at (0,3,0) — higher, so
   the 64% quietly won and this page alone kept the old treatment.

   No provider carries a logo today, which is why the audit read the page as
   clean: every plate is showing `.acp-mono`, the monogram. The rule still had
   to move, or the FIRST logo an admin uploads lands inset while the same
   provider's mark on every other vertical fills.

   The plates bring their own `overflow: hidden` and §TCLOGO-RING's ring, so
   nothing else is needed here. `object-fit: contain` stays on the base rule.
   `.acp-mono` is TYPE, not an image, and keeps its own sizes above. */
.v2x.acp .acp-plateimg{ width:100%; height:100%; }