/* ── Data Workshop styles ─────────────────────────────────────────────────────
   Transfers to the DSP with the Pages/DataDefinitions pages. Loaded after site.css;
   overrides are scoped under .workshop so nothing leaks into other DSP pages.

   Density is tunable through the custom properties below — the working sessions
   adjust these first, individual rules second. The state template's defaults are
   sized for public content pages; schema authoring is high-density work.        */

:root {
    --dw-font-size: 14px;
    --dw-cell-pad-y: 3px;
    --dw-cell-pad-x: 6px;
    --dw-control-h: 30px;
    --dw-row-h: 30px;
    --dw-icon-size: 12px;
    --dw-column-panel-h: 484px;
}

.workshop {
    font-size: var(--dw-font-size);
}

.workshop .dw-page-action {
    font-size: var(--dw-font-size);
}

.workshop .dw-virtual-heading {
    margin: 24px 0 4px;
}

.workshop a.dw-icon-action {
    display: inline-block;
    min-width: 24px;
    padding: 1px 5px;
    text-align: center;
    background-image: none;
}

.workshop .table th,
.workshop .table td {
    padding: var(--dw-cell-pad-y) var(--dw-cell-pad-x) !important; /* over site.css's 5px */
    vertical-align: middle;
}

.workshop .btn-sm,
.workshop .form-control-sm {
    height: var(--dw-control-h);
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: var(--dw-font-size);
}

/* ── column master list (S3a) ── */

.workshop .dw-columns-layout {
    display: flex;
    gap: 18px;
    align-items: stretch;
    height: var(--dw-column-panel-h);
}

/* the left column: filter on top, then the scrolling list under it */
.workshop .dw-columns-master-pane {
    display: flex;
    flex: 0 0 340px;
    flex-direction: column;
    min-width: 300px;
    height: 100%;
}

.workshop .dw-columns-master {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.workshop .dw-column-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    margin: 8px 0 2px;
    padding: 0 4px 2px;
    border-bottom: 1px solid #cdd6de;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* the list size, moved out of the filter and in beside the heading it describes.
   It reads as part of that label, so everything but wrapping is inherited. */
.workshop .dw-column-count {
    white-space: nowrap;
}

.workshop .dw-column-group-heading .btn {
    padding: 2px 6px;
    line-height: 1.2;
}

.workshop .dw-columns-filter {
    display: flex;
    gap: 6px;
    margin: 0;
}

.workshop .dw-columns-filter .input-group {
    width: 100%;
}

.workshop .dw-columns-detail {
    flex: 1;
    height: 100%;
    min-width: 340px;
    overflow-y: hidden;
    position: relative; /* anchors the unsaved-changes prompt over this section */
}

/* Unsaved-changes prompt: covers the column detail section only, not the page. */
.workshop .dw-unsaved {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(251, 252, 253, 0.75);
}

.workshop .dw-unsaved[hidden] {
    display: none;
}

.workshop .dw-unsaved-card {
    width: 100%;
    max-width: 440px;
    border: 1px solid #cdd6de;
    border-top: 3px solid #8a6410;
    background: #fff;
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.workshop .dw-unsaved-card h4 {
    margin: 0 0 8px;
    color: #8a6410;
}

.workshop .dw-unsaved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.workshop .dw-column-detail-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    margin-top: 0;
}

.workshop .dw-section.dw-column-detail-panel.dw-modified {
    border-top-color: #8a6410;
}

.workshop .dw-column-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 767px) {
    .workshop .dw-columns-layout {
        flex-wrap: wrap;
        height: auto;
    }

    .workshop .dw-columns-master-pane,
    .workshop .dw-columns-detail {
        flex: 1 1 100%;
        min-width: 0;
        height: auto;
    }

    .workshop .dw-columns-master,
    .workshop .dw-columns-detail {
        height: auto;
        overflow-y: visible;
    }

    .workshop .dw-column-detail-panel {
        height: auto;
    }

    .workshop .dw-column-pane {
        display: block;
        overflow-y: visible;
    }
}

.workshop .dw-col-row {
    height: var(--dw-row-h);
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    position: relative;
}

.workshop .dw-col-row.dw-added   { background: #eef7e9; box-shadow: inset 3px 0 #3d6e2e; }
.workshop .dw-col-row.dw-modified{ background: #fbf4e0; box-shadow: inset 3px 0 #8a6410; }
.workshop .dw-col-row.dw-removed { background: #f9e8ec; box-shadow: inset 3px 0 #97284a; color: #666; }
.workshop .dw-col-row.dw-selected{ outline: 2px solid #046b99; outline-offset: -2px; }

.workshop .dw-col-row-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.workshop .dw-col-row.dw-removed .dw-col-row-main { text-decoration: line-through; }
.workshop .dw-col-order { min-width: 24px; text-align: right; font-size: 12px; }
.workshop .dw-col-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.workshop .dw-col-revert-slot { flex: 0 0 18px; min-width: 18px; }
.workshop .dw-col-revert summary {
    display: block;
    width: 18px;
    text-align: center;
    cursor: pointer;
    color: #8a6410;
}
.workshop .dw-col-revert summary::-webkit-details-marker { display: none; }
.workshop .dw-col-revert-confirm {
    position: absolute;
    z-index: 2;
    right: 4px;
    width: 310px;
    margin-top: 4px;
    padding: 10px;
    color: #333;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.workshop .dw-col-revert-confirm p { margin: 4px 0 8px; }

.workshop .dw-change-log-row { padding: 0 8px; }

.dw-basics-title-row,
.dw-basics-type-row,
.dw-type-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.dw-basics-title-row,
.dw-basics-type-row {
    flex-wrap: wrap;
}

.workshop .dw-basics-order { flex: 0 0 80px; }
.workshop .dw-basics-title { flex: 1 1 260px; }
.workshop .dw-basics-required { flex: 0 0 90px; }
.workshop .dw-basics-required .dw-checkbox-control {
    display: flex;
    align-items: center;
    height: var(--dw-control-h);
}
.dw-basics-type { flex: 0 0 150px; }
.workshop .dw-basics-lookup { padding-bottom: 6px; }
.dw-type-fields { flex: 1; }
.workshop .dw-basics-type-row > .dw-type-fields { flex: 1 0 100%; }
.dw-type-fields[hidden] { display: none; }
.dw-type-fields .form-group { flex: 0 0 120px; }
.workshop .dw-type-fields .dw-basics-pattern {
    flex: 0 1 60%;
    max-width: 60%;
}

.workshop .dw-column-delete {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #cdd6de;
}

.workshop .dw-column-delete .btn {
    color: #97284a;
    border-color: #97284a;
}

.workshop .dw-lookup-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(300px, 1fr);
    gap: 20px;
}

.workshop .dw-dynamic-source-toggle:not(:checked) ~ .dw-dynamic-source-fields {
    display: none;
}

.workshop .dw-lookup-test {
    margin-top: 10px;
}

.workshop .dw-validation-section {
    margin: 0 0 15px;
    padding: 4px 14px 2px;
    border: 1px solid #cdd6de;
    border-radius: 5px;
}
.workshop .dw-validation-section > legend {
    width: auto;
    margin: 0;
    padding: 0 6px;
    border: 0;
    font-size: 14px;
    font-weight: 600;
}

/* tooltips live on <body>, outside .workshop; the class comes from the pane script */
.dw-tooltip { pointer-events: none; }

.workshop .dw-cutset-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.workshop .dw-cutset-heading h3 { margin: 0; }
.workshop .dw-cutset-intro { margin: 4px 0 8px; }

.workshop .dw-cutset-card {
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid #cdd6de;
    border-left: 3px solid #a8420d;
    background: transparent;
}

.workshop .dw-cutset-card.dw-cutset-resolved { border-left-color: #3d6e2e; }

.workshop .dw-cutset-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.workshop .dw-cutset-why {
    margin: 0 0 4px;
    font-size: 13px;
}

.workshop .dw-cutset-example {
    margin-top: 8px;
    padding: 8px 10px 10px;
    border: 1px solid #cdd6de;
}

.workshop .dw-cutset-example-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
}

.workshop .dw-cutset-row-invalid { color: #97284a; }

.workshop .dw-cutset-fields {
    display: grid;
    gap: 4px;
}

.workshop .dw-cutset-field-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(220px, 340px) minmax(250px, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

.workshop .dw-cutset-field-row > label {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.workshop .dw-cutset-field-row > .form-control {
    width: 100%;
    height: 30px;
    padding: 3px 8px;
    font-size: 13px;
}

.workshop .dw-cutset-rule-tallies {
    display: flex;
    align-items: center;
    gap: 5px 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.workshop .dw-cutset-rule-detail {
    position: relative;
    min-width: 0;
}

.workshop .dw-cutset-rule-detail > summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.workshop .dw-cutset-rule-detail > summary::-webkit-details-marker { display: none; }
.workshop .dw-cutset-rule-detail.is-passing > summary { color: #168333; }
.workshop .dw-cutset-rule-detail.is-failing > summary { color: #97284a; }
.workshop .dw-cutset-rule-detail.is-warning > summary { color: #8a6410; }

.workshop .dw-cutset-rule-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    left: 0;
    width: min(480px, 70vw);
    padding: 10px 12px;
    border: 1px solid #cdd6de;
    border-top: 3px solid #046b99;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
    font-size: 12px;
    font-weight: 400;
}

.workshop .dw-cutset-rule-popover > .text-muted { margin-left: 5px; }

.workshop .dw-cutset-rule-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
}

.workshop .dw-cutset-rule-line.is-passing > i { color: #168333; }
.workshop .dw-cutset-rule-line.is-failing > i { color: #97284a; }
.workshop .dw-cutset-rule-line.is-warning > i { color: #8a6410; }

.workshop .dw-cutset-rule-expr {
    display: block;
    margin: 4px 0 0 20px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.workshop .dw-cutset-example-actions {
    margin-top: 8px;
    padding-left: 268px;
}

.workshop .dw-cutset-known-good {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #cdd6de;
}

.workshop .dw-cutset-known-good-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.workshop .dw-cutset-known-good-head h5 { margin: 0; }
.workshop .dw-cutset-known-good .table { margin-bottom: 0; font-size: 12px; }
.workshop .dw-cutset-known-good .table > thead > tr > th,
.workshop .dw-cutset-known-good .table > tbody > tr > td { padding: 4px 6px; vertical-align: middle; }
.workshop .dw-cutset-known-good form { margin: 0; }
.workshop .dw-cutset-remove { padding: 0; color: #97284a; }

.workshop .dw-cutset-capture,
.workshop .dw-cutset-minitree { margin-top: 6px; }

.workshop .dw-cutset-capture summary,
.workshop .dw-cutset-minitree summary {
    color: #555;
    font-size: 13px;
    cursor: pointer;
}

.workshop .dw-cutset-capture-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
}

.workshop .dw-cutset-error { margin: 6px 0; }
.workshop .dw-cutset-error ul { margin: 3px 0 0; }
.workshop .dw-cutset-candidates { margin-top: 8px; }

@media (max-width: 991px) {
    .workshop .dw-cutset-field-row {
        grid-template-columns: minmax(160px, 220px) minmax(200px, 1fr);
    }

    .workshop .dw-cutset-rule-tallies { grid-column: 2; }
    .workshop .dw-cutset-example-actions { padding-left: 228px; }
}

@media (max-width: 767px) {
    .workshop .dw-cutset-field-row { grid-template-columns: 1fr; }
    .workshop .dw-cutset-field-row > label { text-align: left; }
    .workshop .dw-cutset-rule-tallies { grid-column: 1; }
    .workshop .dw-cutset-rule-popover { position: static; width: 100%; margin-top: 5px; }
    .workshop .dw-cutset-example-actions { padding-left: 0; }
}

.workshop .dw-validation-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* the seed and row count kept with the schema, beside the generate strip's fields */
.workshop .dw-validation-defaults { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }

.workshop .dw-validation-progress {
    margin-top: 14px;
}

.workshop .dw-validation-progress p {
    margin: 0 0 5px;
}

.workshop .dw-validation-progress .progress {
    max-width: 620px;
    margin-bottom: 0;
}

.workshop .dw-validation-progress .progress-bar {
    width: 100%;
}

@media (max-width: 767px) {
    .workshop .dw-lookup-grid {
        grid-template-columns: 1fr;
    }
}

.dw-change-key {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 6px;
    color: #5c6b76;
    font-size: 11px;
}

.dw-change-key > span,
.dw-change-key td > span {
    display: inline-block;
    padding: 0 4px;
    border-left: 3px solid transparent;
}

.dw-change-key .dw-required-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* One step stronger than the row tints above (#eef7e9 / #fbf4e0 / #f9e8ec): a chip this
   small has to carry the same colour over a fraction of the area, so the row values read
   as washed out here. Same hues, same left-bar tones — only the fill is deepened. */
.dw-change-key .dw-added { background: #daedd0; border-left-color: #3d6e2e; }
.dw-change-key .dw-modified { background: #f7e9c2; border-left-color: #8a6410; }
.dw-change-key .dw-removed { background: #f4d7de; border-left-color: #97284a; }
.dw-change-key .dw-selected { outline: 2px solid #046b99; outline-offset: -2px; }

/* compact type glyph leads the row; required columns carry a red asterisk */
.workshop .dw-type {
    display: inline-block;
    min-width: 22px;
    position: relative;
    text-align: center;
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
    letter-spacing: -.075em;
    padding: 1px;
    border: 0;
    background: transparent;
    color: #46545f;
}

.workshop .dw-col-row-main > .dw-type {
    margin: 0 4px;
}

.workshop .dw-type.dw-required::before {
    content: "*";
    position: absolute;
    top: -2px;
    left: -3px;
    color: #97284a;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* four indicator slots: L/X · M · ƒ · T */
.dw-ind {
    display: inline-flex;
    gap: 3px;
}

.dw-ind i {
    font-style: normal;
    font-family: Consolas, Menlo, monospace;
    font-size: var(--dw-icon-size);
    min-width: 18px;
    text-align: center;
    padding: 1px 2px;
    border: 1px solid #cdd6de;
    background: #f1f4f7;
    color: #71808b;
}

.dw-ind i.on  { color: #0a4a44; border-color: #0e5f58; background: #dcebe8; font-weight: 600; }
.dw-ind i.ext { color: #a8420d; border-color: #a8420d; background: #f9e3d7; font-weight: 600; }
.dw-ind i.off { opacity: .35; }

.dw-issue-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #97284a;
}

/* JEXL expression builder — the insertion palette. */
.workshop .dw-rule-expression {
    font-family: Consolas, Menlo, monospace;
    font-size: 13px;
    line-height: 1.45;
}

.workshop .dw-rule-list { margin-bottom: 16px; }

.workshop .dw-rule-item {
    padding: 10px 8px;
    border-top: 1px solid #cdd6de;
}

.workshop .dw-rule-item:last-child { border-bottom: 1px solid #cdd6de; }
.workshop .dw-rule-item-heading { display: block; margin-bottom: 4px; }
.workshop .dw-rule-expression-row { margin-bottom: 8px; }

.workshop .dw-rule-expression-display {
    display: block;
    width: 100%;
    padding: 6px 8px;
    color: #333;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #f6f8fa;
}

.workshop .dw-rule-detail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}

.workshop .dw-rule-detail-label {
    display: block;
    margin-bottom: 3px;
    color: #5c6b76;
    font-size: 11px;
    font-weight: 700;
}

.workshop .dw-rule-detail-type { flex: 0 0 120px; }
.workshop .dw-rule-detail-message { flex: 1 1 280px; }
.workshop .dw-rule-detail-code { flex: 0 0 150px; }
.workshop .dw-rule-item-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
}
.workshop .dw-rule-item-actions form { margin: 0; }
.workshop .dw-rule-item-actions .btn { padding: 4px 6px; }
.workshop .dw-rule-item-actions button { color: #97284a; }

.workshop .dw-jexl-status {
    min-height: 18px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
}

.workshop .dw-jexl-status.dw-jexl-ok { color: #3d6e2e; }
.workshop .dw-jexl-status.dw-jexl-error { color: #97284a; }

.workshop .dw-jexl-toggle {
    margin-top: 2px;
}

.workshop .dw-rule-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.workshop .dw-rule-type { flex: 0 0 120px; }
.workshop .dw-rule-message { flex: 1 1 280px; }

.workshop .dw-jexl-palette {
    margin-top: 5px;
    padding: 7px;
    border: 1px solid #cdd6de;
    background: #f6f8fa;
}

.workshop .dw-jexl-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 3px 0;
}

.workshop .dw-jexl-label {
    flex: 0 0 72px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #71808b;
}

.workshop .dw-jexl-field-list {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    max-height: 98px;
    padding-right: 4px;
    overflow-y: auto;
}

.workshop .dw-jexl-chip {
    padding: 2px 6px;
    border: 1px solid #a9b6c1;
    background: #fff;
    color: #333;
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
}

.workshop .dw-jexl-chip:hover,
.workshop .dw-jexl-chip:focus {
    border-color: #046b99;
    color: #035376;
}

.workshop .dw-jexl-field-chip { background: #eef6fb; border-color: #cfe3ef; }
.workshop .dw-jexl-op-chip { background: #f3f1f7; }

/* ── lifecycle bar (S3) ── */

.dw-lifecycle-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #f1f4f7;
    border: 1px solid #a9b6c1;
    border-left: 4px solid #8a6410;
}

.workshop .dw-lifecycle-workflow {
    padding: 0 0 16px;
    background: transparent;
    border: 0;
}

.dw-status {
    font-weight: 700;
    letter-spacing: .04em;
}

.dw-status.dw-draft     { color: #8a6410; }
.dw-status.dw-proposed  { color: #6a4a9e; }
.dw-status.dw-published { color: #3d6e2e; }
.dw-status.dw-deactivated { color: #97284a; }

/* ── inline sections (partials revealed on demand) ── */

.dw-section {
    border: 1px solid #cdd6de;
    border-top: 3px solid #046b99;
    background: #fbfcfd;
    padding: 12px 15px;
    margin-top: 8px;
}

.dw-section.dw-danger { border-top-color: #97284a; }

/* ── page banner ──
   The banner sits outside .workshop (it is a sibling, not a descendant), so the
   usual .workshop scope cannot reach it. :has() keeps these two rules on the four
   Data Definitions pages only — dataworkshop.css is loaded on every DSP page, so an
   unscoped .banner-main here would shrink every banner in the portal. Authoring is
   dense work and the state template's banner is sized for public content pages. */

body:has(.workshop) .banner-main {
    padding: 6px 0 6px 0;
}

body:has(.workshop) .banner-main h1 {
    font-size: 2.0rem;
    margin-top: 0;
    margin-bottom: 0;
}

/* ── colour legend, behind the map icon in the Data columns and Generation order headings ──
   Reference material that used to hold a row of its own above the list. The icon
   leads the heading; hover or keyboard focus reveals the key as a small table.
   .dw-change-key is kept on the table so the colour rules above still reach the
   swatches — only the layout is restated here. */

.workshop .dw-column-group-heading .dw-heading-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workshop .dw-legend {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #5c6b76;
    cursor: help;
}

.workshop .dw-legend > i {
    font-size: 13px;
}

.workshop .dw-legend:hover,
.workshop .dw-legend:focus {
    color: #046b99;
    outline: none;
}

.workshop .dw-legend-pop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 3px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #cdd6de;
    border-top: 3px solid #046b99;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.workshop .dw-legend:hover .dw-legend-pop,
.workshop .dw-legend:focus .dw-legend-pop,
.workshop .dw-legend:focus-within .dw-legend-pop {
    display: block;
}

/* the heading is uppercase, bold and letter-spaced — the key inside it is not */
.workshop .dw-legend-table {
    display: table;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 3px;
    color: #5c6b76;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

.workshop .dw-legend-table td {
    padding: 0 6px 0 0;
    vertical-align: middle;
}

/* the popup key is drawn at about 1.5× the inline .dw-change-key size, bar and padding included */
.workshop .dw-legend-table td > span {
    padding: 0 6px;
    border-left-width: 5px;
}

/* the rules pane's Add / Cancel affordance, under the rule list and to the right */
.workshop .dw-rule-add-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ── Data generation tab ──────────────────────────────────────────────────────
   The Columns master/detail shell pointed at generation metadata. Rows are coloured by
   graph role instead of change state; red is reserved for a loop without a seed and a
   linked set without a resolution — nothing else. */

.workshop .dw-gen-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0 0;
}

.workshop .dw-gen-facet {
    padding: 1px 9px;
    border: 1px solid #cdd6de;
    border-radius: 999px;
    color: #46545f;
    font-size: var(--dw-font-size); /* same as the column names in the list below */
    text-decoration: none;
    white-space: nowrap;
}

.workshop .dw-gen-facet:hover { border-color: #046b99; color: #046b99; text-decoration: none; }
.workshop .dw-gen-facet.active { background: #046b99; border-color: #046b99; color: #fff; }

/* graph role → row colour */
.workshop .dw-gen-derived     { box-shadow: inset 3px 0 #046b99; }
.workshop .dw-gen-loop        { background: #eef3f8; box-shadow: inset 3px 0 #3d5a80; }
.workshop .dw-gen-set         { background: #f4f1f8; box-shadow: inset 3px 0 #6b4c9a; }
.workshop .dw-gen-needs-input { background: #f9e8ec; box-shadow: inset 3px 0 #97284a; }
.workshop .dw-gen-overridden  { box-shadow: inset 3px 0 #8a6410; }

.workshop .dw-change-key .dw-gen-derived     { box-shadow: none; border-left-color: #046b99; }
.workshop .dw-change-key .dw-gen-loop        { box-shadow: none; background: #dbe5ef; border-left-color: #3d5a80; }
.workshop .dw-change-key .dw-gen-set         { box-shadow: none; background: #e6dff0; border-left-color: #6b4c9a; }
.workshop .dw-change-key .dw-gen-needs-input { box-shadow: none; background: #f4d7de; border-left-color: #97284a; }
.workshop .dw-change-key .dw-gen-overridden  { box-shadow: none; border-left-color: #8a6410; }

/* secondary text in a rail row */
.workshop .dw-gen-from {
    flex: 0 0 auto;
    font-size: 11px;
    color: #7b8893;
    white-space: nowrap;
}

/* a loop is one bracketed block at its position in generation order */
.workshop .dw-gen-block {
    margin: 3px 0;
    border: 1px solid #3d5a80;
    border-left-width: 3px;
}
.workshop .dw-gen-block.dw-gen-block-open { border-color: #97284a; }
.workshop .dw-gen-block.dw-selected { outline: 2px solid #046b99; outline-offset: -2px; }

.workshop .dw-gen-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 6px;
    color: #3d5a80;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}
.workshop .dw-gen-block-head:hover { text-decoration: none; background: #eef3f8; }
.workshop .dw-gen-block.dw-gen-block-open .dw-gen-block-head { color: #97284a; }
.workshop .dw-gen-block.dw-gen-block-open .dw-gen-block-head:hover { background: #f9e8ec; }
.workshop .dw-gen-block-state { font-weight: 400; letter-spacing: normal; text-transform: none; }

/* group rows in the Linked sets section */
.workshop .dw-gen-group-row .dw-col-name { font-weight: 600; }

/* the T indicator's third state: pending input */
.dw-ind i.pending { color: #8a6410; border-color: #8a6410; background: #fbf4e0; font-weight: 600; }
/* ...and the E indicator's failing state */
.dw-ind i.fail { color: #97284a; border-color: #97284a; background: #f8e1e8; font-weight: 600; }

/* detail panes: label/value grids and edge tables */
.workshop .dw-gen-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 14px;
    margin: 0 0 10px;
    font-size: 13px;
}
.workshop .dw-gen-kv dt { color: #555; font-weight: 600; }
.workshop .dw-gen-kv dd { margin: 0; overflow-wrap: anywhere; }
.workshop .dw-gen-ghost { color: #7b8893; font-style: italic; }

.workshop .dw-gen-role {
    font-size: 12px;
    color: #5c6b76;
}

.workshop .dw-gen-table { font-size: 13px; margin-bottom: 12px; }
.workshop .dw-gen-table > tbody > tr > td { vertical-align: top; }
.workshop .dw-gen-table code { white-space: pre-wrap; }
.workshop .dw-gen-usable   { color: #168333; font-weight: 600; }
.workshop .dw-gen-unusable { color: #97284a; font-weight: 600; }
.workshop .dw-gen-dropped  { color: #8a6410; font-weight: 600; }

.workshop h4.dw-gen-h {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #555;
}
.workshop h4.dw-gen-h:first-child { margin-top: 0; }

/* the CSV position of a row, shown only where it differs from the generation index */
.workshop .dw-gen-csv {
    flex: 0 0 auto;
    padding: 0 4px;
    border: 1px solid #dfe5ea;
    border-radius: 3px;
    color: #7b8893;
    font-size: 10px;
    white-space: nowrap;
}

/* ── Recipe form (Phase 5) ────────────────────────────────────────────────────
   The four-way source selector and the type-specific fields under it; shared by the Recipe
   pane and by each dependent column of a cross-column rule. */
.workshop .dw-recipe-source {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
}
.workshop .dw-recipe-source > label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 600;
    font-size: 13px;
}
.workshop .dw-recipe-ghost { color: #7b8893; font-style: italic; font-size: 12px; font-weight: 400; }

.workshop .dw-recipe-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin: 0 0 8px;
}
.workshop .dw-recipe-fields > .form-group { flex: 0 0 140px; margin: 0; }
.workshop .dw-recipe-fields > .form-group.dw-recipe-wide { flex: 1 1 240px; max-width: 420px; }
.workshop .dw-recipe-fields > .form-group > label { display: block; margin-bottom: 2px; font-size: 12px; }
.workshop .dw-recipe-fields > .dw-recipe-ghost { padding-bottom: 8px; }
.workshop .dw-recipe-fields[hidden],
.workshop .dw-recipe [data-dw-recipe-for][hidden],
.workshop .dw-recipe [data-dw-recipe-gen][hidden],
.workshop .dw-recipe [data-dw-recipe-faker][hidden] { display: none; }

.workshop .dw-recipe-enum {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 2px 10px;
    max-height: 220px;
    overflow: auto;
    padding: 6px 8px;
    border: 1px solid #dfe5ea;
    margin-bottom: 8px;
}
.workshop .dw-recipe-enum > label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.workshop .dw-recipe-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

/* a recipe written for a type the column no longer has */
.workshop .dw-gen-stale {
    padding: 0 5px;
    border: 1px solid #97284a;
    border-radius: 3px;
    color: #97284a;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Conditions pane: one card per cross-column rule ─────────────────────── */
.workshop .dw-cond-card {
    margin: 0 0 10px;
    padding: 8px 12px 10px;
    border: 1px solid #cdd6de;
    border-left: 3px solid #046b99;
}
.workshop .dw-cond-card.dw-cond-compiled { border-left-color: #7b8893; }
.workshop .dw-cond-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.workshop .dw-cond-head > .dw-cond-remove,
.workshop .dw-cond-set-head > .dw-cond-remove { margin-left: auto; }
.workshop .dw-cond-tag {
    padding: 0 6px;
    border-radius: 9px;
    background: #eef1f4;
    color: #5c6b76;
    font-size: 11px;
    white-space: nowrap;
}
.workshop .dw-cond-tag-mine { background: #e3f1f7; color: #046b99; }
/* collapsed rule cards: the trigger and how many columns it writes; expand to read, Edit to change */
.workshop .dw-cond-collapsible { padding-bottom: 8px; }
.workshop .dw-cond-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
}
.workshop .dw-cond-summary::-webkit-details-marker { display: none; }
.workshop .dw-cond-summary::before {
    content: "\25B8";
    color: #5c6b76;
    transition: transform .1s;
}
.workshop .dw-cond-collapsible[open] > .dw-cond-summary::before { transform: rotate(90deg); }
.workshop .dw-cond-count { color: #5c6b76; font-size: 12px; }
.workshop .dw-cond-edit { margin-left: auto; padding: 0; }
.workshop .dw-cond-body { margin-top: 6px; }
.workshop .dw-cond-card.dw-cond-editing { border-left-width: 4px; background: #fbfdfe; }
.workshop .dw-cond-remove { padding: 0; font-size: 12px; color: #97284a; }

.workshop .dw-cond-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 4px 0;
    font-size: 13px;
}
.workshop .dw-cond-row > label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; }
.workshop .dw-cond-row .form-control {
    display: inline-block;
    height: var(--dw-control-h);
    /* the compact height needs the compact padding and font too (as .form-control-sm), or selects crop their text */
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: var(--dw-font-size);
}
.workshop .dw-cond-row[hidden],
.workshop .dw-cond-row [hidden] { display: none !important; } /* over .form-control / .btn display */
.workshop .dw-cond-guard { padding-left: 18px; }
.workshop .dw-cond-then { margin: 8px 0 4px; font-weight: 600; font-size: 13px; }

.workshop .dw-cond-set {
    margin: 0 0 8px 12px;
    padding: 6px 10px 8px;
    border-left: 2px solid #dfe5ea;
}
.workshop .dw-cond-set-head { display: flex; align-items: center; gap: 8px; min-height: 18px; font-size: 12px; }
.workshop .dw-cond-set-ro { margin: 2px 0 2px 12px; font-size: 13px; }
.workshop .dw-cond-dep {
    margin: 6px 0;
    padding: 6px 10px;
    border: 1px solid #e6ebef;
    background: #fafbfc;
}
.workshop .dw-cond-dep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.workshop .dw-cond-remove-dep { margin: 0 0 0 auto; }
.workshop .dw-cond-dep-removed {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    padding: 6px 10px;
    border: 1px dashed #cdd6de;
    color: #5c6b76;
    font-size: 13px;
}
.workshop .dw-cond-dep-removed[hidden] { display: none; }
.workshop .dw-cond-new { margin: 6px 0 14px; }

/* ── Seed / Resolve pane: the three options in preference order ─────────── */
.workshop .dw-cutset-option { margin-top: 10px; padding: 8px 10px; border: 1px solid #cdd6de; }
.workshop .dw-cutset-option > summary { cursor: pointer; }
.workshop .dw-cutset-option > h5 { margin: 0 0 4px; }
.workshop .dw-cutset-option > p { margin: 0 0 8px; font-size: 13px; }
.workshop .dw-cutset-preferred { border-left: 3px solid #3d6e2e; }
.workshop .dw-cutset-seed { border-left: 3px solid #3d5a80; }
.workshop .dw-cutset-golden { border-left: 3px solid #a8420d; }
.workshop .dw-seed-table > tbody > tr > td { vertical-align: middle; }
.workshop .dw-seed-table [data-dw-seed-derive] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.workshop .dw-seed-table label[hidden] { display: none; }

/* ── Error codes pane (Phase 6) ──────────────────────────────────────────── */
.workshop .dw-code-summary { margin: 0 0 10px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.workshop .dw-code-card {
    margin: 0 0 8px;
    padding: 7px 12px 8px;
    border: 1px solid #cdd6de;
    border-left: 3px solid #7b8893;
}
.workshop .dw-code-card.dw-code-card-covered { border-left-color: #3d6e2e; }
.workshop .dw-code-card.dw-code-card-todo { border-left-color: #a8420d; }
.workshop .dw-code-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.workshop .dw-code-id { font-weight: 600; }
.workshop .dw-code-sev { padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.workshop .dw-code-sev-error { background: #f9e8ec; color: #97284a; }
.workshop .dw-code-sev-warning { background: #fbf4e0; color: #8a6410; }
.workshop .dw-code-kind { color: #5c6b76; font-size: 12px; }
.workshop .dw-code-state { margin-left: auto; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.workshop .dw-code-status-verified { background: #eef7e9; color: #3d6e2e; }
.workshop .dw-code-status-unverified { background: #fbf4e0; color: #8a6410; }
.workshop .dw-code-status-untested { background: #fbe9dd; color: #a8420d; }
.workshop .dw-code-msg { margin: 2px 0 0; font-size: 12px; color: #46545f; }
/* "Rule:" keeps its expression on the same line */
.workshop .dw-code-expr.dw-code-expr-inline { display: inline; margin: 0; }
/* separates the code (rule, message) from its test and result */
.workshop .dw-code-sep { margin: 8px 0 6px; border-top: 1px solid #e3e8ec; }
/* "Message:", "Trigger condition:" … — upright, so the italic message reads as the value */
.workshop .dw-code-label { font-style: normal; font-weight: 600; color: #2b3a45; }
/* the info popover beside "x of y covered": prose, not the rail's nowrap key table */
.workshop .dw-code-info-pop { width: min(460px, 80vw); white-space: normal; font-size: 12px; font-weight: 400; line-height: 1.5; color: #2b3a45; }
.workshop .dw-code-info-pop .dw-code-state { margin-left: 0; display: inline-block; margin-top: 3px; }
/* a control that carries a dw-legend popover: the control keeps its own cursor and colour */
.workshop .dw-legend.dw-tip-host { cursor: default; color: inherit; }

/* Validate page overview: a ? at the right end of the error-codes row, opening a centred modal */
.workshop .dw-legend.dw-overview-host { margin-left: auto; align-self: center; }
.workshop .dw-overview-btn { padding: 0 2px; font-size: 18px; line-height: 1; color: #046b99; cursor: pointer; }
.workshop .dw-overview-btn:hover, .workshop .dw-overview-btn:focus { color: #034e70; }
/* anchored to the right edge so it never runs off the page */
.workshop .dw-legend-pop.dw-overview-tip { left: auto; right: 0; white-space: nowrap; font-size: 12px; font-weight: 600; color: #2b3a45; }
.workshop .dw-overview-dialog {
    width: min(900px, 92vw);
    max-height: 85vh;
    padding: 0;
    border: 1px solid #cdd6de;
    border-top: 3px solid #046b99;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.workshop .dw-overview-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.workshop .dw-overview-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e3e8ec; }
.workshop .dw-overview-head h3 { margin: 0; font-size: 18px; }
.workshop .dw-overview-close { padding: 0 4px; font-size: 18px; color: #5c6b76; cursor: pointer; }
.workshop .dw-overview-body { padding: 12px 16px 4px; overflow-y: auto; max-height: calc(85vh - 50px); }
.workshop .dw-code-expr { display: block; margin: 3px 0; font-size: 12px; white-space: pre-wrap; }
.workshop .dw-code-how { margin: 4px 0 0; font-size: 13px; }
.workshop .dw-code-expect { margin: 2px 0 0; padding-left: 26px; font-size: 12px; color: #46545f; }
.workshop .dw-code-verified { margin: 4px 0 0; font-size: 12px; }
.workshop .dw-code-verified-stale { color: #8a6410; font-weight: 600; }
.workshop .dw-code-verified ul { margin: 2px 0 0; padding-left: 18px; font-weight: 400; color: #46545f; }
.workshop .dw-code-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.workshop .dw-code-actions .btn-link { padding: 0; font-size: 12px; }
.workshop .dw-code-form { margin: 8px 0 4px; padding: 8px 10px; border: 1px solid #dfe5ea; background: #fafbfc; }
.workshop .dw-code-form[hidden] { display: none; }
.workshop .dw-code-form > label { display: block; font-size: 12px; margin-bottom: 2px; }
.workshop .dw-code-grid { margin: 4px 0 6px; padding: 6px 8px; border-left: 2px solid #dfe5ea; }
.workshop .dw-code-grid[hidden] { display: none; }
.workshop .dw-code-grid-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 4px; font-size: 12px; }
.workshop .dw-code-grid-head > label { margin: 0; font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.workshop .dw-code-grid-self > label { color: #046b99; font-weight: 600; }
.workshop .dw-code-second { display: block; margin: 0 0 6px; font-weight: 400; font-size: 12px; }

/* schema-wide error-code coverage, above the master/detail layout */
.workshop .dw-gen-coverage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; font-size: 13px; }

/* ── Test tab (Phase 9) ──────────────────────────────────────────────────────
   The uploader itself is styled by file-uploader.css, shared with the report pages. The only
   rule here undoes this sheet's dense .workshop .table cells (top of file) inside the uploader's
   error table, so it keeps the site.css padding and Bootstrap alignment it has on the report
   pages. */
.workshop .file-uploader .table td { padding: 5px !important; vertical-align: top; }
.workshop .file-uploader .table thead th { padding: 5px !important; vertical-align: bottom; }

/* Phase 10: generate-and-validate, a slim strip above the uploader row */
/* The uploader row's cog and its Sample settings box: the beaker's Generate & Validate popout look
   (white, 8px radius, soft shadow), centred just above the cog. */
.workshop .dw-test .file-uploader .dw-sample-settings-anchor { position: relative; display: flex; }
.workshop .dw-test .file-uploader .dw-sample-settings-btn.active { background: #e9ecef; border-color: #adb5bd; }
.workshop .dw-test .file-uploader .dw-sample-settings {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 1000;
    background: white; padding: 16px 20px; border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); min-width: 220px;
    font-family: system-ui, sans-serif; text-align: left;
}
.workshop .dw-test .file-uploader .dw-sample-settings[hidden] { display: none; }
.workshop .dw-test .file-uploader .dw-sample-settings label { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: #666; }
.workshop .dw-test .file-uploader .dw-sample-settings label:last-of-type { margin-bottom: 0; }
.workshop .dw-test .file-uploader .dw-sample-settings input[data-dw-row-count] { width: 110px; -moz-appearance: textfield; appearance: textfield; }
.workshop .dw-test .file-uploader .dw-sample-settings input[data-dw-row-count]::-webkit-outer-spin-button,
.workshop .dw-test .file-uploader .dw-sample-settings input[data-dw-row-count]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.workshop .dw-test .file-uploader .dw-sample-settings input[data-dw-seed] { width: 110px; }
/* The uploader row's random-seed dice reads as a toggle, in the report pages' bug-toggle language:
   off is a dashed outline and a grey icon; on is a solid dark outline, pressed in, with a black icon. */
.workshop .dw-test .file-uploader .dw-random-seed-btn { border-style: dashed; border-color: #adb5bd; }
.workshop .dw-test .file-uploader .dw-random-seed-btn .fa-dice { color: #999; }
.workshop .dw-test .file-uploader .dw-random-seed-btn.active,
.workshop .dw-test .file-uploader .dw-random-seed-btn.active:hover:not(:disabled) {
    border-style: solid; border-color: #343a40; background: #e9ecef;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}
.workshop .dw-test .file-uploader .dw-random-seed-btn.active .fa-dice { color: #000; }
/* validation status line under the Test tab heading: green check passed, amber triangle not yet */
.workshop .dw-test .dw-test-status { margin: 0 0 12px; }
.workshop .dw-test .dw-test-status > p { margin: 0 0 4px; color: #000; }
.workshop .dw-test .dw-test-status-ok, .workshop .dw-gen-coverage .dw-test-status-ok { color: #1c7c3f; }
.workshop .dw-test .dw-test-status-pending, .workshop .dw-gen-coverage .dw-test-status-pending { color: #e4a30b; }
.workshop .dw-test .dw-summary-table td { vertical-align: top; }
/* fixed columns: expanding a value list grows its row downward, never the table sideways */
.workshop .dw-test .dw-summary-table { table-layout: fixed; width: 100%; }
.workshop .dw-test .dw-summary-table th:nth-child(1) { width: 25%; }
.workshop .dw-test .dw-summary-table th:nth-child(2) { width: 25%; }
.workshop .dw-test .dw-summary-table th:nth-child(3) { width: 25%; }
.workshop .dw-test .dw-summary-table th:nth-child(4) { width: 25%; }
.workshop .dw-test .dw-summary-table td { overflow-wrap: anywhere; }
/* a unique_count's expandable value list: the toggle stays at the cell's right edge and the list
   opens beneath it, instead of the box widening and dragging the toggle left */
.workshop .dw-test .dw-summary-values { display: block; text-align: right; }
.workshop .dw-test .dw-summary-values > summary { display: inline; cursor: pointer; }
.workshop .dw-test .dw-summary-values > summary > span { font-size: 12px; }
.workshop .dw-test .dw-summary-values > ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; text-align: left; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }