/* Interactive data-model diagram: modal shell, standalone page, and the diagram itself.
   Loaded on every admin page (base_site.html) and on /private/datamodel/. Colour tokens are
   read by data-model-diagram.js through getComputedStyle for the edge layer and PNG export. */

.datamodel {
    --dm-group-stem: #8122a1;
    --dm-group-modules: #2f7f8a;
    --dm-group-personal_attributes: #3f6bb3;
    --dm-group-resources: #9a5a14;
    --dm-group-taxonomies: #6b7c2a;
    --dm-group-dissemination: #a8365e;
    --dm-group-users: #51459d;
    --dm-group-default: var(--primary, #8122a1);
    --dm-permission: #e07b00;
    --dm-edge: #9c9ab0;
    --dm-edge-active: #51459d;
    --dm-text: #1a1b1c;
    --dm-muted: #6f6d82;
    --dm-card: #ffffff;
    --dm-border: #e2e0ea;
    --dm-canvas: #f7f6fb;
    --dm-accent: var(--dm-group-default);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0; /* the one-line status must not set the page's minimum width on a phone */
    min-height: 0;
    font-family: Inter, "Segoe UI", sans-serif;
    color: var(--dm-text);
}

/* ---------- toolbar ---------- */

.datamodel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.25rem 0.25rem 0.55rem; /* the top 0.25rem is room for the search field's focus ring */
    flex-shrink: 0;
}

.datamodel__search {
    position: relative;
    flex: 1 1 11rem;
    min-width: 9rem;
    max-width: 18rem;
}

.datamodel__tb-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.datamodel__tb-label {
    margin-right: 0.15rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dm-muted);
}

.datamodel__tb-divider {
    width: 1px;
    height: 1.6rem;
    background: var(--dm-border);
    flex-shrink: 0;
}

.datamodel__tb-group--view .datamodel__tb-divider {
    margin: 0 0.15rem;
}

/* ---------- dropdown menus ---------- */

.datamodel__menu {
    position: relative;
}

.datamodel__menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem 0.4rem 0.7rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px !important;
    background: var(--dm-card) !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    color: var(--dm-text) !important;
    cursor: pointer;
    white-space: nowrap;
}

.datamodel__menu-trigger:hover,
.datamodel__menu.is-open .datamodel__menu-trigger {
    border-color: var(--dm-edge-active) !important;
    background: var(--dm-canvas) !important;
}

.datamodel__menu-trigger:focus-visible {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 2px !important;
}

.datamodel__menu.has-active .datamodel__menu-trigger {
    border-color: var(--dm-edge-active) !important;
    color: var(--dm-edge-active) !important;
}

.datamodel__menu-caret {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.datamodel__menu-panel {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 40;
    min-width: 17rem;
    padding: 0.3rem;
    background: var(--dm-card);
    border: 1px solid var(--dm-border);
    border-radius: 0.6rem;
    box-shadow: 0 0.6rem 1.5rem rgba(26, 27, 28, 0.15);
}

.datamodel__tb-group--export .datamodel__menu-panel,
.datamodel__menu.is-right .datamodel__menu-panel {
    left: auto;
    right: 0;
}

.datamodel__menu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    width: 100%;
    position: relative;
    padding: 0.5rem 0.6rem !important;
    border: 0 !important;
    border-radius: 0.4rem !important;
    background: transparent !important;
    font: inherit;
    text-align: left;
    color: var(--dm-text) !important;
    cursor: pointer;
}

/* A faint inset rule between items; drawn separately so the rounded hover background does not bend it. */
.datamodel__menu-item + .datamodel__menu-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.6rem;
    right: 0.6rem;
    border-top: 1px solid rgba(226, 224, 234, 0.9);
}

.datamodel__menu-item:hover,
.datamodel__menu-item:focus-visible {
    background: var(--dm-canvas) !important;
    outline: none !important;
}

.datamodel__menu-mark {
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.1rem;
    border: 1.5px solid var(--dm-muted);
    border-radius: 0.25rem;
    position: relative;
}

.datamodel__menu-item--radio .datamodel__menu-mark {
    border-radius: 50%;
}

.datamodel__menu-item--item .datamodel__menu-mark {
    display: none;
}

.datamodel__menu-item[aria-checked="true"] .datamodel__menu-mark {
    border-color: var(--dm-edge-active);
    background: var(--dm-edge-active);
}

.datamodel__menu-item[aria-checked="true"] .datamodel__menu-mark::after {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 0.1rem;
    width: 0.25rem;
    height: 0.45rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.datamodel__menu-item--radio[aria-checked="true"] .datamodel__menu-mark::after {
    left: 0.25rem;
    top: 0.25rem;
    width: 0.3rem;
    height: 0.3rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    transform: none;
}

.datamodel__menu-text {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.1rem;
}

.datamodel__menu-item-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 13px;
    font-weight: 500;
}

/* The card icon of the kind, at the end of the title row, as a quiet reference. */
.datamodel__menu-item-icon {
    order: 2;
    margin-left: auto;
    color: var(--dm-muted);
    font-size: 12px;
    opacity: 0.8;
}

.datamodel__menu-item-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--dm-muted);
}

/* Specific enough to beat the theme's own input sizing. */
.datamodel .datamodel__toolbar .datamodel__search-input[type="search"] {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    padding: 0.4rem 0.7rem !important; /* same height as the toolbar buttons */
    border: 1px solid var(--dm-border) !important;
    border-radius: 0.45rem !important; /* a wide pill reads as a blob; a soft rectangle reads as a field */
    background: var(--dm-card) !important;
    font: inherit !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--dm-text) !important;
}

.datamodel .datamodel__toolbar .datamodel__search-input[type="search"]:focus {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 1px !important;
}

.datamodel__search-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--dm-card);
    border: 1px solid var(--dm-border);
    border-radius: 0.6rem;
    box-shadow: 0 0.6rem 1.5rem rgba(26, 27, 28, 0.15);
    max-height: 18rem;
    overflow-y: auto;
}

.datamodel__search-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.45rem 0.6rem !important;
    border: 0;
    border-radius: 0.4rem;
    background: transparent !important;
    font: inherit;
    font-size: 14px;
    text-align: left;
    color: var(--dm-text) !important;
    cursor: pointer;
}

.datamodel__search-button:hover,
.datamodel__search-button:focus-visible {
    background: var(--dm-canvas) !important;
    outline: none;
}

.datamodel__search-field {
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--dm-canvas);
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    color: var(--dm-edge-active);
}

.datamodel__share-url {
    width: min(22rem, 60%);
    margin-left: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.15rem 0.5rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 0.3rem !important;
    background: var(--dm-card) !important;
    font: inherit !important;
    font-size: 12px !important;
    color: var(--dm-text) !important;
}

.datamodel__search-meta,
.datamodel__search-empty {
    font-size: 12px;
    color: var(--dm-muted);
}

.datamodel__search-empty {
    padding: 0.45rem 0.6rem;
}

.datamodel__tool,
.datamodel__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px;
    background: var(--dm-card) !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    color: var(--dm-text) !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.datamodel__tool--icon {
    padding: 0.4rem 0.55rem !important;
}

.datamodel__tool:hover,
.datamodel__chip:hover {
    border-color: var(--dm-edge-active) !important;
    background: var(--dm-canvas) !important;
}

.datamodel__tool:focus-visible,
.datamodel__chip:focus-visible,
.datamodel__expand:focus-visible,
.datamodel__types-toggle:focus-visible,
.datamodel__type:focus-visible,
.datamodel__detail-minimize:focus-visible,
.datamodel__detail-close:focus-visible {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 2px !important;
}

.datamodel__chip .fa {
    font-size: 0.8em;
    opacity: 0.75;
}

.datamodel__chip[aria-pressed="true"] {
    background: var(--dm-edge-active) !important;
    border-color: var(--dm-edge-active) !important;
    color: #fff !important;
}

.datamodel__chip[data-toggle="permissions"][aria-pressed="true"] {
    background: var(--dm-permission) !important;
    border-color: var(--dm-permission) !important;
}

.datamodel__chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.datamodel__zoom-level {
    min-width: 2.8rem;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--dm-muted);
}

/* ---------- viewport ---------- */

/* Viewport and detail panel side by side; the panel is docked so it never covers a card. */
.datamodel__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.5rem;
}

.datamodel__viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-color: var(--dm-canvas);
    background-image: radial-gradient(circle, rgba(140, 137, 160, 0.28) 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px solid var(--dm-border); /* outlines the canvas instead of underlining the toolbar */
    border-radius: 0.6rem;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.datamodel__viewport:focus-visible {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: -2px !important;
}

.datamodel__viewport.is-panning {
    cursor: grabbing;
}

.datamodel__layer {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .datamodel__layer {
        transition: transform 0.08s linear;
    }
}

@media (prefers-reduced-motion: reduce) {
    .datamodel__card,
    .datamodel__chevron,
    .datamodel__detail-hidden-summary::before,
    .datamodel__tool,
    .datamodel__chip {
        transition: none !important;
    }

    .datamodel__row.is-highlighted {
        animation: none;
        background: #ffe9a8;
    }
}

.datamodel__edges {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}

.datamodel__edge {
    pointer-events: none;
}

.datamodel__edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
    pointer-events: stroke;
}

.datamodel__edge-line {
    fill: none;
    stroke: var(--dm-edge);
    stroke-width: 1.5;
    transition: stroke 0.15s ease, opacity 0.15s ease;
}

.datamodel__edge--m2m .datamodel__edge-line {
    stroke-dasharray: 6 4;
}

.datamodel__edge--generic .datamodel__edge-line {
    stroke-dasharray: 2 3;
}

.datamodel__edge--self .datamodel__edge-line {
    stroke-dasharray: 3 3;
}

.datamodel__edge--permission .datamodel__edge-line {
    stroke: var(--dm-permission);
    stroke-width: 7;
    stroke-linecap: round;
    opacity: 0.38;
}

.datamodel__edge--permission.is-inferred .datamodel__edge-line {
    opacity: 0.22;
}

.datamodel__edge.is-active .datamodel__edge-line {
    stroke: var(--dm-edge-active);
    stroke-width: 2.5;
}

.datamodel__edge--permission.is-active .datamodel__edge-line {
    stroke: var(--dm-permission);
    stroke-width: 9;
    opacity: 0.55;
    filter: none;
}

.datamodel__edge.is-dimmed {
    opacity: 0.12;
}

/* By app the relations cross whole columns: they stay in the background until a model is hovered or selected. */
.datamodel--by-app:not(.has-focus) .datamodel__edge:not(.datamodel__edge--permission):not(.is-path) {
    opacity: 0.35;
}

.datamodel__marker path,
.datamodel__marker circle {
    fill: var(--dm-edge);
}

/* A highlighted line's arrowhead takes its colour: purple when lit, orange on a path. */
.datamodel__marker--active path {
    fill: var(--dm-edge-active);
}

.datamodel__marker--path path {
    fill: var(--dm-permission);
}

.datamodel__marker--permission path {
    fill: var(--dm-permission);
}

.datamodel__edge.is-active .datamodel__edge-line {
    filter: drop-shadow(0 0 1px rgba(81, 69, 157, 0.4));
}

/* ---------- group headings ---------- */

.datamodel__group {
    position: absolute;
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 0.1rem;
    pointer-events: none;
}

.datamodel__group-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dm-accent);
}

.datamodel__group::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 0.6rem;
    background: var(--dm-accent);
    opacity: 0.35;
}

/* ---------- cards ---------- */

.datamodel__card {
    position: absolute;
    box-sizing: border-box;
    background: var(--dm-card);
    border: 1px solid var(--dm-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(26, 27, 28, 0.08);
    cursor: default;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, top 0.2s ease, left 0.2s ease;
}

.datamodel__card:focus-visible {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 2px !important;
}

.datamodel__card.is-dimmed {
    opacity: 0.25;
}

.datamodel__card.is-neighbour {
    box-shadow: 0 0 0 2px rgba(81, 69, 157, 0.35), 0 4px 12px rgba(26, 27, 28, 0.12);
}

.datamodel__card.is-selected,
.datamodel__card.is-hovered {
    box-shadow: 0 0 0 3px var(--dm-edge-active), 0 8px 20px rgba(26, 27, 28, 0.18);
    z-index: 2;
}

.datamodel__card--template,
.datamodel__card--approval,
.datamodel__card--support,
.datamodel__card--supporting {
    border-style: dashed;
}


/* Solid app colour with white text: the cards must read as blocks against the edge lines. */
.datamodel__card-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 44px;
    padding: 0 0.7rem 0 0.6rem;
    border-radius: 7px 7px 0 0;
    background: var(--dm-accent);
    color: #fff;
    cursor: pointer;
}

.datamodel__card.is-expanded .datamodel__card-header {
    border-radius: 7px 7px 0 0;
}

.datamodel__card:not(.is-expanded) .datamodel__card-header {
    border-radius: 7px;
}

/* Secondary models (templates, approvals, invitations, inline-only models): a darker, muted shade of
   the app colour rather than a lighter one, so the white text keeps its contrast; the dashed border
   and the badge do the rest. */
.datamodel__card--template .datamodel__card-header,
.datamodel__card--approval .datamodel__card-header,
.datamodel__card--support .datamodel__card-header,
.datamodel__card--supporting .datamodel__card-header {
    background: color-mix(in srgb, var(--dm-accent) 50%, #3a3550);
}

.datamodel__card-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.datamodel__card-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.datamodel__card-count .fa {
    margin-right: 0.35em;
    font-size: 11px;
    opacity: 0.8;
}

.datamodel__card-hidden {
    padding: 0.05rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Relation rows and "Referenced by" rows are buttons; strip the theme's button chrome. */
button.datamodel__row {
    width: 100%;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--dm-text) !important;
    font: inherit;
    line-height: 1.25 !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

button.datamodel__row:first-child {
    border-top: 0 !important;
}

button.datamodel__row:hover,
button.datamodel__row:focus-visible {
    background: var(--dm-canvas) !important;
    outline: none;
}

button.datamodel__row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--dm-edge-active);
}

.datamodel__row--incoming .datamodel__row-name {
    font-family: inherit;
    font-size: 12px;
}

.datamodel__row--incoming.is-hidden-target {
    color: var(--dm-muted) !important;
}

.datamodel__row--incoming.is-hidden-target .datamodel__row-kind {
    color: var(--dm-permission);
}

.datamodel__detail-hidden {
    margin: 0.3rem 0 0.6rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    background: var(--dm-canvas);
    color: var(--dm-muted);
    font-size: 12px;
    line-height: 1.4;
}

.datamodel__detail-hidden-summary {
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}

.datamodel__detail-hidden-summary::-webkit-details-marker {
    display: none;
}

.datamodel__detail-hidden-summary::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin: 0 0.5rem 0.1rem 0.1rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.datamodel__detail-hidden[open] .datamodel__detail-hidden-summary::before {
    transform: rotate(45deg);
}

.datamodel__detail-hidden[open] .datamodel__detail-hidden-summary {
    margin-bottom: 0.2rem;
}

.datamodel__detail-hidden-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.datamodel__detail-show {
    flex-shrink: 0;
    padding: 0.15rem 0.55rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--dm-edge-active) !important;
    font: inherit;
    font-size: 12px !important;
    font-weight: 600;
    cursor: pointer;
}

.datamodel__detail-show:hover,
.datamodel__detail-show:focus-visible {
    background: var(--dm-edge-active) !important;
    border-color: var(--dm-edge-active) !important;
    color: #fff !important;
    outline: none;
}

.datamodel__badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Model-kind pill: an icon instead of a word, so the header keeps room for the title. */
.datamodel__badge--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    padding: 0;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.datamodel__legend-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    font-size: 12px;
    color: var(--dm-text);
}

.datamodel__badge--muted {
    margin-left: 0.4rem;
    background: rgba(111, 109, 130, 0.15);
    color: var(--dm-muted);
    text-transform: none;
    letter-spacing: 0;
}

.datamodel__expand {
    display: inline-flex !important; /* the theme sizes and pads buttons by their text */
    align-items: center;
    justify-content: center;
    width: 1.6rem !important;
    min-width: 1.6rem !important;
    height: 1.6rem !important;
    min-height: 1.6rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    line-height: 1 !important;
    cursor: pointer;
    flex-shrink: 0;
}

/* The chevron is a square with two borders, rotated: its visible strokes sit off the box centre, to
   the right when pointing right and below when pointing down. Shift the box the other way. */
.datamodel__expand .datamodel__chevron {
    transform: translateX(-1.5px) rotate(-45deg);
}

.datamodel__card .datamodel__expand[aria-expanded="true"] .datamodel__chevron {
    /* outranks the shared aria-expanded rotate rule further down */
    transform: translateY(-1px) rotate(45deg);
}

.datamodel__expand:hover {
    background: rgba(255, 255, 255, 0.34) !important;
}

.datamodel__chevron {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.datamodel__expand[aria-expanded="true"] .datamodel__chevron,
.datamodel__types-toggle[aria-expanded="true"] .datamodel__chevron {
    transform: rotate(45deg);
}

.datamodel__card-body {
    padding: 0.4rem 0 0.5rem;
    font-size: 12.5px;
}

.datamodel__rows {
    display: flex;
    flex-direction: column;
}

.datamodel__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 26px;
    padding: 0.15rem 0.75rem;
    border-top: 1px solid rgba(226, 224, 234, 0.7);
    line-height: 1.25;
}

.datamodel__row:first-child {
    border-top: 0;
}

.datamodel__row--relation,
.datamodel__row--schema-store {
    cursor: pointer;
}

@keyframes datamodel-row-flash {
    0% { background: #ffe9a8; }
    70% { background: #ffe9a8; }
    100% { background: transparent; }
}

.datamodel__row.is-highlighted {
    animation: datamodel-row-flash 4s ease-out forwards;
    box-shadow: inset 3px 0 0 var(--dm-permission);
}

.datamodel__row--relation:hover,
.datamodel__row--schema-store:hover {
    background: var(--dm-canvas);
}

/* Rows in the detail panel are not buttons; keep the same look. */
.datamodel__detail .datamodel__row--schema {
    padding-left: 0.6rem;
}

.datamodel__row--bookkeeping {
    color: var(--dm-muted);
}

.datamodel__row--schema {
    padding-left: 1rem;
}

.datamodel__row-name {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* With "API field names" on the rows name the fields as the API does, in code. */
.datamodel--field-names .datamodel__row-name {
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

.datamodel__row--schema .datamodel__row-name {
    font-family: inherit;
    font-size: 12px;
}

.datamodel__required {
    margin-left: 0.15rem;
    color: #d33;
    font-weight: 700;
}

.datamodel__row-kind {
    flex-shrink: 0;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--dm-muted);
}

.datamodel__row--relation .datamodel__row-kind,
.datamodel__row--schema-store .datamodel__row-kind {
    color: var(--dm-edge-active);
    font-weight: 500;
}

.datamodel__port {
    position: absolute;
    right: -5px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dm-edge-active);
    border: 1.5px solid #fff;
    transform: translateY(-50%);
}

/* ---------- types ---------- */

.datamodel__types {
    border-top: 1px solid var(--dm-border);
    margin-top: 0.3rem;
}

.datamodel__types-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.75rem !important;
    border: 0;
    background: transparent !important;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--dm-text) !important;
    cursor: pointer;
}

.datamodel__types-toggle:hover {
    background: var(--dm-canvas) !important;
}

.datamodel__types-toggle .datamodel__chevron {
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.15rem;
    color: var(--dm-muted);
}

.datamodel__type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 0.6rem 0.5rem;
}

.datamodel__type-group {
    flex-basis: 100%;
    margin-top: 0.3rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dm-muted);
}

.datamodel__type {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.2rem 0.5rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px;
    background: var(--dm-card) !important;
    font: inherit;
    font-size: 12px;
    line-height: 1.3 !important;
    color: var(--dm-text) !important;
    text-align: left;
    cursor: pointer;
}

.datamodel__type-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.datamodel__type:hover {
    border-color: var(--dm-edge-active) !important;
}

.datamodel__type.is-active {
    background: var(--dm-edge-active) !important;
    border-color: var(--dm-edge-active) !important;
    color: #fff !important;
}

.datamodel__schema {
    margin: 0 0.6rem 0.4rem;
    padding: 0.4rem 0;
    border: 1px solid var(--dm-border);
    border-radius: 6px;
    background: var(--dm-canvas);
}

.datamodel__schema-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.6rem 0.3rem;
    font-weight: 600;
    font-size: 12px;
}

.datamodel__schema-description,
.datamodel__schema-status {
    margin: 0;
    padding: 0 0.6rem 0.3rem;
    font-size: 12px;
    color: var(--dm-muted);
}

.datamodel__schema-retry,
.datamodel__status-action {
    margin-left: 0.3rem;
    padding: 0.1rem 0.55rem !important;
    border: 1px solid var(--dm-edge-active) !important;
    border-radius: 999px !important;
    background: var(--dm-card) !important;
    font: inherit;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--dm-edge-active) !important;
    cursor: pointer;
}

.datamodel__schema-retry:hover,
.datamodel__status-action:hover,
.datamodel__schema-retry:focus-visible,
.datamodel__status-action:focus-visible {
    background: var(--dm-edge-active) !important;
    color: #fff !important;
    outline: none;
}

.datamodel__schema .datamodel__row {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    border-top-color: rgba(226, 224, 234, 0.9);
}

/* ---------- materials and stages inside a type panel ---------- */

.datamodel__materials {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--dm-border);
}

.datamodel__material {
    padding: 0.3rem 0.6rem;
    border-top: 1px solid rgba(226, 224, 234, 0.9);
    font-size: 12px;
}

.datamodel__material-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.datamodel__material-dot {
    width: 0.55rem;
    height: 0.55rem;
    border: 1.5px solid var(--dm-muted);
    border-radius: 50%;
    flex-shrink: 0;
}

.datamodel__material.is-required .datamodel__material-dot {
    border-color: var(--dm-edge-active);
    background: var(--dm-edge-active);
}

.datamodel__material-order {
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--dm-edge-active);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1rem;
}

.datamodel__material-title {
    font-weight: 600;
}

.datamodel__material-meta,
.datamodel__material-source-label,
.datamodel__material-completion,
.datamodel__material-requirement {
    color: var(--dm-muted);
}

.datamodel__material-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.datamodel__material-source-label {
    margin-right: 0.15rem;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.datamodel__source-chip {
    padding: 0.1rem 0.5rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px !important;
    background: var(--dm-card) !important;
    font: inherit;
    font-size: 12px !important;
    color: var(--dm-text) !important;
    cursor: pointer;
}

.datamodel__source-chip:hover,
.datamodel__source-chip:focus-visible {
    border-color: var(--dm-edge-active) !important;
    color: var(--dm-edge-active) !important;
    outline: none;
}

.datamodel__material-completion,
.datamodel__material-requirement {
    margin-top: 0.2rem;
}

.datamodel__material-requirement {
    padding: 0.3rem 0.6rem 0;
}

/* ---------- card footer ---------- */

.datamodel__card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.8rem;
    margin-top: 0.4rem;
    padding: 0.45rem 0.75rem 0;
    border-top: 1px solid var(--dm-border);
    font-size: 12px;
}

.datamodel__link {
    color: var(--dm-edge-active) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.datamodel__link:hover {
    text-decoration: underline !important;
}

.datamodel__link::after {
    content: " \2197";
    font-size: 0.65em;
}

.datamodel__permission-note {
    flex-basis: 100%;
    color: var(--dm-permission);
    font-weight: 500;
}

/* ---------- detail sheet ---------- */

.datamodel__detail {
    flex: 0 0 22rem;
    width: 22rem;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 0.9rem 0.9rem;
    background: var(--dm-card);
    border: 1px solid var(--dm-border);
    border-radius: 0.6rem;
    font-size: 13px;
    cursor: auto;
    user-select: text;
    -webkit-user-select: text;
}

.datamodel__detail .datamodel__types {
    margin: 0.5rem -0.9rem 0;
    padding: 0 0.3rem;
}

.datamodel__detail .datamodel__schema {
    margin: 0 0.3rem 0.4rem;
}

/* Inside the chip list the schema takes a full row directly below the active chip. */
.datamodel__type-list .datamodel__schema {
    flex-basis: 100%;
    width: 100%;
    margin: 0.2rem 0 0.45rem;
    border-color: var(--dm-edge-active);
}

.datamodel__detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    padding-left: 0.6rem;
    border-left: 4px solid var(--dm-accent);
}

.datamodel__detail-title {
    font-size: 15px;
}

.datamodel__detail-close,
.datamodel__detail-minimize,
.datamodel__shortcuts-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.7rem !important; /* the theme sizes buttons by their text; this one is a circle */
    min-width: 1.7rem !important;
    height: 1.7rem !important;
    min-height: 1.7rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--dm-canvas) !important;
    color: var(--dm-muted) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
}

.datamodel__detail-close .fa,
.datamodel__detail-minimize .fa,
.datamodel__shortcuts-close .fa {
    line-height: 1;
}

.datamodel__detail-close:hover,
.datamodel__detail-minimize:hover,
.datamodel__shortcuts-close:hover {
    background: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.datamodel__detail-meta {
    margin: 0 0 0.3rem;
    font-size: 12px;
    color: var(--dm-muted);
}

.datamodel__detail-description {
    margin: 0.3rem 0 0.5rem;
    line-height: 1.45;
}

.datamodel__detail-permission {
    margin: 0.3rem 0 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
    background: rgba(224, 123, 0, 0.1);
    line-height: 1.4;
}

.datamodel__detail-links {
    display: flex;
    gap: 0.8rem;
    margin: 0;
}

.datamodel__detail-api {
    margin-top: 0.4rem;
}

.datamodel__detail-api-link {
    color: var(--dm-edge-active) !important;
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    text-decoration: none !important;
}

.datamodel__detail-api-link:hover {
    text-decoration: underline !important;
}

/* ---------- legend + status ---------- */

/* A closed pill until opened; open, it lists every encoding without covering more than it must. */
.datamodel__legend {
    position: absolute;
    left: 0.75rem;
    bottom: 0.6rem;
    z-index: 4;
    max-width: calc(100% - 1.5rem);
    padding: 0.3rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--dm-border);
    font-size: 12px;
    color: var(--dm-muted);
    cursor: default;
}

.datamodel__legend:empty {
    display: none;
}

.datamodel__legend-summary {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font: inherit;
    font-size: 12px !important;
    font-weight: 600;
    line-height: inherit !important;
    color: var(--dm-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
}

.datamodel__legend:not(.is-open) .datamodel__legend-items {
    display: none;
}

.datamodel__legend-summary:focus-visible {
    outline: 2px solid var(--dm-edge-active);
    outline-offset: 2px;
    border-radius: 0.3rem;
}

.datamodel__legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
}

/* Open, it is one row as wide as it needs: the word "Legend" first, the items running on beside it
   as inline content, wrapping when the viewport is narrower. The divider and the spacing sit on
   the items, not on the button, which the theme styles with rules of its own. */
.datamodel__legend.is-open .datamodel__legend-items {
    display: inline;
    margin-left: 0.8rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--dm-border);
    line-height: 1.9;
}

.datamodel__legend.is-open .datamodel__legend-item {
    margin-right: 0.8rem;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
}

.datamodel__legend.is-open .datamodel__legend-item > * {
    vertical-align: middle;
}

.datamodel__legend-swatch {
    display: inline-block;
    width: 0.95rem;
    height: 0.85rem;
    border: 1px solid var(--dm-border);
    border-radius: 3px;
    background: var(--dm-accent);
}

.datamodel__legend-swatch--dashed {
    background: #fff;
    border: 1px dashed var(--dm-muted);
    box-shadow: none;
}

.datamodel__legend-required {
    color: #d33;
    font-weight: 700;
}

.datamodel__legend-line--permission.is-inferred {
    opacity: 0.22;
}

.datamodel__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.datamodel__legend-line {
    display: inline-block;
    width: 1.4rem;
    border-top: 2px solid var(--dm-edge);
}

.datamodel__legend-line--m2m {
    border-top-style: dashed;
}

.datamodel__legend-line--generic {
    border-top-style: dotted;
}

.datamodel__legend-line--permission {
    border-top: 6px solid var(--dm-permission);
    border-radius: 3px;
    opacity: 0.45;
}

.datamodel__status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.6rem;
    padding: 0.35rem 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--dm-muted);
}

.datamodel__status.is-error {
    color: #c62828;
}

/* ---------- modal shell (mirrors coordinate-visualization.css) ---------- */

.datamodel-modal__wrapper {
    display: none;
    z-index: 10010;
}

body.datamodel-modal-open {
    overflow: hidden !important; /* the page must not scroll behind the dialog */
}

.datamodel-modal__modal {
    box-sizing: border-box;
    height: 96vh;
    max-height: 96vh;
    max-width: 1600px;
    width: min(96vw, 1600px);
}

.datamodel-modal__modal .generic-modal__header--branded {
    flex-shrink: 0;
    padding-bottom: 1rem !important;
    padding-top: 1.1rem !important;
}

.datamodel-modal__modal .generic-modal__header--branded > div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.datamodel-modal__modal .generic-modal__header--branded .generic-modal__title {
    line-height: 1.2 !important;
}

.datamodel-modal__subtitle {
    margin: 0;
    font-size: 14px;
}

.datamodel-modal__body {
    flex: 1;
    min-height: 0;
    /* The theme's modal puts a 1rem flex gap under the header and 1.5rem padding at the bottom; pull the
       body into both so the toolbar sits 0.55rem under the header (its own gap to the canvas) and the
       status line sits just inside the bottom edge. */
    margin-top: -0.7rem !important;
    margin-bottom: -0.95rem !important;
    padding-top: 0 !important;
    overflow: hidden !important;
}

.datamodel-modal__root {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.datamodel-modal__footer {
    display: none !important;
}

body.datamodel-modal-open {
    overflow: hidden !important;
}

.datamodel:fullscreen {
    padding: 0.75rem;
    background: var(--dm-card);
}

/* ---------- compact preview inside help modals ---------- */

.help-modal__datamodel-preview.active {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.help-modal__datamodel-preview-caption {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1.5rem;
    margin: 0 0 0.4rem !important;
    font-size: 13px;
    color: var(--dm-muted, #6f6d82);
}

.help-modal__datamodel-preview-caption > span {
    flex: 1 1 24rem;
}

.help-modal__datamodel-preview-open {
    display: inline !important;
    width: auto !important;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font: inherit !important;
    font-weight: 600 !important;
    color: var(--dm-edge-active, #51459d) !important;
    cursor: pointer;
    text-decoration: underline;
}

/* The Graph tab fills the modal: while it is active the modal takes 92dvh and the preview grows by
   flex into whatever the header, tabs and caption leave, so it can never be taller than the body
   and never puts a scrollbar on it. */
.help-modal__wrapper .help-modal__modal:has(.help-modal__datamodel-preview.active) {
    height: 92dvh;
    max-height: 92dvh;
}

.help-modal__wrapper .help-modal__modal:has(.help-modal__datamodel-preview.active) .help-modal__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.help-modal__datamodel-preview-root {
    flex: 1 1 auto;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}

/* Inside the preview root the diagram grows by flex too; a percentage height would not resolve here. */
.help-modal__datamodel-preview-root > .datamodel {
    flex: 1 1 auto;
    height: auto;
}

.datamodel--compact .datamodel__viewport {
    border: 1px solid var(--dm-border);
}

/* `background: 'plain'` (`?background=plain`): a white viewport without the dotted grid, the outline or the
   rounded corners, for a page that frames the diagram itself. */
.datamodel--plain .datamodel__viewport {
    background-color: var(--dm-card);
    background-image: none;
    border: 0;
    border-radius: 0;
}

.datamodel__compact-reset {
    position: absolute !important; /* the help-modal theme forces position: relative on buttons */
    top: 0.6rem !important;
    right: 0.6rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px !important;
    background: var(--dm-card) !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--dm-text) !important;
    cursor: pointer;
}

.datamodel__compact-reset:hover,
.datamodel__compact-reset:focus-visible {
    border-color: var(--dm-edge-active) !important;
    background: var(--dm-canvas) !important;
    outline: none;
}

.datamodel__compact-hint,
.datamodel__compact-status {
    position: absolute;
    right: 0.6rem;
    bottom: 0.45rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--dm-border);
    font-size: 12px;
    color: var(--dm-muted);
    pointer-events: none;
}

.datamodel__compact-status {
    right: auto;
    bottom: auto;
    left: 0.6rem;
    top: 0.6rem;
    z-index: 4;
    pointer-events: auto;
}

.datamodel__compact-status.is-error {
    color: #c62828;
}

@media screen and (max-width: 760px) {
    .help-modal__wrapper .help-modal__modal:has(.help-modal__datamodel-preview.active) {
        height: 100%;
        max-height: 100%;
    }
}

/* ---------- triggers ---------- */

.help-modal__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    width: 100%;
    padding-right: 3rem;
}

.help-modal__title-row .help-modal__title {
    margin: 0 !important;
}

.header__help .datamodel-modal__button--open svg {
    color: var(--primary, #8122a1);
}

.dropdown__block--compact {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}

.dropdown__external-icon {
    margin-left: 0.3rem;
    font-size: 0.7em;
    opacity: 0.7;
}

.tooltip.datamodel__bs-tooltip {
    --bs-tooltip-zindex: 10020;
    z-index: 10020;
    pointer-events: none; /* a hint must never sit between the pointer and a menu item */
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 12px;
}

.tooltip.datamodel__tip {
    position: absolute;
    max-width: 22rem;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.tooltip.datamodel__tip .tooltip-inner {
    max-width: 22rem;
    text-align: left;
}


/* ---------- standalone page ---------- */

.datamodel-page {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-family: Inter, "Segoe UI", sans-serif;
}

.datamodel-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.5rem 0.9rem;
    /* The portal's own gradient (private purple, public teal, super violet) from the theme tokens. */
    background: linear-gradient(90.9deg, var(--gradient-color1, #8122a1) 54.69%, var(--gradient-color2, #51459d) 100%);
    color: #fff;
}

.datamodel-page__title {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

.datamodel-page__title .fa {
    margin-right: 0.4rem;
    font-size: 0.95em;
}

.datamodel-page__heading {
    flex: 1 1 auto; /* the title block takes the width the links leave, so the subtitle stays on one line */
    min-width: 0;
}

/* The logo and the domain, so a screenshot or a printout of the page says where it came from. */
.datamodel-page__brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.6rem;
    align-self: center;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff !important;
    text-decoration: none !important;
}

.datamodel-page__brand:hover {
    opacity: 0.85;
}

.datamodel-page__brand:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 0.4rem;
}

/* The logo's own purple would sink into the header's, so it sits on white. */
.datamodel-page__brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.6rem;
    background: #fff;
}

.datamodel-page__brand-mark img {
    width: 1.75rem;
    height: auto;
}

.datamodel-page__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.datamodel-page__brand-name {
    font-size: 15px;
    font-weight: 700;
}

.datamodel-page__brand-domain {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.datamodel-page__subtitle {
    margin: 0.25rem 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.datamodel-page__links {
    display: flex;
    gap: 1rem;
    font-size: 14px;
}

.datamodel-page__links a {
    color: #fff !important;
    text-decoration: underline !important;
}

.datamodel-page__main {
    flex: 1;
    min-height: 0;
    padding: 0.3rem 1rem 0.55rem;
    display: flex;
}

.datamodel-page--embed .datamodel-page__main {
    padding: 0.25rem;
}

/* A plain diagram fills the page edge to edge: the page around it is the frame. */
.datamodel-page__main:has(.datamodel--plain) {
    padding: 0;
}

.datamodel-page__root {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 760px) {
    /* The theme drops every modal 88px at phone widths; ours is a full-screen sheet instead. */
    .datamodel-modal__wrapper {
        padding-top: 0 !important;
        align-content: stretch !important;
        align-items: stretch !important;
    }

    .datamodel-modal__modal {
        height: 100dvh; /* 100vh overshoots behind the mobile browser chrome */
        max-height: 100dvh;
        width: 100vw;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        border-radius: 0 !important;
    }

    .datamodel-modal__modal .generic-modal__header--branded {
        margin: -0.75rem -0.75rem 0 !important;
        padding: 0.8rem 3rem 0.7rem 0.9rem !important;
    }

    .datamodel-modal__modal .generic-modal__title {
        font-size: 1.1rem !important;
    }

    .datamodel-modal__subtitle {
        display: none; /* the canvas needs the height; the same text opens the page's header */
    }

    .datamodel-modal__body {
        margin-top: 0 !important;
        margin-bottom: -0.4rem !important;
    }

    .datamodel__tb-label,
    .datamodel__tb-divider {
        display: none;
    }

    .datamodel__toolbar {
        gap: 0.3rem 0.35rem;
    }

    .datamodel__status {
        white-space: normal;
    }

    .datamodel-page__subtitle {
        display: none; /* the canvas needs the height more than the intro does on a phone */
    }

    /* Logo, domain and links share the top line; the title goes under them. */
    .datamodel-page__header {
        align-items: center;
        gap: 0.6rem 1rem;
        padding: 0.75rem 1rem;
    }

    .datamodel-page__brand {
        gap: 0.5rem;
        padding-right: 0;
        border-right: 0;
    }

    .datamodel-page__brand-mark {
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
    }

    .datamodel-page__brand-mark img {
        width: 1.45rem;
    }

    .datamodel-page__brand-name {
        display: none; /* the title under it says BrainSTEM's page; the domain says whose */
    }

    .datamodel-page__brand-domain {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
    }

    .datamodel-page__links {
        gap: 0.75rem;
        font-size: 13px;
    }

    .datamodel-page__heading {
        order: 1;
        flex-basis: 100%;
    }

    .datamodel__search {
        flex: 1 1 8rem;
        min-width: 0;
        max-width: none;
    }

    /* Pinch and the keyboard cover zooming; fullscreen is the phone's own job. */
    .datamodel__tool[data-action="zoom-in"],
    .datamodel__tool[data-action="zoom-out"],
    .datamodel__tool[data-action="fullscreen"],
    .datamodel__zoom-level,
    .datamodel__tb-group--view > .datamodel__tb-divider {
        display: none !important; /* the theme forces display on buttons */
    }

    .datamodel__menu-panel {
        max-width: calc(100vw - 1rem);
        min-width: 14rem;
    }

    /* Every control flows on its own so the rows fill up instead of each group starting a new line;
       the Overview / Full model switch stays one piece. */
    .datamodel__toolbar > .datamodel__tb-group:not(.datamodel__views):not(.datamodel__tb-group--intro),
    .datamodel--intro .datamodel__toolbar > .datamodel__tb-group--intro {
        display: contents; /* outranks the overview's own inline-flex further down */
    }

    .datamodel__tool,
    .datamodel__chip {
        padding: 0.4rem 0.55rem !important;
    }

    .datamodel__tool--icon {
        padding: 0.4rem 0.5rem !important;
    }

    .datamodel__menu-trigger {
        padding: 0.4rem 0.5rem 0.4rem 0.6rem !important;
    }

    /* There is no keyboard to take the shortcuts. */
    .datamodel__tool[data-action="shortcuts"] {
        display: none !important; /* the theme forces display on buttons */
    }

    /* Export keeps its icon and caret; its name stays for screen readers. */
    .datamodel__tb-group--export .datamodel__menu {
        margin-left: auto;
    }

    .datamodel__tb-group--export .datamodel__menu-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .datamodel__legend {
        left: 0.4rem;
        bottom: 0.4rem;
        max-width: calc(100% - 0.8rem);
        padding: 0.3rem 0.5rem;
    }

    .datamodel__legend-items {
        gap: 0.15rem 0.6rem;
    }

    /* "Permissions" and "Isolate" instead of the full chip labels. */
    .datamodel__chip-label {
        font-size: 0 !important;
    }

    .datamodel__chip-label::after {
        content: attr(data-short);
        font-size: 13px;
    }

    .datamodel__body {
        flex-direction: column;
    }

    .datamodel__detail {
        flex: 0 0 auto;
        width: auto;
        max-height: 45%;
    }
}

@media screen and (max-width: 380px) {
    /* The narrowest phones: a step smaller, so the logo, the domain and both links still share a line. */
    .datamodel-page__header {
        column-gap: 0.6rem;
    }

    .datamodel-page__brand {
        gap: 0.4rem;
    }

    .datamodel-page__brand-domain,
    .datamodel-page__links {
        font-size: 12px;
    }

    .datamodel-page__links {
        gap: 0.6rem;
    }
}

/* ---------- paths, hub layout, isolate depth, shortcuts ---------- */

.datamodel__card.is-path {
    box-shadow: 0 0 0 3px var(--dm-permission), 0 8px 20px rgba(26, 27, 28, 0.18);
    z-index: 2;
}

.datamodel__card.is-path.is-selected {
    box-shadow: 0 0 0 3px var(--dm-edge-active), 0 0 0 6px rgba(224, 123, 0, 0.5), 0 8px 20px rgba(26, 27, 28, 0.18);
}

.datamodel__edge.is-path .datamodel__edge-line {
    stroke: var(--dm-permission) !important;
    stroke-width: 3 !important;
    opacity: 1 !important;
}

/* Group headings are buttons that centre the view on their column or band. */
button.datamodel__group-label {
    pointer-events: auto; /* the heading itself lets pans start through it */
    display: inline-block !important;
    margin: 0 !important;
    padding: 0.05rem 0.3rem !important;
    border: 0 !important;
    border-radius: 0.3rem !important;
    background: transparent !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    color: var(--dm-accent) !important;
    cursor: pointer;
}

button.datamodel__group-label:hover,
button.datamodel__group-label:focus-visible {
    background: color-mix(in srgb, var(--dm-accent) 14%, transparent) !important;
    outline: none;
}

.datamodel__tool--depth[hidden] {
    display: none !important;
}

.datamodel__tool--depth .datamodel__tool-label {
    font-variant-numeric: tabular-nums;
}

/* "Path to…" in the detail panel */
.datamodel__path {
    margin: 0.4rem 0 0.6rem;
    padding: 0.45rem 0.55rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--dm-canvas);
    font-size: 12px;
}

.datamodel__path-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.datamodel__path-hops {
    margin: 0;
    padding-left: 1.1rem;
}

.datamodel__path-hop {
    margin: 0.2rem 0;
    line-height: 1.4;
}

.datamodel__path-via {
    margin-right: 0.2rem;
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    color: var(--dm-muted);
}

.datamodel__path-node {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font: inherit !important;
    font-weight: 600 !important;
    color: var(--dm-edge-active) !important;
    text-decoration: underline;
    cursor: pointer;
}

.datamodel__path-label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--dm-text);
}

.datamodel .datamodel__detail .datamodel__path-input[type="search"] {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    padding: 0.35rem 0.6rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 0.4rem !important;
    background: var(--dm-card) !important;
    font: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--dm-text) !important;
}

.datamodel .datamodel__detail .datamodel__path-input[type="search"]:focus {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 1px !important;
}

.datamodel__path-options {
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
}

.datamodel__path-option {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem !important;
    border: 0 !important;
    border-radius: 0.3rem !important;
    background: transparent !important;
    font: inherit !important;
    font-size: 12px !important;
    text-align: left;
    color: var(--dm-text) !important;
    cursor: pointer;
}

.datamodel__path-option:hover,
.datamodel__path-option:focus-visible {
    background: var(--dm-card) !important;
    outline: none;
}

/* Keyboard shortcuts sheet */
.datamodel__shortcuts {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 60;
    width: min(28rem, calc(100% - 2rem));
    max-height: calc(100% - 2rem);
    overflow: auto;
    padding: 0.9rem 1rem 1rem;
    transform: translate(-50%, -50%);
    background: var(--dm-card);
    border: 1px solid var(--dm-border);
    border-radius: 0.6rem;
    box-shadow: 0 0.6rem 1.5rem rgba(26, 27, 28, 0.2);
    font-size: 13px;
    color: var(--dm-text);
}

.datamodel__shortcuts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 14px;
}

.datamodel__shortcuts-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.9rem;
    align-items: center;
    margin: 0;
}

.datamodel__shortcuts-list dd {
    margin: 0;
}

.datamodel__kbd {
    display: inline-block;
    padding: 0.1rem 0.45rem !important;
    border: 1px solid var(--dm-border) !important;
    border-bottom-width: 2px !important;
    border-radius: 0.3rem !important;
    background: var(--dm-canvas) !important; /* the theme paints kbd white on dark */
    color: var(--dm-text) !important;
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: nowrap;
}

/* ---------- views: overview, permissions, full model ---------- */

.datamodel__views {
    gap: 0;
    padding: 2px;
    border: 1px solid var(--dm-border);
    border-radius: 999px;
    background: var(--dm-card);
}

.datamodel__view {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 !important;
    padding: 0.35rem 0.75rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    color: var(--dm-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.datamodel__view .fa {
    font-size: 0.85em;
    opacity: 0.75;
}

.datamodel__view:hover {
    background: var(--dm-canvas) !important;
}

.datamodel__view:focus-visible {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 2px !important;
}

.datamodel__view[aria-pressed="true"] {
    background: var(--dm-edge-active) !important;
    color: #fff !important;
}

.datamodel__view:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The layout, layer and mode controls arrange the full model; the short views have nothing to arrange. */
.datamodel--intro .datamodel__tb-group--full,
.datamodel--intro .datamodel__full-only,
.datamodel--intro .datamodel__tb-group--full + .datamodel__tb-divider {
    display: none !important; /* the theme forces display on buttons */
}

/* The data graph opens and closes its boxes of entries with the full model's Expand all / Collapse all. */
.datamodel--records .datamodel__tool.datamodel__full-only {
    display: inline-flex !important;
}

.datamodel--records .datamodel__tb-divider.datamodel__full-only {
    display: inline-block !important;
}

.datamodel--intro .datamodel__expand {
    display: none !important;
}

.datamodel--intro .datamodel__card-header {
    padding-left: 0.8rem;
}

/* `locked: true` (`?locked=1`): clicking a model does nothing, so its card offers no expand button and reads
   as part of the canvas the reader drags. */
.datamodel--locked .datamodel__expand {
    display: none !important;
}

.datamodel--locked .datamodel__card-header {
    padding-left: 0.8rem;
}

.datamodel--locked .datamodel__card,
.datamodel--locked .datamodel__card-header {
    cursor: inherit;
}

.datamodel__card.has-intro-body .datamodel__card-header {
    border-radius: 7px 7px 0 0;
}

.datamodel__intro-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.45rem 0.55rem 0.5rem;
}

.datamodel__detail .datamodel__fields-section .datamodel__rows {
    margin: 0 0.3rem 0.4rem;
    border: 1px solid var(--dm-border);
    border-radius: 0.4rem;
    overflow: hidden;
}

.datamodel__intro-type {
    max-width: 100%;
    overflow: hidden;
    padding: 0.15rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--dm-accent) 45%, var(--dm-card));
    border-radius: 999px;
    background: color-mix(in srgb, var(--dm-accent) 22%, var(--dm-card));
    font-size: 11px;
    line-height: 1.3;
    color: var(--dm-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datamodel__intro-type--more {
    border-color: transparent;
    background: transparent;
    color: var(--dm-muted);
}

.datamodel__edge--tree .datamodel__edge-line {
    stroke-linejoin: round;
}

/* "Groups" rather than "belongs to": a cohort groups subjects, a collection groups sessions. */
.datamodel__edge--groups .datamodel__edge-line {
    stroke-dasharray: 5 4;
}

/* What the models refer to beyond the tree: every link drawn as a thin solid line, the selected model's lit. Dashes
   are kept for the tree's "groups" lines and, in the full model, many-to-many relations. */
.datamodel__edge--uses .datamodel__edge-line {
    stroke: var(--dm-edge);
    stroke-width: 1.5;
    stroke-linejoin: round;
    opacity: 0.65;
}

.datamodel__edge--uses.is-active .datamodel__edge-line {
    stroke: var(--dm-edge-active);
    stroke-width: 2.5;
    opacity: 1;
    filter: none;
}

.datamodel__marker--uses path {
    fill: var(--dm-edge);
}

.datamodel__marker--uses.datamodel__marker--active path {
    fill: var(--dm-edge-active);
}

.datamodel__tb-group--intro {
    display: none;
}

.datamodel--intro .datamodel__tb-group--intro {
    display: inline-flex;
}


.datamodel__connected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0.5rem 0 0.2rem;
}

.datamodel__legend-line--groups {
    border-top: 2px dashed var(--dm-edge);
}

.datamodel__legend-line--uses {
    border-top: 2px solid var(--dm-edge-active);
}

.datamodel--access .datamodel__edge--tree .datamodel__edge-line {
    stroke: var(--dm-permission);
    opacity: 0.75;
}

.datamodel--access .datamodel__marker--tree path {
    fill: var(--dm-permission);
}

.datamodel--access .datamodel__edge--tree.is-active .datamodel__edge-line {
    stroke: var(--dm-permission);
    opacity: 1;
    filter: none;
}

.datamodel__note {
    position: absolute;
    box-sizing: border-box;
    padding: 0.6rem 0.8rem 0.7rem;
    border: 1px solid var(--dm-border);
    border-left: 3px solid var(--dm-edge-active);
    border-radius: 8px;
    background: var(--dm-card);
    font-size: 12px;
    line-height: 1.45;
    cursor: auto;
    user-select: text;
    -webkit-user-select: text;
}

.datamodel--access .datamodel__note {
    border-left-color: var(--dm-permission);
}

.datamodel__note-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
    font-size: 13px;
}

.datamodel__note-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--dm-edge-active);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.datamodel--access .datamodel__note-number {
    background: var(--dm-permission);
}

.datamodel__note-text {
    margin: 0;
    color: var(--dm-muted);
}

.datamodel__roles-title {
    margin: 0.6rem 0 0.2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.datamodel__roles {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.7rem;
    margin: 0 0 0.7rem;
}

.datamodel__role {
    font-weight: 600;
}

.datamodel__role-can {
    margin: 0;
    line-height: 1.4;
}

.datamodel__open-full {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0.7rem !important;
    padding: 0.45rem 0.8rem !important;
    border: 1px solid var(--dm-edge-active) !important;
    border-radius: 999px !important;
    background: var(--dm-card) !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    color: var(--dm-edge-active) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.datamodel__open-full:hover,
.datamodel__open-full:focus-visible {
    background: var(--dm-edge-active) !important;
    color: #fff !important;
}

.datamodel__legend-line--tree {
    border-top: 2px solid var(--dm-edge);
}

.datamodel--access .datamodel__legend-line--tree {
    border-top-color: var(--dm-permission);
}

@media screen and (max-width: 760px) {
    /* Beside the search field: the labels say enough without the icons. */
    .datamodel__views .datamodel__view .fa {
        display: none;
    }

    .datamodel__view {
        flex: 1;
        justify-content: center;
        padding: 0.4rem 0.6rem !important;
    }
}

/* ---------- minimized detail panel ---------- */

.datamodel__detail-header .datamodel__detail-minimize {
    margin-left: auto !important;
}

.datamodel__detail-tab {
    position: absolute !important; /* the theme forces position: relative on buttons */
    top: 0.6rem !important;
    right: 0.6rem !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    max-width: 16rem;
    margin: 0 !important;
    padding: 0.4rem 0.7rem !important;
    border: 1px solid var(--dm-border) !important;
    border-left: 4px solid var(--dm-accent) !important;
    border-radius: 0.5rem !important;
    background: var(--dm-card) !important;
    box-shadow: 0 1px 3px rgba(26, 27, 28, 0.08);
    font: inherit;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1;
    color: var(--dm-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.datamodel__detail-tab[hidden] {
    display: none !important; /* the theme forces display on buttons */
}

.datamodel__detail-tab:hover {
    border-color: var(--dm-edge-active) !important;
    border-left-color: var(--dm-accent) !important;
    background: var(--dm-canvas) !important;
}

.datamodel__detail-tab:focus-visible {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 2px !important;
}

.datamodel__detail-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datamodel__detail-belongs {
    margin: 0.2rem 0 0.4rem;
    color: var(--dm-text);
}

.datamodel__detail .datamodel__fields-section {
    margin-top: 0.7rem;
}

/* ---------- record lens: the overview filled with a user's own entries ---------- */

/* The data graph is a mode of its own: no model search, no model views or layers. Their place in
   the toolbar is taken by the scope, which says which entry the counts are narrowed to. */
.datamodel--records .datamodel__search,
.datamodel--records .datamodel__views,
.datamodel--records .datamodel__tb-group--intro {
    display: none !important;
}

.datamodel__scope {
    display: none;
}

.datamodel--records .datamodel__scope {
    display: flex;
    flex: 1 1 12rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    min-width: 0;
    font-size: 13px;
}

.datamodel__crumb {
    max-width: 22rem;
    overflow: hidden;
    color: var(--dm-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.datamodel__crumb {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.3rem 0.6rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px !important;
    background: var(--dm-card) !important;
    color: var(--dm-edge-active) !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

button.datamodel__crumb:hover,
button.datamodel__crumb:focus-visible {
    border-color: var(--dm-edge-active) !important;
    background: var(--dm-canvas) !important;
    outline: none !important;
}

.datamodel__crumb.is-current {
    padding: 0.3rem 0.2rem;
    color: var(--dm-text);
    font-weight: 600;
}

.datamodel__crumb-gap {
    color: var(--dm-muted);
}

.datamodel__scope-steps {
    display: inline-flex;
    gap: 0.3rem;
    margin-right: 0.35rem;
}

.datamodel__scope-steps .datamodel__tool:disabled {
    opacity: 0.4;
    cursor: default;
}

.datamodel__scope-path {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    min-width: 0;
}

.datamodel__scope-hint {
    margin-left: 0.4rem;
    color: var(--dm-muted);
}

/* The heading around the diagram names the mode. */
.datamodel__heading--records,
.datamodel-host--records .datamodel__heading--model {
    display: none;
}

.datamodel-host--records .datamodel__heading--records {
    display: inline;
}

/* Under its name a card says how its entries stand to the entry in focus. */
.datamodel__card-scope {
    display: block;
    overflow: hidden;
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.85);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datamodel__card-scope[hidden] {
    display: none;
}

.datamodel--records .datamodel__card-title {
    line-height: 1.2;
}

/* A card that can list entries wears the chevron the full model uses to open a card. */
.datamodel--records .datamodel__card.is-listable .datamodel__expand {
    display: inline-flex !important;
    width: 1.3rem !important;
    min-width: 1.3rem !important;
    height: 1.3rem !important;
    min-height: 1.3rem !important;
}

.datamodel--records .datamodel__card.is-listable .datamodel__card-header {
    padding-left: 0.5rem;
}

.datamodel--records .datamodel__card-header {
    cursor: default;
}

.datamodel--records .datamodel__card.is-listable .datamodel__card-header {
    cursor: pointer;
}

.datamodel--records .datamodel__card-count {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.15s ease;
}

.datamodel.is-records-loading .datamodel__card-count {
    opacity: 0.5;
}

/* A model with nothing in scope stays in its place, faded, so the tree never reshuffles. */
.datamodel--records .datamodel__card.is-empty:not(.is-selected) .datamodel__card-header {
    background: color-mix(in srgb, var(--dm-accent) 38%, var(--dm-card));
}

/* Not narrowed by the entry in focus: legible, but clearly the background. */
.datamodel--records .datamodel__card.is-dimmed {
    opacity: 0.5;
}

.datamodel__legend-swatch--context {
    opacity: 0.5;
}

.datamodel__records {
    display: flex;
    flex-direction: column;
    margin: -0.4rem 0 -0.5rem; /* the rows run edge to edge inside the card body's padding */
}

/* A long list scrolls inside its card rather than stretching the tree: about six two-line rows. */
.datamodel__records-list {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    transition: opacity 0.15s ease;
}

.datamodel__records-list .datamodel__record {
    flex-shrink: 0;
}

.datamodel__records-list.is-loading {
    opacity: 0.55;
}

.datamodel__record {
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(226, 224, 234, 0.7);
}

.datamodel__records > .datamodel__record:first-child,
.datamodel__records-list:first-child > .datamodel__record:first-child {
    border-top: 0;
}

.datamodel__record.is-focus {
    background: color-mix(in srgb, var(--dm-accent) 14%, var(--dm-card));
    box-shadow: inset 3px 0 0 var(--dm-accent);
}

.datamodel__record-pick {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0 !important;
    min-height: 28px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.2rem 0.3rem 0.2rem 0.75rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--dm-text) !important;
    font: inherit;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.datamodel__record-pick:hover,
.datamodel__record-pick:focus-visible {
    background: var(--dm-canvas) !important;
    outline: none !important;
}

.datamodel__record-pick:focus-visible {
    box-shadow: inset 0 0 0 2px var(--dm-edge-active);
}

.datamodel__record.is-focus .datamodel__record-pick {
    font-weight: 600 !important;
    cursor: default;
}

.datamodel__record-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.datamodel__record-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datamodel__record-detail {
    width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 400;
    color: var(--dm-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datamodel__record-open {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.6rem 0 0.35rem;
    color: var(--dm-muted);
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.datamodel__record:hover .datamodel__record-open,
.datamodel__record.is-focus .datamodel__record-open,
.datamodel__record-open:focus-visible {
    opacity: 1;
}

.datamodel__record-open:hover,
.datamodel__record-open:focus-visible {
    color: var(--dm-edge-active);
    outline: none;
}

.datamodel__records-toggle,
.datamodel__records-more,
.datamodel__records-retry {
    align-self: stretch;
    min-height: 26px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.3rem 0.75rem !important;
    border: 0 !important;
    border-top: 1px solid rgba(226, 224, 234, 0.7) !important;
    border-radius: 0 0 7px 7px !important;
    background: transparent !important;
    color: var(--dm-edge-active) !important;
    font: inherit;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.datamodel__records-toggle[aria-expanded="true"] {
    border-top: 0 !important;
    border-bottom: 1px solid rgba(226, 224, 234, 0.7) !important;
    border-radius: 0 !important;
}

.datamodel__records-toggle:hover,
.datamodel__records-more:hover,
.datamodel__records-retry:hover,
.datamodel__records-toggle:focus-visible,
.datamodel__records-more:focus-visible,
.datamodel__records-retry:focus-visible {
    background: var(--dm-canvas) !important;
    outline: none !important;
}

.datamodel__records-more:disabled {
    opacity: 0.5;
    cursor: progress;
}

.datamodel__records-retry {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: underline;
}

.datamodel__records-note {
    margin: 0;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid rgba(226, 224, 234, 0.7);
    font-size: 12px;
    color: var(--dm-muted);
}

.datamodel__records-note.is-error {
    color: #b3261e;
}

.datamodel__records .datamodel__records-filter {
    box-sizing: border-box;
    width: calc(100% - 1rem) !important;
    min-height: 0 !important;
    height: 34px !important;
    margin: 0.5rem 0.5rem 0.45rem !important;
    padding: 0 0.65rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 7px !important;
    background: var(--dm-card) !important;
    color: var(--dm-text) !important;
    font: inherit;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
}

.datamodel__records .datamodel__records-filter::placeholder {
    color: var(--dm-muted);
    opacity: 1;
}

.datamodel__records .datamodel__records-filter:focus {
    border-color: var(--dm-edge-active) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dm-edge-active) 25%, transparent);
}

.datamodel__record-types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem 0.45rem;
}

.datamodel__record-type {
    display: inline-flex !important;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.12rem 0.45rem !important;
    border: 1px solid color-mix(in srgb, var(--dm-accent) 45%, var(--dm-card)) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--dm-accent) 14%, var(--dm-card)) !important;
    color: var(--dm-text) !important;
    font: inherit;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.datamodel__record-type[aria-pressed="true"] {
    border-color: var(--dm-accent) !important;
    background: var(--dm-accent) !important;
    color: #fff !important;
}

.datamodel__record-type:focus-visible {
    outline: 2px solid var(--dm-edge-active) !important;
    outline-offset: 1px !important;
}

.datamodel__record-type-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.datamodel__record-types-rest {
    font-size: 11px;
    color: var(--dm-muted);
}

/* The entry in focus, in the detail panel. */
.datamodel__record-fields {
    display: grid;
    grid-template-columns: minmax(5.5rem, max-content) 1fr;
    gap: 0.3rem 0.7rem;
    margin: 0.6rem 0 0.7rem;
    font-size: 12.5px;
}

.datamodel__record-fields dt {
    font-weight: 400;
    color: var(--dm-muted);
}

.datamodel__record-fields dd {
    margin: 0;
    min-width: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

a.datamodel__record-chip {
    display: inline-block;
    text-decoration: none;
}

span.datamodel__record-chip {
    cursor: default;
}

/* ---------- data graph: one entry in full ("Details") ---------- */

/* List / Details: one switch, its halves joined like the Overview / Full model switch. */
.datamodel__scope-mode {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0;
    margin-left: auto;
    padding: 2px;
    border: 1px solid var(--dm-border);
    border-radius: 999px;
    background: var(--dm-card);
}

@media screen and (max-width: 760px) {
    /* On a phone the scope takes its own row above the view tools: back and the crumbs on one line,
       the List / Details switch under them across the width, like the Overview / Full model switch. */
    .datamodel--records .datamodel__scope {
        flex: 1 1 100%;
        gap: 0.4rem 0.35rem;
    }

    .datamodel__scope-steps {
        flex-shrink: 0;
        margin-right: 0;
    }

    /* The crumbs stay on one line; the longest names give way to an ellipsis first. */
    .datamodel__scope-path {
        flex: 1 1 0;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .datamodel__crumb {
        flex: 0 1 auto;
        min-width: 0;
    }

    .datamodel__scope-path > .datamodel__crumb:first-child,
    .datamodel__crumb-gap {
        flex-shrink: 0;
    }

    .datamodel__scope-hint {
        display: none; /* no room on the crumb line; the box chevrons say the same */
    }

    .datamodel__scope-mode {
        flex: 1 1 100%;
        margin-left: 0; /* the halves split the row (see .datamodel__view above) */
    }
}

/* An entry in details scrolls inside its box, like a long list. */
.datamodel__entry {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0.5rem 0.75rem 0.6rem;
    font-size: 12px;
    transition: opacity 0.15s ease;
}

.datamodel__entry.is-loading {
    opacity: 0.55;
}

.datamodel__entry.is-focus {
    box-shadow: inset 3px 0 0 var(--dm-accent);
}

.datamodel__entry-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.datamodel__entry-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.datamodel__entry-title .datamodel__record-open {
    opacity: 1;
    padding: 0 0.1rem;
}

.datamodel__entry-focus {
    display: inline-flex !important; /* the theme sets display on buttons and collapses the space */
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.1rem 0.45rem !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 999px !important;
    background: var(--dm-card) !important;
    color: var(--dm-edge-active) !important;
    font: inherit;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.datamodel__entry-focus:hover,
.datamodel__entry-focus:focus-visible {
    border-color: var(--dm-edge-active) !important;
    background: var(--dm-edge-active) !important;
    color: #fff !important;
    outline: none !important;
}

.datamodel__entry-type {
    margin-bottom: 0.3rem;
    font-size: 11px;
    color: var(--dm-muted);
}

.datamodel__entry-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 36%) 1fr;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-top: 1px solid rgba(226, 224, 234, 0.7);
    line-height: 1.35;
}

.datamodel__entry-label {
    min-width: 0;
    font-size: 11px;
    color: var(--dm-muted);
    overflow-wrap: anywhere;
}

.datamodel__entry-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.datamodel__entry-value .datamodel__record-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datamodel__entry-more {
    align-self: center;
    font-size: 11px;
    color: var(--dm-muted);
}

/* ‹ › in the header of a box in details: step through its entries. */
.datamodel__entry-nav {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
}

.datamodel__entry-step {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    height: 1.35rem !important;
    min-height: 1.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer;
}

.datamodel__entry-step:hover:not(:disabled),
.datamodel__entry-step:focus-visible {
    background: rgba(255, 255, 255, 0.36) !important;
    outline: none !important;
}

.datamodel__entry-step:disabled {
    opacity: 0.35;
    cursor: default;
}

/* The help icon after a section heading: what the section is, on hover (the overview's former notes). */
.datamodel__group-help {
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
    padding: 0.1rem;
    border-radius: 50%;
    color: var(--dm-accent);
    font-size: 13px;
    opacity: 0.75;
    cursor: help;
    pointer-events: auto; /* the heading lets pans start through it; the icon must get the hover */
}

.datamodel__group-help:hover,
.datamodel__group-help:focus-visible {
    opacity: 1;
    outline: none;
}

.datamodel__group-help:focus-visible {
    box-shadow: 0 0 0 2px var(--dm-edge-active);
}

/* The Data graph item of the Tools menu: grey like the other tool icons, the primary colour on hover.
   Drawn with lines and boxes in currentColor, since the theme fills every path of those icons. */
.header__tools .header__action__dropdown svg.datagraph-menu-icon {
    flex-shrink: 0;
    color: #8d8b9f;
    transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .header__tools .header__action__dropdown a:hover svg.datagraph-menu-icon {
        color: var(--primary);
    }
}

/* The Interactive data model item of the Help menu: the icon grey like the tool icons, the primary colour
   on hover; the text keeps the menu's colour. */
.header__help .header__action__dropdown svg.datamodel-menu-icon {
    color: #8d8b9f;
    transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .header__help .header__action__dropdown a:hover svg.datamodel-menu-icon {
        color: var(--primary);
    }
}