/* Claude Skills Library — scoped stylesheet.
   Loaded via functions/claude_skills.php on claude-skill singles, the
   /skills/ archive, and the claude-skill-category taxonomy archive.
   Every selector is scoped under .dg-claude-skills.

   Design system mirrors the canonical mockup at
   ~/Downloads/DataGrail Skills Library (standalone).html — tokens, type,
   surfaces, components, ribbon hero animation, hero-seam. */

/* ─────────────────────────────────────────────────────────────────────
   Tokens (scoped — do not leak into the rest of the theme)
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills {
    /* DG palette */
    --dg-gray-50:  #F7F9F9;
    --dg-gray-100: #F0F2F2;
    --dg-gray-200: #E6E8E8;
    --dg-gray-300: #D6D8D8;
    --dg-gray-400: #B2B4B4;
    --dg-gray-500: #929494;
    --dg-gray-600: #696B6C;
    --dg-gray-700: #575959;
    --dg-gray-800: #393A3A;
    --dg-gray-900: #191A1A;

    --dg-aqua-50:  #AFF2D4;
    --dg-aqua-100: #00DEA2;
    --dg-aqua-300: #6CD6B1;
    --dg-aqua-400: #1AB282;
    --dg-aqua-500: #2BA07A;
    --dg-aqua-600: #1F7557;
    --dg-aqua-700: #0F5A40;
    --dg-aqua-800: #1C4C3A;
    --dg-aqua-900: #0E2A20;

    --dg-success-light: #D5E7E0;
    --dg-blue:       #0046D2;
    --dg-blue-hover: #0039AC;
    --dg-blue-light: #E7E9FA;

    /* Aliases consumed by selectors (remapped onto DG) */
    --ink: #191A1A;
    --ink-2: #393A3A;
    --ink-3: #575959;
    --green: #00E3A3;            /* brand accent — never on buttons */
    --green-2: #1AB282;
    --green-soft: #00E3A3;
    --green-wash: #D5E7E0;
    --accent-deep: #00B381;      /* brand green, deepened just enough to read on white */
    --slate: #7A99A6;
    --slate-soft: #B9C8CF;
    --paper: #FFFFFF;
    --cream: #F7F9F9;
    --cream-2: #F0F2F2;
    --muted: #696B6C;
    --line: #E6E8E8;
    --line-2: #D6D8D8;
    --action: #191A1A;
    --action-hover: #000000;
    --link: #0046D2;
    --link-hover: #0039AC;

    --shadow-sm: 0 1px 2px 0 rgba(25,26,26,.06);
    --shadow-md: 0 2px 4px 0 rgba(25,26,26,.08), 0 1px 2px 0 rgba(25,26,26,.04);
    --shadow-lg: 0 4px 12px 0 rgba(25,26,26,.10), 0 2px 4px 0 rgba(25,26,26,.05);

    --radius-card: 12px;
    --radius-lg:   8px;
    --radius-md:   6px;
    --radius-sm:   4px;

    --content-pad: clamp(24px, 4vw, 88px);
    --container-max: 1200px;

    --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Hero knobs */
    --hero-base: #003B4D;        /* brand teal hero tone (mockup surf-hero) */
    --accent-hero: #00E3A3;
    --accent-light: #00B381;
    --display-weight: 500;
    --flourish: 1;

    /* WP nav offset — theme top nav is fixed at ~122px desktop, less on mobile. */
    --dg-cs-nav-offset: 122px;

    color: var(--ink);
    background: var(--paper);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media (max-width: 900px) {
    .dg-claude-skills { --dg-cs-nav-offset: 88px; }
}

.dg-claude-skills *,
.dg-claude-skills *::before,
.dg-claude-skills *::after { box-sizing: border-box; }

/* Honor the [hidden] attribute even on elements we give an explicit display
   (e.g. the search clear button + trending tags) — a bare class `display`
   otherwise beats the UA `[hidden]{display:none}` rule. */
.dg-claude-skills [hidden] { display: none !important; }

.dg-claude-skills ::selection { background: var(--dg-aqua-100); color: var(--ink); }
.dg-claude-skills .tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────
   Defeat the theme-wide `.sh-2024 .main a { color: #1C1B11 }` rule for
   anchors inside our scoped surfaces. We need anchors to honor each
   component's own color (white tags on dark hero, white "All" chip text,
   ink text on light cards, etc.) — so we explicitly take color back.
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills a:link,
.dg-claude-skills a:visited { color: inherit; text-decoration: none; }
.dg-claude-skills__chip--all:link,
.dg-claude-skills__chip--all:visited { color: #fff; }
/* !important defeats `.sh-2024 .main a:not(.btn):not(.primary-link):link/:visited`
   theme-wide anchor color override that would otherwise paint these pills black
   on the dark archive hero. Specificity bump alone isn't enough — the theme
   rule lives elsewhere and outranks ours on cascade order. */
.dg-claude-skills__tag:link,
.dg-claude-skills__tag:visited { color: #fff !important; }
.dg-claude-skills__breadcrumb-link:link,
.dg-claude-skills__breadcrumb-link:visited { color: rgba(255,255,255,.6); }
.dg-claude-skills__code-btn--primary:link,
.dg-claude-skills__code-btn--primary:visited { color: var(--ink); }
.dg-claude-skills__code-btn:link,
.dg-claude-skills__code-btn:visited { color: var(--green-soft); }

/* ─────────────────────────────────────────────────────────────────────
   Nav offset wrapper — mirrors the .home-outer-sh pattern in home-2026.
   The theme's top nav is fixed and OBSCURES content; this wrapper pushes
   the dark hero down by the nav height so it never gets hidden.
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__nav-offset {
    padding-top: var(--dg-cs-nav-offset);
    background: var(--hero-base);    /* paint the strip behind the fixed nav so the seam reads cleanly */
}

/* ─────────────────────────────────────────────────────────────────────
   Type
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills .serif        { font-family: var(--sans); }
.dg-claude-skills .accent-serif {
    font-family: var(--sans); font-style: normal; font-weight: 600;
    color: var(--accent-light);
}
.dg-claude-skills .balance { text-wrap: balance; }
.dg-claude-skills .pretty  { text-wrap: pretty; }

.dg-claude-skills__display {
    font-family: var(--sans);
    font-weight: var(--display-weight);
    letter-spacing: -0.032em;
    line-height: 1.03;
    font-size: clamp(40px, 5.4vw, 68px);
    text-wrap: balance;
    color: #fff;
    margin: 0;
}

.dg-claude-skills__h-section {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-size: clamp(28px, 3.2vw, 42px);
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
}

/* eyebrow with leading aquamarine dash */
.dg-claude-skills__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.dg-claude-skills__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
}
.dg-claude-skills__eyebrow--light { color: var(--green); }
.dg-claude-skills__eyebrow--center { justify-content: center; }
/* Compat with previous eyebrow--dark hook (now just standard eyebrow on light bg) */
.dg-claude-skills__eyebrow--dark { color: var(--muted); }

/* ─────────────────────────────────────────────────────────────────────
   Layout
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills .container,
.dg-claude-skills__wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--content-pad);
}

/* ─────────────────────────────────────────────────────────────────────
   Surfaces — hero gradient + vignette + ribbon field
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__surf-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 760px 480px at 86% 112%, rgba(0,222,162,.16), transparent 62%),
        radial-gradient(ellipse 480px 360px at 6% -10%, rgba(0,222,162,.07), transparent 60%),
        var(--hero-base);
    color: #fff;
}

.dg-claude-skills__vignette::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse 82% 72% at 50% 42%, transparent 0%, rgba(10,12,12,.32) 74%, rgba(0,0,0,.7) 100%);
}

.dg-claude-skills__surf-dark {
    background: var(--dg-gray-900);
    color: #fff;
}

/* Hero ribbon SVG — JS animates the inner <g> transforms */
.dg-claude-skills__ribbon-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--flourish);
    transition: opacity .3s var(--ease);
    pointer-events: none;
    z-index: 0;
}

/* Light-panel wrapper for the content area BELOW the hero */
.dg-claude-skills__light-panel {
    position: relative;
    background: var(--cream);
}

/* hero → page seam — angle cutoff */
.dg-claude-skills__seam-shape {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 72px;
    transform: translateY(-99%);
    z-index: 2;
    pointer-events: none;
}
.dg-claude-skills__seam-shape svg { display: block; width: 100%; height: 100%; }
.dg-claude-skills__seam-shape svg path { fill: var(--cream); }

/* ─────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    padding: 11px 20px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
    white-space: nowrap;
}
.dg-claude-skills__btn--ink         { background: var(--action); color: #fff; }
.dg-claude-skills__btn--ink:hover   { background: var(--action-hover); }
.dg-claude-skills__btn--ghost       { background: transparent; color: var(--ink); border-color: var(--line-2); }
.dg-claude-skills__btn--ghost:hover { border-color: var(--ink); background: var(--dg-gray-50); }
.dg-claude-skills__btn--ghost-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.22); }
.dg-claude-skills__btn--ghost-light:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); }

.dg-claude-skills :focus-visible {
    outline: 3px solid var(--dg-blue-light);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────────────────────────────────
   Chips
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    transition: all .18s var(--ease);
}
.dg-claude-skills__chip:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--dg-gray-50);
}

/* category chip — small, uppercase, neutral */
.dg-claude-skills__chip--cat {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--dg-gray-100);
    border-color: var(--line);
}
.dg-claude-skills__chip--cat:hover {
    background: var(--dg-gray-100);
    border-color: var(--line);
    color: var(--ink-3);
}

/* Dark surface variant — used when the cat chip sits on the surf-hero. */
.dg-claude-skills__chip--cat-on-dark,
.dg-claude-skills__chip--cat-on-dark:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .9);
}

/* "All" chip — active state, light text on dark ink (NOT black-on-black) */
.dg-claude-skills__chip--all {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.dg-claude-skills__chip--all:hover {
    background: var(--action-hover);
    color: #fff;
    border-color: var(--action-hover);
}

.dg-claude-skills__chip-count { color: var(--muted); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────────
   Complexity dots
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__complexity {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.dg-claude-skills__complexity-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.dg-claude-skills__dots {
    display: inline-flex;
    gap: 4px;
}
.dg-claude-skills__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-2);
}
.dg-claude-skills__dot.is-on { background: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────
   Cards
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: var(--ink);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    min-height: 220px;
    width: 100%;
}
.dg-claude-skills__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-2);
}
.dg-claude-skills__card--featured { padding: 28px; }

.dg-claude-skills__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

/* Single, consistent green tone across every skill card / hero — no cycling.
   Centering is done with flex; SVGs share a fixed glyph size so visual weight
   is uniform regardless of card or hero context. */
.dg-claude-skills__icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--green-wash);
    color: var(--dg-aqua-700);
    border: 1px solid rgba(0, 179, 129, .22);
    flex-shrink: 0;
    line-height: 0;
}
.dg-claude-skills__icon-circle svg {
    display: block;
    width: 56%;
    height: 56%;
}
.dg-claude-skills__icon-circle--lg { width: 60px; height: 60px; border-radius: 14px; }
.dg-claude-skills__icon-circle--lg svg { width: 52%; height: 52%; }

/* Legacy tone variants kept as no-ops so any stale class on existing markup
   doesn't break. Every circle now reads as the same brand-green tone. */
.dg-claude-skills__icon-circle--cool,
.dg-claude-skills__icon-circle--cream {
    background: var(--green-wash);
    color: var(--dg-aqua-700);
    border-color: rgba(0, 179, 129, .22);
}

.dg-claude-skills__pick {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent-deep);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dg-claude-skills__skill-name {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 7px;
    letter-spacing: -0.01em;
}

.dg-claude-skills__card-title {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.14;
    margin: 0 0 10px;
    color: var(--ink);
}
.dg-claude-skills__card--featured .dg-claude-skills__card-title { font-size: 25px; }

.dg-claude-skills__card-outcome {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}
.dg-claude-skills__card--featured .dg-claude-skills__card-outcome {
    font-size: 15.5px;
    color: var(--ink-3);
}

.dg-claude-skills__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.dg-claude-skills__card--featured .dg-claude-skills__card-foot {
    margin-top: 22px;
    padding-top: 18px;
}

.dg-claude-skills__view {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   Hero (archive)
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__hero {
    position: relative;
    min-height: min(86vh, 720px);
    display: flex;
    align-items: center;
    text-align: center;
}
.dg-claude-skills__hero > .dg-claude-skills__wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: 64px;
    padding-bottom: 52px;
}

.dg-claude-skills__hero .dg-claude-skills__display {
    margin-top: 18px;
    max-width: 860px;
    margin-inline: auto;
}

.dg-claude-skills__hero-sub {
    color: rgba(255,255,255,.76);
    font-size: 17px;
    line-height: 1.5;
    margin: 15px auto 0;
    max-width: 600px;
    text-wrap: pretty;
}
.dg-claude-skills__hero-sub strong {
    color: #fff;
    font-weight: 600;
}

.dg-claude-skills__search {
    display: flex;
    align-items: stretch;
    max-width: 580px;
    margin: 28px auto 0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.dg-claude-skills__search-field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: #fff;
    height: 56px;
    padding: 0 18px;
    border-radius: 12px 0 0 12px;
}
.dg-claude-skills__search-icon {
    display: inline-flex;
    color: var(--muted);
    margin-right: 12px;
}
.dg-claude-skills__search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    font-family: var(--sans);
    font-size: 15.5px;
    color: var(--ink);
    outline: none;
}
.dg-claude-skills__search-input::placeholder { color: var(--muted); }

.dg-claude-skills__search-btn {
    height: 56px;
    padding: 0 26px;
    border: none;
    background: var(--action);
    color: #fff;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    transition: background .18s var(--ease);
}
.dg-claude-skills__search-btn:hover { background: var(--action-hover); }

/* Trending tags under search bar */
.dg-claude-skills__trending {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
    max-width: 640px;
    padding: 0;
    list-style: none;
}
.dg-claude-skills__trending-title {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    letter-spacing: 0.3px;
    margin-right: 2px;
}
/* Tag pill — light text on a darker translucent fill, with a visible border.
   Lives on the dark archive hero (below the search). Mirrors the mockup's
   `.tag` treatment: subtle, readable, and clearly clickable. */
.dg-claude-skills__tag {
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.dg-claude-skills__tag:hover {
    background: rgba(0, 0, 0, .42);
    color: #fff;
    border-color: var(--green);
}

/* ─────────────────────────────────────────────────────────────────────
   Featured row
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__featured { padding: clamp(28px, 3vw, 40px) 0 clamp(24px, 2.5vw, 32px); }
.dg-claude-skills__featured-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.dg-claude-skills__featured-head h2 { margin-top: 12px; }
.dg-claude-skills__featured-blurb {
    color: var(--muted);
    font-size: 15.5px;
    max-width: 320px;
    margin: 0 0 4px;
    text-wrap: pretty;
}

.dg-claude-skills__featured-grid,
.dg-claude-skills__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .dg-claude-skills__featured-grid,
    .dg-claude-skills__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .dg-claude-skills__featured-grid,
    .dg-claude-skills__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   Skeleton cards — shown in the grid while an AJAX category filter loads.
   Shimmer placeholders that mirror the real card's vertical rhythm so the
   layout doesn't jump when results swap in.
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__card--skeleton {
    cursor: default;
    pointer-events: none;
    /* match the real card box so the grid height stays stable */
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    display: block;
}
.dg-claude-skills__card--skeleton:hover { transform: none; box-shadow: none; }
.dg-claude-skills__sk {
    --sk-base: rgba(0, 0, 0, .06);
    --sk-shine: rgba(0, 0, 0, .11);
    background: linear-gradient(100deg, var(--sk-base) 30%, var(--sk-shine) 50%, var(--sk-base) 70%);
    background-size: 220% 100%;
    border-radius: 8px;
    animation: dg-sk-shimmer 1.25s ease-in-out infinite;
}
.dg-claude-skills__sk--icon  { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px; }
.dg-claude-skills__sk--name  { width: 42%; height: 11px; border-radius: 4px; margin-bottom: 14px; }
.dg-claude-skills__sk--title { width: 80%; height: 20px; margin-bottom: 14px; }
.dg-claude-skills__sk--line  { width: 100%; height: 12px; margin-bottom: 8px; }
.dg-claude-skills__sk--short { width: 60%;  height: 12px; margin-bottom: 22px; }
.dg-claude-skills__sk--chip  { width: 38%;  height: 24px; border-radius: 999px; }

@keyframes dg-sk-shimmer {
    0%   { background-position: 180% 0; }
    100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dg-claude-skills__sk { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   The Library — collapses old `grid-section` + `catfilter` into one
   structural section. Title row, then the filter bar (icon + 4 dropdowns
   + tnum counter), then the skill grid.
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__library {
    padding: clamp(28px, 3vw, 44px) 0 24px;
}
.dg-claude-skills__library-head { margin-bottom: 22px; }
.dg-claude-skills__library-head h2 { margin: 0; }

.dg-claude-skills__library-filterbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 30px;
}
.dg-claude-skills__library-filter-icon {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
}

.dg-claude-skills__library-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink-3);
    font-size: 13px;
    transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
    cursor: pointer;
}
.dg-claude-skills__library-filter:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--dg-gray-50);
}
.dg-claude-skills__library-filter:has(select:disabled) {
    cursor: default;
    opacity: 0.7;
}
.dg-claude-skills__library-filter:has(select:disabled):hover {
    border-color: var(--line-2);
    color: var(--ink-3);
    background: var(--paper);
}
.dg-claude-skills__library-filter-label {
    color: var(--muted);
    font-weight: 600;
    font-family: var(--sans);
    letter-spacing: -0.005em;
}
.dg-claude-skills__library-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.005em;
    padding-right: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23696B6C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    cursor: pointer;
}
.dg-claude-skills__library-select:disabled {
    cursor: default;
}
.dg-claude-skills__library-spacer { flex: 1; }
.dg-claude-skills__library-counter {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   Pagination
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}
.dg-claude-skills__page-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color 0.2s var(--ease);
}
.dg-claude-skills__page-link:hover { border-color: var(--ink); }
.dg-claude-skills__page-status {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   CEO byline / Newsletter / Footer CTA on the archive
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__ceo {
    padding: clamp(48px, 6vw, 80px) 0;
    background: transparent;
}
.dg-claude-skills__ceo-body {
    max-width: 720px;
    margin: 24px auto 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

.dg-claude-skills__newsletter {
    padding: clamp(48px, 7vw, 96px) 0;
    text-align: center;
}
.dg-claude-skills__hs-form { max-width: 480px; margin: 28px auto 0; }
.dg-claude-skills__newsletter-placeholder {
    max-width: 480px;
    margin: 28px auto 0;
    padding: 24px;
    border: 1px dashed var(--line-2);
    border-radius: 12px;
    color: var(--muted);
    font-size: 14px;
}

/* CTA band — matches mockup's surf-hero rounded card */
.dg-claude-skills__cta-band {
    padding: clamp(36px, 4.5vw, 64px) 0;
}
.dg-claude-skills__cta-band-inner {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 760px 480px at 86% 112%, rgba(0,222,162,.16), transparent 62%),
        radial-gradient(ellipse 480px 360px at 6% -10%, rgba(0,222,162,.07), transparent 60%),
        var(--hero-base);
    color: #fff;
}
.dg-claude-skills__cta-band-content {
    position: relative;
    z-index: 2;
    padding: clamp(40px, 5vw, 72px);
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
}
.dg-claude-skills__cta-band-title {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-size: clamp(28px, 3.2vw, 42px);
    color: #fff;
    margin: 20px 0 0;
}
.dg-claude-skills__cta-band-sub {
    color: rgba(255,255,255,.74);
    font-size: 16.5px;
    margin: 16px auto 0;
    max-width: 520px;
    text-wrap: pretty;
}
.dg-claude-skills__cta-band-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* ─────────────────────────────────────────────────────────────────────
   Final CTA — rounded surf-hero card matching the mockup's `CTABand`.
   The card sits ON the cream content panel, not flush to the viewport;
   the section provides the surrounding padding.
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__final-cta {
    padding: clamp(48px, 7vw, 96px) 0;
}
.dg-claude-skills__final-cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 760px 480px at 86% 112%, rgba(0,222,162,.16), transparent 62%),
        radial-gradient(ellipse 480px 360px at 6% -10%, rgba(0,222,162,.07), transparent 60%),
        var(--hero-base, #0E2A20);
    color: #fff;
}
.dg-claude-skills__final-cta-content {
    position: relative;
    z-index: 2;
    padding: clamp(40px, 5vw, 72px);
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
}
.dg-claude-skills__final-cta-title {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-size: clamp(28px, 3.2vw, 42px);
    color: #fff;
    margin: 20px 0 0;
    text-wrap: balance;
}
.dg-claude-skills__final-cta-title .accent-serif {
    color: var(--accent-hero, var(--green));
}
.dg-claude-skills__final-cta-sub {
    color: rgba(255, 255, 255, .74);
    font-size: 16.5px;
    margin: 16px auto 0;
    max-width: 520px;
}
.dg-claude-skills__final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Single-page footer CTA — kept for single-footer-cta.twig.
   The archive uses .dg-claude-skills__final-cta (rounded surf-hero card);
   the single page keeps a flat dark band so the per-skill view doesn't
   compete with the page's own hero. */
.dg-claude-skills__footer-cta {
    background: var(--dg-gray-900);
    color: #fff;
    padding: 64px 0;
    text-align: center;
}
.dg-claude-skills__footer-cta-title {
    font-family: var(--sans);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.14;
    margin: 0 0 24px;
    color: #fff;
}
.dg-claude-skills__footer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Empty state */
.dg-claude-skills__empty,
.dg-claude-skills__empty-grid {
    padding: 80px 20px;
    text-align: center;
    color: var(--muted);
}
.dg-claude-skills__empty h2 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 26px;
    color: var(--ink);
    margin: 0 0 8px;
}

/* Screen-reader helper */
.dg-claude-skills .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* =========================================================================
   Single skill page (/skills/<slug>/) — module styles
   ========================================================================= */

/* Slash-separated breadcrumb. Default colors are for a light surface; the
   `--dark` modifier is used on the single hero where the crumb sits on top
   of the dark surf-hero gradient. */
.dg-claude-skills__crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 22px;
    position: relative;
    z-index: 2;
}
.dg-claude-skills__crumb-link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: color .18s var(--ease);
}
.dg-claude-skills__crumb-link:link,
.dg-claude-skills__crumb-link:visited { color: var(--muted); }
.dg-claude-skills__crumb-link:hover { color: var(--ink); }
.dg-claude-skills__crumb-sep {
    color: var(--line-2);
    user-select: none;
}
.dg-claude-skills__crumb-current {
    color: var(--ink);
    font-weight: 600;
}

/* Dark variant — sits on the dark surf-hero. !important defeats the theme's
   global `.sh-2024 .main a:not(.btn):not(.primary-link)` anchor color rule
   which would otherwise paint these links near-black on a dark surface. */
.dg-claude-skills__crumb--dark { color: rgba(255,255,255,.65); }
.dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link,
.dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link:link,
.dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link:visited {
    color: rgba(255,255,255,.7) !important;
}
.dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link:hover { color: #fff !important; }
.dg-claude-skills__crumb--dark .dg-claude-skills__crumb-sep { color: rgba(255,255,255,.35); }
.dg-claude-skills__crumb--dark .dg-claude-skills__crumb-current { color: #fff; }

/* Single hero — DARK surf-hero surface matching the standalone mockup's
   `.surf-hero` + `.vignette::after`. The element carries both `__single-hero`
   AND `__nav-offset` classes; the radial gradients here override
   `__nav-offset`'s flat `var(--hero-base)` background (later rule wins). */
.dg-claude-skills__single-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 760px 480px at 86% 112%, rgba(0, 222, 162, .16), transparent 62%),
        radial-gradient(ellipse 480px 360px at 6% -10%, rgba(0, 222, 162, .07), transparent 60%),
        var(--hero-base);
    color: #fff;
}
/* Clear the fixed nav using its TRUE height (set by nav-offset.js) instead of
   the static breakpoint guess — fixes mobile's excess gap + tablet's hidden
   breadcrumb. Overrides the shared __nav-offset padding on this element. */
.dg-claude-skills--single .dg-claude-skills__single-hero.dg-claude-skills__nav-offset {
    padding-top: var(--dg-nav-h0, var(--dg-cs-nav-offset));
}
/* Vignette overlay supplied by `__vignette::after` (the section carries that
   class). No need to re-declare it here. */
.dg-claude-skills__single-hero > .dg-claude-skills__wrap {
    position: relative;
    z-index: 2;
    /* nav-offset (122px) already clears the fixed nav; this is the breathing
       room above the breadcrumb. Bottom padding matches the standalone's ~56px. */
    padding-top: 40px;
    padding-bottom: clamp(44px, 5vw, 60px);
}

.dg-claude-skills__single-hero-head {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
/* Text column is capped so the display title + outcome wrap at the same
   measure as the standalone (≈640px), independent of the icon's width. */
.dg-claude-skills__single-hero-text { min-width: 0; max-width: 640px; }
/* Top-align the icon chip with the title (title now has no top margin). */
.dg-claude-skills__single-hero-head .dg-claude-skills__icon-circle--lg {
    margin-top: 0;
}

.dg-claude-skills__single-title {
    font-family: var(--sans);
    font-weight: var(--display-weight);
    letter-spacing: -0.032em;
    line-height: 1.03;
    font-size: clamp(38px, 5vw, 68px);
    color: #fff;
    /* Top margin zeroed so the title's cap-height aligns with the flex-start
       icon chip; keep the lower rhythm before the outcome line. */
    margin: 0 0 0.6em;
    text-wrap: balance;
}
.dg-claude-skills__single-outcome {
    font-size: 19px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    max-width: 640px;
    margin: 0;
    text-wrap: pretty;
}
.dg-claude-skills__single-meta {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.dg-claude-skills__meta-item {
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
.dg-claude-skills__meta-sep {
    margin: 0 12px;
    color: rgba(255, 255, 255, .35);
}

/* ─────────────────────────────────────────────────────────────────────
   Single hero — LIGHT brand-green variant (overrides the dark surf-hero).
   Background is the DataGrail green (--accent-hero / #00E3A3) with soft white
   highlights for depth; text flips to deep brand ink so every pairing clears
   WCAG AA. Scoped to `--single` so the archive search band stays dark.
   Measured contrast on #00E3A3 (rel. luminance ≈ 0.575):
     • ink #191A1A title ............ ~10.7:1  (AAA)
     • --hero-base #0E2A20 body ...... ~9.2:1  (AAA)
     • white icon chip / dark glyph .. high
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills--single .dg-claude-skills__single-hero {
    /* Replicated 1:1 from the standalone "Skill Detail" mockup's `.surf-skill`
       — a light, green-forward header: pale mint base fading to white with two
       soft brand-green radial glows (top-right + bottom-left). color:var(--ink)
       so all hero text clears WCAG AA against the light surface. */
    background:
        radial-gradient(ellipse 720px 420px at 92% -10%, rgba(0, 227, 163, .26), transparent 62%),
        radial-gradient(ellipse 560px 380px at 4% 120%, rgba(0, 227, 163, .12), transparent 60%),
        linear-gradient(168deg, #E6FBF3 0%, #F1FBF7 46%, #FFFFFF 100%);
    color: var(--ink);
}
/* The first content section melts straight out of the hero fade — drop its
   divider border so no hairline crosses the green→cream transition. */
.dg-claude-skills--single .dg-claude-skills__light-panel > :first-child {
    border-top: 0;
}
/* Drop the darkening vignette on the light hero — it would muddy the green. */
.dg-claude-skills--single .dg-claude-skills__single-hero.dg-claude-skills__vignette::after {
    display: none;
}
/* White icon chip with the deep-green glyph reads cleanly on the bright green. */
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__icon-circle--lg {
    background: #fff;
    color: var(--dg-aqua-700);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
/* Dark breadcrumb (base variant is white-on-dark; flip to ink-on-green). */
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__crumb--dark { color: rgba(14, 42, 32, .62); }
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link,
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link:link,
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link:visited { color: rgba(14, 42, 32, .85) !important; }
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__crumb--dark .dg-claude-skills__crumb-link:hover { color: var(--ink) !important; }
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__crumb--dark .dg-claude-skills__crumb-sep { color: rgba(14, 42, 32, .4); }
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__crumb--dark .dg-claude-skills__crumb-current { color: var(--ink); }
/* Title / outcome / meta → deep brand ink. */
.dg-claude-skills--single .dg-claude-skills__single-title { color: var(--ink); }
.dg-claude-skills--single .dg-claude-skills__single-outcome { color: var(--hero-base); }
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__meta-item { color: var(--hero-base); }
.dg-claude-skills--single .dg-claude-skills__single-hero .dg-claude-skills__meta-sep { color: rgba(14, 42, 32, .42); }

/* ─────────────────────────────────────────────────────────────────────
   Quick facts
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__quickfacts {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 30px 0;
}
.dg-claude-skills__quickfacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    margin: 0;
}
.dg-claude-skills__quickfact { margin: 0; }
.dg-claude-skills__quickfact-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.dg-claude-skills__quickfact-value {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────
   Markdown code block (the skill itself)
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__md-section {
    padding: clamp(48px, 6vw, 72px) 0 24px;
}
.dg-claude-skills__md-section .dg-claude-skills__wrap { max-width: 920px; }
.dg-claude-skills__md-intro {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 14px 0 28px;
    max-width: 620px;
    text-wrap: pretty;
}

/* Bundle (multi-file skill) panel — shows the folder structure above the
   core-file preview. */
.dg-claude-skills__bundle {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.dg-claude-skills__bundle-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--ink);
}
.dg-claude-skills__bundle-icon { display: inline-flex; color: var(--dg-aqua-700, #00805c); }
.dg-claude-skills__bundle-title { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.dg-claude-skills__bundle-tree {
    margin: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-3);
    white-space: pre;
    overflow-x: auto;
    tab-size: 2;
}
/* small "core file" tag in the code head */
.dg-claude-skills__code-tag {
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(108, 214, 177, .14);
    color: var(--green-soft, #6cd6b1);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.dg-claude-skills__code-shell {
    background: var(--dg-gray-900);
    border: 1px solid rgba(108, 214, 177, .16);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.dg-claude-skills__code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(108, 214, 177, .12);
}
.dg-claude-skills__code-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.dg-claude-skills__code-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dg-claude-skills__code-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}
.dg-claude-skills__code-dot--on { background: var(--green); }
.dg-claude-skills__code-filename {
    font-family: var(--mono);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
}
.dg-claude-skills__code-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.dg-claude-skills__code-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    background: rgba(156, 239, 194, .12);
    color: var(--green-soft);
    border: 1px solid rgba(156, 239, 194, .24);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.dg-claude-skills__code-btn:hover {
    background: rgba(156, 239, 194, .2);
    color: #fff;
}
.dg-claude-skills__code-btn--primary {
    background: var(--green);
    color: var(--ink);
    border-color: var(--green);
}
.dg-claude-skills__code-btn--primary:hover {
    background: var(--green-soft);
    color: var(--ink);
    border-color: var(--green-soft);
}
.dg-claude-skills__code-btn.is-copied {
    background: var(--green);
    color: var(--ink);
    border-color: var(--green);
}
.dg-claude-skills__code-body {
    overflow: auto;
    /* Cap the preview height so long skills (the audit .md runs ~4000px) don't
       dominate the page — it stays scrollable, and Copy/Download grab the whole
       thing regardless. */
    max-height: 60vh;
    padding: 24px 26px;
    background: var(--dg-gray-900);
}
.dg-claude-skills__code-body::-webkit-scrollbar { height: 8px; width: 8px; }
.dg-claude-skills__code-body::-webkit-scrollbar-thumb { background: rgba(108, 214, 177, .24); border-radius: 8px; }
.dg-claude-skills__md-pre {
    margin: 0;
    background: transparent;
    color: #cfe7da;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.74;
    white-space: pre;
    tab-size: 2;
}
.dg-claude-skills__md-source {
    font-family: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   How-to-use steps
   ───────────────────────────────────────────────────────────────────── */
/* Prose section — "What it covers" / "What you get back" / "How to use".
   Renders ACF-editable markdown into a clean editorial list on the cream panel. */
.dg-claude-skills__prose {
    padding: clamp(40px, 5vw, 60px) 0;
    border-top: 1px solid var(--line);
}
.dg-claude-skills__prose .dg-claude-skills__wrap { max-width: 920px; }
.dg-claude-skills__prose-title {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 3vw, 32px);
    color: var(--ink);
    margin: 14px 0 0;
}
.dg-claude-skills__prose-body { margin-top: 20px; color: var(--ink-3); font-size: 16px; line-height: 1.6; }
.dg-claude-skills__prose-body > :first-child { margin-top: 0; }
.dg-claude-skills__prose-body p { margin: 0 0 14px; max-width: 760px; }
.dg-claude-skills__prose-body strong { color: var(--ink); font-weight: 600; }
.dg-claude-skills__prose-body ul,
.dg-claude-skills__prose-body ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dg-claude-skills__prose-body li {
    position: relative;
    padding-left: 26px;
    max-width: 820px;
}
/* bullet for unordered lists */
.dg-claude-skills__prose-body ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--green);
}
/* numbered chips for ordered lists (How to use) */
.dg-claude-skills__prose-body ol { counter-reset: dg-step; gap: 14px; }
.dg-claude-skills__prose-body ol > li { counter-increment: dg-step; padding-left: 40px; min-height: 28px; }
.dg-claude-skills__prose-body ol > li::before {
    content: counter(dg-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--green-wash);
    color: var(--dg-aqua-700, #00805c);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-claude-skills__howto {
    padding: clamp(48px, 6vw, 72px) 0;
}
/* Width matches when-to-use so the two sections share the same outer column. */
.dg-claude-skills__howto .dg-claude-skills__wrap { max-width: 920px; }
.dg-claude-skills__howto-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 26px;
}
.dg-claude-skills__howto-step {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 26px;
}
.dg-claude-skills__howto-num {
    display: block;
    font-family: var(--sans);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
    color: var(--green);
    margin-bottom: 16px;
}
.dg-claude-skills__howto-h {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 9px;
    color: var(--ink);
}
.dg-claude-skills__howto-b {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    text-wrap: pretty;
}
.dg-claude-skills__howto-trigger {
    color: var(--ink);
    font-weight: 600;
}
.dg-claude-skills__inline-code {
    font-family: var(--mono);
    font-size: 0.92em;
}

/* ─────────────────────────────────────────────────────────────────────
   When-to-use
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__whento {
    padding: 0 0 clamp(48px, 6vw, 72px);
}
.dg-claude-skills__whento .dg-claude-skills__wrap { max-width: 920px; }
.dg-claude-skills__whento-intro {
    font-size: 16px;
    color: var(--ink-3);
    line-height: 1.55;
    margin: 16px 0 14px;
}
.dg-claude-skills__whento-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dg-claude-skills__whento-item {
    padding: 12px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────
   Example I/O
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__example {
    padding: clamp(40px, 5vw, 64px) 0;
    background: var(--dg-gray-50);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.dg-claude-skills__example-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 26px;
}
.dg-claude-skills__example-col {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
}
.dg-claude-skills__example-h {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}
.dg-claude-skills__example-body {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    background: var(--cream);
    padding: 12px 14px;
    border-radius: 8px;
    white-space: pre-wrap;
    overflow-x: auto;
}
.dg-claude-skills__example-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────
   Related skills
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__related {
    padding: clamp(40px, 5vw, 64px) 0;
}
.dg-claude-skills__related-head { margin-bottom: 26px; }
.dg-claude-skills__related-head h2 { margin-top: 16px; }
.dg-claude-skills__related-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* ─────────────────────────────────────────────────────────────────────
   Author byline — dark card on light bg
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__byline {
    padding: clamp(16px, 2vw, 24px) 0 clamp(24px, 2.5vw, 32px);
}
.dg-claude-skills__byline-card {
    background: var(--dg-gray-900);
    color: #fff;
    border-radius: 18px;
    padding: 30px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.dg-claude-skills__byline-head {
    display: flex;
    align-items: center;
    gap: 20px;
}
.dg-claude-skills__byline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(156,239,194,.12);
    color: var(--green-soft);
    flex-shrink: 0;
}
.dg-claude-skills__byline-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--green-soft);
    margin-bottom: 6px;
}
.dg-claude-skills__byline-name {
    margin: 0;
    font-family: var(--sans);
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────
   LinkedIn source — "From the source" backlink card (dark surface)
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__linkedin-source {
    padding: 24px 0 clamp(40px, 5vw, 64px);
}
.dg-claude-skills__linkedin-source .dg-claude-skills__wrap { max-width: 920px; }
.dg-claude-skills__linkedin-card {
    background: var(--dg-gray-900);
    color: #fff;
    border-radius: 18px;
    padding: 30px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.dg-claude-skills__linkedin-head {
    display: flex;
    align-items: center;
    gap: 20px;
}
.dg-claude-skills__linkedin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(156, 239, 194, .12);
    color: var(--green-soft);
    flex-shrink: 0;
}
.dg-claude-skills__linkedin-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--green-soft);
    margin-bottom: 6px;
}
.dg-claude-skills__linkedin-byline {
    margin: 0;
    font-family: var(--sans);
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: balance;
}
.dg-claude-skills__linkedin-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-md);
    background: var(--green);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    border: 1px solid var(--green);
    flex-shrink: 0;
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
.dg-claude-skills__linkedin-cta:link,
.dg-claude-skills__linkedin-cta:visited { color: var(--ink); }
.dg-claude-skills__linkedin-cta:hover {
    background: var(--green-soft);
    border-color: var(--green-soft);
}
.dg-claude-skills__linkedin-cta[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: auto; /* keep click target so the no-op handler fires */
}

/* ─────────────────────────────────────────────────────────────────────
   Reveal animation (entrance only — content visible at rest)
   ───────────────────────────────────────────────────────────────────── */
.dg-claude-skills__reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.dg-claude-skills__reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ─────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dg-claude-skills__single-hero-head { gap: 16px; }
    .dg-claude-skills__single-hero-head .dg-claude-skills__icon-circle--lg { width: 48px; height: 48px; }
}
@media (max-width: 768px) {
    .dg-claude-skills__howto-steps,
    .dg-claude-skills__example-grid,
    .dg-claude-skills__featured-grid {
        grid-template-columns: 1fr;
    }
    .dg-claude-skills__code-head { flex-wrap: wrap; }
    .dg-claude-skills__code-actions { width: 100%; justify-content: flex-end; }
    .dg-claude-skills__code-body { padding: 18px 16px; }
    .dg-claude-skills__md-pre { font-size: 12.5px; }
    .dg-claude-skills__byline-card { flex-direction: column; align-items: flex-start; }
    .dg-claude-skills__byline-head { align-items: flex-start; }
    .dg-claude-skills__hero > .dg-claude-skills__wrap { padding-top: 48px; padding-bottom: 40px; }
    /* nav clearance is on the section (dynamic); the wrap is just breathing room */
    .dg-claude-skills__single-hero > .dg-claude-skills__wrap { padding-top: 26px; padding-bottom: clamp(36px, 7vw, 48px); }
    .dg-claude-skills__featured-head { flex-direction: column; align-items: flex-start; }
    .dg-claude-skills__featured-blurb { max-width: none; }
    .dg-claude-skills__single-title { font-size: clamp(30px, 6.4vw, 44px); }
}

/* Single hero on phones — a centered stack: icon on top, then title, outcome,
   and meta all centered. The desktop icon-left layout reads cramped on narrow
   screens, so we restructure rather than just shrink it. */
@media (max-width: 600px) {
    .dg-claude-skills__search { flex-direction: column; border-radius: 12px; }
    .dg-claude-skills__search-field { border-radius: 12px 12px 0 0; height: 52px; }
    .dg-claude-skills__search-btn { border-radius: 0 0 12px 12px; height: 52px; padding: 0 18px; }
    .dg-claude-skills__hero { min-height: auto; }
    .dg-claude-skills__hero > .dg-claude-skills__wrap { padding-top: 40px; padding-bottom: 36px; }

    .dg-claude-skills__single-hero .dg-claude-skills__crumb { justify-content: center; margin-bottom: 22px; }
    .dg-claude-skills__single-hero-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }
    .dg-claude-skills__single-hero-text { max-width: 100%; }
    .dg-claude-skills__single-hero-head .dg-claude-skills__icon-circle--lg {
        width: 58px; height: 58px; margin-top: 0;
    }
    .dg-claude-skills__single-title { margin: 0 0 14px; }
    .dg-claude-skills__single-outcome { margin: 0 auto; font-size: 17px; }
    .dg-claude-skills__single-meta { justify-content: center; margin-top: 22px; }
}

/* prefers-reduced-motion — kill ribbon animation and reveal */
@media (prefers-reduced-motion: reduce) {
    .dg-claude-skills__ribbon-field g { transform: none !important; }
    .dg-claude-skills__reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   Search page (/skills/search/) — morphing band, facets, results.
   1:1 port of the standalone search mockup, namespaced + integrated with the
   theme's fixed nav (sticky offsets keyed off --dg-cs-nav-offset).
   ========================================================================= */

/* ---- morphing band ---- */
.dg-claude-skills__search-band {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse 700px 460px at 88% 108%, rgba(0, 224, 125, .20), transparent 60%),
        radial-gradient(ellipse 460px 340px at 8% -8%, rgba(217, 162, 117, .12), transparent 60%),
        linear-gradient(135deg, #003B4D 0%, #024250 58%, #054B5A 100%);
    transition: padding .42s var(--ease), box-shadow .3s var(--ease);
    z-index: 45;
}
/* The search root reserves the fixed-nav height so the (sticky) compact band
   has a correct normal-flow origin BELOW the nav — without this, the band
   paints at the nav offset but reserves space at y=0, so the results count +
   first card row get swallowed under the pinned band/toolbar. */
/* --dg-nav-h0 = the true (tall, scroll-0) nav height, measured by library.js
   per breakpoint (768 nav ≈144px, 414 nav ≈56px — the static var was wrong).
   Falls back to the static offset before JS runs. */
.dg-claude-skills--search { padding-top: var(--dg-nav-h0, var(--dg-cs-nav-offset)); }

.dg-claude-skills__search-band--open {
    padding-top: 36px;
    padding-bottom: 48px;
}
.dg-claude-skills__search-band--compact {
    position: sticky;
    /* --dg-nav-h tracks the nav's LIVE height (it shrinks on scroll); falls
       back to the static offset before JS runs. */
    top: var(--dg-nav-h, var(--dg-cs-nav-offset));
    padding-top: 16px;
    padding-bottom: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.dg-claude-skills__search-band-inner { position: relative; z-index: 3; }

.dg-claude-skills__search-crumb { margin: 0 0 18px; }

.dg-claude-skills__search-band-head {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    text-align: center;
    margin-bottom: 26px;
    transition: grid-template-rows .42s var(--ease), opacity .3s var(--ease), margin .42s var(--ease);
}
.dg-claude-skills__search-band-head > * { overflow: hidden; min-height: 0; }
.dg-claude-skills__search-band--compact .dg-claude-skills__search-band-head { grid-template-rows: 0fr; opacity: 0; margin: 0; }

.dg-claude-skills__search-title { color: #fff; margin-top: 16px; font-size: clamp(38px, 5vw, 60px); }
.dg-claude-skills__search-sub {
    color: #fff;
    font-size: 16.5px;
    line-height: 1.5;
    margin: 14px auto 0;
    max-width: 520px;
    text-wrap: pretty;
}

/* ---- the morphing field ---- */
.dg-claude-skills__search-shell {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    overflow: hidden;
    transition: max-width .42s var(--ease), box-shadow .3s var(--ease);
    margin-inline: auto;
    max-width: 620px;
}
.dg-claude-skills__search-band--compact .dg-claude-skills__search-shell {
    max-width: 1200px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.dg-claude-skills__search-shell-field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    height: 56px;
    transition: height .42s var(--ease);
}
.dg-claude-skills__search-band--compact .dg-claude-skills__search-shell-field { height: 50px; }
.dg-claude-skills__search-shell-icon { color: var(--muted); display: flex; flex-shrink: 0; }
.dg-claude-skills__search-shell-input {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    min-width: 0;
    margin-left: 12px;
}
.dg-claude-skills__search-shell-input::placeholder { color: var(--muted); }
.dg-claude-skills__search-shell-input::-webkit-search-cancel-button { display: none; }

/* The search shell owns its focus state. Suppress the generic component
   focus-visible ring on the bare input (it boxes the input inside the pill
   and reads as a browser default); instead lift the whole shell with a soft
   on-brand ring via :focus-within so keyboard users still get a clear cue. */
.dg-claude-skills__search-shell-input:focus,
.dg-claude-skills__search-shell-input:focus-visible {
    outline: none;
}
.dg-claude-skills__search-shell:focus-within {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28), 0 0 0 2px var(--accent-hero);
}
.dg-claude-skills__search-band--compact .dg-claude-skills__search-shell:focus-within {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18), 0 0 0 2px var(--accent-hero);
}
.dg-claude-skills__search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: var(--dg-gray-100);
    color: var(--ink-3);
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    transition: background .15s var(--ease);
}
.dg-claude-skills__search-clear:hover { background: var(--dg-gray-200); color: var(--ink); }
.dg-claude-skills__search-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 56px;
    padding: 0 22px;
    border: none;
    cursor: pointer;
    background: var(--ink);
    color: #fff;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    transition: background .18s var(--ease), height .42s var(--ease);
}
.dg-claude-skills__search-submit:hover { background: var(--action-hover, #00B381); }
.dg-claude-skills__search-band--compact .dg-claude-skills__search-submit { height: 50px; }

/* ---- trending row (open mode) ---- */
/* Outer is the grid-rows collapser (it's a band-head); the inner holds the
   flex row, centered via auto margins so it never drifts mid-collapse. */
.dg-claude-skills__search-trending { margin-top: 18px; }
.dg-claude-skills__search-trending-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}
.dg-claude-skills__search-try-label { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .5); letter-spacing: .3px; margin-right: 2px; }
.dg-claude-skills__search-trend-tag {
    padding: 7px 15px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .86);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    transition: all .2s var(--ease);
}
.dg-claude-skills__search-trend-tag:hover { border-color: var(--green); color: #fff; }

/* ---- idle / browse state ---- */
.dg-claude-skills__search-idle { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 88px); }
.dg-claude-skills__search-recent { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.dg-claude-skills__search-recent-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dg-claude-skills__search-popular-head { margin-bottom: 24px; }

/* ---- results toolbar (sticky beneath the compact band) ---- */
.dg-claude-skills__results-bar {
    position: sticky;
    top: var(--dg-cs-nav-offset); /* JS refines to nav + compact-band height */
    z-index: 40;
    background: rgba(247, 249, 249, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.dg-claude-skills__results-bar-inner { display: flex; align-items: center; gap: 12px; padding-block: 13px; flex-wrap: wrap; }
.dg-claude-skills__results-bar-icon { display: inline-flex; color: var(--muted); }
.dg-claude-skills__results-bar-spacer { flex: 1; }
.dg-claude-skills__facets { display: inline-flex; gap: 10px; flex-wrap: wrap; }

/* facet dropdown */
.dg-claude-skills__facet { position: relative; }
.dg-claude-skills__facet-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink-3);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13.5px;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.dg-claude-skills__facet.is-active .dg-claude-skills__facet-btn { border-color: var(--ink); background: var(--ink); color: #fff; }
.dg-claude-skills__facet-label { color: var(--muted); font-weight: 600; }
.dg-claude-skills__facet.is-active .dg-claude-skills__facet-label { color: var(--green-soft); }
.dg-claude-skills__facet-val { font-weight: 700; }
.dg-claude-skills__facet-chev { opacity: .8; }
.dg-claude-skills__facet-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 210px;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.16));
}
.dg-claude-skills__facet-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    transition: background .12s var(--ease);
}
.dg-claude-skills__facet-opt:hover { background: var(--cream); }
.dg-claude-skills__facet-opt.is-on { background: var(--green-wash); }
.dg-claude-skills__facet-opt svg { color: var(--dg-aqua-700, #00805c); }
.dg-claude-skills__facet-clear {
    background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px;
}

/* sort segmented control */
.dg-claude-skills__seg { display: inline-flex; background: var(--dg-gray-100); border-radius: 8px; padding: 3px; gap: 2px; }
.dg-claude-skills__seg button {
    border: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600;
    padding: 6px 12px; border-radius: 6px; background: transparent; color: var(--muted);
    transition: background .15s var(--ease), color .15s var(--ease); white-space: nowrap;
}
.dg-claude-skills__seg button[data-on="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1)); }

/* ---- results area + count ---- */
.dg-claude-skills__results-area { padding-top: 26px; padding-bottom: clamp(56px, 7vw, 88px); }
.dg-claude-skills__results-count { font-size: 15px; color: var(--muted); margin-bottom: 22px; min-height: 24px; }
.dg-claude-skills__count-num { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-claude-skills__count-q { color: var(--ink); font-weight: 600; }
.dg-claude-skills__count-loading { display: inline-flex; align-items: center; gap: 9px; }
.dg-claude-skills__grid--empty { display: block; }

/* result card extras */
.dg-claude-skills__card-head--between { display: flex; align-items: flex-start; justify-content: space-between; }
.dg-claude-skills__li-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dg-claude-skills__li-badge svg { color: #0A66C2; }
.dg-claude-skills .dg-claude-skills__card-title mark,
.dg-claude-skills mark { background: var(--green-wash); color: var(--dg-aqua-700, #00805c); padding: 0 1px; border-radius: 3px; font-weight: 600; }
.dg-claude-skills__res-in { animation: dg-res-in .4s var(--ease) both; }
@keyframes dg-res-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* empty state */
.dg-claude-skills__search-empty { text-align: center; padding: 72px 20px; max-width: 460px; margin-inline: auto; }
.dg-claude-skills__search-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 16px; background: var(--dg-gray-100); color: var(--muted); margin-bottom: 20px;
}
.dg-claude-skills__search-empty-title { font-family: var(--sans); font-size: 24px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.dg-claude-skills__search-empty-sub { font-size: 15px; color: var(--muted); margin-bottom: 22px; }
.dg-claude-skills__search-empty-tags { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }

/* search-page responsive */
@media (max-width: 700px) {
    .dg-claude-skills__search-submit span { display: none; }   /* icon-only on mobile */
    .dg-claude-skills__search-submit { padding: 0 16px; }
    .dg-claude-skills__results-bar-inner { gap: 8px; }
    .dg-claude-skills__seg { order: 3; }
}

/* =========================================================================
   Merged archive (/skills/) — the morphing band + search folded into the main
   library page. Idle-only sections collapse and the seam flattens when a
   search/facet is active (driven by [data-active] on the root).
   ========================================================================= */

/* Sticky filter bar on the archive (top set by library.js: under the nav while
   idle, under the compact band while searching). */
.dg-claude-skills__library-filterbar--sticky {
    position: sticky;
    top: var(--dg-cs-nav-offset);
    z-index: 30;
    background: rgba(247, 249, 249, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Idle-only sections (Featured, CEO byline, the "Browse every skill" heading)
   collapse out while searching, and animate back when the search clears. */
/* grid-template-rows 1fr→0fr animates the element's REAL height smoothly (no
   max-height dead-zone jank — that was the source of the pause-then-lurch).
   The single child must clip + allow min-height:0. */
[data-search-hide-on-active] {
    display: grid;
    /* minmax(0,…) forces the track min to 0 so the child collapses fully even
       though its padding would otherwise floor the auto-minimum (the featured
       row's ~116px vertical padding was leaving a ghost gap). */
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
    transition: grid-template-rows .42s var(--ease), opacity .3s var(--ease), margin .42s var(--ease);
}
[data-search-hide-on-active] > * { overflow: hidden; min-height: 0; }
.dg-claude-skills--archive[data-active] [data-search-hide-on-active] {
    grid-template-rows: minmax(0, 0fr);
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

/* The morphing band paints at z-index 45; the seam (in the light panel) must
   sit ABOVE it in the idle state or its angled cream slant — which overlaps the
   band's bottom edge — is hidden, reading as a flat edge. Lift it above the band
   while idle; when searching, drop it under the band AFTER the flatten finishes
   (delayed z swap) so the angle→flat animation stays visible, then it tucks
   cleanly beneath the pinned compact band. */
/* The seam (the angled cream cut at the hero's bottom) sits above the band
   while idle (z 50) so its slant is visible. On search it simply FADES OUT as
   the hero collapses — no z-index swaps, no flat sliver hovering over the
   search bar — so the morph reads as one fluid motion, with the same easing +
   timing as the band/section collapse. */
.dg-claude-skills--archive .dg-claude-skills__seam-shape {
    z-index: 50;
    transition: opacity .38s var(--ease);
}
.dg-claude-skills--archive[data-active] .dg-claude-skills__seam-shape {
    opacity: 0;
    pointer-events: none;
}
.dg-claude-skills__seam-shape svg path { fill: var(--cream); }
.dg-claude-skills--archive .dg-claude-skills__seam-shape svg path {
    d: path("M0,72 L0,52 L1440,4 L1440,72 Z");
}

@media (prefers-reduced-motion: reduce) {
    [data-search-hide-on-active] { transition: none; }
    .dg-claude-skills__seam-shape svg path { transition: none; }
}

/* On the archive the band keeps the library hero copy; ensure the headline +
   sub center like the search band. */
.dg-claude-skills--archive .dg-claude-skills__search-title { text-wrap: balance; }

/* While searching, the Featured row + "Browse every skill" heading collapse,
   so the library's generous idle top padding becomes a dead gap above the
   filter bar — tighten it (and zero the collapsed head's margin). */
.dg-claude-skills--archive[data-active] .dg-claude-skills__library { padding-top: 18px; }
.dg-claude-skills--archive[data-active] .dg-claude-skills__library-head { margin-bottom: 0; }

/* ---- search row (filter toggle + search shell) ---- */
/* Desktop: the row is transparent to layout (the shell centers as before; the
   filter toggle, panel header, mobile count are hidden). */
.dg-claude-skills__search-row { display: contents; }
.dg-claude-skills__filter-toggle,
.dg-claude-skills__filter-panel-head,
.dg-claude-skills__filter-apply,
.dg-claude-skills__filter-backdrop,
.dg-claude-skills__results-count--mobile { display: none; }

/* =========================================================================
   Mobile (≤760px): the top stays a single sticky row — [filter] [search] —
   and all facets + sort move into an off-canvas panel opened by the filter
   icon. Keeps the search surface minimal.
   ========================================================================= */
@media (max-width: 760px) {
    .dg-claude-skills__search-row {
        display: flex;
        align-items: stretch;
        gap: 10px;
        max-width: 640px;
        margin-inline: auto;
    }
    .dg-claude-skills__search-shell { max-width: none; flex: 1 1 auto; margin-inline: 0; }
    .dg-claude-skills__search-band--compact .dg-claude-skills__search-shell { max-width: none; }

    /* filter toggle — a frosted button that sits on the dark band, matching the
       band's own translucent design language (the trending pills) rather than a
       stark white box. */
    .dg-claude-skills__filter-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        width: 48px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 12px;
        background: rgba(255, 255, 255, .1);
        color: #fff;
        cursor: pointer;
        box-shadow: none;
        transition: background .18s var(--ease), border-color .18s var(--ease), transform .1s var(--ease);
    }
    .dg-claude-skills__filter-toggle:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
    .dg-claude-skills__filter-toggle:active { transform: scale(.95); }
    /* dot indicator when one or more facets are active */
    .dg-claude-skills__filter-toggle.is-filtered::after {
        content: "";
        position: absolute; top: 7px; right: 7px;
        width: 7px; height: 7px; border-radius: 999px;
        background: var(--green);
        box-shadow: 0 0 0 2px var(--hero-base);
    }

    /* the filter bar becomes a right-side off-canvas panel */
    .dg-claude-skills__library-filterbar--sticky {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: auto;
        width: min(86vw, 360px);
        z-index: 210;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 18px 20px 28px;
        margin: 0;
        border: none;
        border-radius: 0;
        background: var(--paper);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: -16px 0 40px rgba(0, 0, 0, .22);
        transform: translateX(100%);
        transition: transform .32s var(--ease);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .dg-claude-skills--filters-open .dg-claude-skills__library-filterbar--sticky { transform: none; }

    .dg-claude-skills__filter-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--sans);
        font-weight: 700;
        font-size: 16px;
        color: var(--ink);
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line);
    }
    .dg-claude-skills__filter-panel-close {
        border: none; background: var(--dg-gray-100); color: var(--ink-3);
        width: 32px; height: 32px; border-radius: 999px; font-size: 20px; line-height: 1; cursor: pointer;
    }
    /* stack facets + sort full-width in the panel */
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__results-bar-icon,
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__library-spacer,
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__library-counter { display: none; }
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__facets { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__facet { width: 100%; }
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__facet-btn { width: 100%; justify-content: flex-start; }
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__facet-menu { position: static; width: 100%; box-shadow: none; border-color: var(--line); margin-top: 6px; }
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__seg { width: 100%; justify-content: space-between; order: 0; }
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__seg button { flex: 1; }
    .dg-claude-skills__library-filterbar--sticky .dg-claude-skills__facet-clear { align-self: flex-start; }

    /* backdrop */
    .dg-claude-skills__filter-backdrop {
        display: block;
        position: fixed; inset: 0; z-index: 200;
        background: rgba(10, 12, 12, .42);
        opacity: 0; pointer-events: none;
        transition: opacity .3s var(--ease);
    }
    .dg-claude-skills--filters-open .dg-claude-skills__filter-backdrop { opacity: 1; pointer-events: auto; }

    /* mobile count line above the grid */
    .dg-claude-skills__results-count--mobile {
        display: block;
        font-size: 14px; color: var(--muted);
        margin: 0 0 16px;
    }
    .dg-claude-skills--archive[data-active] .dg-claude-skills__library { padding-top: 14px; }

    /* panel footer "Show results" button — sits right under the controls, in
       natural order (facets → sort → button). */
    .dg-claude-skills__filter-apply {
        display: block;
        margin-top: 8px;
        padding: 14px 18px;
        border: none;
        border-radius: 12px;
        background: var(--ink);
        color: #fff;
        font-family: var(--sans);
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
    }
    .dg-claude-skills__filter-apply:hover { background: var(--action-hover, #00B381); }
}