/* ==========================================================================
   lab.css — the hero lab, the inheritance widget and pointer micro-interactions.
   Loaded after motion.css.
   ========================================================================== */

/* ---------- hero lab ---------- */
.lab{background:#0E1116;color:#C9D1DD;border:1px solid #232932;border-radius:14px;overflow:hidden;
  box-shadow:0 26px 64px rgba(10,14,20,.28);font-size:12.5px;text-align:start}
.lab-top{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 15px;background:#141922;border-bottom:1px solid #232932}
body[dir="rtl"] .lab-top{padding:9px 15px 9px 10px}
.lab-top>i{width:7px;height:7px;border-radius:50%;background:#6FA8FF;flex:0 0 auto;animation:ping 2.4s ease-out infinite}
.lab-tabs{display:flex;gap:3px;margin-inline-start:auto;padding:3px;background:#0B0E13;border:1px solid #232932;border-radius:999px}
.lab-tabs button{padding:6px 13px;border-radius:999px;font-size:12px;color:#8C95A2;transition:background .25s,color .25s}
.lab-tabs button:hover{color:#fff}
.lab-tabs button[aria-selected="true"]{background:#253047;color:#fff}
.lab-pane{padding:14px}
.lab-pane[hidden]{display:none}
.lab-pane:not([hidden]){animation:paneIn .5s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}}

/* the page image */
.lab-paper{border:1px solid #232932;border-radius:8px;overflow:hidden}
.lp-head,.lo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 11px;
  font-size:10.5px;color:#6B7380;background:#121720;letter-spacing:.03em}
.lp-file{direction:ltr;font-variant-numeric:tabular-nums}
.lp-sheet{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:16px 22px 17px;background:#F6F2E8;color:#28231B;
  background-image:radial-gradient(rgba(120,100,70,.09) 1px,transparent 1px);background-size:3px 3px}
.lp-line{position:relative;padding:0 4px;font-family:"Thmanyah Serif Text","Noto Naskh Arabic",serif;
  font-size:19px;line-height:1.5;transform:rotate(-.5deg)}
.lp-line span{filter:blur(.3px)}
.lp-line::after{content:"";position:absolute;inset:-2px -7px;border:1.5px solid #3D7BE0;border-radius:3px;
  background:rgba(61,123,224,.07);clip-path:inset(0 0 0 100%);transition:clip-path .55s var(--ease-io)}
.lp-line.boxed::after{clip-path:inset(0 0 0 0)}
.lp-line b{position:absolute;top:50%;inset-inline-end:-24px;transform:translateY(-50%) scale(.6);width:16px;height:16px;
  border-radius:50%;background:#3D7BE0;color:#fff;font:600 9.5px/16px "Inter",sans-serif;text-align:center;
  opacity:0;transition:opacity .3s .35s,transform .3s .35s}
.lp-line.boxed b{opacity:1;transform:translateY(-50%) scale(1)}
.lp-beam{position:absolute;inset-inline:0;top:0;height:2px;z-index:2;background:#6FA8FF;opacity:0;
  box-shadow:0 0 18px 5px rgba(111,168,255,.5)}
.scanning .lp-beam{animation:beam 2.9s var(--ease-io) both}
@keyframes beam{0%{top:0;opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* the model output */
.lab-out{margin-top:10px;border:1px solid #232932;border-radius:8px}
.lo-head{border-radius:8px 8px 0 0}
.lo-lines{display:flex;flex-direction:column;gap:5px;min-height:108px;padding:10px 14px 12px;
  background:#0B0E13;border-radius:0 0 8px 8px}
.lo-line{min-height:1.6em;font-family:"Thmanyah Sans","IBM Plex Sans Arabic",sans-serif;font-size:16px;line-height:1.6;color:#E3E7ED}
.er{position:relative;border-radius:2px;outline:0;transition:color .45s,background .45s,box-shadow .45s}
.marked .er{color:#FF9A90;background:rgba(255,92,80,.15);box-shadow:inset 0 -2px 0 #FF5C50;cursor:help}
.normed .marked .er.soft{color:inherit;background:none;box-shadow:inset 0 -1px 0 rgba(140,149,162,.45)}
.er::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;z-index:5;
  transform:translate(-50%,4px);white-space:nowrap;padding:4px 8px;border-radius:5px;
  font:500 11px/1.4 "Thmanyah Sans","Inter",sans-serif;background:#fff;color:#111;
  box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.marked .er:hover::after,.marked .er:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* the meter and the normalisation switch */
.lab-meter{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.lm-num b{display:block;font-size:30px;font-weight:600;line-height:1;letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums}
.lm-num span{display:block;margin-top:6px;font-size:11px;color:#8C95A2}
.lm-num small{display:block;margin-top:2px;font-size:10.5px;color:#6B7380}
.lab-switch{display:flex;align-items:center;gap:10px;max-width:60%;padding:8px 11px;text-align:start;
  border:1px solid #2B323D;border-radius:10px;transition:border-color .25s,background .25s}
.lab-switch:hover{border-color:#3D7BE0;background:#121822}
.lab-switch i{position:relative;flex:0 0 auto;width:34px;height:20px;border-radius:999px;background:#2A313C;transition:background .3s}
.lab-switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;
  background:#C9D1DD;transition:transform .3s var(--ease),background .3s}
.lab-switch[aria-checked="true"] i{background:#3D7BE0}
.lab-switch[aria-checked="true"] i::after{transform:translateX(14px);background:#fff}
body[dir="rtl"] .lab-switch[aria-checked="true"] i::after{transform:translateX(-14px)}
.lab-switch b{display:block;font-size:12px;font-weight:600;color:#E3E7ED}
.lab-switch small{display:block;margin-top:2px;font-size:10.5px;color:#6B7380}
.lab-tip{min-height:1.6em;margin:10px 0 0;font-size:12px;color:#AFC6EE}
.lab-note{margin:8px 0 0;font-size:10.5px;line-height:1.55;color:#6B7380}
.lab-note a{color:#82A9E6}
.lab-mini{flex:0 0 auto;white-space:nowrap;padding:3px 10px;border:1px solid #2B323D;border-radius:999px;font-size:11px;color:#AFC6EE;
  transition:border-color .2s,color .2s}
.lab-mini:hover{border-color:#6FA8FF;color:#fff}

/* cross-check */
.lx-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lx-doc{display:flex;flex-direction:column;gap:6px;padding:10px 10px 9px;border-radius:7px;background:#F6F2E8;color:#28231B;
  transform:rotate(calc((var(--i,0) - 1) * 1.3deg));transition:transform .55s var(--ease)}
.together .lx-doc{transform:none}
.lx-doc h5{margin:0;font-size:11.5px;font-weight:700;color:#173E7A;line-height:1.3}
.lx-doc dl{display:flex;flex-direction:column;gap:5px;margin:0}
.lx-f{position:relative;padding:3px 6px;border-radius:4px;transition:background .4s,box-shadow .4s}
.lx-f[data-id]{padding-inline-end:30px}
.lx-f dt{font-size:9.5px;color:#7A7466}
.lx-f dd{margin:0;font-size:12px;font-weight:600}
.lx-mark{position:absolute;top:3px;inset-inline-end:4px;padding:0 5px;border-radius:999px;background:#D9534F;color:#fff;
  font-size:9.5px;line-height:15px;opacity:0;transform:scale(.6);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lx-mark:empty{display:none}
.together .lx-f.hit{background:rgba(217,83,79,.13);box-shadow:inset 0 0 0 1.5px #D9534F}
.together .lx-f.hit .lx-mark{opacity:1;transform:none}
.lx-chip{align-self:flex-start;margin-top:auto;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:600;
  background:rgba(47,166,106,.13);transition:background .4s}
.lx-chip .ok{color:#1E7A4C}
.lx-chip .bad{display:none;color:#B3261E}
.together .lx-chip{background:rgba(217,83,79,.14)}
.together .lx-chip .ok{display:none}
.together .lx-chip .bad{display:inline}
.lx-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.lab-go{padding:8px 16px;border-radius:999px;background:#3D7BE0;color:#fff;font-size:12.5px;font-weight:600;
  transition:background .2s,transform .2s,opacity .3s}
.lab-go:hover{background:#4F8BEE;transform:translateY(-1px)}
.together .lab-go{opacity:.45}
.lx-finds{display:flex;flex-direction:column;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.lx-finds li{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5;color:#E3E7ED;
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.together .lx-finds li{opacity:1;transform:none;transition-delay:calc(.35s + var(--i,0) * .35s)}
.lx-finds b{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:#D9534F;color:#fff;font-size:10.5px}
.lx-risk{margin:10px 0 0;font-size:11.5px;font-weight:600;color:#FF9A90;opacity:0;transition:opacity .4s}
.together .lx-risk{opacity:1;transition-delay:1.1s}

/* read a drawing */
.ld-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;align-items:start}
.ld-sheet{display:grid;place-items:center;padding:12px;background:#FBFAF7}
.ld-img{position:relative;width:100%;max-width:150px;aspect-ratio:228/456;direction:ltr}
.ld-img img{display:block;width:100%;height:100%}
.ld-img.scanning .lp-beam{animation:beam 2.9s var(--ease-io) both}
.ld-box{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:1.5px solid #3D7BE0;
  border-radius:3px;background:rgba(61,123,224,.08);opacity:0;transform:scale(.85);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ld-box.on{opacity:1;transform:none}
.ld-box b{position:absolute;top:-7px;left:-7px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;
  background:#3D7BE0;color:#fff;font:600 8.5px/1 "Inter",sans-serif}
.ld-side{border:1px solid #232932;border-radius:8px;overflow:hidden}
.ld-feats{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;margin:0;padding:10px 12px;list-style:none;background:#0B0E13}
.ld-feats li{display:flex;align-items:center;gap:7px;font-size:12px;color:#5C6470;transition:color .3s}
.ld-feats li b{display:grid;place-items:center;flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  background:#1B212B;color:#8C95A2;font-size:9px;transition:background .3s,color .3s}
.ld-feats li i{font-style:normal;color:#5BD38D;opacity:0;margin-inline-start:auto;transition:opacity .3s}
.ld-feats li.on{color:#E3E7ED}
.ld-feats li.on b{background:#3D7BE0;color:#fff}
.ld-feats li.on i{opacity:1}
.ld-result{margin:0;padding:11px 12px;border-top:1px solid #232932;background:#0E1116;
  opacity:.25;transition:opacity .5s var(--ease)}
.ld-result.on{opacity:1}
.ld-result small{display:block;font-size:10.5px;color:#8C95A2}
.ld-result b{display:block;margin-top:3px;font-size:16px;font-weight:600;color:#fff}

@media(max-width:480px){
  .lab-pane{padding:12px}
  .ld-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .ld-feats{grid-template-columns:1fr}
  .lab-tabs{flex:1;justify-content:space-between}
  .lab-tabs button{padding:6px 10px;font-size:11.5px}
  .lp-sheet{padding:14px 26px 15px 16px}
  .lp-line{font-size:16.5px}
  .lo-line{font-size:14.5px}
  .lab-meter{flex-direction:column;align-items:stretch}
  .lab-switch{max-width:none}
  .lx-docs{grid-template-columns:1fr}
  .lx-doc{transform:none}
  .lx-doc dl{flex-direction:row;gap:12px}
}

/* ---------- Sanad: inheritance widget ---------- */
.heirs{margin:30px 0 36px;padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.heirs figcaption{margin-bottom:12px;font-size:12.5px;font-weight:600;color:var(--muted)}
.hz-modes{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bg2)}
.hz-modes button{padding:7px 15px;border-radius:999px;font-size:13px;color:var(--muted);transition:background .25s,color .25s}
.hz-modes button:hover{color:var(--ink)}
.hz-modes button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.hz-legend{display:flex;gap:18px;margin:16px 0 10px;font-size:11.5px;color:var(--muted)}
.hz-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-inline-end:6px;border-radius:2px;
  vertical-align:-1px;background:var(--bar)}
.hz-legend .d::before{background:var(--accent)}
.hz-legend .d{transition:opacity .4s}
.heirs[data-mode="sum"] .hz-legend .d{opacity:.35}
.hz-rows{display:flex;flex-direction:column;gap:9px}
.hz-row{display:grid;grid-template-columns:78px 1fr 112px;gap:12px;align-items:center;font-size:13px}
.hz-who{color:var(--ink2)}
.hz-bars{position:relative;height:16px;border-radius:3px;background:var(--bg2)}
.hz-c,.hz-d{position:absolute;inset-block:0;inset-inline-start:0;border-radius:3px}
.hz-c{width:var(--c);background:var(--bar);transition:opacity .5s}
.hz-d{width:var(--c);background:var(--accent);opacity:0;
  transition:width .9s var(--ease) calc(var(--i,0) * 90ms),opacity .35s}
.heirs[data-mode="re"] .hz-c{opacity:.32}
.heirs[data-mode="re"] .hz-d{width:var(--d);opacity:.92}
.hz-val{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.hz-val b{font-weight:600;color:var(--ink)}
.hz-val b.d,.heirs[data-mode="re"] .hz-val b.c{display:none}
.heirs[data-mode="re"] .hz-val b.d{display:inline;color:var(--accent)}
.hz-val em{font-style:normal;font-size:12px;font-weight:600;opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(.45s + var(--i,0) * 90ms)}
.hz-val em.up{color:var(--accent)}
.hz-val em.down{color:#D9534F}
.heirs[data-mode="re"] .hz-val em{opacity:1;transform:none}
.hz-msg{margin:16px 0 0;font-size:14.5px;font-weight:500;color:var(--ink)}
.heirs .note{margin:6px 0 0;font-size:12px;color:var(--muted)}
@media(max-width:480px){
  .heirs{padding:16px}
  .hz-row{grid-template-columns:64px 1fr 92px;gap:8px;font-size:12px}
  .hz-modes button{padding:6px 11px;font-size:12px}
}

/* ---------- pointer micro-interactions (fine pointers only) ---------- */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 70%)}
@media (hover:hover) and (pointer:fine){
  .spot:hover::after{opacity:1}
  .proj .pimg{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .35s var(--ease),box-shadow .5s}
  .proj:hover .pimg,.proj:focus-visible .pimg{
    transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
  .hero-cta .btn{transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .25s var(--ease),opacity .2s}
  .hero-cta .btn:hover{transform:translate(var(--tx,0px),var(--ty,0px)) translateY(-2px)}
}

@media (prefers-reduced-motion:reduce){
  .lx-finds li,.lx-risk,.hz-val em,.lp-line b{transition:none!important}
  .lx-doc{transform:none!important}
}