/* UtaMemo's orange adaptation of Uzushio-sai2026's rounded visitor UI (sub).
   Shared tokens and controls; page layouts live in festival-pages.css. */
/* Warm ivory surfaces, clear terracotta actions and high-contrast ink.
   Visual references: todoist.com, papier.com, italic-studio.com/projects/headspace-rebrand/.
   Palette values below are UTAMEMO adaptations. */
:root {
    --brand-color: #e85d2a;
    --primary-color: #c94b27;
    --primary-dark: #ad391c;
    --primary-light: #ffc38f;
    --primary-soft: #fff0df;
    --secondary-color: #332721;
    --surface: #fffaf2;
    --surface-elevated: #ffffff;
    --surface-muted: #fff4e8;
    --text-primary: #332721;
    --text-secondary: #6f5849;
    --text-muted: #745f51;
    --border-color: #8f6a52;
    --border-light: #e4c6ad;
    --control-border: #ad8970;
    --action-color: #c94b27;
    --action-hover: #ad391c;
    --focus-ring: #ad391c;
    --focus-soft: #ffdcc1;
    --accent-peach: #ffe2c7;
    --accent-apricot: #ffd1a6;
    --accent-yellow: #fff0b3;
    --accent-yellow-ink: #695127;
    --shadow-color: #b68362;
    --surface-dark: #302620;
    --on-dark: #fff4e8;
    --art-ink: #6d4b34;
    --art-orange: #f78945;
    --art-orange-deep: #d75a28;
    --art-peach: #ffd9b5;
    --art-cream: #fffcf5;
    --art-yellow: #ffde83;
    --art-sage: #dce5bb;
    --art-leaf: #60743c;
    --art-shadow: #ebc9a5;
    --art-line: #b9916e;
    --art-record: #61412d;
    --primary-gradient: linear-gradient(135deg, var(--action-color), var(--action-hover));
    --primary-gradient-subtle: linear-gradient(135deg, var(--primary-soft), var(--surface));
    --action-gradient: linear-gradient(var(--action-color), var(--action-color));
    --secondary-gradient: linear-gradient(var(--text-primary), var(--text-primary));
    --dark-gradient: linear-gradient(var(--surface-dark), var(--surface-dark));
    /* Transparent zero-size shadows also work inside composed selection rings. */
    --shadow-xs: 0 0 0 0 transparent;
    --shadow-sm: 0 0 0 0 transparent;
    --shadow-md: 0 0 0 0 transparent;
    --shadow-lg: 0 0 0 0 transparent;
    --shadow-xl: 0 0 0 0 transparent;
    --shadow-glow: 0 0 0 0 transparent;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --font-heading: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Noto Sans JP', sans-serif;
    --font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Noto Sans JP', sans-serif;
    --success: #267346;
    --danger: #b33a30;
    --warning: #8c570c;
    --info: #6f5849;
    --bs-primary: var(--action-color);
    --bs-primary-rgb: 201, 75, 39;
    --bs-link-color: var(--primary-dark);
    --bs-link-hover-color: var(--text-primary);
    --bs-link-color-rgb: 173, 57, 28;
    --bs-link-hover-color-rgb: 51, 39, 33;
}
html { scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body.festival-ui {
    --festival-main-offset: 112px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface);
    background-attachment: fixed;
    padding-top: 0;
    animation: none;
    line-height: 1.75;
    min-height: 100dvh;
}
.festival-ui .container { max-width: 1080px; padding-inline: 24px; }
.festival-ui > main { margin-left: 0; padding-top: calc(var(--festival-main-offset) + env(safe-area-inset-top, 0px)) !important; min-height: 72vh; }
.festival-ui :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-weight: 900; letter-spacing: .015em; line-height: 1.5; }
.festival-ui :is(button, input, select, textarea) { font-family: inherit; }
.festival-ui :is(a, button, input, select, summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.festival-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.festival-ui ::selection { background: var(--primary-light); color: var(--text-primary); }
.festival-ui .text-gradient { background: none; color: var(--primary-dark); -webkit-text-fill-color: currentColor; }
.festival-ui .text-primary { color: var(--primary-dark) !important; }
.festival-ui .text-muted { color: var(--text-muted) !important; }
.festival-ui :is(.card, .card-modern, .modal-content, .list-group-item) { border: 2px solid var(--border-color) !important; border-radius: 22px !important; background: var(--surface-elevated); box-shadow: var(--shadow-md); }
.festival-ui .modal-content { overflow: hidden; }
.festival-ui :is(.modal-header, .modal-footer, .card-header, .card-footer) { border-color: var(--border-light); background: transparent; }
.festival-ui .modal-backdrop { background: var(--surface-dark); }
.festival-ui :is(.alert-modern, .alert) { border-radius: 16px; box-shadow: none; border-width: 1px; }
.festival-ui .alert-warning { background: #fff4da; color: #775006; border-color: #e6cc8b; }
.festival-ui .alert-info { background: var(--primary-soft); color: var(--border-color); border-color: var(--border-light); }
.festival-ui .alert-danger { background: #ffefeb; color: #9c332d; }
.festival-ui :is(.badge, .tag-badge, .queue-badge) { font-weight: 700; border-radius: 8px; letter-spacing: .01em; }

/* Uniform outlines; interaction feedback uses color, movement and focus rings. */
.festival-ui :is(.btn, .btn-gradient-primary, .btn-gradient-secondary, .btn-outline-modern,
    .btn-nav-login, .btn-nav-register, .btn-primary-modern, .btn-secondary-modern,
    .btn-create-song, .btn-create-first, .btn-empty-primary, .btn-empty-secondary,
    .btn-login, .btn-register, .create-btn, .join-btn, .submit-btn, .plan-btn, .checkout-btn,
    .up-btn, .action-btn-large, .btn-primary-large, .btn-secondary-large, .btn-privacy-save) {
    border: 2px solid var(--border-color) !important;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    min-height: 46px;
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.festival-ui :is(.btn-primary, .btn-gradient-primary, .btn-nav-register, .btn-primary-modern,
    .btn-create-song, .btn-create-first, .btn-empty-primary, .btn-login, .btn-register,
    .create-btn, .join-btn, .submit-btn, .checkout-btn, .up-btn-primary, .btn-primary-large,
    .btn-privacy-save) { background: var(--action-color); color: #fff !important; }
.festival-ui :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-modern,
    .btn-nav-login, .btn-secondary-modern, .btn-empty-secondary, .up-btn-ghost,
    .btn-secondary-large) { color: var(--text-primary) !important; background: var(--surface-elevated); }
.festival-ui :is(.btn-gradient-secondary, .btn-dark) { background: var(--text-primary); color: #fff; }
.festival-ui .btn-danger { border-color: #8d302a !important; box-shadow: none; }
.festival-ui .btn-link { border: 0 !important; background: transparent; box-shadow: none; color: var(--primary-dark); }
.festival-ui .btn-sm { min-height: 38px; padding: 7px 13px; border-radius: 12px; font-size: 13px; }
.festival-ui .btn-lg { min-height: 52px; padding: 13px 24px; font-size: 17px; }
@media (hover: hover) {
    .festival-ui :is(.btn, .btn-gradient-primary, .btn-gradient-secondary, .btn-outline-modern,
        .btn-nav-login, .btn-nav-register, .btn-create-song, .up-btn):hover:not(:disabled) {
        transform: translateY(-2px); box-shadow: none; filter: none;
    }
    .festival-ui :is(.btn-primary, .btn-gradient-primary, .btn-nav-register, .up-btn-primary):hover { background: var(--action-hover); }
}
.festival-ui :is(.btn, .btn-gradient-primary, .btn-gradient-secondary, .btn-outline-modern,
    .btn-nav-login, .btn-nav-register, .btn-create-song, .up-btn, .submit-btn):active:not(:disabled) {
    transform: translateY(3px); box-shadow: none;
}
.festival-ui :is(button:disabled, .btn.disabled) { cursor: not-allowed; opacity: .55; }
.festival-ui :is(.form-control, .form-select, .form-control-modern, .form-input,
    textarea, input[type='text'], input[type='email'], input[type='password'],
    input[type='search'], input[type='number'], input[type='date'], input[type='url']) {
    border: 2px solid var(--control-border); border-radius: 14px; background-color: var(--surface-elevated);
    color: var(--text-primary); box-shadow: none; padding: 12px 16px; font-size: 16px;
}
.festival-ui :is(.form-select, select.form-control) { padding-right: 42px; }
.festival-ui :is(.form-control, .form-select, .form-control-modern, textarea, input):focus {
    border-color: var(--primary-dark); box-shadow: 0 0 0 3px var(--focus-soft) !important;
}
.festival-ui :is(.form-control, textarea, input)::placeholder { color: var(--text-muted); opacity: 1; }
.festival-ui :is(.form-label, .form-label-modern) { font-weight: 700; color: var(--text-primary); }
.festival-ui .form-check-input:checked { border-color: var(--primary-dark); background-color: var(--primary-dark); }
.festival-ui input[type='range'] { accent-color: var(--action-color); }
.festival-ui .table { background: var(--surface-elevated); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); border-radius: 16px; }
.festival-ui .table thead th { background: var(--primary-soft); color: var(--text-primary); text-transform: none; }
.festival-ui .table :is(th, td) { border-color: var(--border-light); }

/* One floating header on both desktop and mobile, matching the visitor app. */
.festival-ui .navbar-modern.fixed-top,
.festival-ui .navbar-modern.fixed-top.banner-closed {
    top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    left: max(16px, calc((100vw - 1080px) / 2));
    right: max(16px, calc((100vw - 1080px) / 2));
    width: auto; height: auto; padding: 0; border: 2px solid var(--border-color);
    border-radius: 28px; background: var(--surface-elevated); box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; transition: none;
}
.festival-ui .navbar-modern > .container { max-width: none; min-height: 70px; padding: 10px 20px; gap: 16px; }
.festival-ui .navbar-brand-modern { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 900; font-size: 22px; letter-spacing: .015em; color: var(--brand-color); white-space: nowrap; margin: 0; padding: 0; }
.festival-ui .navbar-brand-modern:hover { color: var(--brand-color); }
.festival-ui .navbar-nav { gap: 5px; }
.festival-ui .nav-link-modern { display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; min-height: 44px; font-weight: 700; font-size: 14px; line-height: 1.4; border-radius: 14px; color: var(--text-primary); white-space: nowrap; }
.festival-ui .nav-link-modern::after { display: none; }
.festival-ui .nav-link-modern:hover { background: var(--primary-soft); color: var(--text-primary); }
.festival-ui .nav-link-modern[aria-current] { color: #fff; background: var(--action-color); box-shadow: none; }
.festival-ui .sidebar-create { color: var(--primary-dark); }
.festival-ui .sidebar-group-label { display: none !important; }
.festival-ui .nav-primary > li:has([data-nav-section='home']),
.festival-ui .nav-primary > li:has([data-nav-section='favorites']),
.festival-ui .nav-utilities > li:has(.sidebar-help) { display: none !important; }
.festival-ui .nav-utilities { margin-left: auto; gap: 8px; }
.festival-ui .nav-utilities > .nav-item { margin-right: 0 !important; }
.festival-ui .nav-utilities .mobile-usage-item { display: none; }
.festival-ui :is(.user-dropdown-btn, .language-dropdown-btn) { min-height: 44px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--surface); padding: 8px 12px; color: var(--text-primary); font-size: 13px; box-shadow: none; }
.festival-ui .language-globe { flex: 0 0 18px; width: 18px; height: 18px; }
.festival-ui .user-dropdown-btn { max-width: 145px; }
.festival-ui .user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.festival-ui :is(.language-switcher, .user-switcher) { position: relative; }
.festival-ui :is(.language-dropdown-menu, .user-dropdown-menu) { border: 2px solid var(--border-color); border-radius: 18px; background: var(--surface-elevated); box-shadow: none; padding: 8px; top: calc(100% + 12px); right: 0; left: auto; max-height: calc(100dvh - 150px); overflow-y: auto; }
.festival-ui :is(.language-option, .user-option) { min-height: 44px; border-radius: 12px; color: var(--text-primary); }
.festival-ui :is(.language-option, .user-option):hover,
.festival-ui .language-option.active { color: var(--text-primary); background: var(--primary-soft); }
.festival-ui .user-divider { background: var(--border-light); }
.festival-ui .nav-default-avatar { background: var(--accent-peach); color: var(--primary-dark); }
.festival-ui .usage-counter { background: var(--surface); border: 1px solid var(--border-light); box-shadow: none; border-radius: 12px; color: var(--text-primary); }
.festival-ui .navbar-toggler { border: 0; background: var(--accent-peach); border-radius: 50%; min-width: 44px; min-height: 44px; padding: 10px; box-shadow: none; }
.festival-ui .navbar-toggler-icon { width: 22px; height: 22px; }
.festival-ui .skip-link { z-index: 1100; left: 20px; background: var(--surface-elevated); color: var(--text-primary); border: 2px solid var(--border-color); }
.festival-ui .footer-modern { margin-left: 0; background: transparent; color: var(--text-secondary); border-top: 1px solid var(--border-light); padding: 40px 0 28px; box-shadow: none; }
.festival-ui .footer-modern::before { display: none; }
.festival-ui .footer-modern :is(h5, h6, .footer-link, .footer-description) { color: var(--text-secondary); }
.festival-ui .footer-modern h5.text-gradient { font-size: 24px; color: var(--brand-color); }
.festival-ui .footer-link:hover { color: var(--primary-dark); }
.festival-ui .footer-services li, .festival-ui .footer-account li { margin-bottom: 6px; }
.festival-ui .footer-description { font-size: 13px; }
.festival-ui .page-messages { margin-top: 8px; }
.festival-ui .account-page-title { font-size: 30px; text-align: center; margin: 0 0 24px; }
.festival-ui .fade-in { opacity: 1; transform: none; }

@media (min-width: 992px) and (max-width: 1150px) {
    .festival-ui .navbar-modern > .container { gap: 10px; padding-inline: 16px; }
    .festival-ui .nav-link-modern { padding-inline: 9px; font-size: 13px; }
    .festival-ui .nav-link-modern > .bi { display: none; }
    .festival-ui .desktop-language-switcher .lang-name { display: none; }
}
@media (max-width: 991.98px) {
    body.festival-ui { --festival-main-offset: 104px; }
    .festival-ui .navbar-modern > .container { gap: 0; min-height: 62px; padding: 8px 14px; }
    .festival-ui .navbar-brand-modern { font-size: 21px; }
    .festival-ui .mobile-language-switcher .language-dropdown-btn { padding: 7px 9px; min-height: 44px; background: transparent; border: 0; }
    .festival-ui .mobile-right-controls { margin-left: auto; }
    .festival-ui #navbarNav { margin-top: 10px; padding: 10px 2px 8px; border-top: 1px solid var(--border-light); max-height: calc(100dvh - 180px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
    .festival-ui #navbarNav .navbar-nav { width: 100%; }
    .festival-ui .nav-utilities { align-items: stretch !important; gap: 8px; }
    .festival-ui .nav-utilities > .nav-item { width: 100%; }
    .festival-ui .nav-utilities .mobile-usage-item { display: block; }
    .festival-ui .user-dropdown-menu { box-shadow: none; }
    .festival-ui.has-mobile-navigation .user-dropdown-menu { border: 0; padding: 0; background: transparent; border-radius: 0; }
    .festival-ui :is(.btn-nav-login, .btn-nav-register) { width: 100%; min-height: 46px; }
    .festival-ui .navbar-collapse .nav-link-modern { width: 100%; }
    .festival-ui .mobile-tab-bar { background: var(--surface-elevated); border-top: 2px solid var(--border-light); padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 7px; }
    .festival-ui .mobile-tab { font-family: var(--font-heading); min-height: 52px; font-weight: 700; border-radius: 16px; color: var(--text-secondary); border: 2px solid transparent; }
    .festival-ui .mobile-tab[aria-current] { border-color: var(--border-color); background: var(--action-color); color: #fff; box-shadow: none; }
    .festival-ui.has-mobile-navigation { --mobile-nav-offset: calc(77px + env(safe-area-inset-bottom, 0px)); }
    .festival-ui.has-mobile-navigation.mobile-keyboard-open { --mobile-nav-offset: 0px; }
    .festival-ui.has-mobile-navigation .footer-modern { background: transparent; }
    .festival-ui .footer-modern { padding-block: 28px; }
}
@media (max-width: 600px) {
    .festival-ui { font-size: 14px; }
    .festival-ui .container { padding-inline: 16px; }
    .festival-ui .navbar-modern.fixed-top, .festival-ui .navbar-modern.fixed-top.banner-closed { left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)) !important; border-radius: 32px; }
    .festival-ui .navbar-brand-modern { font-size: 20px; }
    body.festival-ui { --festival-main-offset: 96px; }
    .festival-ui .footer-brand { margin-bottom: 24px; }
}
@media (max-width: 360px) {
    .festival-ui .mobile-language-switcher .language-dropdown-btn { gap: 4px; padding-inline: 6px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .festival-ui *, .festival-ui *::before, .festival-ui *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
}