/* Design tokens + light/dark palette. This page does not link
       tokens.css in its HTML, so import it here (resolves to
       /static/css/tokens.css). @import must precede all other rules. */
    @import "tokens.css";

    .touch-manipulation { touch-action: manipulation; }

    /* SurveyJS completedHtml panel — class instead of inline style. */
    .survey-completed { text-align: center; padding: 40px; }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: var(--ow-font-sans);
      background: var(--bg);
      color: var(--text);
      font-size: 16px;
      line-height: 1.6;
    }

    /* Text size — three states cycle on the A button: small → normal → large.
       Header is intentionally NOT scaled so Ctrl+= browser zoom doesn't
       balloon the top bar. */
    body.small-print { font-size: 14px; }
    body.small-print #surveyContainer { zoom: 0.85; }
    @supports not (zoom: 0.85) {
      body.small-print #surveyContainer {
        transform: scale(0.85);
        transform-origin: top center;
      }
    }

    body.large-print { font-size: 20px; }
    body.large-print #surveyContainer { zoom: 1.25; }
    @supports not (zoom: 1.25) {
      body.large-print #surveyContainer {
        transform: scale(1.25);
        transform-origin: top center;
      }
    }

    /* Skip link for keyboard nav (WCAG) */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 0;
      background: var(--primary);
      color: var(--on-primary);
      padding: 8px 16px;
      z-index: 1000;
      font-size: 1rem;
      text-decoration: none;
    }
    .skip-link:focus {
      top: 0;
    }

    header {
      background: var(--primary);
      color: var(--on-primary);
      padding: 6px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    header h1 {
      font-family: var(--ow-font-sans);
      color: inherit;
      font-size: 1rem;
      margin: 0;
      font-weight: 600;
    }

    .header-controls {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .lang-cycle,
    #btnTextSize {
      background: rgba(255,255,255,0.15);
      color: var(--on-primary);
      border: 1px solid rgba(255,255,255,0.3);
      padding: 4px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 600;
      min-height: 32px;
      min-width: 44px;
      transition: background 0.15s;
    }
    .lang-cycle:hover,
    #btnTextSize:hover {
      background: rgba(255,255,255,0.25);
    }
    .lang-cycle:focus-visible,
    #btnTextSize:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }
    #btnTextSize.active {
      background: var(--card);
      color: var(--primary);
    }

    #surveyContainer {
      max-width: 800px;
      margin: 0 auto;
      padding: 16px;
    }

    /* WCAG: visible focus on all interactive elements */
    *:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    /* SurveyJS theme overrides — medical teal palette */
    .sd-root-modern {
      --sjs-primary-backcolor: var(--primary);
      --sjs-primary-backcolor-light: var(--primary-soft);
      --sjs-primary-backcolor-dark: var(--primary-dark);
      --sjs-primary-forecolor: var(--on-primary);
      --sjs-general-backcolor: var(--card);
      --sjs-general-backcolor-dim: var(--bg);
      --sjs-general-backcolor-dim-light: var(--ow-surface-2);
      --sjs-general-forecolor: var(--text);
      --sjs-general-forecolor-light: var(--text-muted);
      font-family: var(--ow-font-sans);
    }
    .sd-title, .sd-page__title, .sd-element__title {
      font-family: var(--ow-font-sans) !important;
      color: var(--text) !important;
    }
    .sd-page__description {
      font-size: 0.95rem;
      color: var(--primary) !important;
      background: color-mix(in srgb, var(--primary) 6%, transparent);
      padding: 10px 14px;
      border-radius: 6px;
      border-left: 3px solid var(--primary);
      margin-bottom: 8px;
    }

    /* Override SurveyJS touch targets for tablet — 48dp minimum (WCAG 2.5.8) */
    .sd-item__control-label {
      min-height: 48px !important;
      display: flex !important;
      align-items: center !important;
      padding: 8px 0 !important;
    }

    .sd-btn {
      min-height: 48px !important;
      min-width: 48px !important;
      font-size: 1rem !important;
    }

    .sd-input {
      min-height: 44px !important;
      font-size: 16px !important; /* prevent iOS zoom */
    }

    /* Radio/checkbox targets */
    .sd-selectbase__item {
      min-height: 48px !important;
      padding: 4px 0 !important;
    }

    /* Rating items */
    .sd-rating__item {
      min-width: 48px !important;
      min-height: 48px !important;
    }

    /* Progress bar styling */
    .sd-progress {
      height: 8px !important;
    }
    .sd-progress__bar {
      transition: width 0.3s ease;
    }

    /* Better contrast for descriptions */
    .sd-description {
      color: var(--text-muted) !important;
      font-size: 0.95rem;
    }

    /* Navigation buttons */
    .sd-navigation__complete-btn,
    .sd-navigation__next-btn,
    .sd-navigation__prev-btn {
      min-height: 48px !important;
      padding: 12px 24px !important;
      font-size: 1rem !important;
      border-radius: 6px !important;
    }

    /* Error messages — high contrast + screen reader */
    .sd-question__erbox {
      color: var(--danger) !important;
      font-weight: 600;
    }
    .sd-question__erbox[role="alert"],
    .sd-question__erbox { role: alert; }

    /* Interactive elements */
    button, select, [onclick], .lang-cycle, #btnTextSize { cursor: pointer; }

    /* Dropdown items — touch-friendly */
    .cima-dd-item { min-height: 44px; display: flex; align-items: center; }

    @media (max-width: 600px) {
      header h1 { font-size: 1rem; }
      #surveyContainer { padding: 8px; }
      .sd-page__title { font-size: 1.1rem !important; }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * {
        transition: none !important;
        animation: none !important;
      }
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
      .sd-item__control-label {
        border: 1px solid currentColor !important;
        padding: 8px !important;
        margin: 4px 0 !important;
      }
    }

    .submit-error { color: var(--danger); }
    .submit-error p { color: var(--text); }
    .submit-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
    .submit-actions button { min-height: 44px; padding: 10px 20px; border-radius: 8px; border: 2px solid var(--primary); background: var(--primary); color: var(--on-primary); font: inherit; cursor: pointer; }
    .submit-actions button[data-submit-action="back"] { background: transparent; color: var(--primary); }

    #btn-theme-toggle { background: none; border: 1px solid color-mix(in srgb, var(--on-primary) 40%, transparent); border-radius: 6px; padding: .3rem .55rem; color: var(--on-primary); cursor: pointer; font-size: 1rem; line-height: 1; }