/* pk.css -- V1018. THE PICKER'S OWN STYLESHEET, AND IT HAD NEVER HAD ONE.

   WHAT WAS WRONG, because it is the whole reason this file exists.

   `pk.js` (V876) draws `.pk-pop`, `.pk-srch`, `.pk-bulk`, `.pk-list`, `.pk-op`,
   `.pk-div`, `.pk-cap`, `.pk-foot`, `.pk-none`. The twenty-six rules that style
   those were written INSIDE `bingo.css`, every one of them as `#bingo .pk-pop`.
   So the picker looked right on exactly one page and nowhere else.

   V1005 put pk.js on Family Medicine and loaded `pickfilter.css` beside it,
   believing that to be the picker's shared sheet. It is not: `pickfilter.css`
   belongs to the OLDER `pickfilter.js` control (V583, still used by
   /owner/activity and /owner/deleted) and styles `.pk-pan`, `.pk-q`, `.pk-acts`,
   `.pk-grp`, `.pk-row`, `.pk-lab` -- six class names pk.js has never emitted.
   Only `.pk` and `.pk-mini` overlapped, so Family Medicine's dropdowns had
   essentially no styling at all.

   WHAT THAT LOOKED LIKE, and he reported every symptom without knowing the cause:
   the Edit-medicine Form list rendering as bare uppercase text that PUSHED the
   name, strength and unit fields down the page (no `position:absolute`, so the
   popup was in the layout); the Travel pack's time-zone list swallowing the date
   boxes beside it; and "SELECTED / ALL OPTIONS" shouting, because the popup sits
   inside a `<label>` whose own rule is `text-transform:uppercase` and there was
   nothing here to stop it inheriting.

   SO THE RULES MOVE OUT, UNSCOPED, AND BINGO KEEPS ONLY WHAT IS GENUINELY ITS
   OWN. Every tool that uses pk.js gets a styled picker, including the next one --
   which is the V583 intent that was recorded in a comment and never actually
   true of this control.

   EVERY COLOUR IS A SITE TOKEN, pickfilter.css's rule and test_v578_contrast's:
   no literal, and no `var(--token, #hex)` fallback naming a property this site
   does not declare -- that last shape pays out of the wrong palette and then
   measures green. The eight used here are the eight pickfilter.css already uses
   unscoped on the owner pages, so they are known to resolve everywhere.
   `--bg-surf3` and `--fld-fs` do NOT appear below: both are bingo-only tokens,
   and a selected row is marked by its filled box rather than by a ground this
   site cannot supply.

   THE LOOK IS THE FAMILY MEDICINE TAB MENU, his instruction. Same radius, same
   padding, same shadow, same highlighted current row as the Cabinet / Health /
   Records menus he already has -- so a tool stops having two kinds of dropdown
   in it depending on which release drew them.
*/

.pk { position: relative; display: inline-block; min-width: 0; }

/* ---------------------------------------------------------------- trigger */
.pk-btn {
  width: 100%; display: flex; align-items: center; gap: 7px; text-align: left;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line2); border-radius: 9px;
  padding: 7px 10px; font: inherit; font-size: 13.5px; line-height: 1.35;
  cursor: pointer;
}
.pk-btn:hover { border-color: var(--accent); }
.pk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/*  min-width:0 so the ellipsis on a long caption can engage. A flex item's
    automatic minimum size is its min-content, and without this the trigger
    widens instead of truncating -- the trap pickfilter.css says this project has
    paid for four times. */
.pk-cap { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pk-cap.ph { opacity: .6; }
.pk-cnt { flex: 0 0 auto; font-size: 11px; font-weight: 700;
  color: var(--accent); white-space: nowrap; }
/*  V1045 --- THE UP/DOWN PAIR. It was a single chevron that rotated 180deg on
    open; the rotation is gone with it, because a pair has no up-state to turn
    into -- it already shows both directions, which is the whole point.

    A TINTED BOX RATHER THAN A BARE GLYPH, so the trigger reads as a control
    with a handle rather than a label with a decoration. 22px square: this is
    not a separate tap target (the whole trigger is), so the 24px floor does not
    reach it -- said here because the next person will wonder. */
.pk-chev {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05;
}
.pk-chev i { font-style: normal; font-size: 8px; }
/*  V1046 --- THE TWO MARKS NAMED, not left to the `i` rule above.
    test_v1018's rule is that EVERY class the picker draws has a rule in its own
    sheet, and V1045 added `pk-up` and `pk-dn` in pk.js with neither -- the pair
    rendered correctly off the bare `i` selector, which is exactly why nothing
    looked wrong and only the suite saw it. The rule is not decoration: a class
    with no rule anywhere is a class nobody can find from the stylesheet, which
    is how a mark gets "fixed" in the wrong file six months later.
    THE TOP MARK CARRIES THE HAIRLINE that separates the pair; the bottom one
    sits flush, so the two read as one handle rather than two glyphs. */
.pk-chev .pk-up { margin-bottom: -1px; }
.pk-chev .pk-dn { margin-top: -1px; }

/* ------------------------------------------------------------------- popup */
/*  THE RULE THE WHOLE FILE IS FOR. Absolute, so opening a dropdown moves
    nothing around it -- his "only the dropdown to be moved, not the whole
    section". */
.pk-pop {
  position: absolute; z-index: 90; top: calc(100% + 5px); left: 0;
  min-width: 100%; width: max-content; max-width: 300px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line2); border-radius: 11px;
  padding: 5px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  /*  STOP INHERITING THE SHOUT. On Family Medicine the picker sits inside a
      `<label>` carrying `text-transform:uppercase`, which is why his Form list
      read SYRUP / TABLET / CAPSULE. A popup is its own surface and sets its own
      case, weight and spacing rather than wearing the label's. */
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
/*  Opens to the LEFT when the trigger is near the right-hand edge. pk.js adds
    the class after measuring; a menu that hangs off the screen is the same
    failure as one that pushes the layout. */
.pk-pop.pk-rt { left: auto; right: 0; }

.pk-srch { padding: 4px 4px 6px; }
/*  V1023 --- THE SEARCH BOX GOES THROUGH THE SITE SWITCH, and it is the one
    thing this stylesheet got wrong when it was extracted in V1018.

    13px IN A FIELD IS A ZOOM ON iOS. Safari zooms the page into any input
    whose text is under 16px, which on a phone means tapping this picker's
    search box throws the whole page sideways -- and the picker is the control
    this release put on 31 Family Medicine screens.

    THE SWITCH ALREADY EXISTS AND I DID NOT USE IT. `--fld-fs` is set to 16px
    under `@media (pointer: coarse)` in line_escape.css: the laptop keeps the
    dense size he chose on 02-Oct and a touch screen gets the only size iOS
    leaves alone. V1018 wrote a bare 13px here instead, which is exactly what
    `test_v919`'s ratchet exists to catch -- twenty-four tools had quietly
    beaten that guard once already, and this made twenty-five.

    THE FALLBACK IS THE OLD VALUE, so a page that somehow never loads the sheet
    holding the switch renders as it did before rather than jumping to 16px. */
.pk-srch input {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line2); border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: var(--fld-fs, 13px);
}
.pk-srch input::placeholder { color: var(--muted2); }

.pk-bulk { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 2px 4px 6px; }
.pk-mini {
  flex: 0 0 auto; background: var(--btn); color: var(--text);
  border: 1px solid var(--line2); border-radius: 20px;
  padding: 4px 11px; font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.pk-mini:hover { border-color: var(--accent); }

.pk-list { max-height: 268px; overflow-y: auto; }

/*  44px rows. pickfilter.css argues 34 is enough inside an open panel, and that
    is true of a mouse -- but this control is now on a medical tool used from a
    phone, and the sheet below uses 44. One number, both surfaces. */
.pk-op {
  display: flex; align-items: center; gap: 9px;
  min-height: 36px; padding: 7px 9px; border-radius: 8px;
  cursor: pointer; font-size: 13px; line-height: 1.4;
}
.pk-op:hover { background: var(--btn); }
.pk-op.on { background: var(--btn); }
.pk-op.sel { background: var(--btn); }
.pk-op:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pk-bx {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 4px;
  display: grid; place-items: center; font-size: 10px;
  color: var(--accent-fg); border: 1.5px solid var(--line2);
}
.pk-op.single .pk-bx { border-radius: 50%; }
.pk-op.sel .pk-bx { background: var(--accent); border-color: var(--accent); }
.pk-nm { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/*  "Selected" / "All people" as a shape rather than two shouted headings. The
    hairline is what makes the chosen-first list read as grouped -- unstyled, the
    same name appearing in both groups reads as a duplicate, which is exactly
    what he saw. */
.pk-div {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px 2px;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted2); font-weight: 700;
}
.pk-div::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

.pk-foot { padding: 6px 9px 3px; margin-top: 3px;
  border-top: 1px solid var(--line); font-size: 11px; color: var(--muted2); }
.pk-none { padding: 12px 9px; text-align: center; font-size: 12.5px;
  color: var(--muted2); }

/* ------------------------------------------------------- V1018: the sheet */
/*  HIS ASK: *"the drop down should be iphone style drop down"*, and on a phone
    that means a sheet from the bottom rather than a small panel hanging off a
    control his thumb is already covering.

    IT IS THE SAME PICKER. pk.js swaps the popup for a sheet under the breakpoint
    and changes nothing about what it holds, so there is one list, one search and
    one set of answers on both surfaces rather than two implementations that
    drift. */
.pk-veil {
  position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end; justify-content: center;
}
.pk-veil[hidden] { display: none !important; }   /* the V516 trap */
.pk-sheet {
  width: 100%; max-width: 560px; max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line2); border-bottom: 0;
  border-radius: 16px 16px 0 0; padding: 9px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
  text-transform: none; letter-spacing: normal;
}
.pk-grab { width: 38px; height: 4px; border-radius: 99px;
  background: var(--line2); margin: 0 auto 9px; flex: 0 0 auto; }
.pk-shh {
  flex: 0 0 auto; text-align: center; padding: 0 14px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted2);
}
.pk-sheet .pk-srch { flex: 0 0 auto; padding: 9px 12px; }
.pk-sheet .pk-bulk { flex: 0 0 auto; padding: 0 12px 8px; }
.pk-sheet .pk-list { flex: 1 1 auto; max-height: none; padding: 4px 8px; }
/*  44px here and nowhere smaller: this IS a row of targets competing for one
    thumb, which is the case pickfilter.css's 34px note explicitly excludes. */
.pk-sheet .pk-op { min-height: 44px; padding: 10px 12px; font-size: 14.5px; }
.pk-sheet .pk-div { padding: 9px 12px 3px; }
.pk-sfoot {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 9px 12px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.pk-sfoot button {
  flex: 1 1 auto; background: var(--btn); color: var(--text);
  border: 1px solid var(--line2); border-radius: 10px;
  padding: 11px 14px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.pk-sfoot button.pk-done {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
  font-weight: 700;
}

/*  A phone that has the sheet does not need the popup's own narrow-screen
    handling, but a page that loads pk.js without the sheet still might, so the
    popup keeps its full-width fallback. */
@media (max-width: 560px) {
  .pk { display: block; }
  .pk-pop { left: 0; right: 0; width: auto; max-width: none; }
}