/* Printed forms: one stylesheet for the sheet on screen and the paper in print.
 *
 * Every value here follows a numbered style rule of docs/demo/documents-spec.md, part 3; the rule
 * is named next to the value, and packages/pack-ua/test/print-style.test.ts reads this file and
 * checks the values against the rules. The sheet is the form pack: white paper, black text, one
 * grey for hints, two font families. The screen chrome around it (the toolbar, the notes, the
 * desk) is PixelKit Charcoal and never prints.
 */

/* Rule 8: two families, both embedded as woff2. */
@font-face{font-family:"Fixel Text";src:url(/fonts/FixelText-Regular.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Fixel Text";src:url(/fonts/FixelText-Medium.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"Fixel Text";src:url(/fonts/FixelText-SemiBold.woff2) format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"Fixel Text";src:url(/print/fonts/FixelText-Bold.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-Medium.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-Bold.woff2) format("woff2");font-weight:700;font-display:block}

:root{
  --text:"Fixel Text",Arial,sans-serif;
  --data:"JetBrains Mono",monospace;
  /* Rule 14: black on white and one second tone. */
  --ink:#000;--hint:#666;
  /* Rule 31: the line for a signature is 35 mm long. */
  --line:35mm;
  /* Screen chrome, PixelKit Charcoal. */
  --desk:#151517;--ui:#ebebe7;--ui-muted:#b9bab5;--ui-rule:rgba(255,255,255,.26);--ui-warn:#b8860b;--ui-crit:#d0603f;--ui-blue:#4a7dd6;
}

/* ── Pages (rules 1-6, 38, 44) ─────────────────────────────────────────────────────────────── */

/* Rule 2 and rule 6: class form. */
@page{size:A4;margin:15mm 10mm 15mm 20mm}
/* Rule 3: class doc. */
@page doc{size:A4;margin:20mm 10mm 20mm 30mm}
/* Rule 4: class wide, landscape, the binding edge at the top. */
@page wide{size:A4 landscape;margin:20mm 10mm 10mm 10mm}
/* Rule 44: A5 cards. */
@page a5{size:A5;margin:8mm}
@page a5-wide{size:A5 landscape;margin:15mm 10mm 15mm 20mm}
/* Rule 38: the same pages with the running line, for a document of several pages. The left text
   is the document's own and comes with the page; a one-page document uses the pages above. */
@page form-n{size:A4;margin:15mm 10mm 15mm 20mm;
  @bottom-left{font:7pt "Fixel Text",Arial,sans-serif;color:#000;vertical-align:top;padding-top:4mm}
  @bottom-right{content:"Аркуш " counter(page) " з " counter(pages);font:7pt "Fixel Text",Arial,sans-serif;color:#000;vertical-align:top;padding-top:4mm}}
@page doc-n{size:A4;margin:20mm 10mm 20mm 30mm;
  @bottom-left{font:7pt "Fixel Text",Arial,sans-serif;color:#000;vertical-align:top;padding-top:6mm}
  @bottom-right{content:"Аркуш " counter(page) " з " counter(pages);font:7pt "Fixel Text",Arial,sans-serif;color:#000;vertical-align:top;padding-top:6mm}}
@page wide-n{size:A4 landscape;margin:20mm 10mm 10mm 10mm;
  @bottom-left{font:7pt "Fixel Text",Arial,sans-serif;color:#000;vertical-align:top;padding-top:2mm}
  @bottom-right{content:"Аркуш " counter(page) " з " counter(pages);font:7pt "Fixel Text",Arial,sans-serif;color:#000;vertical-align:top;padding-top:2mm}}

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--desk);color:var(--ui);font:14px/1.45 var(--text);-webkit-font-smoothing:antialiased;overflow-x:auto}

/* ── Screen chrome ─────────────────────────────────────────────────────────────────────────── */

.bar,.notes{width:210mm;max-width:100%;margin:0 auto;padding:16px 0 0}
.bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding-bottom:16px}
.bar a{font:500 13px var(--data);color:var(--ui);text-decoration-color:var(--ui-rule);text-underline-offset:3px}
.bar a:hover{text-decoration-color:var(--ui)}
.bar .fact{font:500 13px var(--data);color:var(--ui-muted)}
.btn{font:500 14px var(--data);min-height:44px;padding:8px 20px;border:1px solid var(--ui);background:var(--ui);color:var(--desk);cursor:pointer;border-radius:0}
.btn:active{transform:translate(1px,1px)}
:focus-visible{outline:2px solid var(--ui-blue);outline-offset:2px}
.notes{padding:0 0 16px}
.notes p{margin:0 0 4px;color:var(--ui-muted)}
.st{font:500 12px var(--data);white-space:nowrap}
.st::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;background:currentColor;vertical-align:1px}
.st.warn{color:var(--ui-warn)}
.st.crit{color:var(--ui-crit)}

/* ── The sheet (rules 1-5): true A4 proportion on a desk, padding equal to the page margins ── */

.sheet{position:relative;margin:0 auto 24px;background:#fff;color:var(--ink);font-family:var(--text);font-synthesis:none;overflow:hidden}
.sheet.form{width:210mm;min-height:297mm;padding:15mm 10mm 15mm 20mm;font-size:9pt;line-height:1.25}
.sheet.doc{width:210mm;min-height:297mm;padding:20mm 10mm 20mm 30mm;font-size:10pt;line-height:1.3}
.sheet.wide{width:297mm;min-height:210mm;padding:20mm 10mm 10mm 10mm;font-size:8.5pt;line-height:1.25}
.sheet.a5{width:148mm;min-height:210mm;padding:8mm;font-size:11pt;line-height:1.25}
.sheet.a5-wide{width:210mm;min-height:148mm;padding:15mm 10mm 15mm 20mm;font-size:9pt;line-height:1.25}
.sheet.message{width:210mm;padding:15mm 10mm 15mm 20mm;font-size:10pt;line-height:1.3}
.content{position:relative;z-index:1}
.content>:first-child,.colm>:first-child,.box>:first-child{margin-top:0}

/* Rule 42: a document that is not final carries the word behind its text, 15 % grey. */
.watermark{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;font:700 80pt var(--text);letter-spacing:.08em;color:#d9d9d9;transform:rotate(-35deg);pointer-events:none;user-select:none}
.mark{display:inline-block;margin:0 0 2mm;padding:.5mm 2mm;border:1pt solid var(--ink);font-weight:700}

/* ── Type (rules 8-16) ─────────────────────────────────────────────────────────────────────── */

.m{font-family:var(--data)}
.b{font-weight:600}
.nw{white-space:nowrap}
.gr{color:var(--hint)}
.sm{font-size:7.5pt}
/* Rule 23: the gap between groups of three digits is drawn, not typed. */
.g+.g{margin-left:.22em}

/* Rules 9, 10, 16: titles. Class form sits left over a 1 pt rule; class doc is centred. */
.title{margin:0;font-size:13pt;line-height:1.25;font-weight:700}
.title.center{text-align:center}
.title.ruled{padding-bottom:1.5mm;border-bottom:1pt solid var(--ink)}
.sheet.doc .title{font-size:14pt}
.title-line{margin:.5mm 0 0;font-size:9pt}
.title-line.center{text-align:center}
.heading{margin:5mm 0 0;font-size:11pt;line-height:1.25;font-weight:700;break-after:avoid}
.para{margin:2mm 0 0}
.para.center{text-align:center}
.para.right{text-align:right}
.para.small{font-size:9pt}
.para.note{font-size:7pt}
.para.big{font-size:16pt;line-height:1.2}
.para.big .m{font-size:12pt}
.sheet.wide .para.small{font-size:7.5pt}
.sheet.wide .para.note{font-size:6pt}
.side-head{margin:0 0 2mm;font-size:7pt;text-align:right}
.footnote{margin:2mm 0 0;font-size:7pt}
.sheet.wide .footnote{font-size:6pt}
/* Rules 9-11: hints under lines. */
.hint{display:block;font-size:6.5pt;line-height:1.15;color:var(--hint);text-align:center}
.sheet.wide .hint{font-size:6pt}
/* Rule 11 and rule 18: the mark of a form at the top right. */
.stamp{font-size:6.5pt;line-height:1.2;text-align:right}

/* Requisites: label and value rows. */
.fields{margin:2mm 0 0}
.fields>div{display:grid;grid-template-columns:var(--label,34mm) minmax(0,1fr);column-gap:2mm;padding:.4mm 0}
.fields dt{font-weight:600}
.fields dd{margin:0}
.fields.box{padding:1.5mm 2mm;border:.5pt solid var(--ink)}
.fields.box dt{font-weight:400}

/* A requisite on a line with its hint under it. */
.fill{display:flex;align-items:flex-start;gap:2mm;margin-top:1.5mm}
.fill .fl{flex:0 1 auto;max-width:60%}
.fill .fv{flex:1 1 0;min-width:12mm}
.fill .v{display:block;min-height:1.25em;padding:0 1mm;border-bottom:.5pt solid var(--ink)}

/* ── Tables (rules 17, 19-22, 26, 36) ──────────────────────────────────────────────────────── */

.grid{width:100%;margin:2.5mm 0 0;border-collapse:collapse;table-layout:fixed;border:1pt solid var(--ink)}
.grid caption{caption-side:top;padding:0 0 1mm;text-align:left;font-weight:600}
.grid th,.grid td{padding:1mm 1.5mm;border:.5pt solid var(--ink);overflow-wrap:anywhere}
.grid th{font-size:7.5pt;line-height:1.15;font-weight:600;text-align:center;vertical-align:middle}
.grid td{font-size:8.5pt;line-height:1.2;text-align:left;vertical-align:top}
.sheet.wide .grid th{font-size:6.5pt}
.sheet.wide .grid td{font-size:7.5pt}
/* Rule 17: the row of column numbers. */
.grid .nums th{font-size:6.5pt;font-weight:400}
/* Rule 19: 1 pt under the header and above the totals. */
.grid thead+tbody tr:first-child td{border-top:1pt solid var(--ink)}
.grid .foot tr:first-child td{border-top:1pt solid var(--ink)}
/* Rule 20: numbers right; row numbers, codes, units and dates centred; totals labels right. */
.grid .k-money,.grid .k-qty,.grid .k-num{font-family:var(--data);text-align:right;white-space:nowrap}
.grid .k-code,.grid .k-date,.grid .k-no{font-family:var(--data);text-align:center}
.grid .tl{text-align:right;font-weight:600}
.grid .foot .b td{font-weight:600}
.grid td.b{font-weight:600}
/* Rule 36: serial numbers under a name. */
.sub{display:block;font:7.5pt/1.2 var(--data)}
/* Rule 22: unused rows of a fixed table, struck with one diagonal line. */
.grid .struck{position:relative}
.grid .struck td,.grid .blank td{height:6mm}
.strike{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.strike line{stroke:var(--ink);stroke-width:.5pt}

/* ── Signatures (rules 31-34) ──────────────────────────────────────────────────────────────── */

.signs{margin-top:3mm}
.signs.columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4mm;row-gap:2mm}
.sign{break-inside:avoid}
.sign .above,.sign .below{font-size:8.5pt}
.sign .below{margin-top:1.5mm}
.sign .role-line{margin-top:1mm;font-weight:600}
/* Values on one baseline, hints in a row under them. Rule 31: 9 mm of free height above the line. */
.srow{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:1.2mm;align-items:end}
.srow .v{display:block;min-height:9mm;padding-top:calc(9mm - 1.25em)}
.srow .v.role{font-weight:600;padding-right:1mm}
.srow .v.hand,.srow .v.rule{border-bottom:.5pt solid var(--ink)}
.srow .hint{align-self:start}
/* Rule 34: the place mark of a seal. */
.seal{font-size:7pt;color:var(--hint)}

/* Side by side; КО-1 is cut from its receipt by a dashed line (rule 5). */
.cols{display:grid;column-gap:4mm;align-items:start;margin-top:2mm}
.colm{min-width:0}
.cols.cut{column-gap:3mm}
.cutline{align-self:stretch;display:flex;align-items:center;border-left:.5pt dashed var(--ink)}
.cutline span{writing-mode:vertical-rl;padding-left:.8mm;font-size:6.5pt;color:var(--hint)}

/* A comb of cells, one character each. */
.comb{display:flex;flex-direction:column;align-items:center;margin-top:1.5mm}
.comb .cells{display:inline-flex}
.comb .c{width:4.4mm;height:5mm;margin-left:-.5pt;border:.5pt solid var(--ink);font:8.5pt/5mm var(--data);text-align:center}

.box{margin-top:2mm;padding:2mm 3mm;border:1pt solid var(--ink)}
.break{margin:8mm 0;border-top:.5pt dashed var(--hint)}
.qr{display:block}

/* Податкова накладна (1.5): the approved form with up to eight lines on one landscape page. Its
   tables have twelve fixed rows and more, so their rows are set tighter than rule 19 (.5 mm above
   and below instead of 1 mm), and the name of a section sits close over its table. */
.sheet[data-form="tax_invoice"] .grid th,.sheet[data-form="tax_invoice"] .grid td{padding:.5mm 1.5mm}
.sheet[data-form="tax_invoice"] .cols .cols{column-gap:2mm}
.sheet[data-form="tax_invoice"] .comb .c{width:4mm}
.sheet[data-form="tax_invoice"] .cap{margin:2mm 0 0;font-weight:600}
.sheet[data-form="tax_invoice"] .colm>.cap:first-child{margin-top:0}
.sheet[data-form="tax_invoice"] .cap+.grid{margin-top:1mm}

/* Rule 5: a cash order sits in the top 130 mm of the sheet. */
.sheet[data-form^="cash_"] .content{max-height:130mm}

/* Labels (rule 44): the label's own size, the measured face, nothing under 5 pt. */
.sheet.label{padding:1mm;font:6.5pt/1.2 var(--data);overflow:hidden}
.sheet.label .cols{column-gap:1.5mm;margin:0;align-items:center}
.sheet.label .para{margin:0 0 .4mm;white-space:nowrap;overflow:hidden}
.sheet.label .para.note{font-size:5.5pt}
.sheet.label .para.small{font-size:6.5pt}
.sheet.label .para.big{font-size:9pt;line-height:1.15}
.sheet.label .para.big .m{font-size:9pt}
.sheet.label .b{font-weight:700}

/* ── Print (rules 6, 37, 38, 40) ───────────────────────────────────────────────────────────── */

@media print{
  html,body{background:#fff}
  body{overflow:visible}
  .no-print,.bar,.notes{display:none!important}
  .sheet{width:auto;min-height:0;margin:0;padding:0;overflow:visible}
  .sheet.form,.sheet.doc,.sheet.wide,.sheet.a5,.sheet.a5-wide{width:auto;min-height:0;padding:0}
  .sheet.doc{page:doc}
  .sheet.wide{page:wide}
  .sheet.a5{page:a5}
  .sheet.a5-wide{page:a5-wide}
  .sheet.label{page:label;padding:1mm;break-after:page}
  .sheet.label:last-of-type{break-after:auto}
  /* Rule 38: several pages carry the running line; print.js sets the class. */
  html.multi .sheet.form{page:form-n}
  html.multi .sheet.doc{page:doc-n}
  html.multi .sheet.wide{page:wide-n}
  .watermark{position:fixed}
  /* Rule 37: the header and the row of column numbers repeat; rows do not split; the totals,
     the sum in words and the signatures stay together and take the last rows with them. */
  thead{display:table-header-group}
  tr{break-inside:avoid;page-break-inside:avoid}
  .keep,.box,.sign,.fields>div{break-inside:avoid;page-break-inside:avoid}
  .grid+.keep{break-before:avoid}
  .cap{break-after:avoid;page-break-after:avoid}
  .grid tbody:not(.foot) tr:nth-last-child(-n+2){break-after:avoid}
  /* Rule 40: the back side of a two-sided form is the next page. */
  .break{margin:0;border:0;break-before:page;page-break-before:always}
  a{text-decoration:none;color:inherit}
}