/* FORSPEC technical data: /technical-data/. Owned by chat 05. Phone first.
   Look A "rows that open": one line per product (name, TDS, SDS), tap the row for every document and the links. */
.td{padding-top:73px;--edge:rgba(255,255,255,.16);--edge2:rgba(255,255,255,.34);--mono:"JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace}
.td .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.td p{margin:0}
.td h2.cond{font-size:clamp(30px,4.2vw,56px);margin:10px 0 0}
.td h1.cond span,.td h2.cond span{color:var(--redT)}
.td :is(input,select,button,a,summary):focus-visible{outline:2px solid var(--redT);outline-offset:2px}
.tdCrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:14px 0;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tdCrumbs a{padding:6px 0}.tdCrumbs a:hover{color:var(--text)}.tdCrumbs b{color:var(--text)}

/* ---------- hero: ruled like a data sheet */
.tdHero{padding-block:18px 20px;background:
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 28px,
  radial-gradient(ellipse at 90% -40%,rgba(221,36,43,.26),transparent 55%)}
.tdHero h1{font-size:clamp(38px,6vw,92px);margin:10px 0 12px;max-width:18ch}
.tdHero .lead{max-width:680px}

/* ---------- finder */
.tdFind{padding-block:16px 40px;border-top:1px solid var(--line);max-width:1180px;margin-inline:auto;box-sizing:content-box}
.tdSearch,.tdSel{position:relative;display:block;border:1.5px solid var(--edge2);background:var(--panel)}
.tdSearch input,.tdSel select{display:block;width:100%;height:50px;background:none;border:0;color:var(--text);font:600 16px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;padding:0 14px;border-radius:0;appearance:none;-webkit-appearance:none;outline:0;text-overflow:ellipsis}
.tdSearch input::placeholder{color:rgba(255,255,255,.66);font-weight:400}
.tdSearch:focus-within,.tdSel:focus-within{border-color:var(--redT)}
.tdSel{margin-top:8px}.tdSel select{padding-right:34px;cursor:pointer}.tdSel select option{color:#111;background:#fff}
.tdSel::after{content:"▾";position:absolute;right:14px;top:14px;pointer-events:none;color:var(--redT)}
.tdChips{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.tdChips::-webkit-scrollbar{display:none}
.tdChip{flex:none;min-height:44px;padding:0 12px;border:1.5px solid var(--edge2);background:none;color:var(--text);font:600 14px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;cursor:pointer;white-space:nowrap}
.tdChip i{font:700 12px var(--mono);font-style:normal;color:var(--dim);margin-left:4px}
.tdChip.on{background:var(--text);color:#000;border-color:var(--text)}.tdChip.on i{color:#333}
.tdCount{display:flex;justify-content:space-between;gap:12px;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:14px 0 8px !important}
.tdCount span:first-child{color:var(--text)}.tdCount span:last-child{text-align:right}

/* ---------- rows */
.tdList{border-top:1px solid var(--edge2)}
.tdRow{border-bottom:1px solid var(--edge);scroll-margin-top:84px}
.tdRow[hidden]{display:none}
.tdjs .tdList.cut .tdRow.more{display:none}
.tdHead{display:grid;grid-template-columns:minmax(0,1fr) 52px 52px 32px;gap:6px;align-items:stretch;min-height:62px;padding:6px 0}.tdHead h3{display:flex}
.tdHead h3{margin:0;min-width:0;font:inherit}
.tdTog{display:block;width:100%;min-height:50px;padding:4px 0;background:none;border:0;color:var(--text);text-align:left;cursor:pointer}
.tdTog b{display:block;font:800 17px/1.15 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;font-stretch:75%;letter-spacing:.01em;overflow-wrap:anywhere}
.tdTog small{display:block;margin-top:3px;font:400 13px/1.25 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}
.tdPill{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;min-height:50px;border:1.5px solid var(--edge2);background:var(--panel);color:var(--text);cursor:pointer;padding:0}
.tdPill b{font:700 14px/1 var(--mono);letter-spacing:.04em}
.tdPill small{font:700 12px/1 var(--mono);color:var(--dim);margin-top:5px}
a.tdPill:hover,button.tdPill:hover{border-color:var(--text);background:var(--text);color:#000}a.tdPill:hover small,button.tdPill:hover small{color:#333}
.tdPill[data-doc="tds"]{border-color:var(--red);background:var(--red)}.tdPill[data-doc="tds"] small{color:#fff}
.tdPill.ask{border-style:dashed}
.tdPill.none{border:0;background:none;cursor:default}
.tdChev{width:32px;min-height:50px;background:none;border:0;color:var(--redT);font-size:18px;cursor:pointer;padding:0}
.tdRow.open .tdChev span{display:inline-block;transform:rotate(180deg)}
.tdjs .tdBody{display:none}
.tdjs .tdRow.open .tdBody{display:block}
.tdBody{padding:2px 0 14px}
.tdDocs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tdDocs a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;min-height:54px;padding:6px 10px 6px 6px;border:1px solid var(--edge);background:var(--panel)}
.tdDocs a:hover{border-color:var(--text)}
.tdDocs .k{display:flex;align-items:center;justify-content:center;height:40px;font:700 12px/1 var(--mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--edge2);color:var(--text)}
.tdDocs .k.tds{background:var(--red);border-color:var(--red)}
.tdDocs .k.sds{background:var(--text);color:#000;border-color:var(--text)}
.tdDocs b{display:block;font:600 15px/1.25 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;overflow-wrap:anywhere}
.tdDocs small{display:block;margin-top:2px;font:400 13px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}
.tdLinks{display:flex;gap:6px;margin-top:8px}
.tdLinks a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 4px;border:1.5px solid var(--edge2);font:600 13px/1.1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;text-align:center;white-space:nowrap}
.tdLinks a:hover{background:var(--text);color:#000;border-color:var(--text)}
.tdLinks a.buy{border-color:var(--text)}
.tdMore{display:none;width:100%;min-height:50px;margin-top:14px;border:1.5px solid var(--text);background:none;color:var(--text);font:700 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.tdjs .tdMore{display:block}.tdjs .tdMore[hidden]{display:none}
.tdMore:hover{background:var(--text);color:#000}
.tdEmpty{display:grid;gap:10px;justify-items:start;padding:22px 0}
.tdEmpty b{font:800 22px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;font-stretch:75%}.tdEmpty span{color:var(--dim)}

/* ---------- questions */
.tdFaq{padding-block:36px 40px;border-top:1px solid var(--line);max-width:1180px;margin-inline:auto;box-sizing:content-box}
.tdQs{margin-top:16px;border-top:1px solid var(--edge2)}
.tdQ{border-bottom:1px solid var(--edge)}
.tdQ summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:54px;padding:8px 0;font:700 17px/1.25 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;cursor:pointer;list-style:none}
.tdQ summary::-webkit-details-marker{display:none}
.tdQ summary::after{content:"+";flex:none;font:400 24px/1 var(--mono);color:var(--redT)}
.tdQ[open] summary::after{content:"−"}
.tdQ p{padding:0 0 16px;color:var(--dim);font-size:16px;max-width:72ch}

/* ---------- job band */
.tdJob{display:grid;gap:18px;padding-block:36px 44px;border-top:1px solid var(--line);background:radial-gradient(ellipse at 100% 0,rgba(221,36,43,.2),transparent 60%)}
.tdJob p{margin-top:10px;color:var(--dim);max-width:60ch}
.tdJobBtns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-content:start}
.tdJobBtns .btn{padding-inline:6px;font-size:13px;letter-spacing:0;gap:6px;white-space:nowrap}

/* ---------- tablet and up: filters on one line, documents in columns */
@media (min-width:768px){
  .tdFind{display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:10px}
  .tdFind>*{grid-column:1/-1}
  .tdFind>.tdSearch{grid-column:1}.tdFind>.tdSel{grid-column:2;margin-top:0}
  .tdChips{flex-wrap:wrap;overflow:visible}
  .tdHead{grid-template-columns:minmax(0,1fr) 64px 64px 40px;gap:8px}
  .tdPill{width:64px}.tdChev{width:40px}
  .tdTog b{font-size:19px}
  .tdDocs{grid-template-columns:1fr 1fr}
  .tdLinks{max-width:560px}
  .tdJob{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .tdJobBtns{grid-template-columns:1fr 1fr}.tdJobBtns .btn{padding-inline:22px;font-size:14px}
}
@media (min-width:1200px){.tdDocs{grid-template-columns:1fr 1fr 1fr}}
@media (prefers-reduced-motion:no-preference){.tdChev span{transition:transform .15s}}

/* ---------- look A, "lifted boxes" (James, 12 Nov 2026, the whole site; confirmed for Technical Data on a card the same day).
   The colours come from chat 01's shared file (--bg, --panel, --panel2, --line, --text, --dim). Nothing is hard-coded here
   except white text on the red button (4.8:1; the soft white is 4.3:1). */
.td{background:var(--bg);color:var(--text);--tdBox:var(--panel2);--edge:var(--line);--edge2:rgba(255,255,255,.34)}
.td .lead{color:var(--text)}
.tdCrumbs b,.tdCount span:first-child,.tdTog,.tdTog b,.tdDocs b,.tdPill,.tdChip,.tdLinks a,.tdQ summary,.tdDocs .k{color:var(--text)}
.tdFind,.tdFaq,.tdJob{border-top-color:var(--edge)}
.tdCount{font-size:13px}
.tdList{border-top:0;display:grid;gap:6px}
.tdRow{background:var(--panel);border:1px solid var(--edge);padding:0 10px}
.tdTog small{font-size:15px;color:var(--dim)}
.tdPill{background:var(--tdBox)}
.tdPill small{font-size:13px}
.tdPill[data-doc="tds"]{background:var(--red)}
.tdPill[data-doc="tds"],.tdPill[data-doc="tds"] b,.tdPill[data-doc="tds"] small,.tdDocs .k.tds{color:#fff}   /* white on red: var(--text) on #dd242b is 4.3:1, white is 4.8:1 */
.tdDocs a{background:var(--tdBox);border-color:var(--edge)}
.tdDocs b{font-size:16px}
.tdDocs small{font-size:15px;color:var(--dim)}
.tdDocs .k.sds{background:var(--text);color:var(--bg);border-color:var(--text)}
.tdLinks a{background:var(--tdBox);font-size:14px}
.tdChip{background:var(--panel)}
.tdChip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.tdQs{border-top:0;display:grid;gap:6px}
.tdQ{background:var(--panel);border:1px solid var(--edge);padding:0 12px}
.tdQ p{color:var(--dim)}
.tdJob{background:var(--panel) radial-gradient(ellipse at 100% 0,rgba(221,36,43,.22),transparent 60%)}
.tdJob p{color:var(--dim)}
.tdDocs .pp{display:none}
@media (min-width:768px){.tdRow{padding:0 14px}.tdDocs .pp{display:inline}}