/* TomHow visual system, batch 3 components (service pages, guide, schema tool), 19 October 2026.
   Extends visual-system.css, visual-pages.css and visual-surfaces.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. */

/* Panel illustrations fill their column instead of shrinking to the default svg width */
.vx-b3 .vx-panel-vis{justify-items:stretch}
.vx-b3 .vx-panel-vis svg{max-width:440px;margin-inline:auto}

/* Finding board: the surface board with a list of findings instead of answer surfaces */
.vx-fb .vx-sb-list button{grid-template-columns:26px minmax(0,1fr)}
.vx-fb .vx-sb-mark{display:none}
.vx-fb .vx-sb-detail{padding:var(--space-5) var(--space-6)}

/* Service area map: fourteen towns, one priority area */
.vx-map{background:var(--bone);border:1px solid var(--ecru);margin:0}
.vx-map-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-map-body{background:var(--paper);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.vx-map-plot{position:relative;aspect-ratio:440/420;border-right:1px solid var(--ecru);background:var(--paper);min-width:0}
.vx-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vx-map-grid{stroke:var(--ecru);stroke-width:1;stroke-dasharray:2 5}
.vx-map-line{stroke:var(--citation);stroke-width:1.5;stroke-dasharray:5 4;fill:none;animation:vx-dash 1.2s linear infinite}
.vx-map-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;fill:var(--smoke)}
.vx-pt{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;padding:0;margin:0;border:0;background:none;cursor:pointer;color:var(--coal);font:inherit}
.vx-pt i{display:block;width:11px;height:11px;margin:auto;border-radius:50%;border:1.5px solid var(--smoke);background:var(--paper);transition:background .2s,border-color .2s,box-shadow .2s}
.vx-pt:hover i{border-color:var(--coal)}
.vx-pt[aria-pressed="true"] i{background:var(--coal);border-color:var(--coal);box-shadow:0 0 0 5px var(--vx-coral-25)}
.vx-pt span{position:absolute;white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:-.005em;line-height:1;pointer-events:none}
.vx-pt[aria-pressed="true"] span{color:var(--citation)}
.vx-pt.vx-l span{right:calc(50% + 9px);top:50%;transform:translateY(-50%)}
.vx-pt.vx-r span{left:calc(50% + 9px);top:50%;transform:translateY(-50%)}
.vx-pt.vx-b span{top:calc(50% + 9px);left:50%;transform:translateX(-50%)}
.vx-pt.vx-t span{bottom:calc(50% + 9px);left:50%;transform:translateX(-50%)}
.vx-pt.vx-bs span{top:calc(50% + 9px);left:calc(50% - 8px)}
.vx-pt.vx-be span{top:calc(50% + 9px);right:calc(50% - 8px)}
.vx-pt.vx-ts span{bottom:calc(50% + 9px);left:calc(50% - 8px)}
.vx-pt.vx-te span{bottom:calc(50% + 9px);right:calc(50% - 8px)}
.vx-pt:focus-visible{outline:2px solid var(--citation);outline-offset:0}
.vx-map-rec{padding:var(--space-5) var(--space-6);background:var(--paper);min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5)}
.vx-map-rec p.vx-sb-q{border-bottom:0;padding-bottom:0;margin-bottom:0}
.vx-map-foot{display:block;padding:var(--space-3) var(--space-5);border-top:1px solid var(--ecru);font-size:10px}

/* Six-stage track: the journey track with six stops, used for where a visitor is lost */
.vx-track-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.vx-track-6 .vx-buyer{left:calc(100% / 12)}
.vx-track-6 .vx-track-fill{width:calc(100% / 12)}
.vx-track-6 .vx-sym{font-size:16px;max-width:14ch}
.vx-track-6 .vx-stage .vx-mono{margin-top:calc(var(--space-1) * -1)}
.vx-guide-panel .vx-panel-copy h3{font-size:var(--text-2xl)}
.vx-guide-panel .vx-panel-copy .vx-lead{margin-bottom:var(--space-5)}
.vx-guide-links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:center}
.vx-guide-svg{width:100%;max-width:400px;height:auto}

.vx p.vx-faq-group{margin:var(--space-7) 0 var(--space-3)}

/* Keyword figure: a term list and the same terms mapped to pages */
.vx-mm-page.vx-mm-wide{border-right:0}
.vx table.vx-mt{width:100%;border-collapse:collapse;font-size:14px}
.vx-mt th,.vx-mt td{padding:9px 0;border-top:1px solid var(--ecru);text-align:left;font-weight:500}
.vx-mt thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);font-weight:400}
.vx-mt .vx-r{text-align:right;font-family:var(--font-mono);padding-right:var(--space-4)}
.vx-mt .vx-none{color:var(--citation);font-family:var(--font-mono);font-size:12px}
.vx-pmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.vx-pmap>div{border-top:2px solid var(--coal);padding-top:var(--space-3)}
.vx-pmap>div.vx-pmap-no{border-top-color:var(--ecru)}
.vx-pmap .vx-mono{margin-bottom:var(--space-2)}
.vx ul.vx-pmap-list li,.vx-pmap ul li{font-size:14px;font-weight:500;padding:5px 0;line-height:1.35}
.vx-pmap li i{display:block;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--smoke);font-weight:400}

/* Slots for Thomas's own words: clearly marked placeholders */
.vx-slot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5)}
.vx-slot-box{border:1px dashed var(--smoke);background:var(--bone);padding:var(--space-5);display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);min-height:150px}
.vx-slot-video{align-items:flex-start}
.vx-slot-play{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--smoke);position:relative;margin-bottom:var(--space-2);display:block}
.vx-slot-play::after{content:"";position:absolute;left:17px;top:12px;border-left:12px solid var(--smoke);border-top:8px solid transparent;border-bottom:8px solid transparent}
.vx p.vx-slot-note{font-size:14px;color:var(--smoke);line-height:1.5}

/* Hero figure: five different events, each counted on its own */
.vx-events{background:var(--bone);border:1px solid var(--ecru);padding:var(--space-5) var(--space-6);margin:0}
.vx p.vx-events-top{margin-bottom:var(--space-3)}
.vx-events-svg{width:100%;height:auto;display:block}
.vx-events figcaption{display:block;margin-top:var(--space-3);font-size:10px}

/* Tab strips with three to five tabs */
.vx-tx-tabs.vx-tx-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vx-tx-tabs.vx-tx-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vx-tx-tabs.vx-tx-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.vx-tx-3 button:nth-child(n),.vx-tx-4 button:nth-child(n),.vx-tx-5 button:nth-child(n){border-top:3px solid transparent;border-left:1px solid var(--ecru)}
.vx-tx-3 button:first-child,.vx-tx-4 button:first-child,.vx-tx-5 button:first-child{border-left:0}
.vx-tx-3 button[aria-selected="true"],.vx-tx-4 button[aria-selected="true"],.vx-tx-5 button[aria-selected="true"]{border-top-color:var(--citation);box-shadow:none;background:var(--bone)}

/* Facts in six columns */
.vx-fs6 .vx-wrap{grid-template-columns:repeat(6,minmax(0,1fr))}
.vx-fs6 .vx-lab{grid-column:1/-1;max-width:none;padding:var(--space-5) 0 var(--space-2)}
.vx-fs6 .vx-fact{border-top:0;padding:var(--space-4) var(--space-5) var(--space-5)}
.vx-fs6 .vx-fact:nth-child(2){border-left:0;padding-left:0}
.vx-fs4 .vx-wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
.vx-fs4 .vx-lab{grid-column:1/-1;max-width:none;padding:var(--space-5) 0 var(--space-2)}
.vx-fs4 .vx-fact{padding:var(--space-4) var(--space-5) var(--space-5)}
.vx-fs4 .vx-fact:nth-child(2){border-left:0;padding-left:0}
.vx p.vx-limit-line{margin-top:var(--space-5);max-width:none;font-size:14px;line-height:1.55;color:var(--smoke);border-left:3px solid var(--citation);padding-left:var(--space-4)}
.vx-limit-line b{color:var(--coal);font-weight:500}

/* Flow with only the last step in Citation Coral */
.vx-flow.vx-flow-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vx-flow.vx-flow-last li:nth-child(n+3)::before{background:var(--coal)}
.vx-flow.vx-flow-last li:last-child::before{background:var(--citation)}
.vx-flow.vx-flow-last li:last-child b{color:var(--citation)}

/* Visible page against markup: the same names read the same way, or not */
.vx-mm{background:var(--bone);border:1px solid var(--ecru);margin:0}
.vx-mm-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--ecru);flex-wrap:wrap}
.vx-mm-top .vx-seg{margin-top:0}
.vx-mm .vx-pm-stage{display:grid}
.vx-mm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.vx-mm-page{padding:var(--space-5);background:var(--paper);border-right:1px solid var(--ecru);min-width:0}
.vx-mm-page .vx-mono,.vx-mm-code .vx-ctag{margin-bottom:var(--space-3)}
.vx p.vx-mm-name{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:var(--space-1)}
.vx p.vx-mm-sub{color:var(--smoke);font-size:14px;line-height:1.5;margin-bottom:var(--space-4)}
.vx ul.vx-mm-facts li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--space-3);padding:9px 0;border-top:1px solid var(--ecru);font-size:14px;font-weight:500;align-items:baseline}
.vx-mm-facts li:last-child{border-bottom:1px solid var(--ecru)}
.vx-mm-facts .vx-mono{font-size:10px}
.vx-mm .vx-code{height:auto;font-size:12px;line-height:1.7;padding:var(--space-5)}
.vx-mm .vx-code mark.vx-bad{background:rgba(229,57,53,.3)}
.vx p.vx-mm-verdict{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;padding:var(--space-3) var(--space-5);border-top:1px solid var(--ecru);background:var(--paper);font-size:14px;color:var(--smoke);line-height:1.45}
.vx-mm-verdict .vx-pill{margin:0}
.vx-pill.vx-bad{background:rgba(209,63,18,.1);color:#B6422E}
.vx-mm .vx-pm-view{align-self:stretch}
.vx-mm-cap{display:block;padding:var(--space-3) var(--space-5);border-top:1px solid var(--ecru);font-size:10px}

.vx-end-long h2{font-size:var(--text-3xl);letter-spacing:-.03em;line-height:1.1}

.vx-b3 .vx-section.vx-tight{padding-bottom:var(--space-6)}
.vx-b3 .vx-factstrip+.vx-section.vx-flush{padding-top:var(--space-9)}
.vx-b3 .vx-factstrip+.vx-section.vx-tight{padding-top:var(--space-6)}

/* Page head variants */
.vx-b3 .vx-ph{padding:var(--space-8) 0 var(--space-7)}
.vx-b3 .vx-ph-grid{align-items:start}
.vx p.vx-ph-price{margin-top:var(--space-5);font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--coal)}
.vx-ph-price b{font-weight:500}
.vx-b3 .vx-ph-meta{margin-top:var(--space-5)}
.vx-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.vx-chips span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);border:1px solid var(--ecru);background:var(--bone);padding:5px 10px}

/* The unchanged tool: the original form and output panels sit inside the visual page */
.vx-tool-host{padding:0 0 var(--space-9)}
.vx-tool-host .builder-shell{margin-top:0}

/* Responsive */
@media (max-width:1060px){
  .vx-map-body{grid-template-columns:1fr}
  .vx-map-plot{border-right:0;border-bottom:1px solid var(--ecru)}
  .vx-mm-cols{grid-template-columns:1fr}
  .vx-mm-page{border-right:0;border-bottom:1px solid var(--ecru)}
  .vx-fs6 .vx-wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vx-fs6 .vx-fact{border-top:1px solid var(--ecru);padding:var(--space-5)}
  .vx-fs6 .vx-fact:nth-child(2),.vx-fs6 .vx-fact:nth-child(5){padding-left:0;border-left:0}
  .vx-fs6 .vx-fact:nth-child(3),.vx-fs6 .vx-fact:nth-child(4),.vx-fs6 .vx-fact:nth-child(6),.vx-fs6 .vx-fact:nth-child(7){padding-left:var(--space-5);border-left:1px solid var(--ecru)}
  .vx-fs4 .vx-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-fs4 .vx-fact{border-top:1px solid var(--ecru);padding:var(--space-5)}
  .vx-fs4 .vx-fact:nth-child(2),.vx-fs4 .vx-fact:nth-child(4){padding-left:0;border-left:0}
  .vx-fs4 .vx-fact:nth-child(3),.vx-fs4 .vx-fact:nth-child(5){padding-left:var(--space-5);border-left:1px solid var(--ecru)}
}
@media (max-width:860px){
  .vx-track-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-track-6 .vx-sym{max-width:none}
  .vx-tx-tabs.vx-tx-3,.vx-tx-tabs.vx-tx-4,.vx-tx-tabs.vx-tx-5{grid-template-columns:1fr}
  .vx-tx-3 button:nth-child(n),.vx-tx-4 button:nth-child(n),.vx-tx-5 button:nth-child(n){border-left:0;border-top:1px solid var(--ecru);grid-template-columns:34px minmax(0,1fr);align-items:baseline}
  .vx-tx-3 button:first-child,.vx-tx-4 button:first-child,.vx-tx-5 button:first-child{border-top:0}
  .vx-tx-3 button[aria-selected="true"],.vx-tx-4 button[aria-selected="true"],.vx-tx-5 button[aria-selected="true"]{border-top-color:var(--ecru);box-shadow:inset 3px 0 0 var(--citation)}
  .vx-flow.vx-flow-last{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-6)}
}
@media (max-width:720px){
  .vx-b3 .vx-ph{padding:var(--space-7) 0 var(--space-6)}
  .vx-map-top{padding:var(--space-3) var(--space-4)}
  .vx-map-rec{padding:var(--space-4)}
  .vx-map-foot,.vx-mm-cap{padding:var(--space-3) var(--space-4)}
  .vx-pt span{font-size:10.5px}
  .vx-mm-top{padding:var(--space-3) var(--space-4)}
  .vx-mm-page,.vx-mm .vx-code{padding:var(--space-4)}
  .vx p.vx-mm-verdict{padding:var(--space-3) var(--space-4)}
  .vx ul.vx-mm-facts li{grid-template-columns:70px minmax(0,1fr)}
  .vx-fs6 .vx-wrap,.vx-fs4 .vx-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-fs6 .vx-fact:nth-child(n+2),.vx-fs4 .vx-fact:nth-child(n+2){padding:var(--space-4) var(--space-4) var(--space-4) 0;border-left:0;border-top:1px solid var(--ecru)}
  .vx-fs6 .vx-fact:nth-child(odd),.vx-fs4 .vx-fact:nth-child(odd){padding-left:var(--space-4);border-left:1px solid var(--ecru)}
  .vx-fs6 .vx-fact:nth-child(2),.vx-fs6 .vx-fact:nth-child(3),.vx-fs4 .vx-fact:nth-child(2),.vx-fs4 .vx-fact:nth-child(3){border-top:1px solid var(--ecru)}
  .vx-fb .vx-sb-detail{padding:var(--space-4)}
  .vx-flow.vx-flow-last{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .vx-map-line{animation:none}
}