body.design-study {
    overflow: hidden;
    --input-text-color: #fffffe;
    --input-placeholder-color: #fffffe;
}



.design-study #builtin-overlay {
    z-index: 20;
}

.desktop-mode-access,
.mobile-mode-access,
.preview-mode-access {
    position: fixed;
    top: calc(var(--overlay-bottom-anchor) + var(--overlay-link-offset-below-shell, 4vh));
    left: calc((100vw - min(var(--overlay-width), var(--overlay-max-width))) / 2);
    z-index: 19;
    display: none;
    max-width: min(var(--overlay-width), var(--overlay-max-width));
    color: rgba(255, 255, 255, 0.88);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
}

#builtin-overlay[data-active-view="input"] ~ .shell-mode-access {
    display: inline;
}

.desktop-mode-access:hover,
.mobile-mode-access:hover,
.preview-mode-access:hover {
    color: #ffffff;
    text-decoration: underline;
}

.extract-design-view {
    min-height: 0;
}

.design-stage {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}

.design-stage-block {
    display: grid;
    gap: 10px;
    transform-origin: top center;
    transition: opacity 320ms ease, transform 320ms ease, max-height 320ms ease, margin 320ms ease, padding 320ms ease;
}

.design-state-label {
    color: rgba(255, 255, 255, 0.48);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-inline: var(--overlay-section-label-inline-offset, 4px);
}

.state-input .design-state-label {
    font-size: calc(11px * var(--overlay-input-state-label-scale, 1.25));
}

.convert-surface {
    min-height: 0;
    height: var(--input-text-viewport-height);
    max-height: var(--input-text-viewport-max-height);
    padding: 14px var(--input-text-content-padding-inline, 16px) 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: #2c2a29;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
    transition: transform 320ms ease, opacity 320ms ease;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.status-section--inline {
    display: none;
    margin-bottom: 0;
}

.status-section--inline .status-message {
    margin-top: 0;
}

.status-section--inline .perf-indicator {
    display: none;
}

.convert-display {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    color: var(--input-text-color);
    font-family: inherit;
    font-weight: 400;
    font-size: var(--input-text-font-size);
    line-height: 1.55;
    letter-spacing: 0.01em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
}

.input-error {
    display: none;
    color: rgba(248, 113, 113, 0.96);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    letter-spacing: 0.03em;
    padding-inline: 4px;
}

.input-error.is-visible {
    display: block;
}

.clean-offset {
    display: none;
    min-height: 52px;
    padding: 0 26px;
    margin-left: 18px;
    align-self: start;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.18);
    background: rgba(251, 191, 36, 0.12);
    color: var(--brand-gold);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
}

.state-convert {
    opacity: 0;
    transform: translateY(22px);
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
    display: none;
}

/* data-input-mode state machine — input mode (default) */
#builtin-overlay[data-input-mode="input"] .state-input {
    opacity: 1;
    transform: translateY(0);
    max-height: 320px;
    pointer-events: auto;
}

/* data-input-mode state machine — text / url modes */
#builtin-overlay[data-input-mode="text"] .state-input,
#builtin-overlay[data-input-mode="url"] .state-input {
    opacity: 1;
    transform: translateY(0);
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

#builtin-overlay[data-input-mode="text"] .state-convert,
#builtin-overlay[data-input-mode="url"] .state-convert {
    opacity: 1;
    transform: translateY(0);
    max-height: none;
    min-height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    display: grid;
}

#builtin-overlay[data-input-mode="url"] .clean-offset {
    display: none;
}

#builtin-overlay[data-input-mode="url"][data-url-return-phase="pending"] .status-section--inline {
    display: block;
}

#builtin-overlay[data-input-mode="url"][data-url-return-phase="pending"] .state-convert .convert-surface {
    display: none;
}

/* Reader shells: reserve space for mode-switch link below overlay */
html[data-shell-variant="desktop"]:has(#builtin-overlay[data-active-view="input"]),
html[data-shell-variant="mobile"]:has(#builtin-overlay[data-active-view="input"]),
html[data-shell-variant^="preview"]:has(#builtin-overlay[data-active-view="input"]) {
    --reader-input-link-reserve: calc(var(--overlay-link-offset-below-shell, 3vh) + 1.5em);
}

.state-pills {
    flex: 0 0 auto;
}

/* Expanded input layout — text/url modes (desktop, mobile, preview) */
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"],
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"],
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"],
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"],
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="text"],
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] {
    height: var(--reader-input-expanded-overlay-height);
    max-height: var(--reader-input-expanded-overlay-height);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-content,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-content,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-content,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-content,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-content,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-body,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-body,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-body,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-body,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-body,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-main,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-main,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-main,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-main,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-main,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-main,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] #inputView,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] #inputView,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] #inputView,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] #inputView,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] #inputView,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] #inputView,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .view-panel.input-view,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .view-panel.input-view,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .view-panel.input-view,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .view-panel.input-view,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .view-panel.input-view,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .view-panel.input-view {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .design-stage,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .design-stage,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .design-stage,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .design-stage,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .design-stage,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .design-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 14px;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .design-stage > .state-input,
html[data-shell-variant="desktop"] .design-stage > .state-pills,
html[data-shell-variant="mobile"] .design-stage > .state-input,
html[data-shell-variant="mobile"] .design-stage > .state-pills,
html[data-shell-variant^="preview"] .design-stage > .state-input,
html[data-shell-variant^="preview"] .design-stage > .state-pills {
    flex: 0 0 auto;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] .state-convert,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] .state-convert,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] .state-convert,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] .state-convert,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="text"] .state-convert,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="url"] .state-convert {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] .convert-surface,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] .convert-surface,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] .convert-surface,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] .convert-surface,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="text"] .convert-surface,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="url"] .convert-surface {
    flex: 1 1 0;
    min-height: 0;
    height: unset;
    max-height: none;
    overflow: hidden;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] .convert-surface #charCounter,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] .convert-surface #charCounter,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] .convert-surface #charCounter,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] .convert-surface #charCounter,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="text"] .convert-surface #charCounter,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="url"] .convert-surface #charCounter {
    flex: 0 0 auto;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] #inputView #textInput,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] #inputView #textInput,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] #inputView #textInput,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] #inputView #textInput,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="text"] #inputView #textInput,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="url"] #inputView #textInput {
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    max-height: none;
    overflow-y: auto;
    resize: none;
    field-sizing: fixed;
}

/* Preview shell: viewport-bounded layout, flex-fill preview, and user resize */
html[data-shell-variant^="preview"] {
    --preview-link-reserve: 0px;
    --preview-overlay-height: var(--reader-input-expanded-overlay-height);
    --overlay-bottom-anchor: calc(var(--overlay-shell-anchor-top) + var(--preview-overlay-height));
}

html[data-shell-variant^="preview"]:has(#builtin-overlay[data-active-view="input"]) {
    --preview-link-reserve: var(--reader-input-link-reserve);
}

html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="input"] {
    height: auto;
    max-height: var(--preview-overlay-height);
    grid-template-rows: auto auto auto;
}

html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="input"] .overlay-body {
    grid-template-rows: auto auto;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="input"] .design-stage,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="input"] .design-stage,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"][data-input-mode="input"] .design-stage {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 14px;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"] .overlay-actions,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"] .overlay-actions,
html[data-shell-variant^="preview"] .builtin-overlay[data-active-view="input"] .overlay-actions {
    flex: 0 0 auto;
}

html[data-shell-variant^="preview"] .state-convert .design-state-label {
    font-size: calc(11px * var(--overlay-input-state-label-scale, 1.25));
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] .state-input,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] .state-input,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] .state-input,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] .state-input,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="text"] .state-input,
html[data-shell-variant^="preview"] #builtin-overlay[data-input-mode="url"] .state-input {
    display: none;
}

html[data-shell-variant^="preview"] #builtin-overlay[data-has-text="true"] #generateBtn {
    flex: 0 0 auto;
    min-height: 144px;
    margin-top: 0;
}

/* Preview shell: hero button (sibling in .design-stage) */
.preview-input-hero {
    width: 100%;
    min-height: 96px;
    flex: 0 0 auto;
}

.preview-input-hero .btn-label {
    font-size: clamp(24px, 4vw, var(--overlay-primary-action-label-font-size));
}

/* Preview shell: reverse inactive/hover on dock pills and hero button */
html[data-shell-variant^="preview"] .input-option-pill {
    border-color: var(--input-dock-pill-hover-border-color);
    background: var(--input-dock-pill-hover-background);
    color: var(--input-dock-pill-hover-text-color);
    box-shadow: var(--input-dock-pill-hover-shadow);
}

html[data-shell-variant^="preview"] .input-option-pill:hover {
    border-color: var(--input-dock-pill-border-color);
    background: var(--input-dock-pill-background);
    color: var(--input-dock-pill-text-color);
    box-shadow: none;
    transform: none;
}

html[data-shell-variant^="preview"] .input-option-pill:active {
    border-color: var(--input-dock-pill-border-color);
    background: var(--input-dock-pill-background);
    color: var(--input-dock-pill-text-color);
    box-shadow: none;
    transform: scale(0.98) translateY(1px);
}

html[data-shell-variant^="preview"] .input-option-pill.is-on {
    background: rgba(251, 191, 36, 0.08);
    border-color: var(--reader-selection-border-color, rgba(251, 191, 36, 0.75));
    color: var(--brand-gold, #FBBF24);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

html[data-shell-variant^="preview"] .input-option-pill.is-on:hover {
    background: var(--overlay-title-filled-inactive-background, rgba(251, 191, 36, 0.05));
    border-color: var(--reader-selection-border-color, rgba(251, 191, 36, 0.75));
    color: var(--reader-selection-text-color, var(--brand-gold, #FBBF24));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transform: none;
}

html[data-shell-variant^="preview"] .input-option-pill.is-on:active {
    background: var(--overlay-title-filled-inactive-background, rgba(251, 191, 36, 0.05));
    border-color: var(--reader-selection-border-color, rgba(251, 191, 36, 0.75));
    color: var(--reader-selection-text-color, var(--brand-gold, #FBBF24));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transform: scale(0.98) translateY(1px);
}

html[data-shell-variant^="preview"] .input-option-pill.alt-selected {
    border-color: var(--input-dock-pill-hover-border-color);
    background: var(--input-dock-pill-hover-background);
    color: var(--input-dock-pill-hover-text-color);
    box-shadow: var(--input-dock-pill-hover-shadow);
}

html[data-shell-variant^="preview"] .input-option-pill.alt-selected:hover,
html[data-shell-variant^="preview"] .input-option-pill.alt-selected:active {
    background: var(--input-dock-pill-toggle-inactive-background);
    border-color: var(--input-dock-pill-toggle-inactive-border-color);
    color: var(--input-dock-pill-toggle-inactive-text-color);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transform: scale(0.98) translateY(1px);
}

html[data-shell-variant^="preview"] .overlay-primary-action.generate-state:not(:disabled) {
    background: linear-gradient(135deg, #c6880e 0%, #d1921f 100%);
    border-color: #ac7610;
    box-shadow: 0 4px 16px rgba(213, 154, 18, 0.2);
}

html[data-shell-variant^="preview"] .overlay-primary-action.generate-state:hover:not(:disabled) {
    background: linear-gradient(135deg, #d78c0c 0%, #c97e20 100%);
    border-color: #a86b18;
    box-shadow: 0 8px 32px rgba(213, 154, 18, 0.25), 0 0 0 1px rgba(251, 191, 36, 0.1), 0 4px 12px rgba(0, 0, 0, 0.3);
}

html[data-shell-variant^="preview"] .overlay-primary-action.generate-state.is-pressed {
    background: linear-gradient(135deg, #d78c0c 0%, #c97e20 100%);
    border-color: #a86b18;
    transform: scale(0.96) translateY(1px);
    box-shadow: 0 8px 32px rgba(213, 154, 18, 0.25), 0 0 0 1px rgba(251, 191, 36, 0.1), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.06s, border-color 0.06s, transform 0.07s, box-shadow 0.07s;
}

.preview-only-clean-action {
    order: 15;
}

/* Unified keyboard focus ring — brand gold across overlay shell controls */
.shell-mode-access:focus,
.desktop-mode-access:focus,
.mobile-mode-access:focus,
.preview-mode-access:focus,
#builtin-overlay :is(
    a[href],
    input:not(.overlay-title-input),
    textarea,
    select,
    .progress-segment,
    [tabindex]:not([tabindex="-1"]):not(button)
):focus {
    outline: none;
}

.shell-mode-access:focus-visible,
.desktop-mode-access:focus-visible,
.mobile-mode-access:focus-visible,
.preview-mode-access:focus-visible,
#builtin-overlay :is(
    a[href],
    input:not(.overlay-title-input),
    textarea,
    select,
    .progress-segment,
    [tabindex]:not([tabindex="-1"]):not(button)
):focus-visible {
    outline: var(--overlay-focus-ring-width, 2px) solid var(--overlay-focus-ring-color, rgba(251, 191, 36, 0.9));
    outline-offset: var(--overlay-focus-ring-offset, 2px);
}

/* Inset focus ring on buttons — outward outlines get clipped by overflow:hidden
   ancestors (e.g. .design-stage, .overlay-actions) and by overflow:hidden on .generate-btn.
   Tab-order controls are buttons with tabindex=0; they must not also match the outer-ring
   [tabindex]:focus-visible rule above. */
#builtin-overlay button:focus,
#builtin-overlay button:focus-visible {
    outline: none;
    position: relative;
}

#builtin-overlay button:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--overlay-focus-ring-width, 2px) var(--overlay-focus-ring-color, rgba(251, 191, 36, 0.9));
    pointer-events: none;
    z-index: 2;
}

#builtin-overlay .overlay-title-field:focus-within,
#builtin-overlay .overlay-title-input:focus,
#builtin-overlay .overlay-title-input:focus-visible,
#builtin-overlay .header-title-readout:focus,
#builtin-overlay .header-title-readout:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

#inputView .convert-surface:focus-within {
    outline: none;
    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.3),
        inset 0 0 0 var(--overlay-focus-ring-width, 2px) var(--overlay-focus-ring-color, rgba(251, 191, 36, 0.9));
}

#inputView .convert-surface:focus-within #textInput:focus,
#inputView .convert-surface:focus-within #textInput:focus-visible {
    outline: none;
}