/* Dashboard section of the Content Engine page. Placeholders (.ph) are swapped for real screenshots and video later. */
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 30px;margin-top:8px;}
.dash-grid .dshot{margin:0;}
.dash-grid .frame{position:relative;box-shadow: var(--shadow);}
.dash-grid figcaption{margin-top:18px;font-size:15px;color:var(--ink-2);line-height:1.5;}
.dash-grid figcaption b{display:block;font-family:var(--font-d);font-size:1.25rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px;}
.ph{aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:20px;background:repeating-linear-gradient(135deg,var(--paper-2) 0 14px,var(--card) 14px 28px);color:var(--ink-3);font-family:var(--font-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.ph b{display:block;color:var(--ink);font-size:13px;margin-bottom:6px;}
.vid{margin-top:64px;}
.vid-frame{position:relative;max-width:980px;margin:0 auto;box-shadow: var(--shadow);}
.vid-frame .ph{aspect-ratio:16/9;}
.vid-frame video{width:100%;display:block;background:var(--night);}
.vid-play{width:76px;height:76px;border-radius:50%;background:var(--hi);border:1px solid var(--rule);display:grid;place-items:center;margin:0 auto 14px;box-shadow: var(--shadow);}
.vid-play svg{width:28px;height:28px;margin-left:4px;}
.transcript{max-width:980px;margin:34px auto 0;border:1px solid var(--rule);border-radius:8px;background:var(--card);}
.transcript summary{cursor:pointer;padding:18px 24px;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.transcript summary::-webkit-details-marker{display:none;}
.transcript summary::after{content:"+";font-family:var(--font-m);font-size:1.4rem;line-height:1;}
.transcript[open] summary::after{content:"\2212";}
.transcript-body{padding:4px 24px 24px;border-top:1.5px dashed var(--line);}
.transcript-body .t{display:grid;grid-template-columns:70px 1fr;gap:6px 18px;margin-top:18px;}
.transcript-body time{font-family:var(--font-m);font-size:12.5px;color:var(--ink-3);padding-top:3px;}
.transcript-body h4{font-family:var(--font-b);font-size:15px;font-weight:700;letter-spacing:0;margin-bottom:2px;}
.transcript-body p{color:var(--ink-2);font-size:16px;}
.draft-note{font-family:var(--font-m);font-size:11.5px;color:var(--ink-3);margin-top:18px;}
@media (max-width:820px){.dash-grid{grid-template-columns:1fr;}.transcript-body .t{grid-template-columns:1fr;}}

/* device scenes: a real photograph with a screen on it */
.devscene { position:relative; border:1px solid var(--rule); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); background:var(--paper-2); }
.devscene .scene-photo { width:100%; display:block; transition:transform 1.2s var(--ease); }
.dshot:hover .scene-photo { transform:scale(1.035); }
.devscene.monitor { aspect-ratio:16 / 11; display:grid; place-items:center; padding:7% 9% 12%; }
.scene-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); transition:transform 1.6s var(--ease); }
.dshot:hover .scene-bg { transform:scale(1.12); }
.scene-veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); }
.devscene .dev-monitor { position:relative; width:100%; margin-bottom:18px; }
.dev-monitor.float { animation:bob 8s ease-in-out infinite; }
.dev-monitor .ph { aspect-ratio:16 / 10; border-radius:6px; }
.dash-grid .dshot .devscene { box-shadow:var(--shadow); }
@media (prefers-reduced-motion: reduce) { .dev-monitor.float { animation:none; } .scene-bg, .devscene .scene-photo { transition:none; } }