/* ============================================================
   GLOBAL THEME VARIABLES
   ============================================================ */

/* Core colour palette for the site's dark–gold theme */
:root {
    --gold: #D4AF37;
    --bright-gold: #FFD700;
    --silver: #C0C0C0;
    --dark: #222;
    --dark-grey: #333;
    --less-dark-grey: #555;

    --orange: #FFA500;
    --lime-green: #32CD32;

    /* Icon-specific colours kept separate from main palette */
    --green-icon: limegreen;
    --red-icon: red;
    --orange-icon: orange;
}

/* ============================================================
   BASE RESET & GLOBAL TYPOGRAPHY
   ============================================================ */

/* Page-wide defaults: dark theme, monospace text, and no browser margins */
body {
    background-color: var(--dark-grey);
    color: var(--gold);
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
}

/* Utility class: paragraphs with intentionally no margin */
p.no-margin {
    margin: 0;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

/* Page header: centred title area */
header {
    background-color: var(--dark);
    text-align: center;
    padding: 10px;
}

/* Navigation bar background and spacing */
nav {
    background-color: var(--dark);
    padding: 5px;
}

/* Navigation list: remove browser defaults and centre items */
nav ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Individual navigation items placed horizontally */
nav ul li {
    display: inline-block;
    margin: 0 5px;
}

/* Navigation links: gold text with subtle hover feedback */
nav ul .nav-link {
    color: var(--gold);
    font-size: 1.06rem;
    text-decoration: none;
    transition: background-color 0.3s;
    padding: 4px 8px;
}

/* Hover: dark-grey background with gold outline for definition */
nav ul li a.nav-link:hover,
nav .nav-dropdown > summary.nav-link:hover {
    background-color: var(--dark-grey);
    outline: 1px solid var(--gold);
}

/* Anchor each dropdown to its compact heading. */
nav .nav-dropdown {
    position: relative;
}

nav .nav-dropdown > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

nav .nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

/* Narrow the triangle horizontally while preserving its original text height. */
nav .nav-dropdown > summary::after {
    content: "\25B6";
    display: inline-block;
    margin-left: 0.5ch;
    transform: scaleX(0.7);
}

nav .nav-dropdown[open] > summary::after {
    transform: scaleY(0.7) rotate(90deg);
}

/* Size each menu to its widest entry, independently of its heading. */
nav .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    z-index: 1;
    width: max-content;
    text-align: left;
    background-color: var(--dark);
}

nav .nav-dropdown-menu > li {
    display: block;
    margin: 0;
}

nav .nav-dropdown-menu .nav-link {
    display: block;
}

nav .nav-dropdown-menu span.nav-link {
    opacity: 0.5;
    cursor: default;
}

/* ============================================================
   MAIN CONTENT LAYOUT
   ============================================================ */

/* Width scales up to 800px and stays 95% on small screens — replaces old media query */
main {
    width: min(95%, 800px);
    margin: 0 auto;
    padding: 20px;
    flex: 1;
}

/* Sections get consistent spacing before the next block */
section {
    margin-bottom: 40px;
}

/* Subheadings use silver for contrast against body text */
h2, h3, h4, h5, h6 {
    color: var(--silver);
}

/* ============================================================
   FIGURES & IMAGES
   ============================================================ */

/* Figure wrapper: centres content and provides external spacing */
figure {
    text-align: center;
    margin: 0 0 20px 0;                /* bottom-only external spacing */
    padding: 0;
}

/* Caption: tight to the image */
figcaption {
    font-style: italic;
    margin: 0;
    padding: 0;
}

/* Image behaviour */
.image-single,
.image-single-large,
.image-multi {
    display: inline-block;             /* allows centring via text-align */
    max-width: 100%;                   /* prevents overflow */
    height: auto;                      /* keeps aspect ratio */
    vertical-align: middle;
    margin: 0 0 5px 0;                 /* bottom-only internal spacing */
}

/* Percentage-based widths preserved exactly as before */
.image-single {
    width: 45%;
}

.image-single-large {
    width: 95%;
}

.image-multi {
    width: 32%;
}

/* ============================================================
   TABLES
   ============================================================ */

/* Base table structure: full width, collapsed borders, centred */
table {
    width: 100%;
    border: 1px solid var(--gold);
    border-collapse: collapse;
    table-layout: auto;
    margin: 0 0 20px 0;                /* bottom-only external spacing */
}

/* Caption: tight to the table */
table caption {
    font-style: italic;
    margin: 0 0 5px 0;                 /* bottom-only internal spacing */
    padding: 0;
}

/* Table cells: explicit borders and consistent padding */
th,
td {
    border: 1px solid var(--gold);
    text-align: left;
    padding: 5px;
}

/* Header cells: centred for clearer column grouping */
th {
    text-align: center;
}

/* Optional utility columns used in specific tables */
td.category-column {
    width: 200px;
    word-wrap: break-word;
}

td.status-column {
    width: 60px;
    text-align: center;
}

/* Status circles used inside table cells */
.circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: 0.025em;            /* slight optical lift against monospace text */
    border-radius: 50%;
}

.circle-green  { background-color: var(--green-icon); }
.circle-red    { background-color: var(--red-icon); }
.circle-orange { background-color: var(--orange-icon); }

/* Status legends placed before tables or lists */
.status-legend {
    margin: 0 0 20px 0;                /* bottom-only external spacing */
}

/* ============================================================
   STUDENT PROJECTS
   ============================================================ */

/* Wrapper for each student project entry */
.student-proj-container {
    box-sizing: border-box;
    margin: 0 0 20px 0;                /* bottom-only external spacing */
    padding: 10px 12px;
    border: 1px solid var(--less-dark-grey);
    border-radius: 5px;
    background-color: var(--dark);
}

/* Project status determines the top border colour */
.student-proj-container:has(.status-completed) {
    border-top: 3px solid var(--green-icon);
}

.student-proj-container:has(.status-open) {
    border-top: 3px solid var(--orange-icon);
}

/* Project code and brief badge share one heading row */
.student-proj-heading {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Retain h3 typography while removing its default vertical margins */
.student-proj-heading > h3 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Keep the brief badge at the right edge of the heading row */
.student-proj-brief {
    flex-shrink: 0;
    margin-left: auto;
}

/* Metadata grid aligns labels and values in two columns */
.student-proj-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin-left: 20px;
}

/* Metadata labels are italicised for visual distinction */
.student-proj-meta dt {
    font-style: italic;
}

/* Remove browser default indentation from metadata values */
.student-proj-meta dd {
    margin: 0;
}

/* Bibliography block: vertical spacing between entries */
.student-proj-bib {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: 20px;
}

/* Status colours */
.status-open { color: var(--orange); }
.status-ongoing  { color: var(--orange); }
.status-completed { color: var(--lime-green); }

/* --------------------------------------------
   ABSTRACT TOGGLE
   -------------------------------------------- */

.student-proj-summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

.student-proj-summary::-webkit-details-marker {
    display: none;
}

/* Keep abstract indicator settings in this section, separate from navigation. */
.student-proj-summary span::after {
    content: "\25B6";
    display: inline-block;
    margin-left: 0.5ch;
    transform: scaleX(0.7);
}

details[open] > .student-proj-summary span::after {
    transform: scaleY(0.7) rotate(90deg);
}

/* The clickable summary label */
.student-proj-summary span {
    transition: background-color 0.3s, color 0.3s;
    padding: 5px;
}

/* Hover makes the label gold */
.student-proj-summary:hover span {
    background-color: var(--gold);
    color: var(--dark);
}

/* Indent student project disclosure blocks to align with metadata and links */
.student-proj-container details {
    margin-left: 20px;
}

/* The abstract paragraph inside <details> */
.student-proj-abstract {
    border-left: 1px solid var(--gold);
    border-radius: 5px;
    padding: 10px;
}

/* Highlight summary label, when details are open */
details[open] .student-proj-summary span {
    background-color: var(--gold);
    color: var(--dark);
}

/* ============================================================
   STUDENT PROJECT LINEAGE
   ============================================================ */

/* Separate independent maps within the same research family */
.lineage-map + .lineage-map {
    margin-top: 24px;
}

/* --------------------------------------------
   PROJECT NODES
   -------------------------------------------- */

/* Fixed node width allows two nodes to fit within the main content width */
.lineage-node {
    box-sizing: border-box;
    width: 340px;
    max-width: 340px;
    margin: 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--less-dark-grey);
    border-radius: 5px;
    background-color: var(--dark);
    font-size: 0.82rem;
    line-height: 1.2;
}

/* Status labels determine node top borders; foundations retain their green marker */
.lineage-node:has(.status-completed),
.lineage-node-completed {
    border-top: 3px solid var(--green-icon);
}

.lineage-node:has(.status-open) {
    border-top: 3px solid var(--orange-icon);
}

/* Keeps the project code and status on the same heading row */
.lineage-node-heading {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
}

.lineage-node-heading strong {
    overflow-wrap: anywhere;
    color: var(--silver);
    font-size: 0.9rem;
}

/* Compact project description inside each node */
.lineage-node p {
    margin: 8px 0 0;
}

/* --------------------------------------------
   RELATIONSHIPS AND BRANCHES
   -------------------------------------------- */

/* Vertical relationship line and arrow between node groups */
.lineage-relation {
    position: relative;
    display: grid;
    min-height: 62px;
    place-items: center;
}

.lineage-relation::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 7px;
    left: 50%;
    width: 1px;
    background-color: var(--gold);
}

.lineage-relation::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 5px);
    border-top: 8px solid var(--gold);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

/* Relationship description displayed over the connecting line */
.lineage-relation span {
    position: relative;
    z-index: 1;
    padding: 3px 7px;
    border: 1px solid var(--less-dark-grey);
    border-radius: 5px;
    background-color: var(--dark-grey);
    color: var(--gold);
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
}

/* Two-column layout for parallel or continuing projects */
.lineage-branch {
    display: grid;
    grid-template-columns: repeat(2, 340px);
    gap: 14px;
    justify-content: center;
}

.lineage-branch .lineage-node {
    margin: 0;
}

/* Centres the final node when a branch contains an odd number of projects */
.lineage-branch .lineage-node:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
}

/* ============================================================
   RESEARCH GRAPH
   ============================================================ */

/* Only the graph page uses the full available desktop content width. */
main:has(> #research-graph-section) {
    box-sizing: border-box;
    width: calc(100% - 48px);
    padding: 24px;
    --graph-utilises: #E2BD3E;
    --graph-augments: #FFA45B;
    --graph-extends: #B79AFF;
    --graph-based-on: #F06AC9;
    --graph-complements: #DED8CB;
    --graph-contributes-to: #FFB3D1;
    --graph-credit: #DDD5C8;
    --graph-path: #FF5656;
    --graph-owner: #40E0D0;
}

.graph-toolbar,
.graph-selection,
.graph-canvas {
    border: 1px solid var(--less-dark-grey);
    border-radius: 5px;
    background-color: var(--dark);
}

.graph-panels {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.graph-toolbar {
    padding: 12px;
}

#graph-help {
    align-self: flex-start;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--gold);
}

.graph-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.graph-canvas-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    gap: 4px;
    padding: 4px;
    background-color: var(--dark);
}

.research-graph button,
.graph-switch,
.graph-key,
.graph-page-button,
.graph-filter > summary {
    box-sizing: border-box;
    padding: 3px 5px;
    border: 1px solid var(--less-dark-grey);
    border-radius: 3px;
    background-color: var(--dark-grey);
    color: var(--silver);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.research-graph button:hover,
.graph-page-button:hover,
.graph-switch:has(input:checked),
.graph-filter[open] > summary {
    border-color: var(--gold);
    color: var(--gold);
}

.research-graph button:disabled {
    opacity: 0.5;
    cursor: default;
}

.research-graph input {
    margin: 0 3px 0 0;
    accent-color: var(--gold);
    cursor: pointer;
    vertical-align: middle;
}

.research-graph :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.graph-toolbar-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
}

.graph-toolbar-group:last-child { margin-bottom: 0; }

.graph-toolbar-label {
    flex: 0 0 10ch;
    color: var(--gold);
    font-size: 1rem;
    font-weight: bold;
}

.graph-rel-utilises { --relation-colour: var(--graph-utilises); }
.graph-rel-augments { --relation-colour: var(--graph-augments); }
.graph-rel-extends { --relation-colour: var(--graph-extends); }
.graph-rel-based_on { --relation-colour: var(--graph-based-on); }
.graph-rel-complements { --relation-colour: var(--graph-complements); }
.graph-rel-contributes_to { --relation-colour: var(--graph-contributes-to); }
.graph-rel-authored,
.graph-rel-supervised,
.graph-rel-contributed { --relation-colour: var(--graph-credit); }
.graph-rel-path { --relation-colour: var(--graph-path); }

.graph-key:has(input:checked) {
    border-color: var(--relation-colour);
    color: var(--relation-colour);
}

.graph-key input {
    accent-color: var(--relation-colour);
}

.graph-path-key:has(input:checked) {
    border-color: var(--graph-path);
    color: var(--graph-path);
}
.graph-path-key input { accent-color: var(--graph-path); }

.graph-filter {
    position: relative;
}

.graph-filter-options {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    min-width: 265px;
    max-height: 350px;
    margin: 6px 0 0;
    padding: 8px;
    overflow: auto;
    border: 1px solid var(--gold);
    background-color: var(--dark);
    color: var(--silver);
    font-size: 0.85rem;
    box-shadow: 0 6px 18px #1118;
}

.graph-filter-actions {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.graph-filter-option {
    white-space: nowrap;
    cursor: pointer;
}

.graph-filter-symbol {
    width: 14px;
    height: 14px;
    margin: 0 3px;
    vertical-align: middle;
}

.graph-filter-symbol .graph-node-shape {
    stroke: currentColor;
    vector-effect: none;
}

.graph-selection {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    height: 200px;
    padding: 14px 16px;
    overflow: hidden;
}

.graph-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 12px;
}

.graph-selection h3 {
    margin: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.graph-detail-content {
    min-height: 0;
    overflow: auto;
}

.graph-page-button {
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
}

.graph-page-button:hover { background-color: var(--dark-grey); }

.graph-detail-authors { color: var(--bright-gold); }
.graph-detail-year { color: var(--gold); }

.graph-selection p {
    margin: 6px 0;
    line-height: 1.4;
    font-size: 0.85rem;
}

.graph-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.graph-detail-actions button { color: var(--gold); }

.graph-detail-related {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.85rem;
}

.graph-detail-relation {
    display: flex;
    align-items: baseline;
    gap: 8px;
    max-width: 100%;
}

.graph-detail-relation > span { white-space: nowrap; }

.graph-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.graph-detail-related button {
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--gold);
    font-size: inherit;
    text-align: left;
    text-decoration: underline;
}

.graph-detail-related button:hover { color: var(--bright-gold); }

.graph-canvas {
    position: relative;
    height: min(76vh, 840px);
    min-height: 540px;
    overflow: hidden;
}

#graph-svg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

#graph-svg:active { cursor: grabbing; }
.graph-edge-group,
.graph-node { cursor: pointer; }

/* Keep hollow symbols selectable through their interiors. */
.graph-node { pointer-events: all; }

.graph-edge,
.graph-marker {
    fill: none;
    stroke: var(--relation-colour);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.graph-marker {
    stroke-linecap: round;
    stroke-linejoin: round;
}
.graph-rel-supervised .graph-edge { stroke-dasharray: 8 5; }
.graph-rel-contributed .graph-edge { stroke-dasharray: 2 5; stroke-linecap: round; }

.graph-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
}

.graph-node-shape {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.graph-node-person .graph-node-shape { stroke: var(--graph-credit); }

.graph-node-owner .graph-node-shape {
    fill: var(--graph-owner);
    stroke: var(--graph-owner);
}

.graph-node-label {
    fill: var(--silver);
    stroke: var(--dark);
    stroke-width: 4px;
    paint-order: stroke;
    text-anchor: middle;
    font-size: 16px;
}

.graph-selection-ring {
    visibility: hidden;
    fill: none;
    stroke: var(--bright-gold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.graph-node.is-selected .graph-selection-ring { visibility: visible; }
.graph-node.is-selected .graph-node-label { fill: white; font-weight: bold; }
.graph-node.is-path .graph-node-shape { stroke: var(--graph-path); }
.graph-edge-group.is-path { --relation-colour: var(--graph-path); }
.research-graph .is-dimmed { opacity: 0.2; }

.graph-empty {
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
    color: var(--silver);
    pointer-events: none;
}

.graph-view-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

.graph-table { overflow: auto; }
.graph-table td { vertical-align: top; }
.graph-table tbody tr { cursor: pointer; }
.graph-table-path td { border-color: var(--graph-path); }
.graph-table-selected { background-color: var(--dark); }

/* ============================================================
   LINK STYLING
   ============================================================ */

/* Default link styling: white text with underline */
a {
    color: white;
    text-decoration: underline;
    display: inline-block;             /* consistent link box model */
    transition: background-color 0.3s, color 0.3s;
}

/* Hover: invert colours subtly */
a:hover {
    background-color: var(--gold);
    color: var(--dark);
}

/* External & download link wrappers (mostly badges) */
.external-link,
.download-link,
.bibtex-download {
    display: inline-flex;              /* makes align-items effective */
    align-items: center;               /* vertically centre badges */
    text-decoration: none;             /* badges shouldn’t be underlined */
}

/* Badge images: align with link text (if any) */
.external-link img,
.download-link img,
.bibtex-download img {
    vertical-align: middle;
}

/* Prevent hover inversion on badge links */
.external-link:hover,
.download-link:hover,
.bibtex-download:hover {
    background-color: transparent;     /* no gold box */
    color: inherit;                    /* no colour inversion */
}

/* ============================================================
   DIVIDERS
   ============================================================ */

/* Major section divider: thick gold line with generous vertical spacing */
hr.section-divider {
    border: 1.5px solid var(--gold);
    margin: 0 0 20px 0;                /* bottom-only spacing */
}

/* Subsection divider: thinner gold line for lighter visual separation */
hr.sub-divider {
    border: 0.5px solid var(--gold);
    margin: 0 0 10px 0;                /* bottom-only spacing */
}

/* ============================================================
   ARTEFACTS
   ============================================================ */

/* Wrapper with gap between each artefact title and its links. */
.artefact-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Adds a gap between consecutive artefact containers. */
.artefact-container + .artefact-container {
    margin-top: 16px;
}

/* Bibliography block: vertical spacing between entries */
.bibliography {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------
   ARTEFACT AT-A-GLANCE FIGURES
   -------------------------------------------- */

/* Metadata grid aligns labels and values in two columns */
.artefact-glance-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    /*margin-left: 20px;*/
}

/* Metadata labels are italicised for visual distinction */
.artefact-glance-meta dt {
    font-style: italic;
}

/* Remove browser default indentation from metadata values */
.artefact-glance-meta dd {
    font-weight: bold;
    margin: 0;
}

/* --------------------------------------------
   AUTOMATIC ARTEFACT NUMBERING
   -------------------------------------------- */

/* Reset once per artefact index page so numbering continues across year sections */
main:has(> section[id^="artefacts-"]),
.artefact-numbered-index {
    counter-reset: artefact-index;
}

/* Each artefact entry advances the generated IEEE-style index */
main:has(> section[id^="artefacts-"]) .artefact-cite-inline,
.artefact-numbered-index .artefact-cite-inline {
    counter-increment: artefact-index;
}

/* Generated index replaces manually maintained [1], [2], ... spans */
main:has(> section[id^="artefacts-"]) .artefact-cite-inline::before,
.artefact-numbered-index .artefact-cite-inline::before {
    content: "[" counter(artefact-index) "] ";
}

/* --------------------------------------------
   ARTEFACT INLINE
   -------------------------------------------- */

/* Artefact titles: silver and italic for contrast */
.artefact-title-inline {
    color: var(--silver);
    font-style: italic;
    text-decoration: none;
    display: inline;
}

.artefact-title-inline:hover,
.artefact-title-inline:focus-visible {
    text-decoration: underline;
    background-color: transparent;
    color: var(--silver);
}

/* Artefact venue name: highlighted and italicised */
.artefact-venue-inline {
    color: var(--bright-gold);
    font-style: italic;
}

/* --------------------------------------------
   LABELS
   -------------------------------------------- */

/* Wrapper with gap between label title and its labels. */
.label-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Adds a gap between consecutive label containers. */
.label-container + .label-container {
    margin-top: 16px;
}

/* Adds a gap between an inline artefact year and its label container. */
.artefact-year-inline + .label-container {
    margin-top: 8px;
}

/* Wrapper for a row of labels */
.label-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /*margin-top: 8px;*/
}

/* Type labels */
.label-type {
    background-color: transparent;
    border: 1px solid var(--gold);
    border-radius: 4px;
    color: var(--gold);
    display: inline-block;
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 2px 6px;
}

/* Research topic labels */
.label-topic {
    background-color: transparent;
    border: 1px solid var(--silver);
    border-radius: 4px;
    color: var(--silver);
    display: inline-block;
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 2px 6px;
}

/* --------------------------------------------
   ARTEFACT PAGE
   -------------------------------------------- */

/* Artefact authors: highlighted and slightly enlarged */
.artefact-authors {
    color: var(--bright-gold);
    font-size: 1.1rem;
    font-weight: bold;
}

/* Artefact contributors */
.artefact-contributors {
    color: var(--bright-gold);
    font-size: 1rem;
    font-weight: normal;
}

/* Artefact abstract block: indented to align with metadata */
.artefact-abstract {
    margin-left: 20px;
}

/* --------------------------------------------
   ARTEFACT BIB
   -------------------------------------------- */

/* Wrapper for BibTeX badges */
.artefact-cite-bibtex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* Icon-only buttons (BibTeX badges) */
.artefact-cite-bibtex button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}

/* Keyboard focus ring */
.artefact-cite-bibtex button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* --------------------------------------------
   ARTEFACT METADATA
   -------------------------------------------- */

/* Artefact metadata grid aligns labels and values in two columns */
.artefact-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin-left: 20px;
}

/* Artefact metadata labels are italicised for visual distinction */
.artefact-meta dt {
    font-style: italic;
}

/* Remove browser default indentation from artefact metadata values */
.artefact-meta dd {
    margin: 0;
}

/* --------------------------------------------
   ARTEFACT LINKS
   -------------------------------------------- */

/* Wrapper for external/download badges */
.artefact-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}

/* --------------------------------------------
   LICENCE
   -------------------------------------------- */

/* Licence note under Publications header */
.artefact-licence-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}

/* Licence icon follows text height */
.artefact-licence-note img {
    background-color: black;
    height: 1em;
    width: auto;
}


/* ============================================================
   RESEARCH ENTRY & AREA LANDINGS
   ============================================================ */

/* Research-area cards reuse the site palette while keeping the entry page compact. */
.research-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.research-area-card {
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 16px;
}

.research-area-card h3 {
    margin-top: 0;
}

.research-area-link {
    margin-bottom: 0;
}

/* ============================================================
   PAGE STRUCTURE / STICKY FOOTER
   ============================================================ */

/* Allows footer to stay at bottom and main content to stretch */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* Footer block: dark background, gold text, centred content */
footer {
    background-color: var(--dark);
    text-align: center;
    color: var(--gold);
    padding: 10px;
}

/* Footer logos: uniform sizing and spacing */
.footer-logo {
    width: 100px;
    height: 100px;
    display: inline-block;             /* ensures predictable alignment */
    margin: 10px;                      /* bottom-only not used because row of logos */
}

/* ============================================================
   RETURN-TO-TOP BUTTON
   ============================================================ */

/* Fixed floating button in bottom-right corner */
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--less-dark-grey);
    color: var(--gold);
    font-size: 25px;
    text-align: center;
    text-decoration: none;
    border-radius: 10%;
    line-height: 1;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
    padding: 10px;
}

/* Hover: invert colours for visual feedback */
#return-to-top:hover {
    background-color: var(--gold);
    color: var(--dark-grey);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

/* Container for all toast messages */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    pointer-events: none;              /* clicks pass through */
}

/* Individual toast */
.toast {
    background-color: var(--dark);
    color: var(--gold);
    border: 1px solid var(--gold);
    max-width: 320px;
    padding: 8px 12px;
    margin-top: 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Visible state */
.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   ANIMATION CANVAS
   ============================================================ */
   
/* Canvas element for animations: centred block with a gold outline */
#animation-canvas {
    display: block;                    /* ensures it behaves as a block-level element */
    border: 1px solid var(--gold);
    margin: 0 auto 20px;               /* centre horizontally, add bottom spacing */
}