/* =====================================================================
   The Product and Activity pickers — the fields that open them and the two
   modals (partials/picker-field.php, partials/product-modal.php,
   partials/activity-picker.php).

   Loaded by the directory (/companies, and the Who Buys / Who Sells results)
   and by the homepage, whose hero search opens the same two modals. It was
   part of directory.css until the homepage needed it: loading the whole of
   that sheet on the homepage would have brought the directory's own
   `.field`, `.hero` and `.chips` rules with it, and those names are the
   homepage's too.

   The pills, chips, search box and the Show button are picker-page.css's;
   the modal shell is mesteel.css's.
   ===================================================================== */

/* ---------- The Product and Activity fields ----------
   The row a picker field sits in: its summary button, and Browse. */
.prod-f .prod-row{display:flex;align-items:baseline;gap:8px;min-width:0}
.prod-f .prod-browse{flex:none;font-size:11.5px;font-weight:700;color:var(--blue);
  text-decoration:none;white-space:nowrap}
.prod-f .prod-browse:hover{text-decoration:underline}

/* One shape for both (`.prod-f.act-f`): the selection's line, or "Any
   product" / "Any activity" in the placeholder grey, and Browse. A button,
   because both open a picker modal rather than going anywhere. */
.act-f .act-pick{flex:1 1 auto;min-width:0;display:block;margin-top:3px;padding:0;border:0;
  background:none;font:inherit;font-size:15px;font-weight:700;color:var(--ink);
  text-align:start;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-f .act-pick.any{color:var(--faint)}
.act-f .act-pick:hover{color:var(--blue);transform:none}
.act-f .act-pick:focus-visible{outline:none;text-decoration:underline;color:var(--blue)}
.act-f .prod-browse{padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
.act-f .prod-browse:hover{transform:none}
.act-f{cursor:pointer}

/* ---------- The two picker modals (partials/product-modal.php and
   partials/activity-picker.php) ----------
   The modal shell is mesteel.css's; the pills, chips, search box and the
   Show button are picker-page.css's. What is here is the two columns: the
   groups on the left, the open group on the right, each scrolling on its
   own so neither the search nor the buttons leave the screen. */
.modal-pan.ap-pan{max-width:1000px;height:min(760px, calc(100vh - 48px))}
.ap-top{flex:none;display:flex;flex-direction:column;gap:10px;padding:14px 22px 12px;
  border-bottom:1px solid var(--line)}
.ap-top .pick-search input{height:42px}
.ap-top .pick-chips{max-height:76px;overflow-y:auto}
.ap-body{flex:1;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr)}
.ap-rail{overflow-y:auto;min-height:0;padding:10px;border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;background:var(--bg)}
.ap-g{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;
  border:0;border-radius:12px;background:none;font:inherit;font-size:14px;font-weight:600;
  color:#334155;text-align:start;cursor:pointer}
.ap-g:hover{background:#fff;transform:none}
.ap-g.on{background:#fff;color:var(--ink);font-weight:800;box-shadow:0 1px 0 rgba(15,31,74,.06),0 0 0 1px var(--line)}
.ap-g:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ap-g .act-ico{flex:none}
.ap-gn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-g em{flex:none;font-style:normal;font-size:11px;font-weight:800;min-width:22px;
  text-align:center;padding:2px 7px;border-radius:999px;background:var(--accent-10);color:var(--accent-ink)}
.ap-pane{overflow-y:auto;min-height:0;padding:6px 20px 16px}
.ap-grp .pc-h{padding:12px 0 8px}
.ap-grp .pc-h .sp{flex:1}
.ap-hit .pc-lvl{gap:8px}
.ap-hn{font-size:14px}
.ap-pane .pick-none{margin-top:14px}
.ap-f{flex-wrap:wrap}
/* A search hit's sub-group, beside the name: out of the tree "Hot Rolled" is
   four different products. */
.pm-sub{font-weight:500;color:var(--mute)}
.ap-f .seg2{flex:none}
.ap-sum{font-size:13px;color:var(--mute);min-width:0}

/* A phone: the shell is already a full-screen sheet (mesteel.css). The groups
   become a strip across the top, scrolled sideways inside itself — the page
   never is — and the open group fills the rest. */
@media (max-width:640px){
  .modal-pan.ap-pan{height:100vh;height:100dvh}
  .ap-top{padding:12px 16px 10px}
  .ap-body{display:flex;flex-direction:column}
  .ap-rail{flex:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px 12px;
    gap:6px;border-inline-end:0;border-bottom:1px solid var(--line);scrollbar-width:thin}
  .ap-g{width:auto;flex:none;min-height:40px;max-width:220px;background:#fff;
    box-shadow:0 0 0 1px var(--line)}
  .ap-g.on{box-shadow:0 0 0 2px var(--accent)}
  .ap-pane{flex:1;padding:4px 16px 14px}
  .ap-grp .pc-h .sp{display:none}
  .ap-sum{flex:1 1 100%}
  .ap-f{gap:8px;padding:12px 16px}
  .ap-f .btn{flex:1 1 auto;white-space:nowrap;padding:12px 10px;font-size:14px}
}