.Popup  {
    display:flex;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-1000;
    align-items: center;
    justify-content: center;
    transition:all 250ms;
    opacity:0;
}
.Popup .window {
    flex:0 0;
    border:1px solid var(--page-border);
    background-color:var(--bg-color);
}
.Popup .header {
    flex:30px 0;
    display:flex;
    justify-content: space-between;
}
.Popup .header-title {
    font-weight:bold;
    margin:3px;
}
.Popup .header-close {
    cursor:pointer;
}
.Popup .control {
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    padding:var(--spacer);
}
.Popup .control > DIV {
    margin-left:var(--spacerhalf);
}
.Popup .content {
    display:flex;
    flex-direction: column;
    flex:1 0;
    align-items: center;
    justify-content: center;
    padding:var(--spacer3);
}
.Popup .shim {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:var(--tray-bg);
    opacity:50%;
    z-index:-1;
}
.Popup .popup-form > div {
    margin-bottom: var(--spacer);
}

.Toast .layout {
    position: fixed;
    width: 100%;
    height: 0;
    max-height: 0;
    left: 0;
    top: 0;
    z-index: var(--z-index-toast);
}
.Toast .display {
    display:flex;
    flex-direction: column;
    align-items:center;
    position: relative;
    border:3px solid var(--bg-color);
    border-radius:var(--spacer2);
    padding:var(--spacer2);
    background-color:var(--bg-color);
    width: fit-content;
    max-width: 380px;
    margin: 0 auto;
    top:-200px;
    transition:all 200ms;
}
.Toast .display.active {
    top:30px;
}
.Toast .display.warning {
    border-color:var(--status-warning);
}
.Toast .display.error {
    border-color:var(--status-error);
}
.Toast .display.success {
    border-color:var(--status-success);
}
.Toast .display.prompt {
    border-color:var(--text-color);
}

.Toast .display .message {
    flex:1 0;
    text-align:center;
    color:var(--text-color);
}
.Toast .display .controls {
    display:none;
    margin-top:var(--spacer);
    flex-direction: row;
    flex:1 0;
}
.Toast .display.prompt .controls {
    display: flex;
}
.Toast .display .controls button {
    border:2px solid var(--page-border);
    background-color:var(--tray-bg);
    border-radius:8px;
    padding:2px 6px;
    cursor:pointer;
    color:var(--text-color);
    white-space: nowrap;
    min-width:80px;
    margin:var(--spacer);
    padding:var(--spacerhalf);
}
.Toast .display .controls button:hover {
    background-color:var(--page-action);
}

/* SignIn — login card. Componentry scopes each selector under the component
   root class (`.SignIn`); the bare `.` selector targets that root element
   itself (same convention as PageHeader.css). Palette from theme.css. */

.SignIn  {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
}

.SignIn .signin-card {
    display: flex;
    flex-direction: column;
    width: 320px;
    padding: var(--spacer3);
    background: var(--bg-color-d);
    color: var(--text-color-d);
    border-radius: 12px;
    border-top: 4px solid var(--rfd-red);
    box-shadow: 0 18px 40px #00000040;
    text-align: center;
}

.SignIn .signin-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    margin: 0 auto var(--spacer2);
}

.SignIn .signin-card h2 {
    margin: 0;
    font-size: 1.25em;
    color: var(--text-color-d);
}

.SignIn .signin-sub {
    margin: var(--spacerhalf) 0 var(--spacer2);
    font-size: 0.85em;
    color: var(--neutral);
}

.SignIn .signin-card input {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: var(--spacer);
    border: 1px solid #ffffff22;
    border-radius: 6px;
    background: #ffffff10;
    color: var(--text-color-d);
    font-size: 14px;
}

.SignIn .signin-card input::placeholder { color: var(--neutral); }
.SignIn .signin-card input:focus { outline: none; border-color: var(--rfd-red); }

.SignIn .signin-card button {
    width: 100%;
    padding: 11px;
    margin-top: var(--spacerhalf);
    border: none;
    border-radius: 6px;
    background: var(--rfd-red);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.SignIn .signin-card button:hover { background: var(--rfd-red-dark); }
.SignIn .signin-card button:disabled { opacity: 0.5; cursor: default; }

.SignIn .signin-status {
    margin-top: var(--spacer);
    min-height: 18px;
    font-size: 13px;
}

.SignIn .signin-status.err { color: var(--status-error); }
.SignIn .signin-status.ok { color: var(--status-success); }

/* Bootstrap (first-run) hint + the owner-creation note. */
.SignIn .signin-bootstrap-note {
    margin-bottom: var(--spacer2);
    padding: var(--spacer);
    border: 1px solid var(--rfd-gold);
    border-radius: 6px;
    background: var(--tray-hilite);
    color: var(--rfd-gold-light);
    font-size: 0.78em;
    line-height: 1.4;
    text-align: left;
}

.Button  {
    margin-right:var(--spacer);
    margin-left:0;
}
.Button.flow-left {
    margin-right:0;
    margin-left:var(--spacer);
}

.Button.working .icon::before {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.CodeBlock  {
    position:relative;
    flex:1 0;
    box-sizing:border-box;
    margin-top:var(--spacerhalf);
}
.CodeBlock .code {
    display:block;
    position:relative;
    flex:1 0;
    min-height:150px;
    overflow-y:auto;
}

.DataWall  {
    position:relative;
    display:flex;
    width:100%;
    height:100%;
    flex-direction: row;
    flex-wrap:wrap;
}
.DataWall .wallframe {
    flex:0.5 0;
    min-height:300px;
    min-width:300px;
    border:1px solid var(--page-border);
    margin:3px;
    box-shadow: 2px 2px var(--tray-hilite);
}
.DataWall th {
    text-align:left;
}
.DrawerWidget  {
    display:flex;
    flex-direction: row;
    width:100%;
    height:100%;
}
.DrawerWidget .drawerSet {
    display:flex;
    margin-top:var(--spacer2);
    flex-direction: column;
    border-right:1px solid var(--page-border);
    z-index:10;
}
.DrawerWidget .drawer {
    min-width:120px;
    border-top:1px solid var(--page-border);
    border-right:1px solid var(--page-border);
    border-bottom:1px solid var(--page-border);
    padding:var(--spacer);
    font-weight: bold;
    color:var(--text-quiet);
    margin-bottom:-1px;
    margin-right:-1px;
    background-color:var(--bg-color);
    transition:all 200ms;
}
.DrawerWidget .drawer:hover {
    cursor:pointer;
    background-color:var(--page-action);
}
.DrawerWidget .drawer.selected {
    color:var(--text-color);
    border-right-color:transparent;
    background-color:var(--page-selected);
}
.DrawerWidget .drawerContent {
    position:relative;
    display:flex;
    flex-direction: column;
    flex:1 0;
    padding:var(--spacer);
    height:calc(100% - var(--spacer2));
}

.EditCollection  {
    height:100%;
    display:flex;
}

.InputInlineTable  {
    width:100%;
    margin-bottom:var(--spacer);
}
.InputInlineTable table {
    width:100%;
}
.InputInlineTable TD DIV {
    position:relative;
}
.InputInlineTable .quiet INPUT {
    border:0;
}
.InputInlineTable .attribute-title {
    font-weight:bold;
    margin-top:var(--spacer);
    font-size:0.8em;
}
.InputInlineTable .Button {
    margin-right:0;
}
.InputInlineTable input {
    width:100% !important;
}

.InputInlineTable input.invalid {
    border: 1px solid red !important;
}

.InputInlineTable input.invalid-warning {
    border: 1px solid yellow !important;
}

.InputInlineTable .invalid-message,.InputInlineTable  .invalid-warning-message {
    display:block;
    position:absolute;
    top:var(--spacerquarter);
    right:var(--spacerquarter);
    bottom:var(--spacerquarter);
    left:var(--spacerquarter);
    overflow:hidden;
    white-space: nowrap;
}

.InputInlineTable .invalid-message {
    background-color: var(--status-error);
    color: #fff;
}

.InputInlineTable .invalid-warning-message {
    background-color: var(--status-warning);
}


.InputInlineTable TD DIV:hover .invalid-message,.InputInlineTable  TD DIV:hover .invalid-warning-message {
    display:none;
}

.InputSlider  {
    display:flex;
    width:100%;
    margin:var(--spacer) 0;
    align-items: center;
}
.InputSlider INPUT[type=range] {
    flex:1 1;
    -webkit-appearance: none;
    width: calc(100% - 16px);
    border-radius: 8px;
    height: 7px;
    border: 1px solid #1997c6;
    background-color: transparent;
    padding: 4px;
    margin: 0 var(--spacer);
}
.InputSlider INPUT[type=range].thin {
    width:5%;
}
.InputSlider .title {
    flex:0 0;
    margin-left:var(--spacer);
}
.InputSlider .value {
    flex:15% 0;
    margin-right:var(--spacer);
    overflow:hidden;
}
.InputTags  {
    width:100%;
    margin-bottom:var(--spacer);
}
.InputTags .tray {
    display:flex;
    width:100%;
}
.InputTags .container {
    display:flex;
    flex:1 0;
    flex-wrap:wrap;
    border:1px solid var(--text-color);
    border-radius: 3px;
    padding:0 6px 6px 6px;
}
.InputTags .tag-element {
    display:flex;
    flex-direction: row;
    background-color:var(--text-color-d);
    align-items:baseline;
    margin-top:6px;
}
.InputTags .tag-element .InputText {
    margin-right:unset !important;
}
.InputTags .tag-element INPUT {
    margin:-3px;
    padding:1px 3px;
    width:80px;
    min-width:unset;
    font-size:0.9em;
}
.InputTags .tag-element.defined INPUT {
    background-color: transparent;
}
.InputTags .tag-control {
    margin:-3px;
    padding:3px;
    cursor:pointer;
}
.InputTags .tag-control .icon {
    padding:2px;
    border:1px solid var(--text-color);
    margin-left:5px;
    border-radius:15px;
}
.InputTags .tag-control .icon:hover {
    color:var(--bg-color);
    background-color:var(--action-color-hilite);
}

.InputToggle  {
    display:flex;
    flex-direction: column;
    align-items:center;
}
.InputToggle .checkbox {
    position:relative;
    display:flex;
    padding:0 6px;
    align-content:center;
    justify-content:center;
    flex:1 0;
    font-size:1.1em;
    background-color:white;
    border:1px solid black;
    border-radius:3px;
    align-items:center;
    color:transparent;
}
.InputToggle .checkbox .icon {
    padding:0;
}
.InputToggle .checkbox.checked {
    color:var(--text-color);
}

.Loader .loader {
    z-index: 99;
    opacity: .5;
    background-color: var(--action-color-hilite);
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.Main  {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-sizing: content-box;
    text-align: left;

}
.Main .page-main {
    position:relative;
    display: flex;
    flex-direction: row;
    flex: 1 0;
    min-height:300px;
}

.ObjectSelector  {
    width:100%;
    margin-bottom:var(--spacer);
}
.ObjectSelector TABLE {
    border:1px solid var(--page-border);
    padding:var(--spacerhalf);
    max-height:250px;
    overflow-y:scroll;
    border-spacing: 0;
}
.ObjectSelector TR {
    cursor:pointer;
}
.ObjectSelector TR.selected {
    background-color:var(--action-color);
    color:var(--bg-color);
}
.ObjectSelector TD {
    vertical-align: top;
}
.ObjectSelector TD:first-child {
    padding-right:var(--spacer);
}
.ObjectSelector TD:nth-child(2) {
    font-size:.8em;
}
.PageBody  {
    position:relative;
    display: flex;
    flex-direction: column;
    flex: 1 1;
    /*border-left: 1px solid var(--page-border);*/
    /*border-top: 1px solid var(--page-border);*/
    /*border-bottom: 1px solid var(--page-border);*/
    border-top-left-radius: 20px;
    background-color: var(--bg-color);
    color:var(--text-color);
}
.PageBody .page-content {
    position:relative;
    display:flex;
    flex-direction: column;
    flex:1 1;
    overflow:auto;
}
.PageBody .page-controls {
    display: flex;
    flex:0 0;
    margin-top:var(--spacer);
    height:40px;
    align-self:flex-end;
}
.PageBody .page-controls .Button {
    margin-left:var(--spacer);
    margin-right:0;
}
.PageBody .properties {
    position:relative;
    display:flex;
    flex-direction: column;
    flex:1 0;
    margin-top:var(--spacerhalf);
    padding-top:var(--spacerhalf);
    border-top:1px solid var(--page-border);
}
.PageBody .property-set {
    display:flex;
    flex-direction:row;
    margin-top:var(--spacerhalf);
}
.PageBody .property-set.stacked {
    flex-direction:column;
}
.PageBody .property-set.hidden {
    display:none;
}
.PageBody .property-set:not(.stacked) DIV:not(:last-child) {
    margin-right:var(--spacer);
}


.PageFooter  {
    display: flex;
    font-size: 0.8em;
    flex-grow: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    margin: 8px;
}
.PageFooter .version-label {
    color:var(--text-quiet);
}


.PageHeader  {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacer2);
    padding: 0 var(--spacer2);
    height: var(--header-height);
    background: var(--rfd-ink);
    color: var(--text-color-d);
    border-bottom: 3px solid var(--rfd-red);
}
.PageHeader .rfd-logo {
    height: 40px;
    width: auto;
    cursor: pointer;
    display: block;
}
.PageHeader .header-titles {
    flex: 1 0;
}
.PageHeader .header-titles H1 {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-color-d);
}
.PageHeader .header-titles .breadcrumb {
    margin: 2px 0 0;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rfd-gold);
}
.PageHeader .header-session {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacer);
}
.PageHeader .env-pill {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-color-quiet-d);
    border: 1px solid var(--rfd-red);
    color: var(--text-color-d);
}
.PageHeader .header-user {
    font-size: 0.82em;
    color: var(--rfd-gold);
}
.PageHeader .signout-link {
    font-size: 0.78em;
    color: var(--text-color-d);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dotted var(--neutral);
}
.PageHeader .signout-link:hover { color: var(--rfd-red); border-color: var(--rfd-red); }

/* ── Header search (scope dropdown + query box) ── */
.PageHeader .header-search {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
}
.header-search .hs-scope,
.PageHeader .header-search .hs-input {
    font-size: 0.85em;
    padding: var(--spacerquarter) var(--spacerhalf);
    border-radius: var(--spacerquarter);
    border: 1px solid var(--neutral);
    background: var(--bg-color-quiet-d);
    color: var(--text-color-d);
}
.PageHeader .header-search .hs-input {
    width: 220px;
}
.PageHeader .header-search .hs-input::placeholder {
    color: var(--text-color-quiet);
}
.header-search .hs-input:focus,
.PageHeader .header-search .hs-scope:focus {
    outline: none;
    border-color: var(--rfd-gold);
}

.PageMenu  {
    flex: 100px 0;
}
.PageMenu .nav-tray {
    overflow-y:auto;
}
.PageMenu A {
    text-decoration:unset;
    color:unset;
}
.PageMenu .nav-button {
    display:flex;
    flex-direction: column;
    width:80px;
    height:80px;
    /*border:1px solid var(--bg-color);*/
    border-radius:20px;
    margin:0 0 var(--spacer) var(--spacer);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    user-select:none;
    transition:all 200ms;
    background-color:var(--bg-color-quiet-d);
}
.PageMenu .nav-button .icon {
    font-size:2em;
}
.PageMenu .nav-button .text {
    align-items:center;
    font-size:0.8em;
}
.PageMenu .nav-button:hover {
    color:var(--text-color);
    background-color:var(--bg-color);
    cursor:pointer;
}
.PageMenu .nav-button:hover .text {
    color:var(--text-color);
}

.TabWidget  {
    display:flex;
    flex-direction: column;
    width:100%;
    height:100%;
}
.TabWidget .tabSet {
    display:flex;
    z-index:10;
}
.TabWidget .tab {
    border:1px solid var(--page-border);
    margin-right:var(--spacer);
    padding:var(--spacerhalf) var(--spacer);
    font-weight: bold;
    color:var(--text-quiet);
    margin-bottom:-1px;
    background-color:var(--bg-color);
}
.TabWidget .tab:hover {
    cursor:pointer;
}
.TabWidget .tab.selected {
    color:var(--text-color);
    border-bottom-color:var(--bg-color);
}
.TabWidget .tab.hidden {
    visibility: hidden;
}
.TabWidget .tabContent {
    position:relative;
    flex:1 0;
    border:1px solid var(--page-border);
}
.TabWidget .tabContent .contentComponent {
    display:flex;
    visibility: hidden;
    position:absolute;
    top:var(--spacer);
    bottom:var(--spacer);
    left:var(--spacer);
    right:var(--spacer);
    height:unset;
}
.TabWidget .tabContent .contentComponent.selected {
    visibility:visible;
}

.TableWidget  {
    width:100%;
    overflow-y: auto;
}
.TableWidget TABLE {
    width:100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.TableWidget TR:not(:first-child):hover {
    background-color:var(--action-color-hilite);
    cursor:pointer;
}
.TableWidget TR.selected {
    background-color:var(--action-color);
}
.TableWidget TH {
    text-align:left;
    white-space: nowrap;
    letter-spacing: 2px;
    padding-bottom:var(--spacerhalf);
}
.TableWidget TD {
    text-align:left;
    padding:2px 4px;
    vertical-align: top;
}
.TableWidget TD:not(:last-child) {
    padding-right:var(--spacerhalf);
}
.TableWidget TD:first-child IMG {
    display:inline-block;
}

.ToolTip  {
    color:blue;
    font-size:0.8em;
    font-style: italic;
    padding:var(--spacer) 0;
}

.Wiki  {
    height:calc(100% - var(--spacer2));
    width:calc(100%);
}

.Wiki #doclet-container {
    position:relative;
    width:100%;
    height:100%;
}
.Wiki #doclet-controls BUTTON {
    display:none;
}
.Wiki #doclet-render {
    overflow:auto;
}
.Wiki .doclet-render .frame-set {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.Wiki .doclet-render .frame-set .frame-container {
    position:relative;
    min-width:300px;
    min-height:300px;
    margin:var(--spacer);
}
.Wiki .doclet-render .frame-set .frame-title {
    display:none;
    font-size:13px;
    height:15px;
    background-color:var(--bg-color-d);
    padding:1px 5px;
}
.Wiki .doclet-render .frame-set IFRAME {
    height:calc(100% - 15px);
    width:100%;
}
.Wiki .frame-container.titled .frame-title {
    display:block;
}
.Wiki .frame-container.titled IFRAME {
    height:calc(100% - 15px);
}
.Wiki #doclet-controls:not(.editing) BUTTON.rendering {
    display:block;
}
.Wiki .modified .important-if-modified {
    background-color:var(--status-warning);
}
.Wiki #doclet-controls.editing BUTTON.editing {
    display:block;
}
.Wiki #doclet-container #render-container {
    position:absolute;
    display:none;
    height:calc(100% - var(--spacer2));
    width:calc(100% - var(--spacer));
    padding:var(--spacer) 0 var(--spacer) var(--spacer);
}
.Wiki #doclet-container #editor-container {
    position:absolute;
    display:none;
    height:calc(100% - var(--spacer2));
    width:calc(100% - var(--spacer2));
    padding:var(--spacer);
}
.Wiki #doclet-container:not(.editing) #render-container {
    display:flex;
    flex-direction: row;
}
.Wiki #doclet-container.editing #editor-container {
    display:flex;
    flex-direction:column;
}
.Wiki #render-container #doclet-menu {
    overflow-y:auto;
    min-width:140px;
}
.Wiki #doclet-menu #menu-content {
    flex:150px 0;
    padding:var(--spacer) var(--spacer) var(--spacer) 0;
}
.Wiki #doclet-container #doclet-properties {
    display:flex;
    flex-direction: row;
    margin-bottom:var(--spacer);
    margin-right:100px;
    flex-wrap: wrap;
}
.Wiki #doclet-container #doclet-properties DIV:not(:last-child) {
    margin-right: var(--spacer);
}
.Wiki #doclet-container #doclet-render {
    display:flex;
    flex:1 0;
    padding:var(--spacer);
}
.Wiki #doclet-container #editor-tray {
    position:relative;
    flex:1 0;
}
.Wiki #doclet-container #doclet-editor {
    height:100%;
    width:100%;
    padding:1px;
}
.Wiki #doclet-controls {
    position:absolute;
    right: 16px;
    display: inline-flex;
    margin-top:-28px;
    height:30px;
    align-self:flex-end;
    z-index:1000;
}
.Wiki #doclet-controls.hidden {
    display:none;
}
.Wiki #doclet-content {
    width:100%;
}
.Wiki button {
    display:none;
    padding:0;
    margin-right:4px;
    cursor:pointer;
    border:1px solid var(--text-color);
    border-radius:10px;
    width:32px;
    height:32px;
    font-size:1.2em;
    background-color:var(--bg-color);
    color:var(--text-color);
}
.Wiki button:hover {
    background-color:var(--action-color-hilite);
}

.Wiki A {
    color:var(--action-color);
    text-decoration: none;
}
.Wiki A:hover {
    text-decoration: underline;
}

.Wiki TABLE {
    background-color:var(--tray-bg);
    border:1px solid var(--page-border);
    width:100%;
    border-collapse: collapse;
}
.Wiki th,.Wiki  td {
    padding: var(--spacerhalf) var(--spacer);
    text-align:left;
    vertical-align:top;
}
.Wiki th {
    border:1px solid var(--page-border);
}
.Wiki #unavailable {
    padding:var(--spacer);
    font-style: italic;
}


.Wiki .menu {
    font-size: 0.8em;
    border-right:1px dotted var(--text-quiet);
}
.Wiki #mobile-doclet-menu {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:10%;
    background-color: black;
    font-size:1.3em;
    display:none;
    padding-top:24px;
    z-index:100;
    overflow-y:auto;
    overflow-x:hidden;
}
.Wiki #mobile-doclet-menu.active {
    display:block;
}
.Wiki #mobile-doclet-menu #doclet-menu {
    width:100%;
}
.Wiki #mobile-doclet-menu .menuitem.root-menu {
    width:100%;
}
.Wiki #menu-toggle {
    color:white;
    font-size: 3em;
    z-index:100;
    position:absolute;
    left: var(--spacer);
    margin-top:-42px;
    z-index:100;
    display:none;
    cursor:pointer;
}
@media screen and (max-width: 600px) {
    #menu-toggle {
        display:block !important;
    }
}
.Wiki .menuitem {
    display:block;
    flex-direction: column;
    margin-left:3px;
    margin-top:var(--spacerthird);
    color:var(--text-quiet);
}
.Wiki .menuitem .label {
    display: flex;
    flex-direction: row;
    white-space-treatment: nowrap;
}

.Wiki .menuitem>.label>.toggle {
    flex:0 0;
    margin-right:var(--spacerhalf);
    transition: all 200ms;
    font-weight: bold;
}
.Wiki .menuitem .icon {
    padding:0;
}
.Wiki .menuitem>.label>.toggle:hover {
    cursor:pointer;
    text-decoration: unset;
}
.Wiki .menuitem.open>.label>.toggle {
    transform: rotate(90deg);
}
.Wiki .menuitem .label .label-text {
    flex:1 1;
}
.Wiki .menuitem>.label>.label-text:hover {
    cursor:pointer;
    text-decoration: underline;
}
.Wiki .menuitem>.tray {
    margin-top:var(--spacerthird);
    margin-bottom:var(--spacer);
    margin-left:var(--spacerhalf);
    transition:height 200ms;
    display:none;
}
.Wiki .menuitem.open>.tray {
    display:block;
}
.Wiki .menu-container {
    position:fixed;
    width:150px;
    margin-top:0;
    margin-left:-3px;
}

.WikiBlock  {
    position:relative;
    display:flex;
    flex:1 1;
    width:100%;
    min-height:80px;
    box-sizing:border-box;
}
.WikiBlock .content {
    position:absolute;
    flex:1 0;
    left:0;
    top:0;
    right:40px;
    bottom:0;
}
.WikiBlock .control {
    position:absolute;
    flex:38px 0;
    display: inline-flex;
    flex-direction: column;
    right:0;
}
.WikiBlock .content .doclet-editor {
    display:none;
    height:calc(100% - 14px);
    width:calc(100% - 14px);
    border:0;
    padding:6px;
    resize: none;
    overflow-y:auto;
}
.WikiBlock .content .doclet-editor.titled {
    height:calc(100% - 28px);
}
.WikiBlock .content .doclet-render {
    display:none;
}
.WikiBlock button {
    display:none;
    padding:0;
    margin-right:4px;
    cursor:pointer;
    border:1px solid var(--text-color);
    border-radius:10px;
    width:32px;
    height:32px;
}

.WikiPage  {
    height:100%;
}


.AttributeSelector  {
    width:100%;
    margin-bottom:var(--spacer);
}
.AttributeSelector .tray {
    display:flex;
    width:100%;
    min-height:40px;
}
.AttributeSelector .container {
    display:flex;
    flex:1 0;
    flex-wrap:wrap;
    border:1px solid var(--text-color);
    padding-bottom:var(--spacerhalf);
}
.AttributeSelector .tray BUTTON {
    height:40px;
    background-color:var(--item-elevated);
}
.AttributeSelector .control {
    display:flex;
    flex-direction: column;
    flex:20px 0;
    text-align: center;
    align-items: center;
    border:1px solid var(--text-color);
    margin-left:-1px;
    font-size:20px;
}
.AttributeSelector .control:hover {
    background-color:var(--page-action);
    cursor:pointer;
}
.AttributeSelector .item {
    display:inline-block;
    border:1px solid var(--text-color);
    border-radius:8px;
    background-color:var(--page-selected);
    font-size:.9em;
    padding:var(--spacerquarter) var(--spacerhalf);
    margin:var(--spacerhalf) var(--spacerhalf) 0 var(--spacerhalf);
    white-space: nowrap;
}
.AttributeSelector .item:hover {
    background-color:var(--page-action);
    cursor:pointer;
}


.Explore  {
    display:flex;
    flex-direction: column;
    align-content: space-around;
    height:100%
}
.Explore .explore-instruction {
    flex:0 0;
    padding-bottom:var(--spacer);
}
.Explore .section-title {
    background-color:var(--tray-bg);
    font-size:1.1em;
    font-weight:bold;
    color:var(--text-color);
    padding:var(--spacerthird);
    letter-spacing:3px;
}
.Explore .explore-ping {
    display:flex;
    flex-direction: row;
    flex:0 0;
    padding-top:var(--spacer);
}
.Explore .explore-ping SELECT {
    height:40px;
}
.Explore .explore-pull {
    display:flex;
    flex-direction: row;
    flex:1 0;
    border-bottom:1px solid var(--page-border);
    margin-bottom:var(--spacer);
}
.Explore .pull-configure > DIV {
    margin-top:var(--spacer);
}
.Explore .pull-configure {
    flex:0.4 0;
    margin-right:var(--spacer);
}
.Explore .pull-render {
    flex:0.6 0;
    margin-left:var(--spacer);
    border-left:1px solid var(--page-border);
}
.Explore .pull-render IFRAME {
    box-sizing: border-box;
    height:100%;
    width:100%;
    border:0;
}
.Explore .explore-url {
    flex:0 0;
    vertical-align:middle;
    min-height:24px;
    word-break: break-all;
    font-weight:bold;
    font-size:1.1em;
}
.Explore .explore-url A {
    font-family: monospace;
    color:darkblue;
    transition:color 200ms;
}
.Explore .explore-url.active {
    background-color:greenyellow;
}


.Ontology  {
    display:flex;
    flex-direction:row;
    height:calc(100% - var(--spacer2));
    margin:var(--spacer);
}
.Ontology .space-fields {
    display:flex;
    flex-direction: column;
}
.Ontology .ontology-spaces {
    display:flex;
    flex-direction:column;
    flex:0 200px;
    overflow-y:hidden;
    padding-right:var(--spacer);
}
.Ontology .tab-content {
    position:absolute;
    top:0;
    bottom:0;
    left:6px;
    right:6px;
}
.Ontology .ontology-details {
    display:flex;
    flex-direction:column;
    flex:1 1;
    margin-left:var(--spacer);
}
.Ontology .page-content .k-grid,.Ontology .page-content .k-tabstrip {
    height:100%;
}
.Ontology .field-content {
    flex:60% 1
}
.Ontology .field-properties {
    flex: 40% 250px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 12px);
    margin:0 6px;
}
.Ontology LABEL {
    color:var(--text-quiet);
    margin-top:var(--spacer);
}
.Ontology .space-controls {
    position:absolute;
    bottom:4px;
    left:var(--spacer);
}

.SpaceFields  {
    display:flex;
    position:relative;
    flex-direction: column;
    height:100%;
}
.SpaceFields .TableWidget {
    flex:.3 0;
}
.SpaceFields .TabWidget {
    margin-top:var(--spacer);
}
.SpaceFields .WikiBlock {
    padding-top:var(--spacerhalf);
    margin-top:var(--spacerhalf);
}
.SpaceFields .WikiBlock .content {
    margin-top:var(--spacer);
    border-top:1px solid var(--page-border);
}

.SpaceProperties  {
    display:flex;
    flex-direction:column;
    height:100%;
}
.SpaceProperties > div {
    margin-bottom:var(--spacer);
}
.SpaceProperties .WikiBlock .content {
    margin-top:var(--spacer);
    border-top:1px solid var(--page-border);
}
.SpaceProperties .properties {
    display:flex;
    flex:0 0;
}



/* Magine API bench — scoped to the page root (`. {}` becomes `.MagineApi` via
   Componentry). Swagger's information hierarchy, RFD's tokens: a coloured method
   badge and a monospace target on every bar, everything else earning its place.
   No hard-coded colours or sizes — theme tokens only. */
.MagineApi  {
    flex: 1 0;
    padding: var(--spacer2);
    overflow-y: auto;
}

/* ── environment strip ─────────────────────────────────────────────────── */
.MagineApi .mg-env {
    background: var(--bg-color-quiet);
    border: 1px solid var(--page-border);
    border-radius: var(--spacerhalf);
    padding: var(--spacer);
    margin-bottom: var(--spacer);
}
.MagineApi .mg-env-row {
    display: flex;
    gap: var(--spacerhalf);
    align-items: baseline;
    font-size: 0.85em;
    line-height: 1.6;
}
.MagineApi .mg-env-key {
    min-width: 8em;
    color: var(--text-color-quiet);
}
.MagineApi .mg-env-row code { font-size: 0.95em; }
.MagineApi .mg-env-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacerquarter);
    margin-top: var(--spacerhalf);
}
.MagineApi .mg-env-ok { background: var(--status-success); color: var(--white); }
.MagineApi .mg-env-missing { background: var(--status-error); color: var(--white); }

/* ── progress ──────────────────────────────────────────────────────────── */
.MagineApi .mg-progress {
    display: flex;
    align-items: center;
    gap: var(--spacer);
    margin-bottom: var(--spacer);
}
.MagineApi .mg-progress-bar {
    flex: 1;
    height: var(--spacerhalf);
    background: var(--bg-color-quiet-d);
    border-radius: var(--spacerhalf);
    overflow: hidden;
}
.MagineApi .mg-progress-bar span {
    display: block;
    height: 100%;
    background: var(--status-success);
}
.MagineApi .mg-progress-text { font-size: 0.85em; color: var(--text-color-quiet); white-space: nowrap; }

/* ── toolbar ───────────────────────────────────────────────────────────── */
.MagineApi .mg-toolbar {
    display: flex;
    gap: var(--spacerquarter);
    align-items: center;
    margin-bottom: var(--spacer);
    flex-wrap: wrap;
}
.MagineApi .mg-search {
    flex: 1;
    min-width: 12em;
    padding: var(--spacerquarter) var(--spacerhalf);
    border: 1px solid var(--page-border);
    border-radius: var(--spacerquarter);
    background: var(--white);
    color: var(--text-color);
}
.MagineApi .mg-filter {
    padding: var(--spacerquarter) var(--spacerhalf);
    border: 1px solid var(--page-border);
    border-radius: var(--spacerquarter);
    background: var(--white);
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.85em;
}
.MagineApi .mg-filter.on {
    background: var(--rfd-gold);
    border-color: var(--rfd-gold-dark);
    color: var(--rfd-ink);
    font-weight: 600;
}

/* ── groups & operation bars ───────────────────────────────────────────── */
.MagineApi .mg-group { margin-bottom: var(--spacer2); }
.MagineApi .mg-group-head {
    margin: 0 0 var(--spacerhalf) 0;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--text-color-quiet);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.MagineApi .mg-op {
    border: 1px solid var(--page-border);
    border-radius: var(--spacerquarter);
    background: var(--white);
    margin-bottom: var(--spacerquarter);
    overflow: hidden;
}
.MagineApi .mg-op.open { border-color: var(--rfd-gold-dark); }

.MagineApi .mg-op-bar {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
    padding: var(--spacerhalf);
    cursor: pointer;
}
.MagineApi .mg-op-bar:hover { background: var(--bg-color-quiet); }
.MagineApi .mg-caret { width: 1em; color: var(--text-color-quiet); }

.MagineApi .mg-method {
    min-width: 4.5em;
    text-align: center;
    padding: var(--spacerquarter) var(--spacerhalf);
    border-radius: var(--spacerquarter);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--white);
    background: var(--neutral);
}
.MagineApi .mg-m-get { background: var(--action-color); }
.MagineApi .mg-m-post { background: var(--status-success); }
.MagineApi .mg-m-put { background: var(--status-warning); color: var(--rfd-ink); }
.MagineApi .mg-m-delete { background: var(--rfd-red); }

.MagineApi .mg-path {
    font-size: 0.85em;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22em;
}
.MagineApi .mg-op-title {
    flex: 1;
    font-size: 0.9em;
    color: var(--text-color-quiet);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.MagineApi .mg-op-chips {
    display: flex;
    gap: var(--spacerquarter);
    flex-shrink: 0;
    align-items: center;
}

/* status / verdict / run chips */
.MagineApi .mg-kind { background: var(--bg-color-quiet-d); color: var(--text-color-quiet); }
.MagineApi .mg-destructive { background: var(--rfd-red); color: var(--white); }
.MagineApi .mg-st-verified { background: var(--status-success); color: var(--white); }
.MagineApi .mg-st-wired { background: var(--rfd-gold); color: var(--rfd-ink); }
.MagineApi .mg-st-unwired { background: var(--bg-color-quiet-d); color: var(--text-color-quiet); }
.MagineApi .mg-st-missing { background: var(--rfd-red-dark); color: var(--white); }
.MagineApi .mg-v-untested { background: transparent; color: var(--text-color-quiet); border: 1px dashed var(--page-border); }
.MagineApi .mg-v-pass { background: var(--status-success); color: var(--white); }
.MagineApi .mg-v-fail { background: var(--status-error); color: var(--white); }
.MagineApi .mg-v-blocked { background: var(--status-warning); color: var(--rfd-ink); }
.MagineApi .mg-run-none { background: transparent; color: var(--text-color-quiet); border: 1px dashed var(--page-border); }
.MagineApi .mg-run-ok { background: var(--status-success); color: var(--white); }
.MagineApi .mg-run-bad { background: var(--status-error); color: var(--white); }
.MagineApi .mg-ref { background: var(--rfd-gold-tint); color: var(--rfd-ink); }

/* ── expanded panel ────────────────────────────────────────────────────── */
.MagineApi .mg-op-panel {
    padding: var(--spacer);
    border-top: 1px solid var(--page-border);
    background: var(--bg-color-quiet);
}
.MagineApi .mg-summary { margin: 0 0 var(--spacerhalf) 0; line-height: 1.5; }
.MagineApi .mg-note {
    margin: 0 0 var(--spacerhalf) 0;
    font-size: 0.85em;
    color: var(--text-color-quiet);
    border-left: 2px solid var(--rfd-gold);
    padding-left: var(--spacerhalf);
}
.MagineApi .mg-meta {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
    flex-wrap: wrap;
    margin-bottom: var(--spacerhalf);
}
.MagineApi .mg-source { font-size: 0.8em; color: var(--text-color-quiet); }

.MagineApi .mg-doc { margin: var(--spacerhalf) 0; }
.MagineApi .mg-doc summary { cursor: pointer; font-size: 0.85em; color: var(--text-color-quiet); }
.MagineApi .mg-pre {
    background: var(--rfd-ink);
    color: var(--white);
    padding: var(--spacer);
    border-radius: var(--spacerquarter);
    overflow-x: auto;
    font-size: 0.78em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 24em;
    overflow-y: auto;
}
.MagineApi .mg-pre-short { max-height: 10em; }

/* ── try-it form ───────────────────────────────────────────────────────── */
.MagineApi .mg-form {
    display: grid;
    gap: var(--spacerhalf);
    margin: var(--spacer) 0;
}
.MagineApi .mg-field { display: grid; gap: var(--spacerquarter); }
.MagineApi .mg-field-name {
    font-size: 0.82em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacerquarter);
}
.MagineApi .mg-field-in {
    font-weight: 400;
    font-size: 0.85em;
    color: var(--text-color-quiet);
    background: var(--bg-color-quiet-d);
    padding: 0 var(--spacerquarter);
    border-radius: var(--spacerquarter);
}
.MagineApi .mg-req { color: var(--rfd-red); }
.MagineApi .mg-input {
    padding: var(--spacerquarter) var(--spacerhalf);
    border: 1px solid var(--page-border);
    border-radius: var(--spacerquarter);
    background: var(--white);
    color: var(--text-color);
    font-size: 0.9em;
    width: 100%;
}
.MagineApi .mg-hint { font-size: 0.78em; color: var(--text-color-quiet); line-height: 1.4; }

.MagineApi .mg-actions {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
    flex-wrap: wrap;
    margin-top: var(--spacerhalf);
}
.MagineApi .mg-confirm {
    display: flex;
    align-items: center;
    gap: var(--spacerquarter);
    font-size: 0.82em;
    color: var(--rfd-red-dark);
}
.MagineApi .mg-run {
    padding: var(--spacerquarter) var(--spacer);
    border: none;
    border-radius: var(--spacerquarter);
    background: var(--page-action);
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
}
.MagineApi .mg-run:disabled { opacity: 0.5; cursor: not-allowed; }
.MagineApi .mg-run-status { font-size: 0.82em; color: var(--text-color-quiet); }

/* ── result ────────────────────────────────────────────────────────────── */
.MagineApi .mg-res {
    border: 1px solid var(--page-border);
    border-left-width: var(--spacerquarter);
    border-radius: var(--spacerquarter);
    padding: var(--spacer);
    background: var(--white);
}
.MagineApi .mg-res-ok { border-left-color: var(--status-success); }
.MagineApi .mg-res-bad { border-left-color: var(--status-error); }
.MagineApi .mg-res-head {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
    margin-bottom: var(--spacerhalf);
}
.MagineApi .mg-checks { list-style: none; margin: var(--spacerhalf) 0; padding: 0; }
.MagineApi .mg-checks li {
    display: flex;
    align-items: baseline;
    gap: var(--spacerhalf);
    font-size: 0.85em;
    padding: var(--spacerquarter) 0;
}
.MagineApi .mg-checks li.ok .mg-check-mark { color: var(--status-success); font-weight: 700; }
.MagineApi .mg-checks li.bad .mg-check-mark { color: var(--status-error); font-weight: 700; }
.MagineApi .mg-check-label { flex-shrink: 0; }
.MagineApi .mg-check-detail { color: var(--text-color-quiet); font-size: 0.92em; word-break: break-word; }

.MagineApi .mg-prev {
    border: 1px dashed var(--page-border);
    border-radius: var(--spacerquarter);
    padding: var(--spacerhalf);
    background: var(--white);
}
.MagineApi .mg-prev-head { font-size: 0.82em; color: var(--text-color-quiet); margin-bottom: var(--spacerquarter); }
.MagineApi .mg-empty { font-size: 0.85em; color: var(--text-color-quiet); margin: 0; }

/* ── verdict bar ───────────────────────────────────────────────────────── */
.MagineApi .mg-verdict {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
    margin-top: var(--spacer);
    padding-top: var(--spacer);
    border-top: 1px dashed var(--page-border);
    flex-wrap: wrap;
}
.MagineApi .mg-verdict-label { font-size: 0.82em; font-weight: 600; }
.MagineApi .mg-verdict-select {
    padding: var(--spacerquarter);
    border: 1px solid var(--page-border);
    border-radius: var(--spacerquarter);
    background: var(--white);
    color: var(--text-color);
}
.MagineApi .mg-verdict-note { flex: 1; min-width: 14em; }
.MagineApi .mg-verdict-save {
    padding: var(--spacerquarter) var(--spacer);
    border: 1px solid var(--page-border);
    border-radius: var(--spacerquarter);
    background: var(--white);
    color: var(--text-color);
    cursor: pointer;
}
.MagineApi .mg-verdict-status { font-size: 0.78em; color: var(--text-color-quiet); }

/* Atlas — the ecosystem map + comment sidebar. */

.Atlas .atlas-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacer2);
}

.Atlas .atlas-legend {
  display: flex;
  gap: var(--spacer);
  flex-wrap: wrap;
  padding-bottom: var(--spacerhalf);
  white-space: nowrap;
}

.Atlas .atlas-key {
  font-size: 12px;
  color: var(--text-color-quiet);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.Atlas .atlas-key i {
  display: inline-block;
  width: 14px;
  height: 10px;
  border: 2px solid;
  border-radius: 3px;
  background: var(--white);
}

.Atlas .atlas-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  margin-top: var(--spacer);
}

.Atlas .atlas-toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacerhalf);
  font-size: 13px;
  color: var(--text-color-quiet);
}

.atlas-view-select,
.Atlas .atlas-newview-name {
  border: 1px solid var(--page-border);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  background: var(--white);
}

.Atlas .atlas-newview {
  display: inline-flex;
  align-items: center;
  gap: var(--spacerhalf);
}

.Atlas .atlas-toolbar-spring {
  flex: 1;
}

.Atlas .atlas-toolbar-status {
  font-size: 12px;
  color: var(--status-success);
  min-width: 110px;
  text-align: right;
}

.Atlas .atlas-banner {
  position: absolute;
  top: var(--spacer);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: var(--rfd-gold-tint);
  border: 1px solid var(--rfd-gold);
  border-radius: 6px;
  padding: var(--spacerhalf) var(--spacer);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--spacer);
  white-space: nowrap;
}

.Atlas .atlas-field {
  display: block;
  font-size: 13px;
  color: var(--text-color-quiet);
  margin-bottom: var(--spacer);
}

.atlas-field select,
.Atlas .atlas-field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  background: var(--white);
  color: var(--text-color);
}

.Atlas .atlas-danger {
  color: var(--status-error);
}

.Atlas .atlas-body {
  display: flex;
  gap: var(--spacer);
  margin-top: var(--spacer);
  /* Fill the viewport below the header; the map needs real height before
     cytoscape initializes. */
  height: calc(100vh - 230px);
  min-height: 480px;
}

.Atlas .atlas-map {
  position: relative; /* anchors the connect-mode banner */
  flex: 1;
  min-width: 0;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  background: var(--white);
}

.Atlas .atlas-side {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  background: var(--white);
  overflow: hidden;
}

.Atlas .atlas-tabs {
  display: flex;
  border-bottom: 1px solid var(--page-border);
}

.Atlas .atlas-tab {
  flex: 1;
  padding: var(--spacer);
  border: none;
  background: var(--bg-color);
  color: var(--text-color-quiet);
  font-weight: 600;
  cursor: pointer;
}

.Atlas .atlas-tab.active {
  background: var(--white);
  color: var(--text-color);
  box-shadow: inset 0 -3px 0 var(--action-color);
}

.Atlas .atlas-panel {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacer2);
}

.Atlas .atlas-empty {
  color: var(--text-color-quiet);
  padding: var(--spacer2) 0;
  text-align: center;
}

.Atlas .atlas-node-title {
  margin: 0 0 var(--spacer) 0;
}

.Atlas .atlas-chips {
  display: flex;
  gap: var(--spacerhalf);
  flex-wrap: wrap;
  margin-bottom: var(--spacer);
}

.Atlas .atlas-status-incoming,.Atlas  .atlas-status-building { background: #3c9a4e22; }
.Atlas .atlas-status-outgoing { background: #d22f1222; }
.Atlas .atlas-status-mystery { background: #e0982433; }
.Atlas .atlas-status-planned,.Atlas  .atlas-status-dormant { background: #9a948c22; }

.Atlas .atlas-blurb {
  line-height: 1.45;
}

.Atlas .atlas-facts {
  margin: var(--spacer) 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.Atlas .atlas-thread h4 {
  margin: var(--spacer2) 0 var(--spacer) 0;
  border-top: 1px solid var(--page-border);
  padding-top: var(--spacer2);
}

.Atlas .atlas-nocomments {
  margin-bottom: var(--spacer);
}

.Atlas .atlas-comment {
  border: 1px solid var(--page-border);
  border-radius: 6px;
  padding: var(--spacer);
  margin-bottom: var(--spacer);
  background: var(--bg-color-quiet);
}

.Atlas .atlas-comment-meta {
  display: flex;
  gap: var(--spacer);
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: var(--spacerhalf);
}

.Atlas .atlas-comment-body {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.45;
}

.Atlas .atlas-ledger-item {
  cursor: pointer;
}

.Atlas .atlas-ledger-item:hover {
  border-color: var(--action-color);
}

.Atlas .atlas-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  padding: var(--spacer);
  font: inherit;
  resize: vertical;
}

.Atlas .atlas-form-row {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  margin-top: var(--spacerhalf);
}

.Atlas .atlas-form-status {
  font-size: 12px;
  color: var(--status-error);
}

/* Clusters — the operational-pipeline lens (box canvas + detail sidebar). */

.Clusters .cl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacer2);
}

.Clusters .cl-legend {
  display: flex;
  gap: var(--spacer);
  flex-wrap: wrap;
  padding-bottom: var(--spacerhalf);
  white-space: nowrap;
}

.Clusters .cl-key {
  font-size: 12px;
  color: var(--text-color-quiet);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.Clusters .cl-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  margin-top: var(--spacer);
}

.Clusters .cl-body {
  display: flex;
  gap: var(--spacer);
  margin-top: var(--spacer);
  /* Fill the viewport below the header; cytoscape needs real height at init. */
  height: calc(100vh - 230px);
  min-height: 480px;
}

.Clusters .cl-map {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  background: var(--white);
}

.Clusters .cl-side {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  background: var(--white);
  overflow: hidden;
}

.Clusters .cl-panel {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacer2);
}

.Clusters .cl-panel-title {
  margin: 0 0 var(--spacer) 0;
}

/* Detail-panel header: back arrow sits inline with the title. */
.Clusters .cl-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-bottom: var(--spacer);
}

.Clusters .cl-title-row .cl-panel-title {
  margin-bottom: 0;
}

.Clusters .cl-back {
  border: 1px solid var(--page-border);
  background: transparent;
  color: var(--text-color);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 14px;
  cursor: pointer;
}

.Clusters .cl-back:hover {
  background: var(--page-border);
}

.Clusters .cl-blurb {
  line-height: 1.45;
}

.Clusters .cl-chips {
  display: flex;
  gap: var(--spacerhalf);
  flex-wrap: wrap;
  margin-bottom: var(--spacer);
}

/* Status tints — self-contained so the panel reads right even though the Atlas
   stylesheet (which defines the same names) isn't loaded on this page. */
.Clusters .atlas-status-incoming,.Clusters  .atlas-status-building { background: #3c9a4e22; }
.Clusters .atlas-status-outgoing { background: #d22f1222; }
.Clusters .atlas-status-mystery { background: #e0982433; }
.Clusters .atlas-status-planned,.Clusters  .atlas-status-dormant { background: #9a948c22; }

.Clusters .cl-appears {
  margin-bottom: var(--spacer);
}

.Clusters .cl-appears .cl-chips {
  margin-top: 4px;
  margin-bottom: 0;
}

.Clusters .cl-facts {
  margin: var(--spacer) 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.Clusters .cl-sub {
  margin: var(--spacer2) 0 var(--spacer) 0;
  border-top: 1px solid var(--page-border);
  padding-top: var(--spacer2);
}

.Clusters .cl-flow-line {
  font-size: 13px;
  line-height: 1.5;
  margin: var(--spacerhalf) 0;
}

.Clusters .cl-members {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}

.Clusters .cl-members li {
  cursor: pointer;
}

.Clusters .cl-members li:hover {
  color: var(--action-color);
}

.Clusters .cl-multi {
  color: var(--text-color-quiet);
}

.Clusters .cl-note {
  margin-top: var(--spacer2);
}

.Clusters .cl-empty {
  color: var(--text-color-quiet);
  padding: var(--spacer2) 0;
  text-align: center;
}

/* Overview: the pipeline as a clickable list of boxes. */
.Clusters .cl-ov-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.Clusters .cl-ov-row {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.Clusters .cl-ov-row:hover {
  background: var(--bg-color-quiet);
}

.Clusters .cl-ov-row .muted {
  margin-left: auto;
}

.Clusters .cl-ov-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--page-border);
  flex-shrink: 0;
}

/* Who-to-call cards — the directory cross-link. */
.Clusters .cl-people {
  margin-top: var(--spacer2);
}

.Clusters .cl-person {
  border: 1px solid var(--page-border);
  border-radius: 6px;
  padding: var(--spacer);
  margin-bottom: var(--spacerhalf);
  background: var(--bg-color-quiet);
  display: flex;
  align-items: flex-start;
  gap: var(--spacer);
}

.Clusters .cl-person-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.Clusters .cl-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* No headshot on file — Teams-style initials disc. */
.Clusters .cl-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-border);
  color: var(--text-color);
  font-weight: 700;
  font-size: 15px;
}

.Clusters .cl-person-contact {
  font-size: 13px;
}

.Clusters .cl-nocontact {
  color: var(--status-error);
  font-style: italic;
}

.Clusters .cl-dir-link {
  margin-top: var(--spacerhalf);
}

/* Environment tag beside a piece in the owner panel's list. */
.Clusters .cl-env-tag {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-color-quiet);
  border: 1px solid var(--page-border);
  border-radius: 4px;
  padding: 0 4px;
}

/* Directory — accordion rows + admin/owner inline edit. Tokens from theme.css. */

.Directory .Directory {
  /* The description panel shows this much text, then scrolls within (Genia's
     spec: ~200px of vertical text that scrolls beyond, rows below push down). */
  --dir-notes-max-h: 200px;
}

/* Summary row reads as clickable; the caret telegraphs expand/collapse. */
.Directory .directory-table .dir-row { cursor: pointer; }
.Directory .directory-table .dir-row:hover { background: var(--page-action); }
.Directory .directory-table .dir-row.open { background: var(--page-selected); }
.Directory .directory-table .dir-caret { width: 1.4em; text-align: center; color: var(--text-color-quiet); }
.Directory .directory-table .dir-row.open .caret { color: var(--action-color); }
.Directory .directory-table .dir-actions { width: 1px; white-space: nowrap; text-align: right; }

/* Pencil button — quiet until hover, then RFD red. */
.Directory .dir-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacerquarter) var(--spacerhalf);
  color: var(--text-color-quiet);
  font-size: 1em;
  line-height: 1;
}
.Directory .dir-icon-btn:hover { color: var(--action-color); }

/* Detail row: the accordion panel. No top border so it reads as part of the
   summary row above it. */
.Directory .directory-table .dir-detail > td { border-top: none; background: var(--bg-color-quiet); }

.Directory .dir-panel,.Directory  .dir-edit { display: flex; flex-direction: column; gap: var(--spacer); }
.Directory .dir-field { display: flex; flex-direction: column; gap: var(--spacerhalf); }
.Directory .dir-field > label {
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-quiet);
}

/* Read-mode description: bounded height, scrolls beyond, preserves line breaks. */
.Directory .dir-notes {
  max-height: var(--dir-notes-max-h);
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.5;
  padding-right: var(--spacer);
}

/* Edit mode ------------------------------------------------------------------ */
.Directory .dir-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacerhalf) var(--spacer);
}
.Directory .dir-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--spacerquarter);
  font-size: 0.88em;
  cursor: pointer;
}
.Directory .dir-notes-edit {
  width: 100%;
  box-sizing: border-box;
  max-height: var(--dir-notes-max-h);
  resize: vertical;
  font: inherit;
  padding: var(--spacerhalf) var(--spacer);
  border: 1px solid var(--page-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-color);
}

.Directory .dir-edit-actions { display: flex; align-items: center; gap: var(--spacer); }
.Directory .dir-btn-primary,.Directory  .dir-btn-ghost {
  border: none;
  border-radius: 8px;
  padding: var(--spacerhalf) var(--spacer2);
  font: inherit;
  cursor: pointer;
}
.Directory .dir-btn-primary { background: var(--action-color); color: var(--white); }
.Directory .dir-btn-primary:hover { background: var(--action-color-hilite); }
.Directory .dir-btn-primary:disabled { opacity: 0.5; cursor: default; }
.Directory .dir-btn-ghost { background: none; color: var(--text-color-quiet); }
.Directory .dir-btn-ghost:hover { color: var(--text-color); }
.Directory .dir-edit-status { font-size: 0.85em; color: var(--status-error); }

/* ── View-by switcher + the People view ────────────────────────────────────── */
.Directory .dir-viewbar {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-bottom: var(--spacer);
}

.Directory .dir-viewbar label { color: var(--text-color-quiet); }

.Directory .dir-view-select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--page-border);
  border-radius: 6px;
  background: var(--bg-color);
  color: var(--text-color);
}

.Directory .dir-person-cell {
  display: flex;
  align-items: center;
  gap: var(--spacer);
}

.Directory .dir-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* No headshot on file — initials disc. */
.Directory .dir-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-border);
  color: var(--text-color);
  font-weight: 700;
  font-size: 13px;
}

/* Department chip where the person is the escalation contact, not the owner. */
.Directory .dir-chip-esc { opacity: 0.65; }

.Home  {
    flex: 1 0;
    padding: var(--spacer2);
    overflow-y: auto;
}
.Home .dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacer2);
}
.Home .dash-head H2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
}
.Home .db-pills { display: flex; gap: var(--spacerhalf); }
.Home .db-pill {
    font-size: 0.74em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--page-border);
    background: var(--white);
}
.Home .db-pill.ok { border-color: var(--status-success); color: var(--status-success); }
.Home .db-pill.bad { border-color: var(--rfd-red); color: var(--rfd-red); }
.Home .db-pill.muted { color: var(--text-color-quiet); }

.Home .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacer);
    margin-bottom: var(--spacer2);
}
.Home .tile {
    background: var(--white);
    border: 1px solid var(--page-border);
    border-radius: 12px;
    padding: var(--spacer2);
    display: flex;
    flex-direction: column;
    gap: var(--spacerquarter);
    position: relative;
    overflow: hidden;
}
.Home .tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--rfd-red);
}
.Home .tile .icon {
    font-size: 1.4em;
    color: var(--rfd-gold-dark);
}
.Home .tile-value {
    font-size: 2.1em;
    font-weight: 700;
    line-height: 1;
    color: var(--rfd-ink);
}
.Home .tile-label {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color-quiet);
}

.Home .panels {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--spacer);
}
.Home .panel {
    background: var(--white);
    border: 1px solid var(--page-border);
    border-radius: 12px;
    padding: var(--spacer2);
}
.Home .panel H3 {
    margin: 0 0 var(--spacer);
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color-quiet);
}
.Home .fsm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacerhalf) 0;
    border-bottom: 1px solid var(--page-border);
}
.Home .fsm-row:last-child { border-bottom: none; }
.Home .fsm-label { text-transform: capitalize; }
.Home .fsm-count { font-weight: 700; color: var(--rfd-ink); }

.Home .recent { list-style: none; margin: 0; padding: 0; }
.Home .recent LI {
    display: flex;
    align-items: center;
    gap: var(--spacer);
    padding: var(--spacerhalf) 0;
    border-bottom: 1px solid var(--page-border);
}
.Home .recent LI:last-child { border-bottom: none; }
.Home .recent-status {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rfd-gold-tint);
    color: var(--rfd-gold-dark);
    white-space: nowrap;
}
.Home .empty,.Home  .dash-error { color: var(--text-color-quiet); font-size: 0.9em; }
.Home .dash-error { color: var(--rfd-red); }

/* Roadmap board — scoped to the page root (the `. {}` selector becomes
   `.Roadmap` via Componentry). Reuses theme tokens; no hard-coded values. */
.Roadmap  {
    flex: 1 0;
    padding: var(--spacer2);
    overflow-y: auto;
}

.Roadmap .rm-section {
    margin-bottom: var(--spacer2);
}
.Roadmap .rm-stage-head {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
    margin: 0 0 var(--spacer) 0;
    font-size: 1em;
    font-weight: 600;
}

.Roadmap .rm-card {
    background: var(--white);
    border: 1px solid var(--page-border);
    border-radius: var(--spacerhalf);
    padding: var(--spacer);
    margin-bottom: var(--spacer);
}
.Roadmap .rm-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacer);
}
.Roadmap .rm-title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
}
.Roadmap .rm-meta {
    display: flex;
    gap: var(--spacerquarter);
    flex-shrink: 0;
}

.Roadmap .rm-summary {
    margin: var(--spacerhalf) 0 0 0;
    color: var(--text-color);
    line-height: 1.45;
}
.Roadmap .rm-next {
    margin: var(--spacerhalf) 0 0 0;
    color: var(--text-color-quiet);
    line-height: 1.45;
}
.Roadmap .rm-domains {
    margin-top: var(--spacerhalf);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacerquarter);
}
.Roadmap .rm-links {
    margin-top: var(--spacerhalf);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer);
}
.Roadmap .rm-link {
    color: var(--action-color);
    text-decoration: none;
    font-size: 0.85em;
}
.Roadmap .rm-link:hover { text-decoration: underline; }
.Roadmap .rm-dates { margin-top: var(--spacerhalf); }

/* Stage chips — override the base .chip palette per lifecycle stage. */
.Roadmap .chip.st-blocked    { background: #d22f1222; color: var(--status-error); }
.Roadmap .chip.st-progress   { background: var(--rfd-gold-tint); color: var(--rfd-gold-dark); }
.Roadmap .chip.st-identified { background: var(--bg-color-quiet); color: var(--text-color-quiet); }
.Roadmap .chip.st-resolved   { background: #3c9a4e22; color: var(--status-success); }
.Roadmap .chip.st-dropped    { background: var(--bg-color-quiet); color: var(--text-quiet); }

/* Priority chips. */
.Roadmap .chip.rm-pri.p-urgent { background: #d22f1222; color: var(--status-error); }
.Roadmap .chip.rm-pri.p-high   { background: #e0982422; color: var(--status-warning); }
.Roadmap .chip.rm-pri.p-normal { background: var(--bg-color-quiet); color: var(--text-color-quiet); }
.Roadmap .chip.rm-pri.p-low    { background: var(--bg-color-quiet); color: var(--text-quiet); }

/* Owner + domain chips share the neutral look. */
.Roadmap .chip.rm-owner  { background: var(--bg-color-quiet); color: var(--text-color); }
.Roadmap .chip.rm-domain { background: var(--bg-color-quiet); color: var(--text-color-quiet); font-size: 0.78em; }

.Search  {
    display: block;
}
.Search .search-section {
    margin: var(--spacer2) 0;
}
.Search .search-cat-head {
    margin: 0 0 var(--spacerhalf);
    padding-bottom: var(--spacerquarter);
    border-bottom: 1px solid var(--page-border);
}
.Search .search-note {
    margin: 0 0 var(--spacerhalf);
}
.Search .search-hit {
    padding: var(--spacerhalf) var(--spacer);
    border-radius: var(--spacerquarter);
    cursor: pointer;
}
.Search .search-hit:hover {
    background: var(--bg-color-quiet);
}
.Search .search-hit-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacer);
}
.Search .search-hit-title {
    font-weight: 600;
}
.Search .search-snippet {
    margin: var(--spacerquarter) 0 0;
    font-size: 0.9em;
    color: var(--text-color-quiet);
}
.Search .search-snippet mark {
    background: var(--rfd-gold-tint);
    padding: 0 var(--spacerquarter);
    border-radius: var(--spacerquarter);
}
.Search .search-empties {
    margin-top: var(--spacer2);
}