.protocol-fast-dialog {
    width: min(1560px, calc(100% - 18px));
    max-height: calc(100vh - 14px);
    padding: 0;
    border: 0;
    color: var(--app-text);
    background: transparent;
}

.protocol-fast-dialog::backdrop {
    background: rgba(3, 7, 18, .8);
    backdrop-filter: blur(9px);
}

.protocol-fast-shell {
    height: min(940px, calc(100vh - 14px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--app-panel-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--app-primary) 11%, transparent), transparent 36rem),
        color-mix(in srgb, var(--app-bg) 94%, white 6%);
    box-shadow: var(--app-shadow);
}

.protocol-fast-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 24px 17px;
    border-bottom: 1px solid var(--app-panel-border);
}

.protocol-fast-header .eyebrow {
    margin-bottom: 6px;
}

.protocol-fast-header h2 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    letter-spacing: -.04em;
}

.protocol-fast-meta {
    margin: 7px 0 0;
    color: var(--app-muted);
}

.protocol-fast-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.protocol-fast-summary {
    border: 1px solid var(--app-panel-border);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--app-muted);
    font-size: .8rem;
    white-space: nowrap;
}

.protocol-fast-workspace {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
}

.protocol-stage-sidebar {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 13px;
    border-right: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-bg) 80%, transparent);
}

.protocol-sidebar-title {
    padding: 4px 8px 12px;
}

.protocol-sidebar-title strong {
    display: block;
}

.protocol-sidebar-title small {
    display: block;
    margin-top: 4px;
    color: var(--app-muted);
    line-height: 1.4;
}

.protocol-stage-tree {
    min-height: 0;
    flex: 1;
    overflow: auto;
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 9px;
    padding: 2px 3px 10px 2px;
}

.protocol-stage-group {
    min-width: 0;
    border: 1px solid var(--app-panel-border);
    border-radius: 15px;
    overflow: visible;
    background: color-mix(in srgb, var(--app-panel) 65%, transparent);
}

.protocol-stage-header {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 7px;
    align-items: center;
    padding: 11px;
    border: 0;
    border-radius: 14px 14px 0 0;
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.protocol-stage-group.active > .protocol-stage-header {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-primary) 19%, transparent),
        color-mix(in srgb, var(--app-secondary) 10%, transparent)
    );
}

.protocol-stage-label {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.protocol-stage-label strong {
    font-size: .95rem;
}

.protocol-stage-label small {
    min-width: 0;
    color: var(--app-muted);
    font-size: .73rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}


.protocol-stage-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid var(--app-panel-border);
    border-radius: 999px;
    color: var(--app-muted);
    background: color-mix(in srgb, var(--app-bg) 55%, transparent);
    font-size: .67rem;
    white-space: nowrap;
}

.protocol-stage-add {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: var(--app-panel);
    color: var(--app-primary);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 800;
}

.protocol-stage-chevron {
    color: var(--app-muted);
    font-size: .8rem;
}

.protocol-stage-pages {
    min-width: 0;
    display: grid;
    grid-auto-rows: max-content;
    gap: 6px;
    padding: 8px;
}

.protocol-stage-pages.hidden {
    display: none;
}

.protocol-stage-page {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 8px 9px;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    text-align: left;
}

.protocol-stage-page:hover {
    background: var(--app-panel);
    color: var(--app-text);
}

.protocol-stage-page.active {
    border-color: color-mix(in srgb, var(--app-primary) 70%, var(--app-panel-border));
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-primary) 22%, transparent),
        color-mix(in srgb, var(--app-secondary) 20%, transparent)
    );
    color: var(--app-text);
}

.protocol-stage-page-dot {
    width: 7px;
    height: 7px;
    border: 1px solid var(--app-primary);
    border-radius: 50%;
}

.protocol-stage-page.active .protocol-stage-page-dot {
    background: var(--app-primary);
}

.protocol-stage-page small {
    color: var(--app-muted);
    font-size: .72rem;
}

.protocol-stage-entry-count {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-primary) 11%, transparent);
    color: var(--app-muted);
    font-size: .68rem !important;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}


.protocol-back-button {
    margin: 12px 3px 0;
}

.protocol-fast-main {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.protocol-fast-empty {
    min-height: 100%;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    color: var(--app-muted);
}

.protocol-fast-empty strong {
    color: var(--app-text);
    font-size: 1.2rem;
}

.protocol-fast-empty p {
    margin: 0;
}

.protocol-current-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 2px 2px 14px;
    border-bottom: 1px solid var(--app-panel-border);
}

.protocol-current-head .eyebrow {
    margin-bottom: 4px;
}

.protocol-current-head h3 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -.04em;
}

.protocol-current-head p:last-child {
    margin: 6px 0 0;
    color: var(--app-muted);
}

.protocol-current-actions {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.protocol-stage-change {
    display: grid;
    gap: 4px;
    color: var(--app-muted);
    font-size: .75rem;
}

.protocol-stage-change select {
    border: 1px solid var(--app-panel-border);
    background: var(--app-panel);
    color: var(--app-text);
    border-radius: 10px;
    padding: 8px 10px;
}

.protocol-fast-page-grid {
    display: grid;
    grid-template-columns: minmax(460px, 1.08fr) minmax(420px, .92fr);
    gap: 12px;
    margin-top: 14px;
}

.protocol-fast-data-card,
.protocol-fast-drawing-card {
    min-width: 0;
    border: 1px solid var(--app-panel-border);
    border-radius: 18px;
    background: var(--app-panel);
    overflow: hidden;
}

.protocol-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 15px 12px;
    border-bottom: 1px solid var(--app-panel-border);
}

.protocol-card-head h4 {
    margin: 5px 0 0;
    font-size: 1.05rem;
}

.protocol-card-head > small {
    color: var(--app-muted);
}

.protocol-fast-table-head {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 13px;
    color: var(--app-muted);
    font-size: .73rem;
    border-bottom: 1px solid var(--app-panel-border);
}

.protocol-fast-rows {
    display: grid;
}

.protocol-fast-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 49px;
    padding: 7px 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--app-panel-border) 75%, transparent);
}

.protocol-fast-row:last-child {
    border-bottom: 0;
}

.protocol-fast-row-label {
    color: var(--app-text);
    font-size: .83rem;
    font-weight: 700;
}

.protocol-fast-values {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.protocol-fast-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 29px;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-panel-border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-bg));
    color: var(--app-text);
    font-size: .8rem;
}

.protocol-fast-chip span {
    overflow-wrap: anywhere;
}

.protocol-fast-chip button {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
}

.protocol-fast-chip button:hover {
    color: var(--app-danger);
}

.protocol-fast-input-wrap {
    min-width: 130px;
    flex: 1 1 160px;
    display: flex;
    gap: 4px;
}

.protocol-fast-input {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-bg) 85%, transparent);
    color: var(--app-text);
    border-radius: 9px;
    padding: 7px 9px;
    outline: none;
}

.protocol-fast-input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.protocol-fast-add-value {
    width: 32px;
    flex: 0 0 32px;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: var(--app-panel);
    color: var(--app-primary);
    cursor: pointer;
    font-weight: 900;
}

.protocol-legacy-box {
    margin: 10px 13px 14px;
    border: 1px dashed var(--app-panel-border);
    border-radius: 12px;
    color: var(--app-muted);
}

.protocol-legacy-box summary {
    padding: 10px 12px;
    cursor: pointer;
}

.protocol-legacy-entry {
    padding: 8px 12px;
    border-top: 1px solid var(--app-panel-border);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .8rem;
}

.drawing-head {
    align-items: center;
}

.drawing-small-actions {
    display: flex;
    gap: 5px;
}

.drawing-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 9px 11px;
    border-bottom: 1px solid var(--app-panel-border);
}

.drawing-tool {
    border: 1px solid var(--app-panel-border);
    background: transparent;
    color: var(--app-muted);
    border-radius: 9px;
    padding: 7px 10px;
    cursor: pointer;
}

.drawing-tool.active {
    color: #0d1323;
    border-color: transparent;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    font-weight: 800;
}

.drawing-width,
.drawing-color {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--app-muted);
    font-size: .73rem;
}

.drawing-width select {
    border: 1px solid var(--app-panel-border);
    background: var(--app-panel);
    color: var(--app-text);
    border-radius: 8px;
    padding: 6px 7px;
}

.drawing-color input {
    width: 32px;
    height: 30px;
    padding: 2px;
    border: 1px solid var(--app-panel-border);
    border-radius: 8px;
    background: transparent;
}

.drawing-file-label {
    cursor: pointer;
}

.drawing-canvas-wrap {
    padding: 11px;
    background: color-mix(in srgb, var(--app-bg) 86%, transparent);
}

#protocolDrawingCanvas {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}

.protocol-fast-footer {
    position: sticky;
    bottom: -18px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 11px 2px 2px;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--app-bg) 98%, transparent) 75%,
        transparent
    );
}

.protocol-fast-footer-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 1050px) {
    .protocol-fast-page-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .protocol-fast-dialog {
        width: 100%;
        max-height: 100vh;
        margin: 0;
    }

    .protocol-fast-shell {
        height: 100vh;
        border-radius: 0;
    }

    .protocol-fast-header {
        padding: 14px 13px 12px;
        padding-right: 52px;
    }

    .protocol-fast-header-actions {
        position: absolute;
        right: 8px;
        top: 8px;
    }

    .protocol-fast-summary {
        display: none;
    }

    .protocol-fast-workspace {
        display: block;
        overflow: auto;
    }

    .protocol-stage-sidebar {
        min-height: auto;
        display: block;
        padding: 10px 9px;
        border-right: 0;
        border-bottom: 1px solid var(--app-panel-border);
    }

    .protocol-sidebar-title,
    .protocol-back-button {
        display: none;
    }

    .protocol-stage-tree {
        display: flex;
        overflow-x: auto;
        gap: 7px;
        padding: 0 0 3px;
    }

    .protocol-stage-group {
        flex: 0 0 auto;
        min-width: 156px;
        overflow: hidden;
    }

    .protocol-stage-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .protocol-stage-count {
        display: none;
    }

    .protocol-stage-chevron {
        display: none;
    }

    .protocol-stage-pages {
        max-height: 160px;
        overflow-y: auto;
    }

    .protocol-fast-main {
        overflow: visible;
        padding: 12px 9px 86px;
    }

    .protocol-current-head {
        display: grid;
    }

    .protocol-current-actions {
        justify-content: flex-end;
    }

    .protocol-fast-page-grid {
        grid-template-columns: 1fr;
    }

    .protocol-fast-table-head,
    .protocol-fast-row {
        grid-template-columns: 105px minmax(0, 1fr);
    }

    .protocol-fast-row {
        padding-left: 9px;
        padding-right: 9px;
    }

    .protocol-fast-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 9px;
        border-top: 1px solid var(--app-panel-border);
        background: color-mix(in srgb, var(--app-bg) 96%, transparent);
        backdrop-filter: blur(18px);
    }

    .protocol-fast-footer > .form-status {
        display: none;
    }

    .protocol-fast-footer-actions {
        width: 100%;
    }

    .protocol-fast-footer-actions .btn {
        flex: 1;
    }
}


.protocol-fast-special-card {
    min-width: 0;
    border: 1px solid var(--app-panel-border);
    border-radius: 18px;
    background: var(--app-panel);
    overflow: hidden;
}

.stage-module-hint {
    margin: 0;
    padding: 12px 15px;
    color: var(--app-muted);
    line-height: 1.5;
    border-bottom: 1px solid var(--app-panel-border);
}

.stage-run-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.stage-run-card {
    border: 1px solid var(--app-panel-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-bg) 55%, transparent);
    overflow: hidden;
}

.stage-run-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border-bottom: 1px solid var(--app-panel-border);
}

.stage-run-head strong {
    font-size: .92rem;
}

.stage-run-actions {
    display: flex;
    gap: 5px;
}

.stage-run-body {
    display: grid;
    gap: 11px;
    padding: 11px;
}

.stage-run-field {
    display: grid;
    gap: 5px;
}

.stage-run-field > span {
    color: var(--app-muted);
    font-size: .75rem;
}

.stage-run-field input,
.stage-run-field select,
.stage-run-field textarea {
    width: 100%;
    border: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-bg) 82%, transparent);
    color: var(--app-text);
    border-radius: 9px;
    padding: 8px 9px;
    outline: none;
}

.stage-run-field textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.45;
}

.stage-run-field input:focus,
.stage-run-field select:focus,
.stage-run-field textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.s5-query-grid {
    display: grid;
    gap: 7px;
}

.s5-query-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.s5-query-label {
    padding-top: 8px;
    color: var(--app-text);
    font-size: .8rem;
    font-weight: 700;
}

.s5-query-label small {
    display: block;
    margin-top: 2px;
    color: var(--app-muted);
    font-size: .68rem;
    font-weight: 400;
}

.s5-query-row textarea {
    min-height: 62px;
}

.s6-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.s6-tool-description {
    color: var(--app-muted);
    font-size: .74rem;
    line-height: 1.4;
}

.stage-run-save-row {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    align-items: center;
}

.stage-run-status {
    margin-right: auto;
    color: var(--app-muted);
    font-size: .76rem;
}

.stage-run-status.error { color: var(--app-danger); }
.stage-run-status.success { color: var(--app-success); }

@media (max-width: 760px) {
    .s5-query-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .s6-grid-two {
        grid-template-columns: 1fr;
    }
}


.protocol-stage-page-row {
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 5px;
    align-items: center;
    box-sizing: border-box;
    border-radius: 11px;
}

.protocol-stage-page-row.active {
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
}

.protocol-stage-page-row .protocol-stage-page {
    min-width: 0;
}

.protocol-stage-page-delete {
    width: 32px;
    height: 36px;
    min-height: 36px;
    display: grid;
    place-items: center;
    align-self: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    font-size: 1rem;
}

.protocol-stage-page-delete:hover,
.protocol-stage-page-delete:focus-visible {
    border-color: color-mix(in srgb, var(--app-danger) 45%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-danger) 10%, transparent);
    color: var(--app-danger);
    outline: none;
}


.protocol-fast-table-head.s2-order-head {
    grid-template-columns: 64px 180px minmax(0, 1fr) 112px;
}

.s2-ordered-rows {
    display: grid;
}

.protocol-s2-order-row {
    display: grid;
    grid-template-columns: 64px 180px minmax(0, 1fr) 112px;
    gap: 9px;
    align-items: center;
    min-height: 52px;
    padding: 7px 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--app-panel-border) 75%, transparent);
}

.protocol-s2-seq {
    color: var(--app-primary);
    font-size: .76rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

.protocol-s2-type,
.protocol-s2-value {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-bg) 85%, transparent);
    color: var(--app-text);
    border-radius: 9px;
    padding: 8px 9px;
    outline: none;
}

.protocol-s2-type:focus,
.protocol-s2-value:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.protocol-s2-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.protocol-s2-add-row {
    justify-self: start;
    margin: 10px 13px 13px;
}

@media (max-width: 760px) {
    .protocol-fast-table-head.s2-order-head {
        display: none;
    }

    .protocol-s2-order-row {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 7px;
        align-items: start;
        padding: 9px;
    }

    .protocol-s2-seq {
        padding-top: 10px;
    }

    .protocol-s2-type {
        grid-column: 2 / 3;
    }

    .protocol-s2-value {
        grid-column: 2 / 3;
    }

    .protocol-s2-actions {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        flex-direction: column;
    }
}


.protocol-session-files-button {
    white-space: nowrap;
}

.protocol-session-media-panel {
    flex: 0 0 auto;
    padding: 12px 18px;
    border-bottom: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-bg) 90%, var(--app-primary) 3%);
}

.protocol-source-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.protocol-source-panel-head > div:first-child {
    min-width: 0;
}

.protocol-source-panel-head strong,
.protocol-source-panel-head h4 {
    display: block;
    margin: 0;
}

.protocol-source-panel-head small {
    display: block;
    margin-top: 4px;
    color: var(--app-muted);
    line-height: 1.4;
}

.protocol-source-panel-head.compact {
    padding: 13px 14px 10px;
}

.protocol-page-media-card {
    margin-top: 14px;
    border: 1px solid var(--app-panel-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--app-panel) 82%, transparent);
    overflow: hidden;
}

.protocol-page-media-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.protocol-page-source-block {
    border-right: 1px solid var(--app-panel-border);
}

.protocol-media-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.protocol-media-list.compact {
    margin: 0;
    padding: 0 12px 12px;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}

.protocol-media-empty {
    padding: 12px;
    border: 1px dashed var(--app-panel-border);
    border-radius: 12px;
    color: var(--app-muted);
    font-size: .8rem;
}

.protocol-media-card {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid var(--app-panel-border);
    border-radius: 13px;
    overflow: hidden;
    background: var(--app-panel);
}

.protocol-media-preview {
    min-height: 105px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--app-bg) 88%, transparent);
}

.protocol-media-preview img {
    width: 100%;
    height: 118px;
    object-fit: contain;
    background: #fff;
}

.protocol-media-pdf-icon {
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--app-primary);
}

.protocol-media-info {
    min-width: 0;
    padding: 9px 10px 7px;
}

.protocol-media-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
}

.protocol-media-info small {
    display: block;
    margin-top: 4px;
    color: var(--app-muted);
    font-size: .68rem;
}

.protocol-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 9px 9px;
}

.protocol-media-actions button,
.protocol-media-actions a {
    flex: 1 1 auto;
    min-width: 60px;
    padding: 6px 7px;
    border: 1px solid var(--app-panel-border);
    border-radius: 8px;
    background: transparent;
    color: var(--app-text);
    text-align: center;
    text-decoration: none;
    font-size: .7rem;
    cursor: pointer;
}

.protocol-media-actions .danger {
    color: var(--app-danger);
}

.protocol-media-actions button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.protocol-crop-dialog {
    width: min(1180px, calc(100% - 18px));
    max-height: calc(100vh - 18px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-text);
}

.protocol-crop-dialog::backdrop {
    background: rgba(2, 6, 18, .82);
    backdrop-filter: blur(8px);
}

.protocol-crop-shell {
    max-height: calc(100vh - 18px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--app-panel-border);
    border-radius: 20px;
    background: var(--app-bg);
    box-shadow: var(--app-shadow);
}

.protocol-crop-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px 13px;
    border-bottom: 1px solid var(--app-panel-border);
}

.protocol-crop-head h3 {
    margin: 4px 0 0;
}

.protocol-crop-head p:last-child {
    margin: 6px 0 0;
    color: var(--app-muted);
}

.protocol-crop-pdf-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 18px;
    border-bottom: 1px solid var(--app-panel-border);
}

.protocol-crop-pdf-controls label {
    display: grid;
    gap: 4px;
    color: var(--app-muted);
    font-size: .75rem;
}

.protocol-crop-pdf-controls input {
    width: 100px;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: var(--app-panel);
    color: var(--app-text);
    padding: 7px 8px;
}

.protocol-crop-canvas-wrap {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    display: grid;
    place-items: center;
    padding: 12px;
    background: color-mix(in srgb, var(--app-bg) 75%, black 25%);
}

#protocolCropCanvas {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.protocol-crop-footer {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    padding: 11px 14px;
    border-top: 1px solid var(--app-panel-border);
}

.protocol-crop-name {
    min-width: 220px;
    flex: 1 1 280px;
    display: grid;
    gap: 4px;
    color: var(--app-muted);
    font-size: .75rem;
}

.protocol-crop-name input {
    width: 100%;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: var(--app-panel);
    color: var(--app-text);
    padding: 8px 9px;
}

@media (max-width: 760px) {
    .protocol-session-files-button {
        padding: 7px 8px;
        font-size: .7rem;
    }

    .protocol-page-media-columns {
        grid-template-columns: 1fr;
    }

    .protocol-page-source-block {
        border-right: 0;
        border-bottom: 1px solid var(--app-panel-border);
    }

    .protocol-source-panel-head {
        align-items: stretch;
    }

    .protocol-source-panel-head.compact {
        display: grid;
    }

    .protocol-media-list,
    .protocol-media-list.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .protocol-crop-dialog {
        width: 100%;
        max-height: 100vh;
        margin: 0;
    }

    .protocol-crop-shell {
        max-height: 100vh;
        border-radius: 0;
    }

    .protocol-crop-footer .btn {
        flex: 1 1 140px;
    }
}


.sketch-panel-head {
    align-items: flex-start;
}

.sketch-input-choice {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.sketch-source-explainer,
.protocol-crop-explainer {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 11px 13px;
    border-bottom: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
    color: var(--app-muted);
    font-size: .78rem;
    line-height: 1.48;
}

.sketch-source-explainer strong,
.protocol-crop-explainer strong {
    color: var(--app-text);
}

.protocol-sketch-source-dialog {
    width: min(780px, calc(100% - 18px));
    max-height: calc(100vh - 18px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-text);
}

.protocol-sketch-source-dialog::backdrop {
    background: rgba(3, 7, 18, .78);
    backdrop-filter: blur(8px);
}

.protocol-sketch-source-shell {
    overflow: hidden;
    border: 1px solid var(--app-panel-border);
    border-radius: 22px;
    background: color-mix(in srgb, var(--app-bg) 94%, white 6%);
    box-shadow: var(--app-shadow);
}

.protocol-sketch-source-choices {
    max-height: min(620px, calc(100vh - 180px));
    overflow: auto;
    display: grid;
    gap: 9px;
    padding: 14px;
}

.protocol-sketch-source-group {
    display: grid;
    gap: 7px;
}

.protocol-sketch-source-group + .protocol-sketch-source-group {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--app-panel-border);
}

.protocol-sketch-source-group-title {
    color: var(--app-muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.protocol-sketch-source-choice {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid var(--app-panel-border);
    border-radius: 13px;
    background: var(--app-panel);
}

.protocol-sketch-source-thumb {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-bg) 86%, transparent);
    color: var(--app-muted);
    font-size: .7rem;
    font-weight: 800;
}

.protocol-sketch-source-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.protocol-sketch-source-choice-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.protocol-sketch-source-choice-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.protocol-sketch-source-choice-info small {
    color: var(--app-muted);
}

.protocol-crop-explainer {
    border-top: 0;
}

@media (max-width: 760px) {
    .sketch-input-choice {
        width: 100%;
        justify-content: stretch;
    }

    .sketch-input-choice .btn,
    .sketch-input-choice label {
        flex: 1 1 100%;
        text-align: center;
    }

    .protocol-sketch-source-dialog {
        width: 100%;
        max-height: 100vh;
        margin: 0;
    }

    .protocol-sketch-source-shell {
        min-height: 100vh;
        border-radius: 0;
    }

    .protocol-sketch-source-choice {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .protocol-sketch-source-choice .btn {
        grid-column: 1 / -1;
    }
}


/* v0.5.3 - structured Stage 1 ideogram runs */
.s1-run-card .stage-run-head {
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
}

.s1-run-body {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    gap: 16px;
    padding: 12px;
    align-items: start;
}

.s1-ideogram-pane,
.s1-ab-pane {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 9px;
}

.s1-pane-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.s1-pane-title strong {
    font-size: .88rem;
}

.s1-mini-toolbar {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.s1-mini-tool {
    border: 1px solid var(--app-panel-border);
    background: transparent;
    color: var(--app-muted);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: .75rem;
}

.s1-mini-tool.active {
    color: #0d1323;
    border-color: transparent;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    font-weight: 800;
}

.s1-canvas-wrap {
    width: 100%;
    max-width: 330px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid var(--app-panel-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-bg) 78%, transparent);
}

.s1-ideogram-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: 9px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}

.s1-field-list {
    display: grid;
    gap: 8px;
}

.s1-field-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.s1-field-row > span {
    padding-top: 8px;
    color: var(--app-text);
    font-size: .8rem;
    font-weight: 800;
}

.s1-field-row textarea,
.s1-run-notes textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    border: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-bg) 82%, transparent);
    color: var(--app-text);
    border-radius: 9px;
    padding: 8px 9px;
    box-sizing: border-box;
    outline: none;
    line-height: 1.4;
}

.s1-field-row textarea:focus,
.s1-run-notes textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.s1-field-help {
    display: block;
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .68rem;
    font-weight: 400;
}

.s1-run-notes {
    display: grid;
    gap: 4px;
}

.s1-run-notes > span {
    color: var(--app-muted);
    font-size: .72rem;
}

.s1-legacy-note {
    padding: 9px 11px;
    color: var(--app-muted);
    font-size: .76rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .s1-run-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .s1-field-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .s1-field-row > span {
        padding-top: 0;
    }
}


/* v0.5.3a: preserved S1 data must be impossible to mistake for deleted data */
.s1-existing-data-box {
    margin: 12px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--app-primary) 38%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 5%, var(--app-bg));
}

.s1-existing-data-box > summary {
    font-weight: 800;
    color: var(--app-text);
}

.s1-existing-data-banner {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-top: 1px solid var(--app-panel-border);
    border-bottom: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-primary) 8%, transparent);
}

.s1-existing-data-banner strong {
    color: var(--app-text);
}

.s1-existing-data-banner span {
    color: var(--app-muted);
    line-height: 1.45;
    font-size: .82rem;
}

.s1-existing-data-row {
    display: grid;
    grid-template-columns: auto minmax(120px, .35fr) minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.s1-existing-data-row strong {
    color: var(--app-text);
}

.s1-existing-data-row > span:last-child {
    color: var(--app-muted);
    overflow-wrap: anywhere;
}

.s1-existing-seq {
    min-width: 34px;
    color: var(--app-primary) !important;
    font-size: .72rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .s1-existing-data-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .s1-existing-data-row > span:last-child {
        grid-column: 2;
    }
}


/* v0.5.4 – page/source images are paper pages, not landscape thumbnails */
.protocol-page-source-block .protocol-media-list.compact {
    grid-template-columns: repeat(auto-fill, minmax(190px, 225px));
    justify-content: start;
}

.protocol-media-preview.is-paper-source {
    width: 100%;
    min-height: 0;
    aspect-ratio: 210 / 297;
    padding: 8px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--app-bg) 55%, white 45%);
}

.protocol-media-preview.is-paper-source img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
}

/* Existing S1 values are a real editable first dataset */
.s1-existing-data-box {
    margin: 12px;
}

.s1-legacy-editor {
    display: grid;
    gap: 6px;
    padding: 11px;
}

.s1-legacy-edit-row {
    display: grid;
    grid-template-columns: 34px minmax(150px, .7fr) minmax(180px, 1.3fr) auto;
    gap: 7px;
    align-items: center;
}

.s1-legacy-order {
    display: grid;
    place-items: center;
    min-height: 34px;
    border: 1px solid var(--app-panel-border);
    border-radius: 8px;
    color: var(--app-primary);
    font-size: .72rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.s1-legacy-type,
.s1-legacy-value {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-bg) 82%, transparent);
    color: var(--app-text);
    padding: 8px 9px;
    box-sizing: border-box;
}

.s1-legacy-type:focus,
.s1-legacy-value:focus {
    border-color: var(--app-primary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.s1-legacy-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.s1-legacy-new-row {
    margin-top: 5px;
    padding-top: 9px;
    border-top: 1px dashed var(--app-panel-border);
}

.s1-legacy-convert-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 11px;
    border-top: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
}

.s1-legacy-convert-row span {
    color: var(--app-muted);
    line-height: 1.4;
    font-size: .8rem;
}

.s1-choose-sketch {
    border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-panel-border));
}

.s1-sketch-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 11px;
}

.s1-sketch-picker-card {
    overflow: hidden;
    display: grid;
    grid-template-rows: 170px auto auto;
    border: 1px solid var(--app-panel-border);
    border-radius: 14px;
    background: var(--app-panel);
}

.s1-sketch-picker-card > img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    background: #fff;
}

.s1-sketch-picker-info {
    min-width: 0;
    padding: 9px 10px;
}

.s1-sketch-picker-info strong,
.s1-sketch-picker-info small {
    display: block;
}

.s1-sketch-picker-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s1-sketch-picker-info small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .7rem;
}

.s1-sketch-picker-card .btn {
    margin: 0 9px 9px;
}

@media (max-width: 760px) {
    .protocol-page-source-block .protocol-media-list.compact {
        grid-template-columns: minmax(180px, 235px);
    }

    .s1-legacy-edit-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .s1-legacy-type {
        grid-column: 2;
    }

    .s1-legacy-value {
        grid-column: 2;
    }

    .s1-legacy-actions {
        grid-column: 2;
        justify-content: flex-end;
    }

    .s1-legacy-convert-row {
        display: grid;
    }
}


/* v0.5.5 – assign S1 values to ideograms visually */
.s1-assign-ideogram-button {
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 48%, var(--app-panel-border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-primary) 9%, transparent);
    color: var(--app-primary);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 850;
}

.s1-assign-ideogram-button:hover {
    background: color-mix(in srgb, var(--app-primary) 16%, transparent);
}

.s1-data-ideogram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.s1-data-ideogram-card {
    overflow: hidden;
    display: grid;
    grid-template-rows: 150px auto auto;
    border: 1px solid var(--app-panel-border);
    border-radius: 14px;
    background: var(--app-panel);
}

.s1-data-ideogram-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 150px;
    background: #fff;
}

.s1-data-ideogram-preview img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: #fff;
}

.s1-data-ideogram-empty {
    display: grid;
    gap: 4px;
    place-items: center;
    padding: 15px;
    color: #4b5563;
    text-align: center;
}

.s1-data-ideogram-empty small {
    line-height: 1.35;
}

.s1-data-ideogram-info {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
}

.s1-data-ideogram-info small {
    color: var(--app-muted);
}

.s1-data-ideogram-card .btn {
    margin: 0 9px 9px;
}

.s1-image-picker-note {
    margin-bottom: 11px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-panel-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-primary) 6%, transparent);
    color: var(--app-muted);
    line-height: 1.45;
}

.s1-source-badge {
    display: inline-flex !important;
    width: fit-content;
    margin-bottom: 4px;
    padding: 3px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-primary) 12%, transparent);
    color: var(--app-primary);
    font-size: .62rem !important;
    font-weight: 850;
}

@media (max-width: 760px) {
    .s1-data-ideogram-grid {
        grid-template-columns: 1fr;
    }

    .s1-legacy-actions {
        flex-wrap: wrap;
    }

    .s1-assign-ideogram-button {
        order: -1;
    }
}


/* v0.5.6 – clear S1 ideogram-first workflow */
.s1-main-head { align-items: flex-start; }
.s1-main-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.s1-gallery-label { display: grid; gap: 3px; padding: 12px 14px 3px; }
.s1-gallery-label strong { color: var(--app-text); font-size: .92rem; }
.s1-gallery-label small { color: var(--app-muted); line-height: 1.4; }
.s1-ideogram-gallery { padding-top: 8px; }
.s1-assign-ideogram-button.assigned {
    background: color-mix(in srgb, var(--app-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--app-primary) 70%, var(--app-panel-border));
    color: var(--app-text);
}
.s1-data-unassign-card {
    min-height: 120px; display: grid; place-content: center; gap: 5px; padding: 15px;
    border: 1px dashed var(--app-panel-border); border-radius: 14px;
    background: transparent; color: var(--app-muted); cursor: pointer; text-align: center;
}
.s1-data-unassign-card strong { color: var(--app-text); }
.s1-data-ideogram-card.selected { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.s1-linked-data-preview { display: grid; gap: 7px; padding: 9px 10px 11px; border-top: 1px solid var(--app-panel-border); }
.s1-linked-data-preview > strong { color: var(--app-muted); font-size: .75rem; }
.s1-linked-data-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.s1-linked-data-chips span {
    padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-panel-border));
    border-radius: 999px; background: color-mix(in srgb, var(--app-primary) 7%, transparent); font-size: .72rem;
}
@media (max-width: 760px) {
    .s1-main-actions { width: 100%; justify-content: stretch; }
    .s1-main-actions .btn { flex: 1 1 100%; }
}


/* v0.6.0 – client-side A4 PDF builder */
.session-media-head-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.protocol-pdf-builder-dialog { width:min(1380px,calc(100% - 18px)); max-height:calc(100vh - 14px); padding:0; border:0; background:transparent; color:var(--app-text); }
.protocol-pdf-builder-dialog::backdrop { background:rgba(3,7,18,.82); backdrop-filter:blur(9px); }
.protocol-pdf-builder-shell { height:min(920px,calc(100vh - 14px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--app-panel-border); border-radius:22px; background:var(--app-bg); box-shadow:var(--app-shadow); }
.pdf-builder-head { flex:0 0 auto; }
.pdf-builder-toolbar-main { display:flex; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--app-panel-border); }
.pdf-auto-note { color:var(--app-muted); font-size:.76rem; line-height:1.4; }
.pdf-builder-workspace { min-height:0; flex:1; display:grid; grid-template-columns:300px minmax(0,1fr); }
.pdf-builder-pages { min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--app-panel-border); }
.pdf-builder-pages-head { display:flex; justify-content:space-between; gap:8px; padding:12px; border-bottom:1px solid var(--app-panel-border); }
.pdf-builder-pages-head small { color:var(--app-muted); }
.pdf-builder-page-list { min-height:0; overflow:auto; display:grid; align-content:start; gap:6px; padding:9px; }
.pdf-builder-page-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; align-items:center; border:1px solid var(--app-panel-border); border-radius:12px; background:var(--app-panel); }
.pdf-builder-page-row.active { border-color:var(--app-primary); background:color-mix(in srgb,var(--app-primary) 9%,var(--app-panel)); }
.pdf-builder-page-select { min-width:0; display:grid; gap:3px; border:0; background:transparent; color:var(--app-text); padding:9px; text-align:left; cursor:pointer; }
.pdf-builder-page-select small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--app-muted); }
.pdf-builder-row-actions { display:flex; gap:3px; padding-right:5px; }
.pdf-builder-editor { min-width:0; min-height:0; overflow:auto; padding:12px; }
.pdf-builder-preview-wrap { width:min(100%,580px); margin:0 auto 13px; padding:10px; border-radius:14px; background:color-mix(in srgb,var(--app-panel) 75%,transparent); }
#protocolPdfBuilderCanvas { display:block; width:100%; aspect-ratio:210/297; background:#fff; box-shadow:0 4px 22px rgba(0,0,0,.24); }
.pdf-builder-controls-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:9px; }
.pdf-builder-controls-grid label { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 8px; align-items:center; padding:9px; border:1px solid var(--app-panel-border); border-radius:11px; background:var(--app-panel); }
.pdf-builder-controls-grid label > span { grid-column:1 / -1; color:var(--app-muted); font-size:.75rem; }
.pdf-builder-controls-grid input[type=range] { min-width:0; width:100%; }
.pdf-builder-controls-grid output { color:var(--app-text); font-size:.75rem; font-variant-numeric:tabular-nums; }
.pdf-builder-controls-grid select { grid-column:1/-1; width:100%; border:1px solid var(--app-panel-border); border-radius:8px; background:var(--app-bg); color:var(--app-text); padding:7px; }
.pdf-builder-page-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; justify-content:center; }
.pdf-builder-footer { flex:0 0 auto; display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 13px; border-top:1px solid var(--app-panel-border); background:var(--app-panel); }
.pdf-builder-footer > div { display:flex; gap:8px; flex-wrap:wrap; }
@media(max-width:760px){
 .protocol-pdf-builder-dialog{width:100%;max-height:100vh;margin:0}.protocol-pdf-builder-shell{height:100vh;border-radius:0}.pdf-builder-workspace{display:block;overflow:auto}.pdf-builder-pages{min-height:auto;border-right:0;border-bottom:1px solid var(--app-panel-border)}.pdf-builder-page-list{display:flex;overflow-x:auto}.pdf-builder-page-row{flex:0 0 230px}.pdf-builder-controls-grid{grid-template-columns:1fr}.pdf-builder-footer{display:grid}.pdf-builder-footer>div{display:grid}.pdf-builder-footer .btn{width:100%}.pdf-auto-note{display:none}
}


/* v0.6.1 – S1 picker + always-visible data editor */
.s1-picker-shell {
    max-height: min(860px, calc(100vh - 28px));
}

.s1-picker-dialog .protocol-sketch-source-choices {
    overflow: auto;
    padding: 16px;
}

.s1-sketch-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 240px));
    justify-content: start;
    gap: 12px;
}

.s1-sketch-picker-card {
    position: relative;
    grid-template-rows: auto auto auto;
    border: 1px solid var(--app-panel-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--app-panel) 92%, var(--app-bg));
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.s1-sketch-picker-card:hover {
    border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-panel-border));
    transform: translateY(-1px);
}

.s1-sketch-picker-card.selected {
    border-color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 9%, var(--app-panel));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 20%, transparent);
}

.s1-picker-preview-wrap {
    position: relative;
    height: 190px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: #fff;
}

.s1-picker-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.s1-picker-check {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;
    background: rgba(15,23,42,.72);
    color: transparent;
    font-weight: 900;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.s1-sketch-picker-card.selected .s1-picker-check {
    background: var(--app-primary);
    color: #0b1020;
}

.s1-picker-use {
    margin: 0 10px 10px !important;
}

.s1-picker-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-bg) 94%, transparent);
    backdrop-filter: blur(14px);
}

.s1-picker-footer > span {
    color: var(--app-muted);
    font-weight: 750;
}

.s1-picker-footer.hidden {
    display: none;
}

#protocolS1LegacyBox {
    margin-top: 14px;
}

#protocolS1LegacyBox > summary {
    font-size: .92rem;
    font-weight: 850;
}

.s1-existing-data-banner {
    background: color-mix(in srgb, var(--app-primary) 5%, transparent);
}

.s1-legacy-new-row {
    background: color-mix(in srgb, var(--app-primary) 4%, transparent);
    border-radius: 10px;
    padding: 9px;
}

@media (max-width: 760px) {
    .s1-sketch-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .s1-picker-preview-wrap {
        height: 145px;
    }

    .s1-picker-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .s1-picker-footer .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .s1-sketch-picker-grid {
        grid-template-columns: 1fr;
    }
}


/* v0.6.2 – clean S1 new-value row + always visible add-more ideogram */
.s1-add-more-ideogram {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 2px 12px 14px;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--app-primary) 42%, var(--app-panel-border));
    border-radius: 13px;
    background: color-mix(in srgb, var(--app-primary) 5%, transparent);
}

.s1-add-more-ideogram .btn {
    min-height: 40px;
}

.s1-legacy-new-row {
    grid-template-columns: 34px minmax(150px, .65fr) minmax(210px, 1.25fr) minmax(150px, .62fr) auto;
    align-items: stretch;
}

.s1-new-ideogram-choice {
    min-width: 0;
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-bg) 72%, transparent);
    color: var(--app-muted);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 750;
    text-align: left;
}

.s1-new-ideogram-choice:hover {
    border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-panel-border));
    color: var(--app-text);
}

.s1-new-ideogram-choice.assigned {
    border-color: color-mix(in srgb, var(--app-primary) 70%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 12%, transparent);
    color: var(--app-text);
}

.s1-new-row-actions {
    min-width: 105px;
}

.s1-new-add-button {
    width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

/* The existing row's ideogram control is a selector field, not a huge action. */
.s1-assign-ideogram-button {
    min-width: 104px;
    min-height: 34px;
    font-weight: 750;
}

@media (max-width: 980px) {
    .s1-legacy-new-row {
        grid-template-columns: 34px minmax(140px, .7fr) minmax(180px, 1fr) minmax(130px, .55fr);
    }
    .s1-new-row-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }
    .s1-new-add-button { width: auto; }
}

@media (max-width: 760px) {
    .s1-add-more-ideogram {
        display: grid;
    }
    .s1-add-more-ideogram .btn {
        width: 100%;
    }
    .s1-legacy-new-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }
    .s1-legacy-new-row .s1-legacy-type,
    .s1-legacy-new-row .s1-legacy-value,
    .s1-legacy-new-row .s1-new-ideogram-choice,
    .s1-legacy-new-row .s1-new-row-actions {
        grid-column: 2;
    }
    .s1-new-row-actions { justify-content: stretch; }
    .s1-new-add-button { width: 100%; }
}


/* v0.6.2a – compact S1 rows: no bulky per-row ideogram assignment control */
.s1-legacy-actions {
    position: relative;
    flex-wrap: nowrap;
}

.s1-save-value-button {
    position: relative;
}

.s1-save-value-button::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 80;
    left: 50%;
    bottom: calc(100% + 9px);
    width: max-content;
    max-width: 260px;
    transform: translateX(-50%) translateY(4px);
    padding: 8px 10px;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-bg) 96%, black 4%);
    color: var(--app-text);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.s1-save-value-button:hover::after,
.s1-save-value-button:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.s1-linked-ideogram-badge {
    min-width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 35%, var(--app-panel-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-primary) 8%, transparent);
    color: var(--app-primary);
    font-size: .66rem;
    font-weight: 850;
    white-space: nowrap;
}

/* The new-value row is again a simple chronological row: type, value, add. */
.s1-legacy-new-row {
    grid-template-columns: 34px minmax(150px, .72fr) minmax(230px, 1.4fr) auto;
    align-items: stretch;
}

.s1-new-row-actions {
    min-width: 105px;
    grid-column: auto;
}

@media (max-width: 980px) {
    .s1-legacy-new-row {
        grid-template-columns: 34px minmax(140px, .7fr) minmax(180px, 1fr) auto;
    }
    .s1-new-row-actions {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .s1-legacy-actions {
        flex-wrap: wrap;
    }
    .s1-save-value-button::after {
        left: 0;
        transform: translateX(0) translateY(4px);
        max-width: min(240px, 72vw);
    }
    .s1-save-value-button:hover::after,
    .s1-save-value-button:focus-visible::after {
        transform: translateX(0) translateY(0);
    }
    .s1-legacy-new-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }
    .s1-legacy-new-row .s1-legacy-type,
    .s1-legacy-new-row .s1-legacy-value,
    .s1-legacy-new-row .s1-new-row-actions {
        grid-column: 2;
    }
    .s1-new-row-actions {
        justify-content: stretch;
    }
}


/* v0.6.3 – S1 rows: only the checkmark, status encoded by color */
.s1-save-value-button {
    font-weight: 900;
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.s1-save-value-button.is-saved {
    color: #74e6a5;
    border-color: color-mix(in srgb, #34d399 58%, var(--app-panel-border));
    background: color-mix(in srgb, #34d399 10%, transparent);
}

.s1-save-value-button.is-dirty {
    color: #ff8f9d;
    border-color: color-mix(in srgb, #fb7185 62%, var(--app-panel-border));
    background: color-mix(in srgb, #fb7185 10%, transparent);
}

.s1-save-value-button.is-saved:hover,
.s1-save-value-button.is-saved:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, #34d399 18%, transparent);
}

.s1-save-value-button.is-dirty:hover,
.s1-save-value-button.is-dirty:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, #fb7185 18%, transparent);
}

/* No visible I1/I2 badge in the chronological row. Association is kept in data,
   but does not widen the row. */
.s1-linked-ideogram-badge {
    display: none !important;
}

/* A/B inside an ideogram is now display-only. Data entry stays in the chronological list below. */
.s1-field-list-readonly {
    gap: 7px;
}

.s1-field-row-readonly {
    align-items: center;
}

.s1-field-row-readonly > span {
    padding-top: 0;
}

.s1-field-display {
    min-width: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    box-sizing: border-box;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-bg) 72%, transparent);
    color: var(--app-text);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.s1-field-display:empty::before {
    content: "—";
    color: var(--app-muted);
}

@media (max-width: 620px) {
    .s1-field-row-readonly {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* v0.6.4 – compact ideogram / A-B display */
.s1-field-list-readonly {
    gap: 0;
    border-top: 1px solid var(--app-panel-border);
}

.s1-field-row-readonly {
    display: grid;
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--app-panel-border);
}

.s1-field-display-label {
    color: var(--app-text);
    font-size: .8rem;
    line-height: 1.35;
}

.s1-field-display {
    min-width: 0;
    min-height: 0;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--app-text);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.s1-run-card .s1-ab-pane {
    padding-top: 2px;
}

@media (max-width: 900px) {
    .s1-run-body {
        grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .s1-run-body {
        grid-template-columns: 1fr;
    }

    .s1-canvas-wrap {
        max-width: 360px;
    }

    .s1-field-row-readonly {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* v0.6.5 – robust S1 A/B read-only layout.
   Do NOT squeeze values into a tiny second grid column. */
.s1-run-body {
    grid-template-columns: minmax(220px, 290px) minmax(280px, 1fr);
    gap: 18px;
}

.s1-canvas-wrap {
    max-width: 290px;
}

.s1-field-list-readonly {
    min-width: 0;
    display: grid;
    gap: 10px;
    border-top: 0;
}

.s1-field-row-readonly {
    min-width: 0;
    display: block;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--app-panel-border);
}

.s1-field-row-readonly .s1-field-display-label {
    display: block;
    margin-bottom: 4px;
    color: var(--app-text);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.35;
}

.s1-field-row-readonly .s1-field-display {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.s1-ab-pane {
    min-width: 0;
    overflow: visible;
}

@media (max-width: 860px) {
    .s1-run-body {
        grid-template-columns: 1fr;
    }

    .s1-canvas-wrap {
        width: 100%;
        max-width: 320px;
    }
}


/* v0.6.6 – isolated S1 A/B summary.
   New class names intentionally avoid every older .s1-field-* grid rule. */
.s1-summary-list {
    width: 100%;
    min-width: 0;
    display: block;
}

.s1-summary-row {
    width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--app-panel-border);
}

.s1-summary-label {
    display: block;
    width: 100%;
    margin: 0 0 5px;
    color: var(--app-text);
    font-size: .83rem;
    font-weight: 800;
    line-height: 1.35;
}

.s1-summary-values {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--app-muted);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.55;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

/* Keep the A/B pane itself from becoming a narrow implicit column. */
.s1-run-card .s1-ab-pane {
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Slightly smaller ideogram preview on desktop. */
.s1-run-card .s1-ideogram-pane {
    max-width: 280px;
}

.s1-run-card .s1-canvas-wrap {
    max-width: 280px;
}

.s1-run-body {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

@media (max-width: 820px) {
    .s1-run-body {
        grid-template-columns: 1fr;
    }

    .s1-run-card .s1-ideogram-pane,
    .s1-run-card .s1-canvas-wrap {
        max-width: 320px;
    }
}


/* v0.7.0 – Stage 1 tabs + clean view / explicit edit mode */
.s1-tabs-wrap {
    display: flex;
    gap: 7px;
    align-items: center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: 4px 12px 10px;
    -webkit-overflow-scrolling: touch;
}

.s1-run-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--app-panel-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-bg) 58%, transparent);
    color: var(--app-muted);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.s1-run-tab:hover {
    border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-panel-border));
    color: var(--app-text);
}

.s1-run-tab.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary));
    color: #0d1323;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--app-primary) 18%, transparent);
}

.s1-run-tab-add {
    width: 40px;
    min-width: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
}

.s1-tabs-empty {
    margin: 0 12px 12px;
}

.s1-run-card {
    margin: 0 12px 14px;
    overflow: hidden;
}

.s1-tab-panel-head {
    gap: 12px;
}

.s1-active-heading {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.s1-active-heading .eyebrow {
    color: var(--app-primary);
    font-size: .64rem;
    letter-spacing: .12em;
}

.s1-active-heading > strong {
    color: var(--app-text);
    font-size: .98rem;
}

.s1-view-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.s1-edit-open {
    min-height: 36px;
    padding-inline: 13px;
}

.s1-run-card.is-viewing .s1-run-body {
    grid-template-columns: minmax(170px, 245px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.s1-run-card.is-editing .s1-run-body {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.s1-run-card.is-viewing .s1-ideogram-pane,
.s1-run-card.is-viewing .s1-canvas-wrap {
    width: 100%;
    max-width: 245px;
}

.s1-run-card.is-editing .s1-ideogram-pane,
.s1-run-card.is-editing .s1-canvas-wrap {
    width: 100%;
    max-width: 360px;
}

.s1-ideogram-canvas.is-view-canvas {
    pointer-events: none;
    cursor: default;
}

.s1-ideogram-canvas.is-edit-canvas {
    cursor: crosshair;
}

.s1-editor-intro {
    display: grid;
    gap: 3px;
    margin-bottom: 2px;
}

.s1-editor-intro strong {
    color: var(--app-text);
    font-size: .84rem;
}

.s1-editor-intro span {
    color: var(--app-muted);
    font-size: .73rem;
    line-height: 1.4;
}

.s1-editor-toolbar {
    padding: 7px;
    border: 1px solid var(--app-panel-border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--app-bg) 56%, transparent);
}

.s1-note-view {
    display: grid;
    gap: 5px;
    margin-top: 11px;
    padding: 10px 11px;
    border: 1px solid var(--app-panel-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--app-bg) 52%, transparent);
}

.s1-note-view strong {
    color: var(--app-text);
    font-size: .76rem;
}

.s1-note-view div {
    color: var(--app-muted);
    font-size: .8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.s1-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--app-panel-border);
    background: color-mix(in srgb, var(--app-primary) 4%, transparent);
}

.s1-edit-actions .btn {
    min-height: 40px;
}

/* A/B stays a pure horizontal read-only summary. */
.s1-run-card .s1-summary-list,
.s1-run-card .s1-summary-row,
.s1-run-card .s1-summary-values {
    min-width: 0;
    max-width: 100%;
}

.s1-run-card .s1-summary-values {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

@media (max-width: 860px) {
    .s1-run-card.is-viewing .s1-run-body,
    .s1-run-card.is-editing .s1-run-body {
        grid-template-columns: 1fr;
    }

    .s1-run-card.is-viewing .s1-ideogram-pane,
    .s1-run-card.is-viewing .s1-canvas-wrap,
    .s1-run-card.is-editing .s1-ideogram-pane,
    .s1-run-card.is-editing .s1-canvas-wrap {
        max-width: 360px;
    }
}

@media (max-width: 620px) {
    .s1-tabs-wrap {
        padding-inline: 10px;
    }

    .s1-run-card {
        margin-inline: 8px;
    }

    .s1-tab-panel-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .s1-view-actions {
        justify-content: flex-start;
    }

    .s1-edit-open {
        width: 100%;
    }

    .s1-editor-toolbar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .s1-editor-toolbar .s1-mini-tool {
        text-align: center;
    }

    .s1-edit-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .s1-edit-actions .btn {
        width: 100%;
    }
}


/* v0.7.1 – cleaner S1 tab workflow, contextual source crop, large edit canvas */
.protocol-interruption-card {
    margin: 0 14px 14px;
    padding: 11px 12px;
    border: 1px solid var(--app-panel-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-panel) 90%, transparent);
}
.protocol-interruption-head { display:grid; grid-template-columns:minmax(170px,.45fr) minmax(0,1fr); gap:12px; align-items:end; }
.protocol-interruption-head > div:first-child { display:grid; gap:3px; }
.protocol-interruption-form { display:flex; gap:7px; align-items:end; flex-wrap:wrap; }
.protocol-interruption-form select,
.protocol-interruption-form input { min-height:38px; border:1px solid var(--app-panel-border); border-radius:9px; background:var(--app-bg); color:var(--app-text); padding:7px 9px; box-sizing:border-box; }
.protocol-interruption-form > input { flex:1 1 170px; }
.protocol-pause-times { display:flex; gap:7px; }
.protocol-pause-times label { display:grid; gap:2px; color:var(--app-muted); font-size:.68rem; }
.protocol-pause-times input { width:112px; }
.protocol-interruption-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.protocol-interruption-list:empty { display:none; }
.protocol-interruption-chip { display:flex; align-items:center; gap:7px; padding:5px 6px 5px 9px; border:1px solid var(--app-panel-border); border-radius:999px; background:color-mix(in srgb,var(--app-primary) 6%,transparent); }
.protocol-interruption-chip span { display:flex; gap:6px; align-items:center; }
.protocol-interruption-chip small { color:var(--app-muted); }
.protocol-interruption-chip .icon-action { width:28px; min-width:28px; min-height:28px; height:28px; border-radius:999px; }

/* S1 no longer shows the generic separate-sketch panel. Source images stay at page level; cropping is contextual inside an ideogram. */
#protocolS1Module .s1-main-head { margin-bottom:0; }
#protocolS1ModuleHint { margin-bottom:8px; }
.s1-empty-ideogram-actions { display:grid; gap:8px; padding:12px; border:1px dashed color-mix(in srgb,var(--app-primary) 42%,var(--app-panel-border)); border-radius:12px; background:color-mix(in srgb,var(--app-primary) 5%,transparent); }
.s1-empty-ideogram-actions > strong { color:var(--app-text); }
.s1-empty-ideogram-actions > span { color:var(--app-muted); font-size:.78rem; line-height:1.45; }
.s1-empty-ideogram-buttons { display:flex; flex-wrap:wrap; gap:7px; }

/* View remains compact. Edit gets the space needed for mouse/pen/finger work. */
.s1-run-card.is-editing .s1-run-body { display:grid; grid-template-columns:1fr !important; gap:14px; }
.s1-run-card.is-editing .s1-ideogram-pane,
.s1-run-card.is-editing .s1-canvas-wrap { width:100% !important; max-width:none !important; }
.s1-run-card.is-editing .s1-canvas-wrap { padding:10px; }
.s1-run-card.is-editing .s1-ideogram-canvas.is-edit-canvas { width:100%; height:auto; aspect-ratio:4/3; max-height:72vh; }
.s1-run-card.is-editing .s1-ab-pane { width:100%; max-width:none; }
.s1-run-card.is-editing .s1-editor-toolbar { position:sticky; top:0; z-index:3; }

@media (max-width:760px) {
    .protocol-interruption-head { grid-template-columns:1fr; }
    .protocol-interruption-form { display:grid; grid-template-columns:1fr 1fr; }
    .protocol-interruption-form > input { grid-column:1/-1; width:100%; }
    .protocol-pause-times { grid-column:1/-1; }
    .protocol-interruption-form .btn { width:100%; }
    .s1-run-card.is-editing .s1-ideogram-canvas.is-edit-canvas { width:100%; height:auto; aspect-ratio:4/3; max-height:none; }
    .s1-empty-ideogram-buttons { display:grid; grid-template-columns:1fr; }
    .s1-empty-ideogram-buttons .btn { width:100%; text-align:center; }
}


/* v0.7.2 – S1 timeline is the dataset: sensory rows + AOL/Conf breaks + pauses */
.s1-timeline-interruption-row {
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--app-primary) 26%, var(--app-panel-border));
    border-radius: 10px;
    padding: 7px;
}

.s1-special-order {
    border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.s1-interruption-content,
.s1-new-timeline-content {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.s1-inline-pause-times {
    display: grid;
    grid-template-columns: auto minmax(105px, .6fr) auto minmax(105px, .6fr);
    align-items: center;
    gap: 6px;
    color: var(--app-muted);
    font-size: .7rem;
}

.s1-inline-pause-times input[type="time"] {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-bg) 82%, transparent);
    color: var(--app-text);
    padding: 7px 8px;
    box-sizing: border-box;
}

.s1-timeline-new-row {
    grid-template-columns: 34px minmax(150px, .72fr) minmax(230px, 1.4fr) auto !important;
}

/* v0.7.2 – ideogram paper is portrait, not a wide strip. */
.s1-run-card.is-viewing .s1-ideogram-pane,
.s1-run-card.is-viewing .s1-canvas-wrap {
    max-width: 280px;
}

.s1-ideogram-canvas.is-view-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4 !important;
}

.s1-run-card.is-editing .s1-ideogram-canvas.is-edit-canvas {
    width: min(100%, 900px);
    height: auto;
    aspect-ratio: 3 / 4 !important;
    max-height: none !important;
    margin-inline: auto;
}

.s1-run-card.is-editing .s1-canvas-wrap {
    display: grid;
    place-items: start center;
}

@media (max-width: 760px) {
    .s1-inline-pause-times {
        grid-template-columns: auto 1fr;
    }
    .s1-timeline-new-row,
    .s1-timeline-interruption-row {
        grid-template-columns: 30px minmax(0, 1fr) !important;
    }
    .s1-timeline-new-row .s1-legacy-type,
    .s1-timeline-new-row .s1-new-timeline-content,
    .s1-timeline-new-row .s1-new-row-actions,
    .s1-timeline-interruption-row .s1-legacy-type,
    .s1-timeline-interruption-row .s1-interruption-content,
    .s1-timeline-interruption-row .s1-legacy-actions {
        grid-column: 2;
    }
    .s1-run-card.is-viewing .s1-ideogram-pane,
    .s1-run-card.is-viewing .s1-canvas-wrap {
        max-width: 260px;
    }
    .s1-run-card.is-editing .s1-ideogram-canvas.is-edit-canvas {
        width: 100%;
    }
}


/* v0.7.3 – clean ideogram preview: fixed useful width, real aspect ratio, no artificial paper frame */
.s1-run-card.is-viewing .s1-run-body {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start;
}
.s1-run-card.is-viewing .s1-ideogram-pane {
    width: 340px !important;
    max-width: 100% !important;
}
.s1-run-card.is-viewing .s1-canvas-wrap {
    width: 340px !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.s1-run-card.is-viewing .s1-ideogram-canvas.is-view-canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default;
}
@media (max-width: 760px) {
    .s1-run-card.is-viewing .s1-run-body { grid-template-columns: 1fr !important; }
    .s1-run-card.is-viewing .s1-ideogram-pane,
    .s1-run-card.is-viewing .s1-canvas-wrap { width: min(100%, 340px) !important; }
}

/* v0.10.13 - post-feedback C/N/PC/NC data-point evaluation */
.protocol-evaluation-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    margin: 0 0 14px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 34%, var(--app-panel-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-panel));
}
.protocol-eval-summary { min-width: 0; display: grid; gap: 3px; }
.protocol-eval-summary strong { font-size: .9rem; }
.protocol-eval-summary span { color: var(--app-text); font-size: .8rem; line-height: 1.4; }
.protocol-eval-summary small,
.protocol-ai-eval-disclaimer { color: var(--app-muted); font-size: .72rem; line-height: 1.4; }
.protocol-ai-eval-disclaimer { grid-column: 1 / -1; }
.protocol-event-evaluations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
}
.protocol-point-evaluation {
    display: inline-grid;
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    gap: 5px 7px;
    max-width: 100%;
    padding: 5px 7px;
    border: 1px solid var(--app-panel-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-panel) 82%, transparent);
}
.protocol-point-evaluation-value {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .78rem;
}
.protocol-point-evaluation-select {
    min-height: 29px;
    padding: 3px 7px;
    border: 1px solid var(--app-panel-border);
    border-radius: 8px;
    background: var(--app-bg);
    color: var(--app-text);
    font-size: .72rem;
}
.protocol-point-normalized {
    grid-column: 1 / -1;
    color: var(--app-muted);
    font-size: .66rem;
    line-height: 1.35;
}
.protocol-ai-evaluation-badge {
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-secondary) 18%, transparent);
    color: var(--app-text);
    font-size: .64rem;
    font-weight: 700;
}
@media (max-width: 720px) {
    .protocol-evaluation-bar { grid-template-columns: 1fr; }
    .protocol-ai-evaluate-button { width: 100%; }
    .protocol-point-evaluation { grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
}

/* ================================================================
   SIGNALREITER v0.10.14 - physical paper pages + automatic parts
   A paper page can contain several stage sections. Page order and part
   order can be corrected directly in the left protocol flow.
   ================================================================ */
.protocol-physical-page {
    display: grid;
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--app-panel-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-panel) 58%, transparent);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.protocol-physical-page.active {
    border-color: color-mix(in srgb, var(--app-primary) 48%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 5%, var(--app-panel));
}
.protocol-physical-page-head {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px auto minmax(0, 1fr) 30px;
    align-items: center;
    gap: 6px;
    padding: 2px 2px 3px;
}
.protocol-drag-grip {
    width: 28px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--app-muted);
    cursor: grab;
    touch-action: none;
    user-select: none;
    font-weight: 900;
    letter-spacing: -2px;
}
.protocol-drag-grip:hover,
.protocol-drag-grip:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 45%, var(--app-panel-border));
    color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
    outline: none;
}
.protocol-drag-grip:disabled {
    opacity: .25;
    cursor: default;
}
.protocol-drag-grip.is-dragging {
    cursor: grabbing;
    color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 14%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 18%, transparent);
}
.protocol-physical-page-number {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
.protocol-physical-page-number input {
    width: 52px;
    min-width: 0;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid var(--app-panel-border);
    border-radius: 8px;
    background: var(--app-bg);
    color: var(--app-text);
    padding: 4px 5px;
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.protocol-physical-page-number input:focus {
    border-color: var(--app-primary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 12%, transparent);
}
.protocol-physical-page-meta {
    min-width: 0;
    color: var(--app-muted);
    font-size: .66rem;
    text-align: right;
    white-space: nowrap;
}
.protocol-flow-parts {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.protocol-flow-part-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    border-radius: 11px;
    transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.protocol-flow-part-row.active {
    background: color-mix(in srgb, var(--app-primary) 9%, transparent);
}
.protocol-flow-part-button {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--app-text);
    padding: 8px 8px;
    text-align: left;
    cursor: pointer;
}
.protocol-flow-part-button:hover,
.protocol-flow-part-row.active .protocol-flow-part-button {
    border-color: color-mix(in srgb, var(--app-primary) 35%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
}
.protocol-flow-part-button .protocol-flow-page-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.protocol-flow-part-button .protocol-flow-page-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
}
.protocol-flow-part-button .protocol-flow-page-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-muted);
    font-size: .68rem;
}
.protocol-summary-part {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px;
    background: transparent;
    color: var(--app-text);
    text-align: left;
    cursor: pointer;
}
.protocol-summary-part.active,
.protocol-summary-part:hover {
    border-color: color-mix(in srgb, var(--app-primary) 35%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 7%, transparent);
}
.protocol-physical-page.protocol-drop-target,
.protocol-flow-part-row.protocol-drop-target {
    background: color-mix(in srgb, var(--app-primary) 18%, var(--app-panel));
    box-shadow: 0 0 0 2px var(--app-primary), 0 9px 24px color-mix(in srgb, var(--app-primary) 14%, transparent);
    transform: translateY(-1px);
}
.protocol-flow-part-row.protocol-drop-target {
    border-radius: 11px;
}
.protocol-flow-subitem {
    margin-left: 35px;
}
@media (max-width: 760px) {
    .protocol-physical-page-head {
        grid-template-columns: 28px auto minmax(0, 1fr) 30px;
    }
    .protocol-physical-page-number input { width: 48px; }
    .protocol-flow-part-button { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .protocol-flow-part-button .protocol-flow-page-main small { white-space: normal; }
}

.protocol-ai-evaluate-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.protocol-ai-mini-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid color-mix(in srgb, var(--app-primary) 24%, var(--app-panel-border));
    border-top-color: var(--app-primary);
    border-radius: 50%;
    animation: protocol-ai-mini-spin .8s linear infinite;
}
@keyframes protocol-ai-mini-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .protocol-ai-mini-spinner { animation-duration: 1.8s; } }

/* ================================================================
   SIGNALREITER v0.10.15 - direct row dragging + focused entry view
   ================================================================ */
.protocol-physical-page-head{grid-template-columns:auto minmax(0,1fr) 30px;cursor:grab;touch-action:pan-y;user-select:none;border-radius:10px;transition:background .14s ease,box-shadow .14s ease}
.protocol-physical-page-head:hover{background:color-mix(in srgb,var(--app-primary) 10%,transparent)}
.protocol-physical-page-head.is-dragging{cursor:grabbing;background:color-mix(in srgb,var(--app-primary) 18%,var(--app-panel));box-shadow:0 0 0 2px color-mix(in srgb,var(--app-primary) 42%,transparent)}
.protocol-flow-part-row{grid-template-columns:minmax(0,1fr)}
.protocol-flow-part-button{grid-template-columns:minmax(0,1fr) auto;touch-action:pan-y;user-select:none;cursor:grab}
.protocol-flow-part-button:hover{border-color:color-mix(in srgb,var(--app-primary) 58%,var(--app-panel-border));background:color-mix(in srgb,var(--app-primary) 12%,transparent)}
.protocol-flow-part-button.is-dragging{cursor:grabbing;border-color:var(--app-primary);background:color-mix(in srgb,var(--app-primary) 20%,var(--app-panel));box-shadow:0 0 0 2px color-mix(in srgb,var(--app-primary) 30%,transparent)}
.protocol-flow-delete{color:#ff6f78!important;border-color:color-mix(in srgb,#d93648 48%,var(--app-panel-border))!important;background:color-mix(in srgb,#b51f33 10%,transparent)!important}
.protocol-flow-delete:hover,.protocol-flow-delete:focus-visible{color:#fff!important;border-color:#e44555!important;background:color-mix(in srgb,#c51f35 32%,var(--app-panel))!important;outline:none}
.protocol-expand-toggle{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--app-panel-border);border-radius:11px;background:var(--app-panel);color:var(--app-muted);font-size:1.1rem;font-weight:900;cursor:pointer}.protocol-expand-toggle:hover,.protocol-expand-toggle.active{color:var(--app-primary);border-color:color-mix(in srgb,var(--app-primary) 60%,var(--app-panel-border));background:color-mix(in srgb,var(--app-primary) 10%,var(--app-panel))}
#protocolDialog.protocol-entry-maximized{width:calc(100vw - 8px);max-width:none;max-height:calc(100vh - 8px)}
#protocolDialog.protocol-entry-maximized .protocol-fast-shell{height:calc(100vh - 8px);max-height:none;border-radius:12px}
#protocolDialog.protocol-entry-maximized .protocol-fast-workspace{grid-template-columns:minmax(0,1fr)}
#protocolDialog.protocol-entry-maximized .protocol-stage-sidebar{display:none}
#protocolDialog.protocol-entry-maximized .protocol-page-editor{padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px)}
@media(max-width:760px){.protocol-physical-page-head{grid-template-columns:auto minmax(0,1fr) 30px}.protocol-flow-part-button{grid-template-columns:minmax(0,1fr) auto}}

/* v0.10.15 – S2 uses the same chronological stream for perceptions, breaks and pauses. */
.protocol-s2-value-content{display:grid;gap:.42rem;min-width:0}
.protocol-s2-pause-times{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.protocol-s2-pause-times input[type="time"]{width:8.2rem;max-width:100%;padding:.52rem .62rem}
.protocol-s2-interruption-row{background:rgba(139,164,255,.055);border-radius:.72rem}
.protocol-s2-interruption-row .protocol-s2-type{font-weight:750}
@media (max-width:780px){.protocol-s2-pause-times input[type="time"]{width:7.3rem}}

/* v0.10.15 – per-stage AI source crop and non-destructive source masking. */
.protocol-stage-source-controls{margin-top:.75rem;padding:.78rem .9rem;border:1px solid var(--app-panel-border);border-radius:.9rem;background:color-mix(in srgb,var(--app-primary) 4%,var(--app-panel));display:grid;gap:.45rem}
.protocol-stage-source-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.protocol-stage-source-head>div:first-child{display:grid;gap:.14rem}.protocol-stage-source-head span,.protocol-stage-source-controls>small{color:var(--app-muted);font-size:.76rem}.protocol-stage-source-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.protocol-mask-tools{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.55rem}.protocol-mask-tools button{border:1px solid var(--app-panel-border);border-radius:.65rem;background:var(--app-bg);color:var(--app-text);padding:.45rem .62rem;cursor:pointer}.protocol-mask-tools button:hover,.protocol-mask-tools button.active{border-color:var(--app-primary);background:color-mix(in srgb,var(--app-primary) 12%,var(--app-panel))}
@media(max-width:700px){.protocol-stage-source-actions{width:100%}.protocol-stage-source-actions .btn{flex:1 1 auto}}

/* v0.10.17 - protocol as real workspace page + two-level quick navigation */
.protocol-workspace-page{position:fixed;inset:0;z-index:1800;width:100%;height:100dvh;margin:0;padding:0;border:0;background:var(--app-bg);overflow:auto}
.protocol-workspace-page.hidden{display:none!important}
body.protocol-workspace-open{overflow:hidden}
.protocol-workspace-page .protocol-fast-shell{width:100%;min-height:100dvh;max-width:none;border-radius:0;margin:0}
.protocol-workspace-page .protocol-fast-header{position:sticky;top:0;z-index:40}
.protocol-quick-nav{position:sticky;top:var(--protocol-header-height,86px);z-index:38;display:grid;gap:6px;padding:7px 12px 9px;background:color-mix(in srgb,var(--app-bg) 95%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--app-panel-border)}
.protocol-quick-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px;min-width:0}
.protocol-quick-tabs{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;padding:2px 0}
.protocol-quick-tab{flex:0 0 auto;max-width:260px;border:1px solid var(--app-panel-border);background:var(--app-panel);color:var(--app-text);border-radius:10px;padding:7px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;scroll-snap-align:center}
.protocol-quick-tab.active{background:var(--app-primary);border-color:var(--app-primary);color:#08111f;font-weight:800;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-primary) 22%,transparent)}
.protocol-quick-arrow,.protocol-quick-add{width:34px;height:34px;border:1px solid var(--app-panel-border);border-radius:10px;background:var(--app-panel);color:var(--app-text);font-size:1.25rem;cursor:pointer}
.protocol-quick-add{font-weight:900;color:var(--app-primary)}
.protocol-quick-add-panel{display:flex;align-items:end;gap:9px;flex-wrap:wrap;padding:8px 40px 2px}
.protocol-quick-add-panel label{display:grid;gap:4px}
.protocol-quick-add-panel select,.protocol-quick-add-panel input{min-height:36px}
.protocol-entry-maximized .protocol-stage-sidebar{display:none!important}
.protocol-entry-maximized .protocol-fast-workspace{grid-template-columns:minmax(0,1fr)!important}
.protocol-expand-toggle{min-width:38px;height:38px;border-radius:10px;border:1px solid var(--app-panel-border);background:var(--app-panel);color:var(--app-text);font-size:1.2rem;cursor:pointer}
@media(max-width:760px){.protocol-quick-nav{top:72px;padding-inline:7px}.protocol-quick-arrow{display:none}.protocol-quick-row{grid-template-columns:minmax(0,1fr) auto}.protocol-quick-tab{max-width:190px;padding:6px 9px}.protocol-quick-add-panel{padding:7px 0 2px}.protocol-stage-sidebar{display:none}.protocol-fast-workspace{grid-template-columns:minmax(0,1fr)!important}}


/* v0.10.17 part notes + backups */
.protocol-flow-part-row{position:relative}.protocol-part-edit{flex:0 0 auto;border:0;background:transparent;color:var(--app-muted);font-size:1rem;cursor:pointer;padding:7px;border-radius:8px}.protocol-part-edit:hover{background:var(--app-panel);color:var(--app-text)}.protocol-fast-footer-actions{align-items:center}.protocol-version .btn{white-space:nowrap}

/* v0.10.18a HOTFIX - keep established left flow readable and restore part actions. */
.protocol-flow-part-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:4px 5px;
    align-items:stretch;
}
.protocol-flow-part-button{
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:7px 8px!important;
}
.protocol-flow-page-main{min-width:0}
.protocol-flow-part-button .protocol-flow-page-main strong{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.protocol-flow-part-button .protocol-flow-page-main small{
    display:block;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.25;
    overflow-wrap:anywhere;
}
.protocol-flow-part-actions{display:flex;align-items:center;gap:2px}
.protocol-part-edit,.protocol-part-delete{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    padding:0!important;
    border-radius:8px!important;
}
.protocol-part-delete{border:1px solid color-mix(in srgb,#d93648 48%,var(--app-panel-border))!important}
.protocol-part-inline-editor{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
    padding:7px;
    border:1px solid color-mix(in srgb,var(--app-primary) 45%,var(--app-panel-border));
    border-radius:9px;
    background:color-mix(in srgb,var(--app-primary) 6%,var(--app-panel));
    margin:1px 0 5px;
}
.protocol-part-inline-editor input{min-width:0;width:100%;height:34px;padding:6px 8px}
.protocol-part-inline-editor-actions{display:flex;gap:5px;align-items:center}
.protocol-flow-empty-part{padding:7px 8px;color:var(--app-muted);font-size:.78rem}

/* Keep the save bar obvious: frequent actions visible, rare actions expand as a second inline row. */
.protocol-save-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.protocol-session-save-primary{font-weight:850;min-width:142px}
.protocol-more-actions{order:10;flex:1 0 100%;display:grid;justify-items:end}
.protocol-more-actions>summary{
    list-style:none;
    cursor:pointer;
    border:1px solid var(--app-panel-border);
    border-radius:10px;
    padding:8px 11px;
    color:var(--app-text);
    background:var(--app-panel);
    font-weight:700;
    user-select:none;
}
.protocol-more-actions>summary::-webkit-details-marker{display:none}
.protocol-more-actions[open]>summary{border-color:color-mix(in srgb,var(--app-primary) 55%,var(--app-panel-border));color:var(--app-primary)}
.protocol-more-actions-panel{
    position:static;
    display:flex;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
    width:100%;
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid var(--app-panel-border);
}
@media(max-width:760px){
    .protocol-flow-part-row{grid-template-columns:minmax(0,1fr) auto!important}
    .protocol-part-inline-editor{grid-template-columns:1fr}
    .protocol-part-inline-editor-actions{justify-content:flex-end}
    .protocol-review-summary small{display:none}
    .protocol-fast-footer{gap:6px}
    .protocol-save-actions{width:100%;justify-content:flex-end}
    .protocol-save-actions>.btn{padding-inline:10px}
    .protocol-more-actions-panel{justify-content:stretch}
    .protocol-more-actions-panel .btn{flex:1 1 auto}
}

/* SIGNALREITER v0.11.15 - clearer protocol navigation and save bar */
.protocol-quick-row-unified{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    align-items:center;
    gap:7px;
    min-width:0;
}
.protocol-quick-tabs-unified{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
    padding:2px 1px;
}
.protocol-quick-tabs-unified .protocol-quick-tab{
    flex:0 0 auto;
}
.protocol-quick-page-tab{
    font-weight:800;
    background:color-mix(in srgb,var(--app-panel) 88%,var(--app-bg));
}
.protocol-quick-page-tab.active-page{
    border-color:color-mix(in srgb,var(--app-primary) 62%,var(--app-panel-border));
    color:var(--app-primary);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--app-primary) 12%,transparent);
}
.protocol-quick-page-tab.active{
    color:#08111f;
}
.protocol-quick-separator{
    flex:0 0 1px;
    width:1px;
    height:24px;
    margin:0 2px;
    background:var(--app-panel-border);
    opacity:.9;
}
.protocol-quick-add-kind{
    display:flex;
    gap:6px;
    align-items:center;
}
.protocol-quick-add-kind .btn.active{
    border-color:var(--app-primary);
    background:color-mix(in srgb,var(--app-primary) 13%,var(--app-panel));
    color:var(--app-primary);
}
.protocol-physical-page-number input.protocol-edit-focus{
    border-color:var(--app-primary)!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--app-primary) 22%,transparent)!important;
}
.protocol-autosave-status{
    min-width:84px;
    white-space:nowrap;
}
.protocol-save-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:nowrap;
}
.protocol-more-actions{
    order:0;
    flex:0 0 auto;
    position:relative;
    display:block;
}
.protocol-more-actions-panel{
    position:absolute;
    right:0;
    bottom:calc(100% + 7px);
    z-index:90;
    display:grid;
    gap:6px;
    min-width:220px;
    width:max-content;
    max-width:min(360px,calc(100vw - 28px));
    margin:0;
    padding:8px;
    border:1px solid var(--app-panel-border);
    border-radius:12px;
    background:var(--app-panel);
    box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.protocol-more-actions:not([open]) .protocol-more-actions-panel{
    display:none;
}
.protocol-more-actions-panel .btn{
    width:100%;
    justify-content:flex-start;
}
.protocol-session-save-primary{
    margin-left:2px;
}
@media(max-width:760px){
    .protocol-quick-row-unified{
        grid-template-columns:minmax(0,1fr) auto;
    }
    .protocol-quick-row-unified .protocol-quick-arrow{
        display:none;
    }
    .protocol-quick-tabs-unified{
        grid-column:1;
    }
    .protocol-quick-row-unified .protocol-quick-add{
        grid-column:2;
    }
    .protocol-quick-add-kind{
        flex:1 0 100%;
    }
    .protocol-save-actions{
        flex-wrap:wrap;
    }
    .protocol-more-actions-panel{
        position:absolute;
        right:auto;
        left:0;
    }
}

.protocol-hidden-compat{display:none!important}


/* SIGNALREITER v0.11.16 - sidebar save + unclipped protocol workspace */
.protocol-sidebar-save-cluster{
    flex:0 0 auto;
    display:grid;
    gap:8px;
    margin:10px 3px 0;
    padding-top:11px;
    border-top:1px solid var(--app-panel-border);
}
.protocol-sidebar-save-meta{display:grid;gap:2px;min-width:0;color:var(--app-muted)}
.protocol-sidebar-save-meta strong{font-size:.76rem;color:var(--app-text);font-weight:800}
.protocol-sidebar-save-meta small{font-size:.67rem;line-height:1.3}
.protocol-sidebar-save-meta .protocol-autosave-status{min-height:16px;font-size:.68rem;white-space:normal}
.protocol-sidebar-save-cluster .protocol-session-save-primary{width:100%;min-width:0;margin:0}
.protocol-sidebar-save-cluster .protocol-more-actions{width:100%;position:relative}
.protocol-sidebar-save-cluster .protocol-more-actions>summary{box-sizing:border-box;width:100%;text-align:center}
.protocol-sidebar-save-cluster .protocol-more-actions-panel{position:static;right:auto;bottom:auto;width:100%;min-width:0;max-width:none;margin-top:6px;box-shadow:none}
.protocol-sidebar-save-cluster .protocol-more-actions-panel .btn{width:100%}
.protocol-back-button{margin-top:8px}
.protocol-fast-main{padding-bottom:34px}
.protocol-mobile-savebar{display:none}
@media(max-width:760px){
    .protocol-mobile-savebar{
        position:fixed;
        left:0;right:0;bottom:0;
        z-index:1905;
        display:flex;
        align-items:center;
        gap:8px;
        padding:8px 10px max(8px,env(safe-area-inset-bottom));
        border-top:1px solid var(--app-panel-border);
        background:color-mix(in srgb,var(--app-bg) 96%,transparent);
        backdrop-filter:blur(18px);
    }
    .protocol-mobile-savebar .protocol-autosave-status{min-width:0;flex:1;font-size:.69rem;white-space:normal}
    .protocol-mobile-savebar .protocol-session-save-primary{flex:0 0 auto;margin:0}
    .protocol-fast-main{padding-bottom:104px!important}
}


/* v0.11.21 — protocol page save/history + reliable left sidebar */
#protocolDialog .protocol-expand-toggle{display:none!important}
.protocol-sidebar-toggle{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 11px;border-color:var(--app-panel-border);white-space:nowrap}
.protocol-sidebar-toggle-icon{display:inline-grid;place-items:center;width:18px;font-size:1.05rem;font-weight:900}
.protocol-sidebar-toggle.active{border-color:color-mix(in srgb,var(--app-primary) 58%,var(--app-panel-border));background:color-mix(in srgb,var(--app-primary) 12%,var(--app-panel));color:var(--app-primary)}
#protocolDialog.protocol-sidebar-collapsed .protocol-fast-workspace{grid-template-columns:minmax(0,1fr)!important}
#protocolDialog.protocol-sidebar-collapsed .protocol-stage-sidebar{display:none!important}

@media (min-width:761px){
  #protocolDialog .protocol-stage-sidebar{
    position:sticky;
    top:calc(var(--protocol-header-height,0px) + var(--protocol-quick-nav-height,0px));
    height:calc(100dvh - var(--protocol-header-height,0px) - var(--protocol-quick-nav-height,0px));
    max-height:calc(100dvh - var(--protocol-header-height,0px) - var(--protocol-quick-nav-height,0px));
    align-self:start;
    overflow:hidden;
    box-sizing:border-box;
  }
  #protocolDialog .protocol-sidebar-save-cluster{margin-top:auto;position:relative;z-index:3;background:color-mix(in srgb,var(--app-bg) 96%,transparent);padding-bottom:2px}
  #protocolDialog .protocol-back-button{flex:0 0 auto;margin-top:8px}
  #protocolDialog .protocol-session-save-primary{order:20;width:100%;box-shadow:0 8px 26px color-mix(in srgb,var(--app-primary) 15%,transparent)}
  #protocolDialog .protocol-more-actions{order:10}
  #protocolDialog .protocol-sidebar-save-meta{order:5}
}

.protocol-current-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.protocol-page-save-actions,.protocol-page-order-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.protocol-page-save-actions{padding-right:8px;border-right:1px solid var(--app-panel-border)}
.protocol-page-save-primary{min-width:116px}
.protocol-ai-undo-page:not(.hidden){border-color:color-mix(in srgb,var(--app-danger) 55%,var(--app-panel-border));color:color-mix(in srgb,var(--app-danger) 82%,white 18%);background:color-mix(in srgb,var(--app-danger) 8%,var(--app-panel))}

.protocol-page-history-card{width:min(820px,calc(100vw - 28px));max-height:min(820px,calc(100vh - 34px));overflow:auto}
.protocol-page-history-list{display:grid;gap:8px;margin-top:16px}
.protocol-page-history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--app-panel-border);border-radius:13px;background:color-mix(in srgb,var(--app-panel) 78%,transparent)}
.protocol-page-history-row.history-pm{border-color:color-mix(in srgb,var(--app-primary) 38%,var(--app-panel-border));background:color-mix(in srgb,var(--app-primary) 7%,var(--app-panel))}
.protocol-page-history-row.history-pd{border-color:color-mix(in srgb,var(--app-secondary) 30%,var(--app-panel-border));background:color-mix(in srgb,var(--app-secondary) 5%,var(--app-panel))}
.protocol-page-history-row.history-pau{border-color:color-mix(in srgb,var(--app-danger) 32%,var(--app-panel-border));background:color-mix(in srgb,var(--app-danger) 5%,var(--app-panel))}
.protocol-page-history-info{min-width:0;display:grid;gap:4px}
.protocol-page-history-info small{color:var(--app-muted);font-size:.75rem}
.protocol-page-history-badge{font-weight:800;font-size:.84rem;color:var(--app-text)}
.protocol-page-history-preview{margin-top:14px;padding:13px;border:1px solid color-mix(in srgb,var(--app-primary) 32%,var(--app-panel-border));border-radius:14px;background:color-mix(in srgb,var(--app-bg) 72%,var(--app-panel))}
.protocol-page-history-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.protocol-page-history-preview-head span,.protocol-page-history-preview-meta{color:var(--app-muted);font-size:.78rem}
.protocol-page-history-preview-meta{margin:6px 0 10px}
.protocol-page-history-preview-rows{display:grid;gap:6px}
.protocol-page-history-preview-row{display:grid;grid-template-columns:minmax(135px,.55fr) minmax(180px,1fr) auto;gap:10px;align-items:start;padding:8px 9px;border:1px solid color-mix(in srgb,var(--app-panel-border) 72%,transparent);border-radius:10px}
.protocol-page-history-preview-row span{color:var(--app-muted);font-size:.76rem}
.protocol-page-history-preview-row strong{font-size:.86rem;overflow-wrap:anywhere}
.protocol-page-history-preview-row small{color:var(--app-muted);font-size:.7rem;text-align:right}

@media (max-width:760px){
  .protocol-sidebar-toggle{display:none!important}
  .protocol-current-actions{justify-content:stretch}
  .protocol-page-save-actions{width:100%;padding-right:0;padding-bottom:7px;border-right:0;border-bottom:1px solid var(--app-panel-border)}
  .protocol-page-save-actions .btn{flex:1}
  .protocol-page-order-actions{margin-left:auto}
  .protocol-page-history-preview-row{grid-template-columns:1fr}
  .protocol-page-history-preview-row small{text-align:left}
}


/* v0.11.26 - compact, dependable protocol navigation + direct edit focus */
#protocolDialog .protocol-part-drag-handle,
#protocolDialog .protocol-page-drag-handle{display:none!important}

#protocolDialog .protocol-physical-page-head{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) 30px!important;
    gap:8px!important;
    align-items:center!important;
    min-height:42px;
    padding:6px 5px 6px 7px!important;
    border-radius:10px;
    cursor:pointer!important;
    user-select:none!important;
    touch-action:manipulation!important;
    transition:background .14s ease,border-color .14s ease;
}
#protocolDialog .protocol-physical-page-head:hover,
#protocolDialog .protocol-physical-page-head:focus-visible{
    background:color-mix(in srgb,var(--app-primary) 9%,transparent)!important;
    outline:1px solid color-mix(in srgb,var(--app-primary) 32%,transparent);
    outline-offset:-1px;
}
#protocolDialog .protocol-flow-page-block.active>.protocol-physical-page-head{
    background:color-mix(in srgb,var(--app-primary) 7%,transparent)!important;
}
#protocolDialog .protocol-physical-page-number{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    min-width:0;
    font-weight:800;
}
#protocolDialog .protocol-physical-page-number input{
    width:48px!important;
    min-width:48px!important;
    height:32px!important;
    padding:4px 6px!important;
    text-align:center;
    cursor:text!important;
}
#protocolDialog .protocol-physical-page-meta{
    justify-self:end;
    color:var(--app-muted);
    font-size:.73rem;
    white-space:nowrap;
}

#protocolDialog .protocol-flow-parts{display:grid!important;gap:4px!important;padding:2px 0 6px 9px!important}
#protocolDialog .protocol-flow-part-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px!important;
    align-items:center!important;
    min-height:46px;
    padding:0!important;
    border-radius:10px;
    overflow:hidden;
}
#protocolDialog .protocol-flow-part-row.active{
    background:color-mix(in srgb,var(--app-primary) 12%,var(--app-panel))!important;
    box-shadow:inset 2px 0 0 var(--app-primary);
}
#protocolDialog .protocol-flow-part-button{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    padding:7px 8px 7px 10px!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:var(--app-text)!important;
    text-align:left!important;
    cursor:pointer!important;
    user-select:none!important;
    touch-action:manipulation!important;
}
#protocolDialog .protocol-flow-part-button:hover,
#protocolDialog .protocol-flow-part-button:focus-visible{
    background:color-mix(in srgb,var(--app-primary) 8%,transparent)!important;
    outline:none;
}
#protocolDialog .protocol-flow-part-button .protocol-flow-page-main strong{
    display:block!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
#protocolDialog .protocol-flow-part-button .protocol-flow-page-main small{
    display:block!important;
    margin-top:2px;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    line-height:1.25!important;
}
#protocolDialog .protocol-flow-part-actions{
    display:flex!important;
    align-items:center!important;
    gap:3px!important;
    padding-right:3px;
}
#protocolDialog .protocol-part-edit,
#protocolDialog .protocol-part-delete{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
}
#protocolDialog .protocol-flow-empty-part{padding:7px 9px 9px!important;font-size:.76rem!important}

#protocolDialog .protocol-sidebar-save-cluster{
    gap:7px!important;
    padding-top:9px;
    border-top:1px solid var(--app-panel-border);
}
#protocolDialog .protocol-sidebar-save-cluster .protocol-more-actions,
#protocolDialog .protocol-sidebar-save-cluster #protocolVersionsOpen,
#protocolDialog .protocol-sidebar-save-cluster #protocolFastSave,
#protocolDialog .protocol-sidebar-save-cluster #protocolConfirmPage{display:none!important}
#protocolDialog .protocol-session-save-primary,
#protocolDialog .protocol-sidebar-overview-back{width:100%!important;margin:0!important}
#protocolDialog .protocol-sidebar-overview-back{margin-top:1px!important}

#protocolDialog .protocol-current-head{
    display:grid!important;
    grid-template-columns:minmax(220px,1fr) auto!important;
    align-items:start!important;
    gap:12px!important;
}
#protocolDialog .protocol-current-actions{
    min-width:0!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
    gap:7px!important;
    flex-wrap:wrap!important;
}
#protocolDialog .protocol-page-save-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    flex-wrap:wrap!important;
    padding-right:8px!important;
    border-right:1px solid var(--app-panel-border)!important;
}
#protocolDialog .protocol-page-save-actions .btn{display:inline-flex!important;visibility:visible!important}
#protocolDialog .protocol-page-clear-action{
    flex:0 0 auto!important;
    border-color:color-mix(in srgb,var(--app-danger) 62%,var(--app-panel-border))!important;
    color:color-mix(in srgb,var(--app-danger) 82%,white 18%)!important;
    background:color-mix(in srgb,var(--app-danger) 9%,var(--app-panel))!important;
}
#protocolDialog .protocol-page-clear-action:hover,
#protocolDialog .protocol-page-clear-action:focus-visible{
    border-color:var(--app-danger)!important;
    background:color-mix(in srgb,var(--app-danger) 18%,var(--app-panel))!important;
}

@media(max-width:980px){
    #protocolDialog .protocol-current-head{grid-template-columns:1fr!important}
    #protocolDialog .protocol-current-actions{justify-content:flex-start!important}
    #protocolDialog .protocol-page-save-actions{justify-content:flex-start!important;border-right:0!important;padding-right:0!important}
}
@media(max-width:760px){
    #protocolDialog .protocol-flow-parts{padding-left:5px!important}
    #protocolDialog .protocol-flow-part-button .protocol-flow-page-main small{white-space:normal!important;overflow:visible!important}
    #protocolDialog .protocol-page-save-actions{width:100%!important}
    #protocolDialog .protocol-page-save-actions .btn{flex:1 1 auto!important}
}


/* v0.11.26 - visible focus when a sidebar part is opened for editing */
#protocolDialog .protocol-edit-focus{
    outline:2px solid var(--app-primary)!important;
    outline-offset:2px!important;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--app-primary) 16%,transparent)!important;
}


/* v0.11.26 - per-part AI read area + streamlined S2 */
.protocol-part-source-scope{
    margin:10px 0 0;
    padding:12px 13px;
    border:1px solid color-mix(in srgb,var(--app-primary) 40%,var(--app-panel-border));
    border-radius:14px;
    background:color-mix(in srgb,var(--app-primary) 7%,var(--app-panel));
}
.protocol-part-source-scope.has-crop{
    border-color:color-mix(in srgb,var(--app-primary) 72%,var(--app-panel-border));
    background:color-mix(in srgb,var(--app-primary) 12%,var(--app-panel));
}
.protocol-part-source-scope.no-source{opacity:.82}
.protocol-part-source-scope-main{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.protocol-part-source-scope-main>div:first-child{display:grid;gap:3px;min-width:240px;flex:1 1 420px}
.protocol-part-source-scope-main strong{font-size:.95rem}
.protocol-part-source-scope-main small{color:var(--app-muted);line-height:1.4}
.protocol-part-source-scope-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.protocol-part-source-scope-hint{margin:9px 0 0;padding:8px 10px;border-left:3px solid var(--app-primary);background:color-mix(in srgb,var(--app-primary) 5%,transparent);color:var(--app-muted);font-size:.8rem;line-height:1.45}
.protocol-fast-page-grid.s2-stream-only{grid-template-columns:1fr}
.protocol-fast-page-grid.s2-stream-only .protocol-fast-data-card{width:100%}
.protocol-s2-type-select{min-width:0;width:100%;height:42px;border:1px solid var(--app-panel-border);border-radius:10px;background:var(--app-bg);color:var(--app-text);padding:0 10px;font:inherit}
.protocol-s2-sketch-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:42px;padding:4px 0}
.protocol-s2-sketch-state{font-weight:700;color:var(--app-text);margin-right:2px}
.protocol-s2-order-row:has(.protocol-s2-sketch-inline){align-items:center}
@media(max-width:760px){
  .protocol-part-source-scope-actions{width:100%}
  .protocol-part-source-scope-actions .btn{flex:1 1 auto}
  .protocol-s2-sketch-inline .btn{flex:1 1 auto}
}


/* v0.11.28: S2 keeps the S1-style compact row actions without audit clutter. */
.protocol-fast-table-head.s2-order-head,
.protocol-s2-order-row {
    grid-template-columns: 64px minmax(180px, 245px) minmax(240px, 1fr) 150px;
}
.protocol-s2-actions { align-items:center; gap:6px; min-width:0; }
.protocol-s2-actions .protocol-entry-author { display:none !important; }
.protocol-s2-meta.is-marked { border-color:#e1b95e; color:#ffe29a; background:rgba(225,185,94,.12); }
.protocol-s2-undo:disabled { opacity:.38; cursor:default; }
.protocol-s2-value { min-width:0; }
@media (max-width: 900px) {
  .protocol-fast-table-head.s2-order-head { display:none; }
  .protocol-s2-order-row { grid-template-columns:52px minmax(150px,.75fr) minmax(180px,1.25fr); }
  .protocol-s2-actions { grid-column:2 / -1; justify-content:flex-end; }
}

/* v0.11.31: unconfirmed AI/OCR S2 suggestions stay in the normal chronological stream. */
.protocol-s2-ai-suggestion {
    background: color-mix(in srgb, var(--app-danger) 4%, transparent);
}
.protocol-s2-ai-suggestion-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    height:30px;
    padding:0 7px;
    border:1px solid color-mix(in srgb, var(--app-danger) 60%, var(--app-panel-border));
    border-radius:999px;
    color:color-mix(in srgb, var(--app-danger) 78%, white 22%);
    background:color-mix(in srgb, var(--app-danger) 10%, transparent);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.04em;
    flex:0 0 auto;
}
@media (max-width: 900px) {
  .protocol-s2-ai-suggestion-badge { height:28px; min-width:28px; }
}


/* v0.11.32 - S1 save state follows S2: no permanent green saved check. */
.s1-save-value-button.is-saved,
.s1-save-value-button.is-neutral {
    display: none !important;
}
.s1-save-value-button.is-dirty {
    display: inline-flex !important;
}

/* v0.11.32 - page history can preview and apply one exact protocol part. */
.protocol-page-history-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.protocol-page-history-preview-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--app-panel-border) 72%, transparent);
}
@media (max-width: 620px) {
    .protocol-page-history-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .protocol-page-history-actions {
        width: 100%;
        justify-content: stretch;
    }
    .protocol-page-history-actions .btn,
    .protocol-page-history-preview-actions .btn {
        flex: 1 1 auto;
    }
}

/* v0.11.33 - intermediate ideograms are first-class, draggable page-flow items. */
#protocolDialog .protocol-flow-order-row {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 5px !important;
    overflow: visible !important;
}
#protocolDialog .protocol-flow-order-row > .protocol-flow-drag-handle {
    display: grid !important;
    place-items: center;
    width: 26px;
    min-width: 26px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--app-muted);
    cursor: grab;
    touch-action: none;
    user-select: none;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
}
#protocolDialog .protocol-flow-order-row > .protocol-flow-drag-handle:hover,
#protocolDialog .protocol-flow-order-row > .protocol-flow-drag-handle:focus-visible {
    color: var(--app-primary);
    border-color: color-mix(in srgb, var(--app-primary) 38%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 9%, transparent);
    outline: none;
}
#protocolDialog .protocol-flow-order-row > .protocol-flow-drag-handle.is-dragging {
    cursor: grabbing;
    color: var(--app-primary);
    border-color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 16%, var(--app-panel));
}
#protocolDialog .protocol-flow-order-row.protocol-drop-target {
    background: color-mix(in srgb, var(--app-primary) 15%, var(--app-panel)) !important;
    box-shadow: inset 2px 0 0 var(--app-primary), 0 0 0 1px color-mix(in srgb, var(--app-primary) 45%, transparent) !important;
    transform: none !important;
}
#protocolDialog .protocol-flow-intermediate-row {
    background: color-mix(in srgb, var(--app-primary) 5%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--app-primary) 50%, transparent);
}
#protocolDialog .protocol-flow-intermediate-row.active {
    background: color-mix(in srgb, var(--app-primary) 13%, var(--app-panel)) !important;
    box-shadow: inset 2px 0 0 var(--app-primary) !important;
}
#protocolDialog .protocol-flow-intermediate-button {
    cursor: pointer !important;
}
#protocolDialog .protocol-flow-intermediate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 25px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 45%, var(--app-panel-border));
    border-radius: 999px;
    color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 9%, transparent);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .03em;
    box-sizing: border-box;
}
#protocolDialog .protocol-flow-intermediate-row .protocol-flow-page-main small {
    border-right: 0 !important;
}
#protocolDialog .protocol-flow-order-row .protocol-flow-part-actions {
    align-self: center;
}

/* The intermediate view uses the whole work area instead of leaving an empty second column. */
#protocolDialog #protocolFastEditor.protocol-intermediate-mode .protocol-fast-page-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}
#protocolDialog #protocolFastEditor.protocol-intermediate-mode #protocolFastSpecialCard {
    grid-column: 1 / -1;
    width: 100%;
}
#protocolDialog #protocolFastEditor.protocol-intermediate-mode .s1-intermediate-run-card {
    margin-inline: 0;
}
#protocolDialog #protocolFastEditor.protocol-intermediate-mode .s1-intermediate-run-card.is-viewing .s1-run-body {
    grid-template-columns: minmax(300px, 430px) minmax(260px, 1fr) !important;
    gap: 22px !important;
}
#protocolDialog #protocolFastEditor.protocol-intermediate-mode .s1-intermediate-run-card.is-viewing .s1-ideogram-pane,
#protocolDialog #protocolFastEditor.protocol-intermediate-mode .s1-intermediate-run-card.is-viewing .s1-canvas-wrap {
    width: 100% !important;
    max-width: 430px !important;
}
@media (max-width: 900px) {
    #protocolDialog #protocolFastEditor.protocol-intermediate-mode .s1-intermediate-run-card.is-viewing .s1-run-body {
        grid-template-columns: 1fr !important;
    }
    #protocolDialog #protocolFastEditor.protocol-intermediate-mode .s1-intermediate-run-card.is-viewing .s1-ideogram-pane,
    #protocolDialog #protocolFastEditor.protocol-intermediate-mode .s1-intermediate-run-card.is-viewing .s1-canvas-wrap {
        max-width: 430px !important;
    }
}
@media (max-width: 620px) {
    #protocolDialog .protocol-flow-order-row {
        grid-template-columns: 25px minmax(0, 1fr) auto !important;
        gap: 3px !important;
    }
    #protocolDialog .protocol-flow-order-row > .protocol-flow-drag-handle {
        width: 24px;
        min-width: 24px;
    }
}

/* Intermediate ideogram already has its own page title; avoid a duplicate S1 module header/tab strip. */
#protocolDialog #protocolFastEditor.protocol-intermediate-mode #protocolS1Module > .s1-main-head,
#protocolDialog #protocolFastEditor.protocol-intermediate-mode #protocolS1ModuleHint {
    display: none !important;
}
#protocolDialog #protocolFastEditor.protocol-intermediate-mode #protocolS1Runs {
    padding-top: 12px;
}


/* v0.11.36 - direct cross-page flow drag, compact help and unified dropdown styling. */
#protocolDialog .protocol-s2-type-combo {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
}
#protocolDialog .protocol-s2-type-combo.is-open { z-index: 100; }
#protocolDialog .protocol-fast-data-card.s2-autocomplete-open { overflow: visible; }
#protocolDialog .protocol-s2-type-input {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 8px 36px 8px 9px;
    box-sizing: border-box;
    line-height: 1.2;
}
#protocolDialog .protocol-s2-type-toggle {
    position: absolute;
    z-index: 2;
    top: 1px;
    right: 1px;
    width: 34px;
    height: 40px;
    padding: 0;
    border: 0;
    border-left: 1px solid color-mix(in srgb,var(--app-panel-border) 65%,transparent);
    border-radius: 0 8px 8px 0;
    background: transparent;
    color: var(--app-muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
#protocolDialog .protocol-s2-type-toggle:hover,
#protocolDialog .protocol-s2-type-toggle:focus-visible {
    color: var(--app-primary);
    background: color-mix(in srgb,var(--app-primary) 8%,transparent);
    outline: none;
}
#protocolDialog .protocol-s2-type-menu {
    position: absolute;
    z-index: 90;
    left: 0;
    right: 0;
    top: calc(100% + 5px);
    max-height: 285px;
    overflow-y: auto;
    padding: 5px;
    border-radius: 10px;
}
#protocolDialog .protocol-s2-type-menu.hidden { display:none!important; }
#protocolDialog .protocol-s2-type-option {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    min-height:36px;
    padding:7px 9px;
    border:0;
    border-radius:7px;
    font:inherit;
    text-align:left;
    cursor:pointer;
}
#protocolDialog .protocol-s2-type-option small {color:var(--app-muted);font-size:.7rem;white-space:nowrap}

#protocolDialog #protocolAiApply.is-loading {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    cursor:wait;
}
#protocolDialog #protocolAiApply.is-loading .protocol-ai-mini-spinner {display:inline-block!important;border-top-color:currentColor}

#protocolDialog .protocol-flow-add-card {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px!important;
    padding:9px!important;
}
#protocolDialog .protocol-flow-add-card-head {
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
}
#protocolDialog .protocol-flow-add-card-head > span {
    color:var(--app-muted);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}
#protocolDialog .protocol-flow-help {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    min-width:28px;
    padding:0;
    border:1px solid var(--app-panel-border);
    border-radius:999px;
    background:transparent;
    color:var(--app-muted);
    font-weight:900;
    cursor:pointer;
}
#protocolDialog .protocol-flow-help:hover,
#protocolDialog .protocol-flow-help:focus-visible {color:var(--app-primary);border-color:var(--app-primary);outline:none}
#protocolDialog .protocol-flow-stage-field {grid-column:1 / -1;min-width:0}
#protocolDialog .protocol-flow-stage-field > select {width:100%;margin:0}
#protocolDialog .protocol-page-position-field,
#protocolDialog .protocol-intermediate-page-field {
    grid-column:1 / 2;
    display:flex!important;
    align-items:center;
    gap:7px;
    min-width:0;
    margin:0!important;
}
#protocolDialog .protocol-page-position-field.hidden,
#protocolDialog .protocol-intermediate-page-field.hidden {display:none!important}
#protocolDialog .protocol-page-position-field > span,
#protocolDialog .protocol-intermediate-page-field > span {font-size:.74rem;color:var(--app-muted);white-space:nowrap}
#protocolDialog .protocol-page-position-field > input,
#protocolDialog .protocol-intermediate-page-field > input {width:76px!important;min-width:64px;margin:0!important}
#protocolDialog .protocol-flow-add-button {grid-column:2 / 3;align-self:end;min-height:42px;margin:0!important;white-space:nowrap}
#protocolDialog .protocol-flow-add-card.no-page-field .protocol-flow-add-button {grid-column:1 / -1;width:100%}
#protocolDialog .protocol-flow-inline-help {display:none!important}

#protocolDialog .protocol-part-more,
#protocolDialog .protocol-flow-intermediate-actions .protocol-part-delete {
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    padding:0!important;
    display:grid!important;
    place-items:center;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:var(--app-muted);
    font-size:1rem;
    font-weight:900;
    cursor:pointer;
}
#protocolDialog .protocol-part-more:hover,
#protocolDialog .protocol-part-more:focus-visible {color:var(--app-primary);border-color:color-mix(in srgb,var(--app-primary) 42%,var(--app-panel-border));background:color-mix(in srgb,var(--app-primary) 8%,transparent);outline:none}
#protocolDialog .protocol-flow-intermediate-actions {display:flex!important;align-items:center!important;gap:3px!important;padding-right:3px}

.protocol-flow-move-popover {display:grid;gap:10px;min-width:290px;max-width:min(390px,calc(100vw - 24px))}
.protocol-flow-move-title {display:block;font-size:.9rem}
.protocol-flow-move-field {display:grid;gap:5px}
.protocol-flow-move-field > span {font-size:.72rem;color:var(--app-muted);font-weight:800}
.protocol-flow-move-field select {width:100%;min-height:38px}
.protocol-flow-move-hint {display:block;color:var(--app-muted);font-size:.72rem;line-height:1.4}

#protocolDialog .protocol-sidebar-overview-back {display:none!important}

@media (max-width:760px) {
    #protocolDialog .protocol-s2-type-combo {grid-column:2 / 3}
    #protocolDialog .protocol-s2-type-menu {min-width:210px}
    #protocolDialog .protocol-flow-add-card {grid-template-columns:1fr}
    #protocolDialog .protocol-flow-stage-field,
    #protocolDialog .protocol-page-position-field,
    #protocolDialog .protocol-intermediate-page-field,
    #protocolDialog .protocol-flow-add-button {grid-column:1 / -1}
    #protocolDialog .protocol-flow-add-button {width:100%}
}



/* v0.11.36: the sidebar keeps instructions behind working ? buttons. */
#protocolDialog .protocol-flow-sidebar-title {padding-bottom:7px!important}
#protocolDialog .protocol-flow-sidebar-head,
#protocolDialog .protocol-flow-add-card-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
#protocolDialog .protocol-flow-sidebar-head > strong {margin:0}
#protocolDialog .protocol-flow-inline-help {display:none!important}
#protocolDialog .protocol-flow-help {
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    min-width:26px;
    padding:0;
    border:1px solid color-mix(in srgb,var(--app-primary) 55%,var(--app-panel-border));
    border-radius:999px;
    background:transparent;
    color:var(--app-primary);
    font:inherit;
    font-size:.78rem;
    font-weight:900;
    line-height:1;
    cursor:pointer;
}
#protocolDialog .protocol-flow-help:hover,
#protocolDialog .protocol-flow-help:focus-visible {
    background:color-mix(in srgb,var(--app-primary) 10%,transparent);
    border-color:var(--app-primary);
    outline:none;
}

/* The generic protocol popover was previously unpositioned; make every ?/confirm popover visible and solid. */
.protocol-inline-popover {
    position:fixed;
    z-index:2600;
    width:max-content;
    max-width:min(420px,calc(100vw - 24px));
    box-sizing:border-box;
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--signal-dropdown-border,var(--app-panel-border));
    border-radius:12px;
    background-color:var(--signal-dropdown-bg,var(--app-panel-strong,#20283a));
    color:var(--signal-dropdown-fg,var(--app-text));
    box-shadow:var(--signal-dropdown-shadow,0 16px 36px rgba(15,23,42,.28));
    opacity:1;
    isolation:isolate;
}
.protocol-inline-popover-text {margin:0;max-width:390px;font-size:.78rem;line-height:1.45;color:inherit}
.protocol-inline-popover-actions {display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.protocol-inline-stage-editor label {display:grid;gap:6px;min-width:220px}
.protocol-inline-stage-editor select {width:100%}

/* Direct drag can cross physical-page groups. */
#protocolDialog .protocol-flow-parts.protocol-drop-target,
#protocolDialog .protocol-physical-page.protocol-drop-target {
    border-radius:11px;
    background:color-mix(in srgb,var(--app-primary) 13%,var(--app-panel))!important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--app-primary) 78%,transparent)!important;
}
#protocolDialog .protocol-flow-order-row.protocol-drop-target {
    background:color-mix(in srgb,var(--app-primary) 18%,var(--app-panel))!important;
    box-shadow:inset 3px 0 0 var(--app-primary),0 0 0 1px color-mix(in srgb,var(--app-primary) 55%,transparent)!important;
}
#protocolDialog .protocol-drop-invalid {
    background:color-mix(in srgb,var(--app-danger) 10%,var(--app-panel))!important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--app-danger) 65%,transparent)!important;
}

/* Flow rows only need drag + clickable row + delete. No pencil / ellipsis action slot. */
#protocolDialog .protocol-flow-order-row .protocol-flow-part-actions {gap:0!important}
#protocolDialog .protocol-part-more {display:none!important}


/* ================================================================
   SIGNALREITER v0.11.37 - compact flow UI + inline help.
   Visual dropdown surfaces are owned by dropdowns.css.
   ================================================================ */
#protocolDialog .protocol-flow-order-row {
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px!important;
    cursor:grab;
    touch-action:pan-y;
    user-select:none;
}
#protocolDialog .protocol-flow-order-row > .protocol-flow-drag-handle {display:none!important}
#protocolDialog .protocol-flow-order-row.is-dragging {
    cursor:grabbing!important;
    background:color-mix(in srgb,var(--app-primary) 15%,var(--app-panel))!important;
    box-shadow:inset 2px 0 0 var(--app-primary),0 0 0 1px color-mix(in srgb,var(--app-primary) 42%,transparent)!important;
}
#protocolDialog .protocol-flow-order-row .protocol-flow-part-button {cursor:grab!important}
#protocolDialog .protocol-flow-order-row.is-dragging .protocol-flow-part-button {cursor:grabbing!important}
#protocolDialog .protocol-flow-order-row .protocol-flow-delete {cursor:pointer!important}

#protocolDialog .protocol-flow-inline-help.is-open {display:block!important}
#protocolDialog #protocolFlowHint.is-open,
#protocolDialog #protocolFlowHelpText.is-open {
    position:static!important;
    width:auto!important;
    max-width:none!important;
    box-sizing:border-box;
    margin:7px 0 0!important;
    padding:8px 9px!important;
    border:1px solid color-mix(in srgb,var(--app-primary) 24%,var(--app-panel-border));
    border-radius:8px;
    background:color-mix(in srgb,var(--app-primary) 6%,var(--app-panel));
    color:var(--app-muted)!important;
    font-size:.72rem!important;
    line-height:1.4!important;
}
#protocolDialog #protocolFlowHelpText {
    grid-column:1 / -1!important;
    margin-top:0!important;
}
#protocolDialog .protocol-flow-help[aria-expanded="true"] {
    background:color-mix(in srgb,var(--app-primary) 16%,var(--app-panel));
    color:var(--app-primary);
    border-color:var(--app-primary);
}

/* Searchable S2 type picker: geometry only. Colors/background/border come from dropdowns.css. */
#protocolDialog .protocol-s2-type-menu.signal-dropdown-menu {
    opacity:1!important;
    isolation:isolate!important;
}

/* v0.11.38 – transactional drawing/annotation editor -----------------------
   The page autosave is intentionally not styled/changed here. These rules
   only support the local drawing editor and its inline text placement. */
.s1-canvas-wrap {
    position: relative;
}

.s1-editor-toolbar .s1-mini-tool:disabled {
    opacity: .38;
    cursor: default;
    filter: none;
}

.canvas-inline-text-editor {
    position: absolute;
    z-index: 8;
    display: grid;
    grid-template-columns: 28px minmax(150px, 240px) 32px;
    gap: 5px;
    align-items: stretch;
    min-width: 215px;
    max-width: min(360px, calc(100% - 18px));
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 60%, var(--app-panel-border));
    border-radius: 9px;
    background: var(--app-panel, #151b28);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

.canvas-inline-text-input {
    min-width: 0;
    min-height: 42px;
    resize: both;
    border: 1px solid var(--app-panel-border);
    border-radius: 7px;
    padding: 7px 8px;
    background: var(--app-bg, #0d1320);
    color: var(--app-text, #f5f7fb);
    font: inherit;
    line-height: 1.3;
}

.canvas-inline-text-drag,
.canvas-inline-text-ok {
    border: 1px solid var(--app-panel-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--app-primary) 12%, var(--app-panel));
    color: var(--app-text);
    font-weight: 800;
    cursor: pointer;
}

.canvas-inline-text-drag {
    cursor: move;
    touch-action: none;
}

.canvas-inline-text-ok:hover,
.canvas-inline-text-ok:focus-visible,
.canvas-inline-text-drag:hover,
.canvas-inline-text-drag:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 72%, var(--app-panel-border));
    background: color-mix(in srgb, var(--app-primary) 20%, var(--app-panel));
}

.s1-drawing-load-error {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: min(88%, 420px);
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #eab308 55%, var(--app-panel-border));
    border-radius: 10px;
    background: var(--app-panel, #151b28);
    color: var(--app-text, #f5f7fb);
    text-align: center;
    font-size: .78rem;
    line-height: 1.4;
    pointer-events: none;
}

@media (max-width: 620px) {
    .canvas-inline-text-editor {
        grid-template-columns: 28px minmax(120px, 1fr) 32px;
        max-width: calc(100% - 12px);
    }
}