/* The report paper: the brand look of a reading as a page (Moja branja, My readings, the public
   sample reports). One source for the on-screen modal, the print tab and Cmd+P. The paper is
   either #reportPaper (the modal and the print tab) or .report-sheet (several on one page);
   :is() gives both the specificity of the id, so a page's own rules never override the paper.
   Every colour is written out here on purpose; nothing may come from the dark theme, and the
   look must also hold when the browser does not print backgrounds. */
@page{size:A4;margin:14mm}
:is(#reportPaper,.report-sheet){box-sizing:border-box;background:#f8f3ec;color:#23202b;padding:12mm 12mm 9mm;border:1px solid rgba(127,108,175,.22);font-family:'Lato',-apple-system,'Segoe UI',sans-serif;font-size:16px;font-weight:400;line-height:1.5;text-align:left;text-transform:none;letter-spacing:normal;-webkit-print-color-adjust:exact;print-color-adjust:exact}
:is(#reportPaper,.report-sheet) *{box-sizing:border-box;margin:0;padding:0;text-transform:none;letter-spacing:normal;text-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
:is(#reportPaper,.report-sheet) .rp-head{display:flex;align-items:center;justify-content:space-between;gap:8mm}
:is(#reportPaper,.report-sheet) .rp-brand{display:flex;align-items:center;gap:3.2mm}
:is(#reportPaper,.report-sheet) .rp-mark{display:block;width:9mm;height:9mm;flex:none}
:is(#reportPaper,.report-sheet) .rp-word{font-family:'Playfair Display',Georgia,serif;font-size:4.4mm;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#23202b}
:is(#reportPaper,.report-sheet) .rp-meta{text-align:right;font-size:2.6mm;letter-spacing:.16em;text-transform:uppercase;color:#6d6579;line-height:1.7}
:is(#reportPaper,.report-sheet) .rp-meta span{display:block}
:is(#reportPaper,.report-sheet) .rp-rule{height:0;border-top:1px solid #a98452;border-image:linear-gradient(90deg,#a98452,rgba(127,108,175,.22) 45%,rgba(127,108,175,0)) 1;margin:6mm 0 7mm}
:is(#reportPaper,.report-sheet) .rp-kicker{display:block;text-align:center;font-size:2.5mm;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#5c4b83}
:is(#reportPaper,.report-sheet) .rp-stamp{display:block;width:max-content;max-width:100%;margin:0 auto 3.5mm;padding:1.1mm 4mm;border:.3mm solid #a98452;font-size:2.4mm;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#7a5f38}
:is(#reportPaper,.report-sheet) .report-title{font-family:'Playfair Display',Georgia,serif;font-size:11mm;font-weight:400;line-height:1.15;text-align:center;margin:3.5mm 0 2.5mm;color:#23202b}
:is(#reportPaper,.report-sheet) .report-question{font-family:'Playfair Display',Georgia,serif;font-size:4.6mm;font-style:italic;font-weight:400;line-height:1.5;text-align:center;color:#544b60;max-width:135mm;margin:0 auto 7mm}
:is(#reportPaper,.report-sheet) .report-card-grid{display:flex;justify-content:center;gap:2.4mm;margin:0 0 7mm;break-inside:avoid;page-break-inside:avoid}
:is(#reportPaper,.report-sheet) .report-card-grid:empty{display:none}
:is(#reportPaper,.report-sheet) .report-card{flex:0 0 calc((100% - 14.4mm) / 7);min-width:0;border:0;background:none;text-align:center}
:is(#reportPaper,.report-sheet) .report-card-grid[data-count="1"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="2"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="3"] .report-card{flex-basis:calc((100% - 9.6mm) / 5)}
:is(#reportPaper,.report-sheet) .report-card img{display:block;width:100%;height:auto;aspect-ratio:5 / 8;object-fit:cover;margin:0;border:.2mm solid rgba(127,108,175,.22);border-radius:0;box-shadow:none;background:#efe8dd}
:is(#reportPaper,.report-sheet) .report-card span{display:block;margin-top:1.8mm;font-size:2.1mm;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:#5c4b83}
:is(#reportPaper,.report-sheet) .report-card strong{display:block;margin-top:.6mm;font-family:'Playfair Display',Georgia,serif;font-size:2.9mm;font-weight:500;line-height:1.25;color:#23202b}
:is(#reportPaper,.report-sheet) .report-body{font-family:'Playfair Display',Georgia,serif;font-size:3.9mm;line-height:1.75;color:#2f2a35}
:is(#reportPaper,.report-sheet) .report-body h4{font-family:'Playfair Display',Georgia,serif;font-size:4.6mm;font-weight:600;line-height:1.35;letter-spacing:.01em;color:#5c4b83;margin:5mm 0 1.4mm;break-after:avoid;page-break-after:avoid}
:is(#reportPaper,.report-sheet) .report-body h4:first-child{margin-top:0}
:is(#reportPaper,.report-sheet) .report-body p{margin:0 0 2.6mm;text-align:justify;hyphens:auto;-webkit-hyphens:auto;orphans:3;widows:3;color:#2f2a35}
:is(#reportPaper,.report-sheet) .report-body .report-check{position:relative;padding-left:1.4em;text-align:left;hyphens:manual}
:is(#reportPaper,.report-sheet) .report-body .report-check::before{content:"✔";position:absolute;left:0;color:#5c4b83}
:is(#reportPaper,.report-sheet) .report-body .report-check.off::before{content:"~";color:#8b8496}
:is(#reportPaper,.report-sheet) .report-follow{margin-top:5mm;padding:4mm 5mm;border-left:.5mm solid #a98452;background:rgba(169,132,82,.055)}
:is(#reportPaper,.report-sheet) .report-follow h4{margin:0 0 1.6mm;font-size:4.2mm;color:#7a5f38}
:is(#reportPaper,.report-sheet) .report-follow p{margin:0 0 2.2mm;font-size:3.7mm;line-height:1.7;font-style:normal;color:#2f2a35}
:is(#reportPaper,.report-sheet) .report-follow p:last-child{margin-bottom:0}
:is(#reportPaper,.report-sheet) .report-follow .report-follow-q{font-style:italic;font-size:3.9mm;text-align:left;color:#4c4458}
:is(#reportPaper,.report-sheet) .report-follow .report-follow-label{margin:3.2mm 0 1.2mm;font-family:'Lato',-apple-system,'Segoe UI',sans-serif;font-size:2.4mm;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7a5f38}
:is(#reportPaper,.report-sheet) .rp-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;margin-top:6mm;padding-top:4mm;border-top:1px solid rgba(127,108,175,.22);break-inside:avoid;page-break-inside:avoid;break-before:avoid;page-break-before:avoid}
:is(#reportPaper,.report-sheet) .report-note{max-width:120mm;margin:0;font-size:2.4mm;line-height:1.6;text-align:left;color:#6d6579}
:is(#reportPaper,.report-sheet) .rp-site{font-size:2.5mm;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:#5c4b83}
@media screen and (max-width:860px){
  :is(#reportPaper,.report-sheet){padding:6mm 4.5mm 5mm}
  :is(#reportPaper,.report-sheet) .rp-head{flex-wrap:wrap;gap:3mm}
  :is(#reportPaper,.report-sheet) .rp-mark{width:7mm;height:7mm}
  :is(#reportPaper,.report-sheet) .rp-word{font-size:3.2mm;letter-spacing:.22em}
  :is(#reportPaper,.report-sheet) .rp-meta{font-size:2.1mm;letter-spacing:.12em}
  :is(#reportPaper,.report-sheet) .rp-rule{margin:5mm 0 6mm}
  :is(#reportPaper,.report-sheet) .report-title{font-size:8mm}
  :is(#reportPaper,.report-sheet) .report-question{font-size:3.8mm;margin-bottom:6mm}
  :is(#reportPaper,.report-sheet) .report-card-grid{gap:1.2mm;margin-bottom:6mm}
  :is(#reportPaper,.report-sheet) .report-card{flex-basis:calc((100% - 7.2mm) / 7)}
  :is(#reportPaper,.report-sheet) .report-card-grid[data-count="1"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="2"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="3"] .report-card{flex-basis:calc((100% - 4.8mm) / 5)}
  :is(#reportPaper,.report-sheet) .report-card span{font-size:1.6mm;letter-spacing:.06em}
  :is(#reportPaper,.report-sheet) .report-card strong{font-size:2.3mm}
  :is(#reportPaper,.report-sheet) .report-body{font-size:3.5mm}
  :is(#reportPaper,.report-sheet) .report-body h4{font-size:4.1mm}
  :is(#reportPaper,.report-sheet) .report-body p{hyphens:auto;text-align:left}
  :is(#reportPaper,.report-sheet) .report-follow{padding:3.5mm 3.5mm}
  :is(#reportPaper,.report-sheet) .rp-foot{flex-direction:column;align-items:flex-start;gap:2.5mm;margin-top:7mm}
}
/* Phones (and the narrow modal): the paper takes the width it is given, never its A4 width. Everything is in px/rem
   here on purpose: the mm sizes above are for paper, and 1.6mm lettering is unreadable on a screen. Screen only. */
@media screen and (max-width:760px){
  :is(#reportPaper,.report-sheet){width:100%;max-width:100%;min-width:0;padding:22px 18px 18px;overflow-wrap:break-word;word-wrap:break-word;font-size:15px}
  :is(#reportPaper,.report-sheet) img,:is(#reportPaper,.report-sheet) svg{max-width:100%}
  :is(#reportPaper,.report-sheet) .rp-head{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px}
  :is(#reportPaper,.report-sheet) .rp-brand{gap:10px;min-width:0}
  :is(#reportPaper,.report-sheet) .rp-mark{width:26px;height:26px}
  :is(#reportPaper,.report-sheet) .rp-word{font-size:12px;letter-spacing:.2em}
  :is(#reportPaper,.report-sheet) .rp-meta{font-size:10px;letter-spacing:.1em;line-height:1.6;min-width:0}
  :is(#reportPaper,.report-sheet) .rp-rule{margin:16px 0 20px}
  :is(#reportPaper,.report-sheet) .rp-kicker{font-size:10px;letter-spacing:.2em}
  :is(#reportPaper,.report-sheet) .rp-stamp{font-size:10px;letter-spacing:.2em;padding:4px 12px;margin-bottom:12px}
  :is(#reportPaper,.report-sheet) .report-title{font-size:28px;line-height:1.2;margin:12px 0 10px;overflow-wrap:break-word}
  :is(#reportPaper,.report-sheet) .report-question{font-size:16px;max-width:100%;margin:0 auto 22px}
  :is(#reportPaper,.report-sheet) .report-card-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 6px;margin:0 0 22px}
  :is(#reportPaper,.report-sheet) .report-card{flex:0 0 max(56px,calc((100% - 18px) / 4));min-width:56px}
  :is(#reportPaper,.report-sheet) .report-card-grid[data-count="1"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="2"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="3"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="5"] .report-card,:is(#reportPaper,.report-sheet) .report-card-grid[data-count="6"] .report-card{flex:0 0 max(56px,calc((100% - 12px) / 3))}
  :is(#reportPaper,.report-sheet) .report-card span{margin-top:5px;font-size:9.5px;letter-spacing:.06em;overflow-wrap:anywhere}
  :is(#reportPaper,.report-sheet) .report-card strong{margin-top:2px;font-size:12px;overflow-wrap:anywhere}
  :is(#reportPaper,.report-sheet) .report-body{min-width:0;font-size:15px;line-height:1.7}
  :is(#reportPaper,.report-sheet) .report-body h4{font-size:17px;margin:20px 0 6px}
  :is(#reportPaper,.report-sheet) .report-body p{margin:0 0 10px;text-align:left}
  :is(#reportPaper,.report-sheet) .report-follow{margin-top:18px;padding:14px 14px}
  :is(#reportPaper,.report-sheet) .report-follow h4{font-size:16px}
  :is(#reportPaper,.report-sheet) .report-follow p{font-size:14px}
  :is(#reportPaper,.report-sheet) .report-follow .report-follow-q{font-size:14.5px}
  :is(#reportPaper,.report-sheet) .report-follow .report-follow-label{font-size:10px}
  :is(#reportPaper,.report-sheet) .rp-foot{flex-direction:column;align-items:flex-start;gap:10px;margin-top:22px;padding-top:14px}
  :is(#reportPaper,.report-sheet) .report-note{max-width:100%;font-size:11.5px}
  :is(#reportPaper,.report-sheet) .rp-site{font-size:10px;letter-spacing:.14em;white-space:normal;overflow-wrap:anywhere}
}
@media screen and (max-width:420px){
  :is(#reportPaper,.report-sheet){padding:20px 16px 16px}
  :is(#reportPaper,.report-sheet) .rp-head{flex-direction:column;align-items:flex-start}
  :is(#reportPaper,.report-sheet) .rp-meta{text-align:left}
  :is(#reportPaper,.report-sheet) .rp-word{letter-spacing:.14em}
  :is(#reportPaper,.report-sheet) .report-title{font-size:26px}
  :is(#reportPaper,.report-sheet) .report-question{font-size:15px}
  :is(#reportPaper,.report-sheet) .report-follow{padding:12px}
}
@media print{
  html.report-open,body.report-open{background:#f8f3ec!important;margin:0!important;padding:0!important;height:auto!important;min-height:0!important;overflow:visible!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.report-open>*:not(#reportModal){display:none!important}
  body.report-open #reportModal{position:static!important;display:block!important;inset:auto!important;z-index:auto!important;padding:0!important;overflow:visible!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.report-open #reportModal .modal{position:static!important;display:block!important;width:auto!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;background:none!important;box-shadow:none!important;animation:none!important;transform:none!important;filter:none!important}
  body.report-open #reportModal .modal::before{display:none!important}
  body.report-open #reportModal .modal-actions,body.report-open #reportModal .close{display:none!important}
  #reportPaper{padding:0;border:0;box-shadow:none}
}