/* =============================================================================
   pdf.css — the PDF desk's own sheet (labs 562)

   Tokens only. Every colour here is a var() that assets/css/site.css defines
   and assets/css/dark.css redefines, so this one file serves both editions.
   (The one exception is the paper under a page picture, which is white in both:
   it is a sheet of paper.)

   Class names are all prefixed pdf-. site.css owns the short names (.band,
   .console, .field, .btn, .seg__b, .lbl) and this sheet only places them.

   Phones first: two pages to a row at 360, every control at least 44px, nothing
   wider than the screen. Colour is never the only signal: a selected page has a
   tick and a heavy frame and says so, a file is known by its LETTER, a refusal
   is a sentence in a box with a bar.
   ========================================================================== */

/* ------------------------------------------------------------------ the hero */
.pdf-fact {
    margin: 2.2rem 0 0; padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    max-width: 46rem;
    font-size: .84rem; line-height: 1.6; color: var(--ink-55);
}
.pdf-kbd {
    display: inline-block; padding: .02em .42em; margin: 0 .08em;
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
    background: var(--paper); color: var(--ink);
    font: 600 .82em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap;
}

/* ------------------------------------------------------------------ the head */
.pdf-stat { margin: 0 0 0 auto; font-size: .78rem; letter-spacing: .04em; color: var(--ink-55); text-align: right; overflow-wrap: anywhere; }
.pdf-stat--busy { color: var(--ink-77); }
.pdf-stat--live { color: var(--free); }
.pdf-stat--err  { color: var(--taken); }

/* ------------------------------------------------------------------ the drop */
.pdf-drop {
    display: grid; gap: .7rem; justify-items: center; text-align: center;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--line); border-radius: 14px; background: var(--paper);
}
.pdf-drop.is-over { border-color: var(--accent); border-style: solid; }
.pdf-drop__t { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--ink-77); max-width: 34rem; }
.pdf-drop__t b { color: var(--ink); }
.pdf-drop__n { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-55); max-width: 34rem; }
.pdf-file[hidden] { display: none; }
.pdf-btn { min-height: 46px; }
.pdf-btn:focus-visible, .pdf-b:focus-visible, .pdf-fkey:focus-visible, .pdf-key:focus-visible, .pdf-msg__x:focus-visible, .pdf-acts:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pdf-pics { margin: 0; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .84rem; line-height: 1.5; color: var(--ink-77); }
.pdf-pics--off { border-left: 4px solid var(--taken); color: var(--ink); font-weight: 600; }
.pdf-pics[hidden] { display: none; }

/* -------------------------------------------------------------- the messages */
.pdf-msgs { margin: 0; padding: 0; }
.pdf-msgs__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pdf-msgs[hidden] { display: none; }
.pdf-msg {
    display: flex; gap: .7rem; align-items: flex-start; justify-content: space-between;
    margin: 0; padding: .7rem .7rem .7rem .9rem;
    border: 1px solid var(--taken); border-left-width: 4px; border-radius: 10px;
    background: var(--taken-wash);
    font-size: .88rem; line-height: 1.5; font-weight: 600; color: var(--ink);
}
.pdf-msg--note { border-color: var(--line); border-left-color: var(--accent); background: var(--paper); font-weight: 500; color: var(--ink-77); }
.pdf-msg__t { min-width: 0; overflow-wrap: anywhere; }
.pdf-msg__x {
    flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 .7rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink);
    font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
}

/* ----------------------------------------------------------------- the files */
.pdf-opt { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink-55); margin-left: .35rem; }
.pdf-filesbox { display: grid; gap: .45rem; min-width: 0; }
.pdf-filesbox[hidden], .pdf-work[hidden] { display: none; }
.pdf-filesbox .lbl { margin: 0; }
.pdf-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pdf-fileline {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
    padding: .45rem .5rem .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-width: 0;
}
.pdf-fileline__t { flex: 1 1 12rem; min-width: 0; display: grid; gap: .1rem; }
.pdf-fileline__t b { font-size: .9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pdf-fileline__t span { font-size: .78rem; color: var(--ink-55); }
.pdf-fileline__a { display: flex; flex-wrap: wrap; gap: .3rem; }
.pdf-fkey {
    min-height: 44px; min-width: 44px; padding: 0 .7rem;
    border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink);
    font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.pdf-fkey:hover:not(:disabled) { border-color: var(--ink); }
.pdf-fkey:disabled, .pdf-b:disabled, .pdf-key:disabled { opacity: .38; cursor: not-allowed; }
.pdf-tag {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-width: 1.55em; height: 1.55em; padding: 0 .3em;
    border: 1.5px solid var(--ink); border-radius: 5px; background: var(--paper); color: var(--ink);
    font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
}

/* ------------------------------------------------------------------- the bar */
.pdf-work { display: grid; gap: .8rem; min-width: 0; }
.pdf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; min-width: 0; }
.pdf-bar:focus { outline: none; }
.pdf-bar__g { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.pdf-bar__g--range { flex: 1 1 18rem; }
.pdf-bar__l { font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); margin-right: .25rem; }
.pdf-b { min-height: 44px; min-width: 44px; white-space: nowrap; }
.pdf-range { flex: 1 1 9rem; width: 100%; min-width: 0; min-height: 44px; max-width: 20rem; }
.pdf-range-msg { flex: 1 1 100%; margin: 0; padding: .5rem .8rem; border: 1px solid var(--taken); border-left-width: 4px; border-radius: 8px; background: var(--taken-wash); font-size: .84rem; font-weight: 600; color: var(--ink); }
.pdf-range-msg[hidden] { display: none; }

/* what is selected and what to do with it: this strip stays in view while the pages scroll under it */
.pdf-acts {
    position: sticky; top: calc(var(--nav-h) - 1px); z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    margin: 0 -.35rem; padding: .55rem .6rem;
    border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
    box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .5);
}
.pdf-count { flex: 1 1 14rem; margin: 0; font-size: .86rem; line-height: 1.4; font-weight: 600; color: var(--ink); }
.pdf-acts__b { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 40rem) {
    .pdf-acts__b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 100%; gap: .3rem; }
    .pdf-acts__b .pdf-b { padding-inline: .2rem; font-size: .72rem; border-radius: 9px; }
    .pdf-count { font-size: .8rem; }
}

/* ------------------------------------------------------------------ the grid */
.pdf-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .55rem;
    min-width: 0;
}
@media (min-width: 48rem) { .pdf-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .8rem; } }
.pdf-grid.is-dragging { cursor: grabbing; }
.pdf-card {
    position: relative; display: grid; grid-template-rows: 1fr auto; min-width: 0;
    border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper);
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.pdf-card.is-sel { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.pdf-card.is-drag { opacity: .4; }
.pdf-card__pick {
    display: grid; gap: .4rem; align-content: start; width: 100%; min-width: 0; box-sizing: border-box;
    margin: 0; padding: .5rem .5rem .4rem; border: 0; border-radius: 11px 11px 0 0; background: transparent;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pdf-card__pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.pdf-card__pic {
    position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden;
    border-radius: 7px; background: var(--sur-2, rgba(127, 127, 127, .1));
}
/* the picture sits inside the square whichever way it is turned: a quarter turn of a sheet that fits a square still fits */
.pdf-card__pic img {
    position: absolute; inset: 6px; margin: auto; display: block;
    max-width: calc(100% - 12px); max-height: calc(100% - 12px); width: auto; height: auto;
    background: #fff; box-shadow: 0 0 0 1px var(--line);
    transition: transform .18s ease; pointer-events: none; -webkit-user-drag: none;
}
.pdf-sheet { position: absolute; inset: 6px; margin: auto; }
.pdf-sheet {
    display: grid; align-content: center; justify-items: center; gap: .15rem; box-sizing: border-box;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink); min-width: 40%; min-height: 40%;
}
.pdf-sheet b { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.pdf-sheet small { font-size: .62rem; color: var(--ink-55); text-align: center; padding: 0 .2rem; }
.pdf-card__tick {
    position: absolute; top: .3rem; right: .3rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: var(--ink); color: var(--paper); font-size: .85rem; font-weight: 700; line-height: 1; pointer-events: none;
}
.pdf-card.is-sel .pdf-card__tick { display: flex; }
.pdf-card.is-sel .pdf-card__tick::before { content: "\2713"; }
.pdf-card__cap { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; min-width: 0; font-size: .74rem; color: var(--ink-55); }
.pdf-card__pos { font-size: .95rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pdf-card__src { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.pdf-card__turn { flex: 1 1 100%; font-weight: 600; color: var(--ink-77); }
.pdf-card__turn[hidden] { display: none; }
.pdf-card__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pdf-key {
    min-height: 44px; min-width: 0; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink);
    font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.pdf-key:last-child { border-right: 0; }
.pdf-key:hover:not(:disabled) { background: var(--sur-2, rgba(127, 127, 127, .1)); }
.pdf-key:focus-visible { outline-offset: -2px; }
/* where a dragged page will land: a bar on that side of the page under the pointer */
.pdf-drop-before::before, .pdf-drop-after::after {
    content: ''; position: absolute; top: -2px; bottom: -2px; width: 5px; border-radius: 3px; background: var(--accent); z-index: 2;
}
.pdf-drop-before::before { left: -8px; }
.pdf-drop-after::after { right: -8px; }
#desk.is-busy .pdf-grid { pointer-events: none; opacity: .6; }

/* ------------------------------------------------------------------ the save */
.pdf-save { display: grid; gap: .7rem; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.pdf-save__name { display: grid; gap: .1rem; min-width: 0; max-width: 34rem; }
.pdf-save__name .field { width: 100%; min-width: 0; min-height: 46px; box-sizing: border-box; }
.pdf-save__a { display: flex; flex-wrap: wrap; gap: .5rem; }
.pdf-prog { width: 100%; height: 10px; accent-color: var(--accent); }
.pdf-prog[hidden], .pdf-done[hidden] { display: none; }
.pdf-done { padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--free); border-radius: 10px; background: var(--paper); min-width: 0; }
.pdf-done__t { margin: 0 0 .4rem; font-size: .92rem; line-height: 1.5; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pdf-done__t a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
/* the name is a key too (download again): a finger's 44 px */
.pdf-done__t a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15rem; }
.pdf-done__n { margin: 0; padding-left: 1.1rem; font-size: .84rem; line-height: 1.55; color: var(--ink-77); }
@media (max-width: 30rem) { .pdf-save__a .pdf-btn { flex: 1 1 100%; } }
.pdf-say { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.console__body { position: relative; }

/* ------------------------------------------------------------------ the text */
.pdf-h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; margin: 1.6rem 0 .7rem; color: var(--ink); }
.pdf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; margin-top: .6rem; }
@media (max-width: 52rem) { .pdf-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.pdf-cols > div { min-width: 0; }
.pdf-cols p, .pdf-list, .pdf-keys { font-size: .95rem; line-height: 1.62; color: var(--ink-77); max-width: 66ch; }
.pdf-cols p { margin: 0 0 1rem; }
.pdf-cols b { color: var(--ink); font-weight: 600; }
.pdf-cols a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.pdf-list, .pdf-keys { margin: 0 0 1rem; padding-left: 1.15rem; display: grid; gap: .55rem; }
.pdf-cols p.pdf-small { font-size: .84rem; color: var(--ink-55); }
@media (prefers-reduced-motion: reduce) { .pdf-card__pic img { transition: none; } }

/* The house console clips its corners with overflow:hidden, which would also make it the box a sticky strip sticks to
   (so the strip would never follow the scroll). clip keeps the corners without that; where a browser has no clip, the
   console simply does not clip and the head carries its own corners. */
.pdf-console { overflow: visible; overflow: clip; }
.pdf-console .console__head { border-radius: 13px 13px 0 0; }
.pdf-console { margin-top: 1.7rem; }