/* ============================================================================
   listbox.css — the dropdown list the app draws itself (js/listbox.js).

   A native <select>'s open list belongs to the operating system: it ignores
   every rule in this project, so on a neumorphic screen it lands as a flat grey
   menu, and on Android it clips a long option instead of wrapping it. This is
   the list that replaces it, and the two things it must get right are the two
   the OS got wrong — it carries the skin, and it shows the whole label.

   Nothing here is scoped to a skin. The panel reads --panel, --line, --ink and
   --shadow like every other surface, so it is neumorphic under the neumorphic
   skin and flat under a flat one, without this file knowing which is on.
   ==========================================================================*/

.lb-panel {
  position: fixed;
  z-index: 9600;                    /* above a modal's own backdrop */
  min-width: 180px;
  max-width: min(92vw, 520px);
  overflow: auto;
  padding: 6px;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}

/* THE WHOLE LABEL. The reason this file exists: a row is allowed to wrap onto a
   second line rather than be cut at whatever width the platform chose. */
.lb-opt {
  padding: 10px 12px;
  border-radius: var(--r-sm, 8px);
  cursor: pointer;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.lb-opt:hover,
.lb-opt.is-cursor { background: var(--panel-2); }
/* The chosen one is stated in words as well as colour — a tick, so it survives
   a colour-blind reader and a black-and-white screenshot. */
.lb-opt.is-on { font-weight: 650; }
.lb-opt.is-on::after { content: " ✓"; color: var(--brand-2, currentColor); }
.lb-opt.is-off { opacity: .45; cursor: default; }

.lb-group {
  padding: 8px 12px 4px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
}

.lb-search {
  width: 100%;
  margin: 0 0 6px;
  /* inherits the app's own input rules, including the neumorphic well */
}

/* ---- on a phone: a sheet, not a dropdown ---------------------------------
   A list anchored under a control near the right edge of a 360px screen has
   nowhere to go, which is how it got clipped in the first place. Full width,
   from the bottom, where a thumb already is. */
.lb-veil {
  position: fixed; inset: 0; z-index: 9590;
  background: rgba(0,0,0,.34);
}
.lb-panel.lb-sheet {
  left: 0; right: 0; bottom: 0; top: auto;
  max-width: none;
  max-height: 70vh;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
}
.lb-panel.lb-sheet .lb-opt { padding: 13px 14px; }   /* 44px tap target */

/* The list is a screen thing. It can never be mid-print — it closes on scroll
   and resize — but a stray one must not put a grey block on a mark sheet. */
@media print { .lb-panel, .lb-veil { display: none !important; } }

/* ---- and the closed control ----------------------------------------------
   Independent of the list above: a <select> whose text is wider than its box
   gets cut with no ellipsis in several browsers. On a phone the field is
   already full width, so this only has to stop the text running past the edge.
   text-overflow on a select is honoured by Chrome and Safari and ignored
   elsewhere, which is the right way round — where it is ignored the behaviour
   is what it is today. */
select { text-overflow: ellipsis; }
.is-mobile select { max-width: 100%; }