/* ===========================================================
   demo-popup.css: demo stills and the demo popup. Shared by the web
   design hub and every industry page (partials/demo-popup.php).
   Spec: WebDesign_Mockup_Spec_Step2.md §1.2 and §1.3. Colours are the
   spec's computed pairs, as tokens (tokens.css, "Web design hub").
   =========================================================== */

/* ---------- browser frame, shared language ---------- */
.dframe { display: block; background: var(--paper); border: 1px solid var(--gray-deep); position: relative; box-shadow: 0 30px 60px -30px var(--wdh-shadow); }
.dframe::before { content: ''; position: absolute; inset: -9px 9px 9px -9px; border: 1px solid var(--orange-deep); pointer-events: none; }
.dchrome-mini { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--wdh-chrome); color: var(--wdh-chrome-tx2); }
.ddot { width: 10px; height: 10px; border-radius: 50%; background: var(--wdh-chrome-line); flex: 0 0 auto; }
.durl { flex: 1; min-width: 0; margin-left: 10px; height: 26px; background: var(--wdh-chrome-2); border-radius: 4px; display: flex; align-items: center; padding: 0 12px;
        font-family: var(--font-mono); font-size: 11px; color: var(--wdh-chrome-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- a demo still: one button ---------- */
.dstill { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; text-align: left; position: relative; font: inherit; }
.dstill .dframe { transition: transform .35s var(--ease-out); }
.dstill:hover .dframe { transform: translateY(-4px); }
.dstill img { display: block; width: 100%; height: auto; }
.dstill:focus-visible { outline: none; }
.dstill:focus-visible .dframe { outline: 2px solid var(--orange-deep); outline-offset: 6px; }
.dopen { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
         background: var(--wdh-chrome); color: var(--wdh-chrome-tx); font-family: var(--font-sans); font-weight: 800; font-size: 13px;
         letter-spacing: .12em; text-transform: uppercase; padding: 16px 22px; min-height: 48px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); white-space: nowrap; }
.dplay { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; }
.dplay svg { width: 9px; height: 9px; fill: var(--on-orange); }

/* ---------- popup ---------- */
.dpop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.dpop[hidden] { display: none; }
.dpop-scrim { position: absolute; inset: 0; background: var(--wdh-scrim); opacity: .92; }
.dpop-dlg { position: relative; width: min(1180px, calc(100% - 80px)); height: calc(100% - 72px); background: var(--paper);
            border: 1px solid var(--wdh-chrome); display: flex; flex-direction: column; animation: dpopIn .28s var(--ease-out) both; }
.dpop-dlg::before { content: ''; position: absolute; inset: -9px 9px 9px -9px; border: 1px solid var(--orange); pointer-events: none; }
@keyframes dpopIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.dpop-chrome { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--wdh-chrome); color: var(--wdh-chrome-tx2); flex-shrink: 0; }
.dpop-chrome .durl { max-width: 320px; }
.dpop-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--on-orange); background: var(--orange); padding: 5px 8px; white-space: nowrap; }
.dpop-start { margin-left: auto; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
              color: var(--wdh-chrome-tx); text-decoration: none; border-bottom: 1px solid var(--orange); padding: 8px 2px; min-height: 44px; display: inline-flex; align-items: center; }
.dpop-x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--wdh-chrome-2);
          border: 1px solid var(--wdh-chrome-line); color: var(--wdh-chrome-tx); cursor: pointer; flex: 0 0 auto; }
.dpop-x svg { width: 14px; height: 14px; }
.dpop :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.dpop-view { position: relative; flex: 1; background: var(--dpop-ground, var(--paper)); }
.dpop-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dpop-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
             background: var(--dpop-ground, var(--paper)); z-index: 2; transition: opacity .3s; }
.dpop-load b { font-family: var(--dpop-font, var(--font-sans)); font-weight: 600; font-size: 30px; color: var(--dpop-ink, var(--ink)); letter-spacing: -.01em; }
.dpop-load i { display: block; width: 120px; height: 2px; background: var(--dpop-line, var(--rule)); overflow: hidden; position: relative; }
.dpop-load i::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--dpop-ink, var(--ink)); animation: dpopLd 1s ease-in-out infinite; }
@keyframes dpopLd { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.dpop-load.gone { opacity: 0; pointer-events: none; }
.dpop-bar { display: none; }
.dpop-guard { position: absolute; width: 1px; height: 1px; overflow: hidden; }
/* per-demo loading state */
.dpop[data-loader="demo01"] { --dpop-ground: var(--demo01-ground); --dpop-ink: var(--demo01-ink); --dpop-line: var(--demo01-line); }
.dpop[data-loader="demo02"] { --dpop-ground: var(--demo02-ground); --dpop-ink: var(--demo02-ink); --dpop-line: var(--demo02-line); }
.dpop[data-loader="demo03"] { --dpop-ground: var(--demo03-ground); --dpop-ink: var(--demo03-ink); --dpop-line: var(--demo03-line); }
.dpop[data-loader="demo04"] { --dpop-ground: var(--demo04-ground); --dpop-ink: var(--demo04-ink); --dpop-line: var(--demo04-line); }
.dpop[data-loader="demo05"] { --dpop-ground: var(--demo05-ground); --dpop-ink: var(--demo05-ink); --dpop-line: var(--demo05-line); }
.dpop[data-loader="demo06"] { --dpop-ground: var(--demo06-ground); --dpop-ink: var(--demo06-ink); --dpop-line: var(--demo06-line); }
.dpop[data-loader="demo07"] { --dpop-ground: var(--demo07-ground); --dpop-ink: var(--demo07-ink); --dpop-line: var(--demo07-line); }
.dpop[data-loader="demo08"] { --dpop-ground: var(--demo08-ground); --dpop-ink: var(--demo08-ink); --dpop-line: var(--demo08-line); }
.dpop[data-loader="demo09"] { --dpop-ground: var(--demo09-ground); --dpop-ink: var(--demo09-ink); --dpop-line: var(--demo09-line); }
.dpop[data-loader="demo10"] { --dpop-ground: var(--demo10-ground); --dpop-ink: var(--demo10-ink); --dpop-line: var(--demo10-line); }
/* serif brands get a serif wordmark; the hub never loads a demo's own fonts */
.dpop[data-loader="demo01"], .dpop[data-loader="demo02"], .dpop[data-loader="demo07"] { --dpop-font: Georgia, 'Times New Roman', serif; }

/* ---------- mobile: sheet with a thumb-reach bar ---------- */
@media (max-width: 760px) {
  .dpop { align-items: flex-end; }
  .dpop-dlg { width: 100%; height: calc(100% - 14px); border: none; border-radius: 14px 14px 0 0; overflow: hidden; animation: dpopSheet .3s var(--ease-out) both; }
  .dpop-dlg::before { display: none; }
  .dpop-chrome .dpop-start, .dpop-chrome .dpop-x, .dpop-chrome .ddot { display: none; }
  .dpop-chrome .durl { margin-left: 0; }
  .dpop-bar { display: flex; gap: 10px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--wdh-chrome); flex-shrink: 0; }
  .dpop-bar .dpop-start { margin-left: 0; flex: 1; }
  .dpop-bar .dpop-x { width: 56px; min-height: 48px; }
  .dopen { padding: 12px 16px; font-size: 12px; }
}
@keyframes dpopSheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- reduced motion: everything appears at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .dpop-dlg { animation: none; }
  .dstill .dframe { transition: none; }
  .dstill:hover .dframe { transform: none; }
  .dpop-load i::after { animation: none; width: 100%; }
}