/* ==========================================================================
   STORY MAP CSS (Dependent on ../core/atlas.css only)
   ==========================================================================
   Self-contained: the first section is a copy of the Directory's search,
   pill, and card rules (from directory/directory.css), so the
   Story Map looks like the Directory without loading its files. If those
   components change in the Directory and you want the Story Map to match,
   copy the change here too. Map-specific rules follow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Components (copied from directory/directory.css)
   -------------------------------------------------------------------------- */

/* Search Bar */
.search-bar {
    width: 100%;
    margin-bottom: 1.5rem;
}
.search-input {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    border-radius: 9999px;
    border: 1px solid var(--border-strong);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all 0.15s ease;
}
.search-input:focus {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 20%, transparent);
}

/* Directory Filter Pills */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.pill-btn {
    border: 1px solid transparent;
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pill-btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.96);
}
.pill-btn.active {
    background-color: var(--text-secondary) !important;
    border-color: var(--text-secondary) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--shadow-soft);
}

/* Resource Grid & Cards */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.styleBlock {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    border-left: 6px solid var(--border-strong);
    text-align: left;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.styleBlock:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.card-content { margin-bottom: 0.5rem; }

.styleTitle {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.styleTitle a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.styleTitle a:hover {
    color: var(--brand-teal);
}

.styleIdentity {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

.style-text-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.style-text-item {
    font-size: 0.82rem;
    font-weight: 700;
    user-select: none;
}

.cta-container {
    display: flex;
    justify-content: flex-start;
    margin-top: auto;
}

.btn-pill-soft {
    display: inline-block;
    width: auto !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    border-radius: 9999px;
    border: 1px solid var(--border-strong);
    background-color: var(--bg-secondary);
    color: var(--text-secondary) !important;
    transition: all 0.15s ease;
}
.btn-pill-soft:hover {
    background-color: var(--border-color);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.empty-state {
    grid-column: 1 / -1;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px dashed var(--border-strong);
}

@media (max-width: 960px) {
    .resource-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .resource-grid { grid-template-columns: 1fr; }
    .styleBlock { padding: 1rem 1.15rem; }
}

/* --------------------------------------------------------------------------
   Map and story-only pieces
   -------------------------------------------------------------------------- */

.story-map-frame {
    margin-bottom: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
}

#storyMap {
    display: block;
    width: 100%;
    height: auto;
}

/* Land dots: dark enough for the map to read clearly, and darker still on
   phones (below), where each dot is only a pixel or two wide. Still much
   lighter than every pin, so the stories stay the focus. */
.map-dots circle { fill: #AAB6C6; }

/* Pins: a solid dot in the story's color with a white ring, plus a soft
   halo that only shows on hover, focus, or when the story is selected. */
.pin { cursor: pointer; outline: none; }
.pin-hit { fill: transparent; }
.pin-dot {
    fill: var(--pin-color);
    stroke: var(--bg-primary);
}
.pin-halo {
    fill: var(--pin-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.pin:hover .pin-halo,
.pin:focus-visible .pin-halo { opacity: 0.25; }
.pin:focus-visible .pin-dot { stroke: var(--text-primary); }
.pin.is-selected .pin-halo { opacity: 0.35; }
.pin.is-selected .pin-dot { stroke: var(--text-primary); }

.story-count {
    min-height: 1.4em;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.draft-notice {
    margin: 0 0 1rem;
    padding: 0.6rem 1rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--yellow-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--yellow-color) 40%, white);
    color: var(--text-primary);
    font-size: 0.88rem;
}

/* Cards reuse the Directory's .styleBlock; these add story-only details. */
.story-card h2.styleTitle { margin-top: 0; }
.story-card:focus { outline: none; }
.story-card.is-selected {
    box-shadow: 0 0 0 2px var(--text-secondary), var(--shadow-hover);
}

.story-place {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.story-blend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.story-blend-swatch {
    width: 1.5rem;
    height: 0.75rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.story-actions { flex-wrap: wrap; gap: 0.5rem; }
.story-actions .btn-pill-soft { cursor: pointer; font-family: inherit; }

@media (max-width: 640px) {
    .story-map-frame { padding: 0.4rem; }
    .map-dots circle { fill: #94A3B8; }
}
@media (prefers-reduced-motion: reduce) {
    .pin-halo { transition: none; }
}