/*
 * Shared Story layout contract.
 *
 * Both the real Capacitor composer/viewer and the admin preview consume these
 * tokens. Keep device geometry here so the two surfaces cannot silently drift.
 */
.story-capacitor-layout-contract {
  --story-cap-layout-canvas-background: #000000;
  /* Canonical iPhone portrait viewport used only to scale the admin preview. */
  --story-cap-layout-preview-viewport-aspect-ratio: 440 / 956;
  --story-cap-layout-normal-media-fit: cover;
  --story-cap-layout-special-media-fit: cover;
  --story-cap-layout-special-frame-top: 46%;
  --story-cap-layout-special-frame-height: min(64%, 600px);
  --story-cap-layout-special-frame-max-width: calc(100% - 48px);
  --story-cap-layout-special-frame-aspect-ratio: 9 / 16;
  --story-cap-layout-special-frame-radius: 18px;
  --story-cap-layout-theme-backdrop-shade: rgba(0, 0, 0, 0.26);

  /* Story ring geometry shared by the real Home/viewer and the admin preview. */
  --story-cap-layout-home-avatar-size: 74px;
  --story-cap-layout-home-ring-inset: -5px;
  --story-cap-layout-home-ring-width: 3px;
  --story-cap-layout-home-ring-glow-width: 2px;
  --story-cap-layout-viewer-avatar-size: 42px;
  --story-cap-layout-viewer-ring-inset: -4px;
  --story-cap-layout-viewer-ring-width: 2px;
  --story-cap-layout-viewer-ring-glow-width: 2px;

  --story-cap-layout-safe-top: 0px;
  --story-cap-layout-safe-right: 0px;
  --story-cap-layout-safe-bottom: 0px;
  --story-cap-layout-safe-left: 0px;

  --story-cap-layout-normal-trim-side-inset: 12px;
  --story-cap-layout-normal-trim-bottom-offset: 80px;
  --story-cap-layout-normal-trim-window-height: 66px;
  --story-cap-layout-normal-trim-track-height: 44px;
  --story-cap-layout-normal-trim-track-radius: 11px;
  --story-cap-layout-normal-trim-track-background: rgba(15, 23, 42, 0.82);
  --story-cap-layout-normal-trim-shade: rgba(2, 6, 23, 0.66);
  --story-cap-layout-normal-trim-selection-border-width: 2px;
  --story-cap-layout-normal-trim-selection-background: rgba(251, 191, 36, 0.05);
  --story-cap-layout-normal-trim-handle-top: -5px;
  --story-cap-layout-normal-trim-handle-width: 18px;
  --story-cap-layout-normal-trim-handle-height: 54px;
  --story-cap-layout-normal-trim-handle-radius: 7px;
  --story-cap-layout-normal-trim-handle-background: #fbbf24;
  --story-cap-layout-normal-trim-handle-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
  --story-cap-layout-normal-trim-handle-glyph-height: 22px;
  --story-cap-layout-normal-trim-meta-min-height: 16px;
  --story-cap-layout-normal-trim-meta-font-size: 10px;
  --story-cap-layout-normal-actions-side-inset: 12px;
  --story-cap-layout-normal-actions-bottom-offset: 28px;
  --story-cap-layout-normal-theme-button-size: 52px;
  --story-cap-layout-normal-theme-button-radius: 15px;
  --story-cap-layout-normal-publish-min-height: 42px;
  --story-cap-layout-normal-theme-teaser-bottom: 62px;
  --story-cap-layout-normal-theme-teaser-max-width: 260px;
  --story-cap-layout-normal-picker-side-inset: 12px;
  --story-cap-layout-normal-picker-bottom-offset: 80px;
  --story-cap-layout-normal-picker-min-height: 66px;
  --story-cap-layout-normal-picker-background: rgba(15, 23, 42, 0.96);

  --story-cap-layout-special-trim-side-inset: 16px;
  --story-cap-layout-special-trim-bottom-offset: 84px;
  --story-cap-layout-special-trim-window-height: 52px;
  --story-cap-layout-special-trim-track-height: 36px;
  --story-cap-layout-special-trim-track-radius: 10px;
  --story-cap-layout-special-trim-track-background: rgba(2, 6, 23, 0.58);
  --story-cap-layout-special-trim-shade: rgba(2, 6, 23, 0.52);
  --story-cap-layout-special-trim-selection-border-width: 1px;
  --story-cap-layout-special-trim-selection-background: rgba(251, 191, 36, 0.035);
  --story-cap-layout-special-trim-handle-top: -4px;
  --story-cap-layout-special-trim-handle-width: 34px;
  --story-cap-layout-special-trim-handle-height: 44px;
  --story-cap-layout-special-trim-handle-radius: 999px;
  --story-cap-layout-special-trim-handle-background: transparent;
  --story-cap-layout-special-trim-handle-shadow: none;
  --story-cap-layout-special-trim-handle-visible-width: 12px;
  --story-cap-layout-special-trim-handle-glyph-height: 16px;
  --story-cap-layout-special-trim-meta-min-height: 12px;
  --story-cap-layout-special-trim-meta-font-size: 9px;
  --story-cap-layout-special-actions-side-inset: 16px;
  --story-cap-layout-special-actions-bottom-offset: 28px;
  --story-cap-layout-special-theme-button-size: 52px;
  --story-cap-layout-special-theme-button-radius: 15px;
  --story-cap-layout-special-publish-min-height: 44px;
  --story-cap-layout-special-theme-teaser-bottom: 62px;
  --story-cap-layout-special-theme-teaser-max-width: 260px;
  --story-cap-layout-special-picker-side-inset: 12px;
  --story-cap-layout-special-picker-bottom-offset: 84px;
  --story-cap-layout-special-picker-min-height: 62px;
  --story-cap-layout-special-picker-background: rgba(8, 15, 30, 0.84);

  --story-cap-layout-active-media-fit: var(--story-cap-layout-normal-media-fit);
  --story-cap-layout-active-trim-side-inset: var(--story-cap-layout-normal-trim-side-inset);
  --story-cap-layout-active-trim-bottom-offset: var(--story-cap-layout-normal-trim-bottom-offset);
  --story-cap-layout-active-trim-window-height: var(--story-cap-layout-normal-trim-window-height);
  --story-cap-layout-active-trim-track-height: var(--story-cap-layout-normal-trim-track-height);
  --story-cap-layout-active-trim-track-radius: var(--story-cap-layout-normal-trim-track-radius);
  --story-cap-layout-active-trim-track-background: var(--story-cap-layout-normal-trim-track-background);
  --story-cap-layout-active-trim-shade: var(--story-cap-layout-normal-trim-shade);
  --story-cap-layout-active-trim-selection-border-width: var(--story-cap-layout-normal-trim-selection-border-width);
  --story-cap-layout-active-trim-selection-background: var(--story-cap-layout-normal-trim-selection-background);
  --story-cap-layout-active-trim-handle-top: var(--story-cap-layout-normal-trim-handle-top);
  --story-cap-layout-active-trim-handle-width: var(--story-cap-layout-normal-trim-handle-width);
  --story-cap-layout-active-trim-handle-height: var(--story-cap-layout-normal-trim-handle-height);
  --story-cap-layout-active-trim-handle-radius: var(--story-cap-layout-normal-trim-handle-radius);
  --story-cap-layout-active-trim-handle-background: var(--story-cap-layout-normal-trim-handle-background);
  --story-cap-layout-active-trim-handle-shadow: var(--story-cap-layout-normal-trim-handle-shadow);
  --story-cap-layout-active-trim-handle-glyph-height: var(--story-cap-layout-normal-trim-handle-glyph-height);
  --story-cap-layout-active-trim-meta-min-height: var(--story-cap-layout-normal-trim-meta-min-height);
  --story-cap-layout-active-trim-meta-font-size: var(--story-cap-layout-normal-trim-meta-font-size);
  --story-cap-layout-active-actions-side-inset: var(--story-cap-layout-normal-actions-side-inset);
  --story-cap-layout-active-actions-bottom-offset: var(--story-cap-layout-normal-actions-bottom-offset);
  --story-cap-layout-active-theme-button-size: var(--story-cap-layout-normal-theme-button-size);
  --story-cap-layout-active-theme-button-radius: var(--story-cap-layout-normal-theme-button-radius);
  --story-cap-layout-active-publish-min-height: var(--story-cap-layout-normal-publish-min-height);
  --story-cap-layout-active-theme-teaser-bottom: var(--story-cap-layout-normal-theme-teaser-bottom);
  --story-cap-layout-active-theme-teaser-max-width: var(--story-cap-layout-normal-theme-teaser-max-width);
  --story-cap-layout-active-picker-side-inset: var(--story-cap-layout-normal-picker-side-inset);
  --story-cap-layout-active-picker-bottom-offset: var(--story-cap-layout-normal-picker-bottom-offset);
  --story-cap-layout-active-picker-min-height: var(--story-cap-layout-normal-picker-min-height);
  --story-cap-layout-active-picker-background: var(--story-cap-layout-normal-picker-background);
}

.story-capacitor-layout-contract:is(.home-story-preview-modal--special-theme, .is-special-theme) {
  --story-cap-layout-active-media-fit: var(--story-cap-layout-special-media-fit);
  --story-cap-layout-active-trim-side-inset: var(--story-cap-layout-special-trim-side-inset);
  --story-cap-layout-active-trim-bottom-offset: var(--story-cap-layout-special-trim-bottom-offset);
  --story-cap-layout-active-trim-window-height: var(--story-cap-layout-special-trim-window-height);
  --story-cap-layout-active-trim-track-height: var(--story-cap-layout-special-trim-track-height);
  --story-cap-layout-active-trim-track-radius: var(--story-cap-layout-special-trim-track-radius);
  --story-cap-layout-active-trim-track-background: var(--story-cap-layout-special-trim-track-background);
  --story-cap-layout-active-trim-shade: var(--story-cap-layout-special-trim-shade);
  --story-cap-layout-active-trim-selection-border-width: var(--story-cap-layout-special-trim-selection-border-width);
  --story-cap-layout-active-trim-selection-background: var(--story-cap-layout-special-trim-selection-background);
  --story-cap-layout-active-trim-handle-top: var(--story-cap-layout-special-trim-handle-top);
  --story-cap-layout-active-trim-handle-width: var(--story-cap-layout-special-trim-handle-width);
  --story-cap-layout-active-trim-handle-height: var(--story-cap-layout-special-trim-handle-height);
  --story-cap-layout-active-trim-handle-radius: var(--story-cap-layout-special-trim-handle-radius);
  --story-cap-layout-active-trim-handle-background: var(--story-cap-layout-special-trim-handle-background);
  --story-cap-layout-active-trim-handle-shadow: var(--story-cap-layout-special-trim-handle-shadow);
  --story-cap-layout-active-trim-handle-glyph-height: var(--story-cap-layout-special-trim-handle-glyph-height);
  --story-cap-layout-active-trim-meta-min-height: var(--story-cap-layout-special-trim-meta-min-height);
  --story-cap-layout-active-trim-meta-font-size: var(--story-cap-layout-special-trim-meta-font-size);
  --story-cap-layout-active-actions-side-inset: var(--story-cap-layout-special-actions-side-inset);
  --story-cap-layout-active-actions-bottom-offset: var(--story-cap-layout-special-actions-bottom-offset);
  --story-cap-layout-active-theme-button-size: var(--story-cap-layout-special-theme-button-size);
  --story-cap-layout-active-theme-button-radius: var(--story-cap-layout-special-theme-button-radius);
  --story-cap-layout-active-publish-min-height: var(--story-cap-layout-special-publish-min-height);
  --story-cap-layout-active-theme-teaser-bottom: var(--story-cap-layout-special-theme-teaser-bottom);
  --story-cap-layout-active-theme-teaser-max-width: var(--story-cap-layout-special-theme-teaser-max-width);
  --story-cap-layout-active-picker-side-inset: var(--story-cap-layout-special-picker-side-inset);
  --story-cap-layout-active-picker-bottom-offset: var(--story-cap-layout-special-picker-bottom-offset);
  --story-cap-layout-active-picker-min-height: var(--story-cap-layout-special-picker-min-height);
  --story-cap-layout-active-picker-background: var(--story-cap-layout-special-picker-background);
}