@tailwind base;
@tailwind components;
@tailwind utilities;

iframe {
    border-radius: 1rem;
}

/* Still the theme detail page's screenshots; the theme list renders live frames now. */
.desktop-preview {
    height: 500px;
    width: 90%;
    border-radius: 1rem;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.mobile-preview {
    height: 26rem;
    width: 13rem;
    bottom: -1.5rem;
    right: 1rem;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    border-radius: 1rem;
    --tw-shadow: 0 10px 15px rgb(0 0 0 / 10%);
    --tw-shadow-colored: 0 10px 15px rgb(0 0 0 / 10%);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.theme-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-store__desktop-view {
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    height: 0;
    overflow: hidden;
    padding-bottom: 120%;
    --tw-shadow: 0 10px 15px rgb(0 0 0 / 10%);
    --tw-shadow-colored: 0 10px 15px rgb(0 0 0 / 10%);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    width: 90%;
}

.theme-store__mobile-view {
    display: flex;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: hsla(var(--bg-sidebar), 1);
    border-radius: 0.5rem;
    height: 12rem;
    padding: 1rem .375rem;
    position: absolute;
    bottom: 6rem;
    right: 0;
    --tw-shadow: 0 10px 15px rgb(0 0 0 / 10%);
    --tw-shadow-colored: 0 10px 15px rgb(0 0 0 / 10%);
    width: 8rem;
}

.theme-store__mobile-view img {
    border-radius: .5rem;
}

/*
 * ---------------------------------------------------------------------------
 * The AI storefront builder
 * ---------------------------------------------------------------------------
 *
 * Written out longhand rather than as Tailwind utilities in the Blade, because the panel
 * serves Filament's own prebuilt stylesheet and nothing in this application scans Blade
 * for class names. A utility written in a view here is text that no rule matches: only
 * the classes Filament happens to use itself survive, which is a trap disguised as a
 * working page. Everything the builder needs is therefore defined here.
 *
 * Semantic colours come from the variables Filament writes into the document head, with
 * a literal fallback first for the ones it only emits when a panel registers them.
 */

.builder {
    display: grid;
    align-items: start;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .builder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .builder {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The question ---------------------------------------------------------- */

.builder-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(var(--primary-600), 0.15);
    background-color: #fff;
    background-image: linear-gradient(to bottom, rgba(var(--primary-500), 0.09), rgba(255, 255, 255, 0));
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

:is(.dark) .builder-form {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(var(--gray-900));
    background-image: linear-gradient(to bottom, rgba(var(--primary-500), 0.12), rgba(255, 255, 255, 0));
}

.builder-form__intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.builder-form__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--primary-600));
}

:is(.dark) .builder-form__eyebrow {
    color: rgb(var(--primary-400));
}

.builder-form__heading {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    color: rgb(var(--gray-950));
}

.builder-form__lede,
.builder-form__label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

.builder-form__label {
    font-weight: 500;
    color: rgb(var(--gray-950));
}

:is(.dark) .builder-form__heading,
:is(.dark) .builder-form__label {
    color: #fff;
}

:is(.dark) .builder-form__lede {
    color: rgb(var(--gray-400));
}

.builder-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.builder-form__input {
    display: block;
    width: 100%;
    resize: vertical;
    border: 0;
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgb(var(--gray-950));
    outline: none;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
    transition: box-shadow 0.15s;
}

.builder-form__input::placeholder {
    color: rgb(var(--gray-400));
}

.builder-form__input:focus {
    box-shadow: 0 0 0 2px rgb(var(--primary-600));
}

.builder-form__input:disabled {
    opacity: 0.7;
}

:is(.dark) .builder-form__input {
    background-color: rgb(255 255 255 / 5%);
    color: #fff;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 20%);
}

.builder-form__count {
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--gray-400));
}

.builder-form__examples {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.builder-form__example {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 10%);
    background-color: rgb(255 255 255 / 70%);
    padding: 0.375rem 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--gray-600));
    transition: background-color 0.15s;
}

.builder-form__example:hover {
    background-color: #fff;
}

:is(.dark) .builder-form__example {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(255 255 255 / 5%);
    color: rgb(var(--gray-300));
}

:is(.dark) .builder-form__example:hover {
    background-color: rgb(255 255 255 / 10%);
}

.builder-form__submit {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(var(--gray-950));
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
    transition: background-color 0.15s, opacity 0.15s;
}

.builder-form__submit svg {
    height: 1rem;
    width: 1rem;
}

.builder-form__submit:hover:not(:disabled) {
    background-color: rgb(var(--gray-800));
}

.builder-form__submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

:is(.dark) .builder-form__submit {
    background-color: #fff;
    color: rgb(var(--gray-950));
}

:is(.dark) .builder-form__submit:hover:not(:disabled) {
    background-color: rgb(var(--gray-200));
}

.builder-form__error {
    border-radius: 0.5rem;
    background-color: rgba(var(--danger-500), 0.1);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #b91c1c;
    color: rgb(var(--danger-600));
}

/* What it is doing, while it does it ------------------------------------ */

.builder-steps {
    border-top: 1px solid rgb(0 0 0 / 5%);
    padding-top: 1rem;
}

:is(.dark) .builder-steps {
    border-top-color: rgb(255 255 255 / 10%);
}

.builder-steps__item {
    display: flex;
    gap: 0.75rem;
}

.builder-steps__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.builder-steps__dot {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #fff;
}

.builder-steps__dot svg {
    height: 0.75rem;
    width: 0.75rem;
}

.builder-steps__dot--completed {
    background-color: #22c55e;
    background-color: rgb(var(--success-500));
}

.builder-steps__dot--processing {
    background-color: rgb(var(--primary-500));
}

.builder-steps__dot--failed {
    background-color: #ef4444;
    background-color: rgb(var(--danger-500));
}

.builder-steps__dot--pending {
    border: 2px solid rgb(var(--gray-200));
    background-color: transparent;
}

:is(.dark) .builder-steps__dot--pending {
    border-color: rgb(255 255 255 / 10%);
}

.builder-steps__line {
    width: 1px;
    flex: 1 1 0%;
    margin: 0.25rem 0;
    background-color: rgb(var(--gray-200));
}

.builder-steps__line--completed {
    background-color: #22c55e;
    background-color: rgb(var(--success-500));
}

:is(.dark) .builder-steps__line {
    background-color: rgb(255 255 255 / 10%);
}

.builder-steps__body {
    min-width: 0;
    padding-bottom: 1rem;
}

.builder-steps__label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-400));
}

.builder-steps__label--processing {
    font-weight: 500;
    color: rgb(var(--gray-950));
}

.builder-steps__label--completed {
    color: rgb(var(--gray-600));
}

.builder-steps__label--failed {
    color: #dc2626;
    color: rgb(var(--danger-600));
}

:is(.dark) .builder-steps__label--processing {
    color: #fff;
}

:is(.dark) .builder-steps__label--completed {
    color: rgb(var(--gray-300));
}

.builder-steps__detail {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--gray-500));
}

/* The answers ----------------------------------------------------------- */

.design-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(0 0 0 / 5%);
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
    transition: box-shadow 0.15s;
}

.design-card:hover {
    box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
}

:is(.dark) .design-card {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(var(--gray-900));
}

/*
 * 4:5, so a card shows the top of a page rather than a letterbox strip of it. The frame
 * inside is laid out at a real desktop width and scaled to fit by the view -- the height
 * that fills this ratio at any scale is set alongside it, and the two move together.
 */
.design-card__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: rgb(var(--gray-50));
}

:is(.dark) .design-card__frame {
    background-color: rgb(255 255 255 / 5%);
}

.design-card__iframe {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    pointer-events: none;
    border: 0;
    border-radius: 0;
}

/*
 * The two things a merchant can do with a design, kept off the render until they reach
 * for it. Three cards' worth of permanent buttons would be six pieces of chrome sitting
 * on top of the only three things on the page worth looking at.
 */
.design-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem;
    background-image: linear-gradient(to top, rgb(0 0 0 / 45%), rgb(0 0 0 / 0%) 45%);
    opacity: 0;
    transition: opacity 0.15s;
}

.design-card:hover .design-card__hover,
.design-card__hover:focus-within {
    opacity: 1;
}

.design-card__action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    color: rgb(var(--gray-950));
    box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
    transition: transform 0.15s;
}

.design-card__action svg {
    height: 1rem;
    width: 1rem;
}

.design-card__action:hover:not(:disabled) {
    transform: translateY(-1px);
}

.design-card__action:disabled {
    opacity: 0.6;
}

.design-card__action--primary {
    background-color: rgb(var(--primary-600));
    color: #fff;
}

.design-card__state {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    text-align: center;
}

.design-card__state svg {
    height: 1.5rem;
    width: 1.5rem;
    color: #ef4444;
    color: rgb(var(--danger-500));
}

.design-card__state p {
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--gray-500));
}

.design-card__skeleton {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.design-card__skeleton span {
    display: block;
    border-radius: 0.375rem;
    background-color: rgb(var(--gray-100));
}

:is(.dark) .design-card__skeleton span {
    background-color: rgb(255 255 255 / 10%);
}

.design-card__skeleton-hero {
    height: 50%;
}

.design-card__skeleton-bar {
    height: 0.75rem;
}

.design-card__skeleton-bar--long {
    width: 66%;
}

.design-card__skeleton-bar--short {
    width: 50%;
}

.design-card__skeleton-row {
    display: grid;
    margin-top: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.design-card__skeleton-row span {
    height: 3rem;
}

/*
 * ---------------------------------------------------------------------------
 * The theme page
 * ---------------------------------------------------------------------------
 *
 * Same rule as the builder block above: written out longhand, because no Tailwind
 * utility written in a Blade file in this application resolves to anything.
 */

.theme-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.theme-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.theme-section__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    color: rgb(var(--gray-950));
}

:is(.dark) .theme-section__title {
    color: #fff;
}

/* The theme the store is serving ---------------------------------------- */

.active-theme {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(0 0 0 / 5%);
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

:is(.dark) .active-theme {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(var(--gray-900));
}

/*
 * The stage holds a whole storefront: a desktop render filling it, and a phone standing
 * on top at the right. Both are laid out at their real widths and scaled down, so the
 * merchant is looking at the two layouts a visitor gets rather than one narrow frame.
 */
.active-theme__stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 17 / 10;
    background-color: rgb(var(--gray-50));
}

:is(.dark) .active-theme__stage {
    background-color: rgb(255 255 255 / 5%);
}

.active-theme__stage iframe {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    pointer-events: none;
    border: 0;
    border-radius: 0;
}

.active-theme__mobile {
    position: absolute;
    right: 2.5rem;
    bottom: 5.5rem;
    width: 13rem;
    height: 24rem;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 0.375rem solid rgb(var(--gray-950));
    background-color: #fff;
    box-shadow: 0 18px 40px rgb(0 0 0 / 30%);
}

@media (max-width: 767px) {
    .active-theme__mobile {
        display: none;
    }
}

/* Sits over the render, so it needs its own darkness to stay readable on any theme. */
.active-theme__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 2.5rem 1.5rem 1rem;
    background-image: linear-gradient(to top, rgb(0 0 0 / 85%), rgb(0 0 0 / 0));
    color: #fff;
}

.active-theme__identity {
    min-width: 0;
    margin-right: auto;
}

.active-theme__domain {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.active-theme__meta {
    font-size: 0.8125rem;
    line-height: 1.125rem;
    opacity: 0.75;
}

.active-theme__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The ones installed but not serving ------------------------------------ */

.theme-list {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(0 0 0 / 5%);
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

:is(.dark) .theme-list {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(var(--gray-900));
}

.theme-list__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.theme-list__row + .theme-list__row {
    border-top: 1px solid rgb(0 0 0 / 5%);
}

:is(.dark) .theme-list__row + .theme-list__row {
    border-top-color: rgb(255 255 255 / 10%);
}

.theme-list__thumb {
    position: relative;
    flex-shrink: 0;
    width: 8.25rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 8%);
    background-color: rgb(var(--gray-50));
    background-size: cover;
    background-position: top center;
}

:is(.dark) .theme-list__thumb {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(255 255 255 / 5%);
}

.theme-list__thumb iframe {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    pointer-events: none;
    border: 0;
    border-radius: 0;
}

.theme-list__identity {
    min-width: 0;
}

.theme-list__name {
    font-weight: 600;
    color: rgb(var(--gray-950));
}

:is(.dark) .theme-list__name {
    color: #fff;
}

.theme-list__meta {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

.theme-list__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/*
 * Ask for one instead -----------------------------------------------------
 *
 * One panel that changes what it holds rather than three that replace each other: the
 * question, then the wait, then the answers, all under the sentence that produced them.
 * Sending the merchant to another page to watch would mean building the same three cards
 * twice, and would lose them the box they need to reach for when the designs miss.
 */

.ai-builder {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(0 0 0 / 5%);
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

:is(.dark) .ai-builder {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(var(--gray-900));
}

.ai-builder__ask {
    padding: 1.25rem 1.5rem;
}

.ai-builder__heading {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: rgb(var(--gray-950));
}

:is(.dark) .ai-builder__heading {
    color: #fff;
}

.ai-builder__lede {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

.ai-builder__credits {
    color: rgb(var(--gray-400));
}

.ai-builder__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.ai-builder__input {
    flex: 1 1 18rem;
    border: 0;
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgb(var(--gray-950));
    outline: none;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
    transition: box-shadow 0.15s;
}

.ai-builder__input::placeholder {
    color: rgb(var(--gray-400));
}

.ai-builder__input:focus {
    box-shadow: 0 0 0 2px rgb(var(--primary-600));
}

/* Mid-run the sentence is the build's, not the merchant's. */
.ai-builder__input:disabled {
    background-color: rgb(var(--gray-50));
    color: rgb(var(--gray-400));
}

:is(.dark) .ai-builder__input {
    background-color: rgb(255 255 255 / 5%);
    color: #fff;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 20%);
}

:is(.dark) .ai-builder__input:disabled {
    background-color: rgb(255 255 255 / 3%);
    color: rgb(var(--gray-500));
}

.ai-builder__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    /* Holds its width when the label becomes a spinner, so the row does not jump. */
    min-width: 7rem;
    border-radius: 0.5rem;
    background-color: rgb(var(--gray-950));
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.375rem;
    color: #fff;
    transition: background-color 0.15s, opacity 0.15s;
}

.ai-builder__submit svg {
    height: 1rem;
    width: 1rem;
}

.ai-builder__submit:hover:not(:disabled) {
    background-color: rgb(var(--gray-800));
}

.ai-builder__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

:is(.dark) .ai-builder__submit {
    background-color: #fff;
    color: rgb(var(--gray-950));
}

:is(.dark) .ai-builder__submit:hover:not(:disabled) {
    background-color: rgb(var(--gray-200));
}

/*
 * Where the work happens. The dot grid marks it as a canvas rather than more of the form
 * above it -- something is being made here, and the area keeps its shape whether it holds
 * a spinner or three storefronts.
 */
.ai-builder__stage {
    border-top: 1px solid rgb(0 0 0 / 5%);
    border-bottom: 1px solid rgb(0 0 0 / 5%);
    padding: 1.5rem;
    background-color: rgb(var(--gray-50));
    background-image: radial-gradient(rgb(0 0 0 / 10%) 1px, transparent 1px);
    background-size: 14px 14px;
    background-position: -7px -7px;
}

:is(.dark) .ai-builder__stage {
    border-top-color: rgb(255 255 255 / 10%);
    border-bottom-color: rgb(255 255 255 / 10%);
    background-color: rgb(255 255 255 / 2%);
    background-image: radial-gradient(rgb(255 255 255 / 12%) 1px, transparent 1px);
}

.ai-builder__designs {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .ai-builder__designs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ai-builder__designs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Said once, under everything the model made, rather than on each of the three. */
.ai-builder__footnote {
    padding: 0.875rem 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

/* The wait --------------------------------------------------------------- */

.ai-stage {
    display: flex;
    /* The height the three cards will occupy, so nothing jumps when they arrive. */
    min-height: 22rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.ai-stage__headline {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: rgb(var(--gray-950));
}

:is(.dark) .ai-stage__headline {
    color: #fff;
}

.ai-stage__detail {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

.ai-stage__warning {
    height: 1.75rem;
    width: 1.75rem;
    margin-bottom: 0.25rem;
    color: rgb(var(--danger-500));
}

/*
 * A ring with one quarter darkened, turning. Filament's own spinner is a form control's
 * size; this one is the only thing on a canvas for two minutes.
 */
.ai-stage__spinner {
    display: block;
    height: 2.5rem;
    width: 2.5rem;
    margin-bottom: 0.75rem;
    border-radius: 9999px;
    border: 3px solid rgb(0 0 0 / 8%);
    border-top-color: rgb(var(--gray-500));
    animation: ai-stage-spin 0.8s linear infinite;
}

:is(.dark) .ai-stage__spinner {
    border-color: rgb(255 255 255 / 12%);
    border-top-color: rgb(var(--gray-300));
}

.ai-builder__spinner--small {
    display: block;
    height: 1.125rem;
    width: 1.125rem;
    border-radius: 9999px;
    border: 2px solid rgb(255 255 255 / 30%);
    border-top-color: #fff;
    animation: ai-stage-spin 0.8s linear infinite;
}

:is(.dark) .ai-builder__spinner--small {
    border-color: rgb(0 0 0 / 25%);
    border-top-color: rgb(var(--gray-950));
}

@keyframes ai-stage-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The catalogue ---------------------------------------------------------- */

.store-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .store-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.store-card__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 0.75rem;
    border: 1px solid rgb(0 0 0 / 8%);
    background-color: #fff;
}

:is(.dark) .store-card__frame {
    border-color: rgb(255 255 255 / 10%);
    background-color: rgb(var(--gray-900));
}

.store-card__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/*
 * Held back until the pointer is on the card. A preview is worth offering on every one of
 * these and worth shouting on none of them -- five permanent buttons would compete with
 * the five screenshots they sit on, which are the actual thing being chosen between.
 */
.store-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / 35%);
    opacity: 0;
    transition: opacity 0.15s;
}

.store-card:hover .store-card__hover,
.store-card__hover:focus-within {
    opacity: 1;
}

.store-card__preview {
    border-radius: 9999px;
    background-color: #fff;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--gray-950));
    box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
    transition: transform 0.15s;
}

.store-card__preview:hover {
    transform: translateY(-1px);
}

.store-card__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

.store-card__name {
    font-weight: 600;
    line-height: 1.5rem;
    color: rgb(var(--gray-950));
}

:is(.dark) .store-card__name {
    color: #fff;
}

.store-card__author {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

/*
 * The buttons that are not Filament's.
 *
 * Used where a Filament action would be the wrong tool: a plain link to another
 * application, or a control sitting on top of a rendered storefront where the panel's
 * own palette has nothing to say about contrast.
 */
.theme-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 12%);
    background-color: #fff;
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(var(--gray-950));
    white-space: nowrap;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
    transition: background-color 0.15s, border-color 0.15s;
}

.theme-button:hover {
    background-color: rgb(var(--gray-50));
}

.theme-button svg {
    height: 1.125rem;
    width: 1.125rem;
}

:is(.dark) .theme-button {
    border-color: rgb(255 255 255 / 20%);
    background-color: rgb(255 255 255 / 5%);
    color: #fff;
}

:is(.dark) .theme-button:hover {
    background-color: rgb(255 255 255 / 10%);
}

/* No border, for the "…" that sits beside a bordered button. */
.theme-button--plain {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    padding: 0.4375rem 0.5rem;
}

.theme-button--plain:hover {
    background-color: rgb(var(--gray-100));
}

:is(.dark) .theme-button--plain {
    border-color: transparent;
    background-color: transparent;
}

/* On the dark bar over a storefront, where the panel's greys are invisible. */
.theme-button--light,
:is(.dark) .theme-button--light {
    border-color: transparent;
    background-color: #fff;
    color: rgb(var(--gray-950));
}

.theme-button--light:hover,
:is(.dark) .theme-button--light:hover {
    background-color: rgb(var(--gray-200));
}

.theme-button--ghost,
:is(.dark) .theme-button--ghost {
    border-color: rgb(255 255 255 / 35%);
    background-color: rgb(255 255 255 / 12%);
    color: #fff;
    padding: 0.4375rem 0.5rem;
}

.theme-button--ghost:hover,
:is(.dark) .theme-button--ghost:hover {
    background-color: rgb(255 255 255 / 25%);
}

.store-grid__error {
    grid-column: 1 / -1;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

.theme-button:disabled {
    cursor: default;
    opacity: 0.6;
}

.theme-button:disabled:hover {
    background-color: #fff;
}

:is(.dark) .theme-button:disabled:hover {
    background-color: rgb(255 255 255 / 5%);
}