/* Quadrant - print / Save-as-PDF stylesheet for the result screen at the
   end of assessment.html.

   WHY THIS FILE EXISTS. Decided 8 Aug 2026. Everyone who finishes the
   assessment sees their own result on the spot, and leaves with a copy
   they keep. There is no build step and no npm in this repo, so "a copy
   they keep" is the browser's own Save as PDF and this stylesheet is what
   makes the page worth saving. No library, no dependency, works in every
   browser that can print, and the file lands on the person's own device
   rather than behind a link that can expire or leak.

   Loaded AFTER /styles/quadrant.css so these rules win on source order
   where specificity ties.

   TWO RULES FOR ANYONE EDITING THIS.

   1. Hide every control, keep every fact. If it can be clicked, typed in
      or navigated, it does not belong on paper. If it is the person's
      name, their result, a number, a label or the date, it stays.

   2. It has to survive greyscale. Most people print in black and white,
      and a D/I/S/C mix bar in four mid-tone colours turns into four
      identical greys. So the coloured segments get distinct hatch
      patterns here, every meter carries its number as text, and the
      DISC mix is repeated as a plain text line (#mixreadout) that does
      not depend on colour at all. Do not delete that line because it
      looks redundant on screen - on screen it is hidden, and on a
      greyscale printout it is the only readable version. */

/* Paper-only blocks: the letterhead, the text mix readout, the footnote. */
.printonly{display:none}

@media print{

  /* The meters, the mix bar and the gap badges ARE the content. Browsers
     drop backgrounds by default, which would print them as empty boxes. */
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}

  @page{margin:14mm}

  html,body{background:#fff !important}
  body{font-size:11.5pt;line-height:1.45}

  /* Everything interactive or navigational.
     #bar is the fixed progress strip, #pdfBtn is the floating save button,
     .mnav-btn is the hamburger that mobile-nav.js injects into the header,
     .nav is the button row, #saveStatus is a live save state that means
     nothing once the page is a document. */
  header,
  footer,
  .sitefooter,
  #bar,
  #pdfBtn,
  .mnav-btn,
  .noprint,
  .nav,
  .hint,
  #saveStatus,
  #ctxLabel{display:none !important}

  .wrap{max-width:100% !important;padding:0 !important}
  .screen{min-height:0 !important;padding:0 !important;display:block !important}

  .printonly{display:block}

  /* Letterhead: brandmark, the person's full name, the date they took it.
     Without these the printed sheet is an anonymous page of numbers. */
  #printhead{
    display:flex;align-items:center;gap:10px;
    margin:0 0 16px;padding-bottom:10px;
    border-bottom:2px solid #211f1a}
  #printhead .who{margin-left:auto;text-align:right;line-height:1.35}

  #mixreadout{
    font-family:'Spline Sans Mono','Courier New',monospace;
    font-size:9pt;letter-spacing:.06em;color:#5b564b;
    margin:0 0 16px}

  #printfoot{
    margin:16px 0 0;padding-top:10px;
    border-top:2px solid #d8cfba;
    font-size:8.5pt;color:#5b564b;break-inside:avoid}

  /* Fit the headline to a page instead of a screen. */
  h1.title{font-size:26pt !important;margin:0 0 8px !important}
  .eyebrow{margin-bottom:10px}
  .lede{font-size:11.5pt;max-width:none;margin:0 0 10px}

  /* The offset drop shadow is a screen device; on paper it is a grey slab
     down two edges of every card. Border stays, shadow goes. */
  .card{
    box-shadow:none !important;
    border:2px solid #211f1a;
    background:#fff !important;
    padding:14px 16px;margin:0 0 14px;
    break-inside:avoid;page-break-inside:avoid}

  .hrow,.meterrow,.legend{break-inside:avoid;page-break-inside:avoid}

  .mix{height:16px;margin:10px 0 6px}
  .legend{font-size:9pt;gap:12px;margin-bottom:6px}
  .legend i{border:1px solid #211f1a}

  /* GREYSCALE. D keeps the solid fill; I, S and C each take a different
     hatch, so the four segments stay distinguishable with no colour at
     all. The same patterns go on the legend swatches so the key still
     matches the bar. data-k is written by renderResults().

     !important is load-bearing here and must not be tidied away. Every one
     of these elements carries an inline `background:` shorthand from
     renderResults, and that shorthand resets background-image to none.
     A normal declaration in this file loses to inline; an important one
     beats it. Drop the !important and the hatches silently stop
     appearing, which is the exact failure this block exists to prevent
     and the one nobody notices until a printout is already in someone's
     hand. */
  .mix span[data-k="I"],
  .legend i[data-k="I"]{
    background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.92) 0 2px,transparent 2px 6px) !important}
  .mix span[data-k="S"],
  .legend i[data-k="S"]{
    background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.45) 0 2px,transparent 2px 6px) !important}
  .mix span[data-k="C"],
  .legend i[data-k="C"]{
    background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.92) 0 1.5px,transparent 1.5px 5px) !important}

  /* Meters: the bar is the picture, .mv is the same value as text, so a
     black-and-white printout loses nothing. */
  .meterbar{border-color:#211f1a}
  .meterbar span{background:#5b564b !important}
  .meterrow .mv{color:#211f1a}
  /* No colour override here: the band sets its own text colour inline,
     because white on the amber band does not hold enough contrast. */
  .meterrow .band{border:1.5px solid #211f1a}
  .mhelp{font-size:9.5pt}

  ul.tags li{border:1.5px solid #211f1a}
  .styleletter{font-size:40pt}

  a{color:#211f1a;text-decoration:underline}
}