/* Trades AI Guide tokens 0.4.2 (Studio, approved by the owner 9 Oct 2026). Primitives, then semantic aliases, then dark. */
:root{
  color-scheme:light dark;
  --tg-ink:#17302A;--tg-action:#1F6B4F;--tg-vial:#D6E36A;--tg-muted:#56625C;--tg-paper:#F6F7F2;--tg-surface:#FFFFFF;
  --tg-chip:#E9EFE0;--tg-line:#D5DBD3;--tg-hivis:#F2E03C;--tg-header:#17302A;
  --color-page:var(--tg-paper);--color-surface:var(--tg-surface);--color-text:var(--tg-ink);--color-text-muted:var(--tg-muted);
  --color-action:var(--tg-action);--color-on-action:#FFFFFF;--color-focus:var(--tg-action);--color-highlight:var(--tg-vial);
  --color-on-highlight:var(--tg-ink);--color-on-hivis:#17302A;--color-line:var(--tg-line);--color-chip:var(--tg-chip);
  --color-header:var(--tg-header);--color-on-header:var(--tg-paper);--color-on-header-muted:#B9C6BF;--color-tape:var(--tg-hivis);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --radius:8px;--tap-min:48px;--focus-ring:3px solid var(--color-focus);
  --font-sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-figures:ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --tg-vial:#C9D65A;--tg-hivis:#E3CE2A;--tg-header:#17302A;
  --color-page:#0F1916;--color-surface:#172420;--color-text:#E6EDE8;--color-text-muted:#A2B0A9;
  --color-on-hivis:#0F1916;--color-action:#7FD1A8;--color-on-action:#0F1916;--color-focus:#7FD1A8;--color-line:#2A3A34;--color-chip:#1F2E28;
  --color-on-header:#E6EDE8;--color-on-header-muted:#A2B0A9;
}}
body{background:var(--color-page);color:var(--color-text);font-family:var(--font-sans)}
a{color:var(--color-action)}:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.tg-header{background:var(--color-header);color:var(--color-on-header);border-bottom:12px solid var(--color-tape)} /* tape edge: header is always deep green #17302A, never near-black (Legal, 8 Oct 2026) */
.tg-btn{min-height:var(--tap-min);background:var(--color-action);color:var(--color-on-action);border-radius:var(--radius);padding:0 var(--space-4)} /* thumb-bar main button is action green, never yellow */
.tg-checked{background:var(--tg-hivis);color:var(--color-on-hivis);border-radius:999px;padding:2px var(--space-3)}
.tg-fee-note{background:var(--color-chip);color:var(--color-text);padding:var(--space-3) var(--space-4);border-radius:var(--radius)}
.tg-ad{min-height:var(--ad-h,280px);background:var(--color-surface);border:1px solid var(--color-line)}.tg-ad::before{content:"Advertisement";display:block;color:var(--color-text-muted);font-size:12px}
.tg-figures{font-family:var(--font-figures);font-variant-numeric:tabular-nums}
/* focus on the deep green header and the thumb bar (Architect A3: green on #17302A is 2.19:1, 3:1 needed) */
.tg-header,.tg-thumbbar{--color-focus:var(--tg-hivis);--focus-ring:3px solid var(--tg-hivis)} /* --focus-ring is resolved where it is defined, so it is set again here */
*{box-sizing:border-box}
body{margin:0;font-size:18px;line-height:1.6}
.skip{position:absolute;left:-9999px;top:0;background:var(--color-surface);color:var(--color-text);padding:var(--space-3) var(--space-4);z-index:10}
.skip:focus{left:var(--space-2);top:var(--space-2)}
.wrap{max-width:46rem;margin:0 auto;padding:0 var(--space-4)}
.tg-header{padding:var(--space-2) 0}
.tg-header a{color:var(--color-on-header)}
.tg-header a.brand{display:inline-flex;align-items:center;min-height:var(--tap-min);text-decoration:none}
.tg-header svg.logo{height:36px;width:auto;color:var(--color-on-header)}
nav.crumbs{font-size:15px;color:var(--color-text-muted);padding:var(--space-3) 0 0}
nav.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.tg-header nav.crumbs{color:var(--color-on-header-muted)}
main{padding:var(--space-6) 0 40px}
main:focus{outline:0}
h1{font-size:2rem;line-height:1.2;margin:0 0 .6em}
.placeholder{border:2px dashed var(--color-line);padding:var(--space-3) var(--space-4);color:var(--color-text-muted);margin:0 0 1.2em}
.disclosure,.general-info{font-size:15px;color:var(--color-text-muted)}
footer.site{border-top:1px solid var(--color-line);padding:20px 0 32px;font-size:15px;color:var(--color-text-muted)}
footer.site ul{list-style:none;margin:0 0 var(--space-3);padding:0;display:flex;gap:var(--space-4);flex-wrap:wrap}
footer.site a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.tg-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none}
.tg-btn.alt{background:transparent;color:inherit;border:1.5px solid currentColor}
.tg-ruler{height:8px;background-image:repeating-linear-gradient(90deg,var(--color-action) 0 2px,transparent 2px 10px),linear-gradient(var(--color-action),var(--color-action));background-size:100% 8px,100% 2px;background-position:0 0,0 100%;background-repeat:no-repeat}
.tg-thumbbar{display:none;position:sticky;bottom:0;grid-template-columns:1fr 1fr;gap:var(--space-2);padding:var(--space-2);background:var(--color-header);border-top:3px solid var(--tg-hivis)}
.tg-thumbbar .tg-btn{border:1.5px solid var(--color-on-header)}
.tg-thumbbar .tg-btn.alt{color:var(--color-on-header)}
.tg-ad{width:300px;max-width:100%;margin:0 auto;--ad-h:274px}
.tg-ad.side{display:none;--ad-h:624px}
@media (min-width:700px){.tg-ad{width:336px;--ad-h:304px}}
.tg-ad.side{width:300px}
@media (min-width:1100px){.tg-ad.side{display:block}}
@media (max-width:699px){.tg-thumbbar{display:grid}}
.tg-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--space-6);align-items:center;margin:0 0 var(--space-6)}
.tg-hero-text{display:grid;gap:var(--space-3);justify-items:start}
.tg-hero-text p{margin:0}
.tg-lede{color:var(--color-text-muted)}
.tg-ute{width:100%;height:auto;color:var(--color-text)}
.tg-hero-text .tg-checked{font:700 13px/1.3 var(--font-figures);display:inline-block}
main h2{font-size:1.25rem;margin:0 0 var(--space-3)}
main section{margin:0 0 var(--space-6)}
.tg-tradegrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.tg-trade{display:grid;justify-items:center;align-content:center;gap:var(--space-2);min-height:96px;height:100%;padding:14px var(--space-2) var(--space-3);border:1.5px solid var(--color-text-muted);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);text-decoration:none;font-weight:700;font-size:15px;line-height:1.3;text-align:center}
.tg-trade:hover{border-color:var(--color-action)}
.tg-trade svg{width:34px;height:34px}
.tg-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;border:1.5px solid var(--color-text);border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}
.tg-flow li{flex:1 1 130px;display:grid;gap:2px;align-content:center;min-height:56px;padding:10px var(--space-3);border-right:1.5px solid var(--color-line);font-size:14px}
.tg-flow small{color:var(--color-text-muted);font:12px var(--font-figures)}
.tg-fee-note{margin:0 0 var(--space-6)}
@media (max-width:699px){.tg-hero{grid-template-columns:1fr}.tg-ute{max-width:240px}}
/* guide page template (ticket pm-trades-ai-guide-20261009-tpl-guide): reading column, then the sticky side ad box from 1100 px */
.wrap.wide{max-width:72rem}
.tg-article{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
.tg-prose{display:grid;gap:var(--space-4);max-width:66ch;min-width:0}
.tg-prose>*{margin:0;min-width:0}
.tg-prose section{margin:0}
.tg-prose p{line-height:1.65}
.tg-prose h2{margin:var(--space-2) 0 var(--space-2)}
.tg-byline,.tg-src{font-size:14px;color:var(--color-text-muted)}
.tg-prose .tg-ad{margin:var(--space-3) auto}
.tg-rail{display:none}
@media (min-width:1100px){.tg-article{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.tg-rail{display:block;position:sticky;top:var(--space-4)}}
/* price-table page template (ticket pm-trades-ai-guide-20261009-tpl-pricetable): job strip (.tg-steps, so the home strip is untouched), trade chips, then the table in a focusable scroll region */
.tg-steps li.here{background:var(--color-tape);color:var(--color-on-hivis)}
.tg-steps li.here small{color:var(--color-on-hivis)}
.tg-steps li:last-child{border-right:0}
.tg-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tg-chip{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-4);border:1.5px solid var(--color-text-muted);border-radius:999px;background:var(--color-surface);color:var(--color-text);font-weight:700;font-size:14px;text-decoration:none}
.tg-chip[aria-current]{background:var(--color-text);color:var(--color-page);border-color:var(--color-text)}
.tg-chip[aria-current]::before{content:"\2713\00a0"}
main .tg-checked{margin:0 0 var(--space-3);font:700 13px/1.3 var(--font-figures);display:inline-block}
.tg-tablewrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface)}
.tg-table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
.tg-table th,.tg-table td{padding:11px var(--space-3);text-align:left;border-bottom:1px solid var(--color-line);vertical-align:top}
.tg-table thead th{font:600 11px/1.3 var(--font-figures);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}
.tg-table tbody th{font-weight:700}
.tg-table .num{text-align:right}
.tg-table tr:last-child>*{border-bottom:0}
main>.wrap>.tg-src{margin:var(--space-4) 0 0}
/* product page template (ticket pm-trades-ai-guide-20261009-tpl-product): fact sheet, then the related panels beside it from 1100 px, no ad beside the price or the vendor button */
.tg-profile{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.tg-profile-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);min-width:0;align-content:start}
.tg-profile-main>*{margin:0}
.tg-profile-main section{margin:0}
.tg-profile-main .tg-ad{margin:var(--space-3) auto}
.tg-factsheet{min-width:520px}
.tg-factsheet caption{text-align:left;padding:10px var(--space-3);font-size:14px;color:var(--color-text-muted)}
.tg-factsheet tbody th{width:34%}
.tg-vendor{width:max-content;max-width:100%;text-align:center}
.tg-aside{display:grid;gap:var(--space-3);align-content:start}
.tg-panel{padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface)}
.tg-panel h2{font-size:1.05rem;margin:0 0 var(--space-2)}
.tg-panel p{margin:0;font-size:15px;color:var(--color-text-muted)}
@media (min-width:1100px){.tg-profile{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
/* missed-call page shell (ticket pm-trades-ai-guide-20261009-tpl-missedcall-shell): the inputs and the result side by side from 700 px, the tool list under the fee note */
.tg-calc{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin:0 0 var(--space-6)}
.tg-calc section{margin:0;padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface)}
.tg-slots,.tg-toollist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.tg-slots li,.tg-toollist li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-3);align-items:center;min-height:var(--tap-min);padding:var(--space-2) var(--space-3);border:1.5px dashed var(--color-line);border-radius:var(--radius)}
.tg-slot-value{font-size:14px;color:var(--color-text-muted)}
.tg-calc .tg-result{border:2px solid var(--color-text)}
.tg-answer{margin:0 0 var(--space-3);font:700 1.6rem/1.2 var(--font-figures)}
@media (min-width:700px){.tg-calc{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}.tg-calc.tg-calc-one{grid-template-columns:minmax(0,1fr)}}
/* a focused control scrolls clear of the sticky phone thumb bar (WCAG 2.4.11) */
@media (max-width:699px){html{scroll-padding-bottom:96px}}
main>.wrap>.tg-ad{margin:var(--space-6) auto}
/* missed-call calculator (ticket pm-trades-ai-guide-20261009-missedcall-calculator): labelled text boxes, 48 px tall, with the same focus ring as every other control */
.tg-fields{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.tg-fields li{display:grid;gap:var(--space-1)}
.tg-fields label{font-weight:700}
.tg-fields input,.tg-fields select{box-sizing:border-box;width:100%;min-height:var(--tap-min);padding:0 var(--space-3);font:inherit;font-family:var(--font-figures);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-text-muted);border-radius:var(--radius)}
.tg-fields input[aria-invalid="true"]{border-color:var(--color-text);border-width:3px}
.tg-hint{font-size:14px;color:var(--color-text-muted)}
.tg-method{margin:0 0 var(--space-3);padding-left:1.4em}
.tg-table.tg-compact{min-width:0}
.tg-table.tg-cost{min-width:600px}
.tg-calc-one .tg-answer{font-size:1.15rem;line-height:1.35}
.tg-calc-one h3{margin:0 0 var(--space-3)}
.tg-table caption{padding:var(--space-2) var(--space-3);text-align:left;font-weight:700}
.tg-suits,.tg-vendorcards{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.tg-suits li{display:flex;align-items:center;min-height:var(--tap-min);padding:var(--space-2) var(--space-3);border:1.5px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface)}
.tg-vendorcard{padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface)}
.tg-vendorcard h3,.tg-faq h3{margin:0 0 var(--space-2);font-size:1.05rem}
.tg-faq{display:grid;gap:var(--space-3)}
.tg-faq p{margin:0}
.tg-vendorcards>li{min-width:0}
.tg-vendorcard .tg-vendor{width:auto;max-width:100%}