/* ==========================================================================
   Smart Elevators — DETAIL-PAGE SYSTEM
   --------------------------------------------------------------------------
   Loads AFTER styles.css, motion.css and pages.css — third stylesheet, so
   anything here wins over both. Used only by sh100/200/300.html, parts.html
   and dimensions.html: the five pages built around real transcribed data
   tables rather than brochure marketing copy.

   WHY A FOURTH FILE INSTEAD OF EXTENDING pages.css
   pages.css is the shared shell every subpage depends on (phero, crumbs,
   pillars, bands, crossrow, callout/kfig/dial…) and is owned by the page
   that documents it. This file adds only what those five pages need and
   nothing else does: real data tables (spec sheet, model comparison,
   dimensions) and two new visual grids (parts, finishes, motors) built from
   brochure pages 11–18 that have no equivalent anywhere else on the site.

   NO NEW JAVASCRIPT SHIPS WITH THIS FILE.
   Every component below animates through mechanisms that already exist:
     · .pillars / .crossrow / .callout / .kfig / .dial / .numbers / .speclist
       — already wired by js/pages.js and js/motion.js, reused as-is.
     · .reveal — the generic scroll-reveal class js/main.js already drives
       (SE.revealAll → ScrollTrigger-or-IntersectionObserver → adds .is-in,
       staggered by sibling index). Everything genuinely new in this file
       (table rows, part cards, finish tiles, motor cards) is a .reveal
       element; this stylesheet only supplies the CSS transition. See
       js/main.js "reveal on scroll" and js/scroll.js's revealAll().
     · plain CSS @keyframes / :hover for idle motion and pointer feedback
       that doesn't need scroll-linking (rotating dashed rings, hover tilt,
       image scale) — the same visual vocabulary as .pillar's dashed ring
       and .card's tilt, just pointer-driven instead of GSAP quickTo.
   Reduced motion: section 9 mirrors pages.css's own rule — .reveal is
   already visible (SE.revealAll adds .is-in immediately when reduceMotion
   is true) — this only removes the transition and any idle @keyframes so
   nothing so much as flickers.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   0. GENERIC SCROLL-REVEAL — the .reveal contract used by everything below
   ══════════════════════════════════════════════════════════════════════════ */

.reveal{
  opacity:0;
  transform:translateY(44px) rotateX(-12deg) scale(.965);
  transform-origin:50% 100%;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  will-change:transform,opacity;
}
.reveal.is-in{ opacity:1; transform:none; }

.reveal--left{ transform:translateX(-46px) rotateY(-14deg) scale(.97); transform-origin:0% 50%; }
.reveal--right{ transform:translateX(46px) rotateY(14deg) scale(.97); transform-origin:100% 50%; }
.reveal--pop{ transform:translateY(28px) scale(.9); }

/* grids holding .reveal children need real perspective for the rotate to read */
.partgrid,.motorgrid,.finishrow,.spectable-wrap,.cmptable-wrap,.dtable-wrap,.reftable-wrap{
  perspective:1200px;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. FULL SPECIFICATION TABLE — .spectable
      One model's complete transcribed row set, brochure pages 11–13.
   ══════════════════════════════════════════════════════════════════════════ */

.spectable-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:0 30px 60px -46px rgba(11,38,71,.35);
}
table.spectable{
  width:100%; min-width:520px;
  border-collapse:separate; border-spacing:0;
}
.spectable caption{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.spectable th[scope="row"]{
  width:36%; text-align:left; vertical-align:top;
  font-family:var(--font-d); font-weight:500; font-size:.85rem;
  letter-spacing:.005em; color:var(--text-2);
  background:var(--surface-2);
  padding:15px 22px; border-bottom:1px solid var(--line-soft);
}
.spectable td{
  padding:15px 22px; border-bottom:1px solid var(--line-soft);
  font-size:.93rem; line-height:1.6; color:var(--text);
  vertical-align:top;
}
.spectable tbody tr:last-child th,
.spectable tbody tr:last-child td{ border-bottom:0; }
.spectable tbody tr{ transition:background .35s var(--ease); }
.spectable tbody tr:hover{ background:var(--brand-50); }
.spectable tbody tr:hover th[scope="row"]{ background:var(--brand-100); }

/* the disputed-value marker already exists as .flag in pages.css — this just
   nudges it to sit naturally at the end of a table cell's sentence */
.spectable td .flag{ margin-left:2px; }


/* ══════════════════════════════════════════════════════════════════════════
   2. MODEL COMPARISON TABLE — .cmptable
      SH100 / SH200 / SH300 side by side, same row order on all three pages.
      Long free-text rows (Safety features) are not reproduced in full here —
      that would make the "at a glance" table nobody can glance at — instead
      each cell links to the full quoted text in that model's own .spectable
      further down the same page. Nothing is paraphrased or summarised.
   ══════════════════════════════════════════════════════════════════════════ */

.cmptable-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 30px 60px -46px rgba(11,38,71,.35);
}
table.cmptable{
  width:100%; min-width:760px;
  border-collapse:separate; border-spacing:0;
  background:var(--surface);
}
.cmptable caption{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.cmptable th,.cmptable td{ padding:14px 18px; text-align:left; vertical-align:top; }

.cmptable thead th{
  background:var(--brand-800); color:#eef1f6;
  border-bottom:1px solid rgba(255,255,255,.1);
  position:relative;
}
.cmptable thead th:first-child{ background:var(--brand-900); }
.cmptable thead th.is-current{ background:var(--brand-700); }
.cmptable thead th.is-current::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--brass),var(--brass-2));
}

.cmptable__model{ display:flex; align-items:center; gap:12px; }
.cmptable__thumb{
  width:46px; height:46px; flex:none; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); background:var(--brand-900);
}
.cmptable__thumb img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.cmptable__model a{ display:flex; flex-direction:column; gap:2px; }
.cmptable__model strong{ font-family:var(--font-d); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; }
.cmptable__model em{ font-style:normal; font-size:.72rem; color:#a9b7c9; }
.cmptable thead th.is-current .cmptable__model em{ color:var(--brass-2); }

.cmptable tbody th[scope="row"]{
  font-family:var(--font-d); font-weight:500; font-size:.84rem;
  color:var(--text-2); background:var(--surface-2);
  border-bottom:1px solid var(--line-soft);
  position:sticky; left:0; z-index:1;
}
.cmptable tbody td{
  font-size:.88rem; color:var(--text); border-bottom:1px solid var(--line-soft);
  background:var(--surface);
}
.cmptable tbody td.is-current{ background:rgba(215,164,75,.07); }
.cmptable tbody tr:last-child th,
.cmptable tbody tr:last-child td{ border-bottom:0; }
.cmptable tbody tr:hover td,
.cmptable tbody tr:hover th{ background:var(--brand-50); }
.cmptable tbody tr:hover td.is-current{ background:rgba(215,164,75,.14); }

.cmptable .flag{ margin-left:3px; }

/* presence pill — used only for the one row too long to print in a
   comparison cell (Safety features): a plain fact ("printed" / "not
   printed"), never a stand-in for the value itself */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-d); font-size:.76rem; letter-spacing:.01em;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.pill--yes{ background:rgba(31,106,199,.1); color:var(--brand-700); }
a.pill--yes{ transition:background .3s var(--ease), color .3s var(--ease); }
a.pill--yes:hover{ background:rgba(31,106,199,.18); color:var(--brand-800); }
.pill--no{ background:var(--surface-2); color:var(--text-3); border:1px solid var(--line-soft); }

.cmptable__legend{
  display:flex; flex-wrap:wrap; gap:16px 28px;
  margin-top:16px; font-size:.8rem; color:var(--text-3);
}
.cmptable__legend b{ color:var(--text-2); font-weight:500; }


/* ══════════════════════════════════════════════════════════════════════════
   3. PARTS SHOWCASE — .partgrid / .partcard   (brochure page 15)
   ══════════════════════════════════════════════════════════════════════════ */

.partgrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.partcard{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:var(--surface);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.partcard:hover{
  transform:perspective(1100px) rotateX(3deg) rotateY(-4deg) translateY(-8px);
  box-shadow:0 34px 58px -34px rgba(11,38,71,.4);
  border-color:var(--brand-200);
}
.partcard__plate{
  position:relative; display:grid; place-items:center;
  aspect-ratio:1/.92; padding:20px;
  background:radial-gradient(60% 62% at 50% 42%, #fafafa 0%, #fafafa 60%, #eaeff6 100%);
}
.partcard__plate img{
  width:auto; height:auto; max-width:min(100%,180px); max-height:100%;
  object-fit:contain; transition:transform .6s var(--ease);
}
.partcard:hover .partcard__plate img{ transform:scale(1.07) translateY(-2px); }

.partcard__num{
  position:absolute; top:13px; left:13px; z-index:2;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; background:#fff; border:1px solid var(--line);
  font-family:var(--font-d); font-weight:600; font-size:.7rem; color:var(--brand-800);
}
.partcard__num::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px dashed rgba(215,164,75,.55);
  animation:pd-spin 15s linear infinite;
}
.partcard__body{ padding:16px 20px 22px; }
.partcard__body h3{ font-size:1rem; letter-spacing:-.01em; margin-bottom:8px; color:var(--brand-800); }
.partcard__body p{ font-size:.85rem; color:var(--text-2); line-height:1.55; }

@keyframes pd-spin{ to{ transform:rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════════════════
   4. PREMIUM FINISHES — .finishrow   (brochure page 16)
   ══════════════════════════════════════════════════════════════════════════ */

.finishes{ display:flex; flex-direction:column; }
.finishrow{
  display:grid; grid-template-columns:212px repeat(3,1fr); gap:20px;
  align-items:center; padding:28px 0;
  border-top:1px solid var(--line-soft);
}
.finishrow:first-child{ border-top:0; padding-top:4px; }

.finishrow__head{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.finishrow__ico{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:11px; background:var(--brand-50); border:1px solid var(--brand-100);
  flex:none;
}
.finishrow__ico svg{ width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.finishrow__head h3{ font-size:1.06rem; letter-spacing:-.015em; color:var(--brand-800); }
.finishrow__head p{ font-size:.82rem; color:var(--text-3); }

.finishopt{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line-soft); background:var(--surface-2);
  aspect-ratio:4/3.05;
}
.finishopt img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.finishopt:hover img{ transform:scale(1.08); }
.finishopt__lbl{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:9px 12px 8px;
  font-family:var(--font-d); font-size:.78rem; letter-spacing:.01em; color:#eef1f6;
  background:linear-gradient(0deg,rgba(7,22,42,.82) 0%, rgba(7,22,42,.15) 78%, transparent 100%);
}


/* ══════════════════════════════════════════════════════════════════════════
   5. MOTOR & MACHINE OPTIONS — .motorgrid / .motorcard   (brochure page 17)
   ══════════════════════════════════════════════════════════════════════════ */

.motorgrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.motorcard{
  display:flex; flex-direction:column; gap:16px;
  padding:24px 24px 26px;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(170deg,#fff 0%,var(--surface-2) 100%);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.motorcard:hover{
  transform:translateY(-6px);
  border-color:var(--brand-200);
  box-shadow:0 30px 54px -34px rgba(11,38,71,.34);
}
.motorcard__top{ display:flex; align-items:center; gap:14px; }
.motorcard__plate{
  width:64px; height:64px; flex:none; border-radius:12px; overflow:hidden;
  display:grid; place-items:center;
  background:radial-gradient(60% 62% at 50% 42%, #fafafa 0%, #fafafa 60%, #eaeff6 100%);
  border:1px solid var(--line-soft);
}
.motorcard__plate img{ width:auto; height:auto; max-width:80%; max-height:80%; object-fit:contain; }
.motorcard__top h3{ font-size:1.02rem; letter-spacing:-.015em; color:var(--brand-800); }
.motorcard__top span{
  display:block; margin-top:2px; font-family:var(--font-d); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.motorcard .speclist{ margin-top:0; padding-top:14px; }
.motorcard__best{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--text-2);
}
.motorcard__best b{ color:var(--brand-700); font-weight:500; }


/* ══════════════════════════════════════════════════════════════════════════
   6. DIMENSIONS TABLES — .dtable   (brochure page 18)
   ══════════════════════════════════════════════════════════════════════════ */

.dtable-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  margin-bottom:clamp(30px,4vw,44px);
}
.dtable-head .sect__head{ margin-bottom:0; }
.dtable-head__img{
  flex:none; width:112px; height:112px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 22px 40px -28px rgba(11,38,71,.4);
}
.dtable-head__img img{ width:100%; height:100%; object-fit:cover; }

.dtable-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 26px 50px -42px rgba(11,38,71,.32);
}
table.dtable{ width:100%; min-width:760px; border-collapse:collapse; background:var(--surface); }
.dtable caption{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.dtable thead th{
  background:var(--brand-800); color:#eef1f6;
  padding:13px 16px; text-align:left; white-space:nowrap;
  font-family:var(--font-d); font-weight:500; font-size:.76rem;
  letter-spacing:.03em;
}
.dtable tbody th[scope="row"]{
  text-align:left; white-space:nowrap; position:sticky; left:0;
  font-family:var(--font-d); font-weight:600; color:var(--brand-800);
  padding:12px 16px; font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line-soft);
}
.dtable td{
  padding:12px 16px; border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--text-2); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dtable tbody tr:nth-child(even) th[scope="row"],
.dtable tbody tr:nth-child(even) td{ background:var(--surface-2); }
.dtable tbody tr:hover th[scope="row"],
.dtable tbody tr:hover td{ background:var(--brand-50); }

/* the shared overhead/pit reference table — much smaller, sits in a callout */
.reftable-wrap{ overflow-x:auto; margin-top:20px; }
table.reftable{ width:100%; min-width:420px; border-collapse:collapse; }
.reftable caption{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.reftable th{
  text-align:left; padding:10px 14px; font-family:var(--font-d); font-weight:500;
  font-size:.74rem; letter-spacing:.03em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--line);
}
.reftable td{
  padding:11px 14px; border-bottom:1px solid var(--line-soft);
  font-size:.9rem; color:var(--text); font-variant-numeric:tabular-nums;
}
.reftable tbody tr:last-child td{ border-bottom:0; }
.reftable tbody th[scope="row"]{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft);
  font-family:var(--font-d); font-weight:500; font-size:.86rem; color:var(--brand-700);
}

.dnote{
  margin-top:14px; padding-left:16px; border-left:2px solid var(--line);
  font-size:.82rem; color:var(--text-3); max-width:70ch;
}
.dnote + .dnote{ margin-top:8px; }


/* ══════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1080px){
  .partgrid{ grid-template-columns:repeat(3,1fr); }
  .motorgrid{ grid-template-columns:repeat(2,1fr); }
  .finishrow{ grid-template-columns:1fr; }
  .finishrow__head{ flex-direction:row; align-items:center; }
}

@media (max-width:760px){
  .mfacts{ grid-template-columns:repeat(2,1fr); }
  .partgrid{ grid-template-columns:repeat(2,1fr); }
  .motorgrid{ grid-template-columns:1fr; }
  .finishrow{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .cmptable__model{ gap:8px; }
  .cmptable__thumb{ width:36px; height:36px; }
}

@media (max-width:760px){
  .dtable-head{ flex-wrap:wrap; }
  .dtable-head__img{ width:84px; height:84px; order:-1; }
}

@media (max-width:560px){
  .partgrid{ grid-template-columns:1fr 1fr; gap:12px; }
  .finishrow{ grid-template-columns:1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
  .partcard__num::before{ animation:none; }
  .partcard:hover,.motorcard:hover{ transform:none; }
  .partcard:hover .partcard__plate img,.finishopt:hover img{ transform:none; }
}