/**
 * Stone Soup Listing Pages — WordPress Version
 *
 * Paper-on-linen page frame (approved March 3, 2026)
 * 58vw white page on #ede8df linen surface, asymmetric margins
 * ADHD/Autism accessible — all navigation visible, no hidden menus
 * WCAG 2.1 AA compliant
 *
 * Version: 5.5.1
 */

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sss-container *,
    .sss-container *::before,
    .sss-container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   CSS VARIABLES — Aliases to canonical --stonesoup-* tokens in style.css
   ========================================================================== */

:root {
    /* Aliases — map legacy --sss-* names to canonical --stonesoup-* tokens.
       All values are now single-sourced from style.css :root.
       New code should use --stonesoup-* directly. */
    --sss-teal: var(--stonesoup-teal);
    --sss-warm-gray: var(--stonesoup-warm-gray);         /* was hardcoded #f0ece4 */
    --sss-border: var(--stonesoup-border);               /* was hardcoded #e8e4dc */
    --sss-text: var(--stonesoup-text-dark);
    --sss-text-light: var(--stonesoup-text-light);
    --sss-text-muted: var(--stonesoup-text-muted);
    --sss-surface: var(--stonesoup-linen);
    --sss-page: var(--stonesoup-page);
    --sss-page-margin-left: var(--stonesoup-page-margin-left);
    --sss-page-width: var(--stonesoup-page-width);
    --sss-page-shadow: var(--stonesoup-page-shadow);
    --sss-focus-ring: var(--stonesoup-focus-ring);

    /* UI color aliases — all backed by canonical --stonesoup-* tokens */
    --sss-text-secondary: var(--stonesoup-text-light);       /* #736a5e — filter labels, count badge */
    --sss-text-medium: var(--stonesoup-text-medium);         /* #5a5148 — filter/button text */
    --sss-text-count: var(--stonesoup-text-muted);           /* #7a6e60 — visible count */
    --sss-border-tan: var(--stonesoup-text-rule);            /* #c4b5a0 — check circles, drag handle */
    --sss-border-medium: var(--stonesoup-border-medium);     /* #d5cfc5 — filter/button borders */
    --sss-surface-btn: var(--stonesoup-cream);               /* #fafaf8 — button backgrounds */
    --sss-filter-bg: var(--stonesoup-filter-tint);           /* #f7f4ee — filter bar */
    --sss-danger: var(--stonesoup-color-story);              /* #c04a25 — danger/remove actions */
    --sss-danger-bg: var(--stonesoup-danger-bg);             /* #fdf2ee — danger hover background */
    --sss-teal-hover: var(--stonesoup-teal-hover);           /* #238b7e — view-selection hover */
    --sss-teal-active: var(--stonesoup-teal-active);         /* #007070 — primary button hover */
    --sss-title-default: var(--stonesoup-title-default);     /* #1a1612 — item title near-black */
    --sss-toast-bg: var(--stonesoup-toast-bg);               /* #1f2937 — toast background */
    --sss-selection-border: var(--stonesoup-selection-border); /* #e0dbd3 — selection dividers */
    --sss-pill-bg: var(--stonesoup-linen);                   /* #ede8df — was #eee8df (1-digit drift) */
    --sss-pill-text: var(--stonesoup-pill-text);             /* #6b5e50 — curriculum pill text */
    --sss-control-width: 36rem;                              /* shared width for search bar + filter bar */

    /* ── VIVID ORPHIST PALETTE ──
       The 6 Orphist colors below are used as raw hex in per-type selectors
       (.item-story, .color-story, etc.). They CANNOT be CSS variables because
       each selector needs a different fixed color — CSS custom properties
       can't conditionally vary per selector without JS. If the palette
       changes, update these selectors AND the PALETTE object in sss-listing.js.

       #c04a25  story      — vivid orange    ~5.1:1
       #2560a0  poetry     — clear blue      ~6.6:1
       #5c3db8  art        — vivid purple    ~7.9:1
       #9a6b1e  review     — warm gold       ~4.8:1
       #1a826a  memoir     — emerald green   ~4.9:1
       #a03058  editorial  — deep rose       ~7.1:1
    */
}

/* ==========================================================================
   SKIP LINK (A8 fix)
   ========================================================================== */

.sss-skip-link {
    position: absolute;
    top: -60px;
    left: 8px;
    background: var(--sss-teal);
    color: white;
    padding: 8px 16px;
    border-radius: 0 0 6px 6px;
    font-family: var(--stonesoup-font-ui);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    z-index: 1000;
    transition: top 0.15s ease;
}

.sss-skip-link:focus {
    top: 0;
    outline: 3px solid var(--sss-focus-ring);
}

/* ==========================================================================
   BODY — Linen surface for listing/selection pages
   ========================================================================== */

body.sss-listing-page {
    background-color: var(--sss-surface);   /* #ede8df linen — the "desk" */
}

/* GP wrappers sit between body and our content — make them transparent
   so the linen surface shows through to the edges of the white paper */
body.sss-listing-page #page,
body.sss-listing-page .site.grid-container,
body.sss-listing-page .site-content,
body.sss-listing-page .inside-article,
body.sss-listing-page .entry-content {
    background: transparent;
}

/* ==========================================================================
   BASE CONTAINER — Transparent so linen shows through
   ========================================================================== */

.sss-container {
    font-family: var(--stonesoup-font-reading);
    background-color: transparent;
    line-height: 1.5;
    color: var(--sss-text);
    min-height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   THE PAGE — White paper on linen surface (approved March 3, 2026)
   58vw wide, 10vw from left, classical asymmetric internal margins.
   Body is linen; this is the white rectangle sitting on it.

   Classical book proportions (recto page):
     Gutter (left)  : 5rem
     Head (top)     : 4rem
     Fore-edge (right): 7rem
     Foot (bottom)  : 6rem
   Approved March 8, 2026. Restored March 24 after failed fit-content experiment.
   ========================================================================== */

.sss-tint-block {
    background: var(--sss-page);                    /* #ffffff white */
    margin: 0 auto;                                 /* centered on linen */
    width: var(--sss-page-width);                   /* 58vw */
    min-height: 100vh;
    padding: 4rem 7rem 6rem 5rem;                  /* head  fore-edge  foot  gutter */
    border: none;
    box-shadow: var(--sss-page-shadow);
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.sss-container * {
    box-sizing: border-box;
}

/* ==========================================================================
   FOCUS STYLES — Global keyboard-visible focus
   ========================================================================== */

.sss-container *:focus-visible {
    outline: 3px solid var(--sss-teal);
    outline-offset: 2px;
}

/* ==========================================================================
   PAGE TITLE — inside the white paper
   Cormorant Garamond, teal, left-aligned (approved listing-page-v2.0)
   ========================================================================== */

/* ==========================================================================
   ARCHIVE HEADER — Approach 3: Flush-left thumbnail, title, count, orientation
   Image from stonesoup_get_hero_image_url() shared mapping.
   ========================================================================== */

.sss-archive-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 0.6rem;
}

.sss-archive-thumb {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.sss-archive-header-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

.sss-archive-header-body h1.sss-page-title {
    margin-bottom: auto;
}

.sss-archive-count {
    font-family: var(--stonesoup-font-reading);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--sss-text-secondary);
    margin: 0;
}

.sss-archive-orientation {
    font-family: var(--stonesoup-font-ui);
    font-size: 1.15rem;
    font-weight: 500;
    color: #2560a0;
    margin: 0.8rem 0 0 0;
    text-indent: 0;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* Circle in orientation text — matches list check circles exactly */
.sss-orientation-circle {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2.5px solid #c04a25;           /* vivid orange — Orphist Story */
    border-radius: 50%;
    vertical-align: -0.15em;
}

.sss-archive-rule {
    height: 1px;
    background: var(--sss-border);
    margin: 0.6rem 0 0 0;
}

/* Main listing page header — unified with archive header.
   Both use .sss-archive-header / .sss-archive-thumb / .sss-archive-header-body.
   Old .sss-listing-header-row / .sss-listing-hero-thumb / .sss-listing-header-text removed v5.6.6. */

/* PAGE TITLE RULE: Always poetry blue (#2560a0).
   Blue complements the warm Orphist item colors below.
   3.6rem / weight 400 = same weight as item titles, just bigger (golden ratio). */
/* Specificity must beat body:not():not() h1 (0,2,1) in functions.php critical CSS */
body h1.sss-page-title {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: #2560a0 !important;
    margin: 0;
}

/* .sss-page-subtitle removed v4.16.0 — replaced by .sss-archive-orientation */

.sss-selected-count {
    display: none;
}

.sss-view-selection-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    margin-top: 6px;
    padding: 0 10px;
    background: rgba(37, 96, 160, 0.08);
    color: var(--sss-text-count);
    border: 1.5px solid transparent;
    border-radius: 4px;
    font-size: 11.5px;
    font-family: var(--stonesoup-font-ui);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.sss-view-selection-btn:hover {
    border-color: var(--sss-text-count);
}

.sss-selection-badge {
    font-weight: 700;
}

/* ==========================================================================
   SEARCH BAR
   ========================================================================== */

.sss-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.6rem;
}

.sss-search-wrapper {
    position: relative;
    width: 100%;
}

.sss-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    color: var(--sss-text-muted);
    pointer-events: none;
}

/* Hide icon when input has text (JS adds this class) */
.sss-search-wrapper.has-text .sss-search-icon {
    opacity: 0;
}

/* Specificity bump (body + wrapper) so left padding beats GP's input[type="text"] rules.
   1.4rem left padding clears the 12px search icon positioned at left:8px. */
body .sss-search-wrapper .sss-search-input {
    width: 100%;
    height: 19px;
    padding: 0 1.2rem 0 1.4rem;
    font-size: 11.5px;
    font-family: var(--stonesoup-font-ui);
    border: 1.5px solid transparent;
    border-radius: 4px;
    background: rgba(37, 96, 160, 0.08);
    color: var(--sss-text);
    transition: border-color 0.15s ease;
}

.sss-search-input:focus {
    outline: none;
    border-color: var(--sss-teal);
    box-shadow: 0 0 0 2px var(--sss-focus-ring);
}

.sss-search-input::placeholder {
    color: var(--sss-text-muted);
}

.sss-clear-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: var(--sss-text-muted);
    color: white;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sss-clear-search:hover {
    background: var(--sss-text);
}

/* Hint + Exact word match on one line */
.sss-search-hint-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: -0.5rem 0 0.8rem 0;
}

.sss-search-hint {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.15rem;
    color: var(--sss-text-secondary);
    margin: 0;
}

.sss-search-toggles {
    display: flex;
    gap: 1.2rem;
}

/* --- Relevance controls (shown only during search) --- */
.sss-relevance-controls {
    margin-bottom: 1.2rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.sss-relevance-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.sss-relevance-row:last-child {
    margin-bottom: 0;
}

.sss-relevance-label {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sss-text-secondary);
    white-space: nowrap;
}

.sss-threshold-hint {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.72rem;
    color: var(--sss-text-muted);
}

#sss-threshold-slider {
    width: 140px;
    accent-color: var(--sss-teal);
    cursor: pointer;
}

#sss-max-results {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.82rem;
    padding: 3px 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: white;
    color: var(--sss-text);
}

.sss-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sss-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.sss-toggle-label input[type="checkbox"] {
    accent-color: var(--sss-teal);
    width: 0.85rem;
    height: 0.85rem;
    cursor: pointer;
}

/* ==========================================================================
   FILTER BAR — Styled buttons matching approved mockup (type-test-17)
   Groups flow horizontally, labels above buttons
   ========================================================================== */

.sss-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border-radius: 3px;
    font-family: var(--stonesoup-font-ui);
}

.sss-filter-group {
    min-width: 0;
}

.sss-filter-label {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sss-text-secondary);
    margin-bottom: 0.4rem;
}

.sss-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.sss-filter-btn {
    height: 19px;
    padding: 0 0.4rem;
    font-family: var(--stonesoup-font-ui);
    font-size: 11.5px;
    font-weight: 500;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: var(--sss-text);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}

.sss-filter-btn:hover {
    border-color: #999;
}

.sss-age-group {
    display: flex;
    gap: 0.3rem;
    width: 100%;
}

.sss-age-group .sss-filter-btn {
    flex: 1;
}

.sss-filter-btn.active {
    background: var(--sss-text);
    color: #fff;
    border-color: var(--sss-text);
}


/* Curriculum lens/pill CSS removed v4.16.0 — deferred to post-launch.
   See ~/Desktop/stonesoup-project/TODO-CURRICULUM-FILTER.md */

/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.sss-main {
    display: block;
    min-height: calc(100vh - 120px);
}

/* responsive filter rules moved to RESPONSIVE section below */

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */

.sss-content {
    padding: 0;
    background: transparent;
}

.sss-active-filters-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sss-active-label {
    font-size: 13px;
    color: var(--sss-text-muted);
    font-family: var(--stonesoup-font-ui);
}

.sss-active-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sss-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-family: var(--stonesoup-font-ui);
}

.sss-active-filter .sss-remove {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.sss-active-filter .sss-remove:hover {
    opacity: 1;
}

.sss-clear-filters-btn {
    margin-left: auto;
    font-size: 12px;
    color: var(--sss-teal);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--stonesoup-font-ui);
}

.sss-content-header {
    display: block;
    text-align: center;
    width: 210px;
    margin-top: 6px;
    margin-bottom: 2rem;
    padding-top: 0;
    font-family: var(--stonesoup-font-ui);
}

.sss-visible-count {
    font-size: 11.5px;
    color: var(--sss-text-count);
    letter-spacing: 0.03em;
}

.sss-content-actions {
    display: contents;
}


/* ==========================================================================
   ITEM ROWS
   ========================================================================== */

.sss-content-area {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;        /* No extra indent — classical margins on tint-block handle spacing */
    max-width: 62rem;        /* ≈992px — caps line length at ~13 words (EB Garamond 1.875rem) */
}

/* ---------------------
   BOOK TABLE OF CONTENTS STYLE
   No rules between entries, outdented titles, inline meta
   Approved type sizes from type-test-8.html
   --------------------- */

.sss-item-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.9rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sss-item-row:hover {
    background: rgba(0, 139, 139, 0.03);
}

.sss-item-row:focus-visible {
    outline: 3px solid var(--sss-teal);
    outline-offset: -2px;
}

.sss-item-row.selected {
    background: rgba(0, 139, 139, 0.04);
}

/* Check circle — MUST BE PRESENT (approved, core functionality) */
.sss-item-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--sss-teal);
    margin-top: 0.6rem;
    margin-right: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    background: transparent;
}

.sss-item-check:hover {
    opacity: 0.7;
}

/* Check circle border colors — Vivid Orphist */
/* Check circles are always teal — unified, not per-genre.
   Per-genre colors removed v4.16.0 for cleaner visual hierarchy. */

/* Generic checked fallback */
.sss-item-row.selected .sss-item-check {
    background: var(--sss-teal);
    border-color: var(--sss-teal);
}

/* Per-type checked colors (override generic) — Vivid Orphist */
.item-story.selected .sss-item-check     { background: #c04a25; border-color: #c04a25; }
.item-poetry.selected .sss-item-check    { background: #2560a0; border-color: #2560a0; }
.item-art.selected .sss-item-check       { background: #5c3db8; border-color: #5c3db8; }
.item-review.selected .sss-item-check    { background: #9a6b1e; border-color: #9a6b1e; }
.item-memoir.selected .sss-item-check    { background: #1a826a; border-color: #1a826a; }
.item-editorial.selected .sss-item-check { background: #a03058; border-color: #a03058; }

.sss-item-row.selected .sss-item-check::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4.5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.sss-item-content {
    flex: 1;
    min-width: 0;
}

.sss-item-title {
    margin-bottom: 2px;
}

.sss-item-title a {
    font-family: var(--stonesoup-font-reading-display);
    font-size: 1.6rem;
    font-weight: 300;
    text-decoration: none;
    line-height: 1.2;
    color: var(--sss-title-default);
    letter-spacing: 0.01em;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    transition: color 0.15s ease;
}

.sss-item-title a:hover {
    opacity: 0.8;
}

/* Vivid Orphist title colors — joyful, saturated, all WCAG AA (approved March 8, 2026) */
.sss-item-title a.color-story     { color: #c04a25; }   /* vivid orange    ~5.1:1 */
.sss-item-title a.color-poetry    { color: #2560a0; }   /* clear blue      ~6.6:1 */
.sss-item-title a.color-art       { color: #5c3db8; }   /* vivid purple    ~7.9:1 */
.sss-item-title a.color-review    { color: #9a6b1e; }   /* warm gold       ~4.8:1 */
.sss-item-title a.color-memoir    { color: #1a826a; }   /* emerald green   ~4.9:1 */
.sss-item-title a.color-editorial { color: #a03058; }   /* deep rose       ~7.1:1 */

/* Content-type label inherits position color from row — ties label to title visually */
.item-story .sss-content-type     { color: #c04a25; }
.item-poetry .sss-content-type    { color: #2560a0; }
.item-art .sss-content-type       { color: #5c3db8; }
.item-review .sss-content-type    { color: #9a6b1e; }
.item-memoir .sss-content-type    { color: #1a826a; }
.item-editorial .sss-content-type { color: #a03058; }

/* Inline meta (category + author) within synopsis paragraph */
.sss-item-meta-inline {
    font-family: var(--stonesoup-font-reading);
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    color: var(--sss-text);
}

.sss-sep {
    margin: 0 5px;
    color: var(--sss-border-tan);
    font-style: normal;
    font-variant: normal;
}

.sss-content-type {
    font-variant: normal;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    font-family: var(--stonesoup-font-ui);
    font-weight: 600;
    color: var(--sss-text);
}

.sss-item-synopsis {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--sss-text);
    margin: 0;
    padding-left: 3em;
    text-indent: 0;
}

.sss-item-pills {
    display: none;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.sss-pagination {
    margin-top: 24px;
    text-align: center;
}

.sss-show-more-btn {
    padding: 12px 32px;
    font-size: 14px;
    font-family: var(--stonesoup-font-ui);
    font-weight: 600;
    background: white;
    border: 2px solid var(--sss-teal);
    color: var(--sss-teal);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sss-show-more-btn:hover {
    background: var(--sss-teal);
    color: white;
}

/* ==========================================================================
   ARCHIVE PAGINATION
   WordPress the_posts_pagination() output, styled to match the teal button
   aesthetic used by the listing page's "Show More" button.
   ========================================================================== */

.sss-archive-pagination {
    margin-top: 3rem;
    text-align: center;
}

.sss-archive-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sss-archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sss-teal);
    background: white;
    border: 2px solid var(--sss-teal);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.sss-archive-pagination .page-numbers:hover {
    background: var(--sss-teal);
    color: white;
}

.sss-archive-pagination .page-numbers.current {
    background: var(--sss-teal);
    color: white;
    cursor: default;
}

.sss-archive-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--sss-text-muted);
    cursor: default;
    min-width: auto;
    padding: 0 0.25rem;
}

.sss-archive-pagination .page-numbers.dots:hover {
    background: transparent;
    color: var(--sss-text-muted);
}

.sss-archive-pagination .prev,
.sss-archive-pagination .next {
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* No results message — defined once, in LOADING STATE section below */

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.sss-empty-state {
    text-align: center;
    padding: 60px 20px;
}

/* ==========================================================================
   SELECTION PAGE — Paper-on-linen (approved March 3, 2026)
   Same page frame as listing page. Items show title + meta with
   Orphist colors, drag handles, and remove buttons.
   ========================================================================== */

/* Top bar: title left, back link right */
.sss-selection-topbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3em;
}

.sss-back-link {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sss-teal);
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sss-back-link:hover {
    text-decoration: underline;
}

/* Collection name input — feeds PDF cover title */
.sss-collection-name-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.sss-collection-label {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sss-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.sss-collection-name-input {
    width: 100%;
    max-width: 28rem;
    padding: 0.5rem 0.75rem;
    font-family: var(--stonesoup-font-reading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--sss-text);
    border: 1px solid var(--sss-border);
    border-radius: 4px;
    background: white;
    transition: border-color 0.15s ease;
}

.sss-collection-name-input:focus {
    outline: none;
    border-color: var(--sss-teal);
    box-shadow: 0 0 0 3px var(--sss-focus-ring);
}

.sss-collection-name-input::placeholder {
    color: var(--sss-text-muted);
    font-style: italic;
}

/* Action bar: count + save/clear buttons */
.sss-selection-actions-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-family: var(--stonesoup-font-ui);
}

.sss-item-count-badge {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sss-text-secondary);
    letter-spacing: 0.03em;
}

.sss-selection-actions-bar .sss-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

/* Buttons — refined for paper-on-linen */
.sss-btn {
    padding: 0.4rem 1rem;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s ease;
    border: none;
    line-height: 1.4;
}

.sss-btn-primary {
    background: var(--sss-teal);
    color: white;
    border: 1px solid var(--sss-teal);
}
.sss-btn-primary:hover { background: var(--sss-teal-active); }

.sss-btn-secondary {
    background: var(--sss-surface-btn);
    color: var(--sss-text-medium);
    border: 1px solid var(--sss-border-medium);
}
.sss-btn-secondary:hover { border-color: var(--sss-text-secondary); color: var(--sss-text); }

.sss-btn-danger {
    background: var(--sss-surface-btn);
    color: var(--sss-danger);
    border: 1px solid var(--sss-border-medium);
}
.sss-btn-danger:hover { background: var(--sss-danger-bg); border-color: var(--sss-danger); }

/* Export PDF — editorial rose (filled) */
.sss-btn-export {
    background: #a03058;
    color: #fff;
    border: 2px solid #a03058;
    font-size: 1.0rem;
    padding: 0.6rem 1.5rem;
}
.sss-btn-export:hover { background: #872848; border-color: #872848; }
.sss-btn-export:active { background: #702040; border-color: #702040; }

/* Clear All — memoir green (outline, fills on hover) */
.sss-btn-clear {
    background: #fff;
    color: #1a826a;
    border: 2px solid #1a826a;
    font-size: 1.0rem;
    padding: 0.6rem 1.5rem;
}
.sss-btn-clear:hover { background: #1a826a; color: #fff; border-color: #1a826a; }
.sss-btn-clear:active { background: #146b57; border-color: #146b57; color: #fff; }

/* Selection items list */
.sss-selection-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 62rem;
}

/* Individual selection item */
.sss-selection-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0.7rem 0;
    background: transparent;
    border-bottom: 0.5px solid var(--sss-selection-border);
    transition: background-color 0.15s ease;
}

.sss-selection-item:last-child { border-bottom: none; }
.sss-selection-item:hover { background: rgba(0, 139, 139, 0.03); }
.sss-selection-item.dragging { opacity: 0.4; }
.sss-selection-item.drag-over { border-bottom: 2px solid var(--sss-teal); }

/* Drag handle */
.sss-drag-handle {
    flex-shrink: 0;
    cursor: grab;
    color: var(--sss-border-tan);
    padding: 0.5rem 0.7rem 0.5rem 0;
    transition: color 0.12s ease;
}
.sss-drag-handle:active { cursor: grabbing; }
.sss-drag-handle:hover { color: var(--sss-text-secondary); }

/* Position number */
.sss-item-number {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sss-border-tan);
    min-width: 1.5rem;
    text-align: right;
    padding-top: 0.65rem;
    padding-right: 0.3rem;
    flex-shrink: 0;
}

/* Color accent bar — removed in v4.7.3; cleaner without it */
.sss-selection-item-color {
    display: none;
}

/* Item info */
.sss-selection-item-info { flex: 1; min-width: 0; }

.sss-selection-item-title { margin-bottom: 1px; }

.sss-selection-item-title a {
    font-family: var(--stonesoup-font-reading-display);
    font-size: 1.8rem;
    font-weight: 300;
    text-decoration: none;
    line-height: 1.25;
    letter-spacing: 0.01em;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    transition: opacity 0.15s ease;
}

.sss-selection-item-title a:hover { opacity: 0.7; }

/* Vivid Orphist title colors — same palette as listing page */
.sss-selection-item-title a.color-story     { color: #c04a25; }
.sss-selection-item-title a.color-poetry    { color: #2560a0; }
.sss-selection-item-title a.color-art       { color: #5c3db8; }
.sss-selection-item-title a.color-review    { color: #9a6b1e; }
.sss-selection-item-title a.color-memoir    { color: #1a826a; }
.sss-selection-item-title a.color-editorial { color: #a03058; }



/* Remove button */
.sss-remove-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--sss-border-tan);
    font-size: 18px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.3rem;
    margin-left: 0.5rem;
}

.sss-remove-btn:hover { background: var(--sss-danger-bg); color: var(--sss-danger); }

/* ==========================================================================
   TOAST
   ========================================================================== */

.sss-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--sss-toast-bg);
    color: white;
    border-radius: 8px;
    font-family: var(--stonesoup-font-ui);
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 100;
}

.sss-toast-undo {
    background: none; border: none;
    color: var(--sss-teal);
    font-weight: 600; cursor: pointer; padding: 0;
}

.sss-toast-undo:hover { text-decoration: underline; }

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.sss-no-results {
    text-align: center;
    padding: 60px 20px;
    font-family: var(--stonesoup-font-reading-display);
    font-size: 1.2rem;
    color: var(--sss-text-muted);
    font-style: italic;
}

.sss-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    font-family: var(--stonesoup-font-ui);
    font-size: 14px;
    color: var(--sss-text-muted);
}

.sss-loading::after {
    content: "";
    width: 32px; height: 32px;
    border: 3px solid var(--sss-warm-gray);
    border-top-color: var(--sss-teal);
    border-radius: 50%;
    animation: sss-spin 0.8s linear infinite;
}

@keyframes sss-spin { to { transform: rotate(360deg); } }

/* Search progress bar — shown during smart search (semantic + Haiku verification) */
.sss-search-progress {
    padding: 60px 20px;
    max-width: 320px;
    margin: 0 auto;
}

.sss-progress-bar {
    height: 4px;
    background: var(--sss-warm-gray);
    border-radius: 2px;
    overflow: hidden;
}

.sss-progress-fill {
    height: 100%;
    background: var(--sss-teal);
    border-radius: 2px;
    animation: sss-fill 6s ease-out forwards;
}

@keyframes sss-fill {
    0%   { width: 0; }
    20%  { width: 30%; }   /* Pinecone done ~1s */
    60%  { width: 70%; }   /* Haiku working */
    100% { width: 95%; }   /* almost done, waiting for WP_Query */
}

.sss-progress-text {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.8rem;
    color: var(--sss-text-muted);
    text-align: center;
    margin-top: 0.75rem;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   RESPONSIVE — Paper goes full-width on smaller screens
   ========================================================================== */

@media (max-width: 1024px) {
    .sss-tint-block {
        width: auto;
        margin-left: 3vw;
        margin-right: 3vw;
        padding: 3rem 5rem 4.5rem 3.5rem;    /* scaled-down: gutter < fore-edge */
    }
}

@media (max-width: 768px) {
    .sss-tint-block {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        padding: 2rem 1.5rem;
        box-shadow: none;
    }

    .sss-content-area {
        padding-left: 0;   /* Remove indent on small screens */
    }

    .sss-filter-bar {
        padding: 1rem;
        gap: 1rem;
    }

    /* Selection page responsive */
    .sss-selection-topbar {
        flex-direction: column;
        gap: 0.3rem;
    }
    .sss-selection-actions-bar {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .sss-item-row { padding-left: 0; }
    .sss-item-title a { font-size: 1.8rem; }
    .sss-item-synopsis { font-size: 1.4rem; padding-left: 2em; }
    .sss-item-meta-inline { font-size: 1.2rem; }
    .sss-content-type { font-size: 1.0rem; }

    .sss-page-title { font-size: 1.8rem; }

    .sss-archive-header { gap: 1.2rem; }
    .sss-archive-thumb { width: 120px; height: 120px; }
    .sss-archive-header-body { min-height: 120px; }
    .sss-content-header { width: 120px; }
    .sss-page-title { font-size: 2.4rem !important; }
    .sss-search-bar { max-width: 100%; }

    /* Relevance controls responsive */
    .sss-relevance-controls { padding: 0.6rem 0.8rem; }
    #sss-threshold-slider { width: 100px; }
    .sss-threshold-hint { display: none; }

    /* Selection page at small screens */
    .sss-selection-item-title a { font-size: 1.5rem; }
    .sss-selection-actions-bar .sss-actions { width: 100%; }
    .sss-selection-actions-bar .sss-actions .sss-btn { flex: 1; }
}

/* ==========================================================================
   SCREEN READER ONLY UTILITY
   ========================================================================== */

.sss-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   PDF OVERLAY — Full-screen preview with iframe
   Replaces the new-tab approach so users can't miss the PDF.
   Used from both selection page (anthology) and single post (one piece).
   ========================================================================== */

.sss-pdf-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background: #f0ece4;
}

.sss-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 56px;
    min-height: 56px;
    padding: 0 1.5rem;
    background: #f7f5f0;
    border-bottom: 1px solid #e0dbd3;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    color: #5a5148;
}

.sss-pdf-toolbar-title {
    flex: 1;
    font-weight: 600;
    color: var(--sss-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sss-pdf-btn-print {
    background: #008B8B;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sss-pdf-btn-print:hover {
    background: #007070;
}

.sss-pdf-btn-close {
    background: none;
    border: 1px solid #d5cfc5;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5a5148;
    cursor: pointer;
    white-space: nowrap;
}

.sss-pdf-btn-close:hover {
    background: #ede8df;
    border-color: #c4b5a0;
}

/* Font stepper — A−/A+ buttons in toolbar */
.sss-pdf-font-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d5cfc5;
    border-radius: 6px;
    overflow: hidden;
}

.sss-pdf-btn-font {
    background: none;
    border: none;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5a5148;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}

.sss-pdf-btn-font:hover:not(:disabled) {
    background: #ede8df;
}

.sss-pdf-btn-font:disabled {
    opacity: 0.35;
    cursor: default;
}

.sss-pdf-btn-font:first-child {
    border-right: 1px solid #d5cfc5;
}

.sss-pdf-font-label {
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12px;
    color: #7a6e60;
    white-space: nowrap;
    min-width: 3.2em;
    text-align: center;
    border-right: 1px solid #d5cfc5;
}

.sss-pdf-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

/* Hide overlay if user Cmd+P's the main page while overlay is open */
@media print {
    .sss-pdf-overlay { display: none; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .sss-pdf-toolbar {
        padding: 0 1rem;
        gap: 0.5rem;
    }
    .sss-pdf-btn-print {
        padding: 8px 16px;
    }
    .sss-pdf-font-stepper {
        display: none;   /* stepper takes too much space on mobile */
    }
}


/* ==========================================================================
   ARCHIVE DESCRIPTION — taxonomy-term description shown under the title
   on /column/{slug}/, /source/{slug}/, /category/{slug}/, etc. Set in
   WP Admin → Posts → {taxonomy} → edit term → Description field. Empty
   when the term has no description (rule has nothing to render against).
   ========================================================================== */

.sss-archive-description {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #6b6259;
    max-width: 62rem;
    margin: 0.5rem 0 0;
    /* padding-bottom (not margin-bottom) so the gap between the description
       and the first post is immune to vertical margin collapsing with the
       paragraph inside, or with the post listing below. */
    padding-bottom: 2.5rem;
}
.sss-archive-description p {
    margin: 0 0 0.6em;
    text-indent: 0;
}
.sss-archive-description p:last-child { margin-bottom: 0; }


/* ==========================================================================
   CARD THUMBNAIL — art listing
   Only renders when the post type is `art` (see archive.php / ajax-handlers
   / sss-listing.js — thumb_url stays empty for other content types).
   ========================================================================== */

.sss-item-thumb-wrap {
    flex: 0 0 120px;
    margin-right: 1rem;
    display: block;
    line-height: 0;             /* prevents extra space under the inline-block img */
}
.sss-item-thumb {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    background: #f7f4ec;        /* shows through if the image is loading or fails */
    border-radius: 2px;
}

@media (max-width: 600px) {
    .sss-item-thumb-wrap {
        flex: 0 0 80px;
        margin-right: 0.6rem;
    }
    .sss-item-thumb {
        width: 80px;
        height: 80px;
    }
}


/* ==========================================================================
   LAUNCH-TIME SPOT-HIDE — search-within-results + filter chips
   --------------------------------------------------------------------------
   Hides .sss-search-bar (the "Refine your search within these results" form)
   and .sss-filter-bar (the age-chip filter band) ON ART LISTING PAGES ONLY.
   Reason: art post classifications (`ss_content_type`, `ss_source`,
   `post_tag`) are inconsistent across the legacy archive, so in-page search
   and age filtering return chaotic / misleading results specifically on art.
   Other content types (stories, poems, memoir, reviews) keep their search
   and filter bars — those listings work correctly.

   Scope:
   - /art/                → body.post-type-archive-art (post-type archive)
   - /stone-soup-art/     → body.page-id-91820 (slug-shortcut Page)

   REMOVE THIS BLOCK once the art classification audit + remediation
   migration logged in Section A of TASKS-POST-LAUNCH.md is complete.
   ========================================================================== */

body.post-type-archive-art .sss-search-bar,
body.post-type-archive-art .sss-filter-bar,
body.page-id-91820 .sss-search-bar,
body.page-id-91820 .sss-filter-bar {
    display: none !important;
}