/* Explore page — searchable index of public works with a tag side panel. */

.ce-explore {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.ce-explore-head { text-align: center; margin-bottom: 40px; }
.ce-explore-head h1 {
    font-size: 2.4rem;
    margin: 0 0 12px 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.ce-explore-search {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 24px auto 0;
    max-width: 640px;
    flex-wrap: wrap;
}
/* `.ce-input` itself is in editor.css — one declaration for every page (#105). The search row
   is built around a roomier control than the stacked forms, and is not width-capped because it
   flexes to fill the row, so both differences are said here rather than by a second `.ce-input`. */
.ce-explore-input { flex: 1; min-width: 240px; padding: 10px 14px; max-width: none; }
.ce-explore-submit { padding: 10px 22px; }
.ce-explore-clear  { padding: 10px 18px; }

/* Breaks to its own full-width line under the box it modifies, rather than competing with the
   buttons for the row — it changes what the search means, so it reads as part of the box. */
.ce-explore-fulltext {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--ce-ink-soft);
    cursor: pointer;
}
.ce-explore-fulltext input { cursor: pointer; }

.ce-explore-active-tag {
    margin: 16px 0 0 0;
    color: var(--ce-ink-soft);
    font-size: 0.95rem;
}
.ce-explore-active-tag strong { color: var(--ce-accent-bold); font-weight: 500; }

.ce-explore-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 40px;
    align-items: start;
}

.ce-explore-empty {
    margin: 48px 0;
    text-align: center;
    color: var(--ce-ink-soft);
    font-style: italic;
}
.ce-explore-empty a { color: var(--ce-accent); }

/* Furniture, not a result.
   This carried the same chrome as `.ce-project-card` — paper fill, 1px rule,
   6px radius, the same padding — so on a page showing three works the browser
   put it at the end of their row in a box that matched them, under a heading,
   and it read as a fourth work called "TAGS". The grid was never wrong: the
   aside has its own column and sits outside <main>. It was wearing the clothes
   of the thing it filters, and a card invites a click it does not answer.
   A rule down the inside edge instead — marginalia, which is the register the
   rest of this surface is written in. The cards keep their box: they are the
   things a reader can actually go to. */
.ce-explore-aside {
    border-left: 1px solid var(--ce-rule);
    padding: 4px 0 4px 20px;
    position: sticky;
    top: 80px;
}
.ce-aside-heading {
    margin: 0 0 14px 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ce-ink-soft);
    font-weight: 600;
}
.ce-aside-empty { margin: 0; color: var(--ce-ink-soft); font-size: 0.9rem; font-style: italic; }
/* What the panel is not showing. Counted rather than trimmed in silence: "these are the roles" and
   "these are the commonest roles" are different claims and only one of them is true. */
.ce-aside-more {
    margin: 8px 0 0;
    color: var(--ce-ink-soft);
    font-size: 0.8rem;
    font-style: italic;
}
.ce-tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ce-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--ce-ink);
    font-size: 0.95rem;
}
.ce-tag-row:hover { background: var(--ce-deep); }
.ce-tag-row-active { background: var(--ce-accent); color: var(--ce-bg); }
.ce-tag-row-active:hover { background: var(--ce-accent-bold); }
.ce-tag-name { word-break: break-word; }
.ce-tag-count {
    color: var(--ce-ink-soft);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.ce-tag-row-active .ce-tag-count { color: var(--ce-bg); opacity: 0.85; }

.ce-tag-chip {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border: 1px solid var(--ce-rule);
    border-radius: 999px;
    background: transparent;
    color: var(--ce-ink-soft);
    font-size: 0.82rem;
    text-decoration: none;
}
.ce-tag-chip:hover { background: var(--ce-accent); color: var(--ce-bg); border-color: var(--ce-accent); }

@media (max-width: 760px) {
    .ce-explore-grid { grid-template-columns: 1fr; }
    /* One column, so the aside is now *below* the results rather than beside
       them — and a rule down its left edge separates it from the page margin
       instead of from the list. It moves to the top edge, which is the edge it
       now shares with the thing it is being distinguished from. */
    .ce-explore-aside {
        position: static;
        border-left: none;
        border-top: 1px solid var(--ce-rule);
        padding: 20px 0 4px 0;
    }
}

/* Works / Characters — CAST-PLAN 14i's cross-project cast search, given a way in.
   Links rather than a toggle so each mode is a URL someone can share, and a quiet underline for
   the active one rather than a filled pill: this chooses what you are searching, it is not an
   action you take. */
.ce-explore-modes {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    font-size: 0.95rem;
}
.ce-explore-mode {
    padding: 4px 2px;
    color: var(--ce-ink-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.ce-explore-mode:hover { color: var(--ce-ink); }
.ce-explore-mode.is-active {
    color: var(--ce-ink);
    border-bottom-color: var(--ce-accent);
}
.ce-explore-cast-field { min-width: 150px; }

/* A character is not a work, so the results are not project cards. Name first, then what they are
   and what they sound like, then the book — which is the thing you click, because finding a book
   by its cast is the point. */
.ce-cast-hits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.ce-cast-hit {
    border: 1px solid var(--ce-rule);
    border-radius: 4px;
    padding: 14px 16px;
    background: var(--ce-paper);
}
.ce-cast-hit-name {
    margin: 0;
    font-size: 1.15rem;
}
.ce-cast-hit-meta {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8rem;
}
.ce-cast-hit-role,
.ce-cast-hit-quality {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--ce-rule);
    color: var(--ce-ink-soft);
}
.ce-cast-hit-role { border-color: var(--ce-accent); color: var(--ce-accent-bold); }
.ce-cast-hit-project {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: var(--ce-ink-soft);
}
.ce-cast-hit-project a { color: var(--ce-accent); }

/* The chosen state of a curated-tag chip, on /projects/new and /settings.
   `.ce-tag-chip` was styled and `.ce-tag-chip-on` was not, so a writer picking
   tags saw no change — the same defect as the rating stars, and invisible to
   the sweep for the same reason: the class is chosen by a condition.

   Filled rather than merely tinted, matching `.ce-tag-chip:hover`, so the
   chosen ones read as a group at a glance. */
.ce-tag-chip-on {
    background: var(--ce-accent);
    border-color: var(--ce-accent);
    color: var(--ce-bg);
}

/* The containers around them, on both forms. */
.ce-tag-category { margin-bottom: 0.75rem; }
.ce-tag-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }

/* A group heading inside the discovery aside. An `<h3>` takes the browser's
   1.17em and its margins, which in a narrow sidebar reads as a page heading
   rather than as a label for the chips under it. */
.ce-aside-subheading {
    margin: 1rem 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ce-ink-soft, #4a3f33);
}