/* IIE Lab — Showcase "Show" (presentation) + "PDF" (model sheet).
   Card buttons, the full-screen presenter (.shw), the PDF preview (.shx), print. */

/* ---- buttons on model cards ---- */
.mcard .acts{display:flex;gap:6px;margin-top:8px}
.mcard .act{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 8px;
  border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);
  font:700 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;transition:.15s}
.mcard .act:hover{background:var(--surface3);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.mcard .act.show{background:linear-gradient(135deg,var(--accent),#3b6cff);border-color:transparent;color:#fff}
.mcard .act.show:hover{filter:brightness(1.08)}
.mcard .act svg{width:13px;height:13px;flex:none}
@media (max-width:640px){.mcard .acts{gap:5px}.mcard .act{height:28px;font-size:11px;padding:0 5px}}

/* ---- shared ---- */
html.shw-open,html.shx-open{overflow:hidden}
@keyframes shwIn{from{opacity:0}to{opacity:1}}
@keyframes shwSpin{to{transform:rotate(360deg)}}
.shw-veil{position:fixed;inset:0;z-index:199;background:#04060d;display:grid;place-items:center;animation:shwIn .2s ease-out}
.shw-veil.soft{background:rgba(4,7,16,.6)}
.shw-veil::after{content:"";width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.14);border-top-color:#5b8cff;animation:shwSpin .9s linear infinite}

/* ---- presenter ---- */
.shw{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#04060d;color:#eef2ff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;outline:none;
  animation:shwIn .35s ease-out;-webkit-user-select:none;user-select:none;--acc:#5b8cff}
.shw [hidden]{display:none!important}
.shw-bg{position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(38% 45% at 22% 18%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%),
    radial-gradient(42% 50% at 80% 85%,rgba(34,211,170,.13),transparent 70%),
    radial-gradient(30% 35% at 70% 10%,rgba(91,140,255,.12),transparent 70%);
  animation:shwBg 26s ease-in-out infinite alternate}
@keyframes shwBg{to{transform:translate(5%,-4%) rotate(4deg) scale(1.08)}}

.shw-top{position:relative;z-index:3;display:flex;align-items:center;gap:16px;padding:14px 20px 0;min-height:58px;transition:opacity .4s,transform .4s}
.shw-brand{display:flex;align-items:center;gap:11px;min-width:0;flex:0 1 auto}
.shw-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--acc),#22d3aa);box-shadow:0 8px 22px color-mix(in srgb,var(--acc) 40%,transparent)}
.shw-mark svg{width:20px;height:20px}
.shw-brand small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#93a0c0}
.shw-brand b{display:block;font-size:16px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shw-now{flex:1;min-width:0;text-align:center}
.shw-now[hidden]{display:block!important;visibility:hidden}
.shw-now b{display:block;font-size:clamp(18px,2.3vw,30px);font-weight:850;letter-spacing:-.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shw-now small{color:#9fb0d6;font-size:13px}
.shw-count{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:#c9d4f2;font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
.shw-nav{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.shw-nav:hover{background:rgba(255,255,255,.15)}
.shw-nav svg{width:18px;height:18px}

.shw-grid{position:relative;z-index:2;flex:1;min-height:0;display:grid;gap:clamp(8px,1.2vw,16px);
  padding:clamp(10px,1.4vw,18px) clamp(10px,1.6vw,22px) clamp(14px,2vw,24px)}
.shw[data-layout="1"] .shw-grid,.shw[data-layout="carousel"] .shw-grid{grid-template:1fr/1fr}
.shw[data-layout="2"] .shw-grid{grid-template:1fr/1fr 1fr}
.shw[data-layout="3"] .shw-grid{grid-template:1fr 1fr/1.75fr 1fr}
.shw[data-layout="3"] .tile:first-child{grid-row:1/3}
.shw[data-layout="4"] .shw-grid{grid-template:1fr 1fr/1fr 1fr}
.shw[data-layout="6"] .shw-grid{grid-template:1fr 1fr/1fr 1fr 1fr}
@media (orientation:portrait){
  .shw[data-layout="2"] .shw-grid{grid-template:1fr 1fr/1fr}
  .shw[data-layout="3"] .shw-grid{grid-template:1.6fr 1fr/1fr 1fr}
  .shw[data-layout="3"] .tile:first-child{grid-row:auto;grid-column:1/3}
  .shw[data-layout="6"] .shw-grid{grid-template:1fr 1fr 1fr/1fr 1fr}
}

/* tiles */
.tile{position:relative;min-width:0;min-height:0;perspective:1600px}
.tile-in{position:absolute;inset:0;border-radius:clamp(12px,1.4vw,20px);overflow:hidden;background:#0b1124;--tk:1;
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07);backface-visibility:hidden;container-type:size}
.tile canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tile-chip{position:absolute;top:calc(12px * var(--tk));left:calc(12px * var(--tk));z-index:3;max-width:calc(100% - 24px);
  display:flex;align-items:center;gap:calc(7px * var(--tk));padding:calc(5px * var(--tk)) calc(11px * var(--tk));border-radius:999px;
  font-size:calc(11.5px * var(--tk));font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(6,10,22,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
.tile-chip::before{content:"";width:calc(7px * var(--tk));height:calc(7px * var(--tk));border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);flex:none}
.tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:2px;pointer-events:none;
  padding:calc(40px * var(--tk)) calc(16px * var(--tk)) calc(14px * var(--tk));background:linear-gradient(transparent,rgba(3,6,14,.72))}
.tile-cap b{font-size:calc(17px * var(--tk));font-weight:850;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.tile-cap span{font-size:calc(12.5px * var(--tk));color:#c3cff0}
.tile.big .tile-cap{padding:calc(60px * var(--tk)) calc(26px * var(--tk)) calc(24px * var(--tk))}
.tile.big .tile-cap b{font-size:calc(30px * var(--tk));letter-spacing:-.8px}
.tile.big .tile-cap span{font-size:calc(16px * var(--tk))}
.tile-load{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.tile-load i{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--acc);animation:shwSpin .9s linear infinite}
.tile-err{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:#9fb0d6;font-weight:700}

.tile-photo{position:absolute;inset:0;background:#05070e;overflow:hidden}
.tile-photo .b{position:absolute;left:-8%;top:-8%;width:116%;height:116%;object-fit:cover;filter:blur(30px) brightness(.45) saturate(1.3)}
.tile-photo .f{position:absolute;left:5%;top:6%;width:90%;height:84%;object-fit:contain;
  animation:shwKb 16s ease-in-out infinite alternate;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
@keyframes shwKb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.2%,-1%)}}

.tile-facts{position:absolute;inset:0;padding:5cqmin 5.5cqmin;display:flex;flex-direction:column;gap:3cqmin;overflow:hidden;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--acc) 30%,#111833),#0a0f22 70%)}
.tf-head{display:flex;flex-direction:column;align-items:flex-start;gap:1cqmin;padding-top:max(26px,7cqmin)}
.tf-k{display:none}
.tf-t{max-width:100%;font-size:clamp(14px,6.2cqmin,46px);font-weight:850;letter-spacing:-.03em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-sw{display:inline-flex;align-items:center;gap:1.4cqmin;font-size:clamp(10px,2.9cqmin,20px);font-weight:700;color:#c9d4f2}
.tf-sw i{width:max(9px,2.6cqmin);height:max(9px,2.6cqmin);border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.tf-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:2.2cqmin;flex:1;min-height:0}
.tf-c{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.5cqmin;padding:1.8cqmin 2.6cqmin;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:2.4cqmin}
.tf-l{font-size:clamp(9px,2.3cqmin,15px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fb0d6}
.tf-v{font-size:clamp(13px,4.8cqmin,38px);font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-c small{font-size:clamp(9px,2.2cqmin,14px);color:#8e9cc2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-fun{display:flex;gap:2cqmin;align-items:center;font-size:clamp(11px,2.9cqmin,20px);line-height:1.35;color:#e2e9ff;
  background:rgba(255,255,255,.07);border-radius:2.4cqmin;padding:2cqmin 2.6cqmin}
.tf-bulb{color:#ffd76a;flex:none;display:grid}
.tf-bulb svg{width:clamp(14px,4cqmin,26px);height:clamp(14px,4cqmin,26px)}
@container (max-aspect-ratio: 23/20){.tf-grid{grid-template-columns:repeat(2,1fr)}}
@container (max-height: 330px){.tf-fun,.tf-c small{display:none}}

/* control bar */
.shw-bar{position:absolute;left:50%;bottom:clamp(10px,2vh,22px);transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:7px;max-width:calc(100vw - 16px);
  border-radius:16px;background:rgba(9,13,27,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.55);transition:opacity .35s,transform .35s}
.shw-bar button,.shw-bar select{height:38px;min-width:38px;border-radius:10px;border:0;background:transparent;color:#dfe6ff;
  font:700 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px}
.shw-bar button:hover,.shw-bar select:hover{background:rgba(255,255,255,.1)}
.shw-bar button:focus-visible,.shw-bar select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.shw-bar button svg{width:18px;height:18px;flex:none}
.shw-bar select{-webkit-appearance:none;appearance:none;padding:0 28px 0 12px;background:rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfe6ff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/12px}
.shw-bar select option{background:#141c38;color:#eaeefb}
.shw-bar select:disabled{opacity:.4;cursor:default}
.shw-seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.06)}
.shw-bar .shw-seg button{height:32px;min-width:34px;padding:0 9px}
.shw-bar .shw-seg button.on{background:var(--acc);color:#0b1020}
.shw-seg.off{opacity:.45}
.shw-sep{width:1px;height:24px;background:rgba(255,255,255,.12);margin:0 3px}
.shw.idle{cursor:none}
.shw.idle .shw-bar{opacity:0;transform:translateX(-50%) translateY(24px);pointer-events:none}
.shw.idle .shw-top{opacity:0;transform:translateY(-12px)}
.shw-prog{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:rgba(255,255,255,.06)}
.shw-prog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--acc),#22d3aa)}
.shw.paused .shw-prog i{opacity:.35}
.shw[data-layout="carousel"] .shw-prog{display:none}
.shw-hint{position:absolute;left:50%;top:74px;z-index:7;transform:translate(-50%,-8px);max-width:92vw;padding:9px 16px;border-radius:12px;
  background:rgba(9,13,27,.85);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600;color:#dfe6ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:.35s;pointer-events:none}
.shw-hint.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){
  .shw-top{gap:10px;padding:10px 12px 0;min-height:50px}
  .shw-brand small{display:none}
  .shw-brand b{font-size:14px}
  .shw-bar{gap:2px;padding:5px}
  .shw-bar button,.shw-bar select{height:34px;min-width:34px;padding:0 7px;font-size:12px}
  .shw-bar select{padding:0 24px 0 9px}
  .shw-sep{display:none}
  .shw-bar [data-a="pdf"] span{display:none}
}
@media (prefers-reduced-motion:reduce){.shw-bg,.tile-photo .f{animation:none}}

/* ---- PDF sheet preview ---- */
.shx{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:rgba(4,7,16,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#eef2ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;animation:shwIn .25s ease-out}
.shx-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px}
.shx-ttl{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px}
.shx-ttl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shx-tag{font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 8px;border-radius:7px;background:#f2597a;color:#fff}
.shx-sp{flex:1}
.shx-btn{height:38px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;
  font:700 13.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none}
.shx-btn:hover{background:rgba(255,255,255,.16)}
.shx-btn.primary{background:linear-gradient(135deg,#5b8cff,#3b6cff);border-color:transparent}
.shx-btn[disabled],.shx-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.shx-btn svg{width:17px;height:17px;flex:none}
.shx-x{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.shx-x:hover{background:rgba(255,255,255,.16)}
.shx-x svg{width:17px;height:17px}
.shx-stage{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:4px 16px 24px}
.shx-page{position:relative;flex:none;width:min(100%,calc((100vh - 110px) * .7071));aspect-ratio:210/297;background:#fff;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.shx-sheet{display:block;width:100%;height:100%;border-radius:4px}
.shx-busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#5b6a88;font-weight:700;font-size:14px}
.shx-busy i{width:44px;height:44px;border-radius:50%;border:4px solid #e3e9f5;border-top-color:#5b8cff;animation:shwSpin .9s linear infinite}
.shx-err{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:#c0354f;font-weight:700}
@media (max-width:640px){.shx-btn span{display:none}.shx-btn{padding:0 11px}.shx-page{width:100%}}

/* print only the sheet (the page sets @page while printing) */
.shx-print{display:none}
@media print{
  html.shx-printing body>*:not(.shx-print){display:none!important}
  html.shx-printing .shx-print{display:block!important}
  .shx-print img{display:block;width:210mm;height:297mm}
}