@font-face {
    font-family: "Ubuntu Sans";
    src: url("fonts/UbuntuSans.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 100 800;
}

:root {
    color-scheme: light;
    --ink: #102d49;
    --muted: #60748a;
    --surface: #ffffff;
    --canvas: #edf4f8;
    --mist: #e3eef4;
    --line: #c9d8e4;
    --accent: #0b7b83;
    --accent-strong: #075d78;
    --focus: #075d78;
    --on-accent: #ffffff;
    --on-signal: #102d49;
    --on-danger: #ffffff;
    --on-warning: #ffffff;
    --signal: #f0a342;
    --danger: #a52a2a;
    --warning: #8a5a00;
    --success: #17633a;
    --touch-target-min: 2.75rem;
    --public-header-height: 4.75rem;
    --public-ink: #f8f7f2;
    --public-muted: #b8ceca;
    --public-deep: #08282b;
    --public-teal: #0d504f;
    --paper: #fffdf8;
    --shadow-soft: 0 .75rem 2rem rgb(16 42 47 / 10%);
    font-family: "Ubuntu Sans", "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e8f2f8;
    --muted: #9db1c3;
    --surface: #0f2940;
    --canvas: #071827;
    --mist: #17344c;
    --line: #31526a;
    --accent: #4fd1d7;
    --accent-strong: #74e0e4;
    --focus: #74e0e4;
    --on-accent: #062b37;
    --on-signal: #102d49;
    --on-danger: #3b1111;
    --on-warning: #102d49;
    --signal: #ffc85a;
    --danger: #ff9a9a;
    --warning: #ffd17a;
    --success: #75d49b;
    --paper: #f8f7f2;
    --shadow-soft: 0 1rem 2.5rem rgb(0 0 0 / 28%);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--canvas);
}

html.has-modal-dialog {
    overflow: hidden;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background-color: var(--canvas);
    background-image:
        linear-gradient(rgb(16 45 73 / 3.5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(16 45 73 / 3.5%) 1px, transparent 1px),
        radial-gradient(circle at 86% -8%, rgb(11 123 131 / 12%) 0, transparent 32rem);
    background-size: 48px 48px, 48px 48px, auto;
}

html[data-theme="dark"] body {
    background-image:
        linear-gradient(rgb(126 225 216 / 4%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(126 225 216 / 4%) 1px, transparent 1px),
        radial-gradient(circle at 86% -8%, rgb(56 178 185 / 13%) 0, transparent 32rem);
}

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

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

button,
a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgb(83 216 205 / 22%);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: .75rem;
    left: .75rem;
    min-height: var(--touch-target-min);
    padding: .75rem 1rem;
    border: 2px solid var(--on-accent);
    border-radius: .55rem;
    color: var(--on-accent);
    background: var(--accent-strong);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 24%);
    font-weight: 750;
    text-decoration: none;
    transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
    transform: translateY(0);
}

#main-content:focus-visible {
    outline: 0;
    box-shadow: inset 0 3px 0 var(--focus);
}

@media (forced-colors: active) {
    #main-content:focus-visible {
        box-shadow: none;
        border-block-start: 3px solid Highlight;
    }
}

code,
pre,
.code-editor {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.app-shell {
    min-height: 100vh;
}

.app-header {
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.75rem;
    padding: .65rem max(1rem, env(safe-area-inset-right), calc((100vw - 82rem) / 2))
        .65rem max(1rem, env(safe-area-inset-left), calc((100vw - 82rem) / 2));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 .4rem 1.4rem rgb(11 42 61 / 5%);
    backdrop-filter: blur(16px);
}

.app-header nav {
    display: flex;
    gap: .35rem;
}

.app-header nav a {
    padding: .55rem .75rem;
    border-radius: .55rem;
    color: var(--muted);
    font-weight: 650;
    text-decoration: none;
}

.app-header nav a.active,
.app-header nav a:hover {
    color: var(--accent-strong);
    background: var(--mist);
}

.app-header form {
    margin: 0 0 0 auto;
}

.language-selector {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    color: inherit;
}

.language-selector > summary {
    list-style: none;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .03em;
}

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

.language-selector > summary::after {
    content: "▾";
    font-size: .68rem;
}

.language-selector[open] > summary::after {
    transform: rotate(180deg);
}

.language-selector-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    gap: .2rem;
    width: max-content;
    min-width: 9.5rem;
    margin: 0;
    padding: .4rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.language-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--touch-target-min);
    padding: .55rem .75rem;
    border: 0;
    border-radius: .45rem;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
    cursor: pointer;
}

.language-option:hover,
.language-option:focus-visible {
    background: var(--mist);
}

.language-option[aria-current="true"] {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.app-utilities {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.app-header > .app-utilities .language-selector {
    color: var(--accent-strong);
}

.app-header > .app-utilities + .user-name {
    margin-left: 0;
}

.app-header > .app-utilities ~ form {
    margin-left: 0;
}

.theme-toggle,
.language-selector > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: .5rem .7rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: .7rem;
    color: inherit;
    background: color-mix(in srgb, currentColor 6%, transparent);
    cursor: pointer;
}

.theme-toggle {
    color: var(--accent-strong);
}

.theme-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.language-selector > summary:hover,
.language-selector > summary:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.theme-toggle-sun,
html[data-theme="dark"] .theme-toggle-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle-sun {
    display: inline;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand img {
    display: block;
    width: 9.8rem;
    height: auto;
}

.dokproof-lockup-stack {
    display: grid;
    align-items: center;
}

.dokproof-lockup-stack > img {
    grid-area: 1 / 1;
}

.dokproof-lockup-dark-wordmark {
    display: none;
    pointer-events: none;
}

html[data-theme="dark"] .dokproof-lockup-dark-wordmark {
    display: block;
    clip-path: inset(0 0 0 34%);
    filter: grayscale(1) brightness(0) invert(1);
}

.brand .dokproof-lockup {
    width: 11.5rem;
    margin-block: -2.6rem;
}

.user-name {
    margin-left: auto;
    color: var(--muted);
    font-size: .9rem;
}

.page-content {
    width: min(82rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

body:has(.project-shell, .project-shell-state) .app-header {
    padding-inline: clamp(1rem, 2vw, 2rem);
}

body:has(.project-shell, .project-shell-state) .page-content {
    width: auto;
    max-width: none;
    margin-inline: clamp(1rem, 2vw, 2rem);
}

.page-heading,
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-heading {
    margin: 1.25rem 0 1.5rem;
}

.page-heading[class*="visual-"] {
    position: relative;
}

.page-heading[class*="visual-"]::after {
    display: none;
}

.page-heading[class*="visual-"] > .button-row {
    position: relative;
    margin-left: auto;
}

.page-heading h1 {
    margin-bottom: .35rem;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
    font-weight: 720;
    letter-spacing: -.05em;
}

.page-heading p:last-child,
.hint,
.status {
    color: var(--muted);
}

.eyebrow {
    margin-bottom: .4rem;
    color: var(--accent-strong);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.panel,
.table-panel,
.empty-state,
.project-card,
.source-card,
.artifact-card {
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--surface);
    box-shadow: 0 .25rem 1.5rem rgb(16 42 47 / 6%);
}

.panel,
.empty-state {
    margin: 1rem 0;
    padding: 1.25rem;
}

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

.empty-state.compact {
    box-shadow: none;
}

.table-panel {
    overflow-x: auto;
    margin: 1rem 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

td small {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
}

tbody tr:last-child td {
    border-bottom: 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.project-card,
.source-card {
    display: block;
    padding: 1.2rem;
    color: var(--ink);
    text-decoration: none;
}

.project-card {
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.project-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 .8rem 2rem rgb(16 42 47 / 11%);
}

.project-card strong {
    display: block;
    margin-bottom: .7rem;
    font-size: 1.2rem;
}

.project-card span:last-child {
    color: var(--muted);
    font-size: .85rem;
}

.source-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgb(11 107 100 / 14%);
}

.form-grid,
.version-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

.form-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

label {
    display: grid;
    gap: .4rem;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    padding: .68rem .75rem;
    border: 1px solid #b9c3cd;
    border-radius: .55rem;
    color: var(--ink);
    background: var(--surface);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--accent-strong);
    outline-offset: 2px;
    border-color: var(--accent);
}

.public-header a:focus-visible,
.landing-hero a:focus-visible,
.landing-section-dark a:focus-visible,
.landing-section-knowledge a:focus-visible {
    outline-color: #f8d06f;
}

textarea {
    resize: vertical;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: .65rem .95rem;
    border: 1px solid var(--accent);
    border-radius: .62rem;
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--accent-strong);
}

.button.secondary {
    color: var(--accent-strong);
    background: var(--surface);
}

.button.secondary:hover {
    background: var(--mist);
}

.button.danger {
    border-color: #d7a7a7;
    color: var(--danger);
    background: var(--surface);
}

.button.compact {
    min-height: 2.05rem;
    padding: .45rem .65rem;
    font-size: .82rem;
}

.button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.file-button {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.file-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file-button:focus-within {
    outline: 3px solid var(--accent-strong);
    outline-offset: 2px;
}

.badge {
    display: inline-flex;
    align-items: center;
    margin: .2rem;
    padding: .25rem .45rem;
    border-radius: 999px;
    color: var(--muted);
    background: var(--mist);
    font-size: .7rem;
    font-weight: 800;
}

.badge.warning {
    color: var(--warning);
    background: #fff1cc;
}

.notice {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-left: .25rem solid var(--accent);
    border-radius: .4rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.notice.error {
    border-color: var(--danger);
    color: #7d2020;
    background: #fff0f0;
}

.notice.warning {
    border-color: #d39418;
    color: #654509;
    background: #fff7df;
}

.notice.success {
    border-color: var(--success);
    color: var(--success);
    background: #edf8f1;
}

.dataset-list {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}

.dataset-editor {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
}

.dataset-editor legend {
    padding: 0 .35rem;
    font-weight: 800;
}

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: 1rem 0;
}

.facts div {
    padding: .6rem;
    border-radius: .5rem;
    background: var(--canvas);
}

.facts dt {
    color: var(--muted);
    font-size: .7rem;
    text-transform: uppercase;
}

.facts dd {
    margin: .2rem 0 0;
    font-weight: 750;
}

.definition-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .7rem;
    margin: 1rem 0 0;
}

.definition-list > div {
    min-width: 0;
    padding: .8rem .9rem;
    border-radius: .65rem;
    background: var(--canvas);
}

.definition-list dt {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.definition-list dd {
    min-width: 0;
    margin: .3rem 0 0;
    font-weight: 750;
}

.definition-list dd code {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: .82rem;
    line-height: 1.35;
    word-break: break-word;
}

.compact-list {
    columns: 2;
}

.record-list {
    display: grid;
    gap: .55rem;
}

.record-list details {
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
}

.record-list pre,
.markdown-source pre {
    overflow-x: auto;
    white-space: pre-wrap;
}

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

.breakable {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.proposal-page-heading p:last-child {
    max-width: 48rem;
    line-height: 1.55;
}

.proposal-empty-state {
    padding: clamp(2rem, 6vw, 4.5rem) 1.5rem;
    background:
        linear-gradient(135deg, rgb(11 107 100 / 5%), transparent 55%),
        var(--surface);
}

.proposal-empty-mark {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto .75rem;
    border-radius: 50%;
    place-items: center;
    color: var(--on-accent);
    background: var(--accent);
    font-size: 1.35rem;
    font-weight: 900;
}

.proposal-total-label {
    flex: 0 0 auto;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    font-size: .8rem;
    font-weight: 800;
}

.proposal-inbox-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.proposal-inbox-overview article,
.proposal-action-overview {
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--surface);
    box-shadow: 0 .35rem 1.2rem rgb(16 42 47 / 5%);
}

.proposal-action-overview {
    appearance: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.proposal-action-overview:hover,
.proposal-action-overview:focus-visible,
.proposal-action-overview.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--mist) 64%, var(--surface));
    box-shadow: 0 .5rem 1.4rem rgb(11 107 100 / 13%);
}

.proposal-action-overview:disabled {
    cursor: wait;
}

.proposal-inbox-overview article::before,
.proposal-action-overview::before {
    width: 2rem;
    height: .2rem;
    margin-bottom: .35rem;
    border-radius: 999px;
    background: var(--accent);
    content: "";
}

.proposal-action-overview::before {
    background: var(--signal);
}

.proposal-inbox-overview article.needs-attention::before {
    background: var(--danger);
}

.proposal-inbox-overview span,
.proposal-next-action span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.proposal-action-overview .proposal-action-overview-icon {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    margin-bottom: .15rem;
    border-radius: 50%;
    place-items: center;
    color: var(--on-signal);
    background: var(--signal);
    font-size: 1rem;
    letter-spacing: 0;
}

.proposal-inbox-overview strong,
.proposal-action-overview strong {
    color: var(--ink);
    font-size: 1.8rem;
    line-height: 1;
}

.proposal-inbox-overview small,
.proposal-action-overview small {
    color: var(--muted);
    line-height: 1.35;
}

.proposal-inbox {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 .7rem 2rem rgb(16 42 47 / 6%);
}

.proposal-inbox-heading,
.proposal-action-bar,
.proposal-review-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.proposal-inbox-heading {
    padding: 1.25rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--mist) 42%, var(--surface));
}

.proposal-inbox-heading h2,
.proposal-action-bar h2,
.proposal-review-hero h2 {
    margin-bottom: 0;
}

.proposal-inbox-heading p:last-child {
    max-width: 45rem;
    margin: .35rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.proposal-inbox-toolbar {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) repeat(2, minmax(10rem, 1fr)) auto;
    align-items: end;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.proposal-inbox-toolbar label {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

.proposal-inbox-toolbar label > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.proposal-inbox-toolbar input,
.proposal-inbox-toolbar select {
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    border-radius: .55rem;
}

.proposal-result-count {
    padding: .8rem 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.proposal-toolbar-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    min-width: max-content;
}

.proposal-context-filters {
    min-width: 0;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--mist) 26%, var(--surface));
}

.proposal-context-filters legend {
    padding: 0;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 850;
}

.proposal-context-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 .75rem;
}

.proposal-context-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}

.proposal-context-heading span {
    flex: 0 0 auto;
    padding: .3rem .55rem;
    border-radius: 999px;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--mist) 75%, var(--surface));
    font-size: .72rem;
    font-weight: 800;
}

.proposal-context-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: .75rem;
}

.proposal-context-filter-grid label {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

.proposal-context-filter-grid label > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.proposal-context-filter-grid input,
.proposal-context-filter-grid select {
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    border-radius: .55rem;
}

.proposal-context-filter-grid [aria-invalid="true"] {
    border-color: var(--danger);
}

.proposal-filter-error {
    margin: .65rem 0 0;
    color: var(--danger);
    font-size: .8rem;
    font-weight: 700;
}

.proposal-card-grid {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--canvas) 75%, var(--surface));
}

.proposal-inbox-card {
    position: relative;
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--surface);
    box-shadow: 0 .35rem 1.2rem rgb(16 42 47 / 5%);
}

.proposal-inbox-card::before {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 0;
    width: .2rem;
    border-radius: 0 999px 999px 0;
    background: var(--accent);
    content: "";
}

.proposal-inbox-card.needs-attention::before {
    background: var(--danger);
}

.proposal-inbox-card.requires-action {
    border-color: color-mix(in srgb, var(--signal) 72%, var(--line));
    box-shadow: 0 .55rem 1.5rem rgb(98 70 13 / 10%);
}

.proposal-inbox-card.requires-action::before {
    background: var(--signal);
}

.proposal-card-heading,
.proposal-card-origin,
.proposal-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.proposal-card-context {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: .75rem;
}

.proposal-dataset-mark {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    border-radius: .65rem;
    place-items: center;
    color: #effbf8;
    background: var(--ink);
    font-weight: 900;
}

.proposal-card-context div {
    min-width: 0;
}

.proposal-card-context p {
    margin: 0 0 .2rem;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .045em;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.proposal-card-context h3 {
    max-width: 52rem;
    margin: 0;
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.proposal-card-labels {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

.proposal-action-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .32rem .6rem;
    border: 1px solid #dfb04a;
    border-radius: 999px;
    color: #5f4308;
    background: #fff3cc;
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.2;
}

.proposal-action-badge::before {
    width: .5rem;
    height: .5rem;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--signal);
    content: "";
}

.proposal-card-origin {
    margin: .9rem 0;
    padding: .7rem .8rem;
    border-radius: .55rem;
    color: var(--muted);
    background: var(--canvas);
    font-size: .82rem;
}

.proposal-card-origin strong {
    color: var(--ink);
}

.proposal-card-origin time {
    white-space: nowrap;
}

.proposal-collaboration-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.proposal-collaboration-counts li {
    padding: .4rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    font-size: .76rem;
}

.proposal-collaboration-counts strong {
    color: var(--ink);
}

.proposal-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--mist) 32%, var(--surface));
    list-style: none;
}

.proposal-progress li {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    min-width: 0;
    padding-right: .8rem;
}

.proposal-progress li:not(:last-child)::after {
    position: absolute;
    top: .42rem;
    right: 0;
    left: 1rem;
    z-index: 0;
    height: 2px;
    background: var(--line);
    content: "";
}

.proposal-progress-marker {
    z-index: 1;
    width: .85rem;
    height: .85rem;
    margin-top: .05rem;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
}

.proposal-progress li.complete .proposal-progress-marker {
    border-color: var(--accent);
    background: var(--accent);
}

.proposal-progress li.current .proposal-progress-marker {
    border: .25rem solid var(--signal);
}

.proposal-progress li.error .proposal-progress-marker {
    border-color: var(--danger);
    background: var(--danger);
}

.proposal-progress li.archived .proposal-progress-marker {
    border-color: var(--muted);
    background: color-mix(in srgb, var(--muted) 35%, var(--surface));
}

.proposal-progress li.complete:not(:last-child)::after {
    background: color-mix(in srgb, var(--accent) 65%, var(--line));
}

.proposal-progress li div {
    z-index: 1;
    min-width: 0;
    padding-right: .25rem;
    background: color-mix(in srgb, var(--mist) 32%, var(--surface));
}

.proposal-progress strong,
.proposal-progress small {
    display: block;
}

.proposal-progress strong {
    color: var(--ink);
    font-size: .78rem;
}

.proposal-progress small {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.25;
}

.proposal-card-footer {
    margin-top: 1rem;
}

.proposal-next-action {
    display: grid;
    gap: .2rem;
}

.proposal-next-action strong {
    color: var(--ink);
    font-size: .9rem;
}

.proposal-technical-details {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}

.proposal-technical-details summary {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
    cursor: pointer;
}

.proposal-technical-details dl {
    display: grid;
    gap: .6rem;
    margin: .75rem 0 0;
}

.proposal-technical-details dl div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .5rem;
}

.proposal-technical-details dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.proposal-technical-details dd {
    min-width: 0;
    margin: 0;
    font-size: .75rem;
}

.proposal-filter-empty {
    margin: 1.25rem;
}

.state-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--mist);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.2;
}

.state-label::before {
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--muted);
    content: "";
}

.state-label.success {
    border-color: #a8cdb7;
    color: var(--success);
    background: #edf8f1;
}

.state-label.success::before {
    background: var(--success);
}

.state-label.warning {
    border-color: #e6ca8e;
    color: #654509;
    background: #fff7df;
}

.state-label.warning::before {
    background: #c27b00;
}

.state-label.error {
    border-color: #d7a7a7;
    color: #7d2020;
    background: #fff0f0;
}

.state-label.error::before {
    background: var(--danger);
}

.state-label.unknown {
    border-style: dashed;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.pagination span {
    color: var(--muted);
    font-weight: 700;
}

.proposal-review-hero {
    position: relative;
    overflow: hidden;
    margin: 1rem 0;
    padding: clamp(1.35rem, 4vw, 2.25rem);
    border: 1px solid #214a4b;
    border-radius: 1rem;
    color: #f6fbf9;
    background:
        linear-gradient(115deg, #102a2f 0 67%, #174548 67% 100%);
    box-shadow: 0 .8rem 2rem rgb(16 42 47 / 14%);
}

.proposal-review-hero::after {
    position: absolute;
    right: -4rem;
    bottom: -7rem;
    width: 16rem;
    height: 16rem;
    border: 1.5rem solid rgb(242 184 75 / 14%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.proposal-review-hero .eyebrow {
    color: #9bd7d0;
}

.proposal-human-context {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .8rem 0 0;
    color: #c8d8d6;
    font-size: .86rem;
}

.proposal-human-context strong {
    color: #f6fbf9;
}

.proposal-activity-tabs {
    position: sticky;
    z-index: 5;
    top: 5.35rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin: 1rem 0;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--canvas) 92%, transparent);
    box-shadow: 0 .45rem 1.5rem rgb(16 42 47 / 8%);
    backdrop-filter: blur(14px);
}

.proposal-activity-tabs button {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: .05rem .55rem;
    min-width: 0;
    min-height: 3.5rem;
    padding: .55rem .7rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    color: var(--muted);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.proposal-activity-tabs button > span {
    display: grid;
    grid-row: 1 / 3;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    place-items: center;
    color: var(--muted);
    background: var(--surface);
    font-size: .7rem;
    font-weight: 850;
}

.proposal-activity-tabs strong,
.proposal-activity-tabs small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proposal-activity-tabs strong {
    color: var(--ink);
    font-size: .86rem;
}

.proposal-activity-tabs small {
    font-size: .7rem;
}

.proposal-activity-tabs button:hover,
.proposal-activity-tabs button:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: var(--surface);
}

.proposal-activity-tabs button.active {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    color: var(--accent);
    background: var(--surface);
    box-shadow: inset 0 -.2rem 0 var(--signal);
}

.proposal-activity-tabs button.active > span {
    border-color: var(--accent);
    color: var(--on-accent);
    background: var(--accent);
}

.proposal-activity-tabs i {
    position: absolute;
    top: .45rem;
    right: .45rem;
    width: .55rem;
    height: .55rem;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--danger);
}

.proposal-activity-view[hidden] {
    display: none;
}

.proposal-activity-view {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.proposal-activity-view:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.app-header nav,
.proposal-activity-tabs,
.project-rail-nav,
.inbox-filter-tabs {
    scrollbar-width: none;
}

.app-header nav::-webkit-scrollbar,
.proposal-activity-tabs::-webkit-scrollbar,
.project-rail-nav::-webkit-scrollbar,
.inbox-filter-tabs::-webkit-scrollbar {
    display: none;
}

.proposal-activity-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background:
        linear-gradient(105deg, rgb(11 107 100 / 8%), transparent 52%),
        var(--surface);
}

.proposal-activity-heading h2 {
    margin-bottom: .2rem;
}

.proposal-activity-heading p:last-child {
    max-width: 49rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.inline-action {
    display: inline;
    padding: 0;
    border: 0;
    color: var(--accent);
    background: transparent;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.proposal-application-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--surface);
    box-shadow: 0 .35rem 1.2rem rgb(16 42 47 / 5%);
    list-style: none;
}

.proposal-application-progress li {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    min-width: 0;
    padding-right: .75rem;
}

.proposal-application-progress li:not(:last-child)::after {
    position: absolute;
    top: .43rem;
    right: 0;
    left: 1rem;
    height: 2px;
    background: var(--line);
    content: "";
}

.proposal-application-progress li > span {
    z-index: 1;
    width: .9rem;
    height: .9rem;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
}

.proposal-application-progress li.complete > span {
    border-color: var(--accent);
    background: var(--accent);
}

.proposal-application-progress li.current > span {
    border: .25rem solid var(--signal);
}

.proposal-application-progress li.error > span {
    border-color: var(--danger);
    background: var(--danger);
}

.proposal-application-progress li.complete:not(:last-child)::after {
    background: var(--accent);
}

.proposal-application-progress li > div {
    z-index: 1;
    min-width: 0;
    padding-right: .3rem;
    background: var(--surface);
}

.proposal-application-progress strong,
.proposal-application-progress small {
    display: block;
}

.proposal-application-progress strong {
    color: var(--ink);
    font-size: .82rem;
}

.proposal-application-progress small {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .72rem;
}

.proposal-application-note {
    margin: 0;
}

.proposal-detail-technical {
    margin: 0;
}

.review-workspace {
    margin: 0;
}

.review-workspace .section-heading p:last-child {
    max-width: 42rem;
    margin: .3rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.review-round-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.15rem;
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--mist) 28%, var(--surface));
}

.review-round-empty > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    border-radius: .7rem;
    place-items: center;
    color: var(--on-accent);
    background: var(--accent);
    font-size: .78rem;
    font-weight: 850;
}

.review-round-empty h3 {
    margin-bottom: .3rem;
}

.review-round-empty p {
    max-width: 44rem;
    margin-bottom: .55rem;
    color: var(--muted);
}

.review-round-empty ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .76rem;
    list-style-position: inside;
}

.review-round-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin: 1rem 0;
}

.review-round-overview > div {
    display: grid;
    gap: .25rem;
    padding: .85rem;
    border-left: .2rem solid var(--accent);
    background: var(--canvas);
}

.review-round-overview span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.review-round-overview strong {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.review-list-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--line);
}

.review-list-heading h3 {
    margin-bottom: 0;
}

.review-list-heading > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.review-item-list {
    display: grid;
    gap: .8rem;
    margin-top: .8rem;
}

.review-item-card {
    padding-bottom: .85rem;
}

.review-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem;
    background: color-mix(in srgb, var(--mist) 44%, var(--surface));
}

.review-item-heading > div > span,
.technical-caption {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.review-item-heading h3 {
    margin: .2rem 0 0;
    font-size: 1rem;
}

.review-item-card > label,
.review-item-card > textarea,
.review-item-card > button,
.review-item-card > .button-row,
.review-item-card > blockquote {
    margin-right: .85rem;
    margin-left: .85rem;
}

.review-item-card > label {
    display: block;
    margin-top: .85rem;
    font-weight: 750;
}

.review-item-card > textarea {
    width: calc(100% - 1.7rem);
}

.review-comment {
    margin-top: .85rem;
    padding: .85rem;
    border-left: .25rem solid var(--signal);
    background: var(--canvas);
}

.review-comment p {
    margin-bottom: .35rem;
}

.review-comment footer {
    color: var(--muted);
    font-size: .75rem;
}

.proposal-state-pair {
    z-index: 1;
    display: grid;
    justify-items: end;
    gap: .5rem;
}

.proposal-action-bar {
    margin: 1.5rem 0 .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.proposal-confirmations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.action-confirmation {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface);
    box-shadow: 0 .25rem 1rem rgb(16 42 47 / 5%);
}

.action-confirmation.apply,
.action-confirmation.rebuild {
    border-top: .25rem solid var(--accent);
}

.action-confirmation.reject {
    border-top: .25rem solid var(--danger);
}

.action-confirmation summary,
.operation-card summary {
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
}

.action-confirmation summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.action-confirmation .button {
    min-height: 2.75rem;
}

.action-confirmation > p {
    margin: 1rem 0;
    color: var(--muted);
    line-height: 1.55;
}

.action-confirmation form {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.action-confirmation form .button {
    justify-self: start;
}

.audit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: .65rem;
    margin: 1rem 0 0;
}

.audit-grid div {
    min-width: 0;
    padding: .8rem;
    border-left: .2rem solid var(--line);
    background: var(--canvas);
}

.audit-grid dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.audit-grid dd {
    margin: .3rem 0 0;
    font-weight: 700;
}

.source-application-facts,
.impact-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: .65rem;
    margin: 1rem 0 0;
}

.source-application-facts > div,
.impact-context-grid > div {
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface);
}

.source-application-facts dt,
.impact-context-grid dt {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.source-application-facts dd,
.impact-context-grid dd {
    margin: .3rem 0 0;
    color: var(--ink);
    font-weight: 750;
}

.source-recovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1rem 0;
}

.source-reconciliation-result,
.source-recovery-archive {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-left-width: .3rem;
    border-radius: .8rem;
    background: var(--surface);
}

.source-reconciliation-result.success {
    border-left-color: var(--success);
    background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.source-reconciliation-result.neutral {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.source-reconciliation-result.warning,
.source-recovery-archive {
    border-left-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 8%, var(--surface));
}

.source-recovery-icon {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 .15rem .5rem rgb(16 42 47 / 10%);
    font-weight: 900;
}

.source-reconciliation-result h3,
.source-recovery-archive h3 {
    margin: .1rem 0 .35rem;
    font-size: 1.05rem;
}

.source-reconciliation-result p,
.source-recovery-archive p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.source-reconciliation-result small {
    display: block;
    margin-top: .5rem;
    color: var(--muted);
}

.source-recovery-archive .button {
    margin-top: .8rem;
}

.source-recovery-reason {
    margin-top: .55rem !important;
    color: var(--ink) !important;
}

.source-application-historical-error {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.source-recovery-closeout {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

.source-recovery-closeout summary {
    color: var(--danger);
    font-weight: 850;
    cursor: pointer;
}

.source-recovery-closeout > p,
.source-recovery-closeout > label,
.source-recovery-closeout > small {
    display: block;
    margin-top: .8rem;
}

.source-recovery-closeout > label {
    font-weight: 800;
}

.source-recovery-closeout > textarea {
    width: 100%;
    margin-top: .4rem;
    box-sizing: border-box;
    resize: vertical;
}

.source-recovery-closeout > .button {
    margin-top: 1rem;
}

.source-application-technical,
.impact-technical-details {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
}

.source-application-technical summary,
.impact-technical-details summary {
    width: fit-content;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}

.source-application-technical summary:hover,
.source-application-technical summary:focus-visible,
.impact-technical-details summary:hover,
.impact-technical-details summary:focus-visible {
    color: var(--accent-strong);
}

.source-application-technical pre {
    max-height: 24rem;
    margin: 1rem 0 0;
    padding: .9rem;
    overflow: auto;
    border-radius: .65rem;
    color: #d7f2ed;
    background: var(--ink);
    font-size: .74rem;
}

.impact-summary {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--mist) 28%, var(--surface));
}

.impact-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.impact-metrics > div {
    display: grid;
    gap: .15rem;
    padding: .8rem;
    border-radius: .6rem;
    background: var(--surface);
}

.impact-metrics strong {
    color: var(--ink);
    font-size: 1.45rem;
}

.impact-metrics span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.impact-risks {
    padding: .85rem 1rem;
    border-left: .25rem solid var(--warning);
    background: var(--surface);
}

.impact-risks ul {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
}

.operation-list,
.frozen-diff {
    display: grid;
    gap: .8rem;
    margin-top: 1rem;
}

.operation-card,
.diff-entry {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--surface);
}

.operation-card > div,
.diff-entry > header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem;
    background: color-mix(in srgb, var(--mist) 44%, var(--surface));
}

.operation-card details {
    padding: .75rem;
}

.operation-card pre,
.diff-entry pre {
    overflow-x: auto;
    margin: .75rem 0 0;
    padding: .8rem;
    border-radius: .45rem;
    color: #e9f3f5;
    background: #15242b;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diff-columns > section {
    min-width: 0;
    padding: .9rem;
}

.diff-columns > section + section {
    border-left: 1px solid var(--line);
}

.diff-columns h3 {
    margin-bottom: .5rem;
    color: var(--muted);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.diff-empty {
    margin: 0;
    padding: .8rem;
    border: 1px dashed var(--line);
    border-radius: .45rem;
    color: var(--muted);
    background: var(--canvas);
    font-style: italic;
}

.markdown-source {
    padding: 1.25rem;
    border-radius: .9rem;
    color: #e9f3f5;
    background: #15242b;
}

.studio-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr);
    gap: 1rem;
}

.studio-grid > * {
    min-width: 0;
}

.studio-grid .panel {
    margin: 0;
}

.code-editor,
.preview-frame {
    width: 100%;
    height: min(65vh, 48rem);
    margin: .8rem 0;
    border: 1px solid var(--line);
    border-radius: .55rem;
}

.code-editor {
    padding: 1rem;
    line-height: 1.55;
    overflow: auto;
    box-sizing: border-box;
}

pre.code-editor.help-source,
.help-source {
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.preview-frame {
    background: white;
}

.check-row {
    display: flex;
    align-items: center;
    margin: .8rem 0;
}

.check-row input {
    width: auto;
}

.artifact-list {
    display: grid;
    gap: .75rem;
}

.artifact-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    box-shadow: none;
}

.artifact-card > .notice {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
}

.artifact-card h3 {
    margin-bottom: .35rem;
}

.modal-backdrop {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow-y: auto;
    background: rgb(23 34 45 / 64%);
    overscroll-behavior: contain;
}

.modal-card {
    width: min(34rem, 100%);
    max-height: calc(100dvh - 2rem);
    padding: 1.35rem;
    overflow-y: auto;
    border-radius: .9rem;
    background: var(--surface);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
    overscroll-behavior: contain;
    white-space: normal;
}

@media (max-height: 30rem) {
    .modal-backdrop {
        place-items: start center;
        padding: .5rem;
    }

    .modal-card {
        max-height: calc(100dvh - 1rem);
        padding: 1rem;
    }
}

.modal-card .button-row {
    justify-content: flex-end;
    margin-top: 1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.form-validation-summary {
    margin: 1rem 0;
    padding: .8rem 1rem .8rem 2.2rem;
    border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line));
    border-radius: .7rem;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.form-validation-summary:empty {
    display: none;
}

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    right: 1rem;
    bottom: 1rem;
    display: none;
    max-width: 32rem;
    padding: 1rem;
    border-radius: .6rem;
    color: white;
    background: #7d2020;
    box-shadow: 0 .8rem 2rem rgb(0 0 0 / 24%);
}

#blazor-error-ui .dismiss {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    margin-left: .75rem;
    cursor: pointer;
    font-size: 1.4rem;
}

.landing {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    min-height: min(42rem, calc(100vh - 9rem));
    overflow: hidden;
    border: 1px solid #23474c;
    border-radius: 1.6rem;
    color: #fbf9f4;
    background:
        linear-gradient(115deg, #102a2f 0 63%, #143b40 63% 100%);
    box-shadow: 0 1.6rem 4rem rgb(16 42 47 / 18%);
}

.landing::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(12.5% - 1px),
            rgb(255 255 255 / 5%) calc(12.5% - 1px),
            rgb(255 255 255 / 5%) 12.5%);
    content: "";
    pointer-events: none;
}

.landing-copy {
    align-self: center;
    max-width: 49rem;
    padding: clamp(2rem, 6vw, 5.5rem);
}

.landing-copy .eyebrow {
    color: #9bd7d0;
}

.landing-copy h1 {
    max-width: 14ch;
    margin-bottom: 1.3rem;
    font-size: clamp(2.7rem, 6vw, 5.8rem);
    font-weight: 720;
    line-height: .96;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.landing-copy > p:not(.eyebrow) {
    max-width: 42rem;
    color: #c8d8d6;
    font-size: clamp(1.02rem, 2vw, 1.28rem);
    line-height: 1.6;
}

.landing-copy .button-row {
    margin-top: 2rem;
}

.landing-action {
    border-color: var(--signal);
    color: var(--on-signal);
    background: var(--signal);
}

.landing-action:hover {
    border-color: #ffd276;
    background: #ffd276;
}

.landing-secondary {
    border-color: #7ba39f;
    color: #fbf9f4;
    background: transparent;
}

.landing-secondary:hover {
    color: var(--ink);
    background: #fbf9f4;
}

.landing-mark {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .65rem;
    min-height: 24rem;
    padding: 3rem;
    background:
        radial-gradient(circle at center, rgb(11 107 100 / 35%), transparent 62%);
}

.landing-mark img {
    width: min(21rem, 86%);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 1.5rem 1.5rem rgb(0 0 0 / 22%));
}

.landing-mark span {
    width: min(18rem, 90%);
    padding: .55rem .8rem;
    border-left: .2rem solid var(--signal);
    color: #d5e2df;
    background: rgb(255 255 255 / 6%);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .app-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: .55rem;
    }

    .app-header .brand {
        grid-row: 1;
        grid-column: 1;
    }

    .app-header .brand img {
        width: 7.2rem;
    }

    .app-header nav {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100%;
        overflow-x: auto;
        padding-bottom: .25rem;
        scrollbar-color: var(--accent) transparent;
        scrollbar-width: thin;
    }

    .app-header nav::-webkit-scrollbar {
        display: block;
        height: .25rem;
    }

    .app-header nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--accent);
    }

    .app-header nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .app-header > .language-selector {
        grid-row: 1;
        grid-column: 3;
        margin-left: auto;
    }

    .app-header > .language-selector ~ form {
        grid-row: 1;
        grid-column: 4;
    }

    .user-name {
        display: none;
    }

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

    .page-heading,
    .artifact-card,
    .proposal-inbox-heading,
    .proposal-activity-heading,
    .proposal-action-bar,
    .proposal-review-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .proposal-activity-tabs {
        position: static;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .proposal-activity-tabs button {
        flex: 0 0 10.5rem;
        scroll-snap-align: start;
    }

    .proposal-application-progress {
        grid-template-columns: 1fr;
        gap: .9rem;
    }

    .proposal-application-progress li {
        padding: 0;
    }

    .proposal-application-progress li:not(:last-child)::after {
        top: .8rem;
        bottom: -.95rem;
        left: .4rem;
        width: 2px;
        height: auto;
    }

    .review-round-empty {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .review-round-empty > .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .review-round-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-item-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .proposal-inbox-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proposal-inbox-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .proposal-context-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .proposal-search-field,
    .proposal-toolbar-status {
        grid-column: 1 / -1;
    }

    .proposal-progress {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .proposal-progress li {
        padding: 0;
    }

    .proposal-progress li:not(:last-child)::after {
        top: .75rem;
        bottom: -.85rem;
        left: .38rem;
        width: 2px;
        height: auto;
    }

    .proposal-card-heading,
    .proposal-card-origin,
    .proposal-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .proposal-card-labels {
        justify-content: flex-start;
    }

    .proposal-card-footer .button {
        width: 100%;
    }

    .proposal-state-pair {
        justify-items: start;
    }

    .proposal-confirmations,
    .impact-metrics,
    .diff-columns {
        grid-template-columns: 1fr;
    }

    .diff-columns > section + section {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .compact-list {
        columns: 1;
    }

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

    .landing-mark {
        min-height: 20rem;
        border-top: 1px solid rgb(255 255 255 / 12%);
    }
}

@media (max-width: 480px) {
    .proposal-inbox-overview,
    .proposal-inbox-toolbar,
    .proposal-context-filter-grid {
        grid-template-columns: 1fr;
    }

    .proposal-context-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .proposal-inbox-toolbar > *,
    .proposal-search-field,
    .proposal-toolbar-status {
        grid-column: auto;
    }

    .proposal-card-grid {
        padding: .75rem;
    }

    .proposal-inbox-card {
        padding: 1rem .85rem;
    }

    .proposal-technical-details dl div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .app-header {
        gap: .55rem .35rem;
        padding-right: max(.5rem, env(safe-area-inset-right));
        padding-left: max(.5rem, env(safe-area-inset-left));
    }

    .app-header .brand img {
        width: 5.75rem;
    }

    .app-header nav {
        flex-wrap: nowrap;
        order: initial;
        width: 100%;
        overflow-x: auto;
    }

    .app-header nav a {
        white-space: nowrap;
    }

    .app-header .language-option {
        min-width: 2.6rem;
        padding-right: .35rem;
        padding-left: .35rem;
    }

    .app-header .button.compact {
        padding-right: .6rem;
        padding-left: .6rem;
    }

    .page-content {
        width: min(100% - 1rem, 82rem);
        padding-top: 1rem;
    }

    .landing {
        min-height: 0;
        border-radius: 1rem;
    }

    .landing-copy {
        padding: 2.25rem 1.35rem;
    }

    .landing-copy h1 {
        font-size: clamp(2.45rem, 14vw, 4rem);
    }

    .landing-copy .button {
        width: 100%;
    }

    .landing-mark {
        min-height: 17rem;
        padding: 2rem 1rem;
    }
}

/* Public product surface */
.public-shell {
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--public-ink);
    background: var(--public-deep);
}

.public-header {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    height: var(--public-header-height);
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background: rgb(8 40 43 / 88%);
    backdrop-filter: blur(18px);
}

.public-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(88rem, calc(100% - 2rem));
    height: 100%;
    margin: 0 auto;
}

.public-brand img {
    width: 11.5rem;
    margin-block: -2.8rem;
}

.public-brand {
    overflow: hidden;
    height: 3.25rem;
    padding-inline: .35rem;
    border-radius: .7rem;
    background: transparent;
}

.public-header nav {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.public-header .theme-toggle,
.public-header .language-selector {
    color: #d7e5e2;
}

.public-header nav a:not(.button) {
    padding: .7rem .8rem;
    border-radius: .55rem;
    color: #d7e5e2;
    font-weight: 700;
    text-decoration: none;
}

.public-header nav a:not(.button):hover,
.public-header nav a:not(.button):focus-visible {
    color: white;
    background: rgb(255 255 255 / 8%);
}

.public-login {
    min-height: 2.45rem;
    border-color: var(--signal);
    color: var(--on-signal);
    background: var(--signal);
}

.public-login:hover {
    color: var(--on-accent);
    background: var(--accent-strong);
}

.public-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--public-header-height);
    background: var(--canvas);
}

.public-error {
    width: min(42rem, calc(100% - 2rem));
    margin: 4rem auto;
    padding: 2rem;
    border-radius: 1rem;
    color: var(--ink);
    background: var(--surface);
}

.landing-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    height: calc(100vh - var(--public-header-height));
    height: calc(100svh - var(--public-header-height));
    height: calc(100dvh - var(--public-header-height));
    overflow: hidden;
    padding: clamp(2rem, 5vh, 4rem) max(1rem, calc((100vw - 82rem) / 2));
    padding-block: clamp(2rem, 5dvh, 4rem);
    background:
        radial-gradient(circle at 78% 34%, rgb(24 117 110 / 42%), transparent 32rem),
        linear-gradient(112deg, #08282b 0 58%, #0d4547 100%);
}

.landing-section[id] {
    scroll-margin-top: calc(var(--public-header-height) + 1rem);
}

.landing-hero-video,
.landing-hero-shade {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
}

.landing-hero-video {
    background-image: url("images/hero-report-executive-pt-br.webp");
    background-position: 82% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

html[lang="en"] .landing-hero-video {
    background-image: url("images/hero-report-executive-en.webp");
}

.landing-hero-shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(1 9 22 / 42%), transparent 30%, transparent 72%, rgb(1 9 22 / 52%)),
        linear-gradient(90deg, rgb(1 9 22 / 99%) 0%, rgb(2 15 31 / 97%) 31%, rgb(2 17 34 / 82%) 48%, rgb(2 15 31 / 32%) 72%, rgb(1 9 22 / 12%) 100%);
}

.landing-hero-content {
    width: min(48rem, 64vw);
    padding: clamp(.5rem, 2dvh, 1.5rem) 0;
}

.landing-hero-content .eyebrow,
.landing-section-dark .eyebrow,
.landing-section-knowledge .eyebrow {
    color: #80ddd4;
}

.landing-hero-content h1 {
    max-width: 15ch;
    margin-bottom: clamp(.8rem, 2dvh, 1.4rem);
    font-size: clamp(2.15rem, 3.2vw, 3.6rem);
    font-weight: 740;
    line-height: .92;
    letter-spacing: -.07em;
    text-wrap: balance;
}

.landing-lead {
    max-width: 38rem;
    color: var(--public-muted);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.6;
}

.landing-hero-content .button-row {
    margin-top: clamp(1rem, 3dvh, 2rem);
}

.landing-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: clamp(1.25rem, 4dvh, 2.5rem);
    color: #c4d9d5;
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.landing-section {
    padding: clamp(4rem, 9vw, 8rem) max(1rem, calc((100vw - 82rem) / 2));
    color: var(--ink);
    background: var(--canvas);
}

.landing-section-heading {
    max-width: 52rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.landing-section h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 5vw, 4.25rem);
    line-height: 1;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.landing-section-heading > p:last-child,
.landing-section-knowledge > div > p:last-child {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(16rem, .8fr);
    gap: 1.15rem;
}

.landing-card.source-card,
.canonical-destination {
    min-height: 24rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background: var(--surface);
    box-shadow: 0 1rem 3rem rgb(16 42 47 / 7%);
}

.landing-card.source-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.landing-card.source-card::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background-image:
        linear-gradient(rgb(16 42 47 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(16 42 47 / 5%) 1px, transparent 1px);
    background-size: 2rem 2rem;
    content: "";
}

.landing-card.source-card:hover {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    box-shadow: 0 1.5rem 3.5rem rgb(16 42 47 / 13%);
    transform: translateY(-.35rem);
}

.source-card-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 9.5rem;
    margin-bottom: auto;
    overflow: hidden;
    border-radius: .95rem;
    color: #285d82;
    background:
        radial-gradient(circle at 68% 28%, rgb(255 255 255 / 78%) 0 8%, transparent 9%),
        linear-gradient(145deg, #e8f2f7, #d6e4ec);
}

.source-card-art::before,
.source-card-art::after {
    position: absolute;
    border: 1px solid currentcolor;
    border-radius: 50%;
    opacity: .16;
    content: "";
}

.source-card-art::before {
    width: 12rem;
    height: 12rem;
}

.source-card-art::after {
    width: 8rem;
    height: 8rem;
}

.source-card-art svg {
    z-index: 1;
    width: min(9rem, 58%);
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.source-card-art > span {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: .65rem;
    height: .65rem;
    border: .18rem solid white;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--signal) 24%, transparent);
}

.source-card-sheets .source-card-art {
    color: #147553;
    background:
        radial-gradient(circle at 68% 28%, rgb(255 255 255 / 78%) 0 8%, transparent 9%),
        linear-gradient(145deg, #e4f3eb, #cce7dc);
}

.source-card-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    color: var(--accent-strong);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.source-card-label small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.landing-card.source-card h3 {
    margin: .65rem 0 .55rem;
    font-size: 1.65rem;
}

.landing-card.source-card p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.55;
}

.source-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1.35rem;
}

.source-card-meta span {
    padding: .42rem .62rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: 999px;
    color: var(--muted);
    background: rgb(255 255 255 / 66%);
    font-size: .72rem;
    font-weight: 700;
}

.canonical-destination {
    display: grid;
    align-content: end;
    overflow: hidden;
    border-color: #1d5553;
    color: white;
    background:
        radial-gradient(circle at 90% 5%, rgb(242 184 75 / 25%), transparent 11rem),
        linear-gradient(145deg, #0f605c, var(--public-deep));
}

.canonical-stack {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin-bottom: auto;
}

.canonical-stack > span {
    position: absolute;
    width: 5.7rem;
    height: 4.3rem;
    border: 1px solid rgb(255 255 255 / 36%);
    border-radius: .7rem;
    background: rgb(255 255 255 / 9%);
}

.canonical-stack > span:nth-child(1) {
    top: .7rem;
    left: 1.9rem;
}

.canonical-stack > span:nth-child(2) {
    top: 1.8rem;
    left: 1rem;
}

.canonical-stack > span:nth-child(3) {
    top: 2.9rem;
    left: .1rem;
    border-color: rgb(242 184 75 / 58%);
    background: rgb(242 184 75 / 12%);
}

.canonical-stack strong {
    position: absolute;
    z-index: 1;
    right: .2rem;
    bottom: .3rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: var(--public-deep);
    background: var(--signal);
}

.canonical-destination > span,
.canonical-destination p {
    color: #a9cac5;
}

.canonical-destination > span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.canonical-destination > strong {
    margin: .55rem 0 .7rem;
    font-size: 1.7rem;
}

.canonical-destination p {
    margin-bottom: 1.2rem;
    line-height: 1.55;
}

.canonical-proof {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.canonical-proof span {
    padding: .4rem .55rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 999px;
    color: #d7e9e6;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.landing-section-dark {
    color: white;
    background:
        radial-gradient(circle at 85% 12%, rgb(16 119 110 / 24%), transparent 26rem),
        linear-gradient(135deg, #061f22, #0a3739);
}

.pipeline-heading > p:last-child {
    color: #a9c3bf;
}

.pipeline-board {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 1.4rem;
    background:
        linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px),
        rgb(3 24 26 / 44%);
    background-size: 2.5rem 2.5rem;
}

.document-compose-map {
    display: grid;
    grid-template-columns: minmax(15rem, .88fr) auto minmax(18rem, 1.08fr) auto minmax(16rem, .92fr);
    align-items: stretch;
    gap: clamp(.7rem, 1.4vw, 1.15rem);
    padding: .4rem 0 1.4rem;
}

.compose-inputs,
.compose-outputs,
.compose-engine {
    min-width: 0;
    min-height: 24rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1.1rem;
}

.compose-inputs,
.compose-outputs {
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: 1.2rem;
    background: linear-gradient(155deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
}

.compose-inputs > header,
.compose-outputs > header {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-height: 4.2rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.compose-inputs > header > span,
.compose-outputs > header > span,
.compose-engine > header > span {
    color: var(--signal);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.compose-inputs header small,
.compose-outputs header small,
.compose-engine header small {
    color: #8fd8d0;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.compose-inputs h3,
.compose-outputs h3 {
    margin: .2rem 0 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.compose-node {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: .85rem;
    background: rgb(255 255 255 / 4%);
}

.compose-node-icon {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgb(143 216 208 / 38%);
    border-radius: .75rem;
    color: #d9efeb;
    background: rgb(8 40 43 / 72%);
}

.compose-node-icon svg {
    width: 1.65rem;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.compose-node p,
.compose-outputs li p {
    display: grid;
    gap: .18rem;
    margin: 0;
}

.compose-node small,
.compose-outputs li small {
    color: #9cb9b5;
    line-height: 1.35;
}

.compose-chip {
    grid-column: 2;
    justify-self: start;
    padding: .28rem .45rem;
    border: 1px solid rgb(242 184 75 / 24%);
    border-radius: 999px;
    color: #d9c38e;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.compose-arrow {
    align-self: center;
    color: var(--signal);
    font-size: 1.7rem;
    font-weight: 800;
}

.compose-engine {
    position: relative;
    display: grid;
    align-content: start;
    padding: clamp(1.25rem, 2.3vw, 1.8rem);
    overflow: hidden;
    border-color: rgb(242 184 75 / 38%);
    background:
        radial-gradient(circle at 92% 8%, rgb(242 184 75 / 20%), transparent 10rem),
        linear-gradient(155deg, #0c4a49, #08282b);
    box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 18%);
}

.compose-engine::after {
    position: absolute;
    right: -2rem;
    bottom: -2rem;
    width: 7rem;
    height: 7rem;
    border: 1.2rem solid rgb(83 216 205 / 8%);
    border-radius: 50%;
    content: "";
}

.compose-engine > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.compose-code {
    display: grid;
    gap: .25rem;
    margin: 1.15rem 0;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: .8rem;
    color: #bde8e2;
    background: rgb(2 20 22 / 70%);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .68rem;
    line-height: 1.45;
}

.compose-code span:nth-child(2),
.compose-code span:nth-child(4) {
    color: #f3c96f;
}

.compose-engine h3 {
    max-width: 18rem;
    margin: 0 0 .55rem;
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    line-height: 1.05;
}

.compose-engine > p {
    margin: 0;
    color: #aac3bf;
    line-height: 1.45;
}

.compose-engine-status {
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .05rem .55rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.compose-engine-status > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--public-deep);
    background: var(--signal);
    font-weight: 900;
}

.compose-engine-status small {
    color: #9cb9b5;
}

.compose-outputs ol {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.compose-outputs li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    padding: .72rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: .8rem;
    background: rgb(255 255 255 / 4%);
}

.compose-outputs li > span {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgb(242 184 75 / 36%);
    border-radius: 50%;
    color: var(--signal);
    font-size: .62rem;
    font-weight: 850;
}

.pipeline-proof {
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr) minmax(16rem, .8fr);
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    border: 1px solid rgb(242 184 75 / 26%);
    border-radius: 1rem;
    background: linear-gradient(90deg, rgb(242 184 75 / 13%), rgb(255 255 255 / 4%));
}

.pipeline-proof-mark {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    color: var(--public-deep);
    background: var(--signal);
    font-size: 1.25rem;
    font-weight: 900;
}

.pipeline-proof p {
    display: grid;
    gap: .2rem;
    margin: 0;
}

.pipeline-proof p span {
    color: #8fd8d0;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pipeline-proof p strong {
    font-size: 1.05rem;
}

.pipeline-proof > small {
    color: #aac3bf;
    line-height: 1.45;
}

.landing-section-collaboration {
    background:
        radial-gradient(circle at 8% 92%, rgb(11 107 100 / 10%), transparent 24rem),
        var(--canvas);
}

.collaboration-stage {
    display: grid;
    grid-template-columns: minmax(15rem, .82fr) minmax(18rem, 1fr) minmax(18rem, 1.08fr);
    gap: 1rem;
    align-items: stretch;
}

.proposal-sheet,
.collaboration-roles,
.proposal-flow {
    min-height: 29rem;
    border-radius: 1.2rem;
}

.proposal-sheet {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid var(--line);
    background:
        linear-gradient(90deg, transparent 0 2.7rem, rgb(210 96 77 / 13%) 2.7rem 2.78rem, transparent 2.78rem),
        repeating-linear-gradient(0deg, transparent 0 1.65rem, rgb(16 42 47 / 7%) 1.65rem 1.71rem),
        #fffefa;
    box-shadow: 0 1.2rem 3rem rgb(16 42 47 / 10%);
}

.proposal-sheet::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(225deg, var(--canvas) 49%, var(--line) 50% 51%, #f3efe6 52%);
    content: "";
}

.proposal-sheet header {
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-right: 2.5rem;
}

.proposal-sheet header > span {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .8rem;
    color: var(--on-accent);
    background: var(--accent);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.proposal-sheet header div,
.proposal-sheet footer {
    display: grid;
    gap: .15rem;
}

.proposal-sheet header small,
.proposal-sheet footer span {
    color: var(--muted);
    font-size: .73rem;
}

.proposal-sheet header strong {
    line-height: 1.25;
}

.proposal-diff {
    align-self: center;
    display: grid;
    gap: .7rem;
    padding: 1.4rem .4rem 1rem 2.2rem;
}

.proposal-diff span {
    display: block;
    width: 88%;
    height: .68rem;
    border-radius: 999px;
    background: #dce5e2;
}

.proposal-diff .is-removed {
    width: 76%;
    background: #efc7bf;
}

.proposal-diff .is-added {
    background: #acd9c2;
}

.proposal-diff .short {
    width: 56%;
}

.proposal-sheet footer {
    margin-left: 2.2rem;
    padding: .8rem;
    border-left: .2rem solid var(--signal);
    background: rgb(255 255 255 / 74%);
}

.collaboration-roles {
    display: grid;
    align-content: start;
    padding: clamp(1.35rem, 2.5vw, 2rem);
    color: white;
    background:
        radial-gradient(circle at 95% 0, rgb(242 184 75 / 20%), transparent 12rem),
        var(--public-deep);
    box-shadow: 0 1.2rem 3rem rgb(16 42 47 / 12%);
}

.collaboration-roles-heading {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.collaboration-roles-heading > span {
    color: var(--signal);
    font-size: 1.6rem;
}

.collaboration-roles-heading small {
    color: #8fd8d0;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.collaboration-roles h3 {
    margin: .3rem 0 0;
    font-size: 1.2rem;
    line-height: 1.3;
}

.collaboration-roles ul {
    display: grid;
    gap: .7rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.collaboration-roles li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: .85rem;
    background: rgb(255 255 255 / 5%);
}

.collaboration-roles li > span {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgb(242 184 75 / 48%);
    border-radius: 50%;
    color: var(--signal);
    font-weight: 850;
}

.collaboration-roles li p {
    display: grid;
    gap: .1rem;
    margin: 0;
}

.collaboration-roles li small {
    color: #a9c3bf;
    line-height: 1.35;
}

.proposal-flow {
    display: grid;
    align-content: center;
    gap: 0;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 1.2rem 3rem rgb(16 42 47 / 8%);
    list-style: none;
}

.proposal-flow li {
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: .8rem;
    min-height: 4.55rem;
    padding: .65rem .5rem;
}

.proposal-flow li:not(:last-child)::before {
    position: absolute;
    top: 3.25rem;
    bottom: -.75rem;
    left: 1.78rem;
    width: 1px;
    background: color-mix(in srgb, var(--accent) 42%, var(--line));
    content: "";
}

.proposal-flow li > span {
    z-index: 1;
    display: grid;
    place-items: center;
    align-self: start;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid color-mix(in srgb, var(--accent) 56%, var(--line));
    border-radius: 50%;
    color: var(--accent-strong);
    background: var(--canvas);
    font-size: .7rem;
    font-weight: 850;
}

.proposal-flow li:last-child > span {
    border-color: var(--signal);
    color: var(--on-signal);
    background: var(--signal);
}

.proposal-flow p {
    display: grid;
    gap: .2rem;
    margin: .15rem 0 0;
}

.proposal-flow strong {
    font-size: 1.02rem;
}

.proposal-flow small {
    color: var(--muted);
    line-height: 1.4;
}

.landing-section-knowledge {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    align-items: end;
    gap: 3rem;
    color: white;
    background:
        radial-gradient(circle at 90% 20%, rgb(242 184 75 / 16%), transparent 28rem),
        #061f22;
}

.landing-section-knowledge > div > p:last-child {
    color: #a9c3bf;
}

.landing-final-action {
    padding: 1.5rem;
    border-left: .2rem solid var(--signal);
    background: rgb(255 255 255 / 5%);
}

.landing-final-action p {
    color: #d2e2df;
    line-height: 1.55;
}

.landing-final-links {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

html:not([data-theme="dark"]) .public-shell {
    color: var(--ink);
    background: var(--canvas);
}

html:not([data-theme="dark"]) .public-header {
    border-bottom-color: color-mix(in srgb, var(--line) 78%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 .35rem 1.4rem rgb(16 45 73 / 7%);
}

html:not([data-theme="dark"]) .public-header .theme-toggle,
html:not([data-theme="dark"]) .public-header .language-selector,
html:not([data-theme="dark"]) .public-header nav a:not(.button) {
    color: var(--ink);
}

html:not([data-theme="dark"]) .public-header nav a:not(.button):hover,
html:not([data-theme="dark"]) .public-header nav a:not(.button):focus-visible {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

html:not([data-theme="dark"]) .landing-hero {
    color: var(--ink);
    background: #e8f1f0;
}

html:not([data-theme="dark"]) .landing-hero-video {
    background-color: transparent;
    background-blend-mode: normal;
    filter: brightness(1.06) saturate(1.12) contrast(1.04);
}

html:not([data-theme="dark"]) .landing-hero-shade {
    background: linear-gradient(90deg, rgb(249 252 251 / 99%) 0%, rgb(244 249 248 / 97%) 36%, rgb(239 247 246 / 82%) 52%, rgb(233 244 242 / 22%) 65%, transparent 76%);
}

html:not([data-theme="dark"]) .landing-hero-content .eyebrow {
    color: var(--accent-strong);
}

html:not([data-theme="dark"]) .landing-lead,
html:not([data-theme="dark"]) .landing-scroll-cue {
    color: #3e5c60;
}

html:not([data-theme="dark"]) .landing-secondary {
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

html:not([data-theme="dark"]) .landing-secondary:hover {
    color: white;
    background: var(--accent-strong);
}

html[data-theme="dark"] .landing-secondary:hover {
    color: #061f22;
}

html[data-theme="dark"] .source-card-art {
    color: #77b7df;
    background:
        radial-gradient(circle at 68% 28%, rgb(130 207 235 / 14%) 0 8%, transparent 9%),
        linear-gradient(145deg, #142f43, #0d2536);
}

html[data-theme="dark"] .source-card-sheets .source-card-art {
    color: #65c59f;
    background:
        radial-gradient(circle at 68% 28%, rgb(113 214 171 / 14%) 0 8%, transparent 9%),
        linear-gradient(145deg, #12382f, #0d2924);
}

html[data-theme="dark"] .source-card-meta span {
    color: #c4d5df;
    background: color-mix(in srgb, var(--surface) 82%, var(--mist));
}

html[data-theme="dark"] .proposal-sheet {
    background:
        linear-gradient(90deg, transparent 0 2.7rem, rgb(225 126 105 / 22%) 2.7rem 2.78rem, transparent 2.78rem),
        repeating-linear-gradient(0deg, transparent 0 1.65rem, rgb(220 235 242 / 8%) 1.65rem 1.71rem),
        #172934;
    box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 22%);
}

html[data-theme="dark"] .proposal-sheet::before {
    background: linear-gradient(225deg, var(--canvas) 49%, var(--line) 50% 51%, #243a46 52%);
}

html[data-theme="dark"] .proposal-sheet footer {
    background: rgb(255 255 255 / 6%);
}

html[data-theme="dark"] .proposal-diff span {
    background: #405662;
}

html[data-theme="dark"] .proposal-diff .is-removed {
    background: #74473f;
}

html[data-theme="dark"] .proposal-diff .is-added {
    background: #2d684e;
}

@media (max-width: 1024px) {
    .landing-hero-video {
        background-position: 68% 50%;
    }

    .landing-hero {
        background: var(--public-deep);
    }
}

@media (max-width: 900px) {
    .landing-hero-content {
        width: min(44rem, 100%);
    }

    html:not([data-theme="dark"]) .landing-hero-shade {
        background: linear-gradient(90deg, rgb(249 252 251 / 98%), rgb(239 247 246 / 94%));
    }

    html[data-theme="dark"] .landing-hero-shade {
        background: linear-gradient(90deg, rgb(1 9 22 / 98%), rgb(2 17 34 / 94%));
    }

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

    .canonical-destination {
        grid-column: 1 / -1;
    }

    .landing-section-knowledge {
        grid-template-columns: 1fr;
    }

    .compose-arrow {
        display: none;
    }

    .document-compose-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compose-inputs,
    .compose-engine,
    .compose-outputs {
        min-height: 0;
    }

    .compose-outputs {
        grid-column: 1 / -1;
    }

    .compose-outputs ol {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pipeline-proof {
        grid-template-columns: auto 1fr;
    }

    .pipeline-proof > small {
        grid-column: 2;
    }

    .collaboration-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proposal-flow {
        grid-column: 1 / -1;
        min-height: 0;
    }
}

@media (max-width: 600px) {
    :root {
        --public-header-height: 4.25rem;
    }

    .public-header-inner {
        width: calc(100% - 1rem);
    }

    .public-brand {
        flex: 0 0 auto;
    }

    .public-brand .dokproof-lockup {
        width: 7.8rem;
        margin-block: -1.6rem;
    }

    .public-header nav {
        gap: .2rem;
    }

    .public-header nav a:not(.button) {
        padding-inline: .5rem;
    }

    .public-login {
        min-height: 2.2rem;
        padding: .55rem .7rem;
    }

    .landing-hero {
        align-items: end;
        padding-bottom: 2.5rem;
    }

    .landing-hero-content h1 {
        font-size: clamp(2.65rem, 15vw, 4.4rem);
    }

    .landing-hero-content .button {
        width: 100%;
    }

    .source-grid,
    .document-compose-map,
    .collaboration-stage,
    .proposal-flow {
        grid-template-columns: 1fr;
    }

    .canonical-destination,
    .compose-outputs,
    .proposal-flow {
        grid-column: auto;
    }

    .compose-outputs ol {
        grid-template-columns: 1fr;
    }

    .pipeline-proof {
        grid-template-columns: 1fr;
    }

    .pipeline-proof > small {
        grid-column: auto;
    }

    .proposal-flow li {
        grid-template-columns: 2.6rem 1fr;
    }

    .proposal-flow li:not(:last-child)::before {
        top: 3.25rem;
        right: auto;
        bottom: -.75rem;
        left: 1.78rem;
        width: 1px;
        height: auto;
    }

    .landing-final-links .button {
        width: 100%;
    }

}

@media (max-height: 650px) {
    .landing-hero {
        align-items: center;
        padding-block: .75rem;
    }

    .landing-hero-content {
        width: min(52rem, 100%);
        padding-block: 0;
    }

    .landing-hero-content .eyebrow,
    .landing-scroll-cue {
        display: none;
    }

    .landing-hero-content h1 {
        max-width: min(100%, 24ch);
        margin-bottom: .5rem;
        font-size: clamp(2.6rem, min(6vw, 10dvh), 5rem);
        line-height: .95;
    }

    .landing-lead {
        margin-bottom: 0;
        font-size: .95rem;
        line-height: 1.35;
    }

    .landing-hero-content .button-row {
        margin-top: .75rem;
    }
}

@media (max-height: 650px) and (orientation: landscape) {
    .landing-hero-content .button {
        width: auto;
    }
}

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

/* Project workspace */
.project-shell {
    display: grid;
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.project-shell.is-rail-collapsed {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 1rem;
}

.project-rail {
    position: sticky;
    top: 5.75rem;
    display: grid;
    gap: 1.4rem;
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    padding: 1.2rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 1.1rem;
    color: #f8f5ed;
    background:
        radial-gradient(circle at 100% 0, rgb(28 116 108 / 45%), transparent 48%),
        linear-gradient(155deg, #0a3033, #071f22 72%);
    box-shadow: 0 1rem 2.5rem rgb(10 48 51 / 16%);
    scrollbar-width: thin;
}

.project-rail-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.project-rail-toggle {
    display: grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: .55rem;
    color: #d8ebe7;
    background: rgb(255 255 255 / 7%);
    font: inherit;
    font-size: 1.25rem;
    cursor: pointer;
}

.project-rail-toggle:hover {
    color: white;
    background: rgb(255 255 255 / 13%);
}

.project-rail-compact-identity {
    display: none;
}

.project-rail-heading h2 {
    margin: 0 0 .25rem;
    overflow-wrap: anywhere;
    color: inherit;
    font-size: 1.35rem;
    line-height: 1.15;
}

.project-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: #b9d5d1;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.project-shell.is-rail-collapsed .project-rail {
    gap: .75rem;
    padding: .45rem;
    overflow-x: hidden;
}

.project-shell.is-rail-collapsed .project-rail-tools {
    display: grid;
    justify-content: center;
}

.project-shell.is-rail-collapsed .project-back-link,
.project-shell.is-rail-collapsed .project-rail-toggle {
    justify-self: center;
}

.project-shell.is-rail-collapsed .project-rail-copy,
.project-shell.is-rail-collapsed .project-rail-link-copy,
.project-shell.is-rail-collapsed .project-rail-heading > :not(.project-rail-compact-identity),
.project-shell.is-rail-collapsed .project-rail-footnote p {
    display: none;
}

.project-shell.is-rail-collapsed .project-rail-compact-identity {
    display: grid;
    width: 2rem;
    height: 2rem;
    margin-inline: auto;
    place-items: center;
    border-radius: 50%;
    color: #0a3033;
    background: var(--signal);
    font-weight: 900;
}

.project-shell.is-rail-collapsed .project-rail-link,
.project-shell.is-rail-collapsed .project-rail-footnote {
    grid-template-columns: 2rem;
    justify-content: center;
    padding-inline: .45rem;
}

.project-shell.is-rail-collapsed .project-rail-footnote {
    justify-items: center;
}

.project-back-link:hover {
    color: white;
}

.project-rail-kicker,
.project-rail-identifier {
    margin-bottom: .3rem;
    color: #9cc4bf;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.project-rail-identifier {
    margin-bottom: .8rem;
    overflow-wrap: anywhere;
    color: #b9d5d1;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: none;
}

.project-lifecycle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    color: #d8ebe7;
    background: rgb(255 255 255 / 7%);
    font-size: .72rem;
    font-weight: 800;
}

.project-lifecycle::before {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #58d2bd;
    content: "";
}

.project-lifecycle.is-archived::before {
    background: #f7bd48;
}

.project-rail-nav {
    display: grid;
    gap: .35rem;
}

.project-rail-link {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-height: 3.65rem;
    padding: .65rem .7rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    color: #d8ebe7;
    text-decoration: none;
}

.project-rail-link:hover {
    border-color: rgb(255 255 255 / 10%);
    color: white;
    background: rgb(255 255 255 / 7%);
}

.project-rail-link.is-current {
    border-color: rgb(247 189 72 / 34%);
    color: white;
    background: linear-gradient(90deg, rgb(247 189 72 / 18%), rgb(255 255 255 / 7%));
    box-shadow: inset .18rem 0 var(--signal);
}

.project-rail-link strong,
.project-rail-link small {
    display: block;
}

.project-rail-link strong {
    font-size: .9rem;
}

.project-rail-link small {
    margin-top: .1rem;
    overflow: hidden;
    color: #9cc4bf;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-rail-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: .55rem;
    background: rgb(255 255 255 / 6%);
    font-size: 1rem;
}

.project-rail-link.is-current .project-rail-icon {
    border-color: rgb(247 189 72 / 28%);
    color: var(--signal);
    background: rgb(247 189 72 / 10%);
}

.project-rail-footnote {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .65rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

.project-rail-footnote > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    color: #0a3033;
    background: var(--signal);
    font-weight: 900;
}

.project-rail-footnote p,
.project-rail-footnote small {
    margin: 0;
}

.project-rail-footnote strong,
.project-rail-footnote small {
    display: block;
}

.project-rail-footnote strong {
    font-size: .77rem;
}

.project-rail-footnote small {
    margin-top: .2rem;
    color: #9cc4bf;
    font-size: .68rem;
    line-height: 1.4;
}

.project-workspace {
    min-width: 0;
}

.project-breadcrumb {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.project-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-breadcrumb li {
    min-width: 0;
}

.project-breadcrumb li + li {
    display: flex;
    align-items: center;
    gap: .55rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-breadcrumb li + li::before {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--muted) 58%, transparent);
    content: "/";
}

.project-breadcrumb a {
    color: var(--accent-strong);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

.button-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.project-mobile-context {
    display: none;
}

.project-shell-state {
    display: grid;
    min-height: 18rem;
    place-content: center;
    justify-items: center;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    text-align: center;
    background: var(--surface);
}

.project-shell-state-mark {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: .75rem;
    border: .4rem solid var(--mist);
    border-top-color: var(--accent);
    border-radius: 50%;
}

.project-overview-heading {
    align-items: end;
}

.project-overview-heading h1 {
    max-width: 18ch;
}

.overview-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.overview-metric {
    display: grid;
    min-height: 9.5rem;
    align-content: space-between;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    color: var(--ink);
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--mist) 48%, var(--surface)));
    text-decoration: none;
}

.overview-metric:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 .65rem 1.6rem rgb(16 42 47 / 8%);
}

.overview-metric > span {
    color: var(--accent-strong);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.overview-metric strong {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.overview-metric small {
    color: var(--muted);
    line-height: 1.35;
}

.overview-metric.is-loading span {
    display: block;
    height: 1rem;
    border-radius: .3rem;
    background: var(--mist);
}

.overview-metric.is-loading span:last-child {
    width: 65%;
    height: 2.5rem;
}

.overview-next-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 2rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid color-mix(in srgb, var(--signal) 48%, var(--line));
    border-radius: 1rem;
    background: linear-gradient(
        110deg,
        color-mix(in srgb, var(--signal) 12%, var(--surface)),
        var(--surface) 62%);
}

.overview-next-action h2,
.overview-next-action p {
    margin-bottom: .25rem;
}

.overview-next-action p:last-child {
    margin-bottom: 0;
    color: var(--muted);
}

.overview-next-mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: .8rem;
    color: #0a3033;
    background: var(--signal);
    font-size: 1.4rem;
    font-weight: 900;
}

.overview-integrity,
.overview-flow,
.overview-activity {
    margin: 2rem 0 0;
}

.overview-integrity {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 100% 0, rgb(15 111 104 / 10%), transparent 22rem),
        var(--surface);
}

.overview-integrity > header,
.overview-activity > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid var(--line);
}

.overview-integrity h2,
.overview-integrity p,
.overview-activity h2,
.overview-activity p {
    margin-bottom: 0;
}

.overview-integrity-state {
    flex: 0 0 auto;
    padding: .45rem .7rem;
    border: 1px solid currentcolor;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .04em;
}

.overview-integrity-state.is-ok {
    color: #176d55;
    background: #edf9f3;
}

.overview-integrity-state.is-warning {
    color: #8a5700;
    background: #fff7df;
}

.overview-integrity-state.is-neutral {
    color: #536a6c;
    background: #eef3f2;
}

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

.overview-integrity-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    min-height: 8.5rem;
    padding: 1.15rem;
    border-right: 1px solid var(--line);
}

.overview-integrity-grid article:last-child {
    border-right: 0;
}

.overview-integrity-grid article div {
    display: grid;
    align-content: start;
    gap: .25rem;
}

.overview-integrity-grid small,
.overview-integrity-grid p {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35;
}

.overview-integrity-grid strong {
    font-size: .9rem;
    line-height: 1.3;
}

.overview-signal {
    width: .7rem;
    height: .7rem;
    margin-top: .25rem;
    border: 2px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px currentcolor;
}

.overview-signal.is-ok {
    color: #238665;
    background: currentcolor;
}

.overview-signal.is-warning {
    color: #c17b00;
    background: currentcolor;
}

.overview-signal.is-neutral {
    color: #829395;
    background: var(--surface);
}

.overview-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.overview-flow-grid > a {
    display: grid;
    min-height: 14rem;
    align-content: start;
    padding: 1.2rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
}

.overview-flow-grid > a:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.overview-flow-grid h3 {
    margin: .8rem 0 .4rem;
    font-size: 1.1rem;
}

.overview-flow-grid p {
    margin-bottom: 1rem;
    color: var(--muted);
}

.overview-flow-grid strong {
    margin-top: auto;
    color: var(--accent-strong);
    font-size: .82rem;
}

.overview-flow-index {
    color: var(--signal-strong);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.overview-activity {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
}

.overview-project-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.overview-project-meta span {
    padding: .35rem .55rem;
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .7rem;
    font-weight: 800;
}

.overview-activity-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.overview-activity-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(9rem, auto);
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.35rem;
    border-bottom: 1px solid var(--line);
}

.overview-activity-list li:last-child {
    border-bottom: 0;
}

.overview-activity-mark {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border-radius: .65rem;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .03em;
}

.overview-activity-list li > div {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.overview-activity-list li > div strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-activity-list small,
.overview-activity-list time {
    color: var(--muted);
    font-size: .72rem;
}

.overview-activity-list time {
    text-align: right;
}

.overview-activity-list .status-badge {
    padding: .3rem .5rem;
    border-radius: 999px;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--mist) 75%, var(--surface));
    font-size: .68rem;
    font-weight: 800;
}

.overview-activity-list .status-badge.is-complete {
    color: #176d55;
    background: #edf9f3;
}

.overview-activity-list .status-badge.is-pending {
    color: #805100;
    background: #fff4d2;
}

.overview-activity-list .status-badge.is-danger {
    color: #973b33;
    background: #fff0ed;
}

.overview-activity-empty {
    padding: 1.4rem;
    color: var(--muted);
}

.overview-activity-empty.is-unavailable {
    color: #7f332d;
    background: #fff7f4;
}

@media (max-width: 1040px) {
    body:has(.project-shell, .project-shell-state) .app-header {
        gap: 1rem;
    }

    body:has(.project-shell, .project-shell-state) .app-header .brand img {
        width: 7.2rem;
    }

    .project-shell {
        grid-template-columns: 13rem minmax(0, 1fr);
    }

    .project-rail-link {
        grid-template-columns: 1.8rem minmax(0, 1fr);
        padding-inline: .55rem;
    }

    .project-rail-icon {
        width: 1.8rem;
        height: 1.8rem;
    }

    .project-shell.is-rail-collapsed {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .project-shell.is-rail-collapsed .project-rail-link,
    .project-shell.is-rail-collapsed .project-rail-footnote {
        grid-template-columns: 1.8rem;
    }

    .overview-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-integrity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-integrity-grid article:nth-child(2) {
        border-right: 0;
    }

    .overview-integrity-grid article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 1000px) {
    .project-shell,
    .project-shell.is-rail-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-rail {
        position: static;
        display: block;
        max-height: none;
        overflow: hidden;
        padding: .75rem;
        border-radius: .9rem;
    }

    .project-rail-tools,
    .project-rail-heading,
    .project-rail-footnote {
        display: none;
    }

    .project-shell.is-rail-collapsed .project-rail {
        padding: .75rem;
    }

    .project-shell.is-rail-collapsed .project-rail-link-copy {
        display: block;
    }

    .project-rail-nav {
        display: flex;
        gap: .35rem;
        overflow-x: auto;
        padding-bottom: .4rem;
        scrollbar-color: var(--signal) transparent;
        scrollbar-width: thin;
    }

    .project-rail-nav::-webkit-scrollbar {
        display: block;
        height: .28rem;
    }

    .project-rail-nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--signal);
    }

    .project-rail-link {
        flex: 0 0 auto;
        grid-template-columns: auto;
        min-height: 2.75rem;
        padding: .55rem .75rem;
        text-align: center;
    }

    .project-rail-link small,
    .project-rail-icon {
        display: none;
    }

    .project-rail-link.is-current {
        box-shadow: inset 0 -.18rem var(--signal);
    }

    .project-mobile-context {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: .75rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--line);
    }

    .project-mobile-context span {
        overflow: hidden;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .project-mobile-context small {
        color: var(--muted);
    }

    .project-breadcrumb {
        margin-bottom: .65rem;
    }

    .project-overview-heading,
    .overview-next-action {
        grid-template-columns: minmax(0, 1fr);
    }

    .overview-integrity > header,
    .overview-activity > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .overview-project-meta {
        justify-content: flex-start;
    }

    .overview-activity-list li {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .overview-activity-list time {
        grid-column: 2 / -1;
        text-align: left;
    }

    .project-overview-heading {
        align-items: start;
    }

    .overview-flow-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .overview-flow-grid > a {
        min-height: 11rem;
    }

    .overview-next-action .button {
        justify-self: start;
    }
}

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

    .overview-metric {
        min-height: 8rem;
    }

    .overview-integrity-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .overview-integrity-grid article,
    .overview-integrity-grid article:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .overview-integrity-grid article:last-child {
        border-bottom: 0;
    }

    .overview-activity-list li {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .overview-activity-list .status-badge,
    .overview-activity-list time {
        grid-column: 2;
        justify-self: start;
    }
}

/* Public help and protected tutorial */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.public-help-hero,
.public-help-lab,
.public-help-components,
.public-help-cta {
    padding-inline: max(1rem, calc((100vw - 82rem) / 2));
}

.public-help-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr);
    align-items: end;
    gap: clamp(2rem, 8vw, 8rem);
    min-height: min(43rem, calc(100svh - var(--public-header-height)));
    min-height: min(43rem, calc(100dvh - var(--public-header-height)));
    padding-block: clamp(4rem, 9vw, 8rem);
    background:
        radial-gradient(circle at 78% 18%, rgb(19 117 109 / 38%), transparent 28rem),
        linear-gradient(125deg, #062326, #0b3c3e);
}

.public-help-hero .eyebrow,
.public-help-cta .eyebrow {
    color: #7fe0d6;
}

.public-help-hero h1 {
    max-width: 14ch;
    margin-bottom: 1.5rem;
    font-size: clamp(3rem, 7vw, 6.2rem);
    line-height: .94;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.public-help-hero h1,
.public-help-cta h2 {
    color: #fffaf2;
}

.public-help-hero > div:first-child > p:last-child {
    max-width: 44rem;
    margin-bottom: 0;
    color: #bdd2ce;
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    line-height: 1.65;
}

.public-help-safety {
    display: grid;
    gap: .5rem;
    padding: 1.25rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 1rem;
    background: rgb(255 255 255 / 6%);
}

.public-help-safety span {
    padding: .75rem .85rem;
    border-left: .2rem solid var(--signal);
    color: #e7f0ee;
    background: rgb(255 255 255 / 5%);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-help-lab {
    padding-block: clamp(4rem, 8vw, 7rem);
    color: var(--ink);
    background: var(--canvas);
}

.public-help-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.public-help-heading h2,
.public-help-components h2,
.public-help-cta h2 {
    margin-bottom: 0;
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.public-help-heading > p {
    max-width: 28rem;
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.5;
    text-align: right;
}

.public-help-workspace {
    display: grid;
    grid-template-columns: minmax(20rem, .9fr) minmax(22rem, 1.1fr);
    min-height: 40rem;
    overflow: hidden;
    border: 1px solid #21494c;
    border-radius: 1.25rem;
    background: #0a2d30;
    box-shadow: 0 1.8rem 5rem rgb(16 42 47 / 18%);
}

.public-help-editor,
.public-help-preview {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.public-help-editor {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    border-right: 1px solid rgb(255 255 255 / 12%);
}

.public-help-preview {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(28rem, 1fr) auto;
    color: #102d49;
    background: #f0eee8;
}

.public-help-pane-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    margin-bottom: 1rem;
}

.public-help-pane-heading > div {
    display: grid;
    gap: .2rem;
}

.public-help-editor .public-help-pane-heading strong {
    color: white;
}

.workspace-kicker,
.public-help-ephemeral {
    color: #466864;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-help-editor .workspace-kicker {
    color: #7ed9d0;
}

.public-help-code {
    width: 100%;
    min-height: 31rem;
    resize: vertical;
    padding: 1.1rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: .7rem;
    outline: 0;
    color: #edf6f4;
    background: #061f22;
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: .88rem;
    line-height: 1.62;
    caret-color: var(--signal);
}

.public-help-code:focus-visible {
    border-color: #74d6cc;
    box-shadow: 0 0 0 .2rem rgb(116 214 204 / 20%);
}

.public-help-status {
    min-height: 1.5rem;
    margin: .8rem 0 0;
    color: #abc3bf;
    font-size: .85rem;
}

.public-help-frame {
    width: 100%;
    height: 100%;
    min-height: 28rem;
    border: 1px solid #d0d7d4;
    border-radius: .7rem;
    background: white;
}

.public-help-placeholder {
    position: absolute;
    z-index: 1;
    inset: 7rem 2rem auto;
    display: grid;
    place-items: center;
    gap: .8rem;
    min-height: 20rem;
    color: #566b80;
    text-align: center;
    pointer-events: none;
}

.public-help-placeholder[hidden] {
    display: none;
}

.public-help-placeholder span {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 1.2rem;
    color: var(--on-signal);
    background: var(--signal);
    font-size: 2.6rem;
    font-weight: 850;
}

.public-help-placeholder p {
    max-width: 18rem;
}

.public-help-warnings {
    display: grid;
    gap: .35rem;
    margin: .75rem 0 0;
    padding: 0;
    color: var(--warning);
    font-size: .82rem;
    list-style: none;
}

.public-help-components {
    padding-block: clamp(4rem, 8vw, 7rem);
    color: var(--ink);
    background: var(--mist);
}

.public-help-components > header {
    max-width: 48rem;
    margin-bottom: 2.5rem;
}

.public-help-components > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.public-help-components article {
    min-height: 13rem;
    padding: 1.25rem;
    border-top: .25rem solid var(--signal);
    color: var(--ink);
    background: var(--surface);
}

.public-help-components code {
    color: var(--accent-strong);
    font-weight: 800;
}

.public-help-components article p {
    margin-top: 3.5rem;
    color: var(--muted);
    line-height: 1.55;
}

.public-help-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
    padding-block: clamp(4rem, 8vw, 7rem);
    background:
        radial-gradient(circle at 90% 10%, rgb(242 184 75 / 15%), transparent 24rem),
        #061f22;
}

.public-help-cta > div {
    max-width: 50rem;
}

.public-help-cta > div > p:last-child {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: #abc4c0;
    line-height: 1.6;
}

.tutorial-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.tutorial-toc strong {
    flex: 0 0 auto;
}

.tutorial-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
}

.tutorial-toc li {
    padding: .35rem .55rem;
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .8rem;
    font-weight: 700;
    list-style: none;
}

/* Approved tutorial B: a compact technical notebook, not a marketing page. */
.visual-tutorial-b {
    min-height: 8.75rem;
    padding: 1.55rem 1.8rem 1.55rem 2rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: .32rem solid #5667d8;
    border-radius: 1rem;
    background:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px),
        var(--surface);
    background-position: right top;
    background-size: 28% 28px, 28px 100%, auto;
    box-shadow: var(--shadow-soft);
}

.visual-tutorial-b h1 {
    font-size: clamp(2.3rem, 4vw, 3rem);
}

.visual-tutorial-b::after {
    display: none;
}

body:has(.visual-tutorial-b) .tutorial-toc {
    display: grid;
    grid-template-columns: auto repeat(6, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    padding: 0;
    border-radius: .75rem;
}

body:has(.visual-tutorial-b) .tutorial-toc strong,
body:has(.visual-tutorial-b) .tutorial-toc li {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    margin: 0;
    padding: .75rem 1rem;
    border-right: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    background: var(--surface);
    font-size: .76rem;
}

body:has(.visual-tutorial-b) .tutorial-toc ul {
    display: contents;
}

body:has(.visual-tutorial-b) .tutorial-toc li::before {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    margin-right: .5rem;
    place-items: center;
    border-radius: .42rem;
    color: #4457c6;
    background: color-mix(in srgb, #6675e8 14%, var(--surface));
    content: counter(list-item, decimal-leading-zero);
    font-size: .62rem;
    font-weight: 850;
}

body:has(.visual-tutorial-b) .studio-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

body:has(.visual-tutorial-b) .studio-grid .panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body:has(.visual-tutorial-b) .studio-editor {
    color: #e8f4fb;
    background: #082334;
}

body:has(.visual-tutorial-b) .studio-editor .section-heading,
body:has(.visual-tutorial-b) .studio-preview .section-heading {
    min-height: 4.4rem;
    margin: -1.25rem -1.25rem .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

body:has(.visual-tutorial-b) .studio-editor h2 {
    color: #fff;
}

body:has(.visual-tutorial-b) .studio-editor .help-source {
    border-color: #23495f;
    color: #c7f8f4;
    background: #061d2b;
}

@media (max-width: 900px) {
    .public-help-hero,
    .public-help-workspace,
    .public-help-cta {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-help-hero {
        min-height: auto;
    }

    .public-help-safety {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .public-help-editor {
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 12%);
    }

    .public-help-components > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-help-cta .button {
        justify-self: start;
    }
}

@media (max-width: 600px) {
    .public-help-heading,
    .public-help-pane-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .public-help-heading > p {
        text-align: left;
    }

    .public-help-safety,
    .public-help-components > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-help-editor,
    .public-help-preview {
        padding: 1rem;
    }

    .public-help-code {
        min-height: 28rem;
        font-size: .8rem;
    }

    .public-help-placeholder {
        inset-inline: 1.5rem;
    }

    .tutorial-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Project portfolio */
.portfolio-heading {
    position: relative;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 1.5rem;
}

.portfolio-heading h1 {
    max-width: 12ch;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.portfolio-heading > div > p:last-child {
    max-width: 48rem;
}

.portfolio-create {
    position: relative;
    z-index: 6;
}

.portfolio-create > summary {
    min-height: 3rem;
    list-style: none;
    cursor: pointer;
}

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

.portfolio-create[open] > summary {
    width: fit-content;
    justify-self: end;
    color: var(--accent-strong);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.portfolio-create[open] {
    display: grid;
    flex: 1 0 100%;
}

.portfolio-create-popover {
    position: static;
    width: 100%;
    margin-top: .75rem;
    padding: 1.4rem;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 1.25rem;
    background: var(--surface);
    box-shadow: 0 1.5rem 4rem rgb(8 40 43 / 18%);
}

.portfolio-create-popover h2 {
    margin: .15rem 0 1rem;
    font-size: 1.55rem;
}

.portfolio-create-popover form,
.portfolio-create-popover label,
.portfolio-create-field {
    display: grid;
    gap: .45rem;
}

.portfolio-create-popover form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.portfolio-create-popover form > .button,
.portfolio-create-popover form > .notice {
    grid-column: 1 / -1;
}

.portfolio-create-popover form > .button {
    min-width: 14rem;
    justify-self: end;
}

.portfolio-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .7rem;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    box-shadow: 0 .75rem 2rem rgb(11 42 61 / 7%);
}

.portfolio-summary-filter {
    position: relative;
    display: grid;
    gap: .15rem;
    min-height: 5.5rem;
    padding: 1rem 1.2rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .8rem;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 90%, var(--mist));
    box-shadow: 0 .4rem 1.1rem rgb(11 42 61 / 6%);
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.portfolio-summary-filter::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: .3rem;
    content: "";
    background: var(--summary-accent, var(--accent));
}

.portfolio-summary-filter.is-total { --summary-accent: #176b87; }
.portfolio-summary-filter.is-active { --summary-accent: #16836f; }
.portfolio-summary-filter.is-archived { --summary-accent: #6d718a; }
.portfolio-summary-filter.is-attention { --summary-accent: #d26a16; }

.portfolio-summary-filter:hover,
.portfolio-summary-filter:focus-visible {
    z-index: 1;
    border-color: var(--summary-accent);
    box-shadow: 0 .9rem 2rem rgb(11 42 61 / 13%);
    transform: translateY(-2px);
}

.portfolio-summary-filter[aria-pressed="true"] {
    border-color: var(--summary-accent);
    background: color-mix(in srgb, var(--summary-accent) 11%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--summary-accent) 18%, transparent),
        0 .8rem 1.8rem rgb(11 42 61 / 12%);
}

.portfolio-summary-filter span {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portfolio-summary-filter span::before {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .55rem;
    color: var(--summary-accent);
    background: color-mix(in srgb, var(--summary-accent) 12%, var(--surface));
    content: "▣";
    font-size: 1rem;
}

.portfolio-summary-filter.is-active span::before { content: "⌁"; }
.portfolio-summary-filter.is-archived span::before { content: "▤"; }
.portfolio-summary-filter.is-attention span::before { content: "△"; }

.portfolio-summary-filter strong {
    align-self: end;
    justify-self: end;
    font-size: clamp(1.75rem, 3vw, 2.65rem);
    line-height: .8;
}

.portfolio-toolbar {
    display: grid;
    grid-template-columns: minmax(15rem, 1.5fr) repeat(2, minmax(10rem, .65fr)) auto;
    gap: .8rem;
    align-items: end;
    margin-bottom: 2.75rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 88%, var(--mist));
}

.portfolio-toolbar label {
    display: grid;
    gap: .35rem;
    margin: 0;
}

.portfolio-toolbar label > span:first-child {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .035em;
}

.portfolio-toolbar input,
.portfolio-toolbar select {
    min-height: 2.9rem;
    margin: 0;
    background: var(--surface);
}

.portfolio-check {
    display: flex !important;
    min-height: 2.9rem;
    padding: .6rem .75rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface);
    cursor: pointer;
}

.portfolio-check input {
    min-height: auto;
    width: 1.1rem;
    height: 1.1rem;
}

.portfolio-check span {
    color: var(--ink) !important;
    white-space: nowrap;
}

.portfolio-filter-summary {
    grid-column: 1 / -1;
    margin: 0;
    padding: .1rem .15rem 0;
    color: var(--muted);
    font-size: .85rem;
}

.portfolio-filter-summary strong {
    color: var(--ink);
}

.portfolio-section {
    margin: 0 0 3.75rem;
}

.portfolio-section-heading {
    align-items: end;
    margin-bottom: 1.15rem;
}

.portfolio-section-heading h2 {
    display: flex;
    gap: .65rem;
    align-items: center;
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: -.045em;
}

.portfolio-section-heading h2 span {
    display: inline-grid;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    place-items: center;
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .78rem;
    letter-spacing: 0;
}

.portfolio-section-heading > p {
    max-width: 32rem;
    margin: 0;
    color: var(--muted);
    text-align: right;
}

.portfolio-grid,
.portfolio-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

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

.portfolio-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 20rem;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 1.2rem;
    background: var(--surface);
    box-shadow: 0 .75rem 2rem rgb(8 40 43 / 7%);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.portfolio-card:hover {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    box-shadow: 0 1.15rem 2.6rem rgb(8 40 43 / 14%);
    transform: translateY(-3px);
}

.portfolio-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: .3rem;
    background: var(--accent);
    content: "";
}

.portfolio-card:has(.project-lifecycle.is-archived)::before {
    background: #8a938f;
}

.portfolio-card-main {
    display: flex;
    min-height: 0;
    padding: 1.25rem 1.25rem 1rem 1.45rem;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

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

.portfolio-card-topline {
    display: flex;
    min-height: 1.9rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
}

.portfolio-card .eyebrow {
    margin: .85rem 0 .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-card-origin {
    margin: .75rem 0 0;
    color: var(--muted);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.portfolio-card h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.portfolio-card-updated {
    margin: .55rem 0 auto;
    color: var(--muted);
    font-size: .86rem;
}

.portfolio-card-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.5rem 0 1rem;
    border-block: 1px solid var(--line);
}

.portfolio-card-counts div {
    display: grid;
    gap: .2rem;
    padding: .7rem .45rem;
    border-right: 1px solid var(--line);
}

.portfolio-card-counts div:first-child {
    padding-left: 0;
}

.portfolio-card-counts div:last-child {
    padding-right: 0;
    border-right: 0;
}

.portfolio-card-counts dt {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.portfolio-card-counts dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.portfolio-card-counts .needs-attention dd {
    color: #9a5d00;
}

.portfolio-card-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--accent-strong);
    font-size: .86rem;
    font-weight: 800;
}

.portfolio-card-next span {
    font-size: 1.2rem;
}

.portfolio-card-actions {
    display: flex;
    padding: .75rem 1.25rem .9rem 1.45rem;
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--mist) 32%, var(--surface));
}

.button.tertiary {
    min-height: 2.4rem;
    border-color: transparent;
    color: var(--muted);
    background: transparent;
}

.button.tertiary:hover,
.button.tertiary:focus-visible {
    border-color: var(--line);
    color: var(--accent-strong);
    background: var(--surface);
}

.portfolio-card.is-featured {
    min-height: 17rem;
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--mist) 42%, var(--surface)));
}

.portfolio-card.is-featured .portfolio-card-counts {
    margin-top: 1rem;
}

.portfolio-archived .portfolio-card {
    box-shadow: none;
}

.portfolio-group-empty,
.portfolio-empty {
    padding: 2rem;
    border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
    border-radius: 1rem;
    color: var(--muted);
    background: color-mix(in srgb, var(--mist) 34%, var(--surface));
}

.portfolio-empty > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--on-accent);
    background: var(--accent);
    font-size: 1.5rem;
    font-weight: 900;
}

.portfolio-pagination {
    display: flex;
    margin-top: 1.25rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.portfolio-pagination button {
    min-width: 6.5rem;
    min-height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    color: var(--accent-strong);
    background: var(--surface);
    font-weight: 750;
    cursor: pointer;
}

.portfolio-pagination button:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: .55;
}

.portfolio-pagination span {
    color: var(--muted);
    font-size: .82rem;
}

.portfolio-skeleton {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.portfolio-skeleton > div {
    display: grid;
    min-height: 17rem;
    padding: 1.5rem;
    align-content: space-between;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
}

.portfolio-skeleton span {
    display: block;
    height: 1rem;
    border-radius: .25rem;
    background: var(--mist);
}

.portfolio-skeleton span:nth-child(2) {
    width: 70%;
    height: 2rem;
}

@media (max-width: 1120px) {
    .portfolio-recent-grid,
    .portfolio-grid,
    .portfolio-skeleton {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-toolbar {
        grid-template-columns: minmax(15rem, 1.5fr) repeat(2, minmax(10rem, 1fr));
    }

    .portfolio-check {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 760px) {
    .portfolio-heading,
    .portfolio-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .portfolio-heading h1 {
        font-size: clamp(2.35rem, 12vw, 3.25rem);
    }

    .portfolio-create,
    .portfolio-create > summary {
        width: 100%;
    }

    .portfolio-create-popover {
        width: 100%;
        box-shadow: 0 .75rem 2rem rgb(8 40 43 / 12%);
    }

    .portfolio-create-popover form {
        grid-template-columns: minmax(0, 1fr);
    }

    .portfolio-create-popover form > .button {
        width: 100%;
        min-width: 0;
    }

    .portfolio-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-overview > div:nth-child(2) {
        border-right: 0;
    }

    .portfolio-overview > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgb(255 255 255 / 14%);
    }

    .portfolio-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .portfolio-check {
        grid-column: auto;
    }

    .portfolio-section-heading > p {
        text-align: left;
    }
}

html[data-theme="dark"] .badge.warning,
html[data-theme="dark"] .notice.warning,
html[data-theme="dark"] .state-label.warning {
    color: var(--warning);
    background: color-mix(in srgb, var(--signal) 13%, var(--surface));
}

html[data-theme="dark"] .notice.error,
html[data-theme="dark"] .state-label.error {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

html[data-theme="dark"] .state-label.success,
html[data-theme="dark"] .notice.success {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

@media (max-width: 900px) {
    body:has(.visual-tutorial-b) .tutorial-toc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:has(.visual-tutorial-b) .tutorial-toc strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .portfolio-recent-grid,
    .portfolio-grid,
    .portfolio-skeleton {
        grid-template-columns: minmax(0, 1fr);
    }

    .portfolio-card {
        min-height: 18rem;
    }

    .portfolio-card-counts dt {
        font-size: .6rem;
    }

    .portfolio-pagination {
        justify-content: space-between;
        gap: .5rem;
    }

    .portfolio-pagination span {
        text-align: center;
    }
}

/* Project access: human selections, frozen scopes, and collaboration. */
.access-heading {
    max-width: 58rem;
    margin-bottom: 2rem;
}

.access-heading h1 {
    font-size: clamp(2.35rem, 4vw, 3.35rem);
}

.access-heading p:last-child {
    max-width: 44rem;
    font-size: 1.05rem;
}

.access-loading {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 1rem;
}

.access-loading span {
    min-height: 12rem;
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, var(--surface), var(--mist));
}

.access-readonly {
    max-width: 46rem;
    padding: clamp(2rem, 6vw, 4.5rem);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background: var(--surface);
}

.access-task-nav {
    position: sticky;
    z-index: 4;
    top: 5.6rem;
    display: flex;
    width: 100%;
    gap: .25rem;
    overflow-x: auto;
    margin: 0 0 2.5rem;
    padding: .3rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 .5rem 1.5rem rgb(16 42 47 / 7%);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
}

.access-task-nav::-webkit-scrollbar {
    display: none;
}

.access-task-nav a {
    flex: 0 0 auto;
    min-height: 2.6rem;
    padding: .65rem 1rem;
    border-radius: .6rem;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.access-task-nav a:hover,
.access-task-nav a:focus-visible {
    color: var(--accent-strong);
    background: var(--mist);
}

.access-task-nav span {
    display: inline-grid;
    min-width: 1.35rem;
    min-height: 1.35rem;
    margin-left: .25rem;
    place-items: center;
    border-radius: 999px;
    color: var(--on-accent);
    background: var(--accent);
    font-size: .72rem;
}

.access-task-nav button {
    flex: 0 0 auto;
    min-height: 2.6rem;
    padding: .65rem 1rem;
    border: 0;
    border-left: 1px solid var(--line);
    color: var(--accent-strong);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    margin-left: auto;
}

.access-task-nav button:hover,
.access-task-nav button:focus-visible {
    border-radius: 999px;
    background: var(--mist);
}

.access-task-nav button:disabled {
    cursor: wait;
    opacity: .6;
}

.access-section {
    scroll-margin-top: 10rem;
    padding: 0 0 clamp(3.5rem, 7vw, 6rem);
}

.access-section + .access-section {
    padding-top: clamp(2rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
}

.access-section-intro {
    max-width: 48rem;
    margin-bottom: 1.5rem;
}

.access-section-intro h2 {
    margin-bottom: .5rem;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.access-section-intro > p:last-child {
    color: var(--muted);
    line-height: 1.6;
}

.access-section-heading {
    display: flex;
    max-width: none;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.access-invite-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr);
    gap: 1.25rem;
    align-items: start;
}

.access-form-card,
.access-scope-preview {
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--surface);
}

.access-form-card {
    position: relative;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-top: .22rem solid var(--accent);
    box-shadow: var(--shadow-soft);
}

.access-form-card label {
    display: grid;
    gap: .45rem;
    color: var(--ink);
    font-weight: 700;
}

.access-form-field,
.access-proposal-picker {
    display: grid;
    gap: .45rem;
}

.access-form-card input,
.access-form-card select {
    min-height: 3rem;
}

.access-proposal-picker {
    margin-top: .75rem;
}

.access-share-mode {
    margin: 1.35rem 0 0;
    padding: 0;
    border: 0;
}

.access-share-mode legend {
    margin-bottom: .65rem;
    color: var(--ink);
    font-weight: 750;
}

.access-share-mode > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.access-share-mode label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    min-height: 6.25rem;
    padding: .95rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--canvas) 74%, var(--surface));
    cursor: pointer;
}

.access-share-mode label.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--mist) 68%, var(--surface));
    box-shadow: inset .22rem 0 0 var(--signal);
}

.access-share-mode input {
    width: 1.1rem;
    min-height: auto;
    margin: .2rem 0 0;
    accent-color: var(--accent);
}

.access-share-mode span {
    display: grid;
    gap: .3rem;
}

.access-share-mode small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.4;
}

.access-picker-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.access-picker-heading label {
    flex: 1;
}

.access-picker-heading span,
.access-member-total {
    flex: 0 0 auto;
    margin-bottom: .75rem;
    padding: .4rem .65rem;
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .75rem;
    font-weight: 800;
}

.access-template-search {
    margin: .35rem 0 .15rem;
}

.access-template-options {
    display: grid;
    gap: .65rem;
    max-height: 25rem;
    padding: .15rem .35rem .15rem .15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--accent) var(--mist);
}

.access-template-picker {
    display: grid;
    gap: .65rem;
    margin: 1.5rem 0;
    padding: 0;
    border: 0;
}

.access-template-picker legend {
    margin-bottom: .25rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 750;
}

.access-template-picker legend span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 500;
}

.access-template-picker > p {
    margin: 0 0 .25rem;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}

.access-template-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem !important;
    min-height: 4.4rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--canvas) 74%, var(--surface));
    cursor: pointer;
}

.access-template-option:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--mist) 68%, var(--surface));
    box-shadow: inset .22rem 0 0 var(--signal);
}

.access-template-option.is-disabled {
    cursor: not-allowed;
    opacity: .7;
}

.access-template-option input {
    width: 1.15rem;
    min-height: auto;
    margin-top: .2rem;
    accent-color: var(--accent);
}

.access-template-option > span {
    display: grid;
    gap: .15rem;
}

.access-template-option small,
.access-template-option em {
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
    font-weight: 500;
}

.access-option-warning {
    margin-top: .35rem;
    color: var(--warning);
    font-size: .78rem;
}

.access-option-empty {
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: .8rem;
    color: var(--muted);
    background: var(--canvas);
}

.access-submit {
    width: 100%;
    justify-content: center;
}

.access-scope-preview {
    position: sticky;
    top: 10rem;
    overflow: hidden;
    padding: 1.5rem;
    color: var(--ink);
    border: 2px solid var(--accent);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 14rem),
        var(--surface);
    box-shadow: var(--shadow-soft);
}

.access-scope-preview .eyebrow {
    color: var(--accent-strong);
}

.access-scope-preview > p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.55;
}

.access-scope-preview .access-role-explanation {
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: .75rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    font-size: .86rem;
}

.access-scope-preview dl {
    display: grid;
    gap: .25rem;
    margin: 1.25rem 0;
}

.access-scope-preview dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
}

.access-scope-preview dt {
    color: var(--muted);
}

.access-scope-preview dd {
    margin: 0;
    text-align: right;
    font-weight: 750;
}

.access-scope-datasets {
    display: grid;
    gap: .4rem;
    margin: 1.25rem 0;
}

.access-scope-datasets span {
    color: var(--muted);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.access-scope-datasets strong {
    padding: .55rem .65rem;
    border-left: .2rem solid var(--signal);
    background: var(--mist);
    font-size: .85rem;
}

.access-scope-footnote {
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    background: var(--mist);
    font-size: .8rem;
}

.access-member-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.access-member-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background: var(--surface);
}

.access-member-card.is-owner {
    border-top: .3rem solid var(--signal);
}

.access-avatar {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: 50%;
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 800;
}

.access-member-card h3 {
    margin: .25rem 0 .4rem;
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.access-member-card p {
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.45;
}

.access-member-scopes {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.access-member-scopes > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.access-member-scopes > header strong {
    color: var(--ink);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.access-member-scopes > header span {
    display: grid;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: .2rem .45rem;
    place-items: center;
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .68rem;
    font-weight: 800;
}

.access-member-scopes.is-owner > header span {
    color: #6b4c08;
    background: color-mix(in srgb, var(--signal) 28%, var(--surface));
}

.access-member-scopes.is-empty {
    opacity: .78;
}

.access-member-scope-list {
    display: grid;
    gap: .65rem;
}

.access-member-scope-list article {
    display: grid;
    gap: .45rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--canvas) 72%, var(--surface));
}

.access-member-scope-list article > div:first-child {
    display: grid;
    gap: .2rem;
}

.access-member-scope-list article strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: .82rem;
}

.access-member-scope-list article p,
.access-member-scopes > p {
    margin: 0;
    font-size: .74rem;
}

.access-scope-kind {
    color: var(--accent-strong);
    font-size: .62rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .075em;
}

.access-scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.access-scope-chips span {
    max-width: 100%;
    overflow: hidden;
    padding: .3rem .5rem;
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .67rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.access-member-scope-list .access-scope-dataset-line {
    padding-top: .4rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
    color: var(--muted);
}

.access-member-card > .button {
    grid-column: 1 / -1;
    align-self: end;
    justify-self: start;
}

.access-role {
    color: var(--accent);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.access-invitation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.access-invitation-card {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background:
        linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--mist) 35%, var(--surface)));
    box-shadow: 0 1rem 2.5rem rgb(16 42 47 / 5%);
}

.access-invitation-card > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.access-invitation-card h3 {
    margin: .25rem 0 0;
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.access-invitation-proposal {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding: .9rem 1rem;
    border-left: .25rem solid var(--signal);
    background: var(--surface);
}

.access-invitation-proposal span {
    color: var(--muted);
    font-size: .8rem;
}

.access-grant-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.access-grant-summary > div {
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--surface);
}

.access-grant-summary span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.access-grant-summary ul,
.access-grant-summary p {
    margin: .55rem 0 0;
    padding-left: 1rem;
    color: var(--ink);
    font-size: .82rem;
}

.access-grant-summary p {
    padding-left: 0;
}

.access-technical-details {
    color: var(--muted);
    font-size: .78rem;
}

.access-technical-details summary,
.access-history > summary {
    width: fit-content;
    color: var(--accent-strong);
    font-weight: 750;
    cursor: pointer;
}

.access-technical-details code {
    display: block;
    margin-top: .5rem;
}

.access-invitation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-self: start;
    margin-top: auto;
}

.access-confirmation {
    display: grid;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
    border-radius: .9rem;
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.access-confirmation p {
    margin: 0;
    color: var(--ink);
    font-size: .84rem;
    line-height: 1.45;
}

.access-confirmation > div {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.access-member-confirmation {
    grid-column: 1 / -1;
    align-self: end;
}

.access-history {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 82%, var(--mist));
}

.access-history-list {
    display: grid;
    margin-top: 1rem;
}

.access-history-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(10rem, auto);
    gap: 1rem;
    align-items: center;
    padding: .8rem 0;
    border-top: 1px solid var(--line);
}

.access-history-list article > div {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.access-history-list article strong,
.access-history-list article span {
    overflow-wrap: anywhere;
}

.access-history-list article > div span,
.access-history-list time {
    color: var(--muted);
    font-size: .78rem;
}

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

    .access-scope-preview {
        position: static;
    }

    .access-member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .access-invitation-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 700px) {
    .access-heading h1 {
        font-size: clamp(2.35rem, 12vw, 3.25rem);
    }

    .access-task-nav {
        top: 5.2rem;
        display: flex;
        width: 100%;
        overflow-x: auto;
        border-radius: .9rem;
        scrollbar-width: none;
    }

    .access-task-nav::-webkit-scrollbar {
        display: none;
    }

    .access-task-nav a {
        flex: 1 0 auto;
        text-align: center;
    }

    .access-task-nav button {
        flex: 0 0 auto;
    }

    .access-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .access-member-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .access-share-mode > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .access-history-list article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .access-history-list time {
        grid-column: 1 / -1;
    }

}

@media (max-width: 480px) {
    .access-form-card,
    .access-scope-preview {
        border-radius: .9rem;
    }

    .access-member-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .access-picker-heading,
    .access-grant-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .access-picker-heading span {
        width: fit-content;
        margin-bottom: 0;
    }

    .access-confirmation > div {
        display: grid;
    }

    .access-confirmation .button {
        width: 100%;
        justify-content: center;
    }
}

/* Project data workspace */
.data-page-heading {
    align-items: end;
    margin-bottom: 1.25rem;
}

.data-page-heading > div:first-child {
    max-width: 56rem;
}

.data-page-heading h1 {
    max-width: 16ch;
    font-size: clamp(2.5rem, 5vw, 4.6rem);
}

.data-page-heading p:last-child {
    max-width: 48rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.data-task-nav {
    position: sticky;
    z-index: 4;
    top: 5.4rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    padding: .35rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--canvas) 94%, transparent);
    box-shadow: 0 .65rem 2rem rgb(16 42 47 / 7%);
    backdrop-filter: blur(14px);
}

.data-task-nav a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .1rem .7rem;
    min-height: 4rem;
    align-content: center;
    padding: .65rem .85rem;
    border-radius: .75rem;
    color: var(--ink);
    text-decoration: none;
}

.data-task-nav a:hover,
.data-task-nav a:focus-visible {
    background: var(--mist);
}

.data-task-nav span {
    grid-row: 1 / 3;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    align-self: center;
    border-radius: .65rem;
    color: var(--on-accent);
    background: var(--accent);
    font-size: .72rem;
    font-weight: 800;
}

.data-task-nav strong {
    font-size: .92rem;
}

.data-task-nav small {
    color: var(--muted);
    font-size: .74rem;
}

.data-domain-section {
    scroll-margin-top: 11rem;
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.data-domain-section + .data-domain-section,
.data-domain-section + .authorize-view,
.authorize-view + .data-domain-section {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.data-domain-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.data-domain-heading > div {
    max-width: 52rem;
}

.data-domain-heading h2 {
    margin-bottom: .5rem;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.data-domain-heading p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.data-source-workbench {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-top: .3rem solid var(--signal);
    border-radius: 1.2rem;
    background: var(--surface);
    box-shadow: 0 1.2rem 3rem rgb(16 42 47 / 7%);
}

.data-source-workbench > .section-heading h2 {
    margin: 0;
}

.data-form-field {
    display: grid;
    align-content: start;
    gap: .45rem;
}

.data-workbench-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: 1.35rem 0;
    padding: 0;
    list-style: none;
}

.data-workbench-steps li {
    display: flex;
    gap: .55rem;
    align-items: center;
    padding: .65rem .75rem;
    border-radius: .75rem;
    color: var(--muted);
    background: var(--canvas);
    font-size: .82rem;
    font-weight: 700;
}

.data-workbench-steps span {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border-radius: 50%;
    color: var(--on-accent);
    background: var(--accent);
    font-size: .7rem;
}

.data-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.data-source-card {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: var(--surface);
    box-shadow: 0 .7rem 2rem rgb(16 42 47 / 5%);
}

.data-source-card.is-selected {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    box-shadow: inset .28rem 0 0 var(--signal), 0 .7rem 2rem rgb(16 42 47 / 6%);
}

.data-source-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: start;
}

.data-source-card h2,
.data-source-card header p {
    margin-bottom: .2rem;
}

.data-source-card header > div > p:last-child {
    color: var(--muted);
    font-size: .84rem;
}

.data-source-health-detail {
    display: grid;
    gap: .18rem;
    margin: -.15rem 0 0;
    padding: .7rem .8rem;
    border-left: .2rem solid var(--line);
    border-radius: 0 .65rem .65rem 0;
    color: var(--muted);
    background: var(--canvas);
    font-size: .76rem;
    line-height: 1.45;
}

.data-source-health-detail.success {
    border-left-color: var(--success);
}

.data-source-health-detail.warning {
    border-left-color: var(--signal);
}

.data-source-health-detail.error {
    border-left-color: var(--danger);
    color: color-mix(in srgb, var(--danger) 75%, var(--ink));
    background: color-mix(in srgb, var(--danger) 6%, var(--canvas));
}

.data-source-health-detail code {
    padding: .08rem .3rem;
    border-radius: .3rem;
    color: inherit;
    background: rgb(255 255 255 / 68%);
    font-size: .72rem;
}

.data-source-icon {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: .8rem;
    color: var(--on-accent);
    background: var(--accent);
    font-size: 1.1rem;
    font-weight: 850;
}

.data-source-icon.is-postgres {
    background: #336791;
}

.data-source-icon.is-sheets {
    background: #188038;
}

.data-source-icon.is-http {
    background: var(--accent);
}

.data-source-datasets {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.data-source-datasets span {
    padding: .3rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--mist);
    font-size: .72rem;
    font-weight: 700;
}

.data-source-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
}

.data-source-facts div {
    min-width: 0;
    padding: .7rem;
    border-radius: .7rem;
    background: var(--canvas);
}

.data-source-facts dt {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.data-source-facts dd {
    overflow: hidden;
    margin: .25rem 0 0;
    font-size: .86rem;
    font-weight: 750;
    text-overflow: ellipsis;
}

.data-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.data-card-menu {
    position: relative;
}

.data-card-menu > summary {
    min-height: 2.2rem;
    padding: .5rem .7rem;
    border-radius: .55rem;
    color: var(--muted);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    list-style: none;
}

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

.data-card-menu[open] > summary {
    background: var(--mist);
}

.data-card-menu > div {
    position: absolute;
    z-index: 3;
    right: 0;
    display: grid;
    min-width: 12rem;
    margin-top: .35rem;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--surface);
    box-shadow: 0 1rem 2.5rem rgb(16 42 47 / 14%);
}

.data-card-menu button {
    padding: .65rem .7rem;
    border: 0;
    border-radius: .45rem;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.data-card-menu button:hover,
.data-card-menu button:focus-visible {
    background: var(--mist);
}

.data-card-menu .danger-text {
    color: var(--danger);
}

.data-inspection-card {
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-left: .3rem solid var(--signal);
    border-radius: .9rem;
    background: var(--surface);
}

.dataset-scope-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--surface) 92%, var(--mist));
}

.dataset-scope-panel > .section-heading h3 {
    margin: 0;
    font-size: 1.35rem;
}

.project-technical-details {
    margin: .8rem 0 1.25rem;
}

.dataset-scope-grid {
    display: grid;
    grid-template-columns: minmax(13rem, .55fr) minmax(0, 1.45fr);
    gap: 1rem;
    align-items: stretch;
}

.dataset-scope-picker,
.dataset-scope-card {
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--surface);
}

.dataset-scope-picker {
    display: grid;
    align-content: start;
    gap: .6rem;
}

.dataset-scope-picker label {
    font-weight: 750;
}

.dataset-scope-picker p,
.dataset-scope-card > p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.5;
}

.dataset-scope-card > header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.dataset-scope-card h4 {
    margin-bottom: .75rem;
    overflow-wrap: anywhere;
}

.dataset-technical-details {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--line);
}

.dataset-technical-details summary {
    color: var(--accent-strong);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 750;
}

.dataset-technical-details summary:focus-visible {
    border-radius: .25rem;
    outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 3px;
}

.dataset-indexing-status {
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--canvas);
}

.dataset-indexing-status h5,
.dataset-indexing-status p {
    margin-top: 0;
}

.dataset-indexing-status h5 {
    margin-bottom: .45rem;
    font-size: .95rem;
}

.dataset-indexing-detail {
    color: var(--muted);
}

.dataset-indexing-status code {
    overflow-wrap: anywhere;
}

.dataset-indexing-status .actions {
    margin-top: .8rem;
}

.dataset-technical-details .facts {
    margin-top: .8rem;
}

.data-snapshot-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background: var(--surface);
}

.data-snapshot-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.data-snapshot-heading > div:first-child {
    display: flex;
    gap: .8rem;
    align-items: center;
}

.data-snapshot-heading h3,
.data-snapshot-heading p {
    margin: 0;
}

.data-snapshot-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    padding: 1.25rem;
}

.data-snapshot-summary div {
    display: grid;
    gap: .2rem;
    padding: .9rem;
    border-radius: .8rem;
    background: var(--canvas);
}

.data-snapshot-summary span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.data-snapshot-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-field-coverage {
    margin: 0 1.25rem 1.25rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--mist) 55%, var(--surface));
}

.data-field-coverage > header,
.data-snapshot-history > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.data-field-coverage h4,
.data-field-coverage p,
.data-snapshot-history h4,
.data-snapshot-history p {
    margin: 0;
}

.data-field-coverage > header > span,
.data-snapshot-history > header > span {
    color: var(--muted);
    font-size: .76rem;
}

.data-field-coverage ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.data-field-coverage li {
    display: grid;
    gap: .35rem;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: .7rem;
    background: var(--surface);
}

.data-field-coverage li > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.data-field-coverage code {
    overflow: hidden;
    color: var(--accent-strong);
    font-size: .78rem;
    text-overflow: ellipsis;
}

.data-field-coverage progress {
    width: 100%;
    height: .42rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    accent-color: var(--accent);
}

.data-field-coverage small {
    overflow: hidden;
    color: var(--muted);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-record-list {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
}

.data-record-list summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.data-record-list summary span {
    color: var(--accent-strong);
    font-weight: 750;
}

.data-snapshot-history {
    margin: 0 1.25rem 1.25rem;
    padding: 1rem;
    border-top: 1px solid var(--line);
}

.data-snapshot-history > header > div > p:last-child {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
}

.data-snapshot-history ol {
    display: grid;
    gap: 0;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.data-snapshot-history li {
    position: relative;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .65rem .75rem;
    border-radius: .75rem;
}

.data-snapshot-history li + li {
    border-top: 1px solid var(--line);
}

.data-snapshot-history li.is-current {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.data-history-marker {
    width: .7rem;
    height: .7rem;
    border: .15rem solid var(--surface);
    border-radius: 50%;
    outline: 1px solid var(--accent);
    background: var(--accent);
}

.data-snapshot-history li > div {
    display: grid;
    gap: .12rem;
}

.data-snapshot-history time,
.data-snapshot-history li > p {
    color: var(--muted);
    font-size: .75rem;
}

.data-history-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.data-history-pagination > span {
    color: var(--muted);
    font-size: .76rem;
}

.data-empty-state,
.data-locked-state {
    padding: clamp(2rem, 5vw, 3.5rem);
    border-style: dashed;
}

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

    .data-page-heading {
        align-items: start;
    }
}

@media (max-width: 700px) {
    .data-page-heading,
    .data-domain-heading,
    .data-snapshot-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .data-page-heading .button,
    .data-domain-heading .button {
        width: 100%;
        justify-content: center;
    }

    .data-task-nav {
        top: 5.1rem;
        display: flex;
        overflow-x: auto;
    }

    .data-task-nav a {
        flex: 1 0 10rem;
    }

    .data-source-card > header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .data-source-card > header > .state-label {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .data-source-facts,
    .data-snapshot-summary,
    .data-workbench-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .data-field-coverage ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .data-field-coverage > header,
    .data-snapshot-history > header {
        align-items: start;
        flex-direction: column;
    }

    .data-snapshot-history li {
        grid-template-columns: 1rem minmax(0, 1fr) auto;
    }

    .data-snapshot-history li > p {
        grid-column: 2 / -1;
    }

    .data-card-menu > div {
        right: auto;
        left: 0;
    }
}

@media (max-width: 480px) {
    .data-source-actions > .button {
        width: 100%;
        justify-content: center;
    }

    .dataset-scope-panel,
    .data-source-workbench,
    .data-source-card,
    .data-snapshot-panel {
        border-radius: .9rem;
    }
}

/* Project template catalog */
.templates-page-heading {
    align-items: end;
    margin-bottom: 1.25rem;
}

.templates-page-heading > div:first-child {
    max-width: 58rem;
}

.templates-page-heading h1 {
    max-width: 15ch;
    font-size: clamp(2.5rem, 5vw, 4.6rem);
}

.templates-page-heading p:last-child {
    max-width: 50rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.template-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: var(--surface);
    box-shadow: 0 .8rem 2.4rem rgb(16 42 47 / 5%);
}

.template-overview > div {
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: 1.2rem 1.35rem;
    border-right: 1px solid var(--line);
}

.template-overview > div:last-child {
    border-right: 0;
}

.template-overview span,
.template-overview small {
    color: var(--muted);
}

.template-overview span {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.template-overview strong {
    color: var(--ink);
    font-size: 2rem;
    line-height: 1;
}

.template-overview small {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-creator {
    margin-bottom: clamp(3rem, 7vw, 6rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-top: .35rem solid var(--signal);
    border-radius: 1.25rem;
    background: var(--surface);
    box-shadow: 0 1.2rem 3.5rem rgb(16 42 47 / 8%);
}

.template-creator-heading,
.template-catalog-heading {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: start;
}

.template-creator-heading > div,
.template-catalog-heading > div {
    max-width: 50rem;
}

.template-creator-heading h2,
.template-catalog-heading h2 {
    margin-bottom: .45rem;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.template-creator-heading p:last-child,
.template-catalog-heading p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.template-creator-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.template-creator-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .05rem .65rem;
    align-content: center;
    min-height: 4rem;
    padding: .7rem .8rem;
    border-radius: .8rem;
    background: var(--canvas);
}

.template-creator-steps span {
    grid-row: 1 / 3;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    align-self: center;
    border-radius: 50%;
    color: var(--on-accent);
    background: var(--accent);
    font-size: .75rem;
    font-weight: 800;
}

.template-creator-steps strong {
    font-size: .88rem;
}

.template-creator-steps small {
    color: var(--muted);
    font-size: .73rem;
}

.template-creator-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.template-creator-field {
    display: grid;
    align-content: start;
    gap: .45rem;
}

.template-creator-fields label {
    display: grid;
    gap: .45rem;
    color: var(--ink);
    font-weight: 750;
}

.template-creator-fields input {
    min-height: 3rem;
}

.template-creator-fields small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.45;
}

.template-source-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: 1.5rem 0;
    padding: 0;
    border: 0;
}

.template-source-picker legend {
    grid-column: 1 / -1;
    margin-bottom: .3rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
}

.template-source-picker > .validation-message {
    grid-column: 1 / -1;
}

.template-source-option {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: .8rem !important;
    align-items: center;
    min-height: 4.75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--canvas) 70%, var(--surface));
    cursor: pointer;
}

.template-source-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
    background: var(--mist);
    box-shadow: inset .25rem 0 0 var(--signal);
}

.template-source-option input {
    width: 1.1rem;
    min-height: auto;
    accent-color: var(--accent);
}

.template-source-option > span:last-child {
    display: grid;
    gap: .15rem;
}

.template-source-option small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 500;
}

.template-source-mark {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .7rem;
    color: var(--on-accent);
    background: var(--accent);
    font-size: .9rem;
    font-weight: 850;
}

.template-source-mark.is-postgres {
    background: #336791;
}

.template-source-mark.is-sheets {
    background: #188038;
}

.template-source-empty {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: .8rem;
    background: var(--canvas);
}

.template-source-empty p {
    margin: 0;
    color: var(--muted);
}

.template-draft-studio {
    margin: 1.5rem 0 0;
}

.template-draft-studio > .panel {
    margin: 0;
    box-shadow: none;
}

.template-draft-studio .section-heading {
    align-items: start;
}

.template-draft-studio .section-heading h2,
.template-draft-studio .section-heading p {
    margin-bottom: 0;
}

.template-preview-empty {
    display: grid;
    min-height: 22rem;
    place-content: center;
    place-items: center;
    text-align: center;
}

.template-preview-empty span,
.template-empty-state > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin-bottom: .75rem;
    border-radius: .85rem;
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 850;
}

.template-preview-warnings {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--canvas);
}

.template-preview-warnings h3 {
    margin-bottom: .7rem;
}

.template-creator-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.template-creator-actions p {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
}

.template-catalog {
    padding-bottom: clamp(3rem, 7vw, 6rem);
}

.template-package-panel {
    margin: 0 0 2rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 .8rem 2.4rem rgb(16 42 47 / 6%);
}

.template-package-panel > summary {
    padding: 1rem 1.2rem;
    color: var(--accent-strong);
    font-weight: 800;
    cursor: pointer;
}

.template-package-body {
    display: grid;
    gap: 1rem;
    padding: 0 1.2rem 1.2rem;
}

.template-package-body > p {
    margin: 0;
    color: var(--muted);
}

.template-package-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .8rem;
    border-radius: .7rem;
    background: var(--canvas);
}

.template-package-selection strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.template-package-preflight {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.template-package-preflight > header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.template-package-preflight h2 {
    margin: 0;
    text-wrap: balance;
}

.template-package-counts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin: 0;
}

.template-package-counts > div {
    padding: .75rem;
    border-radius: .7rem;
    background: var(--canvas);
}

.template-package-counts dt {
    color: var(--muted);
    font-size: .75rem;
}

.template-package-counts dd {
    margin: .2rem 0 0;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.template-package-field,
.template-package-datasets label {
    display: grid;
    gap: .4rem;
    font-weight: 750;
}

.template-package-datasets {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
}

.template-package-datasets legend {
    padding: 0 .35rem;
    font-weight: 800;
}

.package-export-control {
    display: grid;
    gap: .35rem;
    max-width: 19rem;
}

.package-export-control label {
    display: flex;
    gap: .45rem;
    align-items: center;
    font-size: .76rem;
    font-weight: 700;
}

.package-export-control input {
    width: auto;
    min-height: auto;
}

.package-export-control small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
}

.button.disabled {
    opacity: .55;
    cursor: not-allowed;
}

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

.template-catalog-heading {
    align-items: end;
    margin-bottom: 1.25rem;
}

.template-catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1.45fr) repeat(2, minmax(10rem, .7fr)) auto;
    gap: .75rem;
    align-items: end;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
}

.template-catalog-toolbar label {
    display: grid;
    gap: .35rem;
}

.template-catalog-toolbar label > span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.template-catalog-toolbar input,
.template-catalog-toolbar select {
    min-height: 2.8rem;
}

.template-result-count {
    padding: .8rem .35rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.template-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.template-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
    min-width: 0;
    min-height: 25rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: var(--surface);
    box-shadow: 0 .7rem 2rem rgb(16 42 47 / 5%);
}

.template-card::before {
    position: absolute;
    top: 0;
    right: 1.25rem;
    left: 1.25rem;
    height: .2rem;
    border-radius: 0 0 999px 999px;
    background: var(--accent);
    content: "";
}

.template-card.is-seed::before {
    background: var(--signal);
}

.template-card-actions > .button:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

@media (forced-colors: active) {
    .portfolio-card-main:focus-visible,
    .template-card-actions > .button:focus-visible {
        outline-color: Highlight;
    }
}

.template-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
}

.template-card-icon {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: .8rem;
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 850;
}

.template-card.is-seed .template-card-icon {
    color: var(--on-signal);
    background: var(--signal);
}

.template-card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin-bottom: .5rem;
}

.template-type-label {
    color: var(--accent-strong);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.template-card h3 {
    margin-bottom: .25rem;
    overflow-wrap: anywhere;
    font-size: 1.2rem;
}

.template-card header p {
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-card-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    margin: 0;
}

.template-card-facts div {
    min-width: 0;
    padding: .65rem;
    border-radius: .7rem;
    background: var(--canvas);
}

.template-card-facts dt,
.template-technical-details dt {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.template-card-facts dd {
    overflow: hidden;
    margin: .25rem 0 0;
    font-size: .78rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-technical-details {
    align-self: start;
    padding: .75rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.template-technical-details summary {
    color: var(--accent-strong);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 750;
}

.template-technical-details dl {
    display: grid;
    gap: .6rem;
    margin: .85rem 0 0;
}

.template-technical-details dl div {
    min-width: 0;
}

.template-technical-details dd {
    overflow-wrap: anywhere;
    margin: .2rem 0 0;
    font-size: .76rem;
}

.template-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    align-self: end;
}

.template-card-menu {
    position: relative;
    margin-left: auto;
}

.template-card-menu > summary {
    display: grid;
    min-width: 2.35rem;
    min-height: 2.35rem;
    place-items: center;
    border-radius: .6rem;
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

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

.template-card-menu > summary:hover,
.template-card-menu > summary:focus-visible,
.template-card-menu[open] > summary {
    background: var(--mist);
}

.template-card-menu button {
    position: absolute;
    z-index: 3;
    right: 0;
    top: calc(100% + .35rem);
    min-width: 11rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    color: var(--danger);
    background: var(--surface);
    box-shadow: 0 1rem 2.5rem rgb(16 42 47 / 14%);
    text-align: left;
    cursor: pointer;
}

.template-card-menu button:hover,
.template-card-menu button:focus-visible {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.template-empty-state {
    display: grid;
    min-height: 20rem;
    place-content: center;
    justify-items: center;
    border-style: dashed;
    text-align: center;
}

.template-empty-state h3 {
    margin-bottom: .35rem;
    font-size: 1.35rem;
}

.template-empty-state p {
    max-width: 35rem;
}

.template-archive-notice {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: 2rem;
}

@media (max-width: 1180px) {
    .template-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .template-catalog-toolbar {
        grid-template-columns: minmax(14rem, 1.2fr) repeat(2, minmax(10rem, 1fr));
    }

    .template-result-count {
        grid-column: 1 / -1;
        padding: 0 .2rem;
    }
}

@media (max-width: 760px) {
    .templates-page-heading,
    .template-creator-heading,
    .template-catalog-heading,
    .template-creator-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .templates-page-heading .button,
    .template-creator-heading .button,
    .template-catalog-heading .button {
        width: 100%;
        justify-content: center;
    }

    .template-overview,
    .template-creator-fields,
    .template-source-picker,
    .template-card-grid,
    .template-catalog-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .template-overview > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .template-overview > div:last-child {
        border-bottom: 0;
    }

    .template-overview small {
        white-space: normal;
    }

    .template-creator-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .template-creator-steps li {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        min-height: 5rem;
        padding: .65rem .3rem;
        text-align: center;
    }

    .template-creator-steps span {
        grid-row: auto;
    }

    .template-creator-steps small {
        display: none;
    }

    .template-source-picker legend,
    .template-source-empty,
    .template-result-count {
        grid-column: auto;
    }

    .template-source-empty,
    .template-creator-actions {
        align-items: stretch;
    }

    .template-source-empty {
        flex-direction: column;
    }

    .template-creator-actions .button-row,
    .template-creator-actions .button {
        width: 100%;
    }

    .template-card {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .template-creator,
    .template-card,
    .template-catalog-toolbar,
    .template-overview {
        border-radius: .9rem;
    }

    .template-card-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .template-card-actions > .button {
        width: 100%;
        justify-content: center;
    }

    .template-card-menu {
        margin-left: 0;
    }

    .app-shell .template-card-menu button {
        right: auto;
        left: 0;
        min-width: 11rem !important;
    }
}

/* Collaboration inbox */
.inbox-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: clamp(1.5rem, 3vw, 2.6rem);
    border-radius: 1.25rem;
    color: #d8ebe8;
    background:
        radial-gradient(circle at 92% 8%, rgb(246 184 65 / 24%), transparent 25%),
        linear-gradient(120deg, #0d3034 0%, #113c3f 62%, #174d4d 100%);
    box-shadow: 0 1.2rem 3rem rgb(16 42 47 / 12%);
}

.inbox-hero::after {
    position: absolute;
    right: -5rem;
    bottom: -9rem;
    width: 20rem;
    height: 20rem;
    border: 2.5rem solid rgb(255 255 255 / 5%);
    border-radius: 50%;
    content: "";
}

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

.inbox-hero .eyebrow {
    color: #8de0d4;
}

.inbox-hero h1 {
    margin-bottom: .45rem;
    color: #fffaf2;
    font-size: clamp(2.25rem, 5vw, 4.3rem);
    line-height: .98;
}

.inbox-hero > div > p:last-child {
    max-width: 48rem;
    margin: 0;
    color: #c4d8d5;
    font-size: 1.02rem;
}

.inbox-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
    min-width: 20rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: .95rem;
    background: rgb(255 255 255 / 7%);
    backdrop-filter: blur(10px);
}

.inbox-summary > div {
    padding: .85rem 1rem;
    text-align: center;
}

.inbox-summary > div + div {
    border-left: 1px solid rgb(255 255 255 / 12%);
}

.inbox-summary dt {
    color: #a9c5c1;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.inbox-summary dd {
    margin: .15rem 0 0;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 850;
}

.inbox-loading,
.inbox-empty {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-height: 11rem;
    padding: 1.5rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--mist) 30%, var(--surface));
}

.inbox-loading > span {
    width: 2.4rem;
    height: 2.4rem;
    border: .22rem solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: inbox-spin .8s linear infinite;
}

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

.inbox-loading p,
.inbox-empty p {
    margin: .2rem 0 0;
    color: var(--muted);
}

.inbox-empty > span {
    display: grid;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--on-accent);
    background: var(--accent);
    font-size: 1.4rem;
    font-weight: 850;
}

.inbox-empty h2 {
    margin-bottom: .25rem;
}

.inbox-empty .button {
    flex: 0 0 auto;
    margin-left: auto;
}

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

.inbox-feedback .button {
    flex: 0 0 auto;
}

.inbox-filter-tabs {
    position: sticky;
    z-index: 5;
    top: 5.2rem;
    display: inline-flex;
    gap: .35rem;
    max-width: 100%;
    margin: 0 0 1.5rem;
    padding: .4rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--canvas) 92%, transparent);
    box-shadow: 0 .5rem 1.5rem rgb(16 42 47 / 6%);
    backdrop-filter: blur(14px);
}

.inbox-filter-tabs button {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    min-height: 2.7rem;
    padding: .55rem .8rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    color: var(--muted);
    background: transparent;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.inbox-filter-tabs button:hover,
.inbox-filter-tabs button:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--ink);
    background: var(--surface);
}

.inbox-filter-tabs button.active {
    border-color: var(--accent);
    color: var(--on-accent);
    background: var(--accent);
}

.inbox-filter-tabs button span {
    display: grid;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 .35rem;
    place-items: center;
    border-radius: 999px;
    color: var(--ink);
    background: var(--mist);
    font-size: .7rem;
}

.inbox-filter-tabs button.active span {
    color: var(--accent-strong);
    background: var(--surface);
}

.inbox-search {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    justify-content: space-between;
    margin: -.5rem 0 1.5rem;
}

.inbox-search label {
    display: grid;
    flex: 1 1 24rem;
    max-width: 34rem;
    gap: .35rem;
}

.inbox-search label span,
.inbox-search > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.admin-user-filters {
    display: grid;
    grid-template-columns: minmax(14rem, 1.5fr) repeat(2, minmax(10rem, 1fr)) auto;
    gap: .8rem;
    align-items: end;
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--canvas);
}

.admin-user-filters label {
    display: grid;
    gap: .35rem;
}

.admin-user-filters label span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.admin-user-filters .button-row {
    margin: 0;
}

@media (max-width: 1100px) {
    .admin-user-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.inbox-section {
    margin-bottom: 2rem;
}

.inbox-section > .section-heading {
    margin-bottom: .85rem;
}

.inbox-section .state-label.warning {
    border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
    color: #765400;
    background: color-mix(in srgb, var(--signal) 18%, var(--surface));
}

.inbox-list {
    display: grid;
    gap: 1rem;
}

.inbox-card {
    position: relative;
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 .65rem 2rem rgb(16 42 47 / 5%);
}

.inbox-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: .24rem;
    background: var(--accent);
    content: "";
}

.inbox-card-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
}

.inbox-kind-mark {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: .8rem;
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 850;
}

.inbox-card-heading p,
.inbox-card-heading h3,
.inbox-card-heading > div > span {
    margin: 0;
}

.inbox-card-heading p,
.inbox-card-heading > div > span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
}

.inbox-card-heading h3 {
    margin: .15rem 0;
    font-size: 1.3rem;
}

.inbox-origin {
    margin: -.25rem 0 0 3.6rem;
    color: var(--muted);
    font-size: .82rem;
}

.inbox-origin strong {
    color: var(--ink);
}

.inbox-scope-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
}

.inbox-scope-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inbox-scope-grid > div {
    min-width: 0;
    padding: .8rem;
    border-radius: .7rem;
    background: var(--canvas);
}

.inbox-scope-grid dt {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.inbox-scope-grid dd {
    display: grid;
    gap: .15rem;
    margin: .3rem 0 0;
    overflow-wrap: anywhere;
    font-size: .8rem;
    font-weight: 750;
}

.inbox-scope-grid dd span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 650;
}

.inbox-explanation {
    margin: 0;
    padding: .75rem .85rem;
    border-left: .22rem solid var(--accent);
    color: var(--muted);
    background: color-mix(in srgb, var(--mist) 36%, var(--surface));
    font-size: .82rem;
}

.inbox-technical {
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.inbox-technical summary {
    width: fit-content;
    color: var(--accent-strong);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.inbox-card-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}

.inbox-confirmation {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--warning) 60%, var(--line));
    border-radius: .8rem;
    background: color-mix(in srgb, var(--signal) 14%, var(--surface));
}

.inbox-confirmation p {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .8rem;
}

@media (max-width: 900px) {
    .inbox-hero {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .inbox-summary {
        width: 100%;
    }

    .inbox-scope-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .inbox-hero {
        gap: 1.25rem;
        margin-right: 0;
        margin-left: 0;
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .inbox-hero h1 {
        font-size: 2.45rem;
    }

    .inbox-summary {
        min-width: 0;
    }

    .inbox-summary > div {
        padding: .7rem .45rem;
    }

    .inbox-filter-tabs {
        top: 7.5rem;
        display: flex;
        width: 100%;
    }

    .inbox-filter-tabs button {
        flex: 1 0 auto;
        justify-content: center;
    }

    .inbox-empty,
    .inbox-feedback,
    .inbox-confirmation {
        align-items: stretch;
        flex-direction: column;
    }

    .inbox-empty .button,
    .inbox-feedback .button {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .inbox-card {
        padding: 1rem;
    }

    .inbox-card-heading {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .inbox-card-heading > .state-label {
        grid-column: 2;
        justify-self: start;
    }

    .inbox-origin {
        margin-left: 0;
    }

    .inbox-scope-grid,
    .inbox-scope-grid.compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .inbox-card-actions,
    .inbox-confirmation .button-row {
        align-items: stretch;
        flex-direction: column;
    }

    .inbox-card-actions .button,
    .inbox-confirmation .button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inbox-loading > span {
        animation: none;
    }
}

@media (max-width: 760px) {
    .app-shell button,
    .app-shell a.button,
    .app-shell label.button,
    .app-shell nav a,
    .app-shell summary,
    .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    .app-shell select,
    .app-shell textarea {
        /* Accessibility invariant: compact component variants cannot shrink tap targets. */
        min-height: var(--touch-target-min) !important;
    }

    .app-shell button,
    .app-shell a.button,
    .app-shell label.button,
    .app-shell summary {
        min-width: var(--touch-target-min) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --public-header-height: 7rem;
    }

    .public-header-inner {
        flex-wrap: wrap;
        align-content: center;
        gap: .25rem;
    }

    .public-header nav {
        flex-basis: 100%;
        justify-content: space-between;
    }
}

/* RAG/API permission groups and administrative token inventory. */
.rag-api-scopes .permission-category, .rag-mcp-scopes .permission-category { grid-column: 1 / -1; padding: .85rem; border: 1px solid var(--line); border-radius: .65rem; }
.permission-category summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.permission-category label { display: flex; align-items: flex-start; gap: .6rem; margin: .65rem 0; }
.permission-category code { overflow-wrap: anywhere; }
.permission-count { margin-inline-start: .65rem; font-size: .85em; opacity: .7; }
.rag-api-scopes .scope-select-all, .rag-mcp-scopes .scope-select-all { grid-column: 1 / -1; font-weight: 600; }
.admin-token-inventory .token-inventory-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-block: 1rem; }
.admin-token-card { padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; min-width: 0; }
.admin-token-card h3, .admin-token-card p { overflow-wrap: anywhere; }
.rag-connection-guide code { overflow-wrap: anywhere; }

.rag-mcp-scopes { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; }
.rag-mcp-scopes legend { font-weight: 600; }
.rag-mcp-scopes .scope-select-all { display: flex; gap: .6rem; margin-bottom: .8rem; }
.rag-mcp-scopes .permission-category + .permission-category { margin-top: .65rem; }