/* DOK-320 — moved out of the embedded <style> in DocumentProcessDetailPage.razor.
   Global, NOT a .razor.css: 13 of these rules target MudBlazor internals (.mud-*), and Blazor's
   CSS isolation would scope them to the component's own elements, so they would silently stop
   applying. An embedded <style> block is already global, so this file preserves behaviour exactly.
   Content unchanged apart from two hex literals converted to tokens (D3).
   DOK-1447 — it was not quite unchanged: the move brought Razor's escape along, the at sign written twice, and in a
   .css file a media query or a keyframes rule written that way is invalid, so the browser drops it with its whole
   block. Until this fix the three media queries below and the saved screen's four animations did not exist.
   StaticStylesheetDok1447Tests keeps the doubled at sign out of every stylesheet. */

    /* DOK monochrome restyle: flat header (DokPageHeader, DOK-1510) + neutral surfaces; colour reserved for state. */
    .document-process-workspace { padding-bottom: 2.5rem; }
    .document-process-review__decision, .document-process-saved__actions { display: flex; align-items: center; }
    /* DOK-280 — single status pill in the calm header (colour only encodes state). */
    .document-process-status-pill { display: inline-flex; align-items: center; padding: .32rem .58rem; border-radius: 999px; background: rgba(148, 163, 184, .16); color: var(--mud-palette-text-secondary); font-size: .72rem; font-weight: 850; }
    .document-process-status-pill--active { background: var(--mud-palette-success-lighten); color: var(--mud-palette-success-darken); }
    .document-process-saved__actions { flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
    .document-process-action { font-weight: 850; letter-spacing: .01em; }
    /* DOK-280 — former accordion body now lives inside a padded .dok-cadastro-panel; keep it flush. */
    .document-process-accordion__content { padding: 0; }
    /* DOK-1112 — :not() on the boolean inputs, and it is the point of the whole rule set below.

       This says "every control in the wizard fills its column", which is right for a text field, a select or
       a picker and wrong for a switch: a switch beside its own explanation takes the line and leaves the
       words with what is left. Measured on DEV: 722px of a 722px row, the description at 108px, wrapping to
       one word per line. DOK-1112 released those controls globally in dok-shell.css; this file loads after
       it and, at equal specificity (two classes each), was quietly taking it back.

       DOK-1115 — THE SECOND SELECTOR NEEDED THE SAME EXCLUSION, and missing it kept the defect alive.
       `.mud-input-control-input-container` is the wrapper's own child, so a switch was released by the line
       above and then re-stretched one element in, by the line below. "Revisão de Qualidade" came back from
       DEV at 110px and twelve lines with the first exclusion already shipped. The container is only ever
       rendered inside a control, so scoping it to the non-boolean ones loses nothing. */
    .document-process-accordion__content .mud-input-control:not(.mud-input-control-boolean-input),
    .document-process-accordion__content .mud-input-control:not(.mud-input-control-boolean-input) .mud-input-control-input-container,
    .document-process-accordion__content .dok-user-selector,
    .document-process-accordion__content .dok-document-process-field-type-picker { width: 100%; }
    .document-process-color-option { display: inline-flex; align-items: center; gap: .5rem; }
    .document-process-color-option span { width: .85rem; height: .85rem; border-radius: 50%; box-shadow: 0 0 0 2px rgba(15, 23, 42, .08); }
    .document-process-identity-preview { display: flex; align-items: center; gap: .85rem; min-height: 5.25rem; padding: 1rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 14px; background: var(--mud-palette-surface); }
    .document-process-identity-preview__icon { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: 12px; background: rgba(148, 163, 184, .16); color: var(--mud-palette-text-primary); }
    .document-process-identity-preview strong, .document-process-identity-preview span { display: block; }
    .document-process-identity-preview strong { color: var(--mud-palette-text-primary); font-size: .98rem; font-weight: 900; }
    .document-process-identity-preview span { margin-top: .18rem; color: var(--mud-palette-text-secondary); font-size: .78rem; font-weight: 650; }
    .document-process-review__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
    .document-process-review__decision { justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1.15rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; background: var(--mud-palette-surface); }
    .document-process-review__decision > div:first-child > span { color: var(--mud-palette-text-secondary); font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
    .document-process-saved { position: relative; display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(0, 1.25fr); align-items: center; gap: 1.4rem; min-height: 19rem; padding: 1.4rem; overflow: hidden; border: 1px solid rgba(148, 163, 184, .2); border-radius: 12px; background: var(--mud-palette-surface); animation: document-process-saved-enter .5s ease-out; }
    .document-process-saved__art { position: relative; display: grid; place-items: center; width: 100%; min-height: 13rem; }
    .document-process-saved__glow, .document-process-saved__ring { position: absolute; border-radius: 50%; }
    .document-process-saved__glow { width: 10rem; height: 10rem; background: rgba(148, 163, 184, .12); animation: document-process-saved-pulse 2s ease-in-out infinite; }
    .document-process-saved__ring { width: 7rem; height: 7rem; border: 3px solid rgba(148, 163, 184, .3); animation: document-process-saved-ring 1.8s ease-out infinite; }
    .document-process-saved__check { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--mud-palette-text-primary); color: var(--mud-palette-surface); }
    .document-process-saved__spark { position: absolute; width: .38rem; height: .38rem; border-radius: 50%; background: rgba(148, 163, 184, .55); animation: document-process-saved-spark 1.6s ease-in-out infinite; }
    .document-process-saved__spark--one { top: 2rem; right: 22%; } .document-process-saved__spark--two { bottom: 2.2rem; left: 20%; animation-delay: .35s; } .document-process-saved__spark--three { top: 3rem; left: 24%; animation-delay: .7s; }
    .document-process-saved__eyebrow { color: var(--mud-palette-text-secondary); font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
    .document-process-saved__title { margin-top: .12rem; font-weight: 900; } .document-process-saved__description { color: var(--mud-palette-text-secondary); }
    .document-process-saved__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; }
    .document-process-saved__details div { padding: .65rem .75rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 8px; background: var(--mud-palette-background); }
    .document-process-saved__details span, .document-process-saved__details strong { display: block; }
    .document-process-saved__details span { color: var(--mud-palette-text-secondary); font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .document-process-saved__details strong { margin-top: .14rem; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
    .document-process-saved__actions { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid rgba(148, 163, 184, .2); }

    .document-process-shell .dok-cadastro-content .mud-table {
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 12px;
    }

    .document-process-shell .dok-cadastro-content .mud-table-head .mud-table-cell {
        background: rgba(148, 163, 184, 0.08);
    }

    /* DOK-315 — field-type glyph tile inside a dynamic-field card row */
    .document-process-field-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        background: rgba(148, 163, 184, .14);
    }

    .dok-tpl-editor__action-btn {
        height: 44px;
        min-height: 44px;
        min-width: 140px;
        font-weight: 800;
    }

    .document-process-field-editor-cell {
        min-width: 0;
    }

    /* DOK-841 — the Add-field form is three regions, each a full-width grid cell holding a grid of its
       own: the business field, then the stable presentation/filling row, then whatever that business
       field brings with it. Only min-width is set here; the columns are MudBlazor's own breakpoints, so
       the narrow-screen behaviour is the one the rest of the app already has. */
    .document-process-field-editor-row {
        min-width: 0;
    }

    .document-process-field-editor-cell > * {
        width: 100%;
    }

    .document-process-field-editor-cell--aligned {
        display: flex;
        align-items: stretch;
    }

    /* DOK-1114 — same exclusion, same reason: the cell stretches its control to the column, and a switch is
       the one control that must not be stretched. */
    .document-process-field-editor-cell--aligned .mud-input-control:not(.mud-input-control-boolean-input) {
        width: 100%;
    }

    .document-process-field-editor-required {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 56px;
        min-height: 56px;
        padding: 0 12px;
        border: 1px solid var(--mud-palette-lines-inputs);
        border-radius: 8px;
        background: var(--mud-palette-surface);
    }

    .document-process-field-editor-required .mud-switch {
        display: inline-flex;
        align-items: center;
        margin: 0;
    }

    .document-process-dynamic-fields__summary {
        flex-wrap: wrap;
    }

    .document-process-sensitive-fields {
        border-color: rgba(148, 163, 184, 0.2) !important;
        border-radius: 14px;
        background: var(--mud-palette-surface);
    }

    .document-process-sensitive-fields__header {
        flex-wrap: wrap;
    }

    .document-process-sensitive-fields__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        gap: .7rem;
        margin-top: .85rem;
    }

    .document-process-sensitive-field {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: .6rem;
        min-width: 0;
        padding: .75rem;
        border: 1px solid rgba(148, 163, 184, .2);
        border-radius: 10px;
        background: var(--mud-palette-surface);
        cursor: pointer;
    }

    .document-process-sensitive-field .mud-checkbox {
        margin: 0;
    }

    .document-process-sensitive-field__icon {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        background: rgba(148, 163, 184, .16);
    }

    .document-process-sensitive-field__copy {
        min-width: 0;
    }

    .document-process-sensitive-field__copy strong,
    .document-process-sensitive-field__copy span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .document-process-sensitive-field__copy strong {
        color: var(--mud-palette-text-primary);
        font-size: .84rem;
        font-weight: 800;
    }

    .document-process-sensitive-field__copy span {
        margin-top: .08rem;
        color: var(--mud-palette-text-secondary);
        font-size: .72rem;
        font-weight: 650;
    }


    /* DOK-344 — ten concise menus fit in the rail without hiding the final steps. */
    .document-process-shell .dok-cadastro-rail { max-height: calc(100vh - 6.5rem); overflow-y: auto; }
    .document-process-shell .dok-cadastro-rail__step { min-height: 3.55rem; }

    .document-process-collection-help { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid rgba(var(--mud-palette-primary-rgb), .28); border-radius: 12px; background: rgba(var(--mud-palette-primary-rgb), .035); }
    .document-process-collection-help__icon { display: grid; place-items: center; flex: 0 0 auto; width: 1.85rem; height: 1.85rem; border-radius: 50%; color: var(--mud-palette-primary); }
    .document-process-collection-help strong { display: block; font-size: .8rem; font-weight: 900; }
    .document-process-collection-help p { margin: .12rem 0 0; color: var(--mud-palette-text-secondary); font-size: .73rem; line-height: 1.45; }

    /* DOK-347 — compact composer on top; every document is an accordion below. */
    .document-process-composer { margin-bottom: 1rem; padding: .85rem .9rem; border-radius: 12px; }
    .document-process-composer__header { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
    .document-process-composer__icon { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; flex: 0 0 auto; border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), .11); color: var(--dok-tone-primary-ink); }
    .document-process-composer__title { display: block; font-size: .82rem; font-weight: 900; }
    .document-process-composer__hint { display: block; margin-top: .08rem; color: var(--mud-palette-text-secondary); font-size: .7rem; }
    /* MudBlazor sizes .mud-input-control at width:100% — it must yield to the flex basis below,
       otherwise every control claims a full row and the compact line breaks apart. */
    /* DOK-344 — the group label is what tells the reader whether a field describes the document or
       constrains its files. Without it the row is eight inputs of equal weight and equal mystery.
       The fields keep their original order and position; what changes is that the eye is now given
       somewhere to rest between the two ideas — a label, an indent rule, and breathing room. */
    .document-process-composer__group { position: relative; margin-bottom: .85rem; padding-left: .7rem; }
    .document-process-composer__group::before { content: ""; position: absolute; left: 0; top: .15rem; bottom: .15rem; width: 2px; border-radius: 2px; background: rgba(var(--mud-palette-primary-rgb), .22); }
    .document-process-composer__group:last-of-type::before { background: rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), .18); }
    .document-process-composer__group-label { display: block; margin-bottom: .4rem; color: var(--mud-palette-text-secondary); font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
    .document-process-composer__actions { display: flex; justify-content: flex-end; padding-top: .1rem; border-top: 1px solid rgba(148, 163, 184, .16); margin-top: .8rem; }
    .document-process-composer__actions .document-process-composer__add { margin-top: .7rem; }
    .document-process-composer__line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .document-process-composer__line .mud-input-control { width: auto; margin: 0; }
    .document-process-composer__name { flex: 2 1 11rem; min-width: 9rem; }
    .document-process-composer__code { flex: 0 1 6.5rem; min-width: 5.5rem; }
    .document-process-composer__description { flex: 3 1 12rem; min-width: 10rem; }
    .document-process-composer__number { flex: 0 0 5rem; }
    .document-process-composer__types { flex: 1 1 8rem; min-width: 7rem; }
    .document-process-composer__switch { flex: 0 0 auto; width: auto; margin: 0; }
    .document-process-composer__switch .mud-switch-label { font-size: .74rem; font-weight: var(--dok-font-weight-bold); }
    /* DOK-1208 (DEV-55) — the rules of a document are lines with a fixed order, drawn by
       DokDocumentDefinitionRulesFields. .document-process-composer__line is still the row; this is only the
       rhythm between rows and the room the threshold gets once it has a line of its own. */
    .dok-docdef-rules__line + .dok-docdef-rules__line { margin-top: .6rem; }
    /* DOK-1278 (DEV-59) — the threshold, the confidentiality and how it is collected share a line in both editors.
       The threshold's hint sits under its field, so the line aligns to the top and the three boxes stay level. The
       two selects take the width of what they show, not what is left of the line: MudSelect's flex item is its
       .mud-select wrapper (its Class lands on the inner control), so the width is set on the wrapper, with bounds
       that keep the longest option readable and a short one from shrinking the box to its arrow. */
    .dok-docdef-rules__line--policy { align-items: flex-start; }
    .dok-docdef-rules__line--policy .document-process-composer__number { flex-basis: 12rem; }
    .dok-docdef-rules__line--policy > .mud-select { flex: 0 0 auto; width: auto; min-width: 11rem; max-width: 16rem; }
    .dok-docdef-rules__line--policy > .mud-select .dok-docdef-rules__select { width: 100%; }
    /* DOK-1464 — the document types it expects: the select takes the line, up to the width a summary of several types
       reads at, with its hint under it. The flex item is MudSelect's .mud-select wrapper, as on the policy line. */
    .dok-docdef-rules__line--expected-types > .mud-select { flex: 1 1 18rem; width: auto; max-width: 36rem; }
    .dok-docdef-rules__line--expected-types > .mud-select .dok-docdef-rules__select { width: 100%; }
    .document-process-composer__add { flex: 0 0 auto; margin-left: auto; font-weight: 800; white-space: nowrap; }

    .document-process-doc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .55rem; }
    .document-process-doc-toolbar__label { color: var(--mud-palette-text-secondary); font-size: .74rem; font-weight: 800; }
    .document-process-doc-list { display: flex; flex-direction: column; gap: .55rem; }
    .document-process-doc-acc { overflow: hidden; border: 1px solid rgba(148, 163, 184, .22); border-radius: 12px; background: var(--mud-palette-surface); transition: border-color .15s ease, box-shadow .15s ease; }
    .document-process-doc-acc:hover { border-color: rgba(148, 163, 184, .42); }
    .document-process-doc-acc--open { border-color: rgba(var(--mud-palette-primary-rgb), .5); box-shadow: 0 10px 24px rgba(15, 23, 42, .05); }
    .document-process-doc-acc__header { display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; }
    .document-process-doc-acc__handle { display: grid; place-items: center; flex: 0 0 auto; color: var(--mud-palette-text-secondary); cursor: grab; }
    .document-process-doc-acc__handle:active { cursor: grabbing; }
    .document-process-doc-acc__header[draggable="false"] .document-process-doc-acc__handle { cursor: default; opacity: .45; }
    .document-process-doc-acc__order { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; border-radius: 50%; background: rgba(148, 163, 184, .16); color: var(--mud-palette-text-primary); font-size: .7rem; font-weight: 900; }
    /* align-items:flex-start is required: the UA stylesheet centers button flex children,
       which on a column button centers the name and badges horizontally. */
    .document-process-doc-acc__main { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .15rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .document-process-doc-acc__name { overflow: hidden; color: var(--mud-palette-text-primary); font-size: .84rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
    .document-process-doc-acc--open .document-process-doc-acc__name { color: var(--mud-palette-primary); }
    .document-process-doc-acc__badges { display: flex; min-width: 0; flex-wrap: wrap; gap: .25rem; }
    .document-process-doclist__badge { max-width: 100%; overflow: hidden; padding: .1rem .42rem; border-radius: 999px; background: rgba(148, 163, 184, .16); color: var(--mud-palette-text-secondary); font-size: .62rem; font-weight: 800; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
    .document-process-doclist__badge--required { background: rgba(var(--mud-palette-primary-rgb), .12); color: var(--dok-tone-primary-ink); }
    .document-process-doc-acc__badge--doc { background: rgba(var(--mud-palette-primary-rgb), .12); color: var(--dok-tone-primary-ink); }
    .document-process-doc-acc__badge--att { background: rgba(var(--mud-palette-success-rgb), .14); color: var(--mud-palette-success-darken); }
    .document-process-doc-acc__actions { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
    .document-process-doc-acc__caret { display: grid; place-items: center; flex: 0 0 auto; padding: .3rem; border: 0; border-radius: 8px; background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer; transition: transform .18s ease; }
    .document-process-doc-acc--open .document-process-doc-acc__caret { transform: rotate(180deg); }
    .document-process-doc-acc__body { display: flex; flex-direction: column; gap: .9rem; padding: .85rem .9rem 1rem; border-top: 1px solid rgba(148, 163, 184, .16); }
    .document-process-doc-acc__rules-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; }
    .document-process-doc-acc__rules-head strong { font-size: .78rem; font-weight: 900; }
    .document-process-doc-acc__rules-head small { color: var(--mud-palette-text-secondary); font-size: .66rem; }

    .document-process-definition-group__step { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; background: rgba(var(--mud-palette-primary-rgb), .11); color: var(--dok-tone-primary-ink); font-size: .76rem; font-weight: 900; }

    /* DOK-347 — both scopes stay visible side by side, each with its own accent. */
    .document-process-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: start; }
    .document-process-scope-panel { min-width: 0; }
    .document-process-scope-panel--document > .document-process-scoped { border-color: rgba(var(--mud-palette-primary-rgb), .3); background: rgba(var(--mud-palette-primary-rgb), .035); }
    .document-process-scope-panel--document .document-process-scoped__level-icon { background: rgba(var(--mud-palette-primary-rgb), .14); color: var(--dok-tone-primary-ink); }
    .document-process-scope-panel--attachment > .document-process-scoped { border-color: rgba(var(--mud-palette-success-rgb), .32); background: rgba(var(--mud-palette-success-rgb), .045); }
    .document-process-scope-panel--attachment .document-process-scoped__level-icon { background: rgba(var(--mud-palette-success-rgb), .16); color: var(--mud-palette-success-darken); }

    /* One shared, premium editor for both Document and Attachment scopes. */
    .document-process-scoped { display: flex; flex-direction: column; gap: .75rem; padding: .9rem; border: 1px solid rgba(148, 163, 184, .24); border-radius: 12px; background: rgba(148, 163, 184, .04); }
    .document-process-scoped__header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(148, 163, 184, .18); }
    .document-process-scoped__level-icon, .document-process-scoped__section-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: rgba(148, 163, 184, .16); }
    .document-process-scoped__section-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin-top: .15rem; }
    .document-process-scoped__section-header--validation { margin-top: .45rem; padding-top: .9rem; border-top: 1px solid rgba(148, 163, 184, .2); }
    .document-process-scoped__section-header strong, .document-process-scoped__section-header small { display: block; }
    .document-process-scoped__section-header strong { font-size: .78rem; font-weight: 900; }
    .document-process-scoped__section-header small { margin-top: .08rem; color: var(--mud-palette-text-secondary); font-size: .68rem; }
    .document-process-scoped__list { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; }
    .document-process-scoped__row { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; }
    .document-process-scoped__main { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .35rem; }
    .document-process-scoped__name { overflow: hidden; color: var(--mud-palette-text-primary); font-size: .82rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .document-process-scoped__actions { display: flex; align-items: center; gap: .05rem; flex: 0 0 auto; }
    .document-process-scoped__editor { margin-top: .1rem; }
    .document-process-scoped__checklist-input { display: flex; align-items: center; gap: .5rem; }
    .document-process-scoped__checklist-input .mud-input-control { flex: 1 1 auto; }

    @keyframes document-process-saved-enter { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes document-process-saved-pulse { 50% { transform: scale(1.12); opacity: .6; } }
    @keyframes document-process-saved-ring { 70%, 100% { transform: scale(1.35); opacity: 0; } }
    @keyframes document-process-saved-spark { 50% { transform: translateY(-5px) scale(1.35); opacity: .55; } }

    @media (max-width: 1199.98px) {
        .document-process-shell .dok-cadastro-rail { max-height: none; overflow-y: visible; }
        .document-process-shell .dok-cadastro-rail__step { min-height: 0; }
    }

    @media (max-width: 1100px) {
        .document-process-scope-grid { grid-template-columns: minmax(0, 1fr); }
    }

    @media (max-width: 700px) {
        .document-process-review__decision { align-items: flex-start; flex-direction: column; }
        .document-process-saved__actions { justify-content: flex-start; }
        .document-process-review__summary, .document-process-saved__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .document-process-saved { grid-template-columns: 1fr; }
        .document-process-saved__art { min-height: 9rem; }
        .document-process-saved__actions { grid-column: 1 / -1; }
        .document-process-composer__add { width: 100%; margin-left: 0; }
        .document-process-doc-acc__actions { display: none; }
        .document-process-scoped__row { align-items: flex-start; flex-wrap: wrap; }
        .document-process-scoped__actions { width: 100%; justify-content: flex-end; }
        .document-process-scoped__checklist-input { align-items: stretch; flex-direction: column; }
        .document-process-scoped__checklist-input .mud-button-root { width: 100%; }
    }

    /* DOK-1443 — a field's rule (DokFieldPopulation): the sentence, the button that has the Genius translate it, and
       the formula in plain words, proposed or confirmed. The proposal takes the primary's wash so it reads as a question
       still open; a confirmed formula is a plain line. */
    .dok-field-rule { display: flex; flex-direction: column; gap: .6rem; }
    .dok-field-rule__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .dok-field-rule__formula { display: flex; flex-direction: column; gap: .35rem; padding: .65rem .8rem; border: 1px solid rgba(148, 163, 184, .28); border-radius: 8px; }
    .dok-field-rule__formula--proposed { border-color: rgba(var(--mud-palette-primary-rgb), .32); background: rgba(var(--mud-palette-primary-rgb), .06); }
    .dok-field-rule__caption { display: inline-flex; align-items: center; gap: .3rem; color: var(--mud-palette-text-secondary); font-size: var(--dok-font-size-xs); font-weight: 800; }
    .dok-field-rule__text { font-size: .9rem; overflow-wrap: anywhere; }
    .dok-field-rule__note { color: var(--mud-palette-text-secondary); font-size: var(--dok-font-size-xs); }

    /* DOK-1441 — an instruction says what the Genius does with it, above its box, and «Test with a document» under it.
       The test's excerpts keep their line breaks and wrap, so a passage of an invoice reads like the invoice. */
    .dok-field-prompt { display: flex; flex-direction: column; gap: .5rem; }
    .dok-field-prompt__explains { color: var(--mud-palette-text-secondary); }
    .dok-field-prompt-test__evidence { max-width: 28rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; color: var(--mud-palette-text-secondary); }