/* Shared touch targets and visible keyboard navigation. */
button, a, summary, input, select { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--pb-link); outline-offset: 3px; }
.view-context { display: block; margin-top: 5px; font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--pb-muted); }
.top .brand .view-context { color: var(--pb-muted); }
.top { flex-wrap: wrap; }
.top-actions { margin-left: auto; }
.top .badge { max-width: 280px; overflow-wrap: anywhere; }
.field input, .field select { min-height: 46px; }
.check { min-height: 44px; line-height: 1.5; }
.check input { flex-shrink: 0; }
.panel, .event-card, .event-card dd, .settings-header > div { min-width: 0; overflow-wrap: anywhere; }
.capture-progress { font-size: 1rem; font-weight: 700; color: var(--event-text); margin: 10px 0; }
.booth-preview-toggle { display: none; }
#cameraPanel > .small, #resultPanel > .small { font-size: .875rem; }
#boothView[data-phase="capture"] #finishActions { display: none; }
.dashboard-secondary { border: 1px solid var(--pb-line); border-radius: 14px; margin: 14px 0; background: var(--pb-surface); }
.dashboard-secondary > summary { padding: 16px 20px; cursor: pointer; font-weight: 700; }
.dashboard-secondary .panel { border: 0; box-shadow: none; padding-top: 0; }
.dashboard-secondary .event-list:empty { display: none; }
.dashboard-heading .actions { margin-top: 0; }
.dashboard-heading + .new-event { margin: 0 0 20px; }
.event-card .event-primary-actions .btn { min-height: 48px; }
.event-more-options button { min-height: 46px; }
.editor-jump { margin-bottom: 16px; }
.event-accordion { scroll-margin-top: 24px; }
#settingsDialog .settings-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; border-top: 1px solid var(--pb-line); }
.kiosk-active .top-actions, .kiosk-active .view-context { display: none; }
.kiosk-active #kioskToggle { margin-left: auto; }
.kiosk-active .shell { max-width: 1400px; padding-top: 12px; }
.kiosk-active #boothView { grid-template-columns: minmax(0, 1fr); max-width: 1050px; margin: auto; }
.kiosk-active #boothView:not([data-phase="result"]) #resultPanel,
.kiosk-active #boothView[data-phase="result"] #cameraPanel,
.kiosk-active #cameraPanel > .small,
.kiosk-active #boothView[data-phase] .booth-preview-toggle,
.kiosk-active #eventZip { display: none; }
.kiosk-active #stage { aspect-ratio: auto; height: clamp(200px, calc(100dvh - 310px), 720px); }
.kiosk-active #stage video { object-fit: contain; }
.kiosk-active #cameraPanel .controls .btn { min-height: 58px; min-width: 200px; font-size: 1.2rem; }
.kiosk-active #resultPanel .preview { min-height: 0; padding: 12px; }
.kiosk-active #resultPanel .strip { width: auto; max-width: 100%; transform: none; }
.kiosk-active #resultPanel .strip-canvas { width: auto; max-width: 100%; max-height: 50dvh; object-fit: contain; }
@media (max-width: 850px) {
  .shell { padding: 12px 12px max(20px, env(safe-area-inset-bottom)); }
  .top { gap: 8px; margin-bottom: 12px; }
  .top .brand { font-size: 1.15rem; }
  .top-actions { gap: 8px; }
  .top .btn { font-size: .875rem; padding: 10px 12px; }
  #boothView { gap: 12px; }
  #cameraPanel, #resultPanel { padding: 14px; }
  #cameraPanel h1 { font-size: 1.6rem; }
  #cameraPanel .sub { margin-bottom: 12px; }
  #cameraPanel > .small { display: none; }
  #cameraPanel .controls .btn { flex: 1; min-height: 54px; font-size: 1.1rem; }
  #cameraPanel .status { font-size: .875rem; line-height: 1.4; }
  #boothView[data-phase="ready"] .booth-preview-toggle { display: block; margin-top: 12px; width: 100%; }
  #boothView[data-phase="ready"]:not(.preview-open) #resultPanel,
  #boothView[data-phase="capture"] #resultPanel,
  #boothView[data-phase="result"] #cameraPanel { display: none; }
  #boothView[data-phase="ready"] #resultPanel .actions { display: none; }
  #resultPanel .preview { padding: 12px; }
  #resultPanel .strip { transform: none; width: auto; max-width: 100%; }
  #resultPanel .strip-canvas { width: auto; max-width: 100%; max-height: 48dvh; object-fit: contain; }
  #resultPanel .actions .btn { flex: 1 1 180px; }
  #resultPanel #finishActions { position: sticky; bottom: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: var(--event-surface, var(--pb-surface)); z-index: 3; }
  #resultPanel #finishActions .btn { flex: 1 1 0; min-height: 52px; }
  .dashboard-heading { flex-wrap: wrap; gap: 12px; margin: 18px 0; }
  .dashboard-heading .actions { width: 100%; }
  .dashboard-heading .actions .btn { flex: 1 1 150px; }
  .dashboard-stats { margin-bottom: 12px; }
  .dashboard-stat { padding: 12px; }
  .dashboard-stat span { font-size: .875rem; }
  .event-card dl { grid-template-columns: 95px minmax(0, 1fr); }
  .settings-header { align-items: flex-start; }
  .settings-header .btn { flex-shrink: 0; }
  .event-accordion { scroll-margin-top: 205px; }
  .event-live-preview.strip-mode:not(.expanded) .strip-canvas { max-height: 145px; }
  .event-live-preview.strip-mode.expanded .strip-canvas { max-height: 45vh; }
  .field input:not([type=color]):not([type=range]), .field select, textarea { font-size: 16px; }
}
@media (max-width: 480px) {
  .top-actions { order: 3; width: 100%; justify-content: flex-start; }
  #kioskToggle { margin-left: auto; }
  .kiosk-active .top-actions { display: none; }
  .dashboard-toolbar { gap: 8px; }
  .dashboard-toolbar h2 { font-size: 1.25rem; }
}
@media (max-height: 550px) and (orientation: landscape) {
  #cameraPanel .sub, #cameraPanel > .small, #welcomeBrand { display: none; }
  #stage, .kiosk-active #stage { height: max(160px, calc(100dvh - 220px)); aspect-ratio: auto; }
  #stage video { object-fit: contain; }
}

/* W5 chrome uses the shared brand; event colors and fonts stay event-specific. */
.top .brand.pb-brand{font-size:1.125rem;letter-spacing:.04em}.top .brand.pb-brand .pb-wordmark{color:var(--pb-ink)}.btn{border-radius:var(--pb-radius-control);min-height:var(--pb-control-height);font-size:var(--pb-label)}.panel,.event-card,.dashboard-stat,.dashboard-secondary{border-radius:var(--pb-radius-card)}.settings-nav a{border-radius:var(--pb-radius-control);min-height:var(--pb-control-height)}.event-card{box-shadow:var(--pb-shadow-card)}

.camera-hint{position:absolute;z-index:3;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:8px 12px;border-radius:12px;background:var(--pb-surface);color:var(--pb-ink);font-size:13px;line-height:1.4;text-align:center;pointer-events:none;box-shadow:0 2px 12px #0003}.camera-hint[hidden]{display:none!important}
.pose-challenge{margin:12px 0;padding:14px;border:1px solid var(--pb-border);border-radius:14px;background:var(--pb-surface)}.pose-challenge>p:first-child{margin:0;font-weight:600;line-height:1.5}.pose-challenge .actions{margin:10px 0}.pose-challenge .small{margin-bottom:0}
/* Task areas replace the long list of outer accordions. */
#settingsDialog .editor-areas{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 8px}
#settingsDialog .editor-areas .btn[aria-current=page]{background:var(--pb-accent);color:#171c27;border-color:var(--pb-accent)}
#settingsDialog .event-editor-layout{margin-top:16px}
#settingsDialog .event-editor-layout.without-preview{grid-template-columns:minmax(0,1fr)}
.editor-area{min-width:0}
.editor-area>h3{margin:0 0 8px;font-size:1.4rem}
.editor-area>.small{margin:0 0 20px}
.editor-area>.event-accordion{border:0;border-radius:0;margin-bottom:24px}
.editor-area>.event-accordion>.event-accordion-content{padding:0}
.editor-area h4{font-size:1.05rem;margin:20px 0 16px}
.editor-overview-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.editor-area-card{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;min-width:0;padding:20px;border:1px solid var(--pb-border);border-radius:12px;background:var(--pb-surface);color:var(--pb-ink);cursor:pointer;font:inherit}
.editor-area-card:hover{border-color:var(--pb-accent)}
.editor-area-card span{font-size:.875rem;color:var(--pb-muted);line-height:1.5}
@media(max-width:850px){#settingsDialog .event-editor-layout.without-preview{display:block}.editor-overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}#settingsDialog .editor-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#settingsDialog .editor-areas .btn{white-space:normal;min-width:0}.editor-area-card{padding:16px}#settingsDialog .event-live-preview{position:relative;top:0;grid-row:auto}#settingsDialog .event-editor-controls{grid-row:2}}
@media(max-width:420px){.editor-overview-cards{grid-template-columns:1fr}}
/* Focused design tools retain the shared live preview. */
.design-navigation,.strip-edit-navigation{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
#settingsDialog .design-navigation .btn[aria-current=page],#settingsDialog .strip-edit-navigation .btn[aria-current=page]{border-color:var(--pb-accent);background:var(--pb-accent);color:var(--pb-accent-ink)}
#settingsDialog .strip-options{border:0;margin:0}
#settingsDialog .strip-options-content{padding:0}
.design-advanced{margin-top:20px;border:1px solid var(--pb-border);border-radius:10px;padding:0 16px 16px}
.design-advanced>summary{min-height:44px;padding:12px 0;cursor:pointer;font-weight:600}
.design-template-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.design-template-list .template-card{min-width:0}
@media(max-width:850px){.design-navigation{display:grid;grid-template-columns:1fr}.strip-edit-navigation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.strip-edit-navigation .btn{min-width:0;padding:10px 6px;white-space:normal}.design-template-list{grid-template-columns:1fr}}

.profile-menu { position: relative; margin-left: auto; order: 2; flex-shrink: 0; }
.profile-toggle { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.profile-initials { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--pb-accent); color: var(--pb-bg); font-size: .8rem; font-weight: 800; }
.profile-name { max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-options { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; border: 1px solid var(--pb-border); border-radius: 12px; background: var(--pb-surface); box-shadow: var(--pb-shadow-dialog); z-index: 30; }
.profile-options a { display: block; padding: 12px 14px; border-radius: 8px; color: var(--pb-ink); text-decoration: none; min-height: 46px; }
.profile-options a:hover { background: var(--pb-surface-raised); }
.account-page { max-width: 800px; margin: 24px auto; }
.account-profile .settings-section { border: 0; padding: 0; }
.account-data { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; margin: 24px 0; }
.account-data dt { color: var(--pb-muted); }
.account-data dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .profile-name { display: none; }
  .top .profile-toggle { padding: 0; width: 46px; height: 46px; min-width: 46px; border-radius: 50%; justify-content: center; background: var(--pb-surface-raised); }
  .profile-initials { width: 34px; height: 34px; }
  .top .brand { flex: 1; min-width: 0; }
  .top-actions { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; }
  #kioskToggle { order: 4; }
  .account-page .dashboard-heading { flex-wrap: wrap; }
  .account-data { grid-template-columns: 1fr; gap: 6px; }
  .account-data dd { margin-bottom: 12px; }
}

.kiosk-active .profile-menu { display: none; }

.moqio-quickstart form>svg{display:block;width:min(220px,100%);height:auto;margin:16px auto}.moqio-quickstart button[aria-pressed="true"]{outline:2px solid var(--pb-accent)}

/* Fit physical-size and pixel-size designs into their screen preview. */
#eventStripCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(110px,100%),1fr));gap:12px;min-width:0;width:100%;align-items:start}
#eventStripCards>.btn{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%!important;min-width:0;max-width:100%;height:auto;padding:10px;box-sizing:border-box;overflow:hidden;white-space:normal}
#eventStripCards>.btn>svg{display:block;width:100%;height:140px;max-width:100%;flex:none}
#eventStripCards>.btn>span{display:block;max-width:100%;overflow-wrap:anywhere;line-height:1.35}
#eventStripPreview{width:100%;max-width:220px;min-width:0;margin:16px auto;overflow:hidden}
#eventStripPreview>svg{display:block;width:100%;max-width:100%;height:auto}
/* Compact Booth settings and device-specific offline readiness. */
.screen-text-summary{display:block;margin-top:4px;color:var(--pb-muted);font-size:.875rem;font-weight:400}
.offline-highlight{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;margin:16px 0;border:1px solid var(--pb-border);border-radius:12px;background:var(--pb-surface)}
.offline-highlight p{margin:6px 0 0;font-size:.875rem;line-height:1.5;color:var(--pb-muted)}
.offline-highlight[data-ready=true]{border-color:var(--pb-success)}
.offline-highlight .btn{flex-shrink:0}
.event-offline-badge{font-size:.8rem;line-height:1.4;color:var(--pb-muted)}
.event-offline-badge[data-ready=true]{color:var(--pb-success)}
@media(max-width:600px){.offline-highlight{align-items:stretch;flex-direction:column}.offline-highlight .btn{align-self:flex-start}.event-head{flex-wrap:wrap}}