/* =============================================================================
   User Theme

   Loaded only for `audience == "user"` and after ui.css. Remove the link in
   common/layouts/base.html to return user pages to the shared admin theme.
   Typography and font assets are shared in ui.css.
   ============================================================================= */

body[data-audience="user"] {
    /* Product app tokens from graph-one. */
    --go-app-bg: #ffffff;
    --go-app-fg: #0a0a0a;
    --go-app-primary: #171717;
    --go-app-primary-fg: #fafafa;
    --go-app-secondary: #f5f5f5;
    --go-app-muted: #f5f5f5;
    --go-app-muted-fg: #737373;
    --go-app-border: #e5e5e5;
    --go-app-input: #e5e5e5;
    --go-app-ring: #a3a3a3;
    --go-app-sidebar: #fafafa;
    --go-app-sidebar-accent: #f5f5f5;
    --go-app-accent: #fc4c00;

    --go-bg: var(--go-app-bg);
    --go-surface: #ffffff;
    --go-surface-alt: var(--go-app-sidebar);
    --go-surface-muted: var(--go-app-muted);
    --go-border: var(--go-app-border);
    --go-border-light: #eeeeee;
    --go-text: var(--go-app-fg);
    --go-text-muted: var(--go-app-muted-fg);
    --go-text-inverse: var(--go-app-primary-fg);
    --go-accent: var(--go-app-accent);
    --go-accent-hover: #e04300;
    --go-accent-dark: #c23800;
    --go-accent-soft: #ffe1d8;
    --go-accent-muted: rgb(252 76 0 / 0.08);
    --go-iris: #404040;
    --go-iris-dark: #171717;
    --go-iris-soft: #e5e5e5;
    --go-iris-muted: rgb(64 64 64 / 0.08);

    --go-success: #047857;
    --go-warning: #b45309;
    --go-danger: #dc2626;
    --go-muted: #a3a3a3;

    --go-font-xs: 0.5625rem;
    --go-font-sm: 0.75rem;
    --go-font-base: 0.875rem;
    --go-font-md: 1rem;
    --go-font-lg: 1.125rem;
    --go-font-xl: 1.5rem;
    --go-font-2xl: 1.8125rem;
    --go-font-3xl: 2rem;
    --go-font-4xl: 2.25rem;

    --go-radius-xl: 12px;
    --go-radius-lg: 10px;
    --go-radius: 8px;
    --go-radius-sm: 6px;
    --go-radius-xs: 4px;

    --go-shadow-xs: 0 0 0 1px rgb(0 0 0 / 0.08);
    --go-shadow-sm: 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --go-shadow: 0 0 0 1px rgb(155 163 176 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.10), 0 1px 3px 0 rgb(0 0 0 / 0.10);
    --go-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10), 0 0 0 1px rgb(155 163 176 / 0.25);
    --go-glow: none;
    --go-glow-accent: none;
    --go-ring: 0 0 0 2px var(--go-app-ring);
    --go-hover-border: #d4d4d4;
    --go-hover-bg: rgb(115 115 115 / 0.10);
    --go-gap: 1rem;

    --bs-body-bg: var(--go-bg);
    --bs-body-color: var(--go-text);
    --bs-heading-color: var(--go-text);
    --bs-link-color: #404040;
    --bs-link-hover-color: #171717;

    background: var(--go-bg);
    accent-color: #111827;
    color: var(--go-text);
    font-size: var(--go-font-base);
    line-height: 1.5rem;

    /* Semantic tokens for the component overrides below (gou = graph-one user).
       Each has a dark counterpart in the [data-bs-theme=dark] block at the end
       of this file — never use raw color literals below this block. */
    --gou-text-strong: #111827;
    --gou-text-secondary: #4b5563;
    --gou-text-tertiary: #6b7280;
    --gou-text-faint: #9ca3af;
    --gou-line: #e5e7eb;
    --gou-line-faint: rgb(229 231 235 / 0.20);
    --gou-fill: #f3f4f6;
    --gou-fill-soft: #f9fafb;
    --gou-fill-translucent: rgb(243 244 246 / 0.5);
    --gou-fill-heavy: rgb(243 244 246 / 0.8);
    --gou-neutral-strong: #262626;
    --gou-hover-tint: rgb(75 85 99 / 0.10);
    --gou-surface-glass: rgb(255 255 255 / 0.86);
    --gou-focus-ring: rgb(163 163 163 / 0.55);
    --gou-focus-ring-soft: rgb(163 163 163 / 0.35);
    --gou-edge: rgb(17 24 39 / 0.18);
    --gou-edge-shadow: rgb(17 24 39 / 0.12);
    --gou-edge-strong: rgb(17 24 39 / 0.35);
    --gou-edge-strongest: rgb(17 24 39 / 0.6);
    --gou-success-bg: #ecfdf5;
    --gou-success-line: #a7f3d0;
    --gou-success-edge: #10b981;
    --gou-success-glow: rgb(16 185 129 / 0.18);
    --gou-danger-bg: #fef2f2;
    --gou-danger-line: #fecaca;
    --gou-danger-text: #b91c1c;
    --gou-danger-edge: #ef4444;
    --gou-danger-glow: rgb(239 68 68 / 0.18);
    --gou-warning-bg: #fffbeb;
    --gou-warning-line: #fde68a;
    /* Button tokens following shadcn base-nova (the product app's style):
       outline = border + surface fill (translucent input-tint in dark),
       ghost = borderless with hover tint only. */
    --gou-control-border: #e5e5e5;
    --gou-control-fill: #ffffff;
    --gou-control-fill-hover: #f5f5f5;
    --gou-ghost-hover: #f5f5f5;
    /* Container boundary, nova-style: fixed border in light, foreground-alpha
       ring in dark so cards/menus stay visible on the near-black page. */
    --gou-card-border: #e5e5e5;
}

body[data-audience="user"] h1,
body[data-audience="user"] h2,
body[data-audience="user"] h3,
body[data-audience="user"] h4,
body[data-audience="user"] h5,
body[data-audience="user"] h6 {
    color: var(--go-app-fg);
    font-family: var(--go-font-display);
    font-feature-settings: "ss01";
    font-weight: 650;
    letter-spacing: -0.0085em;
}

body[data-audience="user"] .page__subtitle,
body[data-audience="user"] .text-muted,
body[data-audience="user"] .stat__label,
body[data-audience="user"] .stat__meta,
body[data-audience="user"] .breadcrumbs {
    color: var(--go-app-muted-fg) !important;
}

body[data-audience="user"] p,
body[data-audience="user"] ul,
body[data-audience="user"] ol,
body[data-audience="user"] dl,
body[data-audience="user"] blockquote,
body[data-audience="user"] figure {
    color: var(--go-iris);
}

body[data-audience="user"] p,
body[data-audience="user"] li,
body[data-audience="user"] dd {
    font-size: var(--go-font-base);
    letter-spacing: 0.0048em;
    line-height: 1.5rem;
}

body[data-audience="user"] small,
body[data-audience="user"] .small {
    font-size: var(--go-font-sm);
    letter-spacing: 0.0115em;
    line-height: 1.25rem;
}

body[data-audience="user"] strong,
body[data-audience="user"] b,
body[data-audience="user"] dt {
    color: var(--gou-text-strong);
    font-weight: 650;
}

body[data-audience="user"] a {
    border-radius: 4px;
    color: var(--go-iris);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body[data-audience="user"] a:hover {
    color: var(--gou-text-strong);
}

body[data-audience="user"] a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--gou-focus-ring);
}

body[data-audience="user"] hr {
    border-color: var(--gou-line);
    opacity: 1;
}

body[data-audience="user"] blockquote {
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid var(--gou-line);
    color: var(--gou-text-secondary);
}

body[data-audience="user"] code,
body[data-audience="user"] kbd,
body[data-audience="user"] pre,
body[data-audience="user"] samp {
    font-family: var(--go-font-mono);
}

body[data-audience="user"] code {
    padding: 1px 5px;
    border: 1px solid var(--gou-line);
    border-radius: 4px;
    background: var(--gou-fill-soft);
    color: var(--gou-text-strong);
    font-size: 0.875em;
}

body[data-audience="user"] pre {
    padding: 14px;
    border: 1px solid var(--gou-line);
    border-radius: 8px;
    background: var(--gou-fill-soft);
    color: var(--gou-text-strong);
    font-size: var(--go-font-sm);
    line-height: 1.5rem;
    box-shadow: none;
}

body[data-audience="user"] pre code {
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-audience="user"] kbd {
    min-width: 1.25rem;
    padding: 1px 5px;
    border: 1px solid var(--gou-edge);
    border-radius: 4px;
    background: var(--go-surface-muted);
    box-shadow: 0 1px 0 var(--gou-edge-shadow);
    color: var(--gou-text-secondary);
    font-size: var(--go-font-xs);
    font-weight: 600;
}

body[data-audience="user"] details {
    border-color: var(--gou-line);
}

body[data-audience="user"] summary {
    color: var(--gou-text-strong);
    font-weight: 550;
}

body[data-audience="user"] .app-shell {
    grid-template-columns: 260px minmax(0, 1fr);
}

body[data-audience="user"] .content {
    padding: 20px 24px 28px;
    background: var(--go-bg);
}

body[data-audience="user"] .page__content {
    gap: 16px;
}

body[data-audience="user"] .sidebar {
    width: 260px;
    background: var(--gou-line-faint);
    border-right: 1px solid var(--gou-line);
    box-shadow: none;
    padding: 10px 10px 16px;
    gap: 14px;
}

body[data-audience="user"] .sidebar__section-title {
    margin: 18px 0 4px;
    padding-inline: 4px;
    color: var(--gou-text-faint);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25rem;
    text-transform: none;
}

body[data-audience="user"] .sidebar__nav {
    gap: 2px;
}

body[data-audience="user"] .sidebar__link {
    min-height: 34px;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 14px 6px 18px;
    border: 0;
    border-radius: 8px;
    color: var(--gou-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.0048em;
    line-height: 1rem;
    box-shadow: none;
}

body[data-audience="user"] .sidebar__link span:not(.pill) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-audience="user"] .sidebar__link::before {
    display: none;
}

body[data-audience="user"] .sidebar__link:hover {
    background: var(--gou-hover-tint);
    color: var(--gou-text-strong);
}

body[data-audience="user"] .sidebar__link.active {
    background: var(--gou-surface-glass);
    box-shadow: var(--go-shadow-sm);
    color: var(--gou-text-strong);
}

body[data-audience="user"] .sidebar__link i {
    color: var(--gou-text-tertiary);
    width: 16px;
    margin-top: 0;
    font-size: 16px;
    line-height: 1rem;
    text-align: center;
}

body[data-audience="user"] .sidebar__link-logo {
    width: 16px;
    height: 16px;
}

body[data-audience="user"] .sidebar__link.active i,
body[data-audience="user"] .sidebar__link:hover i {
    color: var(--go-app-accent);
}

body[data-audience="user"] .topbar {
    min-height: 36px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--go-app-border);
}

body[data-audience="user"] .breadcrumbs {
    font-size: var(--go-font-sm);
    letter-spacing: 0.0115em;
    line-height: 1.25rem;
}

body[data-audience="user"] .breadcrumbs__current {
    color: var(--go-app-fg);
    font-weight: 650;
}

body[data-audience="user"] .surface,
body[data-audience="user"] .table-shell,
body[data-audience="user"] .empty-state,
body[data-audience="user"] .unauth-card {
    border: 1px solid var(--gou-card-border);
    border-radius: 8px;
    background: var(--go-surface);
    box-shadow: none;
}

body[data-audience="user"] .surface {
    padding: 14px;
}

body[data-audience="user"] .surface:hover {
    box-shadow: none;
}

body[data-audience="user"] .surface h5,
body[data-audience="user"] .surface h6 {
    color: var(--go-app-fg);
    font-family: var(--go-font-sans);
    font-weight: 650;
    letter-spacing: 0;
}

body[data-audience="user"] .workflow-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--gou-line);
}

body[data-audience="user"] .workflow-item:first-child {
    padding-top: 0;
}

body[data-audience="user"] .workflow-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

body[data-audience="user"] .workflow-item__main,
body[data-audience="user"] .workflow-item__identity {
    min-width: 0;
}

body[data-audience="user"] .workflow-item__header {
    display: flex;
    gap: 10px;
    align-items: start;
    justify-content: space-between;
}

body[data-audience="user"] .workflow-item__title {
    color: var(--gou-text-strong);
    font-weight: 650;
    letter-spacing: 0;
}

body[data-audience="user"] .intro-company-avatar .avatar-label__column {
    gap: 2px;
}

body[data-audience="user"] .intro-company-avatar .avatar-label__text {
    color: var(--gou-text-strong);
    font-weight: 650;
}

body[data-audience="user"] .intro-company-avatar .social-icons {
    margin-top: 2px;
    gap: 8px;
}

body[data-audience="user"] .intro-company-links {
    margin-top: 2px;
}

body[data-audience="user"] .intro-company-links.social-icons {
    gap: 8px;
}

body[data-audience="user"] .intro-company-avatar .social-icon-link,
body[data-audience="user"] .intro-company-links .social-icon-link {
    color: var(--gou-text-tertiary);
}

body[data-audience="user"] .intro-company-avatar .social-icon-link:hover,
body[data-audience="user"] .intro-company-links .social-icon-link:hover {
    color: var(--gou-text-secondary);
}

body[data-audience="user"] .workflow-item__subtitle,
body[data-audience="user"] .workflow-item__meta {
    margin-top: 2px;
    color: var(--gou-text-tertiary);
    font-size: var(--go-font-sm);
    line-height: 1.25rem;
}

body[data-audience="user"] .workflow-item__badges,
body[data-audience="user"] .workflow-item__actions,
body[data-audience="user"] .workflow-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

body[data-audience="user"] .activity-table-wrap {
    width: 100%;
    overflow-x: auto;
}

body[data-audience="user"] .activity-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

body[data-audience="user"] .activity-table th {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--gou-line);
    color: var(--gou-text-tertiary);
    font-size: var(--go-font-sm);
    font-weight: 500;
    text-align: left;
}

body[data-audience="user"] .activity-table th:first-child {
    width: 28%;
}

body[data-audience="user"] .activity-table th:last-child {
    width: 11rem;
}

body[data-audience="user"] .activity-table td {
    padding: 9px 0;
    border-bottom: 1px solid var(--gou-line);
    vertical-align: top;
}

body[data-audience="user"] .activity-table tbody tr:last-child td {
    border-bottom: 0;
}

body[data-audience="user"] .activity-table__event {
    padding-right: 16px;
}

body[data-audience="user"] .activity-table__title {
    color: var(--gou-text-strong);
    font-weight: 650;
}

body[data-audience="user"] .activity-table__count {
    display: inline-flex;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--gou-pill-bg);
    color: var(--gou-text-secondary);
    font-size: var(--go-font-xs);
    font-weight: 600;
    white-space: nowrap;
}

body[data-audience="user"] .activity-table__detail,
body[data-audience="user"] .activity-table__time {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
    line-height: 1.35;
}

body[data-audience="user"] .activity-table__detail {
    padding-right: 16px;
}

body[data-audience="user"] .activity-table__time {
    white-space: nowrap;
}

body[data-audience="user"] .activity-table__inline-detail {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

body[data-audience="user"] .activity-table__details {
    margin-top: 4px;
}

body[data-audience="user"] .activity-table__details > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
    font-weight: 650;
    cursor: pointer;
}

body[data-audience="user"] .activity-table__details > summary:hover {
    color: var(--gou-text-strong);
}

body[data-audience="user"] .activity-table__details-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    color: var(--gou-text-secondary);
}

body[data-audience="user"] .intro-route-options-table td {
    vertical-align: middle;
}

body[data-audience="user"] .intro-route-option-cell {
    min-width: 0;
}

body[data-audience="user"] .intro-route-option-details {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .intro-route-option-details summary {
    cursor: pointer;
    font-weight: 600;
}

body[data-audience="user"] .intro-route-option-actions,
body[data-audience="user"] .intro-ask-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

body[data-audience="user"] .intro-route-target-people {
    display: grid;
    gap: 10px;
}

body[data-audience="user"] .intro-route-target-person .avatar-label__text {
    font-weight: 600;
}

body[data-audience="user"] .intro-route-target-person--selectable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 220px;
}

body[data-audience="user"] .intro-route-target-role {
    flex: 0 0 auto;
}

body[data-audience="user"] .intro-route-target-more {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .intro-route-role-actions {
    display: grid;
    gap: 10px;
    justify-items: end;
}

body[data-audience="user"] .intro-route-role-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 32px;
}

body[data-audience="user"] .intro-route-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Route table zones: sequence (ordered ladder), candidates, resolved. */
body[data-audience="user"] .intro-zone + .intro-zone {
    margin-top: 20px;
}

body[data-audience="user"] .intro-zone__title {
    font-size: var(--go-font-sm);
    font-weight: 600;
    color: var(--gou-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

body[data-audience="user"] details.intro-zone--resolved > summary.intro-zone__title {
    cursor: pointer;
    list-style: revert;
}

body[data-audience="user"] .intro-seq-position {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--gou-text-secondary);
}

body[data-audience="user"] .intro-seq-action {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
}

body[data-audience="user"] .intro-seq-reorder {
    display: grid;
    gap: 2px;
    flex: 0 0 auto;
}

body[data-audience="user"] .intro-route-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

body[data-audience="user"] .intro-route-actions--candidate + .intro-route-actions--candidate {
    margin-top: 8px;
    border-top: 1px solid var(--gou-border, rgba(0, 0, 0, 0.08));
    padding-top: 8px;
}

/* Native <details> disclosures replace the always-on reason selects. */
body[data-audience="user"] .intro-route-disclosure > summary {
    cursor: pointer;
    list-style: none;
}

body[data-audience="user"] .intro-route-disclosure > summary::-webkit-details-marker {
    display: none;
}

body[data-audience="user"] .intro-route-disclosure__body {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

body[data-audience="user"] .intro-route-cooldown,
body[data-audience="user"] .intro-route-owner-hint {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
}

/* A direct route is owner-locked to its evidence teammate: the owner reads as static
   text (no picker), so style it like the surrounding secondary metadata. */
body[data-audience="user"] .intro-route-owner-fixed {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
}

/* Consolidated-ask builder: company boxes are native <details>. The collapsed
   summary rolls up the chosen person + strength; open, the person list below
   carries that detail, so the rollup hides (!important beats Bootstrap's
   .d-flex on the wrapper). */
body[data-audience="user"] .intro-request-company > summary {
    cursor: pointer;
    list-style: none;
}

body[data-audience="user"] .intro-request-company > summary::-webkit-details-marker {
    display: none;
}

body[data-audience="user"] .intro-request-company[open] > summary .intro-request-rollup {
    display: none !important;
}

body[data-audience="user"] .intro-request-company[open] > summary .intro-request-caret {
    transform: rotate(180deg);
}

/* The owner picker panel needs room for name + strength rows. */
body[data-audience="user"] .intro-request-owner__body {
    min-width: 22rem;
}

/* Provenance hover card: mirrors the main graph.one connection-info tooltip
   (LinkedIn / Known for / Last contacted / Met). Background and border come
   from .surface; this only positions and reveals it. focus-within keeps it
   keyboard-reachable. */
body[data-audience="user"] .intro-provenance {
    position: relative;
    display: inline-flex;
}

body[data-audience="user"] .intro-provenance__card {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    z-index: 40;
    min-width: 15rem;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}

body[data-audience="user"] .intro-provenance:hover .intro-provenance__card,
body[data-audience="user"] .intro-provenance:focus-within .intro-provenance__card {
    display: flex;
}

/* Candidate/resolved rows are grouped by introducer — one <tbody class="intro-route-group">
   per introducer. The <tbody> boundary lets us (a) draw a divider only BETWEEN groups, not
   within a group's sub-rows, and (b) highlight the whole group on hover, so the spanned
   introducer cell lights up together with whichever sub-row is hovered (a rowspan cell in a
   single <tbody> stays un-highlighted when a later sub-row is hovered). */
body[data-audience="user"] .intro-route-candidate-table td,
body[data-audience="user"] .intro-route-resolved-table td {
    border-bottom: none;
}

body[data-audience="user"] .intro-route-group + .intro-route-group > tr:first-child > td {
    border-top: 1px solid var(--go-border-light, rgba(0, 0, 0, 0.08));
}

/* Bootstrap 5.2+ makes <tbody> group dividers opt-in (.table-group-divider), so the per-
   group tbodies here get no automatic border — pin it to zero anyway so a Bootstrap bump
   can't reintroduce a stray line above each group (and the empty macro tbody). Our own 1px
   divider above handles the visible separation. */
body[data-audience="user"] .intro-route-candidate-table > tbody,
body[data-audience="user"] .intro-route-resolved-table > tbody {
    border-top: 0;
}

/* Hovering a sub-row highlights that row. Deliberately NOT `.intro-route-group:hover
   .intro-route-introducer-cell` — a `tbody:hover` descendant selector re-invalidates the
   whole group subtree on every hover change and makes large tables crawl. The group is
   kept legible statically (dividers between groups + the spanned introducer cell). */
body[data-audience="user"] .intro-route-option-row:hover > td {
    background: var(--gou-hover-tint);
}

body[data-audience="user"] .intro-route-introducer-cell {
    vertical-align: top;
}

body[data-audience="user"] .intro-evidence-trigger {
    padding-inline: 0;
}

body[data-audience="user"] .intro-evidence-modal-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

body[data-audience="user"] .intro-route-evidence-modal-table td:first-child {
    min-width: 520px;
}

body[data-audience="user"] .intro-ask-card {
    min-width: 0;
}

body[data-audience="user"] .intro-ask-card__header {
    align-items: start;
}

body[data-audience="user"] .intro-ask-card__status {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

body[data-audience="user"] .intro-ask-board {
    grid-auto-columns: minmax(320px, 1fr);
}

body[data-audience="user"] .intro-ask-board--closed {
    grid-auto-columns: minmax(280px, 360px);
}

body[data-audience="user"] .intro-ask-card__meta {
    margin-top: 8px;
    color: var(--gou-text-tertiary);
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .intro-ask-card__routes {
    display: grid;
    gap: 0;
    margin-top: 10px;
    border: 1px solid var(--gou-line);
    border-radius: 8px;
    overflow: hidden;
}

body[data-audience="user"] .intro-ask-card__route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 8px;
    border-bottom: 1px solid var(--gou-line);
}

body[data-audience="user"] .intro-ask-card__route:last-child {
    border-bottom: 0;
}

body[data-audience="user"] .intro-ask-card__route-outcome {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .intro-ask-card__draft {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--gou-line);
    border-radius: 8px;
    background: var(--go-surface-alt);
    color: var(--gou-text-secondary);
    padding: 8px;
    font-family: inherit;
    font-size: var(--go-font-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

body[data-audience="user"] .intro-ask-card__actions,
body[data-audience="user"] .intro-ask-card__outcomes {
    margin-top: 10px;
}

body[data-audience="user"] .intro-ask-card__outcomes {
    border-top: 1px solid var(--gou-line);
    padding-top: 10px;
}

body[data-audience="user"] .intro-route-people {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    flex-wrap: wrap;
}

body[data-audience="user"] .intro-route-person {
    display: grid;
    gap: 6px;
    min-width: 0;
}

body[data-audience="user"] .intro-route-person__label {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

body[data-audience="user"] .board-item-command {
    display: grid;
    gap: 12px;
    align-items: start;
    padding: 4px 0 10px;
}

body[data-audience="user"] .board-item-command__main {
    min-width: 0;
}

body[data-audience="user"] .board-item-command__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

body[data-audience="user"] .board-item-command__identity {
    display: block;
    min-width: 0;
}

body[data-audience="user"] .board-item-command__avatar .avatar-label__text {
    font-size: var(--go-font-xl);
    line-height: 1.2;
}

body[data-audience="user"] .board-item-command__badges {
    justify-content: flex-end;
    padding-top: 2px;
}

body[data-audience="user"] .board-item-command__route {
    max-width: 760px;
    margin-top: 14px;
}

body[data-audience="user"] .board-item-command__empty {
    margin-top: 12px;
}

body[data-audience="user"] .board-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
    gap: 18px;
    align-items: start;
}

body[data-audience="user"] .board-item-layout--compact {
    margin-top: 8px;
}

body[data-audience="user"] .board-item-layout__main,
body[data-audience="user"] .board-item-layout__rail {
    display: grid;
    gap: 16px;
    min-width: 0;
}

body[data-audience="user"] .board-item-layout__rail {
    position: sticky;
    top: 84px;
}

body[data-audience="user"] .board-item-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--gou-line);
}

body[data-audience="user"] .kanban-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    gap: 12px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 8px;
}

body[data-audience="user"] .kanban-lane {
    min-width: 0;
    border: 1px solid var(--gou-card-border);
    border-radius: 8px;
    background: var(--go-surface-alt);
    transition: border-color 120ms ease, background-color 120ms ease;
}

body[data-audience="user"] .kanban-lane--drop-target {
    border-color: var(--go-accent);
    background: color-mix(in srgb, var(--go-accent) 8%, var(--go-surface-alt));
}

body[data-audience="user"] .kanban-lane--drop-warning {
    border-color: var(--go-warning);
    background: color-mix(in srgb, var(--go-warning) 10%, var(--go-surface-alt));
}

body[data-audience="user"] .kanban-lane__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--gou-line);
}

body[data-audience="user"] .kanban-lane__title {
    margin: 0;
    color: var(--gou-text-strong);
    font-size: var(--go-font-base);
    font-weight: 700;
    letter-spacing: 0;
}

body[data-audience="user"] .kanban-lane__cards {
    display: grid;
    gap: 10px;
    padding: 10px;
}

body[data-audience="user"] .kanban-lane__empty {
    padding: 16px;
    border: 1px dashed var(--gou-line);
    border-radius: 8px;
    color: var(--gou-text-tertiary);
    text-align: center;
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .kanban-lane__more {
    display: block;
    padding: 0 12px 12px;
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
    text-decoration: none;
}

body[data-audience="user"] .kanban-saved-views {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body[data-audience="user"] .kanban-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--gou-card-border);
    border-radius: 8px;
    background: var(--go-surface);
    cursor: default;
    transition: opacity 120ms ease, transform 120ms ease, border-color 120ms ease;
}

body[data-audience="user"] .kanban-card[draggable="true"] {
    padding-left: 34px;
    cursor: grab;
}

body[data-audience="user"] .kanban-card[data-kanban-card-href] {
    cursor: pointer;
}

body[data-audience="user"] .kanban-card[draggable="true"][data-kanban-card-href] {
    cursor: grab;
}

body[data-audience="user"] .kanban-card[draggable="true"]:active {
    cursor: grabbing;
}

body[data-audience="user"] .kanban-card--dragging {
    opacity: 0.32;
    transform: scale(0.99);
    border-color: var(--go-accent);
}

body[data-audience="user"] .kanban-card__drag-handle {
    position: absolute;
    top: 10px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--gou-text-faint);
    cursor: grab;
}

body[data-audience="user"] .kanban-card__drag-handle:hover,
body[data-audience="user"] .kanban-card__drag-handle:focus-visible,
body[data-audience="user"] .kanban-card__drag-handle[aria-pressed="true"] {
    background: var(--gou-hover-tint);
    color: var(--gou-text-strong);
    outline: 0;
}

body[data-audience="user"] .kanban-card__drag-handle:active {
    cursor: grabbing;
}

body[data-audience="user"] .kanban-card__placeholder {
    border: 1px dashed var(--go-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--go-accent) 8%, transparent);
}

body[data-audience="user"] .kanban-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

body[data-audience="user"] .kanban-card__header .avatar {
    margin-top: 1px;
}

body[data-audience="user"] .kanban-card__header--target {
    display: block;
}

body[data-audience="user"] .kanban-card__target-avatar {
    width: 100%;
}

body[data-audience="user"] .kanban-card__target-avatar .avatar-label__text {
    font-weight: 700;
    line-height: 1.2;
}

body[data-audience="user"] .kanban-card__title {
    display: block;
    color: var(--gou-text-strong);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-audience="user"] .kanban-card__title:hover {
    text-decoration: underline;
}

body[data-audience="user"] .kanban-card__domain {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-audience="user"] .kanban-card__body {
    display: grid;
    gap: 9px;
}

body[data-audience="user"] .kanban-card__description {
    display: -webkit-box;
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
    line-height: 1.35;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-audience="user"] .kanban-card__facts {
    display: grid;
    gap: 3px;
    color: var(--gou-text-strong);
    font-size: var(--go-font-sm);
    font-weight: 650;
}

body[data-audience="user"] .kanban-card__route {
    padding: 7px 0 1px;
    border-top: 1px solid var(--gou-line);
}

body[data-audience="user"] .kanban-card__route-heading {
    margin-bottom: 7px;
    color: var(--gou-text-secondary);
    font-size: var(--go-font-xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

body[data-audience="user"] .kanban-card__route-stack {
    display: grid;
    gap: 10px;
}

body[data-audience="user"] .kanban-card__route-people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

body[data-audience="user"] .kanban-card__route-person {
    display: grid;
    gap: 5px;
    min-width: 0;
}

body[data-audience="user"] .kanban-card__route-person:only-child {
    grid-column: 1 / -1;
}

body[data-audience="user"] .kanban-card__route-label {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

body[data-audience="user"] .kanban-card__route .avatar-label {
    gap: 8px;
    min-width: 0;
}

body[data-audience="user"] .kanban-card__route .avatar-label__column {
    gap: 1px;
}

body[data-audience="user"] .kanban-card__route .social-icons {
    display: none;
}

body[data-audience="user"] .kanban-card__route .avatar-label__text {
    max-width: 8.5rem;
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .kanban-card__empty-route,
body[data-audience="user"] .kanban-card__route-more,
body[data-audience="user"] .kanban-card__reason,
body[data-audience="user"] .kanban-card__evidence {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .kanban-card__route-meta,
body[data-audience="user"] .kanban-card__labels,
body[data-audience="user"] .kanban-card__status-row,
body[data-audience="user"] .kanban-card__meta-row,
body[data-audience="user"] .kanban-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body[data-audience="user"] .kanban-card__labels {
    padding-top: 2px;
}

body[data-audience="user"] .kanban-card__entities {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

body[data-audience="user"] .kanban-card__entity {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body[data-audience="user"] .kanban-card__entity-role {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

body[data-audience="user"] .kanban-card__entity .avatar-label {
    gap: 8px;
    min-width: 0;
}

body[data-audience="user"] .kanban-card__entity .avatar-label__text {
    max-width: 13rem;
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .kanban-card__entity-more {
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .kanban-card__actions {
    padding-top: 2px;
    justify-content: flex-start;
}

body[data-audience="user"] .workflow-item__badges,
body[data-audience="user"] .workflow-item__actions {
    justify-content: flex-end;
}

body[data-audience="user"] .workflow-item__body {
    margin-top: 8px;
}

body[data-audience="user"] .coverage-target-row > td,
body[data-audience="user"] .coverage-review-row > td {
    text-align: left;
}

body[data-audience="user"] .coverage-review-details {
    margin-top: -1px;
}

body[data-audience="user"] .coverage-review-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
    font-weight: 650;
    letter-spacing: 0;
    cursor: pointer;
}

body[data-audience="user"] .coverage-review-summary::before {
    content: ">";
    color: var(--gou-text-tertiary);
    font-size: 0.75rem;
}

body[data-audience="user"] .coverage-review-details[open] .coverage-review-summary::before {
    content: "v";
}

body[data-audience="user"] .coverage-review-summary:hover {
    color: var(--gou-text-strong);
}

body[data-audience="user"] .coverage-review-panel {
    display: grid;
    gap: 16px;
    padding: 12px 0 4px;
}

@media (max-width: 767.98px) {
    body[data-audience="user"] .workflow-item {
        grid-template-columns: 1fr;
    }

    body[data-audience="user"] .workflow-item__header {
        flex-direction: column;
    }

    body[data-audience="user"] .workflow-item__actions {
        justify-content: flex-start;
    }
}

body[data-audience="user"] .btn,
body[data-audience="user"] .user-chip {
    min-height: 32px;
    border-radius: 6px;
    box-shadow: none;
    font-size: var(--go-font-base);
    font-weight: 500;
    line-height: 1.25rem;
}

body[data-audience="user"] .btn--sm {
    min-height: 28px;
    padding-inline: 9px;
    font-size: var(--go-font-sm);
}

body[data-audience="user"] .btn--icon.btn--sm {
    width: 28px;
    height: 28px;
}

body[data-audience="user"] .btn--primary {
    background: var(--go-app-primary);
    border-color: var(--go-app-primary);
    color: var(--go-app-primary-fg);
}

body[data-audience="user"] .btn--primary:hover {
    background: var(--gou-neutral-strong);
    border-color: var(--gou-neutral-strong);
    color: var(--go-app-primary-fg);
}

body[data-audience="user"] .btn--outline {
    background: var(--gou-control-fill);
    border-color: var(--gou-control-border);
    color: var(--go-iris);
}

body[data-audience="user"] .btn--outline:hover {
    background: var(--gou-control-fill-hover);
    border-color: var(--gou-control-border);
    color: var(--go-iris-dark);
}

body[data-audience="user"] .btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--go-iris);
}

body[data-audience="user"] .btn--ghost:hover {
    background: var(--gou-ghost-hover);
    color: var(--go-iris-dark);
}

body[data-audience="user"] .badge,
body[data-audience="user"] .pill,
body[data-audience="user"] .chip {
    border-color: var(--gou-line);
    border-radius: 999px;
    background: var(--gou-fill);
    color: var(--gou-text-secondary);
    font-size: var(--go-font-sm);
    font-weight: 500;
    line-height: 1.25rem;
}

body[data-audience="user"] .badge--success,
body[data-audience="user"] .pill--success {
    background: var(--gou-success-bg);
    color: var(--go-success);
}

body[data-audience="user"] .badge--danger,
body[data-audience="user"] .pill--danger {
    background: var(--gou-danger-bg);
    color: var(--gou-danger-text);
}

body[data-audience="user"] .badge--warning,
body[data-audience="user"] .pill--warning {
    background: var(--gou-warning-bg);
    color: var(--go-warning);
}

/* Summary chips reuse the badge tone treatment (darker text + component bg) so
   their text clears WCAG AA — the generic --go-*-surface tokens did not. Active
   is re-asserted LAST so it still wins over tone at equal specificity. */
body[data-audience="user"] .summary-chip--success {
    background: var(--gou-success-bg);
    color: var(--go-success);
}

body[data-audience="user"] .summary-chip--danger {
    background: var(--gou-danger-bg);
    color: var(--gou-danger-text);
}

body[data-audience="user"] .summary-chip--warning {
    background: var(--gou-warning-bg);
    color: var(--go-warning);
}

body[data-audience="user"] .summary-chip--active {
    border-color: var(--go-accent-dark);
    background: var(--go-accent-muted);
    color: var(--go-accent-dark);
}

body[data-audience="user"] .stat {
    gap: 0;
}

body[data-audience="user"] .stat__value {
    color: var(--go-app-fg);
    font-family: var(--go-font-sans);
    font-size: var(--go-font-lg);
    font-weight: 600;
    letter-spacing: -0.0033em;
    line-height: 1.75rem;
}

body[data-audience="user"] .table-shell {
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-audience="user"] .surface > .table-shell {
    width: calc(100% + 28px);
    margin-inline: -14px;
}

body[data-audience="user"] .table-shell::before,
body[data-audience="user"] .table-shell::after {
    display: none;
}

body[data-audience="user"] .table {
    --bs-table-bg: var(--go-surface);
    --bs-table-color: var(--go-app-fg);
    --bs-table-striped-bg: var(--go-surface);
    --bs-table-hover-bg: var(--gou-fill-translucent);
    --bs-table-hover-color: var(--go-app-fg);
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 0;
    font-size: var(--go-font-base);
    letter-spacing: 0.0048em;
    line-height: 1.25rem;
}

body[data-audience="user"] .table > :not(caption) > * > * {
    padding: 16px;
    border-bottom-color: var(--gou-fill);
}

body[data-audience="user"] .table-dense > :not(caption) > * > * {
    padding: 7px 12px;
}

body[data-audience="user"] .table thead {
    position: sticky;
    top: 0;
    z-index: var(--go-z-table);
    background: var(--go-surface);
    border-bottom: 1px solid var(--gou-line);
}

body[data-audience="user"] .table thead th {
    height: 36px;
    padding: 8px 16px;
    border-bottom-color: var(--gou-line);
    background: var(--go-surface);
    color: var(--gou-text-tertiary);
    font-size: var(--go-font-sm);
    font-weight: 400;
    letter-spacing: 0.0115em;
    line-height: 1.25rem;
    text-transform: none;
    vertical-align: middle;
}

body[data-audience="user"] .table-dense thead th {
    padding: 7px 12px;
}

body[data-audience="user"] .table tbody td {
    color: var(--gou-text-strong);
    vertical-align: middle;
}

body[data-audience="user"] .table tbody tr,
body[data-audience="user"] .table tbody tr:nth-child(even) {
    background: var(--go-surface);
}

body[data-audience="user"] .table tbody tr:hover {
    background: var(--gou-fill-translucent);
}

body[data-audience="user"] .table tbody tr:last-child td {
    border-bottom: 0;
}

body[data-audience="user"] .table tbody tr:hover td {
    background: transparent;
}

body[data-audience="user"] .form-label {
    color: var(--go-iris);
    font-size: var(--go-font-base);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5rem;
}

body[data-audience="user"] fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

body[data-audience="user"] legend {
    margin-bottom: 8px;
    color: var(--gou-text-strong);
    font-size: var(--go-font-base);
    font-weight: 650;
    line-height: 1.5rem;
}

body[data-audience="user"] input,
body[data-audience="user"] textarea,
body[data-audience="user"] select,
body[data-audience="user"] button {
    font-family: var(--go-font-sans);
}

body[data-audience="user"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.form-control),
body[data-audience="user"] textarea:not(.form-control),
body[data-audience="user"] select:not(.form-select) {
    min-height: 40px;
    border: 1px solid var(--go-app-input);
    border-radius: 6px;
    background: var(--go-surface);
    color: var(--go-app-fg);
    font-size: var(--go-font-base);
    letter-spacing: 0.0048em;
    line-height: 1.25rem;
    box-shadow: none;
}

body[data-audience="user"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.form-control):focus,
body[data-audience="user"] textarea:not(.form-control):focus,
body[data-audience="user"] select:not(.form-select):focus {
    border-color: var(--go-app-ring);
    outline: 0;
    box-shadow: var(--go-ring);
}

body[data-audience="user"] .form-control,
body[data-audience="user"] .form-select,
body[data-audience="user"] .multi-select__trigger {
    min-height: 40px;
    border-color: var(--go-app-input);
    border-radius: 6px;
    background: var(--gou-control-fill);
    box-shadow: none;
    color: var(--go-app-fg);
    font-size: var(--go-font-base);
    letter-spacing: 0.0048em;
    line-height: 1.25rem;
}

body[data-audience="user"] .form-control-sm,
body[data-audience="user"] .form-select-sm {
    min-height: 36px;
    padding: 8px 12px;
}

body[data-audience="user"] .form-control-lg {
    min-height: 44px;
    padding: 10px 12px;
}

body[data-audience="user"] .form-control::placeholder {
    color: var(--gou-text-tertiary);
    opacity: 1;
}

body[data-audience="user"] .form-control:focus,
body[data-audience="user"] .form-select:focus,
body[data-audience="user"] .multi-select__trigger:focus {
    border-color: var(--go-app-ring);
    box-shadow: var(--go-ring);
}

body[data-audience="user"] .form-control:hover:not(:focus):not(:disabled),
body[data-audience="user"] .form-select:hover:not(:focus):not(:disabled),
body[data-audience="user"] .multi-select__trigger:hover {
    border-color: var(--go-hover-border);
}

body[data-audience="user"] .form-control:disabled,
body[data-audience="user"] .form-select:disabled,
body[data-audience="user"] .form-control[readonly] {
    background: var(--go-surface-muted);
    color: var(--go-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

body[data-audience="user"] textarea.form-control {
    min-height: 80px;
    max-height: 16rem;
    resize: vertical;
    line-height: 1.5rem;
}

body[data-audience="user"] .form-control[type="file"] {
    min-height: 40px;
    padding: 0;
    overflow: hidden;
}

body[data-audience="user"] .form-control::file-selector-button {
    height: 100%;
    margin: 0 12px 0 0;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid var(--gou-line);
    background: var(--gou-fill-soft);
    color: var(--gou-text-strong);
    font-size: var(--go-font-sm);
    font-weight: 500;
    line-height: 1.25rem;
}

body[data-audience="user"] .form-text,
body[data-audience="user"] .valid-feedback,
body[data-audience="user"] .invalid-feedback {
    font-size: var(--go-font-sm);
    letter-spacing: 0.0115em;
    line-height: 1.25rem;
}

body[data-audience="user"] .form-text {
    color: var(--go-text-muted);
}

body[data-audience="user"] .form-control.is-valid {
    border-color: var(--gou-success-edge);
    box-shadow: none;
}

body[data-audience="user"] .form-control.is-valid:focus {
    border-color: var(--gou-success-edge);
    box-shadow: 0 0 0 2px var(--gou-success-glow);
}

body[data-audience="user"] .form-control.is-invalid {
    border-color: var(--gou-danger-edge);
    box-shadow: none;
}

body[data-audience="user"] .form-control.is-invalid:focus {
    border-color: var(--gou-danger-edge);
    box-shadow: 0 0 0 2px var(--gou-danger-glow);
}

body[data-audience="user"] .form-check {
    min-height: 1.25rem;
}

body[data-audience="user"] .form-check-label {
    color: var(--gou-text-strong);
    font-size: var(--go-font-base);
    line-height: 1.25rem;
}

body[data-audience="user"] .form-check:not(.form-switch) .form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    border: 1px solid var(--gou-edge-strong);
    background-color: var(--gou-control-fill);
    box-shadow: none;
}

body[data-audience="user"] .form-check:not(.form-switch) .form-check-input:hover {
    border-color: var(--gou-edge-strongest);
}

body[data-audience="user"] .form-check:not(.form-switch) .form-check-input:focus {
    border-color: var(--go-app-ring);
    box-shadow: 0 0 0 2px var(--gou-focus-ring-soft);
}

body[data-audience="user"] .form-check:not(.form-switch) .form-check-input:checked {
    border-color: var(--gou-text-strong);
    background-color: var(--gou-text-strong);
}

body[data-audience="user"] .form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
    background-image: radial-gradient(circle, var(--go-surface) 0 34%, transparent 38%);
}

body[data-audience="user"] .form-check:not(.form-switch) .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

body[data-audience="user"] .form-switch .form-check-input {
    width: 32px;
    height: 18px;
    border: 0;
    background-color: var(--gou-line);
    box-shadow: none;
}

body[data-audience="user"] .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--gou-focus-ring-soft);
}

body[data-audience="user"] .form-switch .form-check-input:checked {
    background-color: var(--gou-text-strong);
}

body[data-audience="user"] .search-dropdown__results,
body[data-audience="user"] .dropdown-menu {
    border-color: var(--gou-card-border);
    border-radius: 8px;
    background: var(--go-surface);
    box-shadow: var(--go-shadow-md);
}

body[data-audience="user"] .dropdown-item {
    border-radius: 6px;
    color: var(--gou-text-strong);
    font-size: var(--go-font-base);
    letter-spacing: 0.0048em;
    line-height: 1.25rem;
}

body[data-audience="user"] .dropdown-item:hover,
body[data-audience="user"] .dropdown-item:focus {
    background: var(--gou-fill-heavy);
    color: var(--gou-text-strong);
}

body[data-audience="user"] .dropdown-divider {
    background: var(--gou-line);
}

body[data-audience="user"] .alert {
    border-radius: 8px;
    box-shadow: none;
    font-size: var(--go-font-base);
    letter-spacing: 0.0048em;
    line-height: 1.5rem;
}

body[data-audience="user"] .alert--success {
    background: var(--gou-success-bg);
    border-color: var(--gou-success-line);
    color: var(--go-success);
}

body[data-audience="user"] .alert--danger {
    background: var(--gou-danger-bg);
    border-color: var(--gou-danger-line);
    color: var(--gou-danger-text);
}

body[data-audience="user"] .alert--warning {
    background: var(--gou-warning-bg);
    border-color: var(--gou-warning-line);
    color: var(--go-warning);
}

body[data-audience="user"] .alert--info {
    background: var(--gou-fill-soft);
    border-color: var(--gou-line);
    color: var(--go-iris);
}

body[data-audience="user"] .tabs {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px;
    border: 0;
    border-radius: 8px;
    background: var(--gou-fill);
}

body[data-audience="user"] .tab {
    border: 0;
    border-radius: 6px;
    color: var(--gou-text-secondary);
    font-size: var(--go-font-base);
    font-weight: 500;
}

body[data-audience="user"] .tab::after {
    display: none;
}

body[data-audience="user"] .tab:hover {
    color: var(--gou-text-strong);
}

body[data-audience="user"] .tab.active {
    background: var(--go-surface);
    color: var(--gou-text-strong);
    box-shadow: var(--go-shadow-xs);
}

body[data-audience="user"] .feed-layout {
    grid-template-columns: minmax(248px, 280px) minmax(0, 1fr);
    align-items: start;
}

body[data-audience="user"] .feed-sidebar .surface {
    padding: 12px;
    background: var(--go-surface-alt);
}

body[data-audience="user"] .feed-sidebar h5 {
    font-size: var(--go-font-base);
    line-height: 1.5rem;
}

body[data-audience="user"] .event-type-icon,
body[data-audience="user"] .feed-item__icon {
    border-radius: 8px;
}

body[data-audience="user"] .feed-list {
    gap: 8px;
}

body[data-audience="user"] .feed-item {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    border-left-width: 1px;
    border-color: var(--go-app-border);
    border-radius: 8px;
    background: var(--go-surface);
    box-shadow: none;
}

body[data-audience="user"] .feed-item:hover,
body[data-audience="user"] .feed-item:focus-within {
    border-color: var(--go-hover-border);
    box-shadow: var(--go-shadow-sm);
}

body[data-audience="user"] .feed-item--unread {
    border-left-color: var(--go-app-accent);
}

body[data-audience="user"] .feed-item__type {
    color: var(--go-text-muted);
    font-size: var(--go-font-sm);
    font-weight: 500;
    letter-spacing: 0.0115em;
    line-height: 1.25rem;
    text-transform: none;
}

body[data-audience="user"] .feed-item__desc {
    color: var(--gou-neutral-strong);
    font-size: var(--go-font-base);
    line-height: 1.5rem;
}

body[data-audience="user"] .feed-item__person,
body[data-audience="user"] .feed-item__org {
    color: var(--gou-text-strong);
    font-weight: 650;
}

body[data-audience="user"] .feed-item__org {
    background: transparent;
}

body[data-audience="user"] .feed-item__actions {
    background: var(--go-surface-alt);
}

body[data-audience="user"] .empty-state {
    padding: 28px;
    color: var(--go-text-muted);
}

@media (max-width: 992px) {
    body[data-audience="user"] .app-shell,
    body[data-audience="user"] .feed-layout {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   User page layout primitives

   Centralizes "how wide is this page and how is it composed" so individual
   page templates don't reinvent containers.

   Variants:
     .user-page--standard  full available content width. Default.
     .user-page--narrow    ~720px centered. Read-heavy pages (API console).
     .user-page--split     2-col: ~340px sticky sidebar + flex main.
                           Collapses to single column under 992px.
   ============================================================================= */

body[data-audience="user"] .user-page {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xl);
}

body[data-audience="user"] .user-page--standard {
    max-width: none;
}

body[data-audience="user"] .user-page--narrow {
    max-width: 720px;
}

body[data-audience="user"] .user-page--split {
    max-width: 1320px;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--go-space-xl);
    align-items: start;
}

body[data-audience="user"] .user-page__sidebar {
    position: sticky;
    top: var(--go-space-lg);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--go-space-lg);
    min-width: 0;
}

body[data-audience="user"] .user-page__main {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xl);
    min-width: 0;
}

@media (max-width: 992px) {
    body[data-audience="user"] .user-page--split {
        grid-template-columns: 1fr;
    }
    body[data-audience="user"] .user-page__sidebar {
        position: static;
    }
}

/* Page header — used at the top of standard/narrow pages */
body[data-audience="user"] .user-page__header {
    margin-bottom: var(--go-space-sm);
}

body[data-audience="user"] .user-page__header h1 {
    font-size: var(--go-font-2xl);
    font-weight: 700;
    margin: 0 0 var(--go-space-xs) 0;
}

body[data-audience="user"] .user-page__header p {
    color: var(--go-text-muted);
    margin: 0;
}

body[data-audience="user"] .first-party-app-header {
    align-items: center;
    display: flex;
    gap: var(--go-space-md);
    justify-content: space-between;
    margin-bottom: var(--go-space-md);
}

body[data-audience="user"] .first-party-app-header__identity,
body[data-audience="user"] .first-party-app-header__actions {
    align-items: center;
    display: flex;
    gap: var(--go-space-sm);
}

body[data-audience="user"] .first-party-app-header__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

body[data-audience="user"] .first-party-app-header__logo {
    border-radius: 8px;
    flex: 0 0 auto;
    height: 40px;
    object-fit: contain;
    width: 40px;
}

body[data-audience="user"] .first-party-app-header__title {
    align-items: center;
    color: var(--go-text);
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 650;
    gap: var(--go-space-xs);
    line-height: 1.2;
}

body[data-audience="user"] .first-party-app-header p {
    color: var(--go-text-muted);
    margin: var(--go-space-xs) 0 0;
}

body[data-audience="user"] .first-party-app-nav {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-sm);
    align-items: stretch;
    margin-bottom: var(--go-space-md);
}

body[data-audience="user"] .first-party-app-nav__brand-row,
body[data-audience="user"] .first-party-app-nav__bar {
    align-items: center;
    display: flex;
    gap: var(--go-space-sm);
}

body[data-audience="user"] .first-party-app-nav__brand-row {
    justify-content: flex-start;
}

body[data-audience="user"] .first-party-app-nav__bar {
    flex-wrap: wrap;
    justify-content: space-between;
}

body[data-audience="user"] .first-party-app-nav__primary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--go-space-sm);
}

body[data-audience="user"] .first-party-app-nav__brand {
    align-items: center;
    color: var(--go-text);
    display: inline-flex;
    font-size: var(--go-font-lg);
    font-weight: 750;
    gap: var(--go-space-sm);
    line-height: 1;
    white-space: nowrap;
}

body[data-audience="user"] .first-party-app-nav__brand-logo {
    border-radius: 8px;
    height: 36px;
    object-fit: contain;
    width: 36px;
}

body[data-audience="user"] .first-party-app-nav__tabs {
    margin-bottom: 0;
}

body[data-audience="user"] .first-party-app-nav__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--go-space-xs);
    justify-content: flex-end;
}

body[data-audience="user"] .first-party-app-page-header {
    margin-top: var(--go-space-md);
    margin-bottom: var(--go-space-md);
}

body[data-audience="user"] .unipile-setup {
    padding: 0;
}

body[data-audience="user"] .unipile-setup__progress {
    background: var(--go-surface-alt);
}

body[data-audience="user"] .unipile-setup__badge,
body[data-audience="user"] .unipile-setup__hint {
    border-radius: 999px;
    background: var(--go-surface-alt);
}

body[data-audience="user"] .unipile-setup--success .unipile-setup__badge {
    background: var(--go-success-surface);
    border-color: var(--go-success-ring);
    color: var(--go-success-dark);
}

body[data-audience="user"] .unipile-setup--warning .unipile-setup__badge {
    background: var(--go-warning-surface);
    border-color: var(--go-warning-ring);
    color: var(--go-warning-dark);
}

body[data-audience="user"] .unipile-setup__copy h2 {
    font-family: var(--go-font-sans);
    letter-spacing: 0;
}

/* =============================================================================
   Responsive grid variant

   `.grid.cols-2` already auto-fits at 260px min in ui.css. `.cols-medium`
   matches the same pattern at a smaller min-width for tighter card strips.
   ============================================================================= */

body[data-audience="user"] .grid.cols-medium {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* =============================================================================
   Compact dashboard sidebar widgets — used by /ui/ split layout
   ============================================================================= */

body[data-audience="user"] .dash-widget {
    background: var(--go-surface);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    padding: var(--go-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--go-transition);
}

body[data-audience="user"] a.dash-widget:hover {
    border-color: var(--go-accent);
}

body[data-audience="user"] .dash-widget__label {
    font-size: var(--go-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--go-text-muted);
    font-weight: 600;
}

body[data-audience="user"] .dash-widget__value {
    font-size: var(--go-font-xl);
    font-weight: 700;
    color: var(--go-text);
    word-break: break-word;
}

body[data-audience="user"] .dash-widget__value--mono {
    font-family: var(--go-font-mono, monospace);
    font-size: var(--go-font-base);
}

body[data-audience="user"] .dash-widget__meta {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
}

body[data-audience="user"] .dash-widget__progress {
    height: 6px;
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-full);
    overflow: hidden;
    margin-top: var(--go-space-xs);
}

body[data-audience="user"] .dash-widget__progress-bar {
    height: 100%;
    background: var(--go-accent);
    border-radius: var(--go-radius-full);
}

/* =============================================================================
   "Try the API" hero curl block on the dashboard
   ============================================================================= */

body[data-audience="user"] .dash-curl {
    background: var(--go-surface-alt);
    border: 1px solid var(--go-border);
    border-radius: var(--go-radius);
    padding: var(--go-space-lg);
}

body[data-audience="user"] .dash-curl__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--go-space-sm);
}

body[data-audience="user"] .dash-curl__title {
    font-size: var(--go-font-sm);
    color: var(--go-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

body[data-audience="user"] .dash-curl pre {
    margin: 0;
    background: transparent;
    color: var(--go-text);
    font-size: var(--go-font-sm);
    overflow-x: auto;
    white-space: pre;
}

/* =============================================================================
   Inner surface — flat sub-card inside a section. No shadow, lighter border.
   Used by source-status cards and API endpoint cards.
   ============================================================================= */
body[data-audience="user"] .surface--inner {
    box-shadow: none;
    border-color: var(--go-border-light);
    background: var(--go-surface-alt);
    padding: var(--go-space-lg);
    border-radius: var(--go-radius);
}

/* =============================================================================
   API endpoint — inline single-shape marker (method + path).
   Method coloring comes from Bootstrap text utility classes set by the macro.
   ============================================================================= */

body[data-audience="user"] .api-endpoint {
    display: inline-flex;
    align-items: baseline;
    gap: var(--go-space-xs);
    padding: 0.15em 0.5em;
    background: var(--go-surface-muted);
    border-radius: var(--go-radius-xs);
    font-family: var(--go-font-mono, ui-monospace, monospace);
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--go-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

body[data-audience="user"] a.api-endpoint:hover {
    background: var(--go-surface-alt);
    color: var(--go-text);
}

/* =============================================================================
   Connected app detail
   ============================================================================= */

body[data-audience="user"] .connected-app-detail__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--go-space-lg);
}

body[data-audience="user"] .connected-app-detail__app {
    display: flex;
    align-items: flex-start;
    gap: var(--go-space-md);
    min-width: 0;
}

body[data-audience="user"] .connected-app-detail__title {
    margin: 0;
    color: var(--go-app-fg);
    font-size: var(--go-font-2xl);
    font-weight: 650;
    line-height: 1.2;
}

body[data-audience="user"] .connected-app-detail__subtitle {
    max-width: 62ch;
    margin: var(--go-space-xs) 0 0;
    color: var(--go-text-muted);
}

body[data-audience="user"] .connected-app-detail__meta,
body[data-audience="user"] .connected-app-detail__hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--go-space-xs);
}

body[data-audience="user"] .connected-app-detail__meta {
    margin-top: var(--go-space-sm);
}

body[data-audience="user"] .connected-app-detail__hero-actions {
    justify-content: flex-end;
    flex-shrink: 0;
}

body[data-audience="user"] .connected-app-detail__workspace {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr);
    gap: var(--go-space-lg);
    align-items: center;
}

body[data-audience="user"] .connected-app-detail__section-title {
    display: flex;
    align-items: center;
    gap: var(--go-space-sm);
    margin: 0 0 var(--go-space-xs);
    color: var(--go-app-fg);
    font-size: var(--go-font-lg);
    font-weight: 650;
    line-height: 1.35;
}

body[data-audience="user"] .connected-app-detail__section-title i {
    color: var(--go-text-muted);
}

body[data-audience="user"] .connected-app-detail__workspace-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--go-space-sm);
}

body[data-audience="user"] .connected-app-detail__workspace-link {
    display: flex;
    align-items: center;
    gap: var(--go-space-xs);
    min-height: 44px;
    padding: var(--go-space-sm) var(--go-space-md);
    border: 1px solid var(--go-app-border);
    border-radius: var(--go-radius);
    color: var(--go-app-fg);
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

body[data-audience="user"] .connected-app-detail__workspace-link:hover {
    background: var(--go-app-secondary);
    color: var(--go-app-fg);
}

body[data-audience="user"] .connected-app-detail__workspace-link i {
    color: var(--go-text-muted);
}

body[data-audience="user"] .connected-app-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--go-space-lg);
    align-items: start;
}

body[data-audience="user"] .connected-app-detail__main,
body[data-audience="user"] .connected-app-detail__rail,
body[data-audience="user"] .connected-app-detail__scope-list,
body[data-audience="user"] .connected-app-detail__ca-form,
body[data-audience="user"] .connected-app-detail__resource-picker {
    display: flex;
    flex-direction: column;
}

body[data-audience="user"] .connected-app-detail__scope-list {
    gap: 0;
}

body[data-audience="user"] .connected-app-detail__scope-row {
    padding-block: var(--go-space-md);
    border-top: 1px solid var(--go-border-light);
}

body[data-audience="user"] .connected-app-detail__scope-row:first-child {
    padding-top: 0;
    border-top: 0;
}

body[data-audience="user"] .connected-app-detail__scope-row:last-child {
    padding-bottom: 0;
}

body[data-audience="user"] .connected-app-detail__scope-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--go-space-md);
}

body[data-audience="user"] .connected-app-detail__resource-picker {
    gap: var(--go-space-sm);
    margin-top: var(--go-space-md);
    padding: var(--go-space-md);
    border: 1px solid var(--go-border-light);
    border-radius: var(--go-radius);
    background: var(--go-surface-alt);
}

body[data-audience="user"] .connected-app-detail__radio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--go-space-sm);
}

body[data-audience="user"] .connected-app-detail__option-list {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-xs);
}

body[data-audience="user"] .connected-app-detail__option-list--columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--go-space-xs) var(--go-space-md);
}

body[data-audience="user"] .connected-app-detail__ca-form {
    gap: var(--go-space-md);
}

body[data-audience="user"] .connected-app-detail__event-list {
    display: flex;
    flex-direction: column;
    gap: var(--go-space-sm);
    margin: 0 0 var(--go-space-md);
    padding: 0;
    list-style: none;
}

body[data-audience="user"] .connected-app-detail__event {
    padding-bottom: var(--go-space-sm);
    border-bottom: 1px solid var(--go-border-light);
}

body[data-audience="user"] .connected-app-detail__event:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

body[data-audience="user"] .connected-app-detail__event code + code {
    margin-left: var(--go-space-xs);
}

@media (max-width: 1100px) {
    body[data-audience="user"] .connected-app-detail__workspace,
    body[data-audience="user"] .connected-app-detail__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body[data-audience="user"] .connected-app-detail__hero,
    body[data-audience="user"] .connected-app-detail__scope-head {
        flex-direction: column;
    }

    body[data-audience="user"] .connected-app-detail__hero-actions {
        justify-content: flex-start;
    }

    body[data-audience="user"] .connected-app-detail__workspace-links,
    body[data-audience="user"] .connected-app-detail__radio-grid,
    body[data-audience="user"] .connected-app-detail__option-list--columns {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Dark theme — canonical .dark palette from the graph-one product app
   (styles/globals.css). Token-only: component rules above resolve through
   these. data-bs-theme is set on <html> by theme.js.
   ============================================================================= */
[data-bs-theme=dark] body[data-audience="user"] {
    color-scheme: dark;

    --go-app-bg: #0a0a0a;
    --go-app-fg: #fafafa;
    --go-app-primary: #fafafa;
    --go-app-primary-fg: #171717;
    --go-app-secondary: #262626;
    --go-app-muted: #262626;
    --go-app-muted-fg: #a3a3a3;
    --go-app-border: #262626;
    --go-app-input: #262626;
    --go-app-ring: #d4d4d4;
    --go-app-sidebar: #0a0a0a;
    --go-app-sidebar-accent: #262626;
    --go-app-accent: #fc4c00;

    --go-surface: #0a0a0a;
    --go-border-light: #1f1f1f;
    --go-accent-hover: #ff7147;
    --go-accent-dark: #ffa78d;
    --go-accent-soft: #2d1100;
    --go-accent-muted: rgb(252 76 0 / 0.12);
    --go-iris: #d4d4d4;
    --go-iris-dark: #fafafa;
    --go-iris-soft: #262626;
    --go-iris-muted: rgb(212 212 212 / 0.08);

    --go-success: #34d399;
    --go-warning: #fbbf24;
    --go-danger: #f87171;
    --go-muted: #737373;

    --go-shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.07);
    --go-shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.07), 0 1px 2px 0 rgb(0 0 0 / 0.45);
    --go-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 1px 2px -1px rgb(0 0 0 / 0.5), 0 1px 3px 0 rgb(0 0 0 / 0.5);
    --go-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.09);
    --go-hover-border: #404040;
    --go-hover-bg: rgb(163 163 163 / 0.10);

    --bs-link-color: #d4d4d4;
    --bs-link-hover-color: #fafafa;

    --gou-text-strong: #fafafa;
    --gou-text-secondary: #d4d4d4;
    --gou-text-tertiary: #a3a3a3;
    --gou-text-faint: #737373;
    --gou-line: #262626;
    --gou-line-faint: rgb(38 38 38 / 0.6);
    --gou-fill: #1f1f1f;
    --gou-fill-soft: #171717;
    --gou-fill-translucent: rgb(38 38 38 / 0.5);
    --gou-fill-heavy: rgb(38 38 38 / 0.8);
    --gou-neutral-strong: #d4d4d4;
    --gou-hover-tint: rgb(163 163 163 / 0.12);
    --gou-surface-glass: rgb(10 10 10 / 0.86);
    --gou-focus-ring: rgb(212 212 212 / 0.45);
    --gou-focus-ring-soft: rgb(212 212 212 / 0.3);
    --gou-edge: rgb(250 250 250 / 0.18);
    --gou-edge-shadow: rgb(250 250 250 / 0.10);
    --gou-edge-strong: rgb(250 250 250 / 0.35);
    --gou-edge-strongest: rgb(250 250 250 / 0.6);
    --gou-success-bg: rgb(16 185 129 / 0.12);
    --gou-success-line: rgb(16 185 129 / 0.35);
    --gou-success-edge: #10b981;
    --gou-success-glow: rgb(16 185 129 / 0.25);
    --gou-danger-bg: rgb(239 68 68 / 0.12);
    --gou-danger-line: rgb(239 68 68 / 0.35);
    --gou-danger-text: #f87171;
    --gou-danger-edge: #ef4444;
    --gou-danger-glow: rgb(239 68 68 / 0.25);
    --gou-warning-bg: rgb(245 158 11 / 0.12);
    --gou-warning-line: rgb(245 158 11 / 0.35);
    --gou-control-border: #262626;
    --gou-control-fill: rgb(38 38 38 / 0.3);
    --gou-control-fill-hover: rgb(38 38 38 / 0.5);
    --gou-ghost-hover: rgb(38 38 38 / 0.5);
    --gou-card-border: rgb(250 250 250 / 0.1);
}