/* =========================================================================
   BEE-OPTECH4Honey 2.0 — Design system
   Honey-gold / amber / charcoal palette derived from the official logo.
   Light, dark and system themes; no inline styles (strict CSP).
   ========================================================================= */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") 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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") 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: "Source Serif 4";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-serif-4-latin-wght-normal.woff2") 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: "Source Serif 4";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-serif-4-latin-ext-wght-normal.woff2") 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;
}

/* ---------- Tokens ---------- */
:root {
    --font-sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --honey-50: #fff8eb;
    --honey-100: #feebc8;
    --honey-200: #fcd38d;
    --honey-300: #fbbf5a;
    --honey-400: #f7a23b;
    --honey-500: #f68b1f;
    --honey-600: #d96f0b;
    --honey-700: #b45309;
    --amber: #fdc614;
    --charcoal-950: #0f0d0b;
    --charcoal-900: #17140f;
    --charcoal-800: #1f1b16;
    --charcoal-700: #2a241d;
    --charcoal-600: #3a332a;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;

    --sidebar-width: 268px;
    --topbar-height: 64px;
    --content-max: 1240px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Sidebar is charcoal in both themes. */
    --sidebar-bg: #17140f;
    --sidebar-border: #2a241d;
    --sidebar-text: #d7cdbf;
    --sidebar-muted: #8f8577;
    --sidebar-hover: #221d17;
    --sidebar-active: #2c251c;

    /* Light theme (default) */
    color-scheme: light;
    --bg: #faf7f2;
    --surface: #ffffff;
    --surface-2: #f6f1e8;
    --surface-3: #efe7da;
    --border: #e8dfd0;
    --border-strong: #d6c8b2;
    --text: #1f1b16;
    --text-2: #474037;
    --text-muted: #6b6155;
    --accent: #f7a23b;
    --accent-hover: #f39424;
    --accent-strong: #a84d07;
    --accent-soft: #fef0d9;
    --on-accent: #1f1b16;
    --focus: #d96f0b;
    --success: #1c7346;
    --success-soft: #e2f2e9;
    --warning: #8f5300;
    --warning-soft: #fdf0d4;
    --danger: #b42318;
    --danger-soft: #fde8e6;
    --info: #1b5a85;
    --info-soft: #e2eef8;
    --neutral-soft: #efe9e0;
    --overlay: rgba(23, 20, 15, .48);
    --shadow-sm: 0 1px 2px rgba(31, 27, 22, .06);
    --shadow: 0 1px 2px rgba(31, 27, 22, .05), 0 8px 24px -12px rgba(31, 27, 22, .16);
    --shadow-lg: 0 24px 48px -20px rgba(31, 27, 22, .32);
    --logo-light: block;
    --logo-dark: none;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #100e0c;
    --surface: #191612;
    --surface-2: #201c17;
    --surface-3: #29241e;
    --border: #322c25;
    --border-strong: #463e34;
    --text: #f2ebe1;
    --text-2: #d6ccbf;
    --text-muted: #a69a89;
    --accent: #f7a23b;
    --accent-hover: #fbb556;
    --accent-strong: #fbc06a;
    --accent-soft: rgba(247, 162, 59, .14);
    --on-accent: #1a1410;
    --focus: #fbbf5a;
    --success: #6ccf98;
    --success-soft: rgba(108, 207, 152, .13);
    --warning: #f6c25a;
    --warning-soft: rgba(246, 194, 90, .13);
    --danger: #f8897d;
    --danger-soft: rgba(248, 137, 125, .13);
    --info: #86bff0;
    --info-soft: rgba(134, 191, 240, .13);
    --neutral-soft: rgba(255, 255, 255, .06);
    --overlay: rgba(0, 0, 0, .6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, .7);
    --sidebar-bg: #0d0b09;
    --sidebar-border: #221d17;
    --sidebar-hover: #1a1612;
    --sidebar-active: #241e17;
    --logo-light: none;
    --logo-dark: block;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        color-scheme: dark;
        --bg: #100e0c;
        --surface: #191612;
        --surface-2: #201c17;
        --surface-3: #29241e;
        --border: #322c25;
        --border-strong: #463e34;
        --text: #f2ebe1;
        --text-2: #d6ccbf;
        --text-muted: #a69a89;
        --accent: #f7a23b;
        --accent-hover: #fbb556;
        --accent-strong: #fbc06a;
        --accent-soft: rgba(247, 162, 59, .14);
        --on-accent: #1a1410;
        --focus: #fbbf5a;
        --success: #6ccf98;
        --success-soft: rgba(108, 207, 152, .13);
        --warning: #f6c25a;
        --warning-soft: rgba(246, 194, 90, .13);
        --danger: #f8897d;
        --danger-soft: rgba(248, 137, 125, .13);
        --info: #86bff0;
        --info-soft: rgba(134, 191, 240, .13);
        --neutral-soft: rgba(255, 255, 255, .06);
        --overlay: rgba(0, 0, 0, .6);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -12px rgba(0, 0, 0, .6);
        --shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, .7);
        --sidebar-bg: #0d0b09;
        --sidebar-border: #221d17;
        --sidebar-hover: #1a1612;
        --sidebar-active: #241e17;
        --logo-light: none;
        --logo-dark: block;
    }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
}

:where(ul, ol)[role="list"] {
    list-style: none;
    padding: 0;
}

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-thickness: 2px;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

code, pre, .mono {
    font-family: var(--font-mono);
    font-size: .88em;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection {
    background: var(--honey-200);
    color: var(--charcoal-900);
}

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

.skip-link {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    z-index: 1000;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: var(--s-3);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

.muted {
    color: var(--text-muted);
}

.nowrap {
    white-space: nowrap;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.grow {
    flex: 1;
}

.logo--light {
    display: var(--logo-light);
}

.logo--dark {
    display: var(--logo-dark);
}

/* ---------- Layout primitives ---------- */
.stack > * + * {
    margin-top: var(--s-3);
}

.stack-lg > * + * {
    margin-top: var(--s-6);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
}

.cluster--tight {
    gap: var(--s-1) var(--s-2);
}

.grid {
    display: grid;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--main-side { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }

.layout-split {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
}

@media (max-width: 1100px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--main-side, .layout-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- App shell ---------- */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    overflow-y: auto;
    z-index: 40;
}

.sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) var(--s-5) var(--s-4);
}

.sidebar__brand img {
    width: 168px;
    height: auto;
}

.sidebar .sidebar__close {
    display: none;
    color: var(--sidebar-text);
}

.sidebar__nav {
    flex: 1;
    padding: var(--s-2) var(--s-3) var(--s-4);
}

.nav-section + .nav-section {
    margin-top: var(--s-5);
}

.nav-section__title {
    padding: 0 var(--s-3);
    margin-bottom: var(--s-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 9px var(--s-3);
    border-radius: 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

.nav-link .icon {
    color: var(--sidebar-muted);
    transition: color .15s var(--ease);
}

.nav-link:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.nav-link:hover .icon {
    color: var(--honey-300);
}

.nav-link.is-active {
    background: var(--sidebar-active);
    color: #fff;
}

.nav-link.is-active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(var(--amber), var(--honey-500));
}

.nav-link.is-active .icon {
    color: var(--honey-400);
}

.nav-link:focus-visible {
    outline-color: var(--honey-300);
}

.nav-link__badge {
    margin-left: auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--honey-400);
    color: var(--charcoal-900);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.sidebar__footer {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius);
    font-size: 12px;
}

.sidebar__project {
    color: var(--sidebar-text);
    font-weight: 600;
}

.sidebar__lab {
    color: var(--sidebar-muted);
    letter-spacing: .08em;
}

.hexmark {
    width: 22px;
    height: 25px;
    flex: none;
    background: linear-gradient(135deg, var(--amber), var(--honey-500));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.sidebar-scrim {
    display: none;
}

.app__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: var(--topbar-height);
    padding: 0 var(--s-6);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.topbar .topbar__menu {
    display: none;
}

.topbar__context {
    flex: 1;
    min-width: 0;
}

.topbar__end {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.content {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-7) var(--s-6) var(--s-8);
}

.content:focus {
    outline: none;
}

.content--bleed {
    flex: 1;
    padding: 0;
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-6);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
}

.app-footer a {
    color: inherit;
}

@media (max-width: 1024px) {
    .app {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 300px);
        transform: translateX(-102%);
        transition: transform .25s var(--ease);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar .sidebar__close,
    .topbar .topbar__menu {
        display: inline-flex;
    }

    .sidebar-scrim:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: var(--overlay);
    }

    .topbar {
        padding: 0 var(--s-4);
    }

    .content {
        padding: var(--s-6) var(--s-4) var(--s-7);
    }

    .user-chip__name {
        display: none;
    }
}

/* ---------- Page header ---------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.page-header--dashboard {
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--border);
}

.page-header__meta {
    color: var(--text-muted);
    font-size: 13px;
}

.eyebrow {
    margin-bottom: var(--s-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.eyebrow--light {
    color: var(--honey-300);
}

.page-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.page-lead {
    max-width: 68ch;
    margin-top: var(--s-2);
    color: var(--text-muted);
    font-size: 15.5px;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--s-2);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.back-link:hover {
    color: var(--text);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-4);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn .icon {
    width: 18px;
    height: 18px;
}

.btn--primary {
    background: linear-gradient(180deg, var(--honey-300), var(--accent));
    border-color: color-mix(in srgb, var(--honey-600) 55%, transparent);
    color: var(--on-accent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 6px -2px rgba(217, 111, 11, .45);
}

.btn--primary:hover {
    background: linear-gradient(180deg, var(--honey-400), var(--accent-hover));
}

.btn--secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
    background: var(--surface-2);
}

.btn--ghost {
    background: transparent;
    color: var(--text-2);
}

.btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text);
}

.btn--danger {
    background: var(--danger);
    color: #fff;
}

:root[data-theme="dark"] .btn--danger {
    color: #1a0e0c;
}

.btn--danger:hover {
    filter: brightness(1.06);
}

.btn--danger-text {
    color: var(--danger);
}

.btn--sm {
    min-height: 32px;
    padding: 0 var(--s-3);
    font-size: 13px;
    border-radius: 8px;
}

.btn--lg {
    min-height: 46px;
    padding: 0 var(--s-5);
    font-size: 15px;
}

.btn--block {
    width: 100%;
}

.btn[disabled],
.btn[aria-busy="true"] {
    opacity: .65;
    cursor: progress;
}

.btn[aria-busy="true"]::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

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

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    list-style: none;
}

.icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.icon-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.icon-btn__text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.icon-btn__badge {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--bg);
    border-radius: var(--radius-pill);
    background: var(--honey-500);
    color: var(--charcoal-900);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.link-arrow .icon {
    width: 16px;
    height: 16px;
    transition: transform .15s var(--ease);
}

.link-arrow:hover .icon {
    transform: translateX(3px);
}

/* ---------- Menus (details/summary dropdowns) ---------- */
.menu {
    position: relative;
}

.menu > summary {
    list-style: none;
    cursor: pointer;
}

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

.menu[open] > summary.icon-btn {
    background: var(--surface-2);
    color: var(--text);
}

.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    min-width: 240px;
    padding: var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: menu-in .14s var(--ease);
}

.topbar__context .menu__panel {
    left: 0;
    right: auto;
}

.menu__panel--compact {
    min-width: 190px;
}

.menu__panel--wide {
    width: min(92vw, 380px);
    padding: 0;
}

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.menu__heading {
    padding: var(--s-2) var(--s-3) var(--s-1);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
}

.menu__header .menu__heading {
    padding: 0;
}

.menu__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: 9px var(--s-3);
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu__item:hover,
.menu__item:focus-visible {
    background: var(--surface-2);
}

.menu__item .icon {
    color: var(--text-muted);
}

.menu__item--danger,
.menu__item--danger .icon {
    color: var(--danger);
}

.menu__check {
    margin-left: auto;
    visibility: hidden;
    color: var(--accent-strong) !important;
}

.menu__item[aria-checked="true"] .menu__check {
    visibility: visible;
}

.menu__item[aria-checked="true"] {
    font-weight: 600;
}

.menu__divider {
    margin: var(--s-2) 0;
}

.menu__identity {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    margin-bottom: var(--s-2);
    border-radius: 10px;
    background: var(--surface-2);
}

.menu__identity-name {
    font-weight: 600;
}

.menu__identity-roles {
    color: var(--text-muted);
    font-size: 12.5px;
}

.menu__footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.menu__footer-link .icon {
    width: 16px;
    height: 16px;
}

.role-switch,
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: 13.5px;
}

.role-switch:hover {
    border-color: var(--border-strong);
}

.role-switch__label {
    color: var(--text-muted);
}

.role-switch__value,
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.role-switch__value .icon,
.role-pill .icon {
    width: 16px;
    height: 16px;
    color: var(--accent-strong);
}

.role-switch__chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.role-pill,
.role-switch {
    max-width: 100%;
    white-space: nowrap;
}

.role-pill__text,
.role-switch__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .role-switch__label { display: none; }

    /* Compact top bar on phones: role indicator collapses to its icon (name kept for screen readers). */
    .role-pill__text,
    .role-switch__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .topbar .icon-btn__text { display: none; }
    .topbar { gap: var(--s-1); padding: 0 var(--s-2); }
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 8px 4px 4px;
    border-radius: var(--radius-pill);
}

.user-chip:hover {
    background: var(--surface-2);
}

.user-chip__name {
    max-width: 160px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip__chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--amber), var(--honey-500));
    color: var(--charcoal-900);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
}

.avatar--lg {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card--narrow {
    max-width: 640px;
}

.card--muted {
    background: var(--surface-2);
    box-shadow: none;
}

.card--feature {
    background:
        radial-gradient(120% 140% at 100% 0%, var(--accent-soft), transparent 60%),
        var(--surface);
}

.card--danger-zone {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.card--decision {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.card__header {
    padding: var(--s-5) var(--s-5) 0;
}

.card__header--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
}

.card__header + .card__body,
.card__header + .table-wrap,
.card__header + .list,
.card__header + .empty,
.card__header + .activity,
.card__header + .bars,
.card__header + .roadmap {
    margin-top: var(--s-3);
}

.card__title {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.005em;
}

.card__title--lg {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
}

.card__subtitle {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.card__body {
    padding: var(--s-5);
}

.card__footer {
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.card__footnote {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
}

.card__footnote .icon {
    width: 15px;
    height: 15px;
}

.card__icon {
    width: 28px;
    height: 28px;
    color: var(--accent-strong);
}

.feature-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

/* ---------- Metrics ---------- */
.metric {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon label"
        "value value"
        "hint hint";
    align-items: center;
    column-gap: var(--s-3);
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}

a.metric:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.metric__icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.metric__icon .icon {
    width: 18px;
    height: 18px;
}

.metric__icon--success {
    background: var(--success-soft);
    color: var(--success);
}

.metric__icon--muted {
    background: var(--neutral-soft);
    color: var(--text-muted);
}

.metric__label {
    grid-area: label;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.metric__value {
    grid-area: value;
    margin-top: var(--s-4);
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric__value--sm {
    font-family: var(--font-mono);
    font-size: 20px;
}

.metric__hint {
    grid-area: hint;
    margin-top: var(--s-2);
    color: var(--text-muted);
    font-size: 12.5px;
}

.metric--attention {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background:
        linear-gradient(180deg, var(--accent-soft), transparent 70%),
        var(--surface);
}

.metric--warning .metric__icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.metric--warning {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}

/* ---------- Badges & chips ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--neutral-soft);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.badge .icon {
    width: 13px;
    height: 13px;
}

.badge--xs {
    padding: 0 7px;
    font-size: 11px;
    line-height: 18px;
}

.badge--lg {
    padding: 4px 14px;
    font-size: 13px;
}

.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--honey { background: var(--accent-soft); color: var(--accent-strong); }
.badge--neutral { background: var(--neutral-soft); color: var(--text-2); }

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}

.chip .icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

a.chip:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.chip--warning {
    border-color: transparent;
    background: var(--warning-soft);
    color: var(--warning);
}

/* ---------- Tables ---------- */
.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th,
.table td {
    padding: 12px var(--s-5);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody tr:last-child td,
.table tbody tr:last-child th {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.table th[scope="row"] {
    font-weight: 400;
}

.table .text-right { text-align: right; }
.table .text-center { text-align: center; }

.table__actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.cell-strong {
    display: block;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

a.cell-strong:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.cell-muted {
    display: block;
    color: var(--text-muted);
    font-size: 12.5px;
}

td.cell-muted {
    display: table-cell;
}

.cell-truncate {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Lists ---------- */
.list {
    padding: 0 var(--s-5) var(--s-2);
}

.list__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
}

.list__item:last-child {
    border-bottom: 0;
}

.list__item--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
}

.list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
}

.list__icon .icon {
    width: 18px;
    height: 18px;
}

.list__body {
    flex: 1;
    min-width: 0;
}

.list__title {
    display: block;
    color: var(--text);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
}

a.list__title:hover {
    color: var(--accent-strong);
}

.list__meta {
    color: var(--text-muted);
    font-size: 12.5px;
}

.dl {
    display: grid;
    gap: var(--s-3);
}

.dl > div {
    display: grid;
    grid-template-columns: minmax(120px, 40%) 1fr;
    gap: var(--s-3);
    align-items: baseline;
}

.dl dt {
    color: var(--text-muted);
    font-size: 13px;
}

.dl dd {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dl--grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s-4) var(--s-5);
}

.dl--grid > div,
.dl--inline > div {
    grid-template-columns: 1fr;
    gap: 2px;
}

.dl--inline {
    grid-template-columns: repeat(2, 1fr);
}

/* Activity feed (audit) */
.activity {
    padding: 0 var(--s-5) var(--s-3);
}

.activity__item {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-3) 0;
}

.activity__item + .activity__item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: -10px;
    height: 20px;
    border-left: 1px dashed var(--border-strong);
}

.activity__dot {
    width: 13px;
    height: 13px;
    margin-top: 4px;
    border: 3px solid var(--accent-soft);
    border-radius: 50%;
    background: var(--accent);
}

.activity__title {
    color: var(--text);
    text-decoration: none;
}

.activity__title:hover code {
    color: var(--accent-strong);
}

.activity__meta {
    color: var(--text-muted);
    font-size: 12.5px;
}

.activity__item time {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* Horizontal bars */
.bars {
    padding: 0 var(--s-5) var(--s-5);
}

.bars__row {
    display: grid;
    grid-template-columns: minmax(110px, 40%) 1fr 32px;
    align-items: center;
    gap: var(--s-3);
    padding: 6px 0;
    font-size: 13.5px;
}

.bars__label {
    color: var(--text-2);
}

.bars__track {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    overflow: hidden;
}

.bars__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--amber), var(--honey-500));
}

.bars__fill--0 { width: 0; }
.bars__fill--10 { width: 10%; }
.bars__fill--20 { width: 20%; }
.bars__fill--30 { width: 30%; }
.bars__fill--40 { width: 40%; }
.bars__fill--50 { width: 50%; }
.bars__fill--60 { width: 60%; }
.bars__fill--70 { width: 70%; }
.bars__fill--80 { width: 80%; }
.bars__fill--90 { width: 90%; }
.bars__fill--100 { width: 100%; }

.bars__value {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Roadmap */
.roadmap {
    padding: 0 var(--s-5) var(--s-4);
}

.roadmap__item {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
}

.roadmap__item:last-child {
    border-bottom: 0;
}

.roadmap__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted);
}

.roadmap__icon .icon {
    width: 18px;
    height: 18px;
}

.roadmap__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-weight: 600;
    font-size: 14.5px;
}

.roadmap__text {
    color: var(--text-muted);
    font-size: 13.5px;
}

/* Notification feed */
.feed__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-4);
    align-items: start;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
}

.feed__item:last-child {
    border-bottom: 0;
}

.feed__item.is-unread {
    background: linear-gradient(90deg, var(--accent-soft), transparent 55%);
}

.feed__item.is-unread .feed__title::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--honey-500);
    vertical-align: middle;
}

.feed__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--info-soft);
    color: var(--info);
}

.feed__icon .icon {
    width: 18px;
    height: 18px;
}

.feed__icon--success { background: var(--success-soft); color: var(--success); }
.feed__icon--warning,
.feed__icon--critical { background: var(--warning-soft); color: var(--warning); }

.feed__title {
    font-weight: 600;
}

.feed__text {
    color: var(--text-2);
    font-size: 14px;
}

.feed__meta {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.feed__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* Dropdown notification list */
.notification-list {
    max-height: 380px;
    overflow-y: auto;
}

.notification-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-4);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    text-align: left;
    cursor: pointer;
}

.notification-item:hover,
.notification-item:focus-visible {
    background: var(--surface-2);
}

.notification-item__dot {
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: transparent;
}

.notification-item.is-unread .notification-item__dot {
    background: var(--honey-500);
}

.notification-item__title {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
}

.notification-item__text {
    display: block;
    color: var(--text-muted);
    font-size: 12.5px;
}

.notification-item__time {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11.5px;
}

.notification-list__empty {
    padding: var(--s-6) var(--s-4);
    color: var(--text-muted);
    text-align: center;
    font-size: 13.5px;
}

.skeleton-list {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
}

.skeleton {
    display: block;
    height: 42px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
    background-size: 200% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---------- Forms ---------- */
.form {
    display: grid;
    gap: var(--s-4);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--s-4);
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
}

.field {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field--end {
    align-content: end;
}

.field__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.field__label {
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 600;
}

.field__link {
    font-size: 13px;
    font-weight: 500;
}

.field__hint {
    color: var(--text-muted);
    font-size: 12.5px;
}

.field__error,
.field-validation-error {
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
}

.field-validation-valid {
    display: none;
}

.required {
    color: var(--danger);
}

.input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 75%, transparent);
}

.input:hover {
    border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text-muted));
}

.input:focus {
    outline: none;
    border-color: var(--honey-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--honey-400) 30%, transparent);
}

.input[readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
}

.input.input-validation-error {
    border-color: var(--danger);
}

.input.input-validation-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

textarea.input {
    min-height: 84px;
    resize: vertical;
}

select.input {
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.input--auto {
    width: auto;
    min-width: 170px;
}

.input--code {
    font-family: var(--font-mono);
    font-size: 20px;
    letter-spacing: .35em;
    text-align: center;
}

.check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: 14px;
    cursor: pointer;
}

.check input,
.choice input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--honey-600);
    flex: none;
}

.fieldset {
    display: grid;
    gap: var(--s-4);
    margin: 0;
    padding: var(--s-5) 0 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.fieldset:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.fieldset__legend {
    float: left;
    width: 100%;
    margin-bottom: var(--s-1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-2);
}

.form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
}

.form--inline .field {
    flex: 1 1 200px;
    max-width: 280px;
}

.consent {
    display: grid;
    gap: 4px;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.validation-summary {
    padding: var(--s-3) var(--s-4);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: var(--radius);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 14px;
}

.validation-summary ul {
    margin: 0;
    padding-left: var(--s-5);
}

.validation-summary-valid {
    display: none;
}

.choice-group {
    display: grid;
    gap: var(--s-2);
}

.choice {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s var(--ease), background-color .15s var(--ease);
}

.choice:hover {
    border-color: var(--border-strong);
}

.choice:has(input:checked) {
    border-color: var(--honey-500);
    background: var(--accent-soft);
}

.choice:has(input:disabled) {
    cursor: not-allowed;
    opacity: .75;
}

.choice__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--s-2);
}

.choice__body .icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.choice--card {
    align-items: flex-start;
}

.choice--card .choice__body {
    flex-direction: column;
    align-items: flex-start;
}

.choice--card .muted {
    font-size: 12.5px;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: inherit;
}

.switch__track {
    width: 40px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    transition: background-color .15s var(--ease);
}

.switch__track::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .18s var(--ease);
}

.switch input:checked + .switch__track {
    background: var(--honey-500);
    border-color: var(--honey-600);
}

.switch input:checked + .switch__track::after {
    transform: translateX(18px);
}

.switch input:focus-visible + .switch__track {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.switch input:disabled + .switch__track {
    opacity: .6;
}

.toolbar,
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.filters {
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.filters .field {
    flex: 1 1 160px;
}

.filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    max-width: 100%;
}

.search {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}

.search .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.input--search {
    padding-left: 38px;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}

.inline-form .input {
    flex: 1 1 220px;
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.inline-action {
    position: relative;
}

.inline-action > summary {
    list-style: none;
}

.inline-action > summary::-webkit-details-marker {
    display: none;
}

.inline-action__form {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: flex;
    gap: var(--s-2);
    width: min(80vw, 360px);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.inline-action__form .input {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13.5px;
}

/* ---------- Tabs & segmented ---------- */
.tabs {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tabs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tabs__item .icon {
    width: 17px;
    height: 17px;
}

.tabs__item:hover {
    color: var(--text);
}

.tabs__item.is-active {
    border-bottom-color: var(--honey-500);
    color: var(--text);
}

.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    margin-bottom: var(--s-4);
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
}

.card .segmented {
    margin-bottom: 0;
}

.segmented__item {
    padding: 6px var(--s-3);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.segmented__item:hover {
    color: var(--text);
}

.segmented__item.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* ---------- Alerts, toasts ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-5);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 14px;
}

.card__body .alert,
.stack .alert,
.auth__card .alert {
    margin-bottom: 0;
}

.alert__icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.alert__body {
    flex: 1;
}

.alert__close {
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}

.alert__close:hover {
    opacity: 1;
}

.alert__close .icon {
    width: 16px;
    height: 16px;
}

.alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 25%, transparent); color: var(--success); }
.alert--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: var(--info); }
.alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); }
.alert--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }

.alert .alert__body {
    color: var(--text);
}

.toast-region {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: 100;
    display: grid;
    gap: var(--s-2);
    width: min(92vw, 360px);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border);
    border-left: 4px solid var(--honey-500);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    animation: toast-in .2s var(--ease);
}

.toast .icon {
    color: var(--accent-strong);
}

.toast a {
    margin-left: auto;
    font-weight: 600;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Empty, status ---------- */
.empty {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-8) var(--s-6);
    text-align: center;
}

.empty--compact {
    padding: var(--s-6) var(--s-5);
}

.empty__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 64px;
    margin-bottom: var(--s-2);
    background: var(--accent-soft);
    color: var(--accent-strong);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.empty--compact .empty__icon {
    width: 44px;
    height: 50px;
}

.empty__icon .icon {
    width: 24px;
    height: 24px;
}

.empty__title {
    font-weight: 650;
    font-size: 15.5px;
}

.empty__text {
    max-width: 46ch;
    color: var(--text-muted);
    font-size: 14px;
}

.empty__actions {
    margin-top: var(--s-2);
}

.status-page {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    max-width: 560px;
    margin: var(--s-6) auto;
    text-align: center;
}

.status-page--public {
    padding: var(--s-9) var(--s-4);
}

.status-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 82px;
    margin-bottom: var(--s-2);
    background: var(--info-soft);
    color: var(--info);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.status-page__icon .icon {
    width: 30px;
    height: 30px;
}

.status-page--success .status-page__icon { background: var(--success-soft); color: var(--success); }
.status-page--warning .status-page__icon { background: var(--warning-soft); color: var(--warning); }
.status-page--danger .status-page__icon { background: var(--danger-soft); color: var(--danger); }

.status-page__title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.status-page__text {
    max-width: 50ch;
    margin-bottom: var(--s-3);
    color: var(--text-muted);
}

.status-page__reference {
    color: var(--text-muted);
    font-size: 12.5px;
}

.dev-note {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
}

.dev-note .icon {
    width: 16px;
    height: 16px;
}

/* Step indicator */
.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin: var(--s-3) 0 var(--s-4);
}

.steps--compact {
    justify-content: flex-start;
    margin: 0 0 var(--s-5);
}

.steps__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.steps__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-3);
    font-size: 11px;
}

.steps__marker .icon {
    width: 13px;
    height: 13px;
}

.steps__item.is-done .steps__marker {
    background: var(--success-soft);
    color: var(--success);
}

.steps__item.is-current {
    border-color: var(--honey-400);
    color: var(--text);
}

.steps__item.is-current .steps__marker {
    background: var(--accent);
    color: var(--on-accent);
}

/* Timeline */
.timeline {
    display: grid;
}

.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--s-3);
    padding-bottom: var(--s-5);
    color: var(--text-muted);
}

.timeline__item:last-child {
    padding-bottom: 0;
}

.timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 4px;
    border-left: 2px solid var(--border);
}

.timeline__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
}

.timeline__marker .icon {
    width: 15px;
    height: 15px;
}

.timeline__title {
    padding-top: 5px;
    font-weight: 600;
}

.timeline__meta {
    font-size: 12.5px;
}

.timeline__item.is-done {
    color: var(--text);
}

.timeline__item.is-done .timeline__marker {
    border-color: var(--success);
    background: var(--success-soft);
    color: var(--success);
}

.timeline__item.is-done:not(:last-child)::after {
    border-left-color: color-mix(in srgb, var(--success) 45%, var(--border));
}

.timeline__item.is-current {
    color: var(--text);
}

.timeline__item.is-current .timeline__marker {
    border-color: var(--honey-500);
    background: var(--accent-soft);
    color: var(--accent-strong);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--honey-400) 22%, transparent);
}

.timeline__item.is-failed {
    color: var(--text);
}

.timeline__item.is-failed .timeline__marker {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

.timeline__quote {
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 14px;
}

/* Decision panel */
.decision {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
}

@media (max-width: 760px) {
    .decision { grid-template-columns: minmax(0, 1fr); }
}

.decision__option {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.decision__option--reject {
    background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface-2));
}

.decision__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 15px;
}

.decision__option .btn {
    justify-self: start;
}

.reason-box {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.reason-box__label {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Audit diff */
.diff {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
}

@media (max-width: 760px) {
    .diff { grid-template-columns: minmax(0, 1fr); }
}

.diff__label {
    margin-bottom: var(--s-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.code-block {
    margin: 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* 2FA enrollment */
.enroll {
    display: grid;
    gap: var(--s-5);
}

.enroll__step {
    display: flex;
    gap: var(--s-4);
}

.enroll__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

.enroll__title {
    margin-bottom: 4px;
    font-size: 15px;
}

.enroll__qr-block {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-5);
    flex: 1;
}

.enroll__key-label {
    margin-top: var(--s-3);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.secret-key {
    display: inline-block;
    margin-top: 4px;
    padding: var(--s-2) var(--s-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 15px;
    letter-spacing: .08em;
    word-break: break-all;
}

.qr {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    image-rendering: pixelated;
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
    padding: var(--s-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.codes code {
    display: block;
    padding: 6px;
    font-size: 15px;
    letter-spacing: .06em;
    text-align: center;
}

.confirm {
    text-align: center;
}

.confirm > * {
    margin-inline: auto;
}

.confirm form {
    justify-content: center;
}

.confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 64px;
    background: var(--warning-soft);
    color: var(--warning);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.confirm__icon--danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.confirm__icon .icon {
    width: 24px;
    height: 24px;
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-4);
    color: var(--text-muted);
    font-size: 13px;
}

.pagination__controls {
    display: flex;
    gap: var(--s-2);
}

/* Prose */
.prose {
    max-width: 760px;
}

.prose--public {
    margin: 0 auto;
    padding: var(--s-9) var(--s-5);
}

.prose h2 {
    margin: var(--s-6) 0 var(--s-2);
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 600;
}

.prose p + p {
    margin-top: var(--s-3);
}

.prose > .muted {
    margin-top: var(--s-6);
    font-size: 13px;
}

/* ---------- Auth layout ---------- */
.auth-body {
    background: var(--bg);
}

.auth {
    display: grid;
    grid-template-columns: minmax(380px, 42%) 1fr;
    min-height: 100vh;
}

.auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-7);
    padding: var(--s-8) clamp(32px, 5vw, 72px);
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(253, 198, 20, .16), transparent 60%),
        radial-gradient(70% 50% at 0% 100%, rgba(246, 139, 31, .18), transparent 60%),
        var(--charcoal-900);
    color: #efe6da;
    overflow: hidden;
}

.auth__brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/honeycomb.svg");
    background-size: 112px 194px;
    opacity: .09;
    pointer-events: none;
    mask-image: linear-gradient(160deg, #000 10%, transparent 75%);
}

.auth__brand > * {
    position: relative;
    z-index: 1;
}

.auth__logo img {
    width: 200px;
    height: auto;
}

.auth__title {
    max-width: 18ch;
    margin-bottom: var(--s-4);
    font-family: var(--font-serif);
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: #fff;
}

.auth__lead {
    max-width: 46ch;
    color: #cbbfae;
    font-size: 15.5px;
}

.auth__points {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.auth__points li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: #e2d7c8;
    font-size: 14.5px;
}

.auth__points .icon {
    width: 20px;
    height: 20px;
    padding: 8px;
    box-sizing: content-box;
    border: 1px solid rgba(251, 191, 90, .28);
    border-radius: 10px;
    color: var(--honey-300);
}

.auth__credit {
    color: #8f8577;
    font-size: 12px;
    letter-spacing: .08em;
}

.auth__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
}

.auth__prefs {
    display: flex;
    gap: var(--s-1);
}

.auth__mobile-logo {
    display: none;
    margin-right: auto;
}

.auth__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4) var(--s-5) var(--s-8);
}

.auth__main:focus {
    outline: none;
}

.auth__card {
    width: 100%;
    max-width: 420px;
}

.auth__card--wide {
    max-width: 640px;
}

.auth__card > * + * {
    margin-top: var(--s-5);
}

.auth__header {
    display: grid;
    gap: var(--s-2);
}

.auth__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 55px;
    margin-bottom: var(--s-2);
    background: var(--accent-soft);
    color: var(--accent-strong);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.auth__badge .icon {
    width: 22px;
    height: 22px;
}

.auth__heading {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.auth__subheading {
    color: var(--text-muted);
}

.auth__aside,
.auth__note {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.auth__note {
    font-size: 12.5px;
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--text-muted);
    font-size: 12.5px;
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

@media (max-width: 960px) {
    .auth {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth__brand {
        display: none;
    }

    .auth__mobile-logo {
        display: block;
    }

    .auth__mobile-logo img {
        width: 132px;
        height: auto;
    }
}

/* ---------- Public site ---------- */
.public-body {
    background: var(--bg);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    max-width: var(--content-max);
    height: 72px;
    margin: 0 auto;
    padding: 0 var(--s-5);
}

.site-brand img {
    width: 150px;
    height: auto;
}

.site-nav {
    display: flex;
    gap: var(--s-5);
    margin-right: auto;
    font-size: 14px;
    font-weight: 500;
}

.site-nav a {
    color: var(--text-2);
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--text);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

@media (max-width: 860px) {
    .site-nav { display: none; }
    .site-brand { margin-right: auto; }
    .site-header__actions .btn--ghost { display: none; }
}

@media (max-width: 520px) {
    .site-header__actions .btn--primary { display: none; }
}

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(60% 70% at 85% 30%, var(--accent-soft), transparent 70%),
        var(--bg);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-8);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(48px, 8vw, 104px) var(--s-5);
}

.hero__title {
    max-width: 17ch;
    margin-bottom: var(--s-5);
    font-family: var(--font-serif);
    font-size: clamp(36px, 4.6vw, 60px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.hero__lead {
    max-width: 56ch;
    margin-bottom: var(--s-6);
    color: var(--text-2);
    font-size: 17px;
}

.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-7);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}

.hero__stats dt {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero__stats dd {
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 600;
}

.hero__art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 360px;
}

.hero__mark {
    position: relative;
    z-index: 1;
    width: min(46%, 220px);
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(217, 111, 11, .25));
}

.honeycomb {
    position: absolute;
    inset: 0;
}

.honeycomb span {
    position: absolute;
    width: 116px;
    height: 134px;
    border: 0;
    background: var(--surface);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    box-shadow: var(--shadow);
    opacity: .9;
}

.honeycomb span::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
    clip-path: inherit;
}

.honeycomb span:nth-child(1) { left: 34%; top: 31%; width: 160px; height: 185px; background: linear-gradient(140deg, var(--amber), var(--honey-500)); opacity: .22; }
.honeycomb span:nth-child(2) { left: 10%; top: 6%; }
.honeycomb span:nth-child(3) { left: 60%; top: 2%; opacity: .55; }
.honeycomb span:nth-child(4) { left: 72%; top: 44%; }
.honeycomb span:nth-child(5) { left: 6%; top: 56%; opacity: .5; }
.honeycomb span:nth-child(6) { left: 46%; top: 72%; opacity: .7; }
.honeycomb span:nth-child(7) { left: 84%; top: 78%; width: 70px; height: 81px; opacity: .45; }

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); }
    .hero__art { min-height: 260px; }
}

.section {
    padding: clamp(56px, 8vw, 96px) 0;
}

.section--tinted {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.section__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--s-5);
}

.section__header {
    max-width: 720px;
    margin-bottom: var(--s-7);
}

.section__title {
    margin-bottom: var(--s-3);
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.section__lead {
    color: var(--text-2);
    font-size: 16px;
}

.feature {
    display: grid;
    align-content: start;
    gap: var(--s-2);
}

.feature--card {
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 50px;
    margin-bottom: var(--s-2);
    background: var(--accent-soft);
    color: var(--accent-strong);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.feature__icon .icon {
    width: 20px;
    height: 20px;
}

.feature__title {
    font-size: 16.5px;
    font-weight: 650;
}

.feature__text {
    color: var(--text-muted);
    font-size: 14.5px;
}

.institution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-4);
}

.institution-card {
    position: relative;
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.institution-card__country {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
}

.institution-card__name {
    padding-right: var(--s-7);
    font-weight: 650;
}

.institution-card__meta {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.guest-note {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-6);
    color: var(--text-muted);
    font-size: 13.5px;
}

.guest-note .icon {
    width: 18px;
    height: 18px;
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-6);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-7) var(--s-5);
}

.site-footer img {
    width: 130px;
    height: auto;
}

.site-footer__text {
    max-width: 56ch;
    margin-top: var(--s-3);
    color: var(--text-muted);
    font-size: 13.5px;
}

.site-footer__meta {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: right;
}

@media (max-width: 720px) {
    .site-footer__meta { text-align: left; }
}

/* ---------- GIS workspace layout ---------- */
.workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "toolbar toolbar toolbar"
        "panel map inspector";
    height: calc(100vh - var(--topbar-height) - 49px);
    min-height: 520px;
}

.workspace__toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.workspace__title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.workspace__title > .icon {
    width: 26px;
    height: 26px;
    color: var(--accent-strong);
}

.workspace__title .eyebrow {
    margin-bottom: 0;
}

.workspace__heading {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
}

.workspace__tools {
    display: flex;
    gap: var(--s-1);
}

.workspace__panel,
.workspace__inspector {
    overflow-y: auto;
    padding: var(--s-4);
    background: var(--surface);
}

.workspace__panel {
    grid-area: panel;
    border-right: 1px solid var(--border);
}

.workspace__inspector {
    grid-area: inspector;
    border-left: 1px solid var(--border);
}

.workspace__panel-title {
    margin-bottom: var(--s-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.workspace__map {
    grid-area: map;
    position: relative;
    min-width: 0;
}

.map-canvas {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--surface-2);
}

.map-canvas__placeholder {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    max-width: 420px;
    padding: var(--s-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow);
    text-align: center;
}

.map-canvas__placeholder > .icon {
    width: 32px;
    height: 32px;
    color: var(--accent-strong);
}

.map-canvas__title {
    font-weight: 650;
}

.map-canvas__text {
    color: var(--text-muted);
    font-size: 14px;
}

@media (max-width: 1200px) {
    .workspace {
        grid-template-columns: 240px minmax(0, 1fr);
        grid-template-areas:
            "toolbar toolbar"
            "panel map"
            "inspector inspector";
        grid-template-rows: auto minmax(420px, 1fr) auto;
        height: auto;
    }

    .workspace__inspector {
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 760px) {
    .workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "toolbar"
            "map"
            "panel"
            "inspector";
        grid-template-rows: auto 380px auto auto;
    }

    .workspace__panel {
        border-right: 0;
        border-top: 1px solid var(--border);
    }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .sidebar,
    .topbar,
    .app-footer,
    .tabs,
    .page-actions,
    .cluster .btn,
    .toast-region {
        display: none !important;
    }

    .app {
        display: block;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* =====================================================================
   Phase 2 — core business modules
   ===================================================================== */
.metric__value--text {
    font-size: 18px;
    line-height: 1.3;
}

/* Sortable table headers */
.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sort-link .icon {
    width: 14px;
    height: 14px;
    opacity: .45;
}

.sort-link:hover .icon,
.sort-link.is-active .icon {
    opacity: 1;
}

.sort-link.is-active {
    color: var(--text);
}

.sort-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

th.text-right .sort-link {
    flex-direction: row-reverse;
}

/* Dense data tables (measurements, reports) */
.table--dense th,
.table--dense td {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13.5px;
}

.table__group th {
    padding-top: var(--s-3);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table-wrap--scroll {
    max-height: 70vh;
    overflow: auto;
}

.table-wrap--scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}

.table td.is-flagged {
    background: var(--warning-soft);
}

.table tfoot th,
.table tfoot td {
    border-top: 2px solid var(--border-strong);
    font-weight: 650;
}

/* Compact inputs inside tables */
.input--num {
    width: 7.5rem;
    min-height: 34px;
    padding: 5px 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.input--sm {
    min-width: 6.5rem;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 13px;
}

.input--static {
    display: flex;
    align-items: center;
    border-style: dashed;
    background: var(--surface-2);
    color: var(--text-2);
}

/* Disclosure (inline expandable forms) */
.disclosure > summary {
    list-style: none;
    width: max-content;
    cursor: pointer;
}

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

.disclosure[open] > summary {
    margin-bottom: var(--s-3);
}

.inline-action__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: min(86vw, 380px);
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    text-align: left;
    white-space: normal;
}

.inline-action__panel .input {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 13.5px;
}

.card__title--sm {
    font-size: 15px;
}

.form-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.filters__check {
    align-self: end;
    min-height: 42px;
}

.list__item--top {
    align-items: flex-start;
}

/* Horizontal share bars (CSP-safe: width classes instead of inline styles) */
.col-bar {
    width: 22%;
}

.hbar {
    display: block;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    overflow: hidden;
}

.hbar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--honey-400), var(--honey-600));
}
.hbar__fill--0 { width: 0%; }
.hbar__fill--5 { width: 5%; }
.hbar__fill--10 { width: 10%; }
.hbar__fill--15 { width: 15%; }
.hbar__fill--20 { width: 20%; }
.hbar__fill--25 { width: 25%; }
.hbar__fill--30 { width: 30%; }
.hbar__fill--35 { width: 35%; }
.hbar__fill--40 { width: 40%; }
.hbar__fill--45 { width: 45%; }
.hbar__fill--50 { width: 50%; }
.hbar__fill--55 { width: 55%; }
.hbar__fill--60 { width: 60%; }
.hbar__fill--65 { width: 65%; }
.hbar__fill--70 { width: 70%; }
.hbar__fill--75 { width: 75%; }
.hbar__fill--80 { width: 80%; }
.hbar__fill--85 { width: 85%; }
.hbar__fill--90 { width: 90%; }
.hbar__fill--95 { width: 95%; }
.hbar__fill--100 { width: 100%; }

/* Ranked preference list */
.rank-list {
    display: grid;
    gap: var(--s-3);
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
}

.rank-list__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: end;
    gap: var(--s-3);
}

.rank-list__rank,
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rank-list__rank {
    margin-bottom: 6px;
}

.rank-list__item:first-child .rank-list__rank {
    background: var(--accent);
    color: var(--charcoal-950);
}

/* Confirmation dialog */
.dialog {
    width: min(92vw, 440px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
    background: rgba(20, 17, 13, .55);
    backdrop-filter: blur(2px);
}

.dialog__body {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-6);
}

.dialog__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    font-size: 18px;
}

.dialog__title .icon {
    width: 22px;
    height: 22px;
    color: var(--warning);
}

.dialog__text {
    margin: 0;
    color: var(--text-2);
}

.dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-2);
}

/* Printable report (sample report; "Save as PDF" from the browser) */
.report {
    padding: var(--s-7);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.report__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-5);
    padding-bottom: var(--s-5);
    border-bottom: 2px solid var(--accent);
}

.report__title {
    margin: var(--s-1) 0;
    font-family: var(--font-serif);
    font-size: 24px;
}

.report__section {
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--border);
}

.report__heading {
    margin: 0 0 var(--s-3);
    font-size: 16px;
}

.report__footer {
    padding-top: var(--s-5);
    color: var(--text-2);
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .form-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .col-bar {
        display: none;
    }

    .report {
        padding: var(--s-4);
    }

    .inline-action__panel {
        position: fixed;
        left: var(--s-4);
        right: var(--s-4);
        top: auto;
        bottom: var(--s-4);
        width: auto;
    }
}

@media print {
    .back-link,
    .filters,
    .alert__close,
    [data-print],
    .dialog {
        display: none !important;
    }

    .report {
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .report__section {
        break-inside: avoid;
    }

    .table-wrap--scroll {
        max-height: none;
        overflow: visible;
    }
}

.num-strong {
    color: var(--text);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* Analysis entry: full-width measurement table, action cards in a row above it */
.analysis-layout {
    grid-template-columns: minmax(0, 1fr);
}

.analysis-layout > :last-child {
    order: -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s-5);
    align-items: start;
}

.analysis-layout > :last-child > * + * {
    margin-top: 0;
}

.analysis-layout > :last-child:empty {
    display: none;
}

/* =====================================================================
   Phase 3A — GIS workspace (OpenLayers)
   ===================================================================== */
.gis {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height));
    min-height: 520px;
    background: var(--surface-2);
}

.gis:fullscreen {
    height: 100vh;
}

.gis__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.gis__title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.gis__title > .icon {
    width: 26px;
    height: 26px;
    color: var(--accent-strong);
}

.gis__title .eyebrow {
    margin: 0;
}

.gis__heading {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 20px;
}

.gis__search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}

.gis__search > .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.gis__search .input {
    padding-left: 36px;
    min-height: 38px;
}

.gis__search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 340px;
    margin: 0;
    padding: var(--s-1);
    overflow: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.gis__search-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
}

.gis__search-item:hover,
.gis__search-item:focus-visible {
    background: var(--surface-2);
    outline: none;
}

.gis__search-empty {
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.gis__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.gis__tools .icon-btn.is-active {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.gis__divider {
    width: 1px;
    height: 24px;
    margin: 0 6px;
    background: var(--border);
}

.gis__body {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
}

.gis__panel {
    display: flex;
    flex-direction: column;
    width: 320px;
    flex: none;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
    transition: width .2s var(--ease);
}

.gis__panel--right {
    border-right: 0;
    border-left: 1px solid var(--border);
    width: 340px;
}

.gis__panel.is-collapsed {
    width: 48px;
}

.gis__panel.is-collapsed .gis__panel-body,
.gis__panel.is-collapsed .gis__panel-foot,
.gis__panel.is-collapsed .gis__panel-title {
    display: none;
}

.gis__panel.is-collapsed [data-gis-collapse] .icon {
    transform: rotate(180deg);
}

.gis__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4);
}

.gis__panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-2);
}

.gis__panel-body {
    flex: 1;
    min-height: 0;
    padding: 0 var(--s-4) var(--s-4);
    overflow: auto;
}

.gis__panel-body > * + * {
    margin-top: var(--s-4);
}

.gis__panel-foot {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--border);
    font-size: 12px;
}

.gis__panel-foot p {
    margin: 0;
}

.gis__panel-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
}

.gis__filters {
    margin: 0;
    padding: 0;
    border: 0;
}

.field__label--sm {
    font-size: 12px;
}

.gis__map {
    position: relative;
    flex: 1;
    min-width: 0;
}

.gis__canvas {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
}

.gis__canvas:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

.gis__canvas.is-hovering {
    cursor: pointer;
}

.gis__canvas.is-drawing {
    cursor: crosshair;
}

.gis__coords {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 12px;
    transform: translateX(-50%);
    pointer-events: none;
}

.gis__status {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 3;
    max-width: min(90%, 520px);
    padding: 8px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    font-size: 13.5px;
    transform: translateX(-50%);
}

.gis__status[data-tone="danger"] {
    color: var(--danger);
}

.gis__status[data-tone="success"] {
    color: var(--success);
}

.gis-layer-group__title {
    margin: 0 0 var(--s-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gis-layer-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gis-layer {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.gis-layer.is-filtered {
    opacity: .5;
}

.gis-layer__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gis-layer__head input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-strong);
}

.gis-layer__name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.gis-layer__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.gis-layer__opacity {
    flex: 1;
    min-width: 60px;
    accent-color: var(--accent-strong);
}

.gis-layer__tools {
    display: flex;
    gap: 2px;
}

.icon-btn--xs {
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: 7px;
}

.icon-btn--xs .icon {
    width: 14px;
    height: 14px;
}

.icon-btn--sm {
    min-width: 32px;
    height: 32px;
}

.gis-legend {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
}

.gis-legend__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
}

.gis-legend__swatch {
    width: 16px;
    height: 12px;
    flex: none;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
}

.gis-legend__swatch--dot {
    width: 12px;
    border-radius: 50%;
}

.gis-legend__ramp {
    height: 10px;
    border-radius: 3px;
}

.gis-legend__ramp--vegetation {
    background: linear-gradient(90deg, #a6611a, #dfc27d, #f5f5c8, #80cd78, #1a7837);
}

.gis-legend__ramp--continuous {
    background: linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725);
}

.gis-legend__scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
}

.gis-legend__note {
    margin: 4px 0 0;
    color: var(--text-muted);
}

.gis-hit {
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
}

.gis-hit__layer {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gis-hit__title {
    margin: 2px 0 var(--s-2);
    font-size: 15px;
}

.gis-hit__note {
    margin: var(--s-2) 0;
    color: var(--text-muted);
    font-size: 12px;
}

.gis-hit .btn + .btn {
    margin-left: 6px;
}

.gis-props {
    font-size: 13px;
}

.gis-props > div {
    padding: 4px 0;
}

.gis-tooltip {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(17, 17, 17, .85);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}

.gis .ol-control button {
    background: var(--surface);
    color: var(--text);
}

.gis .ol-control button:hover,
.gis .ol-control button:focus {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.gis .ol-scale-line {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
}

.gis .ol-scale-line-inner {
    border-color: var(--text);
    color: var(--text);
}

.gis .ol-attribution {
    max-width: calc(100% - 16px);
}

.gis-hash {
    word-break: break-all;
    font-size: 11.5px;
}

.gis-preview {
    height: 420px;
    border-top: 1px solid var(--border);
}

.gis-log {
    max-height: 420px;
    margin: 0;
    overflow: auto;
    border-radius: 0;
    white-space: pre-wrap;
    font-size: 12px;
}

.gis-public .gis {
    height: 72vh;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.gis-public__note {
    margin-top: var(--s-3);
    font-size: 13px;
}

.gis__print {
    display: none;
}

@media (max-width: 1100px) {
    .gis__panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
        box-shadow: var(--shadow-lg);
    }

    .gis__panel--right {
        left: auto;
        right: 0;
    }
}

@media (max-width: 640px) {
    .gis__toolbar {
        padding: var(--s-2) var(--s-3);
    }

    .gis__tools {
        margin-left: 0;
    }

    .gis__panel,
    .gis__panel--right {
        width: min(88vw, 340px);
    }
}

@media print {
    .gis > :not(.gis__print) {
        display: none !important;
    }

    .gis {
        height: auto;
        background: #fff;
    }

    .gis__print {
        display: block;
        color: #000;
    }

    .gis__print img {
        width: 100%;
        height: auto;
        border: 1px solid #999;
    }

    .gis__print-title {
        margin: 0 0 4px;
        font-size: 20px;
    }

    .gis__print-meta,
    .gis__print-foot,
    .gis__print-legend {
        font-size: 11px;
    }
}

.gis__coords .ol-mouse-position {
    position: static;
    white-space: nowrap;
}

.gis__coords {
    white-space: nowrap;
}
.gis__panel-body {
    overflow-x: hidden;
}

.gis-layer__name {
    min-width: 0;
    overflow-wrap: anywhere;
}
.gis-public {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--s-5) var(--s-4);
}
/* =====================================================================
   Phase 3B — Optimization Studio
   ===================================================================== */
:root {
    --chart-1: #d97706;
    --chart-2: #7c3aed;
    --chart-3: #dc2626;
    --chart-4: #0e7490;
    --chart-grid: var(--border);
}

:root[data-theme="dark"] {
    --chart-1: #fbbf24;
    --chart-2: #a78bfa;
    --chart-3: #f87171;
    --chart-4: #22d3ee;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --chart-1: #fbbf24;
        --chart-2: #a78bfa;
        --chart-3: #f87171;
        --chart-4: #22d3ee;
    }
}

.chart { margin: 0; }
.chart__caption { font-weight: 600; margin-bottom: var(--s-1); }
.chart__note { color: var(--text-muted); font-size: 13px; margin: 0 0 var(--s-2); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0 0 var(--s-2); padding: 0; font-size: 13px; color: var(--text-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart__key { flex: none; }
.chart__svg { display: block; width: 100%; height: auto; max-width: 760px; overflow: visible; }
.chart__label { fill: var(--text-2); font-size: 12px; font-family: var(--font-sans); }
.chart__value { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.chart__axis { stroke: var(--chart-grid); stroke-width: 1; }
.chart-s1 { fill: var(--chart-1); }
.chart-s2 { fill: var(--chart-2); }
.chart-s3 { fill: var(--chart-3); }
.chart-s4 { fill: var(--chart-4); }
.chart__data { margin-top: var(--s-2); font-size: 13px; }
.chart__data summary { cursor: pointer; color: var(--text-muted); }

.opt-list { margin: var(--s-2) 0 0; padding-left: 1.1em; }
.opt-list li + li { margin-top: 4px; }
.opt-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.opt-issue { display: flex; gap: var(--s-2); align-items: baseline; line-height: 1.45; }
.opt-line { display: inline-flex; gap: 4px; align-items: baseline; margin: 0 6px 4px 0; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12.5px; font-family: var(--font-mono); white-space: nowrap; }
.opt-line--primary { border-color: var(--accent); background: var(--accent-soft); }
.opt-hash { word-break: break-all; font-size: 11.5px; }
.opt-diagnostic { font-size: 12px; word-break: break-word; }
.opt-override { display: block; }

@media (max-width: 720px) {
    .chart__svg { max-width: none; }
}

@media print {
    .chart__data[open] summary { display: none; }
    .chart-s1, .chart-s2, .chart-s3, .chart-s4 { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .opt-line--primary { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}