/* src/printpipe/web/static/s270.css */
/* THE ONE STYLESHEET (S270, D21/D24).
   The ratified look, from the design canvas and cywaithmds/s270_look.css
   (2026-10-07 to 10-11), restructured onto the live templates' markup.
   Light only (C2). System font, body 17 px. Tokens on :root with their
   MEASURED CONTRASTS (WCAG): brand #2457C5 with white 6.47; brand-dark
   #1B4398 with white 9.12; ink #15181E on white 17.78; ink-2 #4A5260 on
   white 7.87, on ground 7.27; warn-ink #8A4600 on warn-bg #FFF3E0 6.48;
   stop-ink #3D4350 on stop-bg #EEF0F3 8.69; brand-dark on brand-tint
   7.90; greyed text #5B6270 on #F4F6F9 5.66; disabled button text
   #3D4350 on #C9CFD8 6.33.
   D20: controls at least 44 px tall, main buttons 52; the keyboard
   letters show only where hover and a fine pointer exist; widths and
   input types both decide. D21: meaning never rests on colour alone -
   a signal is an icon plus words, a greyed control a dashed outline
   plus a padlock plus words, a selected size is filled AND ticked. */
:root{
  --brand:#2457C5; --brand-dark:#1B4398; --brand-tint:#E8EFFC;
  --ink:#15181E; --ink-2:#4A5260; --line:#D9DEE6; --control:#7C8595;
  --ground:#F4F6F9; --card:#FFFFFF;
  --warn-ink:#8A4600; --warn-bg:#FFF3E0; --warn-line:#EBC48A; --warn-mark:#C2670A;
  --stop-ink:#3D4350; --stop-bg:#EEF0F3;
  --greyed-ink:#5B6270; --disabled-bg:#C9CFD8; --disabled-ink:#3D4350;
  --radius:10px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
html{background:var(--ground)}
body.pp{margin:0;font-family:var(--font);color:var(--ink);background:var(--ground);font-size:17px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
.pp *{box-sizing:border-box}
.pp a{color:var(--brand)} .pp a:hover{color:var(--brand-dark)}
.pp :focus-visible{outline:3px solid var(--brand-dark);outline-offset:2px}
.pp [hidden]{display:none !important}
.pp-defs{position:absolute;width:0;height:0;overflow:hidden}
.pp img{max-width:100%}
.pp svg{max-width:100%}

/* ---- header, progress, main, footer ---- */
.pp-top{background:var(--brand);color:#fff;position:relative}
.pp-top-inner{max-width:960px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.pp-mark{font-weight:800;font-size:22px;letter-spacing:-0.01em}
/* the mark is the way home (S280, D4): a link, or on an open job the
   summary of the new-job question, whose panel drops below the bar */
.pp a.pp-mark{color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pp a.pp-mark:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.pp-leave{position:static}
.pp-leave summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.pp-leave summary::-webkit-details-marker{display:none}
.pp-leave summary:hover{text-decoration:underline;text-underline-offset:4px}
.pp-leave-panel{position:absolute;left:0;right:0;top:100%;z-index:5;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 12px 30px rgba(21,24,30,.2);padding:16px max(24px,calc((100% - 912px) / 2)) 20px}
.pp-leave-q{font-weight:700;font-size:18px;margin:0}
.pp-leave-panel .pp-actions{margin-top:14px}
.pp-job{background:#fff;color:var(--ink);border-radius:10px;padding:6px 16px 8px;display:flex;flex-direction:column;align-items:center;line-height:1.1;box-shadow:0 2px 6px rgba(21,24,30,.18)}
.pp-job-label{font-size:13px;font-weight:600;color:var(--ink-2)}
.pp-job-code{font-size:30px;font-weight:800;letter-spacing:.12em;color:var(--brand-dark);font-variant-numeric:tabular-nums}
.pp-steps{background:var(--card);border-bottom:1px solid var(--line)}
.pp-steps ol{max-width:960px;margin:0 auto;padding:14px 24px;list-style:none;display:flex;gap:28px}
.pp-step{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:15px;font-weight:600}
.pp-num{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--control);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.pp-step.is-done .pp-num{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark)}
.pp-step.is-current{color:var(--ink)}
.pp-step.is-current .pp-num{background:var(--brand);border-color:var(--brand);color:#fff}
.pp-step.is-current .pp-label{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;text-decoration-color:var(--brand)}
.pp-steps-compact{display:none}
.pp-bar{display:flex;gap:4px;margin-top:8px}
.pp-bar span{flex:1;height:6px;border-radius:3px;background:var(--line)}
.pp-bar span.on{background:var(--brand)}
.pp-compact-text{font-size:15px;font-weight:600;color:var(--ink-2)}
.pp-compact-text b{color:var(--ink)}
.pp-main{width:100%;max-width:960px;margin:0 auto;padding:36px 24px 56px;flex:1 0 auto}
.pp-foot{background:var(--ink);color:#fff;text-align:center;padding:18px 16px;font-size:15px;font-weight:600}

/* ---- type ---- */
.pp-h1{font-size:32px;line-height:1.2;margin:0 0 6px;letter-spacing:-0.02em}
.pp-lede{color:var(--ink-2);margin:0 0 8px}
.pp-lede a{font-weight:600}
.pp-info{font-size:15px;color:var(--ink-2);margin:8px 0 0}
.pp-hint{font-size:14px;color:var(--ink-2);margin:6px 0 0}
.pp-section-title{font-size:18px;margin:28px 0 12px}
.pp-h2{font-size:20px;margin:24px 0 10px}
.pp-name{font-weight:700;font-size:18px;margin:0;overflow-wrap:anywhere}
.pp-meta{color:var(--ink-2);font-size:15px;margin:0}
.pp-failt{text-align:center;font-size:44px;font-weight:800;letter-spacing:-0.01em;color:var(--brand);margin:0 0 20px;line-height:1.1}
.pp-code-plain{font-size:40px;font-weight:800;letter-spacing:.14em;color:var(--brand-dark);margin:4px 0 16px}

/* ---- panels, item cards, compact rows ---- */
.pp-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 20px}
.pp-panel h2{font-size:20px;margin:0 0 4px}
.pp-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 16px;display:grid;grid-template-columns:128px 1fr;grid-template-areas:"thumb head" "thumb body";column-gap:20px;row-gap:4px}
.pp-thumb{grid-area:thumb;width:128px;height:128px;border-radius:6px;border:1px solid var(--line);background:var(--stop-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--control)}
.pp-thumb img{width:100%;height:100%;object-fit:contain}
.pp-thumb svg{width:40px;height:40px}
.pp-head{grid-area:head;min-width:0}
.pp-body{grid-area:body;min-width:0}
.pp-row{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:0 0 12px;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center}
.pp-row .pp-thumb{grid-area:auto;width:72px;height:72px}
.pp-row > div{min-width:0}
.pp-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pp-row.pp-row-plain{grid-template-columns:minmax(0,1fr)}
.pp-total{display:flex;align-items:baseline;gap:10px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:4px 0 20px;font-weight:700}
.pp-total b{font-size:24px}
.pp-tag{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink-2)}
.pp-tag svg{width:18px;height:18px}
.pp-list{list-style:none;margin:0;padding:0}

/* the document line of an opened file, its page rows indented (D13) */
.pp-doc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 16px}
.pp-doc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px}
.pp-doc-head .pp-tools{margin-top:0}
.pp-pages{margin:14px 0 0 24px;padding-left:16px;border-left:3px solid var(--brand-tint)}
.pp-pages .pp-item{padding:16px;margin-bottom:12px;grid-template-columns:96px 1fr}
.pp-pages .pp-thumb{width:96px;height:96px}
.pp-pages .pp-item:last-child{margin-bottom:0}

/* ---- status signals: icon + words, colour third (D21) ---- */
.pp-signal{display:flex;gap:10px;align-items:flex-start;border-radius:8px;padding:12px 14px;font-size:15px;margin-top:12px}
.pp-signal svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px}
.pp-signal strong{display:block}
.pp-warn{background:var(--warn-bg);border:1px solid var(--warn-line)}
.pp-warn svg,.pp-warn strong{color:var(--warn-ink)}
.pp-stop{background:var(--stop-bg);border:1px solid var(--line);color:var(--stop-ink)}
.pp-sig-info{background:var(--brand-tint);border:1px solid #B9CCF2}
.pp-sig-info svg,.pp-sig-info strong{color:var(--brand-dark)}
.pp-sig-done{background:#fff;border:1px solid var(--line)}
.pp-sig-done svg{color:var(--brand)}
.pp-sig-done strong{font-size:20px}
.pp-locknote{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-2);margin:8px 0 0}
.pp-locknote svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px}
.pp-flag{display:inline-block;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin:0}

/* ---- controls ---- */
.pp .pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:8px;border:0;background:var(--brand);color:#fff;font:inherit;font-size:18px;font-weight:700;text-decoration:none;cursor:pointer}
.pp .pp-btn:hover{background:var(--brand-dark);color:#fff}
.pp .pp-btn[disabled],.pp .pp-btn.is-disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.pp .pp-btn.is-busy{background:var(--brand-dark);cursor:progress}
.pp .pp-btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:8px;border:1.5px solid var(--control);background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.pp .pp-btn-quiet:hover{border-color:var(--brand);color:var(--brand-dark)}
.pp .pp-btn-quiet[disabled]{border-style:dashed;color:var(--greyed-ink);background:var(--ground);cursor:not-allowed}
.pp .pp-btn-quiet.is-busy{color:var(--ink-2);cursor:progress}
.pp-linkbtn{background:none;border:0;padding:0 2px;min-height:44px;color:var(--brand);font:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pp-linkbtn:hover{color:var(--brand-dark)}
.pp-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.pp-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px}
.pp-tool{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1.5px solid var(--control);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pp-tool svg{width:20px;height:20px}
.pp-tool:hover{border-color:var(--brand)}
.pp-tool[disabled]{border-style:dashed;color:var(--greyed-ink);background:var(--ground);cursor:not-allowed}
.pp-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
.pp-restart{margin-top:36px;border-top:1px solid var(--line);padding-top:12px}
.pp-restart summary{min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--ink-2);cursor:pointer}
.pp-restart p{font-size:15px;color:var(--ink-2);margin:4px 0 12px}
.pp-sizes,fieldset.greyed{border:0;padding:0;margin:12px 0 0;min-width:0}
.pp-sizes legend,fieldset.greyed legend{font-size:15px;font-weight:600;padding:0;margin:0 0 8px}
.pp-pills{display:flex;flex-wrap:wrap;gap:8px}
.pp-pill{position:relative}
.pp-pill input{position:absolute;opacity:0;width:1px;height:1px}
.pp-pill span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:68px;padding:0 16px;border:1.5px solid var(--control);border-radius:999px;background:#fff;font-weight:600;font-size:16px;cursor:pointer}
.pp-pill input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.pp-pill input:checked + span::before{content:"\2713";font-weight:800}
.pp-pill input:focus-visible + span{outline:3px solid var(--brand-dark);outline-offset:2px}
.pp-check{display:flex;gap:12px;align-items:flex-start;min-height:44px;font-size:17px;cursor:pointer;margin:8px 0}
.pp-check input{width:24px;height:24px;accent-color:var(--brand);margin:2px 0 0;flex:0 0 auto}
.pp-check small{display:block;font-size:15px;color:var(--ink-2)}
.pp-combine{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;cursor:pointer}
.pp-combine input{width:22px;height:22px;accent-color:var(--brand);margin:0}
.pp-ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--brand-tint);border:1px solid #B9CCF2;border-radius:8px;padding:12px 14px;margin-top:12px;font-size:15px;font-weight:600}
.pp-field{display:flex;flex-direction:column;gap:6px}
.pp-field label{font-size:15px;font-weight:700}
.pp-input{min-height:48px;border:1.5px solid var(--control);border-radius:8px;padding:0 12px;font:inherit;font-size:17px;background:#fff;color:var(--ink);width:100%}
.pp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.pp-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--control);border-radius:8px;overflow:hidden;background:#fff}
.pp-stepper button{width:44px;height:44px;border:0;background:#fff;font:inherit;font-size:22px;font-weight:700;color:var(--ink);cursor:pointer}
.pp-stepper button[disabled]{color:var(--control);cursor:not-allowed}
.pp-stepper input{width:64px;height:44px;border:0;border-left:1.5px solid var(--control);border-right:1.5px solid var(--control);text-align:center;font:inherit;font-size:18px;font-weight:700;color:var(--ink);-moz-appearance:textfield}
.pp-stepper input::-webkit-outer-spin-button,.pp-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-stepper input[disabled]{background:var(--ground);color:var(--ink-2)}
.pp-stepper:has(input[disabled]) button{display:none}
.pp-stepper:has(input[disabled]) input{border-left:0;border-right:0}
.pp-prices{list-style:none;margin:8px 0 0;padding:0;font-size:16px}
.pp-prices li{padding:6px 0;border-top:1px solid var(--line)}
.pp-proof{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-height:44px}
.pp-proof svg{width:22px;height:22px;flex:0 0 auto}

/* the greyed control (D21): dashed, locked, worded */
.greyed .pp-pill span,.greyed .pp-tool{border-style:dashed;color:var(--greyed-ink);background:var(--ground);cursor:not-allowed}
.greyed .pp-pill input:checked + span{background:#E1E5EB;border-color:var(--control);color:var(--ink)}

/* ---- the front page ---- */
.pp-drop{border:2px dashed var(--control);border-radius:var(--radius);background:#fff;padding:36px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pp-drop.dragging{border-color:var(--brand);background:var(--brand-tint)}
.pp-drop svg{width:40px;height:40px;color:var(--control)}
.pp-drop-title{font-size:20px;font-weight:700;margin:0}
.pp-drop-sub{color:var(--ink-2);font-size:15px;margin:0}
.pp-picker{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.pp-chosen{list-style:none;margin:16px 0 0;padding:0;font-size:15px}
.pp-chosen li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0;border-top:1px solid var(--line)}
.pp-chosen-name{overflow-wrap:anywhere;min-width:0}
/* the ✕ beside a picked file (S280, D3): a 44 px target */
.pp-remove{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:8px;background:none;color:var(--ink-2);font:inherit;font-size:20px;font-weight:700;cursor:pointer}
.pp-remove:hover{color:var(--brand-dark);background:var(--ground)}
.pp-chosen:empty{display:none}
.pp-status{font-size:15px;color:var(--warn-ink);margin:8px 0 0;min-height:0}
.pp-status:empty{margin:0}
.pp-openbox{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pp-openbox .pp-field{flex:1 1 200px}
.pp-code-card{background:var(--brand-tint);border:1.5px solid var(--brand);border-radius:var(--radius);padding:20px 24px;display:flex;gap:28px;align-items:center;margin:0 0 24px}
.pp-code-big{font-size:60px;font-weight:800;letter-spacing:.14em;color:var(--brand-dark);line-height:1;font-variant-numeric:tabular-nums}
.pp-code-card p{margin:0;font-size:16px}
.pp-code-card p > strong:first-child{display:block;font-size:18px;margin-bottom:6px}
.pp-arrivals{list-style:none;margin:0;padding:0}
.pp-arrivals li{padding:12px 0;border-top:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.pp-arrivals li:first-child{border-top:0;padding-top:4px}
.pp-arrivals .pp-how{flex:0 0 120px;font-weight:700;font-size:15px}
.pp-arrivals .pp-names{font-size:15px;color:var(--ink-2);overflow-wrap:anywhere}
.pp-addmore .pp-drop{margin-top:12px}

/* ---- the crop page ---- */
/* S280 (D2): the aside is 380 wide so three align buttons fit one row
   with their letters; the help sentence is a grid child under the stage
   card; the canvas is bounded in HEIGHT as well as width (its own aspect
   kept), never taller than the screen less the chrome */
.cp-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto 1fr;grid-template-areas:"stage aside" "help aside";gap:12px 24px;align-items:start}
.cp-stage{grid-area:stage;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.cp-stage canvas{display:block;width:auto;height:auto;max-width:100%;max-height:max(320px,calc(100vh - 200px));margin:0 auto;touch-action:none;cursor:grab;border:1px solid var(--line);background:#fff}
.cp-stage canvas.dragging{cursor:grabbing}
.cp-aside{grid-area:aside;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.cp-aside h1{font-size:22px;margin:0 0 4px}
.cp-group{border:0;padding:0;margin:16px 0 0;min-width:0}
.cp-group legend{font-size:15px;font-weight:700;padding:0;margin:0 0 8px}
.cp-buttons{display:flex;flex-wrap:wrap;gap:8px}
/* the positioning rows are GRIDS (S280, D2): three cells, or two, so a
   button can never wrap alone onto a line of its own */
.cp-aside .cp-buttons{display:grid;gap:8px}
.cp-aside .cp-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp-aside .cp-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cp-aside .pp-tool{padding:0 8px;justify-content:center;min-width:0}
/* the fold: size, frame and the sharpness readout (S280, D2) */
.cp-more{margin:0}
.cp-more summary{min-height:44px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-weight:700;font-size:15px;cursor:pointer;list-style:none}
.cp-more summary::-webkit-details-marker{display:none}
.cp-more summary::before{content:"\25B8";color:var(--control)}
.cp-more[open] summary::before{content:"\25BE"}
.cp-more-now{font-weight:600;color:var(--ink-2)}
.cp-more[open] .cp-more-now{display:none}
.cp-seg{display:flex;flex-wrap:wrap;gap:8px}
.cp-seg label{position:relative}
.cp-seg input{position:absolute;opacity:0;width:1px;height:1px}
.cp-seg span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid var(--control);border-radius:999px;background:#fff;font-weight:600;font-size:15px;cursor:pointer}
.cp-seg input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.cp-seg input:checked + span::before{content:"\2713";font-weight:800}
.cp-seg input:focus-visible + span{outline:3px solid var(--brand-dark);outline-offset:2px}
.kbd{display:none;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--control);border-bottom-width:2px;border-radius:5px;font-size:12px;font-weight:700;line-height:18px;color:var(--ink-2);background:var(--ground)}
@media (hover: hover) and (pointer: fine){.kbd{display:inline-flex;align-items:center;justify-content:center}}
.cp-dpi{margin:12px 0 0;font-size:15px}
.cp-dpi strong{font-weight:700}
.cp-dpi #lowdpi{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}
.cp-dpi #lowdpi svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.cp-dpiwarn{margin:0}
.cp-help{grid-area:help;font-size:14px;color:var(--ink-2);margin:0}
.cp-size{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0;font-size:15px}
.cp-size strong{font-size:17px}
.cp-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.cp-actions .pp-btn{width:100%}
.cp-extras{list-style:none;margin:8px 0 0;padding:0;font-size:15px;color:var(--ink-2)}
.cp-extras:empty{display:none}
.pp dialog{border:1px solid var(--line);border-radius:var(--radius);padding:24px;max-width:26em;width:calc(100% - 32px);font:inherit;color:var(--ink);box-shadow:0 12px 40px rgba(21,24,30,.25)}
.pp dialog::backdrop{background:rgba(21,24,30,.45)}
.pp dialog h2{font-size:20px;margin:0 0 12px}
.pp dialog select{min-height:44px;font:inherit;font-size:16px;border:1.5px solid var(--control);border-radius:8px;padding:0 10px;background:#fff;color:var(--ink)}
.pp dialog .pp-actions{margin-top:16px}

/* ---- the submit page ---- */
.pp-submit-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.pp-submit-layout > aside{position:sticky;top:16px}
.pp-copies{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pp-copies label{font-size:14px;color:var(--ink-2);font-weight:600}

/* ---- narrow screens ---- */
@media (max-width: 900px){
  .pp-submit-layout{grid-template-columns:1fr}
  .pp-submit-layout > aside{position:static}
}
/* the crop page stacks below 760 (S280, D2 - an iPad held upright keeps
   the two columns), and the stage PINS: the picture stays in view while
   the controls scroll beneath it, the canvas bounded to a share of the
   screen's height so the controls have room */
@media (max-width: 759px){
  .cp-layout{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"stage" "help" "aside";gap:10px}
  .cp-stage{position:sticky;top:0;z-index:2;padding:8px}
  .cp-stage canvas{max-height:44vh;max-height:44svh}
  .cp-stage .pp-tools{margin-top:8px}
}
@media (max-width: 640px){
  .pp-top-inner{padding:12px 16px}
  .pp-mark{font-size:19px}
  .pp-job{padding:4px 12px 6px}
  .pp-job-label{font-size:12px}
  .pp-job-code{font-size:24px}
  .pp-steps ol{display:none}
  .pp-steps-compact{display:block;max-width:960px;margin:0 auto;padding:12px 16px}
  .pp-main{padding:24px 16px 40px}
  .pp-h1{font-size:26px}
  .pp-failt{font-size:36px}
  .pp-panel{padding:18px 16px}
  .pp-item{grid-template-columns:72px 1fr;grid-template-areas:"thumb head" "body body";padding:16px;column-gap:14px;row-gap:8px}
  .pp-thumb{width:72px;height:72px}
  .pp-pages{margin-left:8px;padding-left:12px}
  .pp-pages .pp-item{grid-template-columns:56px 1fr}
  .pp-pages .pp-thumb{width:56px;height:56px}
  .pp-row{grid-template-columns:56px minmax(0,1fr)}
  .pp-row .pp-thumb{width:56px;height:56px}
  .pp-row-end{grid-column:1 / -1;align-items:flex-start}
  .pp-copies{align-items:flex-start}
  .pp-actions .pp-btn{width:100%}
  .pp-grid2{grid-template-columns:1fr}
  .pp-code-card{flex-direction:column;align-items:flex-start;gap:12px}
  .pp-code-big{font-size:46px}
  .pp-drop{padding:24px 16px}
  .cp-stage{padding:8px}
  .cp-aside{padding:14px 16px}
  .cp-group{margin-top:10px}
  .cp-group legend{margin-bottom:6px}
  .cp-actions{margin-top:14px;gap:8px}
  .cp-actions .pp-btn{width:100%}
  .pp-leave-panel{padding:14px 16px 16px}
}
@media (prefers-reduced-motion: reduce){
  .pp-spin{animation-duration:2.4s}
}