/* =====================================================================
   page-texa.css: the TEXA Konfort 760 page only. Tokens and parts come from system.css.
   1 hero: name as token + descriptor
   2 the three things the machine does (owner's own words) as a schematic: machine <-> two hoses <-> your car's A/C.
     One attribute, data-stage on .tx-sheet (0 rest, 1 pulls the old gas, 2 looks for the leak, 3 fills by the gram), drives the whole drawing.
   3 the two gases and the sticker rule
   ===================================================================== */

/* 1. hero */
.eq-name .l1{display:block}
.eq-name .l2{display:block;font-size:.5em;font-weight:400;color:var(--soft);line-height:1.25;margin-top:.14em;letter-spacing:.005em}
.eq-tx .eq-plate .plate{aspect-ratio:1.12/1}
@media (max-width:899px){.eq-tx .eq-plate .plate{aspect-ratio:1.36/1}}
/* phones (390 x 844): machine, name, line, button, the place line and the hours line all sit on the first screen. The plate is a little shorter and the rhythm a little tighter to make room for the hours. */
@media (max-width:640px){
  .eq-tx .eq-plate{padding-top:16px}
  .eq-tx .eq-plate .plate{aspect-ratio:1.68/1}
  .eq-tx .eq-plate .plate:not(.plate-crop) img{max-width:calc(100% - 40px);max-height:calc(100% - 38px)}
  .eq-tx .eq-name .l2{font-size:.44em}
  .eq-tx .eq-hero{gap:12px}
  .eq-tx .eq-copy{gap:9px}
  .eq-tx .pb-foot{gap:4px 14px}
}
.eq-tx .eq-line{text-wrap:balance}
/* the folio row never breaks: «04 / 07» stays whole and the category shrinks first */
.eq-tx .eq-idx .n{flex:none;white-space:nowrap}
.eq-tx .eq-idx .t{min-width:0}
.eq-tx .eq-idx .dl{flex:0 1 48px;min-width:14px}
/* prev / next on a phone: the device names are a little smaller so «LIQUI MOLY» / «ENGINE FLUSH» stay on one line */
@media (max-width:640px){.eq-tx .eq-pn a b{font-size:clamp(16px,4.7vw,24px);gap:8px}.eq-tx .eq-pn a .ic{width:20px;height:20px}}

/* tap targets: the two phone numbers in the facts bar get a 44 px box (side by side with a wide gap; stacked, 44 px apart, when the bar is narrow); the breadcrumb links get a 44 px hit area with no change in layout */
.eq-tx .fact-tel{gap:0 22px}
.eq-tx .fact-tel a{display:inline-flex;align-items:center;min-height:44px}
.eq-tx .crumbs a{padding-block:10px;margin-block:-10px}
/* the facts bar is one column at 900 px and below: the hero above it already says where we are, so the place cell steps aside */
@media (max-width:900px){
  .eq-tx .facts .fact:first-child{display:none}
  .eq-tx .facts .fact:nth-child(2){border-top:0}
}
/* from 900 px up the hero corner already gives the place and the hours, so the facts bar carries only what is not there: the two labelled numbers (nothing is said twice on one screen) */
@media (min-width:900px){
  .eq-tx .facts .fact:nth-child(-n+2){display:none}
  .eq-tx .facts .fact:nth-child(3){border-inline-start:0;border-top:0}
}
@media (min-width:901px){.eq-tx .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the two numbers are labelled («واتساب · اتصال» / «هاتف الكراج»): the label is the small line, the number is the thing you read and tap */
.eq-tx .fact-t .fact-b b{font-size:var(--fs-3);font-weight:600;color:var(--soft)}
.eq-tx .fact-t .fact-tel a{font-size:var(--fs-5);letter-spacing:.03em}

/* 2. the schematic */
.tx-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.tx-fig{min-width:0}
.tx-sheet{--H:clamp(190px,23vw,262px);--mw:clamp(92px,18vw,190px);position:relative;overflow:hidden;border:1px solid var(--line-2);border-bottom:0;padding:clamp(44px,5vw,62px) clamp(20px,3.4vw,44px) clamp(22px,2.6vw,32px);
  --bc:rgba(79,200,232,.85);--bs:16px;
  background:
    linear-gradient(rgba(79,200,232,.07) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(79,200,232,.07) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(64% 70% at 50% 46%,#22323a 0%,#121a1e 60%,#0b0f11 100%)}
.tx-sheet .zn{color:rgba(214,244,255,.5)}
.tx-row{display:grid;grid-template-columns:var(--mw) minmax(30px,1fr) var(--mw);align-items:start;direction:rtl}
.tx-node{position:relative;display:grid;justify-items:center;gap:14px;min-width:0}
.tx-cap{font-weight:600;font-size:var(--fs-2);line-height:1.5;color:var(--soft);text-align:center;white-space:nowrap}
.tx-cap.lat{font-size:13px;color:var(--cyan)}
.tx-body{position:relative;width:100%;height:var(--H);border:2px solid rgba(255,255,255,.45);border-radius:14px;background:linear-gradient(160deg,#272f35,#0f1315);overflow:hidden;box-shadow:0 0 0 4px rgba(13,13,13,.9),0 0 0 5px rgba(255,255,255,.12)}
/* the machine: a screen with ten level segments, two knobs, two wheels */
.tx-scr{position:absolute;inset:12px 12px auto;height:46%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;align-items:end;padding:10px 8px;border:1.5px solid rgba(79,200,232,.5);border-radius:6px;background:#06181e}
.tx-scr i{display:block;height:calc(22% + var(--i) * 8%);background:rgba(79,200,232,.17);transition:background-color .35s calc(var(--i) * .2s)}
.tx-sheet[data-stage="3"] .tx-scr i{background:var(--cyan)}
.tx-dot{position:absolute;inset:auto 14px 34px;display:flex;gap:10px;justify-content:flex-start}
.tx-dot i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.45)}
.tx-wh{position:absolute;inset:auto 12px 8px;display:flex;justify-content:space-between}
.tx-wh i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.4)}
/* the car's A/C */
.tx-ico{position:absolute;inset:0;display:grid;place-items:center;color:var(--cyan)}
.tx-ico .ic{width:clamp(48px,7vw,72px);height:clamp(48px,7vw,72px);stroke-width:1.2}
.tx-car .tx-body{background:linear-gradient(160deg,#1d2a30,#0d1316);border-style:dashed;border-color:rgba(79,200,232,.5)}
/* the two hose ports and the two hoses */
.tx-port{position:absolute;z-index:2;top:calc(var(--H) * var(--y));width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#0d0d0d;border:2px solid var(--cyan)}
.tx-mach .tx-port{left:-8px}
.tx-car .tx-port{right:-8px}
.tx-pipes{position:relative;height:var(--H)}
.tx-pipe{position:absolute;inset-inline:0;height:6px;margin-top:-3px}
.tx-lo{top:calc(var(--H) * .36);color:#4FC8E8}
.tx-hi{top:calc(var(--H) * .64);color:#dfe6ea}
.tx-pipe i{position:absolute;inset:0;display:block;background:repeating-linear-gradient(90deg,currentColor 0 9px,transparent 9px 18px);background-size:18px 100%;opacity:.4;transition:opacity .4s}
.tx-pipe::after{content:'';position:absolute;top:-8px;bottom:-8px;left:0;width:24%;opacity:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(214,244,255,.95),transparent);pointer-events:none}
/* stage 1: the gas travels to the machine (to the right); stage 3: to the car (to the left); stage 2: a light travels along both hoses and nothing flows. Each runs about 1.5 s, so the whole automatic demo is over in under 5 s. */
.tx-sheet[data-stage="1"] .tx-pipe i{opacity:1;animation:txR .55s linear 3}
.tx-sheet[data-stage="3"] .tx-pipe i{opacity:1;animation:txL .55s linear 3}
.tx-sheet[data-stage="2"] .tx-pipe::after{animation:txSweep 1.3s var(--ease-io) 1 backwards}
.tx-sheet[data-stage="2"] .tx-hi::after{animation-delay:.14s}
@keyframes txR{to{background-position:18px 0}}
@keyframes txL{to{background-position:-18px 0}}
@keyframes txSweep{from{opacity:1;transform:translateX(-100%)}to{opacity:1;transform:translateX(420%)}}
.tx-sheet.is-off *,.tx-sheet.is-off *::after{animation-play-state:paused!important}
.tx-fig .tb{border-top:1px solid var(--line-2)}

/* the three things, as a stepper: the same variable drives the drawing above */
.tx-stages{display:grid;gap:14px;align-content:start;align-self:center}
.tx-st{position:relative;overflow:hidden;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:16px;min-height:76px;padding:14px 20px;border:1px solid var(--line-2);background:rgba(255,255,255,.015);text-align:start;transition:border-color .3s,background-color .3s}
.tx-n{font:600 13px/1 var(--f-data);letter-spacing:.16em;color:var(--dim);direction:ltr;transition:color .3s}
.tx-si{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line-c);color:var(--cyan);transition:background-color .3s,color .3s}
.tx-si .ic{width:26px;height:26px;stroke-width:1.6}
.tx-st b{font-size:var(--fs-5);font-weight:600;line-height:1.5;color:#f0f2f3}
.tx-st[role=button]{cursor:pointer}
.tx-st[role=button]:hover{border-color:var(--cyan)}
.tx-st:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tx-st[aria-pressed=true]{border-color:var(--cyan);background:rgba(79,200,232,.09)}
.tx-st[aria-pressed=true] .tx-n{color:var(--cyan)}
.tx-st[aria-pressed=true] .tx-si{background:var(--cyan);color:#06181e}
.tx-st::after{content:'';position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--cyan);transform:scaleX(0);transform-origin:100% 50%}
.tx-stages.is-auto .tx-st[aria-pressed=true]::after{animation:txBar 1.5s linear both}
@keyframes txBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 3. the gases */
.tx-gas-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(14px,3vw,40px);margin-bottom:clamp(26px,3.4vw,44px)}
.tx-g{display:grid;gap:10px;justify-items:center;padding:clamp(26px,4vw,56px) 12px;background:var(--card);border:1px solid var(--line-2);text-align:center;--bc:rgba(79,200,232,.8);--bs:14px}
.tx-g small{font-size:var(--fs-4);font-weight:600;color:var(--cyan);line-height:1.4}
.tx-g b{font-size:clamp(28px,5.6vw,78px);font-weight:600;line-height:1.05;letter-spacing:.01em;color:#f2f2f2;white-space:nowrap}
.tx-x{position:relative;display:grid;place-items:center;width:clamp(44px,5vw,64px);height:clamp(44px,5vw,64px);border:1.5px solid var(--line-c);border-radius:50%;color:var(--cyan);background:var(--bg-2)}
.tx-x .ic{width:55%;height:55%}
.tx-x::after{content:'';position:absolute;left:50%;top:-9px;bottom:-9px;width:2px;margin-left:-1px;background:#f2f2f2;transform:rotate(45deg);box-shadow:0 0 0 2px var(--bg-2)}
.tx-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* the two notes are equal boxes; a one-line note and a two-line note both sit in the middle of theirs */
.tx-notes .note{align-items:center}

@media (max-width:899px){
  .tx-grid{grid-template-columns:minmax(0,1fr)}
  .tx-notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:359px){
  /* 320 px: the two cards are only ~108 px wide, so «R1234yf» steps down and the middle sign and gaps shrink */
  .tx-gas-grid{gap:8px}
  .tx-x{width:36px;height:36px}
  .tx-g{padding-inline:6px}
  .tx-g b{font-size:24px}
}
.tx-gas .sh-sub{text-wrap:balance}
@media (max-width:560px){
  .tx-sheet{padding:46px 28px 20px;--H:172px;--mw:clamp(84px,24vw,120px)}
  .tx-st{padding:12px 14px;gap:12px}
  .tx-si{width:40px;height:40px}
  .tx-st b{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.tx-stages.is-auto .tx-st::after{display:none}.eq-tx .up,html.js .eq-tx .eq-rule .rail-car{animation:none}}