/*
 * Saanraan survey public module layer.
 * Owns this module public service screen styles.
 */

.sr-survey-author-meta,
.survey-comment-author {
    align-items: center;
    color: var(--sr-text, var(--text-strong, #242424));
    display: inline-flex;
    gap: 8px;
    min-width: 0;
}

.sr-survey-author-meta {
    font-size: var(--type-meta-size, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--type-meta-line-height, 1.4);
}

.sr-survey-post-author-avatar,
.survey-comment-author-avatar {
    background: var(--sr-surface-muted, var(--color-default-100, #f5f7fb));
    border: 1px solid var(--sr-border-soft, var(--sr-border, #d8dde6));
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.sr-survey-page .survey-page-main {
    padding: clamp(28px, 5vw, 72px) 16px 78px;
}

.sr-survey-page .survey-page-section {
    width: min(1360px, 100%);
    margin: 0 auto;
}

.sr-survey-page .survey-page-container {
    display: grid;
    gap: 24px;
}

.sr-survey-page .survey-page-main h1 {
    margin: 0;
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    font-family: var(--font-secondary);
    font-size: clamp(var(--type-page-title-size), 4vw, var(--type-page-title-fluid-max-size));
    line-height: var(--type-page-title-line-height);
    letter-spacing: 0;
}

.sr-survey-page .survey-page-main h2 {
    margin: 0 0 12px;
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    font-family: var(--font-secondary);
    font-size: var(--type-section-title-size);
    line-height: var(--type-section-title-line-height);
    letter-spacing: 0;
}

.sr-survey-page .survey-page-main p {
    margin: 0;
    color: var(--sr-muted, var(--text-muted, var(--color-default-600)));
    line-height: 1.7;
}

.sr-survey-home-header {
    display: grid;
    gap: 8px;
}

.sr-survey-home-empty {
    padding: 20px 0;
}

.sr-survey-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 10px 0 72px;
}

.sr-survey-card {
    height: 100%;
    min-width: 0;
    min-height: 100%;
}

.sr-survey-card-media {
    display: block;
    min-width: 0;
    text-decoration: none;
}

.sr-survey-card-image,
.sr-survey-card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1.72 / 1;
    height: auto;
    object-fit: cover;
}

.sr-survey-card-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 16px 16px 14px;
}

.sr-survey-card-meta {
    color: var(--sr-muted, #47505c);
    font-size: var(--type-meta-size);
    line-height: 1.3;
    margin: 0 0 10px;
}

.sr-survey-page .sr-survey-card-copy h2 {
    margin: 0;
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    font-size: var(--type-body-size);
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.28;
}

.sr-survey-page .sr-survey-card-copy h2 a {
    color: inherit;
    display: inline;
    text-decoration: none;
}

.sr-survey-card-summary {
    color: var(--sr-muted, #47505c);
    font-size: var(--type-small-size);
    line-height: 1.5;
    margin: 14px 0 0;
    overflow-wrap: anywhere;
}

.sr-survey-card-footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
}

.sr-survey-card-footer span {
    border-radius: var(--radius);
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    display: inline-flex;
    font-size: var(--type-meta-size);
    line-height: 1;
    max-width: 65%;
    overflow: hidden;
    padding: 8px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-survey-card-footer time {
    color: var(--sr-muted, #47505c);
    flex: 0 0 auto;
    font-size: var(--type-meta-size);
    line-height: 1;
}

.sr-survey-form {
    display: grid;
    gap: 18px;
}

.sr-survey-question {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 0;
    border-radius: var(--radius);
}

.sr-survey-question legend {
    padding: 0;
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    font-weight: 800;
    line-height: 1.45;
}

.sr-survey-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--sr-border, var(--color-default-300));
    border-radius: var(--radius);
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    cursor: pointer;
    transition: background-color var(--default-transition-duration) var(--default-transition-timing-function),
        border-color var(--default-transition-duration) var(--default-transition-timing-function);
}

.sr-survey-choice input {
    margin-top: 3px;
}

.sr-survey-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
}

.sr-survey-other-input {
    display: block;
    margin-top: 8px;
    max-width: 28rem;
    width: 100%;
}

.sr-survey-info,
.sr-survey-result {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: var(--radius);
}

.sr-survey-info {
    border: 0;
    background: color-mix(in oklab, var(--color-info) 10%, transparent);
}

.sr-survey-preview-notice {
    margin: 16px 0;
}

.sr-survey-preview-notice p {
    margin: 0;
}

.sr-survey-result {
    background: #fff;
    border: 0;
}

.survey-comments-panel {
    --survey-comments-padding-inline: clamp(20px, 2.5vw, 28px);
    --survey-comment-divider: color-mix(in oklab, var(--sr-border-soft, var(--color-default-300)) 84%, var(--sr-border, var(--color-default-400, #c9d1dd)));
    background: var(--sr-surface, var(--color-card, #fff));
    border: 1px solid var(--sr-border, var(--color-default-300, #d8dde6));
    border-radius: calc(var(--radius, 8px) + 4px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    overflow: hidden;
    padding: 0 var(--survey-comments-padding-inline) 22px;
    width: 100%;
}

[data-color-scheme="dark"] .sr-survey-result,
[data-color-scheme="dark"] .survey-comments-panel {
    background: var(--sr-surface, var(--color-card, #111827));
}

[data-color-scheme="dark"] .survey-comments-panel {
    --survey-comment-divider: color-mix(in oklab, var(--sr-border, var(--color-default-300)) 82%, var(--color-body-bg, #111318));
}

.survey-comments-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--survey-comment-divider, var(--sr-border-soft, var(--sr-border, #d8dde6)));
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-inline: calc(-1 * var(--survey-comments-padding-inline));
    padding: 18px var(--survey-comments-padding-inline) 16px;
}

.sr-survey-page .survey-page-main .survey-comments-panel-header h2 {
    color: var(--sr-text, var(--text-strong, #242424));
    font-family: var(--font-secondary);
    font-size: var(--type-section-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-section-title-line-height);
    margin: 0;
}

.survey-comments-count {
    background: var(--sr-surface-muted, var(--color-default-100, #f5f7fb));
    border-radius: 999px;
    color: var(--sr-muted-strong, var(--sr-muted, #6b6b6b));
    display: inline-flex;
    font-size: var(--type-meta-size, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    justify-content: center;
    line-height: var(--type-meta-line-height, 1.4);
    margin-left: 4px;
    min-width: 1.75rem;
    padding: 2px 7px;
    vertical-align: 0.1em;
}

.survey-comments-empty,
.survey-comment-unavailable {
    color: var(--sr-muted, var(--text-muted, #6b6b6b));
    font-size: var(--type-small-size, 0.875rem);
    line-height: var(--type-small-line-height, 1.5);
    margin: 0;
    padding-block: 10px;
}

.survey-comment-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.survey-comment-list > .survey-comment-item {
    border-top: 1px solid var(--survey-comment-divider, var(--sr-border-soft, var(--sr-border, #d8dde6)));
    display: grid;
    gap: 10px;
    min-width: 0;
    padding-block: 18px;
    scroll-margin-top: 40px;
}

.survey-comment-list > .survey-comment-item:first-child {
    border-top: 0;
    padding-top: 2px;
}

.survey-comment-list > .survey-comment-item:last-child {
    padding-bottom: 2px;
}

.survey-comment-meta {
    align-items: center;
    color: var(--sr-muted, var(--text-muted, var(--color-default-600)));
    display: flex;
    flex-wrap: wrap;
    font-size: var(--type-meta-size, 0.75rem);
    gap: 6px 9px;
    line-height: var(--type-meta-line-height, 1.4);
}

.survey-comment-meta strong {
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
}

.survey-comment-author {
    font-weight: var(--font-weight-semibold, 600);
}

.survey-comment-meta > :not(:first-child) {
    align-items: center;
    display: inline-flex;
    gap: 9px;
}

.survey-comment-meta > :not(:first-child)::before {
    background: var(--sr-border, var(--color-default-300, #d8dde6));
    border-radius: 50%;
    content: "";
    height: 3px;
    width: 3px;
}

.survey-comment-meta-status {
    color: var(--sr-warning-text, var(--sr-muted-strong, var(--sr-muted, #6b6b6b)));
    font-weight: var(--font-weight-semibold, 600);
}

.survey-comment-date-content {
    align-items: center;
    display: inline-flex;
    gap: 3px;
}

.survey-comment-permalink {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: 1rem;
    height: 1.25em;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    width: 1.25em;
}

.survey-comment-permalink:is(:hover, :focus-visible) {
    color: var(--sr-muted-strong, var(--sr-text, var(--color-default-900)));
}

.survey-comment-permalink:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--sr-primary, var(--color-primary, #0a74ff));
    outline-offset: 2px;
}

.survey-comment-secret {
    color: var(--sr-muted, var(--text-muted, var(--color-default-600)));
}

.survey-comment-body {
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    font-size: var(--type-body-size, 1rem);
    line-height: max(var(--type-body-line-height, 1.5), 1.7);
    margin: 0;
    overflow-wrap: anywhere;
}

.survey-comment-body > :first-child,
.survey-comment-body > .markdown-editor-body > :first-child {
    margin-top: 0;
}

.survey-comment-body > :last-child,
.survey-comment-body > .markdown-editor-body > :last-child {
    margin-bottom: 0;
}

.survey-comment-actions {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.survey-comment-actions:not(:has(.btn)),
.survey-comment-actions .survey-comment-action-group:not(:has(.btn)) {
    display: none;
}

.survey-comment-form {
    display: grid;
    gap: 14px;
}

.survey-comment-action-group {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.survey-comment-action-group-trailing {
    justify-content: flex-end;
    margin-left: auto;
}

.survey-comment-action-group > form {
    display: grid;
    gap: 14px;
    margin: 0;
}

.survey-comment-form {
    border-top: 1px solid var(--survey-comment-divider, var(--sr-border-soft, var(--sr-border, var(--color-default-300))));
    margin-inline: calc(-1 * var(--survey-comments-padding-inline));
    padding: 20px var(--survey-comments-padding-inline) 0;
}

.survey-comment-form > .btn[type="submit"] {
    justify-self: end;
    min-width: 5.5rem;
}

.sr-survey-page .survey-page-main .survey-comment-form > p {
    color: var(--sr-text, var(--text-strong, #242424));
    margin: 0;
}

.survey-comment-actions summary {
    list-style: none;
}

.survey-comment-actions summary::-webkit-details-marker {
    display: none;
}

.survey-comment-action-group > .btn,
.survey-comment-action-group > form > .btn {
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line-height);
    min-height: 0;
    padding: 0;
}

.survey-comment-action-group > .btn:is(:hover, :active),
.survey-comment-action-group > form > .btn:is(:hover, :active) {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (max-width: 767px) {
    .survey-comment-action-group-trailing {
        margin-left: 0;
    }

    .survey-comments-panel {
        --survey-comments-padding-inline: 18px;
        border-radius: var(--radius, 8px);
        padding-bottom: 18px;
    }

    .survey-comment-list > .survey-comment-item {
        padding-block: 16px;
    }
}

.survey-comment-reply-source {
    color: var(--sr-muted-strong, var(--text-muted, var(--color-default-600)));
    line-height: 1.6;
    margin: 6px 0 16px;
    max-height: min(18vh, 8rem);
    overflow: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: normal;
}

.survey-comment-reply-source:focus-visible {
    outline: 2px solid var(--color-primary, #0a74ff);
    outline-offset: 2px;
}

.survey-comment-reply-source-label {
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    display: block;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.35;
    margin-top: 0;
}

.survey-comment-editor-field {
    color: var(--sr-text, var(--text-strong, #242424));
    margin: 0;
    min-width: 0;
    width: 100%;
}

.survey-comment-editor-field > label {
    display: grid;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.survey-comment-editor-field > label > :is(.form-textarea, .sr-markdown-editor-textarea) {
    max-height: min(40vh, 20rem);
    min-height: clamp(8rem, 24vh, 12rem);
    min-width: 0;
    overflow: auto;
    width: 100%;
}

.survey-comments-panel label {
    display: grid;
    gap: 6px;
}

.survey-comments-panel .survey-comment-secret-toggle {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.survey-comment-editor-dialog {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    margin-block: 1rem;
    max-width: min(46rem, calc(100% - 2rem));
    min-height: calc(100% - 2rem);
    width: calc(100% - 2rem);
}

.survey-comment-editor-dialog > .modal-content {
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.survey-comment-editor-dialog :is(.modal-header, .modal-footer) {
    flex: 0 0 auto;
}

.survey-comment-editor-dialog .modal-body {
    min-height: 0;
    min-width: 0;
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
}

.survey-comment-editor-dialog :is(.sr-ckeditor, .ck-editor) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.survey-comment-editor-dialog :is(.ck-editor__top, .ck-editor__main, .ck-sticky-panel, .ck-sticky-panel__content, .ck-toolbar, .ck-toolbar__items) {
    max-width: 100%;
    min-width: 0;
}

.survey-comment-editor-dialog .ck-toolbar__items {
    flex-wrap: wrap;
}

.survey-comment-editor-dialog .sr-ckeditor .ck-editor__editable_inline {
    height: clamp(10rem, 30vh, 15rem);
    height: clamp(10rem, 30dvh, 15rem);
    max-height: 15rem;
    min-height: 10rem;
    overflow-y: auto;
}

.sr-survey-page .sr-form-errors{display:grid;gap:6px}

.survey-comment-depth-2,
.survey-comment-depth-3 {
    border-left: 2px solid var(--sr-border, var(--color-default-300));
    padding-left: 16px;
}

.survey-comment-depth-2 {
    margin-left: 18px;
}

.survey-comment-depth-3 {
    margin-left: 36px;
}

@media (max-width: 640px) {
    .sr-survey-page .survey-page-main {
        padding: 22px 12px 42px;
    }

    .sr-survey-page .survey-page-main h1 {
        font-size: var(--type-display-size);
    }

    .survey-comment-depth-2,
    .survey-comment-depth-3 {
        margin-left: 8px;
        padding-left: 12px;
    }
}

@media (max-width: 900px) {
    .sr-survey-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sr-survey-card-grid {
        grid-template-columns: 1fr;
    }
}

.sr-survey-cover-image {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 8px;
}

.sr-survey-cover-image {
    margin: 1rem 0;
}

/* Shared mention UI used by this module comment flows. */
.sr-mention-list{border:1px solid var(--sr-border,color-mix(in oklab,var(--color-default-500,#777) 24%,transparent));border-radius:8px;color:var(--sr-text,var(--text-strong,#242424));display:grid;gap:2px;max-height:240px;overflow:auto;padding:4px;position:fixed;z-index:1200}
.sr-mention-list[hidden]{display:none}
.sr-mention-option{align-items:center;background:transparent;border-radius:6px;color:inherit;display:flex;gap:8px;justify-content:space-between;min-height:36px;padding:7px 9px;text-align:left;width:100%}
.sr-mention-option span{font-weight:var(--font-weight-semibold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-mention-option code{color:var(--sr-muted,var(--text-muted,#666));font-size:var(--type-meta-size,.78rem);font-weight:var(--font-weight-semibold);white-space:nowrap}
.sr-mention-dropdown:not([hidden]){display:grid;gap:2px;opacity:1;visibility:visible;z-index:3000}.sr-mention-dropdown .sr-mention-option{border:0;text-align:left;white-space:normal}.sr-mention-dropdown .sr-mention-option.active code{color:currentColor}.community-recipient-option-avatar{font-size: var(--type-meta-size);width:2rem}.community-recipient-option-text{display:grid;gap:1px;min-width:0}.community-recipient-option-text strong{font-weight:var(--font-weight-semibold,600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.community-recipient-option-text code{color:var(--sr-muted,var(--text-muted,#666));font-size:var(--type-meta-size,.78rem);font-weight:var(--font-weight-semibold,600)}.community-recipient-empty{color:var(--sr-muted,var(--text-muted,#666));font-size:var(--type-small-size,.875rem);line-height:var(--type-small-line-height,1.45);padding:9px 10px}
.sr-mention-empty{color:var(--sr-muted,var(--text-muted,#666));font-size:var(--type-small-size,.875rem);line-height:var(--type-small-line-height,1.45);padding:9px 10px}
.sr-mention{border-radius:4px;color:var(--sr-text,var(--text-strong,#242424));font-weight:var(--font-weight-semibold)}
.sr-mention-prefix{color:var(--sr-muted,var(--text-muted,#666));font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size: var(--type-meta-size);font-weight:var(--font-weight-medium);margin-left:1px}

.survey-toast-stack {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 1300;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 36px));
    transform: translateX(-50%);
}

.survey-toast {
    overflow-wrap: anywhere;
}
.survey-comments-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.survey-screen-frame {
    align-items: start;
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    min-width: 0;
}

.survey-screen-main {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.survey-sidebar {
    align-self: start;
    display: grid;
    gap: 18px;
    min-width: 0;
    position: sticky;
    top: 24px;
}

.survey-sidebar-section {
    min-width: 0;
}

.sr-survey-page .survey-sidebar-section .card-header {
    border-bottom: 1px solid var(--sr-border, var(--color-default-300, #d8dde6));
    padding: 16px 18px 14px;
}

.sr-survey-page .survey-sidebar-section .card-title {
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    font-size: var(--type-body-size, 1rem);
    line-height: 1.4;
    margin: 0;
}

.survey-sidebar-section .card-body {
    padding: 14px 18px 16px;
}

.sr-survey-page .survey-sidebar-summary-section .card-header {
    border-bottom-color: var(--sr-border, var(--color-default-300, #d8dde6));
    padding: calc(var(--spacing) * 3.75) calc(var(--spacing) * 5);
}

.sr-survey-page .survey-sidebar-summary-section .card-title {
    font-size: var(--type-card-title-size, var(--type-body-size, 1rem));
    font-weight: 800;
    line-height: var(--type-card-title-line-height, 1.4);
}

.survey-sidebar-summary-section .survey-sidebar-summary-body {
    display: grid;
    gap: 12px;
    padding: calc(var(--spacing) * 5);
}

.survey-sidebar-nav ul,
.survey-sidebar-list {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.survey-sidebar-nav a,
.survey-sidebar-list a {
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    display: block;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.survey-sidebar-nav a:hover,
.survey-sidebar-nav a:focus-visible,
.survey-sidebar-nav a[aria-current="page"] {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.survey-sidebar-nav a {
    font-weight: 650;
}

.survey-sidebar-list a:hover,
.survey-sidebar-list a:focus-visible {
    color: var(--color-primary-hover, var(--color-primary, var(--sr-text, #20242a)));
    text-decoration: none;
}

.survey-sidebar-list li {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.survey-sidebar-summary-title,
.survey-sidebar-comment-excerpt {
    font-size: var(--type-small-size, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
}

.survey-sidebar-summary-meta {
    color: var(--sr-muted, var(--text-muted, var(--color-default-600)));
    display: inline-flex;
    flex-wrap: wrap;
    font-size: var(--type-meta-size, .78rem);
    font-weight: var(--font-weight-medium, 500);
    gap: 4px;
    line-height: var(--type-meta-line-height, 1.4);
}

.survey-sidebar-comment-meta {
    align-items: center;
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    display: flex;
    font-size: var(--type-meta-size, .78rem);
    font-weight: var(--font-weight-normal, 400);
    gap: 4px;
    line-height: var(--type-meta-line-height, 1.4);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.survey-sidebar-comment-byline {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    white-space: nowrap;
}

.survey-sidebar-comment-byline time {
    color: var(--sr-muted, var(--text-muted, var(--color-default-600)));
}

.survey-sidebar-comment-separator {
    flex: 0 0 auto;
}

.survey-sidebar-comment-meta .survey-sidebar-comment-content {
    color: var(--sr-text, var(--text-strong, var(--color-default-900)));
    display: block;
    flex: 1 1 auto;
    font-size: var(--type-meta-size, .78rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--type-meta-line-height, 1.4);
    min-width: 0;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .survey-screen-frame {
        grid-template-columns: minmax(0, 1fr);
    }

    .survey-sidebar {
        border-top: 1px solid var(--sr-border, var(--color-default-300, #d8dde6));
        padding-top: 24px;
        position: static;
    }
}