/* Crosshairs page — HUD/scope-inspired scoped styles. */

.cx-hero {
    position: relative;
    padding: 56px 0 48px;
    overflow: hidden;
}
.cx-hero::before,
.cx-hero::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--color-ps-primary);
    pointer-events: none;
}
.cx-hero::before { top: 8px; left: 0; border-right: 0; border-bottom: 0; }
.cx-hero::after  { bottom: 8px; right: 0; border-left: 0; border-top: 0; }

.cx-hero-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 768px) {
    .cx-hero-grid { grid-template-columns: 1fr; gap: 24px; }
}

.cx-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-ps-primary);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.32em;
    margin-bottom: 14px;
}
.cx-hero-eyebrow::before {
    content: '';
    width: 22px;
    height: 1.5px;
    background: currentColor;
}
.cx-hero-eyebrow::after {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
}

.cx-hero-title {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--color-ps-dark);
}
.cx-hero-title em {
    font-style: normal;
    color: var(--color-ps-primary);
}

.cx-hero-lede {
    margin-top: 18px;
    color: var(--color-ps-muted);
    max-width: 56ch;
    font-size: 14px;
    line-height: 1.55;
}

.cx-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    font-family: 'Chakra Petch', sans-serif;
}
.cx-hero-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-ps-surface);
    border-left: 3px solid var(--color-ps-primary);
    color: var(--color-ps-dark);
}
.cx-hero-counter strong {
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.04em;
}
.cx-hero-counter span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-ps-muted);
}

.cx-hero-canvas {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    background:
        radial-gradient(circle at 50% 50%, rgba(44,18,217,0.18) 0%, transparent 60%),
        repeating-conic-gradient(rgba(255,255,255,0.02) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px;
    border: 1px solid rgba(44,18,217,0.35);
    overflow: hidden;
}
.cx-hero-canvas::before,
.cx-hero-canvas::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cx-hero-canvas::before {
    background:
        linear-gradient(to right, transparent calc(50% - 0.5px), rgba(44,18,217,0.45) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(44,18,217,0.45) 50%, transparent calc(50% + 0.5px));
}
.cx-hero-canvas::after {
    border: 1px solid rgba(44,18,217,0.45);
    margin: 24%;
    border-radius: 50%;
    animation: cx-pulse 3.6s ease-in-out infinite;
}
.cx-hero-canvas .cx-hero-bracket {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-ps-primary);
}
.cx-hero-canvas .cx-hero-bracket.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.cx-hero-canvas .cx-hero-bracket.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.cx-hero-canvas .cx-hero-bracket.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.cx-hero-canvas .cx-hero-bracket.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

@keyframes cx-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.18); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-hero-canvas::after { animation: none; }
}

/* Toolbar */

.cx-toolbar {
    position: relative;
    margin-top: 36px;
    padding: 18px 22px;
    background: var(--color-ps-surface);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}
.cx-toolbar::before,
.cx-toolbar::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-ps-primary);
    pointer-events: none;
}
.cx-toolbar::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cx-toolbar::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.cx-toolbar-left,
.cx-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cx-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    min-width: 240px;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    transition: border-color 0.18s;
}
.cx-search:focus-within {
    border-color: var(--color-ps-primary);
}
.cx-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-ps-dark);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.cx-search input::placeholder { color: var(--color-ps-dimmed); }
.cx-search kbd {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-dimmed);
    background: var(--color-ps-light);
}

.cx-select,
.cx-pill-btn {
    appearance: none;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-dark);
    padding: 8px 14px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}
.cx-select:hover,
.cx-pill-btn:hover { border-color: var(--color-ps-primary); }

.cx-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cx-pill-btn.cx-primary {
    background: var(--color-ps-primary);
    border-color: var(--color-ps-primary);
    color: #fff;
}
.cx-pill-btn.cx-primary:hover { background: var(--color-ps-primary-light); }

.cx-pill-btn.cx-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
    color: rgb(252, 211, 77);
}
.cx-pill-btn.cx-warning:hover { background: rgba(245, 158, 11, 0.25); }

.cx-author-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.cx-author-chip {
    background: transparent;
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-muted);
    padding: 4px 10px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.16s;
}
.cx-author-chip:hover {
    color: var(--color-ps-dark);
    border-color: var(--color-ps-primary);
}
.cx-author-chip[aria-pressed="true"] {
    background: var(--color-ps-lavender);
    border-color: var(--color-ps-primary);
    color: var(--color-ps-primary);
}

/* Sections */

.cx-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 18px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-ps-primary);
    font-size: 11px;
}
.cx-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-ps-border);
}
.cx-section-label .cx-count {
    color: var(--color-ps-dimmed);
    letter-spacing: 0.12em;
}

/* Featured strip */

.cx-featured {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .cx-featured { grid-template-columns: 1fr 1fr; }
    .cx-featured > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .cx-featured { grid-template-columns: 1fr; }
}

/* Browse grid */

.cx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Card */

.cx-card {
    position: relative;
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cx-card:hover {
    border-color: var(--color-ps-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -16px rgba(44,18,217,0.5);
}

.cx-card.cx-card-large .cx-preview { min-height: 320px; }

.cx-preview {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    background:
        repeating-conic-gradient(#1a1a1e 0% 25%, #252429 0% 50%) 0 0 / 18px 18px;
    border-bottom: 1px solid var(--color-ps-border);
    cursor: zoom-in;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cx-card:hover .cx-preview {
    background-position: 0 0;
    animation: cx-checker-shift 8s linear infinite;
}
@keyframes cx-checker-shift {
    0%   { background-position: 0 0; }
    100% { background-position: 36px 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-card:hover .cx-preview { animation: none; }
}

.cx-preview > img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
    image-rendering: pixelated;
    transition: transform 0.3s ease;
}
.cx-card:hover .cx-preview > img { transform: scale(1.05); }

.cx-preview-bracket {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(44,18,217,0.75);
    opacity: 0;
    transition: opacity 0.18s;
}
.cx-preview-bracket.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.cx-preview-bracket.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.cx-preview-bracket.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.cx-preview-bracket.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.cx-card:hover .cx-preview-bracket { opacity: 1; }

.cx-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px 12px;
}
.cx-card-name {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-ps-dark);
    font-size: 13px;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cx-card-author {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    color: var(--color-ps-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cx-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ps-dimmed);
}
.cx-card-cta {
    margin: 0 14px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--color-ps-lavender);
    border: 1px solid transparent;
    color: var(--color-ps-primary);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.18s;
}
.cx-card-cta:hover {
    background: var(--color-ps-primary);
    color: #fff;
    border-color: var(--color-ps-primary);
}
.cx-card-cta.cx-disabled {
    background: var(--color-ps-elevated);
    color: var(--color-ps-dimmed);
    cursor: not-allowed;
    pointer-events: none;
}

.cx-card-pending-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: rgb(252, 211, 77);
    padding: 2px 8px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 2;
}

/* Empty / no-results */

.cx-empty {
    border: 1px dashed var(--color-ps-border);
    padding: 56px 20px;
    text-align: center;
    background: rgba(255,255,255,0.01);
}
.cx-empty-title {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-ps-dimmed);
    letter-spacing: 0.18em;
    font-size: 14px;
}
.cx-empty-line {
    color: var(--color-ps-muted);
    font-size: 13px;
    margin-top: 8px;
}

/* Submit modal (div-based — keeps the custom cursor visible in top layer) */

.cx-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
}
.cx-modal.is-open { display: flex; }
.cx-modal-inner {
    width: 100%;
    max-width: 520px;
}
.cx-modal-shell {
    position: relative;
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border);
    padding: 28px 26px 22px;
}
.cx-modal-shell::before,
.cx-modal-shell::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-ps-primary);
    pointer-events: none;
}
.cx-modal-shell::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cx-modal-shell::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.cx-modal-eyebrow {
    color: var(--color-ps-primary);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin-bottom: 8px;
}
.cx-modal-title {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-ps-dark);
    font-size: 22px;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}
.cx-modal-notice {
    font-size: 12px;
    color: var(--color-ps-muted);
    background: var(--color-ps-elevated);
    border-left: 3px solid var(--color-ps-primary);
    padding: 10px 12px;
    margin-bottom: 18px;
    line-height: 1.45;
}
.cx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.cx-field label {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    color: var(--color-ps-muted);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.cx-field input[type="text"],
.cx-field input[type="file"] {
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-dark);
    padding: 10px 12px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.cx-field input[type="file"] {
    padding: 9px 10px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
}
.cx-field input[type="text"]:focus {
    outline: 0;
    border-color: var(--color-ps-primary);
}
.cx-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}
.cx-modal-close {
    background: transparent;
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-muted);
    padding: 9px 16px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    cursor: pointer;
}
.cx-modal-close:hover { color: var(--color-ps-dark); border-color: var(--color-ps-dimmed); }

/* Lightbox */

.cx-lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(10px);
    cursor: zoom-out;
    padding: 24px;
}
.cx-lightbox.is-open {
    display: flex;
}
.cx-lightbox-shell {
    position: relative;
    max-width: 460px;
    width: 100%;
}
.cx-lightbox-shell::before,
.cx-lightbox-shell::after,
.cx-lightbox-shell .cx-bb {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--color-ps-primary);
    pointer-events: none;
}
.cx-lightbox-shell::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.cx-lightbox-shell::after  { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.cx-lightbox-shell .cx-bb.bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.cx-lightbox-shell .cx-bb.br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.cx-lightbox-canvas {
    background:
        repeating-conic-gradient(#1f1f24 0% 25%, #2b2a30 0% 50%) 0 0 / 22px 22px;
    padding: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cx-lightbox-canvas img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    image-rendering: pixelated;
}
.cx-lightbox-footer {
    background: var(--color-ps-surface);
    border-top: 1px solid var(--color-ps-border);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
}
.cx-lightbox-footer strong {
    color: var(--color-ps-dark);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
}
.cx-lightbox-close {
    background: transparent;
    color: var(--color-ps-muted);
    border: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.cx-lightbox-close:hover { color: var(--color-ps-dark); }

/* Light theme tuning */
html[data-theme="light"] .cx-preview {
    background: repeating-conic-gradient(#e7e7ee 0% 25%, #f4f4f9 0% 50%) 0 0 / 18px 18px;
}
html[data-theme="light"] .cx-search kbd { background: #fff; }
html[data-theme="light"] .cx-hero-canvas {
    background:
        radial-gradient(circle at 50% 50%, rgba(44,18,217,0.10) 0%, transparent 60%),
        repeating-conic-gradient(rgba(0,0,0,0.04) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px;
}