/* The printables (dashboard job 4): James's printed world on paper, not the dashboard's theme (look review 3(c),
   look sheet section 5). A4 portrait, 12mm margins, prints well in black and white, Cinzel titles, Segoe body,
   numbers large and tabular, the per-table accent colour, the six-step heatmap scale (look review 3(a)). */

/* ---- the print view over the dashboard (screen) ---- */
.pv{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:auto;display:flex;flex-direction:column}
.pv-bar{position:sticky;top:0;z-index:2;background:var(--card);border-bottom:1px solid var(--rule);padding:10px 16px;display:flex;flex-direction:column;gap:8px}
.pv-bar-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pv-h{font-size:18px;margin:0;color:var(--ink)}
.pv-btns{gap:8px;align-items:center;flex-wrap:wrap}
.pv-switch,.pv-check{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.pv-switch input,.pv-check input{width:20px;height:20px;accent-color:var(--accent)}
.pv-opts{gap:10px 18px;align-items:center;flex-wrap:wrap;justify-content:flex-start}
.pv-note{margin:0;font-size:13.5px;color:var(--dim)}
.pv-note:empty{display:none}
.pv-pick{font-size:14px;color:var(--ink)}
.pv-pick summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.pv-pick form{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.pv-pick fieldset{border:1px solid var(--rule);border-radius:10px;padding:6px 10px;margin:0}
.pv-pick legend{font-weight:700;font-size:13px;padding:0 4px}
.pv-picks{display:flex;flex-wrap:wrap;gap:4px 14px}
.pv-picks label{display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer}
.pv-pages{padding:20px 16px 60px;display:flex;flex-direction:column;align-items:center;gap:20px}
.pv-pages .state{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:20px;max-width:560px;color:var(--ink)}
.pv-pages .state p{margin:0 0 8px}
body.pv-open{overflow:hidden}

/* ---- one A4 page ---- */
.pv-page{--acc:#9a6a24;page:pv;width:210mm;height:297mm;padding:12mm;background:#fff;color:#1e2433;box-shadow:0 10px 30px -18px rgba(0,0,0,.45);
  display:flex;flex-direction:column;overflow:hidden;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums;flex:none}
.pv-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pv-foot{flex:none;font-size:9pt;color:#4a5275;text-align:center;padding-top:3mm;border-top:1px solid #dde1ea;margin-top:3mm}
.pv-foot-extra{display:block;font-weight:700;color:#1e2433;margin-bottom:1mm}
.acc-2{--acc:#2f7d4a}.acc-3{--acc:#5a7a2e}.acc-4{--acc:#5b3aa0}.acc-5{--acc:#9a6412}.acc-6{--acc:#2d63c8}.acc-7{--acc:#b0781e}
.acc-8{--acc:#b5412c}.acc-9{--acc:#1f6f8b}.acc-10{--acc:#8a6d1f}.acc-11{--acc:#3a7d44}.acc-12{--acc:#4b2a8a}
.pv-page b{font-weight:700}
.pv-kicker{margin:0;font-size:10pt;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--acc)}
.pv-title{font-family:"Cinzel",Georgia,serif;font-size:26pt;font-weight:700;margin:2px 0 0;line-height:1.1;color:#1e2433}
.pv-title.sm{font-size:18pt}
.pv-sub{margin:2px 0 0;font-size:10.5pt;color:#4a5275}
.pv-rhead{border-bottom:3px solid var(--acc);padding-bottom:3mm;margin-bottom:3mm}
.pv-sec{font-family:"Cinzel",Georgia,serif;font-size:12.5pt;font-weight:700;color:#1e2433;margin:4mm 0 1.5mm;letter-spacing:.02em}
.pv-small{font-size:9.5pt;color:#4a5275;margin:0 0 2mm}
.pv-p{font-size:11pt;margin:0}
.pv-tips{margin:0;padding-left:18px;font-size:11pt}
.pv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
.pv-tile{border:1.5px solid #c9cedb;border-radius:8px;padding:3mm;text-align:center;display:flex;flex-direction:column}
.pv-tile b{font-size:20pt;line-height:1.1}
.pv-tile span{font-size:9pt;color:#4a5275}
.pv-strip{display:grid;grid-template-columns:repeat(11,1fr);gap:1.5mm}
.pv-sc{border-radius:6px;padding:1.5mm 1mm;text-align:center;display:flex;flex-direction:column;font-size:8pt;line-height:1.25}
.pv-sc b{font-size:11pt}
.pv-table{width:100%;border-collapse:collapse;font-size:10.5pt}
.pv-table th{text-align:left;font-size:9pt;text-transform:uppercase;letter-spacing:.04em;color:#4a5275;border-bottom:1.5px solid #1e2433;padding:1.5mm 2mm}
.pv-table td{border-bottom:1px solid #dde1ea;padding:1.6mm 2mm}

/* the six-step scale, on paper (look review 3(a)): never the dashboard's dark colours */
/* the six steps on paper: always the light colours, dark #151c3c figures, white on Mastered #17834a (P37) */
.pv-page .step-notseen,.hm-print .step-notseen,.hm-printed .hm-key .step-notseen{background:#eef0fa;color:#151c3c;outline:1px dashed #9aa3c0;outline-offset:-1px}
.pv-page .step-seen,.hm-print .step-seen,.hm-printed .hm-key .step-seen{background:#fbe3b5;color:#151c3c}
.pv-page .step-learning,.hm-print .step-learning,.hm-printed .hm-key .step-learning{background:#f5c56a;color:#151c3c}
.pv-page .step-familiar,.hm-print .step-familiar,.hm-printed .hm-key .step-familiar{background:#d9ec9b;color:#151c3c}
.pv-page .step-confident,.hm-print .step-confident,.hm-printed .hm-key .step-confident{background:#8fd9a8;color:#151c3c}
.pv-page .step-mastered,.hm-print .step-mastered,.hm-printed .hm-key .step-mastered{background:#17834a;color:#fff}
/* printed heat maps (P37): the counts and ticks as on screen, 12px figures, cells about 9mm */
.pv-page .hm-wrap,.pv .jp .hm-wrap{overflow:visible}
.hm-print{width:128mm;table-layout:fixed;border-spacing:.8mm}
.hm-print th{font-size:8pt;color:#4a5275;width:6mm;height:5mm}
.hm-print .hm-c{min-width:0;height:8.4mm;font-size:9pt;border-radius:2px}
.hm-print .hm-tick{width:4.2mm;height:4.2mm}
.pv-page .hm-key,.pv .jp .hm-key{justify-content:center;font-size:8pt;color:#4a5275;margin-top:2mm}
.pv-page .hm-key i,.pv .jp .hm-key i{width:3mm;height:3mm}
.pv-page .hm-note,.pv .jp .hm-note{text-align:center;font-size:8pt;color:#4a5275;margin-top:1.5mm}
.pv-coverpage .hm-print,.pv .jp .hm-print{width:100%;max-width:128mm}
.pv .jp .hm-print .hm-c{height:8.8mm}
.pv-legend{display:flex;gap:3mm;flex-wrap:wrap;justify-content:center;margin-top:2mm;font-size:8.5pt;color:#4a5275}
.pv-legend span{display:inline-flex;align-items:center;gap:1.5mm}
.pv-legend i{width:3mm;height:3mm;border-radius:1mm;display:inline-block}

/* worksheets (James's worksheet.html) */
.pv-hero{display:grid;grid-template-columns:44mm 1fr 70mm;gap:5mm;align-items:start;padding-bottom:4mm;border-bottom:1.5px dashed #c9b48a;margin-bottom:2mm}
.pv-frame{width:44mm;height:44mm;border-radius:50%;overflow:hidden;border:4px solid var(--acc);background:#f1ece2;display:flex;align-items:center;justify-content:center}
.pv-frame.big{width:38mm;height:38mm;flex:none}
.pv-frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pv-group{width:60%;height:60%;border-radius:50%;background:radial-gradient(circle at 35% 40%,#8a6bd0 0 22%,transparent 23%),radial-gradient(circle at 65% 40%,#5b3aa0 0 22%,transparent 23%)}
.pv-hero-name{font-family:"Cinzel",Georgia,serif;font-size:18pt;font-weight:700;margin:2mm 0 0}
.pv-hero-class{font-size:11pt;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--acc);margin:1mm 0}
.pv-str{background:#eff7f0;border:1.5px solid #bfdcc4;border-radius:10px;padding:3mm 4mm;font-size:10pt}
.pv-str-h{margin:0 0 1.5mm;font-weight:800;text-transform:uppercase;font-size:9.5pt;letter-spacing:.05em}
.pv-str-list{margin:0;padding-left:16px}
.pv-quest{background:#f6f1f4;border:1.5px solid #d9cfd6;border-radius:10px;padding:3mm 4mm;font-weight:700;font-size:12pt;margin-bottom:4mm}
.pv-name{display:flex;gap:6mm;flex-wrap:wrap;font-size:10.5pt;color:#4a5275;margin:0 0 3mm}
.pv-name span{border-bottom:1px solid #b9bfcc;padding-bottom:1mm;min-width:45mm;display:inline-block}
.pv-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:1mm 10mm}
.pv-agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2mm 6mm;font-size:11pt;margin-top:3mm}
.pv-agrid b,.pv-ans b{color:var(--acc)}

/* questions and sheet packs (James's pack.html) */
.pv-q{display:flex;align-items:baseline;gap:1.5mm;font-size:13pt;border-bottom:1px solid #dde1ea;padding:1.2mm .5mm;white-space:nowrap}
.pv-q .n{color:#6b7a90;font-size:8.5pt;min-width:5mm}
.pv-q .blank,.pv-family .blank{border-bottom:1.5px solid #1e2433;min-width:12mm;display:inline-block;height:5mm}
.pv-q .box{display:inline-block;width:8mm;height:6.5mm;border:1.5px solid #1e2433;border-radius:3px;vertical-align:middle}
.pv-shead{display:flex;align-items:center;gap:3mm;border-bottom:3px solid var(--acc);padding-bottom:2.5mm;margin-bottom:3mm}
.pv-chip{width:13mm;height:13mm;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--acc);background:#eef0f4}
.pv-chip img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pv-who{flex:1;min-width:0}
.pv-stitle{font-family:"Cinzel",Georgia,serif;font-size:16pt;font-weight:700;margin:.5mm 0 0}
.pv-meet{display:grid;grid-template-columns:48mm 1fr;gap:5mm;align-items:start}
.pv-portrait{width:48mm;height:58mm;border-radius:10px;overflow:hidden;background:#eef0f4;display:flex;align-items:flex-end;justify-content:center}
.pv-portrait img{max-width:100%;max-height:100%;object-fit:contain}
.pv-portrait.dual img{max-width:50%}
.pv-bubble{background:#fbf7e6;border:2px solid var(--acc);border-radius:12px;padding:3mm;font-size:12pt;font-weight:700;line-height:1.35}
.pv-bubble small{display:block;font-size:8.5pt;text-transform:uppercase;letter-spacing:.05em;color:var(--acc);margin-bottom:1mm}
.pv-pic{display:flex;align-items:center;gap:2.5mm;flex-wrap:wrap;margin:1.5mm 0 1mm}
.pv-grp{border:2px dashed var(--acc);border-radius:6px;padding:1.2mm 1.5mm;display:grid;gap:1mm}
.pv-grp i{width:2.8mm;height:2.8mm;border-radius:50%;background:var(--acc);display:block}
.pv-grp.heap{border-style:solid}
.cols-1{grid-template-columns:repeat(1,2.8mm)}.cols-2{grid-template-columns:repeat(2,2.8mm)}.cols-3{grid-template-columns:repeat(3,2.8mm)}
.cols-4{grid-template-columns:repeat(4,2.8mm)}.cols-5{grid-template-columns:repeat(5,2.8mm)}.cols-6{grid-template-columns:repeat(6,2.8mm)}
.cols-7{grid-template-columns:repeat(7,2.8mm)}.cols-8{grid-template-columns:repeat(8,2.8mm)}.cols-9{grid-template-columns:repeat(9,2.8mm)}
.cols-10{grid-template-columns:repeat(10,2.8mm)}.cols-11{grid-template-columns:repeat(11,2.8mm)}.cols-12{grid-template-columns:repeat(12,2.8mm)}
.pv-pic .eq{font-size:14pt;font-weight:800;margin-left:1.5mm}
.pv-pic .arrow{font-size:15pt;color:#6b7a90}
.pv-count{display:flex;gap:1mm;flex-wrap:wrap;margin:1.5mm 0 1mm}
.pv-count span{width:8.5mm;height:8mm;border:1.5px solid #1e2433;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10.5pt;font-weight:700}
.pv-count span.blank{color:transparent}
.pv-cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 7mm}
.pv-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 5mm}
.pv-cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 4mm}
.pv-cols4 .pv-q{font-size:12pt}
.pv-worked{font-size:10.5pt;margin:0 0 1mm;padding-left:5mm}
.pv-worked b{color:var(--acc)}
.pv-sessions{display:grid;grid-template-columns:1fr 1fr;gap:3mm}
.pv-session{border:1.5px solid #dde1ea;border-radius:8px;padding:2mm 2.5mm}
.pv-session h3{font-size:9.5pt;margin:0 0 1mm;display:flex;justify-content:space-between;color:var(--acc);text-transform:uppercase;letter-spacing:.04em}
.pv-session h3 span{color:#6b7a90;font-weight:600;text-transform:none;letter-spacing:0}
.pv-session .pv-q{font-size:11pt;padding:0;line-height:1.3}
.pv-session .pv-q .blank{height:4mm;min-width:10mm}
.pv-q.weak .n::after{content:"\2605";color:var(--acc);font-size:7pt;margin-left:.5mm}
.pv-families{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5mm;margin-bottom:1.5mm}
.pv-family{border:1.5px solid var(--acc);border-radius:8px;padding:2mm 2.5mm;font-size:12pt;font-weight:600}
.pv-family div{padding:.8mm 0;white-space:nowrap}
.pv-family .div{color:#2d63c8}
.pv-ans{display:grid;grid-template-columns:repeat(5,1fr);gap:.3mm 2.5mm;font-size:8.5pt;margin-bottom:1mm}
.pv-ans.wide{grid-template-columns:1fr 1fr}
.pv-ans-h{font-size:8.5pt;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:1.2mm 0 .3mm}
.pv-anspage .pv-sec{margin:2mm 0 .8mm;font-size:10.5pt}
.pv-cert{flex:1;border:10px double var(--acc);border-radius:6px;padding:10mm 8mm;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3mm}
.pv-cert .c-kicker{font-size:10pt;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);font-weight:800}
.pv-cert .c-title{font-family:"Cinzel",Georgia,serif;font-size:30pt;font-weight:700;margin:0;line-height:1.05}
.pv-cert .c-portrait{width:58mm;height:64mm;display:flex;align-items:flex-end;justify-content:center}
.pv-cert .c-portrait img{max-width:100%;max-height:100%;object-fit:contain}
.pv-cert .c-line{font-size:12pt;color:#4a5275}
.pv-cert .c-name{border-bottom:2px solid #1e2433;min-width:95mm;height:12mm}
.pv-cert .c-table{font-family:"Cinzel",Georgia,serif;font-size:19pt;font-weight:700;color:var(--acc)}
.pv-cert .c-secret{font-size:11.5pt;font-style:italic;max-width:120mm}
.pv-cert .c-sign{display:flex;gap:12mm;margin-top:7mm;font-size:10pt;color:#4a5275}
.pv-cert .c-sign span{border-top:1.5px solid #1e2433;padding-top:1mm;min-width:45mm}
.pv-cover{display:flex;gap:5mm;align-items:flex-start;margin-bottom:2mm}
.pv-cover-info{flex:1;min-width:0}
.pv-why{margin:0;padding:0;list-style:none}
.pv-why li{border:1.5px solid #dde1ea;border-radius:8px;padding:2mm 3mm;margin-bottom:1.5mm;font-size:10.5pt;display:flex;gap:3mm;align-items:baseline}
.pv-why b.t{font-size:14pt;color:var(--acc);min-width:11mm}
.pv-why .stage{font-weight:700}
.pv-why .facts{color:#4a5275;font-size:9.5pt}
.pv-contents{font-size:10.5pt;margin:0;padding-left:5mm}

.pv-coverpage .pv-why li{padding:1.5mm 2.5mm;margin-bottom:1mm}
.pv-coverpage .pv-sec{margin-top:3mm}

/* ---- Ink saver: portraits and frames drop to outlines ---- */
.pv.ink .pv-page img{visibility:hidden}
.pv.ink .pv-frame,.pv.ink .pv-chip,.pv.ink .pv-portrait,.pv.ink .pv-cert .c-portrait{border:1.5px solid #1e2433;background:none}
.pv.ink .pv-cert .c-portrait{border-radius:8px}
.pv.ink .pv-group{background:none}
.pv.ink .pv-cert{border:1.5px solid #1e2433}
.pv.ink .pv-shead,.pv.ink .pv-rhead{border-bottom-width:1.5px}
.pv.ink .pv-bubble,.pv.ink .pv-str,.pv.ink .pv-quest{background:none;border-width:1px}
/* Ink saver heat maps (P37): the colours go; the numbers, the ticks and the key's words carry the meaning */
.pv.ink .hm-print .hm-c{background:none;color:#151c3c;outline:1px solid #9aa3c0;outline-offset:-1px}
.pv.ink .hm-printed .hm-key i{background:none;outline:1px solid #9aa3c0;outline-offset:-1px}

/* ---- phones: the pages shrink to fit; nothing scrolls sideways ---- */
@media screen and (max-width:860px){
  .pv-pages{padding:12px 8px 40px;gap:12px}
  .pv-page{zoom:.46}
}
@media screen and (min-width:861px) and (max-width:1100px){ .pv-page{zoom:.8} }

/* ---- James's newer sheet packs, Ring of Twelve, certificates and display pack (dashboard job 5) ----
   His own styles are in css/james-packs.css (generated, scoped to .jp-pack / .jp-display); these are the 2.0 page
   rules on top: one .sheet = one A4 page with 12mm margins, the footer at its foot. */
.pv .jp{display:flex;flex-direction:column;align-items:center;gap:20px;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;color:#1e2433}
.pv .jp .sheet{width:210mm;height:297mm;min-height:0;padding:12mm;margin:0;border:0;border-radius:0;background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.45);
  display:flex;flex-direction:column;overflow:hidden;flex:none;font-variant-numeric:tabular-nums}
.pv .jp .sheet>.pv-foot{margin-top:auto}
.pv .jp .jp-fit{flex:none;min-width:0}
.pv .jp .sheet-title,.pv .jp .tc-title,.pv .jp .cover-info h1{font-family:"Cinzel",Georgia,serif}
.pv .jp .ink-frame{display:none}
.pv .jp-preview{gap:0}
.pv .jp-preview .sheet{box-shadow:none}
/* Ink saver: portraits, covers and the certificate frames drop to outlines (colouring pages and ring frames are
   already line art, so they stay) */
.pv.ink .jp .chip img,.pv.ink .jp .portrait img,.pv.ink .jp .tc-art img,.pv.ink .jp .hero-portrait img,.pv.ink .jp .c-portrait img,
.pv.ink .jp .peek,.pv.ink .jp .poster .pic img,.pv.ink .jp .fcard .band img,.pv.ink .jp .plinth img,.pv.ink .jp .cut img,.pv.ink .jp .medal img{visibility:hidden}
.pv.ink .jp .chip,.pv.ink .jp .portrait,.pv.ink .jp .tc-art,.pv.ink .jp .hero-portrait,.pv.ink .jp .c-portrait{border:1.5px solid #1e2433;background:none}
.pv.ink .jp .frame-art,.pv.ink .jp .face-art,.pv.ink .jp-display svg image{display:none}
.pv.ink .jp .ink-frame{display:inline}
.pv.ink .jp .tcover,.pv.ink .jp .cert{border:1.5px solid #1e2433}
.pv.ink .jp .bubble{background:none}
@media screen and (max-width:860px){ .pv .jp .sheet{zoom:.46} }
@media screen and (min-width:861px) and (max-width:1100px){ .pv .jp .sheet{zoom:.8} }

/* ---- printing: only the pages, each on its own A4 sheet with 12mm margins ---- */
@page pv{size:A4 portrait;margin:12mm}
@media print{
  body.pv-open>*:not(#print-view){display:none!important}
  body.pv-open{background:#fff;overflow:visible}
  .pv{position:static;overflow:visible;background:#fff;display:block}
  .pv .no-print{display:none!important}
  .pv-pages{padding:0;display:block}
  .pv-page{width:auto;height:273mm;padding:0;box-shadow:none;zoom:1;break-after:page;page-break-after:always}
  .pv-page:last-child{break-after:auto;page-break-after:auto}
  .pv .jp{display:block}
  .pv .jp .sheet{page:pv;width:auto;height:273mm;padding:0;box-shadow:none;zoom:1;break-after:page;page-break-after:always}
  .pv .jp .sheet:last-child{break-after:auto;page-break-after:auto}
  .pv .jp,.pv .jp *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}