/* ==========================================================================
   NOTAM filter — mobile dropdowns (≤768px)

   Desktop keeps the segmented groups (.notam-seg-group / .notam-seg): they work
   fine in a 420px sidebar with ~80px of spare width, and the series group is
   genuinely multi-select there. This file is the phone replacement.

   Why a native <select> and not a restyled segment or a custom bottom sheet:
   the segments measured 19px tall against Apple's 44px minimum touch target, on
   a tool read and driven one-handed in an ops environment. Widening them
   (2026-07-25) fixed the horizontal axis only — the height was never addressed,
   and three 44px-tall segments plus three more do not fit across a 375px row.
   Native hands the problem to the OS: iOS opens a full-height wheel picker with
   its own generous targets, for no custom code and no new failure modes.

   BOTH THEMES LIVE IN THIS FILE, deliberately — not split with the light rules
   in 14-light-theme.css. The chevron has to be an inline data: URI (a <select>
   cannot host a ::after pseudo-element), so its colour is hand-written per theme
   rather than inherited from a token. That is exactly the failure class that has
   shipped invisible-in-light-mode colour three times in this app, and keeping the
   pair adjacent is the guardrail.

   Loaded after 14/15 so nothing here can be clobbered by them; no selector in
   this file appears anywhere else, so load position is not otherwise load-bearing.
   ========================================================================== */

/* Hidden by default. Base rule sits outside any @media so it always wins over the
   flex display the container would otherwise take — same reasoning as the
   .app-tabs-bottom base rule in css/13-responsive.css. */
.notam-filter-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Segmented groups out, dropdowns in. */
  .notam-filter-bar .notam-seg-group {
    display: none;
  }

  .notam-filter-mobile {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  /* appearance:none is load-bearing, not cosmetic: without it iOS paints its own
     grey field and ignores every declaration below, so the closed control would
     carry none of the app's theme. The OPENED picker is still the OS's and cannot
     be styled — the accepted cost of choosing native over a custom sheet. */
  /* Height is a deliberate compromise, not a default, and it has now been walked down
     twice on device feedback: 44px (Apple HIG / WCAG 2.5.5 AAA) → 38px → 34px.
     Re-checked at 34px rather than assumed, because the previous note here set a ~36px
     floor: the binding requirement is WCAG 2.2 AA (2.5.8), which asks 24x24 CSS px, and
     34x34 clears it with room to spare. The AAA/Apple 44px figure is knowingly given up.
     What is NOT given up:
       - still ~1.8x the 19px segments this control replaced, which is the bug being fixed;
       - the OS picker it opens is full-height regardless, so the *interaction* after the
         first tap is unaffected by this number — only the initial tap target is.
     24px is the hard floor. Do not go below it. */
  .notam-select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 34px;
    padding: 0 1.45rem 0 0.55rem;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ff9f0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 9px 6px;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  /* AIS link matched to the dropdowns so the three controls read as one row rather
     than a row plus an afterthought. It was a 22px circle against 38px selects — the
     size mismatch was the visible part, but the 20px radius was doing as much damage.
     Square-ish 34x34 with the same 8px radius, border and fill as .notam-select; only
     the icon inside stays small. The base rule (css/11-notam-cards.css) keeps the pill
     shape for desktop, where it sits beside 19px segments and a circle is correct. */
  .notam-ais-link {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .notam-ais-link svg {
    width: 13px;
    height: 13px;
  }

  /* The dropdown list is OS-drawn and inherits none of the above. Set it explicitly
     or the options render as the platform default — white-on-white in light mode on
     several Android builds and on desktop Chrome. */
  .notam-select option {
    background: var(--bg-color);
    color: var(--text-main);
  }

  /* -- Light theme -------------------------------------------------------
     The group fill flips from a white wash to a slate one for the same reason
     .notam-seg-group does in 14-light-theme.css: white-on-white erases the
     control's boundary entirely. The chevron is restated in full because a
     data: URI cannot reference a CSS variable. */
  /* The AIS button has to flip with them. Its base fill (css/11-notam-cards.css) is a
     hardcoded rgba(255,255,255,0.04) with no light override — harmless while it was a
     22px circle off to one side, but now that it is the same size and shape as the
     dropdowns, a white wash sitting next to their slate one reads as a broken control.
     Mobile only: desktop has the same base mismatch, pre-existing and out of scope here
     (logged in task_plan.md). */
  body.light-theme .notam-ais-link,
  body.light-theme .notam-select {
    background-color: rgba(15, 23, 42, 0.04);
  }

  body.light-theme .notam-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d4ed8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}