/* EasyPDF page, Highlighter and scissors look: highlighter sweeps over headings, scissors cut along dotted lines
   between sections, a red pen circles a word and a big scan shrinks in the Make it smaller card.
   Loaded after the page's own styles; the marks are added by easypdf-marks.js, so without script the page is plain. */

:root {
  --pg-hl: #FFE36E; --pg-hl-dark-band: rgba(255, 214, 64, .32);
  --pg-pen: #D2363F; --pg-cut: #DDBCC0; --pg-meter: #F2E4E2; --pg-ok: #2E7D4F;
}
@media (prefers-color-scheme: dark) {
  :root { --pg-hl: rgba(255, 214, 64, .30); --pg-pen: #F07A80; --pg-cut: #6B4A4E; --pg-meter: #3B2927; --pg-ok: #6FCB93; }
}

/* ---- PG-B1 highlighter: sweeps left to right over each heading as it comes into view ---- */
.pg-hl, .pg-t {
  background: linear-gradient(100deg, transparent 0, var(--pg-hl) 2%, var(--pg-hl) 98%, transparent) no-repeat 0 82% / 0% 48%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--ease) .2s;
}
.band-dark .pg-t { --pg-hl: var(--pg-hl-dark-band); }
.pg-hl.pg-in, .pg-t.pg-in, html.calm .pg-hl, html.calm .pg-t { background-size: 100% 48%; }
html.calm .pg-hl, html.calm .pg-t { transition: none; }
/* The hero word waits for its line to land first. */
html.motion .hero .pg-hl { transition-delay: 1.1s; }

/* ---- PG-B2 scissors: cut along the dotted line between sections ---- */
.pg-cut { max-width: 1072px; margin: 0 auto; padding: 0 24px; }
.pg-cut > div { position: relative; border-top: 2px dashed var(--pg-cut); }
.pg-cut span { position: absolute; top: -15px; left: 0; font-size: 24px; line-height: 1; color: var(--accent); transition: left 2.4s var(--ease); }
.pg-cut.pg-in span { left: calc(100% - 26px); }
html.calm .pg-cut span { left: calc(100% - 26px); transition: none; }

/* ---- PG-B3 red pen circles a word under How it works ---- */
.pg-say { font-size: 1.15rem; color: var(--muted); margin: -2px 0 30px; }
.pg-circ { position: relative; white-space: nowrap; color: var(--text); margin: 0 .3em; }
.pg-circ svg { position: absolute; left: -10px; top: -8px; width: calc(100% + 20px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.pg-circ path { fill: none; stroke: var(--pg-pen); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s ease .5s; }
.pg-circ.pg-in path, html.calm .pg-circ path { stroke-dashoffset: 0; }
html.calm .pg-circ path { transition: none; }

/* ---- PG-B4 a 14.2 MB scan shrinks to 1.8 MB; click to run it again ---- */
.pg-shrink {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%;
  margin-top: 16px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pg-file { width: 40px; height: 50px; border-radius: 5px; background: var(--accent); color: var(--on-accent); font: 800 .7rem/50px "Segoe UI", system-ui, sans-serif; text-align: center; }
.pg-name { display: block; font-size: .92rem; color: var(--muted); }
.pg-meter { display: block; height: 8px; border-radius: 4px; background: var(--pg-meter); margin: 6px 0; overflow: hidden; }
.pg-meter i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 4px; }
.pg-size { font: 700 1rem "Cascadia Mono", Consolas, monospace; }
.pg-ok { margin-left: 8px; color: var(--pg-ok); font-weight: 600; font-size: .88rem; opacity: 0; transition: opacity .3s; }
.pg-ok.on { opacity: 1; }