/* =============================================================
   ITK Development — Design Tokens
   Colors extracted from the official ITK Farvekoder document.
   ============================================================= */

:root {
    /* ---- Brand palette (from Farvekoder.pptx) ------------------ */
    --itk-red: #e44930;
    --itk-lime: #89bd23;
    --itk-mint: #73bc99;
    --itk-blue: #007ba6;
    --itk-cyan: #00a5cd;
    --itk-aqua: #00b5c9;
    --itk-green: #008d3d;

    /* ---- Functional roles ------------------------------------- */
    --itk-primary: var(--itk-blue);
    --itk-primary-hover: #006385;
    --itk-accent: var(--itk-red);

    /* ---- Neutral scale ---------------------------------------- */
    --itk-ink: #111318;
    --itk-ink-soft: #2a2f38;
    --itk-slate-700: #3f4654;
    --itk-slate-500: #6b7484;
    --itk-slate-300: #c7ccd4;
    --itk-slate-200: #dfe3ea;
    --itk-slate-100: #eef1f5;
    --itk-slate-50: #f7f8fa;
    --itk-paper: #ffffff;

    /* ---- Surfaces --------------------------------------------- */
    --itk-bg: var(--itk-paper);
    --itk-bg-muted: var(--itk-slate-50);
    --itk-bg-inverse: var(--itk-ink);

    /* ---- Type stack ------------------------------------------- */
    --itk-font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    --itk-font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    --itk-font-mono:
        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---- Type scale (modular, base 16) ------------------------ */
    --itk-text-xs: 12px;
    --itk-text-sm: 14px;
    --itk-text-base: 16px;
    --itk-text-md: 18px;
    --itk-text-lg: 22px;
    --itk-text-xl: 28px;
    --itk-text-2xl: 36px;
    --itk-text-3xl: 48px;
    --itk-text-4xl: 64px;
    --itk-text-5xl: 88px;

    /* ---- Spacing (4px base) ----------------------------------- */
    --itk-space-1: 4px;
    --itk-space-2: 8px;
    --itk-space-3: 12px;
    --itk-space-4: 16px;
    --itk-space-5: 24px;
    --itk-space-6: 32px;
    --itk-space-7: 48px;
    --itk-space-8: 64px;
    --itk-space-9: 96px;

    /* ---- Radii ------------------------------------------------ */
    --itk-radius-0: 0;
    --itk-radius-1: 2px;
    --itk-radius-2: 6px;
    --itk-radius-3: 10px;
    --itk-radius-4: 16px;
    --itk-radius-pill: 999px;

    /* ---- Elevation -------------------------------------------- */
    --itk-shadow-1: 0 1px 2px rgba(17, 19, 24, 0.06);
    --itk-shadow-2:
        0 4px 10px -2px rgba(17, 19, 24, 0.08),
        0 2px 4px -1px rgba(17, 19, 24, 0.04);
    --itk-shadow-3:
        0 16px 32px -12px rgba(17, 19, 24, 0.18),
        0 4px 8px -2px rgba(17, 19, 24, 0.06);

    /* ---- Focus ring ------------------------------------------- */
    --itk-focus: 0 0 0 3px rgba(0, 123, 166, 0.35);

    /* ---- Layout ----------------------------------------------- */
    --itk-container: 1200px;
    --itk-gutter: 24px;

    /* ---- Breakpoints ------------------------------------------
       Reference values only — `var()` cannot be used in `@media`
       conditions, so the queries below hardcode 1023.98px / 767.98px.
       Update both places together if you change a breakpoint. */
    --itk-bp-md: 48rem; /* 768px  — drop user-menu name */
    --itk-bp-lg: 64rem; /* 1024px — collapse + share become icon-only */

    /* ---- Legacy aliases ---------------------------------------
       Keep prior variable names so existing templates inherit the
       new ITK palette without per-file edits.
       ----------------------------------------------------------- */
    --bg-primary: var(--itk-paper);
    --bg-secondary: var(--itk-slate-50);
    --bg-tertiary: var(--itk-slate-100);
    --text-primary: var(--itk-ink);
    --text-secondary: var(--itk-slate-700);
    --text-muted: var(--itk-slate-500);
    --accent: var(--itk-blue);
    --accent-hover: var(--itk-primary-hover);
    --border: var(--itk-slate-200);
    --success: var(--itk-green);
    --warning: #b35a00;
    --danger: var(--itk-red);

    /* Hover overlay tuned for light surfaces (replaces rgba(255,255,255,…) overlays from the old dark theme) */
    --hover-overlay: rgba(17, 19, 24, 0.04);
    --hover-overlay-strong: rgba(17, 19, 24, 0.06);
}

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

body {
    font-family: var(--itk-font-sans);
    background-color: var(--itk-bg);
    color: var(--itk-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

a {
    color: var(--itk-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--itk-primary-hover);
    text-decoration: underline;
}

/* Top Navigation */
.top-nav {
    background-color: var(--itk-paper);
    border-bottom: 1px solid var(--itk-slate-200);
    padding: 0 1.5rem;
    height: 64px;
    display: grid;
    /* minmax(0, 1fr) lets the side columns shrink below their content so
       long concept titles can ellipsis. The center column is auto-sized. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-nav__menu-anchor {
    position: relative;
}

.top-nav__brand {
    font-size: 1rem;
    font-weight: 600;
    color: var(--itk-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.005em;
    /* When .top-nav__brand is a direct grid child (base.html.twig) it lands
       in column 1. When nested inside .top-nav__left (wrapper.html.twig) the
       parent owns column placement and these rules are inert. */
    grid-column: 1;
    justify-self: start;
}

.top-nav__brand:hover {
    color: var(--itk-ink);
    text-decoration: none;
}

.top-nav__brand-logo {
    height: 28px;
    width: auto;
    display: block;
}

.top-nav__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--itk-ink);
    text-decoration: none;
    padding: 0.375rem 0.625rem;
    border-radius: var(--itk-radius-2);
    transition: background-color 0.15s;
}

.top-nav__link:hover {
    color: var(--itk-ink);
    background-color: var(--itk-slate-100);
    text-decoration: none;
}

.top-nav__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    grid-column: 1;
    justify-self: start;
}

.top-nav__separator {
    color: var(--itk-slate-300);
    font-size: 0.875rem;
}

.top-nav__concept {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--itk-slate-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Without min-width: 0 a flex item refuses to shrink below its content,
       so a long title would push the centered tabs out of place. */
    min-width: 0;
}

.top-nav__concept-text {
    font-size: 0.75rem;
    color: var(--itk-slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-nav__center {
    display: flex;
    align-items: center;
    grid-column: 2;
    justify-self: center;
}

/* Desktop tabs: shown ≥768; the burger replaces them below that. */
.top-nav__tabs {
    display: flex;
    gap: 0.25rem;
}

/* Mobile burger: hidden on desktop, revealed at <768 below. */
.top-nav__menu {
    display: none;
}

/* Burger dropdown — same idiom as .user-menu and .share-popup. */
.nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    min-width: 220px;
    box-shadow: var(--itk-shadow-3);
    z-index: 200;
    overflow: hidden;
    padding: 0.375rem;
}

.nav-menu.is-open {
    display: block;
}

.nav-menu__item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--itk-radius-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--itk-slate-700);
    text-decoration: none;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.nav-menu__item:hover {
    background-color: var(--itk-slate-100);
    color: var(--itk-ink);
    text-decoration: none;
}

.nav-menu__item--active {
    background-color: color-mix(in srgb, var(--itk-blue) 10%, transparent);
    color: var(--itk-blue);
}

/* Centered nav-menu under .top-nav__select on mobile. Anchors to its
   own .top-nav__menu-anchor wrapper, then nudges itself horizontally
   so the dropdown reads as centered under the toggle. */
.nav-menu--centered {
    left: 50%;
    transform: translateX(-50%);
}

/* Centered "select"-style toggle that replaces the burger on mobile.
   Visible only inside the mobile breakpoint via .top-nav__menu. */
.top-nav__select {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-2);
    color: var(--itk-ink);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    max-width: 100%;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}

.top-nav__select:hover {
    background-color: var(--itk-slate-50);
    border-color: var(--itk-slate-300);
}

.top-nav__select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

.top-nav__select--static {
    cursor: default;
    pointer-events: none;
}

/* Right-side kebab "more" menu. Shares .nav-menu's positioning rules;
   .kebab-menu__item is a button-styled row with icon + label. */
.top-nav__kebab-anchor {
    display: none;
}

.kebab-menu {
    right: 0;
    left: auto;
    min-width: 220px;
}

.kebab-menu__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--itk-radius-2);
    background: transparent;
    color: var(--itk-slate-700);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.kebab-menu__item:hover {
    background-color: var(--itk-slate-100);
    color: var(--itk-ink);
}

.kebab-menu__item svg {
    flex-shrink: 0;
    color: var(--itk-slate-500);
}

.top-nav__tab {
    padding: 0.5rem 0.875rem;
    border-radius: var(--itk-radius-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--itk-slate-700);
    text-decoration: none;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.top-nav__tab:hover {
    background-color: var(--itk-slate-100);
    color: var(--itk-ink);
    text-decoration: none;
}

.top-nav__tab--active {
    background-color: rgba(0, 123, 166, 0.1);
    color: var(--itk-blue);
}

.top-nav__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    grid-column: 3;
    justify-self: end;
}

.top-nav__user {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--itk-slate-700);
}

.top-nav__user-name {
    font-size: 0.875rem;
    color: var(--itk-slate-700);
}

.top-nav__logout {
    color: var(--itk-slate-500);
    font-size: 0.875rem;
}

/* Dashboard */
.dashboard {
    max-width: var(--itk-container);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.dashboard__title {
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin-bottom: 1.75rem;
    color: var(--itk-ink);
}

.dashboard__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--itk-space-4) var(--itk-space-6);
    margin-bottom: var(--itk-space-7);
}

.dashboard__control {
    display: flex;
    flex-direction: column;
    gap: var(--itk-space-2);
    min-width: 14rem;
}

.dashboard__control-label {
    font-size: var(--itk-text-xs);
    font-weight: 600;
    color: var(--itk-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard__controls select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    height: 2.75rem;
    padding: 0 calc(var(--itk-space-5) + 1.25rem) 0 var(--itk-space-5);
    background-color: var(--itk-paper);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%233f4654' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--itk-space-4) center;
    background-size: 12px 8px;
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-2);
    box-shadow: var(--itk-shadow-1);
    color: var(--itk-ink);
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        background-color 0.15s;
}

.dashboard__controls select:hover {
    border-color: var(--itk-slate-300);
    background-color: var(--itk-slate-50);
}

.dashboard__controls select:focus-visible {
    outline: none;
    border-color: var(--itk-blue);
    box-shadow: var(--itk-focus);
}

.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.concept-card {
    position: relative;
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    padding: 1.5rem;
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
    display: flex;
    flex-direction: column;
}

.concept-card:hover {
    border-color: var(--itk-slate-300);
    box-shadow: var(--itk-shadow-2);
    transform: translateY(-2px);
}

.concept-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.concept-card__title a {
    color: var(--itk-ink);
    text-decoration: none;
}

/* Stretch the title link across the entire card so any click opens the
   concept. Text inside the card stays selectable because the pseudo-element
   only intercepts the click, not drag selection. */
.concept-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.concept-card__title a:hover {
    color: var(--itk-blue);
    text-decoration: none;
}

.concept-card__title a:focus-visible {
    outline: none;
}

.concept-card:focus-within {
    border-color: var(--itk-blue);
    box-shadow: var(--itk-focus);
}

.concept-card__description {
    color: var(--itk-slate-700);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.concept-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.75rem;
    color: var(--itk-slate-500);
    font-family: var(--itk-font-mono);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--itk-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-family: var(--itk-font-sans);
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.badge--active {
    background-color: rgba(0, 141, 61, 0.12);
    color: var(--itk-green);
}

.badge--draft {
    background-color: rgba(137, 189, 35, 0.18);
    color: #557516;
}

.badge--archived {
    background-color: var(--itk-slate-100);
    color: var(--itk-slate-700);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--itk-radius-2);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background-color 0.15s,
        color 0.15s,
        border-color 0.15s,
        box-shadow 0.15s;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.005em;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--itk-focus);
}

.btn--primary {
    background-color: var(--itk-blue);
    color: #fff;
}

.btn--primary:hover {
    background-color: var(--itk-primary-hover);
    color: #fff;
    text-decoration: none;
}

.btn--secondary {
    background-color: var(--itk-paper);
    color: var(--itk-ink);
    border-color: var(--itk-slate-300);
}

.btn--secondary:hover {
    background-color: var(--itk-slate-50);
    border-color: var(--itk-slate-500);
    color: var(--itk-ink);
    text-decoration: none;
}

.btn--ghost {
    background-color: transparent;
    color: var(--itk-blue);
}

.btn--ghost:hover {
    background-color: rgba(0, 123, 166, 0.08);
    color: var(--itk-blue);
    text-decoration: none;
}

.btn--accent {
    background-color: var(--itk-red);
    color: #fff;
}

.btn--accent:hover {
    background-color: #c93d28;
    color: #fff;
    text-decoration: none;
}

/* Documentation Layout */
.doc-layout {
    display: grid;
    grid-template-columns: 250px 1fr 200px;
    min-height: calc(100vh - 64px);
}

.doc-sidebar {
    background-color: var(--itk-slate-50);
    border-right: 1px solid var(--itk-slate-200);
    padding: 1.5rem 0;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
}

.doc-sidebar__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--itk-ink);
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.doc-sidebar__nav {
    list-style: none;
}

.doc-sidebar__link {
    display: block;
    padding: 0.4375rem 1rem;
    font-size: 0.875rem;
    color: var(--itk-slate-700);
    text-decoration: none;
    border-left: 2px solid transparent;
}

.doc-sidebar__link:hover {
    color: var(--itk-ink);
    background-color: var(--hover-overlay);
    text-decoration: none;
}

.doc-sidebar__link--active {
    color: var(--itk-blue);
    border-left-color: var(--itk-blue);
    background-color: rgba(0, 123, 166, 0.08);
}

.doc-sidebar__section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--itk-slate-200);
}

.doc-sidebar__section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--itk-slate-500);
    padding: 0 1rem;
    margin-bottom: 0.5rem;
}

/* Documentation Content */
.doc-content {
    padding: 2.5rem 3rem;
    max-width: 800px;
}

.doc-content__meta {
    font-size: 0.75rem;
    color: var(--itk-slate-500);
    margin-bottom: 0.5rem;
    font-family: var(--itk-font-mono);
}

/* Prose Styles */
.prose {
    color: var(--itk-ink);
    line-height: 1.7;
    font-size: 1rem;
}

.prose h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--itk-slate-200);
}

.prose h2 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}

.prose h3 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.prose h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.prose p {
    margin-bottom: 1rem;
    color: var(--itk-slate-700);
}

.prose ul,
.prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: var(--itk-slate-700);
}

.prose li {
    margin-bottom: 0.25rem;
}

.prose code {
    background-color: var(--itk-slate-100);
    color: var(--itk-ink);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: var(--itk-font-mono);
}

.prose pre {
    background-color: var(--itk-slate-50);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.prose pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
}

.prose blockquote {
    border-left: 3px solid var(--itk-blue);
    padding-left: 1rem;
    color: var(--itk-slate-700);
    margin-bottom: 1rem;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.prose th,
.prose td {
    border: 1px solid var(--itk-slate-200);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.prose th {
    background-color: var(--itk-slate-50);
    font-weight: 600;
}

.prose img {
    max-width: 100%;
    border-radius: var(--itk-radius-3);
}

.prose a {
    color: var(--itk-blue);
}

.prose .heading-permalink {
    color: var(--itk-slate-500);
    font-size: 0.875em;
    margin-left: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
    text-decoration: none;
}

.prose h2:hover .heading-permalink,
.prose h3:hover .heading-permalink,
.prose h4:hover .heading-permalink {
    opacity: 1;
}

/* On This Page Sidebar */
.toc-sidebar {
    border-left: 1px solid var(--itk-slate-200);
    padding: 1.5rem 1rem;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
}

.toc-sidebar__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--itk-slate-500);
    margin-bottom: 0.75rem;
}

.toc-sidebar__list {
    list-style: none;
}

.toc-sidebar__link {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--itk-slate-500);
    text-decoration: none;
    line-height: 1.4;
}

.toc-sidebar__link:hover {
    color: var(--itk-blue);
    text-decoration: none;
}

.toc-sidebar__link--h3 {
    padding-left: 0.75rem;
}

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(
            ellipse 60% 50% at 90% 10%,
            rgba(0, 181, 201, 0.08),
            transparent 70%
        ),
        radial-gradient(
            ellipse 50% 40% at 10% 100%,
            rgba(137, 189, 35, 0.08),
            transparent 70%
        ),
        var(--itk-paper);
}

.login-box {
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-4);
    box-shadow: var(--itk-shadow-2);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
}

.login-box__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.login-box__brand img {
    height: 40px;
    width: auto;
}

.login-box__title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--itk-ink);
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--itk-ink-soft);
    margin-bottom: 0.375rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-300);
    border-radius: var(--itk-radius-2);
    color: var(--itk-ink);
    font-size: 0.9375rem;
    font-family: inherit;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--itk-blue);
    box-shadow: var(--itk-focus);
}

.form-group input:disabled {
    background-color: var(--itk-slate-50);
    color: var(--itk-slate-500);
    cursor: not-allowed;
}

.btn--full {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
    font-size: 0.9375rem;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--itk-radius-2);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border-left: 4px solid transparent;
}

.alert--error {
    background-color: rgba(228, 73, 48, 0.08);
    color: #8a2718;
    border-left-color: var(--itk-red);
}

.alert--success {
    background-color: rgba(0, 141, 61, 0.08);
    color: #0a5b2a;
    border-left-color: var(--itk-green);
}

/* Concept share form (legacy) */
.concept-share-form {
    background-color: var(--itk-slate-50);
    border-bottom: 1px solid var(--itk-slate-200);
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.concept-share-form label {
    font-size: 0.8125rem;
    color: var(--itk-slate-700);
    white-space: nowrap;
}

.concept-share-form__row {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    max-width: 400px;
}

.concept-share-form__row input {
    flex: 1;
    padding: 0.375rem 0.75rem;
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-300);
    border-radius: var(--itk-radius-2);
    color: var(--itk-ink);
    font-size: 0.8125rem;
}

.concept-share-form__row input:focus {
    outline: none;
    border-color: var(--itk-blue);
    box-shadow: var(--itk-focus);
}

.concept-iframe {
    width: 100%;
    height: calc(100vh - 64px);
    border: none;
    display: block;
    overflow: hidden;
    background-color: var(--itk-paper);
    /* Matches the nav's leave/enter animation duration so the iframe grows
       and shrinks in lock-step with the nav sliding out and back in. */
    transition: height 250ms ease-in-out;
}

/* Prototype nav collapse */
.proto-nav-toggle {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 200;
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background-color: var(--itk-ink);
    color: var(--itk-paper);
    border: none;
    border-radius: var(--itk-radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--itk-shadow-2);
    cursor: pointer;
    transition:
        opacity 120ms ease,
        transform 120ms ease;
}

.proto-nav-toggle:hover {
    opacity: 0.9;
    transform: translateY(1px);
}

.proto-nav-toggle:focus-visible {
    outline: none;
    box-shadow: var(--itk-shadow-2), var(--itk-focus);
}

body.proto-nav-collapsed .top-nav,
html.proto-nav-collapsed-pre .top-nav {
    display: none;
}

body.proto-nav-collapsed .concept-iframe,
html.proto-nav-collapsed-pre .concept-iframe,
body.proto-nav-animating-out .concept-iframe {
    height: 100vh;
}

/* Expand: the nav uses `80ms backwards` so it holds offscreen for the
   first 80ms of the 250ms animation. Mirror that delay on the iframe so
   it doesn't start shrinking before the nav begins to fill the gap. */
body.proto-nav-animating-in .concept-iframe {
    transition-delay: 80ms;
}

body.proto-nav-collapsed .proto-nav-toggle {
    display: inline-flex;
}

.proto-stage--with-banner .concept-iframe {
    height: calc(100vh - 64px - 32px);
}

.proto-stage--with-submenu .concept-iframe {
    height: calc(100vh - 64px - 40px);
}

.proto-stage--with-submenu.proto-stage--with-banner .concept-iframe {
    height: calc(100vh - 64px - 40px - 32px);
}

.proto-submenu {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 1rem;
    background-color: var(--itk-paper);
    border-bottom: 1px solid var(--itk-slate-100);
}

.proto-submenu__item {
    padding: 0.375rem 0.75rem;
    border-radius: var(--itk-radius-2);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--itk-slate-700);
    text-decoration: none;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.proto-submenu__item:hover {
    background-color: var(--itk-slate-100);
    color: var(--itk-ink);
    text-decoration: none;
}

.proto-submenu__item--active {
    background-color: color-mix(in srgb, var(--itk-blue) 10%, transparent);
    color: var(--itk-blue);
}

body.proto-nav-collapsed .proto-submenu,
html.proto-nav-collapsed-pre .proto-submenu {
    display: none;
}

body.proto-nav-collapsed .proto-stage--with-submenu .concept-iframe,
html.proto-nav-collapsed-pre .proto-stage--with-submenu .concept-iframe,
body.proto-nav-animating-out .proto-stage--with-submenu .concept-iframe {
    height: 100vh;
}

body.proto-nav-collapsed
    .proto-stage--with-submenu.proto-stage--with-banner
    .concept-iframe,
html.proto-nav-collapsed-pre
    .proto-stage--with-submenu.proto-stage--with-banner
    .concept-iframe,
body.proto-nav-animating-out
    .proto-stage--with-submenu.proto-stage--with-banner
    .concept-iframe {
    height: calc(100vh - 32px);
}

.mock-banner-chrome {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    background-color: #fef9e7;
    border-bottom: 1px solid #f0e6c0;
    color: var(--itk-slate-700);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Animated transitions between the two states. Reused by both the first-visit
   intro and the user-driven button toggles. The nav slides up out of view; the
   pill drops in from above (mirror motion). Reverse keyframes run on expand. */
@keyframes proto-nav-leave {
    0% {
        transform: translateY(0);
        opacity: 1;
        margin-bottom: 0;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
        /* Negative margin-bottom shrinks the nav's layout footprint as it
           slides up, so the iframe below moves with it instead of jumping
           when proto-nav-collapsed flips display: none after the animation. */
        margin-bottom: -64px;
    }
}

@keyframes proto-nav-enter {
    0% {
        transform: translateY(-100%);
        opacity: 0;
        margin-bottom: -64px;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        margin-bottom: 0;
    }
}

@keyframes proto-pill-enter {
    0% {
        transform: translateY(-12px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes proto-pill-leave {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-12px);
        opacity: 0;
    }
}

@keyframes proto-submenu-leave {
    0% {
        opacity: 1;
        margin-bottom: 0;
    }
    100% {
        opacity: 0;
        margin-bottom: -40px;
    }
}

@keyframes proto-submenu-enter {
    0% {
        opacity: 0;
        margin-bottom: -40px;
    }
    100% {
        opacity: 1;
        margin-bottom: 0;
    }
}

/* During an animation, we add a class on <body> that lets the nav and pill
   render together (overriding the resting display rules) and runs the
   appropriate keyframes. The animating classes are removed when the animation
   finishes; the persistent .proto-nav-collapsed class controls the resting
   state. */
body.proto-nav-animating-out .top-nav,
body.proto-nav-animating-in .top-nav,
body.proto-nav-intro .top-nav {
    /* Match the resting display so the three-column grid layout doesn't
       collapse mid-animation. */
    display: grid;
    /* Clip content during the slide so labels/icons can't bleed past the
       nav's box as it translates and the layout footprint shrinks. The
       resting nav stays overflow: visible so dropdowns can hang below. */
    overflow: hidden;
}

body.proto-nav-animating-out .proto-nav-toggle,
body.proto-nav-animating-in .proto-nav-toggle,
body.proto-nav-intro .proto-nav-toggle {
    display: inline-flex;
}

/* Keep the submenu rendered during the animation phase even though the
   resting proto-nav-collapsed rule would set it display: none. The animation
   itself fades it out and shrinks its 40px layout footprint. */
body.proto-nav-animating-out .proto-submenu,
body.proto-nav-animating-in .proto-submenu,
body.proto-nav-intro .proto-submenu {
    display: flex;
}

body.proto-nav-animating-out .top-nav {
    animation: proto-nav-leave 250ms ease-in forwards;
    will-change: transform, opacity;
}

body.proto-nav-animating-out .proto-nav-toggle {
    animation: proto-pill-enter 250ms ease-out 80ms backwards;
    will-change: transform, opacity;
}

body.proto-nav-animating-out .proto-submenu {
    animation: proto-submenu-leave 250ms ease-in forwards;
    will-change: opacity, margin-bottom;
}

body.proto-nav-animating-in .top-nav {
    animation: proto-nav-enter 250ms ease-out 80ms backwards;
    will-change: transform, opacity;
}

body.proto-nav-animating-in .proto-nav-toggle {
    animation: proto-pill-leave 250ms ease-in forwards;
    will-change: transform, opacity;
}

body.proto-nav-animating-in .proto-submenu {
    animation: proto-submenu-enter 250ms ease-out 80ms backwards;
    will-change: opacity, margin-bottom;
}

body.proto-nav-intro .top-nav {
    animation: proto-nav-leave 250ms ease-in 700ms forwards;
    will-change: transform, opacity;
}

body.proto-nav-intro .proto-nav-toggle {
    animation: proto-pill-enter 250ms ease-out 800ms backwards;
    will-change: transform, opacity;
}

body.proto-nav-intro .proto-submenu {
    animation: proto-submenu-leave 250ms ease-in 700ms forwards;
    will-change: opacity, margin-bottom;
}

@media (prefers-reduced-motion: reduce) {
    body.proto-nav-animating-out .top-nav,
    body.proto-nav-animating-out .proto-nav-toggle,
    body.proto-nav-animating-out .proto-submenu,
    body.proto-nav-animating-in .top-nav,
    body.proto-nav-animating-in .proto-nav-toggle,
    body.proto-nav-animating-in .proto-submenu,
    body.proto-nav-intro .top-nav,
    body.proto-nav-intro .proto-nav-toggle,
    body.proto-nav-intro .proto-submenu {
        animation: none;
    }

    .concept-iframe {
        transition: none;
    }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--itk-slate-700);
    background-color: var(--itk-slate-50);
    border: 1px dashed var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
}

.empty-state__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    color: var(--itk-ink);
}

.empty-state p {
    color: var(--itk-slate-700);
    max-width: 480px;
    margin: 0 auto;
}

/* Flash Messages */
.flash-messages {
    position: fixed;
    bottom: 4rem;
    right: 1.5rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--itk-radius-2);
    font-size: 0.875rem;
    min-width: 280px;
    max-width: 380px;
    box-shadow: var(--itk-shadow-2);
    border-left: 4px solid transparent;
    animation: flash-in 0.3s ease-out;
}

.flash--success {
    background-color: var(--itk-paper);
    color: #0a5b2a;
    border-left-color: var(--itk-green);
}

.flash--error {
    background-color: var(--itk-paper);
    color: #8a2718;
    border-left-color: var(--itk-red);
}

@keyframes flash-in {
    from {
        transform: translateX(1rem);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Admin link in nav */
.top-nav__admin-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--itk-blue);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--itk-radius-1);
}

.top-nav__admin-link:hover {
    background-color: rgba(0, 123, 166, 0.08);
    text-decoration: none;
}

/* Admin Panel */
.admin {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 64px);
}

.admin__sidebar {
    background-color: var(--itk-slate-50);
    border-right: 1px solid var(--itk-slate-200);
    padding: 1.5rem 0;
}

.admin__nav {
    display: flex;
    flex-direction: column;
}

.admin__nav-link {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: var(--itk-slate-700);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition:
        color 0.15s,
        background-color 0.15s,
        border-color 0.15s;
}

.admin__nav-link:hover {
    color: var(--itk-ink);
    background-color: var(--hover-overlay);
    text-decoration: none;
}

.admin__nav-link--active {
    color: var(--itk-blue);
    border-left-color: var(--itk-blue);
    background-color: rgba(0, 123, 166, 0.08);
    font-weight: 600;
}

.admin__content {
    padding: 2.5rem 2.5rem 4rem;
}

.admin__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin__title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--itk-ink);
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    overflow: hidden;
}

.admin-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--itk-slate-500);
    background-color: var(--itk-slate-50);
    border-bottom: 1px solid var(--itk-slate-200);
}

.admin-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--itk-slate-200);
    color: var(--itk-ink);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background-color: var(--hover-overlay);
}

.admin-table__actions {
    display: flex;
    gap: 0.5rem;
}

/* Admin forms */
.admin-form {
    max-width: 560px;
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    padding: 1.75rem;
}

.admin-form__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Checkbox group for multi-select */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background-color: var(--itk-slate-50);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-2);
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--itk-ink);
    cursor: pointer;
    font-weight: 400;
    margin-bottom: 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    accent-color: var(--itk-blue);
}

/* Small badge for counts */
.count-badge {
    display: inline-block;
    background-color: var(--itk-slate-100);
    color: var(--itk-slate-700);
    font-size: 0.75rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--itk-radius-pill);
    margin-left: 0.25rem;
    font-weight: 500;
}

/* Danger button */
.btn--danger {
    background-color: rgba(228, 73, 48, 0.1);
    color: var(--itk-red);
    border-color: rgba(228, 73, 48, 0.2);
}

.btn--danger:hover {
    background-color: rgba(228, 73, 48, 0.18);
    color: var(--itk-red);
    border-color: rgba(228, 73, 48, 0.35);
    text-decoration: none;
}

/* Bottom admin bar */
/* User dropdown menu (light theme) */
.user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    min-width: 220px;
    box-shadow: var(--itk-shadow-3);
    z-index: 200;
    overflow: hidden;
}

.user-menu.is-open {
    display: block;
}

.user-menu__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--itk-slate-200);
}

.user-menu__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--itk-slate-500);
    margin-bottom: 0.25rem;
}

.user-menu__eyebrow--lang {
    margin-bottom: 0.375rem;
}

.user-menu__name {
    font-size: 0.875rem;
    color: var(--itk-ink);
    font-weight: 500;
}

.user-menu__email {
    font-size: 0.75rem;
    color: var(--itk-slate-500);
    font-family: var(--itk-font-mono);
}

.user-menu__lang {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--itk-slate-200);
}

.lang-toggle {
    display: flex;
    background: var(--itk-slate-100);
    border-radius: var(--itk-radius-2);
    padding: 2px;
    border: 1px solid var(--itk-slate-200);
}

.lang-toggle__option {
    flex: 1;
    text-align: center;
    padding: 0.3rem 0;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--itk-slate-700);
    transition:
        background 0.15s,
        color 0.15s;
}

.lang-toggle__option:hover {
    color: var(--itk-ink);
    text-decoration: none;
}

.lang-toggle__option--active {
    color: var(--itk-paper);
    background: var(--itk-blue);
}

.lang-toggle__option--active:hover {
    color: var(--itk-paper);
}

.user-menu__link,
.user-menu__logout {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    color: var(--itk-slate-700);
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s;
}

.user-menu__link {
    border-bottom: 1px solid var(--itk-slate-200);
}

.user-menu__link:hover,
.user-menu__logout:hover {
    background-color: var(--itk-slate-50);
    color: var(--itk-ink);
    text-decoration: none;
}

.user-menu__toggle {
    background: none;
    border: 1px solid transparent;
    color: var(--itk-ink);
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--itk-radius-2);
    font-family: inherit;
    font-weight: 500;
}

.user-menu__toggle:hover {
    background-color: var(--itk-slate-100);
}

/* Share popup (concept wrapper) */
.share-popup {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    padding: 1rem;
    width: 320px;
    box-shadow: var(--itk-shadow-3);
    z-index: 200;
}

.share-popup.is-open {
    display: block;
}

.share-popup__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--itk-slate-700);
    margin-bottom: 0.5rem;
}

.share-popup__row {
    display: flex;
    gap: 0.5rem;
}

.share-popup__row input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--itk-paper);
    border: 1px solid var(--itk-slate-300);
    border-radius: var(--itk-radius-2);
    color: var(--itk-ink);
    font-size: 0.8125rem;
    font-family: inherit;
}

.share-popup__row input:focus {
    outline: none;
    border-color: var(--itk-blue);
    box-shadow: var(--itk-focus);
}

/* Concept wrapper nav */
@keyframes nav-fade-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes nav-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav-animate-left {
    animation: nav-fade-in 0.4s ease-out both;
}
.nav-animate-right {
    animation: nav-fade-in-right 0.4s ease-out both;
}

/* Helper utilities for templates */
.muted-note {
    font-size: 0.8125rem;
    color: var(--itk-slate-500);
}

.muted-note-sm {
    font-size: 0.75rem;
    color: var(--itk-slate-500);
}

.mono {
    font-family: var(--itk-font-mono);
    font-size: 0.8125rem;
    color: var(--itk-slate-700);
}

/* Responsive — top nav */
@media (max-width: 1023.98px) {
    /* Collapse + share lose their visible label, button squares up. The
       buttons keep their aria-label so screen readers still announce them. */
    #protoNavCollapse .btn__label,
    #shareToggle .btn__label {
        display: none;
    }

    #protoNavCollapse,
    #shareToggle {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    /* The concept-page separator + title still yield on phones inside design
       system pages that reuse these classes; the concept wrapper no longer
       renders them at any breakpoint. */
    .top-nav__separator,
    .top-nav__concept {
        display: none;
    }

    /* On the dashboard topbar the user menu stays visible; only the name
       label collapses so the chevron-only button fits next to other actions. */
    .top-nav__user-name {
        display: none;
    }

    /* Tabs roll up into the centered select; the per-prototype list moves
       there too, so the secondary submenu bar yields. */
    .top-nav__tabs,
    .proto-submenu {
        display: none;
    }

    .top-nav__menu {
        display: block;
    }

    /* Submenu is hidden on mobile — let the iframe reclaim the 40px. */
    .proto-stage--with-submenu .concept-iframe {
        height: calc(100vh - 64px);
    }

    .proto-stage--with-submenu.proto-stage--with-banner .concept-iframe {
        height: calc(100vh - 64px - 32px);
    }

    .top-nav {
        padding: 0 0.75rem;
        column-gap: 0.5rem;
    }

    /* Trim the monogram so it sits at roughly the same height as the
       kebab icon button on the opposite side. */
    .top-nav__brand-logo {
        height: 22px;
    }

    .top-nav__right {
        gap: 0.375rem;
    }

    /* Concept-wrapper-only: the right cluster collapses into the kebab.
       Scoped to #protoTopNav so the dashboard topbar's user menu (which
       holds the admin link / language toggle / logout) stays reachable. */
    #protoTopNav #protoNavCollapse,
    #protoTopNav #shareToggle,
    #protoTopNav #userMenuToggle {
        display: none;
    }

    #protoTopNav .top-nav__kebab-anchor {
        display: block;
    }

    /* When the kebab triggers them their original anchors are hidden, so
       pin to the viewport's right edge below the topbar instead. */
    #protoTopNav .share-popup,
    #protoTopNav .user-menu {
        position: fixed;
        top: 72px;
        right: 8px;
        left: auto;
        max-width: calc(100vw - 16px);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .doc-layout {
        grid-template-columns: 1fr;
    }

    .doc-sidebar {
        position: relative;
        top: 0;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--itk-slate-200);
    }

    .toc-sidebar {
        display: none;
    }

    .doc-content {
        padding: 1.5rem;
    }

    .admin {
        grid-template-columns: 1fr;
    }

    .admin__sidebar {
        border-right: none;
        border-bottom: 1px solid var(--itk-slate-200);
    }

    .admin__nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .admin__nav-link {
        border-left: none;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .admin__nav-link--active {
        border-left: none;
        border-bottom-color: var(--itk-blue);
    }
}