/* ==========================================================================
   LETTERS AND MORE (extras.html) — on top of editor.css.
   The letterhead page copies the owner's own letterhead PDF (Sep 2026):
   Exo 10pt body on 13.3pt lines, 12pt between paragraphs, 25.4mm side
   margins, date top-left, logo top-right, a light piano bottom-right and the
   contact + piano-key band along the foot. Every measure below is in mm/pt so
   screen, print and the jsPDF copy (extras-pdf.js) agree.
   ========================================================================== */

@font-face { font-family: 'Exo'; font-weight: 400; font-display: swap; src: url('Assets/fonts/exo-400.ttf') format('truetype'); }
@font-face { font-family: 'Exo'; font-weight: 700; font-display: swap; src: url('Assets/fonts/exo-700.ttf') format('truetype'); }
@font-face { font-family: 'Exo'; font-weight: 400; font-style: italic; font-display: swap; src: url('Assets/fonts/exo-400i.ttf') format('truetype'); }

.x-letter, .x-datasheet, .x-warranty { --accent: #c8203e; --deep: #9b1730; }
.x-packing { --accent: var(--inv); --deep: var(--inv-deep); }

/* ── Tabs: the four sales documents are links back to the editor ── */

/* ── The letterhead page ── */
.lh-frame { position: relative; width: 210mm; max-width: 100%; margin: 0 auto; }
.lhs { --fs: 1; position: relative; width: 210mm; min-height: 297mm; background: #fff; color: #000; overflow: hidden;
  font: 400 calc(10pt * var(--fs)) / 1.33 'Exo', Arial, sans-serif; transform-origin: 0 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 18px 40px rgba(20,30,45,.14); border-radius: 0 4px 4px 4px;
  /* a faint rule where each A4 page ends, so a long document shows its breaks */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(297mm - 1px), #d5dbe2 calc(297mm - 1px), #d5dbe2 297mm); }
.lh-logo { position: absolute; left: 170.7mm; top: 3.7mm; width: 34.3mm; height: auto; }
.lh-piano { position: absolute; left: 127mm; top: 204.4mm; width: 76.6mm; height: 76.6mm; pointer-events: none; }
.lh-foot { position: absolute; left: .5mm; top: calc(297mm - 18.8mm); width: 209.3mm; height: 18.8mm; }
.lhs.no-lh .lh-logo, .lhs.no-lh .lh-piano, .lhs.no-lh .lh-foot { display: none; }

/* the date sits top-left beside the title, as on the owner's letterhead
   (date at 54pt, title at 67pt), so it is placed, not flowed */
.lh-flow { position: relative; padding: 23.6mm 25.4mm 25mm; }
.lh-date { position: absolute; left: 19.8mm; top: 19mm; display: flex; flex-direction: column; }
.lh-ref { color: #c00; font-size: .9em; }
.lh-ref:empty { display: none; }
.lh-title { margin: 0; font: 400 calc(17pt * var(--fs)) / 1.3 'Exo', Arial, sans-serif; text-align: center; text-decoration: underline; text-underline-offset: 2.5pt; text-decoration-thickness: .6pt; }
.lh-title:empty { display: none; }
.lh-sub { text-align: center; color: #555; margin-top: 1mm; }
.lh-sub:empty { display: none; }
.lh-to { margin-top: 12mm; }
.lh-title:empty ~ .lh-to { margin-top: 9mm; }
.lh-to:empty { display: none; }
.lh-subject { font-weight: 700; margin-top: 12pt; }
.lh-subject:empty { display: none; }
.lh-extra:empty { display: none; }
.lh-body { margin-top: 12pt; }
.lh-body > * { margin: 0 0 12pt; }
.lh-body > *:last-child { margin-bottom: 0; }
.lh-body p { margin-top: 0; }
.lh-body ul { padding-left: 36pt; margin-top: 0; }
.lh-body li { padding-left: 0; }
.lh-body h3 { font: 700 calc(11pt * var(--fs)) / 1.3 'Exo', Arial, sans-serif; margin: 14pt 0 6pt; color: #9b1730; letter-spacing: .02em; }
.lh-body table.spec { width: 100%; border-collapse: collapse; }
.lh-body table.spec th, .lh-body table.spec td { text-align: left; vertical-align: top; padding: 3.2pt 6pt; border-bottom: .5pt solid #d9d9d9; font-weight: 400; }
.lh-body table.spec th { width: 36%; color: #444; font-weight: 700; }
.lh-body table.spec tr:nth-child(odd) td, .lh-body table.spec tr:nth-child(odd) th { background: rgba(200,32,62,.035); }
.lh-sign { margin-top: 12pt; display: grid; gap: 12pt; }
.lh-sign:empty { display: none; }
.lh-sign .who { display: grid; gap: 12pt; }
.lh-sign .lh-stamp { display: block; width: 53mm; height: auto; margin: 0 0 3pt -2mm; }
.lh-sign .who-lines { display: grid; gap: 2pt; }

/* Data sheet */
.x-datasheet .lh-title { text-align: left; text-decoration: none; font-weight: 700; font-size: calc(19pt * var(--fs)); color: #111; margin-top: 8mm; padding-right: 0; }
.x-datasheet .lh-sub { text-align: left; font-size: 1.05em; margin-top: .5mm; }
.x-datasheet .lh-date { color: #555; }
.ds-photo { float: right; width: 58mm; max-height: 62mm; object-fit: contain; margin: 0 0 4mm 6mm; }
.x-datasheet .lh-body { margin-top: 8mm; }
.x-datasheet .lh-body::after { content: ''; display: block; clear: both; }
/* beside a photo the spec table narrows (the PDF does the same) */
.lh-body.has-photo table.spec { width: calc(100% - 64mm); }

/* Warranty */
.wc-meta { margin-top: 9mm; display: grid; grid-template-columns: 1fr 1fr; gap: 3pt 10mm; }
.wc-meta div b { margin-right: 3pt; }
.wc-items { width: 100%; border-collapse: collapse; margin-top: 8mm; }
.wc-items th { text-align: left; font-weight: 700; border-bottom: .8pt solid #c8203e; padding: 3pt 4pt; font-size: .92em; }
.wc-items td { padding: 4pt; border-bottom: .5pt solid #d9d9d9; vertical-align: top; }
.wc-items .m { display: block; color: #555; font-size: .88em; }
.wc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 16mm; margin-top: 16mm; }
.wc-sign div { border-top: .6pt solid #777; padding-top: 3pt; font-size: .92em; color: #333; }

/* ── Packing list sheet (editor.css .sheet look) ── */
.pl-sheet .pl-ship { text-align: right; justify-items: end; }
.pl-ship .line { grid-template-columns: 11mm auto; }
.pl-ship .name { font-weight: 700; font-size: 14px; color: var(--ink); }
.items.pl td.c { width: 20mm; text-align: center; }
.items.pl td.kg { width: 17mm; }
.items.pl td.qty { width: 15mm; }
.items.pl td.size { width: 30mm; }
.items.pl input.plain { text-align: inherit; }
.pl-notes { gap: 1mm; }
.pl-notes textarea { resize: none; font-size: 11px; line-height: 1.5; field-sizing: content; min-height: 1.5em; }
.pl-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: auto; padding-top: 14mm; font-size: 11px; color: var(--text); }
.pl-signs div { border-top: 1px solid #9aa5b1; padding-top: 1.6mm; }

/* ⚙ Settings: a small round icon button at the end of the top bar */
.topbar .linkbtn.icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 31px; padding: 0; }
.topbar .linkbtn.icon svg { width: 16px; height: 16px; }

/* ── Dock bits ── */
/* A switch inside a .field: editor.css's ".field input" (full width, 42px,
   padding) turned the Signature switch into a big blob. Put the switch back. */
.field .tg { align-self: end; background: var(--well); border-radius: 10px; min-height: 42px; align-items: center; }
.field .tg input { width: 36px; min-width: 36px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 22px; background: #b9c2cd; }
.field .tg input:checked { background: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-b { font: 600 12.5px var(--ui); color: var(--bench-ink); background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 7px 11px; cursor: pointer; min-height: 34px; }
.chip-b[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-b.fact[aria-pressed="true"] { background: #ede8fb; border-color: #c9bdf2; color: #3b2a78; }
.field textarea.big { min-height: 190px; font-size: 14px; }
.field textarea.mid { min-height: 90px; }
.mini-seg { display: flex; background: var(--well); border-radius: 10px; padding: 3px; gap: 2px; }
.mini-seg button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 8px 4px; font: 600 12.5px var(--ui); color: var(--bench-muted); cursor: pointer; min-height: 36px; }
.mini-seg button[aria-pressed="true"] { background: var(--panel); color: var(--bench-ink); font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.btn.ai { background: #6d4fd1; }
.ai-card { border-color: #d9d0f6; }
.ai-card h2 { color: #6d4fd1; }
/* Warranty length: the number keeps a usable width beside Months / Years
   (the full-width select used to squeeze it to nothing on a phone). */
#w-period { flex: 0 0 64px; width: 64px; text-align: center; }
#w-unit { flex: 1 1 auto; width: auto; min-width: 0; }
.sources { display: grid; gap: 4px; font-size: 12.5px; }
.sources .lbl { font: 800 10px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bench-muted); }
.sources a { color: var(--deep); overflow-wrap: anywhere; }
.fit { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.fit .bar { height: 8px; background: var(--well); border-radius: 4px; overflow: hidden; }
.fit .bar i { display: block; height: 100%; width: 0; background: #1fa67a; border-radius: 4px; }
.fit.over .bar i { background: #d97706; }
.fit.over { color: #9a5b00; }
.w-items { display: grid; gap: 8px; }
.w-row { display: grid; grid-template-columns: 1fr 26px; gap: 6px; background: var(--well); border-radius: 10px; padding: 8px; }
.w-row .f { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.w-row input { font: 500 13.5px var(--ui); background: var(--panel); border: 1px solid var(--panel-line); border-radius: 8px; padding: 7px 9px; min-width: 0; width: 100%; }
.w-row input.desc-in { grid-column: 1 / -1; }
.w-row .rm { align-self: start; }
.w-row .f.ca { grid-template-columns: 1fr 1fr 64px 96px; }
.w-row .f.ca input.desc-in { grid-column: 1 / -1; }
.crm-note { margin: 0; }
.crm-note.ok { color: #1f7a4d; }
.profile { max-height: min(760px, 92vh); grid-template-rows: auto 1fr; }
.profile-form { overflow: auto; padding: 4px 16px 18px; display: grid; gap: 12px; }
.profile-form h3 { margin: 6px 0 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bench-muted); }
.open-kind { font: 800 9.5px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--deep); }

@media screen and (max-width: 820px) {
  .lh-frame { width: 100%; overflow: hidden; }
  .topbar .linkbtn { font-size: 13.5px; }
  .topbar .linkbtn.icon { flex: 0 0 46px; width: 46px; height: 42px; }
  .field textarea.big { font-size: 16px; }
  .field input, .field textarea, .field select, .w-row input { font-size: 16px; }
  /* Packing rows as cards: carton + description, then Qty / Kg / Size */
  /* four tracks, so row 2 gets three equal boxes (Qty | Kg | Size) under
     Carton | Description — three areas on three tracks squeezed Size to 26px */
  .items.pl tbody tr { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) 26px; grid-template-areas: "c desc desc x" "q kg size size"; }
  .items.pl td input.num, .items.pl td.size input { min-width: 0; width: 100%; text-align: left; }
  .items.pl td.c { grid-area: c; display: flex; align-items: center; gap: 6px; background: var(--well); border-radius: 9px; padding: 0 9px; min-height: 36px; align-self: start; }
  .items.pl td.item { grid-area: desc; }
  .items.pl td.qty { grid-area: q; }
  .items.pl td.kg { grid-area: kg; display: flex; align-items: center; gap: 6px; background: var(--well); border-radius: 9px; padding: 0 9px; min-height: 36px; }
  .items.pl td.size { grid-area: size; display: flex; align-items: center; gap: 6px; background: var(--well); border-radius: 9px; padding: 0 9px; min-height: 36px; }
  .items.pl td.x { grid-area: x; }
  .pl-sheet .pl-ship { text-align: left; justify-items: start; }
}

/* ==========================================================================
   PRINT. One A4 page per sheet, margin 0 (editor.css already sets @page).
   The logo, piano and footer band are position:fixed, so Chrome repeats them
   on every page, and the padding is cloned so text clears them.
   ========================================================================== */
@media print {
  .lh-frame { width: 210mm !important; height: auto !important; max-width: none; }
  .lhs { transform: none !important; width: 210mm; min-height: 297mm; box-shadow: none; border-radius: 0; background-image: none; overflow: visible;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .lh-logo, .lh-piano, .lh-foot { position: fixed; }
  .lh-flow { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .lh-body p, .lh-body li, .lh-body tr, .wc-items tr { break-inside: avoid; }
  .lh-body h3 { break-after: avoid; }
  .lh-sign, .wc-sign { break-inside: avoid; }
  .pl-notes textarea { field-sizing: content; }
  .pl-sheet .cust .line.empty { display: none; }
  .items.pl tbody tr.blank { display: none; }
}