/* ==========================================================================
   tr-guide.css - information-design components for the Trelawny guide pages
   (planning guides, vibration pages, support). Linked after trelawny.css and
   tr-rail.css on those pages only, so the range pages never churn.
   Prefix g-. Every heading states its own colour (SQS-HEADING-GUARD rule).
   ========================================================================== */

/* ---- hero: the question, a one-line lede, and the answer beside it ---- */
.g-hero{padding:52px 24px 56px}
.g-hero .tr-hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center}
.g-hero h1{font-size:clamp(28px,3.6vw,44px);line-height:1.1;color:#fff;margin-bottom:16px;max-width:none}
.g-hero h1 em{font-style:normal;color:var(--tr-red-light)}
.g-hero .g-lede{font-size:17px;line-height:1.7;color:rgba(255,255,255,.8);max-width:560px;margin:0 0 22px}
.g-meta{font-size:13px;color:rgba(255,255,255,.58);display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px}
.g-meta span{white-space:nowrap}
.g-hero .tr-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* the answer card (white, on the dark hero) */
.g-answer{background:var(--tr-white);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.4);padding:26px 26px 22px;border-top:4px solid var(--tr-red)}
.g-answer-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:var(--tr-red);margin-bottom:10px}
.g-answer p{font-size:15.5px;line-height:1.7;color:var(--tr-text);margin:0}
.g-answer p strong{color:var(--tr-text)}
.g-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--tr-border)}
.g-fig{min-width:0}
.g-fig b{display:block;font-size:clamp(20px,2.1vw,26px);font-weight:900;line-height:1.05;color:var(--tr-red);white-space:nowrap}
.g-fig span{display:block;font-size:12px;line-height:1.4;color:var(--tr-text-mid);margin-top:5px}
/* g-fig-fit: size the figures to the CARD, not the viewport. The widest value ("1999/92/EC") is ~6em
   and a column is (card - 24px) / 3, so 26px only fits a card of 468px+. The vw size overflowed into
   the next column in the 2-column hero. Below 380px (1440 viewport = 382px) the card falls back to
   one figure per row. */
.g-answer{container:g-answer / inline-size}
.g-fig b{font-size:clamp(19px,calc((100cqi - 24px) / 18.5),26px)}
@container g-answer (max-width:379px){
  .g-figs{grid-template-columns:minmax(0,1fr);gap:10px}
  .g-fig{display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:12px;align-items:baseline}
  .g-fig b{font-size:18px;white-space:normal}
  .g-fig span{margin-top:0}
}
/* the smallest phones: "1999/92/EC" at 19px is 4px wider than its 48% column at 320 */
@media(max-width:379px){.g-figs .g-fig b{font-size:18px}}
/* /g-fig-fit */

/* ---- section heads, left-aligned editorial variant ---- */
.g-head{max-width:900px;margin:0 auto 34px}
.g-head.wide{max-width:min(1080px,var(--sd-fit,100%))}
.g-head h2{font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.2;color:var(--tr-text);margin:0 0 10px}
.g-head p{font-size:16.5px;line-height:1.7;color:var(--tr-text-mid);margin:0;max-width:720px}
.section-dark .g-head h2,.section-mid .g-head h2{color:#fff}
.section-dark .g-head p,.section-mid .g-head p{color:rgba(255,255,255,.72)}

.g-wrap{max-width:900px;margin:0 auto}
.g-wrap.wide{max-width:min(1080px,var(--sd-fit,100%))}
.g-prose p{font-size:16px;line-height:1.8;color:var(--tr-text-mid);margin:0 0 16px}
.g-prose p:last-child{margin-bottom:0}
.g-prose strong{color:var(--tr-text)}
.g-prose h3{font-size:19px;font-weight:800;color:var(--tr-text);margin:26px 0 8px}
.section-dark .g-prose p{color:rgba(255,255,255,.74)}
.section-dark .g-prose strong{color:#fff}
.g-src{font-size:13px;line-height:1.7;color:var(--tr-text-light);margin:14px 0 0}
.section-dark .g-src{color:rgba(255,255,255,.55)}
.g-link{color:var(--tr-red);font-weight:700}
.section-dark .g-link{color:var(--tr-red-light)}

/* ---- tables: always inside their own scroll box ---- */
.g-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.g-tw:focus-visible{outline:2px solid var(--tr-red);outline-offset:2px}
.g-tw table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--tr-border)}
.g-tw th,.g-tw td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--tr-border)}
.g-tw thead th{background:var(--tr-dark);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.g-tw tbody th{font-weight:700;color:var(--tr-text);background:#fff}
.g-tw td{color:var(--tr-text-mid)}
.g-tw tbody tr:nth-child(even) td,.g-tw tbody tr:nth-child(even) th{background:var(--tr-light)}
.g-tw tr.is-key th,.g-tw tr.is-key td{background:rgba(207,46,46,.06)!important}
.g-tw caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--tr-text-light);padding-top:10px;line-height:1.6}

/* ---- bar tables: a real <table>, with the time drawn as a bar in its own cell.
        The label always carries the value, so nothing is read from colour alone. ---- */
.g-bars td.g-bc{min-width:220px;width:44%}
.g-bar{display:flex;align-items:center;gap:10px}
.g-bar i{display:block;height:14px;border-radius:3px;background:var(--tr-steel-light);flex:0 0 auto;width:calc(var(--v,0) * 70%);min-width:3px}
.g-bar b{font-weight:700;color:var(--tr-text);white-space:nowrap;font-size:13.5px}
.g-bar.ok i{background:#4a7d5a}
.g-bar.mid i{background:var(--tr-amber-dark)}
.g-bar.bad i{background:var(--tr-red)}
.g-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--tr-text-mid);margin:12px 0 0}
.g-legend span{display:inline-flex;align-items:center;gap:6px}
.g-legend span::before{content:'';width:12px;height:12px;border-radius:2px;background:var(--c)}

/* ---- numbered process ---- */
.g-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:18px;counter-reset:gs}
.g-steps>li{position:relative;background:#fff;border:1px solid var(--tr-border);border-radius:var(--r-lg);padding:24px 22px 22px;counter-increment:gs;box-shadow:var(--shadow)}
.g-steps>li::before{content:counter(gs);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--tr-red);color:#fff;font-weight:900;font-size:15px;margin-bottom:14px}
.g-steps h3{font-size:17px;font-weight:800;line-height:1.3;color:var(--tr-text);margin:0 0 8px}
.g-steps p{font-size:14.5px;line-height:1.7;color:var(--tr-text-mid);margin:0}
.g-steps .g-tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--tr-red);margin-bottom:6px}
.section-light .g-steps>li{box-shadow:none}

/* ---- side-by-side cards with the same rows (compare on one basis) ---- */
.g-vs{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:20px}
.g-vs-card{background:#fff;border:1px solid var(--tr-border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.g-vs-card.is-pick{border-color:var(--tr-red);box-shadow:0 14px 34px var(--tr-red-glow)}
.g-vs-top{padding:20px 22px 16px;border-bottom:1px solid var(--tr-border)}
.g-vs-top .g-tag{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--tr-red);margin-bottom:6px}
.g-vs-top h3{font-size:18px;font-weight:800;line-height:1.25;color:var(--tr-text);margin:0}
.g-vs-top p{font-size:14px;line-height:1.6;color:var(--tr-text-mid);margin:8px 0 0}
.g-vs-img{background:linear-gradient(135deg,#f5f5f7,#e7e7ec);aspect-ratio:16/10;overflow:hidden}
.g-vs-img img{width:100%;height:100%;object-fit:cover;display:block}
.g-vs-img.contain img{object-fit:contain;padding:14px}
.g-vs dl{margin:0;padding:6px 22px;flex:1}
.g-vs dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--tr-border)}
.g-vs dl div:last-child{border-bottom:0}
.g-vs dt{font-size:13px;color:var(--tr-text-light);flex:0 0 auto;max-width:48%}
.g-vs dd{margin:0;font-size:13.5px;font-weight:700;color:var(--tr-text);text-align:right}
.g-vs-best{margin:0;padding:14px 22px;background:var(--tr-light);font-size:14px;line-height:1.6;color:var(--tr-text-mid)}
.g-vs-best strong{color:var(--tr-text)}
.g-vs-best a{color:var(--tr-red);font-weight:700}

/* ---- decision rows: situation -> answer ---- */
.g-decide{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.g-decide>li{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.25fr);align-items:center;gap:14px;background:#fff;border:1px solid var(--tr-border);border-radius:var(--r);padding:16px 20px}
.g-decide .g-if{font-size:14.5px;line-height:1.55;color:var(--tr-text-mid)}
.g-decide .g-if b{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--tr-text-light);margin-bottom:3px}
.g-decide .g-arrow{color:var(--tr-red);font-size:20px;font-weight:900;text-align:center}
.g-decide .g-then{font-size:15px;line-height:1.55;color:var(--tr-text)}
.g-decide .g-then strong{color:var(--tr-text)}
.g-decide .g-then a{color:var(--tr-red);font-weight:700;white-space:nowrap}
.section-dark .g-decide>li{background:var(--tr-dark-mid);border-color:rgba(255,255,255,.1)}
.section-dark .g-decide .g-if{color:rgba(255,255,255,.7)}
.section-dark .g-decide .g-if b{color:rgba(255,255,255,.5)}
.section-dark .g-decide .g-then,.section-dark .g-decide .g-then strong{color:#fff}
.section-dark .g-decide .g-then a{color:var(--tr-red-light)}

/* ---- callouts ---- */
.g-call{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;border-radius:var(--r);padding:18px 20px;margin:22px 0;background:var(--tr-red-glow);border-left:4px solid var(--tr-red)}
.g-call svg{width:24px;height:24px;color:var(--tr-red);margin-top:1px}
.g-call p{margin:0;font-size:15px;line-height:1.7;color:var(--tr-text-mid)}
.g-call p+p{margin-top:8px}
.g-call strong{color:var(--tr-text)}
.g-call.warn{background:rgba(246,185,53,.14);border-left-color:var(--tr-amber-dark)}
.g-call.warn svg{color:var(--tr-amber-dark)}
.g-call.info{background:#eef0f3;border-left-color:var(--tr-steel-light)}
.g-call.info svg{color:var(--tr-steel-light)}

/* ---- spec / fact tiles ---- */
.g-facts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;margin:0}
.g-facts>div{background:#fff;border:1px solid var(--tr-border);border-radius:var(--r);padding:16px 16px 14px;min-width:0}
.g-facts dt{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--tr-text-light);margin-bottom:6px}
.g-facts dd{margin:0;font-size:22px;font-weight:900;line-height:1.1;color:var(--tr-text)}
.g-facts dd small{display:block;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--tr-text-mid);margin-top:6px}
.g-split .g-facts dd{font-size:19px}
.section-dark .g-facts>div{background:var(--tr-dark-mid);border-color:rgba(255,255,255,.1)}
.section-dark .g-facts dt{color:rgba(255,255,255,.55)}
.section-dark .g-facts dd{color:#fff}
.section-dark .g-facts dd small{color:rgba(255,255,255,.68)}

/* ---- two-column: text beside a figure or a list ---- */
.g-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.g-split.top{align-items:start}
.g-fig-img{margin:0;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,#f5f5f7,#e7e7ec);box-shadow:var(--shadow)}
.g-fig-img img{width:100%;height:auto;display:block}
.g-fig-img.crop{aspect-ratio:4/3}
.g-fig-img.crop img{height:100%;object-fit:cover}
.g-fig-img figcaption{font-size:13px;line-height:1.6;color:var(--tr-text-light);padding:10px 14px;background:#fff}

/* ---- plain check list and pill list ---- */
.g-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.g-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.65;color:var(--tr-text-mid)}
.g-list li::before{content:'';position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--tr-red)}
.g-list li strong{color:var(--tr-text)}
.section-dark .g-list li{color:rgba(255,255,255,.75)}
.section-dark .g-list li strong{color:#fff}

/* ---- formula chip ---- */
.g-formula{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;background:var(--tr-dark);color:#fff;border-radius:var(--r);padding:12px 18px;font-size:15px;margin:4px 0 16px}
.g-formula code{font-family:ui-monospace,Consolas,monospace;font-size:16px;font-weight:700;color:var(--tr-amber)}
.g-formula span{font-size:13px;color:rgba(255,255,255,.7)}

/* ---- interactive tool frame ---- */
.g-tool{background:#fff;border:1px solid var(--tr-border);border-radius:var(--r-lg);box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);overflow:hidden}
.g-tool-in{padding:26px 26px 22px;display:grid;gap:18px;align-content:start}
.g-tool-out{background:var(--tr-dark);color:#fff;padding:26px;display:grid;gap:14px;align-content:start}
.g-field{display:grid;gap:7px}
.g-field>label,.g-field>.g-flbl{font-size:13px;font-weight:700;color:var(--tr-text)}
.g-field select,.g-field input[type=number]{font:inherit;font-size:15px;padding:11px 12px;border:1px solid #cfcfd6;border-radius:var(--r);background:#fff;color:var(--tr-text);min-height:44px;width:100%}
.g-field select:focus-visible,.g-field input:focus-visible{outline:2px solid var(--tr-red);outline-offset:1px;border-color:var(--tr-red)}
.g-field small{font-size:12.5px;line-height:1.5;color:var(--tr-text-light)}
.g-seg{display:flex;flex-wrap:wrap;gap:8px}
.g-seg label{position:relative;cursor:pointer}
.g-seg input{position:absolute;opacity:0;pointer-events:none}
.g-seg span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid #cfcfd6;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--tr-text);background:#fff}
.g-seg input:checked+span{background:var(--tr-red);border-color:var(--tr-red);color:#fff}
.g-seg input:focus-visible+span{outline:2px solid var(--tr-red);outline-offset:2px}
.g-out-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;color:rgba(255,255,255,.55)}
.g-out-big{font-size:clamp(34px,4vw,48px);font-weight:900;line-height:1;color:var(--tr-red-light)}
.g-out-big small{font-size:16px;font-weight:700;color:rgba(255,255,255,.7);margin-left:6px}
.g-out-rows{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.12)}
.g-out-rows div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
.g-out-rows dt{color:rgba(255,255,255,.66)}
.g-out-rows dd{margin:0;font-weight:800;color:#fff;text-align:right}
.g-out-note{font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);margin:0}
.g-out-note strong{color:#fff}
.g-verdict{border-radius:var(--r);padding:16px 18px;background:var(--tr-dark-mid);border-left:4px solid var(--tr-amber)}
.g-verdict h3{font-size:18px;font-weight:800;line-height:1.3;color:#fff;margin:0 0 6px}
.g-verdict p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.75);margin:0}
.g-verdict.go{border-left-color:#5fae76}
.g-verdict.stop{border-left-color:var(--tr-red-light)}

/* ---- marking decoder ---- */
.g-mark{display:flex;flex-wrap:wrap;gap:8px;font-family:ui-monospace,Consolas,monospace}
.g-mark button{font:inherit;font-size:17px;font-weight:700;padding:10px 14px;min-height:44px;border-radius:var(--r);border:1px solid rgba(255,255,255,.18);background:var(--tr-dark-mid);color:#fff;cursor:pointer}
.g-mark button[aria-pressed=true]{background:var(--tr-red);border-color:var(--tr-red)}
.g-mark button:focus-visible{outline:2px solid var(--tr-amber);outline-offset:2px}
.g-mark-out{margin-top:16px;min-height:78px;background:var(--tr-dark-mid);border-radius:var(--r);padding:16px 18px;border-left:4px solid var(--tr-amber)}
.g-mark-out b{display:block;font-size:16px;color:#fff;margin-bottom:4px}
.g-mark-out p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.76)}

/* ---- guide cards (hub + "next") ---- */
.g-cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:18px}
.g-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tr-border);border-radius:var(--r-lg);padding:22px 22px 20px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.g-card:hover{border-color:var(--tr-red);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.g-card:focus-visible{outline:2px solid var(--tr-red);outline-offset:3px}
.g-card .g-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--tr-red);margin-bottom:8px}
.g-card h3{font-size:17px;font-weight:800;line-height:1.3;color:var(--tr-text);margin:0 0 8px}
.g-card p{font-size:14px;line-height:1.6;color:var(--tr-text-mid);margin:0 0 14px;flex:1}
.g-card .g-num{font-size:24px;font-weight:900;color:var(--tr-text);line-height:1;margin:2px 0 10px}
.g-card .g-num small{font-size:12.5px;font-weight:600;color:var(--tr-text-light);margin-left:6px}
.g-card .g-go{font-size:14px;font-weight:700;color:var(--tr-red)}
.g-card.hidden{display:none}
.g-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.g-chips button{font:inherit;font-size:13.5px;font-weight:700;min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid #d6d6dc;background:#fff;color:var(--tr-text);cursor:pointer}
.g-chips button[aria-pressed=true]{background:var(--tr-red);border-color:var(--tr-red);color:#fff}
.g-chips button:focus-visible{outline:2px solid var(--tr-red);outline-offset:2px}

/* ---- the enquiry band above the form: what to send us ---- */
.g-send{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto 0;padding:0;list-style:none;max-width:760px}
.g-send li{font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 13px}

/* .g-wrap centres a block; components that reset margin (g-facts, g-steps, g-decide, g-list, g-src,
   g-legend) are declared later and used to win, leaving the block hugging the left edge. Doubled class
   = higher specificity, so the centring always holds; top/bottom margins still come from the component. */
.g-wrap.g-wrap{margin-left:auto;margin-right:auto}

/* tap targets on pages that load this kit: vibration-comparison sort headers, HAVS calculator sliders */
table.vc-table th button{display:inline-flex;align-items:center;min-height:32px;padding:4px 0}
table.vc-table th button:focus-visible{outline:2px solid var(--tr-amber);outline-offset:2px}
.hav-calc .hav-calc-controls input[type=range]{height:32px}

/* ---- responsive ---- */
@media(max-width:1100px){
  .g-hero .tr-hero-inner{grid-template-columns:minmax(0,1fr);gap:28px}
  .g-tool{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .g-steps,.g-vs,.g-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .g-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-split{grid-template-columns:minmax(0,1fr);gap:24px}
}
/* tablets: a 3-item (or any odd) set in 2 columns left one card alone on a half-empty row; centre it at card width */
@media(min-width:641px) and (max-width:900px){
  .g-steps>:last-child:nth-child(odd),.g-vs>:last-child:nth-child(odd),.g-cards>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}
  .g-facts>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}
}
@media(max-width:640px){
  .g-hero{padding:36px 20px 40px}
  .g-steps,.g-vs,.g-cards{grid-template-columns:minmax(0,1fr)}
  /* phones: one figure per row, value beside its label, instead of three ~87px columns */
  .g-figs{grid-template-columns:minmax(0,1fr);gap:10px}
  .g-fig{display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:12px;align-items:baseline}
  .g-fig b{font-size:19px;white-space:normal}
  .g-fig span{margin-top:0}
  .g-decide>li{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 16px}
  .g-decide .g-arrow{display:none}
  .g-decide .g-then a{white-space:normal}
  .g-answer{padding:20px 18px 18px}
  .g-tool-in,.g-tool-out{padding:20px 18px}
  .g-facts dd{font-size:19px}
  .g-bars td.g-bc{min-width:170px}
}
@media(prefers-reduced-motion:reduce){.g-card{transition:none}.g-card:hover{transform:none}}