/**
 * Content Picker Widget — Frontend Styles
 *
 * Design tokens use CSS custom properties so theme authors
 * can override colours, fonts, and spacing from their own stylesheet.
 *
 * Typography: system font stack for native OS feel.
 * Colour palette: Slate / Blue from Tailwind's default scale.
 * Icons: inline SVG with stroke styling (Feather-like).
 */

/* ── Design Tokens ─────────────────────────── */
:root {
    --cpw-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, sans-serif;
    --cpw-title-size:    1.05rem;
    --cpw-title-weight:  600;
    --cpw-title-color:   #1e293b;   /* slate-800 */
    --cpw-link-color:    #2563eb;   /* blue-600  */
    --cpw-link-hover:    #1d4ed8;   /* blue-700  */
    --cpw-meta-color:    #64748b;   /* slate-500 */
    --cpw-icon-color:    #94a3b8;   /* slate-400 */
    --cpw-border-color:  #e2e8f0;   /* slate-200 */
    --cpw-bg:            #ffffff;
    --cpw-radius:        8px;
    --cpw-shadow:        0 1px 3px rgba(0,0,0,.06),
                         0 1px 2px rgba(0,0,0,.04);
    --cpw-gap:           0.75rem;
    --cpw-hover-bg:      #f8fafc;   /* slate-50  */
    --cpw-badge-bg:      #f1f5f9;   /* slate-100 */
    --cpw-badge-color:   #475569;   /* slate-600 */
}

/* ── Dark mode (OS preference) ─────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --cpw-title-color:  #e2e8f0;
        --cpw-link-color:   #60a5fa;   /* blue-400  */
        --cpw-link-hover:   #93bbfd;
        --cpw-meta-color:   #94a3b8;
        --cpw-icon-color:   #64748b;
        --cpw-border-color: #334155;   /* slate-700 */
        --cpw-bg:           #1e293b;   /* slate-800 */
        --cpw-shadow:       0 1px 3px rgba(0,0,0,.3);
    }
}

/* ── Widget wrapper ────────────────────────── */
/* #12 Container query readiness — widget adapts to own width */
@supports (container-type: inline-size) {
    .cpw-widget { container-type: inline-size; container-name: cpw; }
}

.cpw-widget {
    font-family:   var(--cpw-font);
    background:    var(--cpw-bg);
    border:        1px solid var(--cpw-border-color);  /* #3 reliable edge */
    border-radius: var(--cpw-radius);
    box-shadow:    var(--cpw-shadow);
    padding:       1.5rem 1.25rem;
    box-sizing:    border-box;
    position:      relative;
    overflow:      visible;
    margin:        14px;  /* breathing room for corner flowers */
}

/* ── Corner decorations ────────────────────── *
 * Four <span class="cpw-corner"> elements at the
 * widget box corners, positioned absolute to
 * .cpw-widget. Decoration type set via
 * .cpw-deco--{slug} class.
 * ──────────────────────────────────────────── */

/* Base corner span */
.cpw-widget .cpw-corner {
    position: absolute;
    width:  36px;
    height: 36px;
    z-index: 1;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Corner positions */
.cpw-widget .cpw-corner--tl { top: -12px;    left:  -12px; transform: rotate(-15deg); }
.cpw-widget .cpw-corner--tr { top: -12px;    right: -12px; transform: rotate(20deg);  }
.cpw-widget .cpw-corner--bl { bottom: -12px; left:  -12px; transform: rotate(10deg);  }
.cpw-widget .cpw-corner--br { bottom: -12px; right: -12px; transform: rotate(-25deg); }

/* Mirror right-side decorations for variety */
.cpw-widget .cpw-corner--tr { transform: rotate(20deg) scaleX(-1); }
.cpw-widget .cpw-corner--br { transform: rotate(-25deg) scaleX(-1); }

/* ── Decoration SVGs ─────────────────────────
 * Each .cpw-deco--{slug} sets a background-image
 * via an inline data-URI SVG.
 * ──────────────────────────────────────────── */

/* Flowers (pink petals, gold centre) */
.cpw-deco--flower {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)'%3E%3Cellipse cx='0' cy='-20' rx='12' ry='20' fill='%23f9a8d4' stroke='%23f472b6' stroke-width='1.5'/%3E%3Cellipse cx='0' cy='-20' rx='12' ry='20' fill='%23f9a8d4' stroke='%23f472b6' stroke-width='1.5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-20' rx='12' ry='20' fill='%23f9a8d4' stroke='%23f472b6' stroke-width='1.5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-20' rx='12' ry='20' fill='%23f9a8d4' stroke='%23f472b6' stroke-width='1.5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-20' rx='12' ry='20' fill='%23f9a8d4' stroke='%23f472b6' stroke-width='1.5' transform='rotate(288)'/%3E%3Ccircle cx='0' cy='0' r='8' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Tulips (red/pink tulip with green stem) */
.cpw-deco--tulip {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 95 L50 50' stroke='%2322c55e' stroke-width='3' fill='none'/%3E%3Cpath d='M40 55 Q30 45 50 50' stroke='%2322c55e' stroke-width='2' fill='%2322c55e' opacity='0.6'/%3E%3Cellipse cx='50' cy='30' rx='18' ry='25' fill='%23fb7185' stroke='%23e11d48' stroke-width='1.5'/%3E%3Cpath d='M50 5 Q38 20 35 35 Q50 28 50 28 Q50 28 65 35 Q62 20 50 5z' fill='%23f43f5e' stroke='%23e11d48' stroke-width='1'/%3E%3Cpath d='M50 5 Q50 22 50 35' stroke='%23e11d48' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

/* Sunflowers (yellow petals, brown centre) */
.cpw-deco--sunflower {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)'%3E%3Cellipse cx='0' cy='-18' rx='8' ry='18' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1'/%3E%3Cellipse cx='0' cy='-18' rx='8' ry='18' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1' transform='rotate(30)'/%3E%3Cellipse cx='0' cy='-18' rx='8' ry='18' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1' transform='rotate(60)'/%3E%3Cellipse cx='0' cy='-18' rx='8' ry='18' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1' transform='rotate(90)'/%3E%3Cellipse cx='0' cy='-18' rx='8' ry='18' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='-18' rx='8' ry='18' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1' transform='rotate(150)'/%3E%3Ccircle cx='0' cy='0' r='12' fill='%2392400e' stroke='%23713f12' stroke-width='1.5'/%3E%3Ccircle cx='-3' cy='-3' r='1.5' fill='%23a16207'/%3E%3Ccircle cx='3' cy='-2' r='1.5' fill='%23a16207'/%3E%3Ccircle cx='0' cy='3' r='1.5' fill='%23a16207'/%3E%3Ccircle cx='-4' cy='2' r='1' fill='%23a16207'/%3E%3Ccircle cx='4' cy='3' r='1' fill='%23a16207'/%3E%3C/g%3E%3C/svg%3E");
}

/* Roses (layered red petals) */
.cpw-deco--rose {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)'%3E%3Ccircle cx='0' cy='0' r='28' fill='%23fda4af' stroke='%23e11d48' stroke-width='1'/%3E%3Cpath d='M0,-20 Q15,-15 18,-5 Q20,5 10,10 Q0,12 -5,5 Q-10,-2 -5,-12 Q0,-18 0,-20z' fill='%23fb7185' stroke='%23e11d48' stroke-width='0.8'/%3E%3Cpath d='M5,-14 Q12,-8 10,0 Q8,8 0,6 Q-5,4 -3,-4 Q0,-10 5,-14z' fill='%23f43f5e' stroke='%23e11d48' stroke-width='0.8'/%3E%3Cpath d='M2,-8 Q6,-4 4,2 Q2,5 -1,3 Q-3,0 0,-5 Q1,-7 2,-8z' fill='%23e11d48'/%3E%3Cellipse cx='-18' cy='12' rx='10' ry='7' fill='%2322c55e' stroke='%2316a34a' stroke-width='1' transform='rotate(-30)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Butterflies (purple/blue wings) */
.cpw-deco--butterfly {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)'%3E%3Cellipse cx='-16' cy='-10' rx='16' ry='22' fill='%23c084fc' stroke='%239333ea' stroke-width='1.5' transform='rotate(-15)'/%3E%3Cellipse cx='16' cy='-10' rx='16' ry='22' fill='%2393c5fd' stroke='%233b82f6' stroke-width='1.5' transform='rotate(15)'/%3E%3Cellipse cx='-10' cy='10' rx='10' ry='14' fill='%23d8b4fe' stroke='%239333ea' stroke-width='1' transform='rotate(-10)'/%3E%3Cellipse cx='10' cy='10' rx='10' ry='14' fill='%23bfdbfe' stroke='%233b82f6' stroke-width='1' transform='rotate(10)'/%3E%3Ccircle cx='-12' cy='-12' r='3' fill='%237c3aed' opacity='0.5'/%3E%3Ccircle cx='12' cy='-12' r='3' fill='%232563eb' opacity='0.5'/%3E%3Cline x1='0' y1='-25' x2='0' y2='25' stroke='%231e293b' stroke-width='2'/%3E%3Cpath d='M0,-25 Q-6,-30 -8,-35' stroke='%231e293b' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0,-25 Q6,-30 8,-35' stroke='%231e293b' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='-8' cy='-35' r='2' fill='%231e293b'/%3E%3Ccircle cx='8' cy='-35' r='2' fill='%231e293b'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hummingbirds (teal/green bird in flight) */
.cpw-deco--hummingbird {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,48)'%3E%3Cellipse cx='0' cy='0' rx='14' ry='10' fill='%2334d399' stroke='%23059669' stroke-width='1.5'/%3E%3Cellipse cx='0' cy='-2' rx='12' ry='8' fill='%236ee7b7'/%3E%3Ccircle cx='12' cy='-4' r='7' fill='%2334d399' stroke='%23059669' stroke-width='1.2'/%3E%3Ccircle cx='14' cy='-5' r='2' fill='%231e293b'/%3E%3Ccircle cx='14.5' cy='-5.5' r='0.8' fill='white'/%3E%3Cpath d='M19,-4 L35,-2 L19,-1z' fill='%23f59e0b' stroke='%23d97706' stroke-width='0.8'/%3E%3Cpath d='M-8,-8 Q-22,-28 -10,-22 Q2,-16 -8,-8z' fill='%2399f6e4' stroke='%23059669' stroke-width='1' opacity='0.8'/%3E%3Cpath d='M-6,-5 Q-24,-18 -8,-16 Q4,-14 -6,-5z' fill='%23a7f3d0' stroke='%23059669' stroke-width='1' opacity='0.7'/%3E%3Cpath d='M-10,5 Q-14,16 -8,18 Q-2,14 -10,5z' fill='%2334d399' stroke='%23059669' stroke-width='0.8'/%3E%3Cellipse cx='2' cy='-1' rx='4' ry='3' fill='%23f0fdf4' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Bees (yellow/black stripes, wings) */
.cpw-deco--bee {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)'%3E%3Cellipse cx='-6' cy='-14' rx='10' ry='8' fill='white' stroke='%2394a3b8' stroke-width='0.5' opacity='0.6' transform='rotate(-20)'/%3E%3Cellipse cx='6' cy='-14' rx='10' ry='8' fill='white' stroke='%2394a3b8' stroke-width='0.5' opacity='0.6' transform='rotate(20)'/%3E%3Cellipse cx='0' cy='0' rx='14' ry='18' fill='%23fbbf24' stroke='%23b45309' stroke-width='1.5'/%3E%3Cpath d='M-14,-4 L14,-4' stroke='%231e293b' stroke-width='3.5'/%3E%3Cpath d='M-13,4 L13,4' stroke='%231e293b' stroke-width='3.5'/%3E%3Cpath d='M-11,11 L11,11' stroke='%231e293b' stroke-width='3'/%3E%3Ccircle cx='-5' cy='-10' r='2.5' fill='%231e293b'/%3E%3Ccircle cx='5' cy='-10' r='2.5' fill='%231e293b'/%3E%3Ccircle cx='-4.5' cy='-10.5' r='1' fill='white'/%3E%3Ccircle cx='5.5' cy='-10.5' r='1' fill='white'/%3E%3Cpath d='M0,18 Q-3,22 -2,25' stroke='%231e293b' stroke-width='1.2' fill='none'/%3E%3Cpath d='M0,18 Q3,22 2,25' stroke='%231e293b' stroke-width='1.2' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* Ladybugs (red with black spots) */
.cpw-deco--ladybug {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)'%3E%3Cellipse cx='0' cy='2' rx='22' ry='26' fill='%23ef4444' stroke='%23991b1b' stroke-width='1.5'/%3E%3Cline x1='0' y1='-24' x2='0' y2='28' stroke='%231e293b' stroke-width='2'/%3E%3Ccircle cx='0' cy='-20' r='10' fill='%231e293b'/%3E%3Ccircle cx='-10' cy='-3' r='5' fill='%231e293b'/%3E%3Ccircle cx='10' cy='-3' r='5' fill='%231e293b'/%3E%3Ccircle cx='-7' cy='12' r='4' fill='%231e293b'/%3E%3Ccircle cx='7' cy='12' r='4' fill='%231e293b'/%3E%3Ccircle cx='-4' cy='22' r='3' fill='%231e293b'/%3E%3Ccircle cx='4' cy='22' r='3' fill='%231e293b'/%3E%3Ccircle cx='-4' cy='-22' r='1.5' fill='white'/%3E%3Ccircle cx='4' cy='-22' r='1.5' fill='white'/%3E%3Cpath d='M-5,-30 Q-10,-38 -12,-40' stroke='%231e293b' stroke-width='1.5' fill='none'/%3E%3Cpath d='M5,-30 Q10,-38 12,-40' stroke='%231e293b' stroke-width='1.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* Stars (golden yellow) */
.cpw-deco--star {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 61,35 95,35 68,55 78,88 50,68 22,88 32,55 5,35 39,35' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='50,18 57,37 78,37 62,49 68,70 50,57 32,70 38,49 22,37 43,37' fill='%23fde68a' opacity='0.5'/%3E%3C/svg%3E");
}

/* Hearts (red/pink) */
.cpw-deco--heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C20 65 2 45 2 28 A22 22 0 0 1 50 20 A22 22 0 0 1 98 28 C98 45 80 65 50 88z' fill='%23f43f5e' stroke='%23e11d48' stroke-width='2'/%3E%3Cpath d='M50 80 C25 60 12 45 12 32 A16 16 0 0 1 50 26' fill='%23fb7185' opacity='0.4'/%3E%3C/svg%3E");
}

/* Leaves (green leaf) */
.cpw-deco--leaf {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90 Q20 70 10 40 Q5 15 50 5 Q95 15 90 40 Q80 70 50 90z' fill='%2322c55e' stroke='%2316a34a' stroke-width='2'/%3E%3Cpath d='M50 85 L50 15' stroke='%2316a34a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M50 30 Q35 35 25 30' stroke='%2316a34a' stroke-width='1' fill='none'/%3E%3Cpath d='M50 45 Q65 50 75 45' stroke='%2316a34a' stroke-width='1' fill='none'/%3E%3Cpath d='M50 58 Q38 62 30 58' stroke='%2316a34a' stroke-width='1' fill='none'/%3E%3Cpath d='M50 70 Q60 74 68 70' stroke='%2316a34a' stroke-width='1' fill='none'/%3E%3Cpath d='M50 90 Q20 70 10 40 Q5 15 50 5' fill='%234ade80' opacity='0.3'/%3E%3C/svg%3E");
}

/* Snowflakes (ice blue) */
.cpw-deco--snowflake {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)' stroke='%2393c5fd' stroke-width='2.5' stroke-linecap='round' fill='none'%3E%3Cline x1='0' y1='-35' x2='0' y2='35'/%3E%3Cline x1='-30' y1='-17.5' x2='30' y2='17.5'/%3E%3Cline x1='-30' y1='17.5' x2='30' y2='-17.5'/%3E%3Cline x1='0' y1='-35' x2='-8' y2='-25' stroke-width='2'/%3E%3Cline x1='0' y1='-35' x2='8' y2='-25' stroke-width='2'/%3E%3Cline x1='0' y1='35' x2='-8' y2='25' stroke-width='2'/%3E%3Cline x1='0' y1='35' x2='8' y2='25' stroke-width='2'/%3E%3Cline x1='-30' y1='-17.5' x2='-22' y2='-8' stroke-width='2'/%3E%3Cline x1='-30' y1='-17.5' x2='-20' y2='-22' stroke-width='2'/%3E%3Cline x1='30' y1='17.5' x2='22' y2='8' stroke-width='2'/%3E%3Cline x1='30' y1='17.5' x2='20' y2='22' stroke-width='2'/%3E%3Cline x1='-30' y1='17.5' x2='-20' y2='22' stroke-width='2'/%3E%3Cline x1='-30' y1='17.5' x2='-22' y2='8' stroke-width='2'/%3E%3Cline x1='30' y1='-17.5' x2='20' y2='-22' stroke-width='2'/%3E%3Cline x1='30' y1='-17.5' x2='22' y2='-8' stroke-width='2'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23dbeafe' stroke='%2393c5fd' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Bird mascot on top ───────────────────── *
 * A cute cartoon bluebird perched on the
 * top-center edge of the widget frame.
 * Gentle hover/bob animation with wing flaps.
 * ──────────────────────────────────────────── */

/* Bird wrapper — handles the up/down bob */
.cpw-widget .cpw-bird-top {
    position: absolute;
    width:  72px;
    height: 72px;
    top:   -58px;
    left:  50%;
    z-index: 2;
    pointer-events: none;
    animation: cpw-bird-bob 3s ease-in-out infinite;
    transform-origin: center bottom;
}

/* The bird SVG is set as background on a child pseudo-element
   so we can animate wings separately via a second keyframe */
.cpw-widget .cpw-bird-top::before {
    content: '';
    display: block;
    width:  100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3CradialGradient id='bb' cx='50%25' cy='40%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%2393c5fd'/%3E%3Cstop offset='100%25' stop-color='%233b82f6'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(60,58)'%3E%3C!-- Tail --%3E%3Cpath d='M-5,18 Q-18,8 -22,0 Q-18,12 -8,20z' fill='%232563eb'/%3E%3Cpath d='M5,18 Q18,8 22,0 Q18,12 8,20z' fill='%232563eb'/%3E%3C!-- Body --%3E%3Cellipse cx='0' cy='12' rx='22' ry='20' fill='url(%23bb)' stroke='%232563eb' stroke-width='1.2'/%3E%3C!-- Belly --%3E%3Cellipse cx='0' cy='18' rx='14' ry='12' fill='%23fef3c7' stroke='%23fbbf24' stroke-width='0.8'/%3E%3C!-- Left wing --%3E%3Cpath d='M-18,8 Q-36,2 -38,-8 Q-32,0 -20,2z' fill='%2360a5fa' stroke='%232563eb' stroke-width='0.8'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 -18 8;-12 -18 8;0 -18 8;10 -18 8;0 -18 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M-18,10 Q-34,8 -36,0 Q-30,6 -18,6z' fill='%2393c5fd'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 -18 10;-12 -18 10;0 -18 10;10 -18 10;0 -18 10' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C!-- Right wing --%3E%3Cpath d='M18,8 Q36,2 38,-8 Q32,0 20,2z' fill='%2360a5fa' stroke='%232563eb' stroke-width='0.8'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 18 8;12 18 8;0 18 8;-10 18 8;0 18 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M18,10 Q34,8 36,0 Q30,6 18,6z' fill='%2393c5fd'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 18 10;12 18 10;0 18 10;-10 18 10;0 18 10' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C!-- Head --%3E%3Ccircle cx='0' cy='-8' r='18' fill='url(%23bb)' stroke='%232563eb' stroke-width='1.2'/%3E%3C!-- Cheeks --%3E%3Ccircle cx='-12' cy='-2' r='5' fill='%23fda4af' opacity='0.6'/%3E%3Ccircle cx='12' cy='-2' r='5' fill='%23fda4af' opacity='0.6'/%3E%3C!-- Eyes (with blink) --%3E%3Cellipse cx='-7' cy='-11' rx='4.5' ry='5' fill='%231e293b'%3E%3Canimate attributeName='ry' values='5;5;5;0.5;5;5;5;5;5;5' dur='4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='7' cy='-11' rx='4.5' ry='5' fill='%231e293b'%3E%3Canimate attributeName='ry' values='5;5;5;0.5;5;5;5;5;5;5' dur='4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='-5.5' cy='-12.5' rx='2' ry='2.2' fill='white'%3E%3Canimate attributeName='ry' values='2.2;2.2;2.2;0.2;2.2;2.2;2.2;2.2;2.2;2.2' dur='4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='8.5' cy='-12.5' rx='2' ry='2.2' fill='white'%3E%3Canimate attributeName='ry' values='2.2;2.2;2.2;0.2;2.2;2.2;2.2;2.2;2.2;2.2' dur='4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C!-- Beak --%3E%3Cpath d='M-3,-4 L0,2 L3,-4z' fill='%23f59e0b' stroke='%23d97706' stroke-width='0.6'/%3E%3C!-- Head tuft --%3E%3Cpath d='M-3,-25 Q0,-34 3,-25 Q1,-28 -1,-28z' fill='%232563eb'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 0 -25;-8 0 -25;0 0 -25;8 0 -25;0 0 -25' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M-1,-24 Q0,-30 1,-24' fill='%233b82f6'/%3E%3C!-- Feet (sitting on edge) --%3E%3Cpath d='M-8,30 L-12,36 M-8,30 L-8,36 M-8,30 L-4,36' stroke='%23d97706' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3Cpath d='M8,30 L4,36 M8,30 L8,36 M8,30 L12,36' stroke='%23d97706' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* Bob up-and-down keyframes */
@keyframes cpw-bird-bob {
    0%   { transform: translateX(-50%) translateY(0)   rotate(0deg); }
    20%  { transform: translateX(-50%) translateY(-8px) rotate(-2deg); }
    40%  { transform: translateX(-50%) translateY(-3px) rotate(1deg); }
    60%  { transform: translateX(-50%) translateY(-10px) rotate(-1deg); }
    80%  { transform: translateX(-50%) translateY(-2px) rotate(2deg); }
    100% { transform: translateX(-50%) translateY(0)   rotate(0deg); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cpw-widget .cpw-bird-top {
        animation: none;
        transform: translateX(-50%);
    }
    .cpw-widget .cpw-bird-top::before svg * {
        animation: none !important;
    }
}

/* When bird is present, add top padding so title doesn't overlap */
.cpw-widget:has(.cpw-bird-top) {
    padding-top: 2rem;
    margin-top: 58px;
}

/* ── Widget heading ────────────────────────── */
.cpw-widget .widget-title,
.cpw-widget .cpw-heading {
    font-size:      1.15rem;
    font-weight:    700;
    color:          var(--cpw-title-color);
    margin:         0 0 0.85rem;
    padding:        0 0 0.55rem;
    border-bottom:  2px solid var(--cpw-border-color);
    letter-spacing: -0.01em;
    line-height:    1.3;
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
}

/* ── Title icon (displayed beside the heading) ── */
.cpw-widget .cpw-title-icon {
    flex-shrink: 0;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cpw-link-color);
}
.cpw-widget .cpw-title-icon svg {
    width:           36px !important;
    height:          36px !important;
    display:         block;
    fill:            none;
    stroke:          currentColor;
    stroke-width:    1.6;
    stroke-linecap:  round;
    stroke-linejoin: round;
}

/* Scale title icon to match the icon-size setting
 * Uses :has() with JS-mirrored class fallback (#6) */
.cpw-widget:has(.cpw-icon--small)  .cpw-title-icon svg,
.cpw-widget.cpw-has-size--small    .cpw-title-icon svg { width: 22px !important; height: 22px !important; }
.cpw-widget:has(.cpw-icon--medium) .cpw-title-icon svg,
.cpw-widget.cpw-has-size--medium   .cpw-title-icon svg { width: 36px !important; height: 36px !important; }
.cpw-widget:has(.cpw-icon--large)  .cpw-title-icon svg,
.cpw-widget.cpw-has-size--large    .cpw-title-icon svg { width: 44px !important; height: 44px !important; }
.cpw-widget:has(.cpw-icon--xlarge) .cpw-title-icon svg,
.cpw-widget.cpw-has-size--xlarge   .cpw-title-icon svg { width: 52px !important; height: 52px !important; }

/* ── Accordion toggle ─────────────────────── */
.cpw-widget .cpw-accordion-toggle {
    display:          flex;
    align-items:      center;
    gap:              0.5rem;
    width:            100%;
    border:           none;
    background:       transparent;
    cursor:           pointer;
    font-family:      var(--cpw-font);
    font-size:        1.15rem;
    font-weight:      700;
    color:            var(--cpw-title-color);
    letter-spacing:   -0.01em;
    line-height:      1.3;
    padding:          0 0 0.55rem;
    margin:           0 0 0.85rem;
    border-bottom:    2px solid var(--cpw-border-color);
    text-align:       left;
    transition:       color 0.2s ease;
}
.cpw-widget .cpw-accordion-toggle:hover {
    color: var(--cpw-link-color);
}
.cpw-widget .cpw-accordion-toggle:focus-visible {
    outline: 2px solid var(--cpw-link-color);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Title text fills remaining space */
.cpw-widget .cpw-title-text {
    flex: 1;
    min-width: 0;
}

/* Chevron arrow (rotates when collapsed) */
.cpw-widget .cpw-accordion-chevron {
    flex-shrink: 0;
    display:     inline-flex;
    transition:  transform 0.3s ease;
}
.cpw-widget .cpw-accordion-chevron svg {
    width:           20px;
    height:          20px;
    fill:            none;
    stroke:          currentColor;
    stroke-width:    2.5;
    stroke-linecap:  round;
    stroke-linejoin: round;
}
.cpw-widget .cpw-accordion-toggle[aria-expanded="false"] .cpw-accordion-chevron {
    transform: rotate(-90deg);
}

/* Accordion body — animated open/close */
.cpw-widget .cpw-accordion-body {
    overflow:    hidden;
    transition:  max-height 0.35s ease, opacity 0.3s ease;
    max-height:  2000px; /* large enough for open state */
    opacity:     1;
    padding-top: 0.25rem;  /* #4 breathing room below toggle */
}
.cpw-widget .cpw-accordion-body.cpw-collapsed {
    max-height: 0 !important;
    opacity:    0;
    margin:     0;
    padding:    0;
}

/* ── Scroll container (wraps list when > 5 items) ── */
.cpw-scroll-wrap {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;            /* room for scrollbar */
    scroll-behavior: smooth;
}

/* Custom scrollbar */
.cpw-scroll-wrap::-webkit-scrollbar {
    width: 6px;
}
.cpw-scroll-wrap::-webkit-scrollbar-track {
    background:    var(--cpw-border-color);
    border-radius: 3px;
}
.cpw-scroll-wrap::-webkit-scrollbar-thumb {
    background:    #94a3b8;
    border-radius: 3px;
}
.cpw-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background:    #64748b;
}
/* Firefox scrollbar */
.cpw-scroll-wrap {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--cpw-border-color);
}

/* Top/bottom fade overlays on the scroll area */
.cpw-scroll-wrap {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0px,
        black 8px,
        black calc(100% - 28px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0px,
        black 8px,
        black calc(100% - 28px),
        transparent 100%
    );
}

/* ── List ──────────────────────────────────── */
.cpw-list {
    list-style: none;
    margin:  0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cpw-gap);
}

/* Inside a scroll container, remove any leftover list pseudo-elements */
.cpw-scroll-wrap > .cpw-list::before,
.cpw-scroll-wrap > .cpw-list::after {
    display: none !important;
}

/* ── Item ──────────────────────────────────── */
.cpw-list__item {
    display:       flex;
    align-items:   flex-start;
    gap:           0.6rem;
    padding:       0.55rem 0.35rem;
    border-bottom: 1px solid var(--cpw-border-color);
    border-radius: 4px;
    transition:    background 0.15s ease;
}
/* #1 Subtle hover highlight on list items */
.cpw-list__item:hover {
    background: var(--cpw-hover-bg);
}
.cpw-list__item:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

/* ── Icon (base) ───────────────────────────── */
.cpw-list__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color:  var(--cpw-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpw-list__icon svg {
    display: block;
    fill:   none;
    stroke: currentColor;
    stroke-width:    1.8;
    stroke-linecap:  round;
    stroke-linejoin: round;
}

/* ────────────────────────────────────────────────
 * Icon size variants (#7 — reduced !important)
 *
 * Uses .cpw-widget ancestor for high specificity
 * instead of !important on every declaration.
 * ──────────────────────────────────────────────── */

/* — Small (20 px) ——————————————————————————— */
.cpw-widget ul.cpw-list.cpw-icon--small .cpw-list__icon {
    width: 20px; height: 20px; min-width: 20px; min-height: 20px;
}
.cpw-widget ul.cpw-list.cpw-icon--small .cpw-list__icon svg {
    width: 20px; height: 20px; stroke-width: 1.8;
}

/* — Medium (32 px) — default ———————————————— */
.cpw-widget ul.cpw-list.cpw-icon--medium .cpw-list__icon {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px;
}
.cpw-widget ul.cpw-list.cpw-icon--medium .cpw-list__icon svg {
    width: 32px; height: 32px; stroke-width: 1.8;
}

/* — Large (44 px) —————————————————————————— */
.cpw-widget ul.cpw-list.cpw-icon--large .cpw-list__icon {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
}
.cpw-widget ul.cpw-list.cpw-icon--large .cpw-list__icon svg {
    width: 44px; height: 44px; stroke-width: 1.5;
}
.cpw-widget ul.cpw-list.cpw-icon--large .cpw-list__item {
    gap: 0.85rem; align-items: center;
}

/* — Extra Large (56 px) ———————————————————— */
.cpw-widget ul.cpw-list.cpw-icon--xlarge .cpw-list__icon {
    width: 56px; height: 56px; min-width: 56px; min-height: 56px;
}
.cpw-widget ul.cpw-list.cpw-icon--xlarge .cpw-list__icon svg {
    width: 56px; height: 56px; stroke-width: 1.2;
}
.cpw-widget ul.cpw-list.cpw-icon--xlarge .cpw-list__item {
    gap: 1rem; align-items: center;
}

/* ── Body ──────────────────────────────────── */
.cpw-list__body {
    flex:      1;
    min-width: 0;
}

/* ── Link ──────────────────────────────────── */
.cpw-list__link {
    font-size:            var(--cpw-title-size);
    font-weight:          var(--cpw-title-weight);
    color:                var(--cpw-link-color);
    text-decoration:      underline;
    text-decoration-color: transparent;          /* #9 smooth underline fade-in */
    text-underline-offset: 2px;
    display:              block;
    line-height:          1.4;
    transition:           color 0.15s ease,
                          text-decoration-color 0.2s ease;
    word-break:           break-word;
    border-radius:        2px;
}
.cpw-list__link:hover {
    color:                 var(--cpw-link-hover);
    text-decoration-color: currentColor;         /* underline fades in */
}
/* #2 Keyboard focus ring */
.cpw-list__link:focus-visible {
    color:                 var(--cpw-link-hover);
    text-decoration-color: currentColor;
    outline:               2px solid var(--cpw-link-color);
    outline-offset:        2px;
}

/* ── Meta / Badge ──────────────────────────── */
.cpw-list__meta {
    font-size:   0.78rem;
    color:       var(--cpw-meta-color);
    margin-top:  0.15rem;
    display:     flex;
    align-items: center;
    gap:         0.35rem;
}
.cpw-list__badge {
    display:        inline-block;
    font-size:      0.68rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding:        0.1rem 0.4rem;
    border-radius:  3px;
    background:     var(--cpw-badge-bg);
    color:          var(--cpw-badge-color);
}

/* ── Dark mode — consolidated (#5) ────────── */
@media (prefers-color-scheme: dark) {
    .cpw-list__badge {
        background: #334155;
        color:      #cbd5e1;
    }
    .cpw-widget .cpw-accordion-toggle {
        color: #f1f5f9;
    }
    .cpw-widget .cpw-accordion-toggle:hover {
        color: #93bbfd;
    }
    .cpw-widget .cpw-accordion-chevron svg {
        stroke: #94a3b8;
    }
    .cpw-widget .cpw-title-icon {
        color: #93bbfd;
    }
    .cpw-widget .cpw-list__icon {
        color: #94a3b8;
    }
    .cpw-widget .cpw-list__item:hover {
        background: #273449;
    }
    .cpw-widget .cpw-corner {
        opacity: 0.75;
    }
    .cpw-scroll-wrap::-webkit-scrollbar-track {
        background: #1e293b;
    }
    .cpw-scroll-wrap::-webkit-scrollbar-thumb {
        background: #475569;
    }
}

/* ── Responsive: small screens ─────────────── */
@media (max-width: 480px) {
    .cpw-widget {
        padding:  1rem 0.85rem;
        margin:   10px 6px;
    }
    .cpw-widget .widget-title,
    .cpw-widget .cpw-heading,
    .cpw-widget .cpw-accordion-toggle {
        font-size: 1.05rem;
        padding-bottom: 0.4rem;
        margin-bottom: 0.65rem;
    }
    .cpw-list {
        gap: 0.5rem;
    }
    .cpw-list__item {
        gap:     0.45rem;
        padding: 0.4rem 0;
    }
    .cpw-list__link {
        font-size: 0.95rem;
    }
    .cpw-list__meta {
        font-size: 0.72rem;
    }
    /* Reduce decoration size on mobile */
    .cpw-widget .cpw-corner {
        width:  28px;
        height: 28px;
    }
    .cpw-widget .cpw-corner--tl { top: -8px;    left:  -8px; }
    .cpw-widget .cpw-corner--tr { top: -8px;    right: -8px; }
    .cpw-widget .cpw-corner--bl { bottom: -8px; left:  -8px; }
    .cpw-widget .cpw-corner--br { bottom: -8px; right: -8px; }
    /* Smaller bird on mobile */
    .cpw-widget .cpw-bird-top {
        width:  52px;
        height: 52px;
        top:    -42px;
    }
    .cpw-widget:has(.cpw-bird-top) {
        margin-top: 42px;
    }
}

/* #12 Container query — adapts to widget width, not viewport */
@container cpw (max-width: 260px) {
    .cpw-widget {
        padding: 1rem 0.75rem;
    }
    .cpw-list__link {
        font-size: 0.92rem;
    }
    .cpw-widget .cpw-corner {
        width: 24px; height: 24px;
    }
}

/* ── Print styles (#10) ───────────────────── */
@media print {
    .cpw-widget {
        box-shadow: none;
        border:     1px solid #cbd5e1;
        break-inside: avoid;
    }
    .cpw-widget .cpw-bird-top,
    .cpw-widget .cpw-corner,
    .cpw-widget .cpw-accordion-chevron,
    .cpw-scroll-wrap::-webkit-scrollbar {
        display: none !important;
    }
    .cpw-widget .cpw-accordion-body {
        max-height: none !important;
        opacity:    1 !important;
    }
    .cpw-scroll-wrap {
        max-height:          none;
        overflow:            visible;
        -webkit-mask-image:  none;
        mask-image:          none;
    }
    .cpw-list__link {
        color: #000;
        text-decoration: underline;
    }
}

/* ── High-contrast mode (#11) ─────────────── */
@media (forced-colors: active) {
    .cpw-widget {
        border: 2px solid ButtonText;
    }
    .cpw-list__badge {
        border: 1px solid ButtonText;
    }
    .cpw-list__link {
        color: LinkText;
    }
    .cpw-list__item {
        border-bottom-color: ButtonText;
    }
    .cpw-widget .cpw-accordion-toggle {
        border-bottom-color: ButtonText;
    }
    .cpw-widget .cpw-corner,
    .cpw-widget .cpw-bird-top {
        forced-color-adjust: none;   /* preserve decorative SVG colours */
    }
}