/* browse — the static-HTML (zero-JS) video surface at /.
   Layout only: typography, tokens, panels, and pills come from 🪩.css. */

.browse-page {
   width: min(1440px, calc(100vw - 2rem));
   margin-inline: auto;
   padding-block: clamp(1rem, 3vw, 3.8rem) 3rem;
}

/* hero: intro + mono index left, search form right — the specimen-hero shape
   (div / aside) with the form in the aside seat */
.browse-hero {
   display: grid;
   grid-template-areas:
      "intro search"
      "index search";
   grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
   gap: 1.4rem clamp(1.4rem, 5vw, 6rem);
   align-items: end;
   border-bottom: 1px solid var(--line-strong);
   padding: clamp(1rem, 3vw, 3rem) 0 1.4rem;
   margin-bottom: 1.6rem;
}

.browse-intro { grid-area: intro; }
.browse-intro .type-kicker { margin: 0 0 0.7rem; color: var(--accent); }
.browse-intro h1 { margin: 0; max-width: 10ch; font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 7.7rem); font-weight: 520; letter-spacing: -0.075em; line-height: 0.83; }
.browse-intro h1 em { color: var(--accent); font-weight: 450; }
.browse-deck { margin: 1.2rem 0 0; max-width: 35ch; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.32; }
.browse-hero > search { grid-area: search; }

/* the catalog index — specimen-index idiom: hairline top, quiet mono facts */
.browse-index {
   grid-area: index;
   border-top: 1px solid var(--line-strong);
   padding-top: 0.7rem;
   font-family: var(--font-mono);
   font-size: var(--step--1);
   font-variant-numeric: tabular-nums;
   color: var(--ink-faint);
   display: flex;
   flex-wrap: wrap;
   gap: 0.2rem 1.6rem;
}

.browse-index p { margin: 0; }
.browse-index data { color: var(--ink-soft); }

/* the ONE input is the whole form — Enter submits, no label, no button */
.browse-form {
   position: relative;
}

.browse-form label { display: block; margin-bottom: 0.55rem; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; }

.browse-form input[type="search"] {
   width: 100%;
   padding: 0.85rem 0.9rem;
   border: 1px solid var(--ink);
   border-radius: 0.2rem;
   font-family: var(--font-mono);
   font-size: var(--step--1);
   box-shadow: 0.5rem 0.5rem 0 var(--mark);
}

.browse-form input[type="search"]:focus {
   box-shadow: 0.5rem 0.5rem 0 color-mix(in oklab, var(--accent), transparent 62%);
}

.browse-search-note { margin: 0.85rem 0 0; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--step--2); }
.browse-search-note kbd { margin-inline: 0.1rem; }
.browse-query { display: flex; align-items: stretch; gap: 0.55rem; }
.browse-query button { flex: 0 0 auto; padding-inline: 1rem; }

/* the autocomplete panel — mono completions for the token under the caret, anchored
   under the input; hover / aria-selected share one active look */
.browse-suggest {
   position: absolute;
   inset-inline: 0;
   top: calc(100% + 2px);
   z-index: 30;
   margin: 0;
   padding: 0.25rem 0;
   list-style: none;
   max-height: 19rem;
   overflow-y: auto;
   background: var(--paper-2);
   border: 1px solid var(--line-strong);
   box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
   font-family: var(--font-mono);
   font-size: var(--step--1);
}

.browse-suggest li {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   padding: 0.3rem 0.75rem;
   cursor: pointer;
   color: var(--ink-soft);
}

.browse-suggest li:hover,
.browse-suggest li[aria-selected="true"] {
   background: var(--paper-3);
   color: var(--ink);
}

.browse-suggest-hint { color: var(--ink-faint); }

/* results header — specimen-section idiom: slab title, mono faint fact line */
.browse-results > header h1 {
   font-size: var(--step-2);
   margin: 0;
}

.browse-result-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1rem;
}

.browse-result-head .type-kicker {
   margin: 0;
   font-family: var(--font-mono);
   font-size: var(--step--1);
   font-variant-numeric: tabular-nums;
   color: var(--ink-faint);
}

.browse-result-head p data { color: var(--ink-soft); }

.browse-sorts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem 0.9rem; font-family: var(--font-mono); font-size: var(--step--2); }
.browse-sorts a { color: var(--ink-faint); text-decoration: none; }
.browse-sorts a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 0.35em; }

/* the search's actual SQL, shown as run (vector/id literals compressed server-side) */
.browse-sql {
   margin: 0.7rem 0 0;
   padding: 0.6rem 0.8rem;
   background: var(--paper-2);
   border: 1px solid var(--line);
   font-family: var(--font-mono);
   font-size: var(--step--2);
   color: var(--ink-faint);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
}

/* the hairline grid: 1px gaps over the rule color, no shadows */
.browse-grid {
   list-style: none;
   margin: 1rem 0 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: clamp(0.8rem, 1.4vw, 1.35rem);
   background: none;
   border: 0;
   padding: 0;
}

.browse-card {
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   background: transparent;
   padding: 0 0 0.7rem;
   border-bottom: 1px solid var(--line);
   transition: transform 180ms ease, border-color 180ms ease;
}

/* the card header holds thumb + title (contract: article starts with its header);
   the thumb bleeds to the card edge, text keeps the inset */
.browse-card header {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.browse-thumb img {
   display: block;
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   background: var(--paper-3);
   transition: transform 420ms ease;
}

.browse-thumb { position: relative; display: block; overflow: hidden; background: var(--paper-3); }
.browse-thumb::after { content: "Play"; position: absolute; right: 0.65rem; bottom: 0.65rem; padding: 0.25rem 0.45rem; background: var(--paper-2); color: var(--ink); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; opacity: 0; transform: translateY(0.3rem); transition: opacity 180ms ease, transform 180ms ease; }
.browse-card:hover { transform: translateY(-0.25rem); border-color: var(--accent); }
.browse-card:hover .browse-thumb::after, .browse-card:focus-within .browse-thumb::after { opacity: 1; transform: translateY(0); }
.browse-card:hover .browse-thumb img { transform: scale(1.018); }

/* the playing result keeps the accent so the list position stays visible behind the player */
.browse-card.browse-playing {
   outline: 2px solid var(--accent);
}

/* the player: fixed dead-center, never more than 70% of the window either way,
   over a scrim (click the scrim to close) */
.browse-lightbox {
   position: fixed;
   inset: 0;
   z-index: 10;
   display: grid;
   place-items: center;
   background: rgb(20 18 14 / 72%);
   backdrop-filter: blur(12px);
}

.browse-lightbox video,
.browse-lightbox .browse-embed {
   display: block;
   max-width: 70vw;
   max-height: 70vh;
   background: #000;
   border: 1px solid rgb(255 255 255 / 32%);
   box-shadow: 0 2rem 7rem rgb(0 0 0 / 55%);
}

/* embed-only providers that can't be framed or streamed here: a clear "open at source" panel
   instead of a dead player (see mountEmbed). */
.browse-lightbox .browse-embed-note {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   width: 60vw;
   max-width: 40rem;
   aspect-ratio: 16 / 9;
   max-height: 70vh;
   background: #000;
   border: 1px solid rgb(255 255 255 / 32%);
   box-shadow: 0 2rem 7rem rgb(0 0 0 / 55%);
   color: rgb(255 255 255 / 82%);
   text-align: center;
   padding: 2rem;
}
.browse-lightbox .browse-embed-note p { margin: 0; font-size: 0.95rem; }
.browse-lightbox .browse-embed-note a {
   display: inline-block;
   padding: 0.6rem 1.1rem;
   background: #d0342c;
   color: #fff;
   text-decoration: none;
   border-radius: 0.3rem;
   font-family: var(--font-display);
   font-size: 1.05rem;
}

/* the ported details overlay — the embedding neighborhood + book scenes, docked at the right of the
   lightbox and scrollable. Toggled by `d` (the aside carries [hidden] when off). */
.browse-details {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 11;
   width: 90vw;
   overflow-y: auto;
   padding: 1.4rem 1.6rem 2.8rem;
   background: rgb(8 8 10 / 98%);
   border-left: 1px solid var(--line-strong);
   color: #f2efe9;
   font-size: 1.15rem;
}
.browse-details[hidden] { display: none; }
.browse-details h3 {
   margin: 1.5rem 0 0.7rem;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #aba79e;
}
.browse-details section:first-child h3 { margin-top: 0; }

/* the playing video's own metadata, at the very top of the overlay */
.browse-meta-head { margin: 0 0 0.4rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-strong); }
.browse-meta-head h2 { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; color: #fff; }
.browse-meta-stats {
   margin: 0 0 0.9rem;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
   gap: 0.5rem 1.2rem;
}
.browse-meta-stat { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.browse-meta-stat dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a867d; }
.browse-meta-stat dd { margin: 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: #f2efe9; }
.browse-meta-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }
.browse-meta-tag { padding: 0.15rem 0.55rem; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 1rem; font-family: var(--font-mono); font-size: 0.82rem; color: #d8d4cb; }
.browse-meta-desc { margin: 0 0 0.7rem; font-size: 1.02rem; line-height: 1.45; color: #cfcbc2; white-space: pre-wrap; overflow-wrap: anywhere; }
.browse-meta-src a { color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 0.9rem; }
.browse-meta-src a:hover { text-decoration: underline; }
.browse-det-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 10px;
}
.browse-det-tile {
   display: block;
   text-decoration: none;
   color: inherit;
}
.browse-det-tile img {
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
   background: #000;
   border: 1px solid var(--line, rgb(236 233 227 / 12%));
}
.browse-det-tile span {
   margin-top: 2px;
   font-size: 0.92rem;
   line-height: 1.25;
   color: #b8b4ab;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
/* the wide (90vw) panel: lay the ~300-char quotes out as a responsive multi-column card grid so
   lines stay a readable length instead of running the full panel width. */
.browse-det-scenes {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
   gap: 0 2.2rem;
   margin: 0;
   padding: 0;
   list-style: none;
}
.browse-det-scenes li {
   padding: 0.8rem 0;
   border-top: 1px solid var(--line, rgb(236 233 227 / 14%));
}
.browse-det-scenes a {
   color: #ff8078;
   text-decoration: none;
}
.browse-det-scenes a:hover { text-decoration: underline; }
.browse-det-scenes i { color: #b8b4ab; font-size: 1rem; }
.browse-det-scenes p {
   margin: 0.4rem 0 0;
   font-family: Georgia, "Newsreader", serif;
   font-size: 1.15rem;
   line-height: 1.45;
   color: #e8e4dc;
}

/* our chrome rides the video: the wrap shrink-wraps it so the bar + title span exactly its width.
   (.browse-stage, not .browse-player — that class is the show page's figure) */
.browse-stage {
   position: relative;
   /* opaque backing so the blurred lightbox scrim never shows THROUGH the <video> during the
      first seconds of playback (a not-yet-painted video element is transparent) — that see-through
      was the "gray overlay on the first seconds". */
   background: #000;
}

.browse-stage-progress {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 0%;
   height: 6px;
   background: #d0342c;
}

/* the video's title + metadata + description, top-right over the player, fading after a few seconds */
.browse-stage-info {
   position: absolute;
   top: 6px;
   right: 0;
   z-index: 1;
   max-width: min(42ch, 46%);
   margin: 0;
   padding: 0.7rem 0.9rem 0.9rem;
   text-align: right;
   background: linear-gradient(to left, rgb(0 0 0 / 62%), rgb(0 0 0 / 0%));
   color: #fff;
   text-shadow: 0 1px 3px rgb(0 0 0 / 80%);
   pointer-events: none;
}
.browse-stage-info-title {
   margin: 0;
   /* clear the top-right Close button (shown on hover) so it never covers the title */
   padding-right: 3.4rem;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: clamp(1.05rem, 1.9vw, 1.5rem);
   line-height: 1.15;
}
.browse-stage-info-meta { margin-top: 0.5rem; }
.browse-stage-stats {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.25rem 0.7rem;
   font-family: var(--font-mono);
   font-size: 0.78rem;
   color: #e8e4db;
}
.browse-stage-stat b { font-weight: 400; color: #a9a49a; margin-right: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.66rem; }
.browse-stage-tags {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.25rem;
   margin-top: 0.45rem;
}
.browse-stage-tag {
   padding: 0.05rem 0.45rem;
   background: rgb(255 255 255 / 14%);
   border-radius: 1rem;
   font-family: var(--font-mono);
   font-size: 0.72rem;
   color: #ece8df;
   text-shadow: none;
}
.browse-stage-desc {
   margin: 0.5rem 0 0;
   font-size: 0.84rem;
   line-height: 1.35;
   color: #ded9cf;
   /* keep the description from swallowing the frame — a few lines, then ellipsis */
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.browse-stage-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; padding: 0.35rem 0.55rem; background: rgb(15 15 13 / 72%); border: 1px solid rgb(255 255 255 / 35%); color: white; font-size: 0.68rem; opacity: 0; transition: opacity 160ms ease; }
.browse-stage:hover .browse-stage-close, .browse-stage:focus-within .browse-stage-close { opacity: 1; }

.browse-stage-info.is-fading {
   opacity: 0;
   transition: opacity 3s ease;
}
/* bring the panel back on hover so metadata is always recoverable */
.browse-stage:hover .browse-stage-info.is-fading { opacity: 1; transition: opacity 200ms ease; }

/* fullscreen targets the box (our player, not the system one): black out, let the video fill */
.browse-lightbox:fullscreen {
   background: #000;
}

.browse-lightbox:fullscreen video {
   width: 100vw;
   height: 100vh;
   max-width: none;
   max-height: none;
   object-fit: contain;
   border: 0;
   box-shadow: none;
}

/* the search-in-flight state: stale results swapped for a mono status line + rotating disc */
.browse-spinner {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   padding: 2.4rem 0;
   font-family: var(--font-mono);
   font-size: var(--step--1);
   color: var(--ink-faint);
}

.browse-spinner::before {
   content: "";
   width: 1.1em;
   height: 1.1em;
   border: 2px solid var(--line-strong);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: browse-spin 0.8s linear infinite;
}

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

.browse-card h2,
.browse-card .browse-meta {
   padding-inline: 0.65rem;
}

.browse-card h2 {
   font-size: var(--step-0);
   font-weight: 620;
   line-height: 1.25;
   letter-spacing: -0.01em;
   text-wrap: pretty;
}

/* keyword-dump titles get three lines, then an ellipsis — keeps grid rows even */
.browse-card h2 a {
   color: var(--ink);
   text-decoration: none;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
}

.browse-card h2 a:hover {
   text-decoration: underline;
}

.browse-meta,
.browse-pages,
.browse-dl,
.browse-player figcaption,
.browse-outbound {
   font-family: var(--font-mono);
   font-size: var(--step--2);
   font-variant-numeric: tabular-nums;
   color: var(--ink-faint);
}

.browse-pages {
   display: flex;
   flex-wrap: wrap;
   gap: 0.7rem;
   justify-content: center;
   margin-top: 1.4rem;
}

.browse-pages strong {
   color: var(--ink);
}

/* show page */
.browse-show-head {
   border-bottom: 2px solid var(--line-strong);
   padding-bottom: 0.8rem;
   margin-bottom: 1rem;
}

.browse-player {
   margin: 0 0 1rem;
}

.browse-player video {
   display: block;
   width: 100%;
   max-height: 78vh;
   background: #000;
}

.browse-player figcaption {
   margin-top: 0.4rem;
}

/* each dt/dd pair stays a unit (div-wrapped, valid inside dl) — labels never
   drift away from their values when the row wraps */
.browse-dl {
   display: flex;
   flex-wrap: wrap;
   gap: 0.9rem 2.4rem;
   margin: 0;
}

.browse-dl dt {
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.browse-dl dd {
   margin: 0.15rem 0 0;
   color: var(--ink);
}

/* reader prose: keep the description at book measure, not full page width */
.video-description {
   max-width: var(--measure);
}

.browse-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
   margin-block: 1rem;
}

.browse-tags .pill {
   text-decoration: none;
}

.browse-footer {
   text-align: center;
   padding: 2rem 1rem 3rem;
}

/* the rating meter sits inline with its mono value */
.browse-dl meter {
   width: 7rem;
   margin-right: 0.5rem;
   vertical-align: middle;
}

/* the 1–9 rating row: nine equal keys, the current rating carries the accent */
.browse-rate {
   margin-block: 1.4rem;
}

.browse-rate fieldset {
   border: 1px solid var(--line-strong);
   padding: 0.7rem 0.9rem 0.9rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
}

.browse-rate legend {
   font-family: var(--font-mono);
   font-size: var(--step--2);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--ink-faint);
   padding-inline: 0.4rem;
}

.browse-rate button {
   min-width: 2.4rem;
   font-variant-numeric: tabular-nums;
}

.browse-rate button[aria-current="true"] {
   background: var(--accent);
   color: var(--paper, #fff);
}

.browse-rate .browse-rate-clear {
   margin-left: 0.7rem;
}

/* the image-space neighborhood keeps its own headline rhythm below the article */
.browse-neighbors {
   margin-top: 2.4rem;
   border-top: 2px solid var(--line-strong);
   padding-top: 1.2rem;
}

@media (max-width: 800px) {
   .browse-hero {
      grid-template-areas: "intro" "search" "index" "nav";
      grid-template-columns: 1fr;
      align-items: start;
   }

   .browse-intro h1 { font-size: clamp(3.25rem, 16vw, 5.8rem); }
   .browse-query { gap: 0.35rem; }
   .browse-query button { padding-inline: 0.7rem; }
   .browse-result-head { align-items: start; flex-direction: column; }
   .browse-sorts { justify-content: flex-start; }
   .browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
   .browse-card h2 { font-size: var(--step--1); }
   .browse-card h2, .browse-card .browse-meta { padding-inline: 0.1rem; }
   .browse-stage-close { opacity: 1; }
}