/* ===================================================================
   Web-Fragebogen / SurveyRunner
   Modern, minimal, aufgeräumt. Reduzierte Farben, 3 Schriftgrößen.
   =================================================================== */

:root {
    --runner-bg: #fafafa;
    --runner-surface: #ffffff;
    --runner-text: #1a1a1a;
    --runner-text-muted: #6b6b6b;
    --runner-border: #e5e5e5;
    --runner-accent: var(--bs-primary, #1e5631);
    --runner-accent-soft: rgba(30, 86, 49, 0.08);
    --runner-danger: #c62828;
    --runner-danger-soft: #fde8e8;

    /* Three font sizes, ONLY these */
    --runner-fs-lg: 1.75rem;  /* Section titles, thank-you title */
    --runner-fs-md: 1.25rem;  /* Questions, body */
    --runner-fs-sm: 1rem;     /* Hints, metadata, footer */
}

/* Page shell when /app is active */
.app-shell {
    background: var(--runner-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--runner-text);
    font-size: var(--runner-fs-md);
    line-height: 1.55;
}

.app-topbar {
    background: var(--runner-surface);
    border-bottom: 1px solid var(--runner-border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-topbar-brand {
    font-size: var(--runner-fs-md);
    font-weight: 600;
    color: var(--runner-text);
}

.app-topbar .app-brand {
    color: var(--runner-text);
}

.app-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-content {
    flex: 1;
    max-width: 72rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.app-footer {
    border-top: 1px solid var(--runner-border);
    padding: 1rem 1.5rem;
    text-align: center;
    color: var(--runner-text-muted);
    font-size: var(--runner-fs-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.app-footer-separator {
    color: var(--runner-border);
}

.app-footer-link {
    padding: 0;
    font-size: var(--runner-fs-sm);
    color: var(--runner-text-muted);
    text-decoration: none;
    border: 0;
    background: transparent;
}

.app-footer-link:hover {
    color: var(--runner-text);
    text-decoration: underline;
}

/* ---------------- Runner root ---------------- */
.runner-root {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.runner-loading {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

/* ---------------- Header (dots + lang) ---------------- */
.runner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.runner-section-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.runner-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--runner-border);
    transition: all 0.15s;
}

.runner-dot-done { background: var(--runner-accent); }
.runner-dot-current {
    background: var(--runner-accent);
    width: 2rem;
    border-radius: 0.5rem;
}
.runner-dot-pending { background: var(--runner-border); }

.runner-section-progress-text {
    color: var(--runner-muted);
    font-size: var(--runner-fs-sm);
    white-space: nowrap;
}

.runner-lang-picker {
    max-width: 12rem;
    font-size: var(--runner-fs-sm);
    border-color: var(--runner-border);
}

/* ---------------- Section + items ---------------- */
.runner-section-title {
    font-size: var(--runner-fs-lg);
    font-weight: 600;
    color: var(--runner-text);
    flex: 1 1 auto;
    min-width: 0;
}

/* Tiny abort button at the far right of the runner header. Kept compact so
   it doesn't pull focus from the question content. */
.runner-abort-btn {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
}

.runner-items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Tablet: 2 items side by side */
@media (min-width: 48rem) {
    .runner-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 items side by side */
@media (min-width: 62rem) {
    .runner-items-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Single-item mode: one centered column with a comfortable max-width so the
   item doesn't stretch across a wide desktop screen. Overrides the multi-column
   responsive breakpoints above. */
.runner-items-grid.runner-single-item,
.runner-items-grid.runner-single-item > .runner-item-wrapper {
    grid-template-columns: 1fr;
}

.runner-items-grid.runner-single-item {
    justify-items: center;
}

.runner-items-grid.runner-single-item > .runner-item-wrapper {
    max-width: 36rem;
    width: 100%;
}

.runner-item-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Single-item display mode — three distinct transitions:
   • Manual navigation (Next/Back): the card rotates around its X-axis like a Rolodex page.
     Forward tilts the top edge away (and the next card rolls up from below);
     Back tilts the bottom edge away (and the previous card rolls down from above).
   • Auto-advance after answer click: a soft fade only — quick and unobtrusive.
   • Comment toggle: the card inner flips around the Y-axis, like turning a playing card. */
.runner-items-grid.runner-single-item {
    overflow-x: hidden;
    perspective: 1500px;
}

.runner-item-wrapper.runner-flip-out-forward {
    animation: runner-flip-out-forward 0.34s ease-in forwards;
    transform-origin: center center;
}

.runner-item-wrapper.runner-flip-in-forward {
    animation: runner-flip-in-forward 0.34s ease-out;
    transform-origin: center center;
}

.runner-item-wrapper.runner-flip-out-back {
    animation: runner-flip-out-back 0.34s ease-in forwards;
    transform-origin: center center;
}

.runner-item-wrapper.runner-flip-in-back {
    animation: runner-flip-in-back 0.34s ease-out;
    transform-origin: center center;
}

.runner-item-wrapper.runner-fade-out {
    animation: runner-fade-out 0.18s ease-in forwards;
}

.runner-item-wrapper.runner-fade-in {
    animation: runner-fade-in 0.22s ease-out;
}

@keyframes runner-flip-out-forward {
    0%   { opacity: 1; transform: rotateX(0); }
    100% { opacity: 0; transform: rotateX(-90deg); }
}

@keyframes runner-flip-in-forward {
    0%   { opacity: 0; transform: rotateX(90deg); }
    100% { opacity: 1; transform: rotateX(0); }
}

@keyframes runner-flip-out-back {
    0%   { opacity: 1; transform: rotateX(0); }
    100% { opacity: 0; transform: rotateX(90deg); }
}

@keyframes runner-flip-in-back {
    0%   { opacity: 0; transform: rotateX(-90deg); }
    100% { opacity: 1; transform: rotateX(0); }
}

@keyframes runner-fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes runner-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.si-comment-toggle {
    position: absolute;
    top: -1.25rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bs-white);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
    z-index: 2;
}

.si-comment-toggle:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.si-comment-toggle .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Inner answer flip — only the answer area swaps with the comment textarea. The card frame,
   number badge, comment icon and question text stay static. Grid stacking lets both faces
   share the same cell so the wrapper grows to fit the taller of the two (the textarea may
   exceed the answer options as the participant types). */
.si-answer-flip {
    perspective: 1500px;
    width: 100%;
}

.si-answer-flip-inner {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0.05, 0.2, 1);
    transform-style: preserve-3d;
}

.si-answer-flip-flipped .si-answer-flip-inner {
    transform: rotateY(180deg);
}

.si-answer-flip-front,
.si-answer-flip-back {
    grid-area: stack;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.si-answer-flip-back {
    transform: rotateY(180deg);
}

.si-comment-textarea {
    width: 100%;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .si-answer-flip-inner {
        transition: none;
    }
}

/* Outer card flip — used to reveal the feedback view (correct answer + reflection) after
   the participant answers in a test. Both faces share the same grid cell so the wrapper
   grows to fit the taller of the two — without that the reflection text on the back face
   would overflow past the card boundary, since the front face usually has fewer rows. */
.runner-card-flip {
    perspective: 1500px;
    width: 100%;
}

.runner-card-flip-inner {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0.05, 0.2, 1);
    transform-style: preserve-3d;
}

.runner-card-flip-flipped .runner-card-flip-inner {
    transform: rotateY(180deg);
}

.runner-card-flip-front,
.runner-card-flip-back {
    grid-area: stack;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.runner-card-flip-back {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .runner-item-wrapper.runner-flip-out-forward,
    .runner-item-wrapper.runner-flip-in-forward,
    .runner-item-wrapper.runner-flip-out-back,
    .runner-item-wrapper.runner-flip-in-back,
    .runner-item-wrapper.runner-fade-out,
    .runner-item-wrapper.runner-fade-in {
        animation: none;
    }

    .runner-card-flip-inner {
        transition: none;
    }
}

/* Override the si-card look for the runner context — cleaner, bigger */
.runner-item-wrapper .si-card {
    background: var(--runner-surface);
    border: 1px solid var(--runner-border);
    border-radius: 0.875rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.runner-item-wrapper .si-card.si-card-error {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.25);
}

/* Single-item mode: size to content so the card doesn't stretch over an
   over-tall preview-modal body. Multi-item rows still use height: 100% so
   side-by-side cards line up. */
.runner-items-grid.runner-single-item .si-card {
    height: auto;
}

.runner-item-wrapper .si-question {
    font-size: var(--runner-fs-md);
    line-height: 1.5;
    color: var(--runner-text);
}

.runner-item-wrapper .si-answers {
    font-size: 1.125rem;
    line-height: 1.4;
    background: var(--primary-light);
    border: 1px solid var(--primary-light);
    border-radius: 0.625rem;
    padding: 1rem;
}

.runner-item-wrapper .si-answers .si-likert-text,
.runner-item-wrapper .si-answers .si-binary-option > span:not(.material-symbols-outlined),
.runner-item-wrapper .si-answers label,
.runner-item-wrapper .si-answers .form-control {
    font-size: 1.125rem;
    line-height: 1.4;
}

.runner-item-wrapper .si-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--runner-accent-soft);
    color: var(--runner-accent);
    font-weight: 600;
    font-size: var(--runner-fs-sm);
}

.runner-item-wrapper .si-number-badge.si-number-badge-required {
    background: var(--bs-warning);
    color: var(--bs-warning-text-emphasis);
}

.runner-required-legend {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.runner-required-legend-pill {
    background: var(--bs-warning);
    color: var(--bs-warning-text-emphasis);
    padding: 0.35rem 0.9rem;
    border-radius: 999rem;
    font-size: var(--runner-fs-sm);
    font-weight: 500;
}

.si-error-message {
    color: var(--runner-danger);
    font-size: var(--runner-fs-sm);
}

/* ---------------- Validation alert ---------------- */
.runner-validation-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: var(--runner-fs-md);
    border-radius: 0.75rem;
    background: rgba(var(--warning-rgb), 0.15);
    color: var(--bs-warning-text-emphasis);
    border: 1px solid var(--bs-warning);
}

.runner-validation-alert .material-symbols-outlined {
    font-size: 1.5rem;
}

/* ---------------- Navigation (sticky footer) ----------------
   The nav bar pins itself to the bottom of the viewport while the items area
   above scrolls. Solid background + top border give it visual separation from
   the scrolling content. */
.runner-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--runner-border);
    margin-top: auto;
    background: var(--runner-bg);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.runner-nav > .runner-nav-back {
    justify-self: start;
    min-width: 12rem;
}

.runner-nav > .runner-nav-next {
    justify-self: end;
    min-width: 12rem;
}

.runner-nav > .runner-nav-preview-mode {
    justify-self: center;
    align-self: center;
}

/* ---------------- Thank you / Done ---------------- */
.runner-thankyou {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    text-align: center;
}

.runner-thankyou-icon {
    font-size: 5rem !important;
    color: var(--runner-accent);
}

.runner-thankyou-title {
    font-size: var(--runner-fs-lg);
    font-weight: 600;
}

.runner-thankyou-subtitle {
    font-size: 3rem;
    font-weight: 300;
    color: var(--runner-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.runner-thankyou-hint {
    color: var(--runner-text-muted);
    font-size: var(--runner-fs-md);
}

.runner-thankyou-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------------- Empty state ---------------- */
.runner-empty {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--runner-text-muted);
}

.runner-empty-title {
    font-size: var(--runner-fs-md);
}

/* ---------------- Code entry page ---------------- */
.app-entry {
    position: relative;
    max-width: 30rem;
    margin: 4rem auto 0;
    background: var(--runner-surface);
    border: 1px solid var(--runner-border);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.app-entry-title {
    font-size: var(--runner-fs-lg);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.app-entry-hint {
    color: var(--runner-text-muted);
    font-size: var(--runner-fs-sm);
    margin-bottom: 1.5rem;
}

.app-entry-input {
    width: 100%;
    padding: 1rem;
    font-size: var(--runner-fs-lg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
    letter-spacing: 0.15em;
    border: 1px solid var(--runner-border);
    border-radius: 0.75rem;
    background: var(--runner-bg);
    margin-bottom: 1rem;
}

.app-entry-input:focus {
    outline: 2px solid var(--runner-accent);
    outline-offset: 2px;
}

.app-entry-button {
    width: 100%;
    font-size: var(--runner-fs-md);
}

.app-entry-error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--runner-danger-soft);
    color: var(--runner-danger);
    border-radius: 0.5rem;
    font-size: var(--runner-fs-sm);
}

.app-entry-survey {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: var(--runner-fs-md);
    font-weight: 600;
    color: var(--runner-text);
}

.app-entry-version {
    max-width: 30rem;
    margin: 1rem auto 0;
    text-align: center;
    font-size: var(--runner-fs-sm);
    color: var(--runner-text-muted);
}

/* ---------------- Group code survey selection ---------------- */
.app-survey-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.app-survey-card {
    background: var(--runner-surface);
    border: 1px solid var(--runner-border);
    border-radius: 0.875rem;
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.1s;
}

.app-survey-card:hover {
    border-color: var(--runner-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.app-survey-card-title {
    font-size: var(--runner-fs-md);
    font-weight: 600;
}

.app-survey-card-meta {
    font-size: var(--runner-fs-sm);
    color: var(--runner-text-muted);
}

.app-survey-card-badge {
    align-self: flex-start;
    font-size: var(--runner-fs-sm);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--runner-accent-soft);
    color: var(--runner-accent);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 480px) {
    .app-content { padding: 1rem 0.75rem 3rem; }
    .runner-section-title { font-size: 1.375rem; }
    .runner-item-wrapper .si-card { padding: 1.125rem; }
    .runner-nav > .runner-nav-back,
    .runner-nav > .runner-nav-next { min-width: 8rem; }
}

/* ---------------- Preview modal ----------------
   The modal occupies the full viewport (minus a small gap). modal-content is a
   flex column: header on top, body fills the rest. The runner-root inside the
   body owns its own scroll: header and nav stay fixed in the body, the items
   grid scrolls when items don't fit. This avoids a body-level scrollbar that
   would appear even when content doesn't overflow. */
.survey-preview-modal .modal-dialog {
    height: calc(100vh - 1rem);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.survey-preview-modal .modal-content {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.survey-preview-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.survey-preview-modal .modal-body > .runner-root {
    flex: 1 1 auto;
    min-height: 0;
}

.survey-preview-modal .modal-body > .runner-root > .runner-items-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Reserve a sliver of room around the grid so item card focus rings
       (and item card box-shadows) aren't clipped against the scroll edge. */
    padding: 0.25rem;
    margin: -0.25rem;
}