/* ══════════════════════════════════════════════════════════════════════════════
   PDF TOOLS — shared stylesheet for the contents page, the eight foyers and the
   two-panel workbench they open.

   Scoped on purpose. `.ptp-*` is the foyer/contents page, `.p2-*` is the app.
   Nothing here is global and nothing here reaches another app — every rule sits
   under one of those two prefixes.

   Why a file rather than a <style> block per page (which is what the old
   pdf-tools.html does): there are eight foyers plus a contents page, and the same
   ~250 lines pasted ten times is ten places to fix a gutter.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══ 1. THE PAGE (foyer + contents) ═══════════════════════════════════════════
   Lifted from reading-activities/blackout-poetry.html so the two sets read as
   one family: same 1000px container, same 1.12fr/.88fr hero, same green tick
   dots, same full-width CTA. Renamed .rap → .ptp; do not restyle .rap itself. */

#p2-seo { font-family: 'Space Grotesk', sans-serif; color: #191510; }
.ptp { max-width: 1000px; margin: 0 auto; padding: 0 clamp(1rem,4vw,1.5rem); box-sizing: border-box; }
.ptp *, .ptp *::before, .ptp *::after { box-sizing: border-box; }

/* The hero is ONE RECTANGLE — tops level, bottoms level, the yellow button
   landing on the bottom edge of the picture beside it. The TEXT sets the height
   and the picture follows. */
.ptp-hero { display: grid; grid-template-columns: 1.12fr .88fr; gap: 44px;
            align-items: stretch; align-content: center;
            min-height: calc(100vh - 62px); padding: 34px 0 44px; }
.ptp-herotext { display: flex; flex-direction: column; min-height: 0; }
.ptp-herocta { margin-top: auto; padding-top: 1.2rem; }
.ptp-crumb { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: #8a7f6d; margin: 0 0 .55rem; }
.ptp-crumb a { color: #4a6440; text-decoration: none; }
.ptp-crumb a:hover { text-decoration: underline; }
.ptp h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(2.2rem,5.6vw,3.3rem); letter-spacing: -.03em; line-height: 1.02; margin: 0; }
.ptp-lede { font-weight: 500; font-size: 1.1rem; color: #5f584c; line-height: 1.55; margin: 1rem 0 0; }
.ptp-ticks { margin-top: 1.35rem; }
.ptp-tick { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 1.02rem; line-height: 1.5; color: #2c2720; margin-bottom: 13px; }
.ptp-tick .d { flex: 0 0 19px; height: 19px; border-radius: 50%; background: #6FD060; border: 2px solid #191510; margin-top: 2px; }
.ptp-go { width: 100%; min-height: 52px; margin-top: 14px; padding: 14px; border: 3px solid #191510; border-radius: 16px; background: #FFCE45; color: #191510; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.34rem; letter-spacing: -.01em; box-shadow: 5px 5px 0 #191510; cursor: pointer; }
.ptp-go:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 #191510; }
.ptp-gohint { font-weight: 500; font-size: .8rem; color: #8a7f6d; margin-top: 7px; text-align: center; }

/* The picture beside the hero is a SCREENSHOT OF THE REAL TOOL, never a drawing
   of one — same rule the printable pages follow for their sheet. If the tool
   changes, re-take it. */
.ptp-shotlbl { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: #8a7f6d; margin: 0 0 8px; }
/* Label and picture travel together and centre as one block — the label was
   stranded at the top of the column with the picture floating in the middle. */
.ptp-shotwrap { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
/* ⚠️ A screenshot is 16:10 and the text column beside it is tall, so this one
   does NOT stretch to fill its column the way an A4 sheet does on the printable
   pages — stretching it would crop the tool in half. It keeps its own shape and
   sits centred, which still reads as one rectangle. */
.ptp-shot { background: #fff; border: 2.5px solid #191510; border-radius: 6px; box-shadow: 5px 5px 0 #191510;
            overflow: hidden; line-height: 0; flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 10; }
.ptp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* the writing */
.ptp-body { padding: clamp(2.5rem,5vw,3.5rem) 0 0; }
.ptp-body h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.35rem,3vw,1.62rem); letter-spacing: -.022em; line-height: 1.15; margin: 2.1rem 0 .6rem; }
.ptp-body h2:first-child { margin-top: 0; }
.ptp-body h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em; margin: 1.3rem 0 .35rem; }
.ptp-body p { font-weight: 500; font-size: 1rem; line-height: 1.66; color: #2c2720; margin: 0 0 .95rem; }
.ptp-body ol, .ptp-body ul { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.ptp-body li { font-weight: 500; font-size: 1rem; line-height: 1.62; color: #2c2720; margin-bottom: .45rem; list-style: revert; }
.ptp-body a { color: #4a6440; font-weight: 700; }
.ptp-body strong { font-weight: 700; }
.ptp-note { background: #fff; border: 3px solid #191510; border-radius: 16px; box-shadow: 5px 5px 0 #191510; padding: 16px 20px; margin: 1.4rem 0 1.5rem; }
.ptp-note p:last-child { margin-bottom: 0; }
.ptp-note .lbl { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .64rem; text-transform: uppercase; letter-spacing: .15em; color: #8a7f6d; margin-bottom: 8px; }
table.ptp-tbl { width: 100%; border-collapse: collapse; margin: 0 0 1.3rem; font-size: .95rem; }
table.ptp-tbl th, table.ptp-tbl td { border: 2px solid #191510; padding: 8px 11px; text-align: left; font-weight: 500; line-height: 1.45; vertical-align: top; color: #2c2720; }
table.ptp-tbl th { background: #efe9db; font-weight: 700; font-family: 'Space Mono', monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #5f584c; }

/* closing */
.ptp-end { padding: 2.4rem 0 0; }
.ptp-endgo { display: inline-block; padding: 14px 26px; border: 3px solid #191510; border-radius: 16px; background: #FFCE45; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; box-shadow: 5px 5px 0 #191510; cursor: pointer; }
.ptp-more { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 12px; margin: 1rem 0 0; }
.ptp-more a { display: block; background: #fff; border: 2.5px solid #191510; border-radius: 12px; box-shadow: 3px 3px 0 #191510; padding: 12px 14px; text-decoration: none; color: #191510; }
.ptp-more b { display: block; font-weight: 700; font-size: .98rem; margin-bottom: 2px; }
.ptp-more span { font-weight: 500; font-size: .84rem; color: #5f584c; line-height: 1.4; }
.ptp-by { font-weight: 500; font-size: .86rem; color: #8a7f6d; line-height: 1.55; padding: 2.4rem 0 3.2rem; border-top: 2px dashed #cfc5b2; margin-top: 2.4rem; }

/* ── the contents list ───────────────────────────────────────────────────────
   Rob's call, 2026-08-13: this is the READING ACTIVITIES hub card, not the
   Thinking Routines bullet list. Numbered card, title and one line, a symbol,
   an arrow, and a coloured hard shadow per row. Geometry copied straight off
   `#ra2-root .ra2-act` in apps/reading-activities.js so the two hubs are one
   family — if that one moves, move this one with it.

   ⚠️ These are static <a> elements, NOT rendered by JavaScript the way the
   Reading hub's are. Most AI crawlers never run the script, and this page's
   whole job is to be found. Keep it static.

   The symbols are house outline SVGs. Mulberry was tried and cannot do it —
   it has nothing for join, sort, convert or sign, and returns a four-poster
   bed for "poster". See [[Roadmap]]. */
/* ⚠️ These two selectors carry #p2-seo on purpose. The generic prose rules
   further up — `.ptp-body ol, .ptp-body ul { padding-left: 1.35rem }` and
   `.ptp-body li { list-style: revert }` — are MORE specific than a bare
   `.ptp-list`, so they won, and every card sat 1.35rem to the right of the
   heading above it while the right-hand edge stayed put. That is what made the
   hub look a different width to Reading Activities. Don't lower the specificity. */
#p2-seo .ptp-body ul.ptp-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
#p2-seo .ptp-body ul.ptp-list > li { list-style: none; margin: 0 0 1rem; }
/* ⚠️ The ? is a SIBLING of the card link, laid over it — an <a> inside an <a> is
   invalid HTML and browsers silently unnest it, which breaks the whole row. */
.ptp-li { position: relative; }
/* ⚠️ Both the ? and the arrow are positioned, not flexed. Flexing them fought
   the card's right padding and the ? landed on top of the arrow. Reading order
   left to right is ? then arrow, same as the Reading hub. */
.ptp-li .qm { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); z-index: 2; }
.ptp-li .ptp-act { padding-right: 96px; }

.ptp-act { position: relative; display: flex; align-items: center; gap: 1rem; background: #fff;
           border: 3px solid #191510; border-radius: 16px; padding: 14px 18px;
           text-decoration: none; color: inherit; cursor: pointer;
           transition: transform .08s, box-shadow .08s; }
.ptp-act:hover { transform: translate(-2px,-2px); }
.ptp-act:active { transform: translate(2px,2px); }
.ptp-act .num { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 1.4rem;
                line-height: 1; width: 1.7rem; flex-shrink: 0; color: #b3a892; }
.ptp-act .sym { flex: 0 0 40px; width: 40px; height: 40px; }
.ptp-act .sym svg, .ptp-act .sym img { display: block; width: 100%; height: 100%; }
.ptp-act .meta { flex: 1; min-width: 0; }
.ptp-act .meta h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.02em;
                    font-size: 1.25rem; margin: 0 0 .15rem; color: #191510; }
.ptp-act .meta p { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: .88rem;
                   color: #5f584c; line-height: 1.4; margin: 0; }
.ptp-act .go { position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
               font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.4rem;
               flex-shrink: 0; color: #191510; }
/* The ? is the Reading hub's, doing the same job by a different route: there it
   opens a how-to panel, here it jumps to the writing further down the tool's own
   page. Arrow = just use it, ? = tell me about it first. */
.ptp-li .qm { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #191510;
               background: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
               font-size: 1.05rem; line-height: 1; color: #191510; text-decoration: none;
               box-shadow: 2px 2px 0 #191510; display: flex; align-items: center;
               justify-content: center; padding: 0; flex-shrink: 0; }
.ptp-li .qm:hover { background: #FFCE45; }

/* Not built yet — the dashed row the Reading hub already uses for "more on the
   way", so an unfinished tool is unmistakably not a broken link. */
.ptp-act.soon { padding-right: 18px; border-style: dashed; border-color: #b8ad99; background: #f2ede2;
                box-shadow: none !important; cursor: default; }
.ptp-act.soon:hover, .ptp-act.soon:active { transform: none; }
.ptp-act.soon .meta h3 { color: #5f584c; }
.ptp-act.soon .sym { opacity: .55; }
.ptp-act.soon .lbl { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .6rem;
                     text-transform: uppercase; letter-spacing: .1em; color: #8a7f6d;
                     border: 2px solid #cfc5b2; border-radius: 999px; padding: 3px 10px;
                     flex-shrink: 0; }

/* Mobile is ~89% of the traffic, so the headline must NOT be pushed below the
   fold by the picture. Text first, picture under it, capped. */
@media (max-width: 860px) {
    .ptp-hero { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 28px 0 32px; align-items: start; }
    .ptp-herotext { display: block; }
    .ptp-herocta { padding-top: .4rem; }
    .ptp-shot { max-width: 420px; }
    .ptp-shot img { height: auto; }
    .ptp-body { padding-top: 2.5rem; }
    /* On a phone the number and the symbol together eat the title's line, so the
       number goes and the symbol carries the row on its own. */
    .ptp-act { gap: .7rem; padding: 12px 14px; }
    .ptp-act .num { display: none; }
    .ptp-act .sym { flex-basis: 34px; width: 34px; height: 34px; }
    .ptp-act .meta h3 { font-size: 1.08rem; }
}


/* ══ 2. THE WORKBENCH ═════════════════════════════════════════════════════════
   Two panels: the tools on the left, what you will get on the right. The same
   shape as every preview page in the family (UI and UX Standards → The Preview
   Page), so a teacher moving here from Tarsia or Crossword recognises it.

   ⚠️ box-sizing on the root itself, not only its children. Without it the 18px
   padding is ADDED to height:100% and the panels run off the bottom of the
   window — the trap that clipped every printable in the first rollout. */

#p2-app-stage { display: block; }
#p2-app-stage.p2-playing { height: 100vh; min-height: 100vh; display: flex; flex-direction: column; }
#p2-app-stage.p2-playing #app-container { flex: 1 1 auto; min-height: 0; }
#p2-app-stage > .st-header { position: sticky; top: 0; z-index: 50; background: #fff; }
/* the sticky header fights a locked flex column, so it is unset while playing */
#p2-app-stage.p2-playing > .st-header { position: static; }

.p2-pv { box-sizing: border-box; height: 100%; display: flex; flex-direction: column;
         padding: 18px 22px 22px 18px; background: #FBF6EC;
         font-family: 'Space Grotesk', sans-serif; color: #191510; }
.p2-pv *, .p2-pv *::before, .p2-pv *::after { box-sizing: border-box; }

/* Gutters are measured to the OUTER EDGE OF THE SHADOW, not the border. The
   panels carry a 4px hard shadow bottom-right, so 18/22/22/18 with a 22px gap
   is what actually reads as an even 18px all round. */
.p2-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.p2-panel { min-height: 0; display: flex; flex-direction: column;
            background: #fff; border: 3px solid #191510; border-radius: 16px;
            box-shadow: 4px 4px 0 #191510; padding: 16px 18px 18px; }

/* The screen's titles ARE the panel headings — black, capitals, 1.45rem, one on
   each box, so each names the thing directly underneath it. */
.p2-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.45rem;
            line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; color: #191510; margin: 0; }
.p2-titlesub { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .7rem;
               text-transform: uppercase; letter-spacing: .08em; color: #8a7f6d; margin: 4px 0 0;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-head { flex: 0 0 auto; margin-bottom: 12px; }
.p2-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── left panel: the files ── */
.p2-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
           height: 100%; min-height: 180px; border: 3px dashed #cfc5b2; border-radius: 14px;
           background: #FBF6EC; cursor: pointer; text-align: center; padding: 20px; }
.p2-drop:hover, .p2-drop.on { border-color: #191510; background: #FFF8E6; }
.p2-drop b { font-weight: 700; font-size: 1.02rem; }
.p2-drop small { font-weight: 500; font-size: .85rem; color: #8a7f6d; }

.p2-file { display: flex; align-items: center; gap: 10px; background: #FBF6EC;
           border: 2.5px solid #191510; border-radius: 12px; box-shadow: 3px 3px 0 #191510;
           padding: 10px 12px; margin-bottom: 10px; }
.p2-file .ord { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 2px solid #191510;
                background: #FFCE45; font-family: 'Space Mono', monospace; font-weight: 700;
                font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.p2-file .nm { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .95rem;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-file .ct { flex: 0 0 auto; font-family: 'Space Mono', monospace; font-weight: 700;
               font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7f6d; }

.p2-mini { border: 2px solid #191510; border-radius: 999px; background: #fff; color: #191510;
           padding: 6px 13px; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
           font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
           cursor: pointer; box-shadow: 3px 3px 0 #191510; }
.p2-mini:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #191510; }
.p2-mini:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #191510; }
.p2-mini:disabled { opacity: .4; cursor: default; transform: none; box-shadow: 3px 3px 0 #191510; }
.p2-mini.tiny { padding: 3px 9px; font-size: .62rem; box-shadow: 2px 2px 0 #191510; }
.p2-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.p2-lbl { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .66rem;
          text-transform: uppercase; letter-spacing: .12em; color: #8a7f6d; margin: 16px 0 8px; }
.p2-lbl:first-child { margin-top: 0; }
.p2-note { font-weight: 500; font-size: .86rem; line-height: 1.5; color: #5f584c; margin: 10px 0 0; }
/* The one message a teacher must not scroll past — it is the difference between
   saving a token and wasting one. */
.p2-warn { font-weight: 500; font-size: .86rem; line-height: 1.5; color: #191510; margin: 12px 0 0;
           background: #FFF3D6; border: 2.5px solid #191510; border-radius: 12px;
           box-shadow: 3px 3px 0 #191510; padding: 10px 13px; }

/* ── right panel: what you'll get ── */
.p2-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 12px; }
.p2-pg { position: relative; background: #FBF6EC; border: 2.5px solid #191510; border-radius: 8px;
         aspect-ratio: 1 / 1.414; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.p2-pg img { display: block; max-width: 100%; max-height: 100%; }
.p2-pg .n { position: absolute; right: 3px; bottom: 3px; min-width: 19px; height: 19px; padding: 0 4px;
            border: 2px solid #191510; border-radius: 999px; background: #fff;
            font-family: 'Space Mono', monospace; font-weight: 700; font-size: .6rem;
            display: flex; align-items: center; justify-content: center; }
/* A yellow strip down the left edge marks where the next file starts in the
   merge. ⚠️ It has to be an overlay, not an inset shadow — the thumbnail fills
   the tile and covers anything painted on the tile itself. */
.p2-pg.newfile::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
                        background: #FFCE45; border-right: 2px solid #191510; }
.p2-wait { width: 20px; height: 20px; border: 3px solid #cfc5b2; border-top-color: #191510;
           border-radius: 50%; animation: p2spin .8s linear infinite; }
@keyframes p2spin { to { transform: rotate(360deg); } }

/* ── sheet previews (Poster · Tile · Booklet · Multi-up) ──
   These four print SHEETS rather than a document, so the preview is a picture of
   the paper. Bigger tiles than the page grid, because the whole point is judging
   whether what lands on each sheet is still readable. */
.p2-grid.sheets { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
.p2-grid.sheets.land { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
.p2-pg.land { aspect-ratio: 1.414 / 1; }
/* Pictures are whatever shape the camera made them, so their tiles are square
   and the picture sits inside — cropping a teacher's photo in the preview would
   suggest the saved file crops it too, and it does not. */
.p2-grid.pics { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); }
.p2-pg.free { aspect-ratio: 1 / 1; background: #fff; }
/* A page in the making: white paper with the picture sitting inside it. */
.p2-grid.sheets .p2-pg { background: #fff; }
.p2-pg.free img { object-fit: contain; }

/* ── the working grid (Organise) ──
   Slightly smaller tiles than the preview's, because this one carries two
   buttons per page and there are usually more of them on screen. */
.p2-grid.work { grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: 10px; }
.p2-grid.work .p2-pg { cursor: grab; }
.p2-grid.work .p2-pg:active { cursor: grabbing; }
.p2-pg.over { outline: 3px solid #FFCE45; outline-offset: 2px; }
/* Tile's pack mode: a picked page carries the position it will land in, because
   the ORDER you click is the order they are laid out. */
.p2-grid.work .p2-pg[onclick] { cursor: pointer; }
.p2-pg.picked { outline: 3px solid #191510; outline-offset: -3px; }
.p2-pg .pick { position: absolute; left: 3px; top: 3px; z-index: 2; min-width: 20px; height: 20px;
               padding: 0 5px; border: 2px solid #191510; border-radius: 999px; background: #FFCE45;
               font-family: 'Space Mono', monospace; font-weight: 700; font-size: .6rem;
               display: flex; align-items: center; justify-content: center; }
/* A dropped page stays in the grid so it can be put back — it is crossed out
   rather than removed, which is also what tells you it is not in the result. */
.p2-pg.dropped img { opacity: .32; filter: grayscale(1); }
.p2-pg.dropped::before { content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #C0392B calc(50% - 1.5px),
                #C0392B calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.p2-pg .acts { position: absolute; top: 3px; left: 3px; z-index: 2; display: flex; gap: 3px; opacity: 0;
               transition: opacity .1s; }
.p2-pg:hover .acts, .p2-pg:focus-within .acts { opacity: 1; }
.p2-pg .acts button { width: 21px; height: 21px; padding: 0; border: 2px solid #191510; border-radius: 50%;
                      background: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
                      font-size: .72rem; line-height: 1; cursor: pointer; display: flex;
                      align-items: center; justify-content: center; }
.p2-pg .acts button:hover { background: #FFCE45; }
/* Touch has no hover, so on a tablet the buttons are simply always there. */
@media (hover: none) { .p2-pg .acts { opacity: 1; } }

/* ── typed input and the size read-out ── */
.p2-input { width: 100%; border: 2.5px solid #191510; border-radius: 12px; background: #fff;
            padding: 9px 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
            font-size: .95rem; color: #191510; box-shadow: 3px 3px 0 #191510; }
.p2-input::placeholder { color: #a89d89; }
.p2-mini.on { background: #FFCE45; }
.p2-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p2-sizes > div { background: #FBF6EC; border: 2.5px solid #191510; border-radius: 12px;
                  box-shadow: 3px 3px 0 #191510; padding: 10px 12px; }
.p2-sizes .k { display: block; font-family: 'Space Mono', monospace; font-weight: 700; font-size: .6rem;
               text-transform: uppercase; letter-spacing: .12em; color: #8a7f6d; margin-bottom: 3px; }
.p2-sizes .v { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; }
.p2-sizes .v.big { font-size: 1.35rem; }

.p2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
            height: 100%; min-height: 180px; text-align: center; gap: 8px; padding: 20px;
            font-weight: 500; color: #8a7f6d; }
.p2-empty b { font-weight: 700; font-size: 1.02rem; color: #191510; }

.p2-caption { flex: 0 0 auto; font-family: 'Space Mono', monospace; font-weight: 700; font-size: .66rem;
              text-transform: uppercase; letter-spacing: .08em; color: #8a7f6d;
              margin: 12px 0 0; padding-top: 10px; border-top: 2px dashed #cfc5b2; }

/* ── the header furniture ── */
/* Every header item is a pill, geometry copied from Shell.mountPrintButton so
   Back and Save read as one set: white means go back, green means go. */
#app-overlay-slot .p2-hbtn, .st-header .p2-hbtn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid #191510; border-radius: 999px; background: #fff; color: #191510;
    padding: 7px 15px; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    cursor: pointer; white-space: nowrap; box-shadow: 3px 3px 0 #191510; }
#app-overlay-slot .p2-hbtn:hover, .st-header .p2-hbtn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #191510; }
#app-overlay-slot .p2-hbtn:active, .st-header .p2-hbtn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #191510; }
.st-header .p2-hbtn.go { background: #6FD060; }
.st-header .p2-hbtn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 3px 3px 0 #191510; }

/* On a phone the two panels stack and the whole thing scrolls. Locking a
   660px-tall column to the viewport leaves each panel about 200px, which is
   not enough to see a page thumbnail in. */
@media (max-width: 860px) {
    #p2-app-stage.p2-playing { height: auto; min-height: 100vh; }
    .p2-pv { padding: 14px 16px 18px 14px; }
    .p2-cols { grid-template-columns: 1fr; gap: 16px; }
    .p2-panel { min-height: 320px; }
    .p2-title { font-size: 1.2rem; }
}