/**
 * ==========================================================================
 * QueryKey Cases – components/cases.css
 *
 * @fileOverview
 * Shared card skinning for case and collection tiles used across the portal
 * and public catalogue. Applies gradient shells, typography, and hover
 * states so the experience stays consistent on every surface.
 *
 * @author
 * QueryKey Cases Web Team
 *
 * @maintainer
 * Cases Engineering Lead
 *
 * @usage
 * <link rel="stylesheet" href="/assets/css/components/cases.css">
 *
 * @dependencies
 * variables.css, base.css, tokens defined in pages/cases.css and pages/collections.css
 *
 * @notes
 * Keep selectors in sync with the page-level overrides when introducing new
 * structural elements so the card shell remains reusable.
 *
 * @license
 * QueryKey™ is a trademark of Farrel Wilson. All rights reserved.
 * @timestamp
 * 2025-10-31 17:18:18 UTC
 * ==========================================================================
 */

/* Cases page specific */

/* Cases catalog extracted from inline styles (cases.html) */
.cases-page body.cases-page-root {
    background: var(--light-gray);
    color: var(--dark-gray);
}

/* Ark theme overrides (scoped) */
.cases-page,
.collections-page {
    color: #cfe0ff;
}

.cases-page .cases-grid,
.collections-page .cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    counter-reset: case-counter;
}

.cases-page .case-card.case-card,
.collections-page .case-card.case-card {
    background: linear-gradient(165deg, rgb(25 55 86 / 65%), rgb(17 38 63 / 55%));
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 16px;
    background-image: none;
    box-shadow: 0 2px 8px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 5%) inset;
}

.cases-page .case-card.case-card:hover,
.collections-page .case-card.case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgb(0 0 0 / 40%), 0 0 0 1px rgb(255 255 255 / 8%) inset;
}

.cases-page .case-card .case-header,
.collections-page .case-card .case-header {
    background: linear-gradient(135deg, var(--blue-dark), var(--qk-accent-blue));
    color: #fff;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.cases-page .case-title,
.collections-page .case-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.3;
    flex: 1;
    min-width: 200px;
}

.cases-page .case-meta,
.collections-page .case-meta {
    color: rgb(255 255 255 / 85%);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .9rem;
    opacity: .95;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.cases-page .case-content,
.collections-page .case-content {
  color: #dfe7f3;
}

.cases-page .case-content p,
.collections-page .case-content p,
.cases-page .case-content li,
.collections-page .case-content li {
  color: #e6edf7;
}

.cases-page .case-content strong,
.collections-page .case-content strong {
  color: #fff;
}

.cases-page .case-content a,
.collections-page .case-content a {
  color: var(--qk-accent-orange);
}

.cases-page .case-content a:hover,
.collections-page .case-content a:hover {
  color: #ffd7b0;
}

.cases-page .case-footer,
.collections-page .case-footer {
    background: linear-gradient(135deg, rgb(248 250 252 / 5%), rgb(241 245 249 / 8%));
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.cases-page .stat,
.collections-page .stat {
  color: #c7d2fe;
}

.cases-page .bundle-download,
.collections-page .bundle-download {
    background: linear-gradient(135deg, var(--qk-accent-orange) 0%, #f97316 100%);
    color: #fff;
}

/* Empty state and pagination hidden by default (JS toggles) */
.cases-page-unified .cases-empty-state {
  display: none;
}
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
.cases-page-unified #casesPagination /* stylelint-disable-line selector-id-pattern */ {
  display: none;
}

/* Meta chips and tags on dark */
.cases-page .case-meta span:not(.ecosystem-tag, .verification-badge, .risk-level),
.collections-page .case-meta span:not(.ecosystem-tag, .verification-badge, .risk-level) {
    background: rgb(255 255 255 / 12%);
    color: rgb(255 255 255 / 92%);
    border: 1px solid rgb(255 255 255 / 14%);
}

.cases-page .ecosystem-tag,
.collections-page .ecosystem-tag {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    box-shadow: 0 2px 4px rgb(37 99 235 / 35%);
}

.cases-page .verification-badge,
.collections-page .verification-badge {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 4px rgb(34 197 94 / 35%);
}

.cases-page .risk-low,
.collections-page .risk-low {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.cases-page .risk-medium,
.collections-page .risk-medium {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.cases-page .risk-high,
.collections-page .risk-high {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Error signature block contrast */
.cases-page .error-signature,
.collections-page .error-signature {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    color: #f1f5f9;
    border-left: 4px solid var(--qk-accent-orange);
    border-right: 2px solid var(--qk-accent-blue);
    box-shadow: 0 4px 10px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 6%) inset;
}

/* Tabs (dark glass) */
.cases-page .case-tabs,
.collections-page .case-tabs {
    background: transparent;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.cases-page .case-tab,
.collections-page .case-tab {
    color: #cfe0ff;
    border-radius: 10px 10px 0 0;
}

.cases-page .case-tab.active,
.collections-page .case-tab.active {
    background: linear-gradient(135deg, rgb(255 255 255 / 6%) 0%, rgb(255 255 255 / 10%) 100%);
    color: #fff;
    border-bottom-color: var(--qk-accent-orange);
}

/* Visible focus for keyboard users on tabs (before hover to avoid descending specificity) */
.cases-page .case-tab:focus-visible,
.collections-page .case-tab:focus-visible {
    outline: 2px solid var(--qk-accent-orange);
    outline-offset: 2px;
}

.cases-page .case-tab:hover:not(.active),
.collections-page .case-tab:hover:not(.active) {
    background: linear-gradient(135deg, rgb(230 151 90 / 12%) 0%, rgb(11 79 156 / 10%) 100%);
    color: var(--qk-accent-orange);
}

/* Pagination (dark glass) */
.cases-page .pagination button,
.collections-page .pagination button {
    background-image:
        linear-gradient(rgb(255 255 255 / 5%), rgb(255 255 255 / 5%)),
        linear-gradient(135deg, var(--qk-accent-orange) 0%, var(--qk-accent-blue) 100%);
    color: var(--qk-accent-orange);
    border: 2px solid transparent;
}

.cases-page .pagination button:hover,
.collections-page .pagination button:hover,
.cases-page .pagination button.active,
.collections-page .pagination button.active {
    background: linear-gradient(135deg, var(--qk-accent-orange) 0%, var(--qk-accent-blue) 100%);
    color: #fff;
}

/* Content readability and inline highlight */
.cases-page .case-content mark,
.collections-page .case-content mark,
.cases-page mark[data-hl],
.collections-page mark[data-hl] {
    background: linear-gradient(90deg, var(--qk-accent-orange), #ffd7b0);
    color: #081520;
    border-radius: 4px;
    padding: 0 3px;
}

.cases-page .case-content ul li::marker,
.collections-page .case-content ul li::marker,
.cases-page .case-content ol li::marker,
.collections-page .case-content ol li::marker {
    color: #7aa2ff; /* subtle blue markers on dark */
}

/* Empty state styling */
.cases-page .cases-empty-state {
    background: linear-gradient(165deg, rgb(25 55 86 / 55%), rgb(17 38 63 / 50%));
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 16px;
    padding: 1.25rem;
    color: #e6edf7;
    text-align: center;
    box-shadow: 0 2px 8px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 5%) inset;
}

.cases-page .clear-filters-btn {
    background: linear-gradient(135deg, var(--qk-accent-orange) 0%, #f97316 100%);
    color: #081520;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* ------------------------------ */

/* Inputs on dark Ark UI (Cases)  */

/* ------------------------------ */
.cases-page .main-search .search-input-group,
.collections-page .main-search .search-input-group {
    background-color: rgb(12 18 30 / 78%);
    border: 2px solid rgb(255 255 255 / 18%);
    box-shadow: 0 4px 10px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 5%) inset;
}

.cases-page .main-search .search-input-group:hover,
.collections-page .main-search .search-input-group:hover {
    background-color: rgb(12 18 30 / 90%);
    border-color: rgb(255 255 255 / 28%);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgb(0 0 0 / 40%), 0 0 0 1px rgb(255 255 255 / 6%) inset;
}

.cases-page .main-search .search-input-group:focus-within,
.collections-page .main-search .search-input-group:focus-within {
    background-color: rgb(12 18 30 / 95%);
    border-color: var(--qk-accent-orange);
    box-shadow: 0 0 0 4px rgb(230 151 90 / 18%), 0 8px 16px rgb(0 0 0 / 45%);
}

.cases-page .main-search .search-icon,
.collections-page .main-search .search-icon {
  fill: var(--qk-accent-orange);
}

.cases-page .main-search .search-input,
.collections-page .main-search .search-input {
    color: #e6edf7;
    background: transparent;
    caret-color: var(--qk-accent-orange);
}

.cases-page .main-search .search-input::placeholder,
.collections-page .main-search .search-input::placeholder {
    color: rgb(230 236 245 / 60%);
}

/* Filter selects on dark */
.cases-page .filter-select,
.collections-page .filter-select {
    background-color: rgb(12 18 30 / 88%);
    color: #e6edf7;
    border: 2px solid rgb(255 255 255 / 20%);
    box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}

.cases-page .filter-select:hover,
.collections-page .filter-select:hover {
    background-color: rgb(12 18 30 / 95%);
    border-color: var(--qk-accent-orange);
}

.cases-page .filter-select:focus,
.collections-page .filter-select:focus {
    border-color: var(--qk-accent-orange);
    box-shadow: 0 0 0 3px rgb(230 151 90 / 25%);
}

.cases-page .filter-select option,
.collections-page .filter-select option {
    background: #0f172a;
    color: #e6edf7;
}

.cases-page .filter-select:disabled,
.collections-page .filter-select:disabled {
    color: rgb(230 236 245 / 45%);
    border-color: rgb(255 255 255 / 12%);
}

/* Selection highlight for inputs */
.cases-page ::selection,
.collections-page ::selection {
  background: rgb(230 151 90 / 35%);
  color: #081520;
}

.cases-page input::selection,
.collections-page input::selection {
  background: rgb(230 151 90 / 45%);
  color: #081520;
}

/* Autofill fixes (WebKit) */
.cases-page input[type="text"]:-webkit-autofill,
.collections-page input[type="text"]:-webkit-autofill,
.cases-page input[type="search"]:-webkit-autofill,
.collections-page input[type="search"]:-webkit-autofill,
.cases-page select:-webkit-autofill,
.collections-page select:-webkit-autofill {
    -webkit-text-fill-color: #e6edf7 !important;
    transition: background-color 100000s ease-in-out 0s;
    box-shadow: 0 0 0 1000px rgb(12 18 30 / 90%) inset !important;
    caret-color: var(--qk-accent-orange) !important;
}

/* Collections Overview subtle accent 🧭  */
.collections-page .tab-content[id$='-overview'] {
        background: linear-gradient(165deg, rgb(17 38 63 / 45%), rgb(12 22 38 / 40%));
        border: 1px solid rgb(255 255 255 / 14%);
        border-radius: 12px;
        padding: .9rem 1rem 1rem;
        position: relative;
        color: #e8f1ff;
        box-shadow: 0 2px 8px rgb(0 0 0 / 30%), 0 0 0 1px rgb(255 255 255 / 4%) inset;
}

.collections-page .tab-content[id$='-overview']::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, var(--qk-accent-orange), #2563eb);
        opacity: .85;
        border-radius: 3px 0 0 3px;
}

.collections-page .tab-content[id$='-overview'] h3,
.collections-page .tab-content[id$='-overview'] h4 {
        color: #fff;
}

.collections-page .tab-content[id$='-overview'] p,
/* stylelint-disable-next-line no-descending-specificity */
.collections-page .tab-content[id$='-overview'] li {
        color: #e9f0ff;
}

.collections-page .tab-content[id$='-overview'] a {
    color: var(--qk-accent-orange);
}

/* stylelint-disable-next-line no-descending-specificity */
.collections-page .tab-content[id$='-overview'] a:hover {
    color: #ffd7b0;
}

/* -------------------------------------------------- */

/* Collection header quick-scan chips (size/cases/ver) */

/* -------------------------------------------------- */
.collections-page .header-chips {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.collections-page .header-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .2px;
    border: 1px solid rgb(255 255 255 / 16%);
    color: #f7fbff;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.collections-page .header-chip.size {
    background: linear-gradient(135deg, rgb(37 99 235 / 35%), rgb(29 78 216 / 35%));
}

.collections-page .header-chip.cases {
    background: linear-gradient(135deg, rgb(247 127 0 / 35%), rgb(249 115 22 / 35%));
}

.collections-page .header-chip.version {
    background: linear-gradient(135deg, rgb(139 92 246 / 35%), rgb(59 130 246 / 35%));
}

/* --------------------------------------------- */

/* Cases Context tab – blue glass + code styling  */

/* --------------------------------------------- */
.cases-page .tab-content[id$='-context'] {
    background: linear-gradient(165deg, rgb(12 28 52 / 60%), rgb(10 22 40 / 55%));
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    color: #e6f0ff;
    position: relative;
    box-shadow: 0 2px 10px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 5%) inset;
}

.cases-page .tab-content[id$='-context']::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, #1d4ed8, #3b82f6);
    opacity: .9; border-radius: 3px 0 0 3px;
}

.cases-page .tab-content[id$='-context'] h3,
.cases-page .tab-content[id$='-context'] h4 {
  color: #fff;
}

.cases-page .tab-content[id$='-context'] p,
.cases-page .tab-content[id$='-context'] li {
  color: #e8f1ff;
}

/* stylelint-disable-next-line no-descending-specificity */
.cases-page .tab-content[id$='-context'] a {
  color: #93c5fd;
}

/* moved after Solution to satisfy ordering */

.cases-page .tab-content[id$='-context'] code,
.cases-page .tab-content[id$='-context'] pre {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}

.cases-page .tab-content[id$='-context'] pre {
    background: linear-gradient(180deg, rgb(2 6 23 / 80%), rgb(15 23 42 / 85%));
    color: #dbeafe;
    border: 1px solid rgb(148 163 184 / 25%);
    padding: .85rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
}

.cases-page .tab-content[id$='-context'] code {
    background: rgb(2 6 23 / 55%);
    color: #e0e7ff;
    border: 1px solid rgb(148 163 184 / 25%);
    border-radius: 4px;
    padding: 0 .3rem;
}

/* ---------------------------------- */

/* Solution Tab distinct presentation */

/* ---------------------------------- */
.cases-page .tab-content[id$='-solution'] {
        background: linear-gradient(165deg, rgb(25 55 86 / 55%), rgb(17 38 63 / 50%));
        border: 1px solid rgb(255 255 255 / 18%);
        border-radius: 12px;
        padding: 1rem 1.1rem 1.1rem;
        color: #e6edf7;
        font-size: .95rem;
        line-height: 1.7;
        position: relative;
        box-shadow: 0 2px 8px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 5%) inset;
}

.cases-page .tab-content[id$='-solution']::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, var(--qk-accent-orange), var(--qk-accent-blue));
        opacity: .9;
        border-radius: 3px 0 0 3px;
}

.cases-page .tab-content[id$='-solution'] h3,
.cases-page .tab-content[id$='-solution'] h4 {
    color: #fff;
}

/* Readable text colors inside Solution panel */
.cases-page .tab-content[id$='-solution'] p,
.cases-page .tab-content[id$='-solution'] li,
.cases-page .tab-content[id$='-solution'] ul,
.cases-page .tab-content[id$='-solution'] ol {
    color: #e9f0ff;
}

.cases-page .tab-content[id$='-solution'] strong {
    color: #fff;
}

/* stylelint-disable-next-line no-descending-specificity */
.cases-page .tab-content[id$='-solution'] a {
    color: var(--qk-accent-orange);
}

.cases-page .tab-content[id$='-solution'] a:hover {
    color: #ffd7b0;
}

/* Numbered solution steps */
.cases-page .tab-content[id$='-solution'] ol {
        counter-reset: step;
        list-style: none;
        padding-left: 0;
}

.cases-page .tab-content[id$='-solution'] ol li {
        position: relative;
        padding-left: 2.2rem;
        margin: .6rem 0;
}

.cases-page .tab-content[id$='-solution'] ol li::before {
        counter-increment: step;
        content: counter(step);
        position: absolute;
        left: 0; top: 0.1rem;
        width: 1.6rem; height: 1.6rem;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: .85rem;
        color: #081520;
        background: linear-gradient(135deg, var(--qk-accent-orange) 0%, #ffd7b0 100%);
        box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}

.cases-page .tab-content[id$='-solution'] ul li::marker {
    color: var(--qk-accent-orange);
}

/* Place Context hover after Solution to avoid descending-specificity */
.cases-page .tab-content[id$='-context'] a:hover {
    color: #bfdbfe;
}

/* Collections Overview block defined earlier to satisfy order rules */

/* Override light-themed remedy block inside Solution for dark glass UI */
.cases-page .tab-content[id$='-solution'] .remedy-steps {
        background: transparent;
        border-left: 0;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
}

.cases-page .tab-content[id$='-solution'] .remedy-steps h4 {
        color: #fff;
}

.cases-page .tab-content[id$='-solution'] .remedy-steps p,
.cases-page .tab-content[id$='-solution'] .remedy-steps li {
        color: #e9f0ff;
}

.cases-page .tab-content[id$='-solution'] .remedy-steps ol {
        padding-left: 0; /* use numbered badges layout below */
}

/* remedy-steps overrides included within Solution block above */

.tab-container {
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.tab-button {
    padding: 12px 24px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--dark-gray);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .3s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-button.active {
    color: var(--qk-accent-blue);
    border-bottom-color: var(--qk-accent-orange);
}

.tab-button:hover:not(.active) {
    color: var(--qk-accent-orange);
    background: rgb(230 151 90 / 10%);
}

/* base .cases-grid removed; scoped definitions above */

.case-card {
    background: #fff;
    border: 3px solid transparent;
    background-image: 
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, var(--qk-accent-orange) 0%, var(--qk-accent-blue) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 
        0 4px 6px -1px rgb(0 0 0 / 10%),
        0 2px 4px -1px rgb(0 0 0 / 6%);
}

.case-card::before {
    content: "#" counter(case-counter);
    counter-increment: case-counter;
    position: absolute;
    top: 8px;
    right: 12px;
    background: rgb(0 0 0 / 15%);
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: .6rem;
    font-weight: 700;
    z-index: 10;
    text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgb(255 255 255 / 10%);
}

/* Alternating blue theme cards */
.case-card:nth-child(even) {
    background-image: 
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* Blue border cards get bright orange text in header */
.case-card:nth-child(even) .case-header {
    color: #f97316;
    background: linear-gradient(135deg, var(--blue-dark), var(--qk-accent-blue));
}

.case-card:nth-child(even) .case-title {
    color: #f97316;
    text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
}

/* Blue border cards get orange case number */
.case-card:nth-child(even)::before {
    color: #f97316;
}

/* Alternating orange theme cards */
.case-card:nth-child(odd) {
    background-image: 
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* Orange border cards get bright blue text in header */
.case-card:nth-child(odd) .case-header {
    color: #3b82f6;
    background: linear-gradient(135deg, var(--blue-dark), var(--qk-accent-blue));
}

.case-card:nth-child(odd) .case-title {
    color: #3b82f6;
    text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
}

/* Orange border cards get blue case number */
.case-card:nth-child(odd)::before {
    color: #3b82f6;
}

.case-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 20px 25px -5px rgb(11 79 156 / 15%),
        0 10px 10px -5px rgb(230 151 90 / 10%),
        0 0 0 1px rgb(255 255 255 / 95%) inset;
    background-image: 
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, var(--qk-accent-orange) 0%, var(--blue-dark) 50%, var(--qk-accent-blue) 100%);
}


.cases-page .case-card .case-header::after,
.collections-page .case-card .case-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, rgb(255 255 255 / 5%), transparent 55%), 
                radial-gradient(circle at 82% 76%, rgb(255 255 255 / 3%), transparent 60%);
    pointer-events: none;
    border-radius: 4px 4px 0 0;
}

/* base .case-title removed; scoped definitions above */


.case-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.case-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgb(255 255 255 / 15%);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: .75rem;
    color: rgb(255 255 255 / 90%);
    border: 1px solid rgb(255 255 255 / 10%);
}

.case-date::before {
    content: "📅";
    font-size: .7rem;
}

.case-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgb(255 255 255 / 12%);
    padding: 4px 9px;
    border-radius: 5px;
    font-size: .75rem;
    color: rgb(255 255 255 / 85%);
    border: 1px solid rgb(255 255 255 / 8%);
    font-weight: 500;
}

.case-updated::before {
    content: "🔄";
    font-size: .7rem;
}

.case-header-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgb(255 255 255 / 12%);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: .75rem;
    color: rgb(255 255 255 / 90%);
    border: 1px solid rgb(255 255 255 / 10%);
    font-weight: 600;
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

.case-header-date::before {
    content: "📅";
    font-size: .7rem;
}


.case-extra-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0 0;
}

.case-extra-meta .meta-chip {
    background: rgb(0 0 0 / 8%);
    color: #333;
    padding: 4px 8px;
    font-size: .65rem;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: .5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-chip.license {
    background: rgb(44 90 160 / 15%);
    color: var(--qk-accent-blue);
}

.meta-chip.verified {
    background: rgb(40 167 69 / 15%);
    color: var(--success);
}

.meta-chip.tags {
    background: rgb(230 126 34 / 15%);
    color: var(--qk-accent-orange);
}

.meta-chip.last-verified {
    background: rgb(0 0 0 / 15%);
    color: #222;
}

/* base remedy-steps removed; scoped definitions above */

/* base verification/ecosystem/risk removed; scoped definitions above */

/* base bundle-download removed; scoped definitions above */

/* base case-footer and stats removed; scoped definitions above */

/* base pagination removed; scoped definitions above */

/* Enhanced Search UI (Cases & Collections) */
.cases-page-unified .search-container,
.collections-page-root .search-container {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    padding: 2.25rem 2rem 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 4px 16px -4px rgb(0 0 0 / 6%), 0 1px 3px rgb(0 0 0 / 8%);
    position: relative;
}

.cases-page-unified .search-container h1,
.collections-page-root .search-container h1 {
    font-size: 2.1rem;
    letter-spacing: .5px;
    margin-bottom: .6rem;
}

.cases-page-unified .search-container .collections-intro,
.collections-page-root .search-container .collections-intro {
    max-width: 760px;
    margin: 0 auto .9rem;
    line-height: 1.45;
    color: #4b5a66;
}

/* Search box refined */
.cases-page-unified .search-container .search-box,
.collections-page-root .search-container .search-box {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    animation: qk-fade-slide-in .6s ease .05s both;
}

.cases-page-unified .search-container .search-box::before,
.collections-page-root .search-container .search-box::before {
    content: "\1F50D";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--qk-accent-blue);
    pointer-events: none;
}

.cases-page-unified .search-container .search-input,
.collections-page-root .search-container .search-input {
    padding-left: 44px;
    font-size: 15px;
    background: #fff;
}

.cases-page-unified .search-container .search-input::placeholder,
.collections-page-root .search-container .search-input::placeholder {
    color: #77828a;
    font-weight: 400;
}

/* hover variant moved after size overrides to satisfy order */

/* focus variant moved after size overrides to satisfy order */

.cases-page-unified .search-container .search-button,
.collections-page-root .search-container .search-button {
    min-width: 180px;
    font-size: .95rem;
    letter-spacing: .5px;
    position: relative;
    overflow: hidden;
}

/* Hint */
.cases-page-unified .search-container .search-hint,
.collections-page-root .search-container .search-hint {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 700;
    color: var(--qk-accent-orange);
    margin: .35rem 0 1.1rem;
    opacity: .95;
    text-shadow: 0 0 3px rgb(230 151 90 / 40%);
}

/* Filters refinement (compact) */
.cases-page-unified .filters,
.collections-page-root .filters {
    margin-top: .35rem;
    justify-content: flex-end;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    -ms-overflow-style: none;
}

.cases-page-unified .filters .filter-select,
.collections-page-root .filters .filter-select {
    height: 34px;
    padding: 4px 30px 4px 10px;
    border: 1px solid #c5d0da;
    background: #fff;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .25px;
    text-transform: none;
    color: #2f3e47;
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    transition: border-color .18s, box-shadow .18s, background .18s;
    line-height: 1.2;
    border-radius: 8px;
    appearance: none;
    position: relative;
    background-image: linear-gradient(135deg, rgb(230 126 34 / 8%), rgb(44 90 160 / 8%));
    background-clip: padding-box;
}


.cases-page-unified .filters .filter-select::-ms-expand,
.collections-page-root .filters .filter-select::-ms-expand {
    display: none;
}

.cases-page-unified .filters .filter-select-wrapper,
.collections-page-root .filters .filter-select-wrapper {
    position: relative;
    display: inline-block;
}

.cases-page-unified .filters .filter-select-wrapper::after,
.collections-page-root .filters .filter-select-wrapper::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--qk-accent-blue), var(--qk-accent-orange));
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
}

/* hover variant moved after size overrides to satisfy order */


/* focus styles are refined in size override block below */

.cases-page-unified .filters .filter-select option,
.collections-page-root .filters .filter-select option {
    font-size: .8rem;
    line-height: 1.2;
    padding: 4px 6px;
}

/* Horizontal scroll safety if overflow */
.cases-page-unified .filters::-webkit-scrollbar,
.collections-page-root .filters::-webkit-scrollbar {
    display: none;
}

/* scrollbar-width removed for broader browser support */

/* compact hero spacing handled in primary blocks above */

/* Responsive adjustments */
@media (width <=820px) {
    .cases-page-unified .search-container,
    .collections-page-root .search-container {
        padding: 1.55rem 1.1rem 1.4rem;
    }

    /* consolidated with gap rule below */

    .cases-page-unified .search-button,
    .collections-page-root .search-button {
        min-width: 140px;
    }

    .cases-page-unified .filters,
    .collections-page-root .filters {
        gap: .55rem;
        justify-content: space-between;
    }

    .cases-page-unified .filter-select,
    .collections-page-root .filter-select {
        flex: 1 1 calc(50% - .55rem);
        min-width: 0;
    }
}

@media (width <=560px) {
    .cases-page-unified .search-input,
    .collections-page-root .search-input {
        border-radius: 14px;
        padding: 12px 16px 12px 44px;
    }

    .cases-page-unified .search-container h1,
    .collections-page-root .search-container h1 {
        font-size: 1.55rem;
    }

    .cases-page-unified .search-box,
    .collections-page-root .search-box {
        flex-direction: column;
    }

    .cases-page-unified .search-button,
    .collections-page-root .search-button {
        border-radius: 14px;
        margin-top: .5rem;
        width: 100%;
    }

    .cases-page-unified .filters,
    .collections-page-root .filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
        margin-top: .75rem;
    }

    .cases-page-unified .filter-select,
    .collections-page-root .filter-select {
        width: 100%;
        font-size: .7rem;
        padding: 4px 26px 4px 10px;
        height: 36px;
    }
}

/* Ultra narrow adjustments */
@media (width <=360px) {
    .cases-page-unified .search-container {
        padding: 1.3rem .9rem 1.2rem;
    }

    .cases-page-unified .search-input,
    .collections-page-root .search-input {
        font-size: .85rem;
    }

    .cases-page-unified .search-button,
    .collections-page-root .search-button {
        font-size: .75rem;
    }
}

/* Screen reader only utility */
.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;
}

/* Collapsible filters */
.filters-collapsible {
    max-width: 600px;
    margin: .25rem auto 0;
}

.filters-toggle {
    display: none;
    background: #4d82ff;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: .55rem .9rem;
    font-size: .75rem;
    letter-spacing: .5px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
    position: relative;
}

.filters-toggle:focus {
    outline: 2px solid var(--qk-accent-orange);
    outline-offset: 2px;
}

@media (width <=680px) {
    .filters-collapsible fieldset.filters {
        margin-top: .5rem;
    }

    .filters-collapsible:not(.open) fieldset.filters {
        display: none;
    }

    .filters-toggle {
        display: block;
    }
}

/* -------------------------------------------------- */

/* Unified Search & Filter Size Overrides (Cases Page) */

/* Addresses inconsistent sizing + clipped select text */

/* -------------------------------------------------- */
.cases-page-unified .search-container .search-input {
    height: 56px;

    /* desktop default */
    font-size: .95rem;
    padding: 0 1.1rem 0 48px;
    border: 3px solid #c1c9d2;
    border-radius: 16px;
    line-height: 1.2;
}

.cases-page-unified .search-container .search-input:hover {
    border-color: var(--qk-accent-blue);
}

/* size-override focus moved after media queries */

.cases-page-unified .filters .filter-select {
    height: 40px;
    padding: 6px 28px 6px 12px;
    font-size: .78rem;
    line-height: 1.2;
    background: #fff;

    /* simplify to avoid text contrast issues */
    border: 2px solid #c1c9d2;
    font-weight: 600;
}

.cases-page-unified .filters .filter-select:focus {
    border-color: var(--qk-accent-orange);
    box-shadow: 0 0 0 3px rgb(230 126 34 / 25%);
}

.collections-page-root .filters .filter-select:focus {
    border-color: var(--qk-accent-orange);
    box-shadow: 0 0 0 3px rgb(230 126 34 / 25%);
}

.cases-page-unified .filters .filter-select option {
    font-size: .8rem;
    line-height: 1.2;
}

@media (width <=820px) {
    .cases-page-unified .search-container .search-input {
        height: 54px;
    }

    .cases-page-unified .filters .filter-select {
        height: 38px;
    }
}

@media (width <=560px) {
    .cases-page-unified .search-container .search-input {
        height: 50px;
        font-size: .9rem;
    }

    .cases-page-unified .filters .filter-select {
        height: 36px;
        padding: 5px 26px 5px 10px;
    }
}

@media (width <=400px) {
    .cases-page-unified .search-container .search-input {
        height: 46px;
        padding-left: 44px;
    }
}

@media (width <=400px) {
    .cases-page-unified .filters,
    .collections-page-root .filters {
        grid-template-columns: 1fr;
    }
}

/* Reintroduced hover variants placed after size overrides for order compliance */
.cases-page-unified .search-container .search-input:hover,
.collections-page-root .search-container .search-input:hover {
    border-color: var(--qk-accent-blue);
}

.cases-page-unified .filters .filter-select:hover,
.collections-page-root .filters .filter-select:hover {
    border-color: var(--qk-accent-blue);
    background: #fff;
}

/* Consolidated focus variant after size overrides */
.cases-page-unified .search-container .search-input:focus,
.collections-page-root .search-container .search-input:focus {
    background: #fff;
    animation: qk-glow-pulse 1.8s ease-in-out;
    animation-iteration-count: 1;
    border-color: var(--qk-accent-orange);
    box-shadow: 0 0 0 3px rgb(230 126 34 / 25%);
}

/* Legacy-inspired animated search focus */
@keyframes qk-fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qk-glow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(230 151 90 / 0%);
    }

    50% {
        box-shadow: 0 0 0 4px rgb(230 151 90 / 25%);
    }

    100% {
        box-shadow: 0 0 0 0 rgb(230 151 90 / 0%);
    }
}

.cases-page-unified .search-button::after,
.collections-page-root .search-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 55%) 45%, rgb(255 255 255 / 0%) 90%);
    transform: translateX(-120%);
}

.cases-page-unified .search-button:hover::after,
.collections-page-root .search-button:hover::after {
    animation: qk-sweep .85s ease;
}

@keyframes qk-sweep {
    to {
        transform: translateX(120%);
    }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
    .cases-page .case-card.case-card:hover,
    .collections-page .case-card.case-card:hover,
    .bundle-download:hover,
    .search-box,
    .search-button::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* removed duplicate late redefinitions for header/title/meta/footer; earlier scoped definitions retained */