/* ============================================================
   NEAI: Not Enough AI
   Design system
   ============================================================ */

/* ---------- tokens ---------- */
/* The NEAI theme is the default. Bare :root remains the fallback and is
   identical to [data-theme="neai"]. Future themes only override token values
   under their own data-theme attribute; page logic stays theme-agnostic. */
:root,
[data-theme="neai"] {
    --bg: #0a0e14;
    --bg-soft: #0d1220;
    --surface: #111724;
    --surface-2: #161e2e;
    --surface-3: #1c2638;
    --border: #1e2837;
    --border-strong: #2b3a52;

    --text: #e6edf3;
    --text-muted: #93a1b5;
    --text-faint: #7a8ba1;

    --accent: #22d3ee;
    --accent-2: #a78bfa;
    --accent-dim: rgba(34, 211, 238, 0.12);
    --accent-soft: rgba(34, 211, 238, 0.08);
    --accent-hover: #7fe6f8;
    --on-accent: #08121a;

    --green: #34d399;
    --amber: #fbbf24;
    --red: #f87171;
    --gray: #7b8aa0;
    --purple: #c084fc;
    --orange: #fb923c;
    --brown: #c9a35f;

    --green-soft: rgba(52, 211, 153, 0.12);
    --amber-soft: rgba(251, 191, 36, 0.12);
    --red-soft: rgba(248, 113, 113, 0.12);
    --purple-soft: rgba(192, 132, 252, 0.12);
    --orange-soft: rgba(251, 146, 60, 0.12);
    --brown-soft: rgba(201, 163, 95, 0.14);

    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --maxw: 1080px;

    --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
    --focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--accent);
    text-decoration: none;
}

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

/* faint grid backdrop used on hero/sections */
.bg-grid {
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
}

/* ---------- layout ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 80px 0;
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
}

.kicker {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-head h2 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.section-head p {
    color: var(--text-muted);
    max-width: 640px;
}

/* ---------- nav ---------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 20, 0.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nav-brand {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.nav-brand .accent {
    color: var(--accent);
}

.nav-brand .cursor {
    display: inline-block;
    width: 9px;
    height: 1.15em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--accent);
    animation: blink 1.1s steps(1) infinite;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.nav-links a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.nav-links a.active {
    color: var(--accent);
}

.nav-links .nav-cta {
    margin-left: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.nav-links .nav-cta:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    width: 42px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
}

/* ---------- nav auth controls ---------- */
#navAuth {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.nav-account {
    position: relative;
}

.nav-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 999px;
    padding: 5px 14px 5px 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--sans);
    transition: border-color 0.15s ease, background 0.15s ease;
    max-width: 220px;
}

.nav-account-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
}

.avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.85rem;
    overflow: hidden;
    line-height: 1;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-caret {
    color: var(--text-faint);
    font-size: 0.7rem;
}

.nav-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px;
    display: none;
    z-index: 50;
}

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

.nav-account-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
}

.nav-account-menu a:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-account-menu a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

/* ---------- sub-headings (lab groups, etc.) ---------- */
.sub-head {
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 40px 0 16px;
}

/* ---------- project artwork in cards ---------- */
.project-art {
    margin: -26px -26px 6px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero-art {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.project-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.screenshot-grid img {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.changelog {
    list-style: none;
    display: grid;
    gap: 10px;
}

.changelog li {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.changelog-date {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--accent);
    margin-right: 10px;
}

/* ---------- danger zone ---------- */
.danger-zone {
    border-color: rgba(248, 113, 113, 0.35);
}

.danger-zone h3 {
    color: var(--red);
}

.btn-danger {
    background: var(--red-soft);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: var(--red);
}

.btn-danger:hover {
    background: rgba(248, 113, 113, 0.2);
    border-color: var(--red);
    color: #fecaca;
}

.btn-success {
    background: var(--green-soft);
    border: 1px solid rgba(52, 211, 153, 0.45);
    color: var(--green);
}

.btn-success:hover {
    background: rgba(52, 211, 153, 0.2);
    border-color: var(--green);
    color: #a7f3d0;
}

.danger-confirm {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(248, 113, 113, 0.35);
    display: grid;
    gap: 12px;
}

.danger-confirm p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.danger-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- avatar upload (account page) ---------- */
.avatar-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.avatar-preview {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--grad);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.6rem;
    overflow: hidden;
    border: 2px solid var(--border-strong);
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-upload-controls {
    display: grid;
    gap: 4px;
}

.avatar-hint {
    color: var(--text-faint);
    font-size: 0.78rem;
}

.dash-link-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.dash-link-card .dash-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--grad);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.1rem;
    overflow: hidden;
}

.dash-link-card .dash-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-link-card .muted {
    margin-bottom: auto;
}

/* ---------- footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    margin-top: 80px;
}

.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 48px 24px 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}

.footer-brand {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
}

.footer-brand span {
    color: var(--accent);
}

.footer-tagline {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 340px;
}

.footer-bottom {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px 28px;
    color: var(--text-faint);
    font-size: 0.85rem;
    font-family: var(--mono);
}

.footer-brand-col {
    flex: 1 1 260px;
    max-width: 380px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 120px;
}

.footer-col h4 {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--mono);
    margin-bottom: 4px;
}

.footer-col a {
    color: var(--text);
    font-size: 0.92rem;
}

.footer-col a:hover {
    color: var(--accent);
}

/* ---------- accessibility ---------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent);
    color: var(--on-accent);
    padding: 8px 14px;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 1000;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    padding: 96px 0 72px;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(closest-side, rgba(34, 211, 238, 0.14), rgba(167, 139, 250, 0.06), transparent);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.hero-kicker {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.hero-kicker .pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 8px;
    animation: pulse 2s ease-in-out infinite;
}

.hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.hero h1 .grad {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    color: var(--text-muted);
    font-size: 1.08rem;
    max-width: 520px;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- terminal card ---------- */
.terminal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    font-family: var(--mono);
    font-size: 0.85rem;
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.terminal-bar .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.terminal-bar .dot-r { background: var(--red); }
.terminal-bar .dot-y { background: var(--amber); }
.terminal-bar .dot-g { background: var(--green); }

.terminal-title {
    margin-left: 8px;
    color: var(--text-faint);
    font-size: 0.75rem;
}

.terminal-body {
    padding: 20px;
    line-height: 1.8;
    color: var(--text-muted);
    min-height: 260px;
}

.terminal-body .ln {
    display: block;
}

.terminal-body .prompt {
    color: var(--accent);
}

.terminal-body .path {
    color: var(--accent-2);
}

.terminal-body .ok {
    color: var(--green);
}

.terminal-body .comment {
    color: var(--text-faint);
}

.terminal-body .str {
    color: var(--amber);
}

/* "Vote now!" action in the homepage experiment-voting terminal pane. */
.vote-now {
    display: inline-block;
    margin: 4px 0 8px;
    padding: 3px 10px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: var(--radius-sm);
    background: var(--amber-soft);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 0.82rem;
    text-decoration: none;
}

.vote-now:hover {
    border-color: var(--amber);
    color: var(--amber);
}

.observatory-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    background: none;
    color: var(--text);
}

.btn-primary {
    background: var(--grad);
    color: var(--on-accent);
    border-color: transparent;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.25);
    color: var(--on-accent);
}

.btn-outline {
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

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

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

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-disabled {
    opacity: 0.85;
    cursor: default;
    pointer-events: none;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 0.85rem;
}

/* ---------- cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

/* ---------- project grid + cards ---------- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* ---------- discovery toolbar (Projects + Lab pages) ---------- */
/* A cohesive NEAI-styled control area above the resource grid. Reuses the
   existing pill/button and styled-select treatments so it never looks like
   a native white browser control bar. */
.discovery-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 22px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.discovery-control .discovery-modes {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.discovery-control .discovery-sort,
.discovery-control .discovery-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.discovery-control .discovery-sort label,
.discovery-control .discovery-filter-wrap label {
    color: var(--text-muted);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.discovery-control .neai-select {
    min-width: 150px;
}

.discovery-filter {
    min-width: 180px;
}

@media (max-width: 640px) {
    .discovery-control {
        flex-direction: column;
        align-items: stretch;
    }
    .discovery-control .discovery-sort,
    .discovery-control .discovery-filter-wrap {
        justify-content: space-between;
    }
    .discovery-control .neai-select,
    .discovery-filter {
        min-width: 0;
        flex: 1;
    }
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.project-card .card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.project-card .card-top h3 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-card h3 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.project-card .desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.project-card .card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.project-card .card-foot > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.card-foot-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    overflow: hidden;
}

/* Write-up indicator: a small W echoing the home page feature icons. Uses a
   distinct tasteful brown treatment consistent with the other discovery
   status indicators and never confused with an error state. */
.writeup-chip {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--brown-soft);
    border: 1px solid rgba(201, 163, 95, 0.4);
    color: var(--brown);
    font-family: var(--mono);
    font-size: 0.75rem;
    text-decoration: none;
}

.writeup-chip:hover {
    border-color: var(--brown);
}

/* ---------- discovery status indicators ---------- */
/* Concise markers on discovery tiles: (V) promotion voting open, (L) the
   viewer leads the resource, (M) the viewer is a member. Each uses a
   distinct, tasteful treatment consistent with the NEAI visual language and
   the existing information indicator baseline. */
.discovery-indicators {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
}

.discovery-indicator {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1;
    cursor: help;
}

.discovery-indicator.indicator-info {
    border-radius: 50%;
    border-color: rgba(34, 211, 238, 0.45);
    background-image: none;
    background-color: var(--bg);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
}

.discovery-indicator.indicator-vote {
    background-image: url("../assets/icons/vote.svg");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    border-color: rgba(251, 191, 36, 0.4);
    background-color: var(--bg);
}

.discovery-indicator.indicator-leader {
    background-image: url("../assets/icons/leader.svg");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    border-color: rgba(192, 132, 252, 0.4);
    background-color: var(--bg);
}

.discovery-indicator.indicator-member {
    background-image: url("../assets/icons/member.svg");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    border-color: rgba(52, 211, 153, 0.4);
    background-color: var(--bg);
}

.discovery-indicator.indicator-writeup {
    background-image: url("../assets/icons/writeup.svg");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    border-color: rgba(201, 163, 95, 0.4);
    background-color: var(--bg);
}

/* Status legend: the actual styled markers with plain-language meanings. */
.status-legend {
    display: grid;
    gap: 10px;
}

.status-legend .legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.status-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.status-legend .legend-item .discovery-indicator {
    cursor: default;
}

/* Non-actionable membership state: an existing Member is never offered a
   "Request to join" action. Informational orange-bordered treatment. */
.membership-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(251, 146, 60, 0.5);
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: default;
    user-select: none;
}

/* Locked-state explanation for restricted expandable sections. */
.section-locked {
    margin-top: 14px;
}

.section-locked strong {
    display: block;
    margin-bottom: 2px;
}

/* ---------- badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.badge.active { color: var(--green); border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.1); }
.badge.in-progress { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.1); }
.badge.paused { color: var(--red); border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.1); }
.badge.planned { color: var(--gray); border-color: rgba(107, 122, 144, 0.4); background: rgba(107, 122, 144, 0.1); }
.badge.archived { color: var(--gray); border-color: rgba(107, 122, 144, 0.4); background: rgba(107, 122, 144, 0.1); }

.tag {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(34, 211, 238, 0.18);
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
}

/* ---------- stat strip ---------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 56px 0 0;
}

.stat {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 20px;
}

.stat .num {
    font-family: var(--mono);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--accent);
}

.stat .label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ---------- feature rows ---------- */
.feature-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.feature .ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--accent-dim);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.9rem;
}

.feature h4 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.feature p {
    color: var(--text-muted);
    font-size: 0.93rem;
}

/* ---------- strip (alternating sections) ---------- */
.strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}

/* ---------- artwork banner (about) ---------- */
.art-banner {
    margin: 4px 0 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.art-banner-frame {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.art-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.art-banner figcaption {
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    border-top: 1px solid var(--border);
}

/* ---------- CTA (unauthenticated) ---------- */
.cta-section {
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    padding: 64px 0;
    text-align: center;
}

.cta-section h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.cta-section p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- callout ---------- */
.callout {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.callout strong {
    color: var(--text);
}

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

/* ---------- lists ---------- */
.list-check {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.list-check li {
    color: var(--text-muted);
    padding-left: 28px;
    position: relative;
}

.list-check li::before {
    content: "▸";
    position: absolute;
    left: 4px;
    color: var(--accent);
    font-family: var(--mono);
}

/* ---------- detail page ---------- */
.detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.detail-head h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 32px;
}

.detail-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
}

.detail-prose {
    color: var(--text-muted);
    font-size: 1rem;
    display: grid;
    gap: 18px;
}

.detail-prose h2 {
    color: var(--text);
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    margin-top: 12px;
}

.detail-prose p {
    max-width: 66ch;
}

.sidecard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: grid;
    gap: 16px;
    position: sticky;
    top: 88px;
}

.sidecard h4 {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.sidecard .kv {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    font-size: 0.9rem;
}

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

.sidecard .kv dd {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.85rem;
    text-align: right;
}

.sidecard .links {
    display: grid;
    gap: 8px;
}

/* Post-Overview panels (promotion, work item lifecycle, work items,
   management) share one coherent content column so they align with the
   Overview prose, never overlap the Details sidebar, and stay readable at
   any viewport width. */
.detail-panel {
    max-width: 760px;
    margin-top: 28px;
}

.detail-panel .promotion-panel {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- auth (login/register) ---------- */
.auth-wrap {
    min-height: calc(100vh - 64px);
    display: grid;
    place-items: center;
    padding: 48px 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow);
}

.auth-card h1 {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.auth-card .sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 26px;
}

.auth-foot {
    text-align: center;
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ---------- forms ---------- */
.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="date"],
.field input[type="url"],
.field input[type="number"],
.field input[type="search"],
.field input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--sans);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input[type="date"] {
    color-scheme: dark;
}

.field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.pw-row {
    position: relative;
}

.pw-row input {
    padding-right: 48px;
}

.pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 1rem;
    padding: 6px;
    border-radius: 6px;
}

.pw-toggle:hover {
    color: var(--accent);
}

.msg {
    font-size: 0.9rem;
    min-height: 1.4em;
    margin: 4px 0 12px;
}

.msg.err { color: var(--red); }
.msg.ok { color: var(--green); }
.msg.info { color: var(--accent); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* ---------- dashboard ---------- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.dash-card h3 {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.dash-card .email {
    font-size: 1.15rem;
    word-break: break-all;
}

.dash-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.kv-list {
    display: grid;
    gap: 8px;
    font-size: 0.92rem;
}

.kv-list div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.kv-list dt { color: var(--text-muted); }
.kv-list dd { color: var(--text); }

/* Write-Up metadata: label/value pairs aligned cleanly side by side, never
   with the label left-aligned while the value floats separately to the
   right. Used on the article page and profile information panels. Each
   label/value pair may be wrapped in a <div> (article page and profile
   panels); display:contents lets those wrappers participate in the parent
   grid so every row still lands on its own aligned line instead of stacking
   or floating. */
.wu-meta-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
    margin: 12px 0;
    font-size: 0.92rem;
}

.wu-meta-list > div {
    display: contents;
}

.wu-meta-list dt {
    color: var(--text-muted);
    white-space: nowrap;
    padding-top: 1px;
}

.wu-meta-list dd {
    color: var(--text);
    margin: 0;
    overflow-wrap: anywhere;
}

/* Write-Up body container: padded, bordered, rounded presentation that keeps
   the prose contained and consistent with the design system. */
.wu-content-body {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 18px;
    overflow-wrap: anywhere;
}

.dash-actions {
    display: grid;
    gap: 10px;
}

/* ---------- 404 ---------- */
.error-wrap {
    min-height: calc(100vh - 64px);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 48px 24px;
}

.error-code {
    font-family: var(--mono);
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.error-wrap h1 {
    margin: 8px 0;
    font-size: 1.5rem;
}

.error-wrap p {
    color: var(--text-muted);
    max-width: 420px;
    margin-bottom: 24px;
}

/* ---------- animations ---------- */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-up {
    opacity: 0;
    animation: fadeUp 0.55s ease forwards;
}

.d-1 { animation-delay: 0.05s; }
.d-2 { animation-delay: 0.15s; }
.d-3 { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .detail-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sidecard {
        position: static;
    }
}

@media (max-width: 760px) {
    .section {
        padding: 56px 0;
    }

    .nav-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: var(--bg-soft);
        border-bottom: 1px solid var(--border);
        padding: 12px 16px 16px;
        display: none;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 12px 14px;
    }

    .nav-links .nav-cta {
        margin-left: 0;
        margin-top: 4px;
        text-align: center;
    }

    /* Auth controls become part of the vertical mobile menu. */
    #navAuth {
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-account-btn {
        display: none;
    }

    .nav-account-menu {
        position: static;
        display: block;
        min-width: 0;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .nav-account-menu a {
        padding: 12px 14px;
    }

    .hero {
        padding: 64px 0 48px;
    }

    .terminal-body {
        font-size: 0.78rem;
        padding: 16px;
    }
}

/* ---------- password banner ---------- */
.password-banner {
    background: var(--amber-soft);
    border-bottom: 1px solid rgba(251, 191, 36, 0.4);
    color: var(--amber);
    padding: 10px 24px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.password-banner a {
    color: var(--amber);
    text-decoration: underline;
    margin-left: 6px;
}

/* ---------- form extras ---------- */
.field-hint {
    margin-top: 6px;
    font-size: 0.85rem;
}

.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--sans);
}

.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* Styled select shared by controls that live outside a `.field` wrapper
   (discovery toolbar, admin support rows). Mirrors the `.field select`
   treatment so every select uses the same NEAI look instead of a native
   white browser control. */
.neai-select {
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--sans);
}

.neai-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* ---------- Yes / No segmented control ---------- */
/* Explicit binary choice used for membership acceptance, public visibility
   and featured status. Yes uses the green treatment, No the red treatment;
   the selected side is clearly highlighted. Same visual language as the
   surrounding NEAI controls, sized to sit naturally beside form fields. */
.yesno {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.yesno-btn {
    padding: 8px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.yesno-btn.yes:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-soft);
}

.yesno-btn.no:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-soft);
}

.yesno-btn.selected.yes {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-soft);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.15);
}

.yesno-btn.selected.no {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-soft);
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15);
}

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

/* ---------- featured position stepper ---------- */
/* Compact position selector for the home page featured ordering. It is only
   meaningful (and only shown) while a resource is featured; the server keeps
   the existing sort_order column as the ordering source of truth. */
.pos-stepper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pos-step-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pos-step-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

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

.pos-value {
    min-width: 84px;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-variant-numeric: tabular-nums;
}

.check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 10px 0;
}

.check-row input {
    margin-top: 3px;
    accent-color: var(--accent);
}

.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.tag-picker .check-row {
    margin: 4px 0;
}

.strength-wrap {
    height: 5px;
    background: var(--surface-2);
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--border-strong);
    transition: width 0.2s ease, background 0.2s ease;
}

.strength-label {
    color: var(--text-faint);
    font-size: 0.78rem;
    min-height: 1.1em;
    margin-top: 4px;
}

/* ---------- mfa / recovery ---------- */
.qr-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.qr-wrap img {
    width: 180px;
    height: 180px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 6px;
}

.secret-code {
    font-family: var(--mono);
    font-size: 0.85rem;
    text-align: center;
    letter-spacing: 0.08em;
    color: var(--accent);
    word-break: break-all;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.recovery-codes code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 0.06em;
}

.recovery-box {
    margin-top: 16px;
}

/* ---------- kv / session rows ---------- */
.kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

.session-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

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

.session-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

/* ---------- admin ---------- */
.admin-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.admin-tabs button {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 9px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-tabs button:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.admin-tabs button.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.admin-tab {
    display: none;
}

.admin-tab.active {
    display: block;
}

/* ---------- Observatory control hub ---------- */
/* Landing/navigation presentation for the Observatory tab: the available
   areas are presented as an intentional connected node grid. Nodes route to
   the existing sections; deeper future UX may hang off them later. */
.observatory-hub {
    margin-bottom: 28px;
    padding: 22px 22px 20px;
    background:
        radial-gradient(circle at 0 0, var(--accent-soft) 0, transparent 40%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
}

.observatory-hub-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 18px;
}

.observatory-hub-head h3 {
    margin: 0;
    font-size: 1.15rem;
}

.observatory-hub-head .muted {
    font-size: 0.85rem;
}

.observatory-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    position: relative;
}

/* A subtle connecting spine behind the nodes so the hub reads as one
   connected control surface rather than floating cards. */
.observatory-hub-grid::before {
    content: "";
    position: absolute;
    inset: 50% 4% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.obs-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    padding: 14px 14px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font-family: var(--sans);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.obs-node:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--focus-ring);
}

.obs-node:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* Persistent Control Hub navigation: the selected node stays visibly
   highlighted while its area is shown, so the user always knows where they
   are and can switch to another area on the same page. */
.obs-node.active,
.obs-node[aria-pressed="true"] {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft), var(--bg));
    box-shadow: 0 0 0 1px var(--accent-dim), var(--focus-ring);
}

.obs-node.active .obs-node-label,
.obs-node[aria-pressed="true"] .obs-node-label {
    color: var(--accent);
}

.obs-node-glyph {
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1;
}

.obs-node-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.obs-node-desc {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.obs-flash {
    animation: obs-flash 1.2s ease-out;
}

@keyframes obs-flash {
    0% { box-shadow: 0 0 0 0 var(--accent); }
    30% { box-shadow: 0 0 0 4px var(--accent-dim); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 640px) {
    .observatory-hub-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ---------- Observatory single-page focus ---------- */
/* Selecting a Control Hub node hides the hub and unrelated areas and shows
   only the chosen area's existing content; the back row restores the hub. */
.obs-back-row {
    display: flex;
    margin-bottom: 18px;
}

.obs-section[hidden] {
    display: none;
}

/* ---------- promotion voting panel ---------- */
/* Advisory experiment promotion vote. Gold accent marks it as distinct from
   ordinary form content while staying inside the NEAI blue/grey language;
   readability and the existing For / Against voting semantics are unchanged. */
.promotion-panel {
    position: relative;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background:
        radial-gradient(circle at 0 0, var(--amber-soft) 0, transparent 42%),
        var(--surface);
}

.promotion-panel-head {
    margin-bottom: 8px;
}

.promotion-panel-head h3 {
    margin: 4px 0 0;
    font-size: 1.2rem;
}

.promotion-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
}

.promotion-kicker::before {
    content: "✦";
    color: var(--amber);
}

.promotion-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.promotion-tally-figure {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.promotion-tally-figure.for {
    color: var(--green);
    border-color: rgba(52, 211, 153, 0.35);
}

.promotion-tally-figure.against {
    color: var(--red);
    border-color: rgba(248, 113, 113, 0.35);
}

.promotion-vote-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.promotion-my-vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: var(--amber-soft);
    color: var(--amber);
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.admin-controls input {
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    min-width: 260px;
    flex: 1;
}

.admin-controls input:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pill {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.pill.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.admin-table {
    display: grid;
    gap: 10px;
}

.admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
}

.admin-cell {
    flex: 1;
    min-width: 160px;
}

.admin-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-alert {
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 0.95rem;
    display: none;
}

.admin-alert.ok {
    background: var(--green-soft);
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: var(--green);
}

.admin-alert.err {
    background: var(--red-soft);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: var(--red);
}

.delete-confirm-input {
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    color: var(--text);
    width: 200px;
}

/* ---------- msg links ---------- */
.msg a {
    color: var(--accent);
    text-decoration: underline;
    margin-left: 4px;
}

/* ---------- responsive for admin ---------- */
@media (max-width: 760px) {
    .admin-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-cell {
        min-width: 0;
    }
}

/* ---------- admin ticket status select ---------- */
.ticket-status {
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    margin-top: 4px;
    width: 100%;
    max-width: 160px;
}

.ticket-status:focus {
    outline: none;
    border-color: var(--accent);
}

.ticket-priority {
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    margin-top: 4px;
    width: 100%;
    max-width: 160px;
}

.ticket-priority:focus {
    outline: none;
    border-color: var(--accent);
}

/* Read-only system-generated metadata (e.g. Project "Created" date).
   Grey/blue treatment so it is obviously derived, not user-editable. */
.meta-created {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    width: 100%;
}

/* ---------- user-facing support ticket list ---------- */
.ticket-list {
    display: grid;
    gap: 8px;
}

.ticket-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.ticket-row:hover,
.ticket-row:focus {
    border-color: var(--accent);
    outline: none;
}

.ticket-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ticket-id {
    color: var(--accent);
    font-family: monospace;
}

.ticket-subject {
    color: var(--text);
}

.ticket-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.ticket-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ticket-message {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- global state blocks (loading / empty / error / success) ---------- */
.state-block {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    text-align: center;
    margin: 8px 0;
}

.state-block p {
    margin: 0;
}

.state-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: neai-spin 0.7s linear infinite;
    display: inline-block;
    flex: none;
}

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

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

.state-empty p {
    font-style: italic;
}

.state-error {
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--red);
}

.state-success {
    border-color: rgba(52, 211, 153, 0.4);
    color: var(--green);
}

/* ---------- ticket conversation ---------- */
.conv {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.conv-msg {
    max-width: 85%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
}

.conv-msg .conv-head {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.conv-msg .conv-body {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

.conv-msg.conv-admin {
    background: var(--accent-soft);
    border-color: rgba(34, 211, 238, 0.35);
    margin-left: auto;
}

.conv-msg.conv-user {
    margin-right: auto;
}

.article-link-card {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed rgba(34, 211, 238, 0.4);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.article-link-card a {
    color: var(--accent);
    font-weight: 600;
}

/* ---------- unread indicators ---------- */
.unread-dot {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

/* Clear, distinct "New reply" marker on Support tickets with an unread admin
   response. Tickets without new replies stay visually quieter. */
.support-new {
    color: var(--brown);
    border-color: rgba(201, 163, 95, 0.5);
    background: var(--brown-soft);
    font-weight: 700;
}

/* ---------- help / articles ---------- */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.article-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.article-card h3 a {
    color: var(--text);
}

.article-card h3 a:hover {
    color: var(--accent);
}

.article-card .excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.article-prose {
    line-height: 1.7;
}

.article-prose p {
    margin: 0 0 14px;
}

.article-prose h2 {
    margin: 22px 0 8px;
}

.article-prose code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: var(--mono);
    font-size: 0.9em;
}

/* ---------- admin forms / canned / filters ---------- */
.admin-form {
    display: grid;
    gap: 12px;
}

.admin-form textarea {
    min-height: 140px;
    font-family: var(--mono);
    font-size: 0.9rem;
    resize: vertical;
}

.admin-form input[type="text"],
.admin-form select,
.admin-form textarea {
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    width: 100%;
}

.canned-list {
    display: grid;
    gap: 8px;
}

.canned-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.suggestion-list {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.suggestion-list a {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
}

.suggestion-list a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.kv-code {
    font-family: var(--mono);
    font-size: 0.85rem;
    /* Long JSON (e.g. audit metadata) must wrap inside its container,
       never force horizontal overflow. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Inline write-up presentation on project/experiment pages. */
.wu-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 10px;
    background: var(--surface);
}

.wu-item-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wu-item-main {
    flex: 1;
    min-width: 0;
}

.wu-item-body {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.avatar-sm {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.85rem;
    overflow: hidden;
}

.avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wu-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ---------- project identity: code chip ---------- */
.project-code {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--accent);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 6px;
    padding: 2px 8px;
    margin-right: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

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

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

.breadcrumbs .crumb-sep {
    opacity: 0.5;
}

.breadcrumbs .crumb-here {
    color: var(--text);
}

/* ---------- members pane ---------- */
.members-pane {
    margin-top: 18px;
}

.members-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    background: var(--surface);
}

.member-count {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-right: 4px;
}

/* ---------- work item cards ---------- */
.workitem-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 18px;
}

.workitem-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.workitem-head h3 {
    margin: 0;
}

.wi-leaders,
.wi-writeup-flag {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---------- Leader portal expandable cards ---------- */
/* Each led Project/Experiment starts compact (header + short metadata) and
   expands to reveal the full existing member, membership and leadership
   controls on demand. Multiple cards expand independently. */
.leader-expand {
    padding: 0;
    overflow: hidden;
}

.leader-expand-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    width: 100%;
    padding: 15px 18px;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--sans);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.leader-expand-head:hover {
    background: var(--surface-2);
}

.leader-expand-head:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: var(--radius);
}

.leader-expand-indicator {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

.leader-expand-head.open .leader-expand-indicator {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.leader-expand-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.leader-expand-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.leader-expand-meta .project-code {
    margin-right: 0;
}

.leader-expand-body {
    border-top: 1px solid var(--border);
    padding: 14px 18px 18px;
}

.leader-expand-body[hidden] {
    display: none;
}

/* ---------- detail page expandable sections ---------- */
/* The Project/Experiment detail pages are organized into expandable sections
   reusing the Leader-interface interaction pattern. Each section is a compact
   card whose header expands to reveal the full existing content and controls;
   collapsing never destroys state. */
.detail-collapse {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.detail-collapse + .detail-collapse {
    margin-top: 14px;
}

.detail-collapse .leader-expand-body {
    background: var(--bg-soft);
}

.detail-prose-inner {
    display: grid;
    gap: 12px;
}

/* ---------- reusable tag picker ---------- */
.tp-component {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 10px 12px;
}

.tp-search {
    width: 100%;
    max-width: 280px;
    margin-bottom: 10px;
}

.tp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tp-pill {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tp-pill:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.tp-pill:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.tp-pill.selected {
    order: -1;
    border-color: rgba(52, 211, 153, 0.55);
    background: var(--green-soft);
    color: var(--green);
}

.tp-divider {
    flex-basis: 100%;
    height: 0;
}

/* Shared search-input treatment for the account and tag pickers. These are
   reusable components used across Leader/Member management, Work Items and
   the request forms, so their native search boxes get the same NEAI styling
   as every other control instead of a white browser input. */
.ap-search,
.tp-search {
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--sans);
}

.ap-search:focus,
.tp-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.ap-search::placeholder,
.tp-search::placeholder {
    color: var(--text-faint);
}

.tp-none {
    margin: 0;
    font-size: 0.85rem;
}

/* ---------- reusable account picker ---------- */
.ap-component {
    display: grid;
    gap: 10px;
}

.ap-search-wrap {
    position: relative;
}

.ap-search {
    width: 100%;
    max-width: 360px;
}

.ap-results {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.ap-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.ap-result:last-child {
    border-bottom: none;
}

.ap-result:hover,
.ap-result:focus-visible {
    background: rgba(56, 189, 248, 0.08);
    outline: none;
}

.ap-result-main {
    display: grid;
    line-height: 1.2;
    min-width: 0;
}

.ap-result-main small {
    font-size: 0.76rem;
}

.ap-result-hint {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.ap-none {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.85rem;
}

.ap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.ap-empty {
    margin: 0;
    font-size: 0.85rem;
}

.member-chip.ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius);
    padding: 6px 10px;
}

.ap-chip-main {
    display: grid;
    line-height: 1.25;
    min-width: 0;
}

.ap-chip-main small {
    font-size: 0.74rem;
}

.ap-info-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: none;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1;
    cursor: help;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

.ap-info-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.ap-remove-btn {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.ap-remove-btn:hover {
    color: var(--red);
}

.ap-card {
    flex-basis: 100%;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--surface-2, transparent);
}

.ap-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-card-id div {
    font-size: 0.8rem;
}

.avatar-md {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
}

.ap-card-note {
    margin: 8px 0 0;
    font-size: 0.74rem;
}

/* ---------- confirmation dialog ---------- */
.confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(2, 6, 17, 0.72);
    display: grid;
    place-items: center;
    padding: 20px;
}

.confirm-dialog {
    width: min(460px, 100%);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.confirm-dialog h3 {
    margin: 0 0 8px;
}

.confirm-dialog p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* ---------- leader portal ---------- */
.leader-portal-card .leader-wu-row {
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    margin-top: 10px;
}

.leader-wu-review {
    margin-top: 8px;
}

/* ---------- Development lifecycle ---------- */
/* The guided Project development builder: a layered tree with the project
   start at the bottom and the latest/current work rising toward the top.
   Cards snap into a computed column grid and connector lines are drawn
   between the levels, all using the existing NEAI token language. */
.dl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.dl-title h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    letter-spacing: -0.01em;
}

/* Methodology control panel: consistent sizing, padding and button treatment
   for the Change methodology and Remove lifecycle actions, with the amber
   incompatibility warning below. */
.dl-methodology-panel {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    max-width: 640px;
}

.dl-methodology-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.dl-methodology-title {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.dl-methodology-desc {
    font-size: 0.82rem;
}

.dl-methodology-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dl-methodology-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-methodology-row .neai-select {
    min-width: 160px;
}

.dl-methodology-row .btn {
    white-space: nowrap;
}

/* Amber warning panel: not colour alone, includes an exclamation icon and
   clear text. */
.dl-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(251, 191, 36, 0.5);
    border-left: 4px solid var(--amber);
    border-radius: var(--radius-sm);
    background: var(--amber-soft);
    color: var(--text);
    font-size: 0.9rem;
}

.dl-warning-icon {
    flex-shrink: 0;
    color: var(--amber);
    font-size: 1.1rem;
    line-height: 1.2;
}

.dl-warning[hidden] {
    display: none;
}

.dl-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 14px;
    border-color: var(--border-strong);
    color: var(--text-muted);
}

.dl-jump:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.dl-tree-viewport {
    position: relative;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 16px 0;
}

.dl-tree-viewport:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dl-tree {
    position: relative;
    min-height: 120px;
}

.dl-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dl-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.dl-card:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-card.selected {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft), var(--surface));
    box-shadow: 0 0 0 1px var(--accent-dim), var(--focus-ring);
}

.dl-card h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dl-card .badge {
    align-self: flex-start;
}

.dl-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.dl-assign {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.dl-due,
.dl-work-hint,
.dl-owner {
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.dl-priority-high {
    border-color: var(--amber, #fbbf24);
    color: var(--amber, #fbbf24);
}

.dl-priority-urgent {
    border-color: var(--red, #f87171);
    color: var(--red, #f87171);
}

.dl-priority-low {
    opacity: 0.85;
}

.dl-waiting {
    border-color: var(--amber, #fbbf24);
    color: var(--amber, #fbbf24);
}

.dl-rel-list {
    list-style: none;
    margin: 6px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-rel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
}

.dl-rel-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.dl-rel-add .neai-select {
    flex: 1;
    min-width: 130px;
}

.dl-res-count {
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.dl-res-list {
    list-style: none;
    margin: 6px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-res-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.dl-res-row input[type="text"],
.dl-res-row input[type="url"] {
    flex: 1;
    min-width: 140px;
}

.dl-res-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.dl-overview {
    margin: 12px 0;
}

.dl-overview summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 0.95rem;
}

.dl-overview-body {
    padding: 0 14px 14px;
}

.dl-ov-tagline {
    font-size: 1.02rem;
    margin: 4px 0 8px;
}

.dl-ov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 16px;
    margin: 10px 0;
}

.dl-ov-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
}

.dl-ov-current {
    margin: 8px 0;
}

.dl-filterbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 4px 0 10px;
}

.dl-filterbar #dlSearch {
    flex: 2;
    min-width: 180px;
}

.dl-filterbar .neai-select {
    flex: 1;
    min-width: 130px;
}

.dl-card.dimmed {
    opacity: 0.28;
}

.dl-card-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    min-width: 0;
}

.dl-link {
    font-size: 0.78rem;
    color: var(--accent);
    overflow-wrap: anywhere;
}

.dl-band {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* Directional connector arrowheads. The lifecycle flows from the parent
   (below) up to the child (above), so vertical lines carry an up-pointing
   arrowhead at their top end. Horizontal spines distribute the flow outward
   to the branches. Join lines use the accent colour and an arrowhead pointing
   toward the converged piece. Direction is conveyed by the arrowhead shapes,
   not by colour alone. */
.dl-line {
    position: absolute;
    background: var(--border-strong);
}

.dl-line.v {
    width: 2px;
}

.dl-line.v::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid var(--border-strong);
}

.dl-line.h {
    height: 2px;
}

.dl-line.h::before,
.dl-line.h::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.dl-line.h::before {
    left: 0;
    border-right: 7px solid var(--border-strong);
}

.dl-line.h::after {
    right: 0;
    border-left: 7px solid var(--border-strong);
}

.dl-line.join {
    background: rgba(34, 211, 238, 0.5);
}

.dl-line.v.join::after {
    border-bottom-color: rgba(34, 211, 238, 0.85);
}

.dl-line.h.join::before,
.dl-line.h.join::after {
    display: none;
}

.dl-line.h.join.dir-r::after {
    display: block;
    border-left-color: rgba(34, 211, 238, 0.85);
}

.dl-line.h.join.dir-l::before {
    display: block;
    border-right-color: rgba(34, 211, 238, 0.85);
}

.dl-foot {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

.dl-foot .dl-jump {
    margin: 14px 0 0;
}

/* ---------- Development piece editor ---------- */
.dl-editor,
.dl-add {
    max-width: 760px;
}

.dl-editor h3,
.dl-add h3 {
    margin-bottom: 6px;
}

.dl-ops {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.dl-op-note {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.dl-readonly p {
    margin: 0 0 10px;
}

.dl-links a {
    font-size: 0.85rem;
}

/* ---------- Development builder palette ---------- */
/* Compact construction palette above the lifecycle workspace. Each tool is a
   draggable chip; the methodology decides which tools are shown. Valid drop
   targets highlight in the workspace while a tool is dragged. */
.dl-builder {
    display: grid;
    gap: 12px;
}

.dl-palette {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 4px;
}

.dl-palette-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.dl-palette-head strong {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.dl-palette-group {
    display: grid;
    gap: 6px;
}

.dl-palette-group-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-palette-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.dl-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: grab;
    font-size: 0.88rem;
    font-weight: 600;
    user-select: none;
    -webkit-user-drag: element;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.dl-tool:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.dl-tool:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-tool:active {
    cursor: grabbing;
}

.dl-tool[data-kind="relationship"] .dl-tool-glyph {
    color: var(--amber);
}

.dl-tool-glyph {
    color: var(--accent);
    font-size: 1.05rem;
    line-height: 1;
}

.dl-tool-label {
    white-space: nowrap;
}

.dl-drag-hint {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    min-height: 1.1em;
}

/* ---------- Development drag feedback ---------- */
.dl-card.drop-valid {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}

.dl-card.drop-invalid {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
    opacity: 0.75;
}

.dl-card.join-from {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16);
}

.dl-card.join-target {
    border-color: var(--amber);
    background: linear-gradient(180deg, var(--amber-soft), var(--surface));
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
}

.dl-dropzone {
    position: absolute;
    right: 8px;
    top: 6px;
    z-index: 5;
    max-width: 160px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-dropzone[data-kind="valid"] {
    background: var(--green-soft);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: var(--green);
}

.dl-dropzone[data-kind="join"] {
    background: var(--amber-soft);
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: var(--amber);
}

.dl-dropzone[data-kind="from"] {
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
    color: var(--accent);
}

.dl-dropzone[data-kind="invalid"] {
    background: var(--red-soft);
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: var(--red);
}

/* Ghost slot: the grid cell a valid drop will snap into. */
.dl-slot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(52, 211, 153, 0.5);
    border-radius: var(--radius-sm);
    background: rgba(52, 211, 153, 0.06);
    color: var(--green);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 8px;
    pointer-events: none;
    z-index: 4;
}

/* ---------- Development read-only separation ---------- */
.dl-readonly-banner {
    border-left-color: var(--amber);
}

/* ---------- Development workspace + toolbar ---------- */
/* Builder and Project Content sit side-by-side where the viewport allows, so
   the central page width is used instead of leaving large blank gutters. On
   narrower screens the panels stack cleanly. */
.dl-builder-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 8px;
}

@media (max-width: 980px) {
    .dl-builder-layout {
        grid-template-columns: 1fr;
    }
}

.dl-component-hint {
    font-size: 0.78rem;
    display: block;
}

/* Builder toolbar for view controls. The actual construction dock lives
   inside the Development workspace so it disappears with that workspace. */
.dl-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
    margin: 4px 0 8px;
}

.dl-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Quick Tools: compact, persistent builder tools that call the same existing
   operations as the Components palette. */
.dl-quick-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(13, 18, 32, 0.94);
}

.dl-quick-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-right: 2px;
}

.dl-quick-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dl-quick-tool:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.dl-quick-tool:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-quick-tool:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dl-quick-tool .dl-tool-glyph {
    color: var(--accent);
}

.dl-quick-switch .dl-tool-glyph {
    color: var(--amber);
}

/* Development workspace. The dock is sticky inside this workspace and
   reserves its own row above the graph, so it stays available while the
   lifecycle scrolls without becoming a global browser toolbar. */
.dl-workspace {
    position: relative;
    display: grid;
    gap: 12px;
    align-items: start;
    margin-top: 8px;
}

.dl-workspace-dock {
    position: sticky;
    top: 64px;
    z-index: 35;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(13, 18, 32, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.dl-canvas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.dl-canvas .dl-jump {
    align-self: center;
}

.dl-details-layer:empty {
    display: none;
}

.dl-details-layer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

.dl-details-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 14, 0.52);
}

.dl-details-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.dl-details-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font-size: 1.1rem;
}

.dl-details-close:hover,
.dl-details-close:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Jump controls: prominent, centred, clearly navigation rather than CRUD. */
.dl-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px auto;
    padding: 10px 20px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dl-jump:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 6px 18px rgba(34, 211, 238, 0.18);
}

.dl-jump:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-wide-toggle[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

/* ---------- Development panel separation ---------- */
/* Piece Details: the first panel is where the user edits the selected piece.
   It deliberately reads as an input/editing surface rather than another
   passive information card. */
.dl-details-card {
    border-color: var(--border-strong);
    background:
        linear-gradient(180deg, var(--accent-soft), var(--surface) 120px),
        var(--surface);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.06);
}

.dl-panel-intro {
    font-size: 0.85rem;
    margin-bottom: 14px;
}

/* Structure & Builder Controls: the second panel changes how pieces relate
   to each other. A distinct surface treatment makes the two panels read as
   different kinds of work without leaving the NAMOA visual language. */
.dl-structure-card {
    margin: 0;
    padding: 10px;
    border-style: dashed;
    border-color: var(--border-strong);
    background: var(--bg-soft);
}

.dl-structure-card h3 {
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.dl-structure-card .dl-panel-intro {
    margin-bottom: 8px;
}

.dl-structure-zone {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.dl-structure-block {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.dl-structure-block strong {
    display: block;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.dl-structure-desc {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    margin: 0;
}

.dl-structure-action {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

/* Move / Switch Piece: current piece and destination side by side with an
   obvious relationship and a single explicit action. */
.dl-move-block {
    background:
        linear-gradient(180deg, var(--accent-soft), var(--surface) 140px),
        var(--surface);
}

.dl-move-grid {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.dl-move-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 160px;
}

.dl-move-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-move-chip {
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.dl-move-arrow {
    align-self: center;
    color: var(--accent);
    font-size: 1.2rem;
    font-family: var(--mono);
    padding: 0 2px;
}

/* ---------- Development project content palette ---------- */
.dl-content-palette {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(192, 132, 252, 0.35);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.dl-content-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dl-content-filter label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-content-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.dl-content-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: grab;
    user-select: none;
    -webkit-user-drag: element;
    max-width: 260px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dl-content-item:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.dl-content-item:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-content-item:active {
    cursor: grabbing;
}

.dl-content-item .dl-content-icon {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1;
}

.dl-content-item.wu .dl-content-icon {
    color: var(--brown);
}

.dl-content-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Development content sections inside pieces ---------- */
.dl-card-content {
    display: grid;
    gap: 5px;
    margin-top: 2px;
    min-width: 0;
}

.dl-content-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.72rem;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.dl-content-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.dl-content-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dl-content-toggle .dl-content-glyph {
    flex-shrink: 0;
    color: var(--accent);
    font-family: var(--mono);
}

.dl-content-toggle.wu .dl-content-glyph {
    color: var(--brown);
}

.dl-content-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dl-content-arrow {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-faint);
    font-family: var(--mono);
}

.dl-content-body {
    max-height: 148px;
    overflow-y: auto;
    margin-top: 2px;
    padding: 8px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    font-size: 0.8rem;
    color: var(--text);
    overflow-wrap: anywhere;
}

.dl-content-body .article-prose p,
.dl-content-body p {
    margin: 0 0 8px;
}

.dl-content-body .article-prose p:last-child,
.dl-content-body p:last-child {
    margin-bottom: 0;
}

/* Save / Remove treatment: Save is the positive green action, Remove is the
   destructive red action, and the two sit together so their roles are clear. */
.dl-save-remove {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

/* ---------- Development Write-Up chip selector ---------- */
.dl-writeups {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
}

.dl-wu-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    max-width: 260px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dl-wu-chip:hover {
    border-color: var(--accent);
}

.dl-wu-chip:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-wu-chip[data-checked="true"] {
    border-color: rgba(52, 211, 153, 0.55);
    background: var(--green-soft);
}

.dl-wu-chip .dl-content-icon {
    color: var(--brown);
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1;
}

.dl-wu-chip-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-writeup-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* ---------- Development member identity selector ---------- */
.dl-members {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.dl-member {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

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

.dl-member[data-checked="true"] {
    border-color: rgba(52, 211, 153, 0.55);
    background: var(--green-soft);
}

.dl-member:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-member-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
}

.dl-member-checkmark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--green);
    background: rgba(52, 211, 153, 0.14);
}

.dl-member .ap-card {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    background: var(--surface-2);
}

/* ---------- Development Builder UX correction: floating canvas tools ---------- */
/* Workspace model: the Builder is a graphical canvas, not a dashboard. The
   tool rail floats on the LEFT of the canvas (MS Paint style), sticky inside
   .dl-builder-body so it follows the visible graph while scrolling but never
   leaves the Builder boundaries. The lifecycle still builds bottom-up: the
   project start sits at the bottom and the latest work rises to the top. */
.dl-builder-body {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin-top: 4px;
    min-width: 0;
}

.dl-tool-rail {
    position: sticky;
    top: 64px;
    z-index: 30;
    flex: 0 0 88px;
    width: 88px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    margin-bottom: 0;
}

.dl-rail-head {
    text-align: center;
}

.dl-rail-head strong {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.dl-rail-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-rail-tool {
    flex-direction: column;
    gap: 4px;
    padding: 9px 4px;
    text-align: center;
    font-family: var(--sans);
}

.dl-rail-tool .dl-tool-glyph {
    font-size: 1.25rem;
}

.dl-rail-label {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dl-rail-tool:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.dl-rail-tool:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-rail-tool.is-dragging {
    border-color: var(--accent);
    background: var(--accent-dim);
    box-shadow: var(--focus-ring);
}

.dl-rail-tool.is-unavailable {
    opacity: 0.55;
}

.dl-tool-rail .dl-drag-hint {
    font-size: 0.7rem;
}

/* Builder Key: explains the graph, never duplicates the tools. */
.dl-key {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    padding: 8px 10px;
}

.dl-key-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.dl-key-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    flex-shrink: 0;
}

.dl-key-swatch.is-active {
    background: #1e3a8a;
    border-color: #3b82f6;
}

.dl-key-swatch.is-planned {
    background: var(--surface);
    border-color: var(--border-strong);
}

.dl-key-swatch.is-inprogress {
    background: var(--accent-dim);
    border-color: var(--accent);
}

.dl-key-swatch.is-paused {
    background: transparent;
    border-color: var(--amber);
}

.dl-key-swatch.is-done {
    background: var(--green-soft);
    border-color: var(--green);
}

.dl-key-swatch.is-archived {
    background: linear-gradient(180deg, var(--green-soft), var(--surface));
    border-color: var(--border-strong);
}

.dl-key-swatch.is-waiting {
    background: var(--amber-soft);
    border-color: var(--amber);
}

.dl-key-swatch.is-selected {
    background: linear-gradient(180deg, var(--accent-soft), var(--surface));
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-key-kinds {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-faint);
}

/* Canvas column and Project Content sit beside each other with matching top
   boundaries and consistent surface treatment. */
.dl-canvas {
    flex: 1 1 auto;
    min-width: 0;
}

.dl-builder-body .dl-content-palette {
    flex: 0 0 300px;
    width: 300px;
    align-self: stretch;
    min-width: 0;
}

.dl-content-toggles {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* NEAI-styled search: dark workspace control with a subtle shortcut hint. */
.dl-search-wrap {
    position: relative;
    flex: 2;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
}

.dl-filterbar #dlSearch {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 10px 36px 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--sans);
}

.dl-filterbar #dlSearch::placeholder {
    color: var(--text-faint);
}

.dl-filterbar #dlSearch:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-search-key {
    position: absolute;
    right: 10px;
    padding: 1px 7px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.75rem;
    pointer-events: none;
}

/* Overview team: useful member presentation, not anonymous numbers. */
.dl-ov-team {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-ov-member {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
}

.dl-ov-member-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Resources: optional and collapsed by default. */
.dl-resources {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--bg-soft);
}

.dl-resources > summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.dl-resources > summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}

.dl-resources-body {
    margin-top: 8px;
}

/* Colour hierarchy: canvas primary, active accent, completed subdued,
   waiting amber, selected focus. Overview and palette stay secondary. */
.dl-workspace .dl-tree-viewport {
    border-color: var(--border-strong);
    box-shadow: inset 0 0 48px rgba(34, 211, 238, 0.04);
}

.dl-card.st-active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.dl-card.st-in-progress {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim);
}

.dl-card.st-completed {
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green-soft);
}

.dl-card.st-archived {
    background: linear-gradient(180deg, var(--green-soft), var(--surface) 120px);
}

.dl-card.st-archived h3 {
    color: var(--text-muted);
}

.dl-card.st-paused {
    border-color: var(--amber);
    box-shadow: 0 0 0 1px var(--amber-soft);
}

.dl-overview {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

/* Wide Mode widens the workspace only. Tile dimensions are fixed in
   geometry and never change here. */
.dl-wide-mode .dl-wide-toggle {
    min-width: 220px;
}

@media (min-width: 1100px) {
    .dl-workspace.dl-is-wide {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 980px) {
    .dl-builder-body {
        flex-wrap: wrap;
    }
    .dl-canvas {
        flex: 1 1 100%;
    }
    .dl-builder-body .dl-content-palette {
        flex: 1 1 100%;
        width: auto;
    }
}

@media (max-width: 700px) {
    .dl-builder-body {
        flex-direction: column;
        align-items: stretch;
    }
    .dl-tool-rail {
        position: sticky;
        top: 56px;
        flex: none;
        width: 100%;
        max-height: none;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 8px;
    }
    .dl-rail-head {
        flex-shrink: 0;
    }
    .dl-rail-tools {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .dl-rail-tool {
        flex: 0 0 auto;
        min-width: 64px;
    }
    .dl-tool-rail .dl-drag-hint {
        display: none;
    }
    .dl-canvas {
        width: 100%;
    }
    .dl-builder-body .dl-content-palette {
        width: 100%;
    }
}

/* ---------- Development Builder UX correction pass 2: compact rails ---------- */
/* Side palettes align with the actual Builder canvas (viewport) borders via
   grid areas. The jump controls sit above/below the canvas in the middle
   column, never inside the aligned row. Bottom-up orientation unchanged. */
.dl-builder-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        ". top ."
        "rail view content"
        ". bottom .";
    gap: 10px 14px;
    align-items: start;
}

.dl-canvas-top {
    grid-area: top;
    text-align: center;
    min-width: 0;
}

.dl-builder-body .dl-tree-viewport {
    grid-area: view;
    min-width: 0;
    margin: 0;
}

.dl-canvas-bottom {
    grid-area: bottom;
    display: grid;
    gap: 10px;
    justify-items: center;
    min-width: 0;
}

.dl-builder-body > .dl-tool-rail {
    grid-area: rail;
}

.dl-builder-body > .dl-content-palette {
    grid-area: content;
}

/* Right content rail: same narrow width and density as the left tool rail,
   keeping its own distinct colour treatment. */
.dl-builder-body .dl-content-palette {
    flex: none;
    width: 88px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 6px;
    overflow-y: auto;
}

.dl-content-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.dl-content-tab {
    padding: 4px 2px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.dl-content-tab.selected {
    border-color: rgba(192, 132, 252, 0.6);
    background: rgba(192, 132, 252, 0.14);
    color: var(--text);
}

.dl-content-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dl-builder-body .dl-content-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.dl-builder-body .dl-content-item {
    max-width: none;
    padding: 6px 4px;
    gap: 4px;
    flex-direction: column;
    text-align: center;
}

.dl-builder-body .dl-content-item-name {
    white-space: normal;
    font-size: 0.68rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dl-content-empty {
    font-size: 0.72rem;
    text-align: center;
}

.dl-content-palette .dl-drag-hint {
    font-size: 0.66rem;
    text-align: center;
}

/* Key groups: tools, content, and states stay in one compact wrapping row. */
.dl-key-group {
    display: inline-flex;
    align-items: center;
    gap: 6px 12px;
    flex-wrap: wrap;
}

.dl-key-group + .dl-key-group {
    border-left: 1px solid var(--border);
    padding-left: 14px;
}

.dl-key-glyph {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1;
}

.dl-key-item strong {
    font-weight: 600;
    color: var(--text);
}

/* Switch pieces: one compact logical row at desktop widths. */
.dl-switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* The switch control keeps one compact size at any workspace width. */
.dl-move-block {
    max-width: 640px;
}

#dlSwitchMsg:empty {
    display: none;
}

.dl-switch-row .neai-select {
    flex: 1 1 120px;
    min-width: 0;
    padding: 6px 8px;
    font-size: 0.82rem;
}

/* Compact structure rows: label plus control, no giant cards. */
.dl-structure-card {
    padding: 10px 12px;
}

.dl-structure-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.dl-structure-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.dl-structure-row strong {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.dl-structure-row .neai-select {
    padding: 6px 8px;
    font-size: 0.82rem;
    max-width: 200px;
}

.dl-compact-note {
    font-size: 0.8rem;
}

/* Overview counts: neat number badges, no prose. */
.dl-ov-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.dl-ov-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}

.dl-ov-num {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-dim);
    border: 1px solid var(--border-strong);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 700;
}

.dl-ov-cap {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Overview team grouped under role headings. */
.dl-ov-roles {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.dl-ov-role h4 {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-ov-role ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.dl-ov-member {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
}

.dl-ov-member .ap-card {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    background: var(--surface-2);
}

/* Temporary switch-result highlight: border only, never the whole card. */
.dl-card.dl-flash {
    border-color: var(--amber);
    box-shadow: 0 0 0 2px var(--amber);
}

@media (max-width: 980px) {
    .dl-builder-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "top"
            "rail"
            "view"
            "bottom"
            "content";
    }
    .dl-builder-body > .dl-content-palette {
        width: 100%;
    }
    .dl-builder-body .dl-content-items {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .dl-builder-body .dl-content-item {
        flex: 0 0 auto;
        min-width: 72px;
        max-width: 140px;
    }
}

@media (max-width: 700px) {
    .dl-builder-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "top"
            "rail"
            "view"
            "bottom"
            "content";
        align-items: stretch;
    }
    .dl-key-group + .dl-key-group {
        border-left: none;
        padding-left: 0;
    }
    .dl-switch-row {
        flex-wrap: wrap;
    }
    .dl-switch-row .neai-select {
        flex: 1 1 100%;
    }
}

/* ---------- Development Builder UX correction pass 3: polished workspace ---------- */

/* Piece editor sections: purposeful panels with clear hierarchy. */
.dl-ed-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.dl-ed-section > h4 {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dl-ed-section .field {
    margin-bottom: 10px;
}

.dl-ed-section .field:last-child {
    margin-bottom: 0;
}

.dl-ed-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dl-ed-row .field {
    flex: 1;
    min-width: 140px;
}

.dl-completion-record {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.dl-completion-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
}

.dl-completion-list > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
}

.dl-completion-list dt {
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dl-completion-list dd {
    margin: 0;
    color: var(--text);
    font-size: 0.84rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dl-completion-body {
    margin: 12px 0 0;
    max-height: 220px;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.dl-ed-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Contextual help: small yellow ? affordance with a floating bubble that
   never disturbs layout. The bubble floats above the interface. */
.dl-help {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.dl-help-btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--amber);
    background: rgba(251, 191, 36, 0.14);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.dl-help-btn:hover,
.dl-help-btn[aria-expanded="true"] {
    background: var(--amber);
    border-color: var(--amber);
    color: #1a1206;
}

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

.dl-help-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: max-content;
    max-width: 220px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    white-space: normal;
}

/* Work groups: one card per linked Work Item with its own Write-Ups. */
.dl-work-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 8px 10px;
    margin-bottom: 8px;
}

.dl-work-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dl-work-group .dl-work-state {
    margin-top: 6px;
}

.dl-wu-pick {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

.dl-wu-pick-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-work-add {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.dl-work-add .neai-select {
    flex: 1;
    min-width: 0;
}

.dl-work-direct {
    border-style: dashed;
}

.dl-compact-note {
    font-size: 0.8rem;
    margin: 2px 0;
}

/* Drop confirmation modal for Work Items from the content rail. */
.dl-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.dl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 14, 0.6);
}

.dl-modal {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 40px));
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.dl-modal h3 {
    margin-bottom: 8px;
}

.dl-drop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin: 0 0 10px;
}

.dl-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dl-modal-spacer {
    flex: 1;
}

/* Success toast: obvious, temporary, needs no scrolling. */
.dl-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translate(-50%, -12px);
    z-index: 300;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--green-soft);
    border: 1px solid var(--green);
    color: var(--green);
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: calc(100vw - 32px);
}

.dl-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Content rail groups: Work above Write-Ups, each scrolling vertically. */
.dl-content-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.dl-content-group-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: center;
}

.dl-content-scroll {
    max-height: 220px;
    overflow-y: auto;
}

/* Waiting badge names the real related piece and reveals it on demand. */
button.badge.dl-waiting {
    cursor: pointer;
    font: inherit;
}

button.badge.dl-waiting:hover {
    border-color: var(--amber);
}

.dl-content-check {
    flex-shrink: 0;
    color: var(--green);
    font-family: var(--mono);
    font-size: 0.72rem;
}

/* Relationship categories render only when they hold links. */
.dl-rel-cat h5 {
    margin: 6px 0 2px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-rel-cat:first-child h5 {
    margin-top: 0;
}

/* Overview: stat cards with tasteful colour variation. */
.dl-ov-count.is-green .dl-ov-num {
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
}

.dl-ov-count.is-amber .dl-ov-num {
    background: var(--amber-soft);
    border-color: var(--amber);
    color: var(--amber);
}

.dl-ov-count.is-purple .dl-ov-num {
    background: rgba(167, 139, 250, 0.12);
    border-color: var(--accent-2);
    color: var(--accent-2);
}

.dl-ov-count.is-blue .dl-ov-num {
    background: rgba(96, 165, 250, 0.12);
    border-color: #60a5fa;
    color: #60a5fa;
}

/* Overview section cards. */
.dl-ov-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 10px 12px;
    margin-top: 10px;
}

.dl-ov-card > h4 {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.dl-ov-card p {
    margin: 0 0 6px;
}

.dl-ov-card p:last-child {
    margin-bottom: 0;
}

.dl-ov-current-card {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft), var(--surface) 90px);
}

.dl-ov-meta {
    display: grid;
    gap: 4px;
}

.dl-ov-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85rem;
}

.dl-ov-team-cards {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 10px;
}

.dl-ov-team-cards .dl-ov-card {
    margin-top: 0;
}

.dl-ov-team-cards .dl-ov-role ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.dl-ov-team-cards .dl-ov-member-name {
    flex: 0 1 auto;
}

.dl-ov-team-cards .dl-ov-member .ap-info-btn {
    margin-left: 2px;
}

@media (max-width: 700px) {
    .dl-ed-row .field {
        flex: 1 1 100%;
    }
    .dl-modal-actions .btn {
        flex: 1 1 auto;
    }
}

/* ---------- Development Builder UX correction pass 4: targeted fixes ---------- */

/* 1. Pieces statistic uses the red treatment like its siblings. */
.dl-ov-count.is-red .dl-ov-num {
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
}

/* 2/9. Current work beside project information where width allows. */
.dl-ov-mid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.dl-ov-mid > .dl-ov-card {
    margin-top: 0;
    min-width: 0;
}

.dl-ov-current-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.dl-ov-current-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
}

.dl-ov-current-item:hover {
    border-color: var(--accent);
}

.dl-ov-current-item:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-ov-current-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dl-ov-current-who {
    flex-shrink: 0;
    font-size: 0.78rem;
}

/* 3. Write-Up rail list: vertical first, vertical scroll only. */
.dl-content-scroll {
    overflow-x: hidden;
}

/* 10. Save toast: solid, defined box near the top-right. */
.dl-toast {
    top: 16px;
    right: 16px;
    left: auto;
    transform: translateY(-12px);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.dl-toast.show {
    transform: translateY(0);
}

/* 11. Piece editor link-field inputs match the other dark fields. */
.dl-rel-add input[type="text"],
.dl-rel-add input[type="url"],
.dl-res-row input[type="text"],
.dl-res-row input[type="url"] {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--sans);
    padding: 9px 12px;
}

.dl-rel-add input:focus,
.dl-res-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.dl-rel-add input::placeholder,
.dl-res-row input::placeholder {
    color: var(--text-faint);
}

/* 12. Advanced editor sections collapse; closed by default. */
details.dl-ed-details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    padding: 0 14px;
    margin-bottom: 12px;
}

details.dl-ed-details > summary {
    cursor: pointer;
    padding: 12px 0;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

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

details.dl-ed-details > summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}

details.dl-ed-details[open] > summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

details.dl-ed-details .dl-rel-current {
    margin-bottom: 10px;
}

@media (max-width: 720px) {
    .dl-ov-mid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Development Builder UX correction pass 5: targeted fixes ---------- */

/* 4/5. Advanced Options groups Relationships and Resources as nested,
   identically left-aligned panes with standard twisty affordances. */
.dl-advanced > .dl-ed-details-body {
    display: grid;
    gap: 8px;
    padding-bottom: 12px;
}

.dl-advanced-pane {
    margin-bottom: 0;
}

details.dl-ed-details > summary,
.dl-resources > summary {
    justify-content: flex-start;
    text-align: left;
}

.dl-twisty {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-faint);
    width: 1em;
    flex-shrink: 0;
    text-align: center;
}

.dl-twisty::before {
    content: ">";
}

details[open] > summary > .dl-twisty::before {
    content: "v";
}

/* ---------- Structural interaction correction: visible drop zones ---------- */
/* Structural drop zones live inside the bands so they ride along when
   levels move. They stay subtle at rest and stand out while their tool is
   armed or the pointer hovers a valid target. */

/* Insert gaps and join gaps: transparent hit areas with a faint tick. */
.dl-edge-zone,
.dl-joingap {
    position: absolute;
    width: 150px;
    height: 26px;
    padding: 0 10px;
    border: 1px dashed transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dl-joingap {
    width: 170px;
}

.dl-edge-tick {
    width: 8px;
    height: 8px;
    flex: none;
    transform: rotate(45deg);
    border: 1px solid var(--text-faint);
    opacity: 0.35;
}

.dl-zone-label {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Armed tool or hovered/focused zone: full pill treatment. */
.arming-insert .dl-edge-zone,
.dl-edge-zone.preview,
.dl-edge-zone:hover,
.dl-edge-zone:focus-visible,
.arming-join .dl-joingap,
.dl-joingap.preview,
.dl-joingap:hover,
.dl-joingap:focus-visible {
    background: var(--surface-2);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.arming-insert .dl-edge-zone .dl-edge-tick,
.dl-edge-zone.preview .dl-edge-tick,
.dl-edge-zone:hover .dl-edge-tick,
.dl-edge-zone:focus-visible .dl-edge-tick,
.arming-join .dl-joingap .dl-edge-tick,
.dl-joingap.preview .dl-edge-tick,
.dl-joingap:hover .dl-edge-tick,
.dl-joingap:focus-visible .dl-edge-tick {
    opacity: 1;
    border-color: var(--accent);
}

.arming-insert .dl-edge-zone .dl-zone-label,
.dl-edge-zone.preview .dl-zone-label,
.dl-edge-zone:hover .dl-zone-label,
.dl-edge-zone:focus-visible .dl-zone-label,
.arming-join .dl-joingap .dl-zone-label,
.dl-joingap.preview .dl-zone-label,
.dl-joingap:hover .dl-zone-label,
.dl-joingap:focus-visible .dl-zone-label {
    display: inline;
}

.dl-edge-zone:focus-visible,
.dl-joingap:focus-visible,
.dl-merge-dot:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Merge dots sit on structural arrows: faint at rest, glowing while the
   merge tool is armed, labelled on preview. */
.dl-merge-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.45;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.dl-merge-dot::before {
    content: "⋈";
    line-height: 1;
}

.arming-merge .dl-merge-dot {
    opacity: 1;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
}

.dl-merge-dot.preview,
.dl-merge-dot:hover,
.dl-merge-dot:focus-visible {
    opacity: 1;
    border-color: var(--amber);
    background: var(--amber-soft);
}

.dl-merge-label {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--amber);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    pointer-events: none;
}

.dl-merge-dot.preview .dl-merge-label,
.dl-merge-dot:hover .dl-merge-label,
.dl-merge-dot:focus-visible .dl-merge-label {
    display: block;
}

/* Structural preview highlight on the connected cards. */
.dl-card.edge-hi {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}

/* Structural preview highlight on the connector itself. */
.dl-line.edge-hi {
    background: var(--green);
}

/* Destructive toast treatment for deletion feedback. Same box, position,
   and duration as the success toast; red instead of green. */
.dl-toast.danger {
    border-color: var(--red);
    color: var(--red);
}

/* ---------- Per-tile Write-Up version history ---------- */

.dl-writeup-version-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.dl-version-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 10px 12px;
}

.dl-version-card.is-authoritative {
    border-color: var(--green);
    background: var(--green-soft);
}

.dl-version-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dl-version-head > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dl-version-head strong {
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--text);
}

.dl-version-head span:not(.badge) {
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-version-meta {
    margin: 6px 0 0;
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.66rem;
    line-height: 1.5;
}

.dl-version-body {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}

.dl-version-body summary {
    cursor: pointer;
    padding: 6px 9px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    list-style: none;
}

.dl-version-body summary::-webkit-details-marker { display: none; }
.dl-version-body summary::before { content: "▸"; margin-right: 6px; color: var(--text-faint); }
.dl-version-body[open] summary::before { content: "▾"; }

.dl-version-body pre {
    margin: 0;
    max-height: 280px;
    overflow: auto;
    padding: 9px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.dl-version-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.dl-version-current {
    color: var(--green);
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dl-version-empty {
    display: grid;
    gap: 8px;
    justify-items: start;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.dl-version-empty p { margin: 0; }
.dl-version-capture { margin-top: 8px; }
.dl-writeup-versions .msg { min-height: 1.2em; margin-bottom: 0; }

@media (max-width: 640px) {
    .dl-version-head { flex-direction: column; }
    .dl-version-head span:not(.badge) { white-space: normal; }
}

/* ---------- Tile permission policy and per-tile grants ---------- */

.dl-head-actions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.dl-tile-permissions { border-color: var(--accent-2); }
.dl-perm-list { display: grid; gap: 7px; margin-top: 10px; }
.dl-perm-grant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.dl-perm-grant > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-perm-grant strong { font-size: 0.8rem; }
.dl-perm-grant span { color: var(--text-muted); font-size: 0.72rem; }
.dl-perm-add {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: end;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.dl-perm-add .field { margin: 0; }
.dl-perm-grant-check {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.74rem;
    min-height: 34px;
}
.dl-perm-add .btn { margin-bottom: 1px; }

.dl-policy-modal { width: min(680px, calc(100vw - 40px)); }
.dl-policy-checks { display: grid; gap: 8px; margin: 12px 0; }
.dl-policy-checks label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.84rem; }
.dl-policy-fieldset {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
.dl-policy-fieldset legend {
    padding: 0 4px;
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dl-policy-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 12px;
    max-height: 180px;
    overflow: auto;
}
.dl-policy-member { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 0.8rem; }
.dl-policy-fieldset .muted { margin: 0 0 6px; font-size: 0.74rem; }

@media (max-width: 640px) {
    .dl-perm-add { grid-template-columns: 1fr; }
    .dl-perm-add .btn { justify-self: start; }
}