/* Dieline catalogue + detector. Loaded after site.css on /dielines/ pages.
   SVG previews are styled only through classes (the CSP forbids inline style attributes). */
:root {
  --die-cut: #d6007e;
  --die-crease: #d6007e;
  --die-perf: #c25400;
  --die-partial: #0090c4;
  --die-ref: #8a9399;
  --board: #ffffff;
  --z-serialisation: #0090c4;
  --z-coding: #d6007e;
  --z-varnish_free: #d78a00;
  --z-glue: #c9a800;
  --z-barcode: #23966b;
  --z-braille: #7a56c2;
  --z-reading_dir: #2a3036;
  --z-edge_mark: #d2421f;
  --z-eye_mark: #2a3036;
  --z-tamper: #1f6fc2;
  --z-bollino: #b5541b;
  --z-keep_out: #6b7378;
  --z-text_area: #1f9aa8;
  --z-instruction: #59636a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --die-cut: #ff5cb4; --die-crease: #ff5cb4; --die-perf: #ff9a4d; --die-partial: #4cc3f0; --die-ref: #8a9399;
    --board: #2b2f33;
    --z-serialisation: #4cc3f0; --z-coding: #ff5cb4; --z-varnish_free: #f0b13a; --z-glue: #e8d04a; --z-barcode: #5fd3a3;
    --z-braille: #b79cf0; --z-reading_dir: #e2e5e7; --z-edge_mark: #ff7f5c; --z-eye_mark: #e2e5e7; --z-tamper: #6aa9f0;
    --z-bollino: #f08f4f; --z-keep_out: #a3abb0; --z-text_area: #5fcfdb; --z-instruction: #b0b8bd;
  }
}
:root[data-theme="dark"] {
  --die-cut: #ff5cb4; --die-crease: #ff5cb4; --die-perf: #ff9a4d; --die-partial: #4cc3f0; --die-ref: #8a9399;
  --board: #2b2f33;
  --z-serialisation: #4cc3f0; --z-coding: #ff5cb4; --z-varnish_free: #f0b13a; --z-glue: #e8d04a; --z-barcode: #5fd3a3;
  --z-braille: #b79cf0; --z-reading_dir: #e2e5e7; --z-edge_mark: #ff7f5c; --z-eye_mark: #e2e5e7; --z-tamper: #6aa9f0;
  --z-bollino: #f08f4f; --z-keep_out: #a3abb0; --z-text_area: #5fcfdb; --z-instruction: #b0b8bd;
}

/* ---- SVG ---- */
.dl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dl-svg polyline, .dl-svg polygon, .dl-svg line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.dl-board { fill: var(--board); stroke: none; }
.dl-cut polyline, .dl-cut polygon { stroke: var(--die-cut); stroke-width: 1.3px; }
.dl-crease polyline, .dl-crease polygon { stroke: var(--die-crease); stroke-width: 1.1px; stroke-dasharray: 6 4; }
.dl-perf polyline, .dl-perf polygon { stroke: var(--die-perf); stroke-width: 1.1px; stroke-dasharray: 2 2; }
.dl-partial polyline, .dl-partial polygon { stroke: var(--die-partial); stroke-width: 1.1px; }
.dl-ref polyline, .dl-ref polygon { stroke: var(--die-ref); stroke-width: .8px; stroke-dasharray: 1 2; }
.dl-thumb .dl-cut polyline, .dl-thumb .dl-cut polygon { stroke-width: 1px; }
.dl-thumb .dl-crease polyline, .dl-thumb .dl-crease polygon { stroke-width: .8px; stroke-dasharray: 3 2; }
.dl-panels text { fill: var(--muted); font-family: var(--mono); }
.dl-dim line { stroke: var(--muted); stroke-width: .8px; }
.dl-dim text { fill: var(--muted); font-family: var(--mono); }

.zone rect { fill-opacity: .2; stroke-width: 1.2px; }
.zone .zone-num { font-family: var(--mono); font-weight: 500; }
.zone .zone-arrow { fill: none; stroke-width: 1.6px; }
.zone-hl rect { fill-opacity: .4; stroke-width: 2.4px; }
.z-serialisation rect { fill: var(--z-serialisation); stroke: var(--z-serialisation); } .z-serialisation text { fill: var(--z-serialisation); } .z-serialisation .zone-arrow { stroke: var(--z-serialisation); }
.z-coding rect { fill: var(--z-coding); stroke: var(--z-coding); } .z-coding text { fill: var(--z-coding); }
.z-varnish_free rect { fill: var(--z-varnish_free); stroke: var(--z-varnish_free); stroke-dasharray: 4 2; } .z-varnish_free text { fill: var(--z-varnish_free); }
.z-glue rect { fill: var(--z-glue); stroke: var(--z-glue); } .z-glue text { fill: var(--z-glue); }
.z-barcode rect { fill: var(--z-barcode); stroke: var(--z-barcode); } .z-barcode text { fill: var(--z-barcode); }
.z-braille rect { fill: var(--z-braille); stroke: var(--z-braille); } .z-braille text { fill: var(--z-braille); }
.z-reading_dir rect { fill: var(--z-reading_dir); stroke: var(--z-reading_dir); fill-opacity: .05; } .z-reading_dir text { fill: var(--z-reading_dir); } .z-reading_dir .zone-arrow { stroke: var(--z-reading_dir); }
.z-edge_mark rect { fill: var(--z-edge_mark); stroke: var(--z-edge_mark); fill-opacity: .55; } .z-edge_mark text { fill: var(--z-edge_mark); }
.z-eye_mark rect { fill: var(--z-eye_mark); stroke: var(--z-eye_mark); fill-opacity: .75; } .z-eye_mark text { fill: var(--z-eye_mark); }
.z-tamper rect { fill: var(--z-tamper); stroke: var(--z-tamper); } .z-tamper text { fill: var(--z-tamper); }
.z-bollino rect { fill: var(--z-bollino); stroke: var(--z-bollino); } .z-bollino text { fill: var(--z-bollino); }
.z-keep_out rect { fill: var(--z-keep_out); stroke: var(--z-keep_out); stroke-dasharray: 2 2; } .z-keep_out text { fill: var(--z-keep_out); }
.z-text_area rect { fill: var(--z-text_area); stroke: var(--z-text_area); } .z-text_area text { fill: var(--z-text_area); }
.z-instruction rect { fill: var(--z-instruction); stroke: var(--z-instruction); fill-opacity: .08; } .z-instruction text { fill: var(--z-instruction); }

/* Legend swatches (HTML) */
.zsw { display: inline-block; width: .8rem; height: .8rem; border: 1.5px solid currentColor; vertical-align: -.1rem; margin-right: .35rem; flex: none; }
.zsw-serialisation { color: var(--z-serialisation); } .zsw-coding { color: var(--z-coding); } .zsw-varnish_free { color: var(--z-varnish_free); border-style: dashed; }
.zsw-glue { color: var(--z-glue); } .zsw-barcode { color: var(--z-barcode); } .zsw-braille { color: var(--z-braille); } .zsw-reading_dir { color: var(--z-reading_dir); }
.zsw-edge_mark { color: var(--z-edge_mark); background: var(--z-edge_mark); } .zsw-eye_mark { color: var(--z-eye_mark); background: var(--z-eye_mark); }
.zsw-tamper { color: var(--z-tamper); } .zsw-bollino { color: var(--z-bollino); } .zsw-keep_out { color: var(--z-keep_out); border-style: dashed; }
.zsw-text_area { color: var(--z-text_area); } .zsw-instruction { color: var(--z-instruction); }
.lsw { display: inline-block; width: 1.6rem; border-top: 2px solid var(--die-cut); vertical-align: middle; margin-right: .35rem; }
.lsw-crease { border-top-style: dashed; } .lsw-perf { border-top: 2px dotted var(--die-perf); } .lsw-partial { border-top-color: var(--die-partial); } .lsw-ref { border-top: 1px dotted var(--die-ref); }

/* ---- Layout ---- */
.dl-filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.dl-filters .field { min-width: 9rem; }
.dl-filters input[type="search"] { min-width: 12rem; }
.dl-type-nav { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.dl-type-nav a { display: inline-block; font-family: var(--mono); font-size: .75rem; padding: .25rem .6rem; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; background: var(--card); }
.dl-type-nav a:hover { border-color: var(--accent); }
.dl-type-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.dl-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-decoration: none; min-width: 0; }
.dl-card:hover { border-color: var(--accent); color: var(--ink); }
.dl-card-fig { aspect-ratio: 4 / 3; padding: .75rem; background: var(--panel); display: grid; place-items: center; overflow: hidden; }
.dl-card-fig .dl-svg { max-height: 100%; width: auto; max-width: 100%; height: 100%; }
.dl-card-body { padding: .7rem .8rem .8rem; display: grid; gap: .25rem; align-content: start; }
.dl-card-body h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.dl-code { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted); }
.dl-meta { font-size: .8rem; color: var(--muted); }

.dl-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.dl-stage { border: 1px solid var(--rule); background: var(--panel); padding: clamp(.5rem, 2vw, 1.25rem); min-width: 0; }
.dl-stage .dl-svg { max-height: 78vh; }
.dl-side { display: grid; gap: 1.25rem; min-width: 0; }
.dl-side h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.dl-profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.dl-profiles a { display: block; padding: .5rem .7rem; border: 1px solid var(--rule); background: var(--card); text-decoration: none; color: var(--ink); }
.dl-profiles a:hover { border-color: var(--accent); }
.dl-profiles a[aria-current="true"] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.dl-profiles .small { display: block; }
.dl-line-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--muted); list-style: none; margin: .6rem 0 0; padding: 0; }
.zones-table td, .zones-table th { font-size: .84rem; }
.zones-table .num { font-family: var(--mono); color: var(--muted); width: 2rem; }
.zones-table .zt { display: flex; align-items: center; white-space: nowrap; }
.dl-props { margin: .15rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .78rem; }

/* Detector */
.dl-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dl-compare figure { margin: 0; border: 1px solid var(--rule); background: var(--panel); padding: .75rem; display: grid; gap: .5rem; min-width: 0; }
.dl-compare figcaption { font-size: .82rem; color: var(--muted); }
.dl-verdict { border: 1px solid var(--rule); background: var(--card); padding: 1rem 1.15rem; display: grid; gap: .35rem; }
.dl-verdict.v-match { border-color: var(--ok); background: var(--ok-soft); }
.dl-verdict.v-similar { border-color: var(--y); }
.dl-verdict.v-none { border-color: var(--error); background: var(--error-soft); }
.dl-verdict strong { font-family: var(--display); font-size: 1.15rem; }
.score-bar { display: inline-block; width: 5rem; height: .45rem; background: var(--rule); vertical-align: middle; margin-right: .4rem; position: relative; }
.score-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.score-bar.s10 > span { width: 10%; } .score-bar.s20 > span { width: 20%; } .score-bar.s30 > span { width: 30%; } .score-bar.s40 > span { width: 40%; }
.score-bar.s50 > span { width: 50%; } .score-bar.s60 > span { width: 60%; } .score-bar.s70 > span { width: 70%; } .score-bar.s80 > span { width: 80%; }
.score-bar.s90 > span { width: 90%; } .score-bar.s100 > span { width: 100%; } .score-bar.s0 > span { width: 2%; }

/* Profile editor */
.zone-edit { display: grid; gap: .6rem; border: 1px solid var(--rule); background: var(--card); padding: .8rem; }
.zone-edit-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.zone-edit-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.zone-edit-grid .span2 { grid-column: span 2; }
.zone-edit-grid .span3 { grid-column: span 3; }
.zone-edit-grid .span6 { grid-column: 1 / -1; }
.zone-edit input, .zone-edit select, .zone-edit textarea { width: 100%; }
.zone-edit .field label { font-size: .78rem; }
.dl-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

@media (max-width: 880px) {
  .dl-detail { grid-template-columns: minmax(0, 1fr); }
  .dl-compare { grid-template-columns: minmax(0, 1fr); }
  .zone-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-edit-grid .span2, .zone-edit-grid .span3 { grid-column: span 2; }
}

/* Inputs not covered by site.css */
input[type="number"], input[type="search"], textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 0; padding: .6rem .7rem; min-width: 0;
}
textarea { min-height: 4.5rem; resize: vertical; }
input[type="number"]:focus, input[type="search"]:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.zone-edit input[type="number"], .zone-edit input[type="text"], .zone-edit select { padding: .4rem .5rem; }