/* Hubshape slides: the live demo card with its country toggle, the placeholder figures, and the brand on dark tiles. */

/* Slide 6: one card holding the real app. Its header carries the country toggle (a filter on what the frame
   shows), the frame takes the rest of the height, and a veil covers it while it loads or when it is not running. */
.app-card { display: flex; flex-direction: column; background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-r-panel); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(20,20,22,.45); }
.app-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--h-s3); height: 64px; padding: 0 var(--h-s3); background: var(--h-asphalt); color: var(--h-paper); }
.app-live { display: inline-flex; align-items: center; gap: 12px; font-family: var(--h-f-mono) !important; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,246,241,.72); }
.app-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--h-faint); }
.app-card[data-state="live"] .app-live i { background: var(--h-marking); box-shadow: 0 0 0 4px rgba(255,207,26,.2); }
.app-card[data-state="down"] .app-live i { background: var(--h-red); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(247,246,241,.08); border: 1px solid rgba(247,246,241,.14); }
.seg button { height: 40px; padding: 0 22px; border: 0; border-radius: 7px; background: transparent; color: rgba(247,246,241,.75); font: 600 19px var(--h-f-ui); cursor: pointer; }
.seg button:hover { color: var(--h-paper); background: rgba(247,246,241,.08); }
.seg button.on { background: var(--h-paper); color: var(--h-ink); }
.app-frame { position: relative; flex: 1; min-height: 0; background: var(--h-paper); border: 0; border-radius: 0; box-shadow: none; }
.app-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--h-paper); }
.app-veil { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: var(--h-s5); background: var(--h-paper); }
.app-card[data-state="idle"] .app-loading, .app-card[data-state="loading"] .app-loading, .app-card[data-state="down"] .app-down { display: flex; }
.app-veil b { font-family: var(--h-f-display) !important; font-size: 40px; color: var(--h-ink); letter-spacing: -.01em; }
.app-veil span { font-size: 24px; color: var(--h-ink-2); }
.app-veil code { font-family: var(--h-f-mono); font-size: 22px; background: var(--h-bar); border: 1px solid var(--h-line); border-radius: 6px; padding: 2px 8px; }
.app-veil small { font-size: 19px; color: var(--h-muted); }
.app-retry { height: 48px; padding: 0 28px; border: 0; border-radius: var(--h-r-control); background: var(--h-asphalt); color: var(--h-paper); font: 600 20px var(--h-f-ui); cursor: pointer; }
.app-retry:hover { background: var(--h-ink); }
.spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--h-line); border-top-color: var(--h-gold); animation: hSpin 1s linear infinite; }
@keyframes hSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Slide 7: figures still to come from the demo workspaces are marked as placeholders */
.m-card em.tbc { position: relative; border-left-style: dashed; color: var(--h-muted); }
.m-card em.tbc::after { content: 'Placeholder'; position: absolute; top: -14px; right: 16px; font-family: var(--h-f-mono); font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--h-mustard); background: var(--h-cream); border: 1px solid var(--h-cream-2); border-radius: 6px; padding: 2px 8px; }

/* Light grounds: gold, not marking yellow, for lines and edges; yellow lights only the one thing that matters */
.path::before { background: var(--h-line-2); }
.p-step strong { border-left-color: var(--h-gold); }
.promises span { border-left-color: var(--h-gold); }
.m-card:nth-child(even) { border-top-color: var(--h-asphalt); }
.m-card em { border-left-color: var(--h-gold); }
.h-step:last-child i { background: var(--h-marking); color: var(--h-ink); }

/* Dark tiles carry the on-dark wordmark: the sign-on tile, the drawer, the close */
.ol-sign-in .ol-lockup .wm { height: 30px; }
#ns-drawer header img.ol-dwm { height: 30px; }
.ol-close-brand .wm { height: 72px; }
.f-mid img { width: 260px; }
.desk-only .desk-wm { filter: none !important; }

/* Slide 5: the cards line up with their heading and share the column height evenly */
.flow3 .f-in ul, .flow3 .f-out ul { padding: 0; margin: 0; grid-template-rows: repeat(3, 1fr) !important; }
.flow3 > div.f-in { padding-right: 56px; }

/* Slide 8: the decision step's number on marking yellow (the runtime's two-layer background resolves to nothing here) */
.path .p-step.gate .p-n { background: var(--h-marking); border: 4px solid var(--h-marking); color: var(--h-ink); }
/* Slide 4: every "in the demo" box the same height, whatever its length */
.how4 .h-step em { min-height: calc(2 * 1.3em + 32px); box-sizing: border-box; display: flex; align-items: center; line-height: 1.3; }
.app-status { font-style: normal; color: var(--h-paper); }
.app-card[data-state="live"] .app-status { color: var(--h-marking); }