/* =============================================================================
   Dot UI — the shared standards layer, loaded last in EVERY Dot app.
   One accessible, tactile baseline so Dot Book, Dot Command and Dot Works feel
   like one product family. Additive only — it layers on top of each app's own
   styles and changes no layout, so nothing that works can break.

   Grounded in current standards:
   - WCAG 2.2 SC 2.5.8 target size (24px floor; 44px Apple / 48px Google comfort)
   - WCAG 2.4.7 / 2.4.11 visible focus
   - WCAG 2.3.3 reduced-motion
   - Dark-mode: our surfaces are deep teal (not pure black) with lighter tiers;
     muted text measures ~6.9:1 on the base — already AA — so this file adds
     behaviour and focus, not a recolour.
============================================================================= */

/* ---- 1. Visible keyboard focus, everywhere -------------------------------
   A lime ring on keyboard focus only (not on mouse click), so power users and
   anyone on a keyboard always know where they are. */
:focus-visible{
  outline: 3px solid var(--lime, var(--bright, #D7F75B));
  outline-offset: 2px;
  border-radius: 8px;
}
:focus:not(:focus-visible){ outline: none; }

/* ---- 2. Comfortable touch targets on touch devices -----------------------
   Desktop keeps its compact density; only coarse pointers (fingers) get the
   44px minimum the platforms recommend. Applies to the interactive classes
   across all three apps — unused selectors in any one app are harmless. */
@media (pointer: coarse){
  button, a.button, .nav-cta, .tab, .btn, .act, .chip, .action-tile,
  .report-strip, .bignav, .edtile, .edtab, .edbtn, .durbtn, .ins-btn,
  .attn-row, .arow, .mrow, .lrow, .jcard, .bottom-nav button, .nav-add,
  select, input[type="file"] + *{
    min-height: 44px;
  }
  .mini, .stg{ min-height: 40px; }
  /* icon-only controls get a full tap area even if they look small */
  .x, .close, [aria-label*="close" i], [aria-label*="back" i]{
    min-width: 44px; min-height: 44px;
  }
}

/* ---- 3. Respect reduced-motion (vestibular safety) ----------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 4. Native-app tactility --------------------------------------------
   Kill the grey tap flash and give our own subtle press feedback, so every
   button feels like it responds. Only when motion is allowed. */
*{ -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference){
  button, .btn, .act, .tab, .action-tile, .edtile, .edbtn, .ins-btn, .durbtn,
  .arow, .mrow, .lrow, .jcard, a.button, .chip{
    transition: transform .08s ease, background-color .14s ease,
                border-color .14s ease, box-shadow .14s ease;
  }
  button:active, .btn:active, .act:active, .tab:active, .action-tile:active,
  .edtile:active, .edbtn:active, .ins-btn:active, .durbtn:active, .arow:active,
  .mrow:active, .lrow:active, .jcard:active, a.button:active, .chip:active{
    transform: scale(.985);
  }
}

/* ---- 5. The obvious next step: primary actions carry a little more weight -
   Dot's rule is "one obvious next step per screen." Primary (lime) actions get
   a soft lift so the eye lands on them first, without shouting. */
.btn.go, .act.go, .edbtn.go, .ins-btn.go, .durbtn.go, .action-tile.featured,
.button-primary, .nav-add, #jSave, .bignav.primary{
  box-shadow: 0 2px 10px rgba(127, 181, 42, .22);
}
.btn.go:hover, .act.go:hover, .edbtn.go:hover, .button-primary:hover{
  box-shadow: 0 3px 14px rgba(127, 181, 42, .32);
}

/* ---- 6. Phone safe-area insets ------------------------------------------
   Keep headers and bottom bars clear of the notch and the home indicator. */
@supports (padding: max(0px)){
  header, .site-header{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .bottom-nav, .foot{
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ---- 7. Stop iOS zooming when a field is focused ------------------------- */
@media (max-width: 600px){
  input, select, textarea{ font-size: 16px !important; }
}

/* ---- 8. Consistent, on-brand text selection ------------------------------ */
::selection{ background: rgba(127, 181, 42, .35); color: #fff; }

/* ---- 9. Smoother scrolling on the scroll containers ---------------------- */
.view, main, .list, .board{ -webkit-overflow-scrolling: touch; }