/* ==========================================================================
   CoreSpec 3D: product scenes
   Animated product vignettes on painted stages. The app window is laid out
   at a fixed 960 x 620 design size and scaled to fit by scenes.js, so every
   scene looks identical at any width. Prefix: cx-
   ========================================================================== */

/* ── Stage: the painted panel the product floats on ─────────────────────── */
.cx-stage { direction:ltr; position:relative; overflow:hidden; aspect-ratio:10/6; background:#1f1d17 center/cover no-repeat;
            border-radius:6px; isolation:isolate; }
.cx-stage--ink   { background-image:url("../../images/site/texture/ink.webp"); }
.cx-stage--sand  { background-image:url("../../images/site/texture/sand.webp"); background-color:#d6cfbd; }
.cx-stage--ochre { background-image:url("../../images/site/texture/ochre.webp"); background-color:#9a7a2e; }
@media (max-width:600px){ .cx-stage { aspect-ratio:10/8; } }

/* ── App window ──────────────────────────────────────────────────────────── */
.cx-app { position:absolute; left:0; top:0; width:960px; height:620px; transform-origin:0 0;
          display:flex; background:#FBFAF5; border-radius:10px 10px 0 0; overflow:hidden;
          box-shadow:0 30px 80px rgba(13,10,2,0.35), 0 2px 6px rgba(13,10,2,0.18);
          font-family:'Fustat', Arial, sans-serif; color:#1C1B19; font-size:13px; line-height:1.4;
          text-align:left; opacity:0; transition:opacity .5s ease; }
.cx-app.is-ready { opacity:1; }
.cx-app * { box-sizing:border-box; }

.cx-rail { width:178px; flex:none; background:#1d1b15; color:rgba(255,255,255,0.66); padding:18px 12px; display:flex; flex-direction:column; gap:2px; }
.cx-rail__brand { display:flex; align-items:center; gap:9px; color:#fff; font-weight:600; font-size:14px; padding:2px 8px 18px; }
.cx-rail__brand img { width:20px; height:20px; display:block; }
.cx-rail__item { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:6px; font-size:12.5px; white-space:nowrap; }
.cx-rail__item::before { content:""; width:12px; height:12px; border:1.4px solid currentColor; border-radius:3px; opacity:.7; flex:none; }
.cx-rail__item.is-on { background:rgba(255,255,255,0.09); color:#fff; }
.cx-rail__item.is-on::before { border-color:#FCBF20; opacity:1; }
.cx-rail__label { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,0.38); padding:16px 9px 6px; }
.cx-rail__site { display:flex; align-items:center; gap:9px; padding:6px 9px; font-size:12px; white-space:nowrap; }
.cx-rail__site i { width:14px; height:14px; border-radius:3px; background:#3a372d; flex:none; }
.cx-rail__site.is-on i { background:#FCBF20; }

.cx-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.cx-top { height:62px; flex:none; display:flex; align-items:center; gap:10px; padding:0 26px; border-bottom:1px solid rgba(13,10,2,0.07); }
.cx-top__crumb { font-size:12px; color:#6E6E73; }
.cx-top__title { font-size:21px; font-weight:500; letter-spacing:-0.01em; color:#0d0a02; }
.cx-top__sp { flex:1; }
.cx-top__ask { display:inline-flex; align-items:center; gap:7px; background:#1d1b15; color:#fff; font-size:12px; font-weight:500; padding:7px 12px; border-radius:6px; }
.cx-top__ask::before { content:""; width:7px; height:7px; border-radius:50%; background:#FCBF20; }
.cx-body { flex:1; min-height:0; padding:20px 26px 0; display:grid; gap:20px; }

/* ── Shared pieces ──────────────────────────────────────────────────────── */
.cx-twinbox { position:relative; border:1px solid rgba(13,10,2,0.08); border-radius:8px; overflow:hidden;
              background:#F6F4EE; background-image:
                linear-gradient(rgba(13,10,2,0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(13,10,2,0.035) 1px, transparent 1px);
              background-size:22px 22px; }
.cx-twin { position:absolute; inset:0; width:100%; height:100%; display:block; }
.cx-tag { position:absolute; left:12px; top:12px; font-size:11px; font-weight:500; color:#2F2F2F; background:#fff;
          border:1px solid rgba(13,10,2,0.08); padding:4px 9px; border-radius:5px; transition:opacity .35s ease; }
.cx-tag--b { opacity:0; }
.is-3d .cx-tag--a { opacity:0; }
.is-3d .cx-tag--b { opacity:1; }

.cx-panel { background:#fff; border:1px solid rgba(13,10,2,0.08); border-radius:8px; padding:18px 18px; display:flex; flex-direction:column; gap:14px; min-height:0; }
.cx-h { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#6E6E73; margin:0; }

.cx-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.cx-steps li { display:flex; align-items:center; gap:10px; font-size:13px; color:#2F2F2F; opacity:.35; transition:opacity .3s ease; }
.cx-steps li em { font-style:normal; color:#6E6E73; margin-left:auto; font-size:12px; }
.cx-steps li.is-run, .cx-steps li.is-done { opacity:1; }
.cx-dot { width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid rgba(13,10,2,0.2); position:relative; }
.is-run > .cx-dot { border-color:#FCBF20; border-right-color:transparent; animation:cx-spin .8s linear infinite; }
.is-done > .cx-dot { background:#FCBF20; border-color:#FCBF20; }
.is-done > .cx-dot::after { content:""; position:absolute; left:4.5px; top:2px; width:4px; height:7px; border:solid #1d1b15; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
@keyframes cx-spin { to { transform:rotate(360deg); } }

.cx-metric b { display:block; font-size:34px; font-weight:500; letter-spacing:-0.02em; color:#0d0a02; line-height:1; }
.cx-metric span { font-size:12px; color:#6E6E73; }

.cx-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#1d1b15;
            background:#FCBF20; padding:6px 11px; border-radius:999px; opacity:0; transform:translateY(6px); transition:all .4s ease; }
.cx-badge.is-on { opacity:1; transform:none; }

.cx-pill { display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.cx-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.cx-pill--ok   { color:#3d6b3a; background:#e6efe1; }
.cx-pill--warn { color:#8a5a00; background:#fdf0cc; }
.cx-pill--wait { color:#6E6E73; background:#efede6; }
.cx-pill--wait::before { animation:cx-blink 1s ease-in-out infinite; }
@keyframes cx-blink { 50% { opacity:.25; } }

.cx-btn { display:inline-flex; align-self:flex-start; font-size:12px; font-weight:600; color:#1d1b15; background:#FCBF20;
          padding:8px 13px; border-radius:6px; transition:transform .12s ease, box-shadow .12s ease; box-shadow:0 2px 0 #D9A000; }
.cx-btn.is-press { transform:translateY(2px); box-shadow:0 0 0 #D9A000; }

.cx-toast { position:absolute; left:50%; bottom:22px; transform:translate(-50%, 16px); opacity:0; transition:all .4s ease;
            background:#1d1b15; color:#fff; font-size:12.5px; padding:10px 16px; border-radius:8px; white-space:nowrap;
            box-shadow:0 10px 30px rgba(13,10,2,0.25); display:flex; gap:8px; align-items:center; z-index:3; }
.cx-toast b { color:#FCBF20; font-weight:600; }
.cx-toast.is-on { opacity:1; transform:translate(-50%, 0); }

/* ── Scene: drawings to as-built ────────────────────────────────────────── */
.cx-s-build { grid-template-columns:1fr 250px; }

/* ── Scene: ask anything ────────────────────────────────────────────────── */
.cx-s-ask { grid-template-columns:1fr 310px; }
.cx-prompt { border:1px solid rgba(13,10,2,0.12); border-radius:8px; padding:11px 12px; font-size:13.5px; min-height:62px; background:#FBFAF5; position:relative; }
.cx-prompt__ph { color:#9b9a93; }
.cx-prompt.is-typing .cx-prompt__ph, .cx-prompt.is-sent .cx-prompt__ph { display:none; }
.cx-caret { display:inline-block; width:1.5px; height:15px; background:#0d0a02; vertical-align:-2px; margin-left:1px; animation:cx-blink .9s steps(1) infinite; }
.cx-prompt.is-sent .cx-caret { display:none; }
.cx-prompt.is-sent { border-color:rgba(13,10,2,0.06); background:#fff; }
.cx-ans { display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(8px); transition:all .45s ease; }
.cx-ans.is-on { opacity:1; transform:none; }
.cx-ans__h { font-size:15px; font-weight:600; margin:0; color:#0d0a02; }
.cx-ans ul { list-style:none; margin:0; padding:0; border-top:1px solid rgba(13,10,2,0.07); }
.cx-ans li { display:grid; grid-template-columns:62px 1fr auto; gap:8px; padding:7px 0; border-bottom:1px solid rgba(13,10,2,0.07); font-size:12.5px;
             opacity:0; transform:translateX(-6px); transition:all .35s ease; }
.cx-ans.is-on li { opacity:1; transform:none; }
.cx-ans.is-on li:nth-child(2) { transition-delay:.12s; }
.cx-ans.is-on li:nth-child(3) { transition-delay:.24s; }
.cx-ans li b { font-weight:600; }
.cx-ans li span { color:#6E6E73; }
.cx-ans li em { font-style:normal; color:#8a5a00; font-weight:600; }

/* ── Scene: record updates itself ───────────────────────────────────────── */
.cx-s-sync { grid-template-columns:300px 1fr; position:relative; }
.cx-feed { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cx-feed li { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 0; border-bottom:1px solid rgba(13,10,2,0.07); }
.cx-feed li b { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#6E6E73; font-weight:600; }
.cx-feed li span { grid-column:1; font-size:12.5px; color:#1C1B19; }
.cx-feed li .cx-pill { grid-column:2; grid-row:1 / span 2; align-self:center; }
.cx-feed li.is-new { max-height:0; padding:0 18px; opacity:0; overflow:hidden; border-bottom-width:0; transition:all .5s ease; background:#fff8e1; margin:0 -18px; }
.cx-feed li.is-new.is-on { max-height:70px; padding-top:10px; padding-bottom:10px; opacity:1; border-bottom-width:1px; }
.cx-feed li.is-new.is-on.is-old { background:transparent; }
.cx-live { display:inline-block; width:7px; height:7px; border-radius:50%; background:#5a9a52; margin-right:7px; animation:cx-live 1.8s ease-out infinite; }
@keyframes cx-live { 0% { box-shadow:0 0 0 0 rgba(90,154,82,.5); } 100% { box-shadow:0 0 0 9px rgba(90,154,82,0); } }
.cx-packet { position:absolute; left:290px; top:120px; width:10px; height:10px; border-radius:50%; background:#FCBF20;
             box-shadow:0 0 0 4px rgba(252,191,32,.25), 0 0 16px rgba(252,191,32,.9); opacity:0; z-index:2; pointer-events:none; }
.cx-packet.is-fly { animation:cx-fly 0.9s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes cx-fly { 0% { opacity:0; transform:translate(0,0) scale(.6); } 15% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translate(300px,150px) scale(1.2); } }

/* ── Scene: compliance evidence ─────────────────────────────────────────── */
.cx-s-ev { grid-template-columns:1fr 290px; }
.cx-ev { display:flex; flex-direction:column; gap:14px; min-height:0; }
.cx-ev__banner { display:flex; align-items:center; gap:6px; margin:0; font-size:15px; color:#0d0a02; }
.cx-ev__banner img { width:18px; height:18px; margin-right:4px; }
.cx-ev__banner b { font-weight:600; font-variant-numeric:tabular-nums; }
.cx-ev__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cx-ev__stats div { background:#F3F1EA; border-radius:8px; padding:12px 14px; }
.cx-ev__stats b { display:block; font-size:28px; font-weight:500; line-height:1; color:#0d0a02; font-variant-numeric:tabular-nums; margin-bottom:4px; }
.cx-ev__stats span { font-size:11.5px; color:#6E6E73; }
.cx-ev__t { width:100%; border-collapse:collapse; font-size:12.5px; background:#fff; border:1px solid rgba(13,10,2,0.08); }
.cx-ev__t th { text-align:left; font-weight:500; color:#6E6E73; font-size:11.5px; padding:8px 12px; background:#F6F4EE; border-bottom:1px solid rgba(13,10,2,0.08); }
.cx-ev__t td { padding:9px 12px; border-bottom:1px solid rgba(13,10,2,0.06); white-space:nowrap; }
.cx-ev__t td:nth-child(2) { color:#6E6E73; }
.cx-ev__t tbody tr { opacity:0; transition:opacity .35s ease, background .35s ease; }
.cx-ev__t tbody tr.is-on { opacity:1; }
.cx-ev__t tbody tr.is-cur { background:#fffaea; }
.cx-ev__t .cx-pill--ok, .cx-ev__t .cx-pill--warn { display:none; }
.cx-ev__t tr.is-checked .cx-pill--wait { display:none; }
.cx-ev__t tr.is-checked[data-final="ok"] .cx-pill--ok,
.cx-ev__t tr.is-checked[data-final="warn"] .cx-pill--warn { display:inline-flex; }

/* ── Scene: dashboard ───────────────────────────────────────────────────── */
.cx-s-dash { grid-template-rows:auto 1fr; }
.cx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cx-kpi { background:#fff; border:1px solid rgba(13,10,2,0.08); border-radius:8px; padding:13px 15px; }
.cx-kpi span { font-size:11.5px; color:#6E6E73; display:block; }
.cx-kpi b { font-size:28px; font-weight:500; color:#0d0a02; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.cx-dgrid { display:grid; grid-template-columns:1.25fr 1fr; gap:12px; min-height:0; }
.cx-card { background:#fff; border:1px solid rgba(13,10,2,0.08); border-radius:8px; padding:14px 15px; display:flex; flex-direction:column; gap:10px; min-height:0; position:relative; }
.cx-card .cx-twinbox { flex:1; border:0; border-radius:6px; }
.cx-bars { flex:1; display:flex; align-items:flex-end; gap:7px; border-bottom:1px solid rgba(13,10,2,0.1); padding:0 2px; min-height:0; }
.cx-bars i { flex:1; background:#d9d4c6; border-radius:2px 2px 0 0; height:0; transition:height .9s cubic-bezier(.2,.8,.2,1); }
.cx-bars i:last-child, .cx-bars i:nth-last-child(2) { background:#FCBF20; }
.cx-bars__x { display:flex; justify-content:space-between; font-size:10.5px; color:#9b9a93; }

/* ── Showcase: tab list beside the stage ────────────────────────────────── */
.cx-show { padding:110px 0; background:var(--color-off-white, #FBFAF5); }
@media (max-width:768px){ .cx-show { padding:72px 0; } }
.cx-show__grid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:48px; align-items:start; margin-top:56px; }
@media (max-width:1000px){ .cx-show__grid { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:36px; } }
.cx-tabs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cx-tab { position:relative; padding:20px 0; border-top:1px solid rgba(13,10,2,0.12); cursor:pointer; }
.cx-tab:last-child { border-bottom:1px solid rgba(13,10,2,0.12); }
.cx-tab h3 { margin:0; font-size:19px; font-weight:500; color:#9b9a93; transition:color .25s ease; line-height:1.3; }
.cx-tab p { margin:0; font-size:14.5px; line-height:1.55; color:#6E6E73; max-height:0; overflow:hidden; opacity:0; transition:all .4s ease; }
.cx-tab.is-on h3, .cx-tab:hover h3 { color:#0d0a02; }
.cx-tab.is-on p { max-height:120px; opacity:1; margin-top:8px; }
.cx-tab__bar { position:absolute; left:0; top:-1px; height:2px; width:0; background:#FCBF20; }
.cx-tab:focus-visible { outline:2px solid #FCBF20; outline-offset:4px; }
@media (max-width:1000px){
  .cx-tabs { flex-direction:row; overflow-x:auto; gap:22px; scrollbar-width:none; }
  .cx-tab { flex:none; padding:12px 0; border-top:0; }
  .cx-tab:last-child { border-bottom:0; }
  .cx-tab h3 { font-size:15px; white-space:nowrap; }
  .cx-tab p { display:none; }
  .cx-tab__bar { top:auto; bottom:0; }
}
.cx-scenes { position:relative; min-width:0; }
.cx-scenes > .cx-stage { display:none; }
.cx-scenes > .cx-stage.is-on { display:block; animation:cx-in .5s ease; }
@keyframes cx-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .cx-app, .cx-app *, .cx-scenes > .cx-stage.is-on { animation:none !important; transition:none !important; }
}