.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);
}

.InputACL  {
    width:100%;
    margin-bottom:var(--spacer);
}
.InputACL .tray {
    display:flex;
    width:100%;
    min-height:40px;
}
.InputACL .container {
    display:flex;
    flex:1 0;
    border:1px solid var(--text-color);
    flex-wrap:wrap;
}
.InputACL .control {
    display:flex;
    flex-direction: column;
    flex:20px 0;
    text-align: center;
    align-items: center;
    border:1px solid var(--text-color);
    margin-left:-1px;
}
.InputACL .control:hover {
    background-color:var(--action-color);
    cursor:pointer;
}
.InputACL .item {
    display:inline-block;
    border:1px solid var(--text-color);
    border-radius:8px;
    font-size:.9em;
    padding:var(--spacerquarter) var(--spacerhalf);
    margin:var(--spacerhalf);
    white-space: nowrap;
}
.InputACL .item.admin {
    background-color:var(--item-super);
}
.InputACL .item.edit {
    background-color:var(--item-elevated);
}
.InputACL .item.read {
    background-color:var(--item-normal);
}
.InputACL .item.barred {
    background-color:var(--item-bad);
}
.InputACL .item.removed {
    background-color:inherit;
    border-style:dashed;
}
.InputACL .item:hover {
    border-color:var(--action-color);
    cursor:pointer;
}


.SignIn  {
    display:flex;
    height:80%;
    width:100%;
    align-items: center;
    justify-content: center;
}
.SignIn .login-form {
    display:flex;
    flex-direction: column;
    padding:50px;
    background-color:var(--bg-color);
    border-radius:var(--spacer2);
}
.SignIn DIV.with-margin {
    margin:var(--spacer);
}
.SignIn input,.SignIn select,.SignIn button {
    font-size:2em;
}
.SignIn select {
    width:100%;
}
.SignIn .login-status {
    min-height: 20px;
    margin-left:10px;
    margin-top:5px;
}
.SignIn #skip {
    margin-left:10px;
}
.SignIn button {
    height:50px;
    min-width:100px;
}

.SignIn button.google-auth-btn {
  background-color: inherit;
}

.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);
}
.PageFooter .profile-label {
  background-color:var(--status-warning);
  padding:var(--spacerquarter);
  font-weight: bold;
  margin-left:var(--spacerhalf);
  border-radius: var(--spacerhalf);
  color:var(--text-color);
}
.PageFooter .edit-mode-btn {
    font-size: 0.85em;
    text-transform: none;
    background-color: transparent;
    border: 1px solid var(--text-color-quiet-d);
    color: var(--text-color-quiet-d);
    padding: 2px 10px;
    height: 24px;
    cursor: pointer;
    transition: all 150ms;
}
.PageFooter .edit-mode-btn:hover {
    border-color: var(--action-color);
    color: var(--action-color);
    background-color: transparent;
}
.PageFooter .edit-mode-btn.active {
    background-color: var(--action-color);
    border-color: var(--action-color);
    color: var(--white);
}
.PageFooter .edit-mode-btn.active:hover {
    background-color: var(--action-color-hilite);
    border-color: var(--action-color-hilite);
}

.PageHeader  {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    padding: 0 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--page-border);
}
.PageHeader #logo {
    height: 28px;
    width: auto;
    cursor: pointer;
}
.PageHeader #header-path {
    margin-left: var(--spacer2);
    flex: 1 0;
    font-size: 1em;
    font-weight: 500;
    color: var(--text-color-d);
    opacity: 0.7;
}
.PageHeader .session-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
}
.PageHeader .session-control .icon {
    font-size: 0.9em;
}
.PageHeader .session-control #userId {
    color: var(--text-color-quiet-d);
}
.PageHeader .session-control #signout {
    font-size: 0.75em;
    padding: 2px 10px;
    height: 26px;
}

.PageMenu  {
    width: 200px;
    flex: 0 0 200px;
    padding: var(--spacerhalf) 0;
}
.PageMenu .nav-tray {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--spacerhalf);
}
.PageMenu .nav-button {
    display: flex;
    flex-direction: row;
    height: 42px;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    box-sizing: border-box;
    user-select: none;
    transition: background-color 150ms, color 150ms;
    cursor: pointer;
    color: var(--text-color-d);
}
.PageMenu .nav-button .icon {
    font-size: 1.2em;
    width: 28px;
    flex-shrink: 0;
}
.PageMenu .nav-button .text {
    font-size: 0.9em;
    white-space: nowrap;
}
.PageMenu .nav-button:hover {
    background-color: var(--bg-color-quiet-d);
}
.PageMenu .nav-button.active {
    background-color: var(--action-color);
    color: var(--white);
}
.PageMenu .nav-button.active:hover {
    background-color: var(--action-color-hilite);
}

.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;
}



/* ─── AI Curator Hub — shared styles (^ = global) ────── */

/* ─── Settings ────────────────────────────────────────── */

.curator-settings {
  padding: var(--spacer);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.curator-settings > * {
  max-width: 900px;
}

.curator-section {
  margin-bottom: var(--spacer2);
}

.curator-section-title {
  font-weight: 600;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-quiet);
  margin-bottom: var(--spacerhalf);
}

.curator-prompt-section {
  width: 100%;
}

.curator-prompt-textarea {
  width: calc(100% - var(--spacer));
  min-height: 300px;
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  line-height: 1.5;
  padding: var(--spacerhalf);
  border: 1px solid var(--text-color-quiet);
  border-radius: var(--spacerthird);
  resize: vertical;
  background: var(--bg-color-d);
  color: var(--text-color-d);
}

.curator-prompt-textarea:focus {
  outline: none;
  border-color: var(--action-color-hilite);
}

.curator-hint {
  margin-top: var(--spacerhalf);
  font-size: 0.8em;
  color: var(--text-color-quiet);
}

.curator-hint code {
  background: var(--bg-color-quiet);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Schedule picker */
.curator-schedule-preview {
  margin-top: var(--spacerthird);
  font-size: 0.8em;
  color: var(--text-color-quiet);
  font-family: 'Courier New', monospace;
}

/* ─── Candidates ──────────────────────────────────────── */

.curator-candidates {
  padding: var(--spacer);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.curator-empty {
  padding: var(--spacer2);
  text-align: center;
  color: var(--text-color-quiet);
  font-style: italic;
}

/* Filter bar */
.curator-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-bottom: var(--spacer);
}

.curator-filter-btn {
  font-size: 0.85em;
  text-transform: none;
  background-color: transparent;
  border: 1px solid var(--text-color-quiet);
  color: var(--text-color-quiet);
  padding: 4px 12px;
  height: 28px;
  cursor: pointer;
  transition: all 150ms;
}

.curator-filter-btn:hover {
  border-color: var(--action-color);
  color: var(--action-color);
  background-color: transparent;
}

.curator-filter-btn.active {
  background-color: var(--action-color);
  border-color: var(--action-color);
  color: var(--white);
}

.curator-filter-btn.active:hover {
  background-color: var(--action-color-hilite);
}

.curator-filter-count {
  font-size: 0.8em;
  color: var(--text-color-quiet);
  margin-left: auto;
}

.curator-sort-select {
  font-size: 0.82em;
  padding: 3px 8px;
  border: 1px solid var(--text-color-quiet);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  margin-left: var(--spacerhalf);
}

.curator-search {
  font-size: 0.82em;
  padding: 4px 8px;
  border: 1px solid var(--text-color-quiet);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  width: 180px;
}

.curator-search:focus {
  outline: none;
  border-color: var(--action-color-hilite);
}

.curator-search::placeholder {
  color: var(--text-color-quiet);
  opacity: 0.7;
}

/* ─── Table ───────────────────────────────────────────── */

.curator-table-container {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.curator-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  background: transparent;
}

.curator-table TH {
  text-align: left;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-color-quiet);
  padding: var(--spacerthird) var(--spacerhalf);
  border-bottom: 2px solid var(--page-border);
  position: sticky;
  top: 0;
  background: var(--bg-color);
  z-index: 1;
}

.curator-table TD {
  padding: var(--spacerhalf);
  border-bottom: 1px solid var(--page-border);
  vertical-align: top;
  color: var(--text-color);
}

.curator-table TBODY TR:hover {
  background: var(--page-action);
}

/* Column widths */
.col-check {
  width: 26px;
  padding: 3px 5px !important;
  text-align: center;
}

.col-score {
  width: 60px;
}

.col-pub {
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-title {
  /* takes remaining space */
}

.col-lang {
  width: 40px;
  text-align: center;
}

.col-date {
  width: 70px;
  white-space: nowrap;
  font-size: 0.85em;
  color: var(--text-color-quiet);
}

/* Checkbox */
.curator-checkbox {
  width: 16px;
  height: 16px;
  min-width: 16px;
  cursor: pointer;
}

/* Score badge */
.curator-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  border-radius: var(--spacerthird);
  color: var(--white);
  font-size: 0.85em;
  font-weight: 700;
}

.curator-score-high {
  background: rgb(var(--status-green-rgb));
}

.curator-score-medium {
  background: rgb(var(--status-orange-rgb));
}

.curator-score-low {
  background: rgb(var(--status-red-rgb));
}

/* Title links */
.curator-title-link,
.curator-title-link:visited,
.curator-title-link:link {
  color: var(--text-color);
  text-decoration: none;
  line-height: 1.4;
}

.curator-title-link:hover {
  color: var(--action-color-hilite);
  text-decoration: underline;
}

.curator-original-title {
  display: block;
  font-size: 0.85em;
  color: var(--text-color-quiet);
  line-height: 1.3;
  margin-top: 2px;
  font-style: italic;
}

/* Title row with label icons */
.curator-title-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.curator-label-icon {
  font-size: 0.85em;
  flex-shrink: 0;
}

/* Description */
.curator-description {
  font-size: 0.82em;
  color: var(--text-color-quiet);
  line-height: 1.35;
  margin-top: 4px;
}

.curator-original-description {
  display: block;
  font-size: 0.8em;
  color: var(--text-color-quiet);
  line-height: 1.3;
  margin-top: 2px;
  font-style: italic;
  opacity: 0.7;
}

/* Language badge */
.curator-lang-badge {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-color-quiet);
  background: var(--bg-color-quiet);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ─── Progress Panel ─────────────────────────────────── */

.curator-progress-container {
  min-height: 0;
}

.curator-progress-panel {
  padding: var(--spacer);
  text-align: center;
  max-width: 500px;
  margin: var(--spacer) auto;
  border: 1px solid var(--page-border);
  border-radius: var(--spacerthird);
  background: var(--bg-color);
}

.curator-progress-phase {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: var(--spacerhalf);
  color: var(--text-color);
}

.curator-progress-bar-container {
  height: 8px;
  background: var(--page-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--spacerhalf);
}

.curator-progress-bar-fill {
  height: 100%;
  background: var(--action-color);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.curator-progress-bar-error {
  background: rgb(var(--status-red-rgb));
}

.curator-progress-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacerthird);
}

.curator-progress-count {
  font-size: 0.85em;
  color: var(--text-color);
}

.curator-progress-elapsed {
  font-size: 0.8em;
  color: var(--text-color-quiet);
  font-family: 'Courier New', monospace;
}

.curator-progress-item {
  font-size: 0.8em;
  color: var(--text-color-quiet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.2em;
  margin-bottom: var(--spacerhalf);
}

.curator-progress-cancel {
  font-size: 0.85em;
  padding: 4px 16px;
  border: 1px solid var(--text-color-quiet);
  border-radius: var(--spacerthird);
  background: transparent;
  color: var(--text-color-quiet);
  cursor: pointer;
  transition: all 150ms;
}

.curator-progress-cancel:hover:not(:disabled) {
  border-color: rgb(var(--status-red-rgb));
  color: rgb(var(--status-red-rgb));
}

.curator-progress-cancel:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ─── Lock Overlay ───────────────────────────────────── */

.curator-locked {
  pointer-events: none;
  opacity: 0.5;
}

/* ─── Hub content area ──────────────────────────────── */

.AICuratorHub .curator-hub-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Published articles sidebar ────────────────────── */

.candidates-layout {
  display: flex;
  gap: var(--spacer);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.candidates-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.candidates-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--page-border);
  padding-left: var(--spacer);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacerhalf);
  flex-shrink: 0;
}

.sidebar-refresh-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-color-quiet);
  padding: 2px 4px;
  transition: color 0.15s ease;
  font-size: 0.85em;
}

.sidebar-refresh-btn:hover {
  color: var(--action-color-hilite);
}

.sidebar-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.sidebar-title {
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-color-quiet);
}

.sidebar-article {
  display: block;
  padding: var(--spacerthird) 0;
  border-bottom: 1px solid var(--page-border);
  font-size: 0.85em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sidebar-article:hover {
  opacity: 0.7;
}

.sidebar-article-title {
  color: var(--text-color);
}

.sidebar-article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacerhalf);
}

.sidebar-article-pub {
  font-size: 0.8em;
  color: var(--text-color-quiet);
}

.sidebar-article-date {
  font-size: 0.75em;
  color: var(--text-color-quiet);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Last fetched ───────────────────────────────────── */

.curator-fetched-at {
  font-size: 0.8em;
  color: var(--text-color-quiet);
  margin-bottom: var(--spacerhalf);
}

/* Constrain property rows and content to match language editor width */
.Article .content-element > .property-set {
  max-width: 1040px;
}

.Article .content-element .InputTags {
  max-width: 1040px;
  box-sizing: border-box;
}

.Article .details {
  display:flex;
  flex-direction: column;
}
.Article .type-selector>input,.Article .type-selector>select {
  width:70px;
  min-width:70px;
}
.Article .InputInlineTable table td:not(:first-child) {
  width:100%;
}
.Article table td:first-child {
  font-family:monospace;
  padding-right:var(--spacer);
}
.Article .article-lead.WikiBlock {
  height:80px;
  min-height:80px;
  margin-bottom:var(--spacer);
}
.Article .flex-wrap {
  flex-wrap: wrap;
}
.Article .url input:invalid {
  color:var(--item-bad);
}
/* New editable Source URL field */
.Article .source-url-field {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacer) 0;
  border-bottom: 1px solid var(--page-border);
  margin-bottom: var(--spacer);
}
.Article .source-url-field .title {
  opacity: 0.7;
  white-space: nowrap;
  margin-right: var(--spacerhalf);
}
.Article .source-url-input-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--spacerhalf);
}
.Article .source-url-input {
  flex: 1;
  padding: var(--spacerhalf);
  border: 1px solid var(--page-border);
  border-radius: 3px;
  font-size: inherit;
  font-family: inherit;
  background: var(--bg-color);
  color: var(--text-color);
}
.Article .source-url-input:focus {
  outline: none;
  border-color: var(--action-color);
}
.Article .source-url-input.locked {
  background: transparent;
  border-color: transparent;
  color: var(--action-color);
}
.Article .source-url-input:invalid {
  border-color: var(--item-bad);
}
.Article .source-url-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--page-border);
  border-radius: 3px;
  background: var(--bg-color);
  cursor: pointer;
  color: var(--text-color);
}
.Article .source-url-btn:hover {
  background: var(--action-color);
  border-color: var(--action-color);
}

/* Legacy source-url (read-only display) - keep for backwards compatibility */
.Article .source-url {
  width:100%;
  padding:var(--spacerhalf) 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.Article .source-url .title {
  opacity:0.7;
}
.Article .source-url A {
  color:var(--action-color);
}
.Article .sos-link {
  display:flex;
  width:100%;
  max-width:1040px;
  border:1px solid var(--page-border);
  border-radius:3px;
  margin-top:0;
  margin-bottom:var(--spacerhalf);
  padding:var(--spacerhalf);
  box-sizing:border-box;
}
.Article .sos-link .title {
  opacity:0.7;
}
.Article .sos-link .url {
  flex:1 0;
  border-radius:3px;
}
.Article .sos-link .url A {
  color:var(--text-color);
}
.Article .sos-link .copy {
  cursor:pointer;
}
.Article .sos-link .copy.hidden {
  visibility:hidden;
}
.Article .so-date-added {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  font-size: 0.85em;
  padding: 6px 0;
  opacity: 0.65;
}

.Article .so-date-label {
  font-weight: 500;
  white-space: nowrap;
}

.Article .wiki-box {
  border:1px solid var(--page-border);
  border-radius:3px;
  padding:3px;
}

/* Language Editor container */
.Article .language-editor-container {
  width: 100%;
  max-width: 1040px;
  min-width: 715px;
  margin-top: var(--spacer);
}

/* Fixed header - outside scrollable area */
.Article .language-editor-header {
  display: flex;
  padding: var(--spacerhalf) var(--spacer);
  background: var(--bg-color-quiet);
  border: 1px solid var(--page-border);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Translation completeness indicator */
.Article .translation-completeness {
  display: flex;
  gap: 6px;
  padding: 4px var(--spacer);
  background: var(--bg-color-quiet);
  border: 1px solid var(--page-border);
  border-top: none;
  font-size: 0.8em;
}
.lang-pill-ok,
.Article .lang-pill-missing {
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.Article .lang-pill-ok {
  color: #2e7d32;
  background: #e8f5e9;
}
.Article .lang-pill-missing {
  color: #c62828;
  background: #ffebee;
}

/* Scrollable rows container */
.Article .language-editor {
  width: 100%;
  border: 1px solid var(--page-border);
  border-radius: 0 0 3px 3px;
  overflow-x: hidden;
  overflow-y: visible;
}

.Article .language-editor-header .col-language {
  width: 130px;
}

.Article .language-editor-header .col-headline {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacer);
}

.Article .language-editor-header .col-primary {
  width: 70px;
  text-align: center;
}

.Article .translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--page-border);
  border-radius: 3px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 0.85em;
  cursor: pointer;
  opacity: 0.7;
}

.Article .translate-btn:hover {
  opacity: 1;
  background: var(--action-color);
  border-color: var(--action-color);
}

/* AB Test toggle pill */
.Article .ab-toggle {
  display: inline-flex;
  border: 1px solid var(--page-border);
  border-radius: 3px;
  overflow: hidden;
  font-size: 0.85em;
}

.Article .ab-toggle-option {
  padding: 4px 10px;
  border: none;
  background: var(--bg-color);
  color: var(--text-color);
  cursor: pointer;
  opacity: 0.6;
}

.Article .ab-toggle-option:first-child {
  border-right: 1px solid var(--page-border);
}

.Article .ab-toggle-option.active {
  background: var(--action-color);
  color: var(--bg-color);
  opacity: 1;
}

.Article .ab-toggle-option:hover:not(.active) {
  opacity: 0.9;
  background: var(--bg-color-quiet);
}

/* Data rows */
.Article .language-row {
  border-bottom: 1px solid var(--page-border);
}

.Article .language-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}

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

.Article .language-row-main {
  display: flex;
  padding: var(--spacerhalf) var(--spacer);
  overflow: hidden;
}

.Article .language-row-left {
  width: 130px;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
}

.Article .language-row-expand {
  width: 20px;
  cursor: pointer;
}

.Article .language-row-expand .icon {
  transition: transform 0.2s ease;
  font-size: 0.8em;
  opacity: 0.6;
}

.Article .language-row-expand:hover .icon {
  opacity: 1;
}

.Article .language-row.expanded .language-row-expand .icon {
  transform: rotate(90deg);
}

.Article .language-row-name {
  font-weight: 500;
}

.Article .language-row-center {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.Article .language-row-center textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--spacerhalf);
  border: 1px solid var(--page-border);
  border-radius: 3px;
  font-size: inherit;
  font-family: inherit;
  background: var(--bg-color);
  color: var(--text-color);
  box-sizing: border-box;
  resize: vertical;
  min-height: 36px;
  height: 36px;
  line-height: 1.4;
}

.Article .language-row-center textarea:focus {
  outline: none;
  border-color: var(--action-color);
}

.Article .language-row-center textarea::placeholder {
  color: var(--text-color);
  opacity: 0.4;
  font-style: italic;
}

.Article .language-row-right {
  width: 70px;
  text-align: center;
  padding-top: 8px;
}

.Article .language-row-right input[type="radio"] {
  cursor: pointer;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px;
}

/* Lead section (expanded) */
.Article .language-row-lead {
  display: none;
  padding: 0 var(--spacer) var(--spacer) var(--spacer);
}

.Article .language-row.expanded .language-row-lead {
  display: flex;
  overflow: hidden;
}

.Article .language-row-lead-left {
  width: 130px;
  font-size: 0.85em;
  opacity: 0.7;
  padding-top: var(--spacerhalf);
}

.Article .language-row-lead-center {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.Article .language-row-lead-center .wiki-box {
  height: 80px;
  min-height: 80px;
}

.Article .language-row-lead-right {
  width: 70px;
}

/* Wrapper for fields with back-translation icon */
.headline-wrapper,
.Article .lead-wrapper {
  position: relative;
  width: 100%;
}

.Article .headline-wrapper textarea {
  width: 100%;
}

/* Back-translation tooltip icon - positioned inside top-right corner */
.Article .back-translation-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--action-color);
  color: var(--bg-color);
  font-size: 11px;
  font-weight: bold;
  cursor: help;
  z-index: 1;
  opacity: 0.8;
}

.Article .back-translation-icon:hover {
  opacity: 1;
}

/* Edit History */
.Article .edit-history-container {
  max-width: 1040px;
  margin-top: var(--spacer2);
  border-top: 1px solid var(--page-border);
  padding-top: var(--spacer);
}

.Article .edit-history-header {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.6;
  margin-bottom: var(--spacerhalf);
  display: flex;
  align-items: center;
  gap: 6px;
}

.Article .edit-history-desc {
  font-size: 0.75em;
  opacity: 0.45;
  padding: 2px 0 var(--spacerhalf);
  line-height: 1.4;
}

.Article .edit-history-empty {
  font-size: 0.8em;
  opacity: 0.4;
  font-style: italic;
  padding: var(--spacerhalf) 0;
}

.Article .edit-history-list {
  max-height: 300px;
  overflow-y: auto;
}

.Article .edit-history-item {
  padding: var(--spacerhalf) var(--spacer);
  border: 1px solid var(--page-border);
  border-radius: 3px;
  margin-bottom: var(--spacerhalf);
  font-size: 0.85em;
  line-height: 1.5;
}

.Article .edit-history-meta {
  font-weight: 500;
  opacity: 0.7;
  margin-bottom: 4px;
}

.Article .edit-history-field {
  margin-top: 2px;
}

.Article .edit-history-label {
  font-weight: 500;
  opacity: 0.6;
}

.Article .edit-history-old {
  text-decoration: line-through;
  opacity: 0.5;
}

.Article .edit-history-new {
  color: var(--status-green-text);
}

.Article .edit-history-overflow {
  font-style: italic;
  opacity: 0.8;
}

/* ─── Article list layout ─────────────────────────────── */
/* Header uses section-header + section-header-sticky from design-system.css */
/* Filter toggles from design-system.css (.filter-group, .filter-pill) */

.ArticleList .articles-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ArticleList .articles-page .page-content {
  overflow-x: hidden !important;
}

.ArticleList .articles-header .property-set {
  flex: 1;
  margin: 0;
}

/* ─── Search input ────────────────────────────────────── */

.ArticleList .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ArticleList .search-input {
  width: 220px;
  padding: 4px 28px 4px 10px;
  border: 1px solid var(--page-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 0.85em;
  outline: none;
  transition: border-color 0.15s ease;
}

.ArticleList .search-input:focus {
  border-color: var(--action-color-hilite);
}

.ArticleList .search-input::placeholder {
  color: var(--text-color-quiet);
  opacity: 0.6;
}

.ArticleList .search-clear {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: var(--text-color-quiet);
  font-size: 1.2em;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.5;
}

.ArticleList .search-clear:hover {
  opacity: 1;
  color: var(--item-bad, #c33);
}

/* ─── Sub-tab bar (section children) ─────────────────── */

.ArticleList .sub-tab-bar {
  display: flex;
  gap: 2px;
  padding: 4px 0;
  border-bottom: 1px solid var(--page-border);
  flex-wrap: wrap;
}

.ArticleList .sub-tab-item {
  padding: 3px 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-color-quiet);
  font-size: 0.8em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ArticleList .sub-tab-item:hover {
  background: var(--action-color);
  color: var(--text-color);
}

.ArticleList .sub-tab-item.active {
  background: var(--action-color-hilite);
  color: #fff;
}

/* ─── Samizdat Articles toggle ────────────────────────── */

.ArticleList .samizdat-filter {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-left: var(--spacer);
}

.ArticleList .samizdat-filter label {
  font-size: 0.8em;
  cursor: pointer;
  opacity: 0.7;
  margin-left: 2px;
}

/* toggle-switch styling comes from design-system.css */

.ArticleList .author-dropdown {
  font-size: 0.8em;
  padding: 2px 6px;
  border: 1px solid var(--page-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  margin-left: var(--spacerhalf);
}

/* Tab bar from design-system.css (.tab-bar, .tab-bar-item) */

.ArticleList .tab-bar-item.drop-target {
  background: rgba(var(--status-blue-rgb), 0.15);
  border-bottom-color: var(--action-color-hilite);
}

/* ─── Scrollable list container ──────────────────────── */

.ArticleList .articles-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ─── Article table ──────────────────────────────────── */

.ArticleList .article-list {
  user-select: none;
  width: 100%;
  border-collapse: collapse;
}

.ArticleList .article-list tr.dragged {
  background: var(--bg-color-quiet-d);
}

.ArticleList .article-list tr.drag-marker > td {
  border-top: 3px dashed var(--action-color-hilite);
}

.ArticleList .article-list TR TD:first-child INPUT {
  width: 20px;
  min-width: unset;
}

/* List cell, list-cell-title, list-cell-meta from design-system.css */
/* Status badges from design-system.css (.badge, .badge-success, .badge-info, .badge-neutral) */
/* Drag handle from design-system.css (.drag-handle) */

.ArticleList .article-list-cell {
  padding: var(--spacer);
  cursor: pointer;
  transition: background var(--ds-transition-fast);
}

.ArticleList .article-list-cell.inactive {
  opacity: 0.6;
}

.ArticleList .article-list tr:not(.drag-marker) .article-list-cell:hover {
  background-color: var(--action-color);
}

.ArticleList .auto-curated-icon {
  color: var(--action-color-hilite);
  font-size: 0.9em;
  vertical-align: baseline;
}

.ArticleList .evergreen-icon {
  font-size: 0.9em;
  vertical-align: baseline;
}

.ArticleList .origin-icon {
  font-size: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}

.ArticleList .article-channel {
  font-style: italic;
}

.ArticleList .article-type-badge {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.85em;
  background: rgba(var(--status-blue-rgb), 0.15);
}

.ArticleList .section-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.8em;
  background: rgba(var(--status-green-rgb), 0.12);
  color: var(--status-green-text);
  white-space: nowrap;
}

.ArticleList .article-web-links {
  display: flex;
  gap: 8px;
}

.ArticleList .article-ext-link {
  font-size: 0.8em;
  color: var(--action-color-hilite);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--ds-transition-fast);
}

.ArticleList .article-ext-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.ArticleList .article-list tr.dragged .drag-handle > span {
  background: var(--action-color-hilite);
}

/* ─── Get Link inline bar ──────────────────────────── */

.ArticleList .get-link-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--spacer);
  border-bottom: 1px solid var(--page-border);
  padding: var(--spacerhalf) 0;
  flex-shrink: 0;
}

.ArticleList .get-link-bar .property-set {
  margin: 0;
}

.ArticleList .get-link-preview {
  font-size: 0.82em;
  color: var(--text-color-quiet);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 6px;
  min-width: 0;
}

/* ─── Selected row highlight ────────────────────────── */

.ArticleList .article-list tr.selected {
  background: rgba(var(--status-blue-rgb), 0.06);
}

.ArticleList .article-list tr.selected:hover .article-list-cell {
  background-color: rgba(var(--status-blue-rgb), 0.1);
}

/* ─── Multi-drag visual ─────────────────────────────── */

.ArticleList .article-list tr.multi-drag {
  opacity: 0.5;
}

.ArticleList .drag-count-badge {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--action-color-hilite);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ─── Trash tab ─────────────────────────────────────── */

.ArticleList .channel-tab-spacer {
  flex: 1;
}

.ArticleList .trash-tab {
  opacity: 0.45;
}

.trash-tab:hover,
.ArticleList .trash-tab.active {
  opacity: 1;
}

.ArticleList .trash-tab.drop-target {
  background: var(--item-bad, #c33);
  color: #fff;
  opacity: 1;
}

/* ─── Trash actions bar ─────────────────────────────── */

.ArticleList .trash-actions {
  display: flex;
  gap: var(--spacer);
  padding: var(--spacerhalf) 0;
  align-items: center;
}

.ArticleList .trash-action-btn {
  padding: 4px 14px;
  border: 1px solid var(--page-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 0.8em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ArticleList .trash-action-btn:hover {
  border-color: var(--text-color);
}

.ArticleList .empty-trash-btn {
  color: var(--item-bad, #c33);
  border-color: var(--item-bad, #c33);
}

.ArticleList .empty-trash-btn:hover {
  background: var(--item-bad, #c33);
  color: #fff;
  border-color: var(--item-bad, #c33);
}

.ArticleList .restore-btn:hover {
  background: rgba(var(--status-green-rgb), 0.15);
  border-color: var(--status-green-text);
}

/* ─── QA Status Panel ──────────────────────────────────── */

.ArticleList .qa-panel {
  border-radius: 6px;
  padding: var(--spacer);
  margin: var(--spacer) 0;
}

.ArticleList .qa-panel--failed {
  background: rgba(var(--status-red-rgb, 200, 50, 50), 0.08);
  border: 1px solid rgba(var(--status-red-rgb, 200, 50, 50), 0.25);
}

.ArticleList .qa-panel--flagged {
  background: rgba(var(--status-yellow-rgb, 200, 180, 50), 0.08);
  border: 1px solid rgba(var(--status-yellow-rgb, 200, 180, 50), 0.25);
}

.ArticleList .qa-panel__header {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  margin-bottom: var(--spacerhalf);
}

.ArticleList .qa-panel__status {
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ArticleList .qa-panel--failed .qa-panel__status {
  color: var(--item-bad, #c33);
}

.ArticleList .qa-panel--flagged .qa-panel__status {
  color: #b8860b;
}

.ArticleList .qa-panel__date {
  font-size: 0.8em;
  color: var(--text-color-quiet);
}

.ArticleList .qa-panel__reasons {
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: 0.85em;
  line-height: 1.6;
  color: var(--text-color);
  opacity: 0.85;
}

.ArticleList .qa-panel__actions {
  margin-top: var(--spacerhalf);
}

.ArticleList .qa-panel__dismiss {
  padding: 4px 14px;
  border: 1px solid var(--page-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 0.8em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ArticleList .qa-panel__dismiss:hover {
  background: rgba(var(--status-green-rgb), 0.15);
  border-color: var(--status-green-text);
  color: var(--status-green-text);
}

.Configure  {
    flex: 1;
    min-height: 0;
}
.Configure .tableWidget {
    max-height:50%;
    min-height:20%;
}
.Configure .content-element {
    display: flex;
    flex:1 0;
    flex-direction: column;
    height:100%;
}
.Configure .content-element TH {
    border-bottom:1px solid var(--page-border);
}

.Configure .WikiBlock {
    padding-top: var(--spacerhalf);
    margin-top: var(--spacerhalf);
}
.Configure .WikiBlock .content {
    border-top:1px solid var(--text-color);
}
.ConfigureArticleProps .Button {
  margin-right: var(--spacer2);
}
.ConfigureArticleProps .ConfigureArticlePropsEditors {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 5px;
}
.ConfigureArticleProps .InputFile {
  margin-top: var(--spacer);
}
/* Page content flex container for scrollable layout */
.ConfigureArticles .page-content.articles-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Prevent horizontal scroll on page content */
.ConfigureArticles .page-content {
  overflow-x: hidden !important;
}

/* Fixed header with filters and NEW button */
.ConfigureArticles .articles-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: var(--spacer) 0;
  border-bottom: 1px solid var(--page-border);
  background: var(--bg-color);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
  gap: var(--spacerhalf);
}

.ConfigureArticles .articles-header .property-set {
  flex: 1;
  margin: 0;
}

.ConfigureArticles .articles-header .section-header-actions {
  align-items: flex-end;
  padding-bottom: 2px;
}

/* Scrollable list container */
.ConfigureArticles .articles-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Article editor content */
.ConfigureArticles .articles-page .content-element {
  overflow-x: hidden;
}

.ConfigureArticles .article-list {
  user-select: none;
  width: 100%;
}
.ConfigureArticles .article-list tr.dragged {
  background: var(--bg-color-quiet-d);
}

.ConfigureArticles .article-list tr.drag-marker {

}
.ConfigureArticles .article-list tr.drag-marker > td {
  border-top: 3px dashed var(--action-color-hilite);
}

.ConfigureArticles .article-list TR TD:first-child INPUT {
  width:20px;
  min-width: unset;
}
/* List cell base from design-system.css (.list-cell-title, .list-cell-meta) */
/* Drag handle base from design-system.css (.drag-handle) */

.ConfigureArticles .article-list-cell {
  padding: var(--spacer);
}
.ConfigureArticles .article-list-cell.inactive {
  opacity: 0.6;
}
.ConfigureArticles .article-list tr:not(.drag-marker) .article-list-cell:hover {
  background-color: var(--action-color);
  cursor: pointer;
}
.ConfigureArticles .auto-curated-icon {
  color: var(--action-color-hilite);
  font-size: 0.9em;
  vertical-align: baseline;
}
.ConfigureArticles .article-list tr.dragged .drag-handle > span {
  background: var(--action-color-hilite);
}

.ConfigureArticles .article-order {
  position: absolute;
  top: -8px;
  right: -20px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  line-height: 18px;
  text-align: center;
  background: var(--text-color-quiet);
  font-size: 11px;
  color: var(--text-color-d);
}
.ConfigureArticles .article-order > .icon {
  padding: 0;
  display: none;
}
.ConfigureArticles .article-order:hover {
  background: var(--action-color-hilite);
}
.ConfigureArticles .article-order:hover > .article-order-value {
  display: none;
}
.ConfigureArticles .article-order:hover > .icon {
  display: inline;
}

/* ─── +NEW select + button ──────────────────────────── */
.ConfigureArticles .create-new-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ConfigureArticles .create-type-select {
  font-size: 0.85em;
  padding: 4px 6px;
  border: 1px solid var(--page-border);
  border-radius: var(--border-radius);
  background: var(--bg-color);
  color: var(--text-color);
}

/* ─── Newsletter badge in article list ──────────────── */
.ConfigureArticles .nl-badge {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--action-color-hilite);
  color: var(--bg-color);
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.03em;
}
.ConfigurePaywall .page-content.paywall-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacer);
}

.safe-redirects-section,
.ConfigurePaywall .darkness-zones-section {
    margin-bottom: var(--spacer2);
}

.ConfigurePaywall .region-row {
    display: flex;
    gap: 8px;
    margin: 4px 0;
    align-items: center;
}

/* Post list layout */
.ConfigurePosts .posts-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header uses .section-header .items-end from design-system.css */

.ConfigurePosts .posts-list-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* List cells, titles, meta from design-system.css (.list-cell, .list-cell-title, .list-cell-meta) */

.ConfigurePosts table.posts-list {
  width: 100%;
  border-collapse: collapse;
}

.ConfigurePosts .posts-empty {
  padding: var(--spacer3);
  text-align: center;
  opacity: 0.5;
  font-style: italic;
}

/* Filter toggles from design-system.css (.filter-group, .filter-pill) */
/* Status badges from design-system.css (.badge, .badge-success, .badge-info, .badge-neutral) */

/* ─── Origin icon (robot vs human) ─────────────────────── */

.ConfigurePosts .origin-icon {
  font-size: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ─── Channel & type badges in meta row ────────────────── */

.ConfigurePosts .article-channel {
  font-style: italic;
}

.ConfigurePosts .article-type-badge {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.85em;
  background: rgba(var(--status-blue-rgb), 0.15);
}

.ConfigurePublications .publication-list {
  user-select: none;
  margin-top:var(--spacer);
  overflow:scroll;
}
.ConfigurePublications .publication-list tr.dragged {
  background: var(--bg-color-quiet-d);
}

.ConfigurePublications .publication-list tr.drag-marker {

}
.ConfigurePublications .publication-list tr.drag-marker > td {
  border-top: 3px dashed var(--action-color-hilite);
}

.ConfigurePublications .publication-list TR TD:first-child INPUT {
  width:20px;
  min-width: unset;
}
/* List cell base from design-system.css (.list-cell, .list-cell-title, .list-cell-meta) */
/* Drag handle base from design-system.css (.drag-handle) */

.ConfigurePublications .publication-list-cell {
  padding: var(--spacer);
}
.ConfigurePublications .publication-list-cell.inactive {
  opacity: 0.6;
}
.ConfigurePublications .publication-list tr:not(.drag-marker) .publication-list-cell:hover {
  background-color: var(--action-color);
  cursor: pointer;
}
.ConfigurePublications .publication-list tr.dragged .drag-handle > span {
  background: var(--action-color-hilite);
}

.ConfigurePublications .publication-order {
  position: absolute;
  top: -8px;
  right: -20px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  line-height: 18px;
  text-align: center;
  background: var(--text-color-quiet);
  font-size: 11px;
  color: var(--text-color-d);
}
.ConfigurePublications .publication-order > .icon {
  padding: 0;
  display: none;
}
.ConfigurePublications .publication-order:hover {
  background: var(--action-color-hilite);
}
.ConfigurePublications .publication-order:hover > .publication-order-value {
  display: none;
}
.ConfigurePublications .publication-order:hover > .icon {
  display: inline;
}

.ConfigureServers .domainsContainer .domain {
    display: inline-block;
    border: 1px solid var(--text-color);
    background: var(--item-normal);
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: var(--spacerhalf) !important;
    margin-bottom: var(--spacerhalf);
}
.ConfigureServers .domainsContainer .domain__bad {
    background: var(--item-bad);
}
.ConfigureServers .domainsContainer .domain__active {
  background: var(--item-elevated);
}
.ConfigureServers .domainsContainer A {
  text-decoration:none;
  color:var(--text-color);
}
.ConfigureServers .deploy_buttonGroup {display: flex; align-items: center;}

.ConfigureSites .page-content.sites-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ─── Header ─────────────────────────────────────────────── */
/* Uses .section-header + .section-header-actions from design-system.css */

.ConfigureSites .header-controls {
    display: flex;
    gap: var(--spacer);
    align-items: center;
    flex-wrap: wrap;
}

.ConfigureSites .control-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ConfigureSites .control-group label {
    font-size: 0.85em;
    opacity: 0.7;
    white-space: nowrap;
}

.ConfigureSites .control-select {
    padding: 3px 6px;
    font-size: 0.85em;
    border: 1px solid var(--page-border);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
}

.ConfigureSites .sort-dir-btn {
    background: none;
    border: 1px solid var(--page-border);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.8em;
    color: var(--text-color);
    opacity: 0.6;
}
.ConfigureSites .sort-dir-btn:hover {
    opacity: 1;
}

.ConfigureSites .search-input {
    padding: 3px 8px;
    font-size: 0.85em;
    border: 1px solid var(--page-border);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    width: 140px;
}

/* ─── Table ──────────────────────────────────────────────── */

.ConfigureSites .sites-table-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ConfigureSites .sites-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.ConfigureSites .sites-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-color);
}

.ConfigureSites .sites-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--page-border);
    color: var(--text-color);
    opacity: 0.6;
    white-space: nowrap;
}

.ConfigureSites .sites-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--page-border);
    vertical-align: middle;
}

.ConfigureSites .site-row {
    cursor: pointer;
    transition: background 0.1s;
}

.ConfigureSites .site-row:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ConfigureSites .site-row.selected {
    background: rgba(0, 0, 0, 0.08);
}

.ConfigureSites .site-row.quarantined .col-name .site-name {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Column widths */
.ConfigureSites .col-name { width: 30%; }
.ConfigureSites .col-lang { width: 6%; text-align: center; }
.ConfigureSites .col-approach { width: 12%; }
.ConfigureSites .col-tier { width: 7%; text-align: center; }
.ConfigureSites .col-health { width: 14%; white-space: nowrap; }
.ConfigureSites .col-last-story { width: 10%; }

/* ─── Tier Badges ────────────────────────────────────── */

.ConfigureSites .tier-badge {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 700;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.ConfigureSites .tier-badge.tier-q {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ConfigureSites .tier-badge.tier-a {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ConfigureSites .tier-badge.tier-d {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ConfigureSites .tier-badge.tier-p {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.ConfigureSites .site-logo-thumb {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 6px;
    border: 1px solid var(--page-border);
    background: #fff;
}

.ConfigureSites .site-name {
    font-weight: 600;
}

.ConfigureSites .site-external-link {
    color: var(--text-color);
    opacity: 0.4;
    text-decoration: none;
    font-size: 0.85em;
}
.ConfigureSites .site-external-link:hover {
    opacity: 1;
}

.ConfigureSites .site-sos-link {
    display: inline-block;
    font-size: 0.6em;
    font-weight: 700;
    padding: 1px 4px;
    margin: 0 4px;
    border-radius: 3px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    text-decoration: none;
    vertical-align: middle;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.ConfigureSites .site-sos-link:hover {
    background: rgba(59, 130, 246, 0.3);
}
.ConfigureSites .site-sos-link.loading {
    opacity: 0.4;
    pointer-events: none;
}

.ConfigureSites .sites-count {
    padding: 8px 10px;
    font-size: 0.8em;
    opacity: 0.5;
    text-align: right;
}

/* ─── Health Indicator ─────────────────────────────────── */

.ConfigureSites .health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

.ConfigureSites .health-dot.health-untested {
    background: #9ca3af;
    opacity: 0.5;
}

.ConfigureSites .health-dot.health-healthy {
    background: #22c55e;
}

.ConfigureSites .health-dot.health-degraded {
    background: #eab308;
}

.ConfigureSites .health-dot.health-unhealthy {
    background: #ef4444;
}

.ConfigureSites .health-dot.health-error {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

/* ─── Health Stage Badges ─────────────────────────────── */

.ConfigureSites .health-stage {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ConfigureSites .health-stage--domain {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ConfigureSites .health-stage--proxy {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.ConfigureSites .health-stage--origin {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.ConfigureSites .health-stage--content {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

/* ─── Publisher Screenshot Thumbnails ────────────────── */

.ConfigureSites .site-screenshot-thumb {
    width: 40px;
    height: 25px;
    object-fit: cover;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 6px;
    border: 1px solid var(--page-border);
    cursor: zoom-in;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.ConfigureSites .site-screenshot-thumb:hover {
    opacity: 1;
}

/* ─── Force Publish Toggle ───────────────────────────── */

.ConfigureSites .force-publish-btn {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 700;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: transparent;
    color: #ef4444;
    cursor: pointer;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}

.ConfigureSites .force-publish-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.1);
}

.ConfigureSites .force-publish-btn.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
    opacity: 1;
}

.ConfigureSites .force-publish-btn.active:hover {
    background: rgba(34, 197, 94, 0.25);
}

.ConfigureSites .force-publish-btn.loading {
    opacity: 0.3;
    pointer-events: none;
}

/* ─── Quarantine Reason ──────────────────────────────── */

.ConfigureSites .quarantine-reason {
    display: inline-block;
    font-size: 0.7em;
    color: #ef4444;
    opacity: 0.7;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

/* ─── Dormant Badge ──────────────────────────────────── */

.ConfigureSites .health-stage--dormant {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

/* ─── Partnership Pipeline Badges ───────────────────── */

.ConfigureSites .partnership-badge {
    display: inline-block;
    font-size: 0.6em;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ConfigureSites .partnership--outreach {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.ConfigureSites .partnership--contacted {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ConfigureSites .partnership--discussion {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.ConfigureSites .partnership--agreed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ConfigureSites .partnership--declined {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* ─── Domain Health Shared ───────────────────────────── */
/* Headers use .section-header from design-system.css */



.DomainHealth .probe-empty {
  padding: var(--spacer2);
  text-align: center;
  color: var(--text-color-quiet);
  font-style: italic;
}

/* ─── Overview Grid ──────────────────────────────────── */

.DomainHealth .probe-grid {
  padding: var(--spacer);
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.DomainHealth .probe-stats-bar {
  display: flex;
  gap: var(--spacer);
  margin-bottom: var(--spacer);
  flex-wrap: wrap;
}

.DomainHealth .probe-stat-badge {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  padding: var(--spacerthird) var(--spacerhalf);
  border: 1px solid var(--page-border);
  border-radius: var(--spacerthird);
  font-size: 0.85em;
}

.DomainHealth .probe-stat-country {
  font-weight: 700;
  margin-right: var(--spacerthird);
}

.DomainHealth .probe-stat-alive {
  color: rgb(var(--status-green-rgb));
}

.DomainHealth .probe-stat-suspect {
  color: rgb(var(--status-orange-rgb));
}

.DomainHealth .probe-stat-blocked {
  color: rgb(var(--status-red-rgb));
}

.DomainHealth .probe-stat-time {
  color: var(--text-color-quiet);
  font-size: 0.85em;
  margin-left: var(--spacerthird);
}

.DomainHealth .probe-grid-container {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.DomainHealth .probe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.DomainHealth .probe-th {
  text-align: left;
  padding: var(--spacerhalf) var(--spacerthird);
  border-bottom: 2px solid var(--page-border);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-quiet);
}

.DomainHealth .probe-row {
  border-bottom: 1px solid var(--page-border);
}

.DomainHealth .probe-row:hover {
  background: var(--page-action);
}

.DomainHealth .probe-td {
  padding: var(--spacerthird);
  vertical-align: middle;
}

.DomainHealth .probe-domain {
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.DomainHealth .probe-cell {
  text-align: center;
  cursor: pointer;
  border-radius: var(--spacerthird);
  font-size: 0.8em;
  font-weight: 600;
  padding: var(--spacerthird) var(--spacerhalf);
  transition: opacity 0.15s;
}

.DomainHealth .probe-cell:hover {
  opacity: 0.8;
}

.DomainHealth .probe-cell--alive {
  background: rgba(var(--status-green-rgb), 0.15);
  color: rgb(var(--status-green-rgb));
}

.DomainHealth .probe-cell--suspect {
  background: rgba(var(--status-orange-rgb), 0.15);
  color: rgb(var(--status-orange-rgb));
}

.DomainHealth .probe-cell--blocked {
  background: rgba(var(--status-red-rgb), 0.15);
  color: rgb(var(--status-red-rgb));
}

.DomainHealth .probe-cell--unknown {
  background: rgba(128, 128, 128, 0.1);
  color: var(--text-color-quiet);
}

.DomainHealth .probe-cell--override {
  border: 2px dashed currentColor;
}

.DomainHealth .probe-gsb-flag {
  display: inline-block;
  margin-left: var(--spacerthird);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.7em;
  font-weight: 700;
  background: rgba(var(--status-red-rgb), 0.2);
  color: rgb(var(--status-red-rgb));
  vertical-align: middle;
  letter-spacing: 0.03em;
}

.DomainHealth .probe-actions {
  text-align: center;
}

.DomainHealth .probe-action-btn {
  background: none;
  border: 1px solid var(--page-border);
  border-radius: var(--spacerthird);
  padding: var(--spacerthird) var(--spacerhalf);
  cursor: pointer;
  font-size: 0.8em;
  color: var(--text-color-d);
  transition: background 0.15s;
}

.DomainHealth .probe-action-btn:hover {
  background: var(--page-action);
}

.DomainHealth .probe-action-btn--danger {
  color: rgb(var(--status-red-rgb));
  border-color: rgb(var(--status-red-rgb));
}

.DomainHealth .probe-action-btn--danger:hover {
  background: rgba(var(--status-red-rgb), 0.1);
}

/* ─── Detail Panel ───────────────────────────────────── */

.DomainHealth .probe-detail-panel {
  position: fixed;
  right: 0;
  top: 60px;
  bottom: 0;
  width: 400px;
  background: var(--bg-color-d);
  color: var(--text-color-d);
  /* Override quiet/border vars for dark context */
  --text-color-quiet: var(--text-color-quiet-d);
  --page-border: rgba(255, 255, 255, 0.12);
  border-left: 1px solid var(--page-border);
  padding: var(--spacer);
  overflow-y: auto;
  z-index: 100;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}

.DomainHealth .probe-detail-header {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-bottom: var(--spacer);
  padding-bottom: var(--spacerhalf);
  border-bottom: 1px solid var(--page-border);
}

.DomainHealth .probe-detail-title {
  font-weight: 600;
  flex: 1;
}

.DomainHealth .probe-detail-status {
  padding: 2px 8px;
  border-radius: var(--spacerthird);
  font-size: 0.8em;
  font-weight: 600;
}

.DomainHealth .probe-detail-close {
  background: none;
  border: none;
  font-size: 1.4em;
  cursor: pointer;
  color: var(--text-color-d);
  opacity: 0.6;
  padding: 0 var(--spacerthird);
}

.DomainHealth .probe-detail-close:hover {
  color: var(--text-color-d);
  opacity: 1;
}

.DomainHealth .probe-detail-section {
  margin-bottom: var(--spacer);
}

.DomainHealth .probe-detail-label {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-quiet);
  margin-bottom: 2px;
}

.DomainHealth .probe-detail-sources {
  display: flex;
  flex-direction: column;
  gap: var(--spacerthird);
}

.DomainHealth .probe-source-row {
  display: flex;
  gap: var(--spacerhalf);
  align-items: baseline;
  font-size: 0.85em;
  padding: var(--spacerthird) 0;
  border-bottom: 1px solid var(--page-border);
}

.DomainHealth .probe-source-name {
  font-weight: 600;
  min-width: 80px;
}

.DomainHealth .probe-source-time {
  color: var(--text-color-quiet);
  font-size: 0.85em;
  margin-left: auto;
}

.DomainHealth .probe-detail-actions {
  display: flex;
  gap: var(--spacerhalf);
  margin-top: var(--spacer);
  flex-wrap: wrap;
}

/* ─── Events ─────────────────────────────────────────── */

.DomainHealth .probe-events {
  padding: var(--spacer);
}

.DomainHealth .probe-filter-bar {
  display: flex;
  gap: var(--spacer);
  margin-bottom: var(--spacer);
  flex-wrap: wrap;
}

.DomainHealth .probe-filter {
  display: flex;
  align-items: center;
  gap: var(--spacerthird);
}

.DomainHealth .probe-filter-label {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-color-quiet);
}

.DomainHealth .probe-filter-select {
  padding: var(--spacerthird) var(--spacerhalf);
  border: 1px solid var(--page-border);
  border-radius: var(--spacerthird);
  background: var(--bg-color-d);
  color: var(--text-color-d);
  font-size: 0.85em;
}

.DomainHealth .probe-event-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.DomainHealth .probe-event-row {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  padding: var(--spacerhalf) var(--spacerthird);
  border-bottom: 1px solid var(--page-border);
  font-size: 0.85em;
}

.DomainHealth .probe-event-row:hover {
  background: var(--page-action);
}

.DomainHealth .probe-event-time {
  flex-shrink: 0;
  width: 140px;
  color: var(--text-color-quiet);
  font-size: 0.85em;
}

.DomainHealth .probe-event-domain {
  flex-shrink: 0;
  width: 160px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.DomainHealth .probe-event-country {
  flex-shrink: 0;
  width: 30px;
  font-weight: 600;
  text-align: center;
}

.DomainHealth .probe-event-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--spacerthird);
  font-size: 0.8em;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

.DomainHealth .probe-event-badge--blocked {
  background: rgba(var(--status-red-rgb), 0.15);
  color: rgb(var(--status-red-rgb));
}

.DomainHealth .probe-event-badge--suspect {
  background: rgba(var(--status-orange-rgb), 0.15);
  color: rgb(var(--status-orange-rgb));
}

.DomainHealth .probe-event-badge--alive {
  background: rgba(var(--status-green-rgb), 0.15);
  color: rgb(var(--status-green-rgb));
}

.DomainHealth .probe-event-source {
  flex-shrink: 0;
  width: 100px;
  color: var(--text-color-quiet);
  font-size: 0.85em;
}

.DomainHealth .probe-event-detail {
  flex: 1;
  color: var(--text-color-quiet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.DomainHealth .probe-event--blocked {
  border-left: 3px solid rgb(var(--status-red-rgb));
}

.DomainHealth .probe-event--suspect {
  border-left: 3px solid rgb(var(--status-orange-rgb));
}

.DomainHealth .probe-event--alive {
  border-left: 3px solid rgb(var(--status-green-rgb));
}

/* ─── Settings ───────────────────────────────────────── */

.DomainHealth .probe-settings {
  padding: var(--spacer);
  max-width: 900px;
}

.DomainHealth .probe-section {
  margin-bottom: var(--spacer2);
}

.DomainHealth .probe-section-title {
  font-weight: 600;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-quiet);
  margin-bottom: var(--spacerhalf);
}

.DomainHealth .probe-test-row {
  margin-top: var(--spacerhalf);
}

/* Donations Dashboard */
.Donations .donations-stats {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.Donations .stat-card {
  background: var(--bg-color); border-radius: 8px; padding: 16px 20px;
  min-width: 140px; flex: 1;
}
.Donations .stat-value { font-size: 1.5em; font-weight: 700; color: var(--text-color); }
.Donations .stat-label { font-size: 0.8em; opacity: 0.6; margin-top: 4px; }
.Donations .donations-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.Donations .tab-btn {
  padding: 6px 16px; border: 1px solid var(--border-color); border-radius: 4px;
  background: transparent; cursor: pointer; font-size: 0.85em;
}
.Donations .tab-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.Donations .donations-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.Donations .donations-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border-color); font-weight: 600; }
.Donations .donations-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-color); }
.Donations .donations-table .amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.Donations .charge-failed td { opacity: 0.5; }
.Donations .badge-recurring { background: #dde1ff; color: #000e5f; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; }
.Donations .badge-status { padding: 2px 8px; border-radius: 10px; font-size: 0.8em; }
.Donations .badge-succeeded { background: #d4edda; color: #155724; }
.Donations .badge-failed { background: #f8d7da; color: #721c24; }
.Donations .badge-active { background: #d4edda; color: #155724; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; }
.Donations .badge-canceling { background: #fff3cd; color: #856404; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; }
.Donations .donations-load-more {
  display: block; margin: 16px auto; padding: 8px 24px;
  border: 1px solid var(--border-color); border-radius: 4px;
  background: transparent; cursor: pointer;
}
.Donations .donations-empty { text-align: center; padding: 40px; opacity: 0.5; }
.Donations .donations-loading { text-align: center; padding: 60px; opacity: 0.5; }
.Donations .donations-error { text-align: center; padding: 40px; }
.Donations .donations-error h3 { margin: 0 0 8px; }
.Donations .donations-error p { opacity: 0.6; }

.EditableList .editable-list-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.EditableList .editable-list-title {
  display: flex;
  align-items: end;
  margin-bottom: 10px;
}

.EditableList .editable-list-title>div {
  margin-left: 5px;
}

.EditableList .editable-list-title>div>button {
  height: 20px;
  padding: 0 4px;
}

.EditableList .EditableListItem {
  position: relative;
  padding: 4px 8px;

}

.EditableList .EditableListItem>button {
  position: absolute;
  right: -7px;
  top: -7px;
  padding: 2px 4px;
  height: 20px;
  border-radius: 10px;
}

.Editorial  {
  height: 100%;
}
.Editorial .content-element {
  display: flex;
  flex: 1 0;
  flex-direction: column;
  height: 100%;
}

.LinkForge  {
  display:flex;
  flex-direction: column;
  padding:var(--spacer2);
  flex:1 0;
  min-height: 0;
}
.LinkForge .entries {
  flex:1 1;
  overflow:auto;
  margin-bottom:var(--spacer2);
}
.LinkForge .footer {
  display:flex;
  flex:0 0;
  flex-direction: row;
  align-self: flex-end;
}
.LinkForge .entry-data {
  display:flex;
  flex-direction: column;
  width:100%;
}
.LinkForge .entry-bar {
  position:relative;
  width:100%;
}
.LinkForge .entry-data INPUT {
  width: calc(100% - 10px) !important;
  border-radius: unset;
  margin-bottom:-1px;
  flex:1 0;
}
.LinkForge .entry-url {
  flex:1 0;
}
.LinkForge .entry-bar .control {
  position:absolute;
  right:0;
  top:var(--spacer);
  color:var(--action-color);
  font-size:1.4em;
}
.LinkForge .entry-bar .control:hover {
  color:var(--action-color-hilite);
  cursor:pointer;
}
.LinkForge .result-bar {
  display:flex;
  padding:var(--spacerquarter) 0;
  align-items: center;
  border:1px solid var(--text-color);
  min-height:20px;
}
.LinkForge .result-bar A {
  flex:1 0;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  margin-left:var(--spacer);
  font-size:1.3em;
  color:var(--action-color-hilite);
  text-decoration: none;
}
.LinkForge .result-bar .icon-copy {
  flex:0 0;
  cursor: pointer;
  font-size:1.3em;
}
.LinkForge .result-bar .icon-copy:hover {
  color:var(--action-color-hilite);
}
.LinkForge .account-selector select {
  border-radius:50px 0 0 50px;
}
.LinkForge .send-button {
  transition:all 500ms;
}
.LinkForge .send-button.disabled {
  filter: grayscale(100%);
}
.LinkForge .send-button button {
  border-radius: 0 50px 50px 0;
}
.LinkForge .send-button.disabled button {
  cursor:not-allowed;
}

/* List cell styling now provided by design-system.css (.list-cell, .list-cell-title, .list-cell-meta) */

.Monitoring  {
    display:flex;
    flex-direction: column;
    padding:var(--spacer2);
    flex:1 0;
    min-height: 0;
}
.Monitoring .title-container {display: flex; align-items: center; margin-bottom: var(--spacer2)}
.Monitoring .title-container h1 {display: flex; align-items: center; margin-bottom: 0;}
.Monitoring .title-container .Button {display: flex; align-items: center; margin-left: var(--spacer);}

.Monitoring .table-container table {width: 100%;}
.Monitoring .table-container tr:hover {background: var(--bg-color-quiet-d);}
.Monitoring .table-container td {padding: var(--spacerhalf) var(--spacer); white-space: nowrap; font-size: 12px;}

.Monitoring .servername-label {font-size: 12px; background: var(--bg-color-quiet-d); color: var(--text-color-d); display: inline-block; padding: 3px 7px; border-radius: 12px;}

.Monitoring .td--elevated {
    background: var(--item-elevated);
}
.Monitoring .td--normal {
    background: var(--item-normal);
}
.Monitoring .td--bad {
    background: var(--item-bad);
}
.Monitoring .td--super {
    background-color: var(--bg-color-quiet-d);
    color: var(--text-color-d);
}

.Monitoring .Monitor {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacer);
}
/* Post Editor — Medium-style centered editor layout */
.PostEditor .post-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Controls bar */
.PostEditor .editor-controls {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  padding: var(--spacerhalf) var(--spacer);
  border-bottom: 1px solid var(--page-border);
  flex-shrink: 0;
}

.PostEditor .editor-controls-right {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-left: auto;
}

.PostEditor .save-indicator {
  font-size: 0.8em;
  opacity: 0.6;
}

.PostEditor .save-saved { color: var(--status-success); }
.PostEditor .save-saving { color: var(--status-orange-text); }
.PostEditor .save-unsaved { opacity: 0.5; }
.PostEditor .save-error { color: var(--status-error); }

/* Status badges from design-system.css (.badge, .badge-success, .badge-warning, .badge-neutral) */

/* Editor body — centered column */
.PostEditor .editor-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacer2) var(--spacer);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Cover image — click-to-upload area */
.PostEditor .editor-cover-image {
  margin-bottom: var(--spacer);
}

.PostEditor .cover-image-placeholder {
  border: 2px dashed var(--page-border);
  border-radius: 6px;
  padding: var(--spacer3) var(--spacer);
  text-align: center;
  cursor: pointer;
  opacity: 0.5;
  font-style: italic;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.PostEditor .cover-image-placeholder:hover {
  opacity: 0.8;
  border-color: var(--action-color);
}

.PostEditor .cover-image-preview {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.PostEditor .cover-image-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.PostEditor .cover-image-actions {
  position: absolute;
  bottom: var(--spacerhalf);
  right: var(--spacerhalf);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.PostEditor .cover-image-preview:hover .cover-image-actions {
  opacity: 1;
}

.PostEditor .cover-action-btn {
  padding: 4px 12px;
  height: auto;
  font-size: 0.75em;
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.PostEditor .cover-action-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.PostEditor .cover-action-remove:hover {
  background: var(--status-error);
}

/* Channel selector */
.PostEditor .editor-channel {
  margin-bottom: var(--spacer);
}

.PostEditor .editor-channel select {
  min-width: 200px;
}

/* Title field */
.PostEditor .editor-title {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--spacerhalf) 0;
  padding: var(--spacerthird);
  border: none;
  outline: none;
  letter-spacing: -0.5px;
}

.PostEditor .editor-title:empty::before {
  content: attr(data-placeholder);
  opacity: 0.3;
  pointer-events: none;
}

/* Lede / subtitle field */
.PostEditor .editor-lede {
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 var(--spacer2) 0;
  padding: var(--spacerthird);
  border: none;
  outline: none;
  opacity: 0.7;
}

.PostEditor .editor-lede:empty::before {
  content: attr(data-placeholder);
  opacity: 0.3;
  pointer-events: none;
}

/* Byline / author attribution */
.PostEditor .editor-byline {
  font-size: 0.95em;
  font-style: italic;
  opacity: 0.6;
  margin: 0 0 var(--spacer2) 0;
  padding: var(--spacerthird);
  border: none;
  outline: none;
}

.PostEditor .editor-byline:empty::before {
  content: attr(data-placeholder);
  opacity: 0.5;
  pointer-events: none;
}

/* TipTap editor content area */
.PostEditor .editor-content {
  min-height: 400px;
}

.PostEditor .editor-content .tiptap {
  outline: none;
  font-size: 1.1em;
  line-height: 1.7;
}

/* TipTap prose styling */
.PostEditor .editor-content .tiptap p {
  margin: 0 0 1em 0;
}

.PostEditor .editor-content .tiptap h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 1.5em 0 0.5em 0;
}

.PostEditor .editor-content .tiptap h3 {
  font-size: 1.25em;
  font-weight: 600;
  margin: 1.3em 0 0.4em 0;
}

.PostEditor .editor-content .tiptap blockquote {
  border-left: 3px solid var(--action-color);
  padding-left: var(--spacer);
  margin: 1em 0;
  opacity: 0.85;
  font-style: italic;
}


.editor-content .tiptap ul,
.PostEditor .editor-content .tiptap ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.PostEditor .editor-content .tiptap li {
  margin: 0.3em 0;
}

.PostEditor .editor-content .tiptap code {
  background: rgba(var(--status-gray-rgb), 0.2);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

.PostEditor .editor-content .tiptap pre {
  background: var(--bg-color-d);
  color: var(--text-color-d);
  padding: var(--spacer);
  border-radius: 6px;
  overflow-x: auto;
  margin: 1em 0;
}

.PostEditor .editor-content .tiptap pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.PostEditor .editor-content .tiptap img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1em 0;
}

.PostEditor .editor-content .tiptap hr {
  border: none;
  border-top: 1px solid var(--page-border);
  margin: 2em 0;
}

.PostEditor .editor-content .tiptap a {
  color: var(--action-color-hilite);
  text-decoration: underline;
}

/* Video embeds — responsive 16:9 wrapper */
.PostEditor .editor-content .tiptap div[data-youtube-video] {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 1em 0;
  border-radius: 4px;
}

.PostEditor .editor-content .tiptap div[data-youtube-video] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* TipTap placeholder */
.PostEditor .editor-content .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--neutral);
  pointer-events: none;
  height: 0;
}

/* Image resize controls */
.PostEditor .image-resize-controls {
  position: absolute;
  top: var(--spacerhalf);
  right: var(--spacerhalf);
  display: flex;
  gap: 2px;
  background: var(--bg-color-d);
  border-radius: 4px;
  padding: 2px;
  z-index: 5;
}

.PostEditor .image-resize-btn {
  min-width: 32px;
  height: 26px;
  padding: 0 8px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-color-d);
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
}

.PostEditor .image-resize-btn:hover {
  background: var(--action-color);
  color: var(--white);
}

/* Preview overlay */
.preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacer2);
}

.preview-container {
  background: var(--white);
  color: #27272b;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  padding: var(--spacer3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.preview-close {
  display: block;
  margin: 0 0 var(--spacer2) auto;
  background: var(--action-color);
  color: var(--white);
}

.preview-title {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 0.3em 0;
}

.preview-lede {
  font-size: 1.3em;
  line-height: 1.4;
  opacity: 0.7;
  margin: 0 0 0.5em 0;
}

.preview-byline {
  font-size: 0.95em;
  font-style: italic;
  opacity: 0.6;
  margin: 0 0 1.5em 0;
}

.preview-body {
  font-size: 1.1em;
  line-height: 1.7;
}

.preview-body p { margin: 0 0 1em 0; }
.preview-body h2 { font-size: 1.5em; font-weight: 600; margin: 1.5em 0 0.5em; }
.preview-body h3 { font-size: 1.25em; font-weight: 600; margin: 1.3em 0 0.4em; }
.preview-body blockquote {
  border-left: 3px solid #3051ff;
  padding-left: 1em;
  margin: 1em 0;
  opacity: 0.85;
  font-style: italic;
}
.preview-body ul, ^.preview-body ol { padding-left: 1.5em; margin: 0.5em 0; }
.preview-body li { margin: 0.3em 0; }
.preview-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 1em 0; }
.preview-body a { color: #3051ff; text-decoration: underline; }
.preview-body .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 1em 0; }
.preview-body .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ─── Newsletter controls in controls bar ─────────────── */
.PostEditor .nl-controls {
  display: contents;
}

.PostEditor .editor-controls-right button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Newsletter meta row (in editor body) ────────────── */
.PostEditor .newsletter-meta-row {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  margin-bottom: var(--spacerhalf);
  flex-wrap: wrap;
}

.PostEditor .nl-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.PostEditor .nl-fields {
  display: flex;
  align-items: center;
  gap: var(--spacer);
  flex-wrap: wrap;
}

.PostEditor .nl-fields label {
  font-weight: 500;
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0.7;
}

.nl-fields input[type="date"],
.PostEditor .nl-fields select {
  font-size: 0.9em;
  padding: 4px 8px;
  border: 1px solid var(--page-border);
  border-radius: 4px;
  background: var(--bg-color);
  color: var(--text-color);
}

/* Translation status badges */
.PostEditor .translation-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.PostEditor .translation-lang-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75em;
  font-weight: 500;
  background: rgba(var(--status-gray-rgb), 0.2);
}

.PostEditor .translation-lang-badge.translated {
  background: rgba(var(--status-green-rgb), 0.3);
  color: var(--status-green-text);
}

.PostEditor .translation-lang-badge.stale {
  background: rgba(var(--status-orange-rgb), 0.25);
  color: var(--status-orange-text);
}

/* ─── Email preview (newsletter) ──────────────────────── */
.email-preview-frame {
  background: #ffffff;
  color: #191C1C;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 8px;
  padding: var(--spacer2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.email-preview-iframe {
  flex: 1;
  width: 100%;
  min-height: 60vh;
  border: none;
}

.email-preview-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacer);
  flex-wrap: wrap;
  gap: var(--spacerhalf);
}

.email-preview-controls select {
  font-size: 0.9em;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* ─── Test Send modal ─────────────────────────────────── */
.test-send-modal {
  background: #ffffff;
  color: #191C1C;
  width: 420px;
  max-width: 95vw;
  max-height: 80vh;
  border-radius: 8px;
  padding: var(--spacer2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.test-send-btn-cancel {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 0.9em;
}

.test-send-btn-send {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  background: var(--action-color);
  color: var(--white);
  cursor: pointer;
  font-size: 0.9em;
}

.test-send-btn-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.test-send-modal h3 {
  margin: 0 0 var(--spacer) 0;
  font-size: 1.1em;
}

.test-send-help {
  font-size: 0.8em;
  opacity: 0.6;
  margin-bottom: var(--spacer);
}

.test-send-picker-row {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-bottom: var(--spacer);
}

.test-send-label {
  font-size: 0.85em;
  font-weight: 500;
}

.test-send-list-picker {
  flex: 1;
}

.test-send-preview-label {
  font-size: 0.85em;
  font-weight: 500;
  margin-bottom: 4px;
}

.test-send-preview {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.85em;
}

.test-send-preview-info {
  font-size: 0.8em;
  opacity: 0.6;
  margin-bottom: 6px;
}

.test-send-preview-row {
  padding: 2px 0;
}

.test-send-preview-muted {
  opacity: 0.6;
}

.test-send-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacerhalf);
  margin-top: var(--spacer);
}

/* Editor error state */
.PostEditor .editor-error {
  padding: var(--spacer3);
  text-align: center;
  color: var(--status-error);
  font-style: italic;
}

/* Post editor toolbar — sticky formatting bar */
.PostEditorToolbar .post-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-color);
  border-bottom: 1px solid var(--page-border);
  padding: var(--spacerthird) 0;
}

.PostEditorToolbar .toolbar-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--spacer);
}

.PostEditorToolbar .toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.PostEditorToolbar .toolbar-btn:hover {
  background: var(--page-action);
}

.PostEditorToolbar .toolbar-btn.active {
  background: var(--action-color);
  color: var(--white);
}

.PostEditorToolbar .toolbar-separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--page-border);
  margin: 0 4px;
}

.PreviewImage  {
  display: flex;
  max-width: 300px;
  max-height: 300px;
}

.PreviewImage .preview-image {
  width: 100%;
  height: 100%;
}

/* ─── Proxy Errors ──────────────────────────────────── */

.ProxyErrors .proxy-errors {
  padding: var(--spacer);
}

.ProxyErrors .proxy-error-stats {
  display: flex;
  gap: var(--spacer);
  margin-bottom: var(--spacer);
  flex-wrap: wrap;
}

.ProxyErrors .proxy-error-phase-tag {
  font-family: monospace;
  font-size: 0.85em;
  font-weight: 600;
  color: rgb(var(--status-red-rgb));
}

.ProxyErrors .proxy-error-phase--puppeteer {
  background: rgba(var(--status-orange-rgb), 0.15) !important;
  color: rgb(var(--status-orange-rgb)) !important;
}

.ProxyErrors .proxy-error-phase--content-type {
  background: rgba(128, 128, 128, 0.15) !important;
  color: var(--text-color-quiet) !important;
}

.Publish  {
  flex: 1;
  min-height: 0;
}
.Publish .tableWidget {
  max-height:50%;
  min-height:20%;
}
.Publish .content-element {
  display: flex;
  flex:1 0;
  flex-direction: column;
  height:100%;
}
.Publish .content-element TH {
  border-bottom:1px solid var(--page-border);
}

.Publish .WikiBlock {
  padding-top: var(--spacerhalf);
  margin-top: var(--spacerhalf);
}

/* ─── Health Panel (inside SiteDetailDialog) ─────────── */

.health-panel {
    border: 1px solid var(--page-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--spacer);
    background: var(--bg-color);
}

.health-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacerhalf);
}

.health-panel-title {
    margin: 0;
    font-size: 0.95em;
    font-weight: 700;
}

/* ─── Stage rows ─────────────────────────────────────── */

.health-panel-stages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--spacerhalf);
}

.health-stage-row {
    display: grid;
    grid-template-columns: 20px 110px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.85em;
    transition: background 0.2s;
}

.health-stage-icon {
    text-align: center;
    font-size: 0.9em;
}

.health-stage-name {
    font-weight: 600;
}

.health-stage-detail {
    color: var(--text-color);
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.health-stage-timing {
    font-size: 0.8em;
    opacity: 0.5;
    text-align: right;
    white-space: nowrap;
}

/* Stage states */

.health-stage-row--pending {
    opacity: 0.4;
}
.health-stage-row--pending .health-stage-icon {
    color: #9ca3af;
}

.health-stage-row--active {
    background: rgba(59, 130, 246, 0.08);
}
.health-stage-row--active .health-stage-icon {
    color: #3b82f6;
    animation: health-pulse 1.2s ease-in-out infinite;
}

.health-stage-row--pass .health-stage-icon {
    color: #22c55e;
}

.health-stage-row--fail .health-stage-icon {
    color: #ef4444;
}

.health-stage-row--skip {
    opacity: 0.5;
}

@keyframes health-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ─── Result card ────────────────────────────────────── */

.health-result-card {
    padding: var(--spacerhalf) var(--spacer);
    border-radius: var(--ds-radius-sm);
    margin-top: var(--spacerhalf);
}

.health-result-card--healthy {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.health-result-card--degraded {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
}
.health-result-card--unhealthy,
.health-result-card--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.health-result-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.health-result-status {
    font-weight: 700;
    font-size: 0.9em;
}

.health-result-score {
    font-weight: 700;
    font-size: 1.1em;
    padding: 2px 8px;
    border-radius: 4px;
}
.health-result-score--good {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}
.health-result-score--fair {
    color: #eab308;
    background: rgba(234, 179, 8, 0.12);
}
.health-result-score--poor {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.health-result-diagnosis {
    font-size: 0.85em;
    opacity: 0.8;
    margin-bottom: 4px;
}

.health-result-resource-details {
    font-size: 0.85em;
    margin: 6px 0;
    padding: 4px 0;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}
.health-result-resource-details summary {
    cursor: pointer;
    font-weight: 600;
    opacity: 0.75;
}
.health-result-resource-details p {
    margin: 4px 0 4px 12px;
    line-height: 1.4;
}
.health-result-auto-fix {
    color: #22c55e;
}
.health-result-manual-review {
    color: #eab308;
}

.health-result-meta {
    font-size: 0.8em;
    opacity: 0.5;
}

/* ─── Status & previous lines ────────────────────────── */

.health-panel-status {
    font-size: 0.85em;
    color: #3b82f6;
    min-height: 1.2em;
}

.health-panel-previous {
    font-size: 0.8em;
    opacity: 0.5;
    margin-top: 4px;
}

/* ─── Screenshot thumbnail row (above health box) ──── */

.health-panel-screenshot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 0;
}

.health-screenshot-thumb {
    width: 120px;
    height: 75px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--page-border);
    cursor: zoom-in;
    opacity: 0.9;
    transition: opacity 0.15s;
}
.health-screenshot-thumb:hover {
    opacity: 1;
}

.health-screenshot-date {
    font-size: 0.8em;
    opacity: 0.5;
}

/* ─── Warning state for stages ──────────────────────── */

.health-stage-row--warn .health-stage-icon {
    color: #eab308;
}


/* Post-editor fills viewport minus page header. Flex column layout:
   controls + toolbar are fixed, editor-body gets the rest and scrolls. */
.PublisherNewsletter .PublisherNewsletter .post-editor {
  height: calc(100vh - 50px);
  overflow: hidden;
}
.PublisherNewsletter .PublisherNewsletter .editor-controls {
  flex-shrink: 0;
}
.PublisherNewsletter .PublisherNewsletter .post-editor-toolbar {
  flex-shrink: 0;
}
.PublisherNewsletter .PublisherNewsletter .editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-width: none;
  margin: 0;
}

/* Publisher editor: blockquotes are article cards styled like the dark email template.
   Componentry prefixes these with .PublisherNewsletter — which is the parent of PostEditor. */

/* ── Decorative blockquote (regular quotes) ──────────────────── */
.PublisherNewsletter .PublisherNewsletter blockquote:not(.publisher-card) {
  border-left: 4px solid #ED0131;
  background: rgba(237, 1, 49, 0.05);
  border-radius: 0 6px 6px 0;
  padding: 12px 20px;
  margin: 20px 0;
  font-style: italic;
  color: #ccc;
}

/* Draft editor: hide intro, footer, and tracking pixel from the email preview.
   The editor shows only the body — intro/footer are visible in the full preview. */
.publisher-editor .email-section-intro,
.publisher-editor .email-section-footer,
.PublisherNewsletter .publisher-editor .email-section-tracking {
  display: none;
}

/* Article cards now use inline styles via CKEditor HtmlEmbed — no CSS needed. */

.RuleSelector  {
    width:100%;
    margin:var(--spacer) 0;
}
.RuleSelector .tray {
    display:flex;
    width:100%;
    min-height:40px;
}
.RuleSelector .container {
    display:flex;
    flex:1 0;
    flex-wrap:wrap;
    border:1px solid var(--text-color);
    padding-bottom:var(--spacerhalf);
}
.RuleSelector .tray BUTTON {
    height:40px;
    background-color:var(--item-elevated);
}
.RuleSelector .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;
}
.RuleSelector .control:hover {
    background-color:var(--page-action);
    cursor:pointer;
}
.RuleSelector .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;
}
.RuleSelector .item:hover {
    background-color:var(--page-action);
    cursor:pointer;
}


.SPAModeSelector  {
    width: 100%;
    margin: var(--spacer) 0;
}
.SPAModeSelector .type-hint {
    font-size: 0.85em;
    color: var(--action-color);
    margin-bottom: var(--spacerhalf);
    font-style: italic;
}
.SPAModeSelector .options {
    display: flex;
    flex-direction: column;
    gap: var(--spacerhalf);
}
.SPAModeSelector .option {
    border: 1px solid var(--text-color-quiet);
    border-radius: 6px;
    padding: var(--spacer);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.SPAModeSelector .option:hover {
    border-color: var(--action-color);
}
.SPAModeSelector .option.selected {
    border-color: var(--action-color-hilite);
    background-color: rgba(var(--status-blue-rgb), 0.08);
}
.SPAModeSelector .option-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacerhalf);
}
.SPAModeSelector .option-header INPUT[type=radio] {
    margin-top: 4px;
    min-width: 16px;
    accent-color: var(--action-color-hilite);
}
.SPAModeSelector .option-title-wrap {
    display: flex;
    flex-direction: column;
}
.SPAModeSelector .option-title {
    font-weight: bold;
    font-size: 1.05em;
}
.SPAModeSelector .rule-badge {
    display: inline-block;
    font-size: 0.75em;
    padding: 1px 6px;
    margin-top: 2px;
    border-radius: 3px;
    background-color: var(--action-color);
    color: var(--text-color-d);
    width: fit-content;
}
.SPAModeSelector .option-subtitle {
    font-size: 0.85em;
    color: var(--text-color-quiet);
    margin-top: 2px;
}
.SPAModeSelector .option-body {
    margin-top: var(--spacerhalf);
    margin-left: 24px;
}
.SPAModeSelector .option-desc {
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--text-color-quiet);
}
.SPAModeSelector .option-diagram {
    margin-top: var(--spacerhalf);
}

/* Diagram styles */
.SPAModeSelector .diagram {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--spacerhalf);
    background-color: rgba(255,255,255,0.03);
    border-radius: 4px;
    font-size: 0.8em;
    overflow-x: auto;
}
.SPAModeSelector .d-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.SPAModeSelector .d-box {
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    border: 1px solid;
}
.SPAModeSelector .d-user {
    background-color: rgba(var(--status-green-rgb), 0.15);
    border-color: rgba(var(--status-green-rgb), 0.4);
}
.SPAModeSelector .d-sos {
    background-color: rgba(var(--status-blue-rgb), 0.15);
    border-color: rgba(var(--status-blue-rgb), 0.4);
}
.SPAModeSelector .d-pub {
    background-color: rgba(var(--status-orange-rgb), 0.15);
    border-color: rgba(var(--status-orange-rgb), 0.4);
}
.SPAModeSelector .d-process {
    background-color: rgba(var(--status-gray-rgb), 0.1);
    border-color: rgba(var(--status-gray-rgb), 0.3);
}
.SPAModeSelector .d-heavy {
    background-color: rgba(var(--status-red-rgb), 0.12);
    border-color: rgba(var(--status-red-rgb), 0.35);
}
.SPAModeSelector .d-result {
    background-color: rgba(var(--status-green-rgb), 0.1);
    border-color: rgba(var(--status-green-rgb), 0.3);
}
.SPAModeSelector .d-arrow {
    color: var(--text-color-quiet);
    font-size: 1.2em;
}
.SPAModeSelector .d-arrow-down {
    color: var(--text-color-quiet);
    font-size: 1.2em;
    margin-left: 40px;
}
.SPAModeSelector .d-spacer {
    width: 40px;
}
.SPAModeSelector .d-label {
    font-size: 0.85em;
    color: var(--text-color-quiet);
    font-style: italic;
}

/* Overlay, modal, header, footer from design-system.css (.ds-overlay, .ds-modal, .ds-modal-header, .ds-modal-footer) */

/* ─── Component-specific layout ──────────────────────── */

.site-dialog-title {
    margin: 0;
    font-size: 1.2em;
    font-weight: 700;
}

.site-dialog-close {
    background: none;
    border: 1px solid var(--page-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    padding: 4px 12px;
    font-size: 0.85em;
    color: var(--text-color);
    opacity: 0.7;
    transition: opacity var(--ds-transition-fast);
}
.site-dialog-close:hover {
    opacity: 1;
}

.site-dialog-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.site-dialog-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacer2);
    padding: var(--spacer2);
}

.site-dialog-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacerhalf);
}

.site-dialog-full {
    padding: 0 var(--spacer2) var(--spacer);
    display: flex;
    flex-direction: column;
    gap: var(--spacerhalf);
}

.site-dialog-footer-left,
.site-dialog-footer-right {
    display: flex;
    gap: var(--spacerhalf);
}

.site-derived-root {
    display: block;
    font-family: monospace;
    font-size: 0.85em;
    padding: 6px 0;
    color: var(--text-color);
    opacity: 0.8;
    text-decoration: none;
}

.site-derived-root[href]:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ─── Publisher Profile section ──────────────────────── */

.site-profile-card {
    margin: 0 var(--spacer2) var(--spacer);
    padding: var(--ds-space-md);
    border: var(--ds-card-border);
    border-radius: var(--ds-radius-lg);
    background: rgba(0, 0, 0, 0.02);
}

.site-profile-header {
    margin: 0 0 var(--ds-space-sm);
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.site-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacer2);
}

.site-profile-left,
.site-profile-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacerhalf);
}

.site-profile-logo-zone {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px dashed var(--page-border);
    border-radius: var(--ds-radius-md);
    background: rgba(0, 0, 0, 0.03);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--ds-transition-fast), background var(--ds-transition-fast);
    margin-bottom: var(--ds-space-sm);
    overflow: hidden;
}
.site-profile-logo-zone:hover {
    border-color: var(--action-color);
    background: rgba(0, 0, 0, 0.05);
}
.site-profile-logo-zone.dragover {
    border-color: var(--action-color-hilite);
    background: rgba(48, 81, 255, 0.08);
    border-style: solid;
}
.site-profile-logo-zone.uploading {
    opacity: 0.5;
    pointer-events: none;
}

.site-profile-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
    pointer-events: none;
}

.site-profile-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.logo-placeholder-icon {
    font-size: 1.4em;
    opacity: 0.3;
    line-height: 1;
}
.logo-placeholder-text {
    font-size: 0.55em;
    opacity: 0.35;
    text-align: center;
    line-height: 1.3;
}

.site-profile-storj-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    font-size: 0.6em;
    font-weight: 700;
}

.site-profile-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 0.85em;
    font-family: inherit;
    border: 1px solid var(--page-border);
    border-radius: var(--ds-radius-sm);
    background: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
}

.site-profile-textarea--short {
    min-height: 48px;
    max-height: 120px;
}

.site-profile-textarea--tall {
    min-height: 72px;
    max-height: 200px;
}

/* ─── Partnership Pipeline section ────────────────────── */

.site-partnership-card {
    margin: 0 var(--spacer2) var(--spacer);
    padding: var(--ds-space-md);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: var(--ds-radius-lg);
    background: rgba(249, 115, 22, 0.04);
}

.site-partnership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacer2);
}

.site-partnership-left,
.site-partnership-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacerhalf);
}

.partnership-note-row {
    display: flex;
    gap: 4px;
}

.partnership-note-input {
    flex: 1;
    padding: 4px 8px;
    font-size: 0.85em;
    border: 1px solid var(--page-border);
    border-radius: var(--ds-radius-sm);
    background: var(--bg-color);
    color: var(--text-color);
}

.partnership-note-add {
    padding: 4px 10px;
    font-size: 0.85em;
    font-weight: 700;
    border: 1px solid var(--page-border);
    border-radius: var(--ds-radius-sm);
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.partnership-note-add:hover {
    opacity: 1;
}

.partnership-notes-list {
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.partnership-notes-empty {
    font-size: 0.8em;
    opacity: 0.4;
    padding: 8px 0;
}

.partnership-note-entry {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.82em;
}

.partnership-note-date {
    font-family: monospace;
    font-size: 0.85em;
    opacity: 0.5;
    white-space: nowrap;
}

.partnership-note-text {
    flex: 1;
}

.partnership-note-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.3;
    font-size: 1em;
    padding: 0 2px;
    transition: opacity 0.15s;
}
.partnership-note-delete:hover {
    opacity: 1;
    color: #ef4444;
}

.SiteTypeIndicator  {
    width: 100%;
    margin: var(--spacer) 0;
}
.SiteTypeIndicator .indicator-container {
    display: flex;
    align-items: center;
    gap: var(--spacerhalf);
    flex-wrap: wrap;
}
.SiteTypeIndicator .type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
}
.SiteTypeIndicator .type-badge.spa {
    background-color: rgba(var(--status-orange-rgb), 0.25);
    border: 1px solid rgba(var(--status-orange-rgb), 0.6);
    color: var(--status-orange-text);
}
.SiteTypeIndicator .type-badge.standard {
    background-color: rgba(var(--status-green-rgb), 0.2);
    border: 1px solid rgba(var(--status-green-rgb), 0.5);
    color: var(--status-green-text);
}
.SiteTypeIndicator .type-badge.unknown {
    background-color: rgba(var(--status-gray-rgb), 0.15);
    border: 1px solid rgba(var(--status-gray-rgb), 0.3);
    color: var(--text-color-quiet);
}
.SiteTypeIndicator .type-badge.detecting {
    background-color: rgba(var(--status-blue-rgb), 0.15);
    border: 1px solid rgba(var(--status-blue-rgb), 0.4);
    color: var(--action-color);
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.SiteTypeIndicator .detail-text {
    font-size: 0.8em;
    color: var(--text-color-quiet);
    flex: 1;
    min-width: 100px;
}
.SiteTypeIndicator .detect-date {
    color: var(--neutral);
}
.SiteTypeIndicator .indicator-container BUTTON {
    height: 28px;
    font-size: 0.8em;
    padding: 2px 8px;
}

/* ─── Taxonomy Manager — shared styles (^ = global) ───── */

/* Hub content area */
.TaxonomyManager .taxonomy-hub-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Sections & Tags shared ──────────────────────────── */

.taxonomy-sections,
.taxonomy-tags {
  padding: var(--spacer);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.taxonomy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacer);
  flex-shrink: 0;
}

.taxonomy-section-title {
  font-weight: 600;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-quiet);
}

/* ─── Filter bar ──────────────────────────────────────── */

.taxonomy-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  margin-bottom: var(--spacer);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.taxonomy-filter-btn {
  font-size: 0.85em;
  text-transform: none;
  background-color: transparent;
  border: 1px solid var(--text-color-quiet);
  color: var(--text-color-quiet);
  padding: 4px 12px;
  height: 28px;
  cursor: pointer;
  transition: all 150ms;
}

.taxonomy-filter-btn:hover {
  border-color: var(--action-color);
  color: var(--action-color);
}

.taxonomy-filter-btn.active {
  background-color: var(--action-color);
  border-color: var(--action-color);
  color: var(--white);
}

.taxonomy-search {
  font-size: 0.82em;
  padding: 4px 8px;
  border: 1px solid var(--text-color-quiet);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  width: 180px;
  margin-left: auto;
}

.taxonomy-search:focus {
  outline: none;
  border-color: var(--action-color-hilite);
}

.taxonomy-search::placeholder {
  color: var(--text-color-quiet);
  opacity: 0.7;
}

/* ─── Table ───────────────────────────────────────────── */

.taxonomy-table-container {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.taxonomy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  background: transparent;
}

.taxonomy-table TH {
  text-align: left;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-color-quiet);
  padding: var(--spacerthird) var(--spacerhalf);
  border-bottom: 2px solid var(--page-border);
  position: sticky;
  top: 0;
  background: var(--bg-color);
  z-index: 1;
}

.taxonomy-table TD {
  padding: var(--spacerhalf);
  border-bottom: 1px solid var(--page-border);
  vertical-align: middle;
  color: var(--text-color);
}

.taxonomy-table TBODY TR:hover {
  background: var(--page-action);
}

/* Column widths */
.tax-col-category {
  width: 40px;
  text-align: center;
  font-size: 1.1em;
}

.tax-col-type {
  width: 100px;
}

.tax-col-name {
  /* takes remaining space */
}

.tax-col-slug {
  width: 180px;
  font-size: 0.85em;
  color: var(--text-color-quiet);
}

.tax-col-slug CODE {
  background: var(--bg-color-quiet);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

.tax-col-count {
  width: 70px;
  text-align: center;
}

.tax-col-actions {
  width: 130px;
  white-space: nowrap;
}

/* ─── Type badge ──────────────────────────────────────── */

.taxonomy-type-badge {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-color-quiet);
  color: var(--text-color-quiet);
}

.taxonomy-type-topic {
  background: rgba(var(--status-green-rgb), 0.15);
  color: rgb(var(--status-green-rgb));
}

.taxonomy-type-person {
  background: rgba(var(--status-orange-rgb), 0.15);
  color: rgb(var(--status-orange-rgb));
}

.taxonomy-type-institution {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(59, 130, 246);
}

/* ─── Buttons ─────────────────────────────────────────── */

.taxonomy-action-btn {
  font-size: 0.85em;
  padding: 4px 12px;
  height: 28px;
  background: var(--action-color);
  border: 1px solid var(--action-color);
  color: var(--white);
  cursor: pointer;
  transition: all 150ms;
  border-radius: var(--spacerthird);
}

.taxonomy-action-btn:hover {
  background: var(--action-color-hilite);
}

.taxonomy-edit-btn,
.taxonomy-save-btn,
.taxonomy-cancel-btn,
.taxonomy-delete-btn {
  font-size: 0.8em;
  padding: 2px 8px;
  cursor: pointer;
  border: 1px solid var(--text-color-quiet);
  background: transparent;
  color: var(--text-color-quiet);
  border-radius: 3px;
  transition: all 150ms;
  margin-right: 4px;
}

.taxonomy-edit-btn:hover,
.taxonomy-save-btn:hover {
  border-color: var(--action-color);
  color: var(--action-color);
}

.taxonomy-delete-btn:hover:not(:disabled) {
  border-color: rgb(var(--status-red-rgb));
  color: rgb(var(--status-red-rgb));
}

.taxonomy-delete-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.taxonomy-cancel-btn:hover {
  border-color: var(--text-color);
  color: var(--text-color);
}

/* ─── Inline editing ──────────────────────────────────── */

.taxonomy-inline-input {
  font-size: 0.9em;
  padding: 3px 6px;
  border: 1px solid var(--text-color-quiet);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

.taxonomy-inline-input:focus {
  outline: none;
  border-color: var(--action-color-hilite);
}

.taxonomy-inline-select {
  font-size: 0.85em;
  padding: 3px 6px;
  border: 1px solid var(--text-color-quiet);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* ─── Add form ────────────────────────────────────────── */

.taxonomy-add-form {
  display: flex;
  align-items: center;
  gap: var(--spacerhalf);
  padding: var(--spacerhalf);
  margin-bottom: var(--spacer);
  border: 1px solid var(--page-border);
  border-radius: var(--spacerthird);
  background: var(--bg-color);
}

.taxonomy-add-form .taxonomy-inline-input {
  width: 200px;
}

/* ─── Empty state ─────────────────────────────────────── */

.taxonomy-empty {
  padding: var(--spacer2);
  text-align: center;
  color: var(--text-color-quiet);
  font-style: italic;
}

/* ─── Article taxonomy fields ─────────────────────────── */

.taxonomy-fields {
  margin-top: var(--spacerhalf);
}

.taxonomy-metadata {
  font-size: 0.8em;
  color: var(--text-color-quiet);
  margin-top: var(--spacerthird);
  font-style: italic;
}

/* ── Test Dashboard ─────────────────────────────────────── */

.TestDashboard .test-dashboard {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Session List (main view) ──────────────────────────── */

.TestDashboard .td-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.TestDashboard .td-header h2 {
  margin: 0;
  font-size: 20px;
}

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

.TestDashboard .td-session-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--text-color, #333);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}

.TestDashboard .td-session-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color, #ddd);
}

.TestDashboard .td-session-row {
  cursor: pointer;
  transition: background 0.15s;
}

.TestDashboard .td-session-row:hover {
  background: rgba(0,0,0,0.04);
}

.TestDashboard .td-score {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  min-width: 36px;
  text-align: center;
}

.TestDashboard .td-score--high  { background: #e8f5e9; color: #2e7d32; }
.TestDashboard .td-score--mid   { background: #fff8e1; color: #f57f17; }
.TestDashboard .td-score--low   { background: #ffebee; color: #c62828; }

.TestDashboard .td-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.TestDashboard .td-status-badge--progress { background: #e3f2fd; color: #1565c0; }
.TestDashboard .td-status-badge--complete { background: #e8f5e9; color: #2e7d32; }

.TestDashboard .td-row-actions {
  display: flex;
  gap: 4px;
}

.TestDashboard .td-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 3px;
  color: #888;
  transition: background 0.15s, color 0.15s;
  height: auto;
  text-transform: none;
}

.TestDashboard .td-icon-btn:hover {
  background: rgba(0,0,0,0.08);
  color: #333;
}

.TestDashboard .td-icon-btn--danger:hover {
  background: #ffebee;
  color: #c62828;
}

.TestDashboard .td-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-style: italic;
}

/* ── Session Dialog (overlay) ──────────────────────────── */

.TestDashboard .td-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 20px;
}

.TestDashboard .td-dialog {
  background: var(--bg-color, #ebece4);
  color: var(--text-color, #27272b);
  border-radius: 12px;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.TestDashboard .td-dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color, #ddd);
  flex-shrink: 0;
}

.TestDashboard .td-dialog-header h3 {
  margin: 0;
  font-size: 16px;
  flex: 1;
}

.TestDashboard .td-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.TestDashboard .td-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, #ddd);
  flex-shrink: 0;
}

/* ── Summary Bar ───────────────────────────────────────── */

.TestDashboard .td-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
}

.TestDashboard .td-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
}

.TestDashboard .td-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.TestDashboard .td-pill--green  { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.TestDashboard .td-pill--yellow { background: #fff8e1; color: #f57f17; border-color: #ffe082; }
.TestDashboard .td-pill--red    { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.TestDashboard .td-pill--gray   { background: #f5f5f5; color: #757575; border-color: #e0e0e0; }

/* ── Section ───────────────────────────────────────────── */

.TestDashboard .td-section {
  margin-bottom: 16px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-color, #ebece4);
}

.TestDashboard .td-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.TestDashboard .td-section-header:hover {
  background: rgba(0,0,0,0.03);
}

.TestDashboard .td-section-toggle {
  font-size: 12px;
  color: #888;
  transition: transform 0.2s;
  width: 16px;
  text-align: center;
}

.TestDashboard .td-section-toggle.expanded {
  transform: rotate(90deg);
}

.TestDashboard .td-section-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.TestDashboard .td-section-badge--green  { background: #4caf50; }
.TestDashboard .td-section-badge--yellow { background: #ff9800; }
.TestDashboard .td-section-badge--red    { background: #f44336; }
.TestDashboard .td-section-badge--gray   { background: #9e9e9e; }

.TestDashboard .td-section-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  color: var(--text-color, #27272b);
}

.TestDashboard .td-section-num {
  font-size: 11px;
  color: #999;
  margin-right: 4px;
}

.TestDashboard .td-section-body {
  padding: 16px;
  border-top: 1px solid var(--border-color, #ddd);
  display: none;
}

.TestDashboard .td-section-body.open {
  display: block;
}

/* ── Action Buttons ────────────────────────────────────── */

.TestDashboard .td-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.TestDashboard .td-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  height: auto;
  text-transform: none;
}

.TestDashboard .td-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.TestDashboard .td-btn--primary { background: #1976d2; color: #fff; }
.TestDashboard .td-btn--primary:hover:not(:disabled) { background: #1565c0; }

.TestDashboard .td-btn--secondary { background: #e0e0e0; color: #333; }
.TestDashboard .td-btn--secondary:hover:not(:disabled) { background: #d0d0d0; }

.TestDashboard .td-btn--success { background: #4caf50; color: #fff; }
.TestDashboard .td-btn--success:hover:not(:disabled) { background: #388e3c; }

.TestDashboard .td-btn--danger { background: #f44336; color: #fff; }
.TestDashboard .td-btn--danger:hover:not(:disabled) { background: #d32f2f; }

/* ── Results Area ──────────────────────────────────────── */

.TestDashboard .td-results {
  margin-bottom: 12px;
}

.TestDashboard .td-results-empty {
  color: #999;
  font-size: 13px;
  font-style: italic;
  padding: 8px 0;
}

.TestDashboard .td-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
}

.TestDashboard .td-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--text-color, #333);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}

.TestDashboard .td-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color, #ddd);
}

/* ── Status Badges ─────────────────────────────────────── */

.TestDashboard .td-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.TestDashboard .td-status--good  { background: #e8f5e9; color: #2e7d32; }
.TestDashboard .td-status--fair  { background: #fff8e1; color: #f57f17; }
.TestDashboard .td-status--poor  { background: #ffebee; color: #c62828; }
.TestDashboard .td-status--skip  { background: #f5f5f5; color: #888; }

/* ── Stats Cards Grid ──────────────────────────────────── */

.TestDashboard .td-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.TestDashboard .td-stat-card {
  padding: 14px;
  background: var(--bg-color-d, #f9f9f9);
  border-radius: 6px;
  text-align: center;
  border-left: 3px solid #ccc;
}

.TestDashboard .td-stat-value {
  font-size: 26px;
  font-weight: 700;
}

.TestDashboard .td-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  margin-top: 4px;
}

/* ── OG Preview Cards ──────────────────────────────────── */

.TestDashboard .td-og-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  background: #fff;
}

.TestDashboard .td-og-card img {
  width: 100px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.TestDashboard .td-og-meta { flex: 1; min-width: 0; }

.TestDashboard .td-og-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.TestDashboard .td-og-desc {
  font-size: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.TestDashboard .td-og-status { font-size: 11px; margin-top: 4px; }

/* ── Checklist ─────────────────────────────────────────── */

.TestDashboard .td-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.TestDashboard .td-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.TestDashboard .td-check-item:last-child { border-bottom: none; }

.TestDashboard .td-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid #ccc;
  background: #fff;
  transition: all 0.15s;
  user-select: none;
}

.TestDashboard .td-check-icon:hover { border-color: #888; }
.TestDashboard .td-check-icon--passed { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.TestDashboard .td-check-icon--failed { background: #ffebee; border-color: #f44336; color: #c62828; }

.TestDashboard .td-check-label {
  flex: 1;
  font-size: 13px;
  cursor: pointer;
}

.TestDashboard .td-check-label--passed {
  text-decoration: line-through;
  color: #999;
}

.TestDashboard .td-check-label--failed {
  color: #c62828;
}

.TestDashboard .td-check-fail-note {
  font-size: 11px;
  color: #c62828;
  background: #fff5f5;
  padding: 2px 6px;
  border-radius: 3px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.TestDashboard .td-check-pass-note {
  font-size: 11px;
  color: #666;
  background: #f5f5f0;
  padding: 2px 6px;
  border-radius: 3px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Pass/Fail Popup ───────────────────────────────────── */

.TestDashboard .td-verdict-popup {
  position: fixed;
  z-index: 600;
  background: var(--bg-color, #ebece4);
  color: var(--text-color, #27272b);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  padding: 12px;
  width: 300px;
}

.TestDashboard .td-verdict-popup h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-color, #333);
}

.TestDashboard .td-verdict-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.TestDashboard .td-verdict-notes {
  width: 100%;
  min-height: 60px;
  font-size: 12px;
  padding: 6px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  color: var(--text-color, #333);
  background: #fff;
}

.TestDashboard .td-verdict-notes::placeholder { color: #bbb; }

.TestDashboard .td-verdict-save {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* ── Loading Spinner ───────────────────────────────────── */

.TestDashboard .td-loading {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ddd;
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: td-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

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

/* ── Link Results ──────────────────────────────────────── */

.TestDashboard .td-link-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.TestDashboard .td-link-result a {
  color: #1976d2;
  text-decoration: none;
  word-break: break-all;
}

.TestDashboard .td-link-result a:hover { text-decoration: underline; }

/* ── Section Divider ───────────────────────────────────── */

.TestDashboard .td-divider {
  border: none;
  border-top: 1px dashed var(--border-color, #ddd);
  margin: 12px 0;
}

/* ── Status Overview Panel ────────────────────────────── */

.TestDashboard .td-status-overview {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  min-height: 48px;
  align-items: center;
}

.TestDashboard .td-status-indicator {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  background: var(--bg-color, #ebece4);
  border: 1px solid var(--border-color, #ddd);
}

.TestDashboard .td-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 4px;
}

.TestDashboard .td-status-dot--green  { background: #4caf50; }
.TestDashboard .td-status-dot--yellow { background: #ff9800; }
.TestDashboard .td-status-dot--red    { background: #f44336; }
.TestDashboard .td-status-dot--gray   { background: #9e9e9e; }

.TestDashboard .td-status-indicator-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-top: 2px;
}

.TestDashboard .td-status-indicator-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #27272b);
  margin-top: 2px;
}

/* ── Infra Check Results ──────────────────────────────── */

.TestDashboard .td-infra-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 12px;
  font-size: 13px;
}

.InputFile  {
    position:absolute;
    flex:0 0;
}
.InputFile input[type=file] {
    display:none;
    height:30vw;
}
.InputFile .drop-box {
    position:relative;
    display:flex;
    align-items: center;
    text-align:center;
    border:1px solid var(--text-color);
    border-radius:3px;
    cursor:pointer;
    height:29px;
    width:29px;
    background-color:var(--bg-color);
    transition:all 100ms;
}
.InputFile .drop-box IMG {
    width:100%;
    height:100%;
    object-fit: cover;
}
.InputFile .drop-box .icon {
    flex:1 1;
    font-size:0.9em;
    opacity:.5;
}
.InputFile .drop-box .file-profile {
    flex:1 1;
    margin:var(--spacer);
    font-size:0.8em;
    overflow:hidden;
}
.InputFile .file-name {
    font-weight:bold;
}
.InputFile .drop-box:hover {
    z-index:100;
    height:200px;
    width:200px;
}
.InputFile .file-loader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.InputFile .file-loader:before {
    display: block;
    content: "";
    width: 70%;
    height: 70%;
    border: 3px solid transparent;
    border-bottom-color: var(--action-color-hilite);
    /* border-left-color: var(--action-color-hilite); */
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    -webkit-animation: file-loader-rotation 1s linear infinite;
    animation: file-loader-rotation 1s linear infinite;
}
@-webkit-keyframes file-loader-rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes file-loader-rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.InputImage  {
    align-items:center;
    flex:0 0;
    min-width: 30px;
    overflow:hidden;
}
.InputImage .progress-display {
    position:absolute;
    overflow:hidden;
}