/* Product visuals adapted from the Nov 2026 content draft (Gerald's artifact): the
   v-* building blocks used by the visuals on Home, Analyse, Portfolio, Monitor,
   Agent Tom, Autopilot and Reports. Loaded on every page after tomnext.css.
   Motion (lines drawing on, bars growing, small cards sliding in) runs only when
   js/tomnext.js adds .v-motion to <html>, which it skips for reduced motion. */
:root{--sx-ink:#0B1822;--sx-body:#33404A;--sx-line:#E3E6EA;--sx-amber:#C98A00;--sx-amber-tint:#FFF6D6;--sx-green-tint:#E3F7EC;--sx-red-tint:#FDECE9;--sx-blue-tint:#EDF5FF}
/* ───────── Product visuals ───────── */
.v-stage{background:var(--tn-mist);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:600px){.v-stage{padding:28px}}
.v-card{background:#fff;border:1px solid var(--sx-line);border-radius:14px;box-shadow:0 1px 2px rgba(11,24,34,.04),0 10px 28px rgba(11,24,34,.06);padding:18px;font-size:13px;line-height:1.45;color:var(--sx-ink);min-width:0;overflow:hidden}
@media(min-width:600px){.v-card{padding:20px 22px}}
.v-card p{font-size:13px;line-height:1.5}
.v-card+.v-card{margin-top:0}
.v-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.v-title{font-size:14.5px;font-weight:600;color:var(--sx-ink)}
.v-sub{font-size:12px;color:var(--tn-iron);margin-top:2px}
.v-label{font-size:11.5px;font-weight:600;color:var(--tn-iron)}
.v-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--tn-fog);flex-wrap:wrap}
.v-row:first-of-type{border-top:none}
.v-row>span:first-child{color:var(--tn-iron)}
.v-row b{font-weight:600}
.v-val{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.v-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--tn-fog);color:var(--sx-ink);white-space:nowrap}
.v-chip-blue{background:var(--sx-blue-tint);color:var(--tn-volt-blue-dark)}
.v-chip-amber{background:var(--sx-amber-tint);color:#8A5A00}
.v-chip-green{background:var(--sx-green-tint);color:var(--tn-success-dark)}
.v-chip-red{background:var(--sx-red-tint);color:#B2321F}
.v-srcchip{display:inline-flex;font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--sx-blue-tint);color:var(--tn-volt-blue-dark);white-space:nowrap}
.v-mk{display:inline-flex;width:14px;height:14px;flex-shrink:0;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.v-mk-good{border-radius:50%;background:var(--tn-success)}
.v-mk-good::before{content:'\2713'}
.v-mk-warn{border-radius:3px;background:var(--tn-warning)}
.v-mk-warn::before{content:'';width:7px;height:2px;background:#5C4300}
.v-mk-bad{border-radius:3px;background:var(--tn-error)}
.v-mk-bad::before{content:'!'}
.v-item .v-mk{display:inline-flex;font-size:9px;line-height:1;color:#fff}
.v-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid #CDD3DA;background:#fff;color:var(--sx-ink);white-space:nowrap}
.v-btn-primary{background:var(--tn-volt-blue);border-color:var(--tn-volt-blue);color:#fff}
.v-btn-done{background:var(--sx-green-tint);border-color:transparent;color:var(--tn-success-dark)}
.v-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
@media(min-width:520px){.v-tiles{grid-template-columns:repeat(4,1fr)}}
.v-tile{background:var(--tn-mist);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between} /* figures sit on one line across a row, even when a label wraps */
.v-tile span{display:block;font-size:11px;color:var(--tn-iron)}
.v-tile b{display:block;font-size:17px;font-weight:600;margin-top:2px;letter-spacing:-0.01em}
.v-chart{width:100%;height:auto;display:block}
.v-chart text{font-family:'Host Grotesk',Arial,sans-serif;font-size:13px;fill:#646A75}
.v-chart .v-strong{fill:#0B1822;font-weight:600}
@media(max-width:600px){.v-chart text{font-size:16px}}
.v-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--tn-iron);margin-bottom:8px}
.v-legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.v-agent{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.v-agent-icon{width:24px;height:24px;border-radius:7px;background:var(--tn-volt-blue);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.v-agent-icon svg{width:13px;height:auto}
.v-steps{display:flex;flex-direction:column;gap:6px;margin:10px 0 0}
.v-steps div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tn-iron)}
.v-cols{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:520px){.v-cols{grid-template-columns:1fr 1fr}}
.v-col{background:var(--tn-mist);border-radius:10px;padding:12px}
.v-col .v-label{margin-bottom:8px;display:block}
.v-col p{font-size:12.5px;line-height:1.45;margin-bottom:8px;color:var(--sx-ink)}
.v-col p:last-child{margin-bottom:0}
.v-hl{background:#FFF3B8;padding:1px 3px;border-radius:3px}
.v-quote{font-size:13.5px;line-height:1.5;padding:10px 12px;border-left:3px solid var(--tn-volt-blue);background:var(--tn-mist);border-radius:0 8px 8px 0}
.v-av{display:inline-flex;width:24px;height:24px;border-radius:50%;background:#DDE6F2;color:var(--tn-volt-blue-dark);font-size:10.5px;font-weight:700;align-items:center;justify-content:center;flex-shrink:0}
@media(min-width:520px){.v-tiles.v-tiles-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.v-kanban{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media(min-width:520px){.v-kanban{grid-template-columns:repeat(4,minmax(0,1fr))}}
.v-kanban-col{padding:8px}
.v-deal{background:#fff;border:1px solid var(--sx-line);border-radius:8px;padding:8px;margin-top:6px}
.v-deal b{display:block;font-size:12px;line-height:1.3}
.v-deal span{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:11px;color:var(--tn-iron);margin-top:4px}
.v-toggle{width:34px;height:20px;border-radius:10px;background:#CDD3DA;position:relative;flex-shrink:0}
.v-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.v-toggle.on{background:var(--tn-volt-blue)}
.v-toggle.on::after{left:auto;right:2px}
.v-face{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.v-email{margin-top:10px;padding:12px;border:1px dashed #CDD3DA;border-radius:10px;font-size:12.5px;color:var(--tn-iron)}
.v-email b{color:var(--sx-ink)}
.v-flag{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--sx-amber-tint);color:#5C4300;font-size:12.5px;margin-top:12px}
.v-flag.v-flag-red{background:var(--sx-red-tint);color:#7A1F12}
.v-flag b{color:inherit}
.v-list{display:flex;flex-direction:column}
.v-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--tn-fog)}
.v-item:first-child{border-top:none}
.v-item>div{min-width:0;flex:1}
.v-item b{display:block;font-weight:600;font-size:13px}
.v-item span{display:block;font-size:12px;color:var(--tn-iron)}
.v-dot{width:8px;height:8px;border-radius:50%;background:var(--tn-volt-blue);margin-top:5px;flex-shrink:0}
.v-ask{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #CDD3DA;border-radius:12px;padding:10px 12px;color:var(--tn-iron);font-size:13px;margin:10px 0 14px}
.v-start{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.v-start{grid-template-columns:3fr 2fr}}
.v-greet{font-size:20px;font-weight:600;letter-spacing:-0.01em}
.v-foryou .v-item{border-radius:8px;padding:9px 8px;border-top:1px solid transparent;animation:vfocus 12.5s infinite}
.v-foryou .v-item:nth-child(2){animation-delay:2.5s}
.v-foryou .v-item:nth-child(3){animation-delay:5s}
.v-foryou .v-item:nth-child(4){animation-delay:7.5s}
.v-foryou .v-item:nth-child(5){animation-delay:10s}
@keyframes vfocus{0%,2%{background:transparent}6%,18%{background:var(--sx-blue-tint)}22%,100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.v-foryou .v-item{animation:none}}
.v-slider{margin:4px 0 14px}
.v-slider-track{position:relative;height:4px;border-radius:2px;background:var(--tn-fog);margin:12px 6px 6px}
.v-slider-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--tn-volt-blue)}
.v-slider-knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--tn-volt-blue);transform:translate(-50%,-50%)}
.v-slider-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--tn-iron)}
.v-checks{display:flex;flex-direction:column;gap:7px}
.v-checks div{display:flex;align-items:center;gap:8px;font-size:12.5px}
.v-answer{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:10px;background:var(--sx-blue-tint);margin-top:12px}
.v-answer span{font-size:12.5px;color:var(--tn-volt-blue-dark);font-weight:600}
.v-answer b{font-size:20px;letter-spacing:-0.01em}
.v-bubble{align-self:flex-end;max-width:85%;background:var(--sx-ink);color:#fff;border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:13px}
.v-tree{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative}
.v-tree-node{background:var(--tn-mist);border-radius:10px;padding:10px;font-size:12px;text-align:center;min-width:0}
.v-tree-node b{display:block;font-size:12.5px}
.v-tree-node span{display:block;color:var(--tn-iron);font-size:11.5px;margin-top:2px}
.v-tree-lines{height:28px;position:relative}
.v-tree-lines svg{position:absolute;inset:0;width:100%;height:100%}
.v-tree-company{margin:0 auto;max-width:240px;text-align:center;border:2px solid var(--tn-volt-blue);border-radius:12px;padding:10px;background:#fff}
.v-tree-company b{display:block;font-size:14px}
.v-tree-company span{font-size:11.5px;color:var(--tn-iron)}
.v-pdf{background:var(--tn-mist);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.v-pdf i{display:block;height:6px;border-radius:3px;background:#D9DEE4}
.v-pdf i.v-pdf-hl{background:#BFDBFF}
.v-pdf i:nth-child(odd){width:86%}
.v-tabs{display:flex;gap:4px;border-bottom:1px solid var(--tn-fog);margin-bottom:10px;overflow:hidden}
.v-tabs span{font-size:12.5px;font-weight:600;padding:6px 10px;color:var(--tn-iron);border-bottom:2px solid transparent;white-space:nowrap}
.v-tabs span.on{color:var(--sx-ink);border-bottom-color:var(--tn-volt-blue)}
.v-range{position:relative;height:28px;margin:8px 0 2px}
.v-range-axis{position:absolute;left:0;right:0;top:13px;height:2px;background:var(--tn-fog)}
.v-range-iqr{position:absolute;top:8px;height:12px;border-radius:6px;background:#BFDBFF}
.v-range-med{position:absolute;top:4px;width:2px;height:20px;background:var(--tn-volt-blue-dark)}
.v-range-you{position:absolute;top:6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--sx-ink);border:2px solid #fff;box-shadow:0 0 0 1px var(--sx-ink)}
.v-mini-table{width:100%;border-collapse:collapse;font-size:12.5px}
.v-mini-table th{text-align:left;font-weight:600;color:var(--tn-iron);font-size:11.5px;padding:6px 6px 6px 0;border-bottom:1px solid var(--tn-fog)}
.v-mini-table td{padding:7px 6px 7px 0;border-bottom:1px solid var(--tn-fog)}
.v-mini-table tr:last-child td{border-bottom:none}
.v-scroll{overflow-x:auto}

/* ───────── Richer visuals: overlapping cards, thumbnails, papers, review, rings ───────── */
.v-stage{position:relative}
.v-float{position:relative;z-index:2;margin:-34px 0 0 auto;width:min(290px,88%);box-shadow:0 18px 40px rgba(11,24,34,.16),0 0 0 1px rgba(11,24,34,.04);padding:14px 16px}
.v-float p{font-size:13px}
.v-spark{display:block;overflow:visible}
.v-spark-wide,.v-spark-thumb{width:100%;height:auto}
.v-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:420px){.v-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v-thumb{border:1px solid var(--sx-line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 6px 16px rgba(11,24,34,.07);min-width:0}
.v-thumb-band{height:36px;display:flex;align-items:flex-end;padding:6px 9px}
.v-thumb-band span{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.v-thumb-body{padding:9px;display:flex;flex-direction:column;gap:7px}
.v-thumb-body b{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:13px;line-height:1.25;color:var(--sx-ink)}
.v-thumb-lines{display:flex;flex-direction:column;gap:5px}
.v-thumb-lines i{display:block;height:4px;border-radius:2px;background:#E3E6EA}
.v-thumb-lines i:nth-child(2n){width:78%}
.v-thumb-table{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.v-thumb-table i{display:block;height:9px;border-radius:2px;background:#EDF0F3}
.v-thumb-table i:nth-child(-n+3){background:#D3DCE8}
.v-thumb-note{font-size:10.5px;color:var(--tn-iron)}
.v-swatch{width:22px;height:22px;border-radius:6px;display:inline-block}
.v-papers{position:relative;padding:12px 16px 4px 10px}
.v-paper-back{position:absolute;inset:6px 4px 0 18px;background:#fff;border:1px solid var(--sx-line);border-radius:8px;transform:rotate(2.4deg);box-shadow:0 8px 20px rgba(11,24,34,.06)}
.v-paper-back2{inset:10px 14px 2px 6px;transform:rotate(-1.6deg)}
.v-paper{position:relative;background:#fff;border:1px solid var(--sx-line);border-radius:8px;overflow:hidden;box-shadow:0 20px 44px rgba(11,24,34,.14)}
.v-paper-cover{background:#1E3A34;color:#fff;padding:22px 22px 18px}
.v-paper-org{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9A45C}
.v-paper-title{font-family:'Fraunces',Georgia,serif;font-size:24px;line-height:1.15;margin-top:8px}
.v-paper-sub{font-size:12px;color:rgba(255,255,255,.72);margin-top:6px}
.v-paper-body{padding:16px 22px 20px;display:grid;gap:14px}
.v-paper-rec{border-left:3px solid #C9A45C;padding:8px 12px;background:#F7F4EE;display:flex;flex-direction:column;gap:1px}
.v-paper-rec span{font-size:11px;color:var(--tn-iron)}
.v-paper-rec b{font-size:13.5px;color:var(--sx-ink)}
.v-paper-chart span{display:block;font-size:11px;color:var(--tn-iron);margin-bottom:4px}
.v-paper-chart .v-paper-note{margin-top:4px}
.v-review{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.v-review{grid-template-columns:1.15fr 22px 1fr;align-items:center}}
.v-doc{background:#FCFCFB;border:1px solid var(--sx-line);border-radius:8px;padding:10px;font-family:Georgia,serif;font-size:11.5px;color:#33404A;box-shadow:0 6px 16px rgba(11,24,34,.06)}
.v-doc-head{font-weight:700;font-size:11px;margin-bottom:6px;color:var(--sx-ink)}
.v-doc-row{display:flex;justify-content:space-between;gap:8px;padding:4px 6px;border-bottom:1px dotted #D9DEE4}
.v-doc-hl{background:#DCEBFF;box-shadow:0 0 0 1.5px #2684FF;border-radius:3px;border-bottom-color:transparent}
.v-doc-foot{font-family:'Host Grotesk',Arial,sans-serif;font-size:10px;color:var(--tn-steel);margin-top:6px}
.v-review-link{display:none}
@media(min-width:560px){.v-review-link{display:block;height:2px;background:repeating-linear-gradient(90deg,#2684FF 0 4px,transparent 4px 7px)}}
.v-field{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--sx-line);border-radius:8px;margin-bottom:6px;background:#fff}
.v-meter{display:block;position:relative;height:6px;border-radius:3px;background:var(--tn-fog);margin:7px 0 4px;max-width:260px}
.v-item span.v-meter-now,.v-item span.v-meter-plan{position:absolute;display:block}
.v-meter-now{left:0;top:0;bottom:0;border-radius:3px}
.v-meter-plan{top:-3px;bottom:-3px;width:2px;background:var(--sx-ink)}
.v-donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.v-donut{width:150px;height:150px;flex-shrink:0}
.v-donut-big{font-family:'Fraunces',Georgia,serif;font-size:17px;fill:var(--sx-ink)}
.v-donut-small{font-family:'Host Grotesk',Arial,sans-serif;font-size:7.5px;fill:var(--tn-iron)}
.v-book td{vertical-align:middle}
.v-item-bad{box-shadow:inset 3px 0 0 #F85C47;padding-left:10px}
.v-item-warn{box-shadow:inset 3px 0 0 #F9C900;padding-left:10px}
.v-item-good{box-shadow:inset 3px 0 0 #00A264;padding-left:10px}

/* Motion: only when site.js has switched it on (and the visitor allows motion) */
.v-motion .v-stage .v-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .25s}
.v-motion .v-stage.v-in .v-draw{stroke-dashoffset:0}
.v-motion .v-stage .v-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .6s ease}
.v-motion .v-stage .v-bar-down{transform-origin:50% 0}
.v-motion .v-stage .v-bar-x{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .7s ease}
.v-motion .v-stage.v-in .v-bar,.v-motion .v-stage.v-in .v-bar-x{transform:none}
.v-motion .v-stage .v-grow-x{transform-origin:left;transform:scaleX(0);transition:transform .9s ease .3s}
.v-motion .v-stage.v-in .v-grow-x{transform:none}
.v-motion .v-stage .v-fade,.v-motion .v-stage .v-ring{opacity:0;transition:opacity .9s ease .5s}
.v-motion .v-stage.v-in .v-fade,.v-motion .v-stage.v-in .v-ring{opacity:1}
.v-motion .v-stage .v-float{opacity:0;transform:translateY(16px);transition:opacity .5s ease 1.1s,transform .5s ease 1.1s}
.v-motion .v-stage.v-in .v-float{opacity:1;transform:none}

/* Solid status pills in the TomNext palette (deal ratings) */
.v-chip.v-chip-s-good,.v-tile .v-chip.v-chip-s-good{background:var(--tn-success);color:#fff;display:inline-flex}
.v-chip.v-chip-s-warn,.v-tile .v-chip.v-chip-s-warn{background:var(--tn-warning);color:var(--sx-ink);display:inline-flex}
.v-chip.v-chip-s-bad,.v-tile .v-chip.v-chip-s-bad{background:var(--tn-error);color:#fff;display:inline-flex}


/* Text weight inside visuals: the site's body text is light (300), but the
   visuals are drawn at regular weight with semibold emphasis, as in the draft.
   :where() keeps specificity at zero, so rules such as .v-thumb-body b keep
   their own weight. */
.v-stage{font-weight:400}
.v-stage :where(b,strong){font-weight:600}