/* Bulma companion stylesheet for ART-DECOR Next Generation Publication HTML output
   Goal: remove legacy styling and keep only tiny compatibility fixes.
   Bulma itself is loaded via CDN from the XSLT.
*/
/* 
* additional css to change
* - the primary color to #e16e22 #FE9410 overriding Bulma
* - the info color to #17A0D7 overriding Bulma
* KH 20260202
*/
:root {
    /* other primary color: ART-DECOR's orange */
    --bulma-primary-h: 33deg;
    --bulma-primary-l: 53%;
    /* less prominent info blue */
    --bulma-info-h: 197deg;
    --bulma-info-l: 81%;
    --bulma-info-s: 47%;
    /* Schriften gehoeren uns; die --bulma-family-* sind nur die Leitung, ueber die
       Bulmas eigene Komponenten dieselben Schnitte bekommen. Nie umgekehrt. KH 20260824 */
    --artdecor-font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --artdecor-font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
    --bulma-family-primary: var(--artdecor-font-body);
    --bulma-family-secondary: var(--artdecor-font-body);
    --bulma-family-code: var(--artdecor-font-mono);
}
/* ===================================================================
   ART-DECOR NextGen Design System Tokens & Layout Components
   KH 20260411
   =================================================================== */
:root {
    /* ── Spacing (4px base) ── */
    --artdecor-sp-1: 4px;
    --artdecor-sp-2: 8px;
    --artdecor-sp-3: 12px;
    --artdecor-sp-4: 16px;
    --artdecor-sp-5: 20px;
    --artdecor-sp-6: 24px;
    --artdecor-sp-8: 32px;
    --artdecor-sp-12: 48px;
    /* ── Navbar ── */
    --artdecor-navbar-height: 56px;
    /* ── Surfaces ── */
    --artdecor-bg-body: #f4f5f7;
    --artdecor-bg-surface: #ffffff;
    --artdecor-bg-subtle: #f8f9fb;
    --artdecor-bg-muted: #eef0f4;
    --artdecor-bg-cloudy: #f2e7fa;
    /* Bis 7.41.1 kamen diese fuenf Flaechen aus Bulma-Variablen (--bulma-light-*,
       --bulma-success-95, --bulma-info-95, --bulma-danger-95, --bulma-text-85). Die Werte
       sind unveraendert uebernommen - es sind unsere Flaechen, ein Bulma-Update darf sie
       nicht mehr verschieben. KH 20260824 */
    --artdecor-bg-label: #f3f4f6;         /* Labelspalte der Metatabellen */
    --artdecor-bg-healthcare: #e4f7ee;    /* Titelleiste Datensatz/Szenario */
    --artdecor-bg-terminology: #ecf5f8;   /* Titelleiste Terminologie */
    --artdecor-bg-technical: #ffe6eb;     /* technische Elementzeilen */
    --artdecor-bg-conf: #d0d4dc;          /* Konformitaetszelle */
    /* ── Borders ── */
    --artdecor-border-default: #e2e5ea;
    --artdecor-border-strong: #c8cdd6;
    /* ── Text ── */
    --artdecor-text-primary: #1a1d23;
    --artdecor-text-secondary: #4a5066;
    --artdecor-text-muted: #666c85;
    --artdecor-text-cloudy: #857a99;
    /* ── Brand ── */
    --artdecor-brand-primary: #e56b00;
    /* Textfassung der Markenfarbe: #e56b00 erreicht als Text nur 3.3:1.
       #b35000 = 5.17:1 auf Weiss, 4.73:1 auf #fff3e8. KH 20260824 */
    --artdecor-brand-text: #b35000;
    --artdecor-brand-gradient: linear-gradient(135deg, #ffa600 0%, #e84700 100%);
    /* ── Semantic status ── */
    --artdecor-success-bg: #f0faf4;
    --artdecor-success-text: #1a6b3a;
    --artdecor-success-border: #b2dfca;
    --artdecor-danger-bg: #fff5f0;
    --artdecor-danger-text: #b83200;
    --artdecor-danger-border: #ffc4a8;
    --artdecor-info-bg: #f0f6ff;
    --artdecor-info-text: #1a4fa0;
    --artdecor-info-border: #b8d0f5;
    /* Warnung hatte als einzige Statusfarbe kein Texttoken; derselbe Bernstein wie
       die Draft-Ikone, damit es im System nur ein Amber gibt. KH 20260824 */
    --artdecor-warning-text: #a86400;
    /* Statusfarben. Punkt (Flaeche) und Artefaktsymbol (Vordergrund) tragen dieselbe Farbe -
       sie bezeichnen denselben Status, also duerfen sie nicht auseinanderlaufen. Deshalb ein
       Token je Status statt zweier getrennter Werte. KH 20260825 */
    --artdecor-status-inactive: rgb(144, 202, 249);
    --artdecor-status-draft: rgb(255, 213, 79);
    --artdecor-status-active: rgb(165, 214, 167);
    /* ── Shape ── */
    --artdecor-radius-sm: 4px;
    --artdecor-radius-md: 8px;
    --artdecor-radius-lg: 12px;
    --artdecor-radius-pill: 999px;
    /* ── Elevation ── */
    --artdecor-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --artdecor-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
}
/* ── Page background ── */
body {
    background-color: var(--artdecor-bg-body);
}
/* ─────────────────────────────────────────────────────────────────
   NAVBAR  (shared: all inner tab pages via makeHeader)
   ───────────────────────────────────────────────────────────────── */
.artdecor-navbar {
    background: var(--artdecor-bg-surface);
    border-bottom: 1px solid var(--artdecor-border-default);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--artdecor-navbar-height);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--artdecor-shadow-sm);
}
/* Brand block (logo + name + tags) */
.artdecor-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
    color: inherit;
    flex-shrink: 0;
    min-width: 0;
}
.artdecor-navbar-brand figure {
    flex-shrink: 0;
}
.artdecor-navbar-brand-name {
    font-size: 0.85rem;
    color: var(--artdecor-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artdecor-navbar-brand-meta {
    font-size: 0.7rem;
    color: var(--artdecor-text-muted);
    margin-top: 2px;
    margin-left: 17px;
    flex-wrap: wrap;
    align-items: center;
}
/* Vertical separator */
.artdecor-navbar-sep {
    width: 1px;
    height: 24px;
    background: var(--artdecor-border-default);
    flex-shrink: 0;
}
/* Inline nav links (hero page) */
.artdecor-navbar-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.artdecor-navbar-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--artdecor-radius-md);
    font-size: 0.8rem;
    color: var(--artdecor-text-secondary) !important;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.artdecor-navbar-links a:hover {
    background: var(--artdecor-bg-muted);
    color: var(--artdecor-text-primary) !important;
    text-decoration: none;
}
/* Right-hand section */
.artdecor-navbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
/* Version/build badge */
.artdecor-version-badge {
    font-size: 0.7rem;
    background: var(--artdecor-bg-muted);
    border: 1px solid var(--artdecor-border-default);
    border-radius: var(--artdecor-radius-pill);
    padding: 2px 10px;
    color: var(--artdecor-text-muted);
    white-space: nowrap;
}
/* "Project Development" CTA button */
.artdecor-navbar-devlink {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--artdecor-brand-gradient);
    color: #fff !important;
    border-radius: var(--artdecor-radius-pill);
    padding: 0.28rem 0.9rem;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.artdecor-navbar-devlink:hover {
    opacity: 0.88;
    color: #fff !important;
}
/* ─────────────────────────────────────────────────────────────────
   INLINE TAG BADGES
   ───────────────────────────────────────────────────────────────── */
.artdecor-tag {
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--artdecor-radius-pill);
    border: 1px solid;
    vertical-align: middle;
    white-space: nowrap;
}
.artdecor-tag-primary {
    background: #fff3e8;
    color: var(--artdecor-brand-text);
    border-color: #ffdab8;
}
.artdecor-tag-info {
    background: var(--artdecor-info-bg);
    color: var(--artdecor-info-text);
    border-color: var(--artdecor-info-border);
}
.artdecor-tag-success {
    background: var(--artdecor-success-bg);
    color: var(--artdecor-success-text);
    border-color: var(--artdecor-success-border);
}
.artdecor-tag-danger {
    background: var(--artdecor-danger-bg);
    color: var(--artdecor-danger-text);
    border-color: var(--artdecor-danger-border);
}
.artdecor-tag-neutral {
    background: var(--artdecor-bg-muted);
    color: var(--artdecor-text-secondary);
    border-color: var(--artdecor-border-default);
}
.artdecor-tag-refbox {
    background: var(--artdecor-bg-cloudy);
    color: var(--artdecor-text-cloudy);
    border-color: var(--artdecor-border-strong);
}
.artdecor-mdi-x {
    font-size: 14px;
}
/* ─────────────────────────────────────────────────────────────────
   PILL TABS  (sticky bar below navbar on all inner tab pages)
   ───────────────────────────────────────────────────────────────── */
.artdecor-pill-tabs-wrap {
    background: var(--artdecor-bg-surface);
    border-bottom: 1px solid var(--artdecor-border-default);
    padding: 0 1.5rem;
    position: sticky;
    top: var(--artdecor-navbar-height);
    z-index: 90;
    box-shadow: 0 1px 0 var(--artdecor-border-default);
}
.artdecor-pill-tabs {
    display: flex;
    gap: 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.35rem 0;
    align-items: center;
}
.artdecor-pill-tabs::-webkit-scrollbar {
    display: none;
}
.artdecor-pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--artdecor-radius-pill);
    font-size: 0.79rem;
    color: var(--artdecor-text-secondary);
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    cursor: pointer;
}
.artdecor-pill-tab:hover {
    background: var(--artdecor-bg-muted);
    color: var(--artdecor-text-primary);
    text-decoration: none;
}
.artdecor-pill-tab.is-active {
    background: #fff3e8;
    color: var(--artdecor-brand-text);
    border-color: #ffdab8;
    font-weight: 600;
}
.artdecor-pill-tab .mdi {
    font-size: 1.05rem;
}
/* ─────────────────────────────────────────────────────────────────
   PAGE CONTENT (wraps the section content on all inner tab pages)
   ───────────────────────────────────────────────────────────────── */
.artdecor-page-content {
}
.artdecor-page-content > .section {
    padding: 2rem 1.5rem;
}
/* ─────────────────────────────────────────────────────────────────
   HERO PAGE  (index.html / IG publication front page)
   ───────────────────────────────────────────────────────────────── */
.artdecor-hero-section {
    background: var(--artdecor-bg-surface);
    padding: 0 !important;
}
.artdecor-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: start;
}
/* Gradient kicker ("ART-DECOR® Implementation Guideline") */
.artdecor-hero-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    background: var(--artdecor-brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.6rem;
}
/* Main project title */
.artdecor-hero-title {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--artdecor-text-primary);
    margin: 0 0 1.25rem;
}
/* Badges row (prefix, repo, scenario, etc.) */
.artdecor-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
/* Alert stack (partial publication, outdated, etc.) */
.artdecor-hero-alerts {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}
/* Individual alert block */
.artdecor-hero-alert {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--artdecor-radius-md);
    border-left: 3px solid;
    font-size: 0.83rem;
    line-height: 1.65;
}
.artdecor-hero-alert.success {
    background: var(--artdecor-success-bg);
    border-color: var(--artdecor-success-text);
    color: var(--artdecor-success-text);
}
.artdecor-hero-alert.danger {
    background: var(--artdecor-danger-bg);
    border-color: var(--artdecor-danger-text);
    color: var(--artdecor-text-primary);
}
.artdecor-hero-alert-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.artdecor-hero-alert-title {
    font-weight: 600;
    margin-bottom: 2px;
}
.artdecor-hero-alert a {
    color: var(--artdecor-brand-text);
    font-weight: 500;
}
/* CTA buttons row */
.artdecor-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
/* Project logo column */
.artdecor-hero-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
}
/* Hero action buttons */
.artdecor-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.2rem;
    border-radius: var(--artdecor-radius-pill);
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid;
    transition: all 0.15s;
    text-decoration: none !important;
    cursor: pointer;
}
.artdecor-btn-outline {
    background: transparent;
    color: var(--artdecor-text-secondary);
    border-color: var(--artdecor-border-strong);
}
.artdecor-btn-outline:hover {
    background: var(--artdecor-bg-muted);
    color: var(--artdecor-text-primary);
}
.artdecor-btn-primary {
    background: var(--artdecor-brand-gradient);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(229, 107, 0, 0.28);
}
.artdecor-btn-primary:hover {
    opacity: 0.9;
}
/* ─────────────────────────────────────────────────────────────────
   INFO CARDS ROW  (bottom of hero page – 3 feature cards)
   ───────────────────────────────────────────────────────────────── */
.artdecor-hero-info-row {
    background: var(--artdecor-bg-subtle);
    border-top: 1px solid var(--artdecor-border-default);
    border-bottom: 1px solid var(--artdecor-border-default);
}
.artdecor-hero-info-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.artdecor-info-card {
    background: var(--artdecor-bg-surface);
    border: 1px solid var(--artdecor-border-default);
    border-radius: var(--artdecor-radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: box-shadow 0.15s;
}
.artdecor-info-card:hover {
    box-shadow: var(--artdecor-shadow-md);
}
.artdecor-info-card-icon {
    font-size: 1.4rem;
    color: var(--artdecor-text-muted);
}
.artdecor-info-card-title {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--artdecor-text-primary);
}
.artdecor-info-card-body {
    font-size: 0.78rem;
    color: var(--artdecor-text-secondary);
    line-height: 1.55;
}
.artdecor-info-card-footer {
    font-size: 0.78rem;
    margin-top: auto;
    padding-top: 0.35rem;
}
/* Organisation card inner layout */
.artdecor-org-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.artdecor-org-logo {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: var(--artdecor-radius-md);
    object-fit: contain;
    border: 1px solid var(--artdecor-border-default);
}
.artdecor-org-info {
    font-size: 0.72rem;
    color: var(--artdecor-text-secondary);
    line-height: 1.65;
}
.artdecor-org-name {
    font-weight: 600;
    color: var(--artdecor-text-primary);
}
/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
.artdecor-footer {
    background: var(--artdecor-bg-surface);
    border-top: 1px solid var(--artdecor-border-default);
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: 0.72rem;
    color: var(--artdecor-text-muted);
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.artdecor-footer a {
    color: var(--artdecor-brand-text);
}
/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width : 768px) {
    .artdecor-hero-inner {
        grid-template-columns: 1fr;
        padding: 2rem 1rem 1.5rem;
        gap: 1.5rem;
    }
    .artdecor-hero-logo-wrap {
        order: -1;
        align-items: flex-start;
    }
    .artdecor-hero-info-inner {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    .artdecor-hero-title {
        font-size: 1.6rem;
    }
    .artdecor-navbar {
        padding: 0 1rem;
        gap: 0.5rem;
    }
    .artdecor-navbar-links {
        display: none;
    }
    .artdecor-navbar-brand-name {
        max-width: 200px;
    }
    .artdecor-pill-tabs-wrap {
        padding: 0 1rem;
    }
    .artdecor-page-content > .section {
        padding: 1.5rem 1rem;
    }
}
/* ===================================================================
   END ART-DECOR NextGen Design System
   =================================================================== */
/* 
* additional styles for the footer overriding Bulma
* KH 20260202
*/
.footer {
    padding: 0.75rem 1rem; /* default is ~3rem */
}
/* Prevent ultra-long OIDs/URLs from breaking layout */
.__artdecor-wrap-anywhere,
.wrapAny,
.oid,
.uri {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Small helper used by the XSLT navbar logo */
.__artdecor-navbar-logo {
    max-height: 3rem;
    height: auto;
    width: auto;
}
/* Legacy: treetable (jQuery treetable) – let Bulma handle table styling, keep indentation only */
table td {
    vertical-align: top;
    font-size: 0.83rem !important;
    padding: 0.5rem 0.75rem !important;
}
table span.indenter {
    display: inline-block;
    padding-left: 0.5rem;
}
/* tooltip */
.tip {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: .5rem .75rem;
    border-radius: .5rem;
    max-width: 28rem;
    font-size: .875rem;
}
.has-tooltip {
    position: relative;
    cursor: default;
}
.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #bbb;
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.has-tooltip:hover::after {
    opacity: 1;
}
/* Legacy: note boxes — map to a Bulma-like look */
.note-box {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: .5rem;
    padding: .75rem;
    background: rgba(0, 0, 0, 0.03);
}
/* strike through is missing in bulma, add it here */
.is-strikethrough {
    text-decoration: line-through;
}
/* Tighten layout tables that are still used for small metadata blocks */
table.table.is-borderless td,
table.table.is-borderless th {
    border: 0;
}
/* Reduce visual noise for helper layout tables */
table.table.is-borderless {
    background: transparent;
}
/*
  artifact meta data table styles
  *4 for four columns label+item+label+item
*/
.__artdecor_metatable_labelcolum4 {
    width: 15% !important;
    background-color: var(--artdecor-bg-label) !important;
}
.__artdecor_metatable_itemcolum4 {
    width: 35%;
}
/* Concept map: relationship pill plus, where the mapping carries a comment, a disclosure
   next to it. Native <details>, so no JavaScript is involved; the default triangle is
   removed because the mdi icon is the affordance. */
.__artdecor_cm_comment > summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
}
.__artdecor_cm_comment > summary::-webkit-details-marker {
    display: none;
}
.__artdecor_cm_comment > summary .mdi {
    color: var(--artdecor-text-muted);
}
.__artdecor_cm_comment > summary:hover .mdi,
.__artdecor_cm_comment[open] > summary .mdi {
    color: var(--artdecor-brand-text);
}
.__artdecor_cm_commenttext {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--artdecor-text-secondary);
    /* The comment must be free to break anywhere, otherwise its longest token would become
       the column's minimum width and blow the 20% cap below. */
    overflow-wrap: anywhere;
}
/* Mapping table geometry: the relationship column sits exactly in the middle, 40% source
   side | 20% relationship | 40% target side. That needs fixed shares - with content-sized
   code columns the middle would land wherever the longest code pushes it. The class has to
   sit on the data cells too, not just the header.
   overflow-wrap keeps the split intact when a code is longer than its column: it wraps
   instead of widening the column and shifting the middle off centre. */
.__artdecor_cm_codecolumn {
    width: 14% !important;
    overflow-wrap: anywhere;
}
.artdecor-content-section-body--flush > table.table thead tr > th.__artdecor_cm_displaynamecolumn,
.__artdecor_cm_displaynamecolumn {
    width: 26%;
}
/* Holds a pill and, when opened, the comment - capped so an expanded comment cannot push
   the columns around. */
.__artdecor_cm_relationship {
    width: 20%;
    max-width: 20%;
}
/* Concept map: the source/target system bar is the first header row of the mapping table,
   which is how it lines up with the two Code columns. It carries systems, not column labels,
   so it drops the uppercase treatment of a normal header. The selector has to carry the same
   ancestors as the thead rule further down, otherwise that one wins on specificity. */
.artdecor-content-section-body--flush > table.table thead tr.__artdecor_cm_systems > th {
    background: var(--artdecor-bg-surface) !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    letter-spacing: normal;
    text-transform: none;
    color: var(--artdecor-text-secondary) !important;
    white-space: normal;
}
/* Terminology table columns. width:1% is the shrink-to-content idiom for auto table
   layout: the browser cannot honour 1%, so it falls back to the column's minimum content
   width. The detail column carries width:100% and therefore absorbs everything left over.
   Do not put a fixed percentage back here - a code list of three letter codes then gets
   the same slab as one of 40 character codes. */
.__artdecor_codecolumn {
    width: 1% !important;
    /* Without this the shrink-to-content width becomes the longest *word*, and codes break
       at their hyphens - "no-known-environmental-allergies" then sits on three lines.
       nowrap makes the minimum the full code, so the column is exactly as wide as needed. */
    white-space: nowrap;
}
.__artdecor_leveltypecolumn {
    width: 1% !important;
    white-space: nowrap;
}
.is-nowrap {
    white-space: nowrap;
}
.artdecor-denselines {
    line-height: 1.2 !important;
}
.artdecor-densetable td {
    padding: 1px 3px !important;
    font-size: 1;
}
.__artdecor_divider_with_text {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--artdecor-text-muted);   /* war #7a7a7a = 4.29:1. KH 20260824 */
}
.__artdecor_divider_with_text::before,
.__artdecor_divider_with_text::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #dbdbdb;
}
.__artdecor_divider_with_text::before {
    margin-right: .75em;
}
.__artdecor_divider_with_text::after {
    margin-left: .75em;
}
/* terminology list first column properties */
.artifact-list-first-column {
    width: 50% !important;
    max-width: 50%;
}
/* 
* additional style color classes for future style element replacements, see AD30-2306
* KH 20260112
*/
.cardColor {
    color: #000000;
}
.elementRowColor {
    background-color: #ffeaea;
}
.conceptsColor {
    background-color: #f4fff4;
}
.itemColor {
    background-color: #ffeeee;
}
.firstLastColNeutralColor {
    background-color: #ffffff;
}
/* 
* additional styles for inline artifacts, see AD30-2308
* KH 20260115
*/
.__artdecor__a__inline__artifact {
    border-radius: 16px;
    color: var(--artdecor-text-muted) !important;   /* war #808080; auf den Pillengruenden nur 3.5:1. KH 20260824 */
    padding: .3rem .6rem .3rem .6rem;
    text-decoration: none;
}
/* Icons (MDI) – common positioning */
.__artdecor_ds::before,
.__artdecor_sc::before,
.__artdecor_vs::before,
.__artdecor_cs::before,
.__artdecor_cm::before,
.__artdecor_tm::before,
.__artdecor_pr::before {
    font-family: 'Material Design Icons';
    font-size: 24px;
    position: relative;
    left: -.2rem;
    top: .1rem;
    line-height: 1;
    opacity: 0.95;
}
.__artdecor_ds {
    background-color: #E8F5E9;
}
.__artdecor_ds::before {
    content: "\F00BE";
}
.__artdecor_sc {
    background-color: #E8F5E9;
}
.__artdecor_sc::before {
    content: "\F0381";
}
.__artdecor_vs {
    background-color: #E3F2FD;
}
.__artdecor_vs::before {
    content: "\F02D1";
}
.__artdecor_cs {
    background-color: #E3F2FD;
}
.__artdecor_cs::before {
    content: "\F027A";
}
.__artdecor_cm {
    background-color: #E3F2FD
}
.__artdecor_cm::before {
    content: "\F08F0";
}
.__artdecor_tm {
    background-color: #FFEBEE;
}
.__artdecor_tm::before {
    content: "\F044C";
}
.__artdecor_pr {
    background-color: #FFEBEE;
}
.__artdecor_pr::before {
    content: "\F0238";
}
/* 
* Additional styles for base box styling
* KH 20260115
*/
.__artdecor_box {
    position: relative; /* required for absolute ::before positioning */
    margin: 14px 0;
    padding: 12px 14px 10px 44px; /* leave room for icon */
    min-height: 42px;
    overflow: visible;
    border: 1px solid #e2e2e3;
    border-radius: 10px;
    background-color: #ebebeb;
    color: rgba(60, 60, 67);
    font-size: 0.83rem;
}
/* Paragraph spacing inside boxes */
.__artdecor_box p {
    margin: 6px 0;
}
/* Icons (MDI) – common positioning */
.__artdecor_box.asinfo::before,
.__artdecor_box.asnote::before,
.__artdecor_box.assuccess::before,
.__artdecor_box.aswarning::before,
.__artdecor_box.aserror::before {
    font-family: 'Material Design Icons';
    font-size: 20px;
    position: absolute;
    left: 14px;
    top: 12px;
    line-height: 1;
    opacity: 0.95;
}
/* Semantic variants: background + accent border-left + icon color */
/* INFO */
.__artdecor_box.asinfo {
    background-color: #f0f7fb;
}
.__artdecor_box.asinfo::before {
    content: "\F02FC";
    color: #3498db;
}
/* NOTE */
.__artdecor_box.asnote {
    background-color: #f8eefe;
}
.__artdecor_box.asnote::before {
    content: "\F039E";
    color: #9834db;
}
/* SUCCESS */
.__artdecor_box.assuccess {
    background-color: #f7ffee;
}
.__artdecor_box.assuccess::before {
    content: "\F05E0";
    color: #60a917;
}
/* WARNING */
.__artdecor_box.aswarning {
    background-color: #fdefe6;
}
.__artdecor_box.aswarning::before {
    content: "\F0026";
    color: #ff9447;
}
/* ERROR */
.__artdecor_box.aserror {
    background-color: #fae9e9;
}
.__artdecor_box.aserror::before {
    content: "\F0159";
    color: #ce352c;
}
/* 
* additional styles for status dots
* KH 20260202
*/
.dot {
    height: 16px;
    width: 16px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    /* Die Fuellungen sind Material-200-Toene und liegen gegen Weiss bei 1.4-2.2:1; ein
       Punkt, der den Status traegt, ist ein Grafikobjekt und braucht 3:1 (WCAG 1.4.11).
       Der eingesetzte Ring dunkelt jede Fuellung um 35 % ab und bringt so jeden Punkt
       auf 3.3-4.9:1, ohne die Farbcodierung anzutasten. Inset, damit die 16 px bleiben.
       KH 20260824 */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.new {
    background-color: rgb(189, 189, 189);
}
.active,
.final,
.closed {
    background-color: var(--artdecor-status-active)
}
.pending,
.review,
.warning {
    background-color: rgb(255, 183, 77)
}
.draft,
.inprogress {
    background-color: var(--artdecor-status-draft)
}
.open,
.failed,
.error {
    background-color: rgb(239, 154, 154)
}
.cancelled,
.retired,
.deprecated,
.info {
    background-color: var(--artdecor-status-inactive)
}
.rejected {
    background-color: rgb(244, 143, 177);
}
/* Statusfarben der Artefaktikonen - Ordner, Wuerfel, Ordner-offen und Verwandte in den
   Datensatz- und Szenarienbaeumen. Sie bezeichnen denselben Status wie der Punkt daneben und
   tragen deshalb dieselbe Farbe.

   7.41.0 hatte sie auf abgedunkelte Werte gesetzt (#2b6cb0 / #a86400 / #2e7d32), um die
   3:1-Schwelle fuer Grafikobjekte zu erreichen. Damit stimmte die Farbcodierung nicht mehr:
   der Statusball zeigte Bernstein, das Symbol daneben Braun. Seit 7.41.3 gilt wieder die
   Statusfarbe; lesbar bleibt der Status ueber das title-Attribut, das jedes dieser Symbole
   traegt (siehe addStatusTitle). KH 20260825 */
.artdecor-text-for-inactive {
    color: var(--artdecor-status-inactive)
}
.artdecor-text-for-draft {
    color: var(--artdecor-status-draft)
}
.artdecor-text-for-active {
    color: var(--artdecor-status-active)
}
/* Zurueckgenommener Text und dekorative Ikonen. Ersetzt Bulmas has-text-grey-light
   (#abb1bf, 2.2:1) und has-text-grey-lighter (#d6d9e0, 1.4:1). KH 20260824 */
.artdecor-text-subdued {
    color: var(--artdecor-text-muted);
}
.artdecor-text-secondary {
    color: var(--artdecor-text-secondary);
}
/* Bestaetigungshaken. Ersetzt Bulmas has-text-success-50 (#3abb81, 2.4:1). KH 20260824 */
.artdecor-text-success {
    color: var(--artdecor-success-text);
}
/* Meldungsfarben. Ersetzen Bulmas has-text-danger (#ff6685, 2.8:1),
   has-text-info-50 (#00b2ff, 2.4:1) und has-text-warning (#ffb70f, 1.8:1). KH 20260824 */
.artdecor-text-danger {
    color: var(--artdecor-danger-text);
}
.artdecor-text-info {
    color: var(--artdecor-info-text);
}
.artdecor-text-warning {
    color: var(--artdecor-warning-text);
}
/* Markenfarbe als Vordergrund ausserhalb von Links. Ersetzt Bulmas
   has-text-primary (#ff930f, 2.2:1). KH 20260824 */
.artdecor-text-brand {
    color: var(--artdecor-brand-text);
}
/* 
* Accordion – redesigned per NextGen Design System
* KH 20260411: accordion items are flush rows inside artdecor-content-section cards,
* not standalone Bulma cards with their own shadow/border/radius.
*/
/* ── Accordion group root ── */
.__artdecor_accordion {
    display: flex;
    flex-direction: column;
}
/* ── Each accordion item: flush row, no Bulma card chrome ── */
.__artdecor_accordion-item {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid var(--artdecor-border-default) !important;
}
.__artdecor_accordion-item:last-child {
    border-bottom: none !important;
}
/* ── Card header: strip Bulma's default ── */
.__artdecor_accordion-item .card-header {
    box-shadow: none;
}
/* ── Trigger button ── */
.__artdecor_accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background: var(--artdecor-bg-subtle);
    border: 0;
    cursor: pointer;
    padding: 0.6rem 1.25rem;
    font-family: var(--artdecor-font-body);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--artdecor-text-primary);
    text-align: left;
    transition: background 0.15s;
    gap: 0;
}
.__artdecor_accordion-trigger:hover {
    background: var(--artdecor-bg-muted);
    color: var(--artdecor-text-primary);
}
/* Chevron icon – brand colour */
.__artdecor_accordion-trigger > .icon:first-child .mdi {
    color: var(--artdecor-brand-text);
    font-size: 1.2rem;
    transition: transform 0.25s var(--ease-out, ease);
}
/* ── Dataset/Scenario/artifacts panels ── */
.__artdecor_artifact-panel {
    transition: max-height 0.3s ease;
    overflow: hidden;
}
.__artdecor_artifact-panel > .content {
    padding: 0;
    margin: 0;
}
/* Remove double border/shadow from artifact list .box inside panel */
.__artdecor_artifact-panel .box {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Table inside the panel: no extra margin */
.__artdecor_artifact-panel .table {
    margin: 20px;
}
/* Tighten table cell padding slightly */
.__artdecor_artifact-panel .table td,
.__artdecor_artifact-panel .table th {
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
}
.__artdecor_artifact-panel .table thead th {
    background: var(--artdecor-bg-subtle);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--artdecor-text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--artdecor-border-default);
}
/* Striped: use design-system subtle tint instead of Bulma grey */
.__artdecor_artifact-panel .table.is-striped tbody tr:nth-child(even) {
    background-color: var(--artdecor-bg-subtle);
}
/* ── Panel ── */
.__artdecor_accordion-panel {
    transition: max-height 0.3s ease;
    overflow: hidden;
}
.__artdecor_accordion-panel > .content {
    padding: 0;
    margin: 0;
}
/* Remove double border/shadow from artifact list .box inside panel */
.__artdecor_accordion-panel .box {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Table inside the panel: no extra margin */
.__artdecor_accordion-panel .table {
    margin-bottom: 0;
}
/* Tighten table cell padding slightly */
.__artdecor_accordion-panel .table td,
.__artdecor_accordion-panel .table th {
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
}
.__artdecor_accordion-panel .table thead th {
    background: var(--artdecor-bg-subtle);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--artdecor-text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--artdecor-border-default);
}
/* Striped: use design-system subtle tint instead of Bulma grey */
.__artdecor_accordion-panel .table.is-striped tbody tr:nth-child(even) {
    background-color: var(--artdecor-bg-subtle);
}
/* ── Accordion expand/collapse controls ── */
.artdecor-accordion-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}
.artdecor-accordion-btn {
    font-size: 0.73rem !important;
    padding: 0.2rem 0.75rem !important;
    border-radius: var(--artdecor-radius-pill) !important;
    background: transparent !important;
    color: var(--artdecor-text-secondary) !important;
    border: 1px solid var(--artdecor-border-strong) !important;
    cursor: pointer;
    font-family: var(--artdecor-font-body);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.artdecor-accordion-btn:hover {
    background: var(--artdecor-bg-muted) !important;
    color: var(--artdecor-text-primary) !important;
}
/* 
* additional styles for links overriding Bulma
* KH 20260202
*/
a {
    /*color: var(--bulma-link-20) !important;*/
    color: var(--artdecor-brand-text);
}
/*
a {
  color: var(--bulma-primary-20) !important;
}
a:hover {
  color: var(--bulma-primary-75-invert)
}
a:visited {
  color: var(--bulma-primary-75-invert)
}
*/
/* Keep links readable inside Bulma differrent blocks */
.panel-heading a {
    color: var(--artdecor-text-secondary) !important;   /* war --bulma-text = #404654. KH 20260824 */
}
.content a {
    text-decoration: none;
}
.content a:hover {
    text-decoration: underline;
}
.footer a {
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
/* disclosure details blocks */
/* disclosure styling */
details.__artdecor_disclosure > summary {
    list-style: none;
    cursor: pointer;
}
details.__artdecor_summary::-webkit-details-marker {
    display: none;
}
/* rotate chevron when open */
details.__artdecor_disclosure .__artdecor_rot {
    transition: transform .15s ease;
}
details.__artdecor_disclosure[open] .__artdecor_rot {
    transform: rotate(90deg);
}
/* width helpers for the “inner table” columns */
.__artdecor_w1p {
    width: 1%;
}
.__artdecor_w19p {
    width: 19%;
}
.__artdecor_w20p {
    width: 20%;
}
.__artdecor_w25p {
    width: 25%;
}
.__artdecor_w40p {
    width: 40%;
}
.__artdecor_w50p {
    width: 50%;
}
.__artdecor_w60p {
    width: 60%;
}
/* example pretty print render classes */
.__artdecor_example {
    font-family: var(--artdecor-font-mono);
    font-size: 0.72rem;
}
/* ── Target boxes: which dataset concept is mapped onto this element ──
   Generated by doConnectedConcepts in bloomers/rules.xsl. The bullseye cell spans the whole
   inner table via rowspan, so it needs middle alignment - the global "table td" rule pins
   cells to the top, which left the icon hanging at the first row. The rest tightens the
   inner table, which only carries short labels and does not need full row padding. */
/* Designations and description share one wide column next to the status. The two blocks
   stack: designations first, description below, separated by a hairline instead of a label -
   the column header already names both. */
/* Status holds a dot plus one short word - same shrink-to-content treatment. */
.__artdecor_statuscolumn {
    width: 1% !important;
    white-space: nowrap;
}
/* The one column that takes whatever the shrink-to-content columns leave over. */
.__artdecor_termdetailcolumn {
    width: 100%;
}
.__artdecor_termdetail_sep {
    color: var(--artdecor-text-muted);
    font-weight: 400;
}
.__artdecor_designations + .__artdecor_termdetail_desc,
.__artdecor_termdetail_desc + .__artdecor_termdetail_desc {
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    border-top: 1px solid var(--artdecor-border-default);
}
.__artdecor_designation {
    display: inline-block;
    margin-right: 1.25rem;
}
.__artdecor_designation:last-child {
    margin-right: 0;
}
/* Code cell of a terminology tree row: chevron and code on one baseline. The padding-left
   inline style carries the indentation per level, so the flex box must not reset it. */
.__artdecor_tree_cell {
    display: flex;
    align-items: center;
    gap: 0;
}
.__artdecor_tree_cell .__artdecor_tree_toggle {
    flex: 0 0 auto;
}
/* MDI ships size helpers for 18/24/36/48 only, so 20px is ours. It mirrors MDI's own
   pattern - the glyph size belongs on ::before - and additionally sizes the <i>, so the
   element box equals the glyph instead of the inherited cell size. */
.mdi-20px.mdi-set,
.mdi-20px.mdi::before {
    font-size: 20px;
}
.mdi-20px.mdi {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}
.__artdecor_target_icon {
    vertical-align: middle !important;
    width: 2.25rem;
    padding: 0 0.25rem 0 0.5rem !important;
    border-bottom: none !important;
}
/* As an inline glyph the icon carries its font's leading, which pushed it a few pixels
   below the centre even in a middle-aligned cell. As a block with line-height 1 its box is
   exactly the glyph, so the cell centres it properly. */
.__artdecor_target_icon .mdi {
    display: block;
    line-height: 1;
}
.__artdecor_target {
    margin-bottom: 0;
}
.__artdecor_target td {
    padding: 0.15rem 0.5rem !important;
    vertical-align: middle !important;
    line-height: 1.35;
}
/* Bulma's .message hard-resets font-size to 1rem, so a callout inside a table cell came out
   about a fifth larger than the row it sits in (e.g. the constraint box on artifact pages).
   Inside a table it follows the cell instead. .__artdecor_example keeps its own smaller
   monospace size - it is excluded rather than overridden. */
table td .message:not(.__artdecor_example),
table th .message:not(.__artdecor_example) {
    font-size: inherit;
    line-height: inherit;
}
.ppsign {
    color: #000080;
}
.ppelement {
    color: #000080;
}
.ppattribute {
    /*color : #ffa500;*/
    color: #a94f18;   /* war #D2691E = 3.4:1 auf dem Beispielgrund; Braunton bleibt. KH 20260824 */
}
.ppcontent {
    color: #a52a2a;
}
.pptext {
    color: #5f5f5f;   /* war #808080 = 3.95:1; neutrales Grau bleibt, nur dunkler. KH 20260824 */
}
.ppnamespace {
    color: #0000ff;
}
/* level indents */
.__artdecor_indent {
    display: inline-block;
    width: calc(var(--artdecor-indent-level, 0)* 1.25rem)
;
    flex: 0 0 auto;
}
/* rotations of chevrons */
.__artdecor_rotate {
    transition: transform .15s ease;
    display: inline-flex;
}
.__artdecor_rotate.is-rotated {
    transform: rotate(90deg);
}
/* Farbfamilien der Boxen: healthcare, terminology, technical.
   Hier wird Bulmas message-Komponente eingestellt - das ist die richtige Richtung.
   Die Zahlen kamen bis 7.41.1 aus --bulma-success-*, --bulma-info-* und --bulma-danger-*,
   also aus Bulmas Palette; sie stehen jetzt als Werte da (unveraendert uebernommen), damit
   ein Bulma-Update die Boxen nicht mehr umfaerbt. --bulma-message-border-l-delta bleibt:
   das ist ein Innenwert der Komponente, kein Palettenwert. KH 20260824 */
.__artdecor_healthcare {
    --bulma-message-h: 153deg;
    --bulma-message-s: 53%;
    --bulma-message-border-l: calc(53% + var(--bulma-message-border-l-delta));
    --bulma-message-color-l: 8%;
    --bulma-message-header-background-l: 81%;
    --bulma-message-header-color-l: 8%;
}
.__artdecor_terminology {
    --bulma-message-h: 197deg;
    --bulma-message-s: 47%;
    --bulma-message-border-l: calc(81% + var(--bulma-message-border-l-delta));
    --bulma-message-color-l: 10%;
    --bulma-message-header-background-l: 81%;
    --bulma-message-header-color-l: 10%;
}
.__artdecor_technical {
    --bulma-message-h: 348deg;
    --bulma-message-s: 100%;
    --bulma-message-border-l: calc(70% + var(--bulma-message-border-l-delta));
    --bulma-message-color-l: 5%;
    --bulma-message-header-background-l: 81%;
    --bulma-message-header-color-l: 5%;
}
.__artdecor_healthcare_background {
    background-color: var(--artdecor-bg-healthcare) !important;
}
.__artdecor_terminology_background {
    background-color: var(--artdecor-bg-terminology) !important;
}
.__artdecor_technical_element,
.__artdecor_technical_background {
    background-color: var(--artdecor-bg-technical) !important;
}
/* Rosa Zeilengruende (#ffe6eb, bei Bulmas danger-light #ffccd6) tragen die normale
   Linkfarbe nur mit 4.4:1 bzw. 3.7:1. Das Token wird dort vertieft, statt eine eigene
   Regel fuer die Links aufzumachen - a{} liest ohnehin diese Variable. KH 20260824 */
.__artdecor_technical_element,
.__artdecor_technical_background,
.has-background-danger-light {
    --artdecor-brand-text: #8f4200;   /* 6.03:1 auf #ffe6eb, 5.04:1 auf #ffccd6 */
}
/* The chevron sits on rows with different backgrounds (pink element rows, striped
   attribute rows), so it stays transparent and inherits whatever it sits on instead of
   carrying a row colour of its own. */
.__artdecor_tree_toggle {
    background: transparent !important;
    border: none;
    box-shadow: none;
}
tr.__artdecor_technical_element:has( + tr.elem) {
    border-bottom: 1px solid white;
}
.__artdecor_row_element {
}
.__artdecor_conf {
    background-color: var(--artdecor-bg-conf) !important;
    /* border: 1px solid var(--bulma-danger) !important; */
    text-align: center !important;
    vertical-align: middle !important;
}
.__artdecor_choice_element,
.__artdecor_choice_element {
}
/* specatacular main nav tab styles */
.spectacular-tabs ul {
}
.spectacular-tabs li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(234, 102, 102, 0.5) !important;
}
.spectacular-tabs li a {
    border-radius: 6px !important;
    color: #a0aec0 !important;
    transition: all 0.25s ease !important;
    padding: 0.6rem 0.9rem !important;
    gap: 6px;
}
.spectacular-tabs li.is-active a {
    box-shadow: 0 4px 15px rgba(234, 102, 102, 0.5) !important;
    transform: translateY(2px);
}
.spectacular-tabs .icon i {
    transition: transform 0.25s ease;
}
.spectacular-tabs li a:hover .icon i {
    transform: rotate(-7deg);
}
/*
The full text of the license is available at http: //www.gnu.org/licenses/gpl-2.0.html

*/
ol.artdecor-dataset-group {
    list-style-type: none;
}
li.artdecor-dataset-group {
    font-weight: bold;
    padding: 7px 0 0 0;
}
li.artdecor-dataset-item,
li.artdecor-template {
    font-weight: normal;
    list-style-type: none;
    padding: 7px 0 0 0;
}
ul.artdecor-terminology-code {
    list-style-position: inside;
    font-weight: normal;
    padding: 7px 0 3px 20px;
    border: 0px;
    list-style-type: disc;
}
ul.artdecor-transaction-condition {
    padding: 7px 0 3px 20px;
    list-style-position: inside;
}
li.artdecor-transaction-condition {
    font-style: italic;
    font-weight: normal;
    list-style-type: circle;
    padding: 0 3px 0 5px;
    border-left: 5px solid #ddd;
}
div.artdecor-dataset-itemnumber,
div.artdecor-templatetype,
div.artdecor-multiplicity-tag {
    margin: -2px 0 5px 6px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    background-color: #eee;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    width: auto !important;
    padding: 1px 5px 1px 5px;
}
div.artdecor-multiplicity-tag {
    font-weight: normal;
    font-size: 12px;
    color: #333;
    padding-bottom: 0px;
}
div.artdecor-dataset-level1 {
    font-size: 2ex;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}
table.artdecor-transaction-table,
table.artdecor-template-table {
    border: 1px solid #888;
    border-collapse: collapse;
    width: 100%;
}
div.cdadocumentlevel {
    background-color: #eef;
}
div.cdaheaderlevel {
    background-color: #ffe;
}
div.cdasectionlevel {
    background-color: #efe;
}
div.cdaentrylevel {
    background-color: #fef;
}
div.artdecor-itemnumber-green {
    background-color: #efe;
}
div.artdecor-itemnumber-blue {
    background-color: #cef;
}
div.artdecor-itemnumber-yellow {
    background-color: #ffe;
}
div.description,
div.context {
    font-weight: normal;
    font-size: 12px;
    color: #aaa;
}
ul.tmap {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: #8b0000;
    font-weight: normal;
    font-size: 0.7rem;
}
hr.meta {
    margin-top: 10px;
    border: 1px solid gray;
}
td.explabel {
    background-color: #E6E6FA !important;
}
td.explabelred {
    background-color: #FFEEEE !important;
}
td.explabelgreen {
    background-color: #E0FFE0 !important;
}
.leftrightpadding {
    padding: 0 5px 0 5px;
}
/* 
* additional style color classes to future style element replacements, see AD30-2306
* KH 20260112
*/
.cardColor {
    color: #000000;
}
.elementRowColor {
    color: #ffeaea;
}
.conceptsColor {
    background-color: #f4fff4;
}
.itemColor {
    background-color: #ffeeee;
}
.firstLastColNeutralColor {
    color: #ffffff;
}
/*
  pill nav tabs
*/
.pill-tabs {
    background: #e8e8e8;
    border-radius: 50px;
    padding: 5px;
    display: inline-flex;
    border-bottom: none !important;
}
.pill-tabs ul {
    background: transparent;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    gap: 2px;
}
.pill-tabs li a {
    border: none !important;
    border-radius: 50px !important;
    color: #555 !important;
    font-weight: 500;
    padding: 0.4rem 1.1rem !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    position: relative;
}
.pill-tabs li a:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    color: #333 !important;
}
.pill-tabs li.is-active a {
    background: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important;
}
/* Badge styling */
.pill-tabs .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dd6565;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: relative;
    top: -7px;
    margin-left: 2px;
}
/* Dropdown wrapper */
.pill-tabs li.has-dropdown {
    position: static;
    /* let the <a> be the positioning anchor */
}
.pill-tabs li.has-dropdown > a {
    position: relative;
    /* anchor for the absolutely positioned menu */
}
/* Arrow indicator */
.pill-tabs li.has-dropdown > a::after {
    font-family: 'Material Design Icons';
    font-size: 20px;
    content: "\F0B26";
    margin-left: 5px;
    opacity: 0.6;
}
/* Dropdown menu */
.pill-tabs .dropdown-menu {
    display: none;
    position: relative;
    top: 10%;
    /* just below the trigger <a> */
    left: calc(100%/2);
    transform: translateX(-50%);
    /* centre under the trigger text */
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    min-width: 180px;
    z-index: 9999;
}
/* Show on hover */
.pill-tabs li.has-dropdown:hover .dropdown-menu {
    display: block;
}
/* Dropdown items */
.pill-tabs .dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    color: #555 !important;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease !important;
}
/*
  hero
  KH 20260222 
*/
.__artdecor_hero.hero-table {
    width: 70%;
    border: none !important;
}
.__artdecor_hero.publication-type {
    background: linear-gradient(90deg, #ffa600 0%, #ff5500 100%);
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.__artdecor_hero.title {
    color: #555;
}
.__artdecor_partialpublication {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 0;
}
.__artdecor_brand_logo {
    max-width: 400px;
    max-height: 200px;
    width: auto;
    object-fit: contain;
}
.__artdecor_hero.feature {
    width: 300px;
    height: auto;
    gap: 1rem;
}
.__artdecor_hero_primary_feature {
    background: linear-gradient(90deg, #ffa600 0%, #ff5500 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(59, 91, 219, 0.4);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.__artdecor_hero_feature {
    border: none;
    color: #555;
    box-shadow: 0 4px 15px rgba(59, 91, 219, 0.4);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.__artdecor_hero_primary_feature:hover {
    text-decoration: none !important;
    background-color: linear-gradient(90deg, #ff5500 0%, #ffa600 100%);
}
.__artdecor_hero_feature:hover {
    text-decoration: none !important;
}
.__artdecor_hero_feature_box {
    background-color: #eeeeee;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
}
.__artdecor_hero_feature_box:hover {
    background-color: #fcf5f5;
}
/* ─────────────────────────────────────────────────────────────────
   STANDALONE ARTIFACT PAGE BREADCRUMB
   Used by questionnaire detail pages and similar standalone pages
   that are opened in a separate window from the main publication.
   KH 20260411
   ───────────────────────────────────────────────────────────────── */
.artdecor-breadcrumb {
    background: var(--artdecor-bg-surface);
    border-bottom: 1px solid var(--artdecor-border-default);
    padding: 0.55rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--artdecor-text-secondary);
    position: sticky;
    /* Sits below the publication navbar, same as .artdecor-pill-tabs-wrap does on tab pages.
       Was top: 0, which let it slide underneath the navbar once every page got one. */
    top: var(--artdecor-navbar-height);
    z-index: 90;
    box-shadow: var(--artdecor-shadow-sm);
}
.artdecor-breadcrumb a {
    color: var(--artdecor-brand-text);
}
.artdecor-breadcrumb a:hover {
    text-decoration: underline;
}
.artdecor-breadcrumb-sep {
    color: var(--artdecor-text-muted);
    font-size: 0.75rem;
}
/* ─────────────────────────────────────────────────────────────────
   PROJECT PAGE  –  two-column sidebar + content layout
   KH 20260411
   ───────────────────────────────────────────────────────────────── */
.artdecor-project-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: start;
}
/* ── Sidebar ── */
.artdecor-project-sidebar {
    position: sticky;
    /* navbar height + pill-tabs bar height */
    top: calc(var(--artdecor-navbar-height) + 44px)
;
}
.artdecor-sidebar-card {
    background: var(--artdecor-bg-surface);
    border: 1px solid var(--artdecor-border-default);
    border-radius: var(--artdecor-radius-lg);
    overflow: hidden;
    box-shadow: var(--artdecor-shadow-sm);
}
.artdecor-sidebar-section {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--artdecor-border-default);
}
.artdecor-sidebar-section:last-child {
    border-bottom: none;
}
.artdecor-sidebar-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--artdecor-text-muted);
    margin-bottom: 0.5rem;
}
.artdecor-sidebar-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
}
.artdecor-sidebar-key {
    color: var(--artdecor-text-muted);
    flex-shrink: 0;
}
.artdecor-sidebar-val {
    color: var(--artdecor-text-secondary);
    text-align: right;
    font-weight: 500;
    word-break: break-word;
    min-width: 0;
}
.artdecor-sidebar-val a {
    color: var(--artdecor-brand-text);
}
/* Badge row inside a sidebar card. The pills themselves are the same as the
   navbar meta badges; this only keeps them apart when they wrap in the
   narrow card, where inline flow would let them touch line to line. */
.artdecor-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.artdecor-sidebar-tags .artdecor-tag {
    margin-right: 0;
}
.artdecor-sidebar-val code {
    font-family: var(--artdecor-font-mono);
    font-size: 0.72rem;
    background: var(--artdecor-bg-muted);
    padding: 1px 6px;
    border-radius: var(--artdecor-radius-sm);
}
.artdecor-sidebar-authors {
    list-style: none;
    font-size: 0.75rem;
    color: var(--artdecor-text-secondary);
    margin: 0;
    padding: 0;
}
.artdecor-sidebar-authors li {
    padding: 3px 0;
    border-bottom: 1px dashed var(--artdecor-border-default);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.artdecor-sidebar-authors li:last-child {
    border-bottom: none;
}
.artdecor-sidebar-authors .mdi {
    font-size: 0.9rem;
    color: var(--artdecor-text-muted);
    flex-shrink: 0;
}
.artdecor-sidebar-authors .artdecor-author-expired {
    color: var(--artdecor-text-muted);
    font-style: italic;
}
.artdecor-sidebar-disclaimer {
    font-size: 0.72rem;
    color: var(--artdecor-text-muted);
    line-height: 1.65;
}
/* ── Main content area ── */
.artdecor-project-main {
    min-width: 0;
}
.artdecor-content-section {
    background: var(--artdecor-bg-surface);
    border: 1px solid var(--artdecor-border-default);
    border-radius: var(--artdecor-radius-lg);
    margin-bottom: 1.5rem;
    box-shadow: var(--artdecor-shadow-sm);
    overflow: hidden;
}
.artdecor-content-section-header {
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--artdecor-border-default);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--artdecor-bg-subtle);
}
.artdecor-content-section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--artdecor-text-primary);
    margin: 0;
}
.artdecor-content-section-header .mdi {
    font-size: 1.15rem;
    color: var(--artdecor-brand-text);
}
.artdecor-content-section-body {
    padding: 1.25rem 1.5rem;
    font-size: 0.86rem;
    color: var(--artdecor-text-secondary);
    line-height: 1.75;
}
.artdecor-content-section-body p + p {
    margin-top: 0.65rem;
}
.artdecor-content-section-body ul {
    margin: 0.4rem 0 0.4rem 1.4rem;
}
.artdecor-content-section-body li {
    margin-bottom: 0.3rem;
}
/* ── Version History timeline ── */
.artdecor-version-entry {
    display: grid;
    grid-template-columns: 180px 1fr;
    border-bottom: 1px solid var(--artdecor-border-default);
}
.artdecor-version-entry:last-child {
    border-bottom: none;
}
.artdecor-version-meta {
    padding: 1rem;
    background: var(--artdecor-bg-subtle);
    border-right: 1px solid var(--artdecor-border-default);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.artdecor-version-tag {
    display: inline-flex;
    align-items: center;
    background: var(--artdecor-brand-gradient);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--artdecor-radius-pill);
    width: fit-content;
}
.artdecor-version-tag.is-version {
    background: var(--artdecor-bg-muted);
    color: var(--artdecor-text-secondary);
}
.artdecor-version-date {
    font-size: 0.7rem;
    color: var(--artdecor-text-muted);
    font-family: var(--artdecor-font-mono);
}
.artdecor-version-author {
    font-size: 0.72rem;
    color: var(--artdecor-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.artdecor-version-content {
    padding: 1rem 1.25rem;
}
.artdecor-version-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--artdecor-text-primary);
    margin-bottom: 0.5rem;
}
.artdecor-version-title a {
    color: var(--artdecor-text-primary);
}
.artdecor-version-title a:hover {
    color: var(--artdecor-brand-text);
    text-decoration: none;
}
.artdecor-version-desc {
    font-size: 0.83rem;
    color: var(--artdecor-text-secondary);
    line-height: 1.7;
}
.artdecor-version-desc p + p {
    margin-top: 0.4rem;
}
.artdecor-version-desc ul {
    margin: 0.3rem 0 0.3rem 1.2rem;
}
.artdecor-version-desc li {
    margin-bottom: 0.2rem;
}
/* ── Responsive ── */
@media (max-width : 900px) {
    .artdecor-project-layout {
        grid-template-columns: 1fr;
    }
    .artdecor-project-sidebar {
        position: static;
        top: auto;
    }
    .artdecor-version-entry {
        grid-template-columns: 1fr;
    }
    .artdecor-version-meta {
        border-right: none;
        border-bottom: 1px solid var(--artdecor-border-default);
    }
}
/* ─────────────────────────────────────────────────────────────────
   CONTENT SECTION VARIANTS  (rules / terminology pages)
   KH 20260411
   ───────────────────────────────────────────────────────────────── */
/* Body with no padding – lets accordion cards flush to section edges */
.artdecor-content-section-body--flush {
    padding: 0;
}
/* Accordion expand/collapse buttons inside a section header */
.artdecor-content-section-header .buttons {
    margin-left: auto;
    margin-bottom: 0;
}
/* Questionnaire item tree: cardinality, type and link id take their content width,
   the name and details columns share what is left. Same trick as the terminology
   tables - width:1% is under the minimum content width, so the browser falls back
   to it, and nowrap keeps a link id from breaking at its dots. */
.__artdecor_qq_narrow {
    width: 1%;
    white-space: nowrap;
}
/* Questionnaire enableWhen: a conditional item is a different kind of statement than
   its unit or answer options, so it gets a bordered block instead of a label/value row. */
.artdecor-qq-enablewhen {
    border-left: 3px solid var(--artdecor-info-border);
    background: var(--artdecor-info-bg);
    border-radius: var(--artdecor-radius-md);
    padding: 0.4rem 0.6rem;
    margin: 0.15rem 0;
}
.artdecor-qq-enablewhen-title {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--artdecor-info-text);
    margin-bottom: 0.2rem;
}
.artdecor-qq-enablewhen-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.5;
}
.artdecor-qq-enablewhen-question {
    font-family: var(--artdecor-font-mono, monospace);
    overflow-wrap: anywhere;
}
.artdecor-qq-enablewhen-op {
    font-weight: 700;
    color: var(--artdecor-info-text);
}
/* Questionnaire link id: short pill plus a native disclosure for the full id.
   No JavaScript - <details> brings keyboard operation with it, same reasoning as the
   concept map comments. The icon pair swaps via [open]. */
.__artdecor_idreveal > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    cursor: pointer;
    list-style: none;
}
.__artdecor_idreveal > summary::-webkit-details-marker,
.__artdecor_idreveal > summary::marker {
    display: none;
    content: "";
}
.__artdecor_idreveal .__artdecor_idreveal_less,
.__artdecor_idreveal[open] .__artdecor_idreveal_more {
    display: none;
}
.__artdecor_idreveal[open] .__artdecor_idreveal_less {
    display: inline;
}
/* The full id is read, not scanned - plain font, and it may wrap */
.__artdecor_idreveal_full {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--artdecor-text-secondary);
    overflow-wrap: anywhere;
    white-space: normal;
}
/* Live service pill: no href, so it needs the link affordance from CSS.
   See ArtDecor.initLiveLinks in decor-nextgen.js. */
a.__artdecor_livelink {
    cursor: pointer;
}
a.__artdecor_livelink:focus-visible {
    outline: 2px solid var(--artdecor-brand-primary);
    outline-offset: 1px;
}
/* ── Artifact summary stat rows ── */
.artdecor-stat-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.artdecor-stat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.84rem;
    color: var(--artdecor-text-secondary);
}
.artdecor-stat-count {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 2px 8px;
    border-radius: var(--artdecor-radius-pill);
    flex-shrink: 0;
}
.artdecor-stat-count.is-technical {
    background: #fff0f0;
    color: #b83200;
    border: 1px solid #ffc4a8;
}
.artdecor-stat-count.is-warning {
    background: #fff0f0;
    color: #b83200;
    border: 1px solid #ffc4a8;
}
.artdecor-stat-count.is-info {
    background: var(--artdecor-info-bg);
    color: var(--artdecor-info-text);
    border: 1px solid var(--artdecor-info-border);
}
.artdecor-stat-count.is-neutral {
    background: var(--artdecor-bg-subtle);
    color: var(--artdecor-text-secondary);
    border: 1px solid var(--artdecor-border-default);
}
/* A stat row that links on (artifact summary page): keep the row layout, add the
   affordance. The <a> itself carries .artdecor-stat-row, so only link styling here. */
.artdecor-stat-row .artdecor-stat-icon {
    font-size: 1.05rem;
    line-height: 1;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--artdecor-text-muted);
}
a.artdecor-stat-row {
    color: var(--artdecor-text-secondary);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    margin: 0 -0.4rem;
    border-radius: var(--artdecor-radius-md);
    transition: background 0.15s, color 0.15s;
}
a.artdecor-stat-row:hover {
    background: var(--artdecor-bg-subtle);
    color: var(--artdecor-text-primary);
}
a.artdecor-stat-row:hover .artdecor-stat-icon {
    color: var(--artdecor-brand-text);
}
/* ── Per-scenario sub-section inside an artdecor-content-section-body ── */
.artdecor-subsection-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--artdecor-text-primary);
    margin: 1.25rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--artdecor-border-default);
}
.artdecor-subsection-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* Tables inside artdecor-content-section-body - strip old box shadow */
.artdecor-content-section-body .box {
    box-shadow: none;
    border: 1px solid var(--artdecor-border-default);
    border-radius: var(--artdecor-radius-md);
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}
.artdecor-content-section-body .box .table {
    margin-bottom: 0;
}
/* Strip inline width/cellspacing attributes effect - handled by CSS */
.artdecor-content-section-body .table th[style *= "width"] {
    min-width: 0;
}
/* ─────────────────────────────────────────────────────────────────
   DETAIL PAGES  (terminology & template standalone artifact pages)
   Generated by makeArtifactFiles in bloomers/makers.xsl
   KH 20260412
   ───────────────────────────────────────────────────────────────── */
/* ── Meta table: borderless 4-column label/value layout ── */
.artdecor-content-section-body--flush table.is-borderless td,
.artdecor-content-section-body--flush table.is-borderless th {
    border: 0;
}
.artdecor-content-section-body--flush table.is-borderless .__artdecor_metatable_labelcolum4 {
    background-color: var(--artdecor-bg-subtle);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--artdecor-text-muted);
    vertical-align: top;
    padding: 0.6rem 1rem;
}
.artdecor-content-section-body--flush table.is-borderless .__artdecor_metatable_itemcolum4 {
    font-size: 0.83rem;
    color: var(--artdecor-text-secondary);
    padding: 0.6rem 1rem;
}
/* Zebra rows on the meta table */
.artdecor-content-section-body--flush table.is-borderless tr:nth-child(even) td {
    background-color: var(--artdecor-bg-subtle);
}
.artdecor-content-section-body--flush table.is-borderless tr:nth-child(odd) td {
    background-color: var(--artdecor-bg-surface);
}
/* But label cells always get their own tint regardless of row parity */
.artdecor-content-section-body--flush table.is-borderless .__artdecor_metatable_labelcolum4 {
    background-color: var(--artdecor-bg-subtle) !important;
}
/* ── Concept / code table inside artdecor-content-section ── */
/* thead row – matches the design system panel approach */
.artdecor-content-section-body--flush > table.table thead th,
.artdecor-content-section-body--flush > table.table thead tr > th {
    background: var(--artdecor-bg-subtle) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: var(--artdecor-text-muted) !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--artdecor-border-default) !important;
    padding: 0.5rem 0.75rem;
}
/* Remove excess top margin from concept table when following source-systems bar */
.artdecor-content-section-body--flush > table.table {
    margin-bottom: 0;
}
/* ── Snapshot info box: flush top edges inside card ── */
.artdecor-content-section > .artdecor-content-section-body--flush > .asinfo {
    margin-top: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}
/* ── Source code systems meta bar (compact tag strip) ── */
.artdecor-content-section-body--flush .artdecor-tag {
    font-size: 0.7rem;
}
/* ── Legend / download footer rows inside cards ── */
.artdecor-content-section-body.is-size-7.has-text-grey {
    padding: 0.5rem 1.5rem;
    line-height: 1.6;
}
/* ── Make artdecor-table-toolbar inside artdecor-content-section-header work ── */
.artdecor-content-section-header .artdecor-table-toolbar {
    margin-left: auto;
}
/* ═══════════════════════════════════════════════════════════════════
   END DETAIL PAGE STYLES
   ═══════════════════════════════════════════════════════════════════ */
/* Success stat count (datasets / scenarios – green) */
.artdecor-stat-count.is-success {
    background: var(--artdecor-success-bg);
    color: var(--artdecor-success-text);
    border: 1px solid var(--artdecor-success-border);
}
.artdecor-stat-count.is-success-light {
    background: #e8f8f0;
    color: #1a6b3a;
    border: 1px solid #c4e8d4;
}
/* ── Treetable / scenarios toolbar (lives in artdecor-content-section-header) ── */
.artdecor-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.artdecor-table-toolbar .button {
    font-size: 0.73rem !important;
    padding: 0.22rem 0.75rem !important;
    border-radius: var(--artdecor-radius-pill) !important;
    height: auto !important;
    line-height: 1.4;
}
.artdecor-table-toolbar .input {
    font-size: 0.78rem;
    height: 28px;
    max-width: 180px;
    border-radius: var(--artdecor-radius-pill) !important;
    border: 1px solid var(--artdecor-border-strong) !important;
    padding: 0 0.75rem;
    box-shadow: none !important;
}
.artdecor-table-toolbar .input:focus {
    border-color: var(--artdecor-brand-primary) !important;
    outline: none;
}
.artdecor-table-toolbar select {
    font-size: 0.75rem;
    height: 28px;
    border-radius: var(--artdecor-radius-pill);
    border: 1px solid var(--artdecor-border-strong);
    padding: 0 0.6rem;
    color: var(--artdecor-text-secondary);
    background: var(--artdecor-bg-surface);
    cursor: pointer;
    font-family: var(--artdecor-font-body);
}
/* ── Dataset / Scenario table: normalise legacy table.highlight ── */
.artdecor-content-section-body--flush table.highlight,
.artdecor-content-section-body--flush .box table {
    margin: 0;
}
.artdecor-content-section-body--flush table.highlight thead th {
    background: var(--artdecor-bg-subtle);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--artdecor-text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--artdecor-border-default);
    padding: 0.55rem 0.75rem;
}
.artdecor-content-section-body--flush table.highlight td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}
/* Row-type colours matching existing dot status system */
.artdecor-content-section-body--flush table.highlight tr.dsline:hover,
.artdecor-content-section-body--flush table.highlight tr.scline:hover,
.artdecor-content-section-body--flush table.highlight tr.trline:hover {
    background: var(--artdecor-bg-subtle);
}
.artdecor-content-section-body--flush table.highlight tr.trgroupline {
    background: var(--artdecor-bg-muted);
}