/* ─── Calico theme ───────────────────────────────────────────────────────────────
   Split out of site.css 2026-08-02. Everything here is scoped to
   [data-theme="calico"]; base styles stay in site.css.

   LOAD ORDER IS PART OF THE CONTRACT. _Layout links site.css, then every theme
   file, then themes/_shared.css. Theme rules carry an extra attribute selector,
   so they outrank base styles wherever they land - but do not reorder the links
   without re-reading _shared.css, which wins by POSITION rather than weight.

   The picker applies themes client-side with no reload (site.js), so every theme
   file ships on every page. Serving only the active theme would need the picker
   to fetch on demand first. */
/* Calico - the game's actual quilt palette: royal purple chrome, cream page so the
   patches pop, pink links, teal secondary, yellow accent on the purple band.
   Signature colors: purple #6f2d90, pink #cb4374, teal #2aacb2, yellow #f3be1a. */
[data-theme="calico"] {
    /* Calico's exact palette: purple #6e2e8d, pink #cb246b, teal #55b5bd, yellow
       #f3b620, on a pure white page. Purple = chrome (nav/footer). Pink = the main
       accent (--amber): links, buttons, meeple icons, avatar circles, hearts, page
       headers, homepage display text. Teal = support (--cyan): borders, input/card
       washes, pills, scrollbar, dividers - used as a FILL/LINE color, never as text
       on white (too light at ~2:1). Yellow = sparse spark on the purple bands. */
    --bg: #ffffff;
    /* Cards/surfaces: a light wash of the teal on white. */
    --bg2: #eaf6f7;
    --bg3: #dcf0f2;
    --surface: #cbe9eb;
    --border: #a9dbde;
    --border2: #8ccfd3;
    --text: #2a2230;
    --text-mid: #5f5266;
    --text-dim: #6f6376;
    /* Pink main accent. */
    --amber: #cb246b;
    --amber-dim: rgba(203, 36, 107, 0.5);
    --amber-bg: #fce7f0;
    /* Teal secondary (fills/lines). */
    --cyan: #55b5bd;
    --cyan-dim: rgba(85, 181, 189, 0.45);
    /* Hearts/likes are the pink. */
    --heart: #cb246b;
    --nav-bg: #6e2e8d;
    --nav-border: #58236f;
    /* Opaque white nav text for clean contrast on the purple band. */
    --nav-fg: #ffffff;
    --nav-fg-dim: #f0e6f6;
    --nav-fg-strong: #ffffff;
    --nav-accent: #f3b620;
    --nav-accent-dim: rgba(243, 182, 32, 0.55);
    --nav-accent-bg: rgba(255, 255, 255, 0.12);
    --nav-btn-border: rgba(231, 214, 239, 0.4);
    /* No --nav-gradient override: the tri-color band read as a rainbow (owner,
       2026-07-16), so the line falls back to solid --nav-accent amber - the
       tertiary Calico color (pink = primary, teal = secondary). */
    --footer-bg: #6e2e8d;
    --footer-border: #58236f;
    /* Opaque white footer text, matching the nav. */
    --footer-fg: #ffffff;
    --footer-accent: #f3b620;
    /* Hexagon honeycomb (Calico's tiles), stitched white lines over the purple band.
       Opacity journey (owner-tuned 2026-07-16): 0.08 unnoticed -> 0.16 fought the
       eyes -> 0.10 still too loud -> 0.08. If it reads flat again, scale the hexes
       UP at this opacity rather than raising it - fewer thin lines, same presence. */
    --footer-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
    --footer-texture-size: 42px 73.5px;
    /* The same honeycomb, extremely faint white, behind the purple nav band only. */
    --nav-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
}
/* Calico component specifics - the palette maps mostly through the vars above; these
   are the pieces the user called out that don't ride a var. Teal is a fill/line color
   here (never text on white). */
[data-theme="calico"] .lu-page-title { color: var(--amber); }
[data-theme="calico"] .form-control,
[data-theme="calico"] .form-select {
    border-color: #55b5bd;
    background-color: #eaf7f8;
}
[data-theme="calico"] ::-webkit-scrollbar { width: 10px; }
[data-theme="calico"] ::-webkit-scrollbar-thumb { background: #55b5bd; border-radius: 6px; }
/* Dropdown option highlight: Calico's dark navy with white text (replaces the OS blue),
   plus teal native widgets (checkboxes/radios) via accent-color. */
[data-theme="calico"] { accent-color: #55b5bd; }
[data-theme="calico"] option:checked,
[data-theme="calico"] option:hover {
    background-color: #313197;
    color: #ffffff;
}
[data-theme="calico"] .lu-owned-glyph-meeple { display: none; }
[data-theme="calico"] .lu-owned-glyph-paw { display: inline; }
/* The paw's pads need a little more room than the meeple silhouette to read as a
   paw, so Calico sizes the owned glyph up from the partial's 12px. */
[data-theme="calico"] .lu-cover-chip-owned svg {
    width: 15px;
    height: 15px;
}
/* Quilt-patch cards: yellow stitch border around the teal-wash card on the white
   page (yellow is decor here, never text, so contrast is fine). border-style:
   dashed can't control dash geometry, so the stitches are hand-rolled: one strip
   of repeating gradient per edge, painted in a transparent border zone
   (background-origin: border-box) so card content never covers them. Dash
   geometry - 14px thread, 10px gap, 3px thick - is set in the gradient stops.
   Applies to cards (except photo tiles - .lu-photo-card - where it would distract
   from people's images), Print Resources rows, and anything opting in via the
   .lu-stitch utility class (submit/request form boxes, bounty rows, the Makers
   and Designers table wrappers). */
[data-theme="calico"] .lu-card:not(.lu-photo-card),
[data-theme="calico"] .lu-resources-row,
[data-theme="calico"] .lu-stitch {
    /* Thread at 40% alpha: present without shouting over the card grid. */
    --stitch: color-mix(in srgb, var(--nav-accent) 40%, transparent);
    border: 3px solid transparent;
    background-origin: border-box;
    background-image:
        repeating-linear-gradient(to right, var(--stitch) 0 14px, transparent 14px 24px),
        repeating-linear-gradient(to right, var(--stitch) 0 14px, transparent 14px 24px),
        repeating-linear-gradient(to bottom, var(--stitch) 0 14px, transparent 14px 24px),
        repeating-linear-gradient(to bottom, var(--stitch) 0 14px, transparent 14px 24px);
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
    background-repeat: no-repeat;
}
/* Page background: the seamless quilt tile (generated hexes in the 5 Calico colors,
   white stitch inset on each patch), faded almost out by a white veil so content
   stays the focal point. Tune the veil alpha to taste - 0.93 leaves ~7% of the
   quilt showing; per the honeycomb lesson, if it reads flat SCALE THE TILE UP
   (background-size) before lowering the alpha. Tile repeats every 336x441px. */
/* The veil brightens toward the horizontal center so the quilt shows stronger in the
   white gutters, with the white growing outward from the page: near-whisper white
   already ~215px out from the content column (0.82 at the 800px stop), so real
   color lives only in the outermost band of a wide monitor (0.65 = ~35% quilt at
   the browser edge). Under the content itself the quilt is nearly gone (0.96 -
   both fainter AND desaturated-looking; owner found 0.93 there distracting).
   Content column is 1100px (half = 550px + 1.5rem padding ~= 573px; the 0.96
   stop sits at 585px). On viewports narrower than ~1170px
   the calc stops go negative and clamp to the edges, collapsing to the uniform 0.93
   veil - no media query needed. If a page ever opts into a wider ContentMaxWidth,
   widen the 585/660px stops to match. */
[data-theme="calico"] body {
    background-image:
        linear-gradient(to right,
            rgba(255, 255, 255, 0.65) 0,
            rgba(255, 255, 255, 0.82) calc(50% - 800px),
            rgba(255, 255, 255, 0.96) calc(50% - 585px),
            rgba(255, 255, 255, 0.96) calc(50% + 585px),
            rgba(255, 255, 255, 0.82) calc(50% + 800px),
            rgba(255, 255, 255, 0.65) 100%),
        url("/images/calico-quilt-tile.svg");
    background-size: auto, 336px 441px;
    background-repeat: repeat;
}
/* Content bullets become sewing buttons (Calico's scoring tokens): teal button,
   four white thread holes. One shared image (--button-bullet) feeds both the
   unclassed-list bullets (scoped like the body-link rule, so navs/menus/toolbars
   keep their own styling) and the Print Resources row markers below. */
[data-theme="calico"] {
    --button-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5' fill='%2355b5bd'/%3E%3Ccircle cx='5.5' cy='5.5' r='3.9' fill='none' stroke='%23ffffff' stroke-width='0.6' stroke-opacity='0.55'/%3E%3Ccircle cx='4' cy='4' r='0.8' fill='%23ffffff'/%3E%3Ccircle cx='7' cy='4' r='0.8' fill='%23ffffff'/%3E%3Ccircle cx='4' cy='7' r='0.8' fill='%23ffffff'/%3E%3Ccircle cx='7' cy='7' r='0.8' fill='%23ffffff'/%3E%3C/svg%3E");
}
[data-theme="calico"] main ul:not([class]) {
    list-style-image: var(--button-bullet);
}
/* Print Resources rows: the button marker leads each link row (the row is a flex
   container, so the ::before rides its 16px gap as the first item). */
[data-theme="calico"] .lu-resources-row::before {
    content: "";
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background-image: var(--button-bullet);
    background-size: contain;
    background-repeat: no-repeat;
}
/* Calico's corner decorations: heart button upper-right, cat curled bottom-left.
   On the root element (not body) so they never collide with the homepage's
   body::before noise overlay. z-index sits UNDER the nav (100), so the top one
   tucks below the nav bar and any open dropdown covers it; pointer-events:none
   means they never intercept clicks. Convention for theme corner art:
   wwwroot/images/{theme}-tr.webp (top-right) and {theme}-bl.webp (bottom-left),
   transparent WebP. Both fail silently until the assets are added. */
[data-theme="calico"]::before,
[data-theme="calico"]::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 40;
    background-repeat: no-repeat;
    background-size: contain;
}
@media (min-width: 1200px) {[data-theme="calico"] .cmdk-input-wrap::after {
        content: "";
        flex: 0 0 75px;
        height: 50px;
        /* Taller than the row's content; the negative margin folds the extra into
           the row's 14px padding so the row doesn't grow. At 50px the cat spans
           the input row's full height - any bigger means overlapping the row's
           borders (doable with z-index if the owner wants him to sprawl). */
        margin: -14px 0;
        background: url("/images/calico-bl.webp") no-repeat center / contain;
    }}
/* Slightly translucent even at full size: this is decoration in a margin and shouldn't
   steal the show. Below the wide breakpoint it goes fainter still and larger (watermark),
   and on phones it is removed entirely so content and the game cover own the space.

   ANCHORED TO THE VIEWPORT EDGE, not to the content column (owner call 2026-08-02).
   These used to sit at calc(50% - 654px), i.e. just outside a 1100px column - which is
   only the DEFAULT width. Pages that widen the container through ViewData["ContentMaxWidth"]
   (the browse grids, Makers, the wishlist) push content straight under art that is still
   measuring itself against 1100, and the bottom-left piece landed on top of the first card's
   title. Anchoring to the edge cannot be wrong about a width it never reads.
   The cost is that the art no longer knows where the text is, so the full-opacity band has
   to assume the WIDEST container: a 1400px column needs about 140px of margin each side to
   clear the art, so 1700px is where that is true. Below it the existing watermark treatment
   takes over, which is designed to sit under content harmlessly. */
[data-theme="calico"]::before {
    /* Heart, upper-right. */
    top: 84px;
    right: 18px;
    width: 96px;
    height: 96px;
    opacity: 0.55;
    background-image: url("/images/calico-tr.webp");
    background-position: right top;
}
[data-theme="calico"]::after {
    /* Cat, bottom-left. */
    left: 16px;
    bottom: 16px;
    width: 120px;
    height: 120px;
    opacity: 0.55;
    background-image: url("/images/calico-bl.webp");
    background-position: left bottom;
}
/* Narrower than the widest column plus its margins: the art can reach content, so it goes
   barely-there (watermark) and larger. */
@media (max-width: 1699px) {[data-theme="calico"]::before { width: 124px; height: 124px; opacity: 0.15; }[data-theme="calico"]::after  { width: 152px; height: 152px; opacity: 0.17; }}
/* Phones: remove both so the content and the game cover own the space. */
@media (max-width: 767px) {[data-theme="calico"]::before,
    [data-theme="calico"]::after { display: none; }}