/* Moved out of inline <style> so the CSP needs no 'unsafe-inline'. */
input[readonly], textarea[readonly] {
    background: #F4F7FA;
    color: #48596E;
    cursor: default;
    border-color: #E8EDF3;
  }

* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #F1F5F9; }
  body { font-family: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #0F2035; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
  a { color: #067A55; text-decoration: none; }
  a:hover { color: #04533A; text-decoration: underline; }
  input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
  ::placeholder { color: #9AA7B8; opacity: 1; font-style: italic; font-weight: 400; }
  ::-webkit-scrollbar { height: 10px; width: 10px; }
  ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  /* Phones: iOS Safari zooms into any field under 16px. Keep fields at 16px so
     the page never jumps when a BD user taps into a form. */
  /* Native pickers follow the page, not the phone's dark mode — otherwise
     Android / iOS can draw dark option text on a dark list. */
  :root { color-scheme: light; }
  @media (max-width: 767px) {
    input, select, textarea, [contenteditable="true"] { font-size: 16px !important; }
    button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    /* iOS sizes a native select once, before its options exist, then clips
       the chosen value. Drawing our own control keeps the value visible. */
    select {
      -webkit-appearance: none !important; appearance: none !important;
      min-height: 44px; min-width: 64px; line-height: 1.25;
      color: #0F2035 !important; background-color: #fff !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2366788F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important; background-position: right 10px center !important;
      padding-right: 28px !important; padding-left: 10px !important;
      box-sizing: border-box; flex-shrink: 0; max-width: 100%;
    }
    select option { color: #0F2035; background: #fff; }
    /* iOS collapses empty date fields to zero height and centres the value
       out of view; give them a real box and left-aligned text. */
    input[type="date"], input[type="time"], input[type="datetime-local"] {
      -webkit-appearance: none; appearance: none; display: block;
      min-height: 44px; min-width: 0; width: 100%; box-sizing: border-box;
      color: #0F2035; background-color: #fff; text-align: left; line-height: 1.25;
    }
    input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.25em; }
    input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 44px; box-sizing: border-box; }
  }