@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
    --background-color: #FCFDF7;
    --primary-color-blue: #0800FF;
    --primary-color-yellow: #FFFF00;
    --crit-white: #FFFFFF;
    --crit-black: #000000;
    --10-grey: #F8F8F8;
    --20-grey: #EDEDED;
    --60-grey: #606060;
    --70-grey: #35373D;
}

.addition-notifications {
    position: fixed;
    top: 108px;
    right: 20px;
    width: min(360px, calc(100vw - 40px));
    max-height: calc(100vh - 136px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2147483647;
    font-size: 14px;
    line-height: 1.4;
}

.addition-notifications[hidden] {
    display: none;
}

.addition-notifications-heading,
.addition-notification {
    background: var(--primary-color-blue);
    color: var(--crit-white);
    padding: 14px 16px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.addition-notifications-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.addition-notification-list {
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.addition-notification {
    position: relative;
    flex-shrink: 0;
}

.addition-notifications .addition-notification-sentence {
    display: block;
    text-align: left;
    width: auto;
    margin: 0 18px 12px 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.addition-notification-sentence:hover {
    text-decoration: underline;
}

/* Extra .semantic-canvas keeps this above the recently-added and highlighted card rules */
.semantic-canvas .semantic-card.addition-navigation-target {
    outline: 3px solid var(--primary-color-blue);
    outline-offset: 4px;
    z-index: 2147483645 !important;
}

.addition-notification a {
    color: inherit;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.addition-notifications button {
    color: inherit;
    background: transparent;
    border: 0;
    padding: 4px;
    font: inherit;
    cursor: pointer;
}

.addition-notifications button:focus-visible,
.addition-notification a:focus-visible {
    outline: 2px solid var(--primary-color-yellow);
    outline-offset: 2px;
}

.addition-notification-close {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 22px !important;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}



body {
    background-color: var(--background-color);
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: clamp(29px, calc(20px + 0.5vw), 38px);
    position: relative;
    margin: 0;
    overflow: hidden;
}

p {
    width: 710px;
}

#unclicked-begin {
    background-color: var(--primary-color-yellow);
    width: 344px;
    height: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 29px;
    box-shadow: 0 2px 10.1px rgba(0, 0, 0, 0.3);
}

#unclicked-begin-secondary {
    background-color: var(--primary-color-yellow);
    width: 344px;
    height: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 29px;
    box-shadow: 0 2px 10.1px rgba(0, 0, 0, 0.3);
}

@font-face {
    font-family: 'American Typewriter';
    src: url('../assets/fonts/American Typewriter Regular.ttf') format('truetype');
}

.top-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 60px;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 2147483647;
    /* The strip spans the full width, so only its controls should catch clicks */
    pointer-events: none;
}

.top-section > * {
    pointer-events: auto;
}

.top-left-section {
    display: none;
}

.top-centre-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 7px;
}

.top-right-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 7px;
    position: relative;
    z-index: 2;
}

.search-button, .notes-button, .mode-button {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(15px, calc(13px + 0.12vw), 19px);
    font-weight: 400;
    background-color: var(--10-grey);
    border: 2px solid var(--crit-black);
    cursor: pointer;
    padding: 7px 18px;
    height: 28px;
    line-height: 1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.search-button svg {
    width: 18px;
    height: 18px;
    display: block;
}

.search-button:hover, .notes-button:hover, .mode-button:hover {
    background-color: var(--20-grey);
}

.search-button:active, .notes-button:active, .mode-button:active {
    background-color: var(--60-grey);
}

.search-container {
    display: none;
    align-items: center;
    height: 28px;
    max-width: 250px;
    background-color: #FFFFFF;
    border: 2px solid var(--crit-black);
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.search-input {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(15px, calc(13px + 0.12vw), 19px);
    font-weight: 400;
    flex: 1;
    min-width: 0;
    background-color: transparent;
    border: 0;
    padding: 7px 8px 7px 15px;
    height: 100%;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-input:focus {
    background-color: var(--10-grey);
}

.search-clear-button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--crit-black);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 24px;
}

.search-clear-button:hover {
    background-color: var(--20-grey);
}

.abstracts-info {
    position: absolute;
    top: 50px;
    right: 42.5px;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(13px, calc(11px + 0.1vw), 16px);
    font-weight: 400;
    color: var(--70-grey);
    z-index: 100;
    text-align: right;
}

/* Dark mode: black background; stacked cards underneath are shaded darker */
body.dark-mode {
    --background-color: #000000;
}

body.dark-mode .semantic-card.depth-shaded:not(:hover):not(.keyword-highlighted):not(.addition-navigation-target) {
    filter: brightness(var(--depth-brightness, 1));
}

body.dark-mode .abstracts-info {
    color: #A6A6A6;
}

body.dark-mode .semantic-card {
    opacity: 1;
}

/* Phone notice: the site is desktop-only for now */
.mobile-notice {
    display: none;
}

/* Phones, tablets and foldables: touch-only devices (no mouse/trackpad) or very narrow screens */
@media (max-width: 900px) and (pointer: coarse) and (hover: none) {
    /* Other UI shares the max z-index and comes later in the DOM, so hide it outright */
    body > *:not(.mobile-notice) {
        display: none !important;
    }

    body {
        overflow: hidden !important;
    }

    .mobile-notice {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        padding: 32px;
        box-sizing: border-box;
        background-color: var(--primary-color-blue);
        color: var(--crit-white);
        font-family: 'Manrope', sans-serif;
        font-size: 20px;
        line-height: 1.5;
    }

    .mobile-notice p {
        margin: 0;
        width: auto;
    }

    .mobile-notice .mobile-notice-title {
        font-size: 40px;
        font-weight: 600;
    }
}

.mode-button {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(15px, calc(13px + 0.12vw), 19px);
    font-weight: 400;
    background-color: var(--10-grey);
    border: 2px solid var(--crit-black);
    cursor: pointer;
    padding: 7px 18px;
    height: 28px;
    line-height: 1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.mode-button:hover {
    background-color: var(--20-grey);
}

.mode-button.active {
    background-color: var(--60-grey);
    color: var(--crit-white);
}

.mode-button.active:hover {
    background-color: var(--70-grey);
}

.mode-toggle-group {
    display: flex;
    gap: 0;
    align-items: center;
}

.date-button {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(15px, calc(13px + 0.12vw), 19px);
    font-weight: 400;
    background-color: var(--10-grey);
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 7px 18px;
    height: 28px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    color: var(--crit-black);
}

.date-button:active {
    background-color: var(--60-grey);
}

.plus-button {
    font-family: 'Manrope', sans-serif;
    font-size: 21px;
    font-weight: 400;
    background-color: transparent;
    border: 2px solid var(--60-grey);
    color: var(--60-grey);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease;
}

.plus-button:hover {
    background-color: var(--60-grey);
    border: 2px solid var(--60-grey);
    color: var(--crit-white);
}

.plus-button:active {
    background-color: var(--60-grey);
}

.left-button-section {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 2147483646;
    pointer-events: none;
}

.left-button-section .left-button-expanded-panel,
.left-button-section .crit.logo,
.left-button-section > .keyword-buttons,
.left-button-section .left-bottom-section .keyword-buttons,
.left-button-section .bottom-section {
    pointer-events: auto;
}

.about-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    box-sizing: border-box;
    padding: 20px;
    background-color: var(--primary-color-blue);
    color: #FFFFFF;
    font-family: "Manrope", sans-serif;
    font-size: clamp(15px, calc(13px + 0.12vw), 19px);
    line-height: 1.5;
    overflow: hidden;
    z-index: 2147483647;
    display: none;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.about-panel.open {
    display: block;
    transform: translateY(0);
}

.about-panel-content {
    max-width: 900px;
    max-height: calc(70vh - 40px);
    overflow-y: auto;
    scrollbar-width: none;
}

.about-panel-content::-webkit-scrollbar {
    display: none;
}

.about-panel-content p {
    margin: 0 0 16px;
    width: auto;
}

.about-panel-content a,
.about-panel-content a:visited {
    color: var(--primary-color-yellow);
}

.about-close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
}

/* Hide the left controls, including the CR!T button, while the panel is open */
.left-button-section.about-open {
    visibility: hidden;
}

.left-button-expanded-panel {
    position: absolute;
    top: 0;
    bottom: 64px;
    left: 0;
    width: 225px;
    box-sizing: border-box;
    background-color: #EDEDED;
    border-radius: 12px;
    transform: scaleY(0);
    transform-origin: top;
    pointer-events: auto;
    z-index: 2147483646;
}

.left-button-expanded-content {
    display: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 28px 20px;
    color: #150DFF;
    font-family: "Manrope", sans-serif;
    font-size: clamp(15px, calc(13px + 0.12vw), 19px);
    line-height: 1.5;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.left-button-expanded-content p {
    width: auto;
    margin: 0 0 18px;
}

.left-button-expanded-content a {
    color: #150DFF;
    text-decoration: underline;
}

.left-button-section.expanded .left-button-expanded-panel {
    transform: scaleY(1);
}

.left-button-section.expanded .left-button-expanded-content {
    display: block;
}

.left-button-section.expanded .crit.logo {
    z-index: 2147483647;
}

.left-button-section > :not(.left-button-expanded-panel) {
    position: relative;
    z-index: 1;
}

.keyword-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 232px;
}

.crit + .keyword-buttons {
    margin-top: 20px;
}

.keyword-button {
    font-family: 'American Typewriter', monospace;
    font-size: clamp(19px, calc(12px + 0.36vw), 28px);
    background-color: var(--10-grey);
    border: 1px solid #ccc;
    width: 225px;
    height: 42px;
    cursor: pointer;
    padding: 0 18px;
    margin: 0;
    display: flex;
    flex-shrink: 0;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.2s ease;
}

.keyword-button:hover {
    background-color: var(--20-grey);
    font-size: clamp(31px, calc(22px + 0.36vw), 36px);
}

.keyword-button.active {
    background-color: var(--20-grey);
    font-size: clamp(31px, calc(22px + 0.36vw), 36px);
}

.keyword-button:active {
    background-color: var(--60-grey);
}

.keyword-button:has(.plus-button) {
    width: 225px !important;
    height: 42px !important;
    padding: 0 18px !important;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #ccc !important;
    background-color: var(--10-grey) !important;
}

.keyword-button .plus-button {
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 21px !important;
    font-weight: 400;
    background-color: transparent !important;
    color: var(--60-grey) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid var(--60-grey) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.keyword-button .plus-button:hover {
    background-color: var(--60-grey) !important;
    color: var(--crit-white) !important;
}

.keyword-button .plus-button:active {
    background-color: var(--60-grey) !important;
}

.keyword-delete-btn {
    position: absolute;
    right: -15px;
    top: -15px;
    width: 28px;
    height: 28px;
    background-color: #F4FFBB;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}

.keyword-button.hover-right .keyword-delete-btn {
    display: flex;
}

.keyword-delete-btn img {
    width: 16px;
    height: 16px;
}

.new-keyword-input {
    font-family: 'American Typewriter', monospace;
    font-size: clamp(19px, calc(12px + 0.36vw), 28px);
    background-color: var(--10-grey);
    border: 1px solid #ccc;
    width: 225px;
    height: 42px;
    padding: 0 18px;
    margin: 0;
    border-radius: 0;
    cursor: text;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.new-keyword-input:focus {
    outline: none;
    background-color: var(--20-grey);
}

.new-keyword-input::placeholder {
    color: rgba(0, 0, 0, 0.65);
}

.keyword-button, .critical-terms-button, .design-terms-button, .control-button {
    position: relative;
}

.keyword-button:hover::after, .critical-terms-button:hover::after, .design-terms-button:hover::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('../assets/icons/drag.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#addKeywordBtn:hover::after,
#addDesignTermBtn:hover::after {
    content: none !important;
    display: none !important;
}

.control-button:hover::after {
    content: none !important;
}

button.plus-button:hover::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

.critical-terms-button:hover::after, .design-terms-button:hover::after {
    content: none;
}

.critical-terms-button:hover, .design-terms-button:hover {
    background-color: var(--20-grey) !important;
}

.crit.logo .critical-terms-button:hover {
    background-color: #150DFF !important;
    color: #FFFFFF !important;
}

.crit.logo .critical-terms-button {
    transition: none;
}

.crit.logo .critical-terms-button:active,
.crit.logo .critical-terms-button:focus {
    background-color: #150DFF !important;
    color: #FFFFFF !important;
}

.entries-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    max-height: calc(100vh - 100px);
    background-color: var(--background-color);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto;
    z-index: 500;
    display: none;
}

.entries-container.visible {
    display: block;
}

.entry-item {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--10-grey);
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'PT Sans', sans-serif;
    font-size: 10px;
    line-height: 1.6;
}

.entry-sentence {
    color: var(--crit-black);
    margin-bottom: 8px;
}

.entry-source {
    color: var(--60-grey);
    font-size: 8px;
    font-style: italic;
}

/* Hide only the panels and axis labels */
.keyword-container,
.submissions-container {
    display: none !important;
}

/* Critical Terms Colors - Light to Dark */
.keyword-button[data-keyword="critique"]:hover {
    color: rgb(230, 60, 20) !important;
}

.keyword-button[data-keyword="critique"].active {
    color: rgb(230, 60, 20) !important;
}

.keyword-button[data-keyword="critical"]:hover {
    color: rgb(255, 100, 0) !important;
}

.keyword-button[data-keyword="critical"].active {
    color: rgb(255, 100, 0) !important;
}

.keyword-button[data-keyword="interrogate"]:hover {
    color: rgb(255, 140, 30) !important;
}

.keyword-button[data-keyword="interrogate"].active {
    color: rgb(255, 140, 30) !important;
}

.keyword-button[data-keyword="position"]:hover {
    color: rgb(140, 100, 255) !important;
}

.keyword-button[data-keyword="position"].active {
    color: rgb(140, 100, 255) !important;
}

.keyword-button[data-keyword="post-critical"]:hover {
    color: rgb(100, 100, 255) !important;
}

.keyword-button[data-keyword="post-critical"].active {
    color: rgb(100, 100, 255) !important;
}

.keyword-button[data-keyword="problematize"]:hover {
    color: rgb(230, 50, 120) !important;
}

.keyword-button[data-keyword="problematize"].active {
    color: rgb(230, 50, 120) !important;
}

.keyword-button[data-keyword="question"]:hover {
    color: rgb(180, 30, 50) !important;
}

.keyword-button[data-keyword="question"].active {
    color: rgb(180, 30, 50) !important;
}

.keyword-button[data-keyword="reframe"]:hover {
    color: rgb(220, 50, 180) !important;
}

.keyword-button[data-keyword="reframe"].active {
    color: rgb(220, 50, 180) !important;
}

.keyword-button[data-keyword="reflect"]:hover {
    color: rgb(180, 80, 220) !important;
}

.keyword-button[data-keyword="reflect"].active {
    color: rgb(180, 80, 220) !important;
}

/* Design Terms Colors - Light to Dark (Alphabetical A-Z) */
.keyword-button[data-keyword="analyze"]:hover {
    color: rgb(240, 255, 50) !important;
}

.keyword-button[data-keyword="analyze"].active {
    color: rgb(240, 255, 50) !important;
}

.keyword-button[data-keyword="analyse"]:hover {
    color: rgb(240, 255, 50) !important;
}

.keyword-button[data-keyword="analyse"].active {
    color: rgb(240, 255, 50) !important;
}

.keyword-button[data-keyword="applied art"]:hover {
    color: rgb(60, 150, 255) !important;
}

.keyword-button[data-keyword="applied art"].active {
    color: rgb(60, 150, 255) !important;
}

.keyword-button[data-keyword="conceptualize"]:hover {
    color: rgb(200, 200, 80) !important;
}

.keyword-button[data-keyword="conceptualize"].active {
    color: rgb(200, 200, 80) !important;
}

.keyword-button[data-keyword="craft"]:hover {
    color: rgb(50, 120, 220) !important;
}

.keyword-button[data-keyword="craft"].active {
    color: rgb(50, 120, 220) !important;
}

.keyword-button[data-keyword="design"]:hover {
    color: rgb(120, 200, 240) !important;
}

.keyword-button[data-keyword="design"].active {
    color: rgb(120, 200, 240) !important;
}

.keyword-button[data-keyword="dialecticize"]:hover {
    color: rgb(80, 200, 240) !important;
}

.keyword-button[data-keyword="dialecticize"].active {
    color: rgb(80, 200, 240) !important;
}

.keyword-button[data-keyword="discourse"]:hover {
    color: rgb(100, 220, 200) !important;
}

.keyword-button[data-keyword="discourse"].active {
    color: rgb(100, 220, 200) !important;
}

.keyword-button[data-keyword="evaluate"]:hover {
    color: rgb(80, 180, 220) !important;
}

.keyword-button[data-keyword="evaluate"].active {
    color: rgb(80, 180, 220) !important;
}

.keyword-button[data-keyword="explore"]:hover {
    color: rgb(120, 220, 255) !important;
}

.keyword-button[data-keyword="explore"].active {
    color: rgb(120, 220, 255) !important;
}

.keyword-button[data-keyword="inquire"]:hover {
    color: rgb(140, 200, 255) !important;
}

.keyword-button[data-keyword="inquire"].active {
    color: rgb(140, 200, 255) !important;
}

.keyword-button[data-keyword="intend"]:hover {
    color: rgb(120, 200, 255) !important;
}

.keyword-button[data-keyword="intend"].active {
    color: rgb(120, 200, 255) !important;
}

.keyword-button[data-keyword="investigate"]:hover {
    color: rgb(80, 160, 220) !important;
}

.keyword-button[data-keyword="investigate"].active {
    color: rgb(80, 160, 220) !important;
}

.keyword-button[data-keyword="iterate"]:hover {
    color: rgb(100, 210, 200) !important;
}

.keyword-button[data-keyword="iterate"].active {
    color: rgb(100, 210, 200) !important;
}

.keyword-button[data-keyword="narrate"]:hover {
    color: rgb(120, 220, 180) !important;
}

.keyword-button[data-keyword="narrate"].active {
    color: rgb(120, 220, 180) !important;
}

.keyword-button[data-keyword="plan"]:hover {
    color: rgb(100, 230, 160) !important;
}

.keyword-button[data-keyword="plan"].active {
    color: rgb(100, 230, 160) !important;
}

.keyword-button[data-keyword="practice"]:hover {
    color: rgb(140, 210, 255) !important;
}

.keyword-button[data-keyword="practice"].active {
    color: rgb(140, 210, 255) !important;
}

.keyword-button[data-keyword="project"]:hover {
    color: rgb(80, 200, 180) !important;
}

.keyword-button[data-keyword="project"].active {
    color: rgb(80, 200, 180) !important;
}

.keyword-button[data-keyword="systematize"]:hover {
    color: rgb(100, 180, 255) !important;
}

.keyword-button[data-keyword="systematize"].active {
    color: rgb(100, 180, 255) !important;
}

.keyword-button[data-keyword="theorize"]:hover {
    color: rgb(80, 140, 220) !important;
}

.keyword-button[data-keyword="theorize"].active {
    color: rgb(80, 140, 220) !important;
}

.keyword-button[data-keyword="work"]:hover {
    color: rgb(60, 120, 200) !important;
}

.keyword-button[data-keyword="work"].active {
    color: rgb(60, 120, 200) !important;
}

/* Keyword Highlights in Cards */
.keyword-highlight {
    font-family: 'American Typewriter', 'Courier New', monospace !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline;
    pointer-events: auto;
    color: inherit !important;  /* Hidden by default */
}

/* Keywords shown when visible (selected or hovered) */
.keyword-highlight.visible[data-keyword="critical"] {
    color: rgb(255, 100, 0) !important;
}

.keyword-highlight.visible[data-keyword="critique"] {
    color: rgb(230, 60, 20) !important;
}

.keyword-highlight.visible[data-keyword="interrogate"] {
    color: rgb(255, 140, 30) !important;
}

.keyword-highlight.visible[data-keyword="position"] {
    color: rgb(140, 100, 255) !important;
}

.keyword-highlight.visible[data-keyword="post-critical"] {
    color: rgb(100, 100, 255) !important;
}

.keyword-highlight.visible[data-keyword="problematize"] {
    color: rgb(230, 50, 120) !important;
}

.keyword-highlight.visible[data-keyword="question"] {
    color: rgb(180, 30, 50) !important;
}

.keyword-highlight.visible[data-keyword="reframe"] {
    color: rgb(220, 50, 180) !important;
}

.keyword-highlight.visible[data-keyword="reflect"] {
    color: rgb(180, 80, 220) !important;
}

/* Design Keywords */
.keyword-highlight.visible[data-keyword="analyze"] {
    color: rgb(100, 200, 255) !important;
}

.keyword-highlight.visible[data-keyword="applied art"] {
    color: rgb(150, 220, 255) !important;
}

.keyword-highlight.visible[data-keyword="conceptualize"] {
    color: rgb(100, 180, 240) !important;
}

.keyword-highlight.visible[data-keyword="craft"] {
    color: rgb(180, 220, 255) !important;
}

.keyword-highlight.visible[data-keyword="design"] {
    color: rgb(120, 200, 240) !important;
}

.keyword-highlight.visible[data-keyword="dialecticize"] {
    color: rgb(80, 200, 240) !important;
}

.keyword-highlight.visible[data-keyword="discourse"] {
    color: rgb(100, 220, 200) !important;
}

.keyword-highlight.visible[data-keyword="evaluate"] {
    color: rgb(80, 180, 220) !important;
}

.keyword-highlight.visible[data-keyword="explore"] {
    color: rgb(120, 220, 255) !important;
}

.keyword-highlight.visible[data-keyword="inquire"] {
    color: rgb(140, 200, 255) !important;
}

.keyword-highlight.visible[data-keyword="intend"] {
    color: rgb(120, 200, 255) !important;
}

.keyword-highlight.visible[data-keyword="investigate"] {
    color: rgb(80, 160, 220) !important;
}

.keyword-highlight.visible[data-keyword="iterate"] {
    color: rgb(100, 210, 200) !important;
}

.keyword-highlight.visible[data-keyword="narrate"] {
    color: rgb(120, 220, 180) !important;
}

.keyword-highlight.visible[data-keyword="plan"] {
    color: rgb(100, 230, 160) !important;
}

.keyword-highlight.visible[data-keyword="practice"] {
    color: rgb(140, 210, 255) !important;
}

.keyword-highlight.visible[data-keyword="project"] {
    color: rgb(80, 200, 180) !important;
}

.keyword-highlight.visible[data-keyword="systematize"] {
    color: rgb(100, 180, 255) !important;
}

.keyword-highlight.visible[data-keyword="theorize"] {
    color: rgb(80, 140, 220) !important;
}

.keyword-highlight.visible[data-keyword="work"] {
    color: rgb(60, 120, 200) !important;
}

/* Keyword button colors when hovered */
.keyword-button[data-keyword="critical"].hovered {
    color: rgb(255, 100, 0) !important;
}

.keyword-button[data-keyword="critique"].hovered {
    color: rgb(230, 60, 20) !important;
}

.keyword-button[data-keyword="interrogate"].hovered {
    color: rgb(255, 140, 30) !important;
}

.keyword-button[data-keyword="position"].hovered {
    color: rgb(140, 100, 255) !important;
}

.keyword-button[data-keyword="post-critical"].hovered {
    color: rgb(100, 100, 255) !important;
}

.keyword-button[data-keyword="problematize"].hovered {
    color: rgb(230, 50, 120) !important;
}

.keyword-button[data-keyword="question"].hovered {
    color: rgb(180, 30, 50) !important;
}

.keyword-button[data-keyword="reflect"].hovered {
    color: rgb(180, 80, 220) !important;
}

.keyword-button[data-keyword="reframe"].hovered {
    color: rgb(220, 50, 180) !important;
}

.keyword-button[data-keyword="analyze"].hovered {
    color: rgb(240, 255, 50) !important;
}

.keyword-button[data-keyword="applied art"].hovered {
    color: rgb(60, 150, 255) !important;
}

.keyword-button[data-keyword="conceptualize"].hovered {
    color: rgb(200, 200, 80) !important;
}

.keyword-button[data-keyword="craft"].hovered {
    color: rgb(50, 120, 220) !important;
}

.keyword-button[data-keyword="design"].hovered {
    color: rgb(0, 210, 220) !important;
}

.keyword-button[data-keyword="dialecticize"].hovered {
    color: rgb(80, 210, 230) !important;
}

.keyword-button[data-keyword="discourse"].hovered {
    color: rgb(100, 220, 200) !important;
}

.keyword-button[data-keyword="evaluate"].hovered {
    color: rgb(255, 240, 60) !important;
}

.keyword-button[data-keyword="explore"].hovered {
    color: rgb(200, 255, 60) !important;
}

.keyword-button[data-keyword="inquire"].hovered {
    color: rgb(220, 255, 40) !important;
}

.keyword-button[data-keyword="intend"].hovered {
    color: rgb(120, 255, 100) !important;
}

.keyword-button[data-keyword="investigate"].hovered {
    color: rgb(255, 210, 60) !important;
}

.keyword-button[data-keyword="iterate"].hovered {
    color: rgb(160, 255, 80) !important;
}

.keyword-button[data-keyword="narrate"].hovered {
    color: rgb(130, 210, 160) !important;
}

.keyword-button[data-keyword="plan"].hovered {
    color: rgb(80, 240, 140) !important;
}

.keyword-button[data-keyword="practice"].hovered {
    color: rgb(50, 180, 230) !important;
}

.keyword-button[data-keyword="project"].hovered {
    color: rgb(40, 230, 180) !important;
}

.keyword-button[data-keyword="systematize"].hovered {
    color: rgb(70, 180, 255) !important;
}

.keyword-button[data-keyword="theorize"].hovered {
    color: rgb(60, 140, 255) !important;
}

.keyword-button[data-keyword="work"].hovered {
    color: rgb(30, 60, 180) !important;
}

.critical-terms-button {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(15px, calc(13px + 0.12vw), 19px);
    font-weight: 400;
    background-color: var(--20-grey);
    border: 1px solid #ccc;
    width: 225px;
    height: 42px;
    cursor: pointer;
    padding: 0 18px;
    margin: 0;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px 8px 0 0;
    transition: background-color 0.2s ease;
}

.critical-terms-button:first-of-type {
    font-size: 17px;
}

.critical-terms-button:hover {
    background-color: var(--60-grey);
}

.critical-terms-button:active {
    background-color: var(--70-grey);
}

.control-button {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 400;
    background-color: var(--10-grey);
    border: 1px solid #ccc;
    width: 225px;
    height: 42px;
    cursor: pointer;
    padding: 7px 18px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    border-radius: 0;
    transition: background-color 0.2s ease;
    pointer-events: auto;
}

.control-button:hover {
    background-color: var(--10-grey);
}

.control-button:active {
    background-color: var(--60-grey);
}


.bottom-section {
    margin-top: auto;
    position: absolute;
    bottom: 19px;
    left: 272px;
    width: calc(100vw - 342px);
    max-height: 60px;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 1000;
    pointer-events: auto;
}

.bottom-section .design-terms-button {
    flex-shrink: 0;
}

.bottom-section .keyword-buttons {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: fit-content;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.bottom-section .keyword-buttons::-webkit-scrollbar {
    display: none;
}

/* Same + icon size for the critical and design term buttons */
.add-keyword-icon {
    width: 24px;
    height: 24px;
}

/* Compact + button; it only widens into the input once clicked */
#addDesignTermBtn {
    width: 56px;
    padding: 0;
    justify-content: center;
}

.left-bottom-section {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 462px;
    overflow-y: hidden;
    overflow-x: visible;
    pointer-events: none;
}

.left-bottom-section .keyword-buttons {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: none;
    padding-right: 20px;
    pointer-events: auto;
}

.left-bottom-section .keyword-buttons::-webkit-scrollbar {
    display: none;
}

.design-terms-button {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 400;
    background-color: var(--20-grey);
    border: 1px solid #ccc;
    width: 225px;
    height: 42px;
    cursor: pointer;
    padding: 0 18px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.design-terms-button:hover {
    background-color: var(--60-grey);
}

/* Notes Panel */
.notes-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 20vh;
    background-color: var(--primary-color-blue);
    z-index: 2147483647;
    display: none;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.semantic-canvas.selecting-folder-cards .semantic-card {
    cursor: crosshair;
}

.card-selection-status {
    position: fixed;
    top: 76px;
    left: 50%;
    z-index: 2147483647;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 12px;
    border: 1px solid #0800FF;
    border-radius: 4px;
    background: #0800FF;
    color: #FFFFFF;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.selected-card-count {
    font-weight: 400;
}

.card-selection-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.card-selection-status[hidden],
.assignment-feedback[hidden] {
    display: none;
}

.card-selection-status select,
.card-selection-status input {
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid #777;
    border-radius: 3px;
    padding: 0 10px;
    font: inherit;
    background: #fff;
    color: #000;
}

.card-selection-status input {
    width: 150px;
}

.assignment-feedback {
    position: fixed;
    top: 128px;
    left: 50%;
    z-index: 2147483647;
    transform: translateX(-50%);
    padding: 9px 14px;
    border-radius: 4px;
    background: #0800FF;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
}

.semantic-card.folder-card-selected {
    outline: 3px solid #9D99FB;
    outline-offset: 2px;
    z-index: 1002;
}

.notes-panel.open {
    display: flex;
    transform: translateY(0);
}

.notes-folder-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    padding-top: 15px;
    padding-bottom: 0;
    margin: 0 -20px;
}

.folder-notes-input {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--crit-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: none;
    padding: 12px 20px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.toggle-card-selection-notes {
    width: 100%;
    text-align: left;
}

.folder-notes-input:focus {
    border: 1px solid var(--crit-white);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.folder-notes-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

.folders-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0px 0px;
    max-height: calc(100% - 80px);
    overflow-y: auto;
}

.folders-list.single-folder {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0;
    max-height: none;
    overflow-y: visible;
}

.folders-list.single-folder .folder-item {
    width: 100%;
}

.folders-list.two-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    padding: 0;
    max-height: none;
    overflow-y: visible;
}

.folders-list.two-folders .folder-item {
    flex: 1 1 calc(50% - 0px);
    min-width: 0;
    padding: 0px 0px;
}

.folders-list.multiple-folders {
    display: flex;
    gap: 0px;
    padding: 0px 0px;
}

.folders-list.multiple-folders .folder-item {
    flex: 1 1 calc(33.333% - 0px);
    min-width: 0;
}

.folder-item {
    text-align: left;
    display: flex;
    align-items: center;
}

.folder-item span {
    white-space: nowrap;
}

.folders-container {
    display: flex;
    align-items: flex-start;
    gap: 0px;
    margin: 0 -20px;
    padding: 0;
}

.folders-container .folders-list {
    display: flex;
    gap: 0px;
    flex: 1;
}

.view-folder-button {
    margin: 0;
    white-space: nowrap;
    align-self: start;
}

.folders-list.single-folder {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}

.folders-list.single-folder .folder-item {
    flex: 0 1 100%;
    padding: 0px 0px;
}

/* Shared panel/action buttons: black at rest, blue when hovered, pressed or selected */
.about-close-button,
.toggle-card-selection-notes,
.view-folder-button,
.folder-item,
.card-selection-status button,
.share-actions button {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    min-height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    background-color: var(--crit-black);
    color: var(--crit-white);
    border: 1px solid var(--crit-white);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.about-close-button:hover,
.about-close-button:active,
.toggle-card-selection-notes:hover,
.toggle-card-selection-notes:active,
.toggle-card-selection-notes.active,
.view-folder-button:hover,
.view-folder-button:active,
.folder-item:hover,
.folder-item:active,
.folder-item.selected,
.card-selection-status button:not(:disabled):hover,
.card-selection-status button:not(:disabled):active,
.share-actions button:hover,
.share-actions button:active {
    background-color: var(--primary-color-blue);
    color: var(--crit-white);
}

.card-selection-status button:disabled {
    cursor: not-allowed;
}

/* Notes panel rows sit flush against the left edge of the panel */
.toggle-card-selection-notes,
.folder-item {
    border-left: none;
}

.toggle-card-selection-notes {
    padding-left: 20px;
}

.design-terms-button:active {
    background-color: var(--70-grey);
}

.arrow-button {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 400;
    background-color: var(--20-grey);
    border: 1px solid #ccc;
    width: 42px;
    height: 42px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.arrow-button[hidden] {
    display: none;
}

.arrow-button-left {
    border-radius: 8px 0 0 8px;
}

.arrow-button-left img {
    transform: rotate(180deg);
}

.arrow-button img {
    width: 18px;
    height: 18px;
    display: block;
    color: currentColor;
}

.arrow-button:hover {
    background-color: var(--60-grey);
}

.arrow-button:active {
    background-color: var(--70-grey);
}

.center-rectangle {
    position: fixed;
    left: 50%;
    top: 0;
    width: 960px;
    height: 100vh;
    background-color: var(--primary-color-blue);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 0 100px 0;
}

.about-text {
    width: 770px;
    color: var(--crit-white);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 400;
    text-align: left;
    line-height: 1.6;
}

.about-text a {
    color: var(--crit-white);
    text-decoration: underline;
    cursor: pointer;
}

.credit-text {
    width: 770px;
    color: var(--crit-white);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 400;
    text-align: left;
    margin-top: 40px;
    border-top: 1px solid var(--crit-white);
    border-bottom: 1px solid var(--crit-white);
    padding: 20px 0;
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background-color: #F4FFBB;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 1000;
    color: #000000;
    text-decoration: none;
}

.close-button:hover {
    background-color: #000000;
    color: #F4FFBB;
}

.close-button:active {
    transform: scale(0.95);
}

.close-button img {
    width: 40px;
    height: 40px;
}

/* Row size follows the window height: 64px at 1080px tall, shrinking so the stack always fits */
@media (min-width: 1100px) and (min-height: 700px) {
    :root {
        --row: clamp(36px, calc((100vh - 136px) / 14), 64px);
        /* Centres the stack vertically; shrinks to 40px in short windows so the rows can be taller */
        --edge: clamp(40px, calc((100vh - 56px - var(--row) * 14) / 2), 64px);
    }

    .top-section {
        top: var(--edge);
        padding-right: 24px;
        padding-left: 24px;
    }

    .top-centre-section,
    .top-right-section {
        margin-top: 0;
    }

    .top-centre-section {
        gap: 24px;
    }

    .top-right-section {
        gap: 12px;
        margin-right: 24px;
    }

    .search-button,
    .notes-button,
    .mode-button,
    .date-button,
    .search-input {
        font-size: min(clamp(20px, calc(18px + 0.1vw), 24px), calc(var(--row) * 0.56));
        height: var(--row);
    }

    .search-button,
    .notes-button,
    .mode-button,
    .date-button {
        padding-right: 22px;
        padding-left: 22px;
    }

    .search-button svg {
        width: 24px;
        height: 24px;
    }

    .plus-button {
        width: 42px;
        height: 42px;
        font-size: clamp(29px, calc(22px + 0.36vw), 38px);
    }

    .top-centre-section {
        gap: 28px;
    }

    .top-right-section {
        gap: 16px;
    }

    .abstracts-info {
        top: 60px;
        right: 50px;
        font-size: 18px;
    }

    .left-button-section {
        position: fixed;
        top: var(--edge);
        left: 24px;
    }

    .left-button-expanded-panel {
        width: 350px;
    }

    .left-button-expanded-content {
        height: 100%;
        padding: 84px 24px 32px;
        font-size: 22px;
        line-height: 1.5;
        overflow-y: scroll;
    }

    .left-button-expanded-content p {
        margin-bottom: 26px;
    }

    .crit + .keyword-buttons {
        margin-top: 28px;
    }

    .keyword-buttons {
        width: 350px;
    }

    .keyword-button,
    .critical-terms-button,
    .design-terms-button,
    .control-button {
        width: 350px;
        height: var(--row);
    }

    .keyword-button {
        padding-right: 22px;
        padding-left: 22px;
        font-size: min(clamp(29px, calc(22px + 0.36vw), 38px), calc(var(--row) * 0.56));
    }

    .keyword-button:hover::after {
        right: 22px;
        width: 28px;
        height: 28px;
    }

    .left-bottom-section .keyword-button {
        border-radius: 4px;
    }

    .keyword-button:hover,
    .keyword-button.active {
        font-size: clamp(33px, calc(24px + 0.36vw), 40px);
    }

    .bottom-section .keyword-button {
        width: 230px;
        height: var(--row);
        padding-right: 18px;
        padding-left: 18px;
        border-radius: 4px;
    }

    .left-bottom-section .new-keyword-input {
        width: 350px;
        height: var(--row);
        padding-right: 22px;
        padding-left: 22px;
        border-radius: 4px;
        font-size: clamp(29px, calc(22px + 0.36vw), 38px);
    }

    .bottom-section .new-keyword-input {
        width: 230px;
        height: var(--row);
        padding-right: 18px;
        padding-left: 18px;
        border-radius: 4px;
        font-size: clamp(29px, calc(22px + 0.36vw), 38px);
    }

    .bottom-section .keyword-button:hover,
    .bottom-section .keyword-button.active {
        font-size: min(clamp(30px, calc(22px + 0.4vw), 40px), calc(var(--row) * 0.56));
    }

    .critical-terms-button,
    .design-terms-button {
        padding-right: 22px;
        padding-left: 22px;
        font-size: min(clamp(28px, calc(21px + 0.36vw), 36px), calc(var(--row) * 0.56));
    }

    .critical-terms-button {
        border-radius: 12px 12px 0 0;
    }

    .critical-terms-button:first-of-type {
        font-size: min(clamp(28px, calc(21px + 0.36vw), 36px), calc(var(--row) * 0.56));
    }

    .control-button {
        padding: 8px 22px;
        font-size: min(clamp(26px, calc(20px + 0.3vw), 34px), calc(var(--row) * 0.56));
        border-radius: 0 0 8px 8px;
    }

    .crit.logo .critical-terms-button {
        font-size: min(clamp(30px, calc(22px + 0.4vw), 40px), calc(var(--row) * 0.56));
    }

    .bottom-section .design-terms-button {
        border-radius: 0;
    }

    .notes-panel,
    .folder-notes-input,
    .about-close-button,
    .toggle-card-selection-notes,
    .view-folder-button,
    .folder-item,
    .card-selection-status button,
    .share-actions button {
        font-size: clamp(18px, calc(15px + 0.15vw), 22px);
    }

    .about-close-button,
    .toggle-card-selection-notes,
    .view-folder-button,
    .folder-item,
    .card-selection-status button,
    .share-actions button,
    .card-selection-status select,
    .card-selection-status input {
        min-height: 48px;
    }

    .about-close-button,
    .view-folder-button,
    .folder-item,
    .card-selection-status button,
    .share-actions button {
        padding: 0 20px;
    }

    .entry-item {
        font-size: 13px;
    }

    .entry-source {
        font-size: 11px;
    }

    .left-bottom-section {
        height: calc(var(--row) * 11);
        margin-top: 28px;
        margin-bottom: 0;
        overflow: hidden;
    }

    .left-bottom-section .keyword-buttons {
        height: 100%;
        overflow-y: hidden;
    }

    .bottom-section {
        position: fixed;
        bottom: var(--row);
        left: 400px;
        width: calc(100vw - 472px);
        max-height: var(--row);
    }

    .arrow-button {
        width: var(--row);
        height: var(--row);
        font-size: 22px;
        border-radius: 0 10px 10px 0;
    }

    .arrow-button-left {
        border-radius: 10px 0 0 10px;
    }

    .arrow-button img {
        width: 28px;
        height: 28px;
    }
}
.share-popup {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 300px;
    z-index: 2147483646;
    background: var(--primary-color-blue);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    padding: 20px;
    box-sizing: border-box;
}
.share-popup[hidden] { display: none; }
.share-popup h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.share-popup p { width: auto; margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.share-popup ol { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.4; }
.share-popup .share-note { opacity: 0.8; font-size: 12px; }
.share-actions { display: flex; gap: 8px; }
/* Accessibility: clear keyboard focus, and no motion for people who ask for less */
:focus-visible {
    outline: 3px solid #9D99FB;
    outline-offset: 2px;
}
.semantic-card:focus-visible {
    outline-color: #0800FF;
    z-index: 100000 !important;
}
body.dark-mode :focus-visible {
    outline-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 2147483647;
    background: #0800FF;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    padding: 10px 14px;
    text-decoration: none;
}
.skip-link:focus {
    top: 16px;
}
/* Accessible keyword colours: same hues, lightness adjusted to reach at least 4.5:1 contrast */
.semantic-canvas .keyword-highlight.visible[data-keyword="critique"] { color: rgb(207, 54, 18) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="critique"] { color: rgb(246, 174, 157) !important; }
.keyword-button[data-keyword="critique"]:hover, .keyword-button[data-keyword="critique"].hovered, .keyword-button[data-keyword="critique"].active { color: rgb(246, 174, 157) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="critical"] { color: rgb(189, 74, 0) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="critical"] { color: rgb(255, 171, 117) !important; }
.keyword-button[data-keyword="critical"]:hover, .keyword-button[data-keyword="critical"].hovered, .keyword-button[data-keyword="critical"].active { color: rgb(255, 171, 117) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="interrogate"] { color: rgb(173, 84, 0) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="interrogate"] { color: rgb(255, 174, 96) !important; }
.keyword-button[data-keyword="interrogate"]:hover, .keyword-button[data-keyword="interrogate"].hovered, .keyword-button[data-keyword="interrogate"].active { color: rgb(255, 174, 96) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="position"] { color: rgb(117, 69, 255) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="position"] { color: rgb(201, 182, 255) !important; }
.keyword-button[data-keyword="position"]:hover, .keyword-button[data-keyword="position"].hovered, .keyword-button[data-keyword="position"].active { color: rgb(201, 182, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="post-critical"] { color: rgb(85, 85, 255) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="post-critical"] { color: rgb(187, 187, 255) !important; }
.keyword-button[data-keyword="post-critical"]:hover, .keyword-button[data-keyword="post-critical"].hovered, .keyword-button[data-keyword="post-critical"].active { color: rgb(187, 187, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="problematize"] { color: rgb(213, 26, 99) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="problematize"] { color: rgb(245, 173, 201) !important; }
.keyword-button[data-keyword="problematize"]:hover, .keyword-button[data-keyword="problematize"].hovered, .keyword-button[data-keyword="problematize"].active { color: rgb(245, 173, 201) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="question"] { color: rgb(180, 30, 50) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="question"] { color: rgb(241, 173, 182) !important; }
.keyword-button[data-keyword="question"]:hover, .keyword-button[data-keyword="question"].hovered, .keyword-button[data-keyword="question"].active { color: rgb(241, 173, 182) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="reframe"] { color: rgb(200, 34, 161) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="reframe"] { color: rgb(240, 168, 223) !important; }
.keyword-button[data-keyword="reframe"]:hover, .keyword-button[data-keyword="reframe"].hovered, .keyword-button[data-keyword="reframe"].active { color: rgb(240, 168, 223) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="reflect"] { color: rgb(169, 54, 215) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="reflect"] { color: rgb(220, 174, 239) !important; }
.keyword-button[data-keyword="reflect"]:hover, .keyword-button[data-keyword="reflect"].hovered, .keyword-button[data-keyword="reflect"].active { color: rgb(220, 174, 239) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="analyze"] { color: rgb(0, 114, 176) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="analyze"] { color: rgb(105, 202, 255) !important; }
.keyword-button[data-keyword="analyze"]:hover, .keyword-button[data-keyword="analyze"].hovered, .keyword-button[data-keyword="analyze"].active { color: rgb(240, 255, 50) !important; }
.keyword-button[data-keyword="analyse"]:hover, .keyword-button[data-keyword="analyse"].hovered, .keyword-button[data-keyword="analyse"].active { color: rgb(240, 255, 50) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="applied art"] { color: rgb(0, 117, 175) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="applied art"] { color: rgb(150, 220, 255) !important; }
.keyword-button[data-keyword="applied art"]:hover, .keyword-button[data-keyword="applied art"].hovered, .keyword-button[data-keyword="applied art"].active { color: rgb(142, 194, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="conceptualize"] { color: rgb(18, 113, 184) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="conceptualize"] { color: rgb(137, 198, 244) !important; }
.keyword-button[data-keyword="conceptualize"]:hover, .keyword-button[data-keyword="conceptualize"].hovered, .keyword-button[data-keyword="conceptualize"].active { color: rgb(200, 200, 80) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="craft"] { color: rgb(0, 110, 205) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="craft"] { color: rgb(180, 220, 255) !important; }
.keyword-button[data-keyword="craft"]:hover, .keyword-button[data-keyword="craft"].hovered, .keyword-button[data-keyword="craft"].active { color: rgb(163, 195, 239) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="design"] { color: rgb(19, 118, 168) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="design"] { color: rgb(120, 200, 240) !important; }
.keyword-button[data-keyword="design"]:hover, .keyword-button[data-keyword="design"].hovered, .keyword-button[data-keyword="design"].active { color: rgb(120, 200, 240) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="dialecticize"] { color: rgb(13, 119, 154) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="dialecticize"] { color: rgb(94, 204, 241) !important; }
.keyword-button[data-keyword="dialecticize"]:hover, .keyword-button[data-keyword="dialecticize"].hovered, .keyword-button[data-keyword="dialecticize"].active { color: rgb(94, 204, 241) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="discourse"] { color: rgb(28, 124, 108) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="discourse"] { color: rgb(100, 220, 200) !important; }
.keyword-button[data-keyword="discourse"]:hover, .keyword-button[data-keyword="discourse"].hovered, .keyword-button[data-keyword="discourse"].active { color: rgb(100, 220, 200) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="evaluate"] { color: rgb(30, 117, 152) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="evaluate"] { color: rgb(127, 200, 229) !important; }
.keyword-button[data-keyword="evaluate"]:hover, .keyword-button[data-keyword="evaluate"].hovered, .keyword-button[data-keyword="evaluate"].active { color: rgb(127, 200, 229) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="explore"] { color: rgb(0, 119, 161) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="explore"] { color: rgb(120, 220, 255) !important; }
.keyword-button[data-keyword="explore"]:hover, .keyword-button[data-keyword="explore"].hovered, .keyword-button[data-keyword="explore"].active { color: rgb(120, 220, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="inquire"] { color: rgb(0, 110, 211) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="inquire"] { color: rgb(140, 200, 255) !important; }
.keyword-button[data-keyword="inquire"]:hover, .keyword-button[data-keyword="inquire"].hovered, .keyword-button[data-keyword="inquire"].active { color: rgb(140, 200, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="intend"] { color: rgb(0, 113, 191) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="intend"] { color: rgb(120, 200, 255) !important; }
.keyword-button[data-keyword="intend"]:hover, .keyword-button[data-keyword="intend"].hovered, .keyword-button[data-keyword="intend"].active { color: rgb(120, 200, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="investigate"] { color: rgb(35, 114, 173) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="investigate"] { color: rgb(148, 197, 234) !important; }
.keyword-button[data-keyword="investigate"]:hover, .keyword-button[data-keyword="investigate"].hovered, .keyword-button[data-keyword="investigate"].active { color: rgb(148, 197, 234) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="iterate"] { color: rgb(35, 122, 114) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="iterate"] { color: rgb(100, 210, 200) !important; }
.keyword-button[data-keyword="iterate"]:hover, .keyword-button[data-keyword="iterate"].hovered, .keyword-button[data-keyword="iterate"].active { color: rgb(100, 210, 200) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="narrate"] { color: rgb(32, 124, 87) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="narrate"] { color: rgb(120, 220, 180) !important; }
.keyword-button[data-keyword="narrate"]:hover, .keyword-button[data-keyword="narrate"].hovered, .keyword-button[data-keyword="narrate"].active { color: rgb(120, 220, 180) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="plan"] { color: rgb(20, 126, 69) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="plan"] { color: rgb(100, 230, 160) !important; }
.keyword-button[data-keyword="plan"]:hover, .keyword-button[data-keyword="plan"].hovered, .keyword-button[data-keyword="plan"].active { color: rgb(100, 230, 160) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="practice"] { color: rgb(0, 113, 186) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="practice"] { color: rgb(140, 210, 255) !important; }
.keyword-button[data-keyword="practice"]:hover, .keyword-button[data-keyword="practice"].hovered, .keyword-button[data-keyword="practice"].active { color: rgb(140, 210, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="project"] { color: rgb(39, 124, 110) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="project"] { color: rgb(107, 209, 192) !important; }
.keyword-button[data-keyword="project"]:hover, .keyword-button[data-keyword="project"].hovered, .keyword-button[data-keyword="project"].active { color: rgb(107, 209, 192) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="systematize"] { color: rgb(0, 110, 212) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="systematize"] { color: rgb(136, 197, 255) !important; }
.keyword-button[data-keyword="systematize"]:hover, .keyword-button[data-keyword="systematize"].hovered, .keyword-button[data-keyword="systematize"].active { color: rgb(136, 197, 255) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="theorize"] { color: rgb(41, 110, 203) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="theorize"] { color: rgb(161, 193, 236) !important; }
.keyword-button[data-keyword="theorize"]:hover, .keyword-button[data-keyword="theorize"].hovered, .keyword-button[data-keyword="theorize"].active { color: rgb(161, 193, 236) !important; }
.semantic-canvas .keyword-highlight.visible[data-keyword="work"] { color: rgb(53, 110, 187) !important; }
.semantic-canvas .semantic-card:hover .keyword-highlight.visible[data-keyword="work"] { color: rgb(167, 194, 230) !important; }
.keyword-button[data-keyword="work"]:hover, .keyword-button[data-keyword="work"].hovered, .keyword-button[data-keyword="work"].active { color: rgb(167, 194, 230) !important; }

/* Keywords lit by hovering a button look like that button: same colour on a blue chip */
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="critique"] { color: rgb(246, 174, 157) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="critical"] { color: rgb(255, 171, 117) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="interrogate"] { color: rgb(255, 174, 96) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="position"] { color: rgb(201, 182, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="post-critical"] { color: rgb(187, 187, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="problematize"] { color: rgb(245, 173, 201) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="question"] { color: rgb(241, 173, 182) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="reframe"] { color: rgb(240, 168, 223) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="reflect"] { color: rgb(220, 174, 239) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="analyze"] { color: rgb(240, 255, 50) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="analyse"] { color: rgb(240, 255, 50) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="applied art"] { color: rgb(142, 194, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="conceptualize"] { color: rgb(200, 200, 80) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="craft"] { color: rgb(163, 195, 239) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="design"] { color: rgb(120, 200, 240) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="dialecticize"] { color: rgb(94, 204, 241) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="discourse"] { color: rgb(100, 220, 200) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="evaluate"] { color: rgb(127, 200, 229) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="explore"] { color: rgb(120, 220, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="inquire"] { color: rgb(140, 200, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="intend"] { color: rgb(120, 200, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="investigate"] { color: rgb(148, 197, 234) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="iterate"] { color: rgb(100, 210, 200) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="narrate"] { color: rgb(120, 220, 180) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="plan"] { color: rgb(100, 230, 160) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="practice"] { color: rgb(140, 210, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="project"] { color: rgb(107, 209, 192) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="systematize"] { color: rgb(136, 197, 255) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="theorize"] { color: rgb(161, 193, 236) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }
.semantic-canvas .semantic-card .keyword-highlight.visible.hovered-keyword[data-keyword="work"] { color: rgb(167, 194, 230) !important; background-color: #0800FF; border-radius: 2px; padding: 0 2px; }