/* Roboto, self-hosted: the same six subsets barq.khit.be ships, so the KH IT
   tools share one typeface. ?v= must stay equal to VERSION in sw.js and to the
   ?v= on the <link>/<script> tags in index.html. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/roboto-400-latin.woff2?v=20260920) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/roboto-400-latin-ext.woff2?v=20260920) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/roboto-500-latin.woff2?v=20260920) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/roboto-500-latin-ext.woff2?v=20260920) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/roboto-700-latin.woff2?v=20260920) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/roboto-700-latin-ext.woff2?v=20260920) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* :root carries the dark values as the no-JS / pre-script fallback. Keep them
   equal to what [data-theme="dark"] resolves to: :root is what paints in the
   split second before theme-init.js runs, and whenever JS is unavailable.
   --text-muted used to differ between the two, which is why it is here now. */
:root {
    /* Shared with barq/3d/khit.be: one typeface, one hard line, one blue. */
    --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --mono: 'Roboto Mono', 'SF Mono', Consolas, Menlo, monospace;
    --blue: #003da5;

    --bg-body: #0b0f19;
    --card-bg: rgba(23, 28, 41, 0.80);
    --bg-image: url('DarkMode.jpg');
    --text-main: #f8fafc;
    --text-muted: #d1d5db;
    --border-color: rgba(255, 255, 255, 0.12);
    /* --line is barq's hard edge; on the dark theme it has to be light to read */
    --line: #e2e8f0;
    /* barq's 4px 4px 0 offset shadow; the cyan keeps colorpicker's own identity */
    --shadow: 4px 4px 0 var(--primary-accent);
    --shadow-sm: 2px 2px 0 var(--line);
    /* barq's focus ring is #003da5; unreadable on this dark theme, so cyan here */
    --focus: #38bdf8;
    --btn-dark: #0284c7;
    --btn-dark-hover: #38bdf8;
    --radius-lg: 16px;
    --radius-md: 10px;
    --primary-accent: #38bdf8;
    --link-accent: var(--primary-accent); /* accent used as text colour */
    --section-accent: var(--primary-accent);
    --header-bg: rgba(11, 15, 25, 0.75);
    --canvas-bg: rgba(15, 23, 42, 0.70);
    --dropdown-bg: #1e293b;
    --panel-header: rgba(30, 41, 59, 0.75);
    --btn-copy-bg: rgba(255, 255, 255, 0.10);
    --logo-color: #f1f5f9;
    --section-bg: #ffffff;
    --section-text: #0f172a;
    --section-muted: #475569;
    --section-border: #e2e8f0;
    --section-card-bg: #f8fafc;
}

[data-theme="light"] {
    --bg-body: #f8fafc;
    --bg-image: url('LightMode.jpg');
    --card-bg: rgba(255, 255, 255, 0.98);
    --text-main: #0f172a;
    --text-muted: #334155;
    --border-color: rgba(15, 23, 42, 0.18);
    /* barq's own values on the light theme */
    --line: #111111;
    --shadow: 4px 4px 0 var(--blue);
    --shadow-sm: 2px 2px 0 var(--line);
    --focus: #003da5;
    --btn-dark: #0284c7;
    --btn-dark-hover: #38bdf8;
    --primary-accent: #38bdf8;
    /* #38bdf8 text on white is 2.14:1; #0369a1 is 5.93:1 (WCAG AA) */
    --link-accent: #0369a1;
    --header-bg: rgba(248, 250, 252, 0.95);
    --canvas-bg: rgba(241, 245, 249, 0.92);
    --dropdown-bg: #ffffff;
    --panel-header: rgba(241, 245, 249, 0.92);
    --btn-copy-bg: rgba(15, 23, 42, 0.08);
    --logo-color: #0f172a;
    --section-bg: #ffffff;
    --section-text: #0f172a;
    --section-muted: #475569;
    --section-border: #e2e8f0;
    --section-card-bg: #f8fafc;
}

/* Only what really differs from :root: --text-muted and --border-color used to
   be repeated here, one of them with a different value (see the audit). */
[data-theme="dark"] {
    --section-bg: #02040b;
    --section-text: #f8fafc;
    --section-muted: #cbd5e1;
    --section-border: rgba(226, 232, 240, 0.08);
    --section-card-bg: #0a0a0a;
    --section-accent: var(--primary-accent);
    --panel-header: rgba(30, 41, 59, 0.78);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* One focus ring for the whole page, as barq has; the rules further down only
   change its colour or offset where an element needs it. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

body {
    font-family: var(--font);
    background-color: var(--bg-body);
    color: var(--text-main);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

/* ============================================ */
/* SECTION 1: TOP - HAS BACKGROUND IMAGE        */
/* ============================================ */

.section-top {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    /* No transition on background-image: it is not interpolable, so it only
       cost a style recalculation on every theme flip. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Mobile - Just zoom out the background */
@media (max-width: 768px) {
    .section-top {
        background-size: 130% 130% !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
}

@media (max-width: 480px) {
    .section-top {
        background-size: 160% 160% !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
}

/* Header */
.site-header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* barq's 3px rule under the header */
    border-bottom: 3px solid var(--line);
    padding: 1.2rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header-inner {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.site-logo {
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    color: var(--logo-color);
    gap: 0.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Separate rules: Safari < 15.4 drops a whole selector list containing :focus-visible */
.site-logo:hover {
    color: var(--link-accent);
}

.site-logo:focus-visible {
    color: var(--link-accent);
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.logo-img {
    width: 28px;
    height: 28px;
    margin-right: 0.5rem;
}

.site-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Header Navigation - CONSISTENT BLUE HOVER */
.header-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-right: 0.5rem;
}

/* barq underlines its nav on hover instead of filling a pill; the transparent
   border is always there, so nothing shifts. */
.nav-link {
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
    padding: 0.35rem 0.25rem;
    border-bottom: 3px solid transparent;
}

.nav-link:hover {
    color: var(--link-accent);
    border-bottom-color: var(--link-accent);
    opacity: 1;
}

/* Theme Switch */
.theme-switch {
    position: relative; /* carries the enlarged hit area below */
    --toggle-size: 12px;
    --container-width: 5.625em;
    --container-height: 2.8em;
    --container-radius: 6.25em;
    --container-light-bg: #3D7EAE;
    --container-night-bg: #1D1F2C;
    --circle-container-diameter: 3.375em;
    --sun-moon-diameter: 2.125em;
    --sun-bg: #ECCA2F;
    --moon-bg: #C4C9D1;
    --spot-color: #959DB1;
    --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
    --stars-color: #fff;
    --clouds-color: #F3FDFF;
    --back-clouds-color: #AACADF;
    --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
    --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: var(--toggle-size);
}

.theme-switch__container {
    width: var(--container-width);
    height: var(--container-height);
    background-color: var(--container-light-bg);
    border-radius: var(--container-radius);
    overflow: hidden;
    cursor: pointer;
    -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
    box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
}

.theme-switch__container::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
    border-radius: var(--container-radius)
}

/* Visually hidden but still focusable and announced (was display: none) */
.theme-switch__checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.theme-switch__checkbox:focus-visible + .theme-switch__container {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

/* The toggle renders 39x20 CSS px on a phone, under the 24x24 of WCAG 2.5.8.
   Padding on the <label> grows the tappable box; the equal negative margin
   cancels it again for layout, so nothing in the header moves and the circle
   keeps its own :hover. Values in px, not em: the rule above sets the label's
   font-size to --toggle-size. */
.theme-switch {
    padding: 8px 4px;
    margin: -8px -4px;
}

.theme-switch__circle-container {
    width: var(--circle-container-diameter);
    height: var(--circle-container-diameter);
    background-color: rgba(255, 255, 255, 0.1);
    position: absolute;
    left: var(--circle-container-offset);
    top: var(--circle-container-offset);
    border-radius: var(--container-radius);
    -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: var(--circle-transition);
    -o-transition: var(--circle-transition);
    transition: var(--circle-transition);
    pointer-events: none;
}

.theme-switch__sun-moon-container {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    width: var(--sun-moon-diameter);
    height: var(--sun-moon-diameter);
    margin: auto;
    border-radius: var(--container-radius);
    background-color: var(--sun-bg);
    -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
    overflow: hidden;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

.theme-switch__moon {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    background-color: var(--moon-bg);
    border-radius: inherit;
    -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
}

.theme-switch__spot {
    position: absolute;
    top: 0.75em;
    left: 0.312em;
    width: 0.75em;
    height: 0.75em;
    border-radius: var(--container-radius);
    background-color: var(--spot-color);
    -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
    width: 0.375em;
    height: 0.375em;
    top: 0.937em;
    left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
    width: 0.25em;
    height: 0.25em;
    top: 0.312em;
    left: 0.812em;
}

.theme-switch__clouds {
    width: 1.25em;
    height: 1.25em;
    background-color: var(--clouds-color);
    border-radius: var(--container-radius);
    position: absolute;
    bottom: -0.625em;
    left: 0.312em;
    -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
    position: absolute;
    color: var(--stars-color);
    top: -100%;
    left: 0.312em;
    width: 2.75em;
    height: auto;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

.theme-switch__checkbox:checked+.theme-switch__container {
    background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container:hover {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
    left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__moon {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__clouds {
    bottom: -4.062em;
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__stars-container {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* ============================================ */
/* PAGE WRAPPER & HERO - 1000px WIDE           */
/* ============================================ */

.page-wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem 0;
}

.hero-section {
    text-align: center;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    margin-bottom: 1.8rem;
}

/* ============================================ */
/* MAIN CONTAINER - 1000px WIDE                */
/* ============================================ */

.main-container {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* barq's hard 3px edge and 4px 4px 0 offset shadow, on colorpicker's
       rounded glass card */
    border: 3px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 1000px;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .main-container {
        grid-template-columns: 1.6fr 1fr;
        padding: 1.5rem;
        gap: 1.5rem;
        align-items: start;
    }
}

/* Workspace */
.workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.text-clean {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 0.35rem;
}

.image-section {
    display: flex;
    flex-direction: column;
}

.image-section .section-title {
    margin-bottom: 0.4rem;
}

.canvas-container {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    position: relative;
    background-color: var(--canvas-bg);
    display: block;
    overflow: hidden;
    border: 2px solid var(--line);
}

.canvas-container.active {
    cursor: crosshair;
}

#image-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

#image-canvas:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

/* Visible companion to #canvas-help, which is screen-reader only */
.canvas-hint {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.canvas-hint kbd {
    font-family: var(--mono);
    font-size: 0.8rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--btn-copy-bg);
    color: var(--text-main);
}

/* Keyboard picker position */
.kbd-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
    pointer-events: none;
    display: none;
}

/* 156px border-box minus the 3px border = a 150px content box, exactly the
   150x150 bitmap app.js draws, so the 5 sample blocks are 30px each and land
   on whole pixels. app.js keeps these two numbers in sync (MAG_BITMAP /
   MAG_BOX). Positioned with transform, not left/top: no layout per frame and
   no permanently promoted layer, so no will-change is needed. */
#magnifier-canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 156px;
    height: 156px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    display: none;
    z-index: 9999;
    image-rendering: pixelated;
    background: var(--canvas-bg);
}

/* Hidden until app.js shows it (display: flex) */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    color: white;
        font-size: 1rem;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================ */
/* PALETTE SECTIONS - COMPACT                   */
/* ============================================ */

.palette-section, .selected-palette-section {
    display: flex;
    flex-direction: column;
}

.palette-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

.palette-grid, .selected-palette-grid {
    display: flex;
    flex: 1;
    height: 42px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--line);
}

.selected-palette-grid {
    background-color: var(--canvas-bg);
}

/* Stacked as before. The small gap keeps the centres of the two buttons
   25px apart (WCAG 2.5.8 target spacing); the negative margin keeps the row
   height unchanged. Below 480px it becomes a row (see that media block), so
   the buttons never shrink under 28x28. */
.palette-action-stack {
    position: relative;
    height: 46px;
    width: 36px;
    margin: -2px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.palette-action-stack .icon-btn {
    height: 21px !important;
    flex-shrink: 0;
}

/* barq's button: hard border with a solid offset shadow that the press
   swallows. */
.icon-btn {
    background: var(--card-bg);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.1s;
}

.icon-btn:hover {
    background: var(--btn-copy-bg);
    color: var(--text-main);
}

.icon-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* The stacked pair is only 21px tall: an offset shadow there just smudges it */
.palette-action-stack .icon-btn {
    box-shadow: none;
}

#reset-selected-palette:hover {
    transform: rotate(35deg);
}

/* Step 1 of the two-step reset: the button says so until it is confirmed */
.icon-btn.is-armed {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

#reset-selected-palette.is-armed:hover {
    transform: none;
}

.reset-confirm-hint {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    color: var(--text-main);
    background: var(--dropdown-bg);
    border: 2px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    z-index: 30;
}

.alert-hover-style:hover {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.palette-swatch, .selected-swatch {
    flex: 1;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.2s, flex-grow 0.3s;
    border: none;
    background: transparent;
}

.palette-swatch:hover,
.selected-swatch:hover {
    opacity: 0.9;
    flex-grow: 1.8;
}

/* Kept separate from :hover (Safari < 15.4 ignores lists with :focus-visible) */
.palette-swatch:focus-visible,
.selected-swatch:focus-visible {
    opacity: 0.9;
    flex-grow: 1.8;
    outline: 3px solid var(--focus);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px var(--bg-body);
}

.download-dropdown {
    position: relative;
    flex-shrink: 0;
}

.dropdown-menu-small {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--dropdown-bg);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    z-index: 20;
    display: none;
    min-width: 220px;
    overflow: hidden;
}

.dropdown-menu-small.show {
    display: block;
}

.dropdown-item-small {
    width: 100%;
    padding: 0.9rem 1.2rem;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-main);
    font-family: var(--font);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

.dropdown-item-small:hover {
    background: var(--panel-header);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.3rem 0;
}

/* ============================================ */
/* SIDEBAR - FIXED ALIGNMENT                   */
/* ============================================ */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
}

@media (min-width: 1024px) {
    .sidebar {
        align-self: start;
    }
}

.color-section {
    border: 2px solid var(--line);
    background: var(--canvas-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.color-section-header {
    background: var(--panel-header);
    padding: 0.45rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    flex-shrink: 0;
}

.color-content {
    padding: 0.4rem 0.8rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.color-swatch {
    width: 100%;
    height: 32px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.value-row-simple.compact-gap {
    display: grid;
    grid-template-columns: 32px 1fr 30px;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.value-row-simple:last-child {
    border-bottom: none;
}

.value-label-simple {
        font-weight: 700;
        color: var(--text-muted);
        font-size: 0.95rem;
        letter-spacing: 0.05em;
        line-height: 1.4;
    }

    .value-text {
        text-align: left;
        font-weight: 600;
        font-size: 1rem;
        font-family: var(--mono);
        letter-spacing: 0.01em;
        color: var(--text-main);
        line-height: 1.45;
    }

.copy-btn-simple {
    background: var(--btn-copy-bg);
    border: 2px solid var(--line);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.15s, transform 0.1s;
}

.copy-btn-simple:hover {
    background: var(--panel-header);
}

.copy-btn-simple:active {
    transform: translate(1px, 1px);
}

.copy-btn-simple svg {
    width: 16px;
    height: 16px;
}

/* ============================================ */
/* UPLOAD ZONE - CONSISTENT BLUE HOVER         */
/* ============================================ */

/* barq's upload button: dashed until you hover it, then solid */
.integrated-upload-zone {
    grid-column: 1 / -1;
    border: 2px dashed var(--line);
    border-radius: var(--radius-md);
    padding: 1.5rem 2rem;
    text-align: center;
    cursor: pointer;
    background: var(--canvas-bg);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.integrated-upload-zone:hover, .integrated-upload-zone.drag-active {
    border-style: solid;
    border-color: var(--primary-accent);
    background: rgba(56, 189, 248, 0.05);
}

.integrated-upload-zone svg {
    width: 38px;
    height: 38px;
}

.integrated-upload-zone h4 {
    font-size: 1.15rem;
        font-weight: 700;
        margin-top: 0.6rem !important;
        line-height: 1.3;
}

#file-input {
    display: none;
}

.privacy-text--lead {
    margin-top: 0.25rem;
}

/* ============================================ */
/* EMPTY PLACEHOLDER - COMPACT                  */
/* ============================================ */

.palette-grid .empty-placeholder,
.selected-palette-grid .empty-placeholder {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-style: italic;
    background: transparent;
    padding: 0 0.75rem;
    text-align: center;
    min-height: 42px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--canvas-bg);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dropdown-bg);
    color: var(--text-main);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--line);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 10000;
    animation: slideUp 0.3s ease, fadeOut 0.3s ease 1.2s forwards;
    pointer-events: none;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Longer messages (errors) stay readable for 5s */
.copy-toast--long {
    animation: slideUp 0.3s ease, fadeOut 0.3s ease 4.7s forwards;
}

@keyframes fadeOut {
    to { opacity: 0; }
}

/* ============================================ */
/* SECTION 2: BOTTOM - SOLID BACKGROUND         */
/* ============================================ */

.section-bottom {
    background-color: var(--section-bg);
    padding: 3rem 0;
    transition: background-color 0.3s ease;
}

.extended-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.extended-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 1.25rem;
}

.extended-text {
    flex: 1;
}

.extended-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--section-text);
    margin: 0 0 0.4rem 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.extended-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--section-text);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.extended-description {
    font-size: 1rem;
    color: var(--section-muted);
    line-height: 1.8;
    margin: 0;
    max-width: 95%;
}

.extended-graphic {
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extended-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.extended-graphic:hover .extended-logo-img {
    transform: scale(1.08) rotate(5deg);
}

.extended-faq {
    border-top: 1px solid var(--section-border);
    padding-top: 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 4rem;
}

.extended-faq-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--section-text);
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.01em;
}

.extended-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.extended-faq-item {
    border-bottom: 1px solid var(--section-border);
    padding: 0;
}

.extended-faq-item:last-child {
    border-bottom: none;
}

.extended-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--section-text);
    transition: color 0.2s ease;
    user-select: none;
    position: relative;
}

.extended-faq-question::-webkit-details-marker {
    display: none;
}

.extended-faq-question:hover {
    color: var(--link-accent);
}

.extended-faq-question::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-right: 2.5px solid var(--section-muted);
    border-bottom: 2.5px solid var(--section-muted);
    transform: rotate(45deg);
    transition: transform 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.extended-faq-item[open] .extended-faq-question::after {
    transform: rotate(-135deg);
    border-color: var(--section-accent);
}

.extended-faq-answer {
    padding: 0 0 1.2rem 0;
    color: var(--section-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.extended-faq-answer p {
    margin: 0;
}

.extended-faq-answer a {
    color: var(--link-accent);
    font-weight: 600;
}

.extended-faq-answer kbd {
    background: var(--section-card-bg);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: var(--mono);
    border: 1px solid var(--section-border);
    color: var(--section-text);
}

@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .extended-row {
        flex-direction: column-reverse;
        text-align: center;
        gap: 2.5rem;
        margin-top: 2rem;
    }
    
    .extended-description {
        max-width: 100%;
    }
    
    .extended-graphic {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 0.8rem 1rem;
    }
    
    .site-header-inner {
        padding: 0 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }
    
    .site-logo {
        font-size: 1rem;
        flex-shrink: 0;
    }
    
    .logo-img {
        width: 24px;
        height: 24px;
        margin-right: 0.3rem;
    }
    
    .site-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .header-nav {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-right: 0.3rem;
    }
    
    .nav-link {
        font-size: 0.95rem;
        padding: 0.35rem 0.55rem;
        white-space: nowrap;
    }
    
    .theme-switch {
        --toggle-size: 8px;
    }
    
    .page-wrapper {
        padding: 0.5rem 1rem 0 !important;
    }
    
    .hero-title {
        font-size: 2.3rem !important;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    .main-container {
        padding: 1rem !important;
        gap: 1rem !important;
        border-radius: var(--radius-md) !important;
    }
    
    .text-clean {
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .palette-grid, .selected-palette-grid {
        height: 42px !important;
        border-radius: 10px !important;
    }
    
    .palette-grid .empty-placeholder,
    .selected-palette-grid .empty-placeholder {
        font-size: 0.95rem !important;
        padding: 0 0.75rem !important;
        min-height: 42px !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .palette-bar-row {
        gap: 0.5rem !important;
    }
    
    .icon-btn {
        width: 34px !important;
        height: 34px !important;
    }
    
    .icon-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .palette-action-stack {
        height: 46px !important;
        width: 34px !important;
    }
    
    .color-swatch {
        height: 32px !important;
    }
    
    .color-content {
        padding: 0.4rem 0.7rem 0.6rem !important;
    }
    
    .value-text {
        font-size: 0.9rem !important;
    }
    
    .value-row-simple.compact-gap {
        grid-template-columns: 30px 1fr 30px !important;
        gap: 0.45rem !important;
        padding: 0.25rem 0 !important;
    }
    
    .copy-btn-simple {
        width: 30px !important;
        height: 30px !important;
    }
    
    .copy-btn-simple svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .value-label-simple {
        font-size: 0.95rem !important;
    }
    
    .integrated-upload-zone {
        padding: 1.2rem 1rem !important;
    }
    
    .integrated-upload-zone svg {
        width: 34px !important;
        height: 34px !important;
    }
    
    .integrated-upload-zone h4 {
        font-size: 1rem !important;
    }
    
    .privacy-text {
        font-size: 0.92rem !important;
    }
    
    .sidebar {
        height: auto;
        gap: 0.5rem !important;
    }
    
    .color-section-header {
        font-size: 0.95rem !important;
        padding: 0.35rem 0.7rem !important;
    }
    
    .section-bottom {
        padding: 3rem 0 4rem 0;
    }
    
    .extended-wrapper {
        padding: 0 1rem;
    }
    
    .extended-row {
        flex-direction: column !important;
        gap: 1.5rem;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 2rem;
        padding-top: 0.5rem;
    }
    
    .extended-text {
        order: 1 !important;
        width: 100%;
    }
    
    .extended-graphic {
        order: 2 !important;
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        margin: 0 auto !important;
    }
    
    .extended-logo-img {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }
    
    .extended-title {
        font-size: 1.8rem;
    }
    
    .extended-subtitle {
        font-size: 1rem;
    }
    
    .extended-description {
        font-size: 0.9rem;
        max-width: 100%;
        padding: 0 0.5rem;
    }
    
    .extended-faq {
        padding-top: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .extended-faq-title {
        font-size: 1.6rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .extended-faq-question {
        font-size: 0.95rem;
        padding: 0.8rem 0;
    }
    
    .extended-faq-answer {
        font-size: 0.9rem;
        padding: 0 0 0.8rem 0;
        line-height: 1.6;
    }
    
    .extended-faq-question::after {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: 0.6rem 0.5rem;
    }
    
    .site-header-inner {
        gap: 0.3rem;
    }
    
    .site-logo {
        font-size: 0.95rem;
    }
    
    .logo-img {
        width: 20px;
        height: 20px;
    }
    
    .header-nav {
        gap: 0.4rem;
    }
    
    .nav-link {
        font-size: 0.95rem;
        padding: 0.35rem 0.45rem;
    }
    
    .theme-switch {
        --toggle-size: 7px;
    }
    
    .page-wrapper {
        padding: 0.5rem 0.5rem 0 !important;
    }
    
    .hero-title {
        font-size: 1.9rem !important;
        margin-top: 0.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.98rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem !important;
    }
    
    .main-container {
        padding: 0.8rem !important;
        gap: 0.8rem !important;
    }
    
    .text-clean {
        font-size: 0.95rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .palette-grid, .selected-palette-grid {
        height: 34px !important;
        border-radius: 8px !important;
    }
    
    .palette-grid .empty-placeholder,
    .selected-palette-grid .empty-placeholder {
        font-size: 0.95rem !important;
        padding: 0 0.75rem !important;
        min-height: 34px !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .palette-bar-row {
        gap: 0.35rem !important;
    }
    
    .icon-btn {
        width: 28px !important;
        height: 28px !important;
    }
    
    .icon-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Stop stacking on a phone: two 28x28 buttons side by side instead of a
       17px-tall Reset that wipes the whole saved palette. Clears WCAG 2.5.8
       outright rather than leaning on the spacing exception. */
    .palette-action-stack {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    .palette-action-stack .icon-btn {
        height: 28px !important;
    }

    .color-swatch {
        height: 28px !important;
    }
    
    .color-content {
        padding: 0.3rem 0.5rem 0.5rem !important;
    }
    
    .value-text {
        font-size: 0.95rem !important;
    }
    
    .value-row-simple.compact-gap {
        grid-template-columns: 2.25rem 1fr auto !important;
        gap: 0.35rem !important;
        padding: 0.2rem 0 !important;
    }
    
    .copy-btn-simple {
        width: 26px !important;
        height: 26px !important;
    }
    
    .copy-btn-simple svg {
        width: 12px !important;
        height: 12px !important;
    }
    
    .value-label-simple {
        font-size: 0.9rem !important;
        letter-spacing: 0;
    }
    
    .integrated-upload-zone {
        padding: 0.9rem 0.5rem !important;
    }
    
    .integrated-upload-zone svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .integrated-upload-zone h4 {
        font-size: 0.95rem !important;
        margin-top: 0.5rem !important;
    }
    
    .privacy-text {
        font-size: 0.95rem !important;
    }

    .sidebar {
        gap: 0.4rem !important;
    }
    
    .color-section-header {
        font-size: 0.95rem !important;
        padding: 0.3rem 0.6rem !important;
    }
    
    .section-bottom {
        padding: 2rem 0 2.5rem 0;
    }
    
    .extended-wrapper {
        padding: 0 0.5rem;
    }
    
    .extended-row {
        gap: 1rem;
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .extended-graphic {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }
    
    .extended-logo-img {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }
    
    .extended-title {
        font-size: 1.4rem;
    }
    
    .extended-subtitle {
        font-size: 0.9rem;
    }
    
    .extended-description {
        font-size: 0.95rem;
        padding: 0 0.25rem;
    }
    
    .extended-faq {
        padding-top: 1rem;
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .extended-faq-title {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    .extended-faq-question {
        font-size: 0.95rem;
        padding: 0.6rem 0;
    }
    
    .extended-faq-answer {
        font-size: 0.95rem;
        padding: 0 0 0.6rem 0;
        line-height: 1.6;
    }
    
    .extended-faq-question::after {
        width: 8px;
        height: 8px;
        border-width: 2px;
    }
}

/* ============================================ */
/* SECTION 3: FOOTER - CONSISTENT BLUE HOVER   */
/* ============================================ */

.site-footer {
    background-color: var(--section-bg);
    padding: 1.75rem 0 1rem;
    transition: background-color 0.3s ease;
}

.footer-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1rem 1rem;
    border-top: 1px solid var(--section-border);
}

.footer-content > * {
    min-width: 0;
}

.footer-copyright p {
    color: var(--section-muted);
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0;
}

.footer-links a {
    color: var(--link-accent);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
}

.footer-links a:hover {
    color: var(--link-accent);
    background: rgba(56, 189, 248, 0.08);
    opacity: 1;
}

@media (max-width: 600px) {
    .site-footer {
        padding: 1.5rem 0;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .footer-copyright p {
        font-size: 0.95rem;
    }
    
    .footer-links a {
        font-size: 0.95rem;
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: var(--btn-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--btn-dark-hover);
}

/* ============================================ */
/* ACCESSIBILITY HELPERS                        */
/* ============================================ */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Windows Contrast themes: keep showing the real colours of the swatches */
@media (forced-colors: active) {
    .palette-swatch,
    .selected-swatch,
    .color-swatch {
        forced-color-adjust: none;
    }

    .palette-swatch:focus-visible,
    .selected-swatch:focus-visible {
        outline-color: Highlight;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* Deliberately NOT in the blanket reset below: a spinner frozen at 0.01ms
       reads as a broken graphic. Slowed down instead. */
    .spinner {
        animation-duration: 2.4s;
    }

    /* Everything else that moves: the theme switch's sliding circle, clouds
       and stars, the toast, the body/section colour fades. */
    body,
    .section-bottom,
    .site-footer,
    .theme-switch__container,
    .theme-switch__circle-container,
    .theme-switch__sun-moon-container,
    .theme-switch__moon,
    .theme-switch__clouds,
    .theme-switch__stars-container,
    .palette-swatch,
    .selected-swatch,
    .copy-toast,
    .extended-logo-img,
    .extended-faq-question::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    /* flex-grow is layout, not animation: zeroing the duration only makes the
       reflow instant. The swatch has to stop growing altogether; the outline
       and opacity still show which one is focused. */
    .palette-swatch:hover,
    .selected-swatch:hover,
    .palette-swatch:focus-visible,
    .selected-swatch:focus-visible {
        flex-grow: 1;
    }

    .extended-graphic:hover .extended-logo-img,
    #reset-selected-palette:hover {
        transform: none;
    }
}