/* 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-notes{margin-top:20px}
.pp-notes textarea.pp-input{min-height:96px;padding:10px 12px;resize:vertical}
.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.pp-drop-icon{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}
/* the picker's label (S340, T1-7): a quiet button beside the drag zone
   on a desktop; THE primary control on a phone and the kiosk, where the
   drag/paste invitation is hidden (the accumulator still takes a drop
   or a paste that happens) */
.pp .pp-pick svg{width:22px;height:22px}
.pp-pick-sub{display:none;text-align:center;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-picked{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:16px;font-weight:700;color:var(--brand-dark)}
.pp-picked svg{width:22px;height:22px;flex:0 0 auto}
.pp-actions .pp-hint{flex-basis:100%}
.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-members{list-style:none;padding:0}
.cp-members li{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-members li svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.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 image 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}
  /* S340 (T1-7, boards A and B): no drag zone and no paste sentence on a
     phone - one full-width Choose files control, the PDF tip hidden */
  .pp-drop{border:0;background:none;padding:0;gap:10px}
  .pp-drop.dragging{background:var(--brand-tint)}
  .pp-drop-icon,.pp-drop-title,.pp-tip-pdf{display:none}
  .pp .pp-pick{width:100%;min-height:64px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-size:20px;font-weight:800;gap:12px}
  .pp .pp-pick:hover{background:var(--brand-dark);color:#fff}
  .pp-pick-sub{display:block}
  .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}
}
/* ---- the phone Next bar (S310 Part 2, D1-D3; operator A1: phones only,
   at the stylesheet's own phone breakpoint, never a tablet) ----
   The page's EXISTING forward control - Continue on the job page, Next
   on Organise, Next on Review - is left where it is in the DOM and its
   .pp-actions, marked .pp-nextbar, is FIXED at the foot of the screen
   (sticky would stick only within its own containing block); the body
   takes bottom padding so the last content and the footer clear it.
   The bar's measured height lands in --nextbar-h from the gate script;
   96px is the script-off fallback. The arrow (base.html) floats just
   above the bar, hidden until the gate shows it, and bobs - still under
   prefers-reduced-motion. Crop and Submit carry no .pp-nextbar. */
.pp-scrollarrow{display:none}
@media (max-width: 640px){
  .pp-actions.pp-nextbar{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(21,24,30,.08)}
  .pp-nextbar .pp-btn{width:100%}
  .pp-nextbar .pp-hint{margin:0;text-align:center}
  body.pp:has(.pp-nextbar){box-sizing:border-box;padding-bottom:var(--nextbar-h,96px)}
  .pp-scrollarrow{position:fixed;left:50%;bottom:calc(var(--nextbar-h,96px) + 14px);z-index:21;width:48px;height:48px;border-radius:50%;border:0;padding:0;background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(21,24,30,.28);display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateX(-50%);animation:pp-bob 1.6s ease-in-out infinite}
  .pp-scrollarrow:hover{background:var(--brand-dark)}
  .pp-scrollarrow svg{width:26px;height:26px}
}
@keyframes pp-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media (prefers-reduced-motion: reduce){
  .pp-spin{animation-duration:2.4s}
  .pp-scrollarrow{animation:none}
}

/* ==== S340: the front page's bar, retention, the staff side, the kiosk ==== */

/* the picked set's headline and the bar's hint (T1-7, boards A to C) */
.pp-picked{font-size:17px}
.pp-barhint{font-size:14px;color:var(--ink-2);margin:0;text-align:center;flex-basis:100%}
.pp-barhint b{color:var(--ink)}
.pp-nextbar .pp-barhint{order:9}
.pp-nextbar .pp-btn.is-disabled,.pp-nextbar .pp-btn[disabled]{background:var(--disabled-bg);color:var(--disabled-ink)}

/* the header's right-hand group and the kiosk's "I've finished" (T1-4) */
.pp-right{display:flex;align-items:center;gap:16px}
.pp a.pp-finish{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border-radius:10px;border:2px solid #fff;color:#fff;font-size:19px;font-weight:800;text-decoration:none}
.pp a.pp-finish:hover{background:rgba(255,255,255,.14);color:#fff}
.pp-finish svg{width:22px;height:22px}

/* the retention line and Change (T2-3, board D), the statement (T2-4) */
.pp-keep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:22px 0 0}
.pp-keep-line{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:0}
.pp-keep-line svg{flex:0 0 auto;width:20px;height:20px;margin-top:3px;color:var(--brand-dark)}
.pp-keep-line b{color:var(--brand-dark)}
.pp-keep-change summary{min-height:44px;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);cursor:pointer;list-style:none;font-size:16px;margin-top:4px}
.pp-keep-change summary::-webkit-details-marker{display:none}
.pp-keep-change summary svg{width:16px;height:16px}
.pp-keep-change[open] summary svg{transform:rotate(180deg)}
.pp-opts{display:flex;flex-direction:column;gap:8px;margin:6px 0 0}
.pp-opt{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 12px;border:1.5px solid var(--control);border-radius:8px;background:#fff;cursor:pointer}
.pp-opt input{width:22px;height:22px;accent-color:var(--brand);margin:2px 0 0;flex:0 0 auto}
.pp-opt strong{display:block;font-size:16px}
.pp-opt span{font-size:14px;color:var(--ink-2);display:block}
.pp-opt:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.pp-opt:has(input:focus-visible){outline:3px solid var(--brand-dark);outline-offset:2px}
.pp-keep .pp-actions{margin-top:10px}
.pp-keep-what{margin-top:16px}
.pp-keep-what summary{min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--brand);cursor:pointer}
.pp-keep-what p{font-size:15px;color:var(--ink-2);margin:4px 0 0}

/* the staff side (T1-5, T1-6, T2-7) */
.pp-login{max-width:420px}
.pp-staff-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.pp-staff{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);font-size:15px}
.pp-staff th,.pp-staff td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.pp-staff th{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);border-top:0}
.pp-staff-code{font-weight:800;letter-spacing:.12em;color:var(--brand-dark);font-variant-numeric:tabular-nums}
.pp-staff-notes{max-width:22em;white-space:pre-wrap;overflow-wrap:anywhere}
.pp-staff .pp-btn-quiet{min-height:40px;padding:0 12px;font-size:14px}
.pp-staff tr.pp-unreadable td{color:var(--warn-ink)}
@media (max-width: 640px){
  .pp-staff thead{display:none}
  .pp-staff,.pp-staff tbody,.pp-staff tr,.pp-staff td{display:block}
  .pp-staff tr{border-top:3px solid var(--line);padding:8px 0}
  .pp-staff td{border-top:0;padding:6px 12px}
  .pp-staff td::before{content:attr(data-th) ": ";font-weight:700;color:var(--ink-2)}
  .pp-staff td[data-th="Code"]::before{content:""}
}

/* the finished page (T1-4) */
.pp-finished{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:48px 0}
.pp-finished-icon{width:88px;height:88px;color:var(--brand)}
.pp-finished-line{font-size:28px;line-height:1.35;margin:0;max-width:30em}

/* ---- THE KIOSK (S340, T1-1/T1-3/T1-7/T1-10; boards E, F and G) ----
   body.pp-kiosk is the middleware's verdict on the request's Host. The
   boards: 21 px body, 64 px primary controls, 72 px pad keys; the foot
   bar fixed at EVERY width with the hint on the left and the control on
   the right; no drag zone, no paste sentence; the type a size up. */
body.pp-kiosk{font-size:21px}
body.pp-kiosk .pp-top-inner{padding:18px 32px}
body.pp-kiosk .pp-mark{font-size:26px}
body.pp-kiosk .pp-job{padding:6px 20px 8px;border-radius:12px}
body.pp-kiosk .pp-job-label{font-size:15px}
body.pp-kiosk .pp-job-code{font-size:36px}
body.pp-kiosk .pp-steps ol{padding:16px 32px;gap:36px}
body.pp-kiosk .pp-step{font-size:19px}
body.pp-kiosk .pp-num{width:34px;height:34px;font-size:17px}
body.pp-kiosk .pp-main{max-width:1180px;padding:32px 32px 160px}
body.pp-kiosk .pp-h1{font-size:38px}
body.pp-kiosk .pp-h1-icon{width:36px;height:36px;color:var(--brand-dark);vertical-align:-6px;margin-right:12px}
body.pp-kiosk .pp-lede{font-size:21px}
body.pp-kiosk .pp-info,body.pp-kiosk .pp-hint{font-size:17px}
body.pp-kiosk .pp-panel{padding:24px 28px;border-radius:12px}
body.pp-kiosk .pp-panel h2{font-size:24px}
body.pp-kiosk .pp .pp-btn,body.pp-kiosk .pp-btn{min-height:64px;padding:0 36px;font-size:22px;font-weight:800;border-radius:10px}
body.pp-kiosk .pp-btn-quiet{min-height:56px;padding:0 22px;font-size:18px;border-radius:10px}
body.pp-kiosk .pp-input{min-height:56px;font-size:19px}
body.pp-kiosk .pp-field label{font-size:17px}
body.pp-kiosk .pp-arrivals li{padding:14px 0}
body.pp-kiosk .pp-arrivals .pp-how{flex-basis:200px;font-size:19px}
body.pp-kiosk .pp-arrivals .pp-names{font-size:19px}
body.pp-kiosk .pp-code-card{border-width:2px;border-radius:12px;padding:24px 28px;gap:32px}
body.pp-kiosk .pp-code-big{font-size:72px}
body.pp-kiosk .pp-code-card p{font-size:19px}
body.pp-kiosk .pp-code-card p > strong:first-child{font-size:22px}
body.pp-kiosk .pp-addmore summary{min-height:56px;font-size:20px}
body.pp-kiosk .pp-keep-line,body.pp-kiosk .pp-opt strong{font-size:18px}
body.pp-kiosk .pp-opt span,body.pp-kiosk .pp-keep-what p{font-size:16px}
/* the foot bar on the kiosk: fixed at every width, a row */
body.pp-kiosk .pp-actions.pp-nextbar{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;padding:16px 32px 20px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(21,24,30,.10);display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:24px}
body.pp-kiosk .pp-nextbar .pp-btn{width:auto;flex:0 0 auto;order:2}
body.pp-kiosk .pp-nextbar .pp-barhint{flex:1 1 auto;order:1;text-align:left;font-size:19px}
body.pp-kiosk .pp-nextbar .pp-hint{order:1;flex:1 1 auto;text-align:left;font-size:17px}
body.pp-kiosk .pp-barleft{display:flex;align-items:center;gap:20px;order:0}
body.pp-kiosk .pp-nextbar [data-busy-line]{order:3;flex-basis:100%;margin:0}
body.pp-kiosk:has(.pp-nextbar){box-sizing:border-box;padding-bottom:var(--nextbar-h,110px)}
body.pp-kiosk .pp-scrollarrow{position:fixed;left:50%;bottom:calc(var(--nextbar-h,110px) + 14px);z-index:21;width:56px;height:56px;border-radius:50%;border:0;padding:0;background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(21,24,30,.28);display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateX(-50%);animation:pp-bob 1.6s ease-in-out infinite}
body.pp-kiosk .pp-scrollarrow svg{width:30px;height:30px}
/* the kiosk front page (board E): the three ways, the Choose row */
body.pp-kiosk .pp-failt{font-size:48px}
.pp-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 24px}
.pp-way{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 24px 20px}
.pp-way h2{font-size:22px;margin:12px 0 8px}
.pp-way p{font-size:18px;color:var(--ink-2);margin:0}
.pp-way-icon{width:64px;height:64px;color:var(--brand)}
.pp-device{font-weight:800;color:var(--brand-dark)}
.pp-step-badge{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.pp-step-badge-light{position:static;background:#fff;color:var(--brand-dark);flex:0 0 auto}
.pp-way .pp-openbox{margin-top:12px;gap:10px}
.pp-way .pp-code-input{flex:1 1 160px;min-height:64px;border:2px solid var(--control);border-radius:10px;font-size:30px;font-weight:800;letter-spacing:.2em;text-align:center;text-transform:uppercase}
body.pp-kiosk .pp-kiosk-upload .pp-drop{border:0;background:none;padding:0}
.pp-choose-row{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:center;width:100%;text-align:left}
.pp .pp-choose-row .pp-pick{display:flex;align-items:center;justify-content:center;gap:14px;min-height:72px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-size:22px;font-weight:800;cursor:pointer}
.pp .pp-choose-row .pp-pick:hover{background:var(--brand-dark);color:#fff}
.pp-choose-row .pp-pick svg{width:30px;height:30px}
.pp-choose-side{margin:0;font-size:19px;color:var(--ink-2)}
/* the kiosk job page (board F): the files beside the QR card */
.pp-two{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.pp-qr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pp-qr h2{font-size:22px;margin:0;line-height:1.25}
.pp-qr p{margin:0;font-size:18px;color:var(--ink-2)}
.pp-qr-box{width:240px;height:240px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center}
.pp-qr-box svg{width:212px;height:212px;shape-rendering:crispEdges}
/* the kiosk crop page (board G): the stage as large as the viewport
   allows, the pad of 72 px keys, the two toggle buttons */
body.pp-kiosk .cp-layout{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
body.pp-kiosk .cp-stage{padding:14px;border-radius:12px}
body.pp-kiosk .cp-stage canvas{max-height:max(360px,calc(100vh - 470px))}
/* board G shows no paper toggle on the kiosk; the pad and the bar are its controls */
body.pp-kiosk .cp-stage .pp-tools{display:none}
.cp-kiosk{display:flex;flex-direction:column;gap:14px;background:none;border:0;padding:0}
.cp-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.cp-card h2{font-size:18px;margin:0 0 10px;color:var(--ink-2);font-weight:700;letter-spacing:.02em}
.cp-pad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px}
.cp-key{min-height:72px;border:2px solid var(--control);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:30px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
.cp-key:hover{border-color:var(--brand)}
.cp-key:active{background:var(--brand-tint);border-color:var(--brand)}
.cp-key.is-centre{border-style:dashed;font-size:15px;font-weight:700;color:var(--ink-2)}
.cp-zoom{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cp-zoom .cp-key{font-size:40px}
.cp-hint{font-size:15px;color:var(--ink-2);margin:8px 0 0;text-align:center}
.cp-kiosk .cp-size{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;font-size:17px}
.cp-kiosk .cp-size b{font-size:22px}
.cp-link{min-height:44px;display:inline-flex;align-items:center;background:none;border:0;padding:0 2px;color:var(--brand);font:inherit;font-weight:700;font-size:17px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cp-frame-opts{display:flex;gap:8px;margin-top:10px}
.cp-opt{flex:1;min-height:56px;border:2px solid var(--control);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.cp-opt svg{width:20px;height:22px}
.cp-opt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.cp-kiosk .cp-dpi{font-size:16px}
body.pp-kiosk .cp-bar .pp-btn-quiet{min-height:56px}
@media (max-width: 1100px){
  .pp-three{grid-template-columns:1fr}
  .pp-two{grid-template-columns:1fr}
  .pp-choose-row{grid-template-columns:1fr}
}