/* TavernWall v6.3.27 Full Profile Theme + Defaults */

/* Make theme controls clearly actionable */
.theme-default-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.theme-default-actions .secondary {
    min-width: 170px;
}

/* Theme preview should show a stronger example of what changes */
.profile-theme-editor {
    border-color: color-mix(in srgb, var(--profile-accent), #ffd955 25%) !important;
}

.theme-preview-card {
    min-height: 130px;
}

/* These variables are set inline on profile.php */
.page-shell .profile-theme-shell,
.profile-theme-shell {
    --tw-profile-bg: var(--tw-profile-bg, #2b2b2b);
    --tw-profile-accent: var(--tw-profile-accent, #8b6f4e);
}

/* Stronger profile-wide application */
body:has(.profile-theme-shell) {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--tw-profile-accent), transparent 82%), transparent 34%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--tw-profile-bg), #000 35%), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--tw-profile-bg), #000 18%), #120805) !important;
}

.profile-theme-shell .card,
.profile-theme-shell.card {
    border-color: color-mix(in srgb, var(--tw-profile-accent), #ffd955 22%) !important;
}

.profile-theme-shell .profile-banner,
.profile-theme-shell .profile-header,
.profile-theme-shell .profile-hero,
.profile-theme-shell .hall-header {
    border-color: color-mix(in srgb, var(--tw-profile-accent), #ffd955 20%) !important;
}

.profile-theme-shell a:not(.button):not(.mini-button) {
    color: #ffd955;
}

.profile-theme-shell .muted {
    color: color-mix(in srgb, #e0d4b0, var(--tw-profile-accent) 14%) !important;
}

/* If browser does not support :has, inline style in profile.php still applies broad .page-shell rules. */

/* Color inputs stay readable */
.theme-control input[type="color"],
input[name="theme_bg"],
input[name="theme_accent"] {
    height: 48px !important;
    min-height: 48px !important;
    cursor: pointer;
}

@media (max-width: 620px) {
    .theme-default-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .theme-default-actions .secondary {
        width: 100%;
    }
}