/* ======= Cards ======= */
.card {
    /* Background and glass effect moved to section level */
    padding: var(--space-10);
    margin-bottom: var(--space-6);
    position: relative;
    z-index: var(--card-zindex);
}

/* Special rule for cards inside main content columns to override the default card padding */
.main-content-columns .card {
    /* Adjust padding for column context */
    padding: var(--space-4);
}

.card--interactive {
    transition: var(--transition-standard);
    cursor: pointer;
}

.card--interactive:hover {
    transform: var(--card-interactive-hover-transform);
    background-color: var(--glass-background-color-hover);
    border-color: var(--glass-border-color-hover);
}

.card::before,
.card::after {
    display: none;
}

/* == Base styles for elements inside ANY card == */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: var(--color-text-white-primary);
    margin-bottom: var(--space-4); /* Keep margin */
}
.card p {
    color: var(--glass-text-color);
    margin-bottom: var(--space-4); /* Keep margin */
}


/* == Styles for CLICKABLE cards (a.card...) == */

/* Ensure the clickable card container itself doesn't force underlines on children */
a.card {
    text-decoration: none;
    color: inherit; /* Children should define their own color */
}

/* Style headings INSIDE a clickable card (a.card > h3) */
a.card h3 {
    color: var(--color-text-white-primary); /* White heading */
    text-decoration: none; /* Explicitly no underline */
}

/* Style paragraphs INSIDE a clickable card (a.card > p) */
a.card p {
    color: var(--glass-text-color); /* Use standard glass text color */
    text-decoration: none; /* Explicitly no underline */
}


/* == Styles for standard links INSIDE a STATIC card (div.card a) == */
.card a:not(.card--interactive) { /* Target links inside cards that are NOT the interactive card itself */
    color: var(--color-text-white-secondary); /* Or a specific link color if desired */
    text-decoration: underline; /* Standard links inside static cards *should* probably be underlined */
}


/* ======= Buttons ======= */
.btn {
    font-family: var(--font-primary);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-medium);
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-standard);
    margin-right: var(--space-4);
    margin-bottom: var(--space-4);
    text-decoration: none;
    display: inline-block;
}

.primary-btn {
    background: var(--color-primary);
    color: var(--color-text-white-primary);
    box-shadow: var(--button-shadow-primary);
}

.primary-btn:hover {
    transform: var(--button-hover-transform);
    box-shadow: var(--button-shadow-primary-hover);
    background: var(--color-primary-dark);
}

/* Disabled state: dim the button and suppress the hover affordances so a
   blocked action (e.g. an asset-class mix that does not total 100%) reads as
   unavailable rather than clickable. */
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Small circular "?" help button: reopens a scenario explainer. Sits next to the
   control it explains (Compare mode button, Flex column header). Uses the same
   translucent palette as the view-mode pills so it reads as part of the app, and
   align-self:center vertically centres it against the taller mode buttons. */
.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    /* Tiny top padding nudges the "?" down so it optically centres -- the glyph's
       ink sits high in the em box, so a perfectly centred line box still reads
       slightly high. */
    padding: 1px 0 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--color-text-white-secondary);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

.help-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-text-white-primary);
}

.primary-btn:disabled:hover {
    background: var(--color-primary);
}

/* Danger button: a full-weight, primary-equivalent button in the error colour,
   for destructive confirms in app dialogs (Reset all data, Delete asset).
   Mirrors .primary-btn rather than the smaller/subtler .reset-btn. */
.danger-btn {
    background: var(--color-error);
    color: var(--color-text-white-primary);
    box-shadow: var(--button-shadow-primary);
}

.danger-btn:hover {
    transform: var(--button-hover-transform);
    box-shadow: var(--button-shadow-primary-hover);
    background: rgba(var(--color-error-rgb), 0.85);
}

.secondary-btn {
    background: var(--secondary-btn-background);
    color: var(--color-text-white-primary);
    box-shadow: var(--button-shadow-small);
    backdrop-filter: var(--glass-backdrop-filter);
    -webkit-backdrop-filter: var(--glass-backdrop-filter);
    border: var(--border-width-standard) solid var(--glass-border-color);
}

.secondary-btn:hover {
    transform: var(--button-hover-transform);
    box-shadow: var(--button-shadow-large);
    background: var(--secondary-btn-hover-background);
}

.text-btn {
    background-color: transparent;
    color: var(--color-text-white-secondary);
    padding: var(--space-2) var(--space-4);
}

.text-btn:hover {
    background-color: var(--color-tag-background);
}

.circular-btn {
    width: var(--circular-btn-size);
    height: var(--circular-btn-size);
    border-radius: var(--radius-round);
    background: var(--gradient-primary);
    color: var(--color-text-white-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-standard);
    font-size: var(--font-size-h3);
    box-shadow: var(--circular-btn-shadow);
}

.circular-btn:hover {
    transform: translateY(var(--button-transform-y)) rotate(var(--circular-btn-rotation));
    box-shadow: var(--circular-btn-hover-shadow);
}

/* New Reset Button Style */
.reset-btn {
    background-color: rgba(var(--color-error-rgb), var(--reset-btn-opacity)); /* Using ERROR color with transparency */
    color: var(--color-text-white-secondary);
    border: var(--border-width-standard) solid var(--reset-btn-border-color);
    padding: var(--space-2) var(--space-4); /* Slightly smaller padding */
    font-size: var(--font-size-small); /* Smaller font size */
    box-shadow: none; /* Remove default button shadow */
}

.reset-btn:hover {
    background-color: rgba(var(--color-error-rgb), var(--reset-btn-opacity-hover)); /* Slightly darker error on hover */
    color: var(--color-text-white-primary);
    border-color: var(--reset-btn-border-color-hover);
    box-shadow: var(--shadow-small); /* Add subtle shadow on hover */
}

/* ======= Colors ======= */
.color-swatch {
    height: var(--color-swatch-height);
    border-radius: var(--radius-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white-primary);
    font-weight: var(--font-weight-medium);
    text-shadow: var(--color-swatch-text-shadow);
}

.color-swatch.primary {
    background: var(--gradient-primary);
}

.color-swatch.secondary {
    background: var(--gradient-secondary);
}

.color-swatch.accent {
    background: var(--gradient-accent);
}

.color-swatch.background {
    background: linear-gradient(var(--gradient-angle-standard), var(--color-swatch-background-light), var(--color-swatch-background-dark));
    color: var(--color-text);
    border: var(--color-background-swatch-border);
}

.color-swatch.card-bg {
    background: var(--glass-background-color);
    color: var(--glass-text-color);
    border: var(--border-width-standard) solid var(--glass-border-color);
}

.color-swatch.text-color {
    background: linear-gradient(135deg, var(--color-text-dark), var(--color-text));
}

/* ======= Animations ======= */
.animation-item {
    height: var(--animation-item-height);
    background-color: var(--animation-item-background);
    border-radius: var(--radius-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
}

.fade-in {
    animation: fadeIn var(--fade-in-duration) forwards;
}

.slide-in {
    animation: slideIn var(--slide-in-duration) forwards;
}

.zoom-in {
    animation: zoomIn var(--zoom-in-duration) forwards;
}

.pulse {
    animation: pulse var(--pulse-duration) infinite;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(var(--slide-in-y-from));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(var(--zoom-in-scale-from));
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(var(--pulse-scale-max)); }
    100% { transform: scale(1); }
}

/* ======= Collapsible Text Sections ======= */
.collapsible-text {
    margin-bottom: var(--space-4);
}

.collapsible-toggle {
    background: none;
    border: none;
    padding: var(--space-2) 0; /* Padding top/bottom only */
    font-family: inherit;
    font-size: var(--collapsible-toggle-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white-secondary); /* Subtler color */
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between; /* Push icon to the right */
    align-items: center;
    margin-bottom: var(--space-2);
    transition: color 0.2s ease;
}

.collapsible-toggle:hover {
    color: var(--color-text-white-primary);
}

.collapsible-toggle .toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: var(--collapsible-toggle-icon-size);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-left: var(--space-2); /* Slight indent for content */
    border-left: var(--collapsible-border-width) solid var(--collapsible-border-color);
    margin-left: var(--space-1); /* Align border */
}

.collapsible-text.expanded > .collapsible-content {
    max-height: var(--collapsible-content-max-height);
}

.collapsible-text.expanded > .collapsible-toggle .toggle-icon {
    transform: rotate(var(--collapsible-rotation));
}

/* Moved from index.html */
.section-subtitle {
    font-size: var(--section-subtitle-font-size);
    margin-bottom: var(--space-4); /* Increased margin */
    color: var(--color-text-white-primary); /* Match card title color */
    text-align: center;
}

/* Add more space after subtitles before charts */
.section-subtitle + #type-chart-container,
.section-subtitle + #allocation-chart-container,
.section-subtitle + .chart-row {
    margin-top: var(--space-10); /* Increased from space-6 to space-10 */
}

/* ======= Chart Pair Titles ======= */
.chart-pair-title {
    color: var(--color-text-white-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    text-align: center;
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
}

/* ======= Section-specific Current/Hypothetical Headers ======= */
/* Current / Hypothetical labels, repeated above each chart pair so each pair is
   self-labelling. Hidden in single/current-only mode (rule below). */
.insight-section-headers {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-6);
}

/* Hide section headers in current mode since they're only relevant for comparison */
.current-view-charts-centered .insight-section-headers {
    display: none;
}

.insight-section-header-current,
.insight-section-header-hypothetical {
    color: var(--color-text-white-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    text-align: center;
    flex: 1;
    padding: var(--space-2) 0;
    position: relative;
    letter-spacing: -0.01em;
}

/* Add subtle underline effect */
.insight-section-header-current::after,
.insight-section-header-hypothetical::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-text-white-secondary), transparent);
    opacity: 0.6;
}