/* Polite Platform :: Control Plane
 * Path: /control-plane/public/assets/storyboard.css
 * Description: Setup journey cards within the persistent operator workspace.
 * Author: Polite Platform Team
 * Date: 2026-10-03T05:04:31Z
 * Generated by: GPT-6 Codex
 */
#storyboard-view { padding: 24px 0 60px; }
.storyboard-toolbar, .storyboard-card-actions { display:flex; gap:12px; flex-wrap:wrap; }
.storyboard-toolbar { align-items:center; margin-bottom:24px; }
.storyboard-toolbar button:first-child { margin-right:auto; }
.storyboard-toolbar button, .storyboard-card-actions button { min-height:44px; }
.storyboard-heading h1 { margin:4px 0 12px; font-size:clamp(24px,3vw,34px); }
.storyboard-project { color:#aaa8b5; margin:0; }
.storyboard-status { color:#c9b5ef; min-height:24px; }
.storyboard-group-title { font-size:18px; margin:28px 0 16px; }
.storyboard-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; max-width:1100px; }
.storyboard-card { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); min-width:0; overflow:hidden; border:1px solid #36363c; border-radius:9px; background:#1e1e21; }
.storyboard-card-heading { grid-column:1/-1; display:flex; gap:12px; align-items:center; padding:16px; }
.storyboard-card-heading h3 { font-size:16px; margin:0; }
.storyboard-step { font-variant-numeric:tabular-nums; color:#a98aed; }
.storyboard-card-detail { grid-column:2; grid-row:2; min-width:0; padding:16px; border-left:1px solid #36363c; overflow-wrap:anywhere; }
.storyboard-card > .storyboard-screen, .storyboard-card > .storyboard-unavailable { grid-column:1; grid-row:2; align-self:start; width:calc(100% - 32px); margin:0 16px 16px; box-sizing:border-box; }
.storyboard-card-detail p { margin:0 0 12px; }
.storyboard-card-detail .helper { font-size:12px; line-height:1.5; }
.storyboard-ready { color:#a3d8bd; font-size:13px; }
.storyboard-warning { color:#e9c183; font-size:13px; }
.storyboard-unavailable,.storyboard-empty { padding:40px 24px; background:#252529; color:#aaa8b5; line-height:1.6; }
.storyboard-screen { width:100%; max-width:560px; margin:0 auto; position:relative; overflow:hidden; background:#101114; color:#f5f5f5; font-family:system-ui,sans-serif; }
.storyboard-screen canvas { display:block; max-width:100%; height:auto; margin:auto; }
.storyboard-template { display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; min-height:240px; background:#151518; }
.storyboard-template canvas { max-height:480px; width:auto; object-fit:contain; }
.storyboard-capture { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; text-align:center; }
.storyboard-capture h2 { font-size:clamp(18px,2vw,26px); margin:12px 0; color:inherit; }
.storyboard-capture-copy { position:relative; z-index:1; width:100%; padding:24px; }
.storyboard-screen-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.storyboard-tap { display:inline-block; padding:12px 16px; margin-top:24px; border-radius:24px; background:#ffffff20; font-size:14px; }
.storyboard-tap.outlined { border:1px solid #ddd; background:transparent; }
.storyboard-countdown { font-size:48px; }
.storyboard-spinner { border:4px solid #42454f; border-top-color:#eceef5; width:40px; height:40px; margin:0 auto 24px; border-radius:50%; }
.storyboard-checkmark { font-size:64px; color:#a3d8bd; }
.storyboard-success-icon { width:90px; height:90px; object-fit:contain; }
.storyboard-selection { padding:20px; box-sizing:border-box; }
.storyboard-selection h2 { font-size:22px; text-align:center; color:inherit; }
.storyboard-selection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.storyboard-selection-grid figure { margin:0; overflow:hidden; }
.storyboard-selection-grid figcaption { font-size:12px; text-align:center; padding:8px; }
.storyboard-screen > .ss-preview-kiosk { width:100%; height:100%; position:absolute; inset:0; }
.storyboard-screen .gallery-shell { margin:0 auto; }
.storyboard-handoff { padding:24px; box-sizing:border-box; background:#151518; }
.storyboard-guest-phone { max-width:300px; margin:auto; border:5px solid #62666d; border-radius:28px; background:#f7f7f8; color:#202124; padding:20px; }
.storyboard-phone-chrome { font-size:12px; text-align:center; color:#565b63; }
.storyboard-phone-symbol { font-size:48px; text-align:center; margin:24px 0; }
.storyboard-handoff-steps { padding-left:24px; line-height:1.6; font-size:16px; }
.storyboard-handoff-steps li { padding:0 0 20px 8px; }
.storyboard-phone-caption { margin:20px 0 8px; font-size:12px; text-align:center; color:#565b63; }
@media(max-width:760px) {
  .storyboard-card { display:block; }
  .storyboard-card-detail { border-left:0; border-top:1px solid #36363c; }
}
@media(max-width:600px) { #storyboard-view{padding-top:16px}.storyboard-toolbar{gap:8px}.storyboard-toolbar button:first-child{margin-right:0} }

.storyboard-screen-graphic { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.storyboard-email { min-height:120px; }
.storyboard-email-renderer { position:absolute; width:375px; height:1px; border:0; opacity:0; pointer-events:none; }
.storyboard-email canvas { width:100%; }

/* Authored guest appearance is scoped inside each visual, never to workspace controls. */
.storyboard-guest-theme { background:var(--storyboard-background); color:var(--storyboard-text); }
.storyboard-capture-copy { box-sizing:border-box; height:100%; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:20px; }
.storyboard-capture-copy > h2, .storyboard-capture-copy > p { flex:none; margin:0; }
.storyboard-media { position:relative; margin:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:hidden; width:100%; }
.storyboard-capture-copy > .storyboard-media { flex:1; }
.storyboard-media-image { display:block; max-width:100%; max-height:100%; min-height:0; object-fit:contain; flex:1; }
.storyboard-media-caption { font-size:10px; line-height:1.4; flex:none; padding:3px 8px; text-align:center; }
.storyboard-media-missing { aspect-ratio:3/4; min-height:140px; padding:24px; box-sizing:border-box; border:1px dashed #808088; background:#77777712; color:inherit; text-align:center; }
.storyboard-media-missing > span { font-size:14px; font-weight:600; }
.storyboard-media-missing small { font-size:11px; line-height:1.5; opacity:.8; }
.storyboard-review-actions { display:flex; gap:12px; flex:none; width:100%; }
.storyboard-guest-action { display:flex; align-items:center; justify-content:center; text-align:center; min-height:44px; padding:12px 16px; box-sizing:border-box; font-size:15px; font-weight:700; line-height:1.25; background:var(--storyboard-accent); color:var(--storyboard-onAccent); border-radius:var(--storyboard-radius); }
.storyboard-review-actions .storyboard-guest-action { flex:1; }
.storyboard-capture[data-media-alignment="live_view"] .storyboard-media { justify-content:flex-start; }
.storyboard-capture[data-media-alignment="live_view"] .storyboard-media-image { flex:0 1 auto; }
.storyboard-guest-action.secondary { background:var(--storyboard-utility); color:var(--storyboard-text); }
.storyboard-capture-trigger { align-self:center; min-width:72px; }
.storyboard-capture-trigger.over-media { position:absolute; bottom:32px; }
.storyboard-capture-capture .storyboard-media-missing { justify-content:flex-end; padding-bottom:18px; }
.storyboard-countdown-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--storyboard-countdown); text-shadow:0 2px 12px #000; background:#00000030; }
.storyboard-countdown-overlay p { font-size:18px; margin:0 0 12px; }
.storyboard-countdown { background:var(--storyboard-countdownBackground); border-radius:50%; line-height:1.4; padding:0 16px; }
.storyboard-spinner { flex:none; border-color:var(--storyboard-raised); border-top-color:var(--storyboard-accent); }
.storyboard-checkmark { color:var(--storyboard-success); }
.storyboard-template-thumbnail { display:block; width:100%; height:auto; object-fit:contain; }
.storyboard-preview-caption { font-size:11px; line-height:1.5; text-align:center; }
.storyboard-sharing { position:relative; padding:24px 20px; background:var(--storyboard-surface); }
.storyboard-sharing-content { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; }
.storyboard-sharing-content h2 { text-align:center; margin:0; font-size:24px; color:inherit; }
.storyboard-sharing-subtitle { color:var(--storyboard-secondary); font-size:13px; text-align:center; margin:0; }
.storyboard-sharing-content > .storyboard-media { max-height:150px; }
.storyboard-sharing-content > .storyboard-media .storyboard-media-image { max-height:125px; }
.storyboard-sharing-content > .storyboard-media-missing { min-height:110px; aspect-ratio:auto; }
.storyboard-channel-tabs { display:flex; gap:8px; }
.storyboard-channel-tab { flex:1; font-size:12px; padding:10px 6px; min-width:0; overflow-wrap:anywhere; }
.storyboard-channel-tab.selected { background:color-mix(in srgb, var(--storyboard-text) 8%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--storyboard-text) 22%, transparent); }
.storyboard-sharing-form { background:var(--storyboard-recessed); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.storyboard-sharing-form .storyboard-field-label { margin:0; font-size:12px; }
.storyboard-guest-field { min-height:42px; background:var(--storyboard-raised); border:1px solid #80808055; border-radius:8px; }
.storyboard-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.storyboard-keypad span { background:var(--storyboard-raised); text-align:center; padding:8px 2px; border-radius:7px; font-size:17px; }
.storyboard-keypad span:nth-child(10),.storyboard-keypad span:nth-child(12) { font-size:12px; display:flex; align-items:center; justify-content:center; }
.storyboard-guest-action.pending-entry { opacity:.5; }
.storyboard-qr-illustration { margin:auto; width:160px; height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:12px; box-sizing:border-box; background:#fff; color:#151515; border:4px dashed #888; }
.storyboard-qr-illustration strong { font-size:42px; }
.storyboard-qr-illustration span { font-size:12px; }
.storyboard-gallery-media { aspect-ratio:auto !important; background:transparent !important; }
.storyboard-gallery-media .storyboard-media { max-height:560px; }
.storyboard-gallery-media .storyboard-media-image { max-height:520px; }
.storyboard-gallery-media .storyboard-media-caption { color:inherit; }
.storyboard-sms-receipt { padding:24px; }
.storyboard-sms-receipt .storyboard-guest-phone { padding:18px 12px; }
.storyboard-sms-bubble { background:#e5e5e9; color:#171717; border-radius:18px; padding:16px; margin:32px 0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.storyboard-sms-bubble p { white-space:pre-wrap; margin:0 0 12px; }
.storyboard-sms-link { color:#0058b0; text-decoration:underline; }
/* Structural forms remain legible in screen exports, without pretending to be a running app. */
.storyboard-guest-form { padding:20px; text-align:left; background:var(--ss-modal-bg, #202024); color:var(--ss-modal-text, #f4f4f5); font-size:14px; line-height:1.5; }
.storyboard-guest-form .helper { font-size:12px; color:inherit; opacity:.8; }
.storyboard-guest-form .pdc-guest-preview { gap:16px; }
.storyboard-guest-form .pdc-preview-legal { border-top:1px solid #80808055; padding-top:12px; }
.storyboard-guest-form .pdc-preview-legal summary { font-weight:600; }
.storyboard-guest-form .pdc-preview-choice { margin:0; }
.storyboard-guest-form input:disabled, .storyboard-guest-form select:disabled, .storyboard-guest-form textarea:disabled { opacity:1; background:transparent; color:inherit; }
.storyboard-screen.storyboard-with-guest-form > .ss-preview-kiosk { position:relative; inset:auto; height:auto; aspect-ratio:auto; min-height:320px; }
.storyboard-with-guest-form .ss-preview-content { min-height:0; }
.storyboard-with-guest-form .ss-preview-modal-backdrop { position:relative; padding:20px 12px; }
.storyboard-with-guest-form .ss-preview-modal { width:100%; height:auto; aspect-ratio:auto; box-sizing:border-box; padding:16px; gap:16px; grid-template-columns:1fr; }
.storyboard-with-guest-form .ss-preview-modal > .ss-preview-media-grid { max-height:160px; }
.storyboard-with-guest-form .storyboard-guest-form { padding:8px 0 0; }
@media print {
  body:has(#storyboard-view:not([hidden])) { background:white !important; }
  body:has(#storyboard-view:not([hidden])) > :not(main),
  body:has(#storyboard-view:not([hidden])) main > :not(#workspace),
  body:has(#storyboard-view:not([hidden])) #workspace > :not(#storyboard-view) { display:none !important; }
  body:has(#storyboard-view:not([hidden])) main { width:auto; max-width:none; padding:0; margin:0; }
  #storyboard-view:not([hidden]) { padding:0; color:#151515; }
  #storyboard-view .storyboard-toolbar, #storyboard-view .storyboard-card-actions { display:none !important; }
  #storyboard-view .storyboard-grid { max-width:none; gap:16px; }
  #storyboard-view .storyboard-card { display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); break-inside:avoid; page-break-inside:avoid; background:white; color:#151515; border-color:#b8b8bd; }
  #storyboard-view .storyboard-card-heading { padding:10px 12px; }
  #storyboard-view .storyboard-card-detail { grid-column:2; grid-row:2; border-top:0; border-left:1px solid #b8b8bd; padding:12px; }
  #storyboard-view .storyboard-card-detail .helper, #storyboard-view .storyboard-project { color:#444; }
  #storyboard-view .storyboard-ready { color:#245438; }
  #storyboard-view .storyboard-warning { color:#76501b; }
  #storyboard-view .storyboard-screen { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #storyboard-view .storyboard-group-title { break-after:avoid; page-break-after:avoid; }
}