/* ============================================================
   APPLE HUMAN INTERFACE GUIDELINES — COMPLIANCE LAYER
   Four requirements the app did not yet meet:
     1. 44pt minimum hit target on touch pointers
     2. both light and dark appearance
     3. safe-area insets when installed on a device with a notch
     4. honouring Reduce Motion
   ============================================================ */

/* ---- 1. hit targets ----
   HIG sets 44x44pt as the minimum on touch. Desktop pointers are precise, so
   the compact 33px controls stay there and only coarse pointers get the larger
   targets — enlarging everywhere would waste space on a desktop ERP. */
@media (pointer: coarse) {
  .o-btn, .o-btn-p { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .o-ib, .o-ib-p, .o-ib-d, .o-ib-g { width: 44px; height: 44px; flex-basis: 44px; }
  .ibgrp .o-ib, .ibgrp .o-ib-p { width: 44px; height: 44px; flex-basis: 44px; }
  .o-fld { min-height: 44px; }
  .tgl, input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
  /* Most compact controls are sized with raw utility classes rather than the
     component classes, so they need naming directly. These are grown for real
     instead of being given invisible 44px overlays: in a toolbar where buttons
     sit 6px apart, overlapping hit areas would steal each other's taps, which
     is worse than a small target. Rails already wrap, so the row simply gets
     taller on a phone — which is the correct trade on touch. */
  .w-6.h-6, .w-7.h-7, .w-8.h-8 { width: 44px !important; height: 44px !important; }
  .h-6, .h-7 { min-height: 44px; }
  .chip { min-height: 26px; }
  /* segmented and pill controls are content-width; give them the minimum too */
  .px-2.h-6, .px-2\.5.h-7, .h-7.px-1\.5, .h-6.px-1\.5 { min-width: 44px; }
  /* a text-only control still needs a 44pt band to hit */
  header button, nav button { min-height: 44px; }
  /* a checkbox cell can grow its tappable area without moving the layout */
  td input[type="checkbox"], th input[type="checkbox"] { position: relative; }
  td input[type="checkbox"]::after, th input[type="checkbox"]::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* ---- 3. safe areas ----
   Installed to a home screen the app fills the display, so the notch and the
   home indicator would otherwise sit on top of the header and footer. */
@supports (padding: env(safe-area-inset-left)) {
  header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  main   { padding-left: max(env(safe-area-inset-left), 0px); padding-right: max(env(safe-area-inset-right), 0px); }
  footer { padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
  aside  { padding-left: env(safe-area-inset-left); }
  .bar, .fixed.bottom-0 { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---- 4. Reduce Motion ----
   A system preference, not a nicety: animation is removed rather than shortened. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .press:active { transform: none; }
  .lift:hover { transform: none; }
}

/* ============================================================
   APPLE PALETTE OVERRIDE
   Tailwind's CDN injects its stylesheet at runtime, so a theme set through
   tailwind.config only applies on the v3 build. This block sits at the end of
   the document, so it wins on document order regardless of which build is
   serving — the palette is then identical everywhere.
   ============================================================ */
.bg-zinc-50{background-color:#f8f9fa}.bg-zinc-100{background-color:#F1F0F0}
.bg-zinc-200{background-color:#E9ECEF}.bg-zinc-800{background-color:#212529}
.bg-zinc-900{background-color:#212529}
.text-zinc-300{color:#DEE2E6}.text-zinc-400{color:#636b73}.text-zinc-500{color:#636b73}
.text-zinc-600{color:#495057}.text-zinc-700{color:#343a40}.text-zinc-800{color:#212529}
.text-zinc-900{color:#212529}
.border-zinc-100{border-color:#f0f0f3}.border-zinc-200{border-color:#E9ECEF}
.border-zinc-300{border-color:#DEE2E6}
.divide-zinc-50>:not([hidden])~:not([hidden]){border-color:#F1F0F0}
.divide-zinc-100>:not([hidden])~:not([hidden]){border-color:#f0f0f3}
.bg-indigo-50{background-color:#f6f1f5}.bg-indigo-100{background-color:#ece1e9}
.bg-indigo-500{background-color:#8F6B85}.bg-indigo-600{background-color:#714B67}
.bg-indigo-700{background-color:#5B3A53}
.text-indigo-500{color:#8F6B85}.text-indigo-600{color:#714B67}.text-indigo-700{color:#5B3A53}
.border-indigo-200{border-color:#d9c4d3}.border-indigo-300{border-color:#bd9bb2}
.border-indigo-400{border-color:#a0728f}.border-indigo-600{border-color:#714B67}
.accent-indigo-600{accent-color:#714B67}
.bg-emerald-50{background-color:#eaf7ee}.bg-emerald-100{background-color:#d7f0de}
.bg-emerald-600{background-color:#007f7c}
.text-emerald-600{color:#007f7c}.text-emerald-700{color:#1d7233}
.border-emerald-200{border-color:#aee0bd}.border-emerald-300{border-color:#78cb95}
.bg-rose-50{background-color:#fdeef0}.bg-rose-100{background-color:#fbdde1}
.bg-rose-600{background-color:#c23b37}
.text-rose-500{color:#dc2b45}.text-rose-600{color:#c23b37}.text-rose-700{color:#b00012}
.border-rose-200{border-color:#f6bcc4}.border-rose-300{border-color:#ef8b98}
.bg-amber-50{background-color:#fef4e8}.bg-amber-100{background-color:#fde8cd}
.text-amber-600{color:#9a6300}.text-amber-700{color:#8f4000}
.border-amber-200{border-color:#facf9c}
.bg-teal-50{background-color:#e6f7f4}.text-teal-600{color:#00a396}.text-teal-700{color:#00877d}
.bg-violet-600{background-color:#7d3ced}.text-violet-600{color:#7d3ced}
.border-violet-200{border-color:#ddcafb}
.bg-sky-600{background-color:#8F6B85}.text-sky-600{color:#8F6B85}
.rounded-lg{border-radius:12px}.rounded-xl{border-radius:14px}.rounded-2xl{border-radius:18px}
.shadow-2xl{box-shadow:0 12px 40px -12px rgba(0,0,0,.25)}
.shadow-md{box-shadow:0 2px 6px -1px rgba(0,0,0,.06),0 4px 12px -2px rgba(0,0,0,.08)}

/* ============================================================
   2. DARK APPEARANCE
   Apple's dark palette is not an inversion: the canvas is true black, surfaces
   step up in elevation through greys, and the accent brightens so it holds
   against a dark ground. Screen only — printed documents stay on white paper.
   ============================================================ */