/**
 * components.css - Reusable UI components used across the site.
 * Visual styling only: colours, borders, typography, hover states.
 * Layout and structure (flex, sizing, padding) belong in base.css.
 */

/* ========== Top navigation bar (styling only; layout in base.css) ========== */
.top-nav {
    position: relative;
    background: var(--background);
}

.top-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-colour);
    border-radius: 2px;
}

.top-nav-links .nav-link {
    color: var(--text-colour);
    text-decoration: none;
    border-radius: 8px;
    font-size: var(--control-font-size);
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.top-nav-links .nav-link:hover {
    background: var(--secondary-colour);
    color: var(--text-colour);
}

.top-nav-links .nav-button {
    background: var(--primary-colour);
    color: var(--text-alt);
}

.top-nav-links .nav-button:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

/* ========== Text section (styling only; layout in base.css) ========== */
.text-section h1,
.text-section h2,
.text-section h3,
.text-section p {
    margin: 0;
    color: var(--text-colour);
}

.text-section {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
}

.text-section .button-row {
    width: auto;
    justify-content: center;
}

.text-section .button-row .button-item {
    flex: 0 0 auto;
}

.text-section .button-row .nav-button {
    width: auto;
}

.text-section h1 {
    font-size: clamp(48px, 4.8vw, 48px);
}

/* Media stack section – styling only */
.media-stack-card {
    width: min(100%, var(--card-w, clamp(200px, 25vw, 320px)));
    aspect-ratio: 5 / 7;
    height: var(--card-h, auto);
    background: var(--secondary-colour);
    border-radius: 12px;
    box-shadow: 0 14px 32px var(--shadow-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 700ms ease;
    transform: translateX(0);
}

.media-stack-card--with-text {
    padding: 12px;
    gap: 8px;
    justify-content: flex-start;
}

.media-stack-card--with-text p + p {
    margin-top: 0.3em;
}

.media-stack-card img,
.media-stack-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-stack-card--with-text img,
.media-stack-card--with-text video {
    width: 100%;
    height: auto;
    max-height: 60%;
    object-fit: contain;
}

.media-stack-card--video video {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.media-stack-card--video {
    aspect-ratio: auto;
    width: auto;
    height: var(--card-h, auto);
    max-width: 100%;
    overflow: hidden;
}

.media-carousel .media-stack-card--video {
    aspect-ratio: 5 / 7;
    width: min(100%, var(--card-w, clamp(200px, 25vw, 320px)));
    height: var(--card-h, auto);
    max-width: 100%;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.media-carousel .media-stack-card--video video {
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.media-stack-card--video.media-stack-card--with-text {
    aspect-ratio: 5 / 7;
    width: min(100%, var(--card-w, clamp(200px, 25vw, 320px)));
    height: var(--card-h, auto);
    max-width: 100%;
}

.media-stack-card p {
    margin: 0;
    padding: 12px;
    text-align: center;
    color: var(--text-colour);
}

.media-stack.is-fanned .media-stack-card {
    transform: translate(var(--x), var(--y)) rotate(var(--r));
}

.media-stack.is-collapsed .media-stack-card {
    transform: translateX(0);
}

.media-carousel {
    position: relative;
    padding-bottom: var(--carousel-controls-space, 112px);
}

.media-carousel .media-stack-card {
    opacity: 0;
    pointer-events: none;
    transition: transform 800ms ease, opacity 600ms ease;
    z-index: 1;
}

.media-carousel .media-stack-card.is-active {
    opacity: 1;
    pointer-events: auto;
}

.media-carousel .media-stack-card p {
    font-size: clamp(11px, 1.5vw, 13px);
    line-height: 1.25;
}

.media-carousel .media-stack-card.is-enter-from-left {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(-100vw);
}

.media-carousel .media-stack-card.is-enter-from-right {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(100vw);
}

.media-carousel .media-stack-card.is-exit-to-left {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(-100vw);
}

.media-carousel .media-stack-card.is-exit-to-right {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(100vw);
}

.media-carousel-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 2;
}

.media-carousel-controls .nav-button {
    width: 48px;
    height: 48px;
    padding: 0;
}

.media-carousel-indicator {
    text-align: center;
    color: var(--primary-colour);
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.media-stack-card.is-bobbing {
    animation: media-stack-bob 1.6s ease-in-out infinite;
}

@keyframes media-stack-bob {
    0%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) translate(0, 0); }
    50% { transform: translate(var(--x), var(--y)) rotate(var(--r)) translate(0, -20px); }
}

.media-stack-card.is-focus {
    transform: translate(var(--x), calc(var(--y) - var(--focus-lift, 16px))) rotate(var(--r));
    z-index: 500;
}

.media-stack.is-fanned .media-stack-card.is-focus {
    transform: translate(var(--x), calc(var(--y) - var(--focus-lift, 16px))) rotate(var(--r));
    z-index: 500;
}

/* ========== Segmented button: one rule set for all views. Segments size to label + same padding everywhere. ========== */
.segmented-button {
    display: inline-flex;
    align-items: stretch;
    border-radius: 15px;
    background: var(--primary-colour);
}

.segmented-button-item {
    position: relative;
}

.segmented-button-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60%;
    min-height: 12px;
    background: var(--text-alt);
    border-radius: 1px;
    z-index: 1;
    pointer-events: none;
}

.segmented-button-item .nav-button,
.segmented-button-item > a.nav-button,
a.segmented-button-item.nav-button {
    border: none;
    border-radius: 0;
    background: var(--primary-colour);
    color: var(--text-alt);
    min-height: var(--button-min-height);
    padding: 8px 14px;
}

.segmented-button-item:first-child .nav-button,
.segmented-button-item:first-child > a.nav-button,
.segmented-button-item:first-child.nav-button {
    border-radius: 13px 0 0 13px;
}

.segmented-button-item:last-child .nav-button,
.segmented-button-item:last-child > a.nav-button,
.segmented-button-item:last-child.nav-button {
    border-radius: 0 13px 13px 0;
}

/* Hover: colour change only, no vertical movement or opacity (unlike standard .nav-button:hover) */
.segmented-button-item .nav-button:hover,
.segmented-button-item > a.nav-button:hover,
a.segmented-button-item.nav-button:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    transform: none;
    opacity: 1;
}

/* Dropdown open state: segment looks active */
.segmented-button-item.dropdown.show .nav-button,
.segmented-button-item.dropdown:hover .nav-button {
    background: var(--primary-hover);
    color: var(--text-alt);
}

/* Segmented button collapse: when it doesn't fit, show hamburger + dropdown (JS adds wrapper and dropdown) */
.segmented-button-wrapper {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.segmented-button-dropdown {
    display: none;
}

.segmented-button-wrapper.segmented-button-collapsed .segmented-button {
    display: none !important;
}

.segmented-button-wrapper.segmented-button-collapsed .segmented-button-dropdown {
    display: inline-block;
}

.segmented-button-hamburger {
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    border: none;
}

.segmented-button-hamburger:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

.segmented-button-hamburger svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: inherit;
}

/* ========== Site footer ========== */
.site-footer {
    position: relative;
    color: var(--text-colour);
    padding: 12px 12px;
    text-align: center;
    background: var(--background);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-colour);
    border-radius: 2px;
}

.site-footer .container {
    max-width: 800px;
    margin: 0 auto;
}

.site-footer p {
    color: var(--text-colour);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.site-footer-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 24px;
}

.site-footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    padding: 0;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.site-footer-links a:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

/* Footer social icons: mask + background so icon colour is reliable (SVG as background-image does not inherit currentColor). Default = text-alt on primary button. */
.site-footer-links .fa-tiktok,
.site-footer-links .fa-instagram,
.site-footer-links .fa-youtube {
    background-color: var(--text-alt);
    background-image: none;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.site-footer-links .fa-tiktok {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
}
.site-footer-links .fa-instagram {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}
.site-footer-links .fa-youtube {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='white' d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='white' d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E");
}

.site-footer h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--text-colour);
}

.site-footer .footer-copy {
    margin-bottom: 10px;
}

.site-footer .footer-privacy a {
    color: var(--text-colour);
    text-decoration: underline;
}

.site-footer .footer-privacy a:hover {
    opacity: 0.9;
}

.site-footer .footer-legal {
    margin-bottom: 0;
}

.site-footer .footer-legal a {
    color: var(--text-colour);
    text-decoration: underline;
}

.site-footer .footer-legal a:hover {
    opacity: 0.9;
}

.site-footer .footer-legal-sep {
    margin: 0 0.35em;
    opacity: 0.8;
}

/* ========== Site dialog (overlay + panel; close via button or click outside) ========== */
.site-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.site-dialog-overlay.active {
    display: flex;
}

.site-dialog {
    position: relative;
    background: var(--background);
    color: var(--text-colour);
    border-radius: 15px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.site-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.site-dialog .site-dialog-close {
    flex-shrink: 0;
}

.site-dialog .site-dialog-close img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.site-dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}

.site-dialog-content {
    margin: 0;
}

.site-dialog-content a {
    color: var(--primary-colour);
    text-decoration: underline;
}

.site-dialog-content a:hover {
    opacity: 0.9;
}

.site-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--secondary-colour);
}

.site-dialog-actions .site-dialog-actions-delete {
    flex-shrink: 0;
}

.site-dialog-actions .site-dialog-actions-delete[hidden] {
    display: none !important;
}

.site-dialog-actions .validation-messages {
    flex: 1;
    min-width: 0;
}

/* ========== Paged form (multi-step dialog form: pages + Back / Forwards / Submit) ========== */
.paged-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.paged-form-page {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.paged-form-page.is-current {
    display: flex;
}

.paged-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.paged-form-back,
.paged-form-forwards {
    min-height: var(--button-min-height);
    width: auto;
    padding: 0 14px;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    border: none;
    cursor: pointer;
    font-size: var(--control-font-size);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.paged-form-back:hover,
.paged-form-forwards:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

.paged-form-back[hidden],
.paged-form-forwards[hidden] {
    display: none;
}

/* Next and Add (submit) right-aligned in the row */
.site-dialog-actions .paged-form-forwards,
.site-dialog-actions .paged-form-submit {
    margin-left: auto;
}

.fi-add-cashflow-controls {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Add cashflow dialog: match Add savings layout; keep actions visible when content scrolls */
.fi-add-cashflow-dialog .site-dialog {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.fi-add-cashflow-dialog .site-dialog-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.fi-add-cashflow-dialog .site-dialog-content .fi-add-cashflow-controls {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.fi-add-cashflow-dialog .site-dialog-actions {
    flex-shrink: 0;
}

.fi-add-cashflow-controls-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.fi-add-cashflow-controls-row .control-input-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Wrapper with multiple control rows: same row spacing as .paged-form-page (e.g. secondary caregiver block) */
.fi-add-cashflow-controls-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fi-add-cashflow-placeholder {
    margin: 0;
    font-size: 14px;
    color: var(--text-colour);
    opacity: 0.8;
}

/* 16px below type row; no bottom margin. Space below divider comes from each panel's padding-top. */
.fi-add-cashflow-divider {
    margin: 16px 0 0 0;
    border: 0;
    border-top: 1px solid var(--secondary-colour);
}

/* Single spacing between Type row and divider: avoid double (type-controls gap + divider margin). */
.fi-add-cashflow-controls > .fi-add-cashflow-divider {
    margin-top: 0;
}

/* Savings dialog: single spacing between Asset class row and divider (same as cashflow Type row). */
.fi-savings-dialog-asset-class-row {
    padding-bottom: 16px;
}

/* Space below divider to first row: same for every type (Job, Rent, etc.). Gap can skip when non-adjacent; padding is reliable. */
.fi-add-cashflow-type-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
}

.fi-add-cashflow-type-controls[hidden] {
    display: none;
}

/* Checkboxes in Add/Edit cashflow (Job type): use common checkbox size */
.fi-add-cashflow-type-controls input[type="checkbox"] {
    accent-color: var(--primary-colour);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-width: var(--checkbox-size);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

.fi-add-cashflow-type-controls label:has(input[type="checkbox"]) {
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    color: var(--text-colour);
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

.fi-add-cashflow-type-controls .checkbox-container {
    position: relative;
}

/* End year: when hidden, keep layout space so other controls in the row don’t shift */
.fi-job-end-year-wrap[hidden] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Child form accordion sections: divider and header alignment */
.fi-child-accordion-section {
    padding-top: 16px;
    border-top: 1px solid var(--secondary-colour);
}

/* First section follows the main Type divider; avoid double line */
.fi-add-cashflow-type-controls > .fi-child-accordion-section:first-child {
    padding-top: 0;
    border-top: none;
}

.fi-child-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.fi-child-accordion-header .fi-child-accordion-title {
    margin: 0;
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 18px;
}

/* Standard validation messages (errors in red, warnings in yellow). Use with StraightForwardComponents.renderValidationMessages(). */
.validation-messages {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.validation-messages[hidden] {
    display: none;
}

.validation-message {
    display: flex;
    align-items: center;
    min-height: var(--button-min-height);
    width: 100%;
    padding: 0 12px;
    gap: 10px;
    font-size: 14px;
    border-radius: 15px;
    color: var(--error);
}

.validation-message .validation-message__icon,
.validation-message .validation-message__text {
    opacity: 1;
    color: inherit;
}

.validation-message .validation-message__icon {
    flex-shrink: 0;
}

.validation-message .validation-message__icon-svg {
    display: block;
    width: 20px;
    height: 20px;
}

.validation-message .validation-message__text {
    flex: 1;
    margin: 0;
}

.validation-message--error {
    background: var(--error-bg);
    color: var(--error);
}

.validation-message--warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.validation-messages .validation-message:last-child {
    margin-bottom: 0;
}

/* Save scenario dialog: Save and Open sections stacked vertically */
.save-scenario-dialog .site-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.save-scenario-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.save-scenario-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-colour);
}

.save-scenario-new-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.save-scenario-new-btn i {
    color: var(--text-alt);
    font-size: 18px;
}

.save-scenario-save-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-scenario-name-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

.save-scenario-name-input:focus {
    outline: none;
    border-color: var(--primary-colour);
}

.save-scenario-name-input.save-scenario-name-readonly {
    background: var(--secondary-colour);
    color: var(--text-colour);
    cursor: pointer;
}

.save-scenario-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
}

.save-scenario-empty-msg {
    margin: 0;
    font-size: 14px;
    color: var(--text-colour);
    opacity: 0.7;
    font-family: 'Roboto', sans-serif;
}

.save-scenario-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-scenario-name-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.save-scenario-name-wrap .save-scenario-name-input {
    width: 100%;
    box-sizing: border-box;
}

.save-scenario-list-row .save-scenario-name-input {
    flex: 1;
    min-width: 0;
}

.save-scenario-trash-btn img,
.save-scenario-open-btn img {
    filter: brightness(0) invert(1);
}

.save-scenario-open-btn i {
    color: var(--text-alt);
    font-size: 18px;
}

.save-scenario-dialog .site-dialog-actions .save-scenario-accept-btn {
    margin-left: auto;
}

/* Cashflow table dialog (Import/export): fits on screen, table scrolls vertically and horizontally */
.cashflow-table-dialog {
    max-width: min(90vw, 900px);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.cashflow-table-dialog .site-dialog-content {
    flex: 1;
    min-height: 0;
    max-height: calc(90vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cashflow-table-dialog .site-dialog-actions {
    flex-shrink: 0;
    justify-content: flex-end;
}

.cashflow-table-scroll {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
}

.cashflow-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.cashflow-table th,
.cashflow-table td {
    border: 1px solid var(--secondary-colour);
    padding: 8px 10px;
    text-align: left;
}

.cashflow-table th {
    background: var(--secondary-colour);
    color: var(--text-colour);
    font-weight: 500;
    white-space: nowrap;
}

.cashflow-table-group {
    text-align: center;
}

.cashflow-table-period {
    position: sticky;
    left: 0;
    background: var(--background);
    z-index: 1;
}

.cashflow-table thead .cashflow-table-period {
    background: var(--secondary-colour);
}

.cashflow-table tbody .cashflow-table-period {
    background: var(--secondary-colour);
    font-weight: 500;
}

.cashflow-table-cell {
    white-space: nowrap;
}

/* ========== Finance applet: sliders, chart controls, person/savings/chart items, dialogues (uses base.css vars) ========== */
.hinttext {
    color: var(--text-colour);
    opacity: 0.65;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-align: center;
}

/* Slider vertical spacing: use common .control-input-group margin (20px). No extra margin here. */
/* Percent slider - 5% to 95% with labels at 5%, 25%, 50%, 75%, 95% */
.percent-slider .slider-label:nth-child(1) { left: 0%; margin-left: 12px; }
.percent-slider .slider-label:nth-child(2) { left: calc((100% - 24px) * (25 - 5) / 90); margin-left: 12px; }
.percent-slider .slider-label:nth-child(3) { left: calc((100% - 24px) * (50 - 5) / 90); margin-left: 12px; }
.percent-slider .slider-label:nth-child(4) { left: calc((100% - 24px) * (75 - 5) / 90); margin-left: 12px; }
.percent-slider .slider-label:nth-child(5) { left: calc((100% - 24px) * (95 - 5) / 90); margin-left: 12px; }

/* Portfolio slider - 0% to 100% with labels at 0%, 25%, 50%, 75%, 100% */
.portfolio-slider .slider-label:nth-child(1) { left: 0%; margin-left: 12px; }
.portfolio-slider .slider-label:nth-child(2) { left: calc((100% - 24px) * 0.25); margin-left: 12px; }
.portfolio-slider .slider-label:nth-child(3) { left: calc((100% - 24px) * 0.5); margin-left: 12px; }
.portfolio-slider .slider-label:nth-child(4) { left: calc((100% - 24px) * 0.75); margin-left: 12px; }
.portfolio-slider .slider-label:nth-child(5) { left: calc(100% - 24px); margin-left: 12px; }

.chart-controls-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

.chart-controls-row::before,
.chart-controls-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--secondary-colour);
}

.chart-controls-row .add-chart-button {
    position: relative;
}

.btn-blue.add-chart-button,
.btn-blue.add-person-button,
.btn-blue.add-asset-button,
.btn-blue.remove-person-button {
    font-size: 24px;
    font-weight: bold;
}

.chart-controls-row select {
    flex: 1;
    max-width: 300px;
    height: 42px;
    padding: 10px;
    padding-right: 36px;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.chart-controls-row select:focus {
    outline: none;
    border-color: var(--primary-colour);
}

.person-container {
    background: var(--background);
    border-radius: var(--applet-card-radius, 8px);
    padding: var(--applet-card-padding, 4px);
    box-shadow: 0 4px 12px var(--shadow-subtle), 4px 0 12px var(--shadow-subtle);
}

.fi-people-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 15px;
}

.fi-people-cards:empty {
    margin-bottom: 0;
}

.fi-savings-cards-group {
    margin-bottom: 0;
}

.fi-savings-priority-label {
    color: var(--text-colour);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
    margin: 0 0 8px 0;
}

.fi-savings-priority-label:last-of-type {
    margin: 8px 0 0 0;
}

.fi-savings-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 15px;
}

.fi-savings-cards:empty {
    margin-bottom: 0;
}

/* Same card-to-card gap as .fi-people-cards and .fi-savings-cards (16px) */
.fi-savings-cards-non-orderable,
.fi-savings-cards-orderable {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tax-free lump sum: hidden unless "Taxable as income" checked. Taxable as capital gain: shown when taxable as income unchecked. Both share the same slot. */
.fi-savings-tax-free-wrap.fi-savings-tax-free-hidden,
.fi-savings-taxable-capital-gain-wrap.fi-savings-taxable-capital-gain-hidden {
    display: none;
}

.fi-person-card .fi-person-card-row {
    display: flex;
    align-items: center;
    gap: var(--applet-card-inner-gap, 8px);
    margin-bottom: var(--applet-card-inner-spacing, 8px);
}

.fi-person-card .fi-person-card-row:last-child {
    margin-bottom: 0;
}

.fi-person-card .fi-person-card-row .control-input-group,
.fi-person-card .fi-person-card-row .person-gender-wrapper,
.fi-person-card .fi-person-card-row .person-age-wrapper {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.fi-person-card .fi-person-card-row .person-age-wrapper {
    max-width: 50%;
}

/* Colour picker group: size to the button only (control-input-group is for layout; this one must not flex). */
.fi-person-card .fi-person-card-row .control-input-group.fi-chart-label-colour-wrap {
    flex: 0 0 auto;
    width: auto;
}

/* Label cards: Label control twice the width of Year. */
.fi-chart-label-card .fi-person-card-row .control-input-group:nth-child(1) {
    flex: 2;
    min-width: 0;
}
.fi-chart-label-card .fi-person-card-row .control-input-group:nth-child(2) {
    flex: 1;
    min-width: 0;
}

/* Validation (error/warning) label cards: same fill as normal label card, error/warning border only; all controls disabled in JS */
.fi-chart-label-card--validation {
    border: 1px solid var(--error);
}
.fi-chart-label-card--validation-warning {
    border-color: var(--warning);
}
.fi-chart-label-card--validation input:disabled,
.fi-chart-label-card--validation button:disabled {
    opacity: 0.9;
    cursor: default;
}

.fi-person-card .control-input-group input,
.fi-person-card .control-input-group select {
    min-height: 38px;
}

/* Colour picker (universal): swatch fills content area with no corner gap. */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    overflow: hidden;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    width: 100%;
    height: 100%;
}
input[type="color"]::-moz-color-swatch {
    border: none;
}
input[type="color"]::-moz-focus-inner {
    border: none;
    padding: 0;
}

/* Colour picker component: same size and radius as standard button; secondary outline. */
.fi-chart-label-colour-wrap input.fi-chart-label-colour {
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    min-height: var(--button-min-height);
    padding: 0;
    border: 2px solid var(--secondary-colour);
    border-radius: 15px;
    cursor: pointer;
    background: transparent;
    overflow: hidden;
}
.fi-chart-label-colour-wrap input.fi-chart-label-colour::-webkit-color-swatch-wrapper,
.fi-chart-label-colour-wrap input.fi-chart-label-colour::-webkit-color-swatch {
    border-radius: 13px; /* inner: 15px - 2px border so fill meets border at corners */
}
.fi-chart-label-colour-wrap input.fi-chart-label-colour::-moz-color-swatch {
    border-radius: 13px;
}

.fi-asset-chart-labels {
    display: flex;
    flex-direction: column;
    gap: var(--applet-card-inner-spacing, 8px);
    margin-bottom: 15px;
}

/* Settings dialog: max height 800px; only label cards scroll */
.fi-settings-dialog .site-dialog {
    display: flex;
    flex-direction: column;
    max-height: 800px;
}

.fi-settings-dialog .fi-settings-inflation-toggle-wrap {
    align-items: center;
}
.fi-settings-dialog .site-dialog-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fi-settings-dialog .fi-settings-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fi-settings-dialog #fiAssetChartLabelsContainer {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Padding so card drop shadow is not clipped by overflow */
    padding: 12px;
}

.fi-add-person-row,
.fi-add-asset-row {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

#fiAddPersonBtn,
#fiAddAssetClassBtn {
    margin-top: 0;
}

#savingsOrderContainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.savings-item {
    background: var(--background);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 12px var(--shadow-subtle), 4px 0 12px var(--shadow-subtle);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: move;
    transition: box-shadow 0.2s;
}

.savings-item:hover {
    box-shadow: 0 6px 16px var(--shadow-light), 6px 0 16px var(--shadow-light);
}

.savings-item.dragging {
    opacity: 0.5;
}

.savings-item.drag-over {
    border-top: 3px solid var(--primary-colour);
}

.savings-grip {
    color: var(--text-colour);
    opacity: 0.65;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    width: 16px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 1;
}

.savings-grip::before,
.savings-grip::after {
    content: '⋮';
    display: block;
    line-height: 1;
}

.savings-grip:active {
    cursor: grabbing;
}

.savings-name {
    flex: 1;
    color: var(--text-colour);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.savings-edit-button {
    flex-shrink: 0;
}

.people-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.person-gender-age-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.person-gender-wrapper {
    flex: 2;
    position: relative;
}

.person-age-wrapper {
    flex: 1;
    position: relative;
}

.chart-item-container {
    background: var(--background);
    border-radius: 8px;
    padding: 4px;
    margin-top: 20px;
    box-shadow: 0 10px 30px var(--shadow-light), 10px 0 30px var(--shadow-light);
    position: relative;
}

.chart-item-container .chart-container {
    margin-bottom: 0;
    height: 200px;
}

.chart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 40px;
}

.chart-item-title {
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 24px;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.chart-item-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.chart-item-button {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
}

.calculator-content input[type="checkbox"] {
    accent-color: var(--primary-colour);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-width: var(--checkbox-size);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

.calculator-content label:has(input[type="checkbox"]) {
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    color: var(--text-colour);
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

.calculator-content .checkbox-container {
    position: relative;
}

/* Checkbox tooltip is shown only via the tooltip layer (components.js); do not show in-place to avoid two tooltips */

.dialogue-button[style*="display: none"] {
    display: none !important;
}

.dialogue-button img,
.chart-item-button img {
    filter: brightness(0) invert(1);
}

/* ========== Applet pages: nav and footer use primary background; buttons white with text-colour words, dividers and icons; logo inverted ========== */
body.applet-page .top-nav {
    background: var(--primary-colour);
}

body.applet-page .top-nav::after {
    display: none;
}

body.applet-page .top-nav .segmented-button {
    background: var(--background);
}

body.applet-page .top-nav .segmented-button-item:not(:first-child)::before {
    background: var(--primary-colour);
}

body.applet-page .top-nav .segmented-button-item .nav-button,
body.applet-page .top-nav .segmented-button-item > a.nav-button,
body.applet-page .top-nav a.segmented-button-item.nav-button {
    background: var(--background);
    color: var(--primary-colour);
}

body.applet-page .top-nav .segmented-button-item .nav-button:hover,
body.applet-page .top-nav .segmented-button-item > a.nav-button:hover,
body.applet-page .top-nav a.segmented-button-item.nav-button:hover {
    background: var(--secondary-colour);
    color: var(--primary-colour);
}

body.applet-page .top-nav .segmented-button-item.dropdown.show .nav-button,
body.applet-page .top-nav .segmented-button-item.dropdown:hover .nav-button {
    background: var(--secondary-colour);
    color: var(--primary-colour);
}

body.applet-page .site-footer {
    background: var(--primary-colour);
    color: var(--text-alt);
}

body.applet-page .site-footer::before {
    display: none;
}

body.applet-page .site-footer p,
body.applet-page .site-footer h3,
body.applet-page .site-footer .footer-privacy a,
body.applet-page .site-footer .footer-legal a {
    color: var(--text-alt);
}

body.applet-page .site-footer-links a {
    background: var(--background);
    color: var(--primary-colour);
}

body.applet-page .site-footer-links a:hover {
    background: var(--secondary-colour);
    color: var(--primary-colour);
}

/* Applet footer social icons: same mask, icon fill = primary-colour (overrides default text-alt) */
body.applet-page .site-footer-links .fa-tiktok,
body.applet-page .site-footer-links .fa-instagram,
body.applet-page .site-footer-links .fa-youtube {
    background-color: var(--primary-colour);
}

/* ========== Nav buttons (segmented control items, dropdown triggers) ========== */
.nav-button {
    background: var(--primary-colour);
    border-radius: 15px;
    color: var(--text-alt);
    padding: 8px 8px;
    margin: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    min-height: var(--button-min-height);
    font-size: var(--control-font-size);
    font-weight: 500;
}

.nav-button:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 0.9;
}

.button-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.button-row .button-item {
    flex: 1 1 calc((100% - 24px) / 4);
    min-width: 0;
    box-sizing: border-box;
}

.button-row .button-item .dropdown {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.button-row .nav-button {
    width: 100%;
    box-sizing: border-box;
}

/* Dropdown: single implementation for nav and segmented-button dropdowns. Column of separate buttons, no outer rectangle. */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    padding: 0;
    list-style: none;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    box-sizing: border-box;
    /* At least as wide as trigger; grow so all option text fits on one line */
    min-width: 100%;
    width: max-content;
    /* No background/border on container – each option is its own button */
    background: transparent;
    border: none;
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dropdown-menu.show {
    display: flex !important;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
    display: flex;
}

/* Each option: 8px padding. base.css excludes .dropdown-item from .top-nav-links a { padding: 0 } so this applies. */
.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--button-min-height);
    padding: 8px 8px;
    margin: 0;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    text-decoration: none;
    text-align: center;
    font-size: var(--control-font-size);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--primary-hover);
    color: var(--text-alt);
}

.dropdown-toggle::after {
    display: none !important;
}

/* Section wrappers */
.content-section,
.button-section,
.video-section {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ========== Content layouts: 1, 2 and 4 columns + carousel ==========
 * Column layout: .content-section > .container > .content-cols .content-cols-1|2|3|4,
 *   with .content-cell children (each cell can hold text, image, pdf, map, etc.).
 * Single block: .content-section > .container > .content-card (same look as one cell).
 * Carousel: .content-section > .container > .walkthrough-section > .walkthrough-container >
 *   .carousel-container > .carousel-slides > .carousel-slide (each slide any content type).
 * Titles: use <h1> inside each rounded container (.content-cell, .carousel-slide); no titles outside columns. */

.content-cell h1:first-child,
.carousel-slide h1:first-child {
    margin-top: 0;
}

.content-cols {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: center;
}

.content-cols-1 {
    grid-template-columns: 1fr;
}

.content-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 columns: centre column ~2× edge columns (like 4-col with cols 2+3 merged) */
.content-cols-3 {
    grid-template-columns: 1fr 2fr 1fr;
}

@media (max-width: 768px) {
    .content-cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .content-cols-2,
    .content-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* Content box pattern: shared card look for .content-cell, .content-card, .carousel-box */
.content-cell,
.content-card,
.carousel-box {
    padding: 16px;
    border-radius: 20px;
    background: var(--secondary-colour);
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
}

/* Content cell: one slot in column layout or carousel; text centred. */
.content-cell {
    min-width: 0;
    text-align: center;
    align-self: center;
}

.content-cell > :first-child {
    margin-top: 0;
}

.content-cell > :last-child {
    margin-bottom: 0;
}

.content-cell img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}

.content-cell iframe {
    width: 100%;
    height: 400px;
    min-height: 300px;
    border: none;
    border-radius: 20px;
    display: block;
}

/* Cells that contain only media (image, video, pdf, map): no grey rounded box */
.content-cell:has(> a:only-child > img),
.content-cell:has(> img:only-child),
.content-cell:has(> div[id^="videoWrapper"]:only-child),
.content-cell:has(> iframe:only-child) {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Single full-width card (one column, one slot). */
.content-card {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.content-card > :first-child {
    margin-top: 0;
}

.content-card > :last-child {
    margin-bottom: 0;
}

.content-card:has(> a:only-child > img),
.content-card:has(> img:only-child),
.content-card:has(> div[id^="videoWrapper"]:only-child),
.content-card:has(> iframe:only-child) {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Legacy section wrappers: same as .content-card (backward-compat). Prefer content-cols + content-cell. */
.walkthrough-section {
    margin-bottom: 0;
}

/* Content box pattern: shared card look for wrappers */
.walkthrough-container,
.video-container {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 20px;
    background: var(--secondary-colour);
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
}

.map-container {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 20px;
    background: var(--background);
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
}

/* Applet template (visual)
 * Pair with base.css layout classes: body.applet-page + .applet-shell.
 * Use .applet-card on the main inset surface, optionally add .applet-card--padded.
 * Card tokens: radius and compact padding/spacing (person-card style) shared by all card types. */
body.applet-page {
    --applet-card-radius: 8px;
    --applet-card-padding: 4px;
    --applet-card-inner-gap: 8px;
    --applet-card-inner-spacing: 8px;
}

.applet-card {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--background);
    border-radius: var(--applet-card-radius, 8px);
    padding: var(--applet-card-padding, 4px);
    box-shadow: 0 10px 30px var(--shadow-light);
    box-sizing: border-box;
    overflow: hidden;
}

.applet-card--padded {
    padding: 16px;
}

/* PDF wrapper: minimal chrome (used on privacy-policy, electioneer pages) */
.pdf-container {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.video-wrapper {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.video-item {
    flex: 0 0 calc(50% - 5px);
    min-width: 0;
}

.video-player {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: none;
    object-fit: contain;
    display: block;
}

.pdf-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Carousel: prev/next buttons outside slide area, vertically centred. Standard typography in slides; optional two-column layout. */
.content-carousel {
    width: 100%;
    box-sizing: border-box;
}

.content-carousel-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Standard button with chevron icon; sits left/right of slide area, centred vertically */
.carousel-nav {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 15px;
    background: var(--primary-colour);
    color: var(--text-alt);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.carousel-nav:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
}

.carousel-nav:focus {
    outline: 2px solid var(--primary-colour);
    outline-offset: 2px;
}

.carousel-nav i {
    font-size: 18px;
    font-weight: bold;
    color: inherit;
}

/* Rounded box around slide area (inherits content-box pattern above) */
.carousel-box {
    flex: 1;
    min-width: 0;
}

.carousel-slide-area {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    transition: height 0.3s ease;
}

.carousel-slides {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide {
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    height: fit-content;
    padding: 0;
    box-sizing: border-box;
}

/* Standard typography in slides – no special text class */
.carousel-slide h1,
.carousel-slide h2,
.carousel-slide h3,
.carousel-slide p {
    margin-top: 0;
    margin-bottom: 0.75em;
    color: var(--text-colour);
}

.carousel-slide p:last-child,
.carousel-slide > *:last-child {
    margin-bottom: 0;
}

/* Optional two-column layout within a slide (image + text) */
.carousel-slide-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 600px) {
    .carousel-slide-cols {
        grid-template-columns: 1fr;
    }
}

.carousel-slide img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}

.carousel-slide iframe {
    width: 100%;
    height: 50vh;
    min-height: 300px;
    border: none;
    border-radius: 20px;
    display: block;
}

.carousel-slide a {
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

.carousel-indicator {
    text-align: center;
    margin-top: 12px;
    color: var(--primary-colour);
    font-weight: 500;
}

/* Legacy: .carousel-container kept as alias for .carousel-slide-area for backward compatibility */
.carousel-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 20px;
    transition: height 0.3s ease;
}

.pdf-viewer {
    width: 100%;
    height: 80vh;
    min-height: 400px;
    max-height: 67vh;
    border: none;
    border-radius: 20px;
}

.pdf-viewer-small {
    width: 100%;
    height: 53vh;
    min-height: 400px;
    max-height: 67vh;
    border: none;
    border-radius: 20px;
}

/* Mobile: full-width containers */
@media (max-width: 600px) {
    .walkthrough-container,
    .video-container,
    .pdf-container,
    .map-container,
    .content-cols,
    .content-card {
        width: 100% !important;
        max-width: 100vw !important;
    }
    .walkthrough-container,
    .video-container,
    .pdf-container,
    .map-container {
        padding: 12px !important;
    }
}

/* Cookie banner - primary background, text-alt for banner text; secondary buttons with text-colour */
.cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--primary-colour) !important;
    color: var(--text-alt) !important;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px var(--shadow-medium);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    border-top: 2px solid var(--text-alt);
    box-sizing: border-box;
}

.cookie-banner-visible {
    transform: translateY(0);
}

.cookie-banner-hidden {
    transform: translateY(100%);
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    min-width: 250px;
}

.cookie-banner-text p {
    margin: 0;
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.5;
    color: var(--text-alt) !important;
}

.cookie-banner-text a {
    color: var(--text-alt);
    text-decoration: underline;
}

.cookie-banner-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    background: var(--secondary-colour);
    border-radius: 15px;
    color: var(--text-colour);
    padding: 4px 4px;
    margin: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    min-height: var(--button-min-height);
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    cursor: pointer;
    min-width: 100px;
}

.cookie-btn:hover {
    background: var(--secondary-colour);
    color: var(--text-colour);
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 0.9;
}

@media (max-width: 767px) {
    .cookie-banner {
        padding: 12px 15px;
    }
    .cookie-banner-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cookie-banner-buttons {
        width: 100%;
        justify-content: stretch;
    }
    .cookie-btn {
        flex: 1;
    }
}

/* Home button (sub-pages) */
.home-button {
    background: var(--primary-colour) !important;
    border-radius: 15px;
    color: var(--text-alt);
    padding: 12px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 20px auto;
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
}

.home-button:hover {
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 0.9;
    background: var(--primary-hover) !important;
}

/* ========== Finance page (tool bar, calculator, chart, controls). Scope with body.finance-page if needed. ========== */
.finance-tool-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 12px 0;
    box-sizing: border-box;
}

.finance-tool-bar + .calculator-content {
    padding: 12px;
    box-sizing: border-box;
    background: var(--background);
}

.finance-tool-bar .segmented-button-item .nav-button.active,
.finance-tool-bar .segmented-button-item.active .nav-button {
    background: var(--secondary-colour);
    color: var(--text-colour);
}

.finance-tool-bar .segmented-button-dropdown .dropdown-item.active {
    background: var(--secondary-colour);
    color: var(--text-colour);
}

.finance-tool-bar #importExportBtn {
    margin-left: auto;
}
.finance-tool-bar #importExportBtn ~ #saveScenarioBtn,
.finance-tool-bar #importExportBtn ~ #downloadBtn {
    margin-left: 0;
}
.finance-tool-bar #saveScenarioBtn {
    margin-left: auto;
}
.finance-tool-bar #downloadBtn {
    margin-left: auto;
    display: none;
}
.finance-tool-bar #saveScenarioBtn ~ #downloadBtn {
    margin-left: 0;
}
.finance-tool-bar #downloadBtn.install-available {
    display: inline-flex;
}

/* ========== Finance calculator shared (chart, controls, about, currency, csv) ========== */
.calculator-container {
    padding: 0;
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;
    position: relative;
}

.chart-container {
    width: 100%;
    height: 600px;
    margin-bottom: 30px;
    position: relative;
}

.chart-canvas {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    cursor: crosshair;
}

.chart-tooltip {
    position: absolute;
    background: var(--overlay-dark);
    color: var(--text-alt);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    pointer-events: none;
    z-index: 100001;
    white-space: normal;
    box-shadow: 0 4px 12px var(--shadow-medium);
    max-width: 280px;
    min-width: 200px;
    line-height: 1.5;
    /* Center horizontally on the assigned left value so tooltip appears centred beneath cursor */
    transform: translate(-50%, 0);
}

.chart-tooltip .tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}

.chart-tooltip .tooltip-row:last-child {
    border-bottom: none;
}

.chart-tooltip .tooltip-row.tooltip-row-total {
    font-weight: bold;
}

.chart-tooltip .tooltip-row.tooltip-row-wrap {
    white-space: normal;
    align-items: flex-end;
}

.chart-tooltip .tooltip-row.tooltip-row-wrap .tooltip-label {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chart-tooltip .tooltip-row.tooltip-row-wrap .tooltip-value {
    flex: 0 0 auto;
    text-align: right;
    align-self: flex-end;
    margin-left: 16px;
    white-space: nowrap;
}

.chart-tooltip .tooltip-row.tooltip-row-wrap .tooltip-value {
    flex: 0 0 auto;
    text-align: right;
    align-self: flex-end;
    margin-left: 16px;
    white-space: nowrap;
}

.chart-tooltip .tooltip-label {
    text-align: left;
    flex: 1 1 auto;
}

.chart-tooltip .tooltip-value {
    text-align: right;
    flex: 0 0 auto;
}

.controls-section {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.control-group {
    flex: 1 1 calc(25% - 15px);
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 200px;
}

.page-divider-with-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 0;
}

.page-divider-with-button .page-divider-line {
    flex: 1;
    height: 1px;
    background: var(--secondary-colour);
}

.page-divider-with-button .btn-blue {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: bold;
}

.cashflow-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
    width: 100%;
}

.cashflow-chart-card {
    box-sizing: border-box;
}

.cashflow-chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--applet-card-inner-gap, 8px);
    margin-bottom: var(--applet-card-inner-spacing, 8px);
}

.cashflow-chart-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-colour);
    flex: 1;
    min-width: 0;
}

.cashflow-chart-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cashflow-chart-card-actions .btn-blue img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.cashflow-chart-card .chart-container {
    width: 100%;
    min-height: 200px;
}

/* Text-only cashflow card: no chart, just a summary line. Summary uses .text-body (shared with About control column). */

/* Orderable card: title, left reorder (up/down chevrons), right Edit button. Reusable for Savings etc. */
.orderable-card {
    box-sizing: border-box;
}

.orderable-card-header {
    display: flex;
    align-items: center;
    gap: var(--applet-card-inner-gap, 8px);
}

/* Drag handle for orderable cards: same size as standard button, grip icon (white→primary-colour) via mask. */
.orderable-card-drag-handle {
    width: var(--button-min-height);
    height: var(--button-min-height);
    min-width: var(--button-min-height);
    min-height: var(--button-min-height);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    padding: 0;
    background-color: var(--primary-colour);
    mask-image: url('/static/Icons/Grip.webp');
    mask-size: 18px 18px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('/static/Icons/Grip.webp');
    -webkit-mask-size: 18px 18px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Reserve space so the label stays aligned; hide handle visually and make non-interactive */
.orderable-card[data-orderable="false"] .orderable-card-drag-handle {
    visibility: hidden;
    pointer-events: none;
}

.orderable-card-drag-handle:active {
    cursor: grabbing;
}

.orderable-card.orderable-card-dragging {
    opacity: 0.6;
}

.orderable-card.orderable-card-dragging .orderable-card-drag-handle {
    cursor: grabbing;
}

/* Savings card asset tooltip: visually hidden in place so it doesn't affect layout; layer restores size when showing */
.fi-savings-card-tooltip {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.thumb-tooltip-layer .thumb-tooltip.fi-savings-card-tooltip {
    width: auto;
    height: auto;
    max-width: 180px;
    overflow: visible;
    clip: auto;
}

.orderable-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-colour);
    flex: 1;
    min-width: 0;
}

.orderable-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.orderable-card-actions .btn-blue img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.control-input-group {
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.control-input-group:last-child {
    margin-bottom: 0;
}

.control-input-group.fi-information-btn-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
}

.control-input-group.fi-information-btn-row.fi-information-btn-row-centred {
    justify-content: center;
}

.control-input-group label {
    display: block;
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 18px;
    margin: 0 0 15px 0;
    padding: 0;
    line-height: 1.4;
}

/* Checkbox labels in control-input-group: standard text colour (same as elsewhere), no bottom margin so they sit flush at row bottom */
.control-input-group label:has(input[type="checkbox"]) {
    color: var(--text-colour);
    margin-bottom: 0;
}

.control-input-group input,
.control-input-group select {
    width: 100%;
    height: 42px;
    padding: 10px;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.control-input-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.control-input-group input:focus,
.control-input-group select:focus {
    outline: none;
    border-color: var(--primary-colour);
}

/* Styled select: custom dropdown panel to match UI (rounded, same border/colour). Trigger + panel. */
.styled-select-wrapper {
    position: relative;
    width: 100%;
}

.styled-select-wrapper select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 42px;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.styled-select-trigger {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 42px;
    padding: 10px 36px 10px 10px;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--text-colour);
    transition: border-color 0.3s ease;
}

.styled-select-wrapper.is-open .styled-select-trigger {
    border-color: var(--primary-colour);
    outline: none;
}

.styled-select-wrapper--disabled .styled-select-trigger {
    background-color: #FAFAFA;
    border: 2px solid var(--secondary-colour);
    cursor: not-allowed;
    pointer-events: none;
}

.styled-select-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    margin-top: 2px;
    padding: 0;
    list-style: none;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    background: var(--background);
    box-shadow: 0 4px 12px var(--shadow-medium);
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    display: none;
}

.styled-select-wrapper.is-open .styled-select-panel {
    display: block;
}

.styled-select-option {
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-colour);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.styled-select-option:hover,
.styled-select-option:focus {
    background: var(--secondary-colour);
}

.styled-select-option[aria-selected="true"] {
    background: rgba(10, 59, 124, 0.1);
    color: var(--primary-colour);
}

.styled-select-panel .styled-select-option:first-child {
    border-radius: 4px 4px 0 0;
}

.styled-select-panel .styled-select-option:last-child {
    border-radius: 0 0 4px 4px;
}

.person-gender-wrapper select,
.person-age-wrapper input {
    width: 100%;
    height: 42px;
    padding: 10px;
    border: 2px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.person-gender-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.person-gender-wrapper select:focus,
.person-age-wrapper input:focus {
    outline: none;
    border-color: var(--primary-colour);
}

/* Standard control input patterns: use .input-wrapper with .currency-symbol (£) or .percent-symbol (%, x).
   Inputs: .currency-input (padding-left for £), .currency-input-negative (-£, negative only, adds minus on blur), .percent-input (padding-right). Behaviour in components.js. */
.control-input-group .input-wrapper {
    position: relative;
}

.control-input-group .currency-symbol,
.control-input-group .percent-symbol {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-colour);
    font-weight: 500;
    font-size: 14px;
}

.control-input-group .currency-symbol {
    left: 10px;
}

.control-input-group .currency-input,
.control-input-group .currency-input-negative {
    padding-left: 28px;
}

.control-input-group .percent-symbol {
    right: 10px;
    left: auto;
}

.control-input-group .percent-input {
    padding-right: 28px;
    min-width: 50px;
}

.control-input-group .input-wrapper,
.control-input-group {
    position: relative;
}

.about-section {
    width: 100%;
    padding: 0;
    position: relative;
}

.about-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.about-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Standard text body style for control columns (About) and text-only cards. */
.text-body,
.about-text {
    margin: 0;
    color: var(--text-colour);
    font-size: 14px;
    line-height: 1.5;
}

.about-text-spaced {
    margin: 15px 0 0 0;
}

.fi-about-inflation-wrap {
    margin-top: 16px;
}

.control-input-group.fi-scenarios-inflation-wrap {
    margin-top: 20px;
}

.about-list {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.fi-information-assumptions-list {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: var(--text-colour);
    font-size: 14px;
    line-height: 1.5;
}

/* Icon-only button: same size as .btn-blue (uses --button-min-height) */
.csv-button {
    background: var(--primary-colour);
    border: 2px solid var(--primary-colour);
    color: var(--text-alt);
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    border-radius: 15px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.csv-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.csv-button img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
    body.finance-page .control-group {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
    .control-group:nth-child(n+3) {
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .calculator-container {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .chart-container {
        height: 450px;
        margin-bottom: 20px;
    }
    .controls-section {
        margin-top: 15px;
        width: 100%;
        max-width: 100vw;
    }
    .control-group {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
    .control-group:nth-child(n+3) {
        margin-top: 20px;
    }
}

/* ========== Shared UI from holiday-planner (map, sliders, checkbox, buttons, accordion, textbox) ========== */

/* Control group labels (used with sliders/accordions) */
.control-header {
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 24px;
    margin: 0 0 20px 0;
}

.control-label {
    color: var(--primary-colour);
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 15px;
    display: block;
}

/* Map container and header */
.map-container-ui {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 20px var(--shadow-subtle);
    overflow: hidden;
}

.map-header {
    margin-bottom: 12px;
}

.map-header h2 {
    color: var(--primary-colour);
    font-weight: 500;
    margin: 0;
}

/* Leaflet zoom controls - themed to primary */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: none !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

.leaflet-control-zoom a {
    background-color: var(--primary-colour) !important;
    color: var(--text-alt) !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: "Roboto", sans-serif !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.leaflet-control-zoom-in {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.leaflet-control-zoom-out {
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.leaflet-control-zoom a:hover {
    background-color: var(--primary-hover) !important;
}

.leaflet-control-zoom a:active {
    background-color: var(--primary-hover) !important;
    transform: scale(0.95);
}

/* Slider - single and dual thumb.
 * padding 0 12px: accommodates labels at 0% and 100% which extend outward (transform: translateX(-50%)).
 * padding-top 10px: thumbs use margin-top: -8px and extend above the track; extra 2px avoids cropping on hover scale.
 * overflow-x: hidden clips horizontal overflow (overflow-y becomes auto per spec, so vertical overflow must fit). */
.slider-container {
    position: relative;
    box-sizing: border-box;
    padding: 10px 12px 0 12px;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.single-range-slider,
.dual-range-slider,
.multi-thumb-slider {
    position: relative;
    height: 8px;
    margin: 0 12px;
}

.slider-track {
    position: absolute;
    width: 100%;
    height: 8px;
    background: var(--secondary-colour);
    border-radius: 5px;
}

.slider-range {
    position: absolute;
    height: 8px;
    background: var(--primary-colour);
    border-radius: 5px;
}

.slider-thumb {
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--primary-colour);
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-alt);
    font-weight: bold;
    font-size: 12px;
    -webkit-user-select: none;
    user-select: none;
    z-index: 10;
}

.slider-thumb:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

.slider-thumb:active {
    transform: scale(1.05);
}

.thumb-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 4px 8px;
    max-width: 180px;
    background: var(--overlay-dark);
    color: var(--text-alt);
    font-size: 11px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100001;
}

/* Tooltip layer: body-level. JS moves the existing .thumb-tooltip here on hover so it appears on top of all elements. */
.thumb-tooltip-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999999;
}
.thumb-tooltip-layer .thumb-tooltip {
    opacity: 1;
    position: fixed;
    bottom: auto;
    left: auto;
    transform: none;
}

.thumb-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--overlay-dark);
}

.slider-labels {
    position: relative;
    margin-top: 10px;
    height: 20px;
}

.slider-label {
    position: absolute;
    font-size: 14px;
    color: var(--text-colour);
    white-space: nowrap;
    transform: translateX(-50%);
}

.slider-value {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    color: var(--primary-colour);
    font-weight: 500;
}

/* Toggle switch: label contains hidden checkbox + .toggle-switch (track/thumb) + .toggle-switch-text. Text is vertically centred to the toggle. */
.toggle-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggle-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.toggle-switch {
    flex-shrink: 0;
    position: relative;
    width: 48px;
    height: 26px;
}

.toggle-switch-track {
    position: absolute;
    inset: 0;
    height: 26px;
    background: var(--secondary-colour);
    border-radius: 13px;
    transition: background 0.2s ease;
}

.toggle-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--background);
    box-shadow: 0 2px 5px var(--shadow-medium);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.toggle-switch-input:checked ~ .toggle-switch .toggle-switch-track {
    background: var(--primary-colour);
}

.toggle-switch-input:checked ~ .toggle-switch .toggle-switch-thumb {
    transform: translateX(22px);
}

.toggle-switch-input:focus-visible ~ .toggle-switch .toggle-switch-track {
    outline: 2px solid var(--primary-colour);
    outline-offset: 2px;
}

.toggle-switch-text {
    font-size: 14px;
    color: var(--text-colour);
}

/* Dual-label toggle: left label (off) and right label (on) with fixed widths so a column of toggles aligns. */
.toggle-switch-label--dual {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 26px;
}

.toggle-switch-text-left {
    width: 110px;
    min-width: 110px;
    font-size: 14px;
    color: var(--text-colour);
    text-align: right;
}

.toggle-switch-text-right {
    width: 120px;
    min-width: 120px;
    font-size: 14px;
    color: var(--text-colour);
    text-align: left;
}

/* Multi-thumb slider: linear scale, labels evenly spaced at 0%, 25%, 50%, 75%, 100% (0, 3, 6, 9, 12) */
.slider-container:has(.multi-thumb-slider) .slider-label:nth-child(1) { left: 0%; }
.slider-container:has(.multi-thumb-slider) .slider-label:nth-child(2) { left: 25%; }
.slider-container:has(.multi-thumb-slider) .slider-label:nth-child(3) { left: 50%; }
.slider-container:has(.multi-thumb-slider) .slider-label:nth-child(4) { left: 75%; }
.slider-container:has(.multi-thumb-slider) .slider-label:nth-child(5) { left: 100%; }

/* Multi-thumb slider with exactly two labels: min at left, max at right (same pattern as holiday-planner) */
.slider-container:has(.multi-thumb-slider) .slider-labels:has(.slider-label:nth-child(2):last-child) .slider-label:nth-child(1) { left: 0%; margin-left: 12px; }
.slider-container:has(.multi-thumb-slider) .slider-labels:has(.slider-label:nth-child(2):last-child) .slider-label:nth-child(2) { left: auto; right: 0; margin-left: 0; transform: none; }

/* Checkbox - common size and accent (dialogue, calculator, holiday-planner Journey) */
input[type="checkbox"] {
    accent-color: var(--primary-colour);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-width: var(--checkbox-size);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

input[type="checkbox"].checkbox-large {
    width: calc(var(--checkbox-size) * 1.5);
    height: calc(var(--checkbox-size) * 1.5);
    min-width: calc(var(--checkbox-size) * 1.5);
    transform-origin: left center;
}

/* Checkbox labels: common definition – normal weight, label text vertically centred on control.
   No bottom margin so they sit flush when .control-input-group label would add 15px. */
label:has(input[type="checkbox"]) {
    font-weight: normal;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

label:not(.control-label) {
    font-size: 14px;
    line-height: 1.2;
}

/* Primary UI button: use .btn-blue in markup; .btn-primary-ui is an alias. */
.btn-primary-ui,
.btn-blue {
    background: var(--primary-colour);
    color: var(--text-alt);
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    padding: 0;
    border-radius: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.btn-primary-ui:hover,
.btn-blue:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    transform: translateY(-2px);
}

.btn-primary-ui.active,
.btn-blue.active {
    background: var(--primary-hover);
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px var(--shadow-medium);
}

button.btn-blue:disabled,
button.btn-primary-ui:disabled {
    background: var(--secondary-colour) !important;
    border-color: var(--secondary-colour) !important;
    color: var(--text-colour) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Standard button icon: one rule for all (font icon) – 18px bold, explicit size so 1em never varies */
.btn-primary-ui i,
.btn-blue i,
.accordion-toggle i,
.ellipsis-toggle i,
.carousel-nav i {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-alt);
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
}

.carousel-nav i {
    color: inherit;
}

.btn-primary-ui img,
.btn-blue img,
.btn-primary-ui svg,
.btn-blue svg,
.site-dialog .site-dialog-close svg {
    width: 18px;
    height: 18px;
}

.btn-primary-ui img,
.btn-blue img {
    flex-shrink: 0;
}

.btn-primary-ui svg,
.btn-blue svg,
.site-dialog .site-dialog-close svg {
    flex-shrink: 0;
    color: var(--text-alt);
}

/* Accordion expand/collapse button (.accordion-toggle and .ellipsis-toggle for compatibility) */
.accordion-toggle,
.ellipsis-toggle {
    background: var(--primary-colour);
    border-radius: 15px;
    color: var(--text-alt);
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0;
    width: var(--button-min-height);
    min-width: var(--button-min-height);
    height: var(--button-min-height);
    cursor: pointer;
}

.accordion-toggle i,
.ellipsis-toggle i {
    display: block;
    transition: transform 0.3s ease;
}

.accordion-toggle:hover,
.ellipsis-toggle:hover {
    background: var(--primary-hover);
    color: var(--text-alt);
    transform: translateY(-2px);
}

.accordion-toggle.active i,
.ellipsis-toggle.active i {
    transform: rotate(180deg);
}

/* Accordion content */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Accordion content inside add-cashflow type controls: same row spacing as type panel (gap 16px) */
.fi-add-cashflow-type-controls .accordion-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Wrappers that contain control rows (e.g. secondary caregiver block) get the same row spacing */
.fi-add-cashflow-type-controls .accordion-content > div:has(> .fi-add-cashflow-controls-row) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-content.active {
    max-height: 400px;
    padding-bottom: 20px;
    overflow: visible;
}

.accordion-content .slider-thumb {
    z-index: 10;
}

/* Textbox */
.input-text-ui {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    color: var(--text-colour);
    background: var(--background);
}

.input-text-ui:focus {
    outline: none;
    border-color: var(--primary-colour);
}

/* Textbox inside .home-controls (holiday-planner compatibility) */
.home-controls input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--secondary-colour);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    color: var(--text-colour);
    background: var(--background);
}

.home-controls input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-colour);
}

/* Loading indicator (.loading-indicator-ui and .loading-indicator for compatibility) */
.loading-indicator-ui,
.loading-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-colour);
    color: var(--text-alt);
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-medium);
    z-index: 2002;
    display: none;
}

.loading-indicator-ui.active,
.loading-indicator.active {
    display: block;
}

/* Loading ellipsis animation - bouncing dots (for buttons) */
.loading-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-alt);
    line-height: 1;
    gap: 3px;
}

.loading-ellipsis span {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    animation: bounce-dot 1.2s infinite;
}

.loading-ellipsis span:nth-child(1) {
    animation-delay: 0s;
}

.loading-ellipsis span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-ellipsis span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce-dot {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
}

/* Icon set (from static/icons.css) */
.fas,
.fab {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fa-home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E");
}

/* Chevrons and UI icons: fill white for use on primary-colour buttons (text-alt) */
.fa-chevron-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
}

.fa-chevron-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
}

.fa-chevron-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}

.fa-chevron-up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E");
}

.fa-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}

.fa-location-dot {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
}

.fa-redo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z'/%3E%3C/svg%3E");
}

/* Footer social icons: use currentColor so they inherit link colour (white on default footer, primary on applet) */
.fa-tiktok {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
}

.fa-instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.fa-youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E");
}

i.fa-home {
    filter: invert(26%) sepia(82%) saturate(1247%) hue-rotate(193deg) brightness(91%) contrast(98%);
}

/* Site-wide: no borders on any button – overrides inline styles and other CSS */
button,
.nav-button,
a.nav-button,
.cookie-btn,
.dropdown-item,
.btn-blue,
.btn-primary-ui,
.accordion-toggle,
.ellipsis-toggle,
.carousel-nav,
.home-button,
.site-footer-links a,
.leaflet-control-zoom a,
.segmented-button .segmented-button-item .nav-button,
.segmented-button .segmented-button-item > a.nav-button,
.segmented-button a.segmented-button-item.nav-button {
    border: none !important;
}

/* When running as installed PWA (standalone/fullscreen), hide top nav, footer and download button */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .top-nav,
    .site-footer,
    #downloadBtn {
        display: none !important;
    }
}

/* Fallback when JS adds class (e.g. iOS Safari standalone) */
body.pwa-standalone .top-nav,
body.pwa-standalone .site-footer,
body.pwa-standalone #downloadBtn {
    display: none !important;
}