/* The look of the plugin UI kit (Opera.Plugins.Ui, docs/20 §4): global, linked by the application, class names «pk-».
   Colours, sizes and radii come from the design tokens of the application (--op-*). */

/* ───────────── icons ───────────── */
.pk-icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    .pk-icon .fill {
        fill: currentColor;
        fill-opacity: 0.55;
    }

    .pk-icon .cut {
        stroke: var(--op-accent, #5b97ff);
        stroke-width: 1.5;
    }

/* ───────────── buttons ───────────── */
.pk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-xs);
    white-space: nowrap;
    cursor: pointer;
}

    .pk-btn:hover:not(:disabled) {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

    .pk-btn:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

    .pk-btn:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .pk-btn.is-active {
        border-color: var(--op-accent, #5b97ff);
        background: var(--op-active-bg);
        color: var(--op-active-fg);
    }

    .pk-btn.is-primary:not(:disabled) {
        border-color: color-mix(in srgb, var(--op-accent) 80%, transparent);
        background: var(--op-active-bg);
    }

    .pk-btn.is-danger {
        border-color: var(--op-danger-border);
        color: var(--op-danger-fg);
    }

    /* a command that adds or creates (PanelButton Accent): filled blue, white text */
    .pk-btn.is-accent {
        border-color: transparent;
        background: var(--op-accent-fill, #2d6ce0);
        color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

        .pk-btn.is-accent:hover:not(:disabled) {
            background: color-mix(in srgb, var(--op-accent-fill, #2d6ce0) 85%, var(--op-text-strong));
            color: #fff;
        }

.pk-close {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--op-text-2);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

    .pk-close:hover {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

/* ───────────── hints, sections, fields ───────────── */
.pk-hint {
    margin: 0;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    line-height: 1.35;
}

    .pk-hint.is-attention {
        color: var(--op-warning-fg);
    }

    .pk-hint.is-error {
        color: var(--op-danger-fg);
    }

.pk-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

    .pk-section:first-child {
        margin-top: 0;
    }

.pk-section-title {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

    /* a title that is a name (a file, a model): as it is written, never upper-cased */
    .pk-section-title.is-name {
        letter-spacing: normal;
        text-transform: none;
    }

.pk-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pk-field label {
        flex: 0 0 7.5rem;
        color: var(--op-text-2);
        font-size: var(--op-text-xs);
    }

    .pk-field .form-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pk-field .form-control-color {
        flex: none;
        width: 2.4rem;
        padding: 0.15rem;
    }

.pk-switch {
    margin-bottom: 0.2rem;
    font-size: var(--op-text-xs);
}

/* ───────────── floating panels (top left of the stage, one under the other) ───────────── */
.pk-float {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: min(26rem, 100%);
    padding: 0.45rem 0.55rem 0.55rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-lg, 0.75rem);
    /* opaque enough to read over any model; no backdrop-filter: it would re-blur the WebGL canvas on every frame */
    background: var(--op-float-bg);
    box-shadow: var(--op-shadow-float);
    color: var(--op-float-fg);
    pointer-events: auto;
}

    .pk-float.is-collapsed {
        width: auto;
    }

        .pk-float.is-collapsed .pk-row .pk-btn span {
            display: none;
        }

    /* a narrower panel: a few short lines, icon buttons */
    .pk-float.is-compact {
        width: min(18rem, 100%);
    }

.pk-float-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.pk-float-title {
    flex: 1 1 auto;
    margin: 0.3rem 0 0 0.15rem;
    font-size: var(--op-text-sm, 0.85rem);
    font-weight: 600;
}

.pk-float-sub {
    color: var(--op-text-2);
    font-weight: 400;
}

/* ───────────── drop-downs of the ribbon (under their button; from the fourth group on towards the left) ───────────── */
.pk-dropdown {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 1;
    width: 19rem;
    max-height: calc(100vh - 9rem);
    overflow: auto;
    padding: 0.6rem 0.75rem 0.75rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-lg, 0.75rem);
    background: var(--op-float-bg);
    box-shadow: var(--op-shadow-float);
    color: var(--op-float-fg);
    font-size: var(--op-text-sm);
}

.ribbon-group:nth-child(n+4) .ribbon-item > .pk-dropdown {
    left: auto;
    right: 0;
}

.pk-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.pk-dropdown-title {
    margin: 0;
    font-size: var(--op-text-sm);
    font-weight: 600;
}

/* ───────────── side panels: the bar, the list of saved things ───────────── */
.pk-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pk-panel-text {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

.pk-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
    font-size: var(--op-text-xs);
}

.pk-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.3rem 0.25rem;
    border-top: 1px solid var(--op-border);
    border-radius: 0;
}

    .pk-item.is-active {
        border-radius: 6px;
        background: var(--op-active-bg);
    }

    .pk-item.is-hidden .pk-name,
    .pk-item.is-hidden .pk-value {
        opacity: 0.5;
    }

.pk-eye,
.pk-remove {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--op-text-2);
    line-height: 1;
    cursor: pointer;
}

.pk-remove {
    font-size: 1rem;
}

    .pk-eye:hover,
    .pk-remove:hover:not(:disabled),
    .pk-item.is-active .pk-eye {
        color: var(--op-text-strong);
    }

    /* a locked version (SavedItem.ReadOnlyReason): × stays in place, faded, the reason as its tooltip */
    .pk-remove:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

.pk-name {
    /* small basis: the eye, the icon, the actions and × stay on the line of the name in a narrow panel */
    flex: 1 1 3rem;
    min-width: 0;
    padding: 0 0.25rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
}

input.pk-name:hover,
input.pk-name:focus {
    border-color: var(--op-border-strong);
    background: var(--op-surface-2);
    outline: none;
}

.pk-value {
    flex: 1 0 100%;
    padding-left: 1.6rem;
    font-variant-numeric: tabular-nums;
}

    .pk-value.is-missing {
        color: var(--op-text-2);
        font-style: italic;
    }

.pk-note {
    flex: 1 0 100%;
    padding-left: 1.6rem;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
}

/* the commands of a menu (a drop-down of the ribbon, the menu of phones): one per line, icon and label */
.pk-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pk-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-xs);
    text-align: left;
    cursor: pointer;
}

    .pk-option:hover:not(:disabled) {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

    .pk-option:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .pk-option.is-active {
        border-color: var(--op-accent, #5b97ff);
        background: var(--op-active-bg);
        color: var(--op-active-fg);
    }

    .pk-option:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

    /* a label drawn as a button around a hidden file input (the input takes the focus): the ring on the label */
    label.pk-btn:has(input:focus-visible),
    label.pk-option:has(input:focus-visible) {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

.pk-options + .pk-hint,
.pk-dropdown .pk-hint {
    margin-top: 0.5rem;
}

/* an error of a command, after the groups of a plugin tab */
.ribbon-error {
    align-self: center;
    max-width: 18rem;
    padding: 0 0.6rem;
}

/* the menu of a phone tool (the flyout of the vertical menu): the commands one per line */
.pk-phone {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .pk-phone .pk-btn {
        justify-content: flex-start;
    }

.pk-phone-menu {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pk-phone-menu-title {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

/* ───────────── standard windows (Ui/FloatingDialog: non-modal, dragged by the title bar) ───────────── */
.pk-dialog {
    position: fixed;
    z-index: 1060; /* above the viewer panels and the action bar, below Bootstrap toasts */
    left: 50%;
    top: 96px;
    transform: translateX(-50%); /* until the script places it (left/top in px, transform none) */
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 104px); /* from its first top (96px) to 8px above the bottom; the script sets it as it moves */
    display: flex;
    flex-direction: column;
    background: var(--op-surface, #161b24);
    color: var(--op-text, #e6e9ef);
    border: 1px solid var(--op-border-strong, rgba(255, 255, 255, 0.16));
    border-radius: var(--op-radius-lg, 10px);
    box-shadow: var(--op-shadow-lg);
    outline: none;
    pointer-events: auto;
}

    .pk-dialog:focus-visible {
        box-shadow: var(--op-shadow-lg), var(--op-ring, 0 0 0 2px #4c8dff);
    }

.pk-dialog-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem 0.45rem 0.7rem;
    border-bottom: 1px solid var(--op-border, rgba(255, 255, 255, 0.1));
    cursor: grab;
    user-select: none;
    touch-action: none;
    flex: none;
}

    .pk-dialog-header:focus-visible {
        outline: 2px solid var(--op-focus, #4c8dff);
        outline-offset: -2px;
        border-radius: var(--op-radius-lg, 10px) var(--op-radius-lg, 10px) 0 0;
    }

.pk-dialog.dragging .pk-dialog-header {
    cursor: grabbing;
}

.pk-dialog-grip {
    flex: none;
    fill: var(--op-text-3, #8a93a3);
}

.pk-dialog-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--op-text-sm, 0.8125rem);
    font-weight: 600;
}

.pk-dialog-close {
    flex: none;
    font-size: 0.65rem;
}

.pk-dialog-body {
    overflow: auto;
    padding: 0.6rem 0.8rem 0.75rem;
    min-height: 0;
}

.pk-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    padding: 0.5rem 0.8rem;
    border-top: 1px solid var(--op-border, rgba(255, 255, 255, 0.1));
}

/* a short text on the left of the commands of the footer (the commands go to the right) */
.pk-footer-note {
    margin-right: auto;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    /* one line: a long note is cut with an ellipsis (its title holds it whole), the buttons stay on the row */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* a window set aside (Hidden): out of sight with all it holds (a proposal list placed by the script too), its DOM kept */
.pk-dialog.is-hidden,
.pk-dialog.is-hidden * {
    visibility: hidden !important;
}

/* ───────────── modal dialogs (Ui/ModalDialog): centred on a backdrop that dims the scene; above the floating windows
   (.pk-dialog, 1060), below the modals of the application (backdrop 1070, dialog 1075), so a confirmation asked from it
   opens on top; on a phone a sheet at the bottom, as wide as the screen ───────────── */
.pk-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 1065;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--op-backdrop);
    animation: pk-modal-fade 0.14s ease-out;
}

.pk-modal {
    display: flex;
    flex-direction: column;
    width: min(var(--pk-modal-width, 40rem), 100%);
    max-height: min(46rem, calc(100vh - 32px));
    max-height: min(46rem, calc(100dvh - 32px));
    background: var(--op-surface, #161b24);
    color: var(--op-text, #e6e9ef);
    border: 1px solid var(--op-border-strong, rgba(255, 255, 255, 0.16));
    border-radius: var(--op-radius-lg, 10px);
    box-shadow: var(--op-shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3));
    outline: none;
    animation: pk-modal-rise 0.16s ease-out;
}

    .pk-modal:focus-visible {
        box-shadow: var(--op-shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.45)), var(--op-ring, 0 0 0 2px #4c8dff);
    }

.pk-modal-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: none;
    padding: 0.6rem 0.7rem 0.55rem 0.85rem;
    border-bottom: 1px solid var(--op-border, rgba(255, 255, 255, 0.1));
}

.pk-modal-heading {
    flex: 1;
    min-width: 0;
}

.pk-modal-title {
    margin: 0;
    font-size: var(--op-text-sm, 0.8125rem);
    font-weight: 600;
    line-height: 1.3;
}

.pk-modal-subtitle {
    margin: 0;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    line-height: 1.3;
}

.pk-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0.7rem 0.85rem 0.8rem;
}

.pk-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: none;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--op-border, rgba(255, 255, 255, 0.1));
}

/* the body spaces its blocks itself (the gap): no margins of their own; a lead line says what the dialog is about */
.pk-modal-body > :is(.pk-hint, .pk-list, .pk-section, .pk-notice, .pk-section-title, section) {
    margin: 0;
}

.pk-modal-body > section > .pk-section-title {
    margin: 0 0 0.25rem;
}

.pk-modal-body > section > .pk-list {
    margin: 0;
}

.pk-modal-lead {
    margin: 0;
    font-size: var(--op-text-sm, 0.8125rem);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .pk-modal-layer {
        align-items: flex-end;
        padding: 0;
    }

    .pk-modal {
        width: 100%;
        max-height: 88vh;
        max-height: 88dvh;
        border-bottom: 0;
        border-radius: var(--op-radius-lg, 10px) var(--op-radius-lg, 10px) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* the note on its own line, the commands sharing the width (big enough for a thumb) */
    .pk-modal-footer .pk-footer-note {
        flex: 1 0 100%;
        white-space: normal;
    }

    .pk-modal-footer .pk-btn {
        flex: 1 1 0;
        height: 1.5rem;
    }
}

/* ───────────── resizable / maximizable modal dialogs (ModalDialog Resizable / Maximizable, SDK 0.20) ─────────────
   Sized by its handle (--pk-modal-w / --pk-modal-h set by the script, attribute data-sized) or maximized (as large as the page): the
   body takes the height left, and a content that should grow with it (panes, a list) says so for these two classes. */
.pk-modal.is-resizable {
    position: relative;
    min-width: min(var(--pk-modal-min-w, 24rem), 100%);
    min-height: min(var(--pk-modal-min-h, 16rem), calc(100dvh - 32px));
}

.pk-modal[data-sized] {
    width: min(var(--pk-modal-w), calc(100vw - 32px));
    height: min(var(--pk-modal-h), calc(100vh - 32px));
    height: min(var(--pk-modal-h), calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
}

.pk-modal.is-maximized {
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    max-height: none;
}

    .pk-modal:is([data-sized], .is-maximized) .pk-modal-body {
        flex: 1 1 auto;
    }

    .pk-modal.resizing {
        user-select: none;
    }

.pk-modal-header .pk-dialog-tool {
    margin-right: -0.2rem;
}

.pk-modal-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    cursor: nwse-resize;
    touch-action: none;
    border-bottom-right-radius: var(--op-radius-lg, 10px);
    background: linear-gradient(135deg, transparent 0 55%, var(--op-text-3, #8a93a3) 55% 62%, transparent 62% 72%, var(--op-text-3, #8a93a3) 72% 79%, transparent 79%);
    opacity: 0.7;
}

    .pk-modal-resize:hover,
    .pk-modal-resize:focus-visible,
    .pk-modal.resizing .pk-modal-resize {
        opacity: 1;
    }

    .pk-modal-resize:focus-visible {
        outline: 2px solid var(--op-focus, #4c8dff);
        outline-offset: -2px;
    }

/* a phone: always the sheet, never sized nor maximized (after the rules above, so it wins) */
@media (max-width: 575.98px) {
    .pk-modal[data-sized],
    .pk-modal.is-maximized {
        width: 100%;
        height: auto;
        max-height: 88vh;
        max-height: 88dvh;
    }

    .pk-modal.is-resizable {
        min-width: 0;
        min-height: 0;
    }

    .pk-modal-resize,
    .pk-modal-header .pk-modal-maximize {
        display: none;
    }
}

@keyframes pk-modal-fade {
    from {
        opacity: 0;
    }
}

@keyframes pk-modal-rise {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-modal-layer,
    .pk-modal {
        animation: none;
    }
}

/* the check box of a SavedItem, a colour swatch among its actions */
.pk-check {
    flex: none;
    margin: 0;
    cursor: pointer;
}

.pk-swatch {
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 1px solid var(--op-border-strong);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

    .pk-swatch::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .pk-swatch::-webkit-color-swatch {
        border: 0;
        border-radius: 3px;
    }

/* ───────────── a text with proposals (Ui/SuggestField) ───────────── */
.pk-suggest {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* the proposals float above everything, the window they are in included (placed by opera-plugins.js next to their
   field; hidden for the instant before) */
.pk-suggest-list {
    position: fixed;
    z-index: 1080; /* above the modals too (1075) */
    max-height: 18rem;
    overflow: auto;
    padding: 0.25rem;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface-2, #1c222d);
    box-shadow: var(--op-shadow-lg);
    overscroll-behavior: contain;
    visibility: hidden;
}

    .pk-suggest-list.is-placed {
        visibility: visible;
    }

.pk-suggest-title {
    padding: 0.3rem 0.4rem 0.15rem;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pk-suggest-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.2rem 0.45rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-xs);
    text-align: left;
    cursor: pointer;
}

    .pk-suggest-item:hover {
        background: var(--op-surface-3);
        color: var(--op-text-strong);
    }

.pk-suggest-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-suggest-note,
.pk-suggest-hint {
    flex: none;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
}

.pk-suggest-hint {
    color: var(--op-warning-fg);
}

.pk-suggest-value.is-abstract {
    font-style: italic;
    opacity: 0.8;
}

.pk-dialog-status {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--op-text-xs);
}

/* ───────────── groups of conditions (a builder of questions: rows combined with E / O, negable) ───────────── */
.pk-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .pk-group.is-nested {
        padding: 0.45rem 0.5rem;
        border: 1px dashed var(--op-border-strong);
        border-radius: var(--op-radius-md, 0.5rem);
        background: var(--op-zebra);
    }

.pk-group-bar,
.pk-cond-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.pk-group-text {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

.pk-group-bar .pk-cond-remove {
    margin-left: auto;
}

.pk-segmented {
    display: inline-flex;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    overflow: hidden;
}

    .pk-segmented button {
        padding: 0.15rem 0.55rem;
        border: 0;
        background: transparent;
        color: var(--op-text-2);
        font-size: var(--op-text-xs);
        cursor: pointer;
    }

        .pk-segmented button.is-active {
            background: var(--op-active-bg);
            color: var(--op-active-fg);
        }

.pk-not {
    flex: none;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    cursor: pointer;
}

    .pk-not.is-active {
        border-color: var(--op-danger-dot);
        background: var(--op-danger-bg);
        color: var(--op-danger-fg);
    }

.pk-connector {
    align-self: flex-start;
    margin-left: 0.6rem;
    padding: 0 0.4rem;
    border-radius: 4px;
    background: var(--op-surface-3);
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
}

.pk-cond {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md, 0.5rem);
}

    .pk-cond > .pk-not,
    .pk-cond > .pk-cond-remove {
        margin-top: 0.3rem;
    }

.pk-cond-kind {
    flex: 0 0 9.5rem;
}

.pk-cond-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

    /* in a row of the condition a field takes its share of the width; alone in the column, only its own height */
    .pk-cond-body .pk-suggest {
        flex: 1 1 12rem;
    }

    .pk-cond-body > .pk-suggest {
        flex: none;
    }

.pk-cond-op {
    flex: 0 0 auto;
    width: auto;
}

.pk-cond-value {
    flex: 1 1 10rem;
    width: auto;
}

.pk-cond-number {
    flex: 0 1 7rem;
    width: 7rem;
}

.pk-cond-unit {
    flex: 0 0 auto;
    width: auto;
}

.pk-cond-options .form-select {
    width: auto;
}

.pk-model-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.6rem;
    font-size: var(--op-text-xs);
    cursor: pointer;
}

.pk-model-swatch {
    display: inline-block;
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
}

.pk-legend {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--op-text-xs);
}

    .pk-legend li {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .pk-legend .pk-note {
        flex: none;
        padding: 0;
    }

    /* one line beside its colour, cut with … (the whole text in its title) */
    .pk-legend .pk-legend-text {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ───────────── rows of a side panel: a list or a tree, virtualised (fixed height) ───────────── */
/* in a panel body laid out as a column (the left side) the rows take the rest of the height and scroll by themselves,
   the bar above stays; elsewhere the panel body scrolls */
.pk-rows {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    font-size: var(--op-text-xs);
}

.pk-tree-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 28px;
    padding-right: 0.3rem;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

    .pk-tree-row:hover {
        background: var(--op-surface-3);
    }

    .pk-tree-row.is-selected {
        background: var(--op-tree-selected);
        color: var(--op-text-strong);
    }

    .pk-tree-row .pk-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pk-tree-row .pk-note {
        flex: 0 1 auto;
        overflow: hidden;
        padding: 0;
        text-overflow: ellipsis;
    }

    .pk-tree-row .pk-count {
        margin-left: auto;
    }

    .pk-tree-row.is-selected .pk-count {
        background: color-mix(in srgb, var(--op-tree-selected-bar, #4d90fe) 22%, transparent);
        color: var(--op-text);
    }

/* the actions of an open group of a list (a button, then a note wrapped under it): a block of its own, not a row of fixed height */
.pk-group-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding-top: 0.2rem;
    padding-right: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: var(--op-text-xs);
}

.pk-group-hint {
    flex: 1 1 100%;
    min-width: 0;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* the icon of an IFC class (the colours of its family come from the application) */
.pk-class-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* a count in its pill, as in the Struttura tree */
.pk-count {
    flex: 0 0 auto;
    min-width: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--op-count-bg);
    color: var(--op-count-fg);
    font-size: var(--op-text-2xs, 0.7rem);
    line-height: 1.1rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pk-caret {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--op-text-2);
    font-size: 0.7rem;
    cursor: pointer;
}

/* ───────────── the diagram of combined filters (regions ticked) ───────────── */
.pk-venn {
    display: block;
    width: min(100%, 22rem);
    margin: 0.3rem auto;
}

.pk-venn-letter-text {
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}

.pk-venn-region {
    cursor: pointer;
}

    .pk-venn-region circle {
        fill: var(--op-bg);
        stroke: var(--op-border-strong);
    }

    .pk-venn-region text {
        fill: var(--op-text-2);
        font-size: 10px;
        text-anchor: middle;
    }

    .pk-venn-region.is-chosen circle {
        fill: color-mix(in srgb, var(--op-accent) 85%, transparent);
        stroke: var(--op-text-strong);
    }

    .pk-venn-region.is-chosen text {
        fill: var(--op-on-accent);
        font-weight: 700;
    }

    .pk-venn-region:focus-visible circle {
        stroke: var(--op-focus, #5b97ff);
        stroke-width: 2;
    }

.pk-venn-letter {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    color: #fff;
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 700;
}

.pk-regions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.15rem 0.6rem;
}

.pk-region {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--op-text-xs);
    cursor: pointer;
}

    .pk-region .pk-note {
        flex: none;
        margin-left: auto;
        padding: 0;
    }

/* ───────────── severities and problems (the panel «Verifiche»: icon and text, never the colour alone) ───────────── */
.pk-severity {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
}

    .pk-severity .pk-icon {
        width: 0.95rem;
        height: 0.95rem;
    }

    .pk-severity.is-error {
        color: var(--op-danger-fg, #ff9a91);
    }

    /* a warning mark that is also the quick fix (the unit not declared: a click adds it) */
button.pk-severity.pk-unit-fix {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

    button.pk-severity.pk-unit-fix:hover:not(:disabled),
    button.pk-severity.pk-unit-fix:focus-visible {
        filter: brightness(1.2);
        outline: 1px solid currentColor;
        outline-offset: 1px;
    }

    button.pk-severity.pk-unit-fix:disabled {
        cursor: default;
        opacity: 0.7;
    }

.pk-severity.is-warning {
        color: var(--op-warning-fg, #f1c65a);
    }

    .pk-severity.is-info {
        color: var(--op-info-fg, #74d3ea);
    }

.pk-segmented button .pk-count {
    margin-left: 0.25rem;
}

/* a count in the colour of what it counts (CountBadge.Tone): filled pills with fixed colours, the text at least 4.5:1 on
   them in the light and in the dark theme */
.pk-count.is-error {
    background: #c62828;
    color: #fff;
}

.pk-count.is-warning {
    background: #f0b429;
    color: #1d1600;
}

.pk-count.is-info {
    background: #0e7490;
    color: #fff;
}

.pk-count.is-success {
    background: #1f7a45;
    color: #fff;
}

.pk-tree-row.is-selected .pk-count.is-error,
.pk-tree-row.is-selected .pk-count.is-warning,
.pk-tree-row.is-selected .pk-count.is-info,
.pk-tree-row.is-selected .pk-count.is-success {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* a row of the list on two lines: the element and its class, then what is wrong (fixed height, virtualised) */
.pk-tree-row.pk-issue-row {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0;
    width: 100%;
    height: 40px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

    .pk-issue-row .pk-issue-text {
        flex: 1 0 100%;
        overflow: hidden;
        padding-left: 1.3rem;
        color: var(--op-text-2);
        text-overflow: ellipsis;
    }

    .pk-issue-row.is-other {
        cursor: default;
    }

/* a row of a list with a box to choose it (the topics of BCF for the export): the box always shown at the left, in a target of 32 px,
   the row button beside it; a chosen row is tinted */
.pk-issue-pick {
    display: flex;
    align-items: center;
    min-width: 0;
    border-radius: var(--op-radius-sm, 4px);
}

    .pk-issue-pick > .pk-tree-row {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pk-issue-pick.is-chosen:not(.is-selected) {
        background: var(--op-accent-soft);
    }

.pk-issue-checkhit {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    margin: 0;
    cursor: pointer;
}

    .pk-issue-checkhit > .pk-issue-check {
        margin: 0;
        cursor: pointer;
    }

button.pk-tree-row {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

    button.pk-tree-row:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: -2px;
    }

.pk-tree-row.is-model {
    font-weight: 600;
    cursor: default;
}

/* ───────────── resizable standard windows (FloatingDialog Resizable: the handle in the bottom-right corner) ───────────── */
.pk-dialog.is-resizable .pk-dialog-body {
    flex: 1 1 auto;
    /* the room of the scrollbar always kept: when the body starts to scroll its width does not change, so a content laid
       out by its width (container queries) does not flip between two layouts while the window is resized */
    scrollbar-gutter: stable;
}

.pk-dialog.resizing {
    user-select: none;
}

.pk-dialog-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
    border-bottom-right-radius: var(--op-radius-lg, 10px);
    background: linear-gradient(135deg, transparent 0 55%, var(--op-text-3, #8a93a3) 55% 62%, transparent 62% 72%, var(--op-text-3, #8a93a3) 72% 79%, transparent 79%);
    opacity: 0.7;
}

    .pk-dialog-resize:hover,
    .pk-dialog.resizing .pk-dialog-resize {
        opacity: 1;
    }

/* ───────────── windows that cover the page (FloatingDialog Maximizable / FullScreen, SDK 0.18) ─────────────
   The subtitle after the title, the buttons of the header («Schermo intero», «Ingrandisci» / «Riduci»); maximized (or full
   screen) the window covers the whole page of the viewer above the scene, without rounded corners: the size and position the
   script sets stay underneath for when it comes back. On a narrow screen a maximizable window is always as large as the page. */
.pk-dialog-subtitle {
    color: var(--op-text-2, #a4adbb);
    font-weight: 400;
}

.pk-dialog-tool {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: var(--op-radius-sm, 0.35rem);
    background: transparent;
    color: var(--op-text-2, #a4adbb);
    cursor: pointer;
}

    .pk-dialog-tool:hover {
        background: var(--op-surface-3, #2a313c);
        color: var(--op-text, #e6e9ef);
    }

    .pk-dialog-tool:focus-visible {
        outline: 2px solid var(--op-focus, #4c8dff);
        outline-offset: 1px;
    }

    .pk-dialog-tool[aria-pressed="true"] {
        color: var(--op-accent, #5b97ff);
    }

    .pk-dialog-tool[hidden] {
        display: none;
    }

    .pk-dialog-tool .pk-icon {
        width: 1rem;
        height: 1rem;
    }

.pk-dialog.is-maximizable .pk-dialog-header {
    cursor: default;
}

.pk-dialog.is-maximizable:not(.is-maximized) .pk-dialog-header {
    cursor: grab;
}

.pk-dialog.is-maximized {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

    .pk-dialog.is-maximized .pk-dialog-header {
        border-radius: 0;
    }

    .pk-dialog.is-maximized .pk-dialog-resize {
        display: none;
    }

    .pk-dialog.is-maximized.is-resizable .pk-dialog-body {
        flex: 1 1 auto;
    }

/* the page is full screen: the window over it reaches the edges of the screen (the safe areas of a notch kept inside) */
.pk-dialog.is-fullscreen {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

@media (max-width: 759.98px) {
    .pk-dialog.is-maximizable {
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    }

        .pk-dialog.is-maximizable .pk-dialog-maximize,
        .pk-dialog.is-maximizable .pk-dialog-resize,
        .pk-dialog.is-maximizable .pk-dialog-grip {
            display: none;
        }

        .pk-dialog.is-maximizable .pk-dialog-header {
            cursor: default;
            min-height: 2.75rem;
        }

        .pk-dialog.is-maximizable .pk-dialog-tool,
        .pk-dialog.is-maximizable .pk-dialog-close {
            min-width: 2.5rem;
            min-height: 2.5rem;
        }

        .pk-dialog.is-maximizable .pk-dialog-body {
            flex: 1 1 auto;
        }
}

/* ───────────── tabs of a window (role tablist) ───────────── */
.pk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--op-border);
}

    .pk-tabs button {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.6rem;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: var(--op-text-2);
        font-size: var(--op-text-xs);
        cursor: pointer;
    }

        .pk-tabs button:hover {
            color: var(--op-text);
        }

        .pk-tabs button[aria-selected="true"] {
            border-bottom-color: var(--op-accent, #5b97ff);
            color: var(--op-text);
            font-weight: 600;
        }

        .pk-tabs button:focus-visible {
            outline: 2px solid var(--op-focus, #5b97ff);
            outline-offset: -2px;
        }

/* ───────────── a window in sections (pk-split): their list on the left (pk-vtabs, role tablist vertical), the content
   on the right; when the window is narrow the list goes above, its sections on one or more lines ───────────── */
.pk-split {
    container-type: inline-size;
    min-height: 0;
}

.pk-split-grid {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.pk-split-main {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.pk-vtabs {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    position: sticky;
    top: 0;
    padding-right: 0.5rem;
    border-right: 1px solid var(--op-border);
}

    .pk-vtabs button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
        padding: 0.35rem 0.5rem;
        border: 0;
        border-left: 2px solid transparent;
        border-radius: 0 var(--op-radius-sm, 4px) var(--op-radius-sm, 4px) 0;
        background: transparent;
        color: var(--op-text-2);
        font-size: var(--op-text-xs);
        text-align: left;
        cursor: pointer;
    }

        .pk-vtabs button:hover {
            background: var(--op-hover, rgba(255, 255, 255, 0.05));
            color: var(--op-text);
        }

        .pk-vtabs button[aria-selected="true"] {
            border-left-color: var(--pk-hue, var(--op-accent, #5b97ff));
            background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 12%, transparent);
            color: var(--op-text);
            font-weight: 600;
        }

        .pk-vtabs button > .pk-vtab-label {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            min-width: 0;
        }

        .pk-vtabs button:focus-visible {
            outline: 2px solid var(--op-focus, #5b97ff);
            outline-offset: -2px;
        }

        .pk-vtabs button:disabled {
            opacity: 0.55;
            cursor: default;
        }

.pk-vtabs-separator {
    height: 1px;
    margin: 0.3rem 0;
    background: var(--op-border);
}

/* the title of the content of a section, with its commands on the right (a form: «Elenco» to go back) */
.pk-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.6rem;
    /* room from the line above (e.g. «Modifichi come…») and from the first card below */
    margin: 0.45rem 0 0.4rem;
}

    .pk-section-head:first-child {
        margin-top: 0;
    }

    /* the buttons of a head (of a group, of a card: «Aggiungi insieme», «Espandi tutto», ⋯): lower and lighter than the
       buttons of a form, so the heads stay slim */
    .pk-section-head .pk-btn,
    .pk-fcard-tools .pk-btn {
        height: 1.5rem;
        min-width: 1.5rem;
        padding: 0 0.4rem;
        gap: 0.3rem;
        font-size: var(--op-text-2xs, 0.72rem);
    }

        .pk-section-head .pk-btn .pk-icon,
        .pk-fcard-tools .pk-btn .pk-icon {
            width: 0.9rem;
            height: 0.9rem;
        }

        .pk-section-head .pk-btn.is-accent {
            box-shadow: none;
        }

/* tags with a meaning, the same in every window (as the viewer and the D1 prototype): ufficiale green, personale and the
   counts («condiviso da N», «in N di M») grey, non conforme red, dal tipo cyan */
.pk-tag.is-official,
.pk-tag.is-success,
.pk-tag.is-personal,
.pk-tag.is-neutral,
.pk-tag.is-bad,
.pk-tag.is-warning,
.pk-tag.is-type,
.pk-tag.is-info {
    box-shadow: none;
    font-weight: 600;
}

.pk-tag.is-official,
.pk-tag.is-success {
    background: var(--op-success-bg, rgba(62, 207, 130, 0.13));
    color: var(--op-success-fg, #74d9a0);
}

.pk-tag.is-personal,
.pk-tag.is-neutral {
    background: var(--op-surface-3, #2a313c);
    color: var(--op-text-2, #a4adbb);
}

.pk-tag.is-bad {
    background: var(--op-danger-bg, rgba(255, 107, 94, 0.14));
    color: var(--op-danger-fg, #ff9a91);
    box-shadow: inset 0 0 0 1px var(--op-danger-border, rgba(255, 107, 94, 0.32));
}

.pk-tag.is-warning {
    background: var(--op-warning-bg, rgba(240, 180, 41, 0.13));
    color: var(--op-warning-fg, #f1c65a);
}

.pk-tag.is-type,
.pk-tag.is-info {
    background: var(--op-info-bg, rgba(76, 195, 224, 0.13));
    color: var(--op-info-fg, #74d3ea);
}

/* the origin of a check (ValidationOrigins in Opera.Contracts): schema IFC, Pset/Qto, bSI, IDS, plugin; hues apart from the severities */
.pk-tag.is-origin {
    box-shadow: none;
    font-weight: 600;
    border-radius: 999px;
}

.pk-tag.is-origin.is-schema {
    background: var(--op-surface-3, #2a313c);
    color: var(--op-text-2, #a4adbb);
}

.pk-tag.is-origin.is-data {
    background: var(--op-accent-bg, rgba(91, 151, 255, 0.15));
    color: var(--op-accent-fg, #a3c6ff);
}

.pk-tag.is-origin.is-bsi {
    background: var(--op-violet-bg, rgba(160, 120, 255, 0.16));
    color: var(--op-violet-fg, #cdb4ff);
}

.pk-tag.is-origin.is-ids {
    background: var(--op-teal-bg, rgba(60, 200, 180, 0.14));
    color: var(--op-teal-fg, #7fdccf);
}

.pk-tag.is-origin.is-plugin {
    background: transparent;
    color: var(--op-text-2, #a4adbb);
    box-shadow: inset 0 0 0 1px var(--op-border-strong, rgba(255, 255, 255, 0.22));
}

/* a small spinner before a text of a work in progress («Modifica in corso…») */
.pk-busy {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pk-busy-turn 0.7s linear infinite;
}

@keyframes pk-busy-turn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pk-busy { animation: none; }
}

/* the unit of a value, after it on the same line («0,25 W/(m²·K)») */
.pk-unit {
    margin-left: 0.3em;
    color: var(--op-text-2);
    font-size: 0.92em;
}

    .pk-section-head > h3 {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0;
        font-size: var(--op-text-sm, 0.8125rem);
        font-weight: 600;
    }

    .pk-section-head > .pk-row {
        margin-left: auto;
    }

@container (max-width: 34rem) {
    .pk-split-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pk-vtabs {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 0 0.35rem;
        border-right: 0;
        border-bottom: 1px solid var(--op-border);
    }

        .pk-vtabs button {
            border-left: 0;
            border-bottom: 2px solid transparent;
            border-radius: 0;
        }

            .pk-vtabs button[aria-selected="true"] {
                border-bottom-color: var(--pk-hue, var(--op-accent, #5b97ff));
            }

    .pk-vtabs-separator {
        display: none;
    }
}

/* ───────────── hues of the windows: one per section or kind of data (pk-hue-1 … pk-hue-7), for icons, counts, labels.
   --pk-hue draws strokes and texts (3:1 at least on the surfaces of its theme), --pk-hue-fill fills a pill with white text
   (4.5:1 at least) in both themes. Identity only: the states keep is-error / is-warning / is-info / is-success. ───────────── */
.pk-hue-1 { --pk-hue: var(--op-accent, #1f63d6); --pk-hue-fill: var(--op-accent-fill, #1f63d6); } /* the light blue of Opera (its accent, both themes) */
.pk-hue-2 { --pk-hue: #7c3aed; --pk-hue-fill: #7c3aed; } /* violet */
.pk-hue-3 { --pk-hue: #0f766e; --pk-hue-fill: #0f766e; } /* teal */
.pk-hue-4 { --pk-hue: #b45309; --pk-hue-fill: #b45309; } /* amber */
.pk-hue-5 { --pk-hue: #be185d; --pk-hue-fill: #be185d; } /* pink */
.pk-hue-6 { --pk-hue: #15803d; --pk-hue-fill: #15803d; } /* green */
.pk-hue-7 { --pk-hue: #475569; --pk-hue-fill: #475569; } /* slate */

[data-bs-theme=dark] .pk-hue-2 { --pk-hue: #b197fc; }
[data-bs-theme=dark] .pk-hue-3 { --pk-hue: #2dd4bf; }
[data-bs-theme=dark] .pk-hue-4 { --pk-hue: #fbbf24; }
[data-bs-theme=dark] .pk-hue-5 { --pk-hue: #f472b6; }
[data-bs-theme=dark] .pk-hue-6 { --pk-hue: #4ade80; }
[data-bs-theme=dark] .pk-hue-7 { --pk-hue: #a3b1c4; }

/* a count that is not a state: the fill of its hue, else the accent of Opera */
.pk-count.is-accent {
    background: var(--pk-hue-fill, var(--op-accent-fill, #2d6ce0));
    color: #fff;
}

/* an icon on a soft tile of its hue (a section, a kind of data) */
.pk-icon-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 16%, transparent);
    color: var(--pk-hue, var(--op-accent, #5b97ff));
}

    .pk-icon-tile .pk-icon {
        width: 0.95rem;
        height: 0.95rem;
    }

    .pk-icon-tile.is-small {
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 0.35rem;
    }

/* the initials of a person in a filled circle of its hue */
.pk-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--pk-hue-fill, var(--op-accent-fill, #2d6ce0));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* a name with its avatar or tile in a cell of a table */
.pk-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

    .pk-name-cell > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

/* short labels (roles, kinds) on a soft background of their hue */
/* the pills keep their own height and stay in the middle of the row (a taller button next to them stretched them, the
   text then sat at the top of the pill) */
.pk-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    gap: 0.25rem;
}

.pk-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    line-height: 1.3;
    vertical-align: middle;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 15%, transparent);
    color: var(--op-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 40%, transparent);
    font-size: var(--op-text-2xs, 0.7rem);
    white-space: nowrap;
}

/* a block of a form in the hue of what it holds: a coloured edge, its title in the hue */
.pk-card.is-tinted {
    border-left: 3px solid var(--pk-hue, var(--op-accent, #5b97ff));
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 5%, transparent);
}

    .pk-card.is-tinted > .pk-card-title {
        color: var(--op-text);
    }

/* ───────────── cards that fold (Ui/Card, Ui/CardGroup): a head in the hue of what they hold, the body under it ───────────── */
.pk-fcard {
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg, 10px);
    background: var(--op-surface-2, rgba(255, 255, 255, 0.03));
    box-shadow: var(--op-shadow-sm);
    overflow: hidden;
}

    .pk-fcard + .pk-fcard {
        margin-top: 0.6rem;
    }

.pk-fcard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.3rem;
    border-left: 3px solid var(--pk-hue, var(--op-accent, #5b97ff));
    background: linear-gradient(90deg, color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 16%, transparent), transparent 80%);
}

.pk-fcard.is-open > .pk-fcard-head {
    border-bottom: 1px solid var(--op-border);
}

.pk-fcard-toggle {
    display: flex;
    flex: 1 1 12rem;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.15rem 0.25rem;
    border: 0;
    border-radius: var(--op-radius-sm, 4px);
    background: transparent;
    color: var(--op-text);
    font-size: var(--op-text-xs);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .pk-fcard-toggle:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

.pk-fcard-chevron {
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: var(--op-text-2);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 150ms ease;
}

.pk-fcard.is-open > .pk-fcard-head .pk-fcard-chevron {
    transform: rotate(90deg);
}

.pk-fcard-title {
    flex: none;
}

.pk-fcard-summary {
    min-width: 0;
    overflow: hidden;
    color: var(--op-text-2);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-fcard-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

.pk-fcard-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem 0.75rem;
    animation: pk-fcard-in 150ms ease-out;
}

/* a card in a card: flat, its head lighter */
.pk-fcard.is-nested {
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 4%, var(--op-surface, #161b24));
    box-shadow: none;
}

    .pk-fcard.is-nested > .pk-fcard-head {
        background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 8%, transparent);
    }

.pk-fcard-body > .pk-fcard + .pk-fcard {
    margin-top: 0;
}

@keyframes pk-fcard-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

/* a compact card (Card Compact: the sets of «Proprietà» / «Quantità»): a slim head on one line — title, marks, count, tools —,
   a tight body holding a list of names and values (pk-props), the cards close together */
.pk-fcard.is-compact {
    border-radius: var(--op-radius-md, 0.5rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

    .pk-fcard.is-compact + .pk-fcard.is-compact {
        margin-top: 0.35rem;
    }

    .pk-fcard.is-compact > .pk-fcard-head {
        flex-wrap: nowrap;
        gap: 0.3rem;
        min-height: 1.85rem;
        padding: 0.1rem 0.35rem 0.1rem 0.15rem;
        background: linear-gradient(90deg, color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 11%, transparent), transparent 70%);
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-fcard-toggle {
        flex: 1 1 auto;
        gap: 0.35rem;
        padding: 0.1rem 0.2rem;
        font-size: var(--op-text-sm, 0.8125rem);
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-fcard-title {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-icon-tile.is-small {
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 0.3rem;
    }

        .pk-fcard.is-compact > .pk-fcard-head .pk-icon-tile.is-small .pk-icon {
            width: 0.8rem;
            height: 0.8rem;
        }

    /* the marks and ⋯ keep their room: the title gives way (ellipsis, the whole name in the tooltip of the head) */
    .pk-fcard.is-compact > .pk-fcard-head .pk-fcard-tools {
        flex: none;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-tags {
        flex-wrap: nowrap;
        gap: 0.2rem;
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-fcard-summary {
        font-size: var(--op-text-xs, 0.75rem);
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-tag {
        padding: 0 0.4rem;
        font-size: 0.66rem;
        line-height: 1.35;
    }

    .pk-fcard.is-compact > .pk-fcard-body {
        gap: 0.35rem;
        padding: 0.15rem 0.6rem 0.25rem 0.75rem;
    }

/* a list of compact cards: measured by its width (a narrow window, a phone) */
.pk-cards {
    container-type: inline-size;
    min-width: 0;
    /* the room of its head (pk-section-head) from the line above, «Modifichi come…» */
    margin-top: 0.45rem;
}

    .pk-cards:first-child {
        margin-top: 0;
    }

/* a narrow window (a phone): the marks of a compact head go under the title rather than out of sight */
@container (max-width: 30rem) {
    .pk-fcard.is-compact > .pk-fcard-head,
    .pk-fcard.is-compact > .pk-fcard-head .pk-fcard-tools,
    .pk-fcard.is-compact > .pk-fcard-head .pk-tags {
        flex-wrap: wrap;
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-fcard-toggle {
        flex-basis: 10rem;
    }

    .pk-fcard.is-compact > .pk-fcard-head .pk-fcard-tools {
        flex: 0 1 auto;
        min-width: 0;
        padding-bottom: 0.15rem;
    }
}

/* a row of fields of a list in a card (a role): the fields, then its command at the end */
.pk-subrow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md, 0.5rem);
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 5%, transparent);
}

    .pk-subrow > .pk-form {
        flex: 1 1 20rem;
    }

    .pk-subrow > .pk-form-field {
        flex: 1 1 14rem;
    }

/* «Valori presenti»: the values the elements have, next to the field of a value edited in place */
.pk-present.form-select {
    flex: 0 1 11rem;
    width: auto;
    min-width: 7rem;
    max-width: 14rem;
    color: var(--op-text-2);
}

/* the editor of a value made of parts (a duration: giorni · ore · minuti · secondi; a compound angle): small fields that wrap on a phone */
.pk-value-parts {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

    .pk-value-part {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        margin: 0;
    }

        .pk-value-part .form-control {
            width: 4.2rem;
        }

/* a text of more lines (IfcText) edited in place, and the fields of a value at phone width */
.pk-value-field textarea.form-control {
    flex: 1 1 14rem;
    min-width: 10rem;
}

.pk-value-field > .form-control,
.pk-value-field > .pk-keys > .form-control {
    flex: 1 1 9rem;
    min-width: 0;
}

/* a sub-row under a value edited in a table (USERDEFINED and what the element is) */
.pk-table .pk-subrow,
.pk-props .pk-subrow {
    margin-top: 0.4rem;
    align-items: center;
}

.pk-prop-value > .pk-subrow {
    flex: 1 1 100%;
    margin-top: 0.2rem;
}

/* ───────────── a gallery of cards (people, organizations): a grid that fills the width ───────────── */
/* a clickable picture (the snapshot of a viewpoint…): a frame of fixed height, the image whole inside it whatever its shape
   (a tall snapshot of a narrow view, a wide one), never overflowing; the icon and a word when there is no image */
.pk-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 8.5rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-sm, 6px);
    background: color-mix(in srgb, var(--op-text, #e6e9ef) 4%, var(--op-surface-2, #1b2029));
    color: var(--op-text-2);
    font: inherit;
    font-size: var(--op-text-xs);
    cursor: pointer;
}

    .pk-thumb.is-small {
        width: 7rem;
        height: 4.5rem;
        align-self: flex-start;
    }

    /* the image fills the whole frame, zoomed as needed and centred: a narrow or wide view leaves no empty bands */
    .pk-thumb > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .pk-thumb:hover {
        border-color: color-mix(in srgb, var(--op-accent, #5b97ff) 60%, var(--op-border));
    }

    .pk-thumb:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

.pk-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.7rem;
}

.pk-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.8rem 0.85rem 0.7rem;
    border: 1px solid var(--op-border);
    border-radius: 12px;
    background:
        radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 20%, transparent), transparent 60%),
        var(--op-surface-2, rgba(255, 255, 255, 0.03));
    box-shadow: var(--op-shadow-sm);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

    .pk-tile::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        border-radius: 12px 12px 0 0;
        background: linear-gradient(90deg, var(--pk-hue, var(--op-accent, #5b97ff)), color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 20%, transparent));
    }

    .pk-tile:hover {
        border-color: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 55%, var(--op-border));
        box-shadow: var(--op-shadow-float);
        transform: translateY(-1px);
    }

    .pk-tile.is-current {
        border-color: var(--pk-hue, var(--op-accent, #5b97ff));
        box-shadow: 0 0 0 1px var(--pk-hue, var(--op-accent, #5b97ff)), var(--op-shadow-float);
    }

.pk-tile-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.pk-tile-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

    .pk-tile-title > strong {
        overflow: hidden;
        color: var(--op-text);
        font-size: var(--op-text-sm, 0.8125rem);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* the head of a group of items inside a section (the federation of the views «Dalle federazioni»): a name, never shrunk */
.pk-group-head {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0.25rem;
    color: var(--op-text);
    font-size: var(--op-text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.35;
}

    .pk-group-head .pk-group-note {
        color: var(--op-text-2, #a4adbb);
        font-weight: 400;
    }

.pk-tile-sub {
    overflow: hidden;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-tile-actions {
    display: flex;
    flex: none;
    gap: 0.25rem;
    opacity: 0.55;
    transition: opacity 120ms ease;
}

    .pk-tile:hover .pk-tile-actions,
    .pk-tile:focus-within .pk-tile-actions {
        opacity: 1;
    }

    .pk-tile-actions .pk-btn {
        min-width: 1.75rem;
        height: 1.5rem;
        padding: 0 0.3rem;
    }

.pk-tile-facts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

    .pk-tile-facts li {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
    }

        .pk-tile-facts li > span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pk-tile-facts li .pk-icon {
            flex: none;
            width: 0.85rem;
            height: 0.85rem;
            color: var(--pk-hue, var(--op-accent, #5b97ff));
        }

.pk-tile-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--op-border);
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
}

.pk-tile-badge {
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--pk-hue-fill, var(--op-accent-fill, #2d6ce0));
    color: #fff;
    font-weight: 600;
}

/* «Sono io» of a person (IFC Editor, docs/19 §6.4): a small check at the end of the foot of its tile (or among the commands of
   its row), in the hue of the tile when ticked; the line asking the organization, inside the tile or above the table */
.pk-me {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0 auto;
    padding: 0.05rem 0.45rem 0.05rem 0.3rem;
    border: 1px solid var(--op-border);
    border-radius: 999px;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

    .pk-me .form-check-input {
        width: 0.85rem;
        height: 0.85rem;
        margin: 0;
    }

    .pk-me:hover {
        border-color: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 55%, var(--op-border));
        color: var(--op-text);
    }

    .pk-me.is-on {
        border-color: var(--pk-hue, var(--op-accent, #5b97ff));
        color: var(--op-text);
    }

    .pk-me:has(input:disabled) {
        cursor: default;
        opacity: 0.6;
    }

.pk-tile-badge + .pk-me {
    margin-left: 0;
}

.pk-row-actions .pk-me {
    margin: 0 0.25rem 0 0;
    vertical-align: middle;
}

.pk-me-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.4rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 55%, var(--op-border));
    border-radius: var(--op-radius-md, 0.5rem);
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 10%, transparent);
    font-size: var(--op-text-xs);
}

    .pk-me-choice > .pk-me-choice-label {
        flex: 1 1 100%;
        color: var(--op-text-2);
    }

    .pk-me-choice > .form-select,
    .pk-me-choice > .form-control {
        flex: 1 1 9rem;
        width: auto;
        min-width: 0;
    }

/* a large avatar (the head of a tile), and a stack of small ones (the members of an organization) */
.pk-avatar.is-large {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.95rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-hue-fill, var(--op-accent-fill, #2d6ce0)) 30%, transparent);
}

.pk-icon-tile.is-large {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
}

    .pk-icon-tile.is-large .pk-icon {
        width: 1.35rem;
        height: 1.35rem;
    }

/* a short text instead of the icon (the symbol of a unit: «mm», «W/(m²·K)»): as wide as it needs, never wrapped */
.pk-icon-tile.is-symbol {
    width: auto;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.55rem;
    border-radius: 0.7rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

    .pk-icon-tile.is-symbol.is-muted {
        background: transparent;
        border: 1px dashed color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 45%, transparent);
        opacity: 0.8;
    }

.pk-avatar-stack {
    display: inline-flex;
    align-items: center;
}

    .pk-avatar-stack .pk-avatar {
        width: 1.45rem;
        height: 1.45rem;
        margin-left: -0.35rem;
        box-shadow: 0 0 0 2px var(--op-surface-2, #1e242d);
        font-size: 0.55rem;
    }

        .pk-avatar-stack .pk-avatar:first-child {
            margin-left: 0;
        }

/* the view of a list: by cards or by table */
.pk-view-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
}

    .pk-view-switch button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.8rem;
        height: 1.6rem;
        border: 0;
        border-radius: calc(var(--op-radius-md, 0.5rem) - 2px);
        background: transparent;
        color: var(--op-text-2);
        cursor: pointer;
    }

        .pk-view-switch button[aria-pressed="true"] {
            background: var(--op-accent-fill, #2d6ce0);
            color: #fff;
        }

        .pk-view-switch button:focus-visible {
            outline: 2px solid var(--op-focus, #5b97ff);
            outline-offset: 1px;
        }

/* the format of a report (ReportFormatChoice, SDK 0.22, docs/31): native radios in a fieldset drawn as a segmented group, each format with
   its label and a short hint under it; light and dark through the tokens */
.pk-report-formats {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

    .pk-report-formats-legend {
        float: none;
        width: auto;
        margin: 0 0 0.3rem;
        padding: 0;
        color: var(--op-text-2);
        font-size: var(--op-text-xs);
        line-height: 1.3;
    }

    .pk-report-formats-options {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: 2px;
        padding: 2px;
        border: 1px solid var(--op-border-strong);
        border-radius: var(--op-radius-md, 0.5rem);
        background: var(--op-surface-2);
    }

    .pk-report-format {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
        padding: 0.4rem 0.6rem;
        border-radius: calc(var(--op-radius-md, 0.5rem) - 2px);
        color: var(--op-text-2);
        cursor: pointer;
        transition: background-color 0.12s ease, box-shadow 0.12s ease;
    }

        .pk-report-format:hover {
            background: var(--op-hover);
        }

        .pk-report-format.is-active {
            background: var(--op-accent-soft);
            box-shadow: inset 0 0 0 1px var(--op-accent);
        }

        .pk-report-format:has(.pk-report-format-input:focus-visible) {
            outline: 2px solid var(--op-focus, #5b97ff);
            outline-offset: 1px;
        }

    /* the radio itself: out of sight, still focused and moved by the keyboard */
    .pk-report-format-input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .pk-report-format-label {
        color: var(--op-text);
        font-size: var(--op-text-sm);
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .pk-report-format.is-active .pk-report-format-label {
        color: var(--op-accent);
    }

    .pk-report-format-hint {
        color: var(--op-text-3);
        font-size: var(--op-text-2xs, 0.7rem);
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .pk-report-formats:disabled .pk-report-format {
        cursor: not-allowed;
        opacity: 0.6;
    }

        .pk-report-formats:disabled .pk-report-format:hover {
            background: transparent;
        }

        .pk-report-formats:disabled .pk-report-format.is-active:hover {
            background: var(--op-accent-soft);
        }

@media (prefers-reduced-motion: reduce) {
    .pk-report-format {
        transition: none;
    }
}

@media (forced-colors: active) {
    .pk-report-format.is-active {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-fcard-body,
    .pk-tile {
        animation: none;
        transition: none;
    }

    .pk-fcard-chevron {
        transition: none;
    }

    .pk-tile:hover {
        transform: none;
    }
}

/* ───────────── tables of the windows: sortable headers, a filter, stacked rows when the window is narrow ───────────── */
.pk-table-wrap {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.pk-table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

    .pk-table-tools input[type="search"],
    .pk-table-tools .pk-search {
        flex: 1 1 12rem;
        min-width: 8rem;
    }

    .pk-table-tools .pk-table-count {
        color: var(--op-text-2);
        font-size: var(--op-text-2xs, 0.7rem);
    }

/* the choice of the sorting when the headers are hidden (narrow window) */
.pk-table-sortpick {
    display: none;
    align-items: center;
    gap: 0.3rem;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

    .pk-table-sortpick .form-select {
        width: auto;
    }

.pk-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--op-text);
    font-size: var(--op-text-xs);
}

    .pk-table th,
    .pk-table td {
        padding: 0.3rem 0.45rem;
        border-bottom: 1px solid var(--op-border);
        text-align: left;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .pk-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--op-surface, #161b24);
        color: var(--op-text-2);
        font-weight: 600;
        white-space: nowrap;
    }

    .pk-table .is-number {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .pk-table tbody tr:hover {
        background: var(--op-surface-3);
    }

    .pk-table tbody tr.is-current {
        background: var(--op-accent-soft);
    }

    .pk-table .pk-row-actions {
        width: 1%;
        text-align: right;
        white-space: nowrap;
    }

        .pk-table .pk-row-actions .pk-btn {
            margin-left: 0.2rem;
        }

    .pk-table .pk-sub {
        display: block;
        color: var(--op-text-2);
        font-size: var(--op-text-2xs, 0.7rem);
    }

.pk-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .pk-sort:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 2px;
    }

    .pk-sort .pk-sort-mark {
        color: var(--op-text-3, #8a93a3);
        font-size: 0.65rem;
    }

    .pk-sort.is-sorted .pk-sort-mark {
        color: var(--op-accent, #5b97ff);
    }

@container (max-width: 36rem) {
    .pk-table-sortpick {
        display: inline-flex;
    }

    .pk-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pk-table,
    .pk-table tbody,
    .pk-table tr,
    .pk-table td {
        display: block;
        width: 100%;
    }

        .pk-table tbody tr {
            padding: 0.3rem 0;
            border-bottom: 1px solid var(--op-border);
        }

        .pk-table td {
            display: flex;
            gap: 0.5rem;
            padding: 0.1rem 0.3rem;
            border: 0;
        }

            .pk-table td::before {
                content: attr(data-label);
                flex: 0 0 8.5rem;
                color: var(--op-text-2);
            }

            .pk-table td.is-number {
                text-align: left;
            }

        .pk-table .pk-row-actions {
            width: 100%;
            justify-content: flex-end;
        }

            .pk-table .pk-row-actions::before {
                content: none;
            }
}

/* ───────────── values read only: names and values on two columns (one when narrow) ───────────── */
.pk-kv-wrap {
    container-type: inline-size;
}

.pk-kv {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.2rem 0.9rem;
    margin: 0;
    font-size: var(--op-text-xs);
}

    .pk-kv dt {
        color: var(--op-text-2);
        font-weight: 400;
    }

    .pk-kv dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

@container (max-width: 26rem) {
    .pk-kv {
        grid-template-columns: 1fr;
    }

        .pk-kv dd {
            margin-bottom: 0.25rem;
        }
}

/* ───────────── names and values that can be edited (the windows «Proprietà», «Quantità», «Attributi»), in the look of the
   properties panel of the viewer: one hairline row per name — the name on the left in grey with its small marks, the value
   on the right with its unit on the same line, a click on it edits it in place —, the commands of a row (⋯) discreet until
   the row is pointed or focused (always on touch screens). Each row is a grid of the same columns, so a row being edited can
   give the whole width to its editor in a narrow window. The roles of the table are written in the markup: the grid
   display would hide them from some screen readers. ───────────── */
.pk-props-wrap {
    container-type: inline-size;
    min-width: 0;
}

.pk-props {
    display: block;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--op-text);
    font-size: var(--op-text-sm, 0.8125rem);
    line-height: 1.4;
}

    .pk-props > tbody {
        display: block;
    }

    .pk-props tr {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
        column-gap: 0.65rem;
        align-items: baseline;
        padding: 0.2rem 0.2rem;
        border-bottom: 1px solid var(--op-border);
    }

    .pk-props > tbody > tr:last-child {
        border-bottom-width: 0;
    }

    .pk-props th,
    .pk-props td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-weight: 400;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .pk-props tr.is-current {
        border-radius: var(--op-radius-sm, 4px);
        background: color-mix(in srgb, var(--op-accent, #5b97ff) 11%, transparent);
    }

    .pk-props tr.is-editing {
        align-items: start;
    }

    /* the ⋯ of a row open: its commands on the line under it, the two lines one block */
    .pk-props tr.is-open {
        border-bottom-width: 0;
    }

    .pk-props tr.pk-prop-more {
        display: block;
        padding: 0.1rem 0.2rem 0.35rem;
    }

        .pk-props tr.pk-prop-more > td {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.3rem 0.6rem;
        }

/* the name: grey, its marks small after it («dal tipo», «in 2 di 3»); its definition and type in its tooltip */
.pk-prop-name {
    color: var(--op-text-2);
}

    .pk-prop-name .pk-tag {
        margin-left: 0.3rem;
        padding: 0 0.35rem;
        font-size: 0.64rem;
        line-height: 1.35;
    }

.pk-prop-mark {
    margin-left: 0.3rem;
    color: var(--op-text-3, #8a93a3);
    font-size: var(--op-text-2xs, 0.6875rem);
    white-space: nowrap;
}

/* the IFC type (or the attribute), shown while the row is edited or its commands are open: the rest of the time in the tooltip */
.pk-prop-type {
    display: block;
    margin-top: 0.1rem;
    color: var(--op-text-3, #8a93a3);
    font-family: var(--op-font-mono, monospace);
    font-size: var(--op-text-2xs, 0.6875rem);
}

/* the fields of a new row (name and type of a personal property) */
.pk-prop-name > .pk-row {
    flex-wrap: wrap;
}

    .pk-prop-name > .pk-row > .form-control,
    .pk-prop-name > .pk-row > .form-select {
        flex: 1 1 8rem;
        min-width: 0;
        width: auto;
    }

.pk-prop-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.35rem;
    font-variant-numeric: tabular-nums;
}

    .pk-prop-value > .pk-value-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pk-prop-value > em,
    .pk-prop-edit em {
        color: var(--op-text-3, #8a93a3);
    }

    .pk-prop-value > .pk-severity {
        align-self: center;
    }

/* the value as a button: plain text, a soft frame when pointed — the whole cell is the target */
.pk-prop-edit {
    flex: 1 1 auto;
    min-width: 0;
    margin: -0.1rem 0 -0.1rem -0.3rem;
    padding: 0.1rem 0.3rem;
    border: 0;
    border-radius: var(--op-radius-sm, 4px);
    background: transparent;
    color: var(--op-text);
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: text;
}

    .pk-prop-edit:hover:not(:disabled) {
        background: var(--op-hover, rgba(255, 255, 255, 0.06));
        box-shadow: inset 0 0 0 1px var(--op-border-strong);
    }

    .pk-prop-edit:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 0;
    }

    /* read only (no edits here, or a change in progress): still readable */
    .pk-prop-edit:disabled {
        color: var(--op-text);
        opacity: 1;
        cursor: default;
    }

/* «valori diversi»: in the accent, as the «…» of the properties panel */
.pk-prop-edit em.pk-prop-varies {
    padding: 0 0.3rem;
    border-radius: var(--op-radius-sm, 4px);
    background: color-mix(in srgb, var(--op-accent, #5b97ff) 15%, transparent);
    color: var(--op-accent, #5b97ff);
    font-style: normal;
}

.pk-prop-actions {
    display: flex;
    align-self: center;
    gap: 0.1rem;
    opacity: 0;
    transition: opacity 120ms ease;
}

    .pk-props tr:hover > .pk-prop-actions,
    .pk-props tr:focus-within > .pk-prop-actions,
    .pk-props tr.is-open > .pk-prop-actions,
    .pk-props tr.is-current > .pk-prop-actions {
        opacity: 1;
    }

    .pk-prop-actions .pk-btn {
        height: 1.5rem;
        min-width: 1.5rem;
        padding: 0 0.3rem;
        border-color: transparent;
        font-size: var(--op-text-2xs, 0.72rem);
    }

        .pk-prop-actions .pk-btn[aria-pressed="true"] {
            border-color: var(--op-border-strong);
            background: var(--op-surface-3);
        }

        .pk-prop-actions .pk-btn .pk-icon {
            width: 0.9rem;
            height: 0.9rem;
        }

@media (hover: none) {
    .pk-prop-actions {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-prop-actions {
        transition: none;
    }
}

/* a narrow window (a phone): the row being edited puts its editor under the name, on the whole width */
@container (max-width: 32rem) {
    .pk-props tr {
        column-gap: 0.5rem;
    }

        .pk-props tr.is-editing {
            grid-template-columns: minmax(0, 1fr) auto;
            row-gap: 0.25rem;
        }

            .pk-props tr.is-editing > .pk-prop-value {
                grid-column: 1 / -1;
                grid-row: 2;
            }
}

/* ───────────── forms of the windows: labelled fields on a grid, blocks of sub-items, the commands ───────────── */
.pk-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem 0.75rem;
}

.pk-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    font-size: var(--op-text-xs);
}

    .pk-form-field > span {
        color: var(--op-text-2);
    }

    .pk-form-field.is-wide {
        grid-column: 1 / -1;
    }

/* a SelectField in a form: its label above the choice like the other fields of the form (not beside it, as in a settings list), so the
   fields of a row line up */
.pk-form > .pk-field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    min-width: 0;
    font-size: var(--op-text-xs);
}

    .pk-form > .pk-field > label {
        flex: none;
    }

    .pk-form-field small {
        color: var(--op-text-2);
        font-size: var(--op-text-2xs, 0.7rem);
    }

.pk-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.pk-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md, 0.5rem);
}

.pk-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
    font-weight: 600;
}

    .pk-card-title > .pk-row {
        margin-left: auto;
    }

.pk-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* chips keep their own height side by side */
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* one line: a long name is cut with «…» (its text in .pk-chip-text), a note in it («principale») stays small, never a row of its own */
.pk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.1rem 0.25rem 0.1rem 0.5rem;
    border: 1px solid var(--op-border-strong);
    border-radius: 999px;
    font-size: var(--op-text-xs);
    line-height: 1.3;
    white-space: nowrap;
}

    .pk-chip > .pk-note {
        flex: none;
        font-size: var(--op-text-2xs, 0.7rem);
    }

    .pk-chip > .pk-remove {
        flex: none;
    }

.pk-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* a chip that shows or hides one kind of a list (the statuses of «Risultati clash»), aria-pressed on the button. On: tinted, its dot
   filled. Off: no background, a dashed border, the text muted and struck through, the dot hollow — a kind left out reads as left out,
   not as one more chip. The dot takes its colour from --pk-dot on .pk-chip-dot. */
button.pk-chip.is-toggle {
    border-style: dashed;
    background: transparent;
    color: var(--op-text-3);
    cursor: pointer;
}

    button.pk-chip.is-toggle:hover {
        background: var(--op-hover);
    }

    button.pk-chip.is-toggle:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

    button.pk-chip.is-toggle:not(.is-active) .pk-chip-text {
        text-decoration: line-through;
        text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
    }

    button.pk-chip.is-toggle.is-active {
        border-style: solid;
        border-color: var(--op-accent-border);
        background: var(--op-accent-soft);
        color: var(--op-text);
    }

.pk-chip-dot {
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--pk-dot, var(--op-text-3));
    box-shadow: inset 0 0 0 2px var(--pk-dot, var(--op-text-3));
}

    button.pk-chip.is-toggle:not(.is-active) .pk-chip-dot {
        background: transparent;
    }

@media (forced-colors: active) {
    button.pk-chip.is-toggle.is-active {
        border-width: 2px;
    }
}

/* a notice with its commands (a conflict: «Sovrascrivi», «Ricarica») */
.pk-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--op-warning-border);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-warning-bg);
    font-size: var(--op-text-xs);
}

    .pk-notice > span {
        flex: 1 1 14rem;
    }

/* ───────────── materials (IFC Editor «Materiali») and classifications («Classificazioni»), in the look of the properties panel
   of the viewer and of the sets of «Proprietà» (the D1 prototype): parts in a thin bordered box (a list, or a compact card),
   one hairline row per thing — a small swatch · the name in 600 with small semantic pills, the bar of a set and its total on
   the same line when there is room · the count · the commands —; the commands with an icon only stay discreet until the row
   is pointed or focused (always on touch screens and in a narrow window), a command with its label («Modifica», «Associa»)
   stays in sight. Swatches in the colour of a material, the bar of a stratigraphy (segments proportional to thickness or
   fraction, air hatched), the parts of a set as names and values (pk-props), the compact table of the set editor ───────────── */
.pk-mat,
.pk-cls {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    /* the heads of the parts («Nella selezione», «Libreria del modello»): their room comes from the gap of the block */
    .pk-mat > .pk-section-head,
    .pk-cls > .pk-section-head {
        margin: 0.3rem 0 0;
    }

        .pk-mat > .pk-section-head:first-child,
        .pk-cls > .pk-section-head:first-child {
            margin-top: 0;
        }

    /* the model of a federation above its rows */
    .pk-mat > .pk-section-title,
    .pk-cls > .pk-section-title {
        margin: 0.15rem 0 0;
        font-size: var(--op-text-2xs, 0.6875rem);
    }

    .pk-mat > .pk-fcard + .pk-fcard,
    .pk-cls > .pk-fcard + .pk-fcard {
        margin-top: 0;
    }

    /* the choice of the model of a federation in a slim head */
    .pk-mat .pk-mat-model,
    .pk-cls .pk-mat-model {
        height: 1.6rem;
        min-height: 1.6rem;
        padding-top: 0;
        padding-bottom: 0;
        font-size: var(--op-text-xs);
    }

.pk-mat-list {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface-2, rgba(255, 255, 255, 0.03));
    list-style: none;
    font-size: var(--op-text-xs);
    line-height: 1.35;
}

/* in a card (a system of «Classificazioni»): the card is the box, the rows run in its body */
.pk-fcard-body > .pk-mat-list {
    border: 0;
    border-radius: 0;
    background: transparent;
}

    .pk-fcard-body > .pk-mat-list > li {
        padding-right: 0;
        padding-left: 0.1rem;
    }

.pk-mat-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.15rem 0.5rem;
    min-height: 1.85rem;
    padding: 0.2rem 0.35rem 0.2rem 0.45rem;
    border-top: 1px solid var(--op-border);
}

    .pk-mat-row:first-child {
        border-top: 0;
    }

    .pk-mat-row:hover {
        background: color-mix(in srgb, var(--op-surface-3) 45%, transparent);
    }

    /* the row whose set is in the editor */
    .pk-mat-row.is-editing {
        background: color-mix(in srgb, var(--op-accent, #5b97ff) 11%, transparent);
        box-shadow: inset 2px 0 0 var(--op-accent, #5b97ff);
    }

/* the name and its pills, then (on the same line when there is room) the bar and its total or a short line, then the parts */
.pk-mat-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.6rem;
    min-width: 0;
}

.pk-mat-title {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.4rem;
    min-width: 0;
    max-width: 100%;
}

    .pk-mat-title .pk-tags {
        gap: 0.2rem;
    }

    .pk-mat-title .pk-tag {
        padding: 0 0.35rem;
        font-size: 0.64rem;
        line-height: 1.35;
    }

.pk-mat-name {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--op-text);
    font: inherit;
    font-size: var(--op-text-sm, 0.8125rem);
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pk-mat-name.is-muted {
        color: var(--op-text-2);
        font-weight: 400;
        font-style: italic;
    }

button.pk-mat-name {
    cursor: pointer;
}

    button.pk-mat-name:hover {
        color: var(--op-accent, #5b97ff);
    }

    button.pk-mat-name:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
        border-radius: 3px;
    }

    /* a small chevron after the name of a set: its parts open */
    button.pk-mat-name::after {
        content: "";
        display: inline-block;
        width: 0.3rem;
        height: 0.3rem;
        margin: 0 0 0.12rem 0.35rem;
        border-right: 1.5px solid var(--op-text-2);
        border-bottom: 1.5px solid var(--op-text-2);
        transform: rotate(-45deg);
        transition: transform 150ms ease;
    }

    button.pk-mat-name[aria-expanded="true"]::after {
        transform: rotate(45deg);
    }

.pk-mat-sub {
    flex: 1 1 8rem;
    min-width: 0;
    overflow: hidden;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-mat-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
}

    .pk-mat-actions .pk-btn {
        height: 1.5rem;
        min-width: 1.5rem;
        padding: 0 0.35rem;
        gap: 0.25rem;
        font-size: var(--op-text-2xs, 0.72rem);
    }

        .pk-mat-actions .pk-btn .pk-icon {
            width: 0.9rem;
            height: 0.9rem;
        }

        .pk-mat-actions .pk-btn.is-accent {
            box-shadow: none;
        }

        /* a command with an icon only (its name in aria-label): borderless, discreet until the row is pointed or focused */
        .pk-mat-actions .pk-btn[aria-label] {
            padding: 0 0.25rem;
            border-color: transparent;
            opacity: 0;
            transition: opacity 120ms ease;
        }

.pk-mat-row:hover > .pk-mat-actions .pk-btn[aria-label],
.pk-mat-row:focus-within > .pk-mat-actions .pk-btn[aria-label],
.pk-mat-row.is-editing > .pk-mat-actions .pk-btn[aria-label],
.pk-cls-row:hover > .pk-mat-actions .pk-btn[aria-label],
.pk-cls-row:focus-within > .pk-mat-actions .pk-btn[aria-label] {
    opacity: 1;
}

    .pk-mat-row:hover > .pk-mat-actions .pk-btn[aria-label]:disabled,
    .pk-mat-row:focus-within > .pk-mat-actions .pk-btn[aria-label]:disabled,
    .pk-mat-row.is-editing > .pk-mat-actions .pk-btn[aria-label]:disabled,
    .pk-cls-row:hover > .pk-mat-actions .pk-btn[aria-label]:disabled,
    .pk-cls-row:focus-within > .pk-mat-actions .pk-btn[aria-label]:disabled {
        opacity: 0.45;
    }

@media (hover: none) {
    .pk-mat-actions .pk-btn[aria-label] {
        opacity: 1;
    }

        .pk-mat-actions .pk-btn[aria-label]:disabled {
            opacity: 0.45;
        }
}

@media (prefers-reduced-motion: reduce) {
    .pk-mat-actions .pk-btn[aria-label] {
        transition: none;
    }
}

/* the colour of a material: a small soft square (several colours: hard stops in the shares of the set) */
.pk-mat-swatch {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--op-border);
}

    .pk-mat-swatch.is-none {
        border: 1px dashed var(--op-border-strong);
        background: transparent;
        box-shadow: none;
    }

/* air, a cavity, a ventilated layer: hatched */
.pk-mat-swatch.is-air,
.pk-strata-seg.is-air,
.pk-mat-dot.is-air {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--op-text-2) 45%, transparent) 0 1.5px, transparent 1.5px 5px) !important;
    color: var(--op-text) !important;
}

/* the bar of a set, with its total on the right: after the name when there is room, else under it */
.pk-mat-bar {
    display: flex;
    flex: 1 1 8rem;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 18rem;
}

    .pk-mat-bar.is-large {
        flex: none;
        max-width: none;
    }

.pk-strata {
    display: flex;
    flex: 1 1 auto;
    gap: 1px;
    min-width: 3rem;
    height: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--op-border);
}

.pk-strata-seg {
    flex: 1 1 0;
    min-width: 3px;
    background: var(--op-text-3, #8a93a3);
}

.pk-strata.is-large {
    height: 0.95rem;
    border-radius: 0.3rem;
}

    .pk-strata.is-large .pk-strata-seg {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0.8rem;
        overflow: hidden;
        font-size: 0.58rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.pk-mat-total {
    flex: none;
    color: var(--op-text);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pk-mat-bar.is-large .pk-mat-total {
    font-size: var(--op-text-xs);
}

/* the parts of a set (opened from its name): names and values as in the properties panel, under the row */
.pk-mat-parts {
    flex: 1 1 100%;
    margin-top: 0.1rem;
    border-top: 1px dashed var(--op-border);
}

    .pk-mat-parts .pk-props {
        font-size: var(--op-text-xs);
    }

        .pk-mat-parts .pk-props tr {
            grid-template-columns: minmax(0, 1fr) auto;
            padding: 0.12rem 0.1rem;
        }

    .pk-mat-parts .pk-prop-value {
        display: block;
        text-align: right;
        white-space: nowrap;
    }

    .pk-mat-parts .pk-prop-name .pk-tag {
        margin-left: 0.3rem;
    }

    .pk-mat-parts .pk-mat-dot {
        vertical-align: -0.06rem;
    }

    .pk-mat-parts .pk-mat-idx {
        display: inline-block;
        margin: 0 0.35rem 0 0.15rem;
    }

.pk-mat-dot {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 0.18rem;
    background: var(--op-text-3, #8a93a3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

    .pk-mat-dot.is-numbered {
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 0.25rem;
        font-size: 0.62rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.pk-mat-idx {
    min-width: 0.8rem;
    color: var(--op-text-3, #8a93a3);
    font-size: var(--op-text-2xs, 0.6875rem);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* the library: the kinds, the search (as low as the buttons of a slim head); «Mostra altri» */
.pk-mat-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

    .pk-mat-tools input[type="search"],
    .pk-mat-tools .pk-search {
        flex: 1 1 9rem;
        width: auto;
        min-width: 7rem;
        height: 1.6rem;
        min-height: 1.6rem;
        padding-top: 0;
        padding-bottom: 0;
        font-size: var(--op-text-xs);
    }

    .pk-mat-tools .pk-segmented button {
        padding: 0.1rem 0.5rem;
        font-size: var(--op-text-2xs, 0.6875rem);
    }

    .pk-mat-tools .pk-table-count {
        color: var(--op-text-2);
        font-size: var(--op-text-2xs, 0.7rem);
    }

.pk-mat-model {
    width: auto;
    max-width: 14rem;
}

.pk-mat-more {
    justify-content: flex-end;
}

    .pk-mat-more .pk-btn {
        height: 1.5rem;
        padding: 0 0.45rem;
        font-size: var(--op-text-2xs, 0.72rem);
    }

/* the set editor: a compact table of the parts, stacked by the table when narrow */
.pk-set-editor {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

    .pk-set-editor > .pk-form-field {
        max-width: 24rem;
    }

.pk-set-table th,
.pk-set-table td {
    padding: 0.15rem 0.3rem;
}

.pk-set-table td {
    vertical-align: middle;
}

.pk-set-table .form-control-sm {
    height: 1.6rem;
    min-height: 1.6rem;
    padding: 0 0.4rem;
    font-size: var(--op-text-xs);
}

.pk-set-table .pk-set-idx {
    width: 1%;
}

.pk-set-table .pk-set-number {
    width: 5.5rem;
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pk-set-table .pk-suggest {
    min-width: 9rem;
}

.pk-set-table .pk-row-actions {
    white-space: nowrap;
}

    .pk-set-table .pk-row-actions .pk-btn {
        height: 1.5rem;
        min-width: 1.45rem;
        padding: 0 0.25rem;
        border-color: transparent;
    }

        .pk-set-table .pk-row-actions .pk-btn .pk-icon {
            width: 0.9rem;
            height: 0.9rem;
        }

/* «+ Strato» / «+ Costituente» under the table: a small blue button */
.pk-set-editor > .pk-row > .pk-btn {
    height: 1.5rem;
    padding: 0 0.45rem;
    font-size: var(--op-text-2xs, 0.72rem);
    box-shadow: none;
}

@container (max-width: 36rem) {
    .pk-set-table td > .form-control,
    .pk-set-table td > .pk-suggest {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pk-set-table td::before {
        flex-basis: 6.5rem;
    }

    .pk-set-table .pk-set-number {
        flex: 0 0 6rem;
        margin-left: 0;
        text-align: left;
    }
}

/* narrow (a phone): the commands under the name, aligned to the right and always in sight; the bar on its own line */
@container (max-width: 26rem) {
    .pk-mat-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .pk-mat-actions {
        grid-column: 2 / -1;
    }

        .pk-mat-actions .pk-btn[aria-label] {
            opacity: 1;
        }

            .pk-mat-actions .pk-btn[aria-label]:disabled {
                opacity: 0.45;
            }

    .pk-mat-bar {
        flex-basis: 100%;
        max-width: none;
    }
}

/* the line of a system of «Classificazioni»: edition, date, publisher, tokens, uses as small calm pills, its link, its
   description; compact rows of codes (the code on a blue pill and the name, a button opening the details; the hierarchy
   under it; the count; the commands, under the name when narrow); the details as names and values with hairlines */
.pk-cls-sys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.5rem;
    margin: 0.15rem 0 0;
    font-size: var(--op-text-2xs, 0.7rem);
}

    .pk-cls-sys .pk-tags {
        gap: 0.2rem;
    }

    .pk-cls-sys .pk-tag {
        padding: 0 0.35rem;
        font-size: 0.64rem;
        line-height: 1.35;
    }

.pk-cls-desc {
    flex: 1 0 100%;
    margin: 0;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pk-cls-tokens {
    margin-left: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}

.pk-cls-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--op-accent, #5b97ff);
    font-size: var(--op-text-2xs, 0.7rem);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pk-cls-link:hover {
        text-decoration: underline;
    }

    .pk-cls-link:focus-visible,
    .pk-cls-head:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
        border-radius: 3px;
    }

    .pk-cls-link svg {
        flex: none;
        width: 0.8rem;
        height: 0.8rem;
    }

a.pk-btn.pk-cls-site {
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0 0.25rem;
    text-decoration: none;
}

.pk-cls-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.15rem 0.5rem;
    min-height: 1.85rem;
    padding: 0.2rem 0.35rem 0.2rem 0.45rem;
    border-top: 1px solid var(--op-border);
}

    .pk-cls-row:first-child {
        border-top: 0;
    }

    .pk-cls-row:hover {
        background: color-mix(in srgb, var(--op-surface-3) 45%, transparent);
    }

/* the code and the name: one button opening the details, a small chevron after them */
.pk-cls-head {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--op-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .pk-cls-head:hover .pk-cls-name {
        color: var(--op-accent, #5b97ff);
    }

    .pk-cls-head::after {
        content: "";
        flex: none;
        width: 0.3rem;
        height: 0.3rem;
        margin: 0 0 0.12rem 0.05rem;
        border-right: 1.5px solid var(--op-text-2);
        border-bottom: 1.5px solid var(--op-text-2);
        transform: rotate(-45deg);
        transition: transform 150ms ease;
    }

    .pk-cls-head[aria-expanded="true"]::after {
        transform: rotate(45deg);
    }

.pk-cls-code {
    flex: none;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 45%, transparent);
    color: var(--op-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.pk-cls-name {
    min-width: 0;
    overflow: hidden;
    font-size: var(--op-text-sm, 0.8125rem);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the hierarchy of a code, on its line under it: Ss_25 › Ss_25_10 › Ss_25_10_30 */
.pk-cls-path {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    min-width: 0;
    color: var(--op-text-3, #8a93a3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.66rem;
}

    .pk-cls-path > span + span::before {
        content: "›";
        margin-right: 0.25rem;
        opacity: 0.7;
    }

    .pk-cls-path > .is-self {
        color: var(--op-text-2);
    }

/* the details of a code: names in grey and values, one hairline row each, as the properties panel */
.pk-cls-details {
    flex: 1 1 100%;
    margin-top: 0.1rem;
    border-top: 1px dashed var(--op-border);
}

    .pk-cls-details .pk-kv {
        grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
        gap: 0;
    }

        .pk-cls-details .pk-kv dt,
        .pk-cls-details .pk-kv dd {
            padding: 0.12rem 0.6rem 0.12rem 0;
            border-bottom: 1px solid var(--op-border);
        }

        .pk-cls-details .pk-kv dt:last-of-type,
        .pk-cls-details .pk-kv dd:last-of-type {
            border-bottom: 0;
        }

@container (max-width: 26rem) {
    .pk-cls-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

        .pk-cls-row > .pk-mat-actions {
            grid-column: 1 / -1;
        }

    .pk-cls-details .pk-kv dt {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .pk-cls-details .pk-kv dd {
        margin-bottom: 0;
    }
}

/* ───────────── relations (IFC Editor «Relazioni»): compact rows of what the selection has (a tile of the class · name and
   detail · count · commands, the commands under the name when narrow), the picker of a section (search and options; the spatial
   tree indented by depth with a guide per level), the relations bound to the geometry (read only) ───────────── */
.pk-rel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pk-rel-list {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface-2, rgba(255, 255, 255, 0.03));
    list-style: none;
    font-size: var(--op-text-xs);
}

.pk-rel-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.2rem 0.55rem;
    padding: 0.35rem 0.5rem;
    border-top: 1px solid var(--op-border);
}

    .pk-rel-row:first-child {
        border-top: 0;
    }

    .pk-rel-row:hover {
        background: color-mix(in srgb, var(--op-surface-3) 55%, transparent);
    }

.pk-rel-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pk-rel-name {
    overflow: hidden;
    color: var(--op-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pk-rel-name.is-muted {
        color: var(--op-text-2);
        font-weight: 400;
        font-style: italic;
    }

.pk-rel-sub {
    overflow: hidden;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-rel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

    .pk-rel-actions .pk-btn {
        height: 1.5rem;
        min-width: 1.75rem;
    }

.pk-rel-model {
    margin: 0.15rem 0 0.1rem;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* the picker of a section: in the card, under its rows, on a soft tint of the accent */
.pk-rel-picker {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 35%, var(--op-border));
    border-radius: var(--op-radius-md, 0.5rem);
    background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 5%, transparent);
}

.pk-rel-picker-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

    .pk-rel-picker-head > strong {
        font-size: var(--op-text-xs);
    }

    .pk-rel-picker-head > input {
        flex: 1 1 12rem;
        min-width: 0;
    }

.pk-rel-options {
    display: flex;
    flex-direction: column;
    max-height: 17rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
    font-size: var(--op-text-xs);
}

.pk-rel-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2rem;
    padding: 0.2rem 0.45rem 0.2rem calc(0.45rem + var(--depth, 0) * 1.05rem);
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    /* a guide per level of the tree */
    .pk-rel-option[style*="--depth"]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(0.45rem + var(--depth, 0) * 1.05rem - 0.55rem);
        border-left: 1px solid var(--op-border);
    }

    .pk-rel-option[style*="--depth:0"]::before {
        display: none;
    }

    .pk-rel-option:hover:not(:disabled) {
        background: color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 12%, transparent);
    }

    .pk-rel-option:focus-visible {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: -2px;
    }

    .pk-rel-option:disabled {
        cursor: default;
        opacity: 0.6;
    }

    .pk-rel-option.is-current {
        box-shadow: inset 3px 0 0 var(--pk-hue, var(--op-accent, #5b97ff));
    }

    .pk-rel-option > .pk-rel-main {
        flex: 1 1 auto;
    }

    .pk-rel-option > .pk-count {
        margin-left: auto;
    }

@container (max-width: 24rem) {
    .pk-rel-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

        .pk-rel-row > .pk-rel-actions {
            grid-column: 2 / -1;
            justify-content: flex-start;
        }
}

/* ═════════════ BEGIN compact windows of IFC Editor: «Relazioni», «Unità», «Progetto», «Persone e organizzazioni» (with its
   editors of roles and addresses) and «Verifiche», in the look of the properties panel of the viewer and of «Proprietà»
   (the D1 prototype; docs/17 §6, docs/20 §4). Their sections are compact cards (Card Compact in pk-cards: a thin bordered
   box, a slim head a little lighter, ▸/▾, the title in 600, small semantic pills, the commands on the right) holding
   hairline rows — the name in grey on the left, the value on the right with its unit on the same line (pk-props) —; the
   commands with an icon only stay discreet until the row is pointed or focused (always on touch screens and in a narrow
   window); 12–13 px text, tight paddings. The add / create commands keep the accent, small. ═════════════ */

/* a compact card holding a form, choices or other cards (not rows of names and values): a little more room inside */
.pk-fcard.is-compact > .pk-fcard-body:has(> .pk-form, > .pk-options, > .pk-chips, > .pk-segmented, > .pk-fcard, > .pk-subrow, > .pk-hint:only-child) {
    gap: 0.45rem;
    padding: 0.45rem 0.6rem 0.55rem;
}

/* compact cards inside a column with its own gap (Relazioni): the gap is the room between them */
.pk-cards.pk-rel {
    gap: 0.35rem;
}

    .pk-cards.pk-rel > .pk-fcard + .pk-fcard {
        margin-top: 0;
    }

/* names and values read only (Progetto, the dimension of a unit): two columns, no commands */
.pk-props.is-readonly tr {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.pk-prop-value .is-code {
    font-family: var(--op-font-mono, monospace);
    font-size: var(--op-text-xs);
}

/* a short line under a value (what a unit is made of, its factor, who uses it) */
.pk-prop-note {
    flex: 1 0 100%;
    min-width: 0;
    color: var(--op-text-3, #8a93a3);
    font-size: var(--op-text-2xs, 0.6875rem);
    line-height: 1.3;
}

/* a row whose commands stay in sight: a call to action («Aggiungi l'unità» of a unit the project misses) */
.pk-props tr.is-pinned > .pk-prop-actions {
    opacity: 1;
}

.pk-prop-actions .pk-btn.is-accent {
    box-shadow: none;
}

/* the symbol of a unit as a value: «mm», «W/(m²·K)», its name after it in grey */
.pk-unit-symbol {
    font-weight: 600;
    white-space: nowrap;
}

/* the symbol of a unit being edited, next to its name: a small tile */
.pk-icon-tile.is-symbol.is-compact {
    min-width: 1.9rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 0.4rem;
    font-size: var(--op-text-xs);
}

/* the rows of a list of a form (the roles of a person): one hairline row each, its command at the end */
.pk-subrow.is-flat {
    padding: 0.35rem 0 0.4rem;
    border: 0;
    border-top: 1px solid var(--op-border);
    border-radius: 0;
    background: transparent;
}

    .pk-subrow.is-flat:first-child {
        border-top: 0;
        padding-top: 0.1rem;
    }

/* a list of things done (Ultime modifiche): a thin bordered box, one hairline row each */
.pk-list.is-boxed {
    gap: 0;
    margin: 0;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface-2, rgba(255, 255, 255, 0.03));
}

    .pk-list.is-boxed > .pk-item {
        padding: 0.25rem 0.45rem;
    }

        .pk-list.is-boxed > .pk-item:first-child {
            border-top: 0;
        }

    .pk-list.is-boxed .pk-btn {
        height: 1.5rem;
        padding: 0 0.4rem;
        gap: 0.25rem;
        font-size: var(--op-text-2xs, 0.72rem);
    }

/* «Relazioni»: in a compact card the card is the box, its rows run in the body with hairlines */
.pk-fcard.is-compact .pk-rel-list {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pk-fcard.is-compact .pk-rel-row {
    gap: 0.1rem 0.45rem;
    min-height: 1.85rem;
    padding: 0.2rem 0.1rem;
}

    .pk-fcard.is-compact .pk-rel-row .pk-icon-tile.is-small {
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 0.3rem;
    }

        .pk-fcard.is-compact .pk-rel-row .pk-icon-tile.is-small .pk-icon {
            width: 0.78rem;
            height: 0.78rem;
        }

.pk-fcard.is-compact .pk-rel-name {
    font-size: var(--op-text-sm, 0.8125rem);
}

.pk-fcard.is-compact .pk-rel-model {
    margin: 0.35rem 0 0;
}

    .pk-fcard.is-compact .pk-rel-model:first-child {
        margin-top: 0.15rem;
    }

.pk-fcard.is-compact .pk-rel-picker {
    margin: 0.3rem 0 0.4rem;
    padding: 0.4rem 0.45rem;
}

.pk-fcard.is-compact .pk-rel-option {
    min-height: 1.75rem;
}

.pk-rel-actions .pk-btn {
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0 0.3rem;
}

    .pk-rel-actions .pk-btn .pk-icon {
        width: 0.9rem;
        height: 0.9rem;
    }

    /* a command with an icon only (its name in aria-label): borderless, discreet until the row is pointed or focused */
    .pk-rel-actions .pk-btn[aria-label] {
        border-color: transparent;
        opacity: 0;
        transition: opacity 120ms ease;
    }

.pk-rel-row:hover > .pk-rel-actions .pk-btn[aria-label],
.pk-rel-row:focus-within > .pk-rel-actions .pk-btn[aria-label] {
    opacity: 1;
}

    .pk-rel-row:hover > .pk-rel-actions .pk-btn[aria-label]:disabled,
    .pk-rel-row:focus-within > .pk-rel-actions .pk-btn[aria-label]:disabled {
        opacity: 0.45;
    }

@media (hover: none) {
    .pk-rel-actions .pk-btn[aria-label] {
        opacity: 1;
    }

        .pk-rel-actions .pk-btn[aria-label]:disabled {
            opacity: 0.45;
        }
}

@container (max-width: 24rem) {
    .pk-rel-actions .pk-btn[aria-label] {
        opacity: 1;
    }

        .pk-rel-actions .pk-btn[aria-label]:disabled {
            opacity: 0.45;
        }
}

/* «Persone e organizzazioni»: the avatar cards slimmer — a thin border, no lift, a smaller avatar, tight facts */
.pk-gallery {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.45rem;
}

.pk-tile {
    gap: 0.35rem;
    padding: 0.5rem 0.6rem 0.45rem;
    border-radius: var(--op-radius-md, 0.5rem);
    background:
        radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--pk-hue, var(--op-accent, #5b97ff)) 11%, transparent), transparent 60%),
        var(--op-surface-2, rgba(255, 255, 255, 0.03));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

    .pk-tile::before {
        height: 2px;
        border-radius: var(--op-radius-md, 0.5rem) var(--op-radius-md, 0.5rem) 0 0;
    }

    .pk-tile:hover {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
        transform: none;
    }

    .pk-tile.is-current {
        box-shadow: 0 0 0 1px var(--pk-hue, var(--op-accent, #5b97ff));
    }

    .pk-tile .pk-tile-head {
        gap: 0.5rem;
    }

    .pk-tile .pk-avatar.is-large,
    .pk-tile .pk-icon-tile.is-large {
        width: 1.9rem;
        height: 1.9rem;
        box-shadow: none;
        font-size: 0.7rem;
    }

    .pk-tile .pk-icon-tile.is-large {
        border-radius: 0.45rem;
    }

        .pk-tile .pk-icon-tile.is-large .pk-icon {
            width: 1rem;
            height: 1rem;
        }

    .pk-tile .pk-tile-title > strong {
        font-weight: 600;
    }

    .pk-tile .pk-tile-actions .pk-btn {
        min-width: 1.5rem;
        height: 1.5rem;
        padding: 0 0.25rem;
        border-color: transparent;
    }

        .pk-tile .pk-tile-actions .pk-btn .pk-icon {
            width: 0.9rem;
            height: 0.9rem;
        }

    .pk-tile .pk-tile-facts {
        gap: 0.1rem;
    }

    .pk-tile .pk-tags {
        gap: 0.2rem;
    }

        .pk-tile .pk-tags .pk-tag {
            padding: 0 0.35rem;
            font-size: 0.64rem;
            line-height: 1.35;
        }

    .pk-tile .pk-tile-foot {
        padding-top: 0.3rem;
        border-top-style: solid;
    }

        .pk-tile .pk-tile-foot .pk-btn {
            height: 1.5rem;
            padding: 0 0.4rem;
            gap: 0.25rem;
            font-size: var(--op-text-2xs, 0.72rem);
        }

            .pk-tile .pk-tile-foot .pk-btn.is-accent {
                box-shadow: none;
            }

/* «Verifiche»: the groups and their problems in a thin bordered box, one hairline row each; a group ▸/▾ with its title in
   600, its problems lighter, the model of a federation on a slim lighter head */
.pk-rows.is-boxed {
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface-2, rgba(255, 255, 255, 0.03));
}

    .pk-rows.is-boxed .pk-tree-row,
    .pk-rows.is-boxed .pk-group-actions {
        border-radius: 0;
        border-bottom: 1px solid var(--op-border);
    }

    .pk-rows.is-boxed .pk-tree-row.is-group > .pk-name {
        color: var(--op-text);
        font-weight: 600;
    }

    .pk-rows.is-boxed .pk-tree-row.is-model {
        padding-left: 0.45rem;
        background: color-mix(in srgb, var(--op-text, #e6e9ef) 5%, transparent);
    }

    .pk-rows.is-boxed .pk-group-actions {
        background: color-mix(in srgb, var(--op-accent, #5b97ff) 5%, transparent);
    }

        .pk-rows.is-boxed .pk-group-actions .pk-btn {
            height: 1.5rem;
            padding: 0 0.4rem;
            gap: 0.25rem;
            font-size: var(--op-text-2xs, 0.72rem);
        }

    .pk-rows.is-boxed .pk-issue-row .pk-issue-text {
        font-size: var(--op-text-2xs, 0.6875rem);
    }

/* «Correggi il tipo» on the name of a property: the red tag of a value type other than the official one, a button */
button.pk-tag.pk-type-fix {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--op-text-2xs, 0.6875rem);
    font-weight: 600;
}

    button.pk-tag.pk-type-fix:hover:not(:disabled),
    button.pk-tag.pk-type-fix:focus-visible {
        filter: brightness(1.15);
        outline: 1px solid currentColor;
    }

    button.pk-tag.pk-type-fix:disabled {
        cursor: default;
        opacity: 0.75;
    }

    button.pk-tag.pk-type-fix .pk-icon {
        width: 0.8rem;
        height: 0.8rem;
    }

/* the issues of an open group: a box about ten rows high (rows of 40px + hairline) that scrolls by itself, the half row at
   the bottom saying there is more; the problem and its fix stay above it, the next group right under it */
.pk-issue-box {
    max-height: calc(10.5 * 41px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

    .pk-rows.is-boxed .pk-issue-box {
        border-bottom: 1px solid var(--op-border);
        background: color-mix(in srgb, var(--op-text, #e6e9ef) 2%, transparent);
    }

        .pk-rows.is-boxed .pk-issue-box > .pk-tree-row:last-child {
            border-bottom: 0;
        }

/* the line of the filters of «Verifiche»: severity, search and colours on one line (wrapping on a phone) */
.pk-checks-tools {
    gap: 0.35rem 0.5rem;
}

    .pk-checks-tools > input[type="search"],
    .pk-checks-tools > .pk-search {
        flex: 1 1 12rem;
        width: auto;
        min-width: 9rem;
    }

/* the parts of a composition (a derived unit: unit, prefix, exponent), one after the other: a hairline between them */
.pk-fcard.is-compact > .pk-fcard-body > .pk-form + .pk-form {
    padding-top: 0.45rem;
    border-top: 1px solid var(--op-border);
}

/* ═════════════ END compact windows of IFC Editor ═════════════ */


/* ───────────── one size for the buttons of the windows and dialogs ─────────────
   Every button inside a window (FloatingDialog) or a modal dialog has the size of the head buttons («Aggiungi insieme»):
   1.5rem, small text and icons; the ribbon and the side panels keep their own. On touch screens no button is smaller than
   2rem (min-height wins over the heights above). */
.pk-dialog .pk-btn,
.pk-modal .pk-btn {
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    gap: 0.3rem;
    font-size: var(--op-text-2xs, 0.72rem);
}

    .pk-dialog .pk-btn .pk-icon,
    .pk-modal .pk-btn .pk-icon {
        width: 0.9rem;
        height: 0.9rem;
    }

@media (pointer: coarse) {
    .pk-btn {
        min-height: 2rem;
        min-width: 2rem;
    }
}


/* ═════════════ «Cerca in bSDD» of IFC Editor (docs/21 §8.1): a wide modal dialog with the search on top, the classes found on
   the left and the class open on the right (its properties by set in pk-props rows); one column on a phone ═════════════ */
.pk-bsdd {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 0;
}

    .pk-bsdd > .pk-hint {
        margin: 0;
    }

.pk-bsdd-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

    .pk-bsdd-bar .pk-bsdd-text {
        flex: 2 1 14rem;
        min-width: 0;
    }

    .pk-bsdd-bar > .pk-bsdd-dict {
        flex: 1 1 12rem;
        width: auto;
        min-width: 0;
        max-width: 22rem;
    }

    .pk-bsdd-bar > .pk-bsdd-type,
    .pk-bsdd-bar > .pk-bsdd-model {
        flex: 0 1 11rem;
        width: auto;
        min-width: 0;
    }

.pk-bsdd-options {
    color: var(--op-text-2);
    font-size: var(--op-text-xs);
}

    .pk-bsdd-options > .pk-check {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

.pk-bsdd-lang {
    margin-left: auto;
}

.pk-bsdd-panes {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.6rem;
    height: min(30rem, calc(100vh - 16rem));
    height: min(30rem, calc(100dvh - 16rem));
    min-height: 14rem;
}

.pk-bsdd-results,
.pk-bsdd-details {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

    .pk-bsdd-results > *,
    .pk-bsdd-details > * {
        flex: none;
        margin: 0;
    }

.pk-bsdd-details {
    padding-left: 0.6rem;
    border-left: 1px solid var(--op-border);
}

/* a class found: its check, its name (a button opening the details) with code and dictionary, its type */
.pk-bsdd-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.15rem 0.35rem 0.15rem calc(0.4rem + var(--pk-bsdd-depth, 0) * 0.9rem);
    border-top: 1px solid var(--op-border);
}

    .pk-bsdd-row:first-child {
        border-top: 0;
    }

    .pk-bsdd-row:hover {
        background: color-mix(in srgb, var(--op-surface-3) 45%, transparent);
    }

    .pk-bsdd-row.is-open {
        background: color-mix(in srgb, var(--op-accent, #5b97ff) 11%, transparent);
        box-shadow: inset 2px 0 0 var(--op-accent, #5b97ff);
    }

    .pk-bsdd-row.is-muted .pk-bsdd-name,
    .pk-bsdd-row.is-muted .pk-bsdd-sub {
        opacity: 0.6;
    }

    .pk-bsdd-row .pk-tag {
        flex: none;
        padding: 0 0.35rem;
        font-size: 0.64rem;
    }

.pk-bsdd-hit {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.4rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .pk-bsdd-hit:focus-visible {
        outline: 2px solid var(--op-focus, #4c8dff);
        outline-offset: 1px;
        border-radius: 3px;
    }

.pk-bsdd-name {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.pk-bsdd-sub {
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
}

/* the opener of a node of «Sfoglia» */
.pk-bsdd-toggle {
    flex: none;
    width: 1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--op-text-2);
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

    span.pk-bsdd-toggle {
        cursor: default;
    }

    .pk-bsdd-toggle:disabled {
        cursor: default;
    }

/* the class open: name, tags, «Apri in bSDD», definition */
.pk-bsdd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
}

.pk-bsdd-title {
    margin: 0;
    font-size: var(--op-text-sm, 0.8125rem);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pk-bsdd-open {
    margin-left: auto;
    text-decoration: none;
}

.pk-bsdd-def {
    margin: 0;
    font-size: var(--op-text-xs);
    line-height: 1.45;
    white-space: pre-line;
}

/* where a material comes from (its classification entries: a material from bSDD) in the rows of «Materiali» */
.pk-mat-provenance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
}

    .pk-mat-provenance a.pk-cls-code {
        text-decoration: none;
    }

/* the rows of the previous search while a new one runs (the hint above says so) */
.pk-bsdd-list.is-stale {
    opacity: 0.55;
}

/* the language of the texts of the class open (a dictionary with several) */
.pk-bsdd-lang-select {
    width: auto;
    max-width: 8rem;
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    font-size: var(--op-text-2xs, 0.72rem);
}

/* on a touch screen the opener of a node and the checks of the rows are as large as the buttons of the kit */
@media (pointer: coarse) {
    .pk-bsdd-toggle {
        min-width: 2rem;
        min-height: 2rem;
    }

    .pk-bsdd-row > .pk-check,
    .pk-props .pk-prop-name .pk-check {
        min-width: 1.25rem;
        min-height: 1.25rem;
        margin: 0.375rem;
    }
}

/* a property that cannot be added (greyed, its reason in the tooltip and its mark) */
.pk-props tr.is-muted > th,
.pk-props tr.is-muted > td {
    opacity: 0.55;
}

/* a hierarchy left out («Includi la gerarchia» off) */
.pk-cls-path.is-muted {
    opacity: 0.55;
    text-decoration: line-through;
}

/* the tag «bSDD» of a property incorporated from bSDD in «Proprietà» / «Quantità»: a link to its definition */
a.pk-tag.pk-bsdd-tag {
    margin-left: 0.25rem;
    text-decoration: none;
    cursor: pointer;
}

    a.pk-tag.pk-bsdd-tag:hover,
    a.pk-tag.pk-bsdd-tag:focus-visible {
        text-decoration: underline;
    }

@media (max-width: 575.98px) {
    .pk-bsdd-panes {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }

    .pk-bsdd-results {
        max-height: 35vh;
    }

    .pk-bsdd-details {
        padding-top: 0.45rem;
        padding-left: 0;
        border-top: 1px solid var(--op-border);
        border-left: 0;
    }

    .pk-bsdd-lang {
        margin-left: 0;
    }
}

/* «Cerca» | «Sfoglia» (docs/21 §13.5): two pressed buttons of the kit in a row */
.pk-bsdd-tabs {
    display: flex;
    gap: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--op-border);
}

/* «Sfoglia»: the dictionaries (15rem), a splitter, the tree of the dictionary (the widest: the rest), a splitter, the details;
   a splitter dragged sets --pk-bsdd-left / --pk-bsdd-right on the grid (attachSplitters of opera-plugins.js) */
.pk-bsdd-browse {
    display: grid;
    grid-template-columns: var(--pk-bsdd-left, 15rem) 0.7rem minmax(12rem, 3fr) 0.7rem var(--pk-bsdd-right, minmax(13rem, 2fr));
    gap: 0;
    height: min(30rem, calc(100vh - 16rem));
    height: min(30rem, calc(100dvh - 16rem));
    min-height: 14rem;
}

.pk-bsdd-dicts,
.pk-bsdd-level {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

    .pk-bsdd-dicts > *,
    .pk-bsdd-level > * {
        flex: none;
        margin: 0;
    }

/* in «Sfoglia» the splitters are the lines between the columns */
.pk-bsdd-browse > .pk-bsdd-details {
    padding-left: 0;
    border-left: 0;
}

.pk-bsdd-split {
    position: relative;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

    .pk-bsdd-split::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--op-border);
        transform: translateX(-50%);
    }

    .pk-bsdd-split:hover::before,
    .pk-bsdd-split:focus-visible::before,
    .pk-bsdd-browse.is-splitting > .pk-bsdd-split::before {
        width: 3px;
        border-radius: 2px;
        background: var(--op-accent, #5b97ff);
    }

.pk-bsdd-browse.is-splitting {
    user-select: none;
}

.pk-bsdd-dict-list .pk-bsdd-row {
    gap: 0.3rem;
}

    /* a dictionary name on one line, cut with … (the full name and version in the tooltip), never split inside a word */
    .pk-bsdd-dict-list .pk-bsdd-hit {
        min-width: 0;
    }

    .pk-bsdd-dict-list .pk-bsdd-name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

.pk-bsdd-group {
    padding: 0.35rem 0.4rem 0.1rem;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    list-style: none;
}

/* the count of the kind of a dictionary («117 voci», «…» while counted, a mark when it failed) */
.pk-bsdd-count {
    flex: none;
    margin-left: auto;
    color: var(--op-text-2);
    font-size: var(--op-text-2xs, 0.7rem);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .pk-bsdd-count.is-zero {
        opacity: 0.6;
    }

    .pk-bsdd-count.is-error {
        color: var(--op-warning-fg);
    }

/* the head of the tree: the dictionary clicked, how many items, «Comprimi tutto» */
.pk-bsdd-treehead {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: var(--op-text-xs);
}

.pk-bsdd-treename {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-bsdd-treehead > .pk-note {
    flex: none;
}

.pk-bsdd-collapse {
    flex: none;
    margin-left: auto;
}

/* a note of a branch of the tree («Lettura…», the error with «Riprova», «Mostra altri»), indented as the rows of the branch */
.pk-bsdd-treenote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    padding: 0.25rem 0.35rem 0.25rem calc(1.8rem + var(--pk-bsdd-depth, 0) * 0.9rem);
    border-top: 1px solid var(--op-border);
}

    .pk-bsdd-treenote:first-child {
        border-top: 0;
    }

    .pk-bsdd-treenote > .pk-hint {
        margin: 0;
    }

/* the dialog resized or maximized: the panes take the height of its body */
.pk-modal:is([data-sized], .is-maximized) .pk-bsdd {
    flex: 1 1 auto;
}

    .pk-modal:is([data-sized], .is-maximized) .pk-bsdd > :is(.pk-bsdd-panes, .pk-bsdd-browse) {
        flex: 1 1 auto;
        height: auto;
        min-height: 14rem;
    }

/* a node leading to items (not an item itself): the whole row opens it in the tree */
.pk-bsdd-row.is-folder .pk-bsdd-hit {
    align-items: center;
}

.pk-bsdd-folder {
    flex: none;
    width: 1rem;
    text-align: center;
    color: var(--op-text-2);
}

/* «Indietro» of the panes: only on a phone */
.pk-bsdd-back {
    display: none;
}

/* a notice of the set definitions of the project (saved, removed, a conflict with «Rileggi») */
.pk-bsdd-notice {
    flex-wrap: wrap;
}

    .pk-bsdd-notice > .pk-hint {
        flex: 1 1 14rem;
        margin: 0;
    }

/* «Aggiungi insieme» → «Insiemi del progetto»: the dictionary and the count after the name */
.pk-bsdd-defs .pk-option .pk-tag {
    flex: none;
    padding: 0 0.35rem;
    font-size: 0.64rem;
}

/* the card «Insiemi del progetto (N)» at the bottom of «Proprietà» / «Quantità» */
.pk-bsdd-defcard {
    margin-top: 0.6rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--op-border);
}

.pk-bsdd-defcard-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .pk-bsdd-defcard-toggle:focus-visible {
        outline: 2px solid var(--op-focus, #4c8dff);
        outline-offset: 2px;
        border-radius: 3px;
    }

.pk-bsdd-defs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pk-bsdd-defrow {
    border-top: 1px solid var(--op-border);
}

    .pk-bsdd-defrow:first-child {
        border-top: 0;
    }

    .pk-bsdd-defrow > .pk-bsdd-row {
        border-top: 0;
    }

    .pk-bsdd-defrow .pk-bsdd-hit {
        cursor: default;
    }

    .pk-bsdd-defrow .pk-bsdd-hit .pk-tag {
        padding: 0 0.35rem;
        font-size: 0.64rem;
    }

    .pk-bsdd-defrow > .pk-options,
    .pk-bsdd-defrow > .pk-form,
    .pk-bsdd-defrow > .pk-row,
    .pk-bsdd-defrow > .pk-props-wrap {
        margin: 0.25rem 0 0.4rem 1.4rem;
    }

/* «Sfoglia» on a phone: one pane at a time (dictionaries → level → details) with «Indietro» */
@media (max-width: 575.98px) {
    .pk-bsdd-browse {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }

        .pk-bsdd-browse > section:not(.is-current),
        .pk-bsdd-browse > .pk-bsdd-split {
            display: none;
        }

        .pk-bsdd-browse > .pk-bsdd-level,
        .pk-bsdd-browse > .pk-bsdd-details {
            padding-top: 0;
            padding-left: 0;
            border-top: 0;
            border-left: 0;
        }

        .pk-bsdd-browse > section {
            max-height: calc(100dvh - 18rem);
        }

    .pk-bsdd-back {
        display: flex;
    }
}

/* ═════════════ END «Cerca in bSDD» ═════════════ */

/* a required field: the star next to its name (the name says it to screen readers through the title) */
.pk-required {
    color: var(--op-danger-fg, #ff9a91);
    text-decoration: none;
    font-weight: 600;
    cursor: help;
}

/* «Assegnazioni» of IDS: the table of the specifications × the models, scrolling both ways inside the window */
.pk-assign {
    overflow: auto;
    min-height: 0;
    flex: 1 1 auto;
    border: 1px solid var(--op-border);
    border-radius: 4px;
}

    .pk-assign .pk-table {
        width: max-content;
        min-width: 100%;
    }

    .pk-assign th:first-child,
    .pk-assign td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--op-surface, #161b24);
        min-width: 12rem;
        max-width: 22rem;
    }

    .pk-assign thead th:first-child {
        z-index: 2;
    }

    .pk-assign .pk-assign-model {
        max-width: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .pk-assign .pk-assign-cell {
        text-align: center;
        vertical-align: middle;
    }

    .pk-assign .pk-assign-file th,
    .pk-assign .pk-assign-file td {
        background: var(--op-surface-2, #1c2230);
    }

    .pk-assign .pk-assign-file th {
        font-weight: 600;
    }

        .pk-assign .pk-assign-file th .pk-note {
            display: block;
            font-weight: 400;
        }

/* the saved views of the side panel «Viste» (docs/24): one card per row in a narrow panel, the name changed in place */
.pk-gallery.is-narrow {
    grid-template-columns: minmax(0, 1fr);
}

.pk-tile-title > .pk-name {
    flex: none;
    width: 100%;
    padding: 0.1rem 0.25rem;
    color: var(--op-text);
    font-size: var(--op-text-sm, 0.8125rem);
    font-weight: 600;
}

.pk-gallery + .pk-section-title {
    margin-top: 0.75rem;
}

/* a wrapper around a TextField that hears its keyup (Enter, Esc: after the change that gave the text): no box of its own, the field
   stays a child of the row or the grid around it for the layout */
.pk-keys {
    display: contents;
}

/* TextField AutoGrow / TextAreaField (docs/20 §5.1): a descriptive field grows with its text between its min-height and max-height
   (inline, from Rows and MaxRows), then scrolls; field-sizing where the browser has it, opera-plugins.js elsewhere */
textarea.pk-autogrow {
    resize: vertical;
    overflow-y: auto;
    line-height: 1.5;
}

@supports (field-sizing: content) {
    textarea.pk-autogrow {
        field-sizing: content;
    }
}

/* FileDropField (SDK 0.31, docs/20 §5.1): a zone to drop files on or to click; the native file input stretched over it, invisible, takes the
   drop and opens the picker (no script); highlighted while files are dragged over it; the progress of the upload under the label */
.pk-drop {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1.5px dashed var(--op-border-strong);
    border-radius: var(--op-radius-md, 0.5rem);
    background: var(--op-surface-2);
    color: var(--op-text-2);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

    .pk-drop:hover,
    .pk-drop.is-over {
        border-color: var(--op-accent, #5b97ff);
        background: var(--op-accent-soft);
        color: var(--op-text);
    }

    .pk-drop:has(.pk-drop-input:focus-visible) {
        outline: 2px solid var(--op-focus, #5b97ff);
        outline-offset: 1px;
    }

    .pk-drop.is-disabled,
    .pk-drop.is-busy {
        border-style: solid;
        background: var(--op-surface-2);
        color: var(--op-text-2);
    }

    .pk-drop.is-disabled {
        opacity: 0.6;
    }

    /* the input over the whole zone: the drop and the click land on it */
    .pk-drop-input {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

        .pk-drop-input:disabled {
            cursor: not-allowed;
        }

    .pk-drop-icon {
        display: inline-flex;
        flex: none;
        color: var(--op-accent, #5b97ff);
    }

    .pk-drop-text {
        display: flex;
        flex: 1 1 12rem;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }

    .pk-drop-label {
        overflow-wrap: anywhere;
        font-size: var(--op-text-sm, 0.8125rem);
    }

    .pk-drop-hint {
        color: var(--op-text-2);
        font-size: var(--op-text-2xs, 0.6875rem);
    }

    .pk-drop-progress {
        flex: 1 1 100%;
        width: 100%;
        height: 0.4rem;
        accent-color: var(--op-accent, #5b97ff);
    }