/*
 * Estate design system — implemented from
 * docs/design/design_handoff_estate_views/README.md (final views 5a-13b).
 */

/* Fonts (self-hosted) */

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/PublicSans-Regular-96vNZjz.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/PublicSans-Medium-CaV9iSu.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/PublicSans-SemiBold-XbM5_gK.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/PublicSans-Bold-3zPgxdY.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/PublicSans-ExtraBold-9lXTzRD.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-hef2e8o.woff2") format("woff2-variations");
    font-weight: 100 800;
    font-display: swap;
}

/* Design tokens */

:root {
    --surface: #ffffff;
    --well: #f7f9fa;
    --text: #1f2529;
    --text2: #2b3238;
    --text3: #3a4249;
    --muted: #66727a;
    --muted2: #6d777f;
    --faint: #9aa4ab;
    --arrow: #b8c2c8;
    --border: #e4eaec;
    --border2: #dce3e6;
    --line: #eef2f4;
    --line2: #eaeef0;
    --chip: #f0f3f4;
    --guide: #e8edef;
    --accent: #24744e;
    --accent-deep: #185b3c;
    --accent-soft: #dcefe5;
    --accent-mid: #3f8c66;
    --accent-border: #cfe0d6;
    --info-soft: #dcebf1;
    --info-text: #246a8a;
    --warn-soft: #fff0d8;
    --warn-text: #8a5200;
    --warn-mid: #c99a4e;
    --danger-soft: #f6ded9;
    --danger-text: #9a352f;
    --danger-dot: #c2453c;
    --amber-dot: #b3781f;
    --sel-bg: #f3faf6;
    --drawer-shadow: -18px 0 44px rgb(20 28 36 / 16%);
    --card-shadow: 0 14px 44px rgb(20 28 36 / 16%);
    --scrim: rgb(20 28 36 / 55%);
    --font: "Public Sans", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
    --surface: #1b2024;
    --well: #14181b;
    --text: #e6ebed;
    --text2: #cdd4d8;
    --text3: #b7c0c6;
    --muted: #8a969d;
    --muted2: #838d95;
    --faint: #5f6b72;
    --arrow: #4b555d;
    --border: #2b3338;
    --border2: #2b3338;
    --line: #242b30;
    --line2: #242b30;
    --chip: #242b30;
    --guide: #2b3338;
    --accent: #3fae74;
    --accent-deep: #64c795;
    --accent-soft: #1d3328;
    --accent-mid: #4f9e78;
    --accent-border: #2c5c44;
    --info-soft: #16303c;
    --info-text: #6cb6d8;
    --warn-soft: #322813;
    --warn-text: #d9a862;
    --warn-mid: #d9a862;
    --danger-soft: #3a1f1d;
    --danger-text: #f0a99f;
    --danger-dot: #d9564c;
    --amber-dot: #cf9b45;
    --sel-bg: #1c2a22;
    --scrim: rgb(0 0 0 / 70%);
}

/* Base */

* {
    box-sizing: border-box;
}

/* the hidden attribute must win even over display:grid/flex utility classes */
[hidden] {
    display: none !important;
}

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

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.5;
}

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

button {
    cursor: pointer;
}

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

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

h1 {
    margin-bottom: 4px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h2 {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
}

h3 {
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 700;
}

.muted {
    color: var(--muted);
}

.mono {
    font-family: var(--mono);
}

.eyebrow {
    color: var(--muted2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Top bar */

.topbar {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 30;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
    text-decoration: none;
}

.brand-mark {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.topnav a {
    color: var(--text3);
    padding: 7px 11px;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
}

.topnav a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 600;
}

.topnav .nav-disabled {
    color: var(--faint);
    padding: 7px 11px;
    white-space: nowrap;
    cursor: default;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.theme-toggle {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--surface);
    padding: 0;
}

.theme-toggle .moon {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: inset -5px -3px 0 0 var(--muted);
}

.topbar .search {
    width: 200px;
    height: 34px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--well);
    padding: 0 11px;
    font-size: 13px;
}

.topbar .search::placeholder {
    color: var(--faint);
}

/* Buttons */

.button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 6px 13px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.button.primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

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

.button.ghost {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

.button.accent-ghost {
    border-color: var(--accent-border);
    background: transparent;
    color: var(--accent-deep);
}

/* Layout: rail + main */

.app {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}

.body-grid {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 26px;
    padding: 0 26px;
    align-items: start;
    min-width: 0;
}

.body-grid.no-rail {
    grid-template-columns: minmax(0, 1fr);
}

.rail {
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    /* the 208px grid column is the full rail width; gutters come from the grid */
    padding: 20px 0;
}

.rail-section {
    margin-bottom: 22px;
}

.rail-section .eyebrow {
    padding: 0 9px 7px;
}

.rail a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--text3);
    font-weight: 500;
    text-decoration: none;
}

.rail a.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 600;
}

.rail a.is-active .count {
    color: var(--accent-mid);
}

.count {
    color: var(--muted);
    font-size: 12px;
}

/* Pills in rail rows: align their digits with the plain counts */
.rail .chip {
    margin-right: -9px;
}

/* Rail rows that are informational only (not filters yet) */
.rail .rail-static {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 7px 9px;
    color: var(--muted);
    font-weight: 500;
}

.main {
    min-width: 0;
    padding: 24px 0 48px;
}

/* Page furniture */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
}

.lede {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 13px;
}

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

.back-link {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
}

.back-link:hover {
    color: var(--accent-deep);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.toolbar .search {
    min-width: min(100%, 300px);
    height: 34px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--well);
    padding: 0 11px;
}

/* Chips & dots */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    background: var(--chip);
    color: var(--muted);
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.chip.good {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.chip.info {
    background: var(--info-soft);
    color: var(--info-text);
}

.chip.warn {
    background: var(--warn-soft);
    color: var(--warn-text);
}

.chip.danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--arrow);
}

.dot.ok {
    background: var(--accent);
}

.dot.updates {
    background: var(--warn-mid);
}

.dot.reboot {
    background: var(--amber-dot);
}

.dot.danger {
    background: var(--danger-dot);
}

/* Icon badges: 2-3 letter mono abbreviations on a tinted square */

.icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--chip);
    color: var(--muted);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 10px;
}

.icon.green {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* Tables & the tree pattern */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--muted2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}

.data-table td {
    padding: 11px 6px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

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

/* Shrink a column to its content, giving the rest to flexible columns */
.data-table th.min,
.data-table td.min {
    width: 1%;
    white-space: nowrap;
}

.data-table tbody tr[data-drawer-url] {
    cursor: pointer;
}

.data-table tbody tr[data-drawer-url]:hover {
    background: var(--well);
}

.data-table tbody tr.is-selected {
    background: var(--sel-bg);
    box-shadow: inset 2px 0 0 var(--accent);
}

.data-table tr.subhead td {
    padding: 16px 6px 6px;
    border-bottom: 0;
    color: var(--muted2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.data-table .empty-note {
    padding: 18px 6px;
    color: var(--muted);
}

.name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.name-cell a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
}

.name-cell a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
}

.name-cell .sub {
    color: var(--muted);
    font-size: 12px;
}

.caret {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: none;
    padding: 0;
    color: var(--muted);
}

.caret svg {
    transition: transform 0.15s ease;
}

.caret.is-collapsed svg {
    transform: rotate(-90deg);
}

.caret:hover {
    background: var(--chip);
    color: var(--text);
}

.caret-space {
    width: 26px;
    flex: 0 0 auto;
}

.serial {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text2);
}

.empty-note {
    padding: 18px 6px;
    color: var(--muted);
}

/* Cards */

.card {
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    overflow: hidden;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}

.card-head strong {
    font-size: 13.5px;
}

.card-body {
    padding: 18px;
}

.section-gap {
    margin-top: 16px;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 30px;
    align-items: start;
}

.detail-grid.wide-aside {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

/* Unboxed page sections with eyebrow heads (single-item pages, per 7a/10a) */

.page-section {
    margin-bottom: 26px;
}

.section-head {
    margin: 0 0 10px;
    color: var(--muted2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-head .note {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.section-head .note.warn {
    color: var(--warn-mid);
}

.section-head .note.accent {
    color: var(--accent-mid);
}

.plain-list .prow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}

.plain-list .prow:last-child {
    border-bottom: 0;
}

.plain-list a {
    color: var(--text);
    text-decoration: none;
}

.plain-list a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
}

.plain-list .tag {
    color: var(--muted);
    font-size: 11.5px;
}

.page-head .chip-row {
    margin-top: 11px;
}

.page-head .head-eyebrow {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-head h1 {
    margin-top: 3px;
    font-size: 26px;
}

/* Host-map strip: linked cards joined by arrows */

.host-map {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 26px;
}

.host-map .node {
    flex: 1;
    min-width: 180px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--well);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text);
}

.host-map .node-kind {
    margin-bottom: 7px;
    color: var(--muted2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.host-map .node strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.host-map .node .node-sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
}

.host-map .link {
    flex: none;
    width: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
}

.host-map .link .arrow {
    color: var(--arrow);
    font-size: 18px;
}

/* Starter preview card (single service page) */

.starter-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 14px;
    background: var(--well);
}

.icon.badge-lg {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    font-size: 13px;
}

/* Bordered section headings (dashboard) */

.section-title {
    margin: 4px 0 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 700;
}

/* Starter service links (dashboard / starter page) */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 24px;
    margin-top: 8px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 0;
}

.service-name {
    font-weight: 600;
    font-size: 13.5px;
}

.service-item .sub {
    font-size: 12px;
}

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

/* Meta grids */

.meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.meta-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 18px;
}

.text-warn {
    color: var(--warn-text);
}

.meta-label {
    color: var(--muted2);
    font-size: 11px;
    font-weight: 600;
}

.meta-value {
    margin-top: 2px;
    font-weight: 600;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

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

.relation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 8px 12px;
    background: var(--surface);
}

.relation a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.relation a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
}

/* Drawer (slide-over quick inspector) */

.scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--scrim);
    /* blur + desaturate so the page clearly reads as not activatable */
    -webkit-backdrop-filter: blur(3px) saturate(50%);
    backdrop-filter: blur(3px) saturate(50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    /* the prototype is content-box: 400px content + 20px padding each side */
    width: min(440px, 92vw);
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--drawer-shadow);
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 20px 22px;
}

.drawer-open .scrim {
    opacity: 1;
}

.drawer-open .drawer {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.drawer-head > div:first-child {
    min-width: 0;
}

.drawer-head > div:first-child .muted {
    font-size: 12.5px;
}

.drawer-head .inline-actions {
    flex: none;
}

.drawer-head .button {
    min-height: 28px;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 7px;
}

.drawer-head h2 {
    margin-bottom: 2px;
    font-size: 17px;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.drawer-close {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 7px;
    background: var(--chip);
    color: var(--muted);
    font-size: 13px;
}

.drawer-close:hover {
    background: var(--line);
}

.drawer h3 {
    margin: 20px 0 8px;
    color: var(--muted2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.drawer .chip-row {
    margin-bottom: 16px;
}

.drawer .meta-grid {
    gap: 12px;
    margin-bottom: 20px;
}

/* Drawer lists are plain bottom-ruled rows, not boxed cards */
.drawer .relation {
    min-height: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line2);
    padding: 8px 0;
    background: transparent;
}

.drawer .relation:last-child {
    border-bottom: 0;
}

.host-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
}

.host-chain .arrow {
    color: var(--arrow);
    font-size: 12px;
}

.host-chain a {
    text-decoration: none;
}

/* Forms */

.form-card {
    max-width: 780px;
}

.form-section {
    margin-bottom: 22px;
}

.form-section > .eyebrow {
    padding-bottom: 7px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.form-grid > .full,
.form-grid > div:has(textarea) {
    grid-column: 1 / -1;
}

.form-grid label {
    display: block;
    margin-bottom: 7px;
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
}

.form-grid label.required::after {
    content: " *";
    color: var(--danger-text);
}

.form-grid input:not([type="checkbox"]),
.form-grid select,
.form-grid textarea {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--surface);
    padding: 0 12px;
    font-size: 14px;
}

.form-grid textarea {
    height: auto;
    min-height: 64px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.form-grid textarea.mono {
    font-family: var(--mono);
    font-size: 13px;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.form-help {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

/* Segmented radio (e.g. the physical-machine hardware mode) */

.hardware-mode {
    margin-bottom: 18px;
}

.field-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
}

.segmented-radio {
    display: inline-flex;
    border: 1px solid var(--border2);
    border-radius: 8px;
    overflow: hidden;
}

.segmented-radio > div {
    display: contents;
}

.segmented-radio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.segmented-radio label {
    margin: 0;
    padding: 7px 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.segmented-radio label:not(:first-of-type) {
    border-left: 1px solid var(--border2);
}

.segmented-radio input:checked + label {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* one option is always selected, so no per-option required marker */
.segmented-radio label.required::after {
    content: "";
}

.segmented-radio input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.form-errors {
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
    color: var(--danger-text);
    font-size: 13px;
}

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.form-footer .note {
    color: var(--muted);
    font-size: 13px;
    max-width: 420px;
}

.form-footer .inline-actions {
    margin-left: auto;
}

/* Autocomplete widget */

.autocomplete {
    position: relative;
}

.autocomplete-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.autocomplete-option {
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.autocomplete-option:hover,
.autocomplete-option.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* Flashes */

.flash {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--well);
}

.flash.success {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.flash.danger {
    border-color: var(--danger-text);
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* Login (minimal public chrome) */

.public-bar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
}

.login {
    min-height: calc(100vh - 56px);
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-panel {
    width: min(100%, 380px);
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
    padding: 28px;
}

.login-panel h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 20px;
}

.login-panel .form-row {
    margin-bottom: 14px;
}

.login-panel label {
    display: block;
    margin-bottom: 7px;
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
}

.login-panel input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--surface);
    padding: 0 12px;
    font-size: 14px;
}

.login-panel input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-panel button {
    width: 100%;
    margin-top: 6px;
}

.form-error {
    margin-bottom: 14px;
    border: 1px solid var(--danger-text);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* Public starter page */

.starter {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 24px 32px;
}

.starter h1 {
    text-align: center;
    margin-bottom: 30px;
}

.starter .service-item a.launch {
    text-decoration: none;
    color: inherit;
}

.starter .service-item a.launch:hover {
    color: var(--accent-deep);
}

.starter-footer {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
}

/* Error pages */

.error-page {
    max-width: 480px;
    margin: 10vh auto 0;
    padding: 24px;
    text-align: center;
}

.error-page .error-code {
    font-family: var(--mono);
    font-size: 64px;
    font-weight: 800;
    color: var(--faint);
    line-height: 1;
    margin-bottom: 10px;
}

.error-page .lede {
    margin: 8px auto 0;
}

.error-page .inline-actions {
    justify-content: center;
    margin-top: 22px;
}

/* Small screens */

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

    .rail {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 14px 0;
    }

    .body-grid {
        padding: 0 16px;
        gap: 0;
    }

    .detail-grid,
    .detail-grid.wide-aside,
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .main {
        padding: 16px 0;
    }

    .topbar {
        padding: 0 14px;
        gap: 8px;
    }

    .topbar .search {
        display: none;
    }
}

/* Modal dialogs (confirmations + small forms) */

.confirm-dialog,
.form-dialog {
    width: min(440px, calc(100vw - 32px));
    margin: auto;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--card-shadow);
    padding: 24px;
}

.confirm-dialog::backdrop,
.form-dialog::backdrop {
    background: var(--scrim);
    -webkit-backdrop-filter: blur(3px) saturate(50%);
    backdrop-filter: blur(3px) saturate(50%);
}

.confirm-dialog h2,
.form-dialog h2 {
    margin-bottom: 8px;
    font-size: 18px;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.confirm-dialog p {
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.confirm-dialog p[hidden] {
    display: none;
}

.confirm-actions,
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.form-dialog .field {
    margin-bottom: 14px;
}

.form-dialog label {
    display: block;
    margin-bottom: 7px;
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
}

.form-dialog select,
.form-dialog input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--surface);
    padding: 0 12px;
    font-size: 14px;
}

.form-dialog select:focus,
.form-dialog input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-dialog .dialog-actions {
    margin-top: 20px;
}

/* One-time agent token reveal */

.token-reveal {
    margin-bottom: 14px;
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    background: var(--accent-soft);
    padding: 12px 14px;
}

.token-reveal-label {
    margin-bottom: 8px;
    color: var(--accent-deep);
    font-size: 12.5px;
    font-weight: 600;
}

.token-reveal-value {
    display: block;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: all;
}

/* Accessibility helper */

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

/*
 * Wiki (8a): a three-pane workspace — pages tree, reader/editor, context rail.
 * The panes are edge-to-edge grid tracks, so their widths come straight from
 * the prototype (224 / 1fr / 296); border-box padding insets the content just
 * as content-box + auto width did in the prototype.
 */

.body-grid.wiki {
    grid-template-columns: 224px minmax(0, 1fr) 296px;
    gap: 0;
    padding: 0;
}

.body-grid.wiki-flat {
    grid-template-columns: 224px minmax(0, 1fr);
}

.body-grid.wiki .main {
    padding: 0;
}

/* Pages tree */

.wiki-tree {
    position: sticky;
    top: 56px;
    align-self: start;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 20px 16px;
    border-right: 1px solid var(--line);
}

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

.wiki-tree-new {
    color: var(--muted);
    font-size: 12px;
    text-decoration: none;
}

.wiki-tree-new:hover {
    color: var(--accent-deep);
}

.wiki-tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    color: var(--text3);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.wiki-tree-row:hover {
    background: var(--well);
}

.wiki-tree-row.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 600;
}

.wiki-tree-row .tw-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-caret {
    flex: 0 0 auto;
    width: 10px;
    color: var(--muted);
    font-size: 10px;
}

.tw-dot {
    flex: 0 0 auto;
    width: 10px;
}

.tw-dot::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--arrow);
}

.wiki-tree-empty {
    padding: 6px 8px;
}

/* Center: page bar + reader/editor */

.wiki-page-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    border-bottom: 1px solid var(--line);
}

.wiki-crumbs {
    min-width: 0;
    color: var(--muted2);
    font-size: 12.5px;
}

.wiki-crumb {
    color: var(--muted2);
    text-decoration: none;
}

.wiki-crumb:hover {
    color: var(--accent-deep);
}

.wiki-crumb-current {
    color: var(--text3);
    font-weight: 600;
}

.wiki-crumb-sep {
    padding: 0 8px;
    color: var(--muted);
}

.wiki-page-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Segmented toggle (Read/Edit, Write/Preview) */

.segmented {
    display: inline-flex;
    border: 1px solid var(--border2);
    border-radius: 8px;
    overflow: hidden;
}

.segmented > * {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.segmented.sm > * {
    padding: 6px 12px;
    font-size: 12.5px;
}

.segmented > * + * {
    border-left: 1px solid var(--border2);
}

.segmented .is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.wiki-center {
    padding: 28px 26px 40px;
}

.wiki-article {
    max-width: 680px;
}

.wiki-article h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.wiki-meta {
    margin-bottom: 26px;
    color: var(--muted2);
    font-size: 12.5px;
}

.wiki-welcome h1,
.wiki-results h1 {
    font-size: 26px;
    margin-bottom: 8px;
}

.wiki-welcome .button {
    margin-top: 16px;
}

.wiki-results .plain-list {
    margin-top: 12px;
}

/* Rendered markdown prose */

.wiki-prose {
    max-width: 680px;
    color: var(--text2);
    font-size: 15.5px;
    line-height: 1.7;
}

.wiki-prose > :first-child {
    margin-top: 0;
}

.wiki-prose p {
    margin: 0 0 22px;
}

.wiki-prose h2 {
    margin: 30px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 19px;
    font-weight: 700;
}

.wiki-prose h3 {
    margin: 24px 0 10px;
    font-size: 16px;
    font-weight: 700;
}

.wiki-prose ul,
.wiki-prose ol {
    margin: 0 0 22px;
    padding-left: 20px;
    line-height: 1.75;
}

.wiki-prose li {
    margin-bottom: 6px;
}

.wiki-prose a {
    color: var(--accent-deep);
    font-weight: 600;
    text-decoration: none;
}

.wiki-prose a:hover {
    text-decoration: underline;
}

.wiki-prose code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--chip);
    font-family: var(--mono);
    font-size: 0.88em;
}

.wiki-prose pre {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--well);
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text2);
}

.wiki-prose pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

.wiki-prose blockquote {
    margin: 0 0 22px;
    padding-left: 14px;
    border-left: 3px solid var(--border);
    color: var(--muted);
}

.wiki-prose table {
    margin: 0 0 22px;
    border-collapse: collapse;
    font-size: 14px;
}

.wiki-prose th,
.wiki-prose td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

.wiki-prose th {
    background: var(--well);
    font-weight: 700;
}

.wiki-prose img {
    max-width: 100%;
}

/* Editor */

.wiki-editor {
    padding: 16px 26px 30px;
}

.wiki-title-input {
    width: 100%;
    border: 0;
    padding: 6px 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wiki-title-input:focus {
    outline: none;
}

.wiki-title-input::placeholder {
    color: var(--faint);
}

.wiki-editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0 14px;
}

.wiki-toolbar {
    display: flex;
    gap: 6px;
}

.wiki-toolbar button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border2);
    border-radius: 7px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
}

.wiki-toolbar button:hover {
    color: var(--text);
    border-color: var(--muted);
}

.wiki-body {
    width: 100%;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text2);
    resize: vertical;
}

.wiki-body:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.wiki-preview {
    min-height: 420px;
    max-width: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
}

.wiki-editor-parent {
    max-width: 380px;
    margin-top: 16px;
}

.wiki-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
}

.wiki-editor select,
.wiki-tag-add select {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--surface);
    padding: 0 10px;
    font-size: 13px;
}

.wiki-editor select:focus,
.wiki-tag-add select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.wiki-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.wiki-draft-status {
    font-size: 12.5px;
    color: var(--muted2);
}

/* Context rail */

.wiki-context {
    position: sticky;
    top: 56px;
    align-self: start;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 20px 18px;
}

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

.wiki-context-head.section-top {
    margin-top: 26px;
}

.wiki-context-empty {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.6;
}

.wiki-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.wiki-tag .icon {
    width: 26px;
    height: 26px;
    font-size: 9.5px;
}

.wiki-tag-body {
    flex: 1;
    min-width: 0;
}

.wiki-tag-body a,
.wiki-tag-name {
    display: block;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiki-tag-body a:hover {
    color: var(--accent-deep);
}

.wiki-tag-kind {
    color: var(--muted2);
    font-size: 11.5px;
}

.wiki-tag-remove {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    padding: 2px 4px;
}

.wiki-tag-remove:hover {
    color: var(--danger-text);
}

.wiki-tag-add {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.wiki-toc {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wiki-toc a {
    color: var(--text3);
    font-size: 13px;
    text-decoration: none;
}

.wiki-toc a:hover {
    color: var(--accent-deep);
}

.wiki-revision {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.wiki-revision:last-child {
    border-bottom: 0;
}

.wiki-revision-title {
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiki-revision:first-child .wiki-revision-title {
    font-weight: 600;
}

.wiki-revision-ver {
    flex: 0 0 auto;
    color: var(--muted2);
    font-size: 11.5px;
}

/* Wiki on small screens: stack the panes */

@media (max-width: 900px) {
    .body-grid.wiki,
    .body-grid.wiki-flat {
        grid-template-columns: minmax(0, 1fr);
    }

    .wiki-tree,
    .wiki-context {
        position: static;
        max-height: none;
        overflow-y: visible;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .wiki-page-bar,
    .wiki-center {
        padding-left: 16px;
        padding-right: 16px;
    }
}