/* SKS Technologies brand — client quote document (quote pack, SKS entity).

   Follows the SKS brand guidelines (sks-brand-docs skill) and reuses the
   CSS of field-api's v2 service report (src/templates/service-report-v2.html.js)
   so a quote and a service report read as one family: HD skyline banner on
   page 1, dark-blue headings with a thin rule, dark-blue table header rows,
   light-blue banding, the full-width dark-blue footer band on every page.

   Everything is scoped to #doc-pages.sks / #doc-src.sks, so SKS Indigenous
   Technologies quotes and the submission document keep their own look.
   Page geometry (14mm top on pages 2+, 27mm bottom reserve) is read by
   paginate.js from data-top / data-bottom on #doc-pages — keep the
   .doc-page-body padding below in sync with generate.js SKS_PAGE.

   Brand tokens only: dark blue #1F335C, white, light blue #F0F7F7, dusty blue
   #566686, grey #808285, purple #7C77B9 as the ONE call-out (the project
   total). Never Indigenous Purple #573B8F. */

/* Self-hosted brand fonts (the .ttf files from the SKS Brand folder), so the
   PDF never depends on what is installed on the estimator's machine. Distinct
   family names keep them from merging with the app's Google-hosted Roboto. */
@font-face{font-family:'SKS Roboto';font-weight:400;font-style:normal;src:url('../assets/brand/sks/fonts/Roboto-Regular.ttf') format('truetype')}
@font-face{font-family:'SKS Roboto';font-weight:500;font-style:normal;src:url('../assets/brand/sks/fonts/Roboto-Medium.ttf') format('truetype')}
@font-face{font-family:'SKS Roboto';font-weight:700;font-style:normal;src:url('../assets/brand/sks/fonts/Roboto-Bold.ttf') format('truetype')}
@font-face{font-family:'SKS Roboto';font-weight:900;font-style:normal;src:url('../assets/brand/sks/fonts/Roboto-Black.ttf') format('truetype')}
@font-face{font-family:'SKS Muli';font-weight:400;font-style:normal;src:url('../assets/brand/sks/fonts/Muli-Regular.ttf') format('truetype')}
@font-face{font-family:'SKS Muli';font-weight:300;font-style:normal;src:url('../assets/brand/sks/fonts/Muli-Light.ttf') format('truetype')}

.sks{
  --sk-dark:#1F335C; --sk-purple:#7C77B9; --sk-light:#F0F7F7; --sk-dusty:#566686; --sk-grey:#808285;
  --sk-head:'SKS Roboto','Roboto',Arial,sans-serif;
  --sk-body:'SKS Muli','Mulish',Arial,sans-serif;
}
#doc-src.sks, #doc-pages.sks .doc-page-body{font-family:var(--sk-body);color:var(--sk-dark);font-size:10pt;line-height:1.55}
.sks .pg-block{padding:0 15mm}
.sks .sq-hero{padding:0}

/* ---- page chrome: body padding + footer band (every page) ---- */
#doc-pages.sks .doc-page-body{padding-top:14mm}
#doc-pages.sks .doc-page::after{height:22mm;background:var(--sk-dark)}
#doc-pages.sks .doc-page-foot{left:0;right:0;height:22mm;padding:0 15mm;color:#fff;font-family:var(--sk-head);font-size:7.5pt;line-height:1.55;letter-spacing:0}
.sq-foot{display:flex;align-items:center;justify-content:space-between;width:100%}
.sq-foot b{font-weight:700}
.sq-foot-r{display:flex;align-items:center;gap:6mm;white-space:nowrap}
.sq-foot-r span{opacity:.85}
.sq-foot-r img{height:9mm;display:block}

/* ---- banner — page 1 only, full bleed (service report .hero) ---- */
.sq-hero{position:relative;height:69.7mm;overflow:hidden;color:#fff;background:var(--sk-dark)}
.sq-hero .sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sq-hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,51,92,.42) 0%,rgba(31,51,92,.18) 40%,rgba(31,51,92,0) 60%)}
.sq-hero .hlogo{position:absolute;right:9.5mm;top:11mm;width:36mm;display:block}
/* a site photo has no white cut-out, so the logo rides on the supplied
   white-backed frame (brand rule: primary logo on white only) */
.sq-hero .hframe{position:absolute;right:0;top:0;width:72mm;display:block}
.sq-hero .htxt{position:absolute;left:15mm;top:12mm;right:80mm}
.sq-hero h1{margin:0;font-family:var(--sk-head);font-weight:900;font-size:24pt;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.sq-hero h2{margin:3.2mm 0 0;font-family:var(--sk-head);font-weight:700;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sq-hero h3{margin:2.4mm 0 0;font-family:var(--sk-head);font-weight:400;font-size:13pt;text-shadow:0 2px 8px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-hero .hmeta{margin-top:3mm;font-family:var(--sk-head);font-weight:700;font-size:9.5pt;line-height:1.45;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.sq-hero .hctl{position:absolute;left:15mm;bottom:3mm;display:flex;gap:6px;z-index:2}
.sq-hero .hctl label, .sq-hero .hctl button{border:none;background:rgba(31,51,92,.7);color:#fff;border-radius:7px;font-family:var(--font);font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}

/* ---- details table (kept whole) ---- */
.sks table{width:100%;border-collapse:collapse}
table.sq-det{font-size:9.5pt}
table.sq-det td{padding:5px 8px;border-bottom:.75px solid var(--sk-grey);vertical-align:top;overflow-wrap:anywhere}
table.sq-det tr:first-child td{border-top:1.5px solid var(--sk-dark)}
table.sq-det tr:nth-child(even) td{background:var(--sk-light)}
table.sq-det td.lbl{width:23mm;white-space:nowrap;font-family:var(--sk-head);font-weight:700;font-size:8pt;text-transform:uppercase;letter-spacing:.06em;padding-top:6.5px;overflow-wrap:normal}

/* ---- headings: dark blue, thin dark-blue rule underneath ---- */
.sq-h{display:flex;align-items:baseline;gap:3mm;margin:0;font-family:var(--sk-head);font-weight:700;font-size:12pt;line-height:1.25;padding-bottom:1.5mm;border-bottom:1.25px solid var(--sk-dark)}
.sq-h .n{font-weight:900;flex-shrink:0}
.sq-h .t{flex:1;min-width:0}
.sq-h .amt{flex-shrink:0;text-align:right;font-weight:700;font-size:11pt;font-variant-numeric:tabular-nums}
.sq-h .amt small{font-weight:500;font-size:7.5pt;letter-spacing:.06em;text-transform:uppercase;color:var(--sk-dusty);margin-right:2mm}
.sq-h2{font-size:10.5pt}
.sq-sub{margin-top:1.2mm;font-size:8.5pt;color:var(--sk-dusty)}

/* ---- prose ---- */
.sq-prose{white-space:pre-wrap;font-size:10pt;line-height:1.55;color:var(--sk-dark)}
.sq-prose-2{font-size:9.5pt}

/* ---- tables: dark-blue header row, light-blue banding, no vertical rules ---- */
table.sq-tbl{font-size:9.5pt}
table.sq-tbl th{background:var(--sk-dark);color:#fff;font-family:var(--sk-head);font-weight:700;font-size:8.5pt;text-align:left;padding:6px 8px;white-space:nowrap}
table.sq-tbl td{padding:6px 8px;border-bottom:.75px solid #d9dcdf;vertical-align:top}
/* banding is a render-time class, not :nth-child, so a table split across
   pages keeps its stripes in step on the continuation */
table.sq-tbl tr.alt td{background:var(--sk-light)}
table.sq-tbl .q{width:13mm;text-align:center;font-family:var(--sk-head);font-weight:700}
table.sq-tbl .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.sq-tbl .strong{font-family:var(--sk-head);font-weight:700}
table.sq-tbl .dim{color:var(--sk-dusty)}
table.sq-tbl .nm{font-weight:700}
table.sq-tbl .sp{color:var(--sk-dusty)}
table.sq-bom{font-size:8.5pt}
table.sq-bom th{font-size:7.5pt;padding:5px 6px}
table.sq-bom td{padding:5px 6px}

/* ---- photos / notes (a photo row is kept whole) ---- */
.sq-media{display:flex;flex-wrap:wrap;gap:5mm;align-items:stretch}
.sq-photo{position:relative;align-self:flex-start;overflow:hidden;border:.75px solid var(--sk-grey);background:var(--sk-light)}
.sq-photo img{width:100%;height:auto;max-height:900px;object-fit:contain;display:block}
.sq-note{flex:1 1 240px;min-width:240px;display:flex;flex-direction:column;gap:1.5mm}
.sq-note .lbl{font-family:var(--sk-head);font-weight:700;font-size:8pt;text-transform:uppercase;letter-spacing:.06em}
.sq-note textarea{flex:1;min-height:160px;resize:vertical;border:none;border-left:3px solid var(--sk-dark);padding:3mm 4mm;font-family:var(--sk-body);font-size:9.5pt;line-height:1.55;background:var(--sk-light);color:var(--sk-dark);box-sizing:border-box;border-radius:0}

/* ---- call-outs: light-blue fill, thick left border ---- */
.sq-call{background:var(--sk-light);border-left:5px solid var(--sk-dark);padding:3mm 5mm}
.sq-call .ttl{font-family:var(--sk-head);font-weight:700;font-size:11pt}
.sq-call .txt{margin-top:1mm;font-size:9.5pt}
/* the single purple call-out in the document — the project total */
.sq-call.sq-accent{border-left-color:var(--sk-purple)}

/* ---- financial summary panel ---- */
.sq-sum{background:var(--sk-light);padding:4mm 5mm;display:flex;flex-direction:column;gap:1.8mm;font-size:9.5pt}
.sq-sum .row{display:flex;justify-content:space-between;gap:6mm}
.sq-sum .row b{font-family:var(--sk-head);font-weight:700;font-variant-numeric:tabular-nums}
.sq-sum .tot{border-top:1.25px solid var(--sk-dark);padding-top:2.5mm;margin-top:.8mm;font-family:var(--sk-head);font-weight:700;font-size:11pt;align-items:baseline}
.sq-sum .tot b{font-weight:900;font-size:14pt}
.sq-sum .gst{color:var(--sk-dusty);font-size:9pt}
.sq-sum .gst.first{border-top:.75px solid var(--sk-grey);padding-top:2mm}
.sq-optot{display:flex;justify-content:space-between;align-items:baseline;border-top:.75px solid var(--sk-grey);padding-top:2.5mm;font-family:var(--sk-head);font-weight:700;font-size:10pt}
.sq-optot b{font-size:12pt;font-variant-numeric:tabular-nums}

/* ---- closing total ---- */
.sq-arrows{display:flex;justify-content:flex-end;margin-bottom:4mm}
.sq-arrows img{height:7mm;width:auto;display:block}
.sq-total{display:flex;align-items:baseline;justify-content:space-between;gap:6mm}
.sq-total .k{font-family:var(--sk-head);font-weight:900;font-size:20pt;line-height:1.1}
.sq-total .v{font-family:var(--sk-head);font-weight:700;font-size:20pt;line-height:1.1;font-variant-numeric:tabular-nums}
.sq-total-gst{margin-top:1.5mm;font-size:9pt;color:var(--sk-dusty)}

/* placeholder strips for photos/notes — screen only (paper reserves them) */
.sks .pg-slot{border-radius:0;border-color:#c9d3dd;background:var(--sk-light);color:var(--sk-dusty);font-family:var(--font)}

/* ---- submission document on the SKS brand (.sks-sub) ----
   submission.js writes its atoms with inline styles that read the app's theme
   tokens (var(--cta), var(--muted), var(--surface-2) …). Inside an SKS
   submission those tokens resolve to brand tokens instead: purple accents
   become dark blue (purple is kept for the one call-out, the project total),
   panels go light blue, fonts go to the self-hosted Roboto / Muli. */
.sks-sub{
  --ink:#1F335C; --muted:#566686; --muted-2:#566686;
  --cta:#1F335C; --cta-ink:#1F335C; --cta-soft:#F0F7F7;
  --line:#d9dcdf; --line-2:#d9dcdf; --surface-2:#F0F7F7;
  --head:var(--sk-head); --font:var(--sk-body);
}
/* screen-only chrome (break strips, upload pills) keeps the app's purple
   interactive accent and UI fonts — values as in theme.css */
.sks-sub .no-print, .sks-sub .pg-brk{
  --ink:#1F335C; --muted:#566686; --muted-2:#94A0B0;
  --cta:#7C77B9; --cta-ink:#4D4886; --cta-soft:#ECEAF6;
  --line:#DCE2EA; --line-2:#EBEEF3; --surface-2:#F2F5F8;
  --head:'Roboto',system-ui,sans-serif; --font:'Mulish',system-ui,sans-serif;
}