/* Synastry wheel headline + switcher (scoped so natal/composite title CSS is unchanged) */
#relationshipChartTitle.natal-chart-title-above-wheel {
    display: none;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

#relationshipChartTitle.natal-chart-title-above-wheel.natal-chart-title-visible {
    display: block;
    margin-top: 28px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
}

#relationshipChartTitle.natal-chart-title-above-wheel.natal-chart-title-visible h2 {
    margin: 4px 0 4px;
    font-size: 22px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: #2d2d2d;
}

/* Mobile: breathe above headline + align rhythm with natal/composite wheel titles */
@media (max-width: 768px) {
    #relationshipChartTitle.natal-chart-title-above-wheel.natal-chart-title-visible {
        margin-top: 56px;
        padding-top: 18px;
        padding-bottom: 10px;
    }
    #relationshipChartTitle.natal-chart-title-above-wheel.natal-chart-title-visible h2 {
        margin: 10px 0 4px;
    }
}

/* Main H1: clickable chart type (matches surrounding title — overrides UA / mobile button rules) */
.chart-calculator-main-title {
    text-align: center;
}

/* Menu dropdown positions from full title width so `left: 50%` centers in viewport (avoids clipping). */
#chartPageTitle.chart-calculator-main-title {
    position: relative;
}

#chartPageTitle.chart-calculator-main-title .chart-calculator-kind-trigger,
#chartPageTitle.chart-calculator-main-title .chart-calculator-title-suffix {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

#chartPageTitle.chart-calculator-main-title .chart-calculator-kind-trigger {
    padding: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    background: none !important;
    border-radius: 0 !important;
}

/* Highlight first blocking field after validation message — soft accent, not alarm red */
.calc-validation-field-emphasis {
    outline: 1px solid rgba(158, 195, 226, 0.95) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(158, 195, 226, 0.22), 0 2px 10px rgba(126, 176, 214, 0.12);
    transition: box-shadow 0.25s ease, outline-color 0.25s ease;
}

@media (min-width: 769px) {
    #chartPageTitle.natal-page-h1.chart-calculator-main-title {
        margin-top: 26px !important;
    }
}

/* position: static so #chartPageTitle is the positioning containing block for the dropdown */
.chart-calculator-kind-wrap {
    position: static;
    display: inline-block;
}

.chart-calculator-kind-trigger {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #2d2d2d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(45, 45, 45, 0.42);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
}

.chart-calculator-kind-trigger:focus {
    outline: none;
}

/* Mouse click keeps no ring; keyboard Tab still gets a visible target */
.chart-calculator-kind-trigger:focus-visible {
    outline: 2px solid #9ec3e2;
    outline-offset: 3px;
}

.chart-calculator-kind-trigger:disabled {
    color: #2d2d2d;
    cursor: default;
    opacity: 1;
}

.chart-calculator-title-suffix {
    font-weight: inherit;
}

.chart-calculator-kind-menu.chart-ws-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 6px);
    margin-top: 0;
    min-width: 188px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 6px 0;
    background: #fffef7;
    border: 1px solid #e0dcd0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 12050;
}

/* Overrides template `button { … }` (especially synastry full-width + mobile font bumps). */
.chart-calculator-kind-menu.chart-ws-menu .chart-ws-kind-opt {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 8px 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #2d2d2d;
    cursor: pointer;
}

.chart-ws-kind-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #2d2d2d;
    cursor: pointer;
}

.chart-ws-kind-opt:hover:not(:disabled) {
    background: #f5f0e6;
}

.chart-calculator-kind-menu.chart-ws-menu .chart-ws-kind-opt:hover:not(:disabled) {
    background: #f5f0e6 !important;
}

.chart-ws-kind-opt--current {
    font-weight: 600;
    color: #2d2d2d;
}

.chart-calculator-kind-menu.chart-ws-menu .chart-ws-kind-opt--current {
    font-weight: 600 !important;
}

.chart-ws-kind-opt:disabled {
    cursor: default;
    opacity: 1;
}

/* Recent charts block inside saved sheet */
.saved-charts-section--recent {
    margin-bottom: 18px;
}

.saved-charts-recent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.saved-charts-recent-link {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    color: #2d5a80;
    background: #faf8f3;
    border: 1px solid #ebe6dc;
}

.saved-charts-recent-link:hover {
    background: #f3eee6;
}

.saved-charts-recent-empty {
    margin: 0;
    font-size: 13px;
    color: #777;
}

/* Mobile: no default blue/gray tap flash on buttons and tappable chart controls */
button,
a,
summary,
label[for],
[role="button"],
[role="combobox"],
.custom-orb-select,
.custom-orb-option,
.natal-transit-toggle-btn,
.natal-pattern-pill,
.share-btn,
.share-option,
.location-toggle,
.chart-ws-kind-opt,
.natal-table-modal-close,
table.aspect-grid.aspect-matrix-tapfocus th,
table.aspect-grid.aspect-matrix-tapfocus td {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
    button:focus:not(:focus-visible),
    .custom-orb-select:focus:not(:focus-visible),
    .natal-transit-toggle-btn:focus:not(:focus-visible),
    .share-btn:focus:not(:focus-visible),
    summary:focus:not(:focus-visible),
    .chart-ws-kind-opt:focus:not(:focus-visible) {
        outline: none;
    }
}