/*!
 * Tracom Tools Design System v2.0  --  "spec sheet meets control room"
 * Hardware-brand look for tracom.io: graphite bands, the green chevron from the logo, ruled spec tables,
 * LED status lamps, tabular numerals. Every rule is scoped under .trt so it can live inside any WordPress theme.
 * Direction-aware: logical properties only; dir="rtl" is first class (IBM Plex Sans Arabic).
 * Docs: DESIGN.md (tokens, components, snippets).  Art kit: kit/art/.
 */

.trt{
  /* ---- Tracom palette (measured on tracom.io) ---- */
  --trt-green:#40bd61;           /* primary accent: buttons, LEDs, chevrons on dark */
  --trt-green-deep:#0F7A3F;      /* text/links/focus on white (5.4:1) */
  --trt-graphite:#222021;        /* headings, dark header/hero */
  --trt-amber:#ffcd57;           /* secondary highlight, "check" state */
  --trt-light:#F2F5F7;           /* light surface */
  /* legacy names (engine, art and archetype markup rely on these) */
  --trt-brand:#0F7A3F;
  --trt-brand-ink:#0F7A3F;
  --trt-accent:#40bd61;
  --trt-accent-hover:#58cf77;
  --trt-grey:#383b39;            /* body text on white: 11:1 (brand gray #808380 is decoration only) */
  --trt-beige:#FFF4D6;           /* warm note background */
  --trt-ink:#222021;
  --trt-muted:#555a56;           /* 7:1 on white */
  --trt-faint:#666b67;           /* 5.3:1 on white, 4.9:1 on light */
  --trt-bg:#ffffff;
  --trt-surface:#F2F5F7;
  --trt-surface-2:#E4EAEE;
  --trt-line:#DAE1E5;
  --trt-line-strong:#B6C1C8;
  --trt-field-line:#76828a;      /* control edges 3.9:1 */
  /* dark surfaces: hero, result panel, dialog header */
  --trt-panel:#222021;
  --trt-panel-2:#2c2b2c;
  --trt-panel-3:#393839;
  --trt-panel-line:rgba(255,255,255,.13);
  --trt-panel-text:#F2F5F7;
  --trt-panel-muted:#adb3af;     /* 7:1 on graphite */
  /* status: always paired with a glyph or text, never colour alone */
  --trt-ok:#0F7A3F;   --trt-ok-bg:#E1F3E7;
  --trt-warn:#8a5a00; --trt-warn-bg:#FFF3CF;
  --trt-bad:#B3261E;  --trt-bad-bg:#FCE9E7;
  --trt-info:#2f5368; --trt-info-bg:#E4EEF3;
  /* category hue (decoration only): default = brand green. Override with data-cat / data-hue */
  --trt-hue:#40bd61; --trt-hue-ink:#0F7A3F; --trt-hue-dk:#4fd172; --trt-hue-soft:#E1F3E7; --trt-hue-glow:rgba(64,189,97,.24);
  /* type */
  --trt-font-head:"DM Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --trt-font:"Inter","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --trt-font-num:"DM Sans","Inter",system-ui,sans-serif;
  /* shape: hardware = tighter corners; pills only for buttons and chips */
  --trt-r-sm:6px; --trt-r:8px; --trt-r-lg:12px; --trt-r-pill:999px;
  --trt-shadow:0 1px 2px rgba(34,32,33,.06),0 10px 24px -14px rgba(34,32,33,.22);
  --trt-shadow-lg:0 28px 56px -28px rgba(0,0,0,.6);
  --trt-max:1240px;
  --trt-gutter:clamp(16px,4vw,32px);
  --trt-focus:0 0 0 2px #fff,0 0 0 4px #0F7A3F;
  --trt-card-px:clamp(20px,2.4vw,28px);
  --trt-tbl-bg:#fff;--trt-tbl-shade:rgba(34,32,33,.4);
  /* chevron tile (mask): the logo arrow, pointing along the reading direction */
  --trt-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M1 0h5l6 6-6 6H1l6-6z' fill='%23000'/%3E%3C/svg%3E");

  --trt-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 0h5l7 6-7 6H0l7-6z' fill='%23000'/%3E%3C/svg%3E");

  font-family:var(--trt-font);
  color:var(--trt-grey);
  background:var(--trt-bg);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.trt[dir="rtl"]{
  --trt-font:"IBM Plex Sans Arabic","Inter",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  --trt-font-head:"IBM Plex Sans Arabic","DM Sans",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  --trt-font-num:"DM Sans","IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --trt-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M23 0h-5l-6 6 6 6h5l-6-6z' fill='%23000'/%3E%3C/svg%3E");
  --trt-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M12 0H7L0 6l7 6h5L5 6z' fill='%23000'/%3E%3C/svg%3E");
  line-height:1.75;
}

/* ---- Category hues: same brand palette, four moods. Steel: network compliance tender dev privacy tech. Deep green: install safety maintenance. Put data-cat on the .trt root of an item page (and it
   reaches the hub card of that item through the card's own data-cat). ---- */
.trt[data-hue="green"],.trt [data-hue="green"],
.trt[data-cat="video"],.trt [data-cat="video"],.trt[data-cat="fleet"],.trt [data-cat="fleet"]{
  --trt-hue:#40bd61;--trt-hue-ink:#0F7A3F;--trt-hue-dk:#4fd172;--trt-hue-soft:#E1F3E7;--trt-hue-glow:rgba(64,189,97,.24)}
.trt[data-hue="deep"],.trt [data-hue="deep"],
.trt[data-cat="install"],.trt [data-cat="install"],.trt[data-cat="safety"],.trt [data-cat="safety"],.trt[data-cat="maintenance"],.trt [data-cat="maintenance"]{
  --trt-hue:#0F7A3F;--trt-hue-ink:#0F7A3F;--trt-hue-dk:#46c46a;--trt-hue-soft:#DCEFE3;--trt-hue-glow:rgba(15,122,63,.45)}
.trt[data-hue="amber"],.trt [data-hue="amber"],
.trt[data-cat="fuel"],.trt [data-cat="fuel"],.trt[data-cat="roi"],.trt [data-cat="roi"]{
  --trt-hue:#ffcd57;--trt-hue-ink:#8a5a00;--trt-hue-dk:#ffcd57;--trt-hue-soft:#FFF3CF;--trt-hue-glow:rgba(255,205,87,.2)}
.trt[data-hue="steel"],.trt [data-hue="steel"],
.trt[data-cat="network"],.trt [data-cat="network"],.trt[data-cat="compliance"],.trt [data-cat="compliance"],.trt[data-cat="tender"],.trt [data-cat="tender"],.trt[data-cat="dev"],.trt [data-cat="dev"],.trt[data-cat="privacy"],.trt [data-cat="privacy"],.trt[data-cat="tech"],.trt [data-cat="tech"]{
  --trt-hue:#6f93a8;--trt-hue-ink:#2f5368;--trt-hue-dk:#9cc3d8;--trt-hue-soft:#E4EEF3;--trt-hue-glow:rgba(111,147,168,.28)}

.trt *,.trt *::before,.trt *::after{box-sizing:border-box}
.trt [hidden]{display:none!important}
.trt img,.trt svg{max-width:100%;display:block}
.trt a{color:var(--trt-brand-ink);text-decoration:none}
.trt a:hover{text-decoration:underline;text-underline-offset:3px}
.trt .trt-prose p a,.trt .trt-prose li a,.trt .trt-lead a,.trt .trt-faq a,.trt .trt-hint a,.trt .trt-note a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.trt :focus-visible{outline:none;box-shadow:var(--trt-focus);border-radius:4px}
.trt p{margin:0}
.trt h1,.trt h2,.trt h3,.trt h4{font-family:var(--trt-font-head);color:var(--trt-ink);margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.12}
.trt[dir="rtl"] h1,.trt[dir="rtl"] h2,.trt[dir="rtl"] h3,.trt[dir="rtl"] h4{letter-spacing:0;line-height:1.4}
.trt .trt-num{font-family:var(--trt-font-num);font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.trt .trt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trt .trt-wrap{max-width:var(--trt-max);margin-inline:auto;padding-inline:var(--trt-gutter)}
.trt .trt-section{padding-block:clamp(48px,7vw,88px)}
.trt .trt-section--tint{background:var(--trt-surface)}
.trt .trt-section--line{border-top:1px solid var(--trt-line)}
.trt .trt-section--dark{background:var(--trt-panel);color:var(--trt-panel-text)}

/* ---------- Type scale ----------
   h1 34-56  |  h2 26-36  |  h3 19-22  |  lead 17-19  |  body 16  |  small 13  |  spec label 12.5 600
   Headings: DM Sans 600 (Arabic: IBM Plex Sans Arabic 600). Numbers: DM Sans + tabular-nums. */
.trt .trt-h1{font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.03em}
.trt[dir="rtl"] .trt-h1{line-height:1.3}
.trt .trt-h1 em{font-style:normal;color:inherit}
.trt .trt-h2{font-size:clamp(26px,3.2vw,36px)}
.trt .trt-h3{font-size:clamp(19px,2vw,22px);letter-spacing:-.012em}
.trt .trt-lead{font-size:clamp(17px,1.6vw,19px);color:var(--trt-muted);max-width:60ch}
.trt .trt-small{font-size:13px;color:var(--trt-muted)}
.trt .trt-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
.trt .trt-head--split{grid-template-columns:1.2fr 1fr;align-items:end;gap:32px}
@media (max-width:860px){.trt .trt-head--split{grid-template-columns:minmax(0,1fr)}}

/* Eyebrow = section tag with the logo arrow as marker. In heroes it becomes a status tag with an LED. */
.trt .trt-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--trt-hue-ink);font-family:var(--trt-font-head)}
.trt[dir="rtl"] .trt-eyebrow{letter-spacing:0;font-size:14px}
.trt .trt-eyebrow::before{content:"";flex:none;width:11px;height:11px;background:var(--trt-hue);-webkit-mask:var(--trt-arrow) center/contain no-repeat;mask:var(--trt-arrow) center/contain no-repeat}
.trt .trt-eyebrow--plain::before{display:none}

/* Chevron rail: a road-marking divider made of the logo arrow, fading out along the reading direction */
.trt .trt-rail{display:block;height:10px;border:0;margin:0;background:linear-gradient(90deg,var(--trt-hue),transparent 78%);-webkit-mask:var(--trt-chev) 0 0/20px 10px repeat-x;mask:var(--trt-chev) 0 0/20px 10px repeat-x}
.trt[dir="rtl"] .trt-rail{background:linear-gradient(270deg,var(--trt-hue),transparent 78%)}

/* ---------- Breadcrumb ---------- */
.trt .trt-crumbs{font-size:13px;color:var(--trt-muted);padding-block:16px}
.trt .trt-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.trt .trt-crumbs li{display:flex;align-items:center;gap:10px}
.trt .trt-crumbs li+li::before{content:"";width:7px;height:9px;background:var(--trt-line-strong);-webkit-mask:var(--trt-arrow) center/contain no-repeat;mask:var(--trt-arrow) center/contain no-repeat}
.trt .trt-crumbs a{color:var(--trt-muted)}
.trt .trt-crumbs [aria-current]{color:var(--trt-ink);font-weight:600}
/* a breadcrumb row directly above a hero continues the dark band (full bleed without extra markup) */
.trt .trt-crumbs:has(+ .trt-hero){background:var(--trt-panel);color:var(--trt-panel-muted);box-shadow:0 0 0 100vmax var(--trt-panel);clip-path:inset(0 -100vmax)}
.trt .trt-crumbs:has(+ .trt-hero) a{color:var(--trt-panel-muted)}
.trt .trt-crumbs:has(+ .trt-hero) [aria-current]{color:#fff}
.trt .trt-crumbs:has(+ .trt-hero) li+li::before{background:rgba(255,255,255,.35)}
.trt .trt-crumbs:has(+ .trt-hero--schematic){background:var(--trt-blue-dark,#1d2830);box-shadow:0 0 0 100vmax var(--trt-blue-dark,#1d2830)}


/* ---------- Buttons: pills like tracom.io ---------- */
.trt .trt-btn{--b:var(--trt-accent);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 24px;border-radius:var(--trt-r-pill);border:2px solid transparent;font-family:var(--trt-font-head);font-weight:600;font-size:15px;line-height:1.25;cursor:pointer;text-decoration:none!important;transition:background .15s,border-color .15s,color .15s,transform .15s;white-space:nowrap}
.trt[dir="rtl"] .trt-btn{font-size:15.5px}
.trt .trt-btn svg{width:18px;height:18px;flex:none}
.trt[dir="rtl"] svg.trt-flip{transform:scaleX(-1)}
.trt .trt-btn--primary{background:var(--trt-accent);color:var(--trt-graphite)}
.trt .trt-btn--primary:hover{background:var(--trt-accent-hover)}
.trt .trt-btn--primary:active{transform:translateY(1px)}
.trt .trt-btn--dark{background:var(--trt-graphite);color:#fff}
.trt .trt-btn--dark:hover{background:var(--trt-panel-3)}
.trt .trt-btn--outline{background:transparent;border-color:var(--trt-graphite);color:var(--trt-graphite)}
.trt .trt-btn--outline:hover{background:var(--trt-graphite);color:#fff}
.trt .trt-btn--ghost{background:transparent;color:var(--trt-brand-ink);padding-inline:8px;min-height:40px}
.trt .trt-btn--ghost:hover{background:var(--trt-hue-soft)}
.trt .trt-btn--sm{min-height:38px;padding:7px 16px;font-size:14px}
.trt .trt-btn[disabled]{opacity:.5;cursor:not-allowed}
.trt .trt-link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-family:var(--trt-font-head)}
.trt .trt-link-arrow svg{width:16px;height:16px;transition:transform .15s}
.trt .trt-link-arrow:hover svg{transform:translateX(3px)}
.trt[dir="rtl"] .trt-link-arrow svg{transform:scaleX(-1)}
.trt[dir="rtl"] .trt-link-arrow:hover svg{transform:scaleX(-1) translateX(3px)}

/* ---------- Chips / tags ---------- */
.trt .trt-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--trt-r-pill);background:var(--trt-hue-soft);color:var(--trt-hue-ink);white-space:nowrap}
.trt .trt-chip--soon{background:var(--trt-beige);color:#7a5418}
.trt .trt-chip--region{background:#fff;border:1px solid var(--trt-line);color:var(--trt-muted)}
.trt .trt-chip--region{white-space:normal;max-width:100%;text-align:start}
.trt .trt-chip--region svg{width:13px;height:13px}
.trt .trt-tcard .trt-fmt{min-width:0}
.trt .trt-fmt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;font-weight:600;color:var(--trt-muted);font-family:var(--trt-font-num)}
.trt .trt-chip--dark{background:rgba(255,255,255,.08);color:var(--trt-panel-text);border:1px solid var(--trt-panel-line)}
.trt .trt-chip svg{width:14px;height:14px}
.trt .trt-trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--trt-muted);list-style:none;margin:0;padding:0}
.trt .trt-trust li{display:flex;align-items:center;gap:8px}
.trt .trt-trust svg{width:18px;height:18px;color:var(--trt-hue-ink);flex:none}

/* ---------- Cards ---------- */
.trt .trt-card{background:#fff;border:1px solid var(--trt-line);border-radius:var(--trt-r-lg);padding:var(--trt-card-px)}
.trt .trt-card--flat{border-radius:var(--trt-r)}
.trt .trt-grid{display:grid;gap:clamp(16px,2vw,24px)}
.trt .trt-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.trt .trt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.trt .trt-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.trt .trt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.trt .trt-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.trt .trt-grid--2,.trt .trt-grid--3,.trt .trt-grid--4{grid-template-columns:minmax(0,1fr)}}
/* icon tile = a little device-label: graphite square, hue pictogram */
.trt .trt-icon{width:44px;height:44px;border-radius:var(--trt-r);display:grid;place-items:center;background:var(--trt-graphite);color:var(--trt-hue-dk);flex:none}
.trt .trt-icon svg{width:22px;height:22px}
.trt .trt-step-n{font-size:13px;font-weight:600;color:var(--trt-hue-ink);font-family:var(--trt-font-num);font-variant-numeric:tabular-nums}

/* ---------- Form controls: big, readable, glove-friendly ---------- */
.trt .trt-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}
.trt .trt-fields--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.trt .trt-fields .trt-span{grid-column:1/-1}
@media (max-width:600px){.trt .trt-fields,.trt .trt-fields--3{grid-template-columns:minmax(0,1fr)}}
.trt .trt-field{display:grid;gap:6px;align-content:start;min-width:0}
.trt .trt-label{font-size:14px;font-weight:600;color:var(--trt-ink);display:flex;align-items:center;gap:6px;justify-content:space-between}
.trt .trt-label .trt-opt{font-weight:500;color:var(--trt-faint);font-size:12px}
.trt .trt-input{position:relative;display:flex;align-items:stretch;border:1px solid var(--trt-field-line);border-radius:var(--trt-r);background:#fff;transition:border-color .15s,box-shadow .15s}
.trt .trt-input:focus-within{border-color:var(--trt-brand);box-shadow:0 0 0 3px rgba(64,189,97,.38)}
.trt .trt-input input,.trt .trt-input select,.trt select.trt-select,.trt input.trt-text{flex:1;min-width:0;width:100%;min-height:50px;padding:10px 14px;border:0;background:transparent;font:inherit;font-size:17px;font-weight:500;color:var(--trt-ink);font-family:var(--trt-font-num);font-variant-numeric:tabular-nums}
.trt .trt-input input:focus,.trt .trt-input select:focus{outline:none;box-shadow:none}
.trt .trt-input select,.trt select.trt-select{font-family:var(--trt-font);font-size:16px;appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222021' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 14px center}
.trt[dir="rtl"] .trt-input select,.trt[dir="rtl"] select.trt-select{background-position:left 14px center}
.trt select.trt-select,.trt input.trt-text{border:1px solid var(--trt-field-line);border-radius:var(--trt-r);background-color:#fff}
.trt select.trt-select:focus,.trt input.trt-text:focus{outline:none;border-color:var(--trt-brand);box-shadow:0 0 0 3px rgba(64,189,97,.38)}
/* unit cap: reads like the unit plate on an instrument */
.trt .trt-unit{display:flex;align-items:center;padding-inline:13px;font-size:13px;font-weight:600;color:var(--trt-ink);font-family:var(--trt-font-num);background:var(--trt-surface-2);border-inline-start:1px solid var(--trt-line-strong);border-start-end-radius:calc(var(--trt-r) - 1px);border-end-end-radius:calc(var(--trt-r) - 1px);white-space:nowrap}
.trt .trt-hint{font-size:13px;color:var(--trt-muted);line-height:1.5}
.trt .trt-err{display:none;font-size:13px;font-weight:600;color:var(--trt-bad);align-items:center;gap:6px}
.trt .trt-err::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--trt-bad);color:#fff;font-size:11px;flex:none}
.trt .trt-field.is-invalid .trt-input{border-color:var(--trt-bad);box-shadow:0 0 0 3px rgba(179,38,30,.14)}
.trt .trt-field.is-invalid .trt-err{display:flex}
.trt .trt-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.trt .trt-check input{width:18px;height:18px;margin-top:3px;accent-color:var(--trt-brand);flex:none}

/* Segmented control: looks like a hardware selector switch */
.trt .trt-seg{display:inline-flex;padding:3px;gap:3px;border-radius:var(--trt-r);background:var(--trt-surface-2);border:1px solid var(--trt-line-strong);flex-wrap:wrap}
.trt .trt-seg button{min-height:38px;padding:6px 14px;border-radius:5px;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--trt-muted);cursor:pointer}
.trt .trt-seg button[aria-pressed="true"]{background:var(--trt-graphite);color:#fff;box-shadow:0 1px 3px rgba(34,32,33,.3)}

/* Tabs: file-folder tabs along the top of the tool card */
.trt .trt-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;background:var(--trt-surface);border-bottom:1px solid var(--trt-line-strong);margin-inline:calc(-1 * var(--trt-card-px));padding-inline:0;border-start-start-radius:calc(var(--trt-r-lg) - 1px);border-start-end-radius:calc(var(--trt-r-lg) - 1px);-webkit-overflow-scrolling:touch}
.trt .trt-tabs::-webkit-scrollbar{display:none}
.trt .trt-tab{flex:none;display:flex;align-items:center;gap:8px;min-height:54px;padding:10px 18px;border:0;border-inline-end:1px solid var(--trt-line);background:none;font-family:var(--trt-font-head);font-size:14.5px;font-weight:600;color:var(--trt-muted);cursor:pointer;border-top:3px solid transparent;margin-bottom:-1px;transition:background .15s,color .15s}
.trt .trt-tab:hover{color:var(--trt-ink);background:rgba(255,255,255,.6)}
.trt .trt-tab svg{width:18px;height:18px}
.trt .trt-tab[aria-selected="true"]{color:var(--trt-ink);background:#fff;border-top-color:var(--trt-hue);border-bottom:1px solid #fff}
.trt .trt-tab[aria-selected="true"] svg{color:var(--trt-hue-ink)}
.trt .trt-tab .trt-tab-tag{font-size:11px;padding:2px 7px;border-radius:var(--trt-r-pill);background:var(--trt-hue-soft);color:var(--trt-hue-ink)}
.trt .trt-tabpanel[hidden]{display:none}


/* ==========================================================================
   HERO: graphite band, blueprint grid, hue glow, status-tag eyebrow, chevron rail
   ========================================================================== */
.trt .trt-hero{
  --trt-ink:#fff;--trt-grey:#d3d8d4;--trt-muted:#b7beb9;--trt-faint:#a0a8a3;
  --trt-brand-ink:var(--trt-hue-dk);--trt-hue-ink:var(--trt-hue-dk);
  --trt-line:rgba(255,255,255,.15);--trt-line-strong:rgba(255,255,255,.32);
  --trt-surface:rgba(255,255,255,.06);--trt-surface-2:rgba(255,255,255,.1);
  --trt-focus:0 0 0 2px #222021,0 0 0 4px #40bd61;
  --trt-dir:1;
  position:relative;isolation:isolate;overflow:hidden;color:var(--trt-grey);border:0;
  background:
    radial-gradient(760px 380px at 88% -8%,var(--trt-hue-glow),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px,
    var(--trt-graphite)}
.trt[dir="rtl"] .trt-hero{--trt-dir:-1;background:
    radial-gradient(760px 380px at 12% -8%,var(--trt-hue-glow),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px,
    var(--trt-graphite)}
.trt .trt-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:10px;z-index:1;background:linear-gradient(90deg,var(--trt-hue),transparent 80%);-webkit-mask:var(--trt-chev) 0 0/20px 10px repeat-x;mask:var(--trt-chev) 0 0/20px 10px repeat-x;pointer-events:none}
.trt[dir="rtl"] .trt-hero::after{background:linear-gradient(270deg,var(--trt-hue),transparent 80%)}
.trt .trt-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(24px,4vw,48px) clamp(52px,7vw,84px);position:relative;z-index:2}
.trt .trt-hero__copy{display:grid;gap:20px;min-width:0}
.trt .trt-hero__copy>.trt-eyebrow{justify-self:start}
.trt .trt-hero__side{display:grid;gap:16px;min-width:0}
@media (max-width:960px){.trt .trt-hero__grid{grid-template-columns:minmax(0,1fr)}}
.trt .trt-hero .trt-eyebrow{padding:5px 13px 5px 11px;border:1px solid rgba(255,255,255,.22);border-radius:var(--trt-r-pill);background:rgba(255,255,255,.05);color:#e9eeea}
.trt[dir="rtl"] .trt-hero .trt-eyebrow{padding:5px 11px 5px 13px}
.trt .trt-hero .trt-eyebrow::before{width:8px;height:8px;border-radius:50%;-webkit-mask:none;mask:none;background:var(--trt-green);box-shadow:0 0 0 3px rgba(64,189,97,.22),0 0 10px 1px rgba(64,189,97,.85);animation:trt-led 3.2s ease-in-out infinite}
@keyframes trt-led{0%,100%{box-shadow:0 0 0 3px rgba(64,189,97,.22),0 0 10px 1px rgba(64,189,97,.85)}50%{box-shadow:0 0 0 3px rgba(64,189,97,.1),0 0 4px 0 rgba(64,189,97,.5)}}
.trt .trt-hero .trt-h1{color:#fff}
.trt .trt-hero .trt-lead{color:#c3cac5}
.trt .trt-hero .trt-btn--outline{border-color:rgba(255,255,255,.55);color:#fff}
.trt .trt-hero .trt-btn--outline:hover{background:#fff;color:var(--trt-graphite);border-color:#fff}
.trt .trt-hero .trt-btn--ghost{color:var(--trt-hue-dk)}
.trt .trt-hero .trt-trust{color:#bcc4be}
.trt .trt-hero .trt-trust svg{color:var(--trt-hue-dk)}
.trt .trt-hero .trt-small{color:#a9b1ac}

/* "What this tool covers": jump links styled as a module list */
.trt .trt-inside{display:grid;gap:1px;list-style:none;margin:0;padding:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:var(--trt-r-lg);overflow:hidden}
.trt .trt-inside li{background:var(--trt-panel-2)}
.trt .trt-inside a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:0;border-radius:0;background:transparent;color:#fff;text-decoration:none;transition:background .15s}
.trt .trt-inside a:hover{background:var(--trt-panel-3);text-decoration:none}
.trt .trt-inside .trt-icon{width:38px;height:38px;background:rgba(255,255,255,.07);color:var(--trt-hue-dk)}
.trt .trt-inside b{font-size:15px;display:block;font-family:var(--trt-font-head)}
.trt .trt-inside small{font-size:13px;color:var(--trt-panel-muted);display:block;line-height:1.4}
.trt .trt-inside svg.trt-flip{width:16px;height:16px;color:var(--trt-hue-dk)}

/* ---- hero art slot: viewfinder frame with corner brackets + floating spec chips ---- */
.trt .trt-hero__art{--c:var(--trt-hue-dk);--art-accent:var(--trt-hue-dk);position:relative;margin:0;min-height:260px;display:grid;place-items:center;padding:clamp(20px,3vw,36px);color:#e6ebe7}
.trt .trt-hero__art>svg{width:100%;height:auto;max-height:360px;position:relative;z-index:1}
.trt .trt-hero__art::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/22px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/2px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/22px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/2px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/22px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/2px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/22px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/2px 22px no-repeat}
.trt .trt-hero__art::after{content:"";position:absolute;inset:8% 6%;background:radial-gradient(closest-side,var(--trt-hue-glow),transparent);z-index:0;pointer-events:none}
.trt .trt-hero__art figcaption{position:absolute;inset-inline-start:14px;bottom:10px;z-index:2;font-size:12px;font-family:var(--trt-font-num);color:var(--trt-panel-muted)}
.trt .trt-hero__art .trt-specchip--float{position:absolute;z-index:3;inset-inline-start:var(--x,auto);top:var(--y,auto)}
@media (max-width:960px){.trt .trt-hero__art{min-height:200px;order:2}.trt .trt-hero__art>svg{max-height:240px}}
@media (max-width:600px){
  .trt .trt-hero__art{min-height:0;padding:20px 16px 12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .trt .trt-hero__art>svg{max-height:140px;flex:1 0 100%}
  .trt .trt-hero__art .trt-specchip--float{position:static;min-height:34px}
  .trt .trt-hero__art figcaption{display:none}
}

/* hero variants */
.trt .trt-hero--device{background:
    radial-gradient(640px 420px at 78% 55%,var(--trt-hue-glow),transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/32px 32px,
    var(--trt-graphite)}
.trt[dir="rtl"] .trt-hero--device{background:
    radial-gradient(640px 420px at 22% 55%,var(--trt-hue-glow),transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/32px 32px,
    var(--trt-graphite)}
/* schematic: blueprint, finer grid, dashed frame */
.trt .trt-hero--schematic{--trt-blue-dark:#1d2830;background:
    radial-gradient(700px 360px at 90% 0,rgba(111,147,168,.22),transparent 70%),
    linear-gradient(rgba(156,195,216,.08) 1px,transparent 1px) 0 0/16px 16px,
    linear-gradient(90deg,rgba(156,195,216,.08) 1px,transparent 1px) 0 0/16px 16px,
    linear-gradient(rgba(156,195,216,.07) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(90deg,rgba(156,195,216,.07) 1px,transparent 1px) 0 0/96px 96px,
    var(--trt-blue-dark)}
.trt .trt-hero--schematic .trt-hero__art{--c:#9cc3d8;border:1px dashed rgba(156,195,216,.4);border-radius:var(--trt-r)}
.trt .trt-hero--schematic .trt-hero__art::before{display:none}
/* checklist: a clipboard sheet on the graphite desk */
.trt .trt-hero--checklist .trt-hero__art,.trt .trt-hero__paper{background:#fff;color:var(--trt-graphite);--art-accent:var(--trt-hue-ink);border-radius:6px;padding:22px 22px 18px;min-height:0;transform:rotate(calc(1.4deg * var(--trt-dir)));box-shadow:0 30px 50px -26px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);position:relative}
.trt .trt-hero--checklist .trt-hero__art::before,.trt .trt-hero--checklist .trt-hero__art::after{display:none}
.trt .trt-hero__paper::before{content:"";position:absolute;top:-10px;inset-inline:calc(50% - 38px) auto;width:76px;height:20px;border-radius:5px;background:var(--trt-panel-3);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}

/* light "paper" islands inside the dark hero get the normal light tokens back */
.trt .trt-hero .trt-hero__paper,.trt .trt-hero--checklist .trt-hero__art,.trt .trt-hero .trt-sheet,.trt .trt-hero .trt-docsheet{
  --trt-ink:#222021;--trt-grey:#383b39;--trt-muted:#555a56;--trt-faint:#666b67;--trt-line:#DAE1E5;--trt-line-strong:#B6C1C8;
  --trt-surface:#F2F5F7;--trt-surface-2:#E4EAEE;--trt-hue-ink:#0F7A3F;--trt-brand-ink:#0F7A3F;--trt-focus:0 0 0 2px #fff,0 0 0 4px #0F7A3F;color:var(--trt-grey)}
/* doc: stacked sheets */
.trt .trt-hero--doc{background:
    radial-gradient(800px 420px at 80% 30%,rgba(255,255,255,.07),transparent 70%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/32px 32px,
    #2a292a}
.trt .trt-hero--doc .trt-sheet,.trt .trt-hero--doc .trt-docsheet{transform:rotate(calc(-1deg * var(--trt-dir)));box-shadow:calc(10px * var(--trt-dir)) 10px 0 -2px rgba(255,255,255,.14),calc(20px * var(--trt-dir)) 20px 0 -4px rgba(255,255,255,.07),0 40px 60px -30px rgba(0,0,0,.85)}
@media (max-width:960px){.trt .trt-hero--doc .trt-sheet,.trt .trt-hero--doc .trt-docsheet{transform:none;box-shadow:0 30px 50px -28px rgba(0,0,0,.8)}}

/* ==========================================================================
   TOOL layout
   ========================================================================== */
.trt .trt-section:has(>.trt-wrap>.trt-tool){background:var(--trt-surface);border-bottom:1px solid var(--trt-line)}
.trt .trt-tool{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,2.4vw,28px);align-items:start}
@media (max-width:1024px){.trt .trt-tool{grid-template-columns:minmax(0,1fr)}}
.trt .trt-tool__inputs{display:block}
.trt .trt-tool-card{box-shadow:var(--trt-shadow);border-color:var(--trt-line-strong)}
.trt .trt-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 14px;border-radius:var(--trt-r);background:var(--trt-surface);border:1px solid var(--trt-line)}
.trt .trt-toolbar .trt-label{font-size:12.5px;color:var(--trt-muted)}
.trt .trt-toolbar select.trt-select{min-height:42px;padding-block:6px;font-size:14px}
.trt .trt-tool-card .trt-tabs{margin-bottom:20px}
.trt .trt-tool-card .trt-toolbar{margin-bottom:22px}
.trt .trt-subhead{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;color:var(--trt-ink);font-family:var(--trt-font-head);padding-bottom:8px;border-bottom:2px solid var(--trt-ink)}
.trt .trt-divider{height:1px;background:var(--trt-line);border:0;margin:0}
.trt .trt-tool__out{position:sticky;top:20px;display:grid;gap:16px}
@media (max-width:1024px){.trt .trt-tool__out{position:static}}

/* ---------- Result panel: the "control room" display ---------- */
.trt .trt-panel{position:relative;background:var(--trt-panel);color:var(--trt-panel-text);border-radius:var(--trt-r-lg);padding:var(--trt-card-px);padding-top:calc(var(--trt-card-px) + 4px);box-shadow:var(--trt-shadow-lg);display:grid;gap:18px;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:28px 28px}
.trt .trt-panel::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--trt-hue)}
.trt .trt-panel__head{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--trt-panel-line);font-family:var(--trt-font-head);font-size:14px;font-weight:600;color:var(--trt-panel-text)}
.trt .trt-panel__head::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--trt-green);box-shadow:0 0 0 3px rgba(64,189,97,.2),0 0 10px rgba(64,189,97,.8)}
.trt .trt-panel__head>:last-child:not(:first-child){margin-inline-start:auto}
.trt .trt-panel__title{font-family:var(--trt-font-head);font-size:14px;font-weight:600;color:var(--trt-panel-text)}
.trt .trt-panel h2,.trt .trt-panel h3{color:#fff}
.trt .trt-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.trt .trt-big__v{font-family:var(--trt-font-num);font-size:clamp(40px,5vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.trt .trt-big__u{font-size:17px;font-weight:600;color:var(--trt-hue-dk);font-family:var(--trt-font-num)}
.trt .trt-big__l{font-size:14px;color:var(--trt-panel-muted);width:100%}
.trt .trt-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--trt-panel-line);border:1px solid var(--trt-panel-line);border-radius:var(--trt-r);overflow:hidden}
.trt .trt-kpi{background:var(--trt-panel);padding:14px 16px;display:grid;gap:4px;min-width:0}
.trt .trt-kpi__l{font-size:12.5px;color:var(--trt-panel-muted);line-height:1.4}
.trt .trt-kpi__v{font-family:var(--trt-font-num);font-size:clamp(17px,4.6vw,22px);font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.trt .trt-kpi__s{font-size:12px;color:var(--trt-panel-muted)}
.trt .trt-panel__art{border-radius:var(--trt-r);background:var(--trt-panel-2);border:1px solid var(--trt-panel-line);padding:12px;color:var(--trt-panel-muted);--art-accent:var(--trt-hue-dk)}
.trt .trt-panel__art svg{width:100%;height:auto}
.trt .trt-panel__note{font-size:12.5px;color:var(--trt-panel-muted);line-height:1.5}
.trt .trt-panel .trt-empty-state{padding:28px 8px;text-align:center;color:var(--trt-panel-muted);font-size:15px}
.trt .trt-panel a{color:var(--trt-hue-dk)}

/* Light result blocks */
.trt .trt-result{display:grid;gap:14px}
.trt .trt-rcard{border:1px solid var(--trt-line);border-radius:var(--trt-r);padding:18px;background:#fff;display:grid;gap:12px;color:var(--trt-grey)}
.trt .trt-rcard h3,.trt .trt-rcard__t{font-size:16px}
.trt .trt-rcard__t{margin:0;font-weight:600;color:inherit;font-family:var(--trt-font-head)}
.trt .trt-interpret{background:var(--trt-beige);border-radius:var(--trt-r);border-inline-start:4px solid var(--trt-amber);padding:16px 18px;font-size:15px;color:#41331a;display:grid;gap:6px}
.trt .trt-interpret strong{color:#2e2410}
.trt .trt-alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--trt-r);padding:12px 14px;font-size:14px;border-inline-start:4px solid currentColor}
.trt .trt-alert svg{width:18px;height:18px;flex:none;margin-top:2px}
.trt .trt-alert--warn{background:var(--trt-warn-bg);color:var(--trt-warn)}
.trt .trt-alert--ok{background:var(--trt-ok-bg);color:var(--trt-ok)}
.trt .trt-alert--bad{background:var(--trt-bad-bg);color:var(--trt-bad)}
.trt .trt-alert--info{background:var(--trt-info-bg);color:var(--trt-info)}

/* Bars: level meters (segmented). HTML-based so they mirror in RTL. */
.trt .trt-bars{display:grid;gap:14px}
.trt .trt-bar{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;gap:12px;align-items:center;font-size:13.5px}
.trt .trt-bar__l{color:inherit;line-height:1.3}
.trt .trt-bar__t{height:14px;border-radius:3px;background:rgba(127,140,134,.22);overflow:hidden;position:relative;-webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px)}
.trt .trt-bar__f{position:absolute;inset-block:0;inset-inline-start:0;border-radius:0;background:var(--trt-bar,var(--trt-hue));transition:width .35s ease}
.trt .trt-panel .trt-bar__f{--trt-bar:var(--trt-hue-dk)}
.trt .trt-bar__f--muted{background:#8d9792}
.trt .trt-bar__f--warn{background:var(--trt-amber)}
.trt .trt-bar__f--dark{background:var(--trt-brand)}
.trt .trt-bar__f--bad{background:#e5534b}
.trt .trt-bar__v{font-family:var(--trt-font-num);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:520px){.trt .trt-bar{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.trt .trt-bar__t{grid-column:1/-1;grid-row:2}}
.trt .trt-stack{display:flex;height:16px;border-radius:3px;overflow:hidden;background:rgba(127,140,134,.22)}
.trt .trt-stack>span{height:100%;transition:width .35s ease}
.trt .trt-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;list-style:none;margin:0;padding:0}
.trt .trt-legend li{display:flex;align-items:center;gap:6px}
.trt .trt-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* Waterfall / bridge */
.trt .trt-bridge{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;height:220px;padding-top:24px;position:relative}
.trt .trt-bridge__c{position:relative;height:100%}
.trt .trt-bridge__b{position:absolute;inset-inline:12%;border-radius:2px;min-height:2px;transition:all .35s ease}
.trt .trt-bridge__v{position:absolute;inset-inline:-6px;text-align:center;font-family:var(--trt-font-num);font-size:12px;font-weight:600;white-space:nowrap}
.trt .trt-bridge__labels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;font-size:12px;text-align:center;margin-top:8px;line-height:1.3}

/* Tables: ruled spec-sheet style */
.trt .trt-table-wrap{position:relative;overflow-x:auto;border:1px solid var(--trt-line);border-radius:var(--trt-r);-webkit-overflow-scrolling:touch}
.trt table.trt-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.trt .trt-table th,.trt .trt-table td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--trt-line);vertical-align:middle}
.trt .trt-table thead th{background:var(--trt-surface);font-size:12.5px;font-weight:600;color:var(--trt-ink);white-space:nowrap;border-bottom:2px solid var(--trt-ink);font-family:var(--trt-font-head)}
.trt .trt-table td.n,.trt .trt-table th.n{text-align:end;font-family:var(--trt-font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.trt .trt-table tr:last-child td{border-bottom:0}
.trt .trt-table input{width:100%;min-width:80px;min-height:40px;padding:6px 10px;border:1px solid var(--trt-field-line);border-radius:6px;font:inherit;font-family:var(--trt-font-num);font-size:15px}
.trt .trt-table input:focus{outline:none;border-color:var(--trt-brand);box-shadow:0 0 0 2px var(--trt-green)}
.trt .trt-table input[aria-invalid="true"]{border-color:var(--trt-bad)}
.trt .trt-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px 3px 8px;border-radius:var(--trt-r-pill);white-space:nowrap}
.trt .trt-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.trt .trt-status--ok{background:var(--trt-ok-bg);color:var(--trt-ok)}
.trt .trt-status--warn{background:var(--trt-warn-bg);color:var(--trt-warn)}
.trt .trt-status--info{background:var(--trt-surface-2);color:var(--trt-muted)}
.trt .trt-status--bad{background:var(--trt-bad-bg);color:var(--trt-bad)}
.trt .trt-icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:8px;border:1px solid var(--trt-line-strong);background:#fff;color:var(--trt-muted);cursor:pointer}
.trt .trt-icon-btn:hover{color:var(--trt-bad);border-color:var(--trt-bad)}
.trt .trt-icon-btn svg{width:16px;height:16px}

/* Route cards (scenario A / B) */
.trt .trt-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:600px){.trt .trt-routes{grid-template-columns:minmax(0,1fr)}}
.trt .trt-route{border:1px solid var(--trt-line);border-radius:var(--trt-r);padding:16px;display:grid;gap:14px;background:#fff}
.trt .trt-route__h{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--trt-ink);font-family:var(--trt-font-head)}
.trt .trt-route__badge{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--trt-graphite);background:var(--trt-green);font-family:var(--trt-font-num)}
.trt .trt-route--b .trt-route__badge{background:var(--trt-amber)}
.trt .trt-route .trt-fields{grid-template-columns:1fr 1fr;gap:12px}

/* Details / methodology */
.trt details.trt-more{border:1px solid var(--trt-line-strong);border-radius:var(--trt-r);background:#fff}
.trt details.trt-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:600;color:var(--trt-ink);font-size:15px;min-height:48px;font-family:var(--trt-font-head)}
.trt details.trt-more>summary::-webkit-details-marker{display:none}
.trt details.trt-more>summary::after,.trt .trt-faq summary::after{content:"";flex:none;width:18px;height:18px;background:var(--trt-hue-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.trt details.trt-more[open]>summary::after,.trt .trt-faq details[open] summary::after{transform:rotate(180deg)}
.trt details.trt-more>div{padding:0 16px 16px;font-size:14px;display:grid;gap:10px}

/* Formula block: reads like a line on a calculation sheet */
.trt .trt-formula{position:relative;font-family:var(--trt-font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:15px;line-height:1.85;background:var(--trt-surface);border:1px solid var(--trt-line);border-inline-start:4px solid var(--trt-hue);border-radius:var(--trt-r);padding-block:14px;padding-inline:56px 16px;color:var(--trt-ink);text-align:start;unicode-bidi:plaintext;overflow-x:auto;white-space:pre}
.trt[dir="rtl"] .trt-formula{padding-block:14px;padding-inline:56px 16px;font-family:var(--trt-font);font-size:15px;line-height:1.95;white-space:pre-wrap}
.trt .trt-formula::before{content:"\0192";position:absolute;inset-inline-start:14px;top:14px;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;background:var(--trt-graphite);color:var(--trt-hue-dk);font-family:var(--trt-font-head);font-style:italic;font-weight:600;font-size:17px;line-height:1}
.trt .trt-formula b,.trt .trt-formula strong{color:var(--trt-hue-ink);font-weight:600}
.trt .trt-formula small,.trt .trt-formula .trt-formula__r{unicode-bidi:plaintext}
.trt .trt-formula small{display:block;color:var(--trt-muted);font-size:12.5px;line-height:1.5;white-space:normal}
.trt .trt-formula__r{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--trt-line-strong);font-weight:600}


/* ==========================================================================
   Lead / report block, modal, long-form content
   ========================================================================== */
.trt .trt-report{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border-radius:var(--trt-r-lg);border:1px solid var(--trt-line-strong);background:#fff;padding:clamp(20px,3vw,32px);position:relative;overflow:hidden}
.trt .trt-report::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:var(--trt-hue)}
.trt .trt-report ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--trt-muted)}
.trt .trt-report li{display:flex;gap:6px;align-items:center}
.trt .trt-report li svg{width:16px;height:16px;color:var(--trt-hue-ink)}
@media (max-width:720px){.trt .trt-report{grid-template-columns:minmax(0,1fr)}.trt .trt-report .trt-btn{width:100%}}

/* Dialog: graphite header strip with the chevron rail, white body */
.trt dialog.trt-modal{--trt-modal-pad:clamp(20px,3vw,30px);border:0;padding:0;border-radius:var(--trt-r-lg);width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);color:var(--trt-grey);font-family:var(--trt-font);overflow:auto}
.trt dialog.trt-modal::backdrop{background:rgba(24,23,24,.66);backdrop-filter:blur(2px)}
.trt .trt-modal__in{padding:var(--trt-modal-pad);display:grid;gap:18px}
.trt .trt-modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.trt .trt-modal__x{background:none;border:0;width:40px;height:40px;border-radius:8px;cursor:pointer;color:var(--trt-muted);display:grid;place-items:center;flex:none}
.trt .trt-modal__x svg{width:20px;height:20px}

/* ---------- Long-form SEO content: reads like a datasheet ---------- */
.trt .trt-article{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:960px){.trt .trt-article{grid-template-columns:minmax(0,1fr)}}
.trt .trt-toc{position:sticky;top:24px;font-size:14px;display:grid;gap:10px}
.trt .trt-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:0;border-inline-start:2px solid var(--trt-line-strong)}
.trt .trt-toc a{display:block;padding:7px 14px;color:var(--trt-muted);margin-inline-start:-2px;border-inline-start:2px solid transparent;font-weight:500}
.trt .trt-toc a:hover,.trt .trt-toc a[aria-current="true"]{color:var(--trt-ink);border-inline-start-color:var(--trt-green);text-decoration:none;font-weight:600}
@media (max-width:960px){.trt .trt-toc{position:static}.trt .trt-toc ol{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.trt .trt-toc ol{grid-template-columns:minmax(0,1fr)}}
.trt .trt-prose{max-width:760px;font-size:17px;color:var(--trt-grey)}
.trt .trt-prose>*+*{margin-top:1.05em}
.trt .trt-prose h2{position:relative;font-size:clamp(23px,2.6vw,29px);margin-top:2.4em;padding-top:18px;border-top:2px solid var(--trt-ink);scroll-margin-top:24px}
.trt .trt-prose h2::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:56px;height:2px;background:var(--trt-hue)}
.trt .trt-prose h2:first-child{margin-top:0}
.trt .trt-prose h3{font-size:20px;margin-top:1.8em}
.trt .trt-prose ul,.trt .trt-prose ol{padding-inline-start:0;list-style:none}
.trt .trt-prose li{position:relative;padding-inline-start:26px}
.trt .trt-prose ul>li::before{content:"";position:absolute;inset-inline-start:2px;top:.55em;width:10px;height:10px;background:var(--trt-hue);-webkit-mask:var(--trt-arrow) center/contain no-repeat;mask:var(--trt-arrow) center/contain no-repeat}
.trt .trt-prose ol{counter-reset:trt-n}
.trt .trt-prose ol>li{counter-increment:trt-n}
.trt .trt-prose ol>li::before{content:counter(trt-n);position:absolute;inset-inline-start:0;top:.2em;width:20px;height:20px;border-radius:5px;background:var(--trt-graphite);color:var(--trt-hue-dk);font:600 12px/20px var(--trt-font-num);text-align:center}
.trt .trt-prose li+li{margin-top:.5em}
.trt .trt-prose strong{color:var(--trt-ink)}
.trt .trt-prose .trt-formula{font-size:14.5px}
.trt .trt-prose table{width:100%;border-collapse:collapse;font-size:15px;border-top:2px solid var(--trt-ink)}
.trt .trt-prose th,.trt .trt-prose td{border-bottom:1px solid var(--trt-line);padding:11px 10px;text-align:start;vertical-align:top}
.trt .trt-prose th{font-size:13px;color:var(--trt-ink);font-weight:600;font-family:var(--trt-font-head);background:var(--trt-surface)}
.trt .trt-prose tbody td:first-child{font-weight:600;color:var(--trt-ink)}
.trt .trt-prose td{font-variant-numeric:tabular-nums}
.trt .trt-callout{border-inline-start:4px solid var(--trt-green);background:var(--trt-surface);padding:16px 18px;border-radius:0 var(--trt-r) var(--trt-r) 0;font-size:16px}
.trt[dir="rtl"] .trt-callout{border-radius:var(--trt-r) 0 0 var(--trt-r)}

/* FAQ */
.trt .trt-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px)}
@media (max-width:860px){.trt .trt-faq{grid-template-columns:minmax(0,1fr)}}
.trt .trt-faq__list{border-top:2px solid var(--trt-ink)}
.trt .trt-faq details{border-bottom:1px solid var(--trt-line-strong)}
.trt .trt-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 4px;font-weight:600;font-size:17px;color:var(--trt-ink);font-family:var(--trt-font-head)}
.trt .trt-faq summary::-webkit-details-marker{display:none}
.trt .trt-faq details>div{padding:0 4px 22px;color:var(--trt-muted);font-size:16px;display:grid;gap:10px;max-width:68ch}

/* Related solution (Tracom device block): graphite-edged spec panel */
.trt .trt-solution{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;border:1px solid var(--trt-line-strong);border-top:4px solid var(--trt-graphite);border-radius:var(--trt-r-lg);padding:clamp(24px,4vw,44px);background:#fff}
@media (max-width:860px){.trt .trt-solution{grid-template-columns:minmax(0,1fr)}}
.trt .trt-solution ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--trt-line)}
.trt .trt-solution li{display:flex;gap:12px;align-items:flex-start;font-size:15px;padding:13px 0;border-bottom:1px solid var(--trt-line)}
.trt .trt-solution li svg{width:20px;height:20px;color:var(--trt-hue-ink);flex:none;margin-top:3px}

/* Final CTA: graphite band with chevron rail */
.trt .trt-cta{position:relative;overflow:hidden;background:var(--trt-panel);color:var(--trt-panel-text);border-radius:var(--trt-r-lg);padding:clamp(28px,5vw,56px);padding-bottom:clamp(40px,6vw,68px);display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px;align-items:center;
  background-image:radial-gradient(520px 260px at 90% 0,var(--trt-hue-glow),transparent 70%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}
.trt[dir="rtl"] .trt-cta{background-image:radial-gradient(520px 260px at 10% 0,var(--trt-hue-glow),transparent 70%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)}
.trt .trt-cta::after{content:"";position:absolute;inset-inline:0;bottom:0;height:10px;background:linear-gradient(90deg,var(--trt-hue),transparent 80%);-webkit-mask:var(--trt-chev) 0 0/20px 10px repeat-x;mask:var(--trt-chev) 0 0/20px 10px repeat-x}
.trt[dir="rtl"] .trt-cta::after{background:linear-gradient(270deg,var(--trt-hue),transparent 80%)}
.trt .trt-cta h2{color:#fff}
.trt .trt-cta p{color:var(--trt-panel-muted);margin-top:14px;max-width:56ch}
.trt .trt-cta .trt-eyebrow{color:var(--trt-hue-dk)}
.trt .trt-cta__actions{display:grid;gap:12px;justify-items:center}
.trt .trt-cta__actions a.trt-link-arrow{color:var(--trt-panel-text)}
.trt .trt-cta :focus-visible{box-shadow:0 0 0 2px #222021,0 0 0 4px #40bd61}
@media (max-width:760px){.trt .trt-cta{grid-template-columns:minmax(0,1fr)}.trt .trt-cta__actions{justify-items:stretch}.trt .trt-cta__actions .trt-link-arrow{justify-content:center}}

/* Related list */
.trt .trt-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.trt .trt-related{grid-template-columns:minmax(0,1fr)}}

/* Question finder (hub) */
.trt .trt-qlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:2px solid var(--trt-ink)}
@media (max-width:760px){.trt .trt-qlist{grid-template-columns:minmax(0,1fr)}}
.trt .trt-qlist a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;border-bottom:1px solid var(--trt-line-strong);color:var(--trt-ink);font-weight:600;font-family:var(--trt-font-head)}
.trt .trt-qlist a:hover{color:var(--trt-brand-ink);text-decoration:none}
.trt .trt-qlist a span{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13px;color:var(--trt-muted);white-space:nowrap;flex:none;font-family:var(--trt-font)}
.trt .trt-qlist a span svg{width:16px;height:16px}
.trt .trt-qlist a[aria-disabled="true"]{color:var(--trt-muted);pointer-events:none}

/* Mobile result bar */
.trt .trt-mbar{display:none}
@media (max-width:1024px){
.trt .trt-mbar{display:flex;position:fixed;inset-inline:12px;bottom:12px;z-index:50;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--trt-panel);color:#fff;box-shadow:var(--trt-shadow-lg);border:1px solid var(--trt-panel-line);border-top:3px solid var(--trt-hue);transform:translateY(140%);transition:transform .25s ease}
.trt[dir="rtl"] .trt-mbar{padding:10px 16px 10px 10px}
.trt .trt-mbar.is-on{transform:none}
.trt .trt-mbar div{display:grid;min-width:0}
.trt .trt-mbar small{font-size:12px;color:var(--trt-panel-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trt .trt-mbar b{font-family:var(--trt-font-num);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.trt .trt-mbar .trt-btn{min-height:40px;padding:8px 16px;font-size:14px}}

/* Motion */
@media (prefers-reduced-motion:reduce){.trt *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* ==========================================================================
   Hub cards, filters, template preview, downloads
   ========================================================================== */
.trt .trt-tcard{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--trt-line-strong);border-radius:var(--trt-r-lg);padding:20px;transition:border-color .15s,box-shadow .15s,transform .15s;min-height:100%;overflow:hidden}
.trt .trt-tcard::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--trt-hue)}
.trt .trt-tcard:hover{border-color:var(--trt-graphite);box-shadow:var(--trt-shadow)}
.trt .trt-tcard[data-status="live"]:hover{transform:translateY(-2px)}
.trt .trt-tcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.trt .trt-tcard__art{--art-accent:var(--trt-hue-ink);height:104px;border-radius:var(--trt-r);color:var(--trt-graphite);border:1px solid var(--trt-line);display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(rgba(34,32,33,.045) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(34,32,33,.045) 1px,transparent 1px) 0 0/16px 16px,var(--trt-surface)}
.trt .trt-tcard__art svg{width:100%;height:100%}
.trt .trt-tcard h3{font-size:19px}
.trt .trt-tcard h3 a{color:inherit}
.trt .trt-tcard h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.trt .trt-tcard h3 a:hover{text-decoration:none}
.trt .trt-tcard h3 a:focus-visible{box-shadow:none}
.trt .trt-tcard:has(a:focus-visible){box-shadow:var(--trt-focus)}
.trt .trt-tcard__q{font-size:15px;color:var(--trt-muted)}
.trt .trt-tcard__meta{margin-top:auto;display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--trt-line);font-size:13px}
.trt .trt-tcard__meta dt{color:var(--trt-faint);font-weight:600;font-size:12.5px}
.trt .trt-tcard__meta dd{margin:2px 0 0;color:var(--trt-ink)}
.trt .trt-tcard__go svg{width:18px;height:18px}
.trt .trt-tcard__go{display:flex;align-items:center;justify-content:space-between;font-weight:600;color:var(--trt-brand-ink);font-size:14px;font-family:var(--trt-font-head);margin-top:auto}
.trt .trt-tcard[data-status="soon"] .trt-tcard__go{color:var(--trt-faint)}
.trt .trt-tcard[data-status="soon"]::before{background:var(--trt-line-strong)}
.trt .trt-tcard--feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;padding:0;overflow:hidden;background:var(--trt-panel);border-color:var(--trt-panel);color:var(--trt-panel-text)}
.trt .trt-tcard--feature::before{display:none}
.trt .trt-tcard--feature h3,.trt .trt-tcard--feature h3 a{color:#fff;font-size:clamp(22px,2.6vw,30px)}
.trt .trt-tcard--feature .trt-tcard__q{color:var(--trt-panel-muted);font-size:16px}
.trt .trt-tcard--feature .trt-tcard__body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px}
.trt .trt-tcard--feature .trt-tcard__art{--art-accent:var(--trt-hue-dk);height:auto;min-height:280px;border:0;border-radius:0;color:#e6ebe7;
  background:radial-gradient(closest-side at 50% 50%,var(--trt-hue-glow),transparent 80%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,var(--trt-panel-2)}
.trt .trt-tcard--feature .trt-tcard__meta{border-color:var(--trt-panel-line)}
.trt .trt-tcard--feature .trt-tcard__meta dt{color:var(--trt-panel-muted)}
.trt .trt-tcard--feature .trt-tcard__meta dd{color:#fff}
.trt .trt-tcard--feature .trt-tcard__go{color:var(--trt-hue-dk)}
.trt .trt-tcard--feature:has(a:focus-visible){box-shadow:0 0 0 2px #222021,0 0 0 4px #40bd61}
@media (max-width:860px){.trt .trt-tcard--feature{grid-template-columns:minmax(0,1fr)}.trt .trt-tcard--feature .trt-tcard__art{min-height:200px;order:-1}}

/* ---------- Filters ---------- */
.trt .trt-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:24px}
.trt .trt-search{position:relative;flex:1 1 280px;max-width:420px}
.trt .trt-search svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--trt-faint);pointer-events:none}
.trt .trt-search input{width:100%;min-height:48px;padding-block:10px;padding-inline:44px 14px;border:1px solid var(--trt-field-line);border-radius:var(--trt-r-pill);font:inherit;font-size:15px;color:var(--trt-ink);background:#fff}
.trt .trt-search input:focus{outline:none;border-color:var(--trt-brand);box-shadow:0 0 0 3px rgba(64,189,97,.38)}
.trt .trt-pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;-webkit-overflow-scrolling:touch}
.trt .trt-pills::-webkit-scrollbar{display:none}
.trt .trt-pill{flex:none;min-height:40px;padding:8px 16px;border-radius:var(--trt-r-pill);border:1.5px solid var(--trt-line-strong);background:#fff;color:var(--trt-ink);font:inherit;font-family:var(--trt-font-head);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.trt .trt-pill:hover{border-color:var(--trt-graphite)}
.trt .trt-pill[aria-pressed="true"]{background:var(--trt-graphite);border-color:var(--trt-graphite);color:#fff}
.trt .trt-pill .trt-count{font-weight:500;opacity:.7;margin-inline-start:4px;font-family:var(--trt-font-num)}
.trt .trt-empty{padding:40px;text-align:center;border:1px dashed var(--trt-line-strong);border-radius:var(--trt-r-lg);color:var(--trt-muted)}

/* ---------- Spreadsheet / document preview (templates) ---------- */
.trt .trt-sheet{--trt-ink:#222021;--trt-muted:#555a56;--trt-faint:#666b67;--trt-line:#DAE1E5;--trt-surface:#F2F5F7;--trt-focus:0 0 0 2px #fff,0 0 0 4px #0F7A3F;--trt-hue-ink:var(--trt-green-deep);color:var(--trt-grey);background:#fff;border:1px solid var(--trt-line);border-radius:var(--trt-r);box-shadow:0 24px 44px -26px rgba(34,32,33,.5);overflow:hidden;display:grid}
.trt .trt-sheet__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--trt-line);font-size:13px;font-weight:600;color:var(--trt-ink);background:var(--trt-surface)}
.trt .trt-sheet__bar .trt-icon{width:30px;height:30px}
.trt .trt-sheet__bar small{margin-inline-start:auto;font-weight:600;color:var(--trt-muted);font-family:var(--trt-font-num);padding:2px 8px;border-radius:4px;background:#fff;border:1px solid var(--trt-line)}
.trt .trt-sheet__scroll{overflow-x:auto}
.trt .trt-sheet__scroll:focus-visible,.trt .trt-formula:focus-visible{outline:2px solid var(--trt-green);outline-offset:2px}
.trt .trt-sheet table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--trt-font-num);font-size:12.5px;font-variant-numeric:tabular-nums}
.trt .trt-sheet th{background:var(--trt-graphite);color:#fff;font-weight:600;text-align:start;padding:8px 10px;white-space:nowrap;font-family:var(--trt-font-head)}
.trt .trt-sheet td{padding:8px 10px;border-bottom:1px solid #e3e9ec;white-space:nowrap;color:var(--trt-ink)}
.trt .trt-sheet td.c{background:#eef6f0}
.trt .trt-sheet td:first-child,.trt .trt-sheet th:first-child{border-inline-end:1px solid #e3e9ec}
.trt .trt-sheet tr.is-flag td{background:#fff4d6}
.trt .trt-sheet .trt-flag{display:inline-flex;margin-inline-start:6px;font-size:11px;font-weight:700;color:#6b4700;background:var(--trt-amber);border-radius:var(--trt-r-pill);padding:2px 8px;font-family:var(--trt-font)}
.trt .trt-sheet__tabs{display:flex;gap:2px;padding:0 10px;background:var(--trt-surface-2);border-top:1px solid var(--trt-line);font-size:12px;overflow-x:auto}
.trt .trt-sheet__tabs span{padding:9px 12px;color:var(--trt-muted);white-space:nowrap}
.trt .trt-sheet__tabs span.is-on{background:#fff;color:var(--trt-ink);font-weight:600;border-inline:1px solid var(--trt-line);margin-top:-1px;box-shadow:inset 0 3px 0 var(--trt-hue)}
.trt .trt-sheet__note{padding:10px 16px;font-size:12.5px;color:var(--trt-muted);background:var(--trt-surface);border-top:1px solid var(--trt-line)}
.trt .trt-dl{display:grid;gap:12px;background:var(--trt-surface-2);border:1px solid var(--trt-line-strong);border-radius:var(--trt-r-lg);padding:20px}
.trt .trt-hero .trt-dl{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.trt .trt-dl__row{display:flex;flex-wrap:wrap;gap:10px}
.trt .trt-dl small{color:var(--trt-faint);font-size:12.5px}
.trt .trt-hero .trt-dl small{color:#aab2ad}
.trt .trt-sheets{counter-reset:trt-sh;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0}
@media (max-width:1024px){.trt .trt-sheets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trt .trt-sheets{grid-template-columns:minmax(0,1fr)}}
.trt .trt-sheets>li{list-style:none;background:#fff;border:1px solid var(--trt-line-strong);border-top:3px solid var(--trt-graphite);border-radius:0 0 var(--trt-r) var(--trt-r);padding:18px;display:grid;gap:8px;align-content:start}
.trt .trt-sheets>li b{font-size:15px;font-family:var(--trt-font-head);color:var(--trt-ink)}
.trt .trt-sheets>li p{font-size:14px;color:var(--trt-muted);margin:0}
.trt .trt-sheets>li .trt-step-n{margin:0}
.trt .trt-prose .trt-flags,.trt .trt-flags{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:16px 0 0;padding:0;list-style:none}
.trt .trt-prose .trt-flags li,.trt .trt-flags li{list-style:none;margin:0;padding-inline-start:14px;background:var(--trt-beige);border-radius:var(--trt-r);border-inline-start:4px solid var(--trt-amber);padding:12px 14px;font-size:14px}
.trt .trt-prose .trt-flags li::before{display:none}
.trt .trt-flags b{display:block;color:#6b4700;font-size:13px;margin-bottom:4px}

/* hub extras (templates + tools hubs) */
.trt .trt-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:720px){.trt .trt-vs{grid-template-columns:minmax(0,1fr)}}
.trt .trt-vs .trt-card ul{margin:12px 0 0;padding-inline-start:18px;display:grid;gap:6px;font-size:14.5px;color:var(--trt-muted)}
.trt .trt-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--trt-ink)}
.trt .trt-principles>div{padding:24px 24px 0 0;display:grid;gap:10px;align-content:start}
.trt[dir="rtl"] .trt-principles>div{padding:24px 0 0 24px}
.trt .trt-principles>div+div{border-inline-start:1px solid var(--trt-line-strong);padding-inline-start:24px}
@media (max-width:960px){.trt .trt-principles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0}.trt .trt-principles>div:nth-child(3){border-inline-start:0;padding-inline-start:0}}
@media (max-width:560px){.trt .trt-principles{grid-template-columns:minmax(0,1fr)}.trt .trt-principles>div+div{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--trt-line-strong)}}
.trt .trt-res-teaser{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--trt-beige);border-inline-start:6px solid var(--trt-amber);border-radius:var(--trt-r-lg);padding:clamp(24px,4vw,40px)}
@media (max-width:720px){.trt .trt-res-teaser{grid-template-columns:minmax(0,1fr)}}
.trt .trt-tcard--feature .trt-tcard__art .trt-sheet{box-shadow:none}
.trt .trt-route-panel .trt-art-dir svg{width:100%;height:auto}
.trt[dir="rtl"] .trt-art-dir svg{transform:scaleX(-1)}
.trt .trt-mark circle{transition:r .15s,fill .15s}
.trt .trt-mark.is-on circle.o{r:15;fill:rgba(64,189,97,.3)}
.trt .trt-hero .trt-panel{background-color:var(--trt-panel-2);border:1px solid var(--trt-panel-line)}
.trt .trt-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--trt-panel-line);border:1px solid var(--trt-panel-line);border-radius:var(--trt-r);overflow:hidden}
.trt .trt-stops li{background:var(--trt-panel)}
.trt .trt-stops a,.trt .trt-stops .trt-stop{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:12px 14px;color:var(--trt-panel-text);text-decoration:none;height:100%}
.trt .trt-stops a:hover,.trt .trt-stops a:focus-visible{background:var(--trt-panel-3);text-decoration:none}
.trt .trt-stops b{grid-row:span 2;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:12px;background:rgba(255,255,255,.08);color:var(--trt-panel-muted);font-family:var(--trt-font-num)}
.trt .trt-stops .is-live b{background:var(--trt-accent);color:#0f2a17}
.trt .trt-stops small{font-size:12px;color:var(--trt-panel-muted)}
.trt .trt-stops span{font-size:14px;font-weight:600;line-height:1.4}
@media (max-width:520px){.trt .trt-stops{grid-template-columns:minmax(0,1fr)}}
.trt .trt-tcard__go{margin-top:auto}
.trt .trt-related .trt-tcard__art{height:80px}


/* ==========================================================================
   COMPONENT LIBRARY (new in 2.0). Snippets: DESIGN.md
   spec | specchip | led | diagram | steps--wire | callout--tip/warn/legal | verdict | docsheet | matrix | compare
   wire swatch | typ tag | checklist
   ========================================================================== */

/* ---- .trt-spec: ruled spec table (table or dl) ---- */
.trt table.trt-spec{width:100%;border-collapse:collapse;font-size:15px;border-top:3px solid var(--trt-ink);font-variant-numeric:tabular-nums;background:#fff}
.trt .trt-spec caption{caption-side:top;text-align:start;font-family:var(--trt-font-head);font-weight:600;font-size:16px;color:var(--trt-ink);padding:0 0 10px}
.trt .trt-spec thead th{font-size:12.5px;font-weight:600;color:var(--trt-muted);text-align:start;padding:8px 12px;background:var(--trt-surface);border-bottom:1px solid var(--trt-line-strong);white-space:nowrap}
.trt .trt-spec th[scope=row]{text-align:start;font-weight:500;color:var(--trt-muted);padding:11px 12px;border-bottom:1px solid var(--trt-line);vertical-align:baseline}
.trt .trt-spec th[scope=row]:where(:first-child:nth-last-child(2)){width:44%}
/* 1.2.0: code, samples and code tokens keep left-to-right order on Arabic pages */
.trt[dir=rtl] :is(code,samp,kbd,pre):not([dir]){direction:ltr;unicode-bidi:isolate}
.trt[dir=rtl] :is(code,samp,kbd,pre,bdi,textarea)[dir=ltr]{direction:ltr;unicode-bidi:isolate}
.trt .trt-nobr{white-space:nowrap}
.trt .trt-spec td{padding:11px 12px;border-bottom:1px solid var(--trt-line);font-family:var(--trt-font-num);font-weight:600;color:var(--trt-ink);vertical-align:baseline}
.trt .trt-spec td .u,.trt .trt-spec td small{font-weight:500;color:var(--trt-muted);font-size:.86em;margin-inline-start:4px}
.trt .trt-spec td.note{font-family:var(--trt-font);font-weight:400;font-size:13px;color:var(--trt-muted)}
.trt .trt-spec tr.is-key th,.trt .trt-spec tr.is-key td{background:var(--trt-hue-soft);color:var(--trt-ink)}
.trt .trt-spec tr:last-child th,.trt .trt-spec tr:last-child td{border-bottom:2px solid var(--trt-ink)}
.trt .trt-spec td .trt-typ{margin-inline-start:8px}
/* dl flavour: two columns of label / value pairs */
.trt dl.trt-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0;border-top:3px solid var(--trt-ink)}
.trt dl.trt-spec>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 2px;border-bottom:1px solid var(--trt-line)}
.trt dl.trt-spec dt{color:var(--trt-muted);font-size:14.5px}
.trt dl.trt-spec dd{margin:0;font-family:var(--trt-font-num);font-weight:600;color:var(--trt-ink);text-align:end;font-variant-numeric:tabular-nums}
@media (max-width:640px){.trt dl.trt-spec{grid-template-columns:minmax(0,1fr)}}

/* ---- .trt-specchip: device fact in a pill, with the green round icon of the tracom.io hero ---- */
.trt .trt-specchips{display:flex;flex-wrap:wrap;gap:8px}
.trt .trt-specchip{--chip-bg:#fff;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:5px 14px 5px 5px;border-radius:var(--trt-r-pill);background:var(--chip-bg);border:1px solid var(--trt-line-strong);color:var(--trt-ink);font-size:13px;line-height:1.2;white-space:nowrap;max-width:100%}
.trt[dir="rtl"] .trt-specchip{padding:5px 5px 5px 14px}
.trt .trt-specchip>svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--trt-green);color:var(--trt-graphite);flex:none}
.trt .trt-specchip__k{color:var(--trt-muted);font-weight:500}
.trt .trt-specchip__v{font-family:var(--trt-font-num);font-weight:700;font-variant-numeric:tabular-nums;font-size:14.5px}
.trt .trt-specchip--plain{padding-inline-start:12px}
.trt .trt-hero .trt-specchip,.trt .trt-specchip--dark{--chip-bg:rgba(34,32,33,.78);border-color:rgba(255,255,255,.22);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.trt .trt-hero .trt-specchip__k,.trt .trt-specchip--dark .trt-specchip__k{color:#b9c0bb}

/* ---- .trt-led: status lamp. Always keep the text label: shape differs too (circle / triangle / diamond) ---- */
.trt .trt-led{--led:#8e979c;--led-glow:transparent;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--trt-ink);line-height:1.3}
.trt .trt-led::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--led);box-shadow:0 0 0 3px var(--led-glow),0 0 9px 1px var(--led-glow)}
.trt .trt-led--ok{--led:#40bd61;--led-glow:rgba(64,189,97,.35)}
.trt .trt-led--check{--led:#ffcd57;--led-glow:rgba(255,205,87,.42)}
.trt .trt-led--check::before{border-radius:2px;clip-path:polygon(50% 0,100% 100%,0 100%);width:13px;height:12px;box-shadow:none;filter:drop-shadow(0 0 4px var(--led-glow))}
.trt .trt-led--fail{--led:#e5483f;--led-glow:rgba(229,72,63,.4)}
.trt .trt-led--fail::before{border-radius:1px;transform:rotate(45deg);width:10px;height:10px}
.trt .trt-led--off{--led:#8e979c}
.trt .trt-led--lg{font-size:17px;gap:11px}
.trt .trt-led--lg::before{width:16px;height:16px}
.trt .trt-led--lg.trt-led--check::before{width:19px;height:17px}
.trt .trt-led--lg.trt-led--fail::before{width:14px;height:14px}
.trt .trt-led--blink::before{animation:trt-blink 1.4s steps(2,jump-none) infinite}
@keyframes trt-blink{50%{opacity:.25}}
.trt .trt-leds{display:flex;flex-wrap:wrap;gap:10px 22px}
.trt .trt-leds--panel{background:var(--trt-graphite);padding:12px 16px;border-radius:var(--trt-r);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.trt .trt-leds--panel .trt-led,.trt .trt-panel .trt-led,.trt .trt-hero .trt-led{color:#f2f5f7}

/* ---- .trt-diagram: figure for SVG wiring / flow / schematic ---- */
.trt .trt-diagram{margin:0;border:1px solid var(--trt-line-strong);border-radius:var(--trt-r);background:#fff;overflow:hidden;--art-accent:var(--trt-hue-ink)}
.trt .trt-diagram__canvas{padding:clamp(12px,2vw,24px);color:var(--trt-graphite);overflow-x:auto;
  background:linear-gradient(rgba(34,32,33,.05) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(34,32,33,.05) 1px,transparent 1px) 0 0/16px 16px,var(--trt-surface)}
.trt .trt-diagram__canvas>svg{display:block;width:100%;max-width:780px;max-height:360px;height:auto;min-width:0;margin-inline:auto}
.trt .trt-diagram--wide .trt-diagram__canvas>svg{min-width:480px}
.trt .trt-diagram figcaption{display:flex;gap:10px;align-items:baseline;padding:10px 16px;font-size:13.5px;color:var(--trt-muted);border-top:1px solid var(--trt-line-strong);background:#fff}
.trt .trt-diagram figcaption b{font-family:var(--trt-font-num);color:var(--trt-ink);font-weight:700;flex:none}
.trt .trt-diagram--dark{background:var(--trt-panel);border-color:var(--trt-panel);--art-accent:var(--trt-hue-dk)}
.trt .trt-diagram--dark .trt-diagram__canvas{color:#e6ebe7;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/16px 16px,var(--trt-panel-2)}
.trt .trt-diagram--dark figcaption{background:var(--trt-panel);color:var(--trt-panel-muted);border-color:var(--trt-panel-line)}
.trt .trt-diagram--dark figcaption b{color:#fff}
/* classes to use inside diagram SVGs */
.trt .trt-diagram svg .d-box{fill:#fff;stroke:currentColor;stroke-width:1.7}
.trt .trt-diagram--dark svg .d-box{fill:var(--trt-panel-3)}
.trt .trt-diagram svg .d-dev{fill:currentColor;stroke:currentColor;stroke-width:1.7}
.trt .trt-diagram svg .d-line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trt .trt-diagram svg .d-wire{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trt .trt-diagram svg .d-dash{stroke-dasharray:5 5}
.trt .trt-diagram svg .w-pwr{stroke:#d9382f}
.trt .trt-diagram svg .w-gnd{stroke:#222021}
.trt .trt-diagram--dark svg .w-gnd{stroke:#9aa3a8}
.trt .trt-diagram svg .w-acc{stroke:#ffcd57}
.trt .trt-diagram svg .w-sig{stroke:#40bd61}
.trt .trt-diagram svg .w-can{stroke:#6f93a8}
.trt .trt-diagram svg .d-pin{fill:#fff;stroke:currentColor;stroke-width:1.7}
.trt .trt-diagram svg .d-hot{fill:var(--art-accent)}
.trt .trt-diagram svg .d-label{font:600 12px var(--trt-font-num);fill:currentColor}
.trt[dir="rtl"] .trt-diagram svg .d-label{font-family:var(--trt-font)}
.trt .trt-diagram svg .d-muted{fill:var(--trt-muted);font:500 11px var(--trt-font)}

/* ---- wire swatch (installer colour code) ---- */
.trt .trt-wire{display:inline-block;width:22px;height:8px;border-radius:4px;vertical-align:middle;background:var(--w,#888);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);margin-inline-end:6px}
.trt .trt-wire--red{--w:#d9382f}.trt .trt-wire--black{--w:#222021}.trt .trt-wire--yellow{--w:#ffcd57}.trt .trt-wire--green{--w:#40bd61}
.trt .trt-wire--blue{--w:#4b7ea6}.trt .trt-wire--white{--w:#fff}.trt .trt-wire--orange{--w:#f08a24}.trt .trt-wire--brown{--w:#8a5a3a}.trt .trt-wire--grey{--w:#9aa3a8}
.trt .trt-wire--striped{background-image:repeating-linear-gradient(115deg,transparent 0 5px,rgba(0,0,0,.55) 5px 7px)}

/* ---- .trt-steps--wire: install steps on a cable; data-wire colours the cable ---- */
.trt .trt-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:trt-step}
.trt .trt-steps>li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;padding-bottom:26px;counter-increment:trt-step}
.trt .trt-steps>li:last-child{padding-bottom:0}
.trt .trt-steps>li::before{content:counter(trt-step);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--trt-graphite);color:#fff;font:700 15px/1 var(--trt-font-num);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--trt-hue)}
.trt .trt-steps>li>*{grid-column:2}
.trt .trt-steps h3,.trt .trt-steps h4,.trt .trt-steps b.trt-step__t{font-size:17px;margin:4px 0 4px;font-family:var(--trt-font-head);font-weight:600;color:var(--trt-ink);display:block;letter-spacing:-.01em}
.trt .trt-steps p{font-size:15px;color:var(--trt-muted)}
.trt .trt-steps>li>:first-child{grid-row:1}
.trt .trt-steps--wire>li{--wire:var(--trt-line-strong)}
.trt .trt-steps--wire>li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:15px;top:46px;bottom:6px;width:6px;border-radius:3px;background:var(--wire);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.trt .trt-steps--wire>li[data-wire="pwr"]{--wire:#d9382f}
.trt .trt-steps--wire>li[data-wire="gnd"]{--wire:#222021}
.trt .trt-steps--wire>li[data-wire="acc"]{--wire:#ffcd57}
.trt .trt-steps--wire>li[data-wire="sig"]{--wire:#40bd61}
.trt .trt-steps--wire>li[data-wire="can"]{--wire:#6f93a8}
.trt .trt-step__tag{display:inline-flex;justify-self:start;align-self:start;width:fit-content;align-items:center;gap:6px;margin-top:8px;padding:3px 10px;border-radius:var(--trt-r-pill);background:var(--trt-surface-2);font:600 12px var(--trt-font-num);color:var(--trt-ink)}
.trt .trt-steps .trt-callout{margin-top:10px}
.trt .trt-section--dark .trt-steps>li::before{box-shadow:0 0 0 4px var(--trt-panel),0 0 0 6px var(--trt-hue);background:#fff;color:var(--trt-graphite)}

/* ---- callouts: tip / warn / legal ---- */
.trt .trt-callout--tip,.trt .trt-callout--warn,.trt .trt-callout--legal{position:relative;display:block;border:1px solid var(--cl-line);border-inline-start:4px solid var(--cl-bar);background:var(--cl-bg);border-radius:var(--trt-r);padding:14px 16px;padding-inline-start:54px;font-size:15px;color:var(--trt-ink)}
.trt[dir="rtl"] .trt-callout--tip,.trt[dir="rtl"] .trt-callout--warn,.trt[dir="rtl"] .trt-callout--legal{border-radius:var(--trt-r)}
.trt .trt-callout--tip::before,.trt .trt-callout--warn::before,.trt .trt-callout--legal::before{content:"";position:absolute;inset-inline-start:16px;top:15px;width:24px;height:24px;background:var(--cl-ico);-webkit-mask:var(--cl-mask) center/contain no-repeat;mask:var(--cl-mask) center/contain no-repeat}
.trt .trt-callout--tip{--cl-bg:#E8F6EC;--cl-line:#bfe3ca;--cl-bar:#40bd61;--cl-ico:#0F7A3F;--cl-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.9%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M13%203L5%2013.5h6L10%2021l8-10.5h-6z%27/%3E%3C/svg%3E")}
.trt .trt-callout--warn{--cl-bg:#FFF4D6;--cl-line:#f1d98f;--cl-bar:#ffcd57;--cl-ico:#8a5a00;--cl-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%204l9.5%2016.5h-19zM12%2010v4.5M12%2017.4v.1%27/%3E%3C/svg%3E")}
.trt .trt-callout--legal{--cl-bg:#EEF1F3;--cl-line:#c7d0d6;--cl-bar:#222021;--cl-ico:#222021;--cl-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.9%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M7%203h7.5L19%207.5V21H7zM14.5%203v5H19M10%2013h6M10%2017h6%27/%3E%3C/svg%3E");border-style:dashed;border-inline-start-style:solid}
.trt .trt-callout__t{display:block;font-family:var(--trt-font-head);font-weight:600;margin-bottom:2px}
.trt .trt-callout--tip>*+*,.trt .trt-callout--warn>*+*,.trt .trt-callout--legal>*+*{margin-top:.5em}

/* ---- .trt-typ / .trt-typnote: "typical value, replace with the datasheet value" ---- */
.trt .trt-typ{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--trt-font);padding:3px 8px;border-radius:4px;color:#6b4700;background:#FFF4D6;border:1px dashed #d9a928;white-space:nowrap;vertical-align:middle}
.trt .trt-typnote{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#5c3f00;background:#FFF4D6;border:1px dashed #d9a928;border-radius:var(--trt-r);padding:9px 12px}
.trt .trt-typnote::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;background:#8a5a00;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.9%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3.5%2016.5L16.5%203.5l4%204-13%2013zM8%2012l2.2%202.2M11%209l2.2%202.2M14%206l2.2%202.2%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.9%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3.5%2016.5L16.5%203.5l4%204-13%2013zM8%2012l2.2%202.2M11%209l2.2%202.2M14%206l2.2%202.2%27/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- .trt-verdict: go / check / stop, readable from a ladder ---- */
.trt .trt-verdict{--v:#40bd61;--v-glow:rgba(64,189,97,.38);--v-bg:#E8F6EC;--v-line:#bfe3ca;--v-ink:#0F7A3F;--v-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272.6%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012.5l4.2%204.2L19%207%27/%3E%3C/svg%3E");--v-fg:#222021;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:18px 20px;border-radius:var(--trt-r-lg);background:var(--v-bg);border:1px solid var(--v-line);color:var(--trt-ink)}
.trt .trt-verdict__lamp{width:60px;height:60px;border-radius:50%;background:var(--v);box-shadow:0 0 0 6px var(--v-glow),inset 0 -6px 10px rgba(0,0,0,.14);display:grid;place-items:center;flex:none}
.trt .trt-verdict__lamp::before{content:"";width:30px;height:30px;background:var(--v-fg);-webkit-mask:var(--v-mask) center/contain no-repeat;mask:var(--v-mask) center/contain no-repeat}
.trt .trt-verdict__t{display:block;font-family:var(--trt-font-head);font-weight:700;font-size:clamp(22px,3.2vw,28px);line-height:1.15;color:var(--trt-ink);letter-spacing:-.02em}
.trt[dir="rtl"] .trt-verdict__t{letter-spacing:0;line-height:1.4}
.trt .trt-verdict__s{font-size:14.5px;color:var(--trt-muted);margin-top:4px}
.trt .trt-verdict__v{font-family:var(--trt-font-num);font-weight:700;font-size:clamp(26px,4vw,36px);color:var(--v-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.trt .trt-verdict--check{--v:#ffcd57;--v-glow:rgba(255,205,87,.5);--v-bg:#FFF4D6;--v-line:#f1d98f;--v-ink:#8a5a00;--v-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%204l9.5%2016.5h-19zM12%2010v4.5M12%2017.4v.1%27/%3E%3C/svg%3E")}
.trt .trt-verdict--stop{--v:#e5483f;--v-glow:rgba(229,72,63,.32);--v-bg:#FCE9E7;--v-line:#f2b9b4;--v-ink:#B3261E;--v-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M6%206l12%2012M18%206L6%2018%27/%3E%3C/svg%3E");--v-fg:#fff}
@media (max-width:480px){.trt .trt-verdict{grid-template-columns:auto minmax(0,1fr);padding:14px}.trt .trt-verdict__v{grid-column:1/-1}.trt .trt-verdict__lamp{width:48px;height:48px}.trt .trt-verdict__lamp::before{width:24px;height:24px}}
.trt .trt-panel .trt-verdict{background:rgba(255,255,255,.06);border-color:var(--trt-panel-line);color:#fff}
.trt .trt-panel .trt-verdict__t{color:#fff}
.trt .trt-panel .trt-verdict__s{color:var(--trt-panel-muted)}
.trt .trt-panel .trt-verdict__v{color:var(--v)}

/* ---- .trt-docsheet: A4 paper for template previews ---- */
.trt .trt-docsheet{--ink:#222021;position:relative;margin:0;width:100%;max-width:440px;aspect-ratio:210/297;background:#fff;color:var(--ink);border-radius:3px;padding:28px 28px 24px;container-type:inline-size;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 50px -26px rgba(0,0,0,.6),0 0 0 1px rgba(34,32,33,.1);overflow:hidden;font-size:clamp(9px,1.5vw,12px);line-height:1.4;container-type:inline-size}
.trt .trt-docsheet--landscape{aspect-ratio:297/210;max-width:560px}
.trt .trt-docsheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:3%;border-bottom:2px solid var(--ink)}
.trt .trt-docsheet__brand{display:flex;align-items:center;gap:8px;font:700 1.15em var(--trt-font-head)}
.trt .trt-docsheet__brand::before{content:"";width:1.4em;height:1.4em;background:var(--trt-green);-webkit-mask:var(--trt-arrow) center/contain no-repeat;mask:var(--trt-arrow) center/contain no-repeat}
.trt .trt-docsheet__code{font:600 .95em var(--trt-font-num);padding:.2em .6em;border:1px solid var(--ink);border-radius:2px}
.trt .trt-docsheet__title{font:700 clamp(13px,4.6cqw,20px)/1.2 var(--trt-font-head);letter-spacing:-.01em;color:var(--ink)}
.trt .trt-docsheet__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--ink)}
.trt .trt-docsheet__meta>div{padding:.45em .7em;border-inline-end:1px solid var(--ink);border-bottom:1px solid var(--ink);min-height:2.6em}
.trt .trt-docsheet__meta>div:nth-child(2n){border-inline-end:0}
.trt .trt-docsheet__meta>div:nth-last-child(-n+2){border-bottom:0}
.trt .trt-docsheet__meta small{display:block;font-size:.78em;color:#6b706c}
.trt .trt-docsheet__meta b{font-weight:600;font-family:var(--trt-font-num)}
.trt .trt-docsheet__body{flex:1;display:flex;flex-direction:column;gap:.9em;min-height:0}
.trt .trt-docsheet__line{display:block;height:.7em;border-radius:2px;background:#dfe5e8;width:var(--w,100%)}
.trt .trt-docsheet__line--h{height:1em;background:var(--ink);width:var(--w,40%)}
.trt .trt-docsheet__row{display:grid;grid-template-columns:1.2em 1fr 3.4em 3.4em;gap:.7em;align-items:center}
.trt .trt-docsheet__row::before{content:"";width:1.1em;height:1.1em;border:1.5px solid var(--ink);border-radius:2px}
.trt .trt-docsheet__row.is-done::before{background:var(--trt-green) url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23222021%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012.5l4.2%204.2L19%207%27/%3E%3C/svg%3E") center/80% no-repeat;border-color:#0F7A3F}
.trt .trt-docsheet__row .trt-docsheet__line:nth-child(n+2){width:100%}
.trt .trt-docsheet__sig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8%;margin-top:auto}
.trt .trt-docsheet__sig span{border-top:1px solid var(--ink);padding-top:.35em;font-size:.82em;color:#555a56}
.trt .trt-docsheet__foot{display:flex;justify-content:space-between;font-size:.8em;color:#6b706c;border-top:1px solid #dfe5e8;padding-top:.6em}
.trt .trt-docsheet__stamp{position:absolute;inset-inline-end:26px;bottom:20%;transform:rotate(calc(-9deg * var(--trt-dir,1)));border:2px solid #B3261E;color:#B3261E;border-radius:4px;padding:.2em .7em;font:700 .95em var(--trt-font-head);opacity:.85;pointer-events:none}

/* ---- .trt-checklist: tick rows (clipboard in the checklist hero) ---- */
.trt .trt-checklist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.trt .trt-checklist li{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--trt-line);font-size:15px;color:var(--trt-ink);font-weight:500}
.trt .trt-checklist li::before{content:"";flex:none;width:20px;height:20px;border-radius:4px;border:2px solid var(--trt-graphite);background:#fff}
.trt .trt-checklist li.is-done::before{background:var(--trt-green) url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23222021%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012.5l4.2%204.2L19%207%27/%3E%3C/svg%3E") center/78% no-repeat;border-color:var(--trt-green-deep)}
.trt .trt-checklist li.is-flag::before{background:var(--trt-amber) url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23222021%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%205v9M12%2018.3v.2%27/%3E%3C/svg%3E") center/70% no-repeat;border-color:#8a5a00}
.trt .trt-checklist li small{margin-inline-start:auto;font:600 12px var(--trt-font-num);color:var(--trt-muted)}

/* ---- .trt-matrix: compliance / readiness matrix ---- */
.trt table.trt-matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:560px}
.trt .trt-matrix thead th{position:sticky;top:0;background:var(--trt-graphite);color:#fff;font:600 13px var(--trt-font-head);text-align:start;padding:11px 12px;white-space:nowrap}
.trt .trt-matrix thead th:first-child{border-start-start-radius:calc(var(--trt-r) - 1px)}
.trt .trt-matrix thead th:last-child{border-start-end-radius:calc(var(--trt-r) - 1px)}
.trt .trt-matrix tbody th[scope=row]{text-align:start;font-weight:600;color:var(--trt-ink);padding:12px;border-bottom:1px solid var(--trt-line);background:#fff;min-width:11em;vertical-align:top}
.trt .trt-matrix td{padding:12px;border-bottom:1px solid var(--trt-line);vertical-align:top;color:var(--trt-ink)}
.trt .trt-matrix td[data-s]{position:relative;padding-inline-start:38px;min-width:9em}
.trt .trt-matrix td[data-s]::before{content:"";position:absolute;inset-inline-start:10px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--m) var(--m-ico) center/66% no-repeat}
.trt .trt-matrix td[data-s="ok"]{--m:#40bd61;--m-ico:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23222021%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012.5l4.2%204.2L19%207%27/%3E%3C/svg%3E")}
.trt .trt-matrix td[data-s="check"]{--m:#ffcd57;--m-ico:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23222021%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%205v9M12%2018.3v.2%27/%3E%3C/svg%3E")}
.trt .trt-matrix td[data-s="fail"]{--m:#e5483f;--m-ico:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M6%206l12%2012M18%206L6%2018%27/%3E%3C/svg%3E")}
.trt .trt-matrix td[data-s="na"]{--m:#dfe5e8;--m-ico:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%236b706c%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M6%2012h12%27/%3E%3C/svg%3E");color:var(--trt-muted)}
.trt .trt-matrix td small{display:block;color:var(--trt-muted);font-size:12.5px;margin-top:2px}
.trt .trt-matrix__legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px;padding:0;list-style:none;font-size:13px}

/* ---- .trt-compare: 2-3 column comparison ---- */
.trt .trt-compare{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:16px;align-items:stretch}
.trt .trt-compare--3{--cols:3}
@media (max-width:860px){.trt .trt-compare,.trt .trt-compare--3{grid-template-columns:minmax(0,1fr)}}
.trt .trt-compare__col{display:flex;flex-direction:column;background:#fff;border:1px solid var(--trt-line-strong);border-radius:var(--trt-r-lg);overflow:hidden}
.trt .trt-compare__col>header{display:grid;gap:6px;padding:18px 20px;background:var(--trt-surface);border-bottom:2px solid var(--trt-ink)}
.trt .trt-compare__col>header h3{font-size:19px}
.trt .trt-compare__sub{font-size:14px;color:var(--trt-muted)}
.trt .trt-compare__col dl{margin:0;padding:6px 20px 8px;display:grid}
.trt .trt-compare__col dl>div{display:grid;gap:2px;padding:11px 0;border-bottom:1px solid var(--trt-line)}
.trt .trt-compare__col dl>div:last-child{border-bottom:0}
.trt .trt-compare__col dt{font-size:12.5px;font-weight:600;color:var(--trt-muted)}
.trt .trt-compare__col dd{margin:0;font-family:var(--trt-font-num);font-weight:600;color:var(--trt-ink);font-size:16px}
.trt .trt-compare__col>footer{margin-top:auto;padding:14px 20px 18px;font-size:14px;color:var(--trt-muted);border-top:1px solid var(--trt-line)}
.trt .trt-compare__col--best{border-color:var(--trt-graphite);box-shadow:0 0 0 1px var(--trt-graphite),var(--trt-shadow)}
.trt .trt-compare__col--best>header{background:var(--trt-graphite);border-bottom-color:var(--trt-green)}
.trt .trt-compare__col--best>header h3{color:#fff}
.trt .trt-compare__col--best>header .trt-compare__sub{color:var(--trt-panel-muted)}
.trt .trt-compare__col--best>header .trt-chip{background:var(--trt-green);color:var(--trt-graphite);justify-self:start}

.trt .trt-callout+.trt-callout{margin-top:10px}

.trt .trt-formula{white-space:pre-wrap;overflow-wrap:anywhere}

/* share link */
.trt .trt-rcard__acts{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.trt .trt-input-plain{display:block;width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--trt-line-strong);border-radius:8px;font:inherit;font-size:13px;direction:ltr;background:#fff;color:var(--trt-ink)}
/* engine: editable cells, output tables, questions, option cards */
.trt .trt-table--edit td{padding:8px 6px}
.trt .trt-table--edit input.trt-cell,.trt .trt-table--edit select.trt-select--cell{width:100%;min-width:72px;min-height:40px;padding:6px 10px;border:1px solid var(--trt-field-line);border-radius:6px;font:inherit;font-size:15px;background:#fff;color:var(--trt-ink);font-family:var(--trt-font-num)}
.trt .trt-table--edit td:first-child input.trt-cell{min-width:150px}
.trt .trt-table--edit input.trt-cell.is-invalid{border-color:var(--trt-bad);background:var(--trt-bad-bg)}
.trt .trt-table--edit select.trt-select--cell{padding-inline-end:30px}
.trt .trt-rcard .trt-table-wrap{border-color:var(--trt-line)}
.trt table.trt-table--out{min-width:480px;font-size:13.5px}
.trt table.trt-table--out tbody th{font-weight:600;color:var(--trt-ink)}
.trt table.trt-table--out td{font-variant-numeric:tabular-nums;white-space:nowrap}
.trt .trt-q{border:1px solid var(--trt-line);border-radius:var(--trt-r);padding:16px;margin:0;display:grid;gap:10px;background:#fff}
.trt .trt-q legend{font-weight:600;font-size:15px;color:var(--trt-ink);padding:0 4px;float:left;width:100%;margin-bottom:6px}
.trt[dir="rtl"] .trt-q legend{float:right}
.trt .trt-q__opts{display:grid;gap:6px;clear:both}
.trt .trt-opt-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.45}
.trt .trt-opt-row:hover{background:var(--trt-surface)}
.trt .trt-opt-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--trt-brand);flex:none}
.trt .trt-opt-row:has(input:checked){background:var(--trt-surface-2)}
.trt .trt-check--card{border:1px solid var(--trt-line);border-radius:var(--trt-r);padding:12px 14px;background:#fff}
.trt .trt-check--card:has(input:checked){border-color:var(--trt-brand);background:var(--trt-surface)}
.trt .trt-check--card b{display:block;font-size:14px;color:var(--trt-ink)}
.trt .trt-check--card small{display:block;font-size:13px;color:var(--trt-muted);margin-top:2px}
.trt .trt-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:600px){.trt .trt-checks{grid-template-columns:minmax(0,1fr)}}
.trt .trt-shared{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--trt-muted);background:var(--trt-surface);border-radius:8px;padding:10px 12px;margin:0}
.trt .trt-shared svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--trt-brand)}
.trt .trt-related .trt-tcard__art{height:80px}
.trt .trt-table--out th[scope=row]{white-space:nowrap}
.trt .trt-table--edit input.trt-cell[type=date]{min-width:150px}
.trt .trt-reqs{margin:0;padding-inline-start:20px;display:grid;gap:14px}
.trt .trt-reqs>li>p{margin:0 0 6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trt .trt-reqs ul{margin:0;padding-inline-start:18px;display:grid;gap:4px;color:var(--trt-muted);font-size:14px}
.trt .trt-reqs--flat{gap:8px;font-size:15px}

/* 1.7.0: phones — result values wrap instead of being cut, and read-only result tables fit the screen */
/* 1.8.6: "anywhere" broke numbers and «ر.س.» one character per line; read-only tables now wrap only between words,
   result tables (--out) keep values on one line and scroll inside their frame (rules at the end of this file) */
@media (max-width:480px){.trt .trt-kpi__v{font-size:clamp(15px,4.4vw,18px);line-height:1.3}.trt table.trt-table:not(.trt-table--out):not(:has(input,select)){min-width:0}.trt table.trt-table:not(.trt-table--out):not(:has(input,select)) th,.trt table.trt-table:not(.trt-table--out):not(:has(input,select)) td{white-space:normal;overflow-wrap:break-word}.trt table.trt-table:not(:has(input,select)) td.n,.trt table.trt-table:not(:has(input,select)) th.n{white-space:nowrap}}
@media (max-width:340px){.trt .trt-kpis{grid-template-columns:1fr}}

/* results are drawn by script: keep their place on wide screens so the cards under them do not jump while the page loads */
.trt .trt-interpret:empty{display:none}
@media (min-width:1025px){.trt .trt-tool__out [data-res]:empty{min-height:420px}}
/* ==========================================================================
   1.8.6 — display fixes from the usability tests (phones 320–480px, desktop tables)
   ========================================================================== */
.trt .trt-panel{--trt-tbl-bg:var(--trt-panel)}
.trt .trt-rcard[style*="--trt-panel-2"]{--trt-tbl-bg:var(--trt-panel-2)}
.trt .trt-tabs{--trt-tbl-bg:var(--trt-surface)}

/* Tables (and tab rows) that scroll sideways show it: a shadow on each side that still has columns to see
   (it disappears at the end of the scroll), a thin visible scrollbar, and the first column stays in place.
   Cells and inputs are transparent so the shadow shows through them. */
.trt .trt-table-wrap,.trt .trt-sheet__scroll,.trt .trt-tabs,.trt .trt-sheet__tabs{
  background:
    linear-gradient(to right,var(--trt-tbl-bg) 40%,transparent) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--trt-tbl-bg) 40%,transparent) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--trt-tbl-shade),transparent) left center/26px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--trt-tbl-shade),transparent) right center/26px 100% no-repeat scroll;
  background-color:var(--trt-tbl-bg);
  scrollbar-width:thin;scrollbar-color:var(--trt-line-strong) transparent;overscroll-behavior-x:contain}
.trt .trt-sheet__scroll{--trt-tbl-bg:#fff}
.trt .trt-sheet__tabs{--trt-tbl-bg:var(--trt-surface-2)}
/* template preview: the file extension reads «.xlsx», not «xlsx.», on Arabic pages */
.trt .trt-sheet__bar small{direction:ltr;unicode-bidi:isolate}
/* focus ring drawn inside the frame */
.trt .trt-table-wrap:focus-visible,.trt .trt-sheet__scroll:focus-visible{box-shadow:none;outline:2px solid var(--trt-brand);outline-offset:-2px}
/* Where scroll-driven animations exist, the shadows follow the scroll position directly (this also covers
   right-to-left tables, where some browsers misplace the covers above); a table that fits shows no shadow */
@property --trt-shs{syntax:"<color>";inherits:false;initial-value:transparent}
@property --trt-she{syntax:"<color>";inherits:false;initial-value:transparent}
@keyframes trt-scroll-shadows{0%{--trt-shs:transparent;--trt-she:var(--trt-tbl-shade)}4%{--trt-shs:var(--trt-tbl-shade)}96%{--trt-she:var(--trt-tbl-shade)}100%{--trt-shs:var(--trt-tbl-shade);--trt-she:transparent}}
@supports (animation-timeline:scroll()){
  .trt .trt-table-wrap,.trt .trt-sheet__scroll,.trt .trt-tabs,.trt .trt-sheet__tabs{
    background:
      radial-gradient(farthest-side at 0 50%,var(--trt-shs),transparent) left center/26px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,var(--trt-she),transparent) right center/26px 100% no-repeat;
    background-color:var(--trt-tbl-bg);
    animation:trt-scroll-shadows linear both;animation-timeline:scroll(self inline)}
  .trt[dir="rtl"] .trt-table-wrap,.trt[dir="rtl"] .trt-sheet__scroll,.trt[dir="rtl"] .trt-tabs,.trt[dir="rtl"] .trt-sheet__tabs{
    background:
      radial-gradient(farthest-side at 100% 50%,var(--trt-shs),transparent) right center/26px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,var(--trt-she),transparent) left center/26px 100% no-repeat;
    background-color:var(--trt-tbl-bg)}
  /* a position cue, not motion: keep it when reduced motion is requested */
  @media (prefers-reduced-motion:reduce){
    .trt .trt-table-wrap,.trt .trt-sheet__scroll,.trt .trt-tabs,.trt .trt-sheet__tabs{animation:trt-scroll-shadows linear both!important;animation-timeline:scroll(self inline)!important}
  }
}
.trt .trt-table-wrap::-webkit-scrollbar,.trt .trt-sheet__scroll::-webkit-scrollbar{height:6px}
.trt .trt-table-wrap::-webkit-scrollbar-thumb,.trt .trt-sheet__scroll::-webkit-scrollbar-thumb{background:var(--trt-line-strong);border-radius:3px}
.trt .trt-table-wrap::-webkit-scrollbar-track,.trt .trt-sheet__scroll::-webkit-scrollbar-track{background:transparent}

/* Result tables: values never break (digits, «ر.س.», «AED 1,234», %); row labels wrap between words;
   the table takes its natural width and scrolls inside its frame when it is wider than the card */
.trt table.trt-table--out{min-width:0}
.trt table.trt-table--out td{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.trt table.trt-table--out thead th{white-space:normal;overflow-wrap:normal;word-break:normal;vertical-align:bottom;min-width:4.5em}
.trt table.trt-table--out tbody th[scope=row]{white-space:normal;overflow-wrap:normal;word-break:normal;min-width:7.5em}
.trt table.trt-table--out tbody th[scope=row],.trt table.trt-table--out thead th:first-child{position:sticky;inset-inline-start:0;z-index:1}
.trt table.trt-table--out tbody th[scope=row]{background:var(--trt-tbl-bg)}
.trt table.trt-table--out th,.trt table.trt-table--out td{padding-inline:8px}
.trt table.trt-table--out tr>:first-child{padding-inline-start:12px}
.trt table.trt-table--out thead th:first-child{background:var(--trt-surface)}
/* hook for sentence-length cells (class "t" set by the table renderer): they wrap between words */
.trt table.trt-table--out td.t{white-space:normal;overflow-wrap:normal;min-width:14em}
.trt .trt-table td>.trt-status{white-space:nowrap}
.trt .trt-table tr:last-child th{border-bottom:0}
/* Article tables: short cells such as «10–20 كم/س» are not squeezed to one word per line */
.trt .trt-table-wrap--prose th,.trt .trt-table-wrap--prose td{min-width:5em}
/* Selects show their whole label; in editable tables the select is as wide as its longest option */
.trt select{text-overflow:ellipsis}
.trt .trt-table--edit select.trt-select--cell{width:auto;min-width:100%}

/* Editable tables: the first column (name or day) stays visible while the other columns scroll */
.trt table.trt-table--edit tr>:first-child{position:sticky;inset-inline-start:0;z-index:1;background:var(--trt-tbl-bg)}
.trt table.trt-table--edit thead tr>:first-child{background:var(--trt-surface)}
/* a hairline on the inner side of the fixed column */
.trt table.trt-table--out tbody th[scope=row],.trt table.trt-table--out thead th:first-child,.trt table.trt-table--edit tr>:first-child{box-shadow:inset -1px 0 0 var(--trt-line)}
.trt[dir="rtl"] table.trt-table--out tbody th[scope=row],.trt[dir="rtl"] table.trt-table--out thead th:first-child,.trt[dir="rtl"] table.trt-table--edit tr>:first-child{box-shadow:inset 1px 0 0 var(--trt-line)}
.trt .trt-table--edit input.trt-cell:not(.is-invalid),.trt .trt-table--edit select.trt-select--cell,.trt .trt-table input:not([aria-invalid="true"]){background-color:transparent}
.trt table.trt-table--edit tr>:first-child input.trt-cell:not(.is-invalid),.trt table.trt-table--edit tr>:first-child select.trt-select--cell{background-color:var(--trt-tbl-bg)}
.trt table.trt-table--edit tbody th{font-weight:600;color:var(--trt-ink);font-size:13.5px;line-height:1.4;min-width:8em}

/* Tool settings row: one select alone takes the full row, so «ريال سعودي · SAR» is not cut */
.trt .trt-toolbar>.trt-field:only-child{grid-column:1/-1}

/* Mobile result bar and "get the file" bar: label on up to 2 lines, value and button on one line */
@media (max-width:1024px){
  .trt .trt-mbar>div{flex:1 1 auto}
  .trt .trt-mbar small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35}
  .trt .trt-mbar b{white-space:normal;overflow-wrap:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25}
  .trt .trt-mbar .trt-btn{flex:none;white-space:nowrap}
}

/* Tabs on tablets/desktop: a thin scrollbar when they do not fit (the edge shadow above shows more tabs) */
.trt .trt-tabs{scrollbar-width:thin}
.trt .trt-tabs::-webkit-scrollbar{display:block;height:4px}
.trt .trt-tabs::-webkit-scrollbar-thumb{background:var(--trt-line-strong);border-radius:2px}

/* Phones */
@media (max-width:600px){
  /* every tab is visible: tabs wrap into rows of pills instead of scrolling out of sight */
  .trt .trt-tabs{flex-wrap:wrap;overflow:visible;gap:6px;padding:12px 0;margin-inline:0;border:0;border-radius:0;background:none}
  .trt .trt-tab{flex:1 1 auto;justify-content:center;min-height:42px;padding:6px 12px;margin:0;border:1.5px solid var(--trt-line-strong);border-radius:999px;background:#fff;font-size:13.5px;line-height:1.3;text-align:center}
  .trt .trt-tab svg{width:16px;height:16px;flex:none}
  .trt .trt-tab[aria-selected="true"]{background:var(--trt-panel);border-color:var(--trt-panel);color:#fff}
  .trt .trt-tab[aria-selected="true"] .trt-tab-tag{background:rgba(255,255,255,.16);color:#fff}
  /* editable tables use the space they have */
  .trt table.trt-table--edit{min-width:0}
  .trt .trt-table--edit td{padding:6px 4px}
  .trt .trt-table--edit input.trt-cell{min-width:76px;font-size:16px;padding-inline:8px}
  .trt .trt-table--edit select.trt-select--cell{font-size:16px;padding-inline-start:8px}
  .trt .trt-table--edit td:first-child input.trt-cell{min-width:112px}
  .trt .trt-table--edit select.trt-select--cell{padding-inline-end:28px}
  .trt .trt-table input{font-size:16px}
  /* bar charts: label and amount share a line when they fit, otherwise the amount takes its own line */
  .trt .trt-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
  .trt .trt-bar__l{flex:0 1 auto;min-width:0}
  .trt .trt-bar__v{flex:0 1 auto;margin-inline-start:auto;text-align:end;white-space:normal}
  .trt .trt-bar__t{flex:1 1 100%;order:3}
}
@media (max-width:480px){
  .trt{--trt-gutter:12px;--trt-card-px:14px}
  .trt .trt-card,.trt .trt-panel{padding-inline:var(--trt-card-px)}
  .trt .trt-rcard{padding:14px 12px}
  .trt .trt-toolbar{grid-template-columns:minmax(0,1fr);padding:10px 12px}
  /* KPI tiles: a tile is at least as wide as its value, so amounts stay on one line; tiles wrap instead */
  .trt .trt-kpis{display:flex;flex-wrap:wrap}
  .trt .trt-kpi{display:flex;flex-direction:column;flex:1 1 7.25rem;min-width:auto;max-width:100%;padding:12px}
  .trt .trt-kpi__v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trt .trt-big__v{font-size:clamp(30px,9vw,40px)}
  .trt table.trt-table--out{font-size:13px}
  .trt table.trt-table--out th,.trt table.trt-table--out td{padding:9px 7px}
  .trt table.trt-table--out tr>:first-child{padding-inline-start:10px}
  .trt table.trt-table--out tbody th[scope=row]{min-width:8em}
  .trt table.trt-table--out td.t{min-width:11em}
}

/* ---- Print: Tracom paper. White hero, graphite text, thin green rule; no ink-heavy backgrounds ---- */
@media print{
  @page{margin:14mm 12mm}
  body{background:#fff!important}
  .trt{--trt-card-px:0;color:#222021;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .trt .trt-tool__out{position:static}
  .trt .trt-btn,.trt .trt-tabs,.trt .trt-filters,.trt dialog,.trt .trt-mbar,.trt .trt-crumbs,.trt .trt-related,.trt .trt-cta,.trt .trt-hero::after,.trt .trt-hero__art,.trt .trt-rail,.trt .trt-rcta,.trt-fixed{display:none!important}
  .trt .trt-hero{background:#fff!important;color:#222021!important;padding:0 0 10px!important;border-bottom:2px solid #40bd61;--trt-ink:#222021;--trt-muted:#555a56;--trt-line:#d5dbde;--trt-line-strong:#9aa3a7}
  .trt .trt-hero::before{display:none}
  .trt .trt-hero .trt-h1,.trt .trt-hero .trt-lead,.trt .trt-hero p{color:#222021!important}
  .trt .trt-hero .trt-eyebrow{background:none;border-color:#9aa3a7;color:#222021}
  .trt .trt-hero__grid{display:block}
  .trt .trt-panel,.trt .trt-tool__card,.trt .trt-card{box-shadow:none!important;border:1px solid #9aa3a7!important;background:#fff!important}
  .trt .trt-route-panel{background:#fff!important;border:1px solid #9aa3a7!important;color:#222021!important;--trt-ink:#222021;--trt-muted:#555a56;--trt-line:#d5dbde;--trt-surface:#fff;--trt-surface-2:#fff}
  .trt .trt-hero :where(div,ul,ol,li,a,section,aside,nav,span,b,small,p){background:transparent!important;color:#222021!important;box-shadow:none!important;text-shadow:none!important}
  .trt .trt-hero :where(a,li){border-color:#c3cbcf!important}
  .trt .trt-kpi{background:#fff!important;border:1px solid #222021!important;color:#222021!important}
  .trt .trt-kpi *{color:#222021!important}
  .trt .trt-card{break-inside:avoid}
  .trt .trt-tool__out,.trt .trt-result{background:#fff!important;color:#222021!important;border:1px solid #222021!important}
  .trt .trt-tool__out *{color:inherit}
  .trt .trt-bar__t{-webkit-mask:none;mask:none}
  .trt .trt-docsheet{box-shadow:none!important;border:1px solid #222021;transform:none!important;max-width:none;break-inside:avoid}
  .trt .trt-verdict,.trt .trt-callout,.trt .trt-spec tr,.trt .trt-matrix tr,.trt .trt-compare__col,.trt .trt-diagram,.trt .trt-steps li{break-inside:avoid}
  .trt .trt-table-wrap,.trt .trt-sheet__scroll{overflow:visible!important}
  .trt a[href^="http"]:not(.trt-btn)::after{content:" (" attr(href) ")";font-size:.8em;color:#555a56;word-break:break-all}
}