/* Reset and base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f8f9fa;
    color: #333;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Typography */
h1 {
    color: #2c3e50;
    margin-bottom: 12px;
    font-size: 2.2em;
    font-weight: 600;
}

/* Main menu (#145): Main/About/Help/Settings. About/Help/Settings open dialogs;
   Main is an escape hatch back to the tool (closes any open dialog and refocuses
   main content), a no-op when you're already there. */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.site-nav button {
    padding: 8px 16px;
    border: 2px solid #1e6fa4;
    border-radius: 6px;
    background: white;
    color: #1e6fa4;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    min-height: 40px;
}

.site-nav button:hover,
.site-nav button:focus {
    background: #1e6fa4;
    color: white;
}

h2 {
    margin-top: 0;
    color: #34495e;
    font-size: 1.3em;
    font-weight: 500;
    border-bottom: 2px solid #1e6fa4;
    padding-bottom: 8px;
}

h3 {
    color: #34495e;
    font-weight: 500;
}

/* Section styling */
.section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    background-color: #fafbfc;
    transition: border-color 0.3s ease;
}

.section:hover {
    border-color: #1e6fa4;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Help text styling – #596871 on #fafbfc = 5.0:1 (AA pass) */
.help-text {
    font-size: 0.9em;
    color: #596871;
    margin-top: 8px;
    font-style: italic;
}

/* Slider styling – WCAG 2.5.8: thumb >=44px touch target */
#slice-depth-slider,
#zoom-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #ddd;
    margin: 15px 0;
    cursor: pointer;
}


#slice-depth-slider::-webkit-slider-thumb,
#zoom-slider::-webkit-slider-thumb {
    appearance: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1e6fa4;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


#slice-depth-slider::-moz-range-thumb,
#zoom-slider::-moz-range-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1e6fa4;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Slice percentage display */
#slice-percentage {
    font-weight: bold;
    color: #1a5e91;
    font-size: 1.1em;
}

/* Button styling */
button {
    background: #1e6fa4;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 5px;
    min-width: 160px;
}

button:hover {
    background: #1a5e91;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

button:active {
    transform: translateY(0);
}

/* Toggle button – #6c7a7d on white = 4.6:1 (AA pass) */
#render-mode-toggle {
    background: #6c7a7d;
}

#render-mode-toggle[aria-pressed="true"] {
    background: #1e8449;
}

#render-mode-toggle:hover {
    background: #566062;
}

#render-mode-toggle[aria-pressed="true"]:hover {
    background: #196f3d;
}

/* Button group layout */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

/* Keyboard shortcuts list styling */
.shortcuts-list {
    list-style-type: none;
    padding: 0;
    margin: 15px 0;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
}

.shortcuts-list li {
    margin-bottom: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #e9ecef;
}

.shortcuts-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.shortcuts-list kbd {
    display: inline-block;
    color: #495057;
    background: #e9ecef;
    border: 1px solid #adb5bd;
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 1px 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
    min-width: 1.6em;
    text-align: center;
    margin-right: 8px;
    box-shadow: none;
}

/* Label styling */
label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* Checkbox styling – WCAG 2.5.8: >=44px touch target */
input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    cursor: pointer;
    vertical-align: middle;
}

/* Zoom stepper: compact native number input + explicit zoom buttons */
#zoom-input {
    width: 8ch;
    max-width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #c7d2dc;
    border-radius: 6px;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.zoom-stepper-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

#zoom-out-btn,
#zoom-in-btn {
    min-width: 110px;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
}

.zoom-reset-row {
    margin-top: 10px;
}

@media (max-width: 640px) {
    .zoom-stepper-row {
        display: flex;
        width: 100%;
    }

    #zoom-out-btn,
    #zoom-in-btn {
        flex: 1 1 140px;
    }
}


.checkbox-label {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
}


.checkbox-label:hover {
    color: #1a5e91;
}

/* Upload model UI */
#upload-model-label {
    display: inline-block;
    padding: 8px 16px;
    background: #1e6fa4;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    min-height: 44px;
    line-height: 28px;
}
#upload-model-label:hover {
    background: #1a5e91;
}
#upload-model-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}
#upload-model-status {
    margin-top: 8px;
    font-size: 0.9em;
    min-height: 1.4em;
}

/* Remove uploaded model — ghost/destructive style so it reads as secondary */
#delete-model-btn {
    background: transparent;
    color: #b91c1c;
    border: 1.5px solid #b91c1c;
    min-width: 0;
    font-size: 0.9em;
    padding: 8px 14px;
    margin-top: 8px;
    display: block;
}
#delete-model-btn:hover {
    background: #fee2e2;
    transform: none;
    box-shadow: none;
}
#delete-model-btn:focus-visible {
    outline: 3px solid #b91c1c;
    outline-offset: 2px;
}

/* Radio button touch targets – WCAG 2.5.8 */
input[type="radio"] {
    width: 24px;
    height: 24px;
    margin-right: 6px;
    cursor: pointer;
    vertical-align: middle;
}

fieldset label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 8px;
    cursor: pointer;
}

.top-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

/* Info display styling */
#view-info div {
    margin-bottom: 10px;
    padding: 8px 0;
}

#view-info strong {
    color: #2c3e50;
    margin-right: 8px;
}

#clear-announcements-btn {
    min-width: auto;
    padding: 8px 12px;
    margin: 0;
    font-size: 0.9em;
}

#current-view, #current-axis {
    color: #1a5e91;
    font-weight: 500;
}

/* ---- Live status bar at top of page ---- */
#status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    background: #2c3e50;
    color: #ecf0f1;
    padding: 10px 18px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 1.05em;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
#status-bar .status-item {
    white-space: nowrap;
}
/* Status bar labels: #b0bec5 on #2c3e50 = 5.3:1 (AA pass) */
#status-bar .status-label {
    color: #b0bec5;
    font-weight: 400;
    margin-right: 4px;
}
#status-bar .status-value {
    font-weight: 600;
    color: #fff;
}
/* Highlight: #ffe082 on #2c3e50 = 10.2:1 (AAA pass) */
#status-bar .status-value.highlight {
    color: #ffe082;
}
/* Separator: #90a4ae on #2c3e50 = 4.5:1 (AA pass) */
#status-bar .status-separator {
    color: #90a4ae;
    user-select: none;
}

/* Focus indicators – visible only for keyboard (focus-visible) per WCAG 2.4.7 / 2.4.11 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #e74c3c;
    outline-offset: 2px;
}

button:focus-visible {
    outline-color: #f39c12;
}

/* Fallback for older browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
    button:focus,
    input:focus,
    select:focus,
    [tabindex]:focus {
        outline: 3px solid #e74c3c;
        outline-offset: 2px;
    }
    button:focus {
        outline-color: #f39c12;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .section {
        border: 2px solid #000;
    }


    button {
        border: 2px solid #000;
    }

    #status-bar {
        border: 2px solid #fff;
    }

    #status-bar .status-label {
        color: #fff;
    }

    #status-bar .status-value.highlight {
        color: #ffff00;
    }
}

/* Forced colors (Windows High Contrast) support */
@media (forced-colors: active) {
    #status-bar {
        border: 2px solid ButtonText;
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid Highlight;
    }
}

/* Reduced motion support – WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    button:hover {
        transform: none;
    }
}

#tactile-display-img {
    width: 100%;
    height: auto;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    image-rendering: pixelated;
    background: #f0f0f0;
    display: block;
    margin-top: 10px;
}

#high-fidelity-preview-img {
    width: 100%;
    height: auto;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    image-rendering: auto;
    background: #fff;
    display: block;
    margin-top: 10px;
}

.side-by-side-axis-labels {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 0.9em;
    color: #2c3e50;
}

.side-by-side-axis-label {
    text-align: left;
    font-weight: 600;
}

/* Two-column layout */
.layout {
    display: flex;
    gap: 0;
    align-items: stretch;
    min-height: 400px;
}

.left-col {
    flex: 0 0 auto;
    width: 60%;
    min-width: 280px;
    overflow-y: auto;
}

.col-divider {
    flex: 0 0 6px;
    background: #e1e8ed;
    cursor: col-resize;
    border-radius: 3px;
    margin: 0 6px;
    transition: background 0.2s;
}

.col-divider:hover,
.col-divider.dragging {
    background: #1e6fa4;
}

.right-col {
    flex: 1 1 auto;
    min-width: 200px;
    overflow-y: auto;
}

.debug-panel {
    margin-top: 24px;
    border: 1px solid #d7e2ea;
    border-radius: 8px;
    background: #f3f7fb;
    padding: 14px;
}

.debug-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.debug-panel-header h2 {
    margin: 0;
}

.debug-panel-toggle {
    background: #ffffff;
    border: 1px solid #b6c8d6;
    border-radius: 6px;
    padding: 6px 10px;
    color: #1f3343;
    cursor: pointer;
    font-size: 0.9em;
}

.debug-panel-toggle:hover,
.debug-panel-toggle:focus {
    border-color: #2f6f97;
    outline: none;
}

.debug-panel-content[hidden] {
    display: none !important;
}

.debug-stage-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.debug-stage {
    border: 1px solid #c8d5df;
    border-left-width: 6px;
    border-radius: 6px;
    padding: 8px;
    background: #fff;
}

.debug-stage.ok {
    border-left-color: #2e7d32;
}

.debug-stage.skipped {
    border-left-color: #6c757d;
}

.debug-stage.error {
    border-left-color: #b3261e;
}

.debug-stage-title {
    font-weight: 700;
    margin-bottom: 4px;
    color: #243746;
}

.debug-stage-status {
    font-size: 0.85em;
    color: #4f6473;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.debug-stage-explanation {
    font-size: 0.82em;
    line-height: 1.35;
    color: #2f4453;
    background: #eef4f8;
    border: 1px solid #d7e2ea;
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 6px;
}

.debug-stage-explanation strong {
    color: #1e3444;
}

.debug-stage pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8em;
    line-height: 1.35;
    background: #f6fafc;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    padding: 6px;
}

.debug-stage-image {
    width: 100%;
    height: auto;
    margin-bottom: 6px;
    border: 1px solid #d8e2e9;
    border-radius: 4px;
    background: #fff;
    image-rendering: pixelated;
}

.debug-stage-image-label {
    font-size: 0.78em;
    color: #4a6070;
    margin-bottom: 4px;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    .left-col, .right-col {
        width: 100% !important;
    }
    .col-divider {
        display: none;
    }
    .container {
        padding: 20px;
        margin: 10px;
    }
}

/* Settings dialog checkbox list — stacked, unlike the inline .button-group default. */
.settings-checkbox-group {
    flex-direction: column;
    align-items: flex-start;
}

/* Page footer (#145): GitHub/bug-report links, then a "Funded by" row. #767676 on
   white = 4.5:1 (AA pass) for the muted link color; full-strength #333 on hover
   matches focus-visible feedback elsewhere on the page. */
.site-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e1e8ed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.9em;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #767676;
    text-decoration: none;
}

.footer-link:hover,
.footer-link:focus {
    color: #333;
    text-decoration: underline;
}

.footer-sep {
    color: #c7d2dc;
}

.footer-funders-label {
    color: #767676;
}

.footer-logo {
    width: 16px;
    height: 16px;
}

/* Shared chrome for the small read-only dialogs opened from the Main menu:
   Keyboard Shortcuts (#146), About and Settings (#145). */
.info-dialog {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 560px;
    width: calc(100% - 40px);
    max-height: calc(100% - 80px);
    overflow-y: auto;
    padding: 32px;
    color: #333;
}

.info-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.info-dialog h2 {
    margin: 0 0 8px 0;
    font-size: 1.4em;
    color: #2c3e50;
}

.info-dialog p {
    line-height: 1.6;
}

#shortcuts-dialog h3 {
    margin: 20px 0 8px 0;
    font-size: 1.05em;
    color: #2c3e50;
}

#shortcuts-dialog h3:first-of-type {
    margin-top: 16px;
}

#shortcuts-dialog .shortcuts-list {
    margin: 0;
}

/* Session consent dialog */
#session-consent-dialog {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    width: calc(100% - 40px);
    padding: 32px;
    font-family: inherit;
    color: #333;
}

#session-consent-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

#session-consent-dialog h2 {
    margin: 0 0 16px 0;
    font-size: 1.4em;
    color: #2c3e50;
}

#session-consent-dialog p {
    margin: 0 0 24px 0;
    line-height: 1.6;
    font-size: 0.95em;
    color: #555;
}

.consent-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.consent-field label {
    font-weight: 600;
    font-size: 0.9em;
    color: #2c3e50;
}

.consent-field input[type="email"] {
    padding: 10px 12px;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    font-family: inherit;
    transition: border-color 0.2s;
}

.consent-field input[type="email"]:focus {
    outline: none;
    border-color: #1e6fa4;
    box-shadow: 0 0 0 3px rgba(30, 111, 164, 0.25);
}

/* #596871 on white = 5.0:1 (AA pass) */
.consent-hint {
    font-size: 0.82em;
    color: #596871;
}

/* Validation / submission error for the consent form. #b71c1c on white ≈ 6.6:1 (AA pass) */
.consent-error {
    font-size: 0.82em;
    font-weight: 600;
    color: #b71c1c;
}

.consent-error[hidden] {
    display: none;
}

/*
 * After the consent dialog closes we move focus to <main> (tabindex=-1) so screen-reader
 * users are not stranded at the top of the document. It is a managed focus target, not a
 * keyboard-tabbable control, so suppress the full-width outline that would otherwise show.
 */
#main-content:focus {
    outline: none;
}

/*
 * Each info dialog (Shortcuts, About, Settings) focuses its own heading on open
 * (tabindex=-1), per the ARIA APG dialog pattern's guidance for read-only content:
 * land on a static element at the top of the dialog rather than the first
 * interactive control, so reading forward from there covers the whole dialog
 * instead of starting at the end.
 */
#shortcuts-heading:focus,
#about-heading:focus,
#settings-heading:focus {
    outline: none;
}

.consent-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Both buttons intentionally equal size and weight — neither should appear mandatory */
/* #1e6fa4 on white = 5.0:1; white on #1e6fa4 = 5.0:1 (AA pass) */
.consent-actions button {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    border: 2px solid #1e6fa4;
    border-radius: 8px;
    font-size: 0.95em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#consent-accept {
    background: #1e6fa4;
    color: #fff;
}

#consent-accept:hover,
#consent-accept:focus {
    background: #1a5e91;
    outline: 3px solid #1a5e91;
    outline-offset: 2px;
}

#consent-decline {
    background: #fff;
    color: #1e6fa4;
}

#consent-decline:hover,
#consent-decline:focus {
    background: #eaf4fb;
    outline: 3px solid #1e6fa4;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Simplified workshop viewer (/workshop or ?ui=simple).
   Show only the core control sections: Orientation, Depth, Rendering Mode, Zoom,
   Monarch and DotPad. Everything else in the left column is hidden;
   the right-column tactile preview (not a .section) stays visible.
   The output-device chooser is deliberately absent: the display that is
   connected already receives the model (DotPad sends on every render while
   connected, and a connected Monarch is fed by the default routing), so the
   choice is redundant here and only adds a step that can be set wrong.
   --------------------------------------------------------------------------- */
body.simple-ui .section { display: none; }
body.simple-ui section[aria-labelledby="orientation-heading"],
body.simple-ui section[aria-labelledby="slice-heading"],
body.simple-ui section[aria-labelledby="render-heading"],
body.simple-ui section[aria-labelledby="zoom-select-heading"],
body.simple-ui section[aria-labelledby="monarch-hid-heading"],
body.simple-ui section[aria-labelledby="dotpad-heading"] { display: block; }
/* Within Rendering Mode, hide the layout (view-mode) radios so only the
   render-mode choice (Filled/Outline/Cut/Crease) remains. */
body.simple-ui #view-mode-block,
body.simple-ui #view-mode-help { display: none; }
/* Keep the tactile display preview (what the braille device shows) visible for
   sighted facilitators; it stays aria-hidden so screen readers still ignore it. */
body.simple-ui #tactile-preview-section { display: block; }

/* ---------------------------------------------------------------------------
   Workshop word-entry page (workshop-entry.html).
   --------------------------------------------------------------------------- */
.workshop-entry .field { margin: 12px 0; }
.workshop-entry .field label { display: block; font-weight: 600; margin-bottom: 4px; }
.workshop-entry .field input {
    font-size: 1.1rem;
    padding: 10px 12px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    border: 2px solid #1e6fa4;
    border-radius: 6px;
    font-family: inherit;
}
.workshop-notice {
    border: 2px solid #8a1f11;
    color: #8a1f11;
    background: #fdecea;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 6px;
    font-weight: 600;
}
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    left: auto;
    overflow: visible;
    padding: 8px 16px;
    background: #1e6fa4;
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Study mode (/study).

   The participant works in the ordinary viewer, so almost nothing is hidden:
   the interface they were onboarded on has to be the interface they do the
   tasks with, or the study measures the difference between the two.

   Two things do go. The model chooser, because the model is decided by the
   protocol step and a participant browsing to a later task's model would spoil
   it, and the upload control, which has no meaning in a session. Both use
   display:none rather than visibility, so they leave the accessibility tree
   entirely instead of sitting in the tab order as invisible controls.
   --------------------------------------------------------------------------- */
body.study-ui section[aria-labelledby="model-list-heading"] { display: none; }

.study-region {
    border: 2px solid #1e6fa4;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #f4f9fc;
}
.study-region h2 {
    margin-top: 0;
    /* Focus lands here on every step change; without a visible ring a sighted
       facilitator watching over the participant's shoulder cannot tell the step
       advanced. */
    outline-offset: 2px;
}
.study-region .study-progress {
    font-weight: 600;
    margin: 4px 0;
}
.study-region .study-step-text {
    margin: 8px 0;
}

@media (prefers-color-scheme: dark) {
    .study-region {
        background: #12222c;
        border-color: #6cb6e0;
    }
}

/* Windows High Contrast Mode drops the background and border colours above, so
   the region would lose its boundary entirely. */
@media (forced-colors: active) {
    .study-region { border: 2px solid CanvasText; }
}