/* ============================================================
   EPRA BPR Database – stylesheet
   Tokens adopted from the official EPRA Design System.
   ============================================================ */

.epra-bpr-app,
.epra-bpr-app *,
.epra-bpr-app *::before,
.epra-bpr-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ---- Official EPRA palette ---- */
    --epra-blue:        #12497F;
    --epra-mid-blue:    #2274BC;
    --epra-light-blue:  #69AAF3;
    --epra-orange:      #EBA61C;
    --epra-grey:        #C6C5C2;
    --epra-grey-light:  #DFDFE0;

    /* Extended neutrals */
    --epra-ink:         #0E2F54;
    --epra-paper:       #FFFFFF;
    --epra-paper-tint:  #ECEEF1;
    --epra-grey-50:     #F4F4F3;
    --epra-grey-100:    #DFDFE0;
    --epra-grey-200:    #C6C5C2;
    --epra-grey-400:    #7E7E7B;
    --epra-grey-500:    #5A5A57;
    --epra-grey-700:    #232322;

    /* Blue scale */
    --blue-50:          #EAF2FB;
    --blue-100:         #CFE1F6;
    --blue-200:         #A8CAEF;
    --blue-300:         #69AAF3;
    --blue-400:         #3E8AD8;
    --blue-500:         #2274BC;
    --blue-700:         #12497F;
    --blue-800:         #0E3A66;

    /* Semantic */
    --color-bg:         var(--epra-paper-tint);
    --color-surface:    var(--epra-paper);
    --color-fg:         var(--epra-blue);
    --color-fg-strong:  var(--epra-ink);
    --color-fg-muted:   var(--epra-grey-500);
    --color-fg-subtle:  var(--epra-grey-400);
    --color-border:     var(--epra-grey-100);
    --color-divider:    var(--epra-grey-100);

    /* Typography */
    --font: 'Overpass', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fw-thin: 100; --fw-extralight: 200; --fw-light: 300;
    --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

    /* Spacing (4px grid) */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px;

    /* Radii */
    --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
    --radius-xl: 16px; --radius-pill: 999px;

    /* Shadows — tinted with EPRA blue */
    --shadow-xs: 0 1px 2px rgba(18, 73, 127, 0.06);
    --shadow-sm: 0 1px 3px rgba(18, 73, 127, 0.08), 0 1px 2px rgba(18, 73, 127, 0.04);
    --shadow-md: 0 4px 12px rgba(18, 73, 127, 0.08), 0 2px 4px rgba(18, 73, 127, 0.04);
    --shadow-lg: 0 12px 28px rgba(18, 73, 127, 0.10), 0 4px 8px rgba(18, 73, 127, 0.05);

    /* Motion */
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
    --dur:  180ms;

    /* Layout */
    --container-max: 1240px;
    --container-pad: clamp(20px, 4vw, 48px);
}


@keyframes medalPop {
    0%   { opacity: 0; transform: scale(0.4) translateY(12px); }
    55%  { opacity: 1; transform: scale(1.06) translateY(-3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pillIn { to { opacity: 1; transform: translateY(0); } }
@keyframes medalIn {
    from { opacity: 0; transform: scale(0.85) rotate(-6deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.epra-bpr-app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font);
    font-weight: var(--fw-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-fg-strong);
    background: var(--color-bg);
    min-height: 100vh;

& a { color: inherit; text-decoration: none; }


/* ============================================================
   HERO
   ============================================================ */
& .hero { background: var(--epra-blue); color: #FFFFFF; }


& .hero-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-12) var(--container-pad);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-12);
    align-items: stretch;
}


& .hero-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    max-width: 720px;
}


& .hero-link { display: block; }


& .eyebrow {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: var(--space-5);
}


& .hero h1 {
    font-family: var(--font);
    font-weight: var(--fw-thin);
    font-size: clamp(40px, 5.4vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-4);
    color: #ffffff;
}


& .hero-sub {
    font-weight: var(--fw-light);
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px;
}


& .hero-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 11px 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

& .hero-cta::after {
    content: '\2192';
    margin-left: 10px;
    color: var(--epra-orange);
    font-size: 15px;
    transition: transform var(--dur) var(--ease);
}

& .hero-cta:hover,
& .hero-cta:focus { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; }

& .hero-cta:hover::after { transform: translateX(4px); }


/* The two hero CTAs sit side by side, wrapping on narrow screens. */
& .hero-cta-row {
    display: flex;
    align-self: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
}


/* Secondary CTA: filled orange accent (vs the primary's ghost outline),
   with a download-style down arrow. */
& .hero-cta-secondary {
    background: var(--epra-orange);
    border-color: var(--epra-orange);
    color: var(--epra-ink);
    font-weight: var(--fw-semibold);
}

& .hero-cta-secondary::after {
    content: '\2193';
    color: var(--epra-ink);
}

& .hero-cta-secondary:hover,
& .hero-cta-secondary:focus {
    background: #F2B43F;
    border-color: #F2B43F;
    color: var(--epra-ink);
}

& .hero-cta-secondary:hover::after { transform: translateY(3px); }


& .hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
}


& .brand-mark { display: block; line-height: 0; transition: opacity var(--dur) var(--ease); }

& .brand-mark img { display: block; width: 64px; height: 64px; }

& .brand-mark:hover { opacity: 0.85; }


& .hero-stats { display: flex; gap: var(--space-10); align-items: flex-end; }

& .hero-stat { text-align: right; }

& .hero-stat-value {
    font-weight: var(--fw-thin);
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}

& .hero-stat-value .placeholder { color: rgba(255, 255, 255, 0.42); font-style: italic; }

& .hero-stat-label {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}


/* ============================================================
   MAIN + VIEW LAYER
   ============================================================ */
& main {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-12) var(--container-pad) var(--space-16);
    position: relative;
}


& .view {
    display: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

& .view.view-active { opacity: 1; transform: translateY(0); }


/* ============================================================
   SECTION HEADS
   ============================================================ */
& .section-head { margin-bottom: var(--space-8); max-width: 800px; }

& .section-head.explore-head { margin-top: 0; }

& .landing-col .section-head { margin-bottom: var(--space-4); }


& .section-eyebrow {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-3);
}


& .section-title {
    font-weight: var(--fw-extralight);
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--epra-blue);
    margin-bottom: var(--space-3);
}


& .section-sub {
    font-size: 15px;
    color: var(--color-fg-muted);
    font-weight: var(--fw-body);
    line-height: 1.55;
}


/* ---- Year picker ---- */
& .year-picker-wrap { position: relative; display: inline-block; }

& .year-picker {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font-family: inherit; font-size: inherit; font-weight: inherit;
    line-height: inherit; letter-spacing: inherit;
    color: var(--epra-blue);
    cursor: pointer;
    padding: 0 22px 2px 8px;
    margin: 0 -2px 0 4px;
    border-bottom: 1px dashed rgba(18, 73, 127, 0.25);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    outline: none;
}

& .year-picker:hover,
& .year-picker:focus {
    border-bottom-color: var(--epra-orange);
    color: var(--epra-orange);
}

& .year-picker-wrap::after {
    content: '';
    position: absolute;
    right: 4px; top: 50%;
    width: 8px; height: 5px;
    pointer-events: none;
    background:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: 4px 5px;
    background-position: 0 0, 4px 0;
    background-repeat: no-repeat;
    color: var(--epra-blue);
    opacity: 0.25;
    transform: translateY(-50%);
    transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .year-picker-wrap:hover::after,
& .year-picker-wrap:focus-within::after {
    opacity: 1;
    color: var(--epra-orange);
}


/* ============================================================
   LANDING — section blocks + shared panel/foot
   ============================================================ */
& .landing-section { margin-bottom: var(--space-8); }


/* Two-column row wrapper: BPR landscape (left, ~60%) + Membership (right, ~40%) */
& .landing-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: stretch;
}

& .landing-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

& .landing-col > .panel { flex: 1; }


& .landing-panel {
    padding: var(--space-6) var(--space-8) var(--space-5);
    display: flex;
    flex-direction: column;
}


& .landscape-chart { width: 100%; min-height: 320px; height: 320px; }

& .country-chart { width: 100%; min-height: 320px; height: 320px; }


& .landscape-foot {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
    font-size: 12px;
    color: var(--color-fg-muted);
    line-height: 1.5;
}


/* ============================================================
   LANDING — Awards panel (full-width finale: medals | side stats + CTA)
   ============================================================ */
& .awards-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-10);
    padding: var(--space-8);
    align-items: center;
}


/* Three medal cards in a row, sized hierarchically */
& .awards-medals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    align-items: end;
    justify-items: center;
}


& .medal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    /* Bouncy entrance — overshoot at 55%, settle by 100% */
    opacity: 0;
    transform: scale(0.4) translateY(12px);
    animation: medalPop 720ms cubic-bezier(0.25, 0.7, 0.4, 1) forwards;
    transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
    /* Per-card animation-delay is set inline by the renderer (120/320/520ms) */
}

& .medal-card:hover {
    /* Subtle lift; do not fight the entrance animation by touching transform
       until after it has finished (animation: forwards keeps the final state). */
    filter: brightness(1.04);
}

& .medal-card:hover .medal-img { transform: translateY(-3px); }

& .medal-card .medal-img { transition: transform var(--dur) var(--ease); }

& .medal-card:focus-visible {
    outline: 2px solid var(--epra-orange);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
}




& .medal-img {
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(18, 73, 127, 0.18));
    user-select: none;
    -webkit-user-drag: none;
}


& .medal-count {
    font-weight: var(--fw-thin);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--epra-ink);
    font-variant-numeric: tabular-nums;
}


& .medal-label {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}


/* Hierarchical sizing — Gold > Silver > Bronze */
& .medal-gold   .medal-img { width: 138px; height: 138px; }

& .medal-gold   .medal-count { font-size: 44px; margin-top: var(--space-4); }

& .medal-gold   .medal-label { margin-top: var(--space-2); }


& .medal-silver .medal-img { width: 108px; height: 108px; }

& .medal-silver .medal-count { font-size: 36px; margin-top: var(--space-3); }

& .medal-silver .medal-label { margin-top: 6px; }


& .medal-bronze .medal-img { width: 88px;  height: 88px; }

& .medal-bronze .medal-count { font-size: 30px; margin-top: var(--space-3); }

& .medal-bronze .medal-label { margin-top: 6px; }


/* Right column: stat tiles stacked + CTA underneath */
& .awards-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-self: stretch;
    justify-content: center;
}


& .awards-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


& .awards-tile {
    padding: var(--space-4) var(--space-5);
    background: var(--epra-paper-tint);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}


& .awards-tile-label {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-2);
}


& .awards-tile-value {
    font-weight: var(--fw-light);
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--epra-blue);
    font-variant-numeric: tabular-nums;
}

& .awards-tile-value em {
    font-style: italic;
    font-weight: var(--fw-light);
}

& .awards-tile-value .cur {
    font-weight: var(--fw-thin);
    font-size: 26px;
    margin-right: 2px;
}

& .awards-tile-value .unit {
    font-size: 14px;
    color: var(--color-fg-muted);
    margin-left: 2px;
    font-weight: var(--fw-light);
}

& .awards-tile-value.awards-tile-empty {
    font-size: 14px;
    font-weight: var(--fw-body);
    font-style: italic;
    color: var(--color-fg-subtle);
}


& .awards-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 22px;
    background: var(--epra-blue);
    color: #FFFFFF;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.03em;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

& .awards-cta::after {
    content: '\2193';
    color: var(--epra-orange);
    font-size: 15px;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .awards-cta:hover,
& .awards-cta:focus {
    background: var(--epra-orange);
    color: #FFFFFF;
}

& .awards-cta:hover::after {
    color: #FFFFFF;
    transform: translateY(3px);
}

& .awards-cta:active { transform: translateY(1px); }


/* Awards is the page finale — give it a touch more breathing room above */
& .landing-section-awards { margin-top: var(--space-8); }


/* ============================================================
   AWARDS DETAIL VIEW — full winners list, grouped by tier
   ============================================================ */
& .awards-detail-head { margin-bottom: var(--space-8); max-width: 800px; }


& .awards-detail-tiers {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}


& .awards-detail-tier {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6) var(--space-8) var(--space-8);
    border-left: 4px solid transparent;
    scroll-margin-top: var(--space-8);
}

& .awards-detail-tier-gold { border-left-color: var(--epra-orange); }

& .awards-detail-tier-silver { border-left-color: var(--epra-grey-200); }

& .awards-detail-tier-bronze { border-left-color: #B07A3E; }


& .awards-detail-tier-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-divider);
}


& .awards-detail-tier-medal {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(18, 73, 127, 0.16));
    user-select: none;
    -webkit-user-drag: none;
    flex-shrink: 0;
}


& .awards-detail-tier-title {
    font-weight: var(--fw-extralight);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--epra-blue);
}


& .awards-detail-tier-count {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}


& .awards-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-2) var(--space-4);
}


& .awards-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

& .awards-detail-item:hover {
    background: var(--blue-50);
    transform: translateX(2px);
}


& .awards-detail-name {
    font-size: 14.5px;
    font-weight: var(--fw-medium);
    color: var(--epra-ink);
    line-height: 1.3;
}


& .awards-detail-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}


& .awards-detail-country {
    font-size: 12px;
    color: var(--color-fg-muted);
}


& .awards-detail-tag {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--epra-mid-blue);
    background: var(--blue-50);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}


& .awards-detail-empty {
    padding: var(--space-4) 0;
    font-size: 13.5px;
    color: var(--color-fg-subtle);
    font-style: italic;
}


& .awards-detail-loading {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-fg-muted);
    font-size: 13px;
}


@media (max-width: 720px) {
    & .awards-detail-tier { padding: var(--space-5); }

    & .awards-detail-tier-title { font-size: 22px; }

    & .awards-detail-tier-medal { width: 36px; height: 36px; }

    & .awards-detail-grid { grid-template-columns: 1fr; }

}


/* ============================================================
   LANDING — tiles
   ============================================================ */
& .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }


& .tile {
    position: relative;
    padding: var(--space-8) var(--space-6) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}


& .tile-active { cursor: pointer; }

& .tile-active:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--epra-mid-blue);
}

& .tile-active:hover .tile-arrow { transform: translateX(6px); color: var(--epra-orange); }


& .tile-disabled { opacity: 0.55; }


& .tile-number {
    font-family: var(--font);
    font-weight: var(--fw-thin);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--blue-200);
    margin-bottom: var(--space-5);
    transition: color var(--dur) var(--ease);
}

& .tile-active:hover .tile-number { color: var(--epra-blue); }


& .tile-title {
    font-weight: var(--fw-light);
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--epra-blue);
    margin-bottom: var(--space-3);
}


& .tile-desc {
    font-size: 14px;
    color: var(--color-fg-muted);
    font-weight: var(--fw-body);
    margin-bottom: var(--space-6);
    flex: 1;
    line-height: 1.5;
}


& .tile-arrow {
    display: inline-block;
    font-size: 13px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    color: var(--epra-mid-blue);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .tile-disabled .tile-arrow {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-subtle);
}


/* ============================================================
   SHARED — back link, panels, filter row, selects
   ============================================================ */
& .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-5);
    transition: color var(--dur) var(--ease);
}

& .back-link:hover { color: var(--epra-mid-blue); }


& #view-company > .panel,
& #view-kpi > .panel,
& #view-country > .panel { margin-bottom: var(--space-6); }

& #view-company > .panel:last-child,
& #view-kpi > .panel:last-child,
& #view-country > .panel:last-child { margin-bottom: 0; }


& .panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}


& .filter-panel { padding: var(--space-6) var(--space-8); }


& .filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    align-items: end;
}


& .filters-row-4 {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-5);
}


& .field { min-width: 0; }


& label {
    display: block;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-3);
}


& select:not(.year-picker) {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 12px 40px 12px 16px;
    font-family: var(--font);
    font-weight: var(--fw-body);
    font-size: 15px;
    color: var(--epra-ink);
    background-color: #FFFFFF;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-fg-muted) 50%),
        linear-gradient(135deg, var(--color-fg-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% + 1px),
        calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

& select:not(.year-picker):hover:not(:disabled) { border-color: var(--epra-mid-blue); }

& select:not(.year-picker):focus:not(:disabled) {
    border-color: var(--epra-mid-blue);
    box-shadow: 0 0 0 2px var(--epra-light-blue);
}

& select:not(.year-picker):disabled { color: var(--color-fg-muted); cursor: wait; }


& .filter-reset {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: 12px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    color: var(--epra-mid-blue);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

& .filter-reset:hover { color: var(--epra-orange); }


/* ============================================================
   COMPANY VIEW
   ============================================================ */
& .company-meta {
    margin-top: var(--space-5);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-height: 24px;
}


& .pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    color: var(--epra-blue);
    background: var(--blue-50);
    border-radius: var(--radius-pill);
    opacity: 0;
    transform: translateY(2px);
    animation: pillIn var(--dur) var(--ease) forwards;
}

& .pill.pill-accent { color: #FFFFFF; background: var(--epra-blue); }




& .chart-panel { padding: var(--space-8) var(--space-10) var(--space-10); }


& .chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-divider);
}


& .kpi-eyebrow {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-2);
}


& .chart-head h2 {
    font-weight: var(--fw-extralight);
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--epra-blue);
    margin-bottom: var(--space-2);
    transition: opacity var(--dur) var(--ease);
}


& .kpi-desc {
    font-size: 14px;
    color: var(--color-fg-muted);
    font-weight: var(--fw-body);
    max-width: 520px;
    line-height: 1.5;
    transition: opacity var(--dur) var(--ease);
}


& #view-kpi .kpi-desc { max-width: none; }

& #view-kpi .chart-head > div:first-child { flex: 1; min-width: 0; }


& .chart-head.switching h2,
& .chart-head.switching .kpi-desc { opacity: 0.35; }


& .chart-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    color: var(--color-fg-muted);
    font-size: 12px;
    text-align: right;
}

& .chart-meta strong {
    display: block;
    color: var(--epra-blue);
    font-weight: var(--fw-medium);
    font-size: 14px;
    letter-spacing: 0.005em;
}


& #chart { width: 100%; height: 460px; margin-top: var(--space-2); }


& .chart-empty {
    height: 460px;
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-muted);
    font-size: 14px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--epra-grey-50);
}

& .chart-empty[hidden] { display: none; }


/* ============================================================
   KPI EXPLORER — stats row + chart
   ============================================================ */
& .kpix-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
    margin: var(--space-2) 0 var(--space-6);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}


& .kpix-stat { text-align: left; padding: 0 var(--space-3); }

& .kpix-stat + .kpix-stat { border-left: 1px solid var(--color-divider); }


& .kpix-stat-value {
    font-weight: var(--fw-thin);
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--epra-blue);
    margin-bottom: var(--space-1);
    font-variant-numeric: tabular-nums;
}

& .kpix-stat-sub {
    font-size: 11px;
    color: var(--color-fg-muted);
    font-weight: var(--fw-body);
    margin-bottom: var(--space-2);
    line-height: 1.3;
    min-height: 14px;
}

& .kpix-stat-label {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}


& #chart-kpix { width: 100%; height: 560px; margin-top: var(--space-2); }

& #kpix-empty { height: 360px; margin-top: var(--space-2); }


/* ============================================================
   COUNTRY EXPLORER
   ============================================================ */
& .cx-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
    margin: var(--space-2) 0 var(--space-8);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}


& .cx-stat { text-align: left; padding: 0 var(--space-4); }

& .cx-stat + .cx-stat { border-left: 1px solid var(--color-divider); }


& .cx-stat-value {
    font-weight: var(--fw-thin);
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--epra-blue);
    margin-bottom: var(--space-1);
    font-variant-numeric: tabular-nums;
}

& .cx-stat-value-text {
    font-weight: var(--fw-light);
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--epra-blue);
    margin-bottom: var(--space-1);
}

& .cx-stat-sub {
    font-size: 11px;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-2);
    line-height: 1.3;
    min-height: 14px;
}

& .cx-stat-label {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}


& .cx-section-eyebrow {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin: var(--space-2) 0 var(--space-3);
}


/* Title block + animated country outline sit side by side; chart-meta
   stays in its own flex slot at the far right of .chart-head. */
& #view-country .cx-head-main {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}


/* Minimalist animated country outline beside the country title. The
   container starts empty (no shape registered → no outline). The SVG
   width derives from the viewBox aspect ratio so wide countries (USA,
   Norway) stretch sideways without inflating height. */
& #view-country .cx-outline {
    flex: 0 0 auto;
    line-height: 0;
}

& #view-country .cx-outline svg {
    display: block;
    height: 120px;
    width: auto;
    max-width: 300px;
}


@media (max-width: 600px) {
    /* Decorative — hide on tight screens rather than fight for space. */
    & #view-country .cx-outline { display: none; }

}


& #chart-cx { width: 100%; height: 380px; margin-top: var(--space-2); }


& .cx-chart-foot {
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
    font-size: 11.5px;
    color: var(--color-fg-muted);
    line-height: 1.5;
}


/* Members panel */
& .cx-members-panel { padding: var(--space-6) var(--space-8); }


& .cx-members-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
}

& .cx-members-head h3 {
    font-weight: var(--fw-light);
    font-size: 22px;
    letter-spacing: -0.005em;
    color: var(--epra-blue);
}

& .cx-members-count {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}


& .cx-members-list { display: flex; flex-direction: column; }


& .cx-member {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 13px var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    text-decoration: none;
    color: inherit;
}

& .cx-member:hover { background: var(--blue-50); }

& .cx-member:last-child { border-bottom: none; }


& .cx-member-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: var(--fw-medium);
    color: var(--epra-blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


& .cx-member-tags { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; }


& .cx-member-asset {
    font-size: 11.5px;
    font-weight: var(--fw-body);
    color: var(--color-fg-muted);
    padding: 4px 11px;
    background: var(--epra-grey-50);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}


& .cx-member-reit {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    color: var(--epra-blue);
    padding: 4px 9px;
    background: var(--blue-50);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}

& .cx-member-reit.non-reit {
    color: var(--color-fg-muted);
    background: var(--epra-grey-50);
}


& .cx-member-arrow {
    color: var(--color-fg-subtle);
    font-size: 16px;
    margin-left: var(--space-2);
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .cx-member:hover .cx-member-arrow {
    transform: translateX(4px);
    color: var(--epra-orange);
}


/* ============================================================
   CHART ACTIONS — download buttons
   ============================================================ */
& .chart-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-divider);
}

& .chart-actions[hidden] { display: none; }


& .chart-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--epra-blue);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .chart-action::after {
    content: '\2193';
    color: var(--epra-orange);
    font-size: 14px;
    margin-left: 2px;
    transition: transform var(--dur) var(--ease);
}

& .chart-action:hover {
    border-color: var(--epra-mid-blue);
    background: var(--blue-50);
}

& .chart-action:hover::after { transform: translateY(2px); }

& .chart-action:active { transform: translateY(1px); }

& .chart-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

& .chart-action:disabled:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
}

& .chart-action:disabled:hover::after { transform: none; }


/* ============================================================
   FOOTER
   ============================================================ */
& footer {
    border-top: 1px solid var(--color-divider);
    margin-top: var(--space-8);
    padding: var(--space-6) var(--container-pad);
    background: var(--color-surface);
}

& .footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-fg-muted);
    font-size: 12px;
    letter-spacing: 0.01em;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    & .tiles { grid-template-columns: repeat(2, 1fr); }

    & .tile:nth-child(3) { grid-column: span 2; }

    & .kpix-stats { grid-template-columns: repeat(3, 1fr); }

    & .kpix-stat:nth-child(4),
& .kpix-stat:nth-child(5) { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); margin-top: var(--space-4); }

    & .kpix-stat:nth-child(4) { border-left: none; }

    & .cx-stats { grid-template-columns: repeat(2, 1fr); }

    & .cx-stat:nth-child(3),
& .cx-stat:nth-child(4) { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); margin-top: var(--space-4); }

    & .cx-stat:nth-child(3) { border-left: none; }

}


/* Landing two-column row and Awards panel both collapse under 900px */
@media (max-width: 900px) {
    & .landing-row {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    & .awards-panel {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        padding: var(--space-6);
    }

    & .awards-medals { gap: var(--space-3); }

    & .medal-gold   .medal-img { width: 108px; height: 108px; }

    & .medal-gold   .medal-count { font-size: 38px; }

    & .medal-silver .medal-img { width: 86px;  height: 86px; }

    & .medal-silver .medal-count { font-size: 30px; }

    & .medal-bronze .medal-img { width: 70px;  height: 70px; }

    & .medal-bronze .medal-count { font-size: 26px; }

    & .awards-side { justify-content: flex-start; }

    & .awards-cta { align-self: stretch; justify-content: center; }

}


@media (max-width: 720px) {
    & .hero-inner { grid-template-columns: 1fr; gap: var(--space-8); }

    & .hero-right { align-items: flex-start; flex-direction: row; justify-content: space-between; }

    & .hero-stat { text-align: left; }

    & .hero h1 { font-size: 44px; }

    & .tiles { grid-template-columns: 1fr; }

    & .tile:nth-child(3) { grid-column: auto; }

    & .landscape-chart { height: 380px; }

    & .country-chart { height: 320px; }

    & .filter-panel,
& .chart-panel,
& .cx-members-panel,
& .landing-panel { padding: var(--space-5); }

    & .kpix-stats { grid-template-columns: repeat(2, 1fr); padding: var(--space-4) 0; }

    & .kpix-stat { border-left: none !important; border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-3); }

    & .kpix-stat:nth-child(1),
& .kpix-stat:nth-child(2) { border-top: none; padding-top: 0; margin-top: 0; }

    & .cx-stats { grid-template-columns: 1fr; }

    & .cx-stat { border-left: none !important; border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-3); }

    & .cx-stat:nth-child(1) { border-top: none; padding-top: 0; margin-top: 0; }

    & .cx-member-tags { flex-wrap: wrap; }

    & .chart-head { flex-direction: column; }

    & .chart-meta { align-items: flex-start; text-align: left; }

    & #chart,
& .chart-empty { height: 360px; }

    & #chart-kpix { height: 480px; }

    & #chart-cx { height: 320px; }

    & .footer-inner { flex-direction: column; gap: var(--space-1); align-items: flex-start; }

}


/* ============================================================
   COMPANY VIEW v2 — Summary top box + 6 KPI panels
   ============================================================ */

/* ---- Summary top box ---- */
& .company-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-4) var(--space-10);
    margin-bottom: var(--space-6);
}

& .company-summary[hidden] { display: none; }


& .cs-eyebrow {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: var(--space-3);
}


& .cs-name {
    font-weight: var(--fw-extralight);
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--epra-blue);
    margin-bottom: var(--space-4);
}


& .cs-pills {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-height: 24px;
}


& .cs-right {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}


& .cs-mkt {
    text-align: right;
    min-width: 0;
}

& .cs-mkt-value {
    font-weight: var(--fw-thin);
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--epra-ink);
    white-space: nowrap;
}

& .cs-mkt-value span {
    font-size: 17px;
    font-weight: var(--fw-light);
    color: var(--color-fg-muted);
    margin-left: 2px;
}

& .cs-mkt-label {
    margin-top: var(--space-2);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}


& .cs-medals {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

& .cs-medal {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(18, 73, 127, 0.16));
    animation: medalIn 540ms var(--ease) both;
}

& .cs-medal-mi { animation-delay: 120ms; }



/* ---- 6-panel KPI grid ---- */
& .kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

& .kpi-grid[hidden] { display: none; }


/* Mixed asymmetric layout:
   Row 1: Earnings full width (hero)
   Row 2: NAVs 2/3  +  LTV 1/3
   Row 3: NIYs 1/3  +  Vacancy 1/3  +  Cost Ratios 1/3
*/
& .kpi-card[data-panel="earnings"] { grid-column: span 6; min-height: 340px; }

& .kpi-card[data-panel="navs"] { grid-column: span 4; min-height: 340px; }

& .kpi-card[data-panel="ltv"] { grid-column: span 2; min-height: 340px; }

& .kpi-card[data-panel="niys"] { grid-column: span 2; min-height: 320px; }

& .kpi-card[data-panel="vacancy"] { grid-column: span 2; min-height: 320px; }

& .kpi-card[data-panel="costRatios"] { grid-column: span 2; min-height: 320px; }


& .kpi-card[data-panel="earnings"] .kpi-card-chart { min-height: 260px; }


& .kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6) var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

& .kpi-card:hover {
    box-shadow: var(--shadow-md);
}


& .kpi-card-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
}


/* Eyebrow labels (PERFORMANCE, BALANCE SHEET, etc.) hidden per user feedback —
   the KPI titles are self-explanatory and the labels added visual noise. */
& .kpi-card-eyebrow { display: none; }


& .kpi-card-title {
    grid-column: 1;
    font-weight: var(--fw-light);
    font-size: 20px;
    line-height: 1.15;
    color: var(--epra-blue);
    letter-spacing: -0.005em;
}


/* Segmented toggle (absolute / per-share), top-right of card head */
& .kpi-card-toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--epra-grey-50);
    padding: 2px;
}

& .kpi-card-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 12px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    color: var(--color-fg-muted);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .kpi-card-toggle button:hover { color: var(--epra-blue); }

& .kpi-card-toggle button.active {
    background: var(--epra-blue);
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(18, 73, 127, 0.18);
}


/* Row 2 of the panel head — holds the compare-mode metric toggle and the
   "EUR converted" chip side by side, below the title. The main Absolute /
   Per-share toggle stays in column 2 and spans both rows. */
& .kpi-card-row2 {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: 6px;
    min-width: 0;
}


/* Secondary segmented toggle — visually subdued so it does not compete with
   the main Absolute / Per-share control. Only rendered in compare mode for
   NAVs (NTA / NRV / NDV) and Cost Ratios (Excl. / Incl. vacancy). */
& .kpi-card-metric-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border-radius: var(--radius-pill);
    padding: 0;
}

& .kpi-card-metric-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 3px 9px;
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    color: var(--color-fg-muted);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

& .kpi-card-metric-toggle button:hover { color: var(--epra-blue); }

& .kpi-card-metric-toggle button.active {
    background: var(--blue-50);
    color: var(--epra-blue);
}


& .kpi-card-chart {
    flex: 1;
    min-height: 240px;
    width: 100%;
    transition: min-height 250ms cubic-bezier(0.2, 0, 0.2, 1);
}


/* Expand/collapse icon button — sits at the far right of the panel header,
   after the optional Absolute/Per-share toggle. Spans both header rows so it
   stays vertically centred when the secondary metric toggle row appears. */
& .kpi-card-expand {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    appearance: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

& .kpi-card-expand:hover {
    color: var(--epra-blue);
    background: var(--epra-grey-50);
}

& .kpi-card-expand .icon-collapse { display: none; }

& .kpi-card.expanded .kpi-card-expand .icon-expand { display: none; }

& .kpi-card.expanded .kpi-card-expand .icon-collapse { display: inline-block; }


/* Expanded state — card spans the full grid row and the chart grows to
   ~1.5x its default min-height. The grid-column change snaps instantly
   (CSS Grid does not animate column spans); the height grows smoothly
   via the .kpi-card-chart min-height transition above. */
& .kpi-card.expanded {
    grid-column: 1 / -1;
}

& .kpi-card.expanded .kpi-card-chart { min-height: 400px; }

& .kpi-card[data-panel="earnings"].expanded .kpi-card-chart { min-height: 420px; }


& .kpi-card-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-subtle);
    font-size: 13px;
    letter-spacing: 0.04em;
}

& .kpi-card-empty[hidden] { display: none; }


/* When empty, hide the chart container */
& .kpi-card:has(.kpi-card-empty:not([hidden])) .kpi-card-chart { display: none; }


/* ---- Responsive: 1 column on narrow screens ---- */
@media (max-width: 960px) {
    & .kpi-grid { grid-template-columns: 1fr; }

    & .kpi-card[data-panel] { grid-column: span 1; min-height: 300px; }

    & .company-summary {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    & .cs-right {
        justify-content: space-between;
        width: 100%;
    }

    & .cs-mkt { text-align: left; }

    & .cs-mkt-value { font-size: 32px; }

    & .cs-name { font-size: 32px; }

    & .cs-medal { width: 80px; height: 80px; }

}


/* ============================================================
   Phase 4b additions: BPR disclosure chips, EPRA tick, historical styling
   ============================================================ */

/* BPR disclosure status row (inside summary box, full-width row below name + pills) */
& .company-summary {
    grid-template-rows: auto auto;
}

& .cs-left { grid-column: 1; grid-row: 1; }

& .cs-right { grid-column: 2; grid-row: 1; }

& .cs-bpr-status {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}


& .cs-bpr-label {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-right: var(--space-2);
}


& .cs-bpr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    font-size: 11.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .cs-bpr-ok {
    color: #FFFFFF;
    background: var(--epra-blue);
}

& .cs-bpr-missing {
    color: var(--color-fg-subtle);
    background: var(--epra-grey-50);
    border: 1px dashed var(--epra-grey-100);
}

& .cs-bpr-na {
    color: var(--color-fg-subtle);
    background: transparent;
    opacity: 0.55;
}

& .cs-bpr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    line-height: 1;
    font-size: 10px;
    font-weight: var(--fw-bold);
}

& .cs-bpr-fy {
    margin-left: auto;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}


/* EPRA member tick inside the eyebrow */
& .cs-eyebrow-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--epra-blue);
    color: #FFFFFF;
    font-size: 8px;
    font-weight: var(--fw-bold);
    vertical-align: -1px;
    line-height: 1;
}


/* Historical companies in the dropdown — kept selectable but visually muted.
   We mark these client-side via class on <option>; not all browsers honour
   font-style on <option> (Safari ignores it), so we also lighten the colour. */
& .company-select-historical {
    color: var(--color-fg-subtle);
    font-style: italic;
}


/* Asymmetric grid override of company-summary positions:
   The first .company-summary block defined this with a flat 1fr auto layout;
   above we add grid-template-rows. Keep both selectors compatible. */

/* ---- Hide legacy company-view elements that aren't used in v2 ---- */
& #view-company .chart-panel,
& #view-company #chart,
& #view-company #chart-empty,
& #view-company #chart-meta,
& #view-company #kpi-title,
& #view-company #kpi-desc,
& #view-company #company-meta,
& #view-company #kpi-select { display: none; }


/* ============================================================
   BPR disclosure radar — inline in the summary header row
   ============================================================ */

/* The summary box becomes a 3-column grid: identity (left) | radar (center) | market cap + medal (right).
   On narrow screens it collapses to a single column. */
& .company-summary {
    grid-template-columns: minmax(0, 1fr) 220px auto;
    grid-template-rows: auto auto;
    align-items: center;
}


& .cs-left { grid-column: 1; grid-row: 1; }

& .cs-radar { grid-column: 2; grid-row: 1; align-self: center; width: 100%; height: 200px; }

& .cs-right { grid-column: 3; grid-row: 1; }

& .cs-bpr-status { grid-column: 1 / -1; grid-row: 2; }


@media (max-width: 960px) {
    & .company-summary {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }

    & .cs-left,
& .cs-right,
& .cs-radar,
& .cs-bpr-status {
        grid-column: 1;
    }

    & .cs-radar { height: 260px; }

}


/* ============================================================
   Phase 6a — Compare mode
   ============================================================ */

/* +Compare action field — aligns the button with the bottom of the select
   that sits in the column next to it. */
& .field-compare-action { align-self: end; }


/* +Compare pill button — sits next to the company select */
& .compare-btn {
    appearance: none;
    height: 44px;
    padding: 0 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--epra-blue);
    font-family: var(--font);
    font-size: 13px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                background var(--dur) var(--ease);
}

& .compare-btn:hover {
    border-color: var(--epra-mid-blue);
    color: var(--epra-orange);
    background: var(--blue-50);
}

& .compare-btn[hidden] { display: none; }


/* Typeahead search input + dropdown */
& .company-search-field[hidden] { display: none; }

& .company-search-wrap { position: relative; }

& #company-search-input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font);
    font-weight: var(--fw-body);
    font-size: 15px;
    color: var(--epra-ink);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

& #company-search-input:hover:not(:disabled) { border-color: var(--epra-mid-blue); }

& #company-search-input:focus:not(:disabled) {
    border-color: var(--epra-mid-blue);
    box-shadow: 0 0 0 2px var(--epra-light-blue);
}

& #company-search-input:disabled {
    background: var(--epra-grey-50);
    color: var(--color-fg-muted);
    cursor: not-allowed;
}

& .input-shake { animation: inputShake 320ms var(--ease); }



& .company-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 20;
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    /* Subtle scrollbar that does not steal horizontal space (overlay style
       on WebKit; Firefox uses a thin gutter that matches the EPRA palette). */
    scrollbar-width: thin;
    scrollbar-color: var(--epra-grey-200) transparent;
}

& .company-search-dropdown[hidden] { display: none; }

& .company-search-dropdown::-webkit-scrollbar { width: 8px; }

& .company-search-dropdown::-webkit-scrollbar-track { background: transparent; }

& .company-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--epra-grey-200);
    border-radius: 4px;
    border: 2px solid var(--color-surface);
}

& .company-search-dropdown::-webkit-scrollbar-thumb:hover { background: var(--epra-grey-400); }


& .company-search-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

& .company-search-item:hover { background: var(--blue-50); }

& .company-search-name {
    font-size: 14px;
    color: var(--epra-blue);
    font-weight: var(--fw-medium);
}

& .company-search-meta {
    font-size: 11px;
    color: var(--color-fg-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

& .company-search-empty {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--color-fg-muted);
    font-style: italic;
}


/* Chip strip — appears below the filter row in compare mode */
& .compare-chips {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

& .compare-chips[hidden] { display: none; }


& .compare-chip {
    --chip-color: var(--epra-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 6px 0 12px;
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    color: var(--epra-blue);
    font-weight: var(--fw-medium);
}

& .compare-chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--chip-color);
}

& .compare-chip-name { white-space: nowrap; }


& .compare-chip-remove {
    appearance: none;
    border: 0;
    background: transparent;
    width: 22px; height: 22px;
    border-radius: 50%;
    color: var(--color-fg-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

& .compare-chip-remove:hover {
    background: var(--epra-blue);
    color: #FFFFFF;
}


/* Comparison strip — replaces the .company-summary box in compare mode.
   Sticky so the company → colour mapping stays visible while the user
   scrolls down to the lower KPI panels (Vacancy / Cost Ratios / LTV).
   The hero is normal flow so it scrolls out of view, and the strip then
   pins at top: 0. Padding is on the tight side so the pinned element
   does not eat too much viewport. */
& .comparison-strip {
    position: static;
    padding: var(--space-3) var(--space-8) var(--space-4);
    margin-bottom: var(--space-6);
}

& .comparison-strip[hidden] { display: none; }


& .strip-head { margin-bottom: var(--space-4); }

& .strip-eyebrow {
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}


& .strip-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-6);
    align-items: center;
}


/* Card grid: auto-fit with a real min-width so the strip wraps to a second
   row rather than shrinking each card to nothing when 5 cards do not fit. */
& .strip-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}


& .strip-card {
    --card-color: var(--epra-blue);
    display: grid;
    grid-template-areas:
        "dot name medal"
        "dot meta medal"
        "dot mkt  medal";
    grid-template-columns: 5px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: var(--epra-paper-tint);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur) var(--ease);
    min-width: 0;
}

& .strip-card:hover { border-color: var(--epra-mid-blue); }

& .strip-card-dot {
    grid-area: dot;
    align-self: stretch;
    width: 5px;
    background: var(--card-color);
    border-radius: 3px;
}

& .strip-card-name {
    grid-area: name;
    font-size: 14.5px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    color: var(--epra-blue);
    transition: color var(--dur) var(--ease);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

& .strip-card-name:hover { color: var(--epra-orange); }

& .strip-card-meta {
    grid-area: meta;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

& .strip-mkt {
    grid-area: mkt;
    font-weight: var(--fw-thin);
    font-size: 19px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--epra-ink);
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
}

& .strip-mkt span {
    font-size: 11.5px;
    font-weight: var(--fw-light);
    color: var(--color-fg-muted);
    margin-left: 2px;
}

& .strip-mkt-empty { color: var(--color-fg-subtle); font-style: italic; font-size: 13px; }

& .strip-card-medal {
    grid-area: medal;
    display: flex;
    align-items: center;
}

& .strip-medal {
    width: 48px; height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(18, 73, 127, 0.16));
}


& .strip-radar {
    width: 100%;
    height: 280px;
    align-self: center;
}


/* "Shown in {CCY}" chip in panel header (compare mode, currency KPIs only).
   Sits inside .kpi-card-row2 alongside the metric toggle. */
& .kpi-card-head .eur-converted {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    font-size: 10.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--epra-orange);
    background: rgba(235, 166, 28, 0.10);
    border: 1px solid rgba(235, 166, 28, 0.32);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}


/* Clickable variant: the badge doubles as the anchor<->EUR currency toggle.
   Only applied when there is an alternative to switch to (anchor not EUR), so
   the plain label form reads as "just the unit". */
& .kpi-card-head .eur-converted--toggle {
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

& .kpi-card-head .eur-converted--toggle:hover {
    background: rgba(235, 166, 28, 0.20);
    border-color: rgba(235, 166, 28, 0.55);
}

& .kpi-card-head .eur-converted--toggle:focus-visible {
    outline: 2px solid var(--epra-orange);
    outline-offset: 2px;
}

& .eur-converted-swap {
    font-size: 12px;
    line-height: 1;
    opacity: 0.85;
}


/* Quiet FX source footnote under a currency chart (compare mode, only when a
   conversion actually happened). Lighter/smaller than the badge. */
& .kpi-card .kpi-card-caption {
    margin-top: 6px;
    font-size: 10px;
    font-weight: var(--fw-body);
    letter-spacing: 0.02em;
    color: var(--color-fg-muted);
    opacity: 0.8;
}


/* Responsive: compare UI on narrow screens */
@media (max-width: 900px) {
    & .compare-btn { width: 100%; }

    & .strip-body { grid-template-columns: 1fr; }

    & .strip-radar { height: 280px; }

}

}