/* ==========================================================================
   Inline PDF embed
   --------------------------------------------------------------------------
   Loaded only on pages that actually carry an embed (blog-generate.mjs injects
   the link when a post contains at least one {{pdf:}} token), so a post with no
   document pays nothing for this.

   Everything here reads the blog's existing tokens. No new palette, no new
   font: --card-bg / --border / --surface / --text-* / --coral-text / --radius-*
   are the same ones .prompt-block and .copy-btn use, so an embed sits in the
   article as another block of the same system.

   The "View document" button is hidden until the script marks the embed
   .is-ready. That is deliberate and load-bearing: with JS off, or if the module
   never loads, the reader never sees a button that cannot do anything, and the
   poster falls back to exactly the two controls that work without any script at
   all -- Download and Open in new tab.
   ========================================================================== */

.pdf-embed {
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ---------- poster ---------- */

.pdf-poster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-md);
}
.pdf-poster-meta { flex: 1 1 14rem; min-width: 0; }

.pdf-kind {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1;
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--coral-text);
    background: var(--surface);
}
.pdf-title {
    margin: 10px 0 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}
.pdf-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ---------- controls ---------- */

.pdf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}
/* Scoped to .pdf-embed, and that is not decoration. `.article-body a` is
   (0,2,0) and paints every body link madder with an underline, so a bare
   `.pdf-btn` at (0,1,0) lost both the colour and the underline reset: the
   download button rendered madder text on a madder fill, which is to say
   nothing at all. Matching its specificity and loading after blog.css is what
   makes these read as buttons instead of prose links. */
.pdf-embed .pdf-btn {
    display: inline-block;
    text-decoration: none;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}
.pdf-embed .pdf-btn:hover {
    color: var(--text-primary);
    border-color: var(--coral-text);
    background: var(--rule);
    text-decoration: none;
}
.pdf-embed .pdf-btn:focus-visible {
    outline: 2px solid var(--coral-text);
    outline-offset: 2px;
}
/* The download is the one control every reader can always use, so it is the one
   that reads as primary.
   --coral-text is NOT one colour: it is #AB3142 in light and #D26978 in dark,
   which inverts which text colour is legible on it. Measured, at 13px, against
   the 4.5 AA floor:
       light  #AB3142   white 6.46   ink 2.53
       dark   #D26978   white 3.48   ink 4.97
   var(--card-bg) is white in light and near-black in dark, so it happens to be
   exactly the side that passes in each. Pinning either literal fails the other
   theme; a fixed ink was tried here and dropped light mode to 2.53. */
.pdf-embed .pdf-btn-primary {
    color: var(--card-bg);
    background: var(--coral-text);
    border-color: var(--coral-text);
}
/* Same pairing, inverted: --text-primary is the dark end in light and the light
   end in dark, and --card-bg is its opposite in both. */
.pdf-embed .pdf-btn-primary:hover {
    color: var(--card-bg);
    background: var(--text-primary);
    border-color: var(--text-primary);
}

/* No script, no button. See the note at the top of this file.
   Both selectors carry .pdf-embed so they can outrank `.pdf-embed .pdf-btn`
   above, which sets display:inline-block. A bare `.pdf-open` at (0,1,0) lost to
   it, and the button showed with scripting off: the one state this whole
   arrangement exists to prevent. */
.pdf-embed .pdf-open { display: none; }
.pdf-embed.is-ready .pdf-open { display: inline-block; }

/* ---------- viewer ---------- */

.pdf-stage { display: none; }
.pdf-embed.is-open .pdf-stage { display: block; }
.pdf-embed.is-open .pdf-poster { display: none; }

.pdf-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 10px var(--spacing-sm);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.pdf-bar-title {
    flex: 1 1 8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.pdf-pager {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pdf-step {
    font-size: 15px;
    line-height: 1;
    padding: 7px 11px;
    min-width: 34px;
}
.pdf-step[disabled] { opacity: .4; cursor: default; }
.pdf-embed .pdf-step[disabled]:hover {
    color: var(--text-secondary);
    border-color: var(--border);
    background: var(--surface);
}
.pdf-count {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    min-width: 5.5em;
    text-align: center;
}

/* Capped so a 15-page deck never runs away with the article, tall enough that a
   slide is actually readable rather than a stamp. */
.pdf-scroll {
    height: min(80vh, 900px);
    min-height: 480px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-alt);
    padding: var(--spacing-sm);
    -webkit-overflow-scrolling: touch;
}
.pdf-scroll:focus-visible {
    outline: 2px solid var(--coral-text);
    outline-offset: -2px;
}
.pdf-page {
    position: relative;
    margin: 0 auto var(--spacing-sm);
    background: #fff;
    box-shadow: var(--shadow-md);
}
.pdf-page:last-child { margin-bottom: 0; }
.pdf-page canvas { display: block; width: 100%; height: auto; }

/* ---------- status ---------- */

.pdf-note {
    padding: var(--spacing-md);
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
}
.pdf-note-err { color: var(--text-primary); }

/* A failed load must never strand the reader in an empty box, so the actions
   come back underneath the message. */
.pdf-fallback {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-md) var(--spacing-md);
}

@media (max-width: 560px) {
    .pdf-poster { padding: var(--spacing-sm); }
    .pdf-actions { width: 100%; }
    .pdf-btn { flex: 1 1 auto; text-align: center; }
    .pdf-scroll { height: 70vh; min-height: 360px; padding: 10px; }
    .pdf-bar-title { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pdf-scroll { scroll-behavior: auto; }
}