:root {
    /* colors */
    --primary-colour: #182854;
    --grey-bg: #E5E5E5;
    /* pr etu - easy to use for all */
    --pr-1-light: #b06ba9;
    --pr-1-dark: #7f2c87;
    --pr-1-contrast: #914896;
    --pr-1-bg: #F1E8F2;
    /* pr ff - freight friendly */
    --pr-2-light: #9a95c8;
    --pr-2-dark: #645faa;
    --pr-2-contrast: #654FAA;
    --pr-2-bg: #EFEDF6;
    /* pr le - low emissions */
    --pr-3-light: #57c8f4;
    --pr-3-dark: #0193df;
    --pr-3-contrast: #2473A8;
    /* --pr-3-contrast: #2D90D1; */
    --pr-3-bg: #E3F6FC;
    /* pr oto - optimised train operations */
    --pr-4-light: #75c9bc;
    --pr-4-dark: #05a7be;
    --pr-4-contrast: #1E7580;
    /* --pr-4-contrast: #2797A5; */
    --pr-4-bg: #E6F5F8;
    /* pr era - efficient and reliable assets*/
    --pr-5-light: #77c483;
    --pr-5-dark: #1b9e4d;
    --pr-5-contrast: #227C45;
    /* --pr-5-contrast: #25894B; */
    --pr-5-bg: #E8F5EC;
    /* ui colors */
    --muted-text-color: #757575;
    --separator-color: #666;
    --border-color: #ccc;
    --modal-close-color: #444;
    --light-bg: #f1f1f1;
    --light-bg-hover: #e1e1e1;
    --modal-header-bg: #f2f2f2;
    --section-bg: #fafafa;
    --table-header-bg: #eee;
    --tooltip-bg: #333;
    --white: #fff;
    --black: #000;
    /* fonts */
    --default-font-family: 'Barlow', sans-serif;
    --default-font-size: 15px;
    --smaller-font-size:12px;
    --default-font-color: #002060;
    --grid-header-font-size: 16px;
    --grid-item-font-size: 15px;
    --footer-font-size: 12px;
    --popup-header-font-size: 17px;
}

body {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    color: var(--default-font-color);
    /* margin: 20px; */
}

/* ---------- Landing Page Header ---------- */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    color: var(--primary-colour);
    gap: 20px;
}

#priority-container {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

.priority-item {
    text-align: center;
    width: 130px;
}

.priority-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding-top: 5px;
    /* margin-bottom: -20px; */
    color: var(--muted-text-color);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.priority-icon
{
    width: 75px;
}

.priority-btn p {
    font-size: var(--default-font-size);
    font-weight: bold;
    margin-top: 2px;
}

/* ===== Medium screens: shrink icons, keep row ===== */
@media(max-width:1200px){
    .priority-icon{
        width:50px;
        height:50px;
    }
}

/* ===== Tablet: header reflow ===== */
@media(max-width:980px){

    .header-container{
        flex-wrap:wrap;
        align-items:flex-start;
    }

        .header-container h2{
            flex: 1;
            order: 1;
            margin: 0;
        }

        .header-container img{
            order: 2;
            flex-shrink: 0;
            margin-left: auto;
        }

    #priority-container{
        order: 3;
        flex: 0 0 100%;
        margin-top: 10px;
    }



}

/* ===== Mobile: priorities become list ===== */
@media(max-width:700px){
    #priority-container{
        flex-wrap:wrap;
    }

    .priority-icon{
        width:50px;
        height: 50px;
    }

    .priority-item{
        width:100%;
    }

    .priority-btn{
        display:flex;
        flex-direction: row-reverse;
        align-items:center;
        height:auto;
        margin:0;
        padding: 0;
    }

        .priority-btn p {
            margin: 0 0 0 10px;
        }

    .entity-filter{
        flex-direction: column;
        align-items: start !important;
        margin-top: 5px ;
    }

    #entity-filter {
        width: 100%;
    }
}

/* ---------- Landing Page Grid ---------- */
.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    padding: 0px 10px;
}

.grid-header {
    font-size: var(--grid-header-font-size);
    font-weight: bold;
    padding: 8px;
    text-align: center;
}

.grid-item {
    padding: 10px;
    font-size: var(--grid-item-font-size);
    display: flex;
    align-items: center;
}

    .grid-item#goal {
        background: white;
        margin: 5px;
        cursor: pointer;
        font-weight: bold;
        position: relative;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        align-items: center;
        transition: background 0.2s, transform 0.1s;
    }

        .grid-item#goal:hover {
            background: transparent;
            transform: scale(1.02);
        }

        .grid-item#goal:active {
            transform: scale(0.98);
        }

        .grid-item#goal::before {
            content: '';
            position: absolute;
            top: 50%;
            right: -6px;
            transform: translateY(-50%);
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 6px solid white;
            z-index: 1;
        }

        .grid-item#goal::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -10px;
            transform: translateY(-50%);
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid var(--goal-bubble-colour);
        }

.goal-arrow {
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 14px;
    opacity: 0.6;
}

.grid-item#goal:hover .goal-arrow {
    opacity: 1;
}

.grid-item#why{
    color: var(--primary-colour);
}

.grid-item#vision {
    background: white;
    margin: 5px;
}

@media(max-width:700px){
    .grid{
        grid-template-columns:1fr 2fr 1fr;
    }
    .grid-header{
        font-size:var(--default-font-size);
    }
}


/* ---------- Landing page footer ---------- */

.footer-container{
    display: flex;
    justify-content: start;
    margin-top: 20px;
    font-size: var(--footer-font-size);
    color: var(--default-font-color);
    gap: 5px;
}


/* ---------- Stepping View ---------- */
#stepping-view.hidden {
    display: none;
}

#stepping-view {
    display: flex;
    flex-direction: column;
    margin-top: 1px;
}

.stepping-view-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* background-color: var(--grey-bg); */
    padding: 10px;
}

.header-spacer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.priority-header{
    display: flex;
    align-items: center;
    gap: 10px;
}

.stepping-view-header h2 {
    color: var(--stepping-priority-contrast, var(--primary-colour));
    margin: 0;
    max-width: 150px;
    word-wrap: break-word;
    line-height: 1.2;
}

.goal-selector {
    display: flex;
    gap: 10px;
    margin: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    overflow-x: auto;
}

.goal-btn {
    padding: 1px 14px;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    border: 2px solid var(--stepping-priority-contrast);
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size) !important;
    color: var(--default-font-color);
}

    .goal-btn.active {
        background: var(--stepping-priority-contrast);
        color: white;
        /* font-weight: bold; */
    }

.goal-separator {
    display: flex;
    align-items: center;
    color: var(--separator-color);
    font-weight: 500;
}

/* Goal grids */
.multi-goal-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.goal-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    background: white;
    border-radius: 4px;
    font-size: var(--default-font-size);
}

.grid-goal-col {
    padding: 10px;
    color: var(--stepping-priority-contrast);
    border: 1px solid var(--stepping-priority-contrast);
    font-weight: bold;
}

.grid-stones-col {
    padding: 2px 0px 0px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--priority-bg);
    border: 1px solid var(--stepping-priority-contrast);
    border-left: none;
}

/* Lanes */
.lane-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.stone {
    background-color: white;
    position: absolute;
    top: 0;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    text-align: center;
    align-content: center;
    border: 2px solid var(--stepping-priority-contrast);
}

    /* stepping stones */
    .stone:hover rect {
        fill: white;
    }

.timeline-lane {
    position: relative;
    height: 27px;
    margin-bottom: 6px;
}

.relations-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2; /* above stones */
}

.action-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: var(--default-font-size);
    font-family: var(--default-font-family);
    cursor: pointer;
    height: 34px;
    transition: background 0.15s, colour 0.15s;
}

.back-btn {
    padding: 8px 16px;
    border: 1px solid var(--stepping-priority-contrast);
    background: transparent;
    color: var(--stepping-priority-contrast);
    border-radius: 6px;
}

    .back-btn:hover {
        opacity: 0.85;
    }

    .back-btn:active {
        opacity: 0.7;
    }

.copy-url-btn {
    padding: 8px 16px;
    border: 1px solid var(--stepping-priority-contrast);
    background: transparent;
    color: var(--stepping-priority-contrast);
    border-radius: 6px;
}

    .copy-url-btn:hover { opacity: 0.85; }
    .copy-url-btn:active { opacity: 0.7; }

/* Header buttons - fixed styling (not priority-dependent) */
.header-buttons #back-btn,
.header-buttons #copy-url-btn {
    border-color: var(--default-font-color);
    color: var(--default-font-color);
    font-size: var(--default-font-size);
}

.stepping-toolbar-buttons{
    display:flex;
    align-items:center;
    gap:10px;
    margin: 15px;
}

.share-btn, .contact-btn {
    background-color: var(--stepping-priority-light);
    border: 1px solid var(--stepping-priority-light);
    color: white;
    font-family: var(--default-font-family);
}

    .share-btn:active {
        transform:scale(0.97);
    }

.divider {
    display:flex;
    justify-content: space-between;
}

    .divider p {
        margin: 0;
        font-size: var(--default-font-size);
        color: var(--default-font-color);
    }

.status-toggle {
    display: flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    padding-right:10px;
    margin-bottom: 5px;
}

/* Switch container */
.switch {
    position:relative;
    display:inline-block;
    width:40px;
    height:20px;
}

    /* Hide default checkbox */
    .switch input {
        opacity:0;
        width:0;
        height:0;
    }

/* Slider background */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-color);
    transition: 0.3s;
    border-radius: 20px;
}

    /* Slider knob */
    .slider:before {
        position:absolute;
        content:"";
        height:16px;
        width:16px;
        left:2px;
        bottom:2px;
        background:white;
        border-radius:50%;
        transition:0.3s;
    }

/* Checked (ON) state */
.switch input:checked + .slider {
    background:var(--stepping-priority-light);
}

    .switch input:checked + .slider:before {
        transform:translateX(20px);
    }

.switch-label {
    font-size:var(--default-font-size);
    color:var(--stepping-priority-contrast);
    font-weight:500;
}

/* Stepping Stone View - List View */

.ss-list-grid{
    display:grid;
    grid-template-columns:4fr 4fr 1fr;
    font-size:var(--default-font-size);
    padding:0 10px;
}

.ss-list-grid-header{
    font-weight:bold;
    font-size:var(--grid-header-font-size);
    border-bottom: 2px solid grey;
    padding: 5px 0;
}

.ss-list-grid-item{
    border-bottom: 1px solid grey;
    padding: 5px 0;
}

.ss-list-grid-link{
    cursor:pointer;
    text-decoration:underline;
}
    .ss-list-grid-link:hover{
        opacity:0.8;
    }


/* Stepping Stone Details Modal */
.modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    background: rgba(0,0,0,0.4);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:40px;
    z-index:999;
}

    .modal.hidden {
        display:none;
    }

.modal-content {
    background:white;
    width:80%;
    max-height: none !important;
    overflow: visible !important;
    padding:20px;
    border-radius:6px;
    position: relative;
}

.modal-close-x {
    position:absolute;
    top: 4px;
    right:10px;
    width:28px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:50%;
    font-size:25px;
    font-weight:bold;
    cursor:pointer;
    color:var(--modal-close-color);
    background:var(--light-bg);
    transition:background 0.15s, color 0.15s;
}

    .modal-close-x:hover {
        background:var(--light-bg-hover);
        color:var(--black);
    }

#modal-body {
    margin-top: 20px;
}

.modal-footer{
    display: flex;
    justify-content: end;
    align-items: end;
    gap: 10px;
}

.modal-footer-id{
    margin-right: auto;
    font-size: var(--footer-font-size);
    color: var(--default-font-color);
}

.stone-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0.5rem;
    padding:0 0.5rem;
}

.stone-nav-link{
    background:none;
    border:none;
    padding:0;
    color:var(--stepping-priority-contrast);
    cursor:pointer;
    font-size:var(--default-font-size);
    font-family: var(--default-font-family);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-bottom 0.15s ease, color 0.15s ease;
}

    .stone-nav-link:hover{
        border-bottom:1px solid var(--stepping-priority-dark);
        color:var(--stepping-priority-dark);
    }


.stone-modal-header {
    background:var(--modal-header-bg);
    padding:5px;
    border-radius:4px;
    margin-bottom:5px;
}

.stone-modal-header-content {
    display:grid;
    grid-template-columns: 1fr 2fr;
    align-items:center;
    justify-content: space-between;
    gap:20px;
}

.stone-modal-title {
    background: var(--stepping-priority-dark);
    padding:8px 14px;
    border-radius:4px;
    color:white;
    font-size: var(--popup-header-font-size);
}

.stone-modal-subtitle {
    color: var(--stepping-priority-dark);
    font-size:var(--popup-header-font-size);
}

.stone-modal-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.stone-modal-left {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.stone-modal-right {
    display:flex;
    flex-direction: column;
    gap:5px
}

.stone-modal-section {
    background:var(--section-bg);
    padding:5px;
    border-radius:4px;
}

    .stone-modal-section h3 {
        margin-top:0;
        color: var(--default-font-color);
        margin-bottom: 6px;
    }

    .stone-modal-section #priorities {
        display: flex;
        justify-content: space-between;
    }

    .stone-modal-section .priority-icon{
        margin-right:4px;
    }

    .stone-modal-section #goal {
        font-size: var(--default-font-size);
        color: var(--stepping-priority-dark);
        font-weight: bold;
        padding: 5px;
        margin-bottom: 5px;
    }

    .stone-modal-section #relationship-summary {
        width: 100%;
        min-width: 200px;
        display: block;
        font-size: var(--default-font-size);
    }

.progress-top, .progress-bottom {
    display:flex;
    justify-content:space-between;
    margin-bottom:4px;
}

.progress-bar-container {
    height:28px;
    position:relative;
}

.progress-bar-bg {
    width:100%;
    height:100%;
    background:var(--stepping-priority-bg);
    position:relative;
    overflow:hidden;
}

.progress-bar-fill {
    height:100%;
    background:var(--stepping-priority-light);
}


.progress-update-text{
    margin-top:8px;
    font-size: var(--default-font-size);
}

.stone-modal-section #engagement b {
    color: var(--stepping-priority-dark);
}

.stone-modal-section #flags {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Activities table styling */
.stone-modal-section .activities-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--default-font-color);
}

    .stone-modal-section .activities-table th,
    .stone-modal-section .activities-table td {
        padding: 6px;
        border: 1px solid var(--border-color);
        text-align: left;
    }

    .stone-modal-section .activities-table th {
        background: var(--table-header-bg);
        font-weight: bold;
    }

/* ---------- Responsive Design ---------- */

.stepping-view-header {
    flex-wrap: wrap;
}

.header-spacer {
    flex: 0 0 100%;
    margin-bottom: 10px;
}

.goal-selector {
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-x: visible;
}


/* ---------- D3 ---------- */
.d3-tooltip{
    position:absolute;
    pointer-events: none;
    padding:4px 8px;
    background:var(--tooltip-bg);
    color:var(--white);
    border-radius:4px;
    font-size:var(--default-font-size);
    opacity:0;
    z-index:9999;
}

.year-label {
    font-size: 12px;
    fill: var(--separator-color);
}

.stone-label {
    fill: var(--default-font-color);
}

/* Entity filter dropdown */

.greyed{
    opacity:0.3;
    pointer-events:none;
}

.entity-filter{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
    margin-top:4px ;
    margin-bottom:2px;
}

    .entity-filter label{
        color: var(--muted-text-color);
        letter-spacing:0.04em;
    }

.entity-filter-select,
.metadata-filter-select {
    padding: 5px;
    font-size: inherit;
    font-family: inherit;
    color: var(--default-font-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    min-width: 250px;
    max-width: 250px;
}

/* ---------- Stepping View Mode ---------- */
/* Hide priority text labels in stepping view */
#priority-container.stepping-view-mode .priority-btn p {
    display: none;
}

#priority-container.stepping-view-mode .priority-btn {
    height: auto;
    padding: 0;
}

#priority-container.stepping-view-mode .priority-item {
    width: auto;
}

/* Gap between priority images */
#priority-container.stepping-view-mode {
    gap: 8px;
}

/* Consistent height for all header elements in stepping view */
.header-container:has(h3.stepping-view-title) {
    align-items: center;
    flex-wrap: nowrap;
}

.header-container h3.stepping-view-title {
    color: var(--stepping-priority-contrast);
    margin: 0;
    height: 70px;
    width: 160px;
    min-width: 80px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    flex-shrink: 1;
}

#priority-container.stepping-view-mode .priority-icon {
    width: 70px;
    height: 70px;
    background-color: white;
}

.header-container:has(h3.stepping-view-title) #header-logo {
    height: 70px;
    width: auto;
}

/* ALL goals button in header */
.goals-header-with-all {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 5px;
    padding: 0;
}

.goals-header-text {
    font-weight: bold;
    text-align: center;
    padding: 8px 8px 0 8px;
}

.all-goals-btn {
    background: white;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: var(--default-font-size);
    text-align: left;
    position: relative;
    border: 2px solid var(--priority-dark);
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 5px;
    width: calc(100% - 10px);
    box-sizing: border-box;
}

    .all-goals-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -6px;
        transform: translateY(-50%);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid white;
        z-index: 1;
    }

    .all-goals-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid var(--priority-dark);
    }

    .all-goals-btn:hover {
        background: transparent;
        transform: scale(1.02);
    }

    .all-goals-btn:active {
        transform: scale(0.98);
    }

    .all-goals-btn .goal-arrow {
        position: absolute;
        right: 8px;
        bottom: 5px;
        font-size: 14px;
        opacity: 0.6;
    }

    .all-goals-btn:hover .goal-arrow {
        opacity: 1;
    }

/* dropdown Filter controls styles */
.filter-controls-wrapper {
    display: flex;
    gap: 3px;
    align-items: center;
    flex: 1;
}

.filter-label {
    font-weight: 500;
    color: var(--muted-text-color);
    margin-right: 15px;
}

.filter-group {
    display: flex;
    gap: 3px;
    align-items: center;
}

.filter-group-metadata {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-left: 15px;
}

/* Header buttons container */
.header-buttons {
    display: none;
    gap: 10px;
    margin-left: auto;
}

    .header-buttons.visible {
        display: flex;
    }

/* Mobile responsive */
@media(max-width:700px) {
    .all-goals-btn {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* Responsive - Tablet */
@media (max-width: 980px) {
    .header-container h3.stepping-view-title {
        width: 120px;
        height: 55px;
        font-size: 16px;
    }

    #priority-container.stepping-view-mode .priority-icon {
        width: 55px;
        height: 55px;
        background-color: white;
    }

    .header-container:has(h3.stepping-view-title) #header-logo {
        height: 55px;
    }

    #priority-container.stepping-view-mode {
        gap: 5px;
    }
}

/* Responsive - Mobile */
@media (max-width: 700px) {
    .header-container h3.stepping-view-title {
        width: 80px;
        height: 40px;
        font-size: 12px;
    }

    #priority-container.stepping-view-mode .priority-icon {
        width: 40px;
        height: 40px;
        background-color: white;
    }

    .header-container:has(h3.stepping-view-title) #header-logo {
        height: 40px;
    }

    #priority-container.stepping-view-mode {
        gap: 3px;
    }
}

/* ---------- Info Icon Tooltip ---------- */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--primary-colour);
    background: var(--white);
    color: var(--default-font-color);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    vertical-align: baseline;
    position: relative;
    top: -1px;
    margin-left: 1px;
    line-height: 1;
}

.info-link {
    color: white;
    text-decoration: underline;
}

.info-tooltip {
    display: none;
    position: absolute;
    background: var(--tooltip-bg);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: var(--default-font-size);
    max-width: 300px;
    z-index: 1000;
    font-weight: normal;
}

.info-tooltip.visible {
    display: block;
}