/*
 * Beginner-clarity type floor and location combobox.
 * This intentionally preserves the existing celestial palette and layout.
 */
body {
    font-size: 16px;
}

.primary-nav a,
.mobile-menu a,
.user-menu-btn,
.user-menu-dropdown a,
.login-cta {
    font-size: 14px;
}

.form-hint,
.field-error,
.generating-hint,
.location-status,
.pin-source,
.session-time,
.concept-help-trigger,
.back-link {
    font-size: 14px;
}

input,
select,
textarea,
button:not(.hamburger-btn):not(.notification-bell):not(.close-fullscreen):not(.concept-help-close):not(.concept-help-inline) {
    font-size: 16px;
}

/* Header brand width is reserved in base.html (flex: 0 0 auto + min-width:
   max-content). Do not reintroduce min-width: 0 here; it let the wordmark
   collapse into the first nav item at wide viewports. Login page still uses
   the class as a static title and is unconstrained. */
.brand-wordmark {
    max-width: none;
}

.birth-date-fields {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.birth-date-fields [hidden] {
    display: none !important;
}

.birth-date-fields legend {
    display: block;
    width: 100%;
    color: #e0e0e0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.birth-date-fields legend.required::after {
    content: ' *';
    color: #d4af37;
}

.birth-date-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 10px;
    min-width: 0;
}

.birth-date-part {
    min-width: 0;
}

.birth-date-part label {
    display: block;
    font-size: 14px;
}

.birth-date-part input {
    min-width: 0;
    width: 100%;
}

@media screen and (max-width: 360px) {
    .birth-date-grid {
        gap: 6px;
    }

    .birth-date-part input {
        padding-inline: 8px;
    }
}

.ic-widget .ic-control-label,
.ic-widget .ic-meaning-note strong {
    font-size: 14px;
}

.ic-widget .ic-select,
.ic-widget .ic-btn,
.ic-widget .ic-meaning-note {
    font-size: 16px;
}

.concept-help-close {
    font-size: 27px;
}

.reading-save-promise {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 0 0 22px;
    padding: 12px 16px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 9px;
    background: rgba(212, 175, 55, 0.07);
    color: #ded4e8;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    line-height: 1.5;
}

.reading-save-promise a,
.saved-highlights-link {
    color: #e4c451;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.reading-return-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.saved-highlights-link {
    font-family: 'Cinzel', serif;
    font-size: 14px;
}

.location-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.location-search-row input {
    min-width: 0;
}

.location-search-btn {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 7px;
    background: rgba(212, 175, 55, 0.13);
    color: #f0d774;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.location-search-btn:hover,
.location-search-btn:focus-visible {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.22);
}

.location-search-btn:disabled {
    cursor: progress;
    opacity: 0.7;
}

.location-suggestions {
    max-height: 240px;
    margin: 2px 0 8px;
    padding: 5px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 8px;
    background: #171536;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.location-suggestion {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 6px;
    color: #e8e0f0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.location-suggestion:hover,
.location-suggestion[aria-selected="true"] {
    background: rgba(212, 175, 55, 0.18);
    color: #ffe98f;
}

.location-status {
    min-height: 1.4em;
    margin-top: 7px;
    color: rgba(224, 224, 224, 0.78);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    line-height: 1.4;
}

@media screen and (max-width: 1160px) {
    .primary-nav,
    .header-utils {
        display: none;
    }

    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }
}

@media screen and (max-width: 480px) {
    .location-search-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .location-search-btn {
        width: 100%;
        white-space: normal;
    }

    .placements-section {
        width: 100%;
        min-width: 0;
        margin-inline: 0;
        padding-inline: 8px;
    }

    .placements-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .placements-table {
        width: 100%;
        table-layout: fixed;
    }

    .placements-table th,
    .placements-table td {
        padding-inline: 3px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .placements-table .pl-body,
    .placements-table .pl-degree {
        white-space: normal;
    }

    .interpretation-container,
    .interpretation-content,
    .interpretation-content-wrapper,
    .chat-invite-container,
    .question-form {
        min-width: 0;
        max-width: 100%;
    }

    .interpretation-container,
    .chat-invite-container {
        overflow-x: hidden;
    }

    .interpretation-container h2,
    .interpretation-content h2,
    .interpretation-content h3 {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .interpretation-container h2::after,
    .interpretation-content h2::after,
    .interpretation-content h3::after {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .question-form {
        flex-direction: column;
    }

    .question-input,
    .question-submit {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }
}

@media screen and (max-width: 360px) {
    .header {
        padding-inline: 8px;
    }

    .header-title-nav {
        gap: 6px;
        min-width: 0;
    }

    .header h1 {
        min-width: 0;
        font-size: 16px;
        letter-spacing: 0;
    }

    .header h1 .brand-letter {
        margin-inline: 0;
        font-size: 22px;
    }

    .hamburger-btn {
        padding: 5px 8px;
        font-size: 20px;
    }

    .interpretation-container h2,
    .interpretation-content h2,
    .interpretation-content h3 {
        font-size: 21px;
        overflow-wrap: break-word;
    }
}