/*  ============================================================
    OECTA → SurveyJS v3 Theme Adapter
    ============================================================
    Maps the OECTA design tokens (oecta-tokens.css) onto SurveyJS
    v3's --sjs2-* design tokens. Load AFTER survey-core.min.css
    and AFTER oecta-tokens.css.

    WHY THIS FILE EXISTS
    SurveyJS v3 defines all ~1,650 of its tokens under
    :where(.sd-theme-root) — a zero-specificity selector. A plain
    .sd-theme-root rule therefore wins outright, so this file needs
    NO !important anywhere.

    It replaces the THEMING half of the ~245 scattered .sd-* overrides
    that previously fought survey-core.css with !important. Measured on
    OT Survey/preview.html (49 .sd- rules): 21 pure theming rules are
    retired outright, 15 pure layout rules must be KEPT, and 13 mixed
    rules lose only their colour/type/border declarations. Do not
    bulk-delete every .sd- rule — layout and page composition stay.

    Requires SurveyJS >= 3.0. Inert against v2 (the --sjs2-* tokens
    simply go unused), so it is safe to ship ahead of a version bump.
    ============================================================ */

/*  ⚠️ WHY THE VALUES BELOW ARE LITERAL HEX, NOT var(--oecta-*)
    The advisory CSS-lint hook will flag the raw hex in this file and
    suggest tokens. Do NOT make that change. Two independent reasons:

    1. This adapter ships to surfaces that never load oecta-tokens.css —
       `Meeting Registrations 2/survey.html` and `OT Survey/preview.html`
       both define their own local `:root` vars (`--navy`, `--amber`)
       instead. `var(--oecta-primary-container)` resolves to nothing
       there, and the brand silently falls back to SurveyJS teal.
    2. The brand 400/700/800 steps MUST be literal — see the iOS note
       below. That is the whole mitigation.

    This file is the token BRIDGE. Literals are its job; it is the one
    place besides oecta-tokens.css where they belong.
    ------------------------------------------------------------ */

/*  ── Brand ramp ────────────────────────────────────────────────
    SurveyJS derives 400/700/800 from 600 with relative colour:
        hsl(from <600> h s calc(l * 1.2 | 0.85 | 0.75))
    iOS Safari 16.4–17.6 implements an older spec draft where
    unitless channel calculations resolve incorrectly (MDN BCD
    css.types.color.hsl → relative_syntax: partial_implementation).
    iPhone Safari is the PRIMARY device for these portals, so all
    four steps are pinned to literal hex. Values below were computed
    from the formulas above in Chromium and round-trip exactly
    against an `hsl(from <base> h s l)` identity check.
    ------------------------------------------------------------ */

.sd-theme-root {
  /* OECTA Navy — --oecta-primary-container #204164 */
  --sjs2-color-project-brand-400: #264e78;
  --sjs2-color-project-brand-600: #204164;
  --sjs2-color-project-brand-700: #1b3755;
  --sjs2-color-project-brand-800: #18314b;

  /* Neutral ramp — shift SurveyJS's warm greys onto OECTA's cooler
     surfaces. These three drive --sjs2-color-bg-basic-{primary,
     secondary,tertiary}; gray-900 drives --sjs2-color-fg-basic-primary. */
  --sjs2-palette-gray-000: #ffffff;   /* --oecta-surface-lowest   */
  --sjs2-palette-gray-100: #f4f3f6;   /* --oecta-surface-low      */
  --sjs2-palette-gray-150: #eeedf1;   /* --oecta-surface-container */
  --sjs2-palette-gray-900: #1a1c1e;   /* --oecta-on-surface       */

  /* Typography — --oecta-font-body. base-unit-font-size drives every
     size through x100..x600 multipliers; the default body size is
     x200 = 16px, which also satisfies the iOS "no zoom on focus"
     16px input rule. Do not lower it. */
  --sjs2-typography-font-family-text: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --sjs2-base-unit-font-size: 8px;

  /* Geometry — 8px grid matches --oecta-space-* / --oecta-radius-md */
  --sjs2-base-unit-spacing: 8px;
  --sjs2-base-unit-radius: 8px;
  --sjs2-base-unit-size: 8px;

  /* Survey canvas — v3 paints .sd-root-modern::before with this token.
     Its default (#edf9f7) is a mint tint derived from SurveyJS's own teal
     brand and reads as a foreign wash behind OECTA pages. Transparent lets
     the host page surface show through, as it did under v2. */
  --sjs2-color-utility-surface-survey: transparent;

  /* NO-LINE RULE ────────────────────────────────────────────────
     v3 rings every panel/question with a 1px border:
       --sjs2-color-component-panel-*-default-border
         -> --sjs2-color-border-basic-secondary
         -> --sjs2-palette-gray-250  (#d4d4d4)
     The OECTA design system forbids 1px borders for sectioning, so these
     are cleared. Targeted at the panel tokens rather than the shared
     border-basic-secondary, so INPUT borders and the hovered / focused /
     invalid rings (separate tokens) all keep working. */
  --sjs2-color-component-panel-default-border: transparent;
  --sjs2-color-component-panel-dynamic-default-border: transparent;
  --sjs2-color-component-panel-nested-default-border: transparent;
  --sjs2-color-component-panel-simple-default-border: transparent;
}

/*  ── Elevation ─────────────────────────────────────────────────
    With the sectioning border gone, framed elements are separated by
    tone + an ambient shadow instead. OECTA shadows are tinted with the
    navy on-surface colour, never pure black.
    ------------------------------------------------------------ */
.sd-theme-root .sd-element--with-frame {
  box-shadow: 0 2px 8px rgba(32, 65, 100, 0.05);
}

/*  ── Amber variant (honourees / retirement) ────────────────────
    Replaces App._applyHonoureeTheme's runtime applyTheme() call.
    Swapping brand-600 alone is NOT safe: v3 chains foreground and
    border colours off the brand ramp, and amber fails WCAG AA in
    every one of those roles. Measured against #ffffff / #f39c12:

      amber-600 as text on white .................. 2.19:1  FAIL (4.5)
      white label on an amber-600 button .......... 2.19:1  FAIL (4.5)
      amber-600 as a UI border/ring on white ...... 2.19:1  FAIL (3.0)
      amber-800 as a UI border/ring on white ...... 3.70:1  PASS (3.0)
      navy-800 label on an amber-600 button ....... 6.06:1  PASS (4.5)

    So amber is a BACKGROUND FILL ONLY. Text, labels and borders are
    re-pinned below. This is the OECTA "amber is never text" rule
    expressed in v3's token vocabulary.
    ------------------------------------------------------------ */
.sd-theme-root.oecta-theme-honouree {
  --sjs2-color-project-brand-400: #f6b144;
  --sjs2-color-project-brand-600: #f39c12;   /* --oecta-accent — fill only */
  --sjs2-color-project-brand-700: #d3860b;
  --sjs2-color-project-brand-800: #ba7609;

  /* Brand-coloured TEXT stays navy — amber on white is 2.19:1 */
  --sjs2-color-fg-brand-primary: #1b3755;
  --sjs2-color-fg-brand-primary-dim: #18314b;

  /* Label ON an amber fill. v3 defaults this to gray-000 (white),
     which is 2.19:1 on amber. Navy-800 gives 6.06:1. */
  --sjs2-color-fg-brand-on-primary: #18314b;
  --sjs2-color-border-brand-on-primary: #18314b;

  /* Brand BORDER / ring: amber-600 is 2.19:1 against white and fails
     the 3:1 non-text contrast minimum. amber-800 clears it at 3.70:1. */
  --sjs2-color-border-brand-primary: #ba7609;
}

/*  ── Warm-paper variant (feedback forms) ───────────────────────
    Replaces the 9-variable inline block in feedback.html.
    ------------------------------------------------------------ */
.sd-theme-root.oecta-theme-feedback {
  --sjs2-palette-gray-000: #fffdf8;
  --sjs2-palette-gray-100: #fcfbf7;
  --sjs2-palette-gray-150: #f7f5ef;
}

/*  ── Dark mode ─────────────────────────────────────────────────
    OECTA dark mode is an opt-in body.dark-mode class, not a media
    query — mirror that here rather than using prefers-color-scheme.
    ------------------------------------------------------------ */
body.dark-mode .sd-theme-root {
  --sjs2-color-project-brand-400: #7aade3;
  --sjs2-color-project-brand-600: #4a90d9;   /* --oecta-primary-container (dark) */
  --sjs2-color-project-brand-700: #2b7acc;
  --sjs2-color-project-brand-800: #266cb4;

  --sjs2-palette-gray-000: #1e293b;   /* --oecta-surface-lowest (dark) */
  --sjs2-palette-gray-100: #1a2332;   /* --oecta-surface-low     (dark) */
  --sjs2-palette-gray-150: #243044;   /* --oecta-surface-container (dark) */
  --sjs2-palette-gray-900: #e2e8f0;   /* --oecta-on-surface      (dark) */

  /* v3 points fg-brand-primary at brand-700. On the darkest OECTA
     surface (#1e293b) that is 3.31:1 — below AA. brand-400 gives
     6.21:1. Light text needs the LIGHT end of the ramp, so the
     direction inverts here; do not "fix" this back to 700. */
  --sjs2-color-fg-brand-primary: #7aade3;
  --sjs2-color-fg-brand-primary-dim: #9cc4ea;

  /* on-primary follows gray-000, which dark mode remaps to #1e293b —
     4.38:1 on the #4a90d9 button, just under AA. --oecta-surface
     (#0f1419) gives 5.54:1. */
  --sjs2-color-fg-brand-on-primary: #0f1419;
  --sjs2-color-border-brand-on-primary: #0f1419;
}

/*  ── Touch targets (mobile) ────────────────────────────────────
    SurveyJS sizes radio/checkbox rows off --sjs2-base-unit-size (8px),
    giving a 24px-high choice row — measured at 375x812 on the real
    OT Survey schema. WCAG 2.2 AA (2.5.8 Target Size Minimum) wants
    24px, but the OECTA mobile contract is 44px, and iPhone Safari is
    the primary device. Raising base-unit-size globally would rescale
    every control, so the row height is set directly instead.
    ------------------------------------------------------------ */
@media (max-width: 768px) {
  .sd-theme-root .sd-selectbase__label,
  .sd-theme-root .sd-item.sd-radio,
  .sd-theme-root .sd-item.sd-checkbox {
    min-height: 44px;
  }
  .sd-theme-root .sd-selectbase__label {
    display: flex;
    align-items: center;
  }
}

/*  ── v3 navigation buttons — REGRESSION FIX, do not remove ─────
    v3 replaced `<input type="button">` with
        <button class="sd-action sd-navigation__next-btn
                       sd-action--brand sd-action--tertiary-surface">
          <span class="sd-action__title">Next</span>
        </button>
    Two things changed at once: the label moved into a child <span>,
    and v3 styles the button as a "tertiary surface" action —
    transparent background, brand-COLOURED text.

    Every OECTA surface paints its own solid fill on these buttons and
    sets `color` on the BUTTON:
      Meeting Registrations 2/style2.css:5618-5620  navy gradient + #ffffff
      survey.html / OT Survey/preview.html          --grad-navy + #fff !important
      feedback.html                                 amber + #3a2400, navy + #fff
      forms-member.js (_EDITORIAL_CSS)              navy + #fff, amber + #3a2a06

    A colour set on the button no longer reaches the label, because the
    span carries its own. `!important` on the button does NOT help — the
    span is a different element, so it wins on its own declaration.
    Result under v3: navy label on a navy pill, i.e. an INVISIBLE
    "Next"/"Submit" button on every member-facing survey.

    Making the title inherit restores every one of those rules at once,
    including feedback.html's deliberate dark-on-amber label. Keep this
    even after the Phase C cleanup — it is a v3 compatibility shim, not
    a theming override.
    ------------------------------------------------------------ */
.sd-theme-root .sd-action__title,
.sd-theme-root .sd-navigation__next-btn .sd-action__title,
.sd-theme-root .sd-navigation__prev-btn .sd-action__title,
.sd-theme-root .sd-navigation__complete-btn .sd-action__title,
.sd-theme-root .sd-navigation__preview-btn .sd-action__title,
.sd-theme-root .sd-navigation__start-btn .sd-action__title {
  color: inherit;
}

.sd-theme-root .sd-navigation__complete-btn,
.sd-theme-root button.sd-navigation__complete-btn {
  font-family: var(--sjs2-typography-font-family-text);
}

/*  ── iOS Safari < 16.4: no relative colour at all ──────────────
    Relative colour syntax landed in Safari 16.4. Below that, all 84
    of v3's `rgba(from … r g b / …)` tokens are invalid at
    computed-value time and fall back.

    Most of that degrades harmlessly — the 30 secondary/tertiary
    tints, 21 disabled states and 11 chart tints are all non-critical,
    and every BASE token is safe (bg-basic-primary → gray-000,
    fg-basic-primary → gray-900, bg-brand-primary → brand-600,
    fg-brand-on-primary → gray-000 — none use relative colour).

    The exception is the set below. These resolve to
    `--sjs2-opacity-hidden` (= 0), i.e. deliberately INVISIBLE — the
    unselected half of a Yes/No or button-group control. If they fall
    back they become VISIBLE, drawing a phantom box around the
    un-chosen option. OT Survey is full of boolean questions, so pin
    them to transparent where relative colour is unsupported.
    ------------------------------------------------------------ */
@supports not (color: rgb(from white r g b)) {
  .sd-theme-root {
    --sjs2-color-component-boolean-item-false-default-bg: transparent;
    --sjs2-color-component-boolean-item-false-default-border: transparent;
    --sjs2-color-component-boolean-item-false-readonly-border: transparent;
    --sjs2-color-component-boolean-item-false-design-bg: transparent;
    --sjs2-color-component-boolean-item-false-design-border: transparent;
    --sjs2-color-component-buttongroup-item-false-default-bg: transparent;
    --sjs2-color-component-buttongroup-item-false-default-border: transparent;
    --sjs2-color-component-buttongroup-item-false-readonly-border: transparent;
    --sjs2-color-component-tagbox-item-default-mask-stop-2: transparent;
  }
}