/* ============================================================================
   "AI Import Wizard" (Admin.view.main.AiImportWizard).

   Implements the design handoff "AI Import Wizard (Admin Tool v0.8)" with its five
   steps Tables / Sample / Keys / ObjectTree / Import. The modal is rendered as one
   block of HTML by Admin.view.main.AiImportWizardController - this file styles it
   completely, the Ext window underneath only contributes its positioning and its
   modal mask.

   The whole modal is one flex column: header and footer keep their height, the body
   takes the rest and every step lets exactly one list scroll inside it - never the
   body itself and never two lists at once.

   Design tokens identical to tablewindow-redesign.css / connections-redesign.css.
   ============================================================================ */

body.xadmintool .x-window.aiw-window {
    /* ---- design tokens of the handoff ---- */
    --aiw-white: #FFFFFF;
    --aiw-slate-50: #F8F9FA;
    --aiw-slate-100: #F2F4F6;
    --aiw-slate-200: #E7EAED;
    --aiw-slate-300: #D2D7DC;
    --aiw-slate-400: #B4BCC4;
    --aiw-slate-500: #97A2AD;
    --aiw-slate-600: #7E8B99;
    --aiw-slate-700: #55606C;
    --aiw-slate-800: #3C454F;
    --aiw-slate-900: #2A3138;

    --aiw-teal-50: #F1FBFA;
    --aiw-teal-100: #E4F6F5;
    --aiw-teal-200: #C0EAE7;
    --aiw-teal-300: #93DBD6;
    --aiw-teal-400: #68CCC6;
    --aiw-teal-500: #589999;
    --aiw-teal-600: #4A8686;
    --aiw-teal-700: #3F7373;

    --aiw-plum-100: #E4D9E2;
    --aiw-plum-700: #4A2F49;

    --aiw-warn-bg: #FFF6E5;
    --aiw-warn-border: #F0C98A;
    --aiw-warn-fg: #8A6410;
    --aiw-warn-icon: #B3541E;

    --aiw-xattr: #C0392B;

    --aiw-danger: #C0392B;
    --aiw-danger-bg: #FDF2F0;
    --aiw-danger-border: #E9BDB7;

    --aiw-focus-ring: rgba(88, 153, 153, .55);

    --aiw-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --aiw-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --aiw-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    background: var(--aiw-white);
    border: none;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(42, 49, 56, .35);
    overflow: hidden;
    font-family: var(--aiw-font-body);
}

body.xadmintool .x-window.aiw-window > .x-window-body,
body.xadmintool .x-window.aiw-window .x-autocontainer-outerCt,
body.xadmintool .x-window.aiw-window .x-autocontainer-innerCt {
    background: transparent;
    border: none;
    padding: 0;
}

/* the modal is laid out in border boxes throughout - the flex columns below hand out
   the height that is left, and a padding that grows on top of it breaks every one of
   them (Ext does not set box-sizing on the plain markup we render into the container) */
body.xadmintool .aiw-window .aiwRootEl,
body.xadmintool .aiw-window .aiwRootEl *,
body.xadmintool .aiw-window .aiwMenu,
body.xadmintool .aiw-window .aiwMenu * {
    box-sizing: border-box;
}

/* the modal shell: header / body / footer, the body takes what is left */
body.xadmintool .aiw-window .aiwRootEl {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* the overlay of the handoff: rgba(42,49,56,.55) + blur */
body.aiw-modal-open .x-mask {
    background: rgba(42, 49, 56, .55);
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ----------------------------------------------------------------------------
   Header: icon tile, title, table count, close button and the stepper
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwHeader {
    flex: none;
    padding: 22px 28px 16px;
    border-bottom: 1px solid var(--aiw-slate-200);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.xadmintool .aiw-window .aiwHeaderRow {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.xadmintool .aiw-window .aiwHeaderTile {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--aiw-teal-500);
    color: var(--aiw-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.xadmintool .aiw-window .aiwHeaderTile .aiwIcon {
    width: 17px;
    height: 17px;
}

body.xadmintool .aiw-window .aiwHeaderTitle {
    font-family: var(--aiw-font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwHeaderSub {
    font-size: 13px;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwSpacer {
    flex: 1;
}

body.xadmintool .aiw-window .aiwClose {
    width: 30px;
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--aiw-slate-500);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
body.xadmintool .aiw-window .aiwClose:hover {
    background: var(--aiw-slate-100);
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwStepper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.xadmintool .aiw-window .aiwChip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

body.xadmintool .aiw-window .aiwChipActive {
    background: var(--aiw-teal-50);
    border-color: var(--aiw-teal-300);
}

body.xadmintool .aiw-window .aiwChipLocked {
    opacity: .55;
    cursor: default;
}

body.xadmintool .aiw-window .aiwChipDot {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--aiw-font-head);
    font-size: 12px;
    font-weight: 700;
    background: var(--aiw-slate-100);
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwChipActive .aiwChipDot {
    background: var(--aiw-teal-500);
    color: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwChipDone .aiwChipDot {
    background: var(--aiw-teal-100);
    color: var(--aiw-teal-700);
}

body.xadmintool .aiw-window .aiwChipLabel {
    font-size: 13px;
    font-weight: 500;
    color: var(--aiw-slate-600);
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwChipActive .aiwChipLabel {
    font-weight: 700;
    color: var(--aiw-slate-900);
}

/* ----------------------------------------------------------------------------
   Body and the shell of one step
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwBody {
    flex: 1;
    min-height: 0;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
}

body.xadmintool .aiw-window .aiwStep {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.xadmintool .aiw-window .aiwTitleBlock {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.xadmintool .aiw-window .aiwTitle {
    font-family: var(--aiw-font-head);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwSub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--aiw-slate-700);
}

/* The one sentence of step 2 that is not an explanation but a promise. It used to
   sit in bold at the end of the paragraph above, where it was read last or not at
   all - on a line of its own with a mark in front of it, it is the first thing the
   eye finds in the step. */
body.xadmintool .aiw-window .aiwPrivacy {
    display: flex;
    align-items: center;
    gap: 10px;
    /* inside the title block now - its own gap does the spacing */
    margin: 2px 0;
    padding: 8px 12px;
    border: 1px solid var(--aiw-teal-200);
    border-left: 3px solid var(--aiw-teal-600);
    border-radius: 10px;
    background: var(--aiw-teal-50);
}

body.xadmintool .aiw-window .aiwPrivacyMark {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--aiw-teal-600);
    color: var(--aiw-white);
}
body.xadmintool .aiw-window .aiwPrivacyMark .aiwIcon {
    width: 16px;
    height: 16px;
}

body.xadmintool .aiw-window .aiwPrivacyText {
    font-family: var(--aiw-font-head);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--aiw-teal-700);
}

body.xadmintool .aiw-window .aiwAccent {
    color: var(--aiw-teal-500);
}

body.xadmintool .aiw-window .aiwTitleRow {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.xadmintool .aiw-window .aiwCheckCircle {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 999px;
    background: var(--aiw-teal-500);
    color: var(--aiw-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.xadmintool .aiw-window .aiwCheckCircle .aiwIcon {
    width: 14px;
    height: 14px;
}

body.xadmintool .aiw-window .aiwIcon {
    width: 15px;
    height: 15px;
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

/* ----------------------------------------------------------------------------
   The card every step lists into - the only element that scrolls
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwCard {
    flex: 1;
    min-height: 0;
    min-width: 0;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.xadmintool .aiw-window .aiwCardHead {
    flex: none;
    padding: 10px 14px;
    border-bottom: 1px solid var(--aiw-slate-200);
    background: var(--aiw-slate-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.xadmintool .aiw-window .aiwCardHeadStacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body.xadmintool .aiw-window .aiwCardLabel {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aiw-slate-600);
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwCardMeta {
    font-size: 12px;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwCardTools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.xadmintool .aiw-window .aiwSelectedCount {
    font-size: 12px;
    color: var(--aiw-slate-600);
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwCardList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* the small pills of the card headers ("Select all", the sample presets) */
body.xadmintool .aiw-window .aiwPill {
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-slate-700);
    background: var(--aiw-white);
    border: 1px solid var(--aiw-slate-300);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 140ms ease, border-color 140ms ease;
}
body.xadmintool .aiw-window .aiwPill:hover {
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwPillTeal {
    color: var(--aiw-teal-600);
    background: var(--aiw-teal-50);
    border-color: var(--aiw-teal-200);
}
body.xadmintool .aiw-window .aiwPillTeal:hover {
    background: var(--aiw-teal-100);
}

body.xadmintool .aiw-window .aiwPillOutline {
    color: var(--aiw-teal-600);
    background: var(--aiw-white);
    border-color: var(--aiw-teal-300);
    padding: 4px 12px;
}

/* ----------------------------------------------------------------------------
   Step 1 - the table list
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwTableRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--aiw-slate-100);
    cursor: pointer;
}
body.xadmintool .aiw-window .aiwTableRow:last-child {
    border-bottom: none;
}
body.xadmintool .aiw-window .aiwTableRow:hover {
    background: var(--aiw-slate-50);
}

body.xadmintool .aiw-window .aiwTableRow input {
    width: 15px;
    height: 15px;
    flex: none;
    margin: 0;
    accent-color: var(--aiw-teal-500);
    cursor: pointer;
}

body.xadmintool .aiw-window .aiwTableName {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--aiw-slate-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* a table the analysis found empty, see #dropEmptyTables - quiet, it is a fact about
   the table and not a warning about the selection */
body.xadmintool .aiw-window .aiwTableNote {
    flex: none;
    font-size: 11.5px;
    color: var(--aiw-slate-500);
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Step 2 - one slider per table
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwSampleRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--aiw-slate-100);
}
body.xadmintool .aiw-window .aiwSampleRow:last-child {
    border-bottom: none;
}

body.xadmintool .aiw-window .aiwSampleName {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--aiw-slate-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwSlider {
    width: 220px;
    flex: none;
    margin: 0;
    accent-color: var(--aiw-teal-500);
    cursor: pointer;
}

body.xadmintool .aiw-window .aiwSampleValue {
    width: 56px;
    flex: none;
    text-align: right;
    font-family: var(--aiw-font-mono);
    font-size: 12.5px;
    color: var(--aiw-slate-700);
}

/* ----------------------------------------------------------------------------
   The progress state between step 2 and step 3, and the error state
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwProgressCard {
    flex: none;
    border: 1px solid var(--aiw-teal-200);
    background: linear-gradient(180deg, var(--aiw-teal-50), var(--aiw-white));
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.xadmintool .aiw-window .aiwProgressHead {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.xadmintool .aiw-window .aiwProgressText {
    font-size: 13px;
    color: var(--aiw-slate-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwProgressCount {
    font-size: 12px;
    color: var(--aiw-slate-600);
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwProgressTrack {
    height: 6px;
    border-radius: 999px;
    background: var(--aiw-slate-200);
    overflow: hidden;
}

body.xadmintool .aiw-window .aiwProgressBar {
    height: 100%;
    border-radius: 999px;
    background: var(--aiw-teal-500);
    transition: width 200ms ease;
}

body.xadmintool .aiw-window .aiwSpinner {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 999px;
    border: 2px solid var(--aiw-teal-200);
    border-top-color: var(--aiw-teal-500);
    animation: aiwSpin 800ms linear infinite;
}

@keyframes aiwSpin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------------
   Step 3 - the derived keys per table
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwKeyBlock {
    padding: 13px 14px;
    border-bottom: 1px solid var(--aiw-slate-100);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.xadmintool .aiw-window .aiwKeyBlock:last-child {
    border-bottom: none;
}

body.xadmintool .aiw-window .aiwKeyTable {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.xadmintool .aiw-window .aiwKeyTableIcon {
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwKeyTableName {
    font-size: 13px;
    font-weight: 700;
    color: var(--aiw-slate-900);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the name and the record count are the two elements of the row that may be cut:
   everything to the right of them is a control or the role badge */
body.xadmintool .aiw-window .aiwKeyTableMeta {
    font-size: 12px;
    color: var(--aiw-slate-500);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* what the table becomes with the keys as they stand - the answer of step 4, shown
   while the keys that produce it are still being corrected */
body.xadmintool .aiw-window .aiwRole {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--aiw-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: default;
}

body.xadmintool .aiw-window .aiwRoleIcon {
    width: 11px;
    height: 11px;
}

/* the root is the one table there can only be one of - it is the only filled badge */
body.xadmintool .aiw-window .aiwRole-root {
    background: var(--aiw-teal-500);
    border-color: var(--aiw-teal-500);
    color: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwRole-object {
    background: var(--aiw-teal-50);
    border-color: var(--aiw-teal-200);
    color: var(--aiw-teal-700);
}

/* a root the user could pick and did not - drawn as an unfilled root */
body.xadmintool .aiw-window .aiwRole-candidate {
    background: var(--aiw-white);
    border-color: var(--aiw-teal-300);
    border-style: dashed;
    color: var(--aiw-teal-600);
}

/* the same colour the xAttributes of the tree of step 4 carry */
body.xadmintool .aiw-window .aiwRole-xattr {
    background: var(--aiw-danger-bg);
    border-color: var(--aiw-danger-border);
    color: var(--aiw-xattr);
}

body.xadmintool .aiw-window .aiwRole-none {
    background: var(--aiw-warn-bg);
    border-color: var(--aiw-warn-border);
    color: var(--aiw-warn-fg);
}

/* the loudest element of the step - the handoff wants the user to correct keys */
body.xadmintool .aiw-window .aiwEditKeys {
    flex: none;
    font-family: var(--aiw-font-head);
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-white);
    background: var(--aiw-teal-500);
    border: 1px solid var(--aiw-teal-500);
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(88, 153, 153, .28);
    transition: background-color 140ms ease;
}
body.xadmintool .aiw-window .aiwEditKeys:hover {
    background: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwEditKeysOn,
body.xadmintool .aiw-window .aiwEditKeysOn:hover {
    color: var(--aiw-slate-500);
    background: var(--aiw-slate-100);
    border-color: var(--aiw-slate-300);
    box-shadow: none;
    cursor: default;
}

/* "Do not import this table" - quiet next to the loud "Edit keys", it takes something
   away instead of offering something */
/* where the keys came out of the schema there is nothing to edit - this badge
   stands where the "Edit keys" button stands for every other table */
body.xadmintool .aiw-window .aiwFromDb {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--aiw-teal-200);
    border-radius: 8px;
    background: var(--aiw-teal-50);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--aiw-teal-700);
    white-space: nowrap;
    cursor: default;
}

body.xadmintool .aiw-window .aiwFromDbIcon {
    width: 13px;
    height: 13px;
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwRemoveTable {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    border: 1px solid var(--aiw-slate-300);
    background: var(--aiw-white);
    color: var(--aiw-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
body.xadmintool .aiw-window .aiwRemoveTable:hover {
    border-color: var(--aiw-danger-border);
    background: var(--aiw-danger-bg);
    color: var(--aiw-danger);
}
body.xadmintool .aiw-window .aiwRemoveTable .aiwIcon {
    width: 14px;
    height: 14px;
}

/* "Show the records we read" - the same quiet icon button as the one next to it, and
   it stays marked while the records of its table stand open below the row */
body.xadmintool .aiw-window .aiwShowData {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    border: 1px solid var(--aiw-slate-300);
    background: var(--aiw-white);
    color: var(--aiw-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
body.xadmintool .aiw-window .aiwShowData:hover {
    border-color: var(--aiw-teal-300);
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-700);
}
body.xadmintool .aiw-window .aiwShowData.aiwShowDataOn {
    border-color: var(--aiw-teal-400);
    background: var(--aiw-teal-100);
    color: var(--aiw-teal-700);
}
body.xadmintool .aiw-window .aiwShowData .aiwIcon {
    width: 14px;
    height: 14px;
}

/* the records of one table, see #renderSamplePreview. Indented like the key rows, so
   it reads as part of the table above it and not as the next table */
body.xadmintool .aiw-window .aiwPreview {
    margin-left: 24px;
    min-width: 0;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 10px;
    background: var(--aiw-slate-50);
    overflow: hidden;
}

body.xadmintool .aiw-window .aiwPreview.aiwPreviewEmpty {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwPreviewHead {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwPreviewLabel {
    font-family: var(--aiw-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwPreviewMeta {
    font-size: 11.5px;
    color: var(--aiw-slate-500);
    white-space: nowrap;
}

/* the one element of the step that may scroll sideways: a table of 30 columns is
   nothing to fold, and the rest of the modal must not grow with it */
body.xadmintool .aiw-window .aiwPreviewWrap {
    max-height: 230px;
    overflow: auto;
    background: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwPreviewGrid {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwPreviewGrid th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 10px;
    text-align: left;
    font-family: var(--aiw-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--aiw-slate-700);
    background: var(--aiw-slate-100);
    border-bottom: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwPreviewGrid td {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
    font-family: var(--aiw-font-mono);
    color: var(--aiw-slate-800);
    border-bottom: 1px solid var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwPreviewGrid tr:last-child td {
    border-bottom: none;
}

/* a field that holds nothing is not the same as an empty one, see #renderSamplePreview */
body.xadmintool .aiw-window .aiwPreviewGrid td.aiwPreviewNull,
body.xadmintool .aiw-window .aiwInsTable td.aiwPreviewNull {
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--aiw-slate-400);
}

body.xadmintool .aiw-window .aiwKeyRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 24px;
}

body.xadmintool .aiw-window .aiwKeyEmpty {
    font-size: 12.5px;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwKeyBlock.aiwKeyEmpty {
    padding: 18px 14px;
}

body.xadmintool .aiw-window .aiwKind {
    flex: none;
    min-width: 24px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: 5px;
    padding: 2px 6px;
}

body.xadmintool .aiw-window .aiwKindPk {
    color: var(--aiw-plum-700);
    background: var(--aiw-plum-100);
}

body.xadmintool .aiw-window .aiwKindFk {
    color: var(--aiw-slate-700);
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwKeyColumn {
    font-family: var(--aiw-font-mono);
    font-size: 12.5px;
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwKeyTarget {
    font-size: 12.5px;
    color: var(--aiw-slate-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the confidence is intentionally quiet - plain text, never a chip */
body.xadmintool .aiw-window .aiwConfidence {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* the two switches in the header of a table (#renderForceSwitch): quiet outlines
   until the user turns one on, then the accent - they overrule the derivation, so
   they have to be visible at a glance across the whole list */
body.xadmintool .aiw-window .aiwForce {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--aiw-slate-600);
    background: var(--aiw-white);
    border: 1px solid var(--aiw-slate-300);
    border-radius: 999px;
    padding: 2px 9px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
body.xadmintool .aiw-window .aiwForce:hover {
    border-color: var(--aiw-slate-400);
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwForceOn,
body.xadmintool .aiw-window .aiwForceOn:hover {
    color: var(--aiw-white);
    background: var(--aiw-slate-700);
    border-color: var(--aiw-slate-700);
}

/* the rejected candidates below a table without a key (#renderNearMisses): the same
   row, but visibly not a key - no chip colour, no full contrast */
body.xadmintool .aiw-window .aiwNearHead {
    padding: 2px 8px 4px 34px;
    font-size: 11.5px;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwKeyNear .aiwKeyColumn,
body.xadmintool .aiw-window .aiwKeyNear .aiwKeyTarget {
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwKindNear {
    color: var(--aiw-slate-500);
    background: transparent;
    border: 1px dashed var(--aiw-slate-300);
}

body.xadmintool .aiw-window .aiwConfNear {
    color: var(--aiw-slate-500);
    font-weight: 400;
}

body.xadmintool .aiw-window .aiwConfHigh {
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwConfCheck {
    color: var(--aiw-warn-fg);
}

/*
 * The slot the estimate of step 2 is written into, see
 * Admin.view.main.AiImportWizardController#renderSampleEstimate. It only exists so a
 * slider that is being dragged can rewrite the note without the step being rendered
 * again - "display: contents" keeps it out of the layout, so the note inside it is the
 * flex child of .aiwStep it would have been, and an empty slot costs no gap.
 */
body.xadmintool .aiw-window .aiwEstimateSlot {
    display: contents;
}

/* the note below the list - a quiet line, or the warning box of a broken rule */
body.xadmintool .aiw-window .aiwNote {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--aiw-slate-700);
}

body.xadmintool .aiw-window .aiwNoteIcon {
    margin-top: 2px;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwNoteLines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

/* the button at the top right of the warnings of step 3 that folds them to one
   line (#renderKeyNote) - the same chevron as the timestamp questions */
body.xadmintool .aiw-window .aiwNoteFold {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--aiw-warn-fg);
    cursor: pointer;
    transition: background-color 140ms ease;
}
body.xadmintool .aiw-window .aiwNoteFold:hover {
    background: rgba(240, 201, 138, .35);
}

body.xadmintool .aiw-window .aiwNoteFoldIcon {
    width: 14px;
    height: 14px;
    transform: rotate(180deg);
    transition: transform 140ms ease;
}

body.xadmintool .aiw-window .aiwNoteFolded .aiwNoteFoldIcon {
    transform: none;
}

body.xadmintool .aiw-window .aiwNoteFoldLine {
    cursor: pointer;
    user-select: none;
}

/* "Auto solve" below the warnings of step 3, at the bottom right of the box */
body.xadmintool .aiw-window .aiwNoteSolve {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* the quiet good news: the database delivered everything, nothing to check */
body.xadmintool .aiw-window .aiwNoteOk {
    border-color: var(--aiw-teal-200);
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-700);
}
body.xadmintool .aiw-window .aiwNoteOk .aiwNoteIcon {
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwNoteWarn {
    padding: 10px 12px;
    border: 1px solid var(--aiw-warn-border);
    background: var(--aiw-warn-bg);
    border-radius: 10px;
    color: var(--aiw-warn-fg);
}
body.xadmintool .aiw-window .aiwNoteWarn .aiwNoteIcon {
    color: var(--aiw-warn-icon);
}

/* the one box that is red and not amber: the import has no primary key at all, so
   nothing can be imported. It carries the offer to generate one, see
   Admin.view.main.AiImportWizardController#renderKeyNote */
body.xadmintool .aiw-window .aiwNoteDanger {
    padding: 10px 12px;
    border: 1px solid var(--aiw-danger-border);
    background: var(--aiw-danger-bg);
    border-radius: 10px;
    color: var(--aiw-danger);
}
body.xadmintool .aiw-window .aiwNoteDanger .aiwNoteIcon {
    color: var(--aiw-danger);
}

body.xadmintool .aiw-window .aiwNoteStrong {
    font-weight: 600;
}

/* the button and the line that says what it does - they wrap under each other as soon
   as the modal gets narrow */
body.xadmintool .aiw-window .aiwNoteAction {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 6px;
}

body.xadmintool .aiw-window .aiwNoteActionHint {
    font-size: 12px;
    color: var(--aiw-slate-600);
    min-width: 0;
}

body.xadmintool .aiw-window .aiwPillDanger {
    color: var(--aiw-white);
    background: var(--aiw-danger);
    border-color: var(--aiw-danger);
    padding: 4px 12px;
}
body.xadmintool .aiw-window .aiwPillDanger:hover {
    background: #A93226;
    border-color: #A93226;
}

/* the pills of the wizard carry "aiwDisabled" while the action behind them is running
   (the footer buttons have their own rule further down) */
body.xadmintool .aiw-window .aiwPill.aiwDisabled,
body.xadmintool .aiw-window .aiwPill.aiwDisabled:hover {
    opacity: 0.6;
    cursor: default;
}

body.xadmintool .aiw-window .aiwCheck {
    color: var(--aiw-warn-fg);
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   Step 3 - the same keys as a graph (Admin.view.main.AiImportWizardController
   #renderKeyGraph): tables as nodes, foreign keys as arrows. The drawing keeps
   its own size and scrolls inside the card, the card keeps the height of the
   step like the list does.
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwGraphScroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 6px;
    background:
        radial-gradient(circle, var(--aiw-slate-200) 1px, transparent 1.2px) 0 0 / 18px 18px;
}

/* every step but the review (AiImportWizardController#isNarrowStep): the content
   and the footer keep a column of at most 1000px in the middle of the modal - the
   padding takes whatever is left on both sides */
body.xadmintool .aiw-window .aiwBody.aiwNarrow,
body.xadmintool .aiw-window .aiwFooter.aiwNarrow {
    padding-left: max(28px, calc((100% - 1000px) / 2));
    padding-right: max(28px, calc((100% - 1000px) / 2));
}

/* the full view of step 3 (#state.graphFull, AiImportWizardController#isFullReview):
   the card takes the whole room below the stepper - no title above it, no footer
   below it, the inspector carries the button that goes on. As large as every other
   step, it no longer leaves the modal. */
body.xadmintool .aiw-window .aiwBody.aiwBodyFull {
    padding: 0;
}

body.xadmintool .aiw-window .aiwBodyFull .aiwStep {
    gap: 0;
}

/* the line next to "Relationships" that stands in for the title of the step */
body.xadmintool .aiw-window .aiwFullIntro {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "saved automatically" in that line, see AiImportWizardController#renderFullIntro */
body.xadmintool .aiw-window .aiwFullIntro .aiwFullIntroSaved {
    font-weight: 700;
    color: var(--aiw-teal-700);
}

/* the dark theme does not redefine the teal - the dark one would sink into its ground */
body.oe-theme-dark .aiw-window .aiwImpCheck.aiwImpCheckWarn {
    background: var(--aiw-warn-bg);
    color: var(--aiw-warn-fg);
}

body.oe-theme-dark .aiw-window .aiwImpCheckWarn .aiwIcon {
    color: var(--aiw-warn-icon);
}

body.oe-theme-dark .aiw-window .aiwImpCard {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

body.oe-theme-dark .x-window.aiw-window .aiwFullIntro .aiwFullIntroSaved {
    color: var(--aiw-teal-300);
}

body.xadmintool .aiw-window .aiwCard.aiwCardFull {
    border: none;
    border-radius: 0;
    background: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwGraph {
    display: block;
    margin: 0 auto;
    overflow: visible;
}

/* ---- the nodes ---- */
body.xadmintool .aiw-window .aiwGraph .aiwGraphBox {
    fill: var(--aiw-white);
    stroke: var(--aiw-slate-300);
    stroke-width: 1;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphNode:hover .aiwGraphBox {
    stroke: var(--aiw-teal-500);
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeNoPk .aiwGraphBox {
    stroke: var(--aiw-slate-300);
    stroke-dasharray: 4 3;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphName {
    font-family: var(--aiw-font-head);
    font-size: 13px;
    font-weight: 600;
    fill: var(--aiw-teal-700);
}

/* the table the object reads, under its name */
body.xadmintool .aiw-window .aiwGraph .aiwGraphTable {
    font-family: var(--aiw-font-mono);
    font-size: 10.5px;
    fill: var(--aiw-slate-500);
}

/* the line between the head of a box and what hangs inside the object */
body.xadmintool .aiw-window .aiwGraph .aiwGraphRule {
    stroke: var(--aiw-slate-200);
    stroke-width: 1;
}

/* the root of the tree is the one box that carries the whole drawing */
body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeRoot .aiwGraphBox {
    stroke: var(--aiw-teal-500);
    stroke-width: 1.8;
    fill: var(--aiw-teal-50);
}

/* a code list, drawn inside the object it describes instead of as a box of its
   own - the same circle the tree of step 4 puts in front of it */
body.xadmintool .aiw-window .aiwGraph .aiwGraphAttr {
    font-family: var(--aiw-font-mono);
    font-size: 11px;
    fill: var(--aiw-xattr);
}

/* the frame around such a line, so that it reads as an attribute at first sight */
body.xadmintool .aiw-window .aiwGraph .aiwGraphAttrFrame {
    fill: var(--aiw-xattr);
    fill-opacity: 0.06;
    stroke: var(--aiw-xattr);
    stroke-width: 1;
    pointer-events: none;
}

/* hovered or selected, the teal of the row takes its place */
body.xadmintool .aiw-window .aiwGraph .aiwGraphRow:hover .aiwGraphAttrFrame,
body.xadmintool .aiw-window .aiwGraph .aiwGraphRowSel .aiwGraphAttrFrame {
    display: none;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphMore {
    font-family: var(--aiw-font-body);
    font-size: 10.5px;
    fill: var(--aiw-slate-500);
}

/* ---- the tables the tree does not hold ---- */
body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeOut .aiwGraphBox {
    fill: var(--aiw-slate-50);
    stroke: var(--aiw-slate-300);
    stroke-dasharray: 4 3;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeOut .aiwGraphName {
    fill: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeOut .aiwGraphTable {
    font-family: var(--aiw-font-body);
    font-style: italic;
    fill: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphSep {
    stroke: var(--aiw-slate-300);
    stroke-width: 1;
    stroke-dasharray: 6 5;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphNote {
    font-family: var(--aiw-font-body);
    font-size: 12px;
    font-weight: 700;
    fill: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphKey {
    font-family: var(--aiw-font-mono);
    font-size: 11px;
    fill: var(--aiw-plum-700);
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphKeyNone {
    font-family: var(--aiw-font-body);
    font-style: italic;
    fill: var(--aiw-slate-500);
}

/* ---- the edges ---- */
body.xadmintool .aiw-window .aiwGraph .aiwGraphLine {
    fill: none;
    stroke: var(--aiw-teal-500);
    stroke-width: 1.6;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphHead {
    fill: var(--aiw-teal-500);
    stroke: none;
}

/* a key the user should look at is drawn the way step 3 flags it: dashed and in
   the warning colour of the "Check" badge */
body.xadmintool .aiw-window .aiwGraph .aiwGraphEdgeCheck .aiwGraphLine {
    stroke: var(--aiw-warn-icon);
    stroke-dasharray: 5 4;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphHeadCheck {
    fill: var(--aiw-warn-icon);
    stroke: none;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphEdge:hover .aiwGraphLine {
    stroke-width: 2.4;
}

/* the column the foreign key sits on, written onto the line - the halo keeps it
   readable where the line runs underneath it */
body.xadmintool .aiw-window .aiwGraph .aiwGraphLabel {
    font-family: var(--aiw-font-mono);
    font-size: 10.5px;
    fill: var(--aiw-slate-700);
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: var(--aiw-white);
    stroke-width: 4;
    stroke-linejoin: round;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphEdgeCheck .aiwGraphLabel {
    fill: var(--aiw-warn-fg);
}

/* ---- a key one can click (AiImportWizardController#graphKeyRow): the row of a
   box and the column on an arrow open the editor of their table below the
   drawing. The hit area is a rectangle behind the text - a click has to land on
   the row and not on the glyphs of its letters. ---- */
body.xadmintool .aiw-window .aiwGraph .aiwGraphRow {
    cursor: pointer;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphHit {
    fill: transparent;
    stroke: none;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphRow:hover .aiwGraphHit {
    fill: var(--aiw-teal-50);
    stroke: var(--aiw-teal-200);
    stroke-width: 1;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphRow:hover .aiwGraphKey,
body.xadmintool .aiw-window .aiwGraph .aiwGraphRow:hover .aiwGraphAttr,
body.xadmintool .aiw-window .aiwGraph .aiwGraphRow:hover .aiwGraphKeyNone,
body.xadmintool .aiw-window .aiwGraph .aiwGraphRow:hover .aiwGraphLabel {
    fill: var(--aiw-teal-700);
}

/* the box whose keys stand in the editor below the drawing */
body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeEdit .aiwGraphBox {
    stroke: var(--aiw-teal-500);
    stroke-width: 2;
    stroke-dasharray: none;
}

/* ---- full screen only (AiImportWizardController#renderGraphFull): the selected
   object or attribute, see #graphAttrRow / #renderGraphInspector ---- */
body.xadmintool .aiw-window .aiwCardFull .aiwGraph .aiwGraphNode {
    cursor: pointer;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeSel .aiwGraphBox {
    stroke: var(--aiw-teal-500);
    stroke-width: 2;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 4px var(--aiw-focus-ring));
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphRowSel .aiwGraphHit,
body.xadmintool .aiw-window .aiwGraph .aiwGraphRowSel:hover .aiwGraphHit {
    fill: var(--aiw-teal-100);
    stroke: var(--aiw-teal-500);
    stroke-width: 1.5;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphRowSel .aiwGraphAttr {
    fill: var(--aiw-teal-700);
}

/* ---- full screen: the drawing (and the key editor below it) on the left, the
   inspector on the right ---- */
body.xadmintool .aiw-window .aiwGraphFullBody {
    flex: 1;
    min-height: 0;
    display: flex;
}

body.xadmintool .aiw-window .aiwGraphFullMain {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* the drawing and the inspector each in a box of their own, so a mask can lie
   over exactly one of them (#renderGraphFull) */
body.xadmintool .aiw-window .aiwGraphFullCanvas {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.xadmintool .aiw-window .aiwGraphFullSide {
    position: relative;
    flex: none;
    display: flex;
    min-height: 0;
}

/* ---- step 3: the review (AiImportWizardController#renderReviewProgress) ---- */
body.xadmintool .aiw-window .aiwReview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwReviewBar {
    width: 90px;
    height: 6px;
    border-radius: 999px;
    background: var(--aiw-slate-200);
    overflow: hidden;
}

body.xadmintool .aiw-window .aiwReviewFill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--aiw-warn-icon);
    transition: width .2s ease;
}

body.xadmintool .aiw-window .aiwReviewDone .aiwReviewFill {
    background: var(--aiw-teal-500);
}

body.xadmintool .aiw-window .aiwReviewText {
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-slate-700);
}

/* ---- the relationships of the selected table in the inspector ---- */
body.xadmintool .aiw-window .aiwRel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 10px;
}

body.xadmintool .aiw-window .aiwRelMarked {
    border-color: var(--aiw-teal-500);
    box-shadow: 0 0 0 3px var(--aiw-focus-ring);
}

body.xadmintool .aiw-window .aiwRelDot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--aiw-slate-300);
}

body.xadmintool .aiw-window .aiwRel-check .aiwRelDot { background: var(--aiw-warn-icon); }
body.xadmintool .aiw-window .aiwRel-confirmed .aiwRelDot { background: var(--aiw-teal-500); }

body.xadmintool .aiw-window .aiwRelText {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.xadmintool .aiw-window .aiwRelMain {
    font-family: var(--aiw-font-mono);
    font-size: 12px;
    color: var(--aiw-slate-800);
    overflow-wrap: anywhere;
}

body.xadmintool .aiw-window .aiwRelSub {
    font-size: 11.5px;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwRel-check .aiwRelSub { color: var(--aiw-warn-fg); }

body.xadmintool .aiw-window .aiwRelConfirm {
    flex: none;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--aiw-teal-300);
    border-radius: 999px;
    background: var(--aiw-white);
    color: var(--aiw-teal-600);
    cursor: pointer;
    transition: background-color .15s ease;
}
body.xadmintool .aiw-window .aiwRelConfirm:hover {
    background: var(--aiw-teal-500);
    border-color: var(--aiw-teal-500);
    color: var(--aiw-white);
}

/* ... and the red X that deletes the key */
body.xadmintool .aiw-window .aiwRelRemove {
    flex: none;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F2B8C2;
    border-radius: 999px;
    background: var(--aiw-white);
    color: #9B1F35;
    cursor: pointer;
    transition: background-color .15s ease;
}
body.xadmintool .aiw-window .aiwRelRemove:hover {
    background: #9B1F35;
    border-color: #9B1F35;
    color: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwRelConfirmIcon {
    width: 15px;
    height: 15px;
}

/* ---- the path under the title of the inspector ---- */
body.xadmintool .aiw-window .aiwInsPath {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwInsPathStep {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwInsPathSelf {
    background: var(--aiw-teal-100);
    color: var(--aiw-teal-700);
    font-weight: 600;
}

body.xadmintool .aiw-window .aiwInsPathArrow {
    color: var(--aiw-slate-400);
}

body.xadmintool .aiw-window .aiwInsPathOut {
    font-style: italic;
}

/* ---- "Move to ..." ---- */
/* the head of every section of the inspector folds it (#renderInsSectionHead) */
body.xadmintool .aiw-window .aiwInsFoldHead {
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
/* the icon in front of the title of a section of the inspector */
body.xadmintool .aiw-window .aiwInsSectionIcon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--aiw-teal-600);
}
body.xadmintool .aiw-window .aiwInsSampleHead .aiwInsSectionIcon + .aiwInsEyebrow {
    margin-left: -2px;
}

body.xadmintool .aiw-window .aiwInsFoldHead:hover .aiwTsFold {
    background: var(--aiw-teal-100);
}

body.xadmintool .aiw-window .aiwMoveFoldOpen .aiwTsFoldIcon {
    transform: rotate(180deg);
}

body.xadmintool .aiw-window .aiwMoveList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.xadmintool .aiw-window .aiwMoveGroup {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.xadmintool .aiw-window .aiwMoveGroupHead {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwMoveRow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 10px;
}

body.xadmintool .aiw-window .aiwMoveRowAct {
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
body.xadmintool .aiw-window .aiwMoveRowAct:hover {
    background: var(--aiw-teal-50);
    border-color: var(--aiw-teal-300);
}

body.xadmintool .aiw-window .aiwMoveRowCurrent {
    background: var(--aiw-teal-50);
    border-color: var(--aiw-teal-200);
}

body.xadmintool .aiw-window .aiwMoveRowNo {
    border-style: dashed;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwMoveIcon {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwMoveText {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwMoveRowNo .aiwMoveText {
    color: var(--aiw-slate-500);
    font-weight: 400;
}

body.xadmintool .aiw-window .aiwMoveSub {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwMoveError {
    padding: 8px 10px;
    border: 1px solid var(--aiw-danger-border);
    border-radius: 10px;
    background: var(--aiw-danger-bg);
    color: var(--aiw-danger);
    font-size: 12px;
}

/* everything between the head and the foot of the inspector scrolls as one */
body.xadmintool .aiw-window .aiwInsBody {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ---- the path in the graph: of the selected box, and of the box under the mouse ---- */
body.xadmintool .aiw-window .aiwGraph .aiwGraphNodePath .aiwGraphBox,
body.xadmintool .aiw-window .aiwGraph .aiwGraphNode.aiwGraphHover .aiwGraphBox {
    stroke: var(--aiw-teal-500);
    stroke-width: 2;
    stroke-dasharray: none;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphEdgePath .aiwGraphLine,
body.xadmintool .aiw-window .aiwGraph .aiwGraphEdge.aiwGraphHover .aiwGraphLine {
    stroke: var(--aiw-teal-700);
    stroke-width: 3;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphEdgePath .aiwGraphLabel,
body.xadmintool .aiw-window .aiwGraph .aiwGraphEdge.aiwGraphHover .aiwGraphLabel {
    fill: var(--aiw-teal-700);
    font-weight: 700;
}

body.xadmintool .aiw-window .aiwGraph .aiwGraphEdgeConfirmed .aiwGraphLabel {
    fill: var(--aiw-teal-700);
}

/* the preview of a change: a table whose place it changes */
body.xadmintool .aiw-window .aiwGraph .aiwGraphNodeChanged .aiwGraphBox {
    stroke: var(--aiw-warn-icon);
    stroke-width: 2.4;
    stroke-dasharray: none;
    fill: var(--aiw-warn-bg);
}

/* the mask over the drawing while it is a preview: light, the drawing has to stay
   readable - the banner at the top says what is shown and switches it */
body.xadmintool .aiw-window .aiwGraphMask.aiwGraphMaskPreview {
    align-items: flex-start;
    background: rgba(242, 244, 246, .18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* the preview can be scrolled - the mask lets the wheel through to the drawing,
       and the drawing itself takes no clicks while it is a preview (below) */
    pointer-events: none;
}

body.xadmintool .aiw-window .aiwGraphMaskPreview .aiwGraphMaskBanner {
    pointer-events: auto;
}

body.xadmintool .aiw-window .aiwGraphFullDirty .aiwGraph {
    pointer-events: none;
}

body.xadmintool .aiw-window .aiwGraphMaskBanner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
}

body.xadmintool .aiw-window .aiwPreviewSwitch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--aiw-slate-300);
    border-radius: 999px;
    background: var(--aiw-white);
    box-shadow: 0 2px 8px rgba(42, 49, 56, .08);
}

body.xadmintool .aiw-window .aiwPreviewOpt {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-slate-600);
    cursor: pointer;
    user-select: none;
}

body.xadmintool .aiw-window .aiwPreviewOptOn {
    background: var(--aiw-teal-500);
    color: var(--aiw-white);
}

/* the key editor below holds a change: the rest waits for Cancel or Done */
body.xadmintool .aiw-window .aiwGraphMask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(242, 244, 246, .72);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    cursor: not-allowed;
}

body.xadmintool .aiw-window .aiwGraphMaskText {
    max-width: 420px;
    padding: 12px 18px;
    border: 1px solid var(--aiw-warn-border);
    border-radius: 12px;
    background: var(--aiw-warn-bg);
    color: var(--aiw-warn-fg);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 2px 8px rgba(42, 49, 56, .08);
}

/* the editor is what the user has to finish - it is drawn as the one thing that
   is not waiting */
body.xadmintool .aiw-window .aiwGraphFullDirty .aiwGraphEditor {
    box-shadow: 0 4px 16px rgba(42, 49, 56, .12);
    border-color: var(--aiw-slate-300);
    position: relative;
    z-index: 3;
}

body.xadmintool .aiw-window .aiwIns {
    flex: none;
    width: 340px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--aiw-white);
    border-left: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwInsEmpty {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    text-align: center;
}

body.xadmintool .aiw-window .aiwInsEmptyTile {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.xadmintool .aiw-window .aiwInsEmptyIcon {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
}

body.xadmintool .aiw-window .aiwInsEmptyText {
    max-width: 220px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwInsHead {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwInsHeadRow {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.xadmintool .aiw-window .aiwInsBadge {
    font-family: var(--aiw-font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 999px;
}

body.xadmintool .aiw-window .aiwInsBadgeObj {
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-700);
}

body.xadmintool .aiw-window .aiwInsBadgeAttr {
    background: #F3EFF2;
    color: var(--aiw-plum-700);
}

body.xadmintool .aiw-window .aiwInsClose {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aiw-slate-600);
    cursor: pointer;
}
body.xadmintool .aiw-window .aiwInsClose:hover {
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwInsCloseIcon {
    width: 16px;
    height: 16px;
}

body.xadmintool .aiw-window .aiwInsTitle {
    font-family: var(--aiw-font-head);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--aiw-slate-900);
    overflow-wrap: anywhere;
}

body.xadmintool .aiw-window .aiwInsSub {
    font-family: var(--aiw-font-mono);
    font-size: 12px;
    color: var(--aiw-slate-500);
    overflow-wrap: anywhere;
}

body.xadmintool .aiw-window .aiwInsSection {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwInsEyebrow {
    font-family: var(--aiw-font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aiw-teal-600);
}

/* one force switch, the whole row is the button */
body.xadmintool .aiw-window .aiwInsSwitch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 12px;
    background: var(--aiw-white);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}
body.xadmintool .aiw-window .aiwInsSwitch:hover {
    border-color: var(--aiw-teal-200);
}

body.xadmintool .aiw-window .aiwInsSwitchOn,
body.xadmintool .aiw-window .aiwInsSwitchOn:hover {
    border-color: var(--aiw-teal-300);
    background: var(--aiw-teal-50);
}

body.xadmintool .aiw-window .aiwInsSwitchIcon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--aiw-teal-600);
    stroke-width: 1.75;
}

body.xadmintool .aiw-window .aiwInsSwitchText {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.xadmintool .aiw-window .aiwInsSwitchLabel {
    font-family: var(--aiw-font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwInsSwitchDesc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwInsToggle {
    flex: none;
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--aiw-slate-300);
    transition: background-color .15s ease;
}

body.xadmintool .aiw-window .aiwInsKnob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--aiw-white);
    box-shadow: 0 1px 3px rgba(42, 49, 56, .25);
    transition: left .15s ease;
}

body.xadmintool .aiw-window .aiwInsSwitchOn .aiwInsToggle {
    background: var(--aiw-teal-500);
}

body.xadmintool .aiw-window .aiwInsSwitchOn .aiwInsKnob {
    left: 16px;
}

/* the records - the one section that grows and scrolls */
body.xadmintool .aiw-window .aiwInsSample {
    border-bottom: none;
}

body.xadmintool .aiw-window .aiwInsSampleHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.xadmintool .aiw-window .aiwInsSampleMeta {
    font-size: 12px;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwInsSampleEmpty {
    font-size: 12px;
    font-style: italic;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwInsTableWrap {
    flex: none;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 10px;
    overflow-x: auto;
}

body.xadmintool .aiw-window .aiwInsTable {
    border-collapse: collapse;
    font-family: var(--aiw-font-mono);
    font-size: 11.5px;
}

body.xadmintool .aiw-window .aiwInsTable th,
body.xadmintool .aiw-window .aiwInsTable td {
    padding: 7px 10px;
    white-space: nowrap;
    text-align: left;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.xadmintool .aiw-window .aiwInsTable th {
    background: var(--aiw-slate-50);
    color: var(--aiw-slate-700);
    font-weight: 600;
}

body.xadmintool .aiw-window .aiwInsTable td {
    background: var(--aiw-white);
    color: var(--aiw-slate-800);
    border-top: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwInsFoot {
    flex: none;
    padding: 16px 24px;
    border-top: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwInsDelete {
    flex: none;
    margin-top: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid #F2B8C2;
    border-radius: 999px;
    background: var(--aiw-white);
    color: #9B1F35;
    font-family: var(--aiw-font-head);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease;
}
body.xadmintool .aiw-window .aiwInsDelete:hover {
    background: #FCE4E8;
}

/* on to step 4, see #renderGraphInspector - always there, whatever is selected */
body.xadmintool .aiw-window .aiwInsBack {
    box-sizing: border-box;
    width: 100%;
    /* "Continue with 33 unchecked relationships" wraps in a narrow inspector */
    min-height: 40px;
    padding: 8px 16px;
    line-height: 1.3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--aiw-teal-500);
    border-radius: 999px;
    background: var(--aiw-teal-500);
    color: var(--aiw-white);
    font-family: var(--aiw-font-head);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}
body.xadmintool .aiw-window .aiwInsBack:hover {
    background: var(--aiw-teal-600);
    border-color: var(--aiw-teal-600);
}
body.xadmintool .aiw-window .aiwInsBack.aiwDisabled,
body.xadmintool .aiw-window .aiwInsBack.aiwDisabled:hover {
    background: var(--aiw-slate-300);
    border-color: var(--aiw-slate-300);
    cursor: not-allowed;
}

/* what the footer would say - why the button is held back, or what it skips */
body.xadmintool .aiw-window .aiwInsFootHint {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwInsDeleteIcon {
    width: 16px;
    height: 16px;
}

/* ---- full screen: the column to the left of the drawing (#renderGraphFull) -
   the legend, the key editor and the warnings, one below the other, each of them
   folds to its head (#renderGraphPane). The column scrolls, the drawing keeps the
   room it has ---- */
body.xadmintool .aiw-window .aiwGraphFullLeft {
    flex: none;
    width: 420px;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-right: 1px solid var(--aiw-slate-200);
    background: var(--aiw-slate-50);
}

body.xadmintool .aiw-window .aiwPane {
    flex: none;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 12px;
    background: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwPaneHead {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    box-sizing: border-box;
    padding: 6px 8px 6px 12px;
    cursor: pointer;
    user-select: none;
}

body.xadmintool .aiw-window .aiwPaneTitle {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aiw-slate-600);
}

/* what is behind the head: the table in the editor, the number of warnings */
body.xadmintool .aiw-window .aiwPaneMeta {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwPaneMetaText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwPaneMetaIcon {
    flex: none;
    width: 14px;
    height: 14px;
}

body.xadmintool .aiw-window .aiwPaneFold {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--aiw-slate-600);
    transition: background-color 140ms ease;
}
body.xadmintool .aiw-window .aiwPaneHead:hover .aiwPaneFold {
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwPaneFoldIcon {
    width: 14px;
    height: 14px;
    transition: transform 140ms ease;
}

/* closed it points at what it would open, like the timestamp block */
body.xadmintool .aiw-window .aiwPaneFolded .aiwPaneFoldIcon {
    transform: rotate(-90deg);
}

body.xadmintool .aiw-window .aiwPaneBody {
    padding: 0 12px 12px;
}

/* the warnings: the head in the colours of the box below it */
body.xadmintool .aiw-window .aiwGraphNotePane {
    border-color: var(--aiw-warn-border);
}
body.xadmintool .aiw-window .aiwGraphNotePane .aiwPaneMeta {
    color: var(--aiw-warn-fg);
}
body.xadmintool .aiw-window .aiwGraphNotePaneDanger {
    border-color: var(--aiw-danger-border);
}
body.xadmintool .aiw-window .aiwGraphNotePaneDanger .aiwPaneMeta {
    color: var(--aiw-danger);
}

body.xadmintool .aiw-window .aiwGraphEditorHead {
    margin-bottom: 8px;
}

/* the box around the editor is the box of the column already - the editor lies
   flat in it, and its dropdowns share what is left of the narrow column */
body.xadmintool .aiw-window .aiwGraphEditor .aiwEditor {
    margin-left: 0;
    padding: 0;
    border: 0;
    background: none;
}

body.xadmintool .aiw-window .aiwGraphEditor .aiwEdRow,
body.xadmintool .aiw-window .aiwGraphEditor .aiwEdHead {
    gap: 6px;
}

body.xadmintool .aiw-window .aiwGraphEditor .aiwEdKind {
    width: 64px;
}

/* the head has no buttons at its end - it keeps their room, so its names stay
   above the dropdowns that now share the width (.aiwEdChecks and the gap) */
body.xadmintool .aiw-window .aiwGraphEditor .aiwEdHead {
    padding-right: 68px;
}

body.xadmintool .aiw-window .aiwGraphEditor .aiwEdColumn,
body.xadmintool .aiw-window .aiwGraphEditor .aiwEdRef {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* the timestamp questions in full screen (#renderGraphFull): below the drawing, as
   wide as a form and in the middle, like the key editor */
body.xadmintool .aiw-window .aiwGraphFullTs {
    flex: none;
    padding: 10px 12px;
    border-top: 1px solid var(--aiw-slate-200);
    background: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwGraphFullTs .aiwTsBlock {
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto;
}

/* the legend of the drawing (AiImportWizardController#renderGraphLegend), one
   sample per line in its box to the left of the drawing */
body.xadmintool .aiw-window .aiwGraphLegend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.xadmintool .aiw-window .aiwGraphLegendItem {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

body.xadmintool .aiw-window .aiwGraphLegendIcon {
    flex: none;
    width: 40px;
    display: flex;
    justify-content: center;
}

body.xadmintool .aiw-window .aiwGraph.aiwGraphLegendSample {
    display: block;
    margin: 0;
    overflow: visible;
}

body.xadmintool .aiw-window .aiwGraphLegendText {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

body.xadmintool .aiw-window .aiwGraphLegendLabel {
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-slate-800);
}

/* what the sample means, in one or two short lines under its name */
body.xadmintool .aiw-window .aiwGraphLegendHint {
    font-size: 11px;
    color: var(--aiw-slate-600);
}

/* ----------------------------------------------------------------------------
   Step 3 - the inline key editor
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwEditor {
    margin-left: 24px;
    border: 1px solid var(--aiw-teal-200);
    background: var(--aiw-teal-50);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.xadmintool .aiw-window .aiwEdHead {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwEdRow {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.xadmintool .aiw-window .aiwEdKind {
    width: 74px;
    flex: none;
}

body.xadmintool .aiw-window .aiwEdColumn {
    width: 170px;
    flex: none;
}

body.xadmintool .aiw-window .aiwEdRef {
    flex: 1;
    min-width: 0;
}

/* the check mark and the red X of a row - the buttons of the relationships in the
   inspector (.aiwRelConfirm / .aiwRelRemove). Always as wide as both, so the rows
   without a check mark keep their X in line with the others. */
body.xadmintool .aiw-window .aiwEdChecks {
    width: 62px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

body.xadmintool .aiw-window .aiwEdActions {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.xadmintool .aiw-window .aiwEdCancel {
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-slate-700);
    cursor: pointer;
    user-select: none;
}
body.xadmintool .aiw-window .aiwEdCancel:hover {
    text-decoration: underline;
}

body.xadmintool .aiw-window .aiwEdDone {
    font-size: 12px;
    font-weight: 600;
    color: var(--aiw-white);
    background: var(--aiw-teal-500);
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease;
}
body.xadmintool .aiw-window .aiwEdDone:hover {
    background: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwEdFooter {
    font-size: 12px;
    line-height: 1.5;
    color: var(--aiw-slate-600);
}

/* the custom dropdowns - a native select cannot be styled to match */
body.xadmintool .aiw-window .aiwSelect {
    height: 32px;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 1px solid var(--aiw-slate-300);
    background: var(--aiw-white);
    color: var(--aiw-slate-800);
    font-family: var(--aiw-font-mono);
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}

body.xadmintool .aiw-window .aiwSelectOpen {
    border-color: var(--aiw-teal-400);
}

body.xadmintool .aiw-window .aiwSelectDisabled {
    background: var(--aiw-slate-100);
    color: var(--aiw-slate-500);
    cursor: default;
}

body.xadmintool .aiw-window .aiwSelectValue {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwSelectCaret {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--aiw-slate-500);
}

/* the open menu is rendered next to the footer, not inside the scrolling card -
   an absolutely positioned menu is clipped by the card in every variant */
body.xadmintool .aiw-window .aiwMenu {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    overflow-y: auto;
    background: var(--aiw-white);
    border: 1px solid var(--aiw-slate-200);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 12px 28px rgba(42, 49, 56, .18);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.xadmintool .aiw-window .aiwMenuItem {
    /* the menu is a flex column with a max-height - without this the entries shrink
       to a sliver each instead of the menu scrolling once there are more of them
       than fit */
    flex: none;
    padding: 6px 10px;
    border-radius: 7px;
    font-family: var(--aiw-font-mono);
    font-size: 12.5px;
    color: var(--aiw-slate-800);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.xadmintool .aiw-window .aiwMenuItem:hover {
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwMenuItemOn {
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-700);
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   Step 4 - root choice on the left, the proposed tree on the right
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwColumns {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 20px;
    align-items: stretch;
}

body.xadmintool .aiw-window .aiwColRoot {
    width: 290px;
    flex: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.xadmintool .aiw-window .aiwColTree {
    flex: 1;
    min-width: 0;
}

body.xadmintool .aiw-window .aiwFieldLabel {
    font-size: 13px;
    font-weight: 700;
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwHelp {
    font-size: 12px;
    line-height: 1.5;
    color: var(--aiw-slate-600);
}

/* the root of the tree, over the whole width of the column - it used to be a stack
   of radio cards, which took the room the explanation below now has */
body.xadmintool .aiw-window .aiwRootSelect {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
}
body.xadmintool .aiw-window .aiwRootSelect .aiwSelectValue {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--aiw-slate-900);
}

/* ---- "Derived attributes" - what the import builds on top of the tree ----------
   The three switches stand under the root dropdown and fill the rest of the column.
   The block that used to stand below them explained what "Edit Tree" is good for and
   took the room the three switches need - the button says it well enough on its own. */
body.xadmintool .aiw-window .aiwDerived {
    /* the room between the dropdown and the legend is all its own - it only scrolls
       when even that is not enough, on a viewport too short for the modal */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 4px;
    padding: 10px 13px 2px;
    border: 1px solid var(--aiw-teal-200);
    border-radius: 12px;
    background: var(--aiw-teal-50);
}

body.xadmintool .aiw-window .aiwDerivedHead {
    font-family: var(--aiw-font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwDerivedSub {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwDerivedRow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 5px;
    padding: 6px 0 7px;
    border-top: 1px solid var(--aiw-teal-200);
    cursor: pointer;
    user-select: none;
}

body.xadmintool .aiw-window .aiwDerivedText {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.xadmintool .aiw-window .aiwDerivedName {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwDerivedRowOn .aiwDerivedName {
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwDerivedHint {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--aiw-slate-600);
}

/* what a "yes" to the timestamp question costs the list above it: a date carries no
   key, so the switch takes the key rows of that column with it, see
   #renderEpochQuestion. It stands under the hint of the row it belongs to, in the
   same amber every other "look at this before you go on" of the wizard uses */
body.xadmintool .aiw-window .aiwDerivedWarn {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--aiw-warn-fg);
}

/* into how many groups a quantile attribute cuts its column, see
   #renderQuantileGroups: three numbers under the hint of the switch, one of them
   always picked. Not switches - the question is how finely, not whether */
body.xadmintool .aiw-window .aiwGroups {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

body.xadmintool .aiw-window .aiwGroupsLabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--aiw-slate-500);
    margin-right: 2px;
}

body.xadmintool .aiw-window .aiwGroup {
    min-width: 30px;
    box-sizing: border-box;
    padding: 2px 8px;
    border: 1px solid var(--aiw-slate-300);
    border-radius: 7px;
    background: var(--aiw-white);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--aiw-slate-600);
    text-align: center;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

body.xadmintool .aiw-window .aiwGroup:hover {
    border-color: var(--aiw-teal-300);
    color: var(--aiw-teal-700);
}

body.xadmintool .aiw-window .aiwGroup.aiwGroupOn {
    border-color: var(--aiw-teal-500);
    background: var(--aiw-teal-500);
    color: var(--aiw-white);
}

/* the switch is off: the number says what it would be built with, so it stays
   readable and stays clickable - it is not a second switch */
body.xadmintool .aiw-window .aiwGroups.aiwGroupsOff {
    opacity: .5;
}

/* the switch itself - the knob slides to the right and the track turns teal */
body.xadmintool .aiw-window .aiwSwitch {
    flex: none;
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    margin-top: 1px;
    border-radius: 12px;
    background: var(--aiw-slate-300);
    transition: background .15s ease;
}

body.xadmintool .aiw-window .aiwDerivedRowOn .aiwSwitch {
    background: var(--aiw-teal-500);
}

body.xadmintool .aiw-window .aiwSwitchKnob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--aiw-white);
    box-shadow: 0 1px 3px rgba(42, 49, 56, .3);
    transition: left .15s ease;
}

body.xadmintool .aiw-window .aiwDerivedRowOn .aiwSwitchKnob {
    left: 23px;
}

/* ----------------------------------------------------------------------------
   "Beautify names" - a card of its own below "Derived attributes". It adds nothing
   to the tree, it renames what is already in it, so it stands outside that block
   and keeps its own height instead of scrolling with it. See
   Admin.view.main.AiImportWizardController#renderBeautify.
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwBeautify {
    flex: none;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 13px 11px;
    cursor: pointer;
    user-select: none;
}
body.xadmintool .aiw-window .aiwBeautifyOn .aiwDerivedName {
    color: var(--aiw-slate-900);
}
body.xadmintool .aiw-window .aiwBeautifyOn .aiwSwitch {
    background: var(--aiw-teal-500);
}
body.xadmintool .aiw-window .aiwBeautifyOn .aiwSwitchKnob {
    left: 23px;
}

/* ---- step 3: the columns that read like a point in time -----------------------
   The same switch rows as "Derived attributes" above, but as a block at the foot of
   the step. It takes only the room it needs and the card above it gives that room up;
   a long list scrolls inside the block instead of pushing the note off the step. */
body.xadmintool .aiw-window .aiwTsBlock {
    flex: none;
    max-height: 164px;
    overflow-y: auto;
    padding: 10px 13px 4px;
    border: 1px solid var(--aiw-warn-border);
    border-radius: 12px;
    background: var(--aiw-warn-bg);
}

/* the question wants an answer before the user goes on - the same amber as every
   other "look at this" of the wizard, the rows split by the amber border too */
body.xadmintool .aiw-window .aiwTsBlock .aiwDerivedRow {
    border-top-color: var(--aiw-warn-border);
}

/* folded away the block is its first line and nothing else - no room for a list
   that is not there */
body.xadmintool .aiw-window .aiwTsBlock.aiwTsBlockFolded {
    max-height: none;
    overflow: visible;
    padding-bottom: 10px;
}

/* the line that folds it: the whole row takes the click, the triangle at its end
   is what says so */
body.xadmintool .aiw-window .aiwTsHead {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

body.xadmintool .aiw-window .aiwTsFold {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: var(--aiw-warn-fg);
    transition: background-color 140ms ease;
}
body.xadmintool .aiw-window .aiwTsHead:hover .aiwTsFold {
    background: var(--aiw-warn-border);
}

body.xadmintool .aiw-window .aiwTsFoldIcon {
    width: 14px;
    height: 14px;
    transition: transform 140ms ease;
}

/* closed it points at what it would open */
body.xadmintool .aiw-window .aiwTsBlockFolded .aiwTsFoldIcon {
    transform: rotate(-90deg);
}

body.xadmintool .aiw-window .aiwLegend {
    flex: none;
    display: flex;
    /* one entry per line - each of them says what it stands for in a few words */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 2px;
    font-size: 12px;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwLegendItem {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.xadmintool .aiw-window .aiwLegendIcon {
    width: 13px;
    height: 13px;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwLegendXattr {
    color: var(--aiw-xattr);
}

/* ---- the toolbar above the proposed tree -------------------------------- */
body.xadmintool .aiw-window .aiwTreeHead {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

body.xadmintool .aiw-window .aiwTreeHeadTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

body.xadmintool .aiw-window .aiwTreeTools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

body.xadmintool .aiw-window .aiwToolSep {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwIconBtn {
    flex: none;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 9px;
    background: var(--aiw-white);
    color: var(--aiw-slate-600);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
body.xadmintool .aiw-window .aiwIconBtn:hover {
    background: var(--aiw-slate-100);
    color: var(--aiw-slate-800);
}

/* nothing left to take back, or nothing left to restore */
body.xadmintool .aiw-window .aiwIconBtnDisabled,
body.xadmintool .aiw-window .aiwIconBtnDisabled:hover {
    opacity: .4;
    cursor: default;
    background: var(--aiw-white);
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwToolBtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 9px;
    background: var(--aiw-white);
    font-family: var(--aiw-font-body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--aiw-slate-700);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
body.xadmintool .aiw-window .aiwToolBtn:hover {
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwToolBtnEdit {
    border-color: var(--aiw-teal-300);
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-700);
}
body.xadmintool .aiw-window .aiwToolBtnEdit:hover {
    background: var(--aiw-teal-100);
}

/* "Edit Tree" stays pressed while the actions sit next to the rows */
body.xadmintool .aiw-window .aiwToolBtnOn,
body.xadmintool .aiw-window .aiwToolBtnOn:hover {
    border-color: var(--aiw-teal-600);
    background: var(--aiw-teal-600);
    color: var(--aiw-white);
}

body.xadmintool .aiw-window .aiwToolIcon {
    width: 14px;
    height: 14px;
    flex: none;
}

body.xadmintool .aiw-window .aiwTreeError {
    flex: none;
    margin: 10px 12px 0;
}

body.xadmintool .aiw-window .aiwTree {
    padding: 10px 8px;
}

body.xadmintool .aiw-window .aiwTreeRow {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 8px;
    border-radius: 6px;
}

body.xadmintool .aiw-window .aiwTreeIcon {
    width: 13px;
    height: 13px;
    flex: none;
}

/* every row is drawn as [fold][icon][label] - both slots keep their width when they
   are empty, so the rows of one level line up no matter which icon they carry */
body.xadmintool .aiw-window .aiwTreeFold,
body.xadmintool .aiw-window .aiwTreeIconSlot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
}

body.xadmintool .aiw-window .aiwTreeFold {
    width: 16px;
    height: 16px;
    margin-left: -2px;
    border-radius: 5px;
}

/* only a row that has children carries a chevron, and that chevron is the control
   that folds it - the rest of the row does not react to a click */
body.xadmintool .aiw-window .aiwTreeFoldOn {
    cursor: pointer;
    transition: background-color 140ms ease;
}
body.xadmintool .aiw-window .aiwTreeFoldOn:hover {
    background: var(--aiw-slate-100);
}

/* folded: the chevron points at the rows it hides */
body.xadmintool .aiw-window .aiwTreeIconFolded {
    transform: rotate(-90deg);
}

body.xadmintool .aiw-window .aiwTreeName {
    font-size: 12.5px;
    color: var(--aiw-slate-800);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwTreeNote {
    font-size: 11px;
    color: var(--aiw-slate-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwTreeRow-object .aiwTreeIcon {
    color: var(--aiw-teal-600);
}
body.xadmintool .aiw-window .aiwTreeRow-object .aiwTreeName {
    font-family: var(--aiw-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--aiw-teal-700);
}

/* a key column is a dimension without an attribute below it and without an icon */
body.xadmintool .aiw-window .aiwTreeRow-key .aiwTreeName {
    font-family: var(--aiw-font-mono);
    font-style: italic;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwTreeRow-dim .aiwTreeIcon {
    color: var(--aiw-slate-700);
}
body.xadmintool .aiw-window .aiwTreeRow-dim .aiwTreeIconClock {
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwTreeRow-attr .aiwTreeIcon {
    width: 12px;
    height: 12px;
    color: var(--aiw-slate-400);
}
body.xadmintool .aiw-window .aiwTreeRow-attr .aiwTreeName {
    color: var(--aiw-slate-700);
}

/* an attribute the wizard derives - it stands next to the auto attribute of the
   dimension, so it is drawn in the colour of the switch that asked for it */
body.xadmintool .aiw-window .aiwTreeRow-dattr .aiwTreeIcon {
    width: 12px;
    height: 12px;
    color: var(--aiw-teal-400);
}
body.xadmintool .aiw-window .aiwTreeRow-dattr .aiwTreeName {
    color: var(--aiw-teal-700);
}

body.xadmintool .aiw-window .aiwTreeRow-xattr .aiwTreeIcon {
    width: 12px;
    height: 12px;
    color: var(--aiw-xattr);
}

/* ---- "Edit Tree": the actions at the right edge of a row ---------------- */
body.xadmintool .aiw-window .aiwTreeActions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 8px;
}

body.xadmintool .aiw-window .aiwTreeAct {
    flex: none;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--aiw-slate-400);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
body.xadmintool .aiw-window .aiwTreeAct:hover {
    background: var(--aiw-slate-100);
    color: var(--aiw-slate-800);
}

/* the one action that cannot be taken back by looking at the tree */
body.xadmintool .aiw-window .aiwTreeAct[data-aiw-act="objdel"]:hover,
body.xadmintool .aiw-window .aiwTreeAct[data-aiw-act="xattrdel"]:hover {
    background: var(--aiw-danger-bg);
    color: var(--aiw-danger);
}

body.xadmintool .aiw-window .aiwTreeActIcon {
    width: 13px;
    height: 13px;
}

/* a row that carries actions keeps its hover, so it is clear which row they
   belong to */
body.xadmintool .aiw-window .aiwTree .aiwTreeRow:hover .aiwTreeAct {
    color: var(--aiw-slate-600);
}

/* ---- the editor one row of the tree opens below it ---------------------- */

/* the row the editor belongs to stays marked while it stands open */
body.xadmintool .aiw-window .aiwTreeRowEditing {
    background: var(--aiw-teal-50);
}

body.xadmintool .aiw-window .aiwTreeRowEditing .aiwTreeAct[data-aiw-act="rowedit"] {
    color: var(--aiw-teal-700);
}

/* indented with the row above it, so it reads as a part of that row and not as
   one of the tree */
body.xadmintool .aiw-window .aiwRowEditor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-right: 8px;
    margin-bottom: 4px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid var(--aiw-teal-200);
    border-radius: 9px;
    background: var(--aiw-teal-50);
}

body.xadmintool .aiw-window .aiwRowEdFields {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

body.xadmintool .aiw-window .aiwRowEdField {
    flex: none;
    width: 108px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* the name and the quantiles of an attribute are the two fields that hold a text
   and not a number */
body.xadmintool .aiw-window .aiwRowEdWide {
    flex: 1;
    min-width: 160px;
    width: auto;
}

body.xadmintool .aiw-window .aiwRowEdLabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwRowEdInput {
    height: 28px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 8px;
    border: 1px solid var(--aiw-slate-300);
    border-radius: 7px;
    background: var(--aiw-white);
    font-family: var(--aiw-font-body);
    font-size: 12.5px;
    color: var(--aiw-slate-800);
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
body.xadmintool .aiw-window .aiwRowEdInput:focus {
    border-color: var(--aiw-teal-500);
    box-shadow: 0 0 0 3px var(--aiw-focus-ring);
}

/* the four levels of a calendar attribute - the chips of the quantile groups, and
   each of them is a switch of its own */
body.xadmintool .aiw-window .aiwRowEdLevels {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.xadmintool .aiw-window .aiwRowEdLevels .aiwRowEdLabel {
    margin-right: 2px;
}

body.xadmintool .aiw-window .aiwRowEdHint {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwRowEdError {
    font-size: 11.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--aiw-danger);
}

body.xadmintool .aiw-window .aiwRowEdActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ----------------------------------------------------------------------------
   Step 5 - what comes next (design handoff "Import CSV wizard - Step 5", variant
   1c), see AiImportWizardController#renderStepImport. The body scrolls as a whole,
   the content is a column of at most 1100px in the middle of it
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwBody.aiwBodyImport {
    padding: 36px max(28px, calc((100% - 1100px) / 2));
    overflow-y: auto;
}

body.xadmintool .aiw-window .aiwImport {
    flex: none;
    gap: 28px;
}

body.xadmintool .aiw-window .aiwImpHead {
    font-family: var(--aiw-font-head);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--aiw-slate-900);
    text-wrap: balance;
}

body.xadmintool .aiw-window .aiwImpHeadAccent {
    color: var(--aiw-teal-500);
}

body.xadmintool .aiw-window .aiwImpEyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwImpEyebrowTeal {
    color: var(--aiw-teal-700);
}

/* what the wizard did | the steps of the tool bar */
body.xadmintool .aiw-window .aiwImpJourney {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr);
    align-items: stretch;
}

body.xadmintool .aiw-window .aiwImpDone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 20px;
    border-right: 2px dashed var(--aiw-slate-300);
}

body.xadmintool .aiw-window .aiwImpDoneList {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.xadmintool .aiw-window .aiwImpDoneRow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwImpDoneRow .aiwIcon {
    flex: none;
    width: 15px;
    height: 15px;
    stroke-width: 1.75;
    color: var(--aiw-teal-500);
}

body.xadmintool .aiw-window .aiwImpNext {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;
}

body.xadmintool .aiw-window .aiwImpNextCopy {
    font-size: 15px;
    line-height: 1.5;
    color: var(--aiw-slate-700);
    text-wrap: pretty;
}

body.xadmintool .aiw-window .aiwImpNextCopy b {
    font-weight: 600;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwImpTiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body.xadmintool .aiw-window .aiwImpTile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--aiw-white);
    border: 1px solid var(--aiw-slate-200);
}

body.xadmintool .aiw-window .aiwImpTileTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--aiw-font-head);
    font-weight: 600;
    font-size: 15px;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwImpTileTitle .aiwIcon {
    flex: none;
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwImpTileSub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--aiw-slate-600);
}

/* "Edit View" - where the user stands when the editor opens */
body.xadmintool .aiw-window .aiwImpTile.aiwImpTileActive {
    background: var(--aiw-teal-500);
    border-color: var(--aiw-teal-500);
    box-shadow: 0 12px 32px rgba(88, 153, 153, .28);
}

body.xadmintool .aiw-window .aiwImpTileActive .aiwImpTileTitle,
body.xadmintool .aiw-window .aiwImpTileActive .aiwImpTileTitle .aiwIcon {
    color: #FFFFFF;
}

body.xadmintool .aiw-window .aiwImpTileActive .aiwImpTileSub {
    color: #F1FBFA;
}

/* the card "Next up": what to look at first | the ObjectTree */
body.xadmintool .aiw-window .aiwImpCard {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    border-radius: 24px;
    background: var(--aiw-white);
    border: 1px solid var(--aiw-slate-200);
    box-shadow: 0 8px 24px rgba(42, 49, 56, .08);
    overflow: hidden;
}

body.xadmintool .aiw-window .aiwImpCardMain {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
}

body.xadmintool .aiw-window .aiwImpBadge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-700);
    font-family: var(--aiw-font-head);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .02em;
}

body.xadmintool .aiw-window .aiwImpCardTitle {
    font-family: var(--aiw-font-head);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwImpCardCopy {
    font-size: 15px;
    line-height: 1.55;
    color: var(--aiw-slate-700);
    text-wrap: pretty;
}

body.xadmintool .aiw-window .aiwImpChecks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

body.xadmintool .aiw-window .aiwImpCheck {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--aiw-slate-700);
}

body.xadmintool .aiw-window .aiwImpCheck .aiwIcon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    stroke-width: 1.75;
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwImpCheck.aiwImpCheckWarn {
    padding: 10px 12px;
    border-radius: 10px;
    background: #FFF3D6;
    color: #6B4E10;
}

body.xadmintool .aiw-window .aiwImpCheckWarn .aiwIcon {
    color: #8A6516;
}

body.xadmintool .aiw-window .aiwImpCardTree {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    background: var(--aiw-slate-50);
    border-left: 1px solid var(--aiw-slate-200);
    min-width: 0;
}

body.xadmintool .aiw-window .aiwImpTree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwImpTreeRow {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    min-width: 0;
}

body.xadmintool .aiw-window .aiwImpTreeRow .aiwIcon {
    flex: none;
    width: 15px;
    height: 15px;
    stroke-width: 1.75;
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwImpTreeName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwImpTreeRoot .aiwImpTreeName {
    font-weight: 600;
}

body.xadmintool .aiw-window .aiwImpPk,
body.xadmintool .aiw-window .aiwImpFk {
    flex: none;
    font-family: var(--aiw-font-mono);
    font-size: 11px;
    white-space: nowrap;
}

body.xadmintool .aiw-window .aiwImpPk {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--aiw-teal-50);
    color: var(--aiw-teal-700);
}

body.xadmintool .aiw-window .aiwImpFk {
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwImpTreeKids {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 7px;
    padding-left: 14px;
    border-left: 1px solid var(--aiw-slate-300);
}

/* a narrow modal stacks the two halves instead of squeezing them */
@media (max-width: 1100px) {
    body.xadmintool .aiw-window .aiwImpJourney,
    body.xadmintool .aiw-window .aiwImpCard {
        grid-template-columns: minmax(0, 1fr);
    }

    body.xadmintool .aiw-window .aiwImpDone {
        padding: 0 0 16px;
        border-right: none;
        border-bottom: 2px dashed var(--aiw-slate-300);
    }

    body.xadmintool .aiw-window .aiwImpNext {
        padding: 16px 0 0;
    }

    body.xadmintool .aiw-window .aiwImpCardTree {
        border-left: none;
        border-top: 1px solid var(--aiw-slate-200);
    }
}

/* ----------------------------------------------------------------------------
   Footer: the contextual hint and the two buttons
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwFooter {
    flex: none;
    padding: 16px 28px;
    border-top: 1px solid var(--aiw-slate-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.xadmintool .aiw-window .aiwFooterHint {
    font-size: 13px;
    color: var(--aiw-slate-600);
}

body.xadmintool .aiw-window .aiwFooterButtons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

body.xadmintool .aiw-window .aiwBtn {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: var(--aiw-font-head);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease, color 140ms ease;
}

body.xadmintool .aiw-window .aiwPrimary {
    padding: 0 24px;
    background: var(--aiw-teal-500);
    color: var(--aiw-white);
    box-shadow: 0 8px 20px rgba(88, 153, 153, .28);
}
body.xadmintool .aiw-window .aiwPrimary:hover {
    background: var(--aiw-teal-600);
}
body.xadmintool .aiw-window .aiwPrimary:active {
    background: var(--aiw-teal-700);
}

body.xadmintool .aiw-window .aiwSecondary {
    padding: 0 20px;
    border: 1px solid var(--aiw-slate-300);
    background: var(--aiw-white);
    color: var(--aiw-slate-700);
}
body.xadmintool .aiw-window .aiwSecondary:hover {
    background: var(--aiw-slate-100);
}

body.xadmintool .aiw-window .aiwBtn.aiwDisabled,
body.xadmintool .aiw-window .aiwBtn.aiwDisabled:hover {
    background: var(--aiw-slate-200);
    color: var(--aiw-slate-500);
    box-shadow: none;
    cursor: not-allowed;
}

/* a disabled "Back" keeps the outline of the secondary button - a filled grey pill
   would read as the loudest element of the footer */
body.xadmintool .aiw-window .aiwSecondary.aiwDisabled,
body.xadmintool .aiw-window .aiwSecondary.aiwDisabled:hover {
    background: var(--aiw-white);
    border-color: var(--aiw-slate-200);
    color: var(--aiw-slate-400);
}

body.xadmintool .aiw-window .aiwHidden {
    visibility: hidden;
}

/* ----------------------------------------------------------------------------
   The Import Wizard panel at the foot of the data source column - the entry point
   of the wizard (Admin.view.main.MainController#updateAiWizardLauncher).

   Design handoff "Import Wizard emphasis in the Admin Tool sidebar (Variant E /
   red)": a filled panel with an inverse button, loud on purpose. The wizard is
   the fast way through step I and was overlooked as a quiet line; the teal of
   this column belongs to the steps the user runs himself, so the alternative to
   them carries the red of the tool and cannot be read as one more of them.
   ---------------------------------------------------------------------------- */
body.xadmintool .aiwLauncher {
    --wiz: #B53A4F;
    --wiz-ink: #8E2C3E;
    --wiz-shadow: rgba(181, 58, 79, .30);
    --wiz-ring: rgba(181, 58, 79, .45);

    --wiz-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wiz-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

    box-sizing: border-box;
    padding-top: 14px;
    border-top: 1px solid #E7EAED;
    background: #FFFFFF;
    font-family: var(--wiz-font-body);
    /* the ring grows 14px past the panel on every side - the room for it is the
       margin of the panel, and nothing above may cut it off */
    overflow: visible;
}

/* the ring the panel appears with - three times and then never again, see
   MainController#aiWizardPulse. It replaces the resting shadow while it plays */
@keyframes aiwWizRing {
    0%   { box-shadow: 0 0 0 0    var(--wiz-ring); }
    70%  { box-shadow: 0 0 0 14px rgba(181, 58, 79, 0); }
    100% { box-shadow: 0 0 0 0    rgba(181, 58, 79, 0); }
}

body.xadmintool .aiwLauncher .aiwPanel {
    position: relative;
    margin: 0 14px 14px;
    padding: 16px;
    border-radius: 14px;
    background: var(--wiz);
    box-shadow: 0 14px 30px var(--wiz-shadow);
}

body.xadmintool .aiwLauncher .aiwPanel.aiwPanelPulse {
    animation: aiwWizRing 1.6s ease-out 3;
}

/* an attention cue is exactly what somebody who asked for less motion does not
   want - the panel is loud enough standing still */
@media (prefers-reduced-motion: reduce) {
    body.xadmintool .aiwLauncher .aiwPanel.aiwPanelPulse {
        animation: none;
    }
}

body.xadmintool .aiwLauncher .aiwPanelHead {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

body.xadmintool .aiwLauncher .aiwPanelIcon {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    color: #FFFFFF;
}

body.xadmintool .aiwLauncher .aiwPanelIcon .aiwIcon {
    width: 17px;
    height: 17px;
    stroke-width: 1.9;
}

body.xadmintool .aiwLauncher .aiwPanelText {
    flex: 1;
    min-width: 0;
}

body.xadmintool .aiwLauncher .aiwPanelTitle {
    display: block;
    font-family: var(--wiz-font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
}

/* "RECOMMENDED · 9 FILES READY" - the word in front of the count is what makes
   the panel a recommendation and not a warning */
body.xadmintool .aiwLauncher .aiwPanelLabel {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

body.xadmintool .aiwLauncher .aiwPanelBody {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

/* the inverse pill: white on the red ground, the one button of this column that
   is not teal */
body.xadmintool .aiwLauncher .aiwPanelBtn {
    margin-top: 12px;
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--wiz-ink);
    font-family: var(--wiz-font-head);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: transform 160ms ease;
}
body.xadmintool .aiwLauncher .aiwPanelBtn:hover {
    transform: translateY(-2px);
}
body.xadmintool .aiwLauncher .aiwPanelBtn:active {
    transform: translateY(0);
}

/* the same panel above the two cards of the Object View Builder, see
   NewOrLoadController#renderResume - it takes the width of the cards */
body.xadmintool .aiwLauncher.nolResume .aiwPanel {
    margin: 0 0 16px;
}

body.xadmintool .aiwLauncher .aiwPanelArrow {
    width: 17px;
    height: 17px;
    stroke-width: 2.2;
}

/* nothing is uploaded yet: the slot says what the panel is waiting for instead of
   standing empty */
body.xadmintool .aiwLauncher .aiwPanelWaiting {
    margin: 0 14px 14px;
    padding: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #97A2AD;
}

/* a short column has to show the title, the label and the button - the two lines
   that explain the offer are what gives way */
@media (max-height: 759px) {
    body.xadmintool .aiwLauncher .aiwPanel {
        padding: 12px;
    }

    body.xadmintool .aiwLauncher .aiwPanelBody {
        display: none;
    }
}

/* ----------------------------------------------------------------------------
   Dark theme (body.oe-theme-dark, see resources/dark-theme.css)
   ---------------------------------------------------------------------------- */
body.oe-theme-dark.xadmintool .x-window.aiw-window,
body.oe-theme-dark .x-window.aiw-window {
    --aiw-white: #22282E;
    --aiw-slate-50: #262D34;
    --aiw-slate-100: #2E353C;
    --aiw-slate-200: #39424A;
    --aiw-slate-300: #46505A;
    --aiw-slate-400: #5A6672;
    --aiw-slate-500: #8593A0;
    --aiw-slate-600: #9AA7B3;
    --aiw-slate-700: #BAC4CD;
    --aiw-slate-800: #D6DDE3;
    --aiw-slate-900: #EDF1F4;

    --aiw-teal-50: #22322F;
    --aiw-teal-100: #2A403C;
    --aiw-teal-200: #37544F;

    --aiw-plum-100: #3B2E3A;
    --aiw-plum-700: #E0CBDA;

    --aiw-warn-bg: #3E3121;
    --aiw-warn-border: #6B5327;
    --aiw-warn-fg: #F0C97A;
    --aiw-warn-icon: #E08A5A;

    --aiw-xattr: #E0705F;

    --aiw-danger: #E0705F;
    --aiw-danger-bg: #3A2624;
    --aiw-danger-border: #5C3733;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

body.oe-theme-dark .aiw-window .aiwProgressCard {
    background: linear-gradient(180deg, var(--aiw-teal-50), var(--aiw-white));
}

body.oe-theme-dark .aiw-window .aiwPrimary,
body.oe-theme-dark .aiw-window .aiwPrimary:hover,
body.oe-theme-dark .aiw-window .aiwEditKeys,
body.oe-theme-dark .aiw-window .aiwEdDone,
body.oe-theme-dark .aiw-window .aiwToolBtnOn,
body.oe-theme-dark .aiw-window .aiwToolBtnOn:hover {
    color: #FFFFFF;
}

body.oe-theme-dark .aiw-window .aiwMenu {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}

body.oe-theme-dark.xadmintool .aiwLauncher,
body.oe-theme-dark .aiwLauncher {
    --wiz: #A8414F;
    --wiz-ink: #7E2634;

    border-top-color: #39424A;
    background: #22282E;
}

/* ----------------------------------------------------------------------------
   Step 3 - the explanation of the graph, the first time a user gets there
   (Admin.view.main.AiImportWizardController#renderIntro)
   ---------------------------------------------------------------------------- */
body.xadmintool .aiw-window .aiwRootEl {
    position: relative;
}

body.xadmintool .aiw-window .aiwIntro {
    position: absolute;
    inset: 0;
    z-index: 90000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(42, 49, 56, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: aiwIntroFade 180ms ease-out;
}

body.xadmintool .aiw-window .aiwIntroCard {
    position: relative;
    width: 600px;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 28px 30px 24px;
    background: var(--aiw-white);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(42, 49, 56, .30), 0 2px 6px rgba(42, 49, 56, .08);
    animation: aiwIntroRise 220ms cubic-bezier(.2, .8, .3, 1);
}

@keyframes aiwIntroFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes aiwIntroRise {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

body.xadmintool .aiw-window .aiwIntroClose {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--aiw-slate-500);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
body.xadmintool .aiw-window .aiwIntroClose:hover {
    background: var(--aiw-slate-100);
    color: var(--aiw-slate-800);
}
body.xadmintool .aiw-window .aiwIntroCloseIcon {
    width: 18px;
    height: 18px;
}

body.xadmintool .aiw-window .aiwIntroHead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 36px;
}

body.xadmintool .aiw-window .aiwIntroBadge {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--aiw-teal-100), var(--aiw-teal-200));
    color: var(--aiw-teal-700);
}
body.xadmintool .aiw-window .aiwIntroBadgeIcon {
    width: 22px;
    height: 22px;
}

body.xadmintool .aiw-window .aiwIntroHeadText {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.xadmintool .aiw-window .aiwIntroEyebrow {
    font-family: var(--aiw-font-head);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwIntroTitle {
    font-family: var(--aiw-font-head);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--aiw-slate-900);
}

body.xadmintool .aiw-window .aiwIntroLead {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--aiw-slate-700);
}

/* the two examples side by side, "or" between them */
body.xadmintool .aiw-window .aiwIntroExamples {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
}

body.xadmintool .aiw-window .aiwIntroExample {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 10px 14px;
    border: 1px solid var(--aiw-slate-200);
    border-radius: 14px;
    background:
        radial-gradient(circle, var(--aiw-slate-200) 1px, transparent 1.2px) 0 0 / 14px 14px,
        var(--aiw-slate-50);
}

body.xadmintool .aiw-window .aiwIntroOr {
    flex: none;
    align-self: center;
    font-family: var(--aiw-font-head);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--aiw-slate-500);
}

body.xadmintool .aiw-window .aiwIntroSample {
    position: relative;
    display: block;
    max-width: 100%;
    margin-bottom: 8px;
}
body.xadmintool .aiw-window .aiwIntroSample svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* the attribute that is "clicked" in the second example */
body.xadmintool .aiw-window .aiwGraph .aiwGraphAttrFrame.aiwIntroAttrOn {
    fill-opacity: .14;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(192, 57, 43, .35));
}

/* the pointer that does the "click" - on the head of the box, or on the attribute */
body.xadmintool .aiw-window .aiwIntroCursor {
    position: absolute;
    width: 22px;
    height: 22px;
    color: var(--aiw-slate-900);
    fill: var(--aiw-white);
    filter: drop-shadow(0 2px 3px rgba(42, 49, 56, .35));
    animation: aiwIntroTap 2.4s ease-in-out infinite;
}
body.xadmintool .aiw-window .aiwIntroSampleObj .aiwIntroCursor {
    left: 62%;
    top: 22%;
}
body.xadmintool .aiw-window .aiwIntroSampleAttr .aiwIntroCursor {
    left: 70%;
    top: 74%;
}

@keyframes aiwIntroTap {
    0%, 60%, 100% { transform: translate(0, 0) scale(1); }
    70%           { transform: translate(-2px, -2px) scale(.88); }
    80%           { transform: translate(0, 0) scale(1); }
}

body.xadmintool .aiw-window .aiwIntroExLabel {
    font-family: var(--aiw-font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--aiw-slate-900);
    text-align: center;
}

body.xadmintool .aiw-window .aiwIntroExHint {
    font-size: 12.5px;
    color: var(--aiw-slate-600);
    text-align: center;
}

/* what the inspector on the right offers */
body.xadmintool .aiw-window .aiwIntroThen {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--aiw-teal-50);
    border: 1px solid var(--aiw-teal-100);
}

body.xadmintool .aiw-window .aiwIntroThenHead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--aiw-font-head);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--aiw-teal-700);
}
body.xadmintool .aiw-window .aiwIntroThenIcon {
    width: 16px;
    height: 16px;
    flex: none;
}

body.xadmintool .aiw-window .aiwIntroTodos {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.xadmintool .aiw-window .aiwIntroTodo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--aiw-slate-800);
}

body.xadmintool .aiw-window .aiwIntroTodoIcon {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 8px;
    background: var(--aiw-white);
    border: 1px solid var(--aiw-teal-200);
    color: var(--aiw-teal-600);
}

body.xadmintool .aiw-window .aiwIntroFoot {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

body.oe-theme-dark .aiw-window .aiwIntro {
    background: rgba(0, 0, 0, .55);
}
body.oe-theme-dark .aiw-window .aiwIntroCard {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

/* a narrow window: the examples stack */
@media (max-width: 640px) {
    body.xadmintool .aiw-window .aiwIntroExamples {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.xadmintool .aiw-window .aiwIntro,
    body.xadmintool .aiw-window .aiwIntroCard,
    body.xadmintool .aiw-window .aiwIntroCursor {
        animation: none;
    }
}