:root {
    --bg-color:#ebece4;
    --bg-color-d:#27272b;
    --bg-color-quiet:#ebece4aa;
    --bg-color-quiet-d:#27272baa;
    --text-color:#27272b;
    --text-color-d:#ebece4;
    --text-color-quiet:#27272baa;
    --text-color-quiet-d:#ebece4aa;
    --white:#fff;
    --neutral:#919090;
    --page-border:#27272b22;
    --action-color:#7c91ff;
    --action-color-hilite:#3051ff;
    --page-action:#7c91ff33;
    --page-selected:#3051ff44;
    --spacer:12px;
    --spacer2:24px;
    --spacer3:36px;
    --spacerhalf:6px;
    --spacerthird:4px;
    --spacerquarter:3px;
    --spacerneg:-12px;
    --status-error:red;
    --status-warning:yellow;
    --status-success:green;
    --status-green-rgb: 100, 200, 100;
    --status-green-text: #70d070;
    --status-orange-rgb: 255, 160, 60;
    --status-orange-text: #ffb050;
    --status-blue-rgb: 124, 145, 255;
    --status-gray-rgb: 180, 180, 180;
    --status-red-rgb: 255, 80, 80;
    --item-super:#7777DD80;
    --item-elevated:#77DD7780;
    --item-normal:#DDDD7780;
    --item-bad:#DD777780;
    --z-index-toast: 1000;
}

BODY {
    overflow:hidden;
    color:var(--text-color-d);
    background-color:var(--bg-color-d);
    font-family:DM Sans,sans-serif
}
H1 {
    margin-top:0;
    font-size: 32px;
    letter-spacing: -.5px;
}
H2 {
    font-size: 32px;
}
BUTTON {
    background-color:var(--action-color);
    border:0;
    border-radius:50px;
    cursor:pointer;
    color:var(--text-color-d);
    white-space: nowrap;
    transition: .25s;
    text-transform:uppercase;
    font-weight: 500;
    padding: 3px 10px;
    height:32px;
}
BUTTON:hover {
    background-color:var(--action-color-hilite);
}
.page-collection-container {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction: column;
    flex:1 1;
}
.page-item-list {
    flex:60% 1
}
.page-item-properties {
    flex: 40% 250px;
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--spacer));
    margin:0 var(--spacerhalf);
}

.item-placeholder-text {
    font-style:italic;
    color:var(--text-color-quiet);
}
.page-item-options {
    position:relative;
    border:1px solid var(--text-color-quiet);
    padding:var(--spacer);
    margin:var(--spacer) 0;
}
.page-item-options .box-title {
    position:absolute;
    top:-5px;
    left:5px;
    margin-top:-5px;
    color:var(--text-color-quiet);
    background-color:var(--bg-color-quiet);
}
/* ─── Unified scroll layout ───────────────────────────────
   PageBody is a flex child of page-main. It fills available space
   and scrolls its content, so no child component needs to guess
   viewport height with calc(100vh - Npx) hacks.
   DrawerWidget overrides ensure tabbed pages (DomainHealth,
   AICuratorHub) also participate in flex instead of height:100%. */
.PageBody {
    overflow: auto;
}
.DrawerWidget {
    flex: 1;
    min-height: 0;
}
.DrawerWidget > .drawerContent {
    height: auto;
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.page-full {
    padding:var(--spacer);
    overflow-y:auto;
}
::selection {
    background-color: var(--action-color-hilite);
    color: var(--white);
}
INPUT:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]), SELECT {
    font-size:1.1em;
    padding:4px;
    border:1px solid var(--text-color);
    border-radius:3px;
    color:var(--text-color);
    min-width:150px;
}
INPUT[type=number] {
    width:100px;
}
.form-element-title {
    font-size:0.8em;
    font-weight:bold;
}
IFRAME {
    border:0;
}

.Wiki .doclet-render .frame-set .frame-title {
  background-color:var(--bg-color-quiet-d);
  color:var(--text-color-d)
}

/* Hide wiki edit controls by default; footer toggle reveals them */
body:not(.edit-mode) .Wiki #doclet-controls {
  display: none !important;
}
body.edit-mode .Wiki #doclet-controls {
  display: inline-flex !important;
}

/* ─── Tooltip help indicators ─────────────────────────── */
/* The (?) indicator — lives inline next to labels/buttons */
.tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--neutral);
    color: var(--neutral);
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}
.tip.tip-uncertain {
    border-color: var(--status-orange-text);
    color: var(--status-orange-text);
}
/* Tooltip bubble — portaled to document.body via JS, position: fixed */
.tip-text {
    background: var(--bg-color-d);
    color: var(--text-color-d);
    border: 1px solid var(--neutral);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 360px;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.tip-text code {
    background: rgba(255,255,255,0.1);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 0.95em;
}
.tip-text a {
    color: var(--text-color-d);
    text-decoration: underline;
}
.tip-text a:hover {
    opacity: 0.8;
}