coursecode 0.1.0

package/lib/stub-player/styles/_interactions-panel.css

@@ -0,0 +1,1038 @@
+        /* =====================================================================
+         * INTERACTIONS PANEL - Shows standalone interaction definitions
+         * Uses same structure as config-panel (floating window style)
+         * ===================================================================== */
+        #stub-player-interactions-panel {
+            position: fixed;
+            top: 48px;
+            right: 16px;
+            width: 620px;
+            max-width: 90vw;
+            max-height: calc(100vh - 64px);
+            background: var(--color-primary);
+            color: var(--color-gray-200);
+            border-radius: 8px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
+            z-index: 999997;
+            display: none;
+            flex-direction: column;
+            font-size: 13px;
+        }
+
+        #stub-player-interactions-panel.visible {
+            display: flex;
+        }
+
+        #stub-player-interactions-panel-header {
+            padding: 12px 16px;
+            background: var(--color-primary-deep);
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--color-primary-panel);
+            flex-shrink: 0;
+        }
+
+        #stub-player-interactions-panel-header h3 {
+            font-size: 14px;
+            font-weight: 600;
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        #stub-player-interactions-panel-header .panel-icon {
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+        }
+
+        #stub-player-interactions-panel-header button {
+            background: none;
+            border: none;
+            color: var(--color-gray-650);
+            cursor: pointer;
+            font-size: 18px;
+            padding: 0;
+        }
+
+        #stub-player-interactions-panel-header button:hover {
+            color: var(--color-white);
+        }
+
+        #stub-player-interactions-tabs {
+            display: flex;
+            background: var(--color-primary-deep);
+            border-bottom: 1px solid var(--color-primary-panel);
+            flex-shrink: 0;
+            gap: 2px;
+            padding: 4px 8px 0;
+        }
+
+        #stub-player-interactions-tabs button {
+            flex: 0 0 auto;
+            padding: 8px 10px;
+            background: none;
+            border: none;
+            color: var(--color-gray-650);
+            cursor: pointer;
+            font-size: 12px;
+            border-bottom: 2px solid transparent;
+            transition: all 0.15s;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            border-radius: 6px 6px 0 0;
+        }
+
+        #stub-player-interactions-tabs button:hover {
+            color: var(--color-gray-400);
+            background: rgba(255, 255, 255, 0.03);
+        }
+
+        #stub-player-interactions-tabs button.active {
+            color: var(--color-warning);
+            border-bottom-color: var(--color-warning);
+            background: rgba(241, 135, 1, 0.08);
+        }
+
+        #stub-player-interactions-tabs .tab-icon {
+            width: 13px;
+            height: 13px;
+            flex-shrink: 0;
+        }
+
+        #stub-player-interactions-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+            max-height: 500px;
+        }
+
+        /* Interactions table styling */
+        .interactions-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 12px;
+        }
+
+        .interactions-table th,
+        .interactions-table td {
+            padding: 8px 10px;
+            text-align: left;
+            border-bottom: 1px solid var(--color-primary-panel);
+        }
+
+        .interactions-table th {
+            background: var(--color-primary-deep);
+            color: var(--color-info-soft);
+            font-weight: 600;
+            font-size: 11px;
+            text-transform: uppercase;
+        }
+
+        .interactions-table td {
+            color: var(--color-gray-200);
+        }
+
+        .interactions-table tr:hover td {
+            background: rgba(255, 255, 255, 0.03);
+        }
+
+        .interaction-id {
+            font-family: 'Consolas', 'Monaco', monospace;
+            color: var(--color-warning);
+        }
+
+        .interaction-type {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 10px;
+            font-weight: 600;
+            text-transform: uppercase;
+            background: rgba(74, 111, 165, 0.2);
+            color: var(--color-info-soft);
+        }
+
+        .interaction-weight {
+            font-size: 10px;
+            color: var(--color-gray-750);
+            margin-left: 8px;
+        }
+
+        .interaction-slide {
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 11px;
+            color: var(--color-gray-600);
+        }
+
+        .interactions-empty,
+        .interactions-loading {
+            text-align: center;
+            padding: 40px 20px;
+            color: var(--color-gray-750);
+        }
+
+        /* Interaction Cards */
+        .interactions-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .interaction-groups {
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+        }
+
+        .interaction-group {
+            border: 1px solid color-mix(in srgb, var(--color-info) 25%, transparent);
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.015);
+            padding: 10px;
+        }
+
+        .assessment-interactions-section {
+            margin-top: 12px;
+            background: var(--color-primary-deep);
+            border-color: color-mix(in srgb, var(--color-info) 24%, transparent);
+        }
+
+        .assessment-interactions-list {
+            margin-top: 2px;
+        }
+
+        .interaction-group-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid color-mix(in srgb, var(--color-info) 22%, transparent);
+        }
+
+        .interaction-group-title-wrap {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            min-width: 0;
+        }
+
+        .interaction-group-title {
+            margin: 0;
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--color-white);
+            font-family: 'Consolas', 'Monaco', monospace;
+        }
+
+        .interaction-group-count {
+            min-width: 20px;
+            height: 18px;
+            border-radius: 999px;
+            font-size: 10px;
+            font-weight: 700;
+            color: var(--color-warning-bright);
+            background: color-mix(in srgb, var(--color-warning) 18%, transparent);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 6px;
+        }
+
+        .group-icon {
+            width: 14px;
+            height: 14px;
+            color: var(--color-info-soft);
+            flex-shrink: 0;
+        }
+
+        /* Keep Questions row icon/title/count vertically aligned in assessment cards. */
+        #stub-player-interactions-panel .interaction-group-title-wrap {
+            align-items: center;
+        }
+
+        #stub-player-interactions-panel .interaction-group-title {
+            margin: 0;
+            line-height: 1.1;
+            display: inline-flex;
+            align-items: center;
+        }
+
+        #stub-player-interactions-panel .group-icon {
+            display: block;
+            align-self: center;
+        }
+
+        #stub-player-interactions-panel .interaction-group-count {
+            align-self: center;
+            line-height: 1;
+        }
+
+        .interaction-card {
+            background: var(--color-primary-deep);
+            border-radius: 10px;
+            padding: 12px 14px;
+            border: 1px solid var(--color-primary-panel);
+            transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+        }
+
+        .interaction-card:hover {
+            border-color: color-mix(in srgb, var(--color-info) 45%, transparent);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
+            transform: translateY(-1px);
+        }
+
+        .interaction-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 6px;
+        }
+
+        .interaction-header-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .interaction-header-right {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            flex-shrink: 0;
+        }
+
+        .interaction-nav-btn {
+            background: rgba(74, 111, 165, 0.2);
+            border: 1px solid var(--color-primary-panel);
+            color: var(--color-info-soft);
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 11px;
+            cursor: pointer;
+            transition: all 0.15s;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .interaction-nav-btn:hover {
+            background: rgba(241, 135, 1, 0.15);
+            border-color: var(--color-warning);
+            color: var(--color-warning);
+        }
+
+        .interaction-nav-btn.icon-btn,
+        .interaction-edit-btn.icon-btn {
+            width: 28px;
+            height: 28px;
+            padding: 0;
+            justify-content: center;
+        }
+
+        .interaction-nav-btn.with-label {
+            padding: 5px 10px;
+        }
+
+        .interaction-label {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--color-gray-200);
+            margin-bottom: 4px;
+        }
+
+        .interaction-prompt {
+            font-size: 12px;
+            color: var(--color-gray-600);
+            margin-bottom: 8px;
+            padding: 8px 10px;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 4px;
+            border-left: none;
+        }
+
+        .interaction-detail,
+        .question-detail {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+            margin-bottom: 6px;
+        }
+
+        .detail-label {
+            color: var(--color-gray-750);
+            font-weight: 500;
+        }
+
+        .detail-value {
+            color: var(--color-success);
+            font-family: 'Consolas', 'Monaco', monospace;
+        }
+
+        .interaction-choices,
+        .interaction-pairs,
+        .question-choices {
+            font-size: 11px;
+            margin-top: 8px;
+        }
+
+        .interaction-choices ul,
+        .interaction-pairs ul,
+        .question-choices ul {
+            margin: 4px 0 0 16px;
+            padding: 0;
+        }
+
+        .interaction-choices li,
+        .interaction-pairs li,
+        .question-choices li {
+            margin: 4px 0;
+        }
+
+        /* Assessment sub-tabs (within Assessments tab) */
+        .assessment-sub-tabs {
+            display: flex;
+            gap: 4px;
+            margin-bottom: 12px;
+            flex-wrap: wrap;
+        }
+
+        .assessment-sub-tabs button {
+            padding: 6px 12px;
+            background: var(--color-primary-panel);
+            border: 1px solid var(--color-primary-panel);
+            border-radius: 4px;
+            color: var(--color-info-soft);
+            font-size: 11px;
+            cursor: pointer;
+            transition: all 0.15s;
+        }
+
+        .assessment-sub-tabs button:hover {
+            background: var(--color-primary-panel);
+            color: var(--color-info-muted);
+        }
+
+        .assessment-sub-tabs button.active {
+            background: var(--color-warning);
+            border-color: var(--color-warning);
+            color: var(--color-black);
+            font-weight: 600;
+        }
+
+        /* Keep assessment surfaces consistent with panel cards. */
+        #stub-player-interactions-panel .assessment-info {
+            background: transparent;
+            border: none;
+            padding: 0;
+            margin-bottom: 12px;
+        }
+
+        #stub-player-interactions-panel .assessment-info .config-section {
+            margin-top: 10px;
+            margin-bottom: 12px;
+            padding: 10px 12px;
+            border: 1px solid color-mix(in srgb, var(--color-info) 24%, transparent);
+            border-radius: 10px;
+            background: var(--color-primary-deep);
+        }
+
+        #stub-player-interactions-panel .assessment-info .config-section-header {
+            color: var(--color-gray-200);
+            border-bottom-color: color-mix(in srgb, var(--color-info) 20%, transparent);
+            margin-bottom: 10px;
+        }
+
+        #stub-player-interactions-panel .assessment-info .config-row {
+            border-bottom-color: color-mix(in srgb, var(--color-info) 16%, transparent);
+        }
+
+        #stub-player-interactions-panel .assessment-info input[type="number"] {
+            appearance: textfield;
+            -moz-appearance: textfield;
+            text-align: right;
+        }
+
+        #stub-player-interactions-panel .assessment-info input[type="number"]::-webkit-outer-spin-button,
+        #stub-player-interactions-panel .assessment-info input[type="number"]::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        #stub-player-interactions-panel .assessment-config-input {
+            margin-left: auto;
+            background: var(--color-primary);
+            border-color: color-mix(in srgb, var(--color-info) 28%, transparent);
+        }
+
+        #stub-player-interactions-panel .assessment-config-score-input {
+            width: 58px;
+            max-width: 58px;
+        }
+
+        #stub-player-interactions-panel .assessment-config-attempts-input {
+            width: 88px;
+            max-width: 88px;
+        }
+
+        #stub-player-interactions-panel .assessment-config-remedial-input {
+            width: 180px;
+            max-width: 180px;
+            text-align: left;
+        }
+
+        /* Assessment info (shared with Assessments tab and This Slide tab) */
+        #stub-player-interactions-panel .assessment-info > h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: var(--color-white);
+        }
+
+        #stub-player-interactions-panel h4.interaction-group-title {
+            margin: 0;
+            line-height: 1;
+        }
+
+        .assessment-meta {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 16px;
+        }
+
+        .config-hint-inline {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            margin-left: 4px;
+        }
+
+        .meta-item {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            font-family: 'Consolas', 'Monaco', monospace;
+        }
+
+        /* Question card (used in both tabs) */
+        .question-card {
+            background: var(--color-primary-deep);
+            border: 1px solid var(--color-primary-panel);
+            border-radius: 6px;
+            padding: 12px;
+            margin-bottom: 10px;
+        }
+
+        .question-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 8px;
+        }
+
+        .assessment-questions-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        /* Assessment Question Cards */
+        .assessment-questions-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            margin-top: 8px;
+        }
+
+        .question-card {
+            background: var(--color-primary-deep);
+            border-radius: 6px;
+            padding: 10px 12px;
+            border: 1px solid var(--color-primary-panel);
+        }
+
+        .question-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 6px;
+            flex-wrap: wrap;
+        }
+
+        .question-type {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 10px;
+            font-weight: 600;
+            text-transform: uppercase;
+            background: rgba(34, 197, 94, 0.15);
+            color: var(--color-success-soft);
+        }
+
+        .question-id {
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 11px;
+            color: var(--color-warning);
+        }
+
+        .question-weight {
+            font-size: 10px;
+            color: var(--color-gray-750);
+            margin-left: auto;
+        }
+
+        .question-prompt {
+            font-size: 12px;
+            color: var(--color-gray-410);
+            margin: 6px 0;
+        }
+
+        /* Edit button in card header */
+        .interaction-edit-btn {
+            background: none;
+            border: 1px solid var(--color-primary-panel);
+            color: var(--color-info-soft);
+            padding: 4px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: all 0.15s;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .interaction-edit-btn:hover {
+            background: rgba(241, 135, 1, 0.15);
+            border-color: var(--color-warning);
+            color: var(--color-warning);
+        }
+
+        .interaction-card.editing {
+            border-color: var(--color-warning);
+        }
+
+        .action-icon {
+            width: 13px;
+            height: 13px;
+            flex-shrink: 0;
+        }
+
+        /* Edit form styles */
+        .edit-form {
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid var(--color-primary-panel);
+        }
+
+        .edit-field {
+            margin-bottom: 10px;
+            margin-top: 16px;
+        }
+
+        .edit-field:first-child {
+            margin-top: 0;
+        }
+
+        .edit-field label {
+            display: block;
+            font-size: 11px;
+            color: var(--color-gray-750);
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+
+        .mode-badge {
+            display: inline-block;
+            font-size: 9px;
+            font-weight: 600;
+            text-transform: uppercase;
+            background: var(--color-primary-panel);
+            color: var(--color-info);
+            padding: 2px 6px;
+            border-radius: 3px;
+            margin-left: 6px;
+            vertical-align: middle;
+        }
+
+
+        .edit-field input[type="text"],
+        .edit-field input[type="number"],
+        .edit-field textarea,
+        .edit-field select {
+            width: 100%;
+            padding: 8px 10px;
+            font-size: 12px;
+            background: var(--color-gray-900);
+            border: 1px solid var(--color-primary-panel);
+            border-radius: 4px;
+            color: var(--color-gray-200);
+            box-sizing: border-box;
+        }
+
+
+        .edit-field input[type="text"]:focus,
+        .edit-field input[type="number"]:focus,
+        .edit-field textarea:focus,
+        .edit-field select:focus {
+            outline: none;
+            border-color: var(--color-warning);
+        }
+
+        .edit-field textarea {
+            resize: vertical;
+            min-height: 60px;
+        }
+
+        .edit-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+        }
+
+        .edit-save-btn {
+            background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-bright) 100%);
+            border: none;
+            color: var(--color-black);
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            cursor: pointer;
+        }
+
+        .edit-save-btn:hover {
+            filter: brightness(1.1);
+        }
+
+        .edit-cancel-btn {
+            background: none;
+            border: 1px solid var(--color-primary-panel);
+            color: var(--color-gray-600);
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+        }
+
+        .edit-cancel-btn:hover {
+            border-color: var(--color-info);
+            color: var(--color-gray-200);
+        }
+
+        /* Choices editing */
+        .edit-choices {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .edit-choice {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .edit-choice input[type="radio"] {
+            accent-color: var(--color-warning);
+            flex-shrink: 0;
+        }
+
+        .choice-value {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            min-width: 24px;
+            text-align: right;
+            flex-shrink: 0;
+        }
+
+        .choice-text {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* Override the global width: 100% rule for array editor inputs */
+        .edit-choices input[type="text"],
+        .edit-pairs input[type="text"],
+        .edit-items input[type="text"],
+        .edit-zones input[type="text"],
+        .edit-zones input[type="number"],
+        .edit-scale input[type="text"],
+        .edit-subquestions input[type="text"] {
+            width: auto;
+        }
+
+        /* Pairs editing (matching questions) */
+        .edit-pairs {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .edit-pair {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .edit-pair input {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .pair-arrow {
+            color: var(--color-warning);
+            font-size: 16px;
+            font-weight: bold;
+            flex-shrink: 0;
+        }
+
+        /* Items editing (drag-drop, sequencing) */
+        .edit-items {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .edit-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .item-index {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            min-width: 24px;
+            flex-shrink: 0;
+        }
+
+        .edit-item input {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* Zones editing (drag-drop questions) */
+        .edit-zones {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .edit-zone {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .zone-label {
+            flex: 0 0 140px;
+        }
+
+        .zone-accepts {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .zone-max {
+            width: 60px;
+            flex-shrink: 0;
+            text-align: center;
+        }
+
+        .zone-headers {
+            font-size: 10px;
+            color: var(--color-gray-750);
+            font-weight: 500;
+            text-transform: uppercase;
+            padding-bottom: 4px;
+            border-bottom: 1px solid var(--color-primary-panel);
+            margin-bottom: 4px;
+        }
+
+        .zone-headers span {
+            padding-left: 10px;
+        }
+
+        /* Items editing (drag-drop) */
+        .edit-items {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .edit-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .item-index {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            width: 24px;
+            text-align: right;
+            flex-shrink: 0;
+        }
+
+        .item-id {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .item-label {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .item-headers {
+            font-size: 10px;
+            color: var(--color-gray-750);
+            font-weight: 500;
+            text-transform: uppercase;
+            padding-bottom: 4px;
+            border-bottom: 1px solid var(--color-primary-panel);
+            margin-bottom: 4px;
+        }
+
+        .item-headers span {
+            padding-left: 10px;
+        }
+
+        /* Scale editing (Likert) */
+        .edit-scale {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .edit-scale-point {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .scale-value {
+            width: 50px;
+            flex-shrink: 0;
+        }
+
+        .scale-label {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* Sub-questions editing (Likert multi-statement) */
+        .edit-subquestions {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .edit-subquestion {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .subq-index {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            min-width: 24px;
+            flex-shrink: 0;
+        }
+
+        .edit-subquestion input {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* Template field syntax helper */
+        .template-syntax-help {
+            font-size: 10px;
+            color: var(--color-gray-750);
+            margin-top: 4px;
+            font-style: italic;
+        }
+
+        .template-syntax-help code {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 2px 5px;
+            border-radius: 3px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            color: var(--color-warning);
+        }
+
+        /* Blanks editing (fill-in) */
+        .edit-blanks {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .edit-blank {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .blank-name {
+            flex: 0 0 100px;
+        }
+
+        .blank-name code {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            color: var(--color-warning);
+            font-size: 11px;
+        }
+
+        .blank-correct {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .blank-placeholder {
+            flex: 0 0 140px;
+        }
+
+        .blank-headers {
+            font-size: 10px;
+            color: var(--color-gray-750);
+            font-weight: 500;
+            text-transform: uppercase;
+            padding-bottom: 4px;
+            border-bottom: 1px solid var(--color-primary-panel);
+            margin-bottom: 4px;
+        }
+
+        .blank-headers span {
+            padding-left: 10px;
+        }
+
+        /* Range editing (numeric) */
+        .edit-range {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .range-min,
+        .range-max {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .range-separator {
+            color: var(--color-gray-750);
+            font-size: 12px;
+        }