/* SyntaxFlow — the dossier of work and the project pack (desk and paper).
   ===========================================================================
   On top of base.css and sf.css (their tokens: light and dark come free).
   dz-*  the dossier: job cards, photo tiles, the cover and the jobs on paper.
   pk-*  the project pack: the files in order, the cover and contents preview.
   The paper is black ink on white, always (sf.css .sf-doc), and prints the
   same; the preview of the pack's cover uses Helvetica/Arial like the PDF.
   =========================================================================== */

/* ---------- desk: shared ---------- */
.dz-check{ display:flex; gap:10px; align-items:flex-start; }
.dz-check input[type=checkbox]{ width:20px; height:20px; margin-top:2px; flex:0 0 20px; accent-color:var(--glass); }
.dz-check label{ font-size:.95rem; font-weight:560; color:var(--ink); cursor:pointer; }
.dz-check .hint{ margin:2px 0 0; }
.dz-privacy{ display:grid; gap:10px; margin:0; padding:10px 14px 12px; border:1px solid var(--rule); border-radius:10px; min-width:0; }
.dz-privacy legend{ padding:0 6px; font-weight:640; font-size:.95rem; }
.dz-privacy > .hint{ margin:0; }
.dz-acts{ display:flex; gap:4px; flex-wrap:wrap; }
.dz-acts .btn{ min-height:34px; padding:2px 10px; }
.dz-use{ display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; }
.dz-use input{ width:20px; height:20px; accent-color:var(--glass); flex:0 0 20px; }
.dz-use label{ cursor:pointer; }

/* ---------- desk: the dossier's jobs ---------- */
.dz-jobs{ gap:14px; }
.dz-card{ display:grid; gap:4px; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--surface-2); min-width:0; }
.dz-card-h{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 12px; margin-bottom:6px; }
.dz-card-h h3{ margin:0; font-size:1.02rem; font-stretch:108%; overflow-wrap:anywhere; }
.dz-from{ margin:2px 0 0; font-size:.84rem; color:var(--ink-3); overflow-wrap:anywhere; }
.dz-grid3{ display:grid; gap:0 12px; grid-template-columns:minmax(0,1.4fr) minmax(76px,.45fr) minmax(0,1.2fr); align-items:start; }
.dz-grid3 > .field, .dz-city > .field{ margin-bottom:10px; }
.dz-city{ display:grid; gap:0; min-width:0; }
.dz-city > .btn{ justify-self:start; margin:-4px 0 8px; }
.dz-warn{ margin:-4px 0 8px; font-size:.84rem; font-weight:600; color:var(--pencil-ink); }
.dz-warn:empty{ display:none; }
.dz-card textarea{ min-height:0; height:auto; }
.dz-h4{ margin:6px 0 2px; font-size:.92rem; color:var(--ink-2); }
.dz-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; align-items:start; margin-bottom:8px; }
.dz-tile{ display:grid; gap:8px; align-content:start; padding:8px; border:1px solid var(--rule); border-radius:10px; background:var(--surface); min-width:0; }
.dz-tile.on{ border-color:var(--glass); box-shadow:0 0 0 1px var(--glass); }
.dz-tile .field{ margin-bottom:0; }
.dz-tile .field label{ font-size:.82rem; margin-bottom:3px; }
.dz-tile input[type=text], .dz-tile select{ width:100%; min-width:0; min-height:40px; }
.dz-thumb{ aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:#15181c; }
.dz-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.dz-thumb .d-nophoto{ height:100%; aspect-ratio:auto; }
.dz-move{ display:flex; gap:4px; }
.dz-move .btn{ min-height:32px; padding:2px 10px; }
.dz-card > .btn{ justify-self:start; }
.dz-pick{ display:grid; gap:10px; max-height:min(52vh,440px); overflow:auto; padding:2px; }
@media (max-width:640px){ .dz-grid3{ grid-template-columns:1fr 1fr; } .dz-grid3 > .dz-city{ grid-column:1 / -1; } }

/* ---------- paper: the dossier ---------- */
.sf-doc .dz-cover{ display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden; break-after:page; page-break-after:always; }
.dz-cover-co{ display:flex; align-items:center; gap:4mm; padding-bottom:4mm; border-bottom:.6mm solid #1f2547; }
.dz-cover-co strong{ font-size:12.5pt; font-stretch:108%; }
.dz-cover-mid{ margin-top:22mm; }
.dz-kicker{ font-size:8pt; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:#b5381f; }
.sf-doc .dz-cover-t{ font-size:30pt; line-height:1.05; margin:3mm 0 4mm; letter-spacing:-.01em; overflow-wrap:anywhere; }
.dz-cover-intro{ font-size:11pt; color:#4a525c; max-width:150mm; }
.dz-cover-facts{ margin-top:5mm !important; font-size:9.5pt; font-weight:620; color:#1b1f24; }
.dz-cover-ph{ margin-top:8mm; height:96mm; border-radius:1.5mm; overflow:hidden; background:#eef0f3; flex:0 0 auto; }
.dz-cover-ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.dz-toc{ margin:8mm 0 0; padding-left:5mm; columns:2; column-gap:10mm; font-size:9pt; color:#1b1f24; }
.dz-toc li{ break-inside:avoid; margin-bottom:1mm; }
.dz-cover-foot{ margin-top:auto; padding-top:3mm; border-top:.2mm solid #d9dde3; font-size:8pt; color:#4a525c; }
.dz-job{ margin:0 0 8mm; }
.dz-job + .dz-job{ padding-top:6mm; border-top:.35mm solid #1f2547; }
.dz-job-h{ break-after:avoid; page-break-after:avoid; }
.sf-doc .dz-job-h h2{ font-size:15pt; line-height:1.15; margin:0 0 1mm; overflow-wrap:anywhere; }
.dz-facts{ font-size:9pt; color:#4a525c; font-weight:600; }
.dz-priv{ margin-top:1.5mm !important; font-size:8.8pt; color:#1b1f24; display:flex; flex-wrap:wrap; gap:1mm 6mm; }
.dz-priv b{ color:#4a525c; font-weight:600; margin-right:1mm; }
.dz-desc{ margin:3mm 0 4mm !important; font-size:10pt; max-width:170mm; }
.dz-pair, .dz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4mm 5mm; margin-bottom:4mm; }
.dz-pair{ break-inside:avoid; page-break-inside:avoid; }
.dz-fig{ margin:0; break-inside:avoid; page-break-inside:avoid; min-width:0; }
.dz-img{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:1mm; background:#eef0f3; }
.dz-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.dz-img .d-nophoto{ height:100%; aspect-ratio:auto; }
.dz-phase{ position:absolute; left:2mm; top:2mm; padding:.6mm 2mm; border-radius:.8mm; background:#1f2547; color:#fff; font-size:7.5pt; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.dz-fig figcaption{ margin-top:1.2mm; font-size:8.3pt; color:#4a525c; overflow-wrap:anywhere; }

/* ---------- desk: the pack ---------- */
.pk-acts{ align-items:center; }
.pk-sum{ font-size:.9rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pk-status{ font-size:.9rem; font-weight:600; color:var(--ink); }
.pk-status:empty, .pk-sum:empty{ display:none; }
.pk-docs{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pk-docs li{ display:grid; gap:4px 12px; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:8px 10px; border:1px solid var(--rule); border-radius:10px; background:var(--surface-2); }
.pk-doc-t{ font-size:.92rem; overflow-wrap:anywhere; }
.pk-ok{ grid-column:1; font-size:.84rem; color:var(--pass); font-weight:600; overflow-wrap:anywhere; }
.pk-doc-acts{ grid-column:2; grid-row:1 / span 2; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.pk-drop{ grid-auto-flow:row; cursor:default; }
.pk-items{ list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:pk; }
.pk-item{ position:relative; display:grid; gap:2px; padding:10px 12px 10px 44px; border:1px solid var(--rule); border-radius:10px; background:var(--surface-2); min-width:0; counter-increment:pk; }
.pk-item::before{ content:counter(pk); position:absolute; left:12px; top:12px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--docs); color:#fff; font-size:.8rem; font-weight:700; }
.pk-item.off{ opacity:.7; }
.pk-item.off::before{ background:var(--rule-2); color:var(--ink); }
.pk-item .field{ margin-bottom:4px; }
.pk-item input[type=text]{ width:100%; min-width:0; }
.pk-meta{ margin:0; font-size:.84rem; color:var(--ink-3); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pk-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; margin-top:4px; }
@media (max-width:640px){ .pk-docs li{ grid-template-columns:1fr; } .pk-doc-acts{ grid-column:1; grid-row:auto; justify-content:flex-start; } }

/* ---------- paper: the pack's cover and contents (as the PDF draws them) ---------- */
.sf-doc .pk-cover, .sf-doc .pk-contents{ font-family:Helvetica,Arial,sans-serif; }
.sf-doc .pk-cover{ display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden; break-after:page; page-break-after:always; }
.pk-co{ display:flex; gap:5mm; align-items:flex-start; padding-bottom:4mm; border-bottom:.55mm solid #1f2547; }
.pk-co strong{ font-size:13pt; }
.pk-co p{ margin-top:1mm !important; font-size:9pt; color:#4a525c; }
.pk-mid{ margin-top:auto; margin-bottom:auto; }
.sf-doc .pk-t{ font-size:28pt; line-height:1.15; margin:0 0 3mm; color:#1f2547; overflow-wrap:anywhere; }
.pk-sub{ font-size:15pt; color:#1b1f24; margin-bottom:5mm !important; overflow-wrap:anywhere; }
.pk-mid dl{ display:grid; grid-template-columns:38mm minmax(0,1fr); gap:1.5mm 0; margin:0 0 5mm; font-size:10.5pt; }
.pk-mid dt{ font-weight:700; color:#4a525c; }
.pk-mid dd{ margin:0; overflow-wrap:anywhere; }
.pk-count{ font-size:10.5pt; color:#4a525c; }
.pk-foot{ font-size:8pt; color:#4a525c; display:grid; gap:1mm; }
.sf-doc .pk-contents h2{ font-size:20pt; margin:4mm 0 0; padding-bottom:3mm; border-bottom:.45mm solid #1f2547; color:#1f2547; }
.pk-contents ol{ list-style:none; margin:6mm 0 0; padding:0; display:grid; gap:2.6mm; font-size:11pt; }
.pk-contents li{ display:flex; align-items:baseline; gap:2mm; }
.pk-contents li span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-contents li i{ flex:1 1 auto; border-bottom:.3mm dotted #4a525c; min-width:6mm; transform:translateY(-1mm); }
.pk-contents li b{ font-weight:400; font-variant-numeric:tabular-nums; }

#dz-acts, #pk-acts{ align-items:center; }
#dz-top, #pk-top{ align-items:flex-end; }
.dz-cover > .d-ph{ flex:0 0 auto; }
.pk-cover > .d-ph{ flex:0 0 auto; }