/* ============================================================================
   Klar - the Design workspace (Components/Workspaces/Design): product types,
   properties, operations and the model history (proposal 6.5, DE-1..DE-11).

   Colour comes only from theme tokens (--mud-palette-*, --klar-*), so Klar and
   Nucera, light and dark work. Builds on the Klar blocks (page.css,
   editing.css, values.css) and adds only what the Design screens need.

   Sections
     1. shared: names, facts, legends, retired rows
     2. DE-2 structure view
     3. DE-3 / DE-4 type editor and new type flow
     4. DE-5 / DE-6 properties and property editor
     5. DE-8 / DE-9 operations and the step builder
     6. DE-11 model history and transfer
   ========================================================================= */


/* == 1. shared ================================================================ */

/* a keyed group of cards that stays part of the column's flex layout */
.klar-design-contents {
    display: contents;
}

.klar-design-page {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.klar-design-name {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.klar-design-icon {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.klar-design-display {
    display: block;
    font-weight: 600;
}

.klar-design-technical {
    display: block;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.klar-design-attention,
.klar-design-legend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.klar-design-legend {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-design-warn {
    color: var(--klar-tone-warning, var(--mud-palette-warning));
}

/* DE-7: "Move the products to [type ▾]" in the delete-type dialog, with the check of the move (R3-P1-06) */
.klar-design-move {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.klar-design-move-status {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-design-move-status.is-ok {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
}

.klar-design-move-status.is-error {
    color: var(--mud-palette-error);
}

.klar-design-move-conflicts ul {
    margin: .25rem 0 0;
    padding-left: 1.25rem;
    font-size: .8125rem;
}

.klar-design-move-product {
    font-family: var(--klar-font-mono);
    font-weight: 500;
}

tr.klar-design-retired td {
    color: var(--mud-palette-text-secondary);
}

tr.klar-design-retired .klar-design-display {
    font-weight: 500;
}

.klar-design-menu-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.klar-design-menu-text .klar-muted {
    font-size: .75rem;
}

.klar-design-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .375rem 1rem;
    margin: .75rem 0 0;
}

.klar-design-facts dt {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.klar-design-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-design-plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.klar-design-muted-block {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}


/* == 2. DE-2 structure view =================================================== */

.klar-structure {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.klar-structure-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.klar-structure-find {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: min(20rem, 100%);
    flex: 1 1 20rem;
}

.klar-structure-layout-label {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    margin-right: .25rem;
    align-self: center;
}

.klar-structure-hint {
    font-size: .8125rem;
}

.klar-structure-body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(16rem, 3fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .klar-structure-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.klar-structure-map {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    background-color: var(--mud-palette-surface);
    overflow: auto;
    max-height: calc(100vh - var(--mud-appbar-height) - 12rem);
    min-height: 16rem;
}

.klar-structure-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: max-content;
}

.klar-structure-node {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 2.25rem;
    padding: .25rem .625rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
    white-space: nowrap;
}

.klar-structure-node:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.klar-structure-node:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 2px;
}

.klar-structure-node.is-selected {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.klar-structure-node.is-match {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface));
    border-color: var(--mud-palette-warning);
}

.klar-structure-node.is-retired {
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
}

.klar-structure-node.is-draggable {
    cursor: grab;
}

.klar-structure-retired {
    font-size: .6875rem;
    color: var(--mud-palette-text-secondary);
}

.klar-structure-children {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-left: .25rem;
    padding-left: .5rem;
    border-left: 1px solid var(--klar-hairline);
}

.klar-structure-edge {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.klar-structure-edge > .klar-structure-row {
    align-items: center;
}

.klar-structure-edge-label {
    font-size: .6875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    min-width: 4.5rem;
    text-align: right;
}

.klar-structure-edge-line {
    display: inline-block;
    width: 1.25rem;
    border-top: 1px solid var(--mud-palette-text-secondary);
    position: relative;
}

.klar-structure-edge-line::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border: 4px solid transparent;
    border-left-color: var(--mud-palette-text-secondary);
}

.klar-structure-unplaced {
    margin-top: .5rem;
    padding: .75rem;
    border: 1px dashed var(--klar-hairline);
    border-radius: var(--klar-radius-card);
}

.klar-structure-h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
}

.klar-structure-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
}

.klar-structure-side {
    position: sticky;
    top: calc(var(--mud-appbar-height) + .5rem);
}

.klar-structure-side-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.klar-structure-side-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.klar-structure-legend {
    font-size: .8125rem;
}


/* == 3. DE-3 / DE-4 type editor and new type flow ============================ */

.klar-design-editor [id] {
    scroll-margin-top: calc(var(--mud-appbar-height) + 1rem);
}

/* two form grids in one card body: the same gap between them as inside */
.klar-design-card {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.klar-design-iconfield {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.klar-design-advanced {
    margin-top: .5rem;
}

.klar-design-advanced > summary,
.klar-format-advanced > summary {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
    padding: .25rem 0;
}

.klar-format {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.klar-format-none {
    font-size: .875rem;
}

.klar-format-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.klar-format-label {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-format-prefixes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.klar-format-chip .klar-filter-chip-text {
    font-weight: 600;
}

.klar-format-prefix-field {
    max-width: 12rem;
}

.klar-format-rule {
    min-width: 14rem;
    max-width: 18rem;
}

.klar-format-count {
    max-width: 6rem;
}

.klar-format-words {
    font-size: .875rem;
}

.klar-format-example {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}

.klar-format-help {
    flex-basis: 100%;
    font-size: .8125rem;
}

.klar-format-try {
    max-width: 32rem;
}

.klar-format-results {
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.klar-format-results li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}

.klar-format-results li.is-ok .mud-icon-root {
    color: var(--klar-tone-success, var(--mud-palette-success));
}

.klar-format-results li.is-bad .mud-icon-root {
    color: var(--klar-tone-error, var(--mud-palette-error));
}

.klar-place {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.klar-place-h3 {
    margin: 0 0 .375rem;
    font-size: .9375rem;
    font-weight: 650;
}

.klar-place-table td {
    vertical-align: top;
}

.klar-place-max {
    max-width: 7rem;
}

.klar-place-hint {
    font-size: .8125rem;
}

.klar-place-preview {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem;
    border-radius: var(--klar-radius-card);
    background-color: var(--mud-palette-background-gray);
}

.klar-place-preview-title {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.klar-place-preview-node,
.klar-place-preview-child {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.klar-place-preview-child {
    padding-left: 1rem;
}

.klar-typeprops {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.klar-typeprops-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.klar-typeprops-filter {
    max-width: 22rem;
}

.klar-typeprops-add {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    min-width: min(24rem, 90vw);
}

.klar-typeprops-create {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.klar-typeprops-table th[scope=row] {
    font-weight: 600;
    text-align: left;
}

.klar-typeprops-table td,
.klar-typeprops-table th {
    vertical-align: top;
}

.klar-typeprops-level {
    min-width: 11rem;
}

.klar-typeprops-who {
    min-width: 12rem;
}

.klar-level-symbol {
    display: inline-block;
    width: 1.25rem;
    font-weight: 700;
    text-align: center;
}

.klar-typeprops-others,
.klar-typeprops-suggested {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.klar-headerpreview {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
}

.klar-headerpreview-title {
    font-size: 1.125rem;
    font-weight: 650;
}

.klar-headerpreview-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
}

.klar-headerpreview-sep {
    color: var(--mud-palette-text-secondary);
}

.klar-iconpicker {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.klar-iconpicker-current,
.klar-iconpicker-upload {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.klar-iconpicker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
    gap: .25rem;
    max-height: 18rem;
    overflow: auto;
}

.klar-iconpicker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--klar-radius-control);
    background: none;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.klar-iconpicker-icon:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.klar-iconpicker-icon:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 1px;
}

.klar-iconpicker-icon.is-on {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.klar-hide-list {
    max-height: 22rem;
    overflow: auto;
}

.klar-newtype-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.klar-newtype-start .mud-radio {
    margin-right: 1.5rem;
}

.klar-newtype-review {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.klar-newtype-after {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border-radius: var(--klar-radius-card);
    background-color: var(--mud-palette-background-gray);
}

/* "Next steps after creating": buttons that create the type and go on (they wrap on a phone) */
.klar-newtype-next {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.klar-newtype-next .mud-button-root {
    max-width: 100%;
    white-space: normal;
    text-align: start;
}

.klar-newtype-summary .klar-structure-side-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.klar-newtype-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .75rem;
}

/* a row with a problem (the place rules, the choices) */
tr.klar-invalid td {
    background-color: color-mix(in srgb, var(--mud-palette-error) 6%, transparent);
}


/* == 4. DE-5 / DE-6 properties and property editor ========================= */

.klar-propflags-cell {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-propflags-cell > span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.klar-propmatrix {
    min-width: 0;
}

.klar-propflags {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.klar-propflag {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    align-items: baseline;
}

.klar-propflag .klar-muted {
    font-size: .8125rem;
}

.klar-kindhead {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.klar-kindhead > div {
    flex: 1 1 auto;
    min-width: 0;
}

.klar-kindsettings {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.klar-kindsettings-code textarea,
.klar-kindsettings-code input {
    font-family: var(--klar-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.klar-kindsettings-row,
.klar-kindsettings-test {
    max-width: 32rem;
}

.klar-kindsettings-picker {
    max-width: 24rem;
}

.klar-kindsettings-size {
    max-width: 12rem;
}

.klar-kindsettings-try {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
    font-size: .875rem;
}

.klar-kindsettings-try.is-ok .mud-icon-root {
    color: var(--klar-tone-success, var(--mud-palette-success));
}

.klar-kindsettings-try.is-bad {
    color: var(--mud-palette-error);
}

.klar-kindsettings-preview {
    font-size: .875rem;
}

.klar-kindsettings-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.klar-kindsettings-presets legend {
    width: 100%;
    margin-bottom: .25rem;
}

.klar-choices-editor {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.klar-choices-table td {
    vertical-align: top;
}

.klar-choices-table .mud-input-control {
    min-width: 7rem;
}

.klar-choices-table td,
.klar-choices-table th {
    padding-left: .25rem;
    padding-right: .25rem;
}

.klar-choices-tone {
    min-width: 8.5rem;
}

.klar-choices-action {
    white-space: nowrap;
}

.klar-propreview {
    padding: .75rem;
    border: 1px dashed var(--klar-hairline);
    border-radius: var(--klar-radius-card);
}

.klar-propuses {
    margin-bottom: .5rem;
}

.klar-propuse {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.klar-propuse-type {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.klar-propuse-type:hover {
    text-decoration: underline;
}

.klar-propuse-level {
    flex: 0 0 9.5rem;
}

.klar-kindpicker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.klar-kindpicker-card {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .625rem .75rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.klar-kindpicker-card:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.klar-kindpicker-card:focus-visible {
    outline: 2px solid var(--klar-accent);
    outline-offset: 1px;
}

.klar-kindpicker-card.is-on {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.klar-kindpicker-text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.klar-kindpicker-name {
    font-weight: 600;
}

.klar-kindpicker-text .klar-muted {
    font-size: .8125rem;
}


/* == 5. DE-8 / DE-9 operations and the step builder ========================= */

/* --- DE-8 list ------------------------------------------------------------ */

.klar-ops-head {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.klar-ops-name,
.klar-ops-cell {
    display: inline-flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.klar-ops-sub,
.klar-ops-cell .klar-muted {
    font-size: .8125rem;
}

.klar-ops-names {
    overflow-wrap: anywhere;
}

.klar-ops-problem {
    display: inline-flex;
    align-items: flex-start;
    gap: .25rem;
    margin-top: .25rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--klar-tone-warning);
}

.klar-ops-problem.is-error {
    color: var(--klar-tone-error);
}

.klar-ops-problem .mud-icon-root {
    flex: none;
    font-size: 1rem;
}

.klar-ops-actions {
    width: 3rem;
    text-align: right;
}

/* the operation picker of "Duplicate an existing one…" */
.klar-ops-choice {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--klar-radius-control, 6px);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.klar-ops-choice:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.klar-ops-choice.is-on {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    font-weight: 600;
}

.klar-ops-choice:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* --- DE-9 step builder: columns ------------------------------------------ */

.klar-ops-contents {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    min-width: 0;
}

/* the operator preview is the station screen: a wider right column than other editors */
@media (min-width: 1280px) {
    .klar-ops-editor .klar-editor-cols {
        grid-template-columns: minmax(0, 1fr) 24rem;
    }
}

.klar-ops-settings,
.klar-ops-steps,
.klar-ops-stepedit,
.klar-ops-preview {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

.klar-ops-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .875rem;
    align-items: start;
}

/* the link from the editor back to its step: only where the editor is below the list */
.klar-ops-stepedit-back {
    align-self: flex-start;
}

@media (min-width: 1100px) {
    .klar-ops-builder {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* a long operation: the editor stays in view next to the list, with a scroll bar of its own for a tall step */
    .klar-ops-stepedit {
        position: sticky;
        top: calc(var(--mud-appbar-height) + 1rem);
        max-height: calc(100vh - var(--mud-appbar-height) - 2rem);
        max-height: calc(100dvh - var(--mud-appbar-height) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .klar-ops-stepedit-back {
        display: none;
    }
}

/* --- settings -------------------------------------------------------------- */

.klar-ops-settings-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.klar-ops-summary {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klar-ops-settings-head .mud-icon-button {
    margin-left: auto;
}

.klar-ops-settings-body {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.klar-ops-instructions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .875rem;
}

@media (min-width: 960px) {
    .klar-ops-instructions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.klar-ops-markdown {
    min-width: 0;
    max-height: 18rem;
    overflow: auto;
    padding: .5rem .75rem;
    border: 1px dashed var(--klar-hairline);
    border-radius: var(--mud-default-borderradius);
}

.klar-ops-markdown-label {
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.klar-mono-input textarea,
.klar-mono-input input {
    font-family: var(--klar-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

/* --- design check ------------------------------------------------------------ */

.klar-ops-check {
    --klar-tone: var(--klar-tone-warning);
    padding: .75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--klar-tone) 55%, var(--klar-hairline));
    border-left-width: 4px;
    border-radius: var(--mud-default-borderradius);
    background-color: color-mix(in srgb, var(--klar-tone) 8%, var(--mud-palette-surface));
}

.klar-ops-check.is-error {
    --klar-tone: var(--klar-tone-error);
}

.klar-ops-check-title {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .375rem;
    font-size: .9375rem;
    font-weight: 650;
    color: var(--klar-tone);
}

.klar-ops-check-list {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-ops-check-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 .5rem;
    font-size: .875rem;
}

.klar-ops-check-list li::before {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--klar-tone-warning);
}

.klar-ops-check-list li.is-error::before {
    background-color: var(--klar-tone-error);
}

.klar-ops-check-list li > span {
    flex: 1 1 16rem;
    min-width: 0;
}

/* --- the steps ----------------------------------------------------------------- */

.klar-ops-steps-head .klar-count {
    margin-left: .25rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.klar-ops-steplist {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-ops-step {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: .25rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

/* "Insert step above / below": the menu of "Add step" opens under the step's card, not at the end of the list */
.klar-ops-step > .klar-ops-insert {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
}

.klar-ops-step.is-selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.klar-ops-step.is-disabled .klar-ops-stepbody {
    opacity: .6;
}

.klar-ops-step.is-dragover {
    border-style: dashed;
    border-color: var(--mud-palette-primary);
}

.klar-ops-drag.mud-icon-root {
    align-self: center;
    margin-left: .25rem;
    color: var(--mud-palette-text-secondary);
    cursor: grab;
}

.klar-ops-stepcard {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
    padding: .625rem .5rem .625rem .25rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.klar-ops-stepcard:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: var(--mud-default-borderradius);
}

.klar-ops-stepno {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--mud-palette-background-gray);
    font-size: .8125rem;
    font-weight: 650;
}

.klar-ops-step.is-selected .klar-ops-stepno {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.klar-ops-stepicon.mud-icon-root {
    flex: none;
    margin-top: .125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-ops-stepbody {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.klar-ops-verb {
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.klar-ops-sentence {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .375rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.klar-ops-value-text {
    font-weight: 650;
}

.klar-ops-tail {
    color: var(--mud-palette-text-secondary);
}

.klar-ops-detail {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* the step whose product the runner opens after a run (OperationMainProduct) */
.klar-ops-mainproduct {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8125rem;
    color: var(--mud-palette-primary);
}

.klar-ops-mainproduct-setting {
    display: grid;
    gap: .125rem;
    margin-block: .5rem;
}

.klar-ops-stepproblem {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8125rem;
    color: var(--klar-tone-warning);
}

.klar-ops-stepproblem.is-error {
    color: var(--klar-tone-error);
}

.klar-ops-stepproblem .mud-icon-root {
    font-size: 1rem;
}

.klar-ops-stepmenu {
    flex: none;
    align-self: flex-start;
    margin: .25rem .25rem 0 0;
}

.klar-ops-addstep {
    align-self: flex-start;
    position: relative;
}

/* "Add step" with a search: the field stays on top, the kinds scroll below it */
.klar-ops-addstep-popover {
    display: flex;
    flex-direction: column;
    width: min(30rem, calc(100vw - 32px));
    max-height: min(70vh, 560px);
}

.klar-ops-addstep-search {
    padding: 8px 8px 4px;
}

.klar-ops-addstep-list {
    overflow-y: auto;
    padding: 0 0 8px;
}

.klar-ops-addstep-list .klar-ops-menugroup {
    padding: 8px 12px 4px;
    color: var(--mud-palette-text-secondary);
}

.klar-ops-addstep-none {
    padding: 8px 12px;
}

.klar-ops-addstep-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.klar-ops-addstep-item:hover,
.klar-ops-addstep-item.is-active {
    background: var(--mud-palette-action-default-hover);
}

/* "All steps (22)" under the frequent ones */
.klar-ops-addstep-more {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 12px 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

/* the property of Ask / Set / Clear: the question with Back, the list, Add steps */
.klar-ops-addstep-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 0 4px;
}

.klar-ops-addstep-question {
    font-weight: 650;
}

.klar-ops-addstep-property {
    align-items: center;
}

.klar-ops-addstep-property .klar-ops-menuitem {
    flex: 1;
}

.klar-ops-addstep-tick {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid var(--mud-palette-text-secondary);
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 700;
}

.klar-ops-addstep-tick.is-ticked {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.klar-ops-addstep-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--klar-hairline);
}

.klar-ops-addstep-note {
    margin: 0;
    padding: 0 12px 8px;
    font-size: .75rem;
}

.klar-ops-addstep-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.klar-ops-menugroup {
    font-size: .75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.klar-ops-menuitem {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    max-width: 26rem;
    white-space: normal;
}

.klar-ops-menuitem .klar-muted {
    font-size: .8125rem;
}

.klar-ops-hint {
    margin: 0;
    font-size: .8125rem;
}

/* --- the step editor ------------------------------------------------------------- */

.klar-ops-stepform {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.klar-ops-fieldset {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    padding: .5rem .75rem .75rem;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--mud-default-borderradius);
}

.klar-ops-fieldset > legend {
    padding: 0 .25rem;
    font-size: .8125rem;
    font-weight: 650;
    color: var(--mud-palette-text-secondary);
}

.klar-ops-example {
    margin: 0;
    font-family: var(--klar-font-mono, ui-monospace, monospace);
}

.klar-ops-value {
    min-width: 0;
}

.klar-ops-note {
    margin: 0;
    padding: .5rem .75rem;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
    font-size: .8125rem;
}

.klar-ops-note.is-warning {
    background-color: color-mix(in srgb, var(--klar-tone-warning) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.klar-ops-note.is-error {
    background-color: color-mix(in srgb, var(--klar-tone-error) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.klar-ops-h3 {
    margin: .5rem 0 0;
    font-size: .875rem;
    font-weight: 650;
}

.klar-ops-pairs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.klar-ops-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: .5rem;
    align-items: center;
}

/* a data value of a POST step: the key and its remove button, the code editor below over the full width */
.klar-ops-pair.is-code {
    grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) auto;
}

.klar-ops-pair.is-code > .klar-script-editor,
.klar-ops-pair.is-code > .klar-script-fallback {
    grid-column: 1 / -1;
}

/* --- operator preview and test ------------------------------------------------------ */

.klar-ops-station {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.klar-ops-station-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
    font-weight: 650;
}

.klar-ops-batch {
    padding: .125rem .5rem;
    border: 1px solid var(--klar-hairline);
    border-radius: 999px;
    background-color: var(--mud-palette-surface);
    font-size: .8125rem;
    font-weight: 500;
}

.klar-ops-previewnote {
    margin: 0;
    font-size: .8125rem;
}

.klar-ops-test {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.klar-ops-test .mud-input-control {
    flex: 1 1 10rem;
    margin: 0;
}

.klar-ops-testresult {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.klar-ops-testsum {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    margin: 0;
    font-weight: 650;
}

.klar-ops-testsum.is-ok .mud-icon-root,
.klar-ops-testline.is-ok .mud-icon-root {
    color: var(--klar-tone-success);
}

.klar-ops-testsum.is-error,
.klar-ops-testsum.is-error .mud-icon-root,
.klar-ops-testline.is-error .mud-icon-root {
    color: var(--klar-tone-error);
}

.klar-ops-testlist {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.klar-ops-testline {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    overflow-wrap: anywhere;
}

.klar-ops-testline .mud-icon-root {
    flex: none;
    font-size: 1.125rem;
    color: var(--mud-palette-text-secondary);
}


/* == 6. DE-11 model history and transfer ==================================== */

.klar-history-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.klar-history-search {
    flex: 1 1 18rem;
    max-width: 28rem;
}

.klar-history-table td {
    vertical-align: top;
}

.klar-history-what {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.klar-history-object {
    font-weight: 600;
    overflow-wrap: anywhere;
}

a.klar-history-object {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

a.klar-history-object:hover {
    text-decoration: underline;
}

.klar-history-comment {
    max-width: 22rem;
    overflow-wrap: anywhere;
}

tr.klar-history-focus td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.klar-history-diffrow > td {
    padding: .5rem 1rem 1rem;
    background-color: var(--mud-palette-background-gray);
}

.klar-history-diff th[scope=row] {
    text-align: left;
    font-weight: 600;
}

.klar-history-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: .75rem;
}

.klar-history-more {
    display: flex;
    justify-content: center;
    padding: .5rem 0;
}

.klar-transfer-parts {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.klar-transfer-sub {
    margin-left: 2rem;
}

.klar-transfer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: 1rem;
}

.klar-transfer-summary {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: .5rem 0 .75rem;
}

.klar-transfer-bar {
    display: flex;
    justify-content: flex-end;
}

.klar-transfer-table td,
.klar-transfer-table th {
    vertical-align: top;
}

.klar-transfer-table th[scope=row] {
    text-align: left;
    font-weight: 500;
}

.klar-transfer-details {
    max-width: 30rem;
    font-size: .875rem;
}

.klar-transfer-problem {
    color: var(--mud-palette-error);
}

.klar-transfer-roles,
.klar-transfer-owner {
    margin-top: 1rem;
    max-width: 36rem;
}

.klar-transfer-ok {
    color: var(--klar-tone-success, var(--mud-palette-success));
}

/* DE-3 properties, DE-6 choices at phone width: the page never scrolls sideways - the rows are cards, every cell
   with the name of its column (the head row is hidden; the fields keep their own labels) */
@media (max-width: 640px) {
    .klar-typeprops-table,
    .klar-typeprops-table tbody,
    .klar-typeprops-table tr,
    .klar-typeprops-table td,
    .klar-typeprops-table th[scope=row],
    .klar-choices-table,
    .klar-choices-table tbody,
    .klar-choices-table tr,
    .klar-choices-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .klar-typeprops-table thead,
    .klar-choices-table thead {
        display: none;
    }

    .klar-typeprops-table tr,
    .klar-choices-table tr {
        position: relative;
        padding: .5rem 0;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .klar-typeprops-table td,
    .klar-typeprops-table th[scope=row],
    .klar-choices-table td {
        padding: .25rem .5rem;
        border-bottom: 0;
        white-space: normal;
    }

    .klar-typeprops-table td[data-label]::before,
    .klar-choices-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--mud-palette-text-secondary);
        font-size: .75rem;
        font-weight: 650;
    }

    .klar-typeprops-level,
    .klar-typeprops-who,
    .klar-typeprops-group,
    .klar-choices-tone,
    .klar-choices-table .mud-input-control {
        min-width: 0;
    }

    .klar-typeprops-table td.klar-typeprops-order {
        position: absolute;
        top: .5rem;
        right: 2.5rem;
        width: auto;
    }

    .klar-typeprops-table td.klar-typeprops-actions {
        position: absolute;
        top: .5rem;
        right: 0;
        width: auto;
    }

    .klar-typeprops-table th[scope=row] {
        padding-right: 5rem;
    }

    .klar-choices-table td.klar-num {
        text-align: start;
    }
}

/* the ⋮⋮ handle of the properties order (DE-3) */
.klar-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: grab;
}

.klar-drag-handle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.klar-drag-handle:disabled {
    cursor: default;
    opacity: .4;
}

.klar-typeprops-table tr.is-dragover {
    box-shadow: inset 0 2px 0 var(--mud-palette-primary);
}

.klar-typeprops-order {
    width: 2.25rem;
}

.klar-typeprops-group {
    min-width: 9rem;
}

/* DE-6 "Text with format": the builder - one row per part (kind, text or how many / up to, remove) */
.klar-textformat {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    margin: .75rem 0 0;
    padding: 0;
    border: 0;
}

.klar-textformat legend {
    width: 100%;
    margin-bottom: .25rem;
}

.klar-textformat-parts {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding-left: 1.5rem;
}

.klar-textformat-part {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}

.klar-textformat-part.klar-invalid::marker {
    color: var(--mud-palette-error);
}

.klar-textformat-kind {
    flex: 1 1 13rem;
    max-width: 16rem;
}

.klar-textformat-text {
    flex: 1 1 10rem;
    max-width: 16rem;
}

.klar-textformat-count {
    flex: 0 1 8rem;
    min-width: 6rem;
}

.klar-textformat-remove {
    margin-top: .375rem;
}

.klar-textformat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.klar-textformat-pattern {
    margin-top: .75rem;
}