/* ---------- Variables ---------- */
:root{
  --ctrl-h: 36px;
  --ctrl-pad-x: 10px;
  --radius: 12px;
  --radius-ctrl: 8px;
  --border: #bbb;
  --border-soft: #ddd;
  --bg: #f6f6f6;
  --text: #111;
  --muted: #555;
  --surface: #ffffff;
  --hover: rgba(17, 24, 39, .06);
  --active: rgba(17, 24, 39, .10);
  --accent: #2b6cb0;
  --accent-hover: rgba(43,108,176,.12);
  --accent-active: rgba(43,108,176,.18);
  --danger-hover: rgba(220, 38, 38, .10);
  --danger-active: rgba(220, 38, 38, .16);
  --btn-bg: #e5e7eb;         
  --btn-hover: #d1d5db;      
  --btn-active: #9ca3af;      
  --btn-text: #111827;
  --btn-primary: #0072bb;       
  --btn-primary-hover: #005f9e;
  --btn-primary-active: #004b7d;
  --btn-primary-text: #ffffff;
  --btn-danger: #dc2626;
  --btn-danger-hover: #b91c1c;
  --btn-danger-active: #991b1b;
  --btn-danger-text: #ffffff;
  --page-bg: #f3f4f6;  
  --card-bg: #f7f7f8;   
  --card-border: rgba(17, 24, 39, .12);
  

  /* ...keep your existing vars... */

  /* NEW / updated neutrals */
  --page-bg: #e9edf2;                 /* darker than your current */
  --card-bg: #f3f5f8;                 /* big section cards */
  --card-border: rgba(17,24,39,.16);
  --card-shadow: 0 1px 0 rgba(17,24,39,.05);

  /* list-card tiles (vitals/meds/procs) */
  --tile-bg: #eef1f5;
  --tile-hover: #e4e9f0;
  --tile-active: #d8e0ea;
  --tile-border: rgba(17,24,39,.18);

  /* focus ring uses your blue */
  --focus-ring: 0 0 0 3px rgba(0,114,187,.22);

  /* make the danger icon more obvious but still "tinted" */
  --danger-tint: rgba(220,38,38,.18);
  --danger-tint-hover: rgba(220,38,38,.26);
  --danger-tint-active: rgba(220,38,38,.34);
  --danger-ink: #9f1239; /* slightly deeper than b91c1c */
  

  /* ...existing... */

  /* Chip theme */
  --chip-bg: rgba(0,114,187,.10);
  --chip-border: rgba(0,114,187,.22);
  --chip-text: #0b3a5a;

  --chip-hover: rgba(0,114,187,.16);
  --chip-active: rgba(0,114,187,.22);

  --chip-x-bg: rgba(0,114,187,.16);
  --chip-x-hover: rgba(0,114,187,.24);
  --chip-x-active: rgba(0,114,187,.32);
  --chip-x-text: #0b3a5a;


}


/* ---------- Page ---------- */
*{ box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

.topbar{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 14px;
}

h1{
  font-size: 18px;
  margin: 0;
}

/* ---------- Buttons ---------- */

.btn{
  height: var(--ctrl-h);
  padding: 0 14px;

  border-radius: 999px; 
  border: 1px solid rgba(17, 24, 39, .16);

  background: #eef0f3;  
  color: var(--btn-text);

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: background-color 120ms ease, transform 80ms ease, border-color 120ms ease;
}

.btn:hover{
  background: #e3e6eb;
  border-color: rgba(17, 24, 39, .22);
}

.btn:active{
  background: #d3d8e0;
  border-color: rgba(17, 24, 39, .28);
  transform: translateY(1px);
}

.btn--primary{
  background: var(--btn-primary);
  border-color: rgba(0,0,0,.08);
  color: var(--btn-primary-text);
}
.btn--primary:hover{ background: var(--btn-primary-hover); }
.btn--primary:active{ background: var(--btn-primary-active); }

/* Primary button */
.btn--primary{
  background: var(--btn-primary);
  color: var(--btn-primary-text);
}
.btn--primary:hover{ background: var(--btn-primary-hover); }
.btn--primary:active{ background: var(--btn-primary-active); }

/* Danger button */
.btn--danger{
  background: var(--btn-danger);
  color: var(--btn-danger-text);
}
.btn--danger:hover{ background: var(--btn-danger-hover); }
.btn--danger:active{ background: var(--btn-danger-active); }

.iconBtn{
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* make the X clearer */
  font-size: 18px;
  font-weight: 800;
  line-height: 1;

  transition: background-color 120ms ease, transform 80ms ease;
}

.iconBtn:hover{ background: var(--hover); }
.iconBtn:active{ background: var(--active); transform: translateY(1px); }

.iconBtn--danger{
  color: #b91c1c;                
  background: rgba(220, 38, 38, .16);
}

.iconBtn--danger:hover{
  background: rgba(220, 38, 38, .22);
}

.iconBtn--danger:active{
  background: rgba(220, 38, 38, .30);
}


/* ---------- Layout ---------- */
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card{
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px;
}

.card h2{
  font-size: 14px;
  margin: 0 0 10px 0;
}

.full{ grid-column: 1 / -1; }

.row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
  align-items: end;
}
.row.row-2{ grid-template-columns: 1fr 1fr; }
.row.row-3{ grid-template-columns: repeat(3, 1fr); }
.row.row-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
.row.row-4.unit{ grid-template-columns: 1fr 1fr 3fr 3fr; }
.row.row-5{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.row.row-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.row.row-2.narrative{ grid-template-columns: 8fr 1fr; }

.field label{
  display:block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 3px;
  color: #444;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 3px;              /* label -> input spacing */
  margin-bottom: 10px;   /* spacing between fields */
}

.row .field{
  margin-bottom: 0;
}

.field label{
  margin-bottom: 0;
}

/* ---------- Form Controls ---------- */
input, select, textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctrl);
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: inherit;
  min-height: var(--ctrl-h);
  padding: 8px var(--ctrl-pad-x);
  line-height: 1.2;
}

input:not([type="checkbox"]):not([type="radio"]),
select{
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
}

textarea{
  min-height: 90px;
  resize: vertical;
  padding: 8px var(--ctrl-pad-x);
}

input[type="date"],
input[type="time"]{
  padding: 8px var(--ctrl-pad-x);
  min-height: var(--ctrl-h);
}

#narrative{
  resize: none;      /* no manual dragging */
  overflow: hidden;  /* hide scrollbars; height is JS-controlled */
}
#assessment{
  resize: none;      /* no manual dragging */
  overflow: hidden;  /* hide scrollbars; height is JS-controlled */
}

/* multi select */

.ms { position: relative; margin-top: 0px; }

.msRow{display:flex;}

.msRowTop{ align-items: start; }



.msInput{
  flex:1;
  height: var(--ctrl-h, 36px);
  padding: 0 var(--ctrl-pad-x, 10px);
  border: 1px solid var(--border, #bbb);
  border-radius: var(--radius-ctrl, 8px);
  background: #fff;
}

.msInput.msLocked{
  background: #f7f7f7;
  cursor: pointer;
}

.msMenu{
  position:absolute;
  left:0;
  right:0;
  top: calc(var(--ctrl-h, 36px) + 0px);
  border: 1px solid var(--border, #bbb);
  background:#fff;
  border-radius: 10px;
  max-height: 360px;
  overflow:auto;
  z-index: 50;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.msItem{
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
}

.msItem.active{
  color: #fff;
  background: #3875d7;
}


.msItem--selected{
  opacity: 0.45;
  cursor: not-allowed;
}
.msItem--selected.active{
  /* just in case active lands here; keep it looking disabled */
  opacity: 0.45;
}


.msChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  margin-right:4px;

  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 6px 7px 6px 10px;

  background: var(--chip-bg);
  color: var(--chip-text);

  font-size: 13px;
  font-weight: 500;

  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.msChip:hover{
  background: var(--chip-hover);
  border-color: rgba(0,114,187,.28);
}

.msChip:active{
  background: var(--chip-active);
  transform: translateY(1px);
}

.msChip button{
  
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;

  background: var(--chip-x-bg);
  color: var(--chip-x-text);

  cursor: pointer;
  
  margin-left: auto;
  
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size: 16px;
  line-height: 1;

  transition: background-color 120ms ease, transform 80ms ease;
}

.msChip button:hover{ background: var(--chip-x-hover); }
.msChip button:active{ background: var(--chip-x-active); transform: translateY(1px); }

  
#etClock{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

#etClock > div{
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 6px 6px;
}

/* ---------- Tables ---------- */
table{
  width: 100%;
  border-collapse: collapse;
}

th, td{
  border: 1px solid var(--border);
  padding: 6px;
  font-size: 13px;
  vertical-align: middle;
}

th{
  background: #fafafa;
  text-align: left;
}

td input, td select{ width: 100%; }

.tiny{
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .row.row-4.unit{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px){
  .row{ grid-template-columns: 1fr; }
  .row.row-3{ grid-template-columns: 1fr; }
  .row.row-4.unit{ grid-template-columns: 1fr; }
}

/* =========================
   PRINT LAYOUT
   ========================= */

/* Hide print view on screen */
#printView{ display: none; }

/* On-screen preview mode */
body.showPrint .app{ display:none !important; }
body.showPrint #printView{ display:block !important; }

/* Print document (screen preview) */
#printView{
  font-family: Helvetica, Arial, Verdana, sans-serif;
  color:#000;
  background: #e5e7eb;
  padding-bottom: 24px;
}

#printView .pcr{
  width: 210mm;
  margin: 12px auto 24px;
}

#printView .pcrPage{
  background:#fff;
  padding: 12mm;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  border-radius: 10px;
  margin-bottom: 14px;
}

#printView .pageBreak{
  margin-top: 14px;
}

#printView .pcrTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 4mm;
}

#printView .pcrTitle{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}
#printView .pcrSub{
  font-size: 10px;
  opacity:.8;
  margin-top: 2px;
}

#printView .pcrMeta{
  font-size: 10px;
  text-align:right;
  line-height: 1.4;
}

#printView .pcrRepeatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 3mm;
}
#printView .pcrRepeatLeft{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
}

#printView .pTable{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
#printView .pTable td,
#printView .pTable th{
  border: 1px solid #000;
  padding: 2.5mm;
  vertical-align: top;
  font-size: 11px;

}
#printView .pTable th{
  font-weight: 700;
}

#printView .exTable{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: none;
}
#printView .exTable td{
  padding: 2px;
  border: none;
  font-size: 11px;
  word-break: break-all;
  overflow-wrap: break-word;
}
#printView .exTable th{
  border: none;
  padding: 1mm;
  vertical-align: top;
  font-size: 11px;
  font-weight: 700;
  background-color: none;
}
#printView .exTable tr:nth-child(odd) {
  background-color: #dddddd;
}

#printView .exTable tbody tr:first-child {
  border-top: 1px solid #aaaaaa; 
}
#printView .exTableTitle{
  font-size: 11px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.1;
}

#printView .pSectionTitle{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 2mm 0 1.5mm;
}

#printView .plabel{
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 1.5mm;
}
#printView .pval{
  font-size: 11px;
  min-height: 4mm;
}

#printView .sigBlock{
  border: 1px solid #000;
  padding: 2.5mm;
  margin-bottom: 3mm;
}
#printView .sigGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
  margin-top: 2mm;
}
#printView .sigImg{
  width: 100%;
  height: 32mm;
  border: 1px solid #000;
  object-fit: contain;
  background: #fff;
}
#printView .sigImgEmpty{
  width: 100%;
  height: 32mm;
  border: 1px solid #000;
}


/* Preview toolbar (not printed) */
.printToolbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  padding: 12px 18px;
  background: rgba(243,244,246,.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(17,24,39,.12);
}

.noPrint{ }


@page{ size: A4; margin: 12mm; }

@media print{
  /* Hide the app UI, show print view */
  .app{ display: none !important; }
  #printView{ display: block !important; }

  /* Anything marked noPrint should not appear */
  .noPrint,
  .printToolbar{ display:none !important; }

  /* Ensure backgrounds/shading can print (browser setting still needs "Background graphics") */
  *{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Remove the on-screen "fake paper" look in actual print */
  #printView{
    background: #fff !important;
    padding: 0 !important;
  }

  /* Match your intended printable width (A4 minus 12mm margins each side) */
  #printView .pcr{
    width: 186mm;
    margin: 0;
  }

  /* No shadow/rounded corners/padding in print */
  #printView .pcrPage{
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }

  /* Force manual page breaks when you include .pageBreak markers */
  #printView .pageBreak{
    break-before: page;
    page-break-before: always;
  }

  /* Table + typography rules you already had, scoped to print */
  #printView .pcr h1{
    font-size: 16px;
    text-align: center;
    margin: 0 0 6mm 0;
    letter-spacing: .5px;
  }

  #printView .pcr table{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
  }



  #printView .plabel{
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 1.5mm;
  }

  #printView .pval{
    font-size: 11px;
    min-height: 4mm;
  }

  /* Keep table rows from splitting */
  #printView tr, 
  #printView td, 
  #printView th{
    break-inside: avoid;
    page-break-inside: avoid;
  }
}


/* PUT ALL TEST CSS ITEMS BELOW */


/* ===== Card list ===== */
.cardsList{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.cardItem{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.cardItem__main{
  display:flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cardItem__title{
  font-size: 14px;
  font-weight: 700;
}

.cardItem__sub{
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 900px;
}

.cardItem__actions{
  display:flex;
  gap: 6px;
  flex-shrink: 0;
  cursor: default;
}

/* ===== Modal ===== */
.cardModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.cardModal[aria-hidden="false"]{
  display: block;
}

.cardModal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.cardModal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.cardModal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.cardModal__header h3{
  margin: 0;
  font-size: 20px;
}

.cardModal__body{
  padding: 12px;
}

.cardModal__footer{
  display:flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-soft);
}


/* TEST TEST TEST */



/* ===== Card list items (Vitals / Meds / Procs cards) ===== */

.cardItem{
  border: 1px solid rgba(17,24,39,.18);
  border-radius: 12px;
  padding: 10px 12px;

  background: #f3f4f6;                 /* << grey tile */
  box-shadow: 0 1px 0 rgba(17,24,39,.05);

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  cursor: pointer;

  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.cardItem:hover{
  background: #e9edf2;                 /* hover darken */
  border-color: rgba(17,24,39,.24);
}

.cardItem:active{
  background: #dde3ea;                 /* pressed */
  border-color: rgba(17,24,39,.28);
  transform: translateY(1px);
}

.cardItem__title{
  font-size: 14px;
  font-weight: 700;
}

.cardItem__sub{
  font-size: 13px;                   
  color: var(--muted);
}

.cardItem{
  position: relative;
  padding-left: 16px;                  /* room for stripe */
}

.cardItem::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: rgba(0,114,187,.45);      /* neutral stripe */
}

.cardItem--vitals::before{
  background: rgba(0,114,187,.45);     /* blue stripe, muted */
}


  /* mewo */

  .conditional.is-hidden{
  display: none !important;
}





/* Floating dropdown (escapes modal clipping + can flip) */
.msMenu.msMenu--float{
  position: fixed;
  left: 0;
  right: auto;     /* we'll set width explicitly */
  top: 0;
  bottom: auto;
  z-index: 3000;   /* above your modal (modal is 999) */
}




  
  /* ===== Signature Pad ===== */
.sigWrap{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 10px;
}

.sigTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}

.sigHint{ color: var(--muted); font-size: 12px; }

.sigBadge{ display:none !important; }


.sigBox{
  border: 1px dashed var(--border-soft);
  border-radius: 10px;
  background: #fafafa;
  overflow:hidden;
}

.sigBtns{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.sigClear{
  margin: 0 !important;
}

  
.sigCanvas{
  display:block;
  width: 100%;
  height: 180px;
  touch-action: none; /* IMPORTANT: enables drawing on touch without scrolling */
  cursor: crosshair;
}

.sigImg{
  display:none;
  width: 100%;
  height: auto;
}

/* Print: show the image (saved signature), hide the interactive canvas/buttons */

/* FUCK OFF */

/* ===== ImageTrend-ish: INCIDENT SECTION ONLY ===== */

/* ========= INCIDENT (Word/ImageTrend-like, symmetrical) ========= */

.exSection{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #111;
}

/* header bar */
.exBar{
  background:#0065a8;
  color:#fff;
  font-weight:700;
  text-align:center;
  padding:1px 0;
  margin:10px 0 8px;
  font-size:11px;
}

/* all rows stacked */
.exRows{
  width: 100%;
}

/* one full-width row that contains both halves */
.exLine{
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  /*border-top: 1px solid #111;*/
}
.exLine:first-child{ border-top: none; }

.exLineFull {
  display: block;   /* not grid 50/50 */
}

.exLineFull .exHalf {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
}

/* center divider pinned to the true middle */
/*.exLine::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:1px;
  background:#111;
}*/

/* each half: label/value columns */
.exHalf{
  padding: 2px 10px;                /* SAME both sides */
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr); /* LOCK widths */
  column-gap: 4px;
  align-items: start;
  min-width: 0;
}

/* label */
.exLabel{
  font-weight: 700;
  text-align: right;
  white-space: normal;
  line-height: 1.1;
}
.exLabel::after{ content: ":"; }

/* value */
.exValue{
  min-width: 0;
  overflow-wrap: anywhere;          /* prevents overflow changing widths */
  line-height: 1.2;
}


/* ===== Print header: tight, centered title, badge left, agency right ===== */
#printView .pcrTop.pcrTop--tri{
  position: relative;
  min-height: 20mm;      /* header height */
  margin-bottom: 2mm;    /* space before first section bar */
}

/* LEFT: badge */
#printView .pcrHeadLeft{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
}

#printView .pcrLogo{
  max-height: 20mm;
  max-width: 37mm;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
}

/* RIGHT: agency + optional meta */
#printView .pcrHeadRight{
  position: absolute;
  right: 0;
  top: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#printView .pcrAgency{
  font-size: 10px;
  line-height: 1.25;
}

/* If still have PCR/Generated lines inside the right block */
#printView .pcrMeta.pcrMeta--stack{
  font-size: 10px;
  line-height: 1.35;
  margin-top: 2mm;
}

#printView .pcrHeadCenter{
  position: absolute;
  left: 50%;
  top: 12mm;              /* move this up/down to match reference */
  transform: translateX(-50%);
  text-align: center;
  width: 60%;
  font-weight: 500;
}

/* Subtitle styling */
#printView .pcrSub--center{
  margin-top: 1mm;
  font-size: 10px;
}