/* TomHow visual system, batch 4 components (guides, method, compare, notes, tools, forms, legal, sample report), 19 October 2026.
   Extends visual-system.css, visual-pages.css, visual-surfaces.css and visual-b3.css with the Design OS tokens already on :root. No new colours.
   Every selector is scoped under .vx and prefixed vx- so it cannot collide with existing page styles.
   Spacing for p, ul and ol is written as ".vx p.vx-name" because the shared reset (.vx p, .vx ul, .vx ol) outranks a bare class. */

/* Illustration strokes used by the batch 4 builders */
.vx-v-mute-line{fill:none;stroke:var(--ecru);stroke-width:1}
.vx-v-stroke-fill{fill:var(--smoke)}
/* Hero sketches fill their panel, so the default label size is set for that width; labels with their own size keep it */
.vx-events .vx-events-svg .vx-v-txt{font-size:10px}
@media (max-width:640px){.vx .vx-events{padding:var(--space-4)}}

/* Eight-tab strip (the three to seven tab strips already exist) */
@media (min-width:1061px){
  .vx-tx-tabs.vx-tx-8{grid-template-columns:repeat(8,minmax(0,1fr))}
  .vx-tx-8 button{padding:var(--space-4) var(--space-3)}
}

/* Interactive tick list: ticks live only in the page, nothing is stored or sent */
.vx-chk{border:1px solid var(--ecru);background:var(--bone);margin:0}
.vx-chk-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--ecru);flex-wrap:wrap}
.vx ul.vx-chk-list{background:var(--paper)}
.vx-chk-list li+li{border-top:1px solid var(--ecru)}
.vx-chk-list label{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--space-4);align-items:center;padding:16px var(--space-5);cursor:pointer;font-size:var(--text-md);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.vx-chk-list input{position:absolute;left:var(--space-5);top:50%;width:20px;height:20px;margin:-10px 0 0;opacity:0;cursor:pointer}
.vx-chk-box{width:20px;height:20px;border:1.5px solid var(--smoke);background:var(--paper);display:block;position:relative;transition:background .2s,border-color .2s}
.vx-chk-list label:hover .vx-chk-box{border-color:var(--coal)}
.vx-chk-list input:checked+.vx-chk-box{background:var(--citation);border-color:var(--citation)}
.vx-chk-list input:checked+.vx-chk-box::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.vx-chk-list input:focus-visible+.vx-chk-box{outline:2px solid var(--citation);outline-offset:2px}
.vx-chk-t{display:block}
.vx-chk-cap{display:block;padding:var(--space-3) var(--space-5);border-top:1px solid var(--ecru);font-size:10px}

/* Terms: a row of named terms with a one-line meaning */
.vx ul.vx-terms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--coal)}
.vx-terms li{padding:var(--space-4) var(--space-4) var(--space-4) 0;border-bottom:1px solid var(--ecru)}
.vx-terms b{display:block;font-size:var(--text-lg);font-weight:500;letter-spacing:-.01em;line-height:1.25;margin-bottom:4px}
.vx-terms span{display:block;color:var(--smoke);font-size:14px;line-height:1.45}

/* Section split: heading left, figure right; and room under a page head */
.vx-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8);align-items:start}
.vx-split h2{margin-bottom:var(--space-4)}
.vx-b4 .vx-ph+.vx-section{padding-top:var(--space-8)}

/* Guide pages */
.vx-guide4 .vx-fan{max-width:440px}
.vx-guide4 .vx-panel-vis svg{max-width:420px}
.vx-guide4 .vx-guide-links{margin-top:var(--space-4)}
.vx-guide4 .vx-tx-tabs button{align-content:start}

/* Notes: the direct answer card, the note diagram */
.vx-ans-card{background:var(--bone);border:1px solid var(--ecru);border-top:3px solid var(--citation);padding:var(--space-6)}
.vx-ans-card h2{font-size:var(--text-2xl);letter-spacing:-.02em;line-height:1.15;margin:var(--space-2) 0 var(--space-4)}
.vx-ans-card>p:last-child{font-size:16px;line-height:1.6}
.vx-note-fig{margin:0;border:1px solid var(--ecru);background:var(--paper)}
.vx-note-img img{display:block;width:100%;height:auto}
.vx-note-cap{display:block;padding:var(--space-3) var(--space-5);border-top:1px solid var(--ecru);font-size:11px;line-height:1.6;text-transform:none;letter-spacing:.02em}
.vx-note-cap b{color:var(--coal);font-weight:500}
.vx-note-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}

/* Form pages: the original form block sits in a plain host so its own styles keep working */
.vx-form-host{max-width:calc(var(--container-max) + var(--container-pad) * 2);padding-top:0;padding-bottom:var(--space-6)}
.vx-form-host *{border-radius:0!important}
.vx-form-host-draft{padding-bottom:var(--space-8)}
.vx-b4 .vx-form-host .enquiry,.vx-b4 .vx-form-host .qualification,.vx-b4 .vx-form-host .intake,.vx-b4 .vx-form-host .booking{margin-top:0}
.vx-b4 .vx-ph+.vx-form-host{padding-top:0}
.vx p.vx-after-p{max-width:62ch;color:var(--smoke);font-size:var(--text-md);line-height:1.6}
.vx p.vx-after-p a{color:var(--coal);border-bottom:1px solid var(--citation)}
.vx-tool4 .vx-tool-host{max-width:calc(var(--container-max) + var(--container-pad) * 2);margin:0 auto;padding:0 var(--container-pad) var(--space-9)}
.vx-tool4 .vx-tool-host .container{padding-left:0;padding-right:0;max-width:none}

/* Sample report viewer */
.vx-gal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:var(--space-6);align-items:start}
.vx-gal-main{margin:0;border:1px solid var(--ecru);background:var(--bone);box-shadow:0 30px 60px -30px rgba(10,10,11,.28)}
.vx-gal-frame img{display:block;width:100%;height:auto}
.vx-gal-cap{display:block;padding:var(--space-3) var(--space-4);border-top:1px solid var(--ecru)}
.vx ul.vx-gal-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.vx-gal-t{position:relative;display:block;width:100%;padding:0;border:1px solid var(--ecru);background:var(--bone);cursor:pointer}
.vx-gal-t img{display:block;width:100%;height:auto}
.vx-gal-t .vx-mono{position:absolute;left:6px;bottom:6px;background:var(--paper);padding:1px 5px;font-size:10px}
.vx-gal-t[aria-pressed="true"]{border-color:var(--citation);box-shadow:0 0 0 2px var(--citation)}
.vx-gal-t:focus-visible{outline:2px solid var(--citation);outline-offset:2px}

/* Legal pages: contents list beside the unchanged text */
.vx-legal-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--space-8);align-items:start}
.vx nav.vx-toc{position:sticky;top:96px}
.vx-toc .vx-mono{margin-bottom:var(--space-3)}
.vx-toc ol{border-top:1px solid var(--coal)}
.vx-toc li a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--space-2);padding:10px 0;border-bottom:1px solid var(--ecru);font-size:14px;font-weight:500;line-height:1.35}
.vx-toc li a:hover{color:var(--citation)}
.vx-toc li a .vx-mono{margin:0;color:var(--citation)}
.vx-legal{max-width:72ch}
.vx-legal h2{font-size:var(--text-2xl);letter-spacing:-.02em;line-height:1.15;margin:var(--space-8) 0 var(--space-3);scroll-margin-top:96px}
.vx-legal h2:first-child{margin-top:0}
.vx-legal p{color:var(--coal);font-size:16px;line-height:1.7;margin:0 0 var(--space-4)}
.vx-legal ul{margin:0 0 var(--space-5)}
.vx-legal li{position:relative;padding:8px 0 8px 18px;border-top:1px solid var(--ecru);font-size:15px;line-height:1.65}
.vx-legal li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;background:var(--citation)}
.vx-legal a{border-bottom:1px solid var(--citation)}
.vx-legal code{font-family:var(--font-mono);font-size:.9em;background:var(--bone);padding:1px 5px}

/* Index rows for the hubs: kicker, title link, arrow */
.vx ul.vx-rows{border-top:1px solid var(--coal)}
.vx-rows li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:var(--space-6);align-items:baseline;padding:var(--space-5) 0;border-bottom:1px solid var(--ecru);transition:background .2s}
.vx-rows li:hover{background:var(--bone)}
.vx-rows h3{font-size:var(--text-xl);letter-spacing:-.02em;line-height:1.2}
.vx-rows h3 a{border-bottom:1px solid transparent}
.vx-rows h3 a:hover{color:var(--citation);border-color:var(--citation)}
.vx-rows .vx-arrow{color:var(--citation);font-family:var(--font-mono)}
.vx-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0}
.vx-thumbs img{display:block;width:100%;height:auto;border:1px solid var(--ecru);background:var(--paper)}

/* Compare pages: the three buyer-fit headings */
.vx ol.vx-fits-gap{margin-top:var(--space-7)}
.vx p.vx-srcline{margin-top:var(--space-6);font-size:14px;max-width:70ch}
.vx ol.vx-fits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}
.vx-fits li{border-top:2px solid var(--ecru);padding-top:var(--space-4)}
.vx-fits li:last-child{border-top-color:var(--citation)}
.vx-fits .vx-mono{margin-bottom:var(--space-2)}
.vx-fits h3{font-size:var(--text-xl);letter-spacing:-.02em;line-height:1.2}

/* Tools: tool rows, the checklist page */
.vx ul.vx-toolrows{border-top:1px solid var(--coal)}
.vx-toolrows li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:var(--space-6);align-items:center;padding:var(--space-5) 0;border-bottom:1px solid var(--ecru)}
.vx-toolrows h3{font-size:var(--text-xl);letter-spacing:-.02em;line-height:1.2;margin-bottom:4px}
.vx-toolrows p.vx-d{color:var(--smoke);font-size:15px;line-height:1.5;max-width:62ch}
.vx-toolrows .vx-pill{margin-left:0}
.vx-toolrows p.vx-route{color:var(--citation)}
.vx ul.vx-routes li{grid-template-columns:48px minmax(0,1fr)}
.vx-routes h3 a{border-bottom:1px solid var(--citation)}
.vx-routes h3 a:hover{color:var(--citation)}
.vx-soon{white-space:nowrap;color:var(--smoke)}
.vx-chkpage{border:1px solid var(--ecru);background:var(--bone)}
.vx-chkpage-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);flex-wrap:wrap}
.vx-chkpage-bar{height:3px;background:var(--ecru)}
.vx-chkpage-bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--citation);transition:width .4s var(--vx-ease)}
.vx ol.vx-steprows{background:var(--paper)}
.vx-step-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-4);padding:var(--space-5);border-top:1px solid var(--ecru)}
.vx-step-row:first-child{border-top:0}
.vx p.vx-step-n{color:var(--citation);padding-top:6px}
.vx-step-main h3{font-size:var(--text-xl);letter-spacing:-.02em;line-height:1.2;margin-bottom:var(--space-2)}
.vx p.vx-step-rec{font-size:15px;line-height:1.5;margin-bottom:var(--space-3)}
.vx-step-rec .vx-mono{margin-right:var(--space-2);color:var(--citation)}
.vx-step-row .tick{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;cursor:pointer;font-weight:500}
.vx-step-row .tick input{accent-color:var(--citation);width:20px;height:20px;margin:0}
.vx-step-main details{margin-top:var(--space-2)}
.vx-step-main summary{font-size:15px;padding:12px 0}
.vx-step-main details p{font-size:15px}

/* Responsive */
@media (max-width:860px){
  .vx-rows li{grid-template-columns:1fr;gap:var(--space-2)}
  .vx-rows .vx-arrow{display:none}
  .vx-toolrows li{grid-template-columns:1fr;gap:var(--space-3);align-items:start}
  .vx-note-pair{grid-template-columns:1fr}
  .vx ol.vx-fits{grid-template-columns:1fr;gap:var(--space-5)}
}
@media (max-width:1060px){
  .vx-gal{grid-template-columns:1fr}
  .vx ul.vx-gal-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .vx-legal-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .vx nav.vx-toc{position:static}
  .vx-split{grid-template-columns:1fr;gap:var(--space-6)}
  .vx ul.vx-terms{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .vx ul.vx-gal-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vx-chkpage-top{padding:var(--space-3) var(--space-4)}
  .vx-step-row{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-4)}
  .vx-ans-card{padding:var(--space-4)}
  .vx-note-cap{padding:var(--space-3) var(--space-4)}
  .vx ul.vx-terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-chk-top{padding:var(--space-3) var(--space-4)}
  .vx-chk-list label{padding:14px var(--space-4)}
  .vx-chk-list input{left:var(--space-4)}
  .vx-chk-cap{padding:var(--space-3) var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
  .vx-chk-box{transition:none}
}

/* Legal pages: the hero line keeps the date on one line */
.vx-legal4 .vx-ph .vx-lede{max-width:64ch}

/* Form blocks keep their own layout; their headings are held to a section scale instead of the page display scale */
.vx-form-host h2{font-size:var(--text-3xl);letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--space-3)}