/* ==========================================================================
   PromptVault Pro - design system
   Written from scratch. Does not extend styles.css.

   The previous design was, by the letter, the pattern the industry now calls
   "AI design slop": indigo-to-cyan hero gradient, glassmorphism cards with
   neon glow, Inter everywhere, three equal rounded cards in a row, hover
   bounces. Every one of those is a documented tell. This system is built by
   deliberately inverting them.

   Decisions and why:
   - Warm paper ground, near-black ink. The product is 520 pieces of writing;
     it should look like a reference volume, not a dashboard. It is also the
     furthest thing from a dark purple gradient.
   - One accent (burnt sienna), used only for actions. Nothing else competes.
   - System typefaces (Arial / Helvetica, and the platform monospace for
     prompt bodies). No web fonts: nothing render-blocking, no flash of
     fallback text, and no third-party request on any page.
   - Space does the work that effects used to. Premium reads as restraint.
   - No gradients on text, no glass, no glow, no 3D, no parallax.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Ground and surfaces - true black, with surfaces raised by light rather
       than by shadow. Nothing here is a gradient. */
    --paper:        #08090A;
    --paper-deep:   #0D0E10;
    --surface:      #121316;
    --ink-panel:    #101114;

    /* Text on the dark ground */
    --ink:          #F4F5F7;
    --ink-soft:     #AFB4BD;
    --ink-muted:    #848A94;
    --ink-faint:    #5E646E;
    --on-dark:      #F4F5F7;
    --on-dark-soft: #9AA0AA;

    /* Rules and edges - hairlines of light, never shadows-as-decoration */
    --rule:         rgba(244, 245, 247, 0.10);
    --rule-strong:  rgba(244, 245, 247, 0.24);

    /* The single accent. Actions only.
       A true blue rather than the violet-leaning indigo that every generated
       interface defaults to. */
    --accent:       #2A6BFF;
    --accent-deep:  #1B52D6;
    --accent-wash:  rgba(42, 107, 255, 0.12);

    /* Type - system stacks, no web fonts.

       Dropping the three Google faces removes a render-blocking request and
       the flash that comes with it, and sidesteps the metric surprises that
       caused the previous headline to overflow its own line box. Arial and
       Helvetica are metrically close, so the layout holds on both. */
    --display: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Fluid scale. One ratio, applied consistently. */
    --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
    --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
    --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.45rem);
    --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2.05rem);
    --step-3:  clamp(1.95rem, 1.65rem + 1.5vw, 3rem);
    --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

    /* Rhythm */
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --section: clamp(4.5rem, 9vw, 9rem);
    --measure: 62ch;

    --radius: 4px;
    --radius-lg: 8px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.6;
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Flex and grid children may shrink below their content width. Without this
   a single long token widens the whole page. */
.wrap > *, .grid > *, .row > * { min-width: 0; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection {
    background: var(--accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 760px; }

section {
    padding-block: var(--section);
    position: relative;
}

.rule-top { border-top: 1px solid var(--rule); }

.measure { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */

.display {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--step-4);
    line-height: 1.08;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--step-3);
    line-height: 1.14;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--step-1);
    line-height: 1.25;
    letter-spacing: -0.008em;
}

.lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.body { color: var(--ink-soft); text-wrap: pretty; }

/* Small caps label. Used sparingly to mark a section without a heading. */
.label {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Emphasis inside a headline. With a serif this was an italic; with a
   grotesque, italic reads as an accident, so the accent carries it instead. */
.serif-em {
    font-style: normal;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Actions
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 48px;
    padding: 0.85em 1.5em;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn--primary {
    background: var(--accent);
    color: #fff;
}
.btn--primary:hover { background: var(--accent-deep); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--on-dark {
    background: var(--ink);
    color: var(--paper);
}
.btn--on-dark:hover { background: #fff; }

/* Text link with an underline that is part of the design, not an afterthought */
.link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 1px;
    transition: border-color 0.18s var(--ease);
}
.link:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
}

.site-header[data-scrolled="true"] { border-bottom-color: var(--rule); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 66px;
    flex-wrap: nowrap;
}

.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.wordmark span {
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    white-space: nowrap;
}

.site-header .btn { min-height: 42px; padding: 0.55em 1.1em; font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
    padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3rem, 6vw, 6rem);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hero .display { margin-bottom: 1.25rem; }
.hero .lede { margin-bottom: 2rem; max-width: 34ch; }

.hero__actions {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}

.hero__note {
    margin-top: 1.5rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8. Prompt card - the product, shown as itself

   This is the page's main visual. The research is consistent that showing the
   real thing outperforms decorative graphics, and for a library of writing
   the real thing is the writing.
   -------------------------------------------------------------------------- */

.prompt-card {
    background: var(--ink-panel);
    color: var(--on-dark);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.prompt-card__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    background: rgba(244, 245, 247, 0.03);
    border-bottom: 1px solid var(--rule);
}

.prompt-card__cat {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
}

.prompt-card__id {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--on-dark-soft);
}

.prompt-card__body {
    padding: 1.35rem 1.15rem 1.5rem;
}

.prompt-card__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--step-1);
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 0.9rem;
}

.prompt-card__text {
    font-family: var(--mono);
    font-size: 0.79rem;
    line-height: 1.75;
    color: var(--on-dark-soft);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0;
}

/* Bracketed placeholders are the interesting part - mark them. */
.prompt-card__text mark {
    background: transparent;
    color: #7FA6FF;
    font-weight: 500;
}

.prompt-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.15rem;
    border-top: 1px solid var(--rule);
    font-size: var(--step--1);
    color: var(--on-dark-soft);
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    color: var(--on-dark);
    font-size: var(--step--1);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.copy-btn:hover { background: rgba(244, 245, 247, 0.07); border-color: var(--rule-strong); }
.copy-btn[data-copied="true"] { border-color: #7FB069; color: #A8D48F; }

/* --------------------------------------------------------------------------
   9. Problem section - set on ink so it reads as a turn in the argument
   -------------------------------------------------------------------------- */

.band-dark {
    background: var(--paper-deep);
    color: var(--ink);
    border-block: 1px solid var(--rule);
}

.band-dark .label { color: var(--on-dark-soft); }
.band-dark .body,
.band-dark .lede { color: var(--on-dark-soft); }

.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 3rem;
}

.compare__col > .label { margin-bottom: 1rem; display: block; }

.compare__io {
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.7;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
}

.compare__io--weak { color: var(--ink-muted); }
.compare__io--strong { border-color: rgba(42, 107, 255, 0.5); color: var(--ink); }

/* --------------------------------------------------------------------------
   10. What's inside - asymmetric on purpose, not a triptych
   -------------------------------------------------------------------------- */

.inside {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    margin-top: 3.5rem;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.inside__cell {
    grid-column: span 4;
    background: var(--surface);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* Deliberately uneven: the first cell is wider, breaking the equal-thirds
   rhythm that reads as template output. */
.inside__cell--lead { grid-column: span 6; }
.inside__cell--pair { grid-column: span 6; }
.inside__cell--third { grid-column: span 4; }

.inside__num {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 0.9rem;
}

.inside__cell .h3 { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   11. Category index - reads like a table of contents, because it is one
   -------------------------------------------------------------------------- */

.toc {
    margin-top: 3rem;
    border-top: 1px solid var(--rule);
}

.toc__row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: baseline;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--rule);
}

.toc__num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.toc__name { font-weight: 600; }

.toc__desc {
    display: block;
    font-size: var(--step--1);
    color: var(--ink-muted);
    font-weight: 400;
    margin-top: 0.15rem;
}

.toc__count {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Samples
   -------------------------------------------------------------------------- */

.samples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-top: 3rem;
    align-items: start;
}

/* --------------------------------------------------------------------------
   13. Pricing
   -------------------------------------------------------------------------- */

.price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    margin-top: 3rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
}

.price__tag {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.price__amount {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.6rem, 5.2vw, 3.75rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.price__unit { color: var(--ink-muted); font-size: var(--step--1); }

.price__list { display: grid; gap: 0.7rem; margin-top: 1.5rem; }

.price__list li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.7rem;
    align-items: start;
    font-size: var(--step-0);
    color: var(--ink-soft);
}

.price__list svg { margin-top: 0.35em; color: var(--accent); }

.price__cta { display: grid; gap: 0.9rem; }
.price__cta .btn { width: 100%; }

.price__fine { font-size: var(--step--1); color: var(--ink-muted); text-align: center; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq { margin-top: 2.5rem; border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    min-height: 48px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-right: 1.5px solid var(--ink-muted);
    border-bottom: 1.5px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq__answer {
    padding-bottom: 1.4rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   15. Closing CTA + footer
   -------------------------------------------------------------------------- */

.closer { text-align: center; }
.closer .display { margin-inline: auto; max-width: 16ch; }
.closer .lede { margin: 1.25rem auto 2.25rem; max-width: 46ch; }

.site-footer {
    border-top: 1px solid var(--rule);
    padding-block: 2.5rem 3rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   16. Motion - small, and only where it clarifies

   One effect: content settles into place as it arrives. No 3D, no parallax,
   no tilt. Those were decoration competing with the content for attention.
   Content is visible by default; the class that animates it is added by
   script, so a failed script leaves a readable page.
   -------------------------------------------------------------------------- */

/* There is no scroll-reveal system here, and that is a decision rather than an
   omission.

   Two previous attempts hid content by default and revealed it from script.
   Both left the page blank when the observer did not fire. Nothing in the
   research on what actually converts calls for scroll animation - it calls
   for hierarchy, whitespace and showing the product. So the page is simply
   visible, and the only motion is a short entrance on the hero, driven by
   CSS on load with no JavaScript involved and nothing to fail. */

.hero__copy > *,
.hero__visual {
    animation: rise 0.7s var(--ease) both;
}

.hero__copy > *:nth-child(1) { animation-delay: 0.02s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.14s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.20s; }
.hero__copy > *:nth-child(5) { animation-delay: 0.26s; }
.hero__visual { animation-delay: 0.14s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__copy > *,
    .hero__visual {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero .lede { max-width: var(--measure); }
    .price { grid-template-columns: 1fr; }
    .inside__cell,
    .inside__cell--lead,
    .inside__cell--pair,
    .inside__cell--third { grid-column: span 12; }
}

@media (max-width: 620px) {
    .site-header__actions { gap: 0.75rem; }
    /* The header link is dropped rather than shrunk; the CTA is what matters
       and it keeps a full-size tap target. */
    .site-header__actions .link { display: none; }
    .toc__row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
    .hero__actions { gap: 0.85rem; }
    .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   18. Article pages (the 50 SEO guides)

   Long-form reading, so the constraints are different from the landing page:
   a hard measure, a clear heading rhythm, and prompts set apart from prose.
   ========================================================================== */

.article {
    padding-block: clamp(3rem, 6vw, 5.5rem) var(--section);
}

.article__head {
    max-width: 30ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* An article headline is a page title, not a sales headline - one step down
   from the landing page's display size so it does not shout over its own
   first paragraph. */
.article__head .display {
    font-size: var(--step-3);
    line-height: 1.14;
}

.article__meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.prose {
    max-width: 68ch;
}

.prose > * + * { margin-top: 1.15em; }

.prose p {
    color: var(--ink-soft);
    line-height: 1.7;
    text-wrap: pretty;
}

.prose h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--step-2);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-top: 2.4em;
    text-wrap: balance;
}

.prose h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--step-1);
    line-height: 1.3;
    color: var(--ink);
    margin-top: 2em;
}

.prose ul, .prose ol { padding-left: 1.15rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }

.prose li {
    color: var(--ink-soft);
    line-height: 1.7;
    margin-top: 0.5em;
}

.prose strong { color: var(--ink); font-weight: 600; }

.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--rule-strong);
}
.prose a:hover { text-decoration-color: var(--accent); }

/* The prompts inside an article get the same treatment as everywhere else:
   dark panel, monospace, obviously copy-and-paste-able. */
.prose .prompt-box {
    background: var(--ink-panel);
    border: 1px solid var(--rule);
    color: var(--on-dark-soft);
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.75;
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius-lg);
    margin-top: 1.5em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Inline conversion block at the end of an article. */
.article-cta {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    max-width: 68ch;
}

.article-cta .h3 { margin-bottom: 0.5rem; }
.article-cta .body { margin-bottom: 1.5rem; }

/* Back link at the top of an article. */
.backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
    text-decoration: none;
}
.backlink:hover { color: var(--ink); }

/* ==========================================================================
   19. The member vault

   A working tool rather than a sales page, so the priorities change: density
   over drama, filters that stay reachable, and the prompt text itself as the
   most legible thing on screen. It reuses .prompt-card from the landing page
   so a prompt looks the same everywhere it appears.
   ========================================================================== */

.vault-controls {
    position: sticky;
    top: 66px;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--rule);
    padding-block: 1rem;
}

.vault-search-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.vault-search {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.vault-search:focus-within { border-color: var(--rule-strong); }

.vault-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--step--1);
}

.vault-search input::placeholder { color: var(--ink-faint); }

.vault-count {
    font-size: var(--step--1);
    color: var(--ink-muted);
    white-space: nowrap;
}

.vault-count strong { color: var(--ink); font-weight: 600; }

/* Filter strips scroll rather than wrapping into a tall block that pushes the
   results off screen. */
.filter-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}
.filter-strip::-webkit-scrollbar { display: none; }
.filter-strip + .filter-strip { margin-top: 0.5rem; }

.pill {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius-full, 999px);
    color: var(--ink-muted);
    font-size: var(--step--1);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.pill:hover { color: var(--ink); border-color: var(--rule-strong); }
.pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.vault-main { padding-block: clamp(2rem, 4vw, 3rem) var(--section); }

.prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 1.25rem;
    align-items: start;
}

/* --- a card in the grid --- */

.prompt-card .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    background: rgba(244, 245, 247, 0.03);
    border-bottom: 1px solid var(--rule);
}

.card-cat {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
}

.card-id { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }

.prompt-card .card-body { padding: 1.1rem; }

.card-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--step-1);
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0 0 0.4rem;
}

.card-usecase {
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 0.9rem;
}

.card-meta-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }

.chip {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-full, 999px);
    color: var(--ink-muted);
    white-space: nowrap;
}

.prompt-text-box {
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 1.72;
    color: var(--on-dark-soft);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    max-height: 15rem;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.prompt-loading { color: var(--ink-faint); font-style: italic; }

.pro-tip-box {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    background: var(--accent-wash);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--ink-soft);
}
.pro-tip-box strong { color: var(--ink); }

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--rule);
}

.btn-copy-full {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.9rem;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s var(--ease);
}
.btn-copy-full:hover { background: rgba(244, 245, 247, 0.07); }

/* --- pagination --- */

.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
}

.page-btn {
    min-width: 42px;
    min-height: 42px;
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink-muted);
    font-size: var(--step--1);
    cursor: pointer;
}
.page-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- toast --- */

.vault-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    translate: -50% 0;
    z-index: 80;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1.1rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
    font-size: var(--step--1);
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), translate 0.2s var(--ease);
}

.vault-toast.visible { opacity: 1; translate: -50% -6px; }

/* --- downloads in the header --- */

.vault-downloads { display: flex; gap: 0.6rem; }

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.btn-download:hover { border-color: var(--rule-strong); }

@media (max-width: 760px) {
    .vault-controls { top: 60px; }
    .btn-download span { display: none; }
    .vault-search-row { gap: 0.6rem; }
}