/* The plate itself: one stylesheet shared by the editor preview, the plate
   list and the print view. Sizes arrive as inline mm values from render.js. */
@font-face{font-family:"PP Stencil";src:url(/static/fonts/SairaStencilOne.ttf);font-display:block}
@font-face{font-family:"PP Condensed";src:url(/static/fonts/BarlowCondensed-Bold.ttf);font-weight:700;font-display:block}
@font-face{font-family:"PP Mono";src:url(/static/fonts/SpaceMono-Bold.ttf);font-weight:700;font-display:block}
@font-face{font-family:"PP Industrial";src:url(/static/fonts/BebasNeue-Regular.ttf);font-display:block}
@font-face{font-family:"PP Heavy";src:url(/static/fonts/RussoOne-Regular.ttf);font-display:block}
@font-face{font-family:"PP Tech";src:url(/static/fonts/ChakraPetch-Bold.ttf);font-weight:700;font-display:block}

.pp-plate,.pp-under{background-color:var(--pp-bg,#fff);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp-plate{position:relative;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;
  color:var(--pp-fg,#111);font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;line-height:1.1}
.pp-plate *{box-sizing:border-box}
.pp-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp-deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pp-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}

.pp-name{font-weight:800;line-height:1.02}
.pp-sub{opacity:.85;margin-top:.25em;font-size:.55em;font-weight:600}
.pp-meta{margin-top:.5em;display:flex;flex-wrap:wrap;gap:.15em .9em;font-size:.36em;opacity:.9}
.pp-align-center .pp-meta{justify-content:center}
.pp-align-right .pp-meta{justify-content:flex-end}
.pp-meta-item{white-space:nowrap}
/* QR two-column layout: text left, big QR right. */
.pp-row{flex:1;min-height:0;display:flex;align-items:center;gap:1.5mm}
.pp-textcol{flex:1;min-width:0}
.pp-qrcol{flex:0 0 auto;border-radius:.8mm;overflow:hidden}
.pp-qrcol svg{height:100%;width:100%;display:block}

/* fonts */
.pp-font-stencil .pp-name{font-family:"PP Stencil","Stencil",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
.pp-font-stencil .pp-sub,.pp-font-stencil .pp-meta,.pp-font-condensed{font-family:"PP Condensed","Arial Narrow",sans-serif}
.pp-font-stencil .pp-sub,.pp-font-condensed .pp-name,.pp-font-condensed .pp-sub{text-transform:uppercase;letter-spacing:.04em}
.pp-font-mono{font-family:"PP Mono",ui-monospace,Menlo,monospace;font-weight:700}
.pp-font-mono .pp-name{text-transform:uppercase;letter-spacing:.06em}

.pp-font-industrial{font-family:"PP Industrial","Arial Narrow",sans-serif;letter-spacing:.04em}
.pp-font-industrial .pp-name,.pp-font-industrial .pp-sub,.pp-font-heavy .pp-name,.pp-font-tech .pp-name{font-weight:400;text-transform:uppercase}
.pp-font-heavy{font-family:"PP Heavy",Impact,sans-serif}
.pp-font-heavy .pp-meta{font-family:"PP Condensed","Arial Narrow",sans-serif}
.pp-font-tech{font-family:"PP Tech",system-ui,sans-serif;font-weight:700}
.pp-font-tech .pp-name{font-weight:700;letter-spacing:.05em}

/* backgrounds (the base colour is --pp-bg; these add the pattern on top) */
.pp-bg-woodland{background-image:url(/static/img/camo-woodland.svg);background-size:70mm auto}
.pp-bg-desert{background-image:url(/static/img/camo-desert.svg);background-size:70mm auto}
.pp-bg-urban{background-image:url(/static/img/camo-urban.svg);background-size:70mm auto}
.pp-bg-night{background-image:url(/static/img/camo-night.svg);background-size:70mm auto}
.pp-bg-digital{background-image:url(/static/img/camo-digital.svg);background-size:64mm auto}
.pp-bg-olive{background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.12))}
.pp-bg-grid,.pp-bg-blueprint{background-image:
  linear-gradient(color-mix(in srgb,var(--pp-accent) 22%,transparent) .15mm,transparent .15mm),
  linear-gradient(90deg,color-mix(in srgb,var(--pp-accent) 22%,transparent) .15mm,transparent .15mm),
  linear-gradient(color-mix(in srgb,var(--pp-fg) 8%,transparent) .1mm,transparent .1mm),
  linear-gradient(90deg,color-mix(in srgb,var(--pp-fg) 8%,transparent) .1mm,transparent .1mm);
  background-size:10mm 10mm,10mm 10mm,2mm 2mm,2mm 2mm}
.pp-bg-carbon{background-image:
  linear-gradient(27deg,rgba(0,0,0,.35) 1.2mm,transparent 1.2mm),
  linear-gradient(207deg,rgba(0,0,0,.35) 1.2mm,transparent 1.2mm),
  linear-gradient(27deg,rgba(255,255,255,.06) 1.2mm,transparent 1.2mm),
  linear-gradient(207deg,rgba(255,255,255,.06) 1.2mm,transparent 1.2mm);
  background-size:2.4mm 1.2mm;background-position:0 .6mm,1.2mm 0,1.2mm .6mm,0 0}
.pp-bg-hazard,.pp-bg-danger{background-image:
  repeating-linear-gradient(135deg,var(--hz,#111) 0 2mm,transparent 2mm 4mm),
  repeating-linear-gradient(135deg,var(--hz,#111) 0 2mm,transparent 2mm 4mm);
  background-size:100% 2.6mm;background-repeat:no-repeat;background-position:top,bottom}
.pp-bg-steel{background-image:
  repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 .12mm,rgba(0,0,0,.05) .12mm .3mm),
  linear-gradient(180deg,rgba(255,255,255,.45),rgba(0,0,0,.18) 55%,rgba(255,255,255,.2))}
.pp-bg-crate{background-image:
  repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 .2mm,transparent .2mm 1.1mm),
  linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.22))}
.pp-bg-danger{--hz:#fff}
.pp-bg-hazardside{background-image:
  repeating-linear-gradient(135deg,#111 0 2mm,transparent 2mm 4mm),
  repeating-linear-gradient(45deg,#111 0 2mm,transparent 2mm 4mm);
  background-size:2.4mm 100%;background-repeat:no-repeat;background-position:left,right}
.pp-bg-topo{background-image:url(/static/img/topo.svg);background-size:80mm auto}
.pp-bg-hex{background-image:url(/static/img/hex.svg);background-size:6mm auto}
.pp-bg-radar{background-image:
  linear-gradient(color-mix(in srgb,var(--pp-accent) 35%,transparent),color-mix(in srgb,var(--pp-accent) 35%,transparent)),
  linear-gradient(color-mix(in srgb,var(--pp-accent) 35%,transparent),color-mix(in srgb,var(--pp-accent) 35%,transparent)),
  repeating-radial-gradient(circle at 82% 50%,transparent 0 3.85mm,color-mix(in srgb,var(--pp-accent) 28%,transparent) 3.85mm 4mm),
  radial-gradient(circle at 82% 50%,color-mix(in srgb,var(--pp-accent) 16%,transparent),transparent 60%);
  background-size:100% .12mm,.12mm 100%,auto,auto;background-repeat:no-repeat;background-position:0 50%,82% 0,0 0,0 0}
.pp-bg-terminal{background-image:
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--pp-fg) 9%,transparent) 0 .18mm,transparent .18mm .7mm),
  radial-gradient(ellipse at center,color-mix(in srgb,var(--pp-fg) 10%,transparent),transparent 75%)}
.pp-bg-tread{background-image:
  radial-gradient(ellipse 1.5mm .45mm at 25% 25%,rgba(255,255,255,.55) 60%,transparent 62%),
  radial-gradient(ellipse .45mm 1.5mm at 75% 75%,rgba(255,255,255,.55) 60%,transparent 62%),
  radial-gradient(ellipse 1.5mm .45mm at 26% 27%,rgba(0,0,0,.4) 60%,transparent 62%),
  radial-gradient(ellipse .45mm 1.5mm at 76% 77%,rgba(0,0,0,.4) 60%,transparent 62%),
  linear-gradient(180deg,rgba(255,255,255,.3),rgba(0,0,0,.2));
  background-size:6mm 6mm,6mm 6mm,6mm 6mm,6mm 6mm,100% 100%}
/* camo is busy: a soft halo in the base colour keeps small text readable */
.pp-bg-woodland .pp-body,.pp-bg-desert .pp-body,.pp-bg-urban .pp-body,.pp-bg-night .pp-body,.pp-bg-digital .pp-body,.pp-bg-tread .pp-body,.pp-bg-topo .pp-body{
  text-shadow:0 0 .35mm var(--pp-bg),0 0 .7mm var(--pp-bg)}
/* 3D layout: small lines get a larger share, so they survive in plastic */
.pp-3d{background-image:none}
.pp-3d .pp-sub{font-size:.6em;opacity:1}
.pp-3d .pp-meta{font-size:.46em;opacity:1;gap:.2em 1em}
.pp-3d .pp-body{text-shadow:none}
.pp-3d .pp-row{gap:3mm}

/* --- tour panel layout (see tourToHtml) --- */
.pp-tour{flex:1;min-width:0;min-height:0;display:grid;gap:.25em .6em;align-items:center;text-align:left;line-height:1.02}
.pp-tour .pp-name{white-space:nowrap}
.pp-tour .pp-sub{margin:0;opacity:1;white-space:nowrap}
.pp-tour .t-dept{align-self:stretch;display:flex;align-items:center;justify-content:center;background:var(--pp-accent);border-radius:.6mm;padding:.2em .35em;font-weight:800;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp-tour .t-dept .pp-sub{font-size:1em;letter-spacing:.1em;text-transform:uppercase}
.pp-tour .t-band .pp-name{font-size:1em}
.pp-tour .t-tour{font-size:.42em}
.pp-tour .t-owner{display:block;font-size:.24em;opacity:.85;margin-top:.5em}
.pp-tour .t-case .pp-name{font-size:1.7em;line-height:.95}
.pp-tour .t-content{font-size:.44em;margin-top:.2em}
.pp-tour .t-note{display:inline-block;font-size:.36em;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border:.14em solid currentColor;padding:.12em .45em;margin-top:.35em}
.pp-tour .t-info{display:grid;gap:.18em .7em}
.pp-tour .pp-kv{display:flex;flex-direction:column}
.pp-tour .pp-k{font-size:.2em;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.pp-tour .pp-v{font-size:.46em;font-weight:800}
.pp-tour .kv-main .pp-v{font-size:.8em}
/* wide (rack panel): one row, department block on its side */
.pp-tour-wide{grid-template-columns:repeat(5,auto);grid-auto-flow:column;justify-content:space-between}
.pp-tour-wide .t-dept{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.36em;padding:.35em .2em}
.pp-tour-wide .t-case{padding-left:.4em;border-left:.06em solid color-mix(in srgb,var(--pp-fg) 35%,transparent)}
.pp-tour-wide .t-info{grid-auto-flow:column;grid-template-rows:repeat(2,auto)}
/* label formats: stacked */
.pp-tour-tall{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;grid-template-areas:"dept dept" "band band" "case case" "info qr"}
.pp-tour-tall .t-dept{grid-area:dept;font-size:.5em;justify-content:flex-start;padding:.3em .6em}
.pp-tour-tall .t-band{grid-area:band}
.pp-tour-tall .t-owner{white-space:normal}
.pp-tour-tall .t-case{grid-area:case}
.pp-tour-tall .t-info{grid-area:info;grid-template-columns:repeat(3,auto);justify-content:start;align-self:end}
.pp-tour-tall .pp-qrcol{grid-area:qr;align-self:end}
/* in plastic: no tracking (it would stretch the glyphs) and larger captions */
.pp-3d *{letter-spacing:0 !important}
.pp-3d .pp-k{font-size:.28em;opacity:1}
.pp-3d .t-owner{font-size:.3em;opacity:1}
.pp-3d .pp-kv{gap:.14em}

/* --- tour label (see labelToHtml): ruled form, every box always drawn --- */
.pp-label{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:30fr 16fr 54fr;
  border:.5mm solid var(--pp-fg);border-radius:1.5mm;overflow:hidden;text-align:left;line-height:1}
.pp-label .l-cell{container-type:size;position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:.6mm 1.2mm 1mm;border:0 solid var(--pp-fg)}
.pp-label .l-cap{font-size:var(--l-cap);font-weight:700;letter-spacing:.06em;opacity:.8;white-space:nowrap}
.pp-label .l-v{flex:1;min-height:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font-size:55cqh;font-weight:800}
.pp-label .l-head{grid-column:1;border-width:0 .5mm .5mm 0;flex-direction:row;align-items:center;gap:1.5mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp-label .l-head .l-v{font-size:40cqh;letter-spacing:.06em;text-transform:uppercase}
.pp-label .l-qr{height:100%;aspect-ratio:1;flex:0 0 auto;margin-left:auto}
.pp-label .l-qr svg{width:100%;height:100%;display:block}
.pp-label .l-client{grid-column:2/4;border-bottom-width:.5mm}
.pp-label .l-box,.pp-label .l-date{border-width:0 .5mm .5mm 0}
.pp-label .l-job{border-bottom-width:.5mm}
.pp-label .l-contents{grid-column:1/4}
.pp-label .l-name{flex:0 0 38%;font-size:30cqh}
.pp-label .l-text{align-items:flex-start;white-space:normal;font-size:13cqh;font-weight:600;padding-top:.6em;line-height:1.15}