/**
 * ToolDuck — PDF Editor workspace
 * ===============================================================
 * The editor is its own visual context: a document on a matte stage,
 * with a page rail and a tools panel either side. It deliberately does
 * not reuse the card grid used elsewhere on the site, because a
 * document workspace is not a card.
 *
 * Everything reads from the tokens in main.css, so both themes work
 * without a second palette here.
 */

/* The tool shell supplies the frame; the workspace fills it. The
   default shell padding would waste 1.85rem on every side of an app
   that is meant to feel edge-to-edge. */
body.tool-page--pdf-editor .tool-shell {
    padding: 0;
    overflow: hidden;
}

.pdfx {
    --pdfx-radius: var(--radius);
    --pdfx-rail: 13.5rem;
    --pdfx-tools: 14.5rem;
}

/* -----------------------------------------------------------------
   Empty state
   ----------------------------------------------------------------
   A drop target big enough to be obvious and small enough not to push
   the explanation off the screen.
   ----------------------------------------------------------------- */

/* An element that sets its own `display` outranks the browser's
   [hidden] rule, so hiding a panel has to be said outright here. */
.pdfx [hidden] { display: none !important; }

.pdfx-drop {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
    padding: clamp(1.75rem, 6vw, 3.25rem) 1.25rem;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.pdfx-drop.is-dragover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.pdfx-drop__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: .85rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--brand);
}

.pdfx-drop__glyph svg { width: 26px; height: 26px; }

.pdfx-drop__title {
    margin: 0 0 .35rem;
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    font-weight: 700;
    color: var(--ink);
}

.pdfx-drop__sub { margin: 0 0 1rem; color: var(--ink-3); font-size: .95rem; }

.pdfx-link {
    font: inherit;
    color: var(--brand-strong);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.pdfx-link:hover { color: var(--brand); }
.pdfx-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

.pdfx-drop__limit { margin: 0; font-size: .84rem; color: var(--ink-4); }

/* -----------------------------------------------------------------
   Workspace shell
   ----------------------------------------------------------------- */

.pdfx-workspace {
    display: flex;
    flex-direction: column;
    min-height: min(80vh, 900px);
    background: var(--bg-muted);
}

/* --- Toolbar ---------------------------------------------------- */

.pdfx-bar {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    padding: .5rem .65rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.pdfx-bar__group {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.pdfx-bar__group--file { min-width: 0; flex: 1 1 14rem; }
.pdfx-bar__group--end { margin-left: auto; }

.pdfx-bar__name {
    font-weight: 650;
    font-size: .92rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

.pdfx-bar__meta,
.pdfx-bar__pages,
.pdfx-bar__zoom {
    font-size: .8rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pdfx-bar__pages { min-width: 9.5ch; text-align: center; }
.pdfx-bar__zoom { min-width: 4.5ch; text-align: center; }

.pdfx-icon-btn,
.pdfx-text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 .55rem;
    min-width: 32px;
    height: 32px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.pdfx-text-btn { min-width: auto; }

.pdfx-icon-btn:hover:not(:disabled),
.pdfx-text-btn:hover:not(:disabled) {
    background: var(--bg-muted);
    color: var(--ink);
    border-color: var(--border);
}

.pdfx-icon-btn:focus-visible,
.pdfx-text-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.pdfx-icon-btn:disabled,
.pdfx-text-btn:disabled { opacity: .4; cursor: not-allowed; }

.pdfx-icon-btn svg { width: 16px; height: 16px; }

/* -----------------------------------------------------------------
   Body: rail | stage | tools
   ----------------------------------------------------------------- */

.pdfx-body {
    flex: 1;
    display: grid;
    grid-template-columns: var(--pdfx-rail) minmax(0, 1fr) var(--pdfx-tools);
    min-height: 0;
}

/* --- Page rail -------------------------------------------------- */

.pdfx-rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: .75rem .5rem;
}

.pdfx-rail__title {
    margin: 0 .35rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.pdfx-thumbs {
    list-style: none;
    margin: 0;
    padding: 0 .35rem 0 0;
    display: grid;
    gap: .5rem;
    /* Without this the grid stretches its rows to fill the rail. A grid
       distributes leftover height among auto-sized rows by default, so
       with two pages in a tall rail each thumbnail got a row several
       hundred pixels deep and they appeared to be flung apart. */
    align-content: start;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.pdfx-thumb {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: .25rem;
    border-radius: var(--radius-sm);
}

.pdfx-thumb.is-dragging { opacity: .4; }
.pdfx-thumb.is-over .pdfx-thumb__frame { border-color: var(--brand); box-shadow: var(--focus-ring); }

.pdfx-thumb__button {
    display: grid;
    gap: .3rem;
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: center;
}

.pdfx-thumb__frame {
    display: block;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 4px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    line-height: 0;
    padding: 3px;
}

.pdfx-thumb.is-current .pdfx-thumb__frame {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.pdfx-thumb__frame canvas { display: block; width: 100%; height: auto; }

.pdfx-thumb__num {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.pdfx-thumb.is-current .pdfx-thumb__num { color: var(--brand-strong); }

.pdfx-thumb__order { display: grid; gap: .15rem; }

.pdfx-thumb__move {
    min-width: 24px;
    width: 24px;
    height: 24px;
    font-size: .8rem;
    padding: 0;
    opacity: .55;
}

.pdfx-thumb:hover .pdfx-thumb__move { opacity: 1; }

.pdfx-rail__hint {
    margin: .7rem .35rem 0;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--ink-4);
}

.pdfx-rail__hint kbd {
    font-family: var(--mono);
    font-size: .7rem;
    padding: .05rem .25rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-soft);
}

/* --- Stage ------------------------------------------------------ */

.pdfx-stage {
    position: relative;
    overflow: auto;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%),
        var(--bg-muted);
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* The page sits on its own shadow, which is what makes it read as a
   sheet of paper rather than a canvas element. */
.pdfx-canvas-wrap {
    position: relative;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .14), 0 18px 40px -22px rgba(16, 24, 40, .5);
    line-height: 0;
    max-width: 100%;
}

.pdfx-canvas-wrap canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* The annotation layer sits pixel-for-pixel over the page. `inset: 0`
   rather than a size of its own, so it follows the page canvas at every
   zoom without a second sizing rule to keep in step. */
.pdfx-annot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    /* The gesture must not be handed to the browser. A text selection or
       a native drag lets Chromium auto-scroll the window to extend it,
       which slides the page out from under a stroke mid-draw. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* -----------------------------------------------------------------
   Annotation tools
   ----------------------------------------------------------------- */

.pdfx-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    margin-bottom: .5rem;
}

.pdfx-tool--palette {
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    min-height: 58px;
    padding: .4rem .3rem;
    font-size: .74rem;
    text-align: center;
    border-color: var(--border);
    background: var(--surface);
}

.pdfx-tool--palette .pdfx-tool__glyph { font-size: 1.05rem; }

/* A pressed tool is a mode the visitor is in, not an action they took,
   so it is marked with a filled state rather than a hover tint. */
.pdfx-tool--palette.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pdfx-tool--palette.is-active:hover { background: var(--brand-strong); color: #fff; }

.pdfx-tool__hint {
    margin: .25rem 0 .5rem;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--ink-4);
}

.pdfx-count {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: .68rem;
    font-weight: 700;
    vertical-align: middle;
}

.pdfx-field-stack { display: grid; gap: .5rem; }

/* Collapsed by default: metadata matters to a minority of visitors and
   five inputs open on load would push the annotation tools, which
   matter to everyone, below the fold. */
.pdfx-meta {
    display: grid;
    gap: .3rem;
    padding: .2rem 0;
    border-top: 1px solid var(--border);
}

.pdfx-meta > summary {
    cursor: pointer;
    list-style: none;
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.pdfx-meta > summary::-webkit-details-marker { display: none; }

.pdfx-meta > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: .4rem;
    transition: transform .15s ease;
}

.pdfx-meta[open] > summary::before { transform: rotate(90deg); }

.pdfx-meta > summary:hover { background: var(--brand-soft); color: var(--brand-strong); }
.pdfx-meta > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pdfx-meta > *:not(summary) { padding-inline: .6rem; }

.pdfx-field {
    display: grid;
    gap: .25rem;
    font-size: .76rem;
    color: var(--ink-3);
}

.pdfx-field > span { font-weight: 600; }

.pdfx-field input,
.pdfx-field select {
    font: inherit;
    font-size: .84rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .45rem .55rem;
    min-height: 40px;
    width: 100%;
}

.pdfx-field input:focus-visible,
.pdfx-field select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.pdfx-text-btn--block {
    display: flex;
    width: 100%;
    padding: .5rem .6rem;
    border-color: var(--border);
    background: var(--surface);
}

.pdfx-text-btn--danger { color: var(--err); }

.pdfx-text-btn--danger:hover:not(:disabled) {
    background: var(--err-bg);
    border-color: color-mix(in srgb, var(--err) 30%, transparent);
    color: var(--err);
}

@media (max-width: 1100px) {
    .pdfx-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .pdfx-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pdfx-busy {
    position: absolute;
    inset: auto 1rem 1rem auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    font-size: .85rem;
    color: var(--ink-2);
}

.pdfx-busy__spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    border-top-color: var(--brand);
    animation: pdfx-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .pdfx-busy__spinner { animation-duration: 2.4s; }
}

/* --- Tools ------------------------------------------------------ */

.pdfx-tools {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 0;
    overflow-y: auto;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: .75rem .6rem;
}

.pdfx-tool-group { display: grid; gap: .3rem; }

.pdfx-tool {
    display: flex;
    align-items: center;
    gap: .6rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 550;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: .55rem .6rem;
    min-height: 42px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.pdfx-tool:hover:not(:disabled) {
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-color: var(--brand-border);
}

.pdfx-tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pdfx-tool:disabled { opacity: .4; cursor: not-allowed; }

.pdfx-tool--danger:hover:not(:disabled) {
    background: var(--err-bg);
    color: var(--err);
    border-color: color-mix(in srgb, var(--err) 30%, transparent);
}

.pdfx-tool__glyph { font-size: 1rem; line-height: 1; }

.pdfx-tool-group--soon {
    margin-top: .75rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}

.pdfx-tool__soon-title {
    margin: 0 0 .4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.pdfx-tool__soon {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .3rem;
    font-size: .82rem;
    color: var(--ink-3);
}

.pdfx-tool__soon li { padding-left: .9rem; position: relative; }
.pdfx-tool__soon li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-4);
}

.pdfx-tool__soon-note {
    margin: .6rem 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--ink-4);
}

/* --- Status ----------------------------------------------------- */

.pdfx-status {
    margin: 0;
    padding: .6rem .85rem;
    font-size: .85rem;
    line-height: 1.5;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-2);
}

.pdfx-status--ok { color: var(--ok); background: var(--ok-bg); }
.pdfx-status--warn { color: var(--warn); background: var(--warn-bg); }
.pdfx-status--error { color: var(--err); background: var(--err-bg); }

/* -----------------------------------------------------------------
   Tablet — the tools panel moves under the page
   ----------------------------------------------------------------- */

@media (max-width: 1100px) {
    .pdfx-body {
        grid-template-columns: var(--pdfx-rail) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .pdfx-tools {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .5rem 1.25rem;
        border-left: 0;
        border-top: 1px solid var(--border);
        overflow: visible;
    }
    .pdfx-tool-group { display: flex; flex-wrap: wrap; gap: .3rem; }
    .pdfx-tool { width: auto; }
    .pdfx-tool-group--soon { margin: 0; padding: 0 0 0 1.25rem; border-top: 0; border-left: 1px solid var(--border); }
}

/* -----------------------------------------------------------------
   Phone — a single column with the page rail as a strip.
   Deliberately not the desktop layout squeezed narrower: the rail
   becomes horizontal, and the tools sit under the page where a thumb
   can reach them.
   ----------------------------------------------------------------- */

@media (max-width: 720px) {
    .pdfx-workspace { min-height: auto; }

    .pdfx-bar { gap: .35rem .5rem; padding: .45rem .5rem; }
    .pdfx-bar__group--file { flex: 1 1 100%; }
    .pdfx-bar__group--end { margin-left: 0; }
    .pdfx-bar__name { max-width: none; }

    .pdfx-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    /* Pages become a horizontal strip. */
    .pdfx-rail {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: .5rem;
    }
    .pdfx-rail__title,
    .pdfx-rail__hint { display: none; }
    .pdfx-thumbs {
        grid-auto-flow: column;
        grid-auto-columns: 84px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: .25rem;
        gap: .4rem;
    }
    .pdfx-thumb__order { display: none; }

    .pdfx-stage { padding: .85rem; }

    .pdfx-tools {
        border-top: 1px solid var(--border);
        padding: .5rem;
    }
    .pdfx-tool-group--soon { display: none; }
    .pdfx-tool { min-height: 44px; }
}