/* =============================================================
   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);

    /* Feedback element-picker: dimming scrim over the page and a light ring that
       separates the highlight from dark content beneath it. */
    --fb-scrim: rgba(17, 19, 24, 0.25);
    --fb-highlight-ring: rgba(255, 255, 255, 0.6);
}

* {
    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 {
    /* Hidden on desktop; the mobile breakpoint reveals it via .top-nav__menu.
       Without this, inline-flex overrode .top-nav__menu's display:none and the
       burger label showed next to the tabs (two "Documentation" entries). */
    display: none;
    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);
}

/* Specificity has to beat .count-badge, which is declared further down and
   carries an inline margin that would double the meta row's flex gap. */
.concept-card__meta .concept-card__feedback {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0;
}

.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);
}

/* Concept status badges — namespaced so they don't collide with the generic
   badge--draft used by the invitations list. Colors come from --itk-* tokens
   via color-mix; no new hex. */
.badge--status-draft {
    background-color: color-mix(in srgb, var(--itk-lime) 16%, transparent);
    color: var(--itk-slate-700);
}

.badge--status-pitch {
    background-color: color-mix(in srgb, var(--itk-blue) 12%, transparent);
    color: var(--itk-blue);
}

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

/* `display: inline-flex` below beats the `hidden` attribute's UA rule, so a
   hidden button would still render. Restore it for every .btn. */
.btn[hidden] {
    display: none;
}

.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);
}

.login-box__lead {
    color: var(--itk-slate-700);
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.login-box__note {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--itk-slate-200);
    font-size: 0.875rem;
    color: var(--itk-slate-700);
}

.login-box__note h2 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--itk-ink);
    margin-bottom: 0.5rem;
}

.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;
}

/* Label with a link on the same line, e.g. "Password" and "Forgot password?". */
.login-box__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--itk-space-3);
    margin-bottom: 0.375rem;
}

.form-group .login-box__label-row label {
    margin-bottom: 0;
}

.login-box__aside-link {
    font-size: 0.8125rem;
}

.login-box__footer {
    margin-top: var(--itk-space-5);
    text-align: center;
    font-size: 0.875rem;
}

.login-box__hint {
    margin-bottom: var(--itk-space-4);
}

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

.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;
}

/* Docs tab printed from the browser's own menu: the iframe would come out as
   one clipped sheet, so the printout is a pointer to the Print button
   instead (see assets/scripts/docs-print.js, which prints the iframe). */
.print-notice {
    display: none;
}

@media print {
    body:has(> .print-notice) > :not(.print-notice) {
        display: none !important;
    }

    .print-notice {
        display: block;
        max-width: 60ch;
        margin: 0;
        color: var(--itk-ink);
        font-size: var(--itk-text-base);
        line-height: 1.5;
    }
}

/* 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);
}

/* Presentation tab: the submenu row switches between decks and, for admins,
   shows who can see the current one. */
.presentation-bar {
    justify-content: space-between;
}

.presentation-bar__decks {
    display: flex;
    gap: 0.25rem;
}

.presentation-bar__audience {
    margin-left: auto;
    text-decoration: none;
}

.presentation-bar__audience:hover {
    text-decoration: none;
}

/* Audience of a presentation, in the colours of the documentation badge. */
.badge--audience-public {
    background-color: color-mix(in srgb, var(--itk-mint) 18%, transparent);
    color: var(--itk-green);
}

.badge--audience-admin {
    background-color: color-mix(in srgb, var(--itk-red) 12%, transparent);
    color: var(--itk-red);
}

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;
}

/* The banner stays visible when the nav collapses, so its 32px must still come
   off the iframe — with or without a submenu. Without this the iframe is 32px
   taller than the space it sits in: its bottom row is cut off and the page
   picks up 32px of stray scroll that fights the prototype's own scrolling. */
body.proto-nav-collapsed .proto-stage--with-banner .concept-iframe,
html.proto-nav-collapsed-pre .proto-stage--with-banner .concept-iframe,
body.proto-nav-animating-out .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__intro {
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: var(--itk-slate-500);
}

/* Heading between tables on one admin page, e.g. documentation pages and
   presentations on Page access. */
.admin__section-title {
    margin: 2rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--itk-ink);
}

.admin-form > .admin__section-title:first-of-type {
    margin-top: 0;
}

/* 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);
}

/* Row deep-linked from the docs audience badge (#page-<path>). */
.admin-table tr:target td {
    background-color: var(--itk-slate-50);
}

.admin-table tr:target td:first-child {
    box-shadow: inset 3px 0 0 var(--itk-blue);
}

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

.admin-table__empty {
    text-align: center;
    padding: 2rem;
}

/* 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;
}

/* Personal access tokens (/profile/tokens) */
.profile-tokens__new p + p {
    margin-top: 0.25rem;
}

.profile-tokens__secret {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.profile-tokens__secret input {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-300);
    border-radius: var(--itk-radius-2);
}

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

/* OAuth consent page (/oauth/authorize) */
.oauth-consent__details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--itk-slate-50);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-2);
    font-size: 0.875rem;
}

.oauth-consent__details dt {
    font-weight: 600;
    color: var(--itk-ink);
}

.oauth-consent__details dd {
    color: var(--itk-slate-700);
    overflow-wrap: anywhere;
}

.oauth-consent__scope {
    display: block;
    margin-top: 0.25rem;
}

.oauth-consent__actions {
    display: flex;
    flex-direction: column;
    gap: 0.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;
}

/* Badges are rendered even at zero so scripts can update them in place. */
.count-badge[hidden] {
    display: none;
}

/* 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);
}

/* Feedback widget — annotate an element and save feedback on the concept */

/* Comment drawer — docked to the right edge, vertically centred, above the
   annotation overlay (z 400) so its rows stay usable while a pick is running.
   Collapsed it is an icon rail; hover or keyboard focus pulls the labels out.
   Only the left corners are rounded, so it reads as a handle on the edge.
   No overflow clipping — the count bubble overhangs the corner — so the rows
   carry the rounding themselves. */
.comment-dock {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 450;
    display: flex;
    flex-direction: column;
    background: var(--itk-slate-50);
    border: 1px solid var(--itk-slate-200);
    border-right: 0;
    border-radius: var(--itk-radius-2) 0 0 var(--itk-radius-2);
    box-shadow: var(--itk-shadow-2);
}

/* Rounding follows the visible rows: the note row is attached only when it
   has something to report, so :last-child is the genuinely last row. */
.comment-dock__row:first-child {
    border-top-left-radius: var(--itk-radius-2);
}

.comment-dock__row:last-child {
    border-bottom-left-radius: var(--itk-radius-2);
}

/* Count sits on the corner, outside the row's flow, so a page with comments
   does not leave the collapsed rail wider than one without. */
.comment-dock__count {
    position: absolute;
    top: -0.4375rem;
    left: -0.4375rem;
    margin: 0;
    background: var(--itk-blue);
    color: var(--itk-paper);
    box-shadow: 0 0 0 2px var(--itk-paper);
}

.comment-dock__row {
    display: flex;
    align-items: center;
    /* No gap: the label carries its own leading space, so a clipped label
       leaves the collapsed row symmetric around the icon. */
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: 0;
    color: var(--itk-slate-700);
    font-family: inherit;
    font-size: 0.8125rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.comment-dock__row + .comment-dock__row {
    border-top: 1px solid var(--itk-slate-200);
}

/* The drawer's own surface is slate-50, so hover goes one step further. */
.comment-dock__row:hover:not(:disabled) {
    background: var(--itk-slate-100);
    color: var(--itk-ink);
}

.comment-dock__row:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--itk-blue);
}

/* Nothing to show: the row states that rather than toggling an empty view. */
.comment-dock__row:disabled {
    color: var(--itk-slate-500);
    cursor: default;
}

/* The note row reports comments that could not be placed on the page. */
.comment-dock__row--note {
    color: var(--itk-slate-500);
    font-size: 0.75rem;
}

/* Blue outlines carry the drawer: collapsed it is nothing but these icons,
   and neutral grey did not read as something to press. */
.comment-dock__icon {
    flex: none;
    color: var(--itk-blue);
}

.comment-dock__row:disabled .comment-dock__icon,
.comment-dock__row--note .comment-dock__icon {
    color: var(--itk-slate-300);
}

/* On the lit row the icon follows the row's own colour. */
.comment-dock__row[aria-pressed="true"] .comment-dock__icon {
    color: currentColor;
}

/* Collapsed: the labels are clipped rather than removed, so the rows keep
   their accessible names and the drawer keeps its width animatable. The
   leading space belongs to the label, so a clipped one takes no room at all. */
.comment-dock__label {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    transition:
        max-width 180ms ease,
        margin-left 180ms ease;
}

/* :has(:focus-visible) rather than :focus-within — a row keeps focus after a
   click, which would hold the drawer open once the pointer has left. Keyboard
   focus still opens it. */
.comment-dock:hover .comment-dock__label,
.comment-dock:has(:focus-visible) .comment-dock__label {
    max-width: 14rem;
    margin-left: 0.5rem;
}

/* Picking an element or writing a comment: the drawer gets out of the way of
   the page being annotated, whatever the pointer and focus are doing. */
.comment-dock.comment-dock--busy .comment-dock__label {
    max-width: 0;
    margin-left: 0;
}

/* Touch: hover is not available, and a tap must not be the only way to find
   out what an icon does. */
@media (hover: none) {
    .comment-dock__label {
        max-width: 14rem;
        margin-left: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .comment-dock__label {
        transition: none;
    }
}

/* Lit state stays in primary blue so it is readable while attention is on the
   iframe. */
.comment-dock__row[aria-pressed="true"],
.comment-dock__row[aria-pressed="true"]:hover {
    background: var(--itk-blue);
    color: var(--itk-paper);
}

.comment-dock__row[aria-pressed="true"] .comment-dock__count {
    background: var(--itk-ink);
    box-shadow: 0 0 0 2px var(--itk-blue);
}

.fb-widget {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 400;
}

/* The panel/toast set their own display, which would beat the UA's
   [hidden] { display: none } — without this, the dialog can't close. */
.fb-widget [hidden] {
    display: none !important;
}

.fb-overlay {
    position: fixed;
    inset: 0;
    background: var(--fb-scrim);
    cursor: crosshair;
    pointer-events: auto;
}

/* Highlight is fixed-position and tracks the hovered element. JS adds the
   iframe offset so this stays in parent-document coordinates. */
.fb-highlight {
    position: fixed;
    border: 2px solid var(--itk-blue);
    background: rgba(0, 123, 166, 0.08);
    border-radius: var(--itk-radius-1);
    pointer-events: none;
    box-shadow: 0 0 0 1px var(--fb-highlight-ring);
    transition:
        top 80ms ease,
        left 80ms ease,
        width 80ms ease,
        height 80ms ease;
}

/* Locked color once the user has clicked. */
.fb-highlight--selected {
    border-color: var(--itk-lime);
    background: rgba(137, 189, 35, 0.1);
}

.fb-tooltip {
    position: fixed;
    background: var(--itk-ink);
    color: var(--itk-paper);
    padding: 0.375rem 0.625rem;
    border-radius: var(--itk-radius-2);
    font-family: var(--itk-font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--itk-shadow-2);
}

.fb-instructions {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--itk-ink);
    color: var(--itk-paper);
    padding: 0.625rem 1.125rem;
    border-radius: var(--itk-radius-pill);
    font-size: 0.8125rem;
    pointer-events: none;
    box-shadow: var(--itk-shadow-3);
}

/* Top-right floating panel — matches the upstream widget layout. */
.fb-panel {
    position: fixed;
    top: 5rem;
    right: 1.25rem;
    width: 400px;
    max-width: calc(100vw - 2.5rem);
    max-height: calc(100vh - 6rem);
    background: var(--itk-paper);
    border-radius: var(--itk-radius-3);
    box-shadow: var(--itk-shadow-3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.fb-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--itk-slate-50);
    border-bottom: 1px solid var(--itk-slate-200);
}

.fb-panel__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--itk-ink);
}

.fb-panel__close {
    background: transparent;
    border: 0;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--itk-slate-700);
    padding: 0.25rem 0.5rem;
    border-radius: var(--itk-radius-2);
}

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

.fb-panel__body {
    padding: 1rem;
    overflow-y: auto;
}

.fb-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.fb-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.fb-field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--itk-slate-700);
}

.fb-field input[type="text"],
.fb-field textarea {
    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.875rem;
    font-family: inherit;
}

.fb-field textarea {
    resize: vertical;
    min-height: 6rem;
}

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

/* Element details — collapsed by default; only opened on explicit click. */
.fb-details {
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-2);
    background: var(--itk-slate-50);
}

.fb-details__summary {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--itk-slate-700);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fb-details__summary::-webkit-details-marker {
    display: none;
}

.fb-details__summary::before {
    content: "▸";
    font-size: 0.625rem;
    transition: transform 0.15s ease;
}

.fb-details[open] .fb-details__summary::before {
    transform: rotate(90deg);
}

.fb-details__list {
    margin: 0;
    padding: 0 0.75rem 0.75rem;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    font-size: 0.75rem;
}

.fb-details__list dt {
    color: var(--itk-slate-700);
    font-weight: 500;
}

.fb-details__list dd {
    margin: 0;
    color: var(--itk-ink);
    font-family: var(--itk-font-mono, ui-monospace, monospace);
    word-break: break-all;
}

.fb-error {
    background: rgba(228, 73, 48, 0.08);
    border: 1px solid var(--itk-red);
    color: var(--itk-red);
    padding: 0.5rem 0.75rem;
    border-radius: var(--itk-radius-2);
    font-size: 0.8125rem;
}

.fb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* The submit toast reuses the app's .flash-messages/.flash look verbatim so
   it matches the flashes shown on the feedback list. */
.fb-toast {
    pointer-events: none;
}

/* Existing comments on the page — an underline on the annotated element and
   a bubble carrying the comment's reference id. Both are drawn in the parent
   document over the iframe, so they are position: fixed. */
.fb-markers {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.fb-marker {
    position: fixed;
    border-bottom: 2px solid var(--itk-blue);
    background: rgba(0, 123, 166, 0.06);
    pointer-events: none;
}

.fb-marker__bubble {
    position: fixed;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.4375rem;
    background: var(--itk-blue);
    color: var(--itk-paper);
    border: 0;
    border-radius: var(--itk-radius-pill);
    font-family: var(--itk-font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.375rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

.fb-marker__bubble:hover {
    background: var(--itk-ink);
    color: var(--itk-paper);
    text-decoration: none;
}

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

/* Arriving from the feedback list: the marker names itself once, then settles
   into the ordinary underline. */
.fb-marker--target {
    animation: fb-marker-pulse 1.4s ease-out 2;
}

@keyframes fb-marker-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 166, 0);
    }
    30% {
        box-shadow: 0 0 0 4px rgba(0, 123, 166, 0.35);
    }
}

/* No animation available: a standing ring says the same thing. */
@media (prefers-reduced-motion: reduce) {
    .fb-marker--target {
        animation: none;
        box-shadow: 0 0 0 2px var(--itk-blue);
    }
}

.fb-marker-popover {
    position: fixed;
    width: 320px;
    max-width: calc(100vw - 1rem);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-3);
    box-shadow: var(--itk-shadow-3);
    pointer-events: auto;
}

.fb-marker-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--itk-slate-200);
}

.fb-marker-popover__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--itk-ink);
}

.fb-marker-popover__body {
    padding: 0.75rem;
}

.fb-marker-popover__item + .fb-marker-popover__item {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--itk-slate-200);
}

.fb-marker-popover__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    color: var(--itk-slate-500);
}

.fb-marker-popover__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--itk-ink);
    white-space: pre-wrap;
}

.fb-marker-popover__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.625rem 0 0;
}

.fb-marker-popover__complete {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--itk-blue);
    border-radius: var(--itk-radius-1);
    background: var(--itk-paper);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--itk-blue);
    cursor: pointer;
}

.fb-marker-popover__complete:hover:not(:disabled) {
    background: var(--itk-blue);
    color: var(--itk-paper);
}

.fb-marker-popover__complete:disabled {
    opacity: 0.55;
    cursor: progress;
}

.fb-marker-popover__link {
    font-size: 0.75rem;
    color: var(--itk-blue);
}

/* Reference chip — the same id the page bubbles show. */
.fb-marker-popover__id,
.feedback-item__ref {
    display: inline-block;
    padding: 0 0.375rem;
    background: var(--itk-slate-100);
    border-radius: var(--itk-radius-1);
    font-family: var(--itk-font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--itk-slate-700);
}

.feedback-item__ref {
    margin-right: 0.5rem;
}

/* Landing from a marker's "show in list" link. */
.feedback-item:target {
    background-color: rgba(0, 123, 166, 0.06);
    box-shadow: inset 3px 0 0 var(--itk-blue);
}

/* Feedback list tab — table view rendered in the wrapper's stage slot */
.feedback-stage {
    min-height: calc(100vh - 64px);
    background: var(--itk-slate-50);
}

.feedback-list {
    max-width: 1160px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.feedback-list__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.feedback-list__title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--itk-ink);
}

.feedback-list__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--itk-slate-500);
}

.feedback-list__toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* List actions — a dropdown so the toolbar carries one control instead of a
   row of equally-weighted buttons. */
.list-menu-anchor {
    position: relative;
}

.list-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.list-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 30;
    min-width: 230px;
    padding: 0.375rem;
    background-color: var(--itk-paper);
    border: 1px solid var(--itk-slate-200);
    border-radius: var(--itk-radius-2);
    box-shadow: var(--itk-shadow-3);
    text-align: left;
}

.list-menu[hidden] {
    display: none;
}

.list-menu__group + .list-menu__group {
    margin-top: 0.25rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--itk-slate-200);
}

.list-menu__eyebrow {
    padding: 0.25rem 0.625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--itk-slate-500);
}

.list-menu__item {
    display: block;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    border: 0;
    border-radius: var(--itk-radius-1);
    background: none;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
    color: var(--itk-ink);
    cursor: pointer;
}

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

.list-menu__item--danger {
    color: var(--itk-red);
}

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

/* Table rhythm mirrors the itkaarhus DS "app data tables" example
   (denser 14px rows, 36px select column, light inner separators),
   built with the app's own --itk-* tokens. */
.feedback-table {
    font-size: 0.875rem;
}

/* The DS data-table example keeps the header row white — override the
   admin-table's gray band, keep the uppercase label + strong border. */
.feedback-table th {
    background-color: var(--itk-paper);
}

/* Each item is a two-row tbody (description over meta). The divider lives
   on the tbody, not on cells — .admin-table's per-cell border rules assume
   one <tr> per record and would draw lines inside each item. Neutralise
   them and let the tbody border-top separate items instead. */
.feedback-table td {
    padding: 0.8125rem 1rem;
    border-bottom: 0;
}

.feedback-item + .feedback-item {
    border-top: 1px solid var(--itk-slate-200);
}

/* The selection column only exists while an export is being narrowed. Hidden
   by default it cannot be mistaken for the way to complete a comment. */
.feedback-table:not(.is-selecting) .feedback-table__check {
    display: none;
}

.feedback-table__check {
    width: 36px;
    padding-right: 0;
    vertical-align: top;
}

#fbToggleSelect[aria-pressed="true"] {
    background-color: var(--itk-blue);
    border-color: var(--itk-blue);
    color: var(--itk-paper);
}

.feedback-table input[type="checkbox"] {
    accent-color: var(--itk-blue);
    width: 16px;
    height: 16px;
    margin: 0;
    display: block;
}

/* The whole item (except its controls) is clickable and opens the dialog. */
.feedback-item {
    cursor: pointer;
}

/* Hover the whole item as one band. .admin-table's own `tr:hover td` rule
   tints each row with a *different* colour (--hover-overlay), so on this
   two-row-per-item table it produced a faint mismatched band on the meta
   row. Cancel that per-row tint and let a single tbody hover paint both. */
.feedback-table tr:hover td {
    background-color: transparent;
}

.feedback-item:hover {
    background-color: var(--itk-slate-50);
}

.feedback-item__desc td {
    padding-bottom: 0.25rem;
    color: var(--itk-ink);
    font-weight: 500;
}

.feedback-item__meta td {
    padding-top: 0;
}

.feedback-item__meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--itk-slate-500);
}

/* The page label is the only unbounded part of the meta row. In a wrapping
   flex row an over-long item moves to the next line instead of shrinking, so
   it gets a small basis and grows into the space left — keeping the actions
   on the same line instead of leaving a gap in the item. */
.feedback-item__where {
    flex: 1 1 8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--itk-blue);
    text-decoration: none;
}

.feedback-item__where:hover {
    text-decoration: underline;
}

.feedback-item__actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
}

.feedback-item__actions .btn {
    white-space: nowrap;
}

.feedback-list__footer {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

/* Completed comments need to be tellable apart at a glance while scanning a
   long list — the status badge alone sits too far right to register. A muted
   surface and text plus the check by the reference carry it; a coloured edge
   would have to be drawn per cell and reads as a stray rule between columns. */
.feedback-item--completed {
    background-color: var(--itk-slate-50);
}

/* Hovering a completed item must move it a step, not reveal the cells'
   own tint under the hover band — painting cells split the item in two. */
.feedback-item--completed:hover {
    background-color: var(--itk-slate-100);
}

.feedback-item--completed .feedback-item__desc td {
    color: var(--itk-slate-500);
}

.feedback-item--completed .feedback-item__ref {
    background: transparent;
    color: var(--itk-slate-500);
}

.feedback-item__done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.375rem;
    vertical-align: -0.25rem;
    border-radius: 50%;
    background: var(--itk-green);
    color: var(--itk-paper);
}

.feedback-item__done svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Detail dialog — native <dialog>, opened by clicking a feedback item. */
.feedback-dialog {
    border: none;
    border-radius: var(--itk-radius-3);
    box-shadow: var(--itk-shadow-3);
    padding: 1.5rem;
    width: 560px;
    max-width: calc(100vw - 2.5rem);
    /* The app reset zeroes element margins, which kills the UA's
       margin:auto centering for a modal <dialog>. Center explicitly. */
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    max-height: calc(100vh - 2.5rem);
}

.feedback-dialog::backdrop {
    background: rgba(17, 19, 24, 0.35);
}

.feedback-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.feedback-dialog__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--itk-ink);
}

.feedback-dialog__description {
    margin: 0 0 1.25rem;
    color: var(--itk-ink);
    white-space: pre-wrap;
}

.feedback-dialog__list {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.375rem;
    font-size: 0.8125rem;
}

.feedback-dialog__list dt {
    color: var(--itk-slate-500);
    font-weight: 500;
}

.feedback-dialog__list dd {
    margin: 0;
    color: var(--itk-ink);
    word-break: break-all;
}

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

/* Note preview in the list — a quiet second line under the description, so
   the list says what was decided without anything being opened. */
.feedback-item__note {
    display: block;
    margin-top: 0.5rem;
    padding-left: 0.625rem;
    border-left: 2px solid var(--itk-slate-200);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--itk-slate-700);
}

.feedback-item__note-label {
    margin-right: 0.375rem;
    font-weight: 600;
    color: var(--itk-slate-500);
}

.feedback-note__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--itk-slate-700);
}

.feedback-note__input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--itk-slate-300);
    border-radius: var(--itk-radius-2);
    background: var(--itk-paper);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--itk-ink);
    resize: vertical;
}

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

.feedback-note__hint {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--itk-slate-500);
}

.feedback-note__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* 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 and print lose their visible label and square up. They
       keep their aria-label so screen readers still announce them. */
    #protoNavCollapse .btn__label,
    #shareToggle .btn__label,
    #docsPrint .btn__label {
        display: none;
    }

    #protoNavCollapse,
    #shareToggle,
    #docsPrint {
        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;
    }

    .top-nav__select {
        display: inline-flex;
    }

    /* 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 #docsPrint,
    #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);
    }
}

/* =========================================================================
   Documentation version diff (on-platform prose diff between two versions).
   Additions use the green channel, removals the red — soft tints via
   color-mix, no new hex. See DocumentationDiffController + ProseDiffer.
   ========================================================================= */
.doc-diff {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.doc-diff__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--itk-blue);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}
.doc-diff__back:hover {
    text-decoration: underline;
}
.doc-diff__title {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}
.doc-diff__subtitle {
    margin: 0.25rem 0 0;
    color: var(--itk-slate-700);
}
.doc-diff__controls {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--itk-slate-50);
    border: 1px solid var(--itk-slate-200);
    border-radius: 8px;
}
.doc-diff__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.doc-diff__field-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--itk-slate-700);
}
.doc-diff__field select {
    font: inherit;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--itk-slate-300);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--itk-ink);
    cursor: pointer;
}
.doc-diff__field select:focus-visible {
    outline: 2px solid var(--itk-blue);
    outline-offset: 1px;
}
.doc-diff__arrow {
    color: var(--itk-slate-500, var(--itk-slate-700));
    margin-bottom: 0.55rem;
}
.doc-diff__page {
    margin-bottom: 2rem;
    border: 1px solid var(--itk-slate-200);
    border-radius: 8px;
    overflow: hidden;
}
.doc-diff__page-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-family: var(--font-mono, monospace);
    background: var(--itk-slate-50);
    border-bottom: 1px solid var(--itk-slate-200);
}
.doc-diff__badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.doc-diff__badge--added {
    background: color-mix(in srgb, var(--itk-green) 16%, transparent);
    color: #0a5b2a;
}
.doc-diff__badge--removed {
    background: color-mix(in srgb, var(--itk-red) 14%, transparent);
    color: #8a2718;
}
.doc-diff__lines {
    padding: 0.5rem 0;
}
.doc-diff__line {
    display: flex;
    gap: 0.6rem;
    margin: 0;
    padding: 0.2rem 1rem;
    line-height: 1.55;
}
.doc-diff__marker {
    flex: none;
    width: 1ch;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    user-select: none;
}
.doc-diff__line--added {
    background: color-mix(in srgb, var(--itk-green) 10%, transparent);
}
.doc-diff__line--added .doc-diff__marker {
    color: var(--itk-green);
}
.doc-diff__line--removed {
    background: color-mix(in srgb, var(--itk-red) 8%, transparent);
    color: var(--itk-slate-700);
}
.doc-diff__line--removed .doc-diff__text {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--itk-red) 50%, transparent);
}
.doc-diff__line--removed .doc-diff__marker {
    color: var(--itk-red);
}