/* ══ QC Select — a designed dropdown that keeps the native <select> ══════════
   A native <select>'s option list is painted by the OPERATING SYSTEM. It cannot
   be styled with CSS — not its font, background, spacing or corners. That is a
   browser limitation, not a missing rule, so the only way to get a designed
   dropdown is to draw one.

   The native <select> is NOT removed. It stays in the DOM as the source of
   truth, so `.value`, `.options`, `.selectedIndex`, `innerHTML +=` population,
   `change` listeners and form serialisation all keep working untouched. This
   file styles a button + panel that mirror it.

   Colours are tokens (npm run brand-doctor); greys are neutral chrome.
   Every rule on a button sets colour AND background together, never one alone
   (npm run contrast-doctor). */

.qcs { position: relative; width: 100%; }

/* The real control. Kept focusable and in the layout flow but invisible, so
   nothing that measures or focuses it breaks; it must not be display:none,
   which would drop it from form submission and from :focus. */
.qcs > select.qcs-native {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important; pointer-events: none !important;
  z-index: -1 !important; margin: 0 !important;
}

/* ── the control must be INDISTINGUISHABLE from the input beside it ────────
   This button stands in for a <select>, and a select sits in a row with text
   inputs. index.html gives every control a matched metric set that CHANGES
   with the viewport — 38px/0.9rem on a desktop, 40px/14px at 1024, 44px/16px
   at 768 — so a button with one fixed size is only ever right at one width.
   Shipped at 44px/16px it was 6px taller and ~1.6px larger in type than the
   inputs on every desktop, which is exactly how a form stops looking aligned.
   Mirror the ladder, breakpoint for breakpoint, and the two can never
   disagree. Border and radius are matched for the same reason: #767676/8px
   beside #000/4px reads as two different kinds of field. */
.qcs-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff !important; color: #111 !important;
  border: 1px solid #000 !important; border-radius: 4px !important;
  padding: 0 10px !important; margin: 0 !important;
  font-family: inherit; font-size: 0.9rem; line-height: normal;
  text-align: left; cursor: pointer; box-sizing: border-box;
  height: 38px !important; min-height: 0 !important;
}
/* index.html: inputs → 40px / 14px at this width */
@media screen and (max-width: 1024px) {
  .qcs-btn { height: 40px !important; min-height: 0 !important; font-size: 14px !important; }
}
/* index.html: inputs → 44px / 16px (16px prevents iOS zooming the page on
   focus — a functional rule, not a style one) */
@media screen and (max-width: 768px) {
  .qcs-btn { height: 44px !important; min-height: 0 !important; font-size: 16px !important; padding: 0 12px !important; }
}
.qcs-btn:hover {
  background: #fff !important; color: #111 !important;
  border-color: var(--brand) !important; filter: none;
}
.qcs-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.qcs.qcs-open > .qcs-btn {
  background: #fff !important; color: #111 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-a15);
}
.qcs-btn[disabled] {
  background: #f4f5f4 !important; color: #8a8a8a !important;
  cursor: not-allowed; border-color: #cfcfcf !important;
}
.qcs-label { flex: 1 1 auto; min-width: 0; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
/* the placeholder option reads as a prompt, not as a chosen value */
.qcs-btn.qcs-empty .qcs-label { color: #6b7280; }
.qcs-caret { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid currentColor;
             border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
             transition: transform .15s; }
.qcs.qcs-open .qcs-caret { transform: rotate(225deg) translate(-3px,-3px); }

/* ── the panel ───────────────────────────────────────────────────────────
   While open the panel is MOVED TO <body> by the script. index.html sets
   `input, select, textarea { position: relative !important; z-index: 9999
   !important }`, so every field sits high in its own stacking context, and a
   panel left nested in the form is confined to whatever stacking context an
   ancestor creates — its z-index cannot escape that context however large it
   is. That is why the sheet rendered UNDER the fields below it, and why taps
   landed on the backdrop instead of an option. As a child of <body> it is in
   the root stacking context, so it is above the page everywhere.

   Being portaled, it is `fixed` in both forms; the anchored one is placed by
   the script from the button's rect. */
.qcs-panel {
  position: fixed;
  background: #fff; border: 1px solid #e0eadb; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  z-index: 100000;              /* app header is 9999 and its sidebar 10001 */
  padding: 4px; margin: 0; list-style: none;
  display: flex; flex-direction: column; max-height: 320px;
}
/* while it still sits inside the wrapper (closed) it must not be a fixed box */
.qcs > .qcs-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); }

/* THE OPTIONS scroll, not the whole panel — so the title and the search box
   stay put and a 20-item list scrolls under them instead of pushing them away. */
.qcs-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.qcs-panel[hidden] { display: none !important; }
.qcs-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 10px; border-radius: 7px; cursor: pointer;
  font-size: 15px; color: #1a1a1a; background: #fff;
  min-height: 44px; box-sizing: border-box;
}
.qcs-opt:hover, .qcs-opt.qcs-active { background: var(--brand-a08); color: #0b100b; }
.qcs-opt[aria-selected="true"] { background: var(--brand-a15); color: #0b100b; font-weight: 700; }
.qcs-opt[aria-disabled="true"] { color: #9aa39a; background: #fff; cursor: not-allowed; }
.qcs-tick { flex: 0 0 auto; width: 14px; color: var(--brand); font-weight: 800; }
.qcs-opt[aria-selected="true"] .qcs-tick::before { content: '✓'; }
.qcs-opt-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qcs-search {
  position: sticky; top: 0; background: #fff; padding: 4px 4px 6px;
  border-bottom: 1px solid #eef2ed; margin-bottom: 4px;
}
.qcs-search input {
  width: 100% !important; height: 40px !important; font-size: 16px !important;
  padding: 8px 10px !important; line-height: normal !important;
  border: 1px solid #dcdcdc !important; border-radius: 7px !important; box-sizing: border-box;
}
.qcs-empty-msg { padding: 14px 10px; color: #7a8f78; font-size: 14px; text-align: center; }

/* ── on a phone the panel becomes a bottom sheet ──────────────────────────
     A panel anchored under the control is unreachable when the control sits low
     on a short screen and the keyboard is up. A sheet is always in the same
     place and its rows are proper thumb targets. */
@media (max-width: 720px) {
  .qcs-panel.qcs-sheet {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    width: auto !important; max-height: 62vh; border-radius: 16px 16px 0 0;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 34px rgba(0,0,0,.28);
    border: none; border-top: 1px solid #e0eadb;
  }
  .qcs-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 4px 8px; font-size: 13px; font-weight: 700; color: #0b100b;
    position: sticky; top: 0; background: #fff;
  }
  .qcs-sheet-head::before {
    content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: #d8ded7;
  }
  .qcs-close {
    background: #f0f4ef !important; color: #3a4a38 !important;
    border: 1px solid #dde8db !important; border-radius: 8px !important;
    padding: 6px 12px !important; margin: 0 !important;
    font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  .qcs-close:hover {
    background: #e6ede4 !important; color: #0b100b !important;
    border-color: var(--brand) !important; filter: none;
  }
  .qcs-opt { padding: 13px 10px; font-size: 16px; min-height: 48px; }
  /* strictly BELOW the panel's 100000. Both are children of <body>, so this
     comparison is now meaningful — before the portal they were in different
     stacking contexts and the backdrop could swallow every tap. */
  .qcs-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99999;
  }
}
.qcs-sheet-head, .qcs-close { display: none; }
@media (max-width: 720px) { .qcs-sheet-head { display: flex; } .qcs-close { display: inline-block; } }